/* ══════════════════════════════════════════════════════════════════
   obras.gestorweb.cl — hoja de estilo de la landing

   Dirección: retícula de plano de fondo, la regla a tamaño de titular
   y el amarillo de faena reservado para las acciones. Los tokens son
   los de «Nivel» (resources/css/app.css de la aplicación); si allá
   cambia un color, aquí también.

   Tres disciplinas que sostienen la página entera:

     1. EL COLOR CLASIFICA. Amarillo = acción, y nada más. Cianotipo =
        el dato del plan. Verde y rojo sólo dentro de una lectura de
        estado. Ninguno decora.
     2. NINGUNA SECCIÓN REPITE LA FORMA DE LA ANTERIOR. Lista, banda,
        dos columnas, ruptura oscura, índice técnico. Sin eso la página
        vuelve a ser una sucesión de rejillas de tarjetas.
     3. LA CONDENSADA A TAMAÑO DE SEÑALÉTICA. Barlow es una grotesca de
        rotulación: aguanta 116 px y ahí está el carácter. Nunca en
        párrafos.

   Escrita a mano y sin framework: es una sola página, y traer Tailwind
   con su compilación sería más infraestructura que sitio.
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* Grafito: mina de lápiz de plano, no negro puro */
    --grafito-900: #14181B;
    --grafito-800: #1C2226;
    --grafito-700: #262E33;
    --grafito-600: #36424A;
    --grafito-500: #55646F;
    --grafito-400: #7A8994;
    --grafito-300: #A3AFB8;

    /* Hormigón: fondo de trabajo */
    --hormigon:    #F2F3F1;
    --hormigon-2:  #E8EAE7;
    --linea:       #DCDFDB;
    --linea-2:     #C7CCC7;

    /* Cianotipo: tinta de plano. El dato del plan */
    --cianotipo-700: #0A4970;
    --cianotipo-600: #0E5C8C;
    --cianotipo-500: #1476AF;
    --cianotipo-300: #7FC1E8;
    --cianotipo-100: #D7E7F1;
    --cianotipo-50:  #EFF6FA;

    /* Faena: acción. Sólo acción */
    --faena-700: #9A6B0C;
    --faena-500: #E8A317;
    --faena-100: #FAEBC8;
    --faena-50:  #FDF7E8;

    /* Nivel: conforme */
    --nivel-700: #17603B;
    --nivel-600: #1F7A4D;
    --nivel-100: #D6EADF;
    --nivel-50:  #EFF7F2;

    /* Alerta: atrasada */
    --alerta-600: #B3261E;
    --alerta-100: #F5DAD8;
    --alerta-50:  #FCF0EF;

    --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --sans:    "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono:    "Roboto Mono", ui-monospace, "Cascadia Mono", monospace;

    --ancho: 1280px;
    --nav: 68px;
    --lado: clamp(20px, 4.4vw, 56px);
}

/* ── Base ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.62;
    color: var(--grafito-600);
    background: var(--hormigon);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--cianotipo-600); }

h1, h2, h3 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    color: var(--grafito-900);
    text-wrap: balance;
}

/* La escala de señalética: condensada grande y muy ceñida de interlínea. */
h1 {
    font-size: clamp(3.1rem, 8.4vw, 7.25rem);
    line-height: .84;
    letter-spacing: -.022em;
    text-transform: uppercase;
}
h2 {
    font-size: clamp(2.3rem, 5vw, 3.25rem);
    line-height: .95;
    letter-spacing: -.015em;
}
h3 {
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: 0;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

:focus-visible {
    outline: 3px solid var(--cianotipo-600);
    outline-offset: 3px;
}

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: var(--lado);
}

.saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--cianotipo-600);
    color: #fff;
    padding: 12px 20px;
    z-index: 200;
}
.saltar:focus { left: 0; }

/*
 * La retícula de plano. Dos tramas superpuestas —fina y gruesa— igual
 * que un papel de dibujo. Es el único adorno de la página y por eso
 * puede estar en todas partes sin cansar.
 */
