/* ==========================================================================
   VaultGrid Labs · home nueva (oct-2026)
   Diseño claro: blanco, verde #325C24, Geist. Motivo de plano técnico (retícula,
   cotas y cajas discontinuas, rótulos en mono). Las subpáginas siguen en style.css.
   ========================================================================== */

@font-face {
    font-family: 'Geist';
    src: url('assets/fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('assets/fonts/GeistMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

:root {
    --verde: #325C24;
    --verde-hondo: #264A1B;
    --verde-medio: #6E8E5F;
    --salvia: #8CA478;
    --salvia-texto: #7D936F;
    --tinta: #2E3B22;
    --texto: #34552A;
    --blanco: #FFFFFF;
    --niebla: #F5F8F5;
    --niebla-2: #ECF1EC;
    --escena: #EEF3EE;
    --linea: #E1E1E1;
    --linea-verde: rgba(50, 92, 36, 0.16);
    --discontinua: rgba(50, 92, 36, 0.55);
    --led: #6BCB77;

    --f-texto: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --margen: clamp(16px, 3vw, 56px);
    --hueco: clamp(72px, 9vw, 160px);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --radio: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
    margin: 0;
    background: var(--blanco);
    color: var(--verde);
    font-family: var(--f-texto);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
body.nav-open { overflow: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: var(--verde); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--verde-medio); }
::selection { background: var(--verde); color: var(--blanco); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
.mono { font-family: var(--f-mono); font-weight: 400; letter-spacing: 0.02em; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 3000;
    background: var(--verde); color: var(--blanco); padding: 10px 16px; border-radius: 999px;
}
.skip-link:focus { top: 12px; color: var(--blanco); }

/* --------------------------------------------------------------------------
   Capas fijas
   -------------------------------------------------------------------------- */
.reticula {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(50, 92, 36, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(50, 92, 36, 0.045) 1px, transparent 1px);
    background-size: calc((100vw - 2 * var(--margen)) / 12) 96px;
    background-position: var(--margen) 0;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.grano {
    position: fixed; inset: -50%; z-index: 2500; pointer-events: none; opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grano 1.2s steps(6) infinite;
}
@keyframes grano {
    0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -2%); }
    60% { transform: translate(-2%, -4%); } 80% { transform: translate(4%, 2%); } 100% { transform: translate(0, 0); }
}
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2100;
    background: var(--verde); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* --------------------------------------------------------------------------
   Botones y piezas comunes
   -------------------------------------------------------------------------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    font-size: clamp(14px, 1.05vw, 16px); line-height: 1.2; white-space: nowrap;
    padding: .78em 1.3em; border-radius: 999px; border: 0; cursor: pointer;
    transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .35s var(--ease);
}
.boton--solido {
    background: var(--verde); color: var(--blanco);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .12);
}
.boton--solido:hover { background: var(--verde-hondo); color: var(--blanco); }
.boton--linea { background: rgba(255, 255, 255, .55); color: var(--verde); box-shadow: inset 0 0 0 1px rgba(50, 92, 36, .4); backdrop-filter: blur(6px); }
.boton--linea:hover { background: var(--blanco); color: var(--verde-hondo); box-shadow: inset 0 0 0 1px var(--verde); }
.boton--claro { background: var(--blanco); color: var(--verde); }
.boton--claro:hover { background: var(--niebla-2); color: var(--verde-hondo); }
.boton svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

.enlace-flecha {
    display: inline-flex; align-items: center; gap: .6em; font-size: clamp(15px, 1.15vw, 18px);
    border-bottom: 1px solid var(--linea-verde); padding-bottom: .25em;
}
.enlace-flecha svg { width: 1.1em; height: 1.1em; transition: transform .35s var(--ease); }
.enlace-flecha:hover svg, a:hover > .enlace-flecha svg { transform: translateX(5px); }

.chapa {
    display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
    border: 1px solid rgba(50, 92, 36, .4); border-radius: 999px; padding: .2em .75em;
    font-size: clamp(11px, .85vw, 14px); font-weight: 400; letter-spacing: -0.01em; color: var(--verde);
}
.chapa i { width: 5px; height: 5px; border-radius: 50%; background: var(--verde); }
.chapas { display: flex; flex-wrap: wrap; gap: 8px; }

.indice { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--salvia-texto); }

.pie-referencia {
    position: absolute; left: var(--margen); bottom: 16px; z-index: 6;
    font-size: 11px; color: rgba(46, 59, 34, .6); letter-spacing: .04em;
}
.pie-referencia--claro { color: rgba(255, 255, 255, .7); }

/* Palabras que suben (data-split, lo monta v2.js) */
.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.palabra > span { display: inline-block; will-change: transform; }

/* --------------------------------------------------------------------------
   Intro (una vez por sesión)
   -------------------------------------------------------------------------- */
.intro { display: none; }
.con-intro .intro {
    display: block; position: fixed; inset: 0; z-index: 2200; overflow: hidden; cursor: pointer;
    background: #E4EAE6;
}
.intro-foto { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(18px) saturate(.9); }
.intro-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(232, 238, 234, .88) 0%, rgba(232, 238, 234, .55) 42%, rgba(232, 238, 234, .2) 100%); }
.intro-rotulos {
    position: absolute; top: 5.2vh; left: 5vw; right: 5vw; display: flex; justify-content: space-between; gap: 24px;
    font-size: clamp(13px, 1.05vw, 17px); color: var(--verde);
}
.intro-marca { position: absolute; left: 50%; top: 42%; width: min(80vw, 108vh); height: auto; transform: translate(-50%, -50%); }
.intro-contador { position: absolute; left: 5vw; bottom: 5vh; font-size: 12px; color: var(--verde); }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.cabecera {
    position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
    display: flex; align-items: center; gap: 2.4vw;
    padding: clamp(14px, 1.6vw, 24px) var(--margen);
    transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.cabecera.scrolled {
    background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px) saturate(1.2);
    padding-top: 12px; padding-bottom: 12px; box-shadow: 0 1px 0 var(--linea-verde);
}
.cabecera-marca img { height: clamp(22px, 1.9vw, 30px); width: auto; }
.cabecera-linea { flex: 1; height: 1px; background: var(--linea-verde); }
.cabecera-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); font-size: clamp(13px, 1vw, 15px); white-space: nowrap; }
.cabecera-nav a { position: relative; }
.cabecera-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.cabecera-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.boton--nav-movil { display: none; }
.cabecera-cta { flex: none; }
.menu-toggle { display: none; background: none; border: 0; padding: 6px; color: var(--verde); cursor: pointer; }
.menu-toggle svg { width: 26px; height: 26px; }

@media (max-width: 1100px) {
    .cabecera .cabecera-linea:last-of-type, .cabecera-cta { display: none; }
    .menu-toggle { display: block; margin-left: auto; }
    .cabecera-linea { display: none; }
    .cabecera-nav {
        position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: flex-start; justify-content: center;
        gap: 22px; padding: 90px var(--margen) 40px; background: var(--blanco); font-size: clamp(26px, 6vw, 40px);
        letter-spacing: -0.03em; opacity: 0; visibility: hidden; transform: translateY(-12px);
        transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
    }
    .cabecera-nav.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .boton--nav-movil { display: inline-flex; font-size: 16px; letter-spacing: 0; margin-top: 12px; }
    .cabecera-nav a.boton::after { display: none; }
}

/* --------------------------------------------------------------------------
   Actos (escenas fijadas mientras se baja)
   -------------------------------------------------------------------------- */
main { position: relative; z-index: 1; }
.acto { position: relative; }
.acto-escena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* Acto 1 */
.acto1 { height: 380vh; background: var(--escena); }
.acto1-cielo {
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 50% at 66% 46%, rgba(255, 255, 255, .9), transparent 70%),
        linear-gradient(180deg, #F3F7F3 0%, var(--escena) 60%, #E6EDE7 100%);
}
.acto1-cielo::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(50, 92, 36, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(50, 92, 36, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(70% 60% at 64% 52%, #000 20%, transparent 75%);
}
.acto1-objeto {
    position: absolute; left: 50%; top: 58%; width: min(56vw, 1000px); aspect-ratio: 1280 / 720;
    transform: translate(-16%, -50%); will-change: transform; z-index: 2;
}
.acto1-poster, .acto1-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.acto1-canvas { opacity: 0; }
.acto1.tiene-fotogramas .acto1-canvas { opacity: 1; }
.acto1.tiene-fotogramas .acto1-poster { opacity: 0; }
.acto1-sombra {
    position: absolute; left: 12%; right: 12%; bottom: 8%; height: 9%; z-index: -1;
    background: radial-gradient(50% 50% at 50% 50%, rgba(31, 58, 43, .22), transparent 70%); filter: blur(6px);
}
.acto1-notas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.acto1-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.acto1-lineas polyline {
    fill: none; stroke: var(--verde); stroke-opacity: .7; stroke-width: 1; stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke; opacity: 0;
}
.acto1-nota {
    position: absolute; transform: translate(-100%, -130%); padding: 10px 14px; max-width: 240px;
    border: 1px dashed var(--discontinua); background: rgba(255, 255, 255, .5); backdrop-filter: blur(4px);
    font-size: clamp(12px, .95vw, 15px); line-height: 1.35; color: var(--verde); opacity: 0;
}
.acto1-nota--izq { transform: translate(0, -50%); }
.acto1-nota .mono { display: block; font-size: 10px; color: var(--salvia-texto); margin-bottom: 4px; }

.acto1-texto { position: absolute; left: var(--margen); top: 22%; z-index: 4; max-width: min(46vw, 760px); }
.etiqueta { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--verde); margin-bottom: clamp(18px, 2vw, 30px); }
.punto-vivo { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--led); }
.punto-vivo::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--led); animation: latido 2.4s var(--ease) infinite; }
@keyframes latido { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.acto1 h1 {
    font-size: clamp(38px, 4.6vw, 82px); font-weight: 400; line-height: 1.06; letter-spacing: -0.045em; color: var(--verde);
}
.acto1 h1 em { font-style: normal; color: var(--salvia); }
.acto1-sub { margin: clamp(18px, 2vw, 30px) 0; max-width: 34em; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.45; color: var(--texto); }
.acto1-cifras {
    position: absolute; left: var(--margen); right: var(--margen); bottom: 7%; z-index: 4;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
    border-top: 1px solid var(--linea-verde);
}
.acto1-cifras li { padding: 14px 18px 0 0; font-size: clamp(13px, 1vw, 16px); line-height: 1.3; color: var(--tinta); }
.acto1-cifras li + li { padding-left: 18px; border-left: 1px solid var(--linea-verde); }
.acto1-cifras .mono { display: block; font-size: 10px; color: var(--salvia-texto); margin-bottom: 6px; }
.indicador-scroll {
    position: absolute; left: 50%; bottom: 2.2%; z-index: 5; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--salvia-texto);
}
.indicador-scroll span { position: relative; width: 1px; height: 28px; background: var(--linea-verde); overflow: hidden; }
.indicador-scroll span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--verde); animation: bajar 1.8s var(--ease-in-out) infinite; }
@keyframes bajar { to { top: 100%; } }

