/* Fluvia · estilos del sitio
   Colores, letras y vidrio de Fluvia.md §12 (D-48, D-49, D-50, D-56, D-88).
   Si §12 cambia, manda §12. */

/* Letras alojadas en el sitio (licencia OFL, en /fonts); solo el juego latino, que cubre todo el español */
@font-face{font-family:'Spectral';font-style:normal;font-weight:200;font-display:swap;src:url(/fonts/spectral-200.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/spectral-300.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/inter-tight.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/inter-tight-italica.woff2) format('woff2')}

:root{
  --profundo:#06141B; --fondo:#11212D; --superficie:#253745; --intermedio:#4A5C6A;
  --linea:#9BA8AB; --texto-2:#CCD0CF; --papel:#F2F1EC; --bloque:#E6E5DF; --separador:#D9D8D1;
  --arena:#C8B79A; --tinta:#76694F;
  --linea-oscura:rgba(155,168,171,.22);
  --display:'Spectral',Georgia,'Times New Roman',serif;
  --texto:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --sale:cubic-bezier(.23,1,.32,1);
  --margen:clamp(20px,6.5vw,104px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--papel);color:var(--fondo);font:400 17px/1.6 var(--texto);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--tinta);outline-offset:4px;border-radius:6px}
.oscuro-fondo :focus-visible{outline-color:var(--arena)}
.saltar{position:absolute;left:16px;top:-60px;z-index:40;background:var(--fondo);color:var(--papel);padding:10px 16px;border-radius:12px;font-size:14.5px}
.saltar:focus{top:16px}
.etiqueta{font-size:11.5px;font-weight:500;letter-spacing:.19em;text-transform:uppercase}

/* ---------- Menú ---------- */
.menu{position:fixed;z-index:20;top:14px;left:14px;right:14px;max-width:1280px;margin:0 auto;height:62px;
  display:flex;align-items:center;gap:32px;padding:0 10px 0 22px;border-radius:20px;border:1px solid transparent;
  background:var(--papel);color:var(--superficie);
  transition:background-color .5s var(--sale),border-color .5s var(--sale),color .5s var(--sale)}
.menu .logo img{height:25px;width:auto}
.menu .logo .claro{display:none}
.menu nav{display:flex;gap:30px;margin-left:auto}
.menu nav a{font-size:14.5px;position:relative;padding:6px 0;opacity:.9;transition:opacity .2s ease}
.menu nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--tinta);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--sale)}
.menu nav a[aria-current=page]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.menu nav a:hover{opacity:1}.menu nav a:hover::after{transform:scaleX(1)}}
.boton{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:12px;font-size:14.5px;font-weight:500;letter-spacing:.01em;background:var(--fondo);color:var(--papel);transition:transform .16s ease-out,background-color .3s ease,color .3s ease}
.boton:active{transform:scale(.97)}
.abrir-menu{display:none;font-size:14.5px;font-weight:500;height:44px;padding:0 6px}
.menu.oscuro{background:rgba(6,20,27,.86);color:var(--papel);border-color:rgba(155,168,171,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.menu.oscuro nav a::after{background:var(--arena)}
.menu.oscuro .boton{background:var(--papel);color:var(--profundo)}
.menu.oscuro .logo .claro{display:block}.menu.oscuro .logo .oscuro{display:none}
.panel-menu{position:fixed;inset:0;z-index:30;background:var(--profundo);color:var(--papel);padding:96px 28px;display:none;flex-direction:column;gap:22px}
.panel-menu.abierto{display:flex}
.panel-menu a{font-family:var(--display);font-weight:300;font-size:34px;line-height:1.1}
.panel-menu .cerrar{position:absolute;top:24px;right:24px;font-size:14.5px;font-weight:500;height:44px}

/* ---------- Portada: gancho en Papel y ventana al lago ---------- */
.portada{min-height:64svh;padding:max(150px,24vh) var(--margen) 7vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19em);gap:28px 5vw;align-items:end}
.gancho{font-family:var(--display);font-weight:200;letter-spacing:-.018em;line-height:1.03;font-size:clamp(40px,5.3vw,84px);text-wrap:balance}
.gancho span{display:block}
.gancho .l1{color:var(--superficie)}
.gancho .l2{font-weight:300;color:var(--profundo)}
.prueba{font-size:14.5px;line-height:1.6;color:var(--intermedio);max-width:44ch;padding-bottom:.6em}
.prueba i{font-style:italic}

.ventana{position:relative}
.ventana-fija{position:sticky;top:0;height:100vh;z-index:0}
.escena{position:absolute;inset:0;overflow:hidden;background:var(--fondo);
  clip-path:inset(0 var(--v-lado,4vw) var(--v-abajo,30vh) var(--v-lado,4vw) round var(--v-radio,20px))}
.escena img,.escena video{width:100%;height:100%;object-fit:cover;object-position:50% 45.5%}
.escena .vertical{display:none}
.ventana .sello{position:absolute;left:0;right:0;top:0;height:100vh;padding-bottom:24vh;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2vw,26px);pointer-events:none}
.sello img{width:clamp(168px,21vw,300px);height:auto}
.sello .etiqueta{color:var(--papel);opacity:.85}
.sello>*{animation:sello 1.1s var(--sale) both}.sello .etiqueta{animation-delay:.18s}
@keyframes sello{from{opacity:0;transform:translateY(10px)}}
/* En pantalla grande el logo es un detalle y queda en el cielo, lejos del horizonte (el celular no cambia) */
@media (min-width:761px){.ventana .sello{padding-bottom:40vh;gap:16px}.sello img{width:clamp(150px,13vw,210px)}}
.abre{height:75vh}