.reticula { position: relative; isolation: isolate; overflow: hidden; }
.reticula::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--cianotipo-600) 1px, transparent 1px),
        linear-gradient(90deg, var(--cianotipo-600) 1px, transparent 1px),
        linear-gradient(var(--cianotipo-600) 1px, transparent 1px),
        linear-gradient(90deg, var(--cianotipo-600) 1px, transparent 1px);
    background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
    opacity: .085;
}
/* En oscuro la trama se invierte: misma idea, tinta clara sobre grafito. */
.reticula-oscura::before {
    background-image:
        linear-gradient(var(--cianotipo-300) 1px, transparent 1px),
        linear-gradient(90deg, var(--cianotipo-300) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px;
    opacity: .07;
}

/* ── Rótulos y cotas ──────────────────────────────────────────── */

.rotulo {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 16px;
    font-family: var(--display);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--grafito-500);
}
.rotulo span { font-family: var(--mono); font-size: .71875rem; letter-spacing: 0; color: var(--cianotipo-600); }
.rotulo-claro { color: var(--grafito-400); }
.rotulo-claro span { color: var(--cianotipo-300); }
.rotulo-alerta span { color: var(--alerta-600); }

/*
 * Línea de cota: mide el titular, como en un plano. Es el gesto que
 * más identifica la página, y por eso no se usa más de dos veces.
 */
.cota {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    color: var(--cianotipo-600);
}
.cota::before, .cota::after {
    content: "";
    width: 1px;
    height: 12px;
    background: currentColor;
    flex-shrink: 0;
}
.cota i {
    flex: 1;
    height: 1px;
    background: currentColor;
}
.cota em {
    font-family: var(--mono);
    font-style: normal;
    font-size: .6875rem;
    white-space: nowrap;
}

.bajada {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--grafito-600);
    max-width: 58ch;
}
.bajada-clara { color: var(--grafito-300); }

.seccion { padding-block: clamp(56px, 7vw, 82px); }

/* ── Botones ──────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border: 2px solid transparent;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s, border-color .16s, color .16s;
}

/* Amarillo = acción. Es el único sitio donde aparece. */
.btn-accion {
    background: var(--faena-500);
    border-color: var(--faena-500);
    color: var(--grafito-900);
}
.btn-accion:hover { background: #F2B02A; border-color: #F2B02A; }

.btn-linea {
    background: transparent;
    border-color: var(--linea-2);
    color: var(--grafito-600);
}
.btn-linea:hover { border-color: var(--grafito-500); color: var(--grafito-900); }

.btn-linea-clara {
    background: transparent;
    border-color: var(--grafito-600);
    color: #fff;
}
.btn-linea-clara:hover { border-color: var(--cianotipo-300); color: var(--cianotipo-300); }

.btn-sm { min-height: 42px; padding: 0 18px; font-size: .9375rem; }

/* ── Barra de navegación ──────────────────────────────────────── */

.nav {
    position: fixed;
    inset: 0 0 auto;
    height: var(--nav);
    z-index: 100;
    display: flex;
    align-items: center;
    background: rgba(242, 243, 241, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: background-color .2s, border-color .2s;
}
.nav[data-desplazada="si"] {
    background: rgba(242, 243, 241, .97);
    border-bottom-color: var(--linea-2);
}
.nav .contenedor { display: flex; align-items: center; gap: 20px; }

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
/* El cubo isométrico de GestorWeb va como SVG inline en el HTML: en el pie
   la cara izquierda se invierte a hormigón para que no se coma el fondo. */
.marca-icono { display: block; flex-shrink: 0; line-height: 0; }
.marca-icono svg { display: block; }
.marca-texto {
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--grafito-900);
    white-space: nowrap;
}
.marca-texto b { color: var(--cianotipo-600); font-weight: 700; }

.nav-enlaces { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-enlaces a { color: var(--grafito-500); text-decoration: none; font-size: .875rem; }
.nav-enlaces a:hover { color: var(--grafito-900); }

.nav-hamburguesa {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--linea-2);
    color: var(--grafito-900);
    cursor: pointer;
}
.nav-hamburguesa span,
.nav-hamburguesa span::before,
.nav-hamburguesa span::after {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform .2s, opacity .2s;
}
.nav-hamburguesa span::before { transform: translateY(-6px); }
.nav-hamburguesa span::after  { transform: translateY(4px); }
.nav-hamburguesa[aria-expanded="true"] span { background: transparent; }
.nav-hamburguesa[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-hamburguesa[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-2px); }

.nav-movil {
    position: fixed;
    inset: var(--nav) 0 auto;
    background: var(--hormigon);
    border-bottom: 1px solid var(--linea-2);
    padding: 16px var(--lado) 24px;
    display: none;
    flex-direction: column;
    z-index: 99;
}
.nav-movil[data-abierto="si"] { display: flex; }
.nav-movil a {
    color: var(--grafito-600);
    text-decoration: none;
    font-size: 1.0625rem;
    padding: 13px 0;
    border-bottom: 1px solid var(--linea);
}
.nav-movil .btn { margin-top: 16px; }

/* ══ 01 · Portada ═════════════════════════════════════════════ */

.hero { padding-top: calc(var(--nav) + clamp(36px, 5vw, 54px)); background: var(--hormigon); }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(36px, 4.4vw, 60px);
    align-items: start;
    padding-bottom: clamp(40px, 5vw, 58px);
}

