/* ============================================================
   CLIENTIA WEB v5 — landing y documentos legales
   ------------------------------------------------------------
   CONCEPTO: "el expediente sobre el escritorio".
   El navy institucional es la mesa. El blanco es el papel: todo lo
   que la aplicación PRODUCE (el asiento de bitácora, las fichas, el
   contrato) aparece como una hoja blanca apoyada sobre el azul. El
   magenta es lo único que se enciende, y el cyan solo vive dentro
   del gradiente de marca.

   UN SOLO MUNDO: la página no salta de claro a oscuro. Es azul de
   principio a fin, y lo blanco son objetos dentro de ese mundo.

   Cómo funciona la tinta: los tokens de texto se declaran para el
   fondo azul. Cualquier superficie blanca lleva la clase .cl-papel,
   que vuelve a declarar esos mismos tokens en navy. Así ningún texto
   puede quedar blanco sobre blanco: hereda el juego correcto.

   Esquinas (regla fija): superficies 16px · campos y chips 10px ·
   botones pastilla.
   ============================================================ */

/* ---------- 1. Tipografías propias (no se llama a Google) ---------- */
/* Geist y Geist Mono, licencia SIL OFL, servidas desde este servidor
   para no filtrarle la IP del visitante a un tercero. */
/* El rango va 100-900 porque el archivo es variable y los cubre todos.
   Declararlo mas corto hace que el navegador recorte en silencio: pedir 800
   devuelve 700 y la jerarquia de pesos se aplasta. */
@font-face {
    font-family: 'Geist';
    src: url('/styles/fuentes/geist-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('/styles/fuentes/geistmono-latin.woff2') format('woff2');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}

/* ---------- 2. Fichas de color y medida ---------- */
:root {
    /* La mesa */
    --fondo: #070F2B;
    --fondo-alto: #0A1A44;   /* el navy institucional exacto */
    --fondo-hondo: #050A1C;
    --superficie: #FFFFFF;

    /* Tinta sobre la mesa (azul) */
    --texto: #FFFFFF;
    --texto-2: rgba(255, 255, 255, 0.74);
    --texto-3: rgba(255, 255, 255, 0.56);
    --linea: rgba(255, 255, 255, 0.12);
    --linea-firme: rgba(255, 255, 255, 0.26);

    /* El acento se enciende */
    --acento: #FF4DFF;
    --acento-velo: rgba(255, 77, 255, 0.10);
    --acento-linea: rgba(255, 77, 255, 0.38);
    --cian: #00D2FF;
    --marca: linear-gradient(100deg, #00D2FF 0%, #6E4FE3 52%, #FF4DFF 100%);

    --ok: #34D399;
    --alerta: #FF8A6B;

    --r: 16px;
    --r-chico: 10px;
    --r-pastilla: 999px;

    --fuente: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ancho: 1180px;
    --canal: clamp(20px, 5vw, 44px);
    --aire: clamp(84px, 10vw, 152px);

    --sombra: 0 2px 6px rgba(0, 0, 0, 0.18), 0 18px 44px rgba(0, 0, 0, 0.26);
    --sombra-alta: 0 4px 10px rgba(0, 0, 0, 0.20), 0 40px 90px rgba(0, 0, 0, 0.42);

    --curva: cubic-bezier(0.16, 1, 0.3, 1);
    --curva-sello: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Cualquier hoja blanca reescribe la tinta. Esta es la pieza que
   hace imposible el texto blanco sobre fondo blanco. */
.cl-papel {
    --texto: #0A1A44;
    --texto-2: #465278;
    --texto-3: #5F6A8C;
    --linea: rgba(10, 26, 68, 0.10);
    --linea-firme: rgba(10, 26, 68, 0.20);
    --acento: #A400A4;
    --acento-velo: rgba(164, 0, 164, 0.06);
    --acento-linea: rgba(164, 0, 164, 0.26);
    background: var(--superficie);
    color: var(--texto);
}

/* ---------- 3. Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
    font-family: var(--fuente);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--acento); color: #fff; }

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
    border-radius: 4px;
}

.cl-salto {
    position: absolute; left: 12px; top: -60px; z-index: 500;
    background: var(--superficie); color: #0A1A44;
    padding: 11px 20px; border-radius: var(--r-pastilla);
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
    transition: top 0.2s var(--curva);
}
.cl-salto:focus { top: 12px; }

.ic {
    width: 1em; height: 1em;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    display: inline-block; vertical-align: -0.13em;
    flex-shrink: 0;
}

/* ---------- 4. Rejilla y piezas repetidas ---------- */
.cl-marco {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding-inline: var(--canal);
}

.cl-seccion { padding-block: var(--aire); position: relative; }
.cl-seccion--pegada { padding-top: 0; }

/* La regla de marca. Donde el navegador sabe seguir el scroll, se
   llena a medida que se baja; donde no, queda como cinta fija. */
.cl-regla-marca {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px; z-index: 300;
    background: rgba(255, 255, 255, 0.06);
}
.cl-regla-marca::after {
    content: ''; display: block; height: 100%;
    background: var(--marca);
    transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
    .cl-regla-marca::after {
        transform: scaleX(0);
        animation: cl-avance linear both;
        animation-timeline: scroll();
    }
}
@keyframes cl-avance { to { transform: scaleX(1); } }

.cl-antetitulo {
    display: inline-flex; align-items: center; gap: 11px;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--texto-3);
    margin-bottom: 22px;
}
.cl-antetitulo::before {
    content: ''; width: 22px; height: 1.5px;
    background: var(--acento);
}

.cl-titular {
    font-size: clamp(2.05rem, 4.2vw, 3.35rem);
    font-weight: 600;
    letter-spacing: -0.034em;
    line-height: 1.06;
    max-width: 19ch;
    color: var(--texto);
}
.cl-titular em {
    font-style: italic;
    color: var(--acento);
    line-height: 1.14;
    padding-bottom: 2px;
}

.cl-bajada {
    font-size: clamp(1rem, 1.5vw, 1.14rem);
    line-height: 1.72;
    color: var(--texto-2);
    max-width: 56ch;
    margin-top: 24px;
}

.cl-cabecera-seccion { margin-bottom: clamp(48px, 5.5vw, 76px); }

/* Aparición al entrar en pantalla. Solo se esconde si el JS vive. */
.cl-js .cl-revelar {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s var(--curva), transform 0.85s var(--curva);
    transition-delay: calc(var(--i, 0) * 80ms);
}
.cl-js .cl-revelar.cl-visible { opacity: 1; transform: none; }

/* ---------- 5. Botones ---------- */
.cl-boton {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--superficie); color: #0A1A44;
    padding: 15px 28px;
    border: none; border-radius: var(--r-pastilla);
    font-size: 0.94rem; font-weight: 600; letter-spacing: -0.005em;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform 0.3s var(--curva), box-shadow 0.3s var(--curva), color 0.3s var(--curva);
}
/* El brillo de marca entra desde la izquierda al pasar el mouse. */
.cl-boton::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--marca);
    transform: translateX(-101%);
    transition: transform 0.5s var(--curva);
}
.cl-boton:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(255, 77, 255, 0.28);
}
.cl-boton:hover::before { transform: none; }
.cl-boton:active { transform: translateY(0); }
.cl-boton--chico { padding: 11px 21px; font-size: 0.85rem; }
.cl-boton--grande { padding: 18px 36px; font-size: 1rem; }