/* La hoja de Papel sube sobre el lago */
.hoja{position:relative;z-index:2;background:var(--papel);border-radius:20px 20px 0 0;padding:15vh var(--margen) 18vh}
.hoja h2{font-family:var(--display);font-weight:200;font-size:clamp(38px,5vw,76px);line-height:1.06;letter-spacing:-.015em;color:var(--superficie)}
.hoja h2 span{display:block;font-weight:300;color:var(--profundo)}
.bajada{display:grid;grid-template-columns:120px minmax(0,36em);gap:0 6vw;margin-top:8vh}
.bajada i{display:block;width:44px;height:1px;background:var(--tinta);margin-top:.9em}
.bajada p{font-size:clamp(17px,1.35vw,20px);line-height:1.65;color:var(--superficie)}

/* ---------- Los dos bloques: un documento que cambia ---------- */
.dos-bloques{margin-top:16vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:0 8vw}
.bloque{min-height:78vh;padding-top:44px;border-top:1px solid var(--separador);opacity:.35;transition:opacity .6s ease}
.bloque.actual,.sin-js .bloque{opacity:1}
.bloque .etiqueta{color:var(--tinta);display:block}
.bloque .etiqueta b{font-weight:500;color:var(--intermedio)}
.bloque h3{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.3vw,36px);line-height:1.15;letter-spacing:-.008em;color:var(--profundo);margin:18px 0;text-wrap:balance}
.bloque p{color:var(--superficie);max-width:34em}
.ver{display:inline-block;margin-top:22px;font-size:15px;font-weight:500;color:var(--fondo);padding-bottom:3px;background:linear-gradient(var(--tinta),var(--tinta)) left bottom/100% 1px no-repeat;transition:background-size .35s var(--sale)}
@media (hover:hover) and (pointer:fine){.ver:hover{background-size:40% 1px}}
.mesa{position:sticky;top:max(120px,20vh);height:520px}
.mesa .doc{position:absolute;top:0;left:0;opacity:0;filter:blur(2px);transform:translateY(14px);transition:opacity .5s var(--sale),transform .5s var(--sale),filter .5s var(--sale)}
.mesa .doc.visible{opacity:1;filter:none;transform:none}
.solo-celular{display:none}

/* ---------- Documentos vivos: se completan al entrar en pantalla ---------- */
.doc{background:var(--bloque);border-radius:8px;padding:30px 30px 26px;color:var(--superficie);width:100%;max-width:440px}
.doc header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--separador);margin-bottom:6px}
.doc .doc-titulo{font-family:var(--display);font-weight:300;font-size:23px;color:var(--profundo)}
.doc .doc-meta{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--tinta);font-weight:500;white-space:nowrap}
.campo{padding:15px 0 13px;border-bottom:1px solid var(--separador)}
.campo:last-of-type{border-bottom:0}
.campo-nombre{display:block;font-size:13px;color:var(--intermedio);margin-bottom:10px;opacity:0;transition:opacity .5s ease}
/* Lo tuyo aparece como palabras tachadas: es confidencial */
.b{display:flex;gap:5px;height:8px;margin:0 0 10px;width:var(--w,90%);clip-path:inset(0 100% 0 0);
  transition:clip-path .9s var(--sale);transition-delay:calc(var(--i,0) * 120ms + 150ms)}
.b s{display:block;height:100%;border-radius:2px;background:rgba(37,55,69,.38);flex:var(--f,1) 1 0}
.cierre-doc{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:16px;border-top:1px solid var(--separador);font-size:13px;color:var(--intermedio);opacity:0;transition:opacity .5s ease 1.6s}
.cierre-doc svg{width:18px;height:18px;flex:none}
.cierre-doc path{fill:none;stroke:var(--tinta);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s var(--sale) 1.8s}
.escrito .campo-nombre,.escrito .cierre-doc{opacity:1}
.escrito .b{clip-path:inset(0 0 0 0)}
.escrito .cierre-doc path{stroke-dashoffset:0}
.sin-js .campo-nombre,.sin-js .cierre-doc{opacity:1}.sin-js .b{clip-path:none}.sin-js .cierre-doc path{stroke-dashoffset:0}

/* ---------- Franja de agua a sangre ---------- */
.franja{position:relative;height:56vh;min-height:340px;overflow:hidden;background:var(--fondo)}
.franja img,.franja video{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.franja::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to bottom,rgba(6,20,27,0),var(--profundo))}