.hero h1 span { color: var(--cianotipo-600); }
.hero .bajada { margin-top: 26px; font-size: 1.0625rem; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/*
 * La regla del hero. Sustituye al pantallazo dentro de un marco: es el
 * producto, dibujado a escala de titular, sin cromo de navegador.
 */
.regla-hero { padding-top: 6px; }
.regla-hero-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.regla-hero-obra {
    font-family: var(--display);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--grafito-500);
}
.regla-hero-codigo { font-family: var(--mono); font-size: .6875rem; color: var(--grafito-400); }

.regla { position: relative; background: var(--hormigon-2); }
.regla-relleno { position: absolute; inset: 0 auto 0 0; }
.regla-marca { position: absolute; background: var(--cianotipo-600); }

.regla-xl { height: 44px; }
.regla-xl .regla-marca { top: -12px; bottom: -12px; width: 5px; }

.regla-cifras { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; }
.regla-cifra { font-family: var(--display); font-size: 2.75rem; font-weight: 700; line-height: 1; color: var(--grafito-900); }
.regla-plan  { font-family: var(--display); font-size: 1.375rem; font-weight: 600; line-height: 1; color: var(--cianotipo-600); }
.regla-pie   { font-family: var(--mono); font-size: .65625rem; color: var(--grafito-500); margin-top: 3px; }
.regla-pie-plan { color: var(--cianotipo-600); }

.regla-nota {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--linea-2);
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--grafito-500);
}
.regla-nota b { color: var(--grafito-900); font-weight: 600; }

/* Banda de cartera: el panel, a sangre, cerrando la portada. */
.cartera { background: var(--grafito-900); padding-block: 22px 24px; }
.cartera-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}
.cartera-titulo {
    font-family: var(--display);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--grafito-400);
}
.cartera-sello { font-family: var(--mono); font-size: .65625rem; color: var(--grafito-500); }

.cartera-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 34px; }
.cartera-obra-nombre { font-size: .8125rem; font-weight: 600; color: #fff; }
.cartera-obra-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.cartera .regla { background: var(--grafito-700); height: 12px; }
.cartera .regla-marca { top: -4px; bottom: -4px; width: 3px; background: var(--cianotipo-300); }

.desviacion { font-family: var(--mono); font-size: .6875rem; }
.desv-conforme { color: var(--nivel-600); }
.desv-atencion { color: var(--faena-500); }
.desv-atrasada { color: var(--alerta-600); }

/* ══ 02 · El problema — lista tipográfica, no tarjetas ════════ */

.problema-grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 64px);
    align-items: start;
}
.problema-grid h2 span { color: var(--alerta-600); }

.lista-numerada { margin: 0; padding: 0; list-style: none; }
.lista-numerada li {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 6px 22px;
    padding: 24px 0;
    border-top: 1px solid var(--linea-2);
}
.lista-numerada li:first-child { border-top: 2px solid var(--grafito-900); }
.lista-numerada li:last-child { border-bottom: 2px solid var(--grafito-900); }
.lista-numerada .indice {
    grid-row: span 2;
    font-family: var(--display);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: .9;
    color: var(--linea);
}
.lista-numerada h3 { font-family: var(--display); font-size: 1.6875rem; font-weight: 600; }
.lista-numerada p { margin: 0; font-size: .90625rem; color: var(--grafito-500); }

/* Banda amarilla a sangre: el remate del problema y el único momento
   en que el color de acción se usa en superficie. */
.banda-accion { background: var(--faena-500); padding-block: 30px; }
.banda-accion p {
    margin: 0;
    max-width: 32ch;
    font-family: var(--display);
    font-size: clamp(1.75rem, 3.4vw, 2.375rem);
    font-weight: 600;
    line-height: 1.14;
    color: var(--grafito-900);
}
.banda-accion b { font-weight: 700; }