.cl-flecha {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--texto); text-decoration: none;
    font-size: 0.94rem; font-weight: 500;
    padding: 15px 4px;
    border-bottom: 1.5px solid var(--linea-firme);
    transition: color 0.25s, border-color 0.25s;
}
.cl-flecha .ic { transition: transform 0.3s var(--curva); }
.cl-flecha:hover { color: var(--acento); border-color: var(--acento-linea); }
.cl-flecha:hover .ic { transform: translateX(5px); }

/* ---------- 6. Barra superior ---------- */
.cl-barra {
    /* top:3px para quedar justo debajo de la cinta de marca, que va fija. */
    position: sticky; top: 3px; z-index: 200;
    background: rgba(7, 15, 43, 0.72);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--linea);
}
.cl-barra__in { height: 74px; display: flex; align-items: center; gap: 18px; }
.cl-barra__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.cl-barra__logo img { height: 38px; width: auto; }
.cl-barra__logo b {
    font-size: 1.24rem; font-weight: 600; letter-spacing: -0.045em;
    color: var(--texto);
}
.cl-barra__nav { display: none; align-items: center; gap: 32px; }
.cl-barra__nav a {
    position: relative;
    font-size: 0.88rem; font-weight: 500;
    color: var(--texto-2); text-decoration: none;
    padding: 6px 0;
    transition: color 0.25s;
}
.cl-barra__nav a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1.5px; background: var(--acento);
    transition: right 0.35s var(--curva);
}
.cl-barra__nav a:hover { color: var(--texto); }
.cl-barra__nav a:hover::after { right: 0; }
.cl-barra__cta { display: none; }

.cl-hamburguesa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--linea-firme); border-radius: var(--r-pastilla);
    background: transparent; color: var(--texto); cursor: pointer;
    font-size: 1.1rem;
    transition: border-color 0.25s, background 0.25s;
}
.cl-hamburguesa:hover { border-color: var(--acento); background: var(--acento-velo); }

.cl-menu-movil {
    display: none;
    border-bottom: 1px solid var(--linea);
    background: var(--fondo-alto);
    position: sticky; top: 77px; z-index: 199;
}
.cl-menu-movil.cl-abierto { display: block; }
.cl-menu-movil a {
    display: block;
    padding: 16px var(--canal);
    text-decoration: none; font-weight: 500;
    color: var(--texto-2);
    border-top: 1px solid var(--linea);
}
.cl-menu-movil a:first-child { border-top: none; }

/* ---------- 7. Portada ---------- */
.cl-portada {
    padding-top: clamp(44px, 6vw, 76px);
    padding-bottom: clamp(64px, 8vw, 108px);
    position: relative;
    overflow: hidden;
}

/* La aurora: dos luces de marca que respiran detrás del contenido.
   Son el ambiente del escritorio, no un adorno suelto. */