/* ---------- Las seis preguntas: se leen de a una ---------- */
.seis{background:var(--profundo);color:var(--papel)}
.preguntas{padding:4vh var(--margen) 20vh}
.preguntas .etiqueta{display:block;margin-bottom:22px;color:var(--texto-2)}
.preguntas h2{font-family:var(--display);font-weight:200;font-size:clamp(34px,4.2vw,64px);line-height:1.08;letter-spacing:-.014em;max-width:17em;text-wrap:balance}
.intro-cols{display:grid;grid-template-columns:minmax(0,30em) minmax(0,22em);gap:24px 6vw;margin-top:6vh;align-items:end}
.intro-cols p{font-size:17px;color:var(--texto-2)}
.intro-cols p+p{font-size:15px;color:var(--linea)}
.lista{list-style:none;margin-top:10vh;border-bottom:1px solid var(--linea-oscura)}
.fila{display:grid;grid-template-columns:72px minmax(0,1.1fr) minmax(0,1fr);gap:0 4vw;align-items:baseline;padding:30px 0 28px;border-top:1px solid var(--linea-oscura);opacity:.38;transition:opacity .6s ease}
.fila.actual,.sin-js .fila{opacity:1}
.n{font-family:var(--display);font-weight:300;font-size:22px;line-height:1.2;font-variant-numeric:lining-nums}
.fila .n{color:var(--arena)}
.fila h3{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.6vw,40px);line-height:1.2;letter-spacing:-.005em;color:var(--papel)}
.fila p{font-size:15.5px;line-height:1.55;color:var(--texto-2);max-width:30em}
.cierre-sp{margin-top:10vh;max-width:40em}
.cierre-sp .grande{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.3vw,34px);line-height:1.2;margin-bottom:14px;color:var(--papel)}
.cierre-sp p{color:var(--texto-2)}
.seis .ver{color:var(--papel);background-image:linear-gradient(var(--arena),var(--arena))}

/* ---------- Cómo partimos: el camino ---------- */
.partimos{padding:20vh var(--margen)}
.partimos h2{font-family:var(--display);font-weight:200;font-size:clamp(38px,5vw,76px);line-height:1.06;letter-spacing:-.015em;color:var(--profundo)}
.camino{position:relative;height:1px;margin:12vh 0 0;background:var(--separador)}
.camino i{position:absolute;inset:0;background:var(--tinta);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--sale)}
.camino.visible i,.sin-js .camino i{transform:scaleX(1)}
.pasos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:0 7vw}
.paso{padding-top:40px}
.paso .n{display:block;font-size:30px;color:var(--tinta);margin-bottom:18px}
.paso h3{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.4vw,36px);line-height:1.15;color:var(--profundo)}
.paso .etiqueta{display:block;color:var(--tinta);margin:10px 0 18px}
.paso .etiqueta.sub{color:var(--intermedio);margin:34px 0 14px}
.paso>p{color:var(--superficie);max-width:32em}
.paso .boton{margin-top:28px}
.piezas{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--separador)}
.piezas li{padding-top:16px;font-size:15px;line-height:1.55;color:var(--superficie)}
.piezas b{display:block;font-family:var(--display);font-weight:300;font-size:20px;line-height:1.25;color:var(--profundo);margin-bottom:6px}
.paso .doc{margin-top:40px}
.nota-pie{margin-top:26px;font-size:14.5px;color:var(--intermedio)}

/* ---------- Clientes: antes de conversar ---------- */
.clientes{background:var(--profundo);color:var(--papel);padding:12vh var(--margen) 4vh}
.clientes .etiqueta{color:var(--texto-2);margin-bottom:28px}
.logos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linea-oscura);border-bottom:1px solid var(--linea-oscura)}
.logos li{height:180px;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--linea-oscura)}
.logos li:first-child{border-left:0}
/* Logos en un solo tono claro de la paleta; cada uno con su alto para que pesen lo mismo a la vista */
.logos img{height:var(--alto);width:auto;max-width:70%;object-fit:contain;opacity:.85}

/* ---------- Cierre: Conversemos sobre las dos gotas ---------- */
.cierre{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding:20vh var(--margen) 36px;background:var(--profundo);color:var(--papel)}
.escena-cierre{position:absolute;inset:0;overflow:hidden}
.escena-cierre img,.escena-cierre video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.escena-cierre .vertical{display:none}
.escena-cierre::before{content:"";position:absolute;left:0;right:0;top:0;height:22vh;background:linear-gradient(var(--profundo),rgba(6,20,27,0));z-index:1}
.escena-cierre::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(rgba(6,20,27,0),rgba(6,20,27,.82));z-index:1}
.cierre .arriba,.cierre .abajo{position:relative;z-index:2}
.cierre h2{font-family:var(--display);font-weight:200;font-size:clamp(48px,6.6vw,108px);line-height:.98;letter-spacing:-.02em}
.marca-frase{font-family:var(--display);font-weight:300;font-size:clamp(20px,1.9vw,28px);margin-top:18px;color:var(--papel)}
.contactos{list-style:none;margin-bottom:28px}
.contactos li{font-size:16px;padding:6px 0}
.contactos a{background:linear-gradient(var(--arena),var(--arena)) left bottom/0 1px no-repeat;padding-bottom:2px;transition:background-size .35s var(--sale)}
@media (hover:hover) and (pointer:fine){.contactos a:hover{background-size:100% 1px}}
.pie{display:flex;align-items:center;gap:24px;padding-top:22px;border-top:1px solid rgba(155,168,171,.25)}
.pie .etiqueta{color:var(--texto-2)}
.pie .legal{font-size:12.5px;color:var(--linea)}
.pie img{height:30px;width:auto;margin-left:auto}