/* ══ 04 · Qué ganas — dos columnas con filete, sin cajas ══════ */

.ganas { background: #fff; }
.ganas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 36px clamp(36px, 5vw, 64px);
    margin-top: 38px;
}
.gana { display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: 6px 20px; }
.gana-filete { grid-row: span 2; background: var(--cianotipo-600); }
.gana-filete-conforme { background: var(--nivel-600); }
.gana h3 { font-family: var(--display); font-size: 1.5625rem; font-weight: 600; }
.gana p { margin: 0; font-size: .90625rem; color: var(--grafito-500); }

/* ══ 05 · La regla — la ruptura oscura ═══════════════════════ */

.ruptura { background: var(--grafito-900); color: var(--hormigon); }
.ruptura h2 { color: #fff; font-size: clamp(2.75rem, 6vw, 4.625rem); }

.ruptura-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: clamp(32px, 4.4vw, 60px);
    align-items: end;
    margin-bottom: 46px;
}

.lecturas { display: flex; flex-direction: column; gap: 30px; }
.lectura-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 9px;
}
.lectura-nombre {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.lectura-nombre strong {
    font-family: var(--display);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.lectura-nombre span { font-size: .84375rem; color: var(--grafito-400); }
.lectura-cifra { font-family: var(--mono); font-size: .9375rem; color: #fff; }

.ruptura .regla { background: var(--grafito-700); height: 40px; }
.ruptura .regla-marca { top: -10px; bottom: -10px; width: 5px; background: var(--cianotipo-300); }

.leyenda-marca { display: flex; align-items: center; gap: 12px; margin-top: 34px; }
.leyenda-marca i { width: 5px; height: 22px; background: var(--cianotipo-300); display: block; flex-shrink: 0; }
.leyenda-marca span { font-family: var(--mono); font-size: .75rem; color: var(--cianotipo-300); }

/* ══ 06 · Módulos — índice técnico, no tarjetas ══════════════ */

.modulos { background: var(--hormigon-2); }
.modulos-cabecera {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 30px;
}
.modulos-cabecera .bajada { max-width: 34ch; text-align: right; }

.indice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.indice-fila {
    display: grid;
    grid-template-columns: 34px minmax(0, 190px) minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    padding: 15px 0;
    border-top: 1px solid var(--linea-2);
}
.indice-fila:nth-child(1), .indice-fila:nth-child(2) { border-top: 2px solid var(--grafito-900); }
.indice-fila:nth-last-child(1), .indice-fila:nth-last-child(2) { border-bottom: 2px solid var(--grafito-900); }
.indice-num { font-family: var(--mono); font-size: .6875rem; color: var(--grafito-400); }
.indice-fila h3 { font-family: var(--display); font-size: 1.3125rem; font-weight: 600; }
.indice-fila p { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--grafito-500); }

/* Vistazo al producto, a sangre por la derecha */
.vistazo { background: var(--hormigon-2); padding-bottom: clamp(56px, 7vw, 82px); }
.vistazo-marco {
    max-width: var(--ancho);
    margin-inline: auto;
    padding-left: var(--lado);
    overflow: hidden;
}
.vistazo-marco img {
    width: 118%;
    max-width: none;
    border: 1px solid var(--linea-2);
    border-right: 0;
}

/* ══ 07 · En terreno — asimétrica ════════════════════════════ */

.terreno { background: #fff; }
.terreno-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
}
.terreno-visual { display: flex; justify-content: center; }
.terreno-visual img { width: min(300px, 78vw); }

.lista-marcada { margin: 26px 0 0; padding: 0; list-style: none; }
.lista-marcada li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 14px;
    padding: 13px 0;
    border-top: 1px solid var(--linea);
    font-size: .90625rem;
    color: var(--grafito-500);
}
.lista-marcada li:first-child { border-top: 0; }
.lista-marcada b { color: var(--grafito-900); font-weight: 600; }
.lista-marcada svg { width: 20px; height: 20px; margin-top: 3px; color: var(--nivel-600); }

/* ══ 08 · Respaldo ══════════════════════════════════════════ */

.respaldo { background: var(--hormigon); }
.duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
    margin-top: 38px;
}
.duo figure { margin: 0; border: 1px solid var(--linea-2); background: #fff; }
.duo h3 { font-family: var(--display); font-size: 1.5625rem; font-weight: 600; margin: 22px 0 10px; }
.duo p { font-size: .90625rem; color: var(--grafito-500); }

/* ══ 09 · Planes ════════════════════════════════════════════ */

.planes-seccion { background: #fff; }
.planes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0;
    margin-top: 38px;
    border-top: 2px solid var(--grafito-900);
    border-bottom: 2px solid var(--grafito-900);
}
.plan {
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    border-left: 1px solid var(--linea-2);
}
.plan:first-child { border-left: 0; }
.plan-destacado { background: var(--hormigon); }
.plan-cinta {
    align-self: start;
    margin-bottom: 12px;
    padding: 4px 12px;
    background: var(--cianotipo-600);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.plan h3 { font-family: var(--display); font-size: 1.875rem; font-weight: 700; }
.plan-para { margin: 6px 0 20px; font-size: .84375rem; color: var(--grafito-500); }
.plan-precio { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); }
.plan-precio strong { font-size: 3.5rem; font-weight: 700; line-height: .9; color: var(--grafito-900); }
.plan-precio span { font-size: 1rem; font-weight: 600; color: var(--grafito-500); }
.plan-iva { margin: 8px 0 22px; font-size: .75rem; color: var(--grafito-400); }
.plan-incluye { margin: 0 0 26px; padding: 20px 0 0; border-top: 1px solid var(--linea-2); list-style: none; }
.plan-incluye li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: .875rem;
    color: var(--grafito-500);
}
.plan-incluye b { font-family: var(--mono); font-size: .84375rem; font-weight: 500; color: var(--grafito-900); }
.plan .btn { margin-top: auto; width: 100%; }