.cl-aurora { position: absolute; inset: -20% -10% auto -10%; height: 130%; pointer-events: none; z-index: 0; }
.cl-aurora i {
    position: absolute; display: block;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
}
.cl-aurora i:nth-child(1) {
    width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
    top: -6%; right: -4%;
    background: radial-gradient(circle, rgba(255, 77, 255, 0.55), transparent 68%);
    animation: cl-respira-a 22s ease-in-out infinite alternate;
}
.cl-aurora i:nth-child(2) {
    width: 40vw; height: 40vw; max-width: 540px; max-height: 540px;
    top: 26%; left: -8%;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.42), transparent 68%);
    animation: cl-respira-b 27s ease-in-out infinite alternate;
}
@keyframes cl-respira-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-6%, 7%, 0) scale(1.18); }
}
@keyframes cl-respira-b {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(8%, -6%, 0) scale(0.92); }
}

.cl-portada__rejilla {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(52px, 6vw, 76px);
    align-items: center;
}
.cl-portada h1 {
    font-size: clamp(2.85rem, 6.8vw, 5rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.0;
    color: var(--texto);
}
.cl-portada h1 em {
    font-style: italic;
    color: var(--acento);
    line-height: 1.14;
    padding-bottom: 3px;
}
.cl-portada .cl-bajada { max-width: 44ch; }
.cl-portada__acciones {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px 28px;
    margin-top: 38px;
}

/* Entrada del titular: cada línea sube desde detrás de su propio
   renglón, como si el texto se descubriera. */
.cl-js .cl-linea { display: block; overflow: hidden; padding-bottom: 0.06em; }
.cl-js .cl-linea > span {
    display: block;
    transform: translateY(105%);
    transition: transform 1.05s var(--curva);
    transition-delay: calc(140ms + var(--l, 0) * 110ms);
}
.cl-js .cl-entrada .cl-linea > span { transform: none; }
.cl-js .cl-sube {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
    transition-delay: calc(var(--d, 0) * 1ms);
}
.cl-js .cl-entrada .cl-sube { opacity: 1; transform: none; }

/* ---------- 8. El asiento de bitácora (la hoja de papel) ---------- */
.cl-portada__pieza { position: relative; z-index: 1; }
.cl-portada__marca {
    position: absolute; z-index: 0;
    top: -46px; right: -26px;
    width: 128px; opacity: 0.5;
    pointer-events: none;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
}

.cl-asiento {
    position: relative; z-index: 1;
    border-radius: var(--r);
    box-shadow: var(--sombra-alta);
    padding: 26px 26px 22px;
    transform: perspective(1400px) rotateY(-3deg) rotateX(1.5deg);
    transition: transform 0.7s var(--curva);
}
.cl-asiento:hover { transform: perspective(1400px) rotateY(0deg) rotateX(0deg); }
.cl-asiento__alto {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    font-family: var(--mono); font-size: 0.67rem;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--texto-3);
    padding-bottom: 15px;
    border-bottom: 1px solid var(--linea);
}

/* El sello cae como un timbre de goma sobre el papel. */
.cl-asiento__sello {
    display: inline-flex; align-items: center; gap: 7px;
    color: #A400A4;
    background: var(--acento-velo);
    border: 1px solid var(--acento-linea);
    border-radius: var(--r-chico);
    padding: 5px 11px;
    letter-spacing: 0.09em;
}
.cl-js .cl-asiento__sello {
    opacity: 0;
    transform: scale(2.1) rotate(-14deg);
}
.cl-asiento__sello.cl-timbrado {
    opacity: 1;
    transform: none;
    transition: opacity 0.18s ease-out, transform 0.5s var(--curva-sello);
}

.cl-asiento__cuerpo { padding-top: 20px; min-height: 148px; }
.cl-asiento__cuerpo h3 {
    font-size: 1.16rem; font-weight: 600;
    letter-spacing: -0.022em; margin-bottom: 11px;
    min-height: 1.4em;
}
/* El cursor que va escribiendo */
.cl-cursor {
    display: inline-block;
    width: 2px; height: 1.05em;
    background: var(--acento);
    vertical-align: -0.16em;
    margin-left: 2px;
    animation: cl-late 0.9s steps(2) infinite;
}
@keyframes cl-late { 50% { opacity: 0; } }

.cl-asiento__cuerpo p {
    font-size: 0.95rem; line-height: 1.72;
    color: var(--texto-2);
}
.cl-asiento__cuerpo p span {
    transition: opacity 0.5s ease-out, filter 0.5s ease-out;
}
.cl-js .cl-asiento__cuerpo p.cl-por-palabra span { opacity: 0; filter: blur(3px); }
.cl-asiento__cuerpo p.cl-por-palabra span.cl-dicha { opacity: 1; filter: none; }

.cl-asiento__adjunto {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 18px; padding: 10px 14px;
    background: rgba(10, 26, 68, 0.05);
    border: 1px solid var(--linea);
    border-radius: var(--r-chico);
    font-size: 0.83rem; font-weight: 500; color: var(--texto);
}
.cl-js .cl-asiento__adjunto,
.cl-js .cl-asiento__pie {
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.55s var(--curva), transform 0.55s var(--curva);
}
.cl-asiento__adjunto.cl-puesto,
.cl-asiento__pie.cl-puesto { opacity: 1; transform: none; }

.cl-asiento__pie {
    display: flex; align-items: center; gap: 9px;
    margin-top: 20px; padding-top: 15px;
    border-top: 1px solid var(--linea);
    font-family: var(--mono); font-size: 0.69rem;
    color: var(--texto-3);
}
.cl-asiento__pie .ic { color: #A400A4; }
.cl-campana { animation: cl-tiritar 0.7s var(--curva); }
@keyframes cl-tiritar {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-16deg); }
    40% { transform: rotate(13deg); }
    60% { transform: rotate(-8deg); }
    80% { transform: rotate(4deg); }
}