/* ---------- Páginas de bloque (Dirección, Operación) ---------- */
.cabeza{padding:max(150px,24vh) var(--margen) 10vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25em);gap:22px 6vw;align-items:end}
.cabeza .etiqueta{grid-column:1/-1;color:var(--tinta)}
.cabeza .etiqueta b{font-weight:500;color:var(--intermedio)}
.cabeza h1{font-family:var(--display);font-weight:200;font-size:clamp(42px,5.6vw,88px);line-height:1.04;letter-spacing:-.018em;color:var(--profundo);text-wrap:balance}
.cabeza p{color:var(--superficie);font-size:17.5px;padding-bottom:.5em}
.franja.clara{height:46vh}
.franja.clara::after{display:none}

.capitulo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:0 7vw;padding:16vh var(--margen);border-top:1px solid var(--separador)}
.capitulo:first-child{border-top:0}
.cap-cabeza{position:sticky;top:130px;align-self:start}
.cap-cabeza .etiqueta{color:var(--tinta);display:block}
.cap-cabeza h2{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.2vw,32px);line-height:1.2;color:var(--intermedio);margin-top:20px}
.cap-titular{font-family:var(--display);font-weight:200;font-size:clamp(36px,3.8vw,60px);line-height:1.06;letter-spacing:-.014em;color:var(--profundo);margin-top:10px;text-wrap:balance}
.cap-cuerpo>p{color:var(--superficie);max-width:36em}
.cap-cuerpo>p+p{margin-top:16px}
.cap-cuerpo>p b{font-weight:500;color:var(--profundo)}
.cap-cuerpo .primero{font-size:clamp(18px,1.4vw,21px);line-height:1.6;color:var(--profundo)}
.cap-cuerpo h3.etiqueta{color:var(--intermedio);margin:44px 0 12px}
.lista-pieza{list-style:none;border-top:1px solid var(--separador);max-width:40em}
.lista-pieza li{padding:15px 0 14px;border-bottom:1px solid var(--separador);color:var(--superficie)}
.lista-pieza b{font-weight:500;color:var(--profundo)}
.cita{display:flex;gap:18px;align-items:baseline;margin-top:44px;font-family:var(--display);font-weight:300;font-size:clamp(21px,1.8vw,26px);line-height:1.3;color:var(--profundo);max-width:24em}
.cita::before{content:"";flex:none;width:32px;height:1px;background:var(--tinta);transform:translateY(-.3em)}
.cap-cuerpo .boton{margin-top:32px}
.cap-cuerpo .doc{margin-top:48px}

/* Según desde dónde partes: eliges tu punto de partida y ves qué pasa en la sesión */
.partes .selector{display:flex;flex-wrap:wrap;gap:8px}
[data-pestanas] .selector button{min-height:42px;padding:8px 15px;border:1px solid var(--separador);border-radius:12px;font-size:14.5px;color:var(--superficie);text-align:left;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .16s ease-out}
[data-pestanas] .selector button:active{transform:scale(.97)}
[data-pestanas] .selector button[aria-selected=true]{background:var(--fondo);border-color:var(--fondo);color:var(--papel)}
@media (hover:hover) and (pointer:fine){[data-pestanas] .selector button:not([aria-selected=true]):hover{border-color:var(--linea)}}
.partes .panel{margin-top:18px;max-width:36em;color:var(--superficie);font-size:17px;min-height:3.4em}
.partes .panel b{font-weight:500;color:var(--profundo)}
.partes .panel[hidden]{display:none}
.sin-js .partes .selector{display:none}
.sin-js .partes .panel{display:block;min-height:0;margin-top:10px}

/* El ritmo del acompañamiento: semanas el primer mes, después cada mes, revisión al tercero */
.ritmo{margin:40px 0 8px;max-width:40em}
.ritmo .linea{position:relative;height:46px;border-bottom:1px solid var(--separador)}
.ritmo .linea i{position:absolute;bottom:0;width:1px;background:var(--superficie);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--sale);transition-delay:calc(var(--i) * 90ms)}
.ritmo .linea i.semana{height:14px}
.ritmo .linea i.mes{height:28px;background:var(--profundo)}
.ritmo .linea i.revision{height:40px;width:2px;background:var(--tinta)}
.ritmo .linea i.despues{height:28px;background:var(--linea)}
.ritmo.visible .linea i,.sin-js .ritmo .linea i{transform:scaleY(1)}
.ritmo .meses{position:relative;height:22px;font-size:12px;color:var(--intermedio)}
.ritmo .meses span{position:absolute;top:6px;transform:translateX(-50%)}