.planes-pie {
    max-width: 74ch;
    margin: 30px auto 0;
    text-align: center;
    font-size: .90625rem;
    color: var(--grafito-500);
}
.planes-pie b { color: var(--grafito-900); font-weight: 600; }

/* ══ 10 · Preguntas ═════════════════════════════════════════ */

.preguntas-seccion { background: var(--hormigon-2); }
.preguntas { max-width: 900px; margin: 32px auto 0; border-top: 2px solid var(--grafito-900); }
.pregunta { border-bottom: 1px solid var(--linea-2); }
.pregunta button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: 0;
    font-family: var(--display);
    font-size: 1.3125rem;
    font-weight: 600;
    color: var(--grafito-900);
    text-align: left;
    cursor: pointer;
}
.pregunta-mas { position: relative; width: 20px; height: 20px; flex-shrink: 0; color: var(--cianotipo-600); }
.pregunta-mas::before, .pregunta-mas::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 2px;
    background: currentColor;
    transition: transform .2s;
}
.pregunta-mas::after { transform: rotate(90deg); }
.pregunta button[aria-expanded="true"] .pregunta-mas::after { transform: rotate(0deg); }

.pregunta-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.pregunta-cuerpo[data-abierta="si"] { grid-template-rows: 1fr; }
.pregunta-cuerpo > div { overflow: hidden; }
.pregunta-cuerpo p { padding-bottom: 20px; font-size: .90625rem; color: var(--grafito-500); max-width: 74ch; }

/* ══ 11 · Cierre ════════════════════════════════════════════ */

.cierre { background: var(--cianotipo-700); color: #fff; }
.cierre h2 { color: #fff; }
.cierre .bajada { color: var(--cianotipo-100); margin-top: 16px; }
.cierre-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cierre-nota { margin-top: 22px; font-size: .8125rem; color: var(--cianotipo-100); opacity: .85; }

.cierre-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: clamp(36px, 5vw, 64px);
    align-items: start;
}

.entrar {
    padding: 26px 28px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
}
.entrar label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 10px; }
.entrar-campo { display: flex; gap: 10px; flex-wrap: wrap; }
.entrar-dominio {
    display: flex;
    flex: 1 1 200px;
    align-items: center;
    background: #fff;
    padding-right: 14px;
    overflow: hidden;
}
.entrar-dominio input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    padding: 13px 14px;
    font-family: var(--mono);
    font-size: .875rem;
    color: var(--grafito-900);
    background: transparent;
}
.entrar-dominio input:focus { outline: none; }
.entrar-dominio span { font-family: var(--mono); font-size: .875rem; color: var(--grafito-400); white-space: nowrap; }
.entrar p { margin-top: 12px; font-size: .75rem; color: var(--cianotipo-100); opacity: .8; }

/* ══ Pie ════════════════════════════════════════════════════ */