/* Actos 2 y 3: vídeo a pantalla completa */
.acto-video { height: 340vh; background: #0E1A12; }
.acto3 { background: var(--blanco); }
.acto-video .acto-escena { background: #0E1A12; }
.acto3 .acto-escena { background: var(--escena); }
/* El acto 2 se monta sobre el final del acto 1 y entra fundiendo (scroll-bateria.js) */
.acto2.solapa { margin-top: -120vh; background: transparent; }
.acto2.solapa .acto-escena { opacity: 0; }
.acto-poster, .acto-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.acto-video video { z-index: 1; opacity: 0; transition: opacity .4s linear; }
.acto-video.video-listo video { opacity: 1; }
.acto-poster { will-change: transform; }
.acto-velo { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(10, 20, 13, .55) 0%, rgba(10, 20, 13, .15) 46%, transparent 70%); }
.acto-velo--cielo { background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .92) 7%, rgba(255, 255, 255, .7) 22%, rgba(255, 255, 255, 0) 40%); }
.acto2-rotulos { position: absolute; left: var(--margen); top: 50%; z-index: 3; width: min(420px, 80vw); transform: translateY(-50%); }
.acto-rotulo {
    position: absolute; left: 0; top: 0; transform: translateY(-50%); opacity: 0;
    color: rgba(255, 255, 255, .86); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5;
    padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .35);
}
.acto-rotulo .mono { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--led); margin-bottom: 10px; }
.acto-rotulo strong { display: block; font-weight: 400; font-size: clamp(26px, 2.6vw, 44px); line-height: 1.05; letter-spacing: -0.035em; color: var(--blanco); margin-bottom: 12px; }
.acto2-puntos { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }

/* Acto 3: instalación anotada */
.anotada { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.anotada-caja { position: absolute; border: 1px dashed var(--verde); background: rgba(255, 255, 255, .18); opacity: 0; }
.anotada-rotulos { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.anotada-rotulo {
    position: absolute; transform: translateX(-50%); width: min(26vw, 320px); text-align: center; opacity: 0;
    font-size: clamp(12px, 1vw, 16px); line-height: 1.4; color: var(--verde);
}
.anotada-rotulo strong { display: block; font-weight: 400; font-size: clamp(16px, 1.6vw, 26px); letter-spacing: -0.025em; margin-bottom: .35em; }
.anotada-guia { display: block; width: 0; margin: 14px auto 0; border-left: 1px dashed var(--verde); transform-origin: top; }

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */
.seccion { position: relative; padding: var(--hueco) var(--margen); background: var(--blanco); }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.seccion-cabeza { margin-bottom: clamp(40px, 5vw, 88px); }
.seccion-cabeza--partida {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 4vw; row-gap: 22px; align-items: end;
}
.seccion-cabeza--partida .indice { grid-column: 1 / -1; }
.seccion h2 {
    font-size: clamp(40px, 5.6vw, 104px); font-weight: 400; line-height: 1; letter-spacing: -0.05em; color: var(--verde);
}
.entradilla { font-size: clamp(15px, 1.12vw, 18px); line-height: 1.5; color: var(--texto); text-wrap: pretty; max-width: 40em; }
.seccion-cabeza--partida > div > .entradilla { margin-bottom: clamp(18px, 1.8vw, 28px); }

.nota-fuentes, .nota-alcance {
    margin-top: clamp(32px, 3.5vw, 56px); max-width: 64em; font-size: 14px; line-height: 1.6; color: var(--salvia-texto);
}
.nota-fuentes strong, .nota-alcance strong { display: block; color: var(--verde); font-weight: 400; margin-bottom: 6px; }
.nota-alcance strong { display: inline; font-family: var(--f-texto); }
.nota-alcance { padding: 22px 24px; border: 1px dashed var(--discontinua); background: var(--niebla); color: var(--texto); }

/* Fichas */
.rejilla-4, .rejilla-3 { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ficha { position: relative; background: var(--blanco); padding: clamp(24px, 2.4vw, 40px); display: flex; flex-direction: column; gap: 14px; transition: background .4s var(--ease); }
.ficha:hover { background: var(--niebla); }
.ficha-num { font-size: 11px; color: var(--salvia-texto); }
.ficha-ico { font-size: 34px; color: var(--verde); margin: 8px 0 12px; }
.ficha h3 { font-size: clamp(20px, 1.6vw, 26px); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; }
.ficha p { font-size: 15px; line-height: 1.55; color: var(--texto); }
.ficha-mira { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--discontinua); }
.ficha-mira strong { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--salvia-texto); margin-bottom: 4px; font-weight: 400; }
.ficha-rol { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--salvia-texto); }

/* Calculadora y medidores */
.calculadora { background: var(--blanco); }
.medidores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-bottom: clamp(32px, 3vw, 56px); }
.medidor {
    background: var(--blanco); padding: clamp(18px, 2.6vw, 44px); display: flex; flex-direction: column; align-items: center;
    min-height: clamp(380px, 34vw, 600px); position: relative;
}
.medidor--arco { background: linear-gradient(var(--niebla), var(--niebla)) padding-box; }
.medidor--puntos { background: var(--niebla-2); }
.arco-caja { position: relative; width: 84%; }
.arco { width: 100%; height: auto; overflow: visible; }
.arco-fondo, .arco-valor { fill: none; stroke-width: 34; filter: url(#vg-suave); }
.arco-fondo { stroke: var(--linea); }
.arco-valor { stroke: url(#vg-arco); stroke-dasharray: 565.49; stroke-dashoffset: 565.49; transition: stroke-dashoffset 1s var(--ease); }
.medidor-cifra {
    font-size: clamp(46px, 5.2vw, 96px); font-weight: 300; letter-spacing: -0.055em; line-height: 1; color: #346024;
    font-variant-numeric: tabular-nums; text-align: center;
}
.arco-caja .medidor-cifra { position: absolute; left: 0; right: 0; bottom: 4%; }
.medidor--puntos .medidor-cifra { margin: auto 0 24px; }
.medidor-pie { margin-top: auto; padding-top: 28px; text-align: center; }
.medidor-pie--arriba { margin: 0; padding: 0 0 12px; }
.medidor-pie h3 { display: flex; align-items: center; justify-content: center; gap: .5em; flex-wrap: wrap; font-size: clamp(22px, 2.1vw, 34px); font-weight: 400; letter-spacing: -0.035em; }
.medidor-pie p { margin-top: .5em; font-size: clamp(14px, 1.15vw, 18px); color: var(--texto); }
.medidor-nota { margin-top: 14px; font-size: 11px; color: var(--salvia-texto); }
.puntos { display: grid; grid-template-columns: repeat(20, 1fr); gap: clamp(4px, .45vw, 8px); width: 100%; }
.puntos i { display: block; aspect-ratio: 1; border-radius: 50%; background: #D5DED3; transition: background-color .45s var(--ease), transform .45s var(--ease); }
.puntos i.on { background: var(--verde); }
.puntos i.on:nth-child(7n + 3) { background: #4F7A3E; }

.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.calc-panel, .calc-results { background: var(--blanco); padding: clamp(22px, 2.6vw, 44px); display: flex; flex-direction: column; gap: 28px; }
.calc-results { background: var(--niebla); }
.calc-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.calc-field-head label { font-size: 15px; color: var(--verde); }
.calc-hint { font-family: var(--f-mono); font-size: 11px; color: var(--salvia-texto); }
.calc-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.calc-preset {
    border: 1px solid var(--linea); background: var(--blanco); color: var(--verde); border-radius: var(--radio); cursor: pointer;
    padding: 14px 10px; font-size: 16px; text-align: left; transition: border-color .25s, background .25s;
}
.calc-preset span { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: 11px; color: var(--salvia-texto); }
.calc-preset:hover { border-color: var(--salvia); }
.calc-preset.active { border-color: var(--verde); background: var(--niebla-2); box-shadow: inset 0 0 0 1px var(--verde); }
.calc-value-box { display: inline-flex; align-items: baseline; gap: 6px; border-bottom: 1px solid var(--linea-verde); }
.calc-value-box input, .calc-num-field input {
    width: 6.5em; border: 0; background: transparent; color: var(--verde); font: inherit; font-size: 20px; text-align: right;
    font-variant-numeric: tabular-nums; padding: 2px 0;
}
.calc-unit { font-family: var(--f-mono); font-size: 12px; color: var(--salvia-texto); }
.calc-slider { width: 100%; appearance: none; -webkit-appearance: none; height: 2px; background: var(--linea); outline: none; }
.calc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--verde); border: 3px solid var(--blanco); box-shadow: 0 0 0 1px var(--verde); cursor: grab; }
.calc-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--verde); border: 3px solid var(--blanco); box-shadow: 0 0 0 1px var(--verde); cursor: grab; }
.calc-advanced-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-num-field { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--linea); padding: 12px 14px; background: var(--niebla); }
.calc-num-field label { font-size: 13px; color: var(--texto); }
.calc-num-field input { text-align: left; width: 100%; }
.calc-headline-label { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--salvia-texto); }
.calc-headline-value { margin: 8px 0; font-size: clamp(36px, 3.6vw, 64px); font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.calc-range { font-size: 15px; color: var(--texto); }
.calc-breakdown { display: flex; flex-direction: column; gap: 12px; }
.calc-line { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.calc-line-lbl { color: var(--texto); }
.calc-line-dots { flex: 1; border-bottom: 1px dotted var(--discontinua); transform: translateY(-4px); }
.calc-line-val { font-variant-numeric: tabular-nums; color: var(--verde); }
.calc-line.is-off .calc-line-val { color: #A3562B; }
.calc-method summary { cursor: pointer; font-size: 14px; color: var(--verde); }
.calc-method-body { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--texto); }
.calc-method-body code { font-family: var(--f-mono); font-size: 12px; background: var(--blanco); border: 1px dashed var(--discontinua); padding: 8px 10px; }
.calc-disclaimer { font-size: 13px; line-height: 1.55; color: var(--salvia-texto); }
.calc-disclaimer strong { color: var(--verde); font-weight: 500; }

.tres-tamanos {
    margin-top: clamp(56px, 7vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4vw; align-items: center;
}
.tres-tamanos h2 { font-size: clamp(34px, 4vw, 72px); margin: 16px 0 22px; }
.tres-tamanos-texto > p { font-size: clamp(15px, 1.1vw, 18px); color: var(--texto); margin-bottom: 22px; }
.tres-tamanos .chapas { margin-bottom: 28px; }
.tres-tamanos-foto { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--niebla-2); }
.tres-tamanos-foto img, .estudio-foto img, .banda-foto-img img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }

/* Sectores */
.sectores-lista { border-top: 1px solid var(--linea); }
.sector-fila {
    position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: baseline; gap: 3vw;
    padding: clamp(24px, 2.6vw, 44px) 0; border-bottom: 1px solid var(--linea); color: var(--verde);
}
.sector-fila::before {
    content: ""; position: absolute; inset: 0; background: var(--niebla); transform: scaleY(0); transform-origin: bottom;
    transition: transform .5s var(--ease); z-index: -1;
}
.sector-fila:hover::before { transform: scaleY(1); }
.sector-fila .mono { font-size: 12px; color: var(--salvia-texto); }
.sector-fila h3 { font-size: clamp(26px, 2.8vw, 48px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.02; transition: transform .5s var(--ease); }
.sector-fila:hover h3 { transform: translateX(10px); }
.sector-fila p { font-size: 15px; color: var(--texto); }
.sector-fila-ir { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.sector-fila-ir svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.sector-fila:hover .sector-fila-ir svg { transform: translateX(6px); }
.sector-fila-foto { display: none; }
.sector-cursor {
    position: fixed; left: 0; top: 0; z-index: 30; width: 300px; aspect-ratio: 4 / 3; pointer-events: none; overflow: hidden;
    opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .3s var(--ease);
    border: 1px solid var(--blanco); box-shadow: 0 20px 50px rgba(30, 50, 20, .25);
}
.sector-cursor img { width: 100%; height: 100%; object-fit: cover; }
.sector-cursor.visible { opacity: 1; }
.otros-casos { margin-top: clamp(36px, 4vw, 64px); }
.otros-casos-lista { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.otros-casos-lista a {
    display: inline-block; padding: .55em 1.1em; border: 1px solid var(--linea); border-radius: 999px; font-size: 14px;
    transition: border-color .25s, background .25s;
}
.otros-casos-lista a:hover { border-color: var(--verde); background: var(--niebla); color: var(--verde); }

/* Galería: tira horizontal en escritorio */
.galeria { padding-left: 0; padding-right: 0; overflow: hidden; }
.galeria .seccion-cabeza { padding: 0 var(--margen); }
.galeria-pista { display: flex; gap: clamp(16px, 2vw, 32px); padding: 0 var(--margen); will-change: transform; }
.galeria-figura { flex: 0 0 auto; width: clamp(300px, 34vw, 560px); }
.galeria-figura--ancha { width: clamp(340px, 52vw, 880px); }
.galeria-figura img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--niebla-2); }
.galeria-figura--ancha img { aspect-ratio: 16 / 9; }
.galeria-figura figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--texto); max-width: 34em; }
.galeria-figura figcaption .mono { display: block; font-size: 10px; color: var(--salvia-texto); margin-bottom: 6px; }
.galeria-figura figcaption strong { display: block; font-weight: 400; font-size: 19px; letter-spacing: -0.02em; color: var(--verde); margin-bottom: 4px; }
.galeria-pie { padding: 0 var(--margen); display: flex; flex-wrap: wrap; gap: 24px 4vw; align-items: end; justify-content: space-between; }
.galeria-pie .nota-fuentes { flex: 1 1 520px; }