/* Mapa de lo que se puede delegar: ordenado por impacto */
.doc .impacto{display:grid;grid-template-columns:minmax(0,1fr) 38%;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--separador)}
.doc .impacto:last-child{border-bottom:0}
.doc .impacto .b{margin:0;width:var(--w,80%)}
.doc .impacto em{display:block;height:3px;background:var(--tinta);width:var(--v);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--sale);transition-delay:calc(var(--i,0) * 140ms + 500ms)}
.doc.escrito .impacto em,.sin-js .doc .impacto em{transform:scaleX(1)}

/* Capítulo en azul profundo, abierto por una portadilla de agua (rompe el tramo de Papel) */
.portadilla{position:relative;height:82vh;min-height:460px;overflow:hidden;background:var(--fondo)}
.portadilla img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.portadilla .vertical{display:none}
.portadilla::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(rgba(6,20,27,0),var(--profundo))}
.cap-oscuro{background:var(--profundo);color:var(--papel)}
.cap-oscuro .capitulo{border-top:0;padding-top:6vh}
.cap-oscuro+.capitulo{border-top:0}
.cap-oscuro .cap-cabeza .etiqueta{color:var(--arena)}
.cap-oscuro .cap-cabeza h2{color:var(--linea)}
.cap-oscuro .cap-titular,.cap-oscuro .primero,.cap-oscuro .cita{color:var(--papel)}
.cap-oscuro .cita::before{background:var(--arena)}
.cap-oscuro .cap-cuerpo>p{color:var(--texto-2)}
.cap-oscuro .cap-cuerpo>p b,.cap-oscuro .lista-pieza b{color:var(--papel)}
.cap-oscuro h3.etiqueta{color:var(--linea)}
.cap-oscuro .lista-pieza,.cap-oscuro .lista-pieza li{border-color:var(--linea-oscura)}
.cap-oscuro .lista-pieza li{color:var(--texto-2)}
.cap-oscuro .ritmo .linea{border-color:var(--linea-oscura)}
.cap-oscuro .ritmo .linea i.semana{background:var(--texto-2)}
.cap-oscuro .ritmo .linea i.mes{background:var(--papel)}
.cap-oscuro .ritmo .linea i.revision{background:var(--arena)}
.cap-oscuro .ritmo .linea i.despues{background:var(--intermedio)}
.cap-oscuro .ritmo .meses{color:var(--linea)}
.cap-oscuro :focus-visible{outline-color:var(--arena)}

/* Banda de cierre de las páginas internas (sin frase de marca: solo va en Inicio) */
.banda-conversemos{background:var(--profundo);color:var(--papel);padding:16vh var(--margen) 36px}
.banda-conversemos h2{font-family:var(--display);font-weight:200;font-size:clamp(44px,5.4vw,86px);line-height:1;letter-spacing:-.02em}
.banda-conversemos .fila-contactos{display:flex;flex-wrap:wrap;gap:12px 36px;margin:6vh 0 12vh;font-size:16px}
.banda-conversemos .fila-contactos a{background:linear-gradient(var(--arena),var(--arena)) left bottom/0 1px no-repeat;padding-bottom:2px;transition:background-size .35s var(--sale)}
@media (hover:hover) and (pointer:fine){.banda-conversemos .fila-contactos a:hover{background-size:100% 1px}}

/* ---------- Operación ---------- */
/* Medición antes y después: dos líneas, sin cifras */
.medicion{display:grid;gap:10px;margin:22px 0 6px;max-width:30em}
.medicion div{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:14px;font-size:13px}
.medicion span{color:var(--linea)}
.medicion i{display:block;height:3px;width:var(--v);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--sale)}
.medicion .antes i{background:var(--linea)}
.medicion .despues i{background:var(--arena);transition-delay:.5s}
.medicion.visible i,.sin-js .medicion i{transform:scaleX(1)}
.dos-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:48px}
.dos-docs .doc{margin-top:0;max-width:none}
.dos-docs .doc .doc-titulo{font-size:20px}
.bifurcacion .selector button{text-align:left}

/* Quién cuida tu equipo: tres meses y, desde el cuarto, tres caminos */
.cuidado{margin-top:36px}
.bifurcacion{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15em);gap:0 18px;align-items:stretch}
.bifurcacion svg{width:100%;height:auto;overflow:visible}
.bifurcacion path{fill:none;stroke-linecap:round}
.bifurcacion .tronco{stroke:var(--profundo);stroke-width:2}
.bifurcacion .tic{stroke:var(--profundo);stroke-width:1.5}
.bifurcacion .rama{stroke:var(--separador);stroke-width:1.5;transition:stroke .35s ease,stroke-width .35s ease}
.bifurcacion .rama.activa{stroke:var(--tinta);stroke-width:2.2}
.bifurcacion [data-dibuja]{stroke-dasharray:var(--largo);stroke-dashoffset:var(--largo);transition:stroke-dashoffset 1.2s var(--sale),stroke .35s ease,stroke-width .35s ease}
.bifurcacion.visible [data-dibuja],.sin-js .bifurcacion [data-dibuja]{stroke-dashoffset:0}
.bifurcacion .rama[data-dibuja]{transition-delay:.9s,0s,0s}
.bifurcacion .selector{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:2px 0}
.cuidado .panel{margin-top:30px;max-width:36em;color:var(--superficie);font-size:17px}
.cuidado .panel b{font-weight:500;color:var(--profundo)}
.cuidado .panel[hidden]{display:none}
.cuidado .panel .doc{margin-top:28px}
.sin-js .cuidado .panel{display:block}