.cl-pie-nota {
    position: relative; z-index: 1;
    margin-top: 18px;
    font-size: 0.8rem; color: var(--texto-3);
    max-width: 42ch;
}

/* ---------- 9. Banda de cifras ---------- */
.cl-cifras {
    border-block: 1px solid var(--linea);
    background: var(--fondo-hondo);
}
.cl-cifras__rejilla { display: grid; grid-template-columns: repeat(2, 1fr); }
.cl-cifra { padding: 30px 8px 30px 0; border-top: 1px solid var(--linea); }
.cl-cifras__rejilla > .cl-cifra:nth-child(-n + 2) { border-top: none; }
.cl-cifra b {
    display: block;
    font-family: var(--mono);
    font-size: clamp(2rem, 3.8vw, 2.9rem);
    font-weight: 500; letter-spacing: -0.045em;
    line-height: 1;
    background: var(--marca);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.cl-cifra b small { font-size: 0.5em; letter-spacing: -0.02em; }
.cl-cifra span {
    display: block; margin-top: 12px;
    font-size: 0.84rem; line-height: 1.5;
    color: var(--texto-3);
    max-width: 24ch;
}

/* ---------- 10. Poder Judicial: la secuencia ---------- */
.cl-secuencia {
    position: relative;
    margin-bottom: clamp(60px, 6vw, 92px);
    padding-left: 0;
}
/* El hilo que une los tres actos se dibuja al entrar en pantalla. */
.cl-hilo {
    display: none;
    position: absolute; left: 5px; top: 26px; bottom: 26px;
    width: 1.5px;
    background: linear-gradient(180deg, var(--acento), rgba(0, 210, 255, 0.55));
    transform-origin: 50% 0;
    transform: scaleY(0);
    transition: transform 1.4s var(--curva);
}
.cl-secuencia.cl-visible .cl-hilo { transform: scaleY(1); }

.cl-paso {
    display: grid; grid-template-columns: 1fr;
    gap: 8px 34px;
    padding: 28px 0;
    border-top: 1px solid var(--linea);
    position: relative;
}
.cl-paso:last-child { border-bottom: 1px solid var(--linea); }
.cl-paso__quien {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--mono); font-size: 0.72rem;
    letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--acento);
}
.cl-paso__quien::before { content: ''; width: 18px; height: 1.5px; background: currentColor; }
.cl-paso__que {
    font-size: clamp(1.08rem, 1.9vw, 1.34rem);
    font-weight: 400; letter-spacing: -0.022em;
    line-height: 1.48; color: var(--texto);
    max-width: 46ch;
}
.cl-paso__que b { font-weight: 600; color: #fff; }

.cl-capacidades { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 3.4vw, 46px); }
.cl-capacidad h3 {
    display: flex; align-items: center; gap: 11px;
    font-size: 1.04rem; font-weight: 600;
    letter-spacing: -0.015em; margin-bottom: 10px;
    color: var(--texto);
}
.cl-capacidad h3 .ic { color: var(--acento); font-size: 1.15rem; }
.cl-capacidad p { font-size: 0.92rem; line-height: 1.7; color: var(--texto-2); max-width: 46ch; }
.cl-capacidad p strong { color: var(--texto); font-weight: 600; }