/* Proceso */
.pasos { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linea); padding-top: 0; }
.pasos-linea { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
.pasos-linea span { display: block; height: 100%; background: var(--verde); transform: scaleX(0); transform-origin: left; }
.paso { padding: 28px 22px 0 0; display: flex; flex-direction: column; gap: 14px; }
.paso + .paso { padding-left: 22px; border-left: 1px dashed var(--linea-verde); }
.paso-num { font-size: 12px; color: var(--salvia-texto); }
.paso h3 { font-size: clamp(19px, 1.5vw, 24px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 8px; }
.paso p { font-size: 14.5px; line-height: 1.55; color: var(--texto); }

/* Estudios */
.estudios-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); }
.estudio { display: flex; flex-direction: column; gap: 14px; }
.estudio-foto { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--niebla-2); margin-bottom: 8px; }
.estudio-chapa { position: absolute; left: 14px; top: 14px; padding: 6px 10px; background: rgba(255, 255, 255, .85); font-size: 11px; color: var(--verde); }
.estudio-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--salvia-texto); }
.estudio h3 { font-size: clamp(22px, 2vw, 32px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.estudio > p { font-size: 15px; color: var(--texto); }
.estudio-datos { display: flex; flex-wrap: wrap; gap: 8px; }
.estudio-datos li { font-size: 12px; padding: 6px 10px; border: 1px dashed var(--discontinua); }

/* Puentes */
.puentes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0; background: var(--linea); }
.puente { background: var(--blanco); padding: var(--hueco) var(--margen); display: flex; flex-direction: column; gap: 22px; transition: background .4s var(--ease); }
.puente:hover { background: var(--niebla); color: var(--verde); }
.puente h2 { font-size: clamp(36px, 4vw, 72px); }
.puente p:not(.indice) { font-size: 15px; line-height: 1.6; color: var(--texto); max-width: 36em; }
.puente .enlace-flecha { margin-top: auto; align-self: flex-start; }

/* Banda con foto (FAQ) */
.banda-foto { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; color: var(--blanco); }
.banda-foto-img { position: absolute; inset: 0; }
.banda-foto-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 26, 18, .82) 0%, rgba(14, 26, 18, .4) 60%, rgba(14, 26, 18, .2) 100%); }
.banda-foto-texto { position: relative; z-index: 1; padding: var(--hueco) var(--margen); max-width: 860px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.banda-foto .indice { color: var(--led); }
.banda-foto h2 { font-size: clamp(40px, 5vw, 92px); font-weight: 400; line-height: 1; letter-spacing: -0.05em; color: var(--blanco); }
.banda-foto p:not(.indice) { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .85); }

/* Contacto */
.contacto { background: var(--niebla); }
.contacto-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 5vw; align-items: start; }
.contacto-texto { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 24px; }
.contacto h2 { font-size: clamp(40px, 4.6vw, 84px); }
.contacto-directo { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--texto); }
.contacto-directo li, .contacto-directo a { display: inline-flex; align-items: center; gap: 10px; }
.contacto-directo svg { width: 16px; height: 16px; flex: none; }
.contacto-caja { position: relative; background: var(--blanco); border: 1px solid var(--linea); padding: clamp(22px, 2.8vw, 48px); }
.contacto-caja::before {
    content: ""; position: absolute; inset: 10px; border: 1px dashed var(--linea-verde); pointer-events: none;
}
.ancla-proyecto { position: absolute; top: -120px; }
.contact-form { position: relative; display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row[hidden] { display: none; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form select, .contact-form textarea {
    width: 100%; font: inherit; font-size: 15px; color: var(--verde); background: transparent;
    border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; padding: 12px 2px; transition: border-color .25s;
    appearance: none; -webkit-appearance: none;
}
.contact-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' stroke='%23325C24' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center; padding-right: 22px;
}
.contact-form textarea { border: 1px solid var(--linea); padding: 12px; resize: vertical; min-height: 110px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--verde); }
.contact-form ::placeholder { color: var(--salvia-texto); }
.campo-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--texto); cursor: pointer; }
.form-consent input { margin-top: 3px; accent-color: var(--verde); width: 16px; height: 16px; flex: none; }
.form-consent a { text-decoration: underline; }
.btn-submit { align-self: flex-start; padding: 1em 1.6em; }
.form-status { display: none; font-size: 14px; padding: 10px 12px; border: 1px dashed var(--discontinua); }
.form-status.show { display: block; }
.form-status.ok { color: var(--verde); background: var(--niebla); }
.form-status.err { color: #A3562B; border-color: #D9A688; }
.form-fallback { display: none; font-size: 14px; color: var(--texto); }
.form-fallback.show { display: block; }
.form-fallback a { text-decoration: underline; }
.form-disclaimer { font-size: 11px; color: var(--salvia-texto); line-height: 1.5; }

/* Pie */
.pie { position: relative; z-index: 1; background: var(--blanco); border-top: 1px solid var(--linea); padding: clamp(56px, 6vw, 100px) var(--margen) 24px; overflow: hidden; }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 4vw; }
.pie-lema { font-size: clamp(24px, 2.4vw, 40px); line-height: 1.1; letter-spacing: -0.035em; max-width: 14em; margin-bottom: 18px; }
.pie-org { font-size: 12px; color: var(--salvia-texto); line-height: 1.6; }
.pie-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pie-col p { color: var(--texto); }
.pie-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--salvia-texto); font-weight: 400; margin-bottom: 6px; }
.pie-glosario { margin-top: clamp(40px, 4vw, 64px); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 18px 0; }
.pie-glosario summary { cursor: pointer; font-size: 15px; }
.pie-glosario-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 3vw; margin-top: 22px; }
.pie-glosario dt { font-size: 15px; margin-bottom: 6px; }
.pie-glosario dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--texto); }
.pie-marca { margin: clamp(40px, 5vw, 80px) 0 0; }
.pie-marca img { width: 100%; height: auto; opacity: .9; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 12px; color: var(--salvia-texto); }
.pie-legal div { display: flex; gap: 18px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Widget de WhatsApp (mismos ids y clases que script.js)
   -------------------------------------------------------------------------- */
.whatsapp-widget-container {
    position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 1500;
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.wa-tip {
    display: none; align-items: center; gap: 10px; max-width: 265px; padding: 11px 12px 11px 15px;
    background: var(--blanco); border: 1px solid var(--linea); box-shadow: 0 14px 40px rgba(30, 50, 20, .14);
    font-size: 13px; line-height: 1.4; color: var(--texto); opacity: 0; transform: translateY(6px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.wa-tip.show { display: flex; opacity: 1; transform: none; }
.wa-tip strong { color: var(--verde); font-weight: 500; }
.wa-tip-close, .wa-chat-close { flex: none; background: none; border: 0; color: var(--salvia-texto); font-size: 20px; line-height: 1; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; }
.wa-tip-close:hover, .wa-chat-close:hover { background: var(--niebla-2); color: var(--verde); }
.whatsapp-trigger-btn {
    display: inline-flex; align-items: center; height: 54px; padding: 0 15px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--verde); color: var(--blanco); box-shadow: 0 12px 30px rgba(38, 74, 27, .3); font-size: 14px;
    transition: background .3s var(--ease), transform .3s var(--ease);
}
.whatsapp-trigger-btn:hover { background: var(--verde-hondo); transform: translateY(-2px); }
.wa-trigger-icon { width: 24px; height: 24px; fill: var(--blanco); flex: none; }
.wa-badge-text { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s var(--ease), opacity .25s, margin-left .35s var(--ease); }
.whatsapp-trigger-btn:hover .wa-badge-text, .whatsapp-trigger-btn:focus-visible .wa-badge-text { max-width: 220px; margin-left: 10px; opacity: 1; }
.whatsapp-trigger-btn[aria-expanded="true"] { background: var(--salvia); }
.whatsapp-trigger-btn[aria-expanded="true"] .wa-badge-text { max-width: 0; margin-left: 0; opacity: 0; }
.whatsapp-chat-window {
    position: absolute; right: 0; bottom: 66px; width: 372px; max-width: calc(100vw - 32px);
    background: var(--blanco); border: 1px solid var(--linea); box-shadow: 0 28px 70px rgba(30, 50, 20, .22);
    display: none; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(12px) scale(.97); transform-origin: bottom right;
    transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.whatsapp-chat-window.open { display: flex; opacity: 1; transform: none; }
.wa-chat-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--niebla); border-bottom: 1px solid var(--linea); }
.wa-avatar-box { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--verde); display: grid; place-items: center; flex: none; }
.wa-avatar-ico { width: 20px; height: 20px; fill: var(--blanco); }
.wa-avatar-status { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--led); border: 2px solid var(--niebla); }
.wa-header-info { flex: 1; min-width: 0; }
.wa-header-info h4 { font-size: 15px; font-weight: 500; margin: 0 0 2px; }
.wa-header-info p { font-size: 12px; color: var(--salvia-texto); }
.wa-chat-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; max-height: min(62vh, 470px); overflow-y: auto; }
.wa-bot-message { background: var(--niebla); border: 1px solid var(--linea); padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--texto); display: flex; flex-direction: column; gap: 6px; }
.wa-context-chip { display: none; align-items: center; gap: 8px; font-size: 12px; color: var(--verde); border: 1px dashed var(--discontinua); padding: 8px 10px; }
.wa-context-chip.show { display: flex; }
.wa-chip-ico { width: 16px; height: 16px; flex: none; }
.wa-mini-form { display: flex; flex-direction: column; gap: 12px; }
.wa-field { display: flex; flex-direction: column; gap: 4px; }
.wa-field label { font-size: 12px; color: var(--salvia-texto); }
.wa-field input, .wa-field select, .wa-field textarea {
    font: inherit; font-size: 14px; color: var(--verde); border: 1px solid var(--linea); background: var(--blanco); padding: 9px 10px; border-radius: 0;
}
.wa-field input:focus, .wa-field select:focus, .wa-field textarea:focus { outline: none; border-color: var(--verde); }
.wa-consent { display: flex; gap: 10px; font-size: 12px; line-height: 1.45; color: var(--texto); }
.wa-consent input { accent-color: var(--verde); margin-top: 2px; flex: none; }
.wa-consent a { text-decoration: underline; }
.btn-wa-send { width: 100%; }
.wa-send-icon { width: 18px; height: 18px; fill: currentColor; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pasos { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--linea); padding-left: 0; }
    .pasos-linea { left: -1px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
    .pasos-linea span { transform: scaleY(0); transform-origin: top; height: 100%; width: 100%; }
    .paso, .paso + .paso { padding: 0 0 32px 28px; border-left: 0; }
    .pie-rejilla { grid-template-columns: 1fr 1fr; }
    .pie-glosario-rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .acto1 { height: 240vh; }
    .acto1-texto { top: 15%; right: var(--margen); max-width: none; }
    .acto1 h1 { font-size: clamp(34px, 9vw, 52px); }
    .acto1-sub { font-size: 15px; margin: 16px 0; }
    .acto1-objeto { width: 120vw; top: 72%; left: 50%; transform: translate(-50%, -50%); }
    .acto1-notas { display: none; }
    .acto1-cifras { grid-template-columns: 1fr 1fr; bottom: calc(34px + env(safe-area-inset-bottom, 0px)); row-gap: 10px; }
    .acto1-cifras li:nth-child(3) { padding-left: 0; border-left: 0; }
    .acto1-cifras li { padding-top: 10px; font-size: 12.5px; }
    .indicador-scroll { display: none; }
    .acto-video { height: 280vh; }
    .acto-velo { background: linear-gradient(0deg, rgba(10, 20, 13, .75) 0%, rgba(10, 20, 13, .2) 55%, transparent 80%); }
    .acto2-rotulos { top: auto; bottom: 22%; transform: none; }
    .anotada-rotulo { width: 40vw; font-size: 11px; padding: 8px 10px; background: rgba(255, 255, 255, .88); border: 1px dashed var(--discontinua); }
    .anotada-rotulo strong { font-size: 14px; }
    .anotada-rotulo .anotada-guia { display: none; }
    .seccion-cabeza--partida { grid-template-columns: 1fr; }
    .medidores, .calc-layout, .tres-tamanos, .estudios-rejilla, .puentes, .contacto-rejilla, .rejilla-3 { grid-template-columns: 1fr; }
    .rejilla-4 { grid-template-columns: 1fr; }
    .sector-fila { grid-template-columns: 1fr; gap: 10px; }
    .sector-fila-foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; order: -1; margin-bottom: 8px; }
    .galeria-pista { flex-direction: column; }
    .galeria-figura, .galeria-figura--ancha { width: 100%; }
    .contacto-texto { position: static; }
    .form-row { grid-template-columns: 1fr; }
    .pie-rejilla, .pie-glosario-rejilla { grid-template-columns: 1fr; }
    .whatsapp-widget-container { right: 14px; }
    .reticula { background-size: calc((100vw - 2 * var(--margen)) / 4) 96px; }
    .pie-referencia { left: var(--margen); right: auto; bottom: 10px; font-size: 10px; }
}