/* Proyectos especiales: recuadro al pie de Operación */
.recuadro{margin:0 var(--margen) 16vh;padding:clamp(28px,4vw,56px);background:var(--bloque);border-radius:20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px 6vw;align-items:start}
.recuadro .etiqueta{color:var(--tinta);display:block;margin-bottom:14px}
.recuadro h2{font-family:var(--display);font-weight:300;font-size:clamp(28px,2.6vw,40px);line-height:1.15;color:var(--profundo)}
.recuadro p{color:var(--superficie)}

/* ---------- Página de las seis preguntas ---------- */
/* Cabeza sobre la lluvia: el titular va en el agua oscura, nunca sobre el cielo claro */
.cabeza-agua{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--margen) 10vh;background:var(--profundo);color:var(--papel);overflow:hidden}
.cabeza-agua img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.cabeza-agua .vertical{display:none}
.cabeza-agua::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(rgba(6,20,27,0),rgba(6,20,27,.9) 70%,var(--profundo))}
.cabeza-agua>*:not(img){position:relative;z-index:2}
.cabeza-agua .etiqueta{color:var(--texto-2);margin-bottom:22px}
.cabeza-agua h1{font-family:var(--display);font-weight:200;font-size:clamp(40px,5.2vw,84px);line-height:1.05;letter-spacing:-.018em;max-width:15em;text-wrap:balance}

/* El autodiagnóstico: cada pregunta se responde con Lo sé / No lo sé, y nada sale de tu navegador */
.diagnostico{background:var(--profundo);color:var(--papel);padding:6vh var(--margen) 16vh}
.diagnostico .intro-cols{margin-top:0}
.preguntas-lista{list-style:none;margin-top:10vh;border-bottom:1px solid var(--linea-oscura)}
.pregunta{display:grid;grid-template-columns:72px minmax(0,1.1fr) minmax(0,1fr) auto;gap:0 3.5vw;align-items:center;padding:28px 0 26px;border-top:1px solid var(--linea-oscura)}
.pregunta .n{color:var(--arena)}
.pregunta h3{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.4vw,36px);line-height:1.2;color:var(--papel)}
.pregunta p{font-size:15.5px;line-height:1.55;color:var(--texto-2);max-width:30em}
.respuesta{display:flex;gap:6px}
.respuesta button{height:40px;padding:0 15px;border:1px solid rgba(155,168,171,.3);border-radius:12px;font-size:14px;color:var(--texto-2);white-space:nowrap;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .16s ease-out}
.respuesta button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.respuesta button[aria-pressed=false]:hover{border-color:var(--linea);color:var(--papel)}}
.respuesta button[aria-pressed=true]{background:var(--papel);border-color:var(--papel);color:var(--profundo)}
.respuesta button.no[aria-pressed=true]{background:var(--arena);border-color:var(--arena);color:var(--profundo)}
.sin-js .respuesta{display:none}
.resumen{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 6vw;align-items:end;margin-top:10vh}
.resumen .grande{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.6vw,40px);line-height:1.2;color:var(--papel);max-width:22em;opacity:.45;transition:opacity .6s ease}
.resumen.alguna .grande,.sin-js .resumen .grande{opacity:1}
.resumen p.sigue{color:var(--texto-2);max-width:36em;margin-top:14px}
.marcas{display:flex;gap:10px;align-items:center}
.marcas i{width:14px;height:14px;border-radius:50%;border:1px solid var(--linea);transition:background-color .3s ease,border-color .3s ease}
.marcas i.si{background:var(--texto-2);border-color:var(--texto-2)}
.marcas i.no{background:var(--arena);border-color:var(--arena)}
.cuenta{font-size:13.5px;color:var(--linea);margin-top:10px;min-height:1.4em;text-align:right}
.privado{font-size:13px;color:var(--linea);margin-top:12px}
.resumen .boton{margin-top:30px;background:var(--papel);color:var(--profundo)}
.sin-js .marcas,.sin-js .cuenta,.sin-js .privado{display:none}