/* ---------- 11. Funciones: hojas sobre la mesa ---------- */
.cl-bento { display: grid; grid-template-columns: 1fr; gap: 14px; }
.cl-celda {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r);
    padding: clamp(26px, 2.6vw, 36px);
    position: relative; overflow: hidden; isolation: isolate;
    box-shadow: var(--sombra);
    transition: transform 0.45s var(--curva), box-shadow 0.45s var(--curva);
}
.cl-celda:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
/* El foco que sigue al cursor: la hoja se ilumina donde uno mira. */
.cl-celda::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 77, 255, 0.10), transparent 62%);
    opacity: 0;
    transition: opacity 0.45s var(--curva);
}
.cl-celda:hover::before { opacity: 1; }
.cl-celda h3 { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.024em; margin-bottom: 17px; }
.cl-celda ul { list-style: none; display: grid; gap: 13px; }
.cl-celda li { display: flex; gap: 11px; font-size: 0.91rem; line-height: 1.62; color: var(--texto-2); }
.cl-celda li .ic { color: var(--acento); margin-top: 5px; font-size: 0.85rem; }
.cl-celda li strong { color: var(--texto); font-weight: 600; }
.cl-celda__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-bottom: 20px;
    border: 1px solid var(--linea); border-radius: var(--r-chico);
    color: var(--acento); font-size: 1.2rem;
    background: var(--acento-velo);
}
.cl-celda--ancha { background: linear-gradient(158deg, #FFFFFF 46%, rgba(255, 77, 255, 0.07) 100%); }
.cl-celda__agua { position: absolute; right: -44px; bottom: -54px; width: 208px; opacity: 0.16; pointer-events: none; z-index: -1; }
.cl-celda--tinte { background: #F4F6FB; }

.cl-temas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cl-tema {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--linea-firme);
    box-shadow: inset 0 0 0 2px #fff;
    transition: transform 0.3s var(--curva);
}
.cl-tema:hover { transform: scale(1.22); }

/* ---------- 12. Clientina ---------- */
.cl-doble { display: grid; grid-template-columns: 1fr; gap: clamp(46px, 5vw, 76px); align-items: start; }
.cl-nota { border-left: 2px solid var(--acento-linea); padding: 4px 0 4px 22px; margin-top: 32px; }
.cl-nota strong { display: flex; align-items: center; gap: 9px; font-size: 0.96rem; font-weight: 600; margin-bottom: 8px; color: var(--texto); }
.cl-nota strong .ic { color: var(--acento); }
.cl-nota p { font-size: 0.9rem; line-height: 1.7; color: var(--texto-2); max-width: 48ch; }

.cl-ordenes { border-radius: var(--r); box-shadow: var(--sombra-alta); overflow: hidden; }
.cl-ordenes__alto {
    padding: 16px 24px;
    border-bottom: 1px solid var(--linea);
    font-family: var(--mono); font-size: 0.67rem;
    letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--texto-3);
    display: flex; justify-content: space-between; gap: 12px;
}
.cl-orden { padding: 21px 24px; border-top: 1px solid var(--linea); transition: background 0.3s; }
.cl-orden:first-of-type { border-top: none; }
.cl-orden:hover { background: var(--acento-velo); }
.cl-orden q { display: block; font-size: 1rem; font-weight: 500; color: var(--texto); letter-spacing: -0.012em; quotes: '\201C' '\201D'; }
.cl-orden p { display: flex; gap: 10px; margin-top: 9px; font-size: 0.89rem; line-height: 1.6; color: var(--texto-2); }
.cl-orden p .ic { color: var(--acento); margin-top: 4px; }

/* ---------- 13. El modelo ---------- */
.cl-modelo { display: grid; grid-template-columns: 1fr; gap: 2px 44px; }
.cl-razon { padding: 28px 0; border-top: 1px solid var(--linea); }
.cl-razon h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--texto); }
.cl-razon p { font-size: 0.93rem; line-height: 1.7; color: var(--texto-2); max-width: 44ch; }
.cl-razon p strong { color: var(--texto); font-weight: 600; }

/* ---------- 14. Seguridad (la sección quieta, a propósito) ---------- */
.cl-blindaje { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 3vw, 42px) clamp(40px, 5vw, 72px); }
.cl-blindaje__item strong { display: flex; align-items: center; gap: 11px; font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 9px; color: var(--texto); }
.cl-blindaje__item strong .ic { color: var(--acento); font-size: 1.05rem; }
.cl-blindaje__item span { display: block; font-size: 0.9rem; line-height: 1.68; color: var(--texto-2); max-width: 42ch; }
.cl-ley { margin-top: clamp(60px, 6vw, 90px); padding-top: clamp(32px, 3.4vw, 48px); border-top: 1px solid var(--linea-firme); }
.cl-ley p {
    font-size: clamp(1.2rem, 2.4vw, 1.72rem);
    font-weight: 500; line-height: 1.4;
    letter-spacing: -0.028em; color: var(--texto);
    max-width: 28ch;
}
.cl-ley span { display: block; margin-top: 20px; font-size: 0.93rem; line-height: 1.72; color: var(--texto-2); max-width: 56ch; }