/* Movimiento reducido: sin escenas fijadas ni vídeo; todo a la vista */
@media (prefers-reduced-motion: reduce) {
    .grano, .punto-vivo::after, .indicador-scroll span::after { animation: none; }
    .acto1, .acto-video { height: auto; }
    .acto-escena { position: relative; height: 100vh; height: 100svh; }
    .acto1-nota, .acto1-lineas polyline, .acto-rotulo, .anotada-caja, .anotada-rotulo { opacity: 1; }
    .acto2-rotulos .acto-rotulo + .acto-rotulo { display: none; }
    html { scroll-behavior: auto; }
}

/* Sin JavaScript: lo mismo que movimiento reducido */
.sin-js .acto1, .sin-js .acto-video { height: auto; }
.sin-js .acto-escena { position: relative; }
.sin-js .acto1-nota, .sin-js .acto-rotulo:first-child, .sin-js .anotada-caja, .sin-js .anotada-rotulo { opacity: 1; }

/* ==========================================================================
   Segunda pasada (2-oct-2026): animaciones del diseño de referencia
   ========================================================================== */

.tenue { color: var(--salvia-texto); }

/* Intro: la web sube como una tarjeta por encima del paisaje con el logo */
.con-intro main { z-index: 2300; }
.con-intro .cabecera { z-index: 2400; }
.con-intro .acto1 { background: transparent; }
.con-intro .acto1 .acto-escena { background: var(--escena); }
.intro-rotulos, .intro-marca { will-change: transform, opacity, filter, clip-path; }