.pie { background: var(--grafito-900); color: var(--grafito-400); padding-block: 52px 28px; font-size: .875rem; }
.pie-grid {
    display: grid;
    grid-template-columns: minmax(250px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
    gap: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--grafito-700);
}
/* El pie firma con la marca de la empresa, no con la del producto. Va tal
   cual es el logo de GestorWeb —navy, azul corporativo y su bajada—, y para
   eso necesita su fondo claro: el navy sobre el grafito del pie no existiría.
   Ese azul aparece una sola vez en la página, aquí, así que no compite con el
   cianotipo del dato del plan. */
.marca-corporativa {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 13px 18px;
    width: fit-content;
    max-width: 100%;
    background: #fff;
    text-decoration: none;
}
.marca-corporativa-cubo { display: block; flex-shrink: 0; }
.marca-corporativa > span { min-width: 0; }
.marca-corporativa-nombre {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.015em;
    color: #101A2E;
}
.marca-corporativa-nombre b { color: #1C55E8; font-weight: 700; }
.marca-corporativa-bajada {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .005em;
    color: #101A2E;
}

.pie-grid > div > p { margin-top: 16px; max-width: 40ch; }
.pie h4 {
    margin: 0 0 14px;
    font-family: var(--display);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--grafito-300);
}
.pie ul { margin: 0; padding: 0; list-style: none; }
.pie li { margin-bottom: 9px; }
.pie a { color: var(--grafito-400); text-decoration: none; }
.pie a:hover { color: #fff; }
.pie-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    padding-top: 24px;
    font-size: .75rem;
    color: var(--grafito-500);
}

/* ══ Aparición al desplazar ═════════════════════════════════ */

/*
 * El estado oculto se aplica SÓLO si hay JavaScript (la clase `js` la
 * pone un script mínimo en el <head>). Si el script no carga, si falla,
 * o si el navegador no dispara el IntersectionObserver, la página se ve
 * completa igual: una landing cuyo único trabajo es que la lean no
 * puede esconder su contenido detrás de una animación.
 */
.js .revelar {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}
.js .revelar[data-visible="si"] { opacity: 1; transform: none; }

/* ══ Responsive ═════════════════════════════════════════════ */

@media (max-width: 1080px) {
    .hero-grid,
    .problema-grid,
    .ruptura-cabecera,
    .terreno-grid,
    .cierre-grid { grid-template-columns: minmax(0, 1fr); }

    .ruptura-cabecera { align-items: start; gap: 20px; }
    .terreno-visual { order: -1; }
    .modulos-cabecera { flex-direction: column; align-items: start; gap: 16px; }
    .modulos-cabecera .bajada { text-align: left; }
    .indice { grid-template-columns: minmax(0, 1fr); }
    .indice-fila:nth-child(2) { border-top: 1px solid var(--linea-2); }
    .indice-fila:nth-last-child(2) { border-bottom: 0; }
    .vistazo-marco img { width: 128%; }

    .nav-enlaces { display: none; }
    .nav-hamburguesa { display: flex; }
}

@media (max-width: 720px) {
    .cartera-grid { grid-template-columns: minmax(0, 1fr); }
    .planes { border: 0; }
    .plan { border-left: 0; border-top: 1px solid var(--linea-2); }
    .plan:first-child { border-top: 2px solid var(--grafito-900); }
    .plan:last-child { border-bottom: 2px solid var(--grafito-900); }
}

@media (max-width: 560px) {
    body { font-size: 15.5px; }
    .indice-fila { grid-template-columns: 28px minmax(0, 1fr); }
    .indice-fila p { grid-column: 2; }
    .hero-acciones .btn, .cierre-acciones .btn { width: 100%; }
    .lista-numerada li { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; }
    .lista-numerada .indice { font-size: 1.875rem; }
    .vistazo-marco img { width: 150%; }
}

/* Quien pidió menos movimiento no debería tener que ver ninguno. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .js .revelar { opacity: 1; transform: none; }
}

@media print {
    .nav, .nav-movil, .cierre-acciones, .entrar { display: none; }
    .reticula::before { display: none; }
    .hero, .ruptura, .cierre, .pie, .cartera, .banda-accion { background: #fff !important; color: #000; }
    .ruptura h2, .cierre h2, .hero h1 { color: #000; }
    /* El logo del pie ya lleva su propio fondo claro: en papel se sostiene. */
    .marca-corporativa { padding-left: 0; }
}