/* El estatuto: en cada implementación, las seis quedan respondidas */
.en-estatuto{padding:18vh var(--margen) 18vh}
.estatuto{background:var(--bloque);border-radius:8px;padding:34px clamp(22px,3.4vw,52px) 14px;max-width:980px;margin:0 auto}
.estatuto>header{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--separador)}
.estatuto .doc-titulo{font-family:var(--display);font-weight:300;font-size:26px;color:var(--profundo)}
.estatuto .doc-meta{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--tinta);font-weight:500}
.estatuto ol{list-style:none}
.renglon{display:grid;grid-template-columns:52px minmax(0,1fr) 28px;gap:0 3vw;align-items:center;padding:20px 0 18px;border-bottom:1px solid var(--separador)}
.renglon:last-child{border-bottom:0}
.renglon .n{color:var(--intermedio);transition:color .6s ease}
.renglon span.q{font-family:var(--display);font-weight:300;font-size:clamp(20px,1.8vw,26px);color:var(--profundo)}
.renglon svg{width:20px;height:20px}
.renglon path{fill:none;stroke:var(--tinta);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s var(--sale) .15s}
.renglon.respondida .n{color:var(--tinta)}
.renglon.respondida path,.sin-js .renglon path{stroke-dashoffset:0}

/* ---------- Quiénes somos ---------- */
/* La calma queda fija a un lado mientras se leen los perfiles */
.equipo{display:grid;grid-template-columns:minmax(0,42vw) minmax(0,1fr);background:var(--papel)}
.equipo .lado{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--fondo)}
.equipo .lado img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.equipo .contenido{padding:max(150px,24vh) var(--margen) 18vh 6vw}
.equipo .etiqueta{color:var(--tinta);display:block}
.equipo h1{font-family:var(--display);font-weight:200;font-size:clamp(44px,5.4vw,88px);line-height:1.04;letter-spacing:-.018em;color:var(--profundo);margin-top:20px}
.perfiles{list-style:none;margin-top:14vh}
.perfil{padding:34px 0 32px;border-top:1px solid var(--separador)}
.perfil:last-child{border-bottom:1px solid var(--separador)}
.perfil h2{font-family:var(--display);font-weight:300;font-size:clamp(28px,2.6vw,40px);line-height:1.15;color:var(--profundo)}
.perfil .rol{display:block;margin-top:8px;color:var(--tinta)}
.perfil p{margin-top:14px;color:var(--superficie);max-width:34em}
.perfil p+p{margin-top:4px}
/* Texto que todavía no llega (T-59): se ve como espacio reservado, nunca como texto inventado */
.por-llegar{color:var(--intermedio);border-bottom:1px dashed var(--linea);padding-bottom:1px}

/* ---------- Conversemos ---------- */
/* Las dos gotas a sangre y, sobre sus ondas, dos tarjetas de vidrio (D-50: solo donde hay variación detrás) */
.conocernos{position:relative;min-height:100svh;padding:max(150px,22vh) var(--margen) 10vh;background:var(--profundo);color:var(--papel);display:flex;flex-direction:column;justify-content:space-between;gap:8vh;overflow:hidden}
.conocernos>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 80%}
.conocernos .vertical{display:none}
.conocernos::before{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(var(--profundo),rgba(6,20,27,0));z-index:1}
.conocernos>*:not(img){position:relative;z-index:2}
.conocernos .etiqueta{color:var(--texto-2);display:block;margin-bottom:18px}
.conocernos h1{font-family:var(--display);font-weight:200;font-size:clamp(48px,6.6vw,108px);line-height:.98;letter-spacing:-.02em}
.tarjetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1100px}
.vidrio{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);border-radius:20px}
.tarjeta{padding:30px 30px 28px;display:flex;flex-direction:column}
.tarjeta .etiqueta{color:var(--arena);margin-bottom:14px}
.tarjeta h2{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.4vw,36px);line-height:1.15}
.tarjeta p{margin-top:14px;color:var(--texto-2);font-size:16px}
.tarjeta .accion{margin-top:auto;padding-top:26px}
.tarjeta .boton{background:var(--papel);color:var(--profundo)}
.tarjeta .ver{color:var(--papel);background-image:linear-gradient(var(--arena),var(--arena))}
.tarjeta .boton+.ver{display:table;margin-top:18px}

/* Los contactos, con copiar el correo */
.contacto{background:var(--profundo);color:var(--papel);padding:12vh var(--margen) 36px}
.contacto .etiqueta{color:var(--texto-2);display:block;margin-bottom:24px}
.lista-contacto{list-style:none;border-top:1px solid var(--linea-oscura);max-width:760px}
.lista-contacto li{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--linea-oscura)}
.lista-contacto a{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.2vw,32px);background:linear-gradient(var(--arena),var(--arena)) left bottom/0 1px no-repeat;padding-bottom:2px;transition:background-size .35s var(--sale)}
@media (hover:hover) and (pointer:fine){.lista-contacto a:hover{background-size:100% 1px}}
.copiar{font-size:12.5px;font-weight:500;color:var(--texto-2);padding:7px 12px;border:1px solid rgba(155,168,171,.28);border-radius:12px;transition:color .2s ease,border-color .2s ease,transform .16s ease-out}
.copiar:active{transform:scale(.97)}
.copiar.hecho{color:var(--arena);border-color:rgba(200,183,154,.5)}
@media (hover:hover) and (pointer:fine){.copiar:hover{color:var(--papel);border-color:rgba(155,168,171,.5)}}
.sin-js .copiar{display:none}
.contacto .pie{margin-top:16vh}