/* Tarjeta de la ficha, en reposo, unida al contenedor por una línea discontinua */
.acto1-ficha { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.acto1-ficha-linea { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.acto1-ficha-linea polyline { fill: none; stroke: var(--verde); stroke-opacity: .7; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.acto1-ficha-caja {
    position: absolute; left: 70%; top: 11%; width: clamp(250px, 19.5vw, 360px);
    padding: clamp(16px, 1.5vw, 26px) clamp(18px, 1.8vw, 30px);
    border: 1px dashed rgba(50, 92, 36, .55); background: rgba(255, 255, 255, .28); backdrop-filter: blur(6px);
}
.acto1-ficha-titulo { font-size: clamp(13px, 1.05vw, 17px); margin-bottom: clamp(12px, 1.2vw, 20px); }
.acto1-ficha dl { display: grid; row-gap: clamp(9px, .9vw, 14px); margin: 0; }
.acto1-ficha dl div { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.acto1-ficha dt { display: flex; align-items: center; gap: .7em; font-size: clamp(11px, .85vw, 14px); }
.acto1-ficha dt i { width: 6px; height: 13px; border-radius: 3px; flex: none; }
.acto1-ficha dd { margin: 0; font-size: clamp(14px, 1.15vw, 19px); font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* Cifras del hero */
.acto1-cifras { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 4.5vw; border-top: 0; }
.acto1-cifras li, .acto1-cifras li + li { padding: 0; border: 0; color: var(--tinta); font-size: clamp(11px, .85vw, 14px); line-height: 1.3; }
.cifra { min-width: 8vw; }
.cifra-num { display: block; font-size: clamp(30px, 3.1vw, 54px); font-weight: 300; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: .45em; }
.cifra-num small { font-size: .62em; }
.cifra-textos { margin-left: auto; display: flex; flex-direction: column; gap: 6px; text-align: right; }
.cifra-textos i { font-style: normal; font-size: 10px; color: var(--salvia-texto); margin-right: 8px; }

/* Puntos de capacidad: ecualizador de 10 columnas dobles, como en el diseño */
.puntos { display: flex; justify-content: space-between; gap: 6px; grid-template-columns: none; }
.puntos-col { display: grid; grid-template-columns: repeat(2, clamp(7px, .62vw, 11px)); column-gap: clamp(3px, .3vw, 5px); row-gap: clamp(4px, .42vw, 7px); }
.puntos-col i { display: block; aspect-ratio: 1; border-radius: 50%; background: #D5DAD4; transition: background-color .45s ease; }
.puntos-col i.on { background: #386126; }
.medidor--puntos .medidor-cifra { margin: auto 0; padding: 24px 0; }
.medidor-cifra small { font-size: .42em; letter-spacing: -0.02em; margin-left: .14em; }

/* Contacto centrado con guías verticales y el contenedor que se endereza */
.contacto { background: var(--blanco); padding-bottom: 0; overflow: hidden; }
.contacto-guia { position: absolute; top: 0; width: 1px; background: #E2E2E2; pointer-events: none; }
.contacto-guia--izq { left: 16.6%; height: calc(100% - 9vw); }
.contacto-guia--der { right: 16.4%; height: calc(100% - 3vw); }
.contacto-rejilla { position: relative; display: block; max-width: 980px; margin: 0 auto; text-align: center; }
.contacto-texto { position: static; align-items: center; gap: 22px; margin-bottom: clamp(32px, 3.5vw, 56px); }
.contacto-texto .entradilla { margin: 0 auto; max-width: 46em; }
.contacto-directo { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.contacto-caja { max-width: 820px; margin: 0 auto; text-align: left; }
.contacto-objeto { display: flex; justify-content: center; padding: clamp(32px, 4vw, 64px) 0 0; margin: 0; perspective: 1400px; }
.contacto-objeto img { width: min(62vw, 1100px); min-width: 320px; height: auto; transform-origin: 50% 100%; will-change: transform; }
.contacto-pie-ref { position: static; text-align: center; padding: 10px 0 24px; }

/* Telón final */
.pie { z-index: 2; transform-origin: 50% 100%; }
.telon { position: relative; height: 100vh; height: 100svh; z-index: 0; }
.telon-escena { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #E4EAE6; visibility: hidden; }
.telon.activo .telon-escena { visibility: visible; }

@media (max-width: 1100px) {
    .acto1-ficha { display: none; }
}
@media (max-width: 860px) {
    .acto1-cifras { gap: 12px 7vw; }
    .cifra { min-width: 0; }
    .cifra-num { font-size: 26px; }
    .cifra-textos { display: none; }
    .contacto-guia { display: none; }
    .puntos { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
    .telon { display: none; }
}

/* El telón se lleva también la cabecera, como en la referencia */
.cabecera { transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease), transform .6s var(--ease); }
.telon-visible .cabecera { transform: translateY(-120%); }
.anotada-rotulo { text-shadow: 0 0 14px rgba(255, 255, 255, .95), 0 0 2px #fff; }
@media (max-width: 860px) {
    .acto1-cifras { bottom: calc(46px + env(safe-area-inset-bottom, 0px)); right: 78px; }
    .acto1 .pie-referencia { bottom: 12px; right: 78px; }
}
@media (max-width: 860px) {
    .acto1-cifras { flex-wrap: nowrap; gap: 14px; }
    .acto1-cifras li { font-size: 10.5px; }
    .cifra-num { font-size: 22px; margin-bottom: .35em; }
}

/* Verbo que rota en el titular */
.rotador { display: inline-block; vertical-align: top; height: 1.2em; overflow: hidden; margin-bottom: -0.14em; margin-right: -.12em; transition: width .9s cubic-bezier(.76,0,.24,1); }
.rotador-pista { display: flex; flex-direction: column; }
.rotador-pista > span { display: block; width: max-content; height: 1.2em; line-height: 1.06; }
.rotador.moviendo .rotador-pista { transition: transform .9s cubic-bezier(.76,0,.24,1); }

/* Acto 3 con foto fija (sin clip C3): lienzo 16:9 que cubre la escena; cajas en % de la imagen */
.acto3--foto { height: 260vh; }
.acto3--foto .acto-escena { background: var(--escena); }
.anotada-lienzo {
    position: absolute; left: 50%; top: 50%; width: max(100vw, 177.78vh); width: max(100vw, 177.78svh);
    aspect-ratio: 16 / 9; transform: translate(-50%, -50%); will-change: transform;
}
.anotada-lienzo .acto-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anotada-rotulo {
    position: absolute; transform: translateX(-50%); width: min(26%, 360px); display: flex; flex-direction: column; align-items: center;
    text-align: center; opacity: 0;
}
.anotada-rotulo p { margin: 0; }
.anotada-rotulo .anotada-guia { flex: 1; margin: 1.2vw auto 0; }
.acto3--foto .acto-velo--cielo { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.95) 8%, rgba(255,255,255,.62) 19%, rgba(255,255,255,0) 33%); }

@media (max-width: 860px) {
    .acto3--foto { height: 200vh; }
    .anotada-lienzo { width: 100vw; top: 32%; }
    .acto3--foto .acto-velo--cielo { display: none; }
    .anotada-rotulos { position: absolute; top: 100%; left: 0; right: 0; inset: 100% 0 auto 0; display: flex; flex-direction: column; gap: 18px; padding: 28px var(--margen) 0; }
    .anotada-rotulo { position: static; transform: none; width: auto; height: auto !important; text-align: left; align-items: flex-start; padding: 0 0 0 14px; background: none; border: 0; border-left: 1px dashed var(--discontinua); font-size: 13px; }
    .anotada-rotulo strong { font-size: 18px; }
    .anotada-rotulo .anotada-guia { display: none; }
}

/* El vídeo del acto 2 centrado del todo: así casa con el final del acto 1 */
.acto2 .acto-poster, .acto2 video { object-position: center center; }

/* ==========================================================================
   Tercera pasada (2-oct-2026): el vídeo en tarjeta, enlace limpio entre actos y sin desenfoques
   ========================================================================== */
.arco-fondo, .arco-valor { filter: none; stroke-linecap: butt; }

.acto2 .acto-escena { background: var(--escena); }
.acto2-tarjeta {
    position: absolute; left: 50%; top: calc(50% + 30px); transform: translate(-50%, -50%);
    width: min(86vw, calc((100vh - 150px) * 16 / 9)); width: min(86vw, calc((100svh - 150px) * 16 / 9));
    aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; isolation: isolate;
    background: #C9D3CD; box-shadow: 0 30px 90px rgba(30, 60, 30, .16), 0 0 0 1px rgba(50, 92, 36, .08);
}
.acto2-zoom { position: absolute; inset: 0; transform-origin: 50% 47%; will-change: transform; }
.acto2-zoom .acto-poster, .acto2-zoom video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.acto2-tarjeta .acto-velo { z-index: 2; opacity: 0; }
.acto2-tarjeta .acto2-rotulos { left: clamp(20px, 3.5vw, 56px); z-index: 3; }
.acto2-tarjeta .acto2-puntos { z-index: 4; }
.acto2-pie { left: auto; right: var(--margen); color: rgba(46, 59, 34, .6); opacity: 0; }

@media (max-width: 860px) {
    .acto2-tarjeta { width: calc(100vw - 32px); aspect-ratio: 4 / 5; max-height: calc(100svh - 120px); top: calc(50% + 26px); border-radius: 18px; }
    .acto2-tarjeta .acto2-rotulos { left: 18px; right: 18px; width: auto; bottom: 22px; top: auto; transform: none; }
    .acto2-pie { right: auto; left: var(--margen); }
}

/* El verbo que rota se recorta siempre, también cuando se mueve en su propia capa de GPU */
.rotador { clip-path: inset(0 -0.05em 0 0); contain: paint; }

/* Recorrido más corto (2-oct, Daniel: «son muchos scrolls para entrar») */
.acto1 { height: 230vh; }
.acto-video { height: 230vh; }
.acto3--foto { height: 180vh; }
@media (max-width: 860px) {
    .acto1 { height: 190vh; }
    .acto-video { height: 200vh; }
    .acto3--foto { height: 160vh; }
}
@media (prefers-reduced-motion: reduce) { .acto1, .acto-video, .acto3--foto { height: auto; } }
.sin-js .acto1, .sin-js .acto-video, .sin-js .acto3--foto { height: auto; }

/* Entrar en la batería (2-oct, cuarta pasada): la tarjeta tiene su tamaño final y se descubre
   desde un marco más pequeño (clip-path en scroll-bateria.js). Recorrido intermedio. */
.acto2-tarjeta {
    width: calc(100vw - 48px); height: calc(100vh - 104px); height: calc(100svh - 104px); aspect-ratio: auto;
    top: calc(50% + 28px); border-radius: 0; box-shadow: none; background: #C9D3CD;
}
.acto1 { height: 260vh; }
.acto-video { height: 280vh; }
@media (max-width: 860px) {
    .acto2-tarjeta { width: calc(100vw - 16px); height: calc(100svh - 96px); aspect-ratio: auto; max-height: none; top: calc(50% + 24px); border-radius: 0; }
    .acto1 { height: 210vh; }
    .acto-video { height: 230vh; }
}
@media (prefers-reduced-motion: reduce) { .acto1, .acto-video { height: auto; } .acto2-tarjeta { clip-path: none; } }

/* Secciones en verde con texto blanco, intercaladas (2-oct, Daniel) */
.seccion--verde { background: var(--verde); color: #fff; }
.seccion--verde + .seccion, .seccion + .seccion--verde { border-top: 0; }
.seccion--verde h2, .seccion--verde h3, .seccion--verde strong { color: #fff; }
.seccion--verde .entradilla, .seccion--verde p, .seccion--verde li, .seccion--verde dd { color: rgba(255, 255, 255, .86); }
.seccion--verde .indice, .seccion--verde .ficha-num, .seccion--verde .paso-num, .seccion--verde .mono { color: rgba(255, 255, 255, .62); }
.seccion--verde .tenue { color: #C8DDB8; }
.seccion--verde a:not(.boton) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.seccion--verde .boton--solido { background: #fff; color: var(--verde); box-shadow: none; }
.seccion--verde .boton--solido:hover { background: #E7F0E1; color: var(--verde-hondo); }
.seccion--verde .boton--linea { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.seccion--verde .rejilla-4, .seccion--verde .rejilla-3 { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .16); }
.seccion--verde .ficha { background: var(--verde); }
.seccion--verde .ficha:hover { background: #3A672B; }
.seccion--verde .ficha-ico { color: #fff; }
.seccion--verde .ficha-mira { border-top-color: rgba(255, 255, 255, .3); }
.seccion--verde .ficha-mira strong { color: rgba(255, 255, 255, .62); }
.seccion--verde .nota-fuentes { color: rgba(255, 255, 255, .7); }
.seccion--verde .nota-fuentes strong { color: #fff; }
.seccion--verde .nota-alcance { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .86); }
.seccion--verde .pasos { border-color: rgba(255, 255, 255, .18); }
.seccion--verde .pasos-linea span { background: #fff; }
.seccion--verde .paso + .paso { border-left-color: rgba(255, 255, 255, .22); }
.seccion--verde ::selection { background: #fff; color: var(--verde); }
.acto2-tarjeta { background: #B4C1B9; }
.acto2-zoom { transform-origin: 50% 50%; }

/* Accesibilidad (Lighthouse, 2-oct; 8-oct): contraste AA en textos pequeños, también sobre --niebla-2,
   y enlaces subrayados dentro de párrafos, tablas y listas */
:root { --salvia-texto: #56694A; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pie-referencia { color: rgba(46, 59, 34, .78); }
.seccion p a, .seccion td a, .seccion li a, .nota-fuentes a, .nota-alcance a, .form-consent a, .wa-consent a, .pie-org a { text-decoration: underline; text-underline-offset: 3px; }
.acto1 h1 em { color: #7E9A69; }

/* ==========================================================================
   Copy nuevo (2-oct-2026): piezas de la home reescrita
   ========================================================================== */

/* Tamaños y tabla */
.tamanos { margin-top: clamp(40px, 4.5vw, 72px); }
.tamanos-titulo, .calc-titulo { font-size: clamp(26px, 2.6vw, 42px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 20px; }
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--linea); -webkit-overflow-scrolling: touch; }
.tabla-tamanos { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 15px; }
.tabla-tamanos th, .tabla-tamanos td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.tabla-tamanos thead th { font-family: var(--f-mono); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; color: var(--salvia-texto); background: var(--niebla); }
.tabla-tamanos tbody th { font-weight: 500; white-space: nowrap; }
.tabla-tamanos td:nth-child(3), .tabla-tamanos td:nth-child(4) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-tamanos tbody tr:last-child th, .tabla-tamanos tbody tr:last-child td { border-bottom: 0; }
.tabla-tamanos tbody tr:hover { background: var(--niebla); }
.tamanos .nota-fuentes { margin-top: 14px; }
.ejemplo-tamano { margin: 22px 0 26px; max-width: 64em; padding: 20px 22px; border-left: 2px solid var(--verde); background: var(--niebla); font-size: 15px; line-height: 1.6; color: var(--texto); }
.ejemplo-tamano strong { color: var(--verde); font-weight: 500; }

/* Calculadora dentro de la sección de tamaños */
.calc-bloque { margin-top: clamp(56px, 6vw, 96px); scroll-margin-top: 90px; }
.calc-cabeza { max-width: 52em; margin-bottom: 26px; }
.calc-cabeza p { font-size: clamp(15px, 1.1vw, 17px); color: var(--texto); }

/* Qué hacemos y qué no */
.dos-listas { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.lista-alcance { background: var(--blanco); padding: clamp(24px, 2.6vw, 44px); }
.lista-alcance--no { background: var(--niebla); }
.lista-alcance h3 { font-size: clamp(20px, 1.6vw, 26px); font-weight: 400; letter-spacing: -0.025em; margin-bottom: 18px; }
.lista-alcance li { position: relative; padding: 10px 0 10px 28px; border-top: 1px dashed var(--linea-verde); font-size: 15.5px; line-height: 1.5; color: var(--texto); }
.lista-alcance li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg); }
.lista-alcance--no li::before { width: 12px; height: 2px; top: 21px; border: 0; background: var(--salvia-texto); transform: none; }

/* Usos: seis fichas en tres columnas */
.rejilla-usos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ficha-limite { padding-top: 12px; font-size: 14px !important; }
.ficha-limite strong { display: block; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 400; margin-bottom: 4px; color: var(--salvia-texto); }
.seccion--verde .ficha-limite strong { color: rgba(255, 255, 255, .62); }

/* Sectores: fila sin enlace */
div.sector-fila { cursor: default; }
div.sector-fila:hover h3 { transform: none; }

/* Proceso: qué recibes en cada paso */
.paso-recibes { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .25); font-size: 13.5px !important; }
.paso-recibes strong { display: block; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 400; color: rgba(255, 255, 255, .62) !important; margin-bottom: 2px; }

/* Estudios: en qué fase está cada uno */
.estado-proyecto { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.estado-proyecto li { padding: 5px 9px; border: 1px dashed var(--linea-verde); color: var(--salvia-texto); }
.estado-proyecto li.hecho { border: 1px solid var(--verde); background: var(--verde); color: #fff; }

/* Zonas */
.rejilla-zonas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .16); }
.zona { background: var(--verde); padding: clamp(20px, 2vw, 32px); display: flex; flex-direction: column; gap: 10px; }
.zona h3 { font-size: clamp(20px, 1.7vw, 28px); font-weight: 400; letter-spacing: -0.03em; }
.zona p { font-size: 14.5px; line-height: 1.5; }
.zonas .nota-alcance { margin-top: clamp(28px, 3vw, 44px); }

/* Preguntas frecuentes */
.preguntas { padding-top: clamp(48px, 5vw, 80px); }
.faq-lista { border-top: 1px solid var(--linea); margin-bottom: 32px; max-width: 1100px; }
.faq { border-bottom: 1px solid var(--linea); }
.faq summary {
    list-style: none; cursor: pointer; position: relative; padding: 22px 56px 22px 0;
    font-size: clamp(18px, 1.5vw, 23px); letter-spacing: -0.02em; line-height: 1.3; color: var(--verde);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
    background: linear-gradient(var(--verde), var(--verde)) center / 14px 1.5px no-repeat, linear-gradient(var(--verde), var(--verde)) center / 1.5px 14px no-repeat;
    transition: transform .35s var(--ease);
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--verde-medio); }
.faq p { padding: 0 56px 24px 0; max-width: 62em; font-size: 15.5px; line-height: 1.65; color: var(--texto); }

/* Formulario con etiquetas visibles */
.form-guia { font-size: 13px; color: var(--salvia-texto); margin-bottom: 4px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo-etiqueta { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--salvia-texto); }
.campo--ancho textarea { margin-top: 2px; }

/* Ficha de datos */
.ficha-factual { background: var(--niebla); }
.ficha-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4vw; margin: 0; border-top: 1px solid var(--linea); }
.ficha-datos div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.ficha-datos dt { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--salvia-texto); padding-top: 3px; }
.ficha-datos dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--texto); }

@media (max-width: 1100px) {
    .rejilla-usos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rejilla-zonas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ficha-datos { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .dos-listas, .rejilla-usos, .rejilla-zonas { grid-template-columns: 1fr; }
    .ficha-datos div { grid-template-columns: 1fr; gap: 4px; }
    .faq summary { padding-right: 40px; }
    .faq p { padding-right: 0; }
}

/* Móvil: hero con el párrafo nuevo y tabla de tamaños en tarjetas */
@media (max-width: 860px) {
    .acto1-texto { top: 12%; }
    .acto1-objeto { width: 104vw; }
    .acto1-sub { font-size: 14.5px; margin: 12px 0; }
    .acto1 .botones { gap: 8px; }
    .tabla-envoltorio { border: 0; overflow: visible; }
    .tabla-tamanos { min-width: 0; }
    .tabla-tamanos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tabla-tamanos, .tabla-tamanos tbody, .tabla-tamanos tr, .tabla-tamanos th, .tabla-tamanos td { display: block; }
    .tabla-tamanos tr { border: 1px solid var(--linea); margin-bottom: 12px; background: var(--blanco); }
    .tabla-tamanos tbody th { font-size: 18px; padding: 14px 16px; background: var(--niebla); border-bottom: 1px solid var(--linea); }
    .tabla-tamanos td { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; padding: 10px 16px; white-space: normal !important; }
    .tabla-tamanos td::before { content: attr(data-etiqueta); font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--salvia-texto); padding-top: 3px; }
    .tabla-tamanos tbody tr:hover { background: var(--blanco); }
}

/* ==========================================================================
   Compacto (2-oct-2026, Daniel: «menos scroll en móvil» y FAQ compacta)
   ========================================================================== */

/* Preguntas en la home: cabecera a la izquierda, ocho preguntas a la derecha */
.preguntas--home { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 4vw; align-items: start; }
.preguntas-cabeza { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
.preguntas--home h2 { font-size: clamp(36px, 4vw, 72px); }
.preguntas--home .faq-lista { margin: 0; }
.faq summary { padding-top: 18px; padding-bottom: 18px; font-size: clamp(17px, 1.3vw, 21px); }

/* Ficha de datos plegada */
.ficha-plegable { border-top: 1px solid var(--linea); }
.ficha-plegable > summary { list-style: none; cursor: pointer; padding: 18px 0; font-size: 16px; color: var(--verde); display: flex; align-items: center; gap: 10px; }
.ficha-plegable > summary::-webkit-details-marker { display: none; }
.ficha-plegable > summary::before { content: ""; width: 10px; height: 10px; border-right: 1.5px solid var(--verde); border-bottom: 1.5px solid var(--verde); transform: rotate(-45deg); transition: transform .3s var(--ease); }
.ficha-plegable[open] > summary::before { transform: rotate(45deg); }
.ficha-plegable .ficha-datos { border-top: 0; }
.ficha-factual { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }

/* Subpáginas con el diseño nuevo */
.subpagina .cabecera { background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--linea-verde); }
.sub-cabeza { padding-top: clamp(130px, 14vw, 200px); padding-bottom: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 22px; }
.sub-cabeza h1 { font-size: clamp(42px, 6vw, 104px); font-weight: 400; line-height: 1; letter-spacing: -0.05em; max-width: 14em; }
.sub-cabeza .entradilla a, .temas a { text-decoration: none; }
.temas { display: flex; flex-wrap: wrap; gap: 8px; }
.temas .chapa { padding: .45em 1em; font-size: 14px; }
.temas .chapa:hover { background: var(--niebla-2); }
.tema { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: 4vw; padding: clamp(28px, 3vw, 48px) 0; border-top: 1px solid var(--linea); scroll-margin-top: 90px; }
.tema-titulo { font-size: clamp(26px, 2.4vw, 40px) !important; letter-spacing: -0.035em !important; line-height: 1.1 !important; position: sticky; top: 100px; align-self: start; }
.tema .faq-lista { margin: 0; }
.subpagina .preguntas { padding-top: 0; }
.tabla-comparativa { min-width: 860px; }
.cierre-sub { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cierre-sub .entradilla { margin: 0 auto; }
.cierre-sub .botones { justify-content: center; }

@media (max-width: 1100px) {
    .preguntas--home, .tema { grid-template-columns: 1fr; }
    .preguntas-cabeza, .tema-titulo { position: static; }
}

/* Móvil: menos scroll */
@media (max-width: 860px) {
    :root { --hueco: 56px; }
    .seccion-cabeza { margin-bottom: 28px; }
    .seccion h2 { font-size: clamp(32px, 9vw, 44px); }
    .entradilla { font-size: 15px; }
    .nota-fuentes { margin-top: 20px; font-size: 13px; }

    /* Carruseles para deslizar en vez de apilar */
    .rejilla-usos, .estudios-rejilla, .quienes .rejilla-3, .galeria-pista {
        display: flex !important; flex-direction: row !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
        margin-left: calc(-1 * var(--margen)); margin-right: calc(-1 * var(--margen)); padding: 0 var(--margen) 8px;
        background: none !important; border: 0 !important; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .rejilla-usos::-webkit-scrollbar, .estudios-rejilla::-webkit-scrollbar, .quienes .rejilla-3::-webkit-scrollbar, .galeria-pista::-webkit-scrollbar { display: none; }
    .rejilla-usos > *, .estudios-rejilla > *, .quienes .rejilla-3 > *, .galeria-pista > * { flex: 0 0 84%; scroll-snap-align: start; }
    .galeria-pista > .galeria-figura, .galeria-pista > .galeria-figura--ancha { width: auto !important; }
    .rejilla-usos .ficha { border: 1px solid rgba(255, 255, 255, .22); }
    .quienes .rejilla-3 .ficha { border: 1px solid var(--linea); }
    .galeria .seccion-cabeza { margin-bottom: 20px; }
    .deslizar { display: block; }

    /* Sectores: sin foto y con menos aire */
    .sector-fila { padding: 16px 0; gap: 6px; }
    .sector-fila-foto { display: none !important; }
    .sector-fila h3 { font-size: 22px; }
    .sector-fila p { font-size: 14px; }
    .sector-fila-ir:empty { display: none; }

    /* Zonas en rejilla de dos */
    .rejilla-zonas { grid-template-columns: 1fr 1fr !important; }
    .zona { padding: 16px; gap: 6px; }
    .zona h3 { font-size: 18px; }
    .zona p { font-size: 12.5px; }
    .zona:last-child { grid-column: 1 / -1; }

    /* Proceso y listas más cortas */
    .paso, .paso + .paso { padding-bottom: 20px; }
    .paso p { font-size: 13.5px; }
    .lista-alcance { padding: 20px; }
    .lista-alcance li { font-size: 14px; padding-top: 8px; padding-bottom: 8px; }
    .medidor { min-height: 0; padding: 20px 16px; }
    .arco-caja { width: 72%; }
    .ejemplo-tamano { font-size: 14px; padding: 16px; }
    .puente { padding: 44px var(--margen); gap: 14px; }
    .puente p:not(.indice) { font-size: 14px; }
    .contacto-objeto { padding-top: 20px; }
    .tema { padding: 20px 0; gap: 12px; }
    .tabla-comparativa { min-width: 0; }
}

/* Compacto, segunda vuelta (medido: 25.500 px en móvil) */
.acto3.acto3--foto { height: 180vh; }
@media (max-width: 860px) {
    .acto3.acto3--foto { height: 150vh; }
    /* tamaños: una tarjeta corta por modelo; el detalle está en la ficha técnica */
    .tabla-tamanos td:nth-child(5), .tabla-tamanos td:nth-child(6) { display: none !important; }
    .tabla-tamanos td { padding: 6px 16px; grid-template-columns: 11em 1fr; }
    .tabla-tamanos tr { margin-bottom: 8px; }
    .tabla-tamanos tbody th { padding: 10px 16px; font-size: 16px; }
    /* potencia y capacidad, lado a lado */
    .medidores { grid-template-columns: 1fr 1fr !important; }
    .medidor { padding: 14px 10px; }
    .arco-caja { width: 100%; }
    .medidor-cifra { font-size: 30px !important; }
    .medidor-pie h3 { font-size: 17px; }
    .medidor-pie h3 .chapa, .medidor-pie p { display: none; }
    .puntos { gap: 2px; }
    .puntos-col { grid-template-columns: repeat(2, 5px); column-gap: 2px; row-gap: 3px; }
    /* sectores, a tres líneas */
    .sector-fila p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    /* proceso sin «Recibes»; contacto sin el contenedor decorativo */
    .paso-recibes { display: none; }
    .contacto-objeto, .contacto-pie-ref, .contacto-guia { display: none !important; }
    .contacto { padding-bottom: var(--hueco); }
    /* pie en dos columnas */
    .pie-rejilla { grid-template-columns: 1fr 1fr !important; gap: 28px 16px; }
    .pie-col--marca { grid-column: 1 / -1; }
    .pie-col { font-size: 13px; gap: 8px; }
    .pie { padding-top: 44px; }
}
@media (max-width: 860px) {
    /* sectores como índice: título y flecha (el texto sigue en el HTML y en cada página de sector) */
    .sector-fila { grid-template-columns: 28px 1fr auto !important; align-items: center; padding: 14px 0; }
    .sector-fila p { display: none !important; }
    .sector-fila h3 { font-size: 19px; }
    .sector-fila-ir { font-size: 0; }
    .sector-fila-ir svg { width: 20px; height: 20px; }
    div.sector-fila { grid-template-columns: 28px 1fr !important; }
    /* galería más corta */
    .galeria .entradilla { display: none; }
    .galeria-figura figcaption { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .galeria-figura figcaption strong { font-size: 16px; }
    .galeria-pie { gap: 12px; }
}
@media (max-width: 860px) {
    /* calculadora más apretada */
    .calc-cabeza { margin-bottom: 16px; }
    .calc-panel, .calc-results { padding: 18px !important; gap: 18px !important; }
    .calc-field { gap: 10px !important; }
    .calc-presets { gap: 6px !important; }
    .calc-preset { padding: 10px 8px !important; font-size: 14px !important; }
    .calc-preset span { font-size: 10.5px !important; }
    .ejemplo-tamano { margin-top: 12px; }
    .tamanos .nota-fuentes { font-size: 12px; }
}

/* Galería fijada (escritorio): cabe entera en pantallas bajas, como las de 14" (2-oct) */
@media (min-width: 861px) {
    .galeria-fija { --reserva: 450px; min-height: 100vh; box-sizing: border-box; padding: 92px 0 20px; display: flex; flex-direction: column; justify-content: center; }
    .galeria-fija .seccion-cabeza { margin-bottom: clamp(18px, 3.5vh, 48px); }
    .galeria-figura { width: max(260px, min(34vw, calc((100vh - var(--reserva)) * 1.5))); }
    .galeria-figura--ancha { width: max(320px, min(52vw, calc((100vh - var(--reserva)) * 16 / 9))); }
    .galeria-figura figcaption { margin-top: 10px; }
}
@media (min-width: 861px) and (max-height: 820px) {
    .galeria-fija { --reserva: 420px; padding-top: 84px; }
    .galeria-fija .entradilla { font-size: 15px; }
    .galeria-figura figcaption { font-size: 13px; }
    .galeria-figura figcaption strong { font-size: 17px; }
}
/* las fotos llevan width/height en el HTML: sin height:auto mandaba el atributo y no la proporción */
.galeria-figura img { height: auto; }

/* ==========================================================================
   Subpáginas antiguas en el diseño nuevo (2-oct-2026)
   Las pasa pasar-a-v2.js: mismo contenido, estética de la home. Aquí se pintan
   sus bloques (sector-hero, sector-card, power-card, zonas, legales...).
   ========================================================================== */
.sub-v1 .reveal, .sub-v1 .stagger, .sub-v1 .img-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.sub-v1 main { color: var(--verde); }
.sub-v1 main p { color: var(--texto); line-height: 1.6; }
.sub-v1 main p a, .sub-v1 main li a, .sub-v1 main td a { text-decoration: underline; text-decoration-color: var(--linea-verde); text-underline-offset: .2em; }
.sub-v1 main h1 { font-size: clamp(40px, 5.4vw, 88px); font-weight: 400; line-height: 1; letter-spacing: -0.05em; text-wrap: balance; }
.sub-v1 main h2 { font-size: clamp(30px, 3.4vw, 56px); font-weight: 400; line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; margin: 14px 0 22px; }
.sub-v1 main h3 { font-size: clamp(19px, 1.5vw, 24px); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; }
.sub-v1 .section-container { max-width: 1280px; margin: 0 auto; padding: 0 var(--margen); }
.sub-v1 .section-container.narrow { max-width: 900px; }
.sub-v1 .wide-container { max-width: 1440px; }
.sub-v1 .kicker, .sub-v1 .callout-tag, .sub-v1 .card-block-title, .sub-v1 .group-title {
    font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--salvia-texto);
    display: flex; align-items: center; gap: 8px;
}
.sub-v1 .kicker .ico { font-size: 18px; color: var(--verde); }
.sub-v1 .sector-lead, .sub-v1 .section-lead, .sub-v1 .subtitle { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; color: var(--texto); max-width: 38em; text-wrap: pretty; }
.sub-v1 .sector-foto-pie, .sub-v1 .fuentes-note, .sub-v1 .gain-note, .sub-v1 .legal-updated, .sub-v1 figcaption { font-size: 13px; color: var(--salvia-texto) !important; line-height: 1.5; }
.sub-v1 .ico { color: var(--verde); }

/* Botones antiguos con la forma de los nuevos */
.sub-v1 .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em; font-size: 15px; line-height: 1.2;
    padding: .8em 1.35em; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none !important;
    transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.sub-v1 .btn-primary, .sub-v1 .btn-card-order { background: var(--verde); color: var(--blanco); }
.sub-v1 .btn-primary:hover, .sub-v1 .btn-card-order:hover { background: var(--verde-hondo); color: var(--blanco); }
.sub-v1 .btn-ghost { background: transparent; color: var(--verde); box-shadow: inset 0 0 0 1px rgba(50, 92, 36, .4); }
.sub-v1 .btn-ghost:hover { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--verde); }
.sub-v1 .hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Portada de cada subpágina: texto a la izquierda, foto en tarjeta a la derecha */
.sub-v1 .sector-hero { position: relative; background: var(--niebla); padding: clamp(120px, 12vw, 180px) 0 clamp(48px, 6vw, 96px); overflow: hidden; }
.sub-v1 .sector-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--linea-verde) 1px, transparent 1px), linear-gradient(90deg, var(--linea-verde) 1px, transparent 1px); background-size: 64px 64px; opacity: .35; pointer-events: none; }
.sub-v1 .sector-hero .section-container { position: relative; display: flex; flex-direction: column; gap: 18px; }
.sub-v1 .sector-hero .section-container > * { max-width: min(640px, 54vw); }
.sub-v1 .sector-hero::after {
    content: ""; position: absolute; right: var(--margen); top: clamp(110px, 10vw, 150px); bottom: clamp(48px, 6vw, 96px); width: 36%;
    background: var(--bg-photo) center / cover no-repeat; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(38, 74, 27, .35);
}
.sub-v1 .migas { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--salvia-texto); }
.sub-v1 .migas a { color: var(--verde); }
.sub-v1 .sector-hero .sector-foto-pie { margin-top: 8px; }

/* Bloques: blanco, niebla y verde para el contacto */
.sub-v1 .sector-bloque, .sub-v1 .value-section, .sub-v1 .architecture-section, .sub-v1 .deepdive-section, .sub-v1 .modalidades, .sub-v1 .zonas-section { padding: clamp(56px, 7vw, 120px) 0; background: var(--blanco); }
.sub-v1 .sector-bloque.alterno, .sub-v1 .architecture-section, .sub-v1 .value-section:nth-of-type(even) { background: var(--niebla); }
.sub-v1 .sector-bloque p + p { margin-top: 1em; }
.sub-v1 .sector-bloque > .section-container > p:not(.kicker) { font-size: 17px; }
.sub-v1 #contacto-sector { background: var(--verde); }
.sub-v1 #contacto-sector h2, .sub-v1 #contacto-sector p { color: var(--blanco); }
.sub-v1 #contacto-sector .kicker { color: rgba(255, 255, 255, .62); }
.sub-v1 #contacto-sector .btn-primary { background: var(--blanco); color: var(--verde); }
.sub-v1 #contacto-sector .btn-ghost { color: var(--blanco); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.sub-v1 #contacto-sector .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.sub-v1 .section-header { margin-bottom: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; gap: 4px; }
.sub-v1 .section-header.center { align-items: center; text-align: center; }
.sub-v1 .section-header.center .section-lead { margin: 0 auto; }

/* Pasos */
.sub-v1 .proceso-lista { display: flex; flex-direction: column; margin-top: 8px; }
.sub-v1 .proceso-paso { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 22px 0; border-top: 1px solid var(--linea); }
.sub-v1 .proceso-paso .paso-num { font-family: var(--f-mono); font-size: 12px; color: var(--salvia-texto); padding-top: 6px; }
.sub-v1 .paso-cuerpo { display: flex; flex-direction: column; gap: 8px; }
.sub-v1 .paso-cuerpo p { font-size: 15.5px; }

/* Lo que aporta y de qué depende */
.sub-v1 .gain-list { display: flex; flex-direction: column; }
.sub-v1 .gain-list li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 24px; padding: 18px 0; border-top: 1px dashed var(--discontinua); }
.sub-v1 .gain-fig { font-size: clamp(18px, 1.4vw, 22px); letter-spacing: -0.02em; line-height: 1.2; color: var(--verde); }
.sub-v1 .gain-txt { font-size: 15px; line-height: 1.55; color: var(--texto); }

/* Tamaño de partida */
.sub-v1 .modelo-sugerido { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.sub-v1 .modelo-sugerido-cifras { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.sub-v1 .model-code { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--salvia-texto); }
.sub-v1 .power-val { font-size: clamp(44px, 4.4vw, 72px); font-weight: 300; letter-spacing: -0.05em; line-height: 1; color: var(--verde); }
.sub-v1 .power-val .unit { font-size: .35em; letter-spacing: 0; color: var(--salvia-texto); }
.sub-v1 .capacity-val { font-size: 22px; letter-spacing: -0.02em; color: var(--verde); }
.sub-v1 .modelo-sugerido-texto { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

/* Preguntas (acordeón de script.js) */
.sub-v1 .faq-accordion-container { border-bottom: 1px solid var(--linea); margin-top: 8px; }
.sub-v1 .faq-item { border-top: 1px solid var(--linea); }
.sub-v1 .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: none; border: 0; padding: 20px 0; text-align: left; color: var(--verde); font-size: clamp(17px, 1.3vw, 21px); letter-spacing: -0.015em; cursor: pointer; }
.sub-v1 .faq-toggle-icon { flex: none; font-size: 24px; font-weight: 300; transition: transform .35s var(--ease); }
.sub-v1 .faq-item.active .faq-toggle-icon { transform: rotate(45deg); }
.sub-v1 .faq-answer { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.sub-v1 .faq-item.active .faq-answer { max-height: 600px; }
.sub-v1 .faq-answer p { padding: 0 0 22px; font-size: 15.5px; max-width: 46em; }
.sub-v1 .sector-mas-faq { margin-top: 20px; font-size: 15px; }

/* Tarjetas de sector y de modalidades */
.sub-v1 .sectores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-top: 8px; }
.sub-v1 .sector-card { position: relative; background: var(--blanco); padding: clamp(24px, 2.2vw, 36px); display: flex; flex-direction: column; gap: 12px; color: var(--verde); text-decoration: none !important; transition: background .35s var(--ease); }
.sub-v1 a.sector-card:hover { background: var(--niebla); }
.sub-v1 .sector-card--foto::before { content: ""; display: block; aspect-ratio: 16 / 9; margin: calc(-1 * clamp(24px, 2.2vw, 36px)) calc(-1 * clamp(24px, 2.2vw, 36px)) 8px; background: var(--card-photo) center / cover no-repeat var(--niebla-2); }
.sub-v1 .card-num { font-family: var(--f-mono); font-size: 11px; color: var(--salvia-texto); }
.sub-v1 .sector-ico-box .ico { font-size: 30px; }
.sub-v1 .sector-card p { font-size: 15px; }
.sub-v1 .sector-gain { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--discontinua); font-size: 14px !important; }
.sub-v1 .sector-gain strong { display: block; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 400; color: var(--salvia-texto); margin-bottom: 4px; }
.sub-v1 .sector-link { margin-top: auto; font-size: 15px; border-bottom: 1px solid var(--linea-verde); align-self: flex-start; padding-bottom: 2px; }
.sub-v1 .sector-aviso, .sub-v1 .modelos-acabado, .sub-v1 .proceso-alcance { background: var(--niebla); border-left: 2px solid var(--verde); padding: 18px 22px; margin-top: 24px; font-size: 14.5px; }
.sub-v1 .proceso-alcance { background: var(--blanco); }

/* Modelos: fotos a pantalla con caja encima */
.sub-v1 .fullscreen-section { position: relative; min-height: 82vh; display: flex; align-items: flex-end; padding: clamp(32px, 5vw, 80px) var(--margen); background-size: cover !important; background-position: center !important; }
.sub-v1 .fullscreen-section.right-align { justify-content: flex-end; }
.sub-v1 .fullscreen-section.center-align { justify-content: center; text-align: center; }
.sub-v1 [class^="overlay-gradient"] { display: none; }
.sub-v1 .content-container { position: relative; background: rgba(255, 255, 255, .93); backdrop-filter: blur(12px); border-radius: 18px; padding: clamp(24px, 3vw, 44px); max-width: 600px; display: flex; flex-direction: column; gap: 6px; }
.sub-v1 .center-box { max-width: 760px; align-items: center; }
.sub-v1 .side-box-specs, .sub-v1 .interior-badges-row, .sub-v1 .callout-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sub-v1 .center-box .interior-badges-row { justify-content: center; }
.sub-v1 .mini-spec, .sub-v1 .int-badge, .sub-v1 .c-badge, .sub-v1 .card-spec-tag, .sub-v1 .hud-stat-chip, .sub-v1 .pane-tag, .sub-v1 .card-badge {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--verde);
    border: 1px solid var(--linea-verde); border-radius: 999px; padding: 6px 12px; background: var(--blanco);
}
.sub-v1 .mini-spec .ico, .sub-v1 .int-badge .ico, .sub-v1 .hud-stat-chip .ico { font-size: 16px; }

/* Modelos: los seis subsistemas */
.sub-v1 .diagram-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.sub-v1 .diagram-card { background: var(--blanco); padding: clamp(24px, 2.4vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.sub-v1 .diagram-card p { font-size: 15px; }
.sub-v1 .card-icon-box .ico { font-size: 32px; }
.sub-v1 .card-spec-tag { margin-top: auto; align-self: flex-start; font-family: var(--f-mono); font-size: 11px; }
.sub-v1 .tech-callout-banner { margin-top: clamp(32px, 4vw, 56px); background: var(--verde); border-radius: 18px; padding: clamp(28px, 3.4vw, 52px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.sub-v1 .tech-callout-banner h3, .sub-v1 .tech-callout-banner p { color: var(--blanco); }
.sub-v1 .tech-callout-banner .callout-tag { color: rgba(255, 255, 255, .62); margin-bottom: 10px; }
.sub-v1 .tech-callout-banner h3 { margin-bottom: 10px; font-size: clamp(22px, 2vw, 32px); }
.sub-v1 .tech-callout-banner .c-badge { background: transparent; color: var(--blanco); border-color: rgba(255, 255, 255, .35); }

/* Modelos: laterales con foto */
.sub-v1 .showcase-split-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.sub-v1 .showcase-split-row.reverse .showcase-img-pane { order: 2; }
.sub-v1 .showcase-img-pane { position: relative; }
.sub-v1 .img-zoom-wrapper { border-radius: 18px; overflow: hidden; }
.sub-v1 .img-zoom-wrapper img { width: 100%; height: auto; }
.sub-v1 .pane-tag { position: absolute; left: 16px; bottom: 16px; font-family: var(--f-mono); font-size: 11px; }
.sub-v1 .hud-stat-chip { position: absolute; right: 16px; top: 16px; }
.sub-v1 .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--led); }
.sub-v1 .showcase-content-pane { display: flex; flex-direction: column; gap: 14px; }
.sub-v1 .clean-check-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sub-v1 .clean-check-list li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px dashed var(--linea-verde); font-size: 15px; color: var(--texto); }
.sub-v1 .check-pill { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--niebla-2); display: grid; place-items: center; }
.sub-v1 .check-ico { width: 12px; height: 12px; color: var(--verde); }

/* Modelos: las tres fichas */
.sub-v1 .modelos-hero { margin-bottom: 24px; }
.sub-v1 .modelos-hero img { width: 100%; height: auto; border-radius: 18px; }
.sub-v1 .modelos-hero figcaption { margin-top: 10px; }
.sub-v1 .cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; align-items: start; }
.sub-v1 .power-card { position: relative; border: 1px solid var(--linea); border-radius: 18px; padding: clamp(22px, 2vw, 32px); display: flex; flex-direction: column; gap: 18px; background: var(--blanco); }
.sub-v1 .power-card.popular { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.sub-v1 .prem-glow, .sub-v1 .pop-glow { display: none; }
.sub-v1 .card-top-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sub-v1 .card-badge { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; }
.sub-v1 .card-badge.popular, .sub-v1 .card-badge.pop { background: var(--verde); color: var(--blanco); border-color: var(--verde); }
.sub-v1 .card-hero-spec { display: flex; gap: 16px; align-items: center; }
.sub-v1 .model-icon-box .ico { font-size: 44px; }
.sub-v1 .card-rate-pill { font-family: var(--f-mono); font-size: 11.5px; color: var(--texto); background: var(--niebla); border-radius: 10px; padding: 10px 12px; }
.sub-v1 .power-card .gain-list li { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
.sub-v1 .power-card .gain-fig { font-size: 17px; }
.sub-v1 .power-card .gain-txt { font-size: 14px; }
.sub-v1 .card-specs summary { cursor: pointer; font-size: 15px; padding: 12px 0; border-top: 1px solid var(--linea); list-style: none; display: flex; justify-content: space-between; }
.sub-v1 .card-specs summary::-webkit-details-marker { display: none; }
.sub-v1 .card-specs summary::after { content: "+"; font-size: 20px; font-weight: 300; transition: transform .3s var(--ease); }
.sub-v1 .card-specs[open] summary::after { transform: rotate(45deg); }
.sub-v1 .spec-group { margin-top: 14px; }
.sub-v1 .spec-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.sub-v1 .spec-row .label { color: var(--texto); }
.sub-v1 .spec-row .dots { flex: 1; border-bottom: 1px dotted var(--linea-verde); transform: translateY(-3px); }
.sub-v1 .spec-row .value { color: var(--verde); text-align: right; }
.sub-v1 .btn-card-order { align-self: stretch; }
.sub-v1 .stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.sub-v1 .stat { background: var(--blanco); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.sub-v1 .stat-number { font-size: clamp(32px, 3vw, 48px); font-weight: 300; letter-spacing: -0.04em; color: var(--verde); }
.sub-v1 .stat-label { font-size: 13px; color: var(--texto); }

/* Aragón: zonas */
.sub-v1 .zonas-section.bg-photo { background: var(--niebla) !important; }
.sub-v1 .zonas-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.sub-v1 .zonas-prose { display: flex; flex-direction: column; gap: 14px; }
.sub-v1 .zonas-list { border-bottom: 1px solid var(--linea); }
.sub-v1 .zona-row { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--linea); }
.sub-v1 .zona-name { font-size: 20px; letter-spacing: -0.02em; color: var(--verde); }
.sub-v1 .zona-detail { font-size: 14.5px; color: var(--texto); }

/* Legales y plantilla */
.sub-v1 .legal-page { padding: clamp(120px, 12vw, 170px) 0 clamp(56px, 7vw, 110px); }
.sub-v1 .legal-page .section-container { max-width: 880px; display: flex; flex-direction: column; gap: 14px; }
.sub-v1 .legal-page h2 { font-size: clamp(24px, 2.2vw, 34px); margin: 28px 0 4px; }
.sub-v1 .legal-page h3 { margin-top: 14px; }
.sub-v1 .legal-page ul, .sub-v1 .legal-page ol { list-style: disc; padding-left: 1.3em; color: var(--texto); display: flex; flex-direction: column; gap: 6px; }
.sub-v1 .legal-page li { line-height: 1.55; }
.sub-v1 .tabla-scroll { overflow-x: auto; }
.sub-v1 .sector-bloque .tabla-scroll { margin: 22px 0; }
.sub-v1 .sector-bloque .gain-list + p, .sub-v1 .sector-bloque .proceso-lista + p { margin-top: 20px; }
.sub-v1 .tabla-scroll table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--texto); }
.sub-v1 .tabla-scroll th, .sub-v1 .tabla-scroll td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.sub-v1 .tabla-scroll th { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--salvia-texto); font-weight: 400; }
.sub-v1 .legal-back { align-self: flex-start; font-size: 15px; border-bottom: 1px solid var(--linea-verde); }

@media (max-width: 1100px) {
    .sub-v1 .diagram-grid, .sub-v1 .cards-grid { grid-template-columns: 1fr 1fr; }
    .sub-v1 .stats-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    .sub-v1 .sector-hero { padding-bottom: 0; }
    .sub-v1 .sector-hero .section-container > * { max-width: none; }
    .sub-v1 .sector-hero::after { position: relative; display: block; inset: auto; width: auto; height: 220px; margin: 28px var(--margen) 0; border-radius: 14px 14px 0 0; background-image: var(--bg-photo-m, var(--bg-photo)); }
    .sub-v1 .gain-list li, .sub-v1 .zona-row { grid-template-columns: 1fr; gap: 4px; }
    .sub-v1 .modelo-sugerido, .sub-v1 .showcase-split-row, .sub-v1 .tech-callout-banner, .sub-v1 .zonas-layout { grid-template-columns: 1fr; }
    .sub-v1 .showcase-split-row.reverse .showcase-img-pane { order: 0; }
    .sub-v1 .diagram-grid, .sub-v1 .cards-grid { grid-template-columns: 1fr; }
    .sub-v1 .fullscreen-section { min-height: 70vh; padding: 16px; }
    .sub-v1 .proceso-paso { grid-template-columns: 40px 1fr; }
    .sub-v1 .sectores-grid { grid-template-columns: 1fr; }
}
/* tarjetas sueltas: con filas incompletas el fondo gris de la rejilla se veía */
.sub-v1 .sectores-grid, .sub-v1 .diagram-grid, .sub-v1 .stats-row { background: transparent; border: 0; gap: 14px; }
.sub-v1 .sector-card, .sub-v1 .diagram-card, .sub-v1 .stat { border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.sub-v1 .value-section:nth-of-type(even) .sector-card { background: var(--blanco); }
@media (max-width: 860px) {
    /* subpáginas: tarjetas en carrusel, como en la home */
    .sub-v1 .sectores-grid, .sub-v1 .diagram-grid, .sub-v1 .cards-grid {
        display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; align-items: stretch;
        margin-left: calc(-1 * var(--margen)); margin-right: calc(-1 * var(--margen)); padding: 0 var(--margen) 8px; scrollbar-width: none;
    }
    .sub-v1 .sectores-grid::-webkit-scrollbar, .sub-v1 .diagram-grid::-webkit-scrollbar, .sub-v1 .cards-grid::-webkit-scrollbar { display: none; }
    .sub-v1 .sectores-grid > *, .sub-v1 .diagram-grid > *, .sub-v1 .cards-grid > * { flex: 0 0 86%; scroll-snap-align: start; }
    .sub-v1 .sector-bloque, .sub-v1 .value-section, .sub-v1 .architecture-section, .sub-v1 .deepdive-section, .sub-v1 .modalidades, .sub-v1 .zonas-section { padding: 52px 0; }
}

/* ==========================================================================
   iPhone (2-oct, Daniel: «la visión móvil mucho mejor construida»)
   ========================================================================== */
@media (max-width: 860px) {
    /* la burbuja de WhatsApp tapaba contenido en cada pantalla: queda solo el botón */
    .wa-tip { display: none !important; }
    .whatsapp-widget-container { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
    .whatsapp-trigger-btn { width: 52px; height: 52px; }
    /* sin telón al final: era una pantalla vacía */
    .telon { display: none; }
    /* tarjeta del vídeo con aire debajo para su pie */
    .acto2-tarjeta { height: calc(100svh - 132px); top: calc(50% + 6px); border-radius: 14px; }
    .acto2-pie { bottom: calc(18px + env(safe-area-inset-bottom)); font-size: 10.5px; max-width: calc(100vw - 100px); }
    /* rótulos en mono legibles */
    .indice { font-size: 11.5px; letter-spacing: .1em; }
    .tabla-tamanos td::before, .ficha-mira strong, .paso-recibes strong, .galeria-figura figcaption .mono { font-size: 10.5px; }
    .pie-referencia { font-size: 10.5px; }
    /* titulares: interlineado estable con las líneas partidas */
    .seccion h2 { line-height: 1.04; letter-spacing: -0.035em; }
    /* texto corrido algo más grande en iPhone */
    .entradilla { font-size: 15.5px; line-height: 1.55; }
}
@media (max-width: 860px) {
    /* carruseles: la primera tarjeta alineada con el margen, no pegada al borde */
    .rejilla-usos, .estudios-rejilla, .quienes .rejilla-3, .galeria-pista,
    .sub-v1 .sectores-grid, .sub-v1 .diagram-grid, .sub-v1 .cards-grid { scroll-padding-inline: var(--margen); }
    .galeria .galeria-pista { margin-left: 0; margin-right: 0; }
    /* rótulo del hero en una línea */
    .acto1 .etiqueta { font-size: 10px; letter-spacing: .06em; white-space: nowrap; }
}
@media (max-width: 380px) {
    .calc-layout, .calc-panel, .calc-results, .calc-field { min-width: 0; }
    .calc-presets { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .calc-preset { white-space: normal; min-width: 0; }
    .calc-preset span { word-break: break-word; }
    .calc-field-head { flex-wrap: wrap; }
}