/* ---------- 15. Marquesina (la única del sitio) ---------- */
.cl-integra {
    padding-block: clamp(56px, 6vw, 84px);
    background: var(--fondo-hondo);
    border-block: 1px solid var(--linea);
    overflow: hidden;
}
.cl-integra__titulo { text-align: center; font-size: 0.98rem; font-weight: 400; color: var(--texto-3); margin-bottom: 36px; }
.cl-cinta {
    display: flex;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.cl-cinta__via {
    display: flex; align-items: center; gap: 46px;
    padding-right: 46px; flex-shrink: 0;
    animation: cl-correr 36s linear infinite;
}
.cl-cinta:hover .cl-cinta__via { animation-play-state: paused; }
@keyframes cl-correr { to { transform: translateX(-100%); } }
.cl-integra__item {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 0.83rem; font-weight: 400;
    color: var(--texto-2); white-space: nowrap;
    transition: color 0.3s;
}
.cl-integra__item .ic { color: var(--cian); font-size: 1rem; }
.cl-integra__item:hover { color: var(--texto); }

/* ---------- 16. Cierre ---------- */
.cl-cierre {
    position: relative; overflow: hidden;
    padding-block: clamp(96px, 11vw, 168px);
    text-align: center;
    background: var(--fondo-alto);
}
.cl-cierre .cl-aurora i { opacity: 0.45; }
.cl-cierre .cl-marco { position: relative; z-index: 1; }
.cl-cierre h2 {
    font-size: clamp(2.25rem, 5vw, 3.7rem);
    font-weight: 600; letter-spacing: -0.04em; line-height: 1.04;
    max-width: 17ch; margin-inline: auto;
}
.cl-cierre h2 em { font-style: italic; color: var(--acento); line-height: 1.14; padding-bottom: 3px; }
.cl-cierre p { font-size: 1.04rem; line-height: 1.72; color: var(--texto-2); max-width: 46ch; margin: 24px auto 40px; }

/* ---------- 17. Pie ---------- */
.cl-pie { background: var(--fondo-hondo); border-top: 1px solid var(--linea); padding-block: 56px 68px; }
.cl-pie__in { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.cl-pie__logo { display: flex; align-items: center; gap: 12px; }
.cl-pie__logo img { height: 44px; width: auto; }
.cl-pie__logo b { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.045em; }
.cl-pie__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.cl-pie__legal a {
    font-size: 0.88rem; font-weight: 500; color: var(--texto-2);
    text-decoration: none; border-bottom: 1px solid transparent;
    transition: color 0.25s, border-color 0.25s;
}
.cl-pie__legal a:hover { color: var(--acento); border-color: var(--acento-linea); }
.cl-pie__firma { font-size: 0.82rem; color: var(--texto-3); }
.cl-pie__firma a { color: var(--texto-2); text-decoration: none; }

/* ---------- 18. Botón flotante ---------- */
.cl-flotante {
    position: fixed; z-index: 180;
    left: 50%; bottom: 18px;
    transform: translate(-50%, 130%);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    transition: transform 0.45s var(--curva);
}
.cl-flotante.cl-visible { transform: translate(-50%, 0); }

/* ---------- 19. Ventana de solicitud ---------- */
.cl-velo {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(3, 7, 20, 0.66);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 18px; overflow-y: auto;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s var(--curva), visibility 0.35s;
}
.cl-velo.cl-abierto { opacity: 1; visibility: visible; }
.cl-hoja {
    border-radius: var(--r);
    width: 100%; max-width: 640px; margin: auto;
    box-shadow: var(--sombra-alta);
    overflow: hidden;
    transform: translateY(26px) scale(0.97);
    transition: transform 0.45s var(--curva);
}
.cl-velo.cl-abierto .cl-hoja { transform: none; }
.cl-hoja__alto { position: relative; padding: 32px clamp(22px, 4vw, 38px) 26px; border-bottom: 1px solid var(--linea); }
.cl-hoja__alto h2 { font-size: 1.52rem; font-weight: 600; letter-spacing: -0.032em; margin-bottom: 8px; }
.cl-hoja__alto p { font-size: 0.92rem; color: var(--texto-2); max-width: 44ch; }
.cl-cerrar {
    position: absolute; top: 18px; right: 18px;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--linea); border-radius: var(--r-pastilla);
    background: transparent; color: var(--texto); cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.cl-cerrar:hover { border-color: var(--acento); background: var(--acento-velo); }
.cl-hoja__cuerpo { padding: 28px clamp(22px, 4vw, 38px) 34px; }

.cl-campo { margin-bottom: 18px; }
.cl-fila { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.cl-campo label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--texto); margin-bottom: 7px; }
.cl-campo .cl-obligatorio { color: var(--acento); }
.cl-campo input[type="text"],
.cl-campo input[type="email"],
.cl-campo input[type="tel"],
.cl-campo select {
    width: 100%; padding: 13px 14px;
    background: #F7F9FC;
    border: 1px solid var(--linea-firme);
    border-radius: var(--r-chico);
    font-family: var(--fuente); font-size: 0.94rem; color: var(--texto);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.cl-campo input::placeholder { color: var(--texto-3); opacity: 1; }
.cl-campo input:focus, .cl-campo select:focus {
    outline: none; background: #fff;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-velo);
}
.cl-pista { margin-top: 7px; font-size: 0.78rem; line-height: 1.5; color: var(--texto-3); }
.cl-subdominio {
    margin-top: 9px; padding: 10px 13px;
    background: #F1F4FA; border-radius: var(--r-chico);
    font-family: var(--mono); font-size: 0.84rem; color: var(--texto-3);
    overflow-x: auto; white-space: nowrap;
}
.cl-subdominio b { color: var(--acento); font-weight: 500; }
.cl-acuerdo { display: flex; align-items: flex-start; gap: 11px; margin: 24px 0 22px; font-size: 0.84rem; line-height: 1.6; color: var(--texto-2); cursor: pointer; }
.cl-acuerdo input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: #A400A4; }
.cl-acuerdo a { color: var(--acento); font-weight: 600; }
.cl-aviso {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 15px; margin-bottom: 20px;
    border-radius: var(--r-chico);
    font-size: 0.88rem; line-height: 1.55;
    background: rgba(180, 69, 31, 0.07);
    border: 1px solid rgba(180, 69, 31, 0.26);
    color: #A63A15;
}
.cl-aviso .ic { margin-top: 3px; }
.cl-enviar { width: 100%; justify-content: center; padding: 16px 26px; background: #0A1A44; color: #fff; }
.cl-enviar:hover { color: #fff; }
.cl-logrado { padding: 48px clamp(22px, 4vw, 38px) 46px; text-align: center; }
.cl-logrado__marca {
    width: 62px; height: 62px; margin: 0 auto 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(14, 124, 90, 0.09);
    border: 1px solid rgba(14, 124, 90, 0.3);
    color: #0E7C5A; font-size: 1.6rem;
    animation: cl-brota 0.6s var(--curva-sello) both;
}
@keyframes cl-brota { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.cl-logrado h3 { font-size: 1.38rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 10px; }
.cl-logrado p { font-size: 0.95rem; color: var(--texto-2); max-width: 40ch; margin: 0 auto 28px; }
.cl-logrado .cl-boton { background: #0A1A44; color: #fff; }
.cl-girando {
    width: 15px; height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff; border-radius: 50%;
    display: inline-block; animation: cl-giro 0.7s linear infinite;
}
@keyframes cl-giro { to { transform: rotate(360deg); } }

/* ============================================================
   DOCUMENTOS LEGALES: la hoja blanca sobre la mesa azul.
   El TEXTO del documento no se toca nunca; aquí solo va la ropa.
   ============================================================ */
.cl-doc-barra {
    border-bottom: 1px solid var(--linea);
    background: rgba(7, 15, 43, 0.78);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: sticky; top: 3px; z-index: 200;
}
.cl-doc-barra__in { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cl-doc-barra__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.cl-doc-barra__logo img { height: 36px; width: auto; }
.cl-doc-barra__logo b { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.045em; }
.cl-volver {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.86rem; font-weight: 500;
    color: var(--texto-2); text-decoration: none;
    padding: 10px 19px;
    border: 1px solid var(--linea-firme); border-radius: var(--r-pastilla);
    transition: border-color 0.25s, color 0.25s;
}
.cl-volver:hover { border-color: var(--acento); color: var(--texto); }
.cl-volver .ic { transition: transform 0.3s var(--curva); }
.cl-volver:hover .ic { transform: translateX(-4px); }

.cl-doc-portada { position: relative; padding-block: clamp(54px, 7vw, 92px) clamp(34px, 4vw, 52px); overflow: hidden; }
.cl-doc-portada h1 {
    position: relative; z-index: 1;
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
    font-weight: 600; letter-spacing: -0.038em; line-height: 1.05;
    max-width: 18ch;
}
.cl-doc-meta, .doc-meta {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 20px;
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
    color: var(--texto-3);
    border: 1px solid var(--linea); border-radius: var(--r-pastilla);
    padding: 7px 16px;
}

.cl-doc-cuerpo {
    display: grid; grid-template-columns: 1fr;
    gap: clamp(30px, 4vw, 60px);
    padding-bottom: clamp(76px, 8vw, 118px);
    align-items: start;
}

.cl-indice { display: none; position: static; }
.cl-con-indice .cl-indice { display: block; }
.cl-indice__titulo {
    display: none;
    font-family: var(--mono); font-size: 0.68rem;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--texto-3);
    padding-bottom: 13px; margin-bottom: 4px;
    border-bottom: 1px solid var(--linea);
}
.cl-indice ol { list-style: none; display: grid; }
.cl-indice a {
    display: block; padding: 8px 0 8px 14px;
    border-left: 2px solid var(--linea);
    font-size: 0.85rem; line-height: 1.45;
    color: var(--texto-3); text-decoration: none;
    transition: color 0.25s, border-color 0.25s, padding-left 0.25s;
}
.cl-indice a:hover { color: var(--texto); border-color: var(--linea-firme); padding-left: 18px; }
.cl-indice a.cl-aqui { color: var(--acento); border-color: var(--acento); font-weight: 500; }
.cl-indice details summary { cursor: pointer; list-style: none; font-size: 0.88rem; font-weight: 600; padding: 14px 0; color: var(--texto); }
.cl-indice details summary::-webkit-details-marker { display: none; }

/* La hoja: papel blanco, tinta navy, apoyada sobre el azul. */
.doc {
    --texto: #0A1A44;
    --texto-2: #465278;
    --texto-3: #5F6A8C;
    --linea: rgba(10, 26, 68, 0.10);
    --linea-firme: rgba(10, 26, 68, 0.20);
    --acento: #A400A4;
    --acento-velo: rgba(164, 0, 164, 0.06);
    --acento-linea: rgba(164, 0, 164, 0.26);
    background: var(--superficie);
    color: var(--texto-2);
    border-radius: var(--r);
    box-shadow: var(--sombra-alta);
    padding: clamp(30px, 4vw, 54px) clamp(24px, 3.4vw, 52px) clamp(40px, 5vw, 64px);
    /* Medida de lectura: con 68ch la línea llegaba a 90 caracteres y el
       ojo se pierde al saltar de renglón. 58ch la deja en unos 75. */
    max-width: calc(58ch + 104px);
    font-size: 1.01rem;
    line-height: 1.78;
}
.doc h2 {
    font-size: clamp(1.26rem, 2.1vw, 1.52rem);
    font-weight: 600; letter-spacing: -0.026em; line-height: 1.25;
    color: var(--texto);
    margin: clamp(46px, 5vw, 64px) 0 16px;
    padding-top: clamp(24px, 3vw, 34px);
    border-top: 1px solid var(--linea);
    scroll-margin-top: 100px;
}
.doc h2:first-of-type { margin-top: clamp(38px, 4vw, 52px); }
.doc h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.018em; color: var(--texto); margin: 34px 0 12px; scroll-margin-top: 100px; }
.doc p { margin-bottom: 17px; }
.doc p.intro { font-size: 1.09rem; line-height: 1.74; color: var(--texto); padding-left: 20px; border-left: 2px solid var(--acento-linea); }
.doc ul, .doc ol { margin: 0 0 20px; padding-left: 4px; list-style: none; }
.doc ol { counter-reset: cl-num; }
.doc li { position: relative; padding-left: 26px; margin-bottom: 11px; }
.doc ul > li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--acento-linea); }
.doc ol > li::before { counter-increment: cl-num; content: counter(cl-num) '.'; position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 0.82rem; color: var(--texto-3); }
.doc strong { color: var(--texto); font-weight: 600; }
.doc em { font-style: italic; }
.doc a { color: var(--acento); font-weight: 500; text-underline-offset: 3px; }
.doc code { font-family: var(--mono); font-size: 0.88em; background: #F1F4FA; border: 1px solid var(--linea); border-radius: 6px; padding: 2px 6px; color: var(--texto); }
.doc .important { color: var(--texto); font-weight: 600; background: var(--acento-velo); border-radius: 4px; padding: 1px 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.doc .highlight-box {
    background: #F7F9FC;
    border: 1px solid var(--linea);
    border-left: 2px solid var(--acento);
    border-radius: var(--r-chico);
    padding: 22px 24px 6px; margin: 26px 0;
}
.doc .highlight-box p:last-child { margin-bottom: 16px; }
.doc .doc-meta { margin: 0 0 18px; border-color: var(--linea); color: var(--texto-3); }

.tabla-wrap { overflow-x: auto; margin: 24px 0 28px; border: 1px solid var(--linea); border-radius: var(--r-chico); }
.tabla-plazos { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabla-plazos th {
    text-align: left; font-family: var(--mono);
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--texto-3); font-weight: 500;
    padding: 13px 16px; background: #F1F4FA;
    border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.tabla-plazos td { padding: 13px 16px; border-top: 1px solid var(--linea); color: var(--texto-2); vertical-align: top; }
.tabla-plazos tr:first-child td { border-top: none; }
.tabla-plazos strong { color: var(--texto); }

.cl-doc-pie { border-top: 1px solid var(--linea); padding-block: 44px 60px; text-align: center; }
.cl-doc-pie p { font-size: 0.84rem; color: var(--texto-3); margin-bottom: 8px; }
.cl-doc-pie a { color: var(--texto-2); text-decoration: none; border-bottom: 1px solid var(--linea-firme); }
.cl-doc-pie a:hover { color: var(--acento); }

/* Compatibilidad con clases que quedaron en el cuerpo legal antiguo */
.container { width: 100%; max-width: var(--ancho); margin: 0 auto; padding-inline: var(--canal); }
.footer { display: none; }

/* ============================================================
   20. Pantallas medianas y grandes
   ============================================================ */
@media (min-width: 620px) {
    .cl-fila { grid-template-columns: 1fr 1fr; }
    .cl-paso { grid-template-columns: 200px 1fr; align-items: baseline; }
    .cl-secuencia { padding-left: 0; }
    .cl-capacidades { grid-template-columns: repeat(2, 1fr); }
    .cl-modelo { grid-template-columns: repeat(2, 1fr); }
    .cl-blindaje { grid-template-columns: repeat(2, 1fr); }
    .cl-cifras__rejilla { grid-template-columns: repeat(4, 1fr); }
    .cl-cifra { border-top: none; padding: 38px 20px 38px 0; }
    .cl-cifra + .cl-cifra { border-left: 1px solid var(--linea); padding-left: 30px; }
    .cl-flotante { left: auto; right: 24px; bottom: 24px; transform: translateY(130%); }
    .cl-flotante.cl-visible { transform: none; }
}

@media (min-width: 900px) {
    .cl-barra__nav { display: flex; }
    .cl-barra__cta { display: inline-flex; }
    .cl-hamburguesa { display: none; }
    .cl-menu-movil { display: none !important; }

    .cl-portada__rejilla { grid-template-columns: 1.04fr 0.96fr; gap: clamp(40px, 5vw, 72px); }
    .cl-doble { grid-template-columns: 1fr 1fr; }

    .cl-bento { grid-template-columns: repeat(6, 1fr); gap: 16px; }
    .cl-celda--ancha { grid-column: span 3; grid-row: span 2; }
    .cl-celda--media { grid-column: span 3; }
    .cl-celda--tercio { grid-column: span 2; }

    .cl-doc-cuerpo.cl-con-indice { grid-template-columns: 246px minmax(0, 1fr); gap: clamp(40px, 4.5vw, 68px); }
    .cl-indice { position: sticky; top: 100px; max-height: calc(100vh - 140px); overflow-y: auto; }
    .cl-indice__titulo { display: block; }
    .cl-indice details { display: contents; }
    .cl-indice details summary { display: none; }
}

@media (min-width: 1080px) {
    .cl-capacidades { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   21. Movimiento reducido: se apaga TODO lo que se mueve y el
   contenido queda puesto de una vez.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .cl-js .cl-revelar,
    .cl-js .cl-sube { opacity: 1; transform: none; }
    .cl-js .cl-linea > span { transform: none; }
    .cl-js .cl-asiento__sello { opacity: 1; transform: none; }
    .cl-js .cl-asiento__adjunto, .cl-js .cl-asiento__pie { opacity: 1; transform: none; }
    .cl-js .cl-asiento__cuerpo p.cl-por-palabra span { opacity: 1; filter: none; }
    .cl-asiento { transform: none; }
    .cl-hilo { transform: scaleY(1); }
    .cl-aurora { display: none; }
}

/* Impresión: los documentos legales salen limpios y en blanco. */
@media print {
    .cl-doc-barra, .cl-indice, .cl-flotante, .cl-barra, .cl-doc-pie, .cl-aurora { display: none !important; }
    body { background: #fff; color: #000; }
    .doc { max-width: none; box-shadow: none; padding: 0; font-size: 11pt; }
    .doc h2 { break-after: avoid; }
    .cl-doc-portada h1 { color: #000; }
}