/* ---------- Reducir movimiento: todo queda quieto y completo ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01s!important;transition-delay:0s!important}
  .mesa .doc{filter:none;transform:none}
  .sello>*{animation:none}
}

/* La C de Spectral trae aire a la izquierda: a este tamaño se nota. Se corre para que el trazo calce con el borde del texto */
.cierre h2,.banda-conversemos h2,.conocernos h1{margin-left:-.055em}

/* ---------- Celular ---------- */
@media (max-width:760px){
  .menu{top:10px;left:10px;right:10px;height:58px;gap:12px;padding:0 8px 0 18px}
  .menu nav{display:none}
  .abrir-menu{display:inline-flex;align-items:center;margin-left:auto}
  .boton{height:42px;padding:0 16px}
  .portada{grid-template-columns:1fr;padding-top:130px;min-height:auto}
  .escena .horizontal{display:none}.escena .vertical{display:block;object-position:50% 61%}
  .bajada{grid-template-columns:1fr;gap:28px}
  .dos-bloques{grid-template-columns:1fr}
  .mesa{display:none}
  .bloque{min-height:0;opacity:1;padding-bottom:56px}
  .solo-celular{display:block;margin-top:40px}
  .doc{padding:24px 22px 20px}
  .doc header{flex-direction:column;gap:6px}
  .intro-cols{grid-template-columns:1fr}
  .fila{grid-template-columns:40px minmax(0,1fr);gap:8px 12px;opacity:1}
  .fila p{grid-column:2}
  .franja{height:38vh}
  .pasos{grid-template-columns:1fr}
  .paso+.paso{margin-top:48px;border-top:1px solid var(--separador)}
  .camino{display:none}
  .piezas{grid-template-columns:1fr}
  .piezas li{padding:14px 0 12px;border-bottom:1px solid var(--separador)}
  .logos li{height:112px}
  .logos img{height:calc(var(--alto)*.62);max-width:76%}
  .cierre{padding-top:16vh}
  .cierre h2{font-size:44px}
  .escena-cierre .horizontal{display:none}.escena-cierre .vertical{display:block;object-position:50% 60%}
  .pie{flex-wrap:wrap;gap:10px 18px}
  .pie img{margin-left:0}
}

/* ---------- Celular: páginas de bloque ---------- */
@media (max-width:760px){
  .cabeza{grid-template-columns:1fr;padding-top:130px}
  .franja.clara{height:32vh}
  .capitulo{grid-template-columns:1fr;padding:12vh 20px}
  .cap-cabeza{position:static;margin-bottom:5vh}
  .doc .impacto{grid-template-columns:minmax(0,1fr) 34%}
  .portadilla{height:56vh}
  .portadilla .horizontal{display:none}.portadilla .vertical{display:block;object-position:50% 66%}
}

/* ---------- Celular: Operación ---------- */
@media (max-width:760px){
  .dos-docs{grid-template-columns:1fr}
  .bifurcacion{grid-template-columns:1fr}
  .bifurcacion svg{max-height:120px}
  .bifurcacion .selector{margin-top:18px}
  .recuadro{grid-template-columns:1fr;margin:0 20px 12vh}
}

/* ---------- Celular: las seis preguntas ---------- */
@media (max-width:760px){
  .cabeza-agua .horizontal{display:none}.cabeza-agua .vertical{display:block;object-position:50% 60%}
  .pregunta{grid-template-columns:40px minmax(0,1fr);gap:8px 12px}
  .pregunta p,.pregunta .respuesta{grid-column:2}
  .pregunta .respuesta{margin-top:12px}
  .resumen{grid-template-columns:1fr}
  .cuenta{text-align:left}
  .estatuto{padding:24px 20px 6px}
  .estatuto>header{flex-direction:column;gap:6px}
  .estatuto .doc-titulo{font-size:21px}
  .renglon{grid-template-columns:34px minmax(0,1fr) 22px;gap:0 12px}
}

/* ---------- Celular: quienes-somos ---------- */
@media (max-width:760px){
  .equipo{grid-template-columns:1fr}
  .equipo .lado{position:relative;height:44vh}
  .equipo .contenido{padding:10vh 20px 14vh}
  .perfiles{margin-top:8vh}
}

/* ---------- Celular: conversemos ---------- */
@media (max-width:760px){
  .conocernos>.horizontal{display:none}
  .conocernos>.vertical{display:block;height:78svh;object-position:50% 70%;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .conocernos{gap:6vh;padding-top:120px}
  .conocernos h1{margin-bottom:22svh}
  .tarjeta.vidrio{background:var(--fondo);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:rgba(155,168,171,.18)}
  .conocernos h1{font-size:44px}
  .tarjetas{grid-template-columns:1fr}
  .tarjeta{padding:24px 22px}
  .lista-contacto a{font-size:20px}
}