/* =====================================================================
   OLATU · Bakio — muestrario BAI · alquiler vacacional
   Paleta calculada ANTES del CSS (WCAG, ver /root/olatu-notas.md):
   tinta/crema 13.86 · tinta/bruma 9.72 · crema/tinta 13.86
   crema/botella 13.42 · gris #4C5666 sobre crema 6.55 · #46505E sobre bruma 5.06
   EXCLUSIÓN: --oro solo relleno/línea decorativa, NUNCA texto.
   Botón deshabilitado: no existe (no hay formularios); si se añade, colores propios, nunca opacity.
   ===================================================================== */

@font-face{
  font-family:'Bodoni Moda';
  src:url('../fonts/bodoni.woff2') format('woff2');
  font-weight:400 500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Monsieur La Doulaise';
  src:url('../fonts/monsieur.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Archivo Exp';
  src:url('../fonts/archivo-exp.woff2') format('woff2');
  font-weight:500 600; font-style:normal; font-display:swap;
}

:root{
  --tinta:#16233B;
  --crema:#F8F7F2;      /* subido desde #F2F1E9: casi blanco, así el empalme con las nubes no canta */
  --bruma:#B9CFDA;
  --cielo:#7FAFD1;      /* cielo de comunidad.jpg · tinta encima 6,69 · nunca crema (2,07) */
  --blanco:#FFFFFF;
  --botella:#142A1F;
  --gris:#4C5666;        /* secundario sobre crema/blanco */
  --gris-bruma:#46505E;  /* secundario sobre bruma */
  --oro:#8A6A2F;         /* SOLO relleno / líneas */
  --didone:'Bodoni Moda', serif;
  --script:'Monsieur La Doulaise', cursive;
  --sans:'Archivo Exp', Arial, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
img{display:block;max-width:100%;height:auto}
img[width]{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}

body{
  font-family:var(--sans);
  background:var(--crema);
  color:var(--tinta);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--tinta);color:var(--crema)}

/* ---------- utilidades tipográficas ---------- */
.didone{font-family:var(--didone);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em}
.etiqueta{
  font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;
}
.parrafo{font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.75;letter-spacing:.02em;color:var(--gris)}
.s-bruma .parrafo{color:var(--gris-bruma)}

/* =====================================================================
   INTRO (velo de carga)
   ===================================================================== */
#velo{
  position:fixed;inset:0;z-index:200;background:var(--crema);
  display:flex;align-items:center;justify-content:center;
}
#velo svg{width:76px;height:76px;opacity:0}

/* =====================================================================
   CABECERA fija + raíl de scroll
   Tema: body.tema-claro (sobre foto/oscuro → textos claros)
         por defecto textos en tinta
   ===================================================================== */
header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:28px 36px;pointer-events:none;
}
header a,header .logo-giro{pointer-events:auto}

nav{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.nav-cta{
  font-family:var(--didone);font-size:22px;line-height:1.05;
  text-transform:uppercase;text-align:right;letter-spacing:.02em;
  border-bottom:1px solid currentColor;padding-bottom:4px;
}
.nav-item{font-size:11px}
nav .nav-item{position:relative}
nav .nav-item::after{
  content:'';position:absolute;left:0;bottom:-3px;height:1px;width:0;
  background:currentColor;transition:width .35s ease;
}
nav .nav-item:hover::after{width:100%}

/* pastilla de legibilidad sobre foto */
.tema-claro header{color:var(--blanco)}
header{color:var(--tinta);transition:color .4s ease}
.velo-cabecera{
  position:fixed;top:0;left:0;right:0;height:200px;z-index:80;
  background:linear-gradient(rgba(12,20,38,.72) 0%,rgba(12,20,38,.38) 55%,rgba(12,20,38,0));
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.tema-claro .velo-cabecera{opacity:1}

/* logo circular giratorio */
.logo-giro{position:relative;width:104px;height:104px;display:block}
.logo-giro svg{width:100%;height:100%;overflow:visible}
.logo-giro .anillo{animation:girar 22s linear infinite;transform-origin:50% 50%}
@keyframes girar{to{transform:rotate(360deg)}}
.logo-giro text{
  font-family:var(--sans);font-weight:600;font-size:10.5px;
  letter-spacing:.34em;text-transform:uppercase;fill:currentColor;
}
.logo-giro .flor{fill:currentColor}

/* raíl lateral */
#rail{
  position:fixed;left:36px;top:50%;transform:translateY(-50%);
  z-index:85;display:flex;flex-direction:column;align-items:center;gap:16px;
  color:var(--tinta);transition:color .4s ease;pointer-events:none;
}
.tema-claro #rail{color:var(--blanco);text-shadow:0 1px 3px rgba(10,18,35,.9),0 0 14px rgba(10,18,35,.75)}
/* Sobre foto, el raíl lleva pastilla propia: el cielo no garantiza contraste. */
.tema-claro #rail .num,
.tema-claro #rail .palabra,
.tema-claro #rail .flecha{
  background:rgba(13,23,44,.6);border-radius:999px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.tema-claro #rail .num{padding:5px 8px}
.tema-claro #rail .palabra{padding:9px 5px}
.tema-claro #rail .flecha{padding:5px 7px}
#rail .num{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.2em}
#rail .palabra{
  font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;writing-mode:vertical-rl;
}
#rail .linea{width:1px;height:120px;background:currentColor;opacity:.35;position:relative}
#rail .linea i{position:absolute;top:0;left:0;width:1px;height:0%;background:currentColor;display:block}
#rail .flecha{font-size:13px;line-height:1}

/* =====================================================================
   INTRO tipográfica (tinta)
   ===================================================================== */
#intro{
  position:fixed;inset:0;z-index:200;background:var(--tinta);color:var(--crema);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.didone-no{font-family:var(--didone);font-weight:400}
.intro-script{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--script);font-size:44vw;color:var(--crema);opacity:.05;
  pointer-events:none;transform:rotate(-6deg);
}
.intro-flor{position:absolute;top:34px;left:50%;transform:translateX(-50%);width:30px;height:30px;fill:var(--crema);opacity:0}
.intro-lado{position:absolute;top:50%;transform:translateY(-50%);color:var(--crema);opacity:0}
.intro-lado.a{left:5vw}
.intro-lado.b{right:5vw}
.intro-centro{text-align:center;position:relative}
.intro-centro h2{font-family:var(--didone);font-weight:400;text-transform:uppercase;font-size:clamp(64px,11vw,170px);line-height:.9;opacity:0}
.intro-centro .script{font-family:var(--script);font-size:clamp(40px,5.6vw,88px);line-height:.7;margin-top:-.1em;opacity:0}
.intro-pie{position:absolute;bottom:36px;left:0;right:0;text-align:center;color:var(--crema);opacity:0}

/* =====================================================================
   01 · HERO: ventana de arco sobre tinta + panorámica de cielo alto
   ===================================================================== */
#hero{height:380vh;position:relative;background:var(--tinta)}
.hero-lienzo{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--tinta)}

/* la ventana: arco recortado con clip-path que crece a pantalla completa */
.hero-arco{
  position:absolute;inset:0;
  clip-path:inset(16% 34% 0% 34% round 50vw 50vw 0 0);
  will-change:clip-path;
}
/* la panorámica: imagen de 2400 de alto; empieza enseñando el cielo y baja a los edificios */
.hero-panoramica{position:absolute;left:0;top:0;width:100%;height:max(125vw,100vh);will-change:transform}
.hero-panoramica img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-panoramica .foto-noche{opacity:0}
.hero-velo{
  position:absolute;inset:0;
  background:linear-gradient(rgba(13,23,44,.34) 0%, rgba(13,23,44,0) 30%);
  pointer-events:none;
}

/* flancos "UN LUGAR — AL QUE VOLVER" a los lados del arco */
.hero-flanco{
  position:absolute;top:50%;transform:translateY(-50%);
  color:var(--crema);font-size:clamp(20px,2.4vw,36px);
  /* a mitad de la apertura del arco siguen visibles con la foto ya detrás:
     sin sombra bajaban a 1,35 sobre el cielo */
  text-shadow:0 1px 3px rgba(13,23,44,.92),0 0 18px rgba(13,23,44,.8);
}
.hero-flanco.a{left:4.5vw}
.hero-flanco.b{right:4.5vw}

/* la marca pequeña sobre el arco */
.hero-marca{
  position:absolute;top:24vh;left:0;right:0;text-align:center;color:var(--blanco);
  display:flex;flex-direction:column;align-items:center;
  text-shadow:0 1px 4px rgba(13,23,44,.7),0 0 22px rgba(13,23,44,.5);
  opacity:0;pointer-events:none;
}
.hero-marca .didone{font-size:clamp(40px,6vw,92px);line-height:.9}
.hero-marca .script{font-family:var(--script);font-size:clamp(26px,3vw,46px);line-height:.7;margin-top:-.08em}

/* Puntos de la residencia (como los de la referencia): un aro que late y la
   etiqueta al pasar por encima. Aparecen al terminar el descenso. */
.hero-puntos{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none}
.hero-puntos.vivo{pointer-events:auto}
.punto{
  position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-50%);
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
}
.punto i{
  width:9px;height:9px;border-radius:50%;background:var(--blanco);
  box-shadow:0 0 0 1px rgba(13,23,44,.45),0 2px 10px rgba(13,23,44,.5);
  position:relative;display:block;
}
.punto i::after{
  content:'';position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
  animation:latido 2.6s ease-out infinite;
}
@keyframes latido{
  0%{transform:scale(.6);opacity:.9}
  70%{transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}
.punto::before{
  content:attr(data-eti);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);white-space:nowrap;
  background:rgba(13,23,44,.82);color:var(--blanco);
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;opacity:0;transition:opacity .3s,transform .3s;
  pointer-events:none;
}
.punto:hover::before,.punto:focus-visible::before,
.hero-puntos.vivo .punto::before{opacity:1;transform:translateX(-50%) translateY(0)}

.hero-mandos{position:absolute;bottom:9vh;left:0;right:0;display:flex;justify-content:center}
.conmutador{
  display:flex;align-items:center;gap:14px;
  background:rgba(13,23,44,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:10px 20px;color:var(--blanco);
}
.conmutador button{letter-spacing:.22em;font-weight:600;font-size:11px;text-transform:uppercase;color:var(--blanco);opacity:.72;transition:opacity .35s}
.conmutador button.activo{opacity:1}
.conmutador .raya{width:52px;height:1px;background:rgba(255,255,255,.55);position:relative}
.conmutador .raya i{position:absolute;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--blanco);left:0;transition:left .5s cubic-bezier(.6,0,.2,1)}
.conmutador.es-noche .raya i{left:46px}

.hero-pista{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  color:var(--blanco);background:rgba(13,23,44,.55);
  border-radius:999px;padding:8px 18px;font-size:10px;letter-spacing:.3em;
  font-weight:600;text-transform:uppercase;
}

/* =====================================================================
   02 · franja intro + LOCALIZACIÓN (bruma)
   ===================================================================== */
.s-crema{background:var(--crema);color:var(--tinta)}
.s-bruma{background:var(--bruma);color:var(--tinta)}
section{position:relative}
.z-alto{position:relative;z-index:5}

#loc{padding:15vh 6vw 12vh;text-align:center}
#loc .etiqueta{color:var(--gris-bruma);margin-bottom:5vh;display:block}
#loc h2{font-size:clamp(44px,9vw,150px);margin-bottom:7vh}
.loc-carrusel{max-width:640px;margin:0 auto 5vh;position:relative}
.loc-carrusel .marco{overflow:hidden;border-radius:2px;aspect-ratio:4/3;background:var(--tinta)}
.loc-carrusel img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.loc-carrusel .marco{position:relative}
.loc-carrusel img.visible{opacity:1}
.loc-flechas{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:22px;color:var(--tinta)}
.loc-flechas button{font-size:20px;line-height:1;padding:6px 10px}
.loc-flechas .cual{font-size:12px;font-weight:600;letter-spacing:.2em}
#loc .parrafo{max-width:520px;margin:0 auto}

/* =====================================================================
   03 · EL CONCEPTO (crema, hortensias en las esquinas)
   ===================================================================== */
#concepto{padding:22vh 6vw;text-align:center;overflow:hidden}
.cuerpo-concepto{position:relative;z-index:3}
#concepto .etiqueta{color:var(--gris);display:inline-block;margin-bottom:4vh}
#concepto h2{font-size:clamp(26px,3.6vw,54px);line-height:1.16;max-width:1100px;margin:0 auto 5vh}
#concepto .parrafo{max-width:440px;margin:0 auto 6vh}
.flor-sello{width:40px;height:40px;margin:0 auto;color:var(--tinta)}
.flor-sello svg{width:100%;height:100%;fill:currentColor}

.rama{position:absolute;pointer-events:none;will-change:transform;z-index:1}
.rama img{width:100%;height:auto;display:block}
/* Como en la referencia: ramas grandes que CUELGAN del borde, cortadas por el
   marco, no flores sueltas centradas. Allí miden de 960 a 1311 px y se repiten
   giradas o en espejo. */
.rama.a{top:-9vh;left:-6vw;width:min(42vw,620px)}
.rama.b{top:6vh;right:-10vw;width:min(32vw,480px);transform:scaleX(-1)}
.rama.c{top:-6vh;right:-6vw;width:min(30vw,460px);transform:scaleX(-1) rotate(6deg);z-index:3}

/* =====================================================================
   04 · LA COSTA SALVAJE — revelación con escala (scrub)
   ===================================================================== */
#costa{height:320vh}
.costa-lienzo{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--crema)}
.costa-texto{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2;pointer-events:none}
.costa-texto h2{font-size:clamp(52px,11.5vw,190px);line-height:.9}
.costa-texto .etiqueta{color:var(--gris);margin-top:4vh}
.costa-marco{
  position:absolute;inset:0;z-index:3;
  clip-path:inset(24% 44.5% 24% 44.5%);
  will-change:clip-path,transform;
}
.costa-marco img{width:100%;height:100%;object-fit:cover;transform:scale(1.28);will-change:transform}
.costa-rotulo{
  position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:11vh;opacity:0;pointer-events:none;
}
.costa-rotulo span{
  color:var(--blanco);font-size:clamp(15px,1.5vw,20px);letter-spacing:.24em;font-weight:600;text-transform:uppercase;
  background:rgba(13,23,44,.55);border-radius:999px;padding:12px 26px;
}

/* =====================================================================
   05 · PANEO HORIZONTAL — tres paneles hacia la izquierda
   ===================================================================== */
#pan{height:300vh}
.pan-lienzo{position:sticky;top:0;height:100vh;overflow:hidden}
.pan-carril{display:flex;height:100%;width:200vw;will-change:transform}
.pan-panel{flex:0 0 100vw;height:100%;position:relative;overflow:hidden}

/* tiras de foto verticales: las "ventanas" del paneo */
.tira{position:absolute;overflow:hidden;border-radius:2px}
.tira img{width:100%;height:120%;object-fit:cover;will-change:transform}
.p1 .tira.t1{right:8vw;top:12vh;width:22vw;height:76vh}
.p2 .tira.t2{left:0;top:0;width:24vw;height:100vh;border-radius:0}

/* panel 1: tipografía gigante mezclada */
.pan-tipografia{
  position:absolute;left:7vw;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;line-height:.94;
}
.pan-tipografia .l1{font-size:clamp(56px,9.5vw,150px)}
.pan-tipografia .l2{font-family:var(--script);font-size:clamp(40px,6vw,96px);margin:-.14em 0 -.1em .9em;line-height:.8}
.pan-tipografia .l3{font-size:clamp(56px,9.5vw,150px);margin-left:2.2em}
/* La rama CUELGA del borde de arriba, como en la referencia: el tallo lo corta
   el propio borde de la pantalla. Nunca flota ni se apoya. */
.pan-flor{position:absolute;left:44vw;top:0;width:min(34vw,560px);pointer-events:none;z-index:2}
.pan-flor img,.pan-flor video{width:100%;height:auto;display:block}
.pan-flor video{display:none}
.con-video .pan-flor video{display:block}
.con-video .pan-flor img{display:none}

/* panel 2: tira + botón circular + texto */
.p2 .btn-circulo{position:absolute;left:42vw;top:50%;transform:translateY(-50%);margin:0}
.pan-texto{position:absolute;right:7vw;top:50%;transform:translateY(-50%);max-width:26vw;text-align:left}
.pan-texto h3{font-family:var(--didone);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.6vw,40px);line-height:1.05;margin-bottom:3vh}

/* panel 3: el camino dibujado de las distancias */
.p3{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5vh;padding:0 6vw}
.p3 .cab{color:var(--gris)}
.camino{width:min(1100px,88vw);position:relative}
.camino svg{width:100%;height:auto;display:block}
.camino-linea{stroke:var(--tinta);stroke-width:2.5;stroke-linecap:round}
.camino-puntos circle{fill:var(--tinta)}
.paradas{position:relative;height:0}
.parada{
  position:absolute;left:var(--px);bottom:100%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding-bottom:8px;white-space:nowrap;
}
.parada .sitio{font-size:clamp(14px,1.5vw,21px);text-transform:uppercase}
.parada .cuanto{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--gris);text-transform:uppercase}
.nota-camino{max-width:460px;text-align:center}
.solo-movil{display:none}

/* =====================================================================
   05 · MONTES con nubes en capas (parallax)
   ===================================================================== */
/* Fondo más pálido que el crema general: así el fundido con las nubes no se
   nota. Con --crema (#F2F1E9) el amarillo del papel cortaba contra el blanco. */
#montes{height:170vh;background:var(--crema)}
.montes-lienzo{position:sticky;top:0;height:100vh;overflow:hidden}
/* El borde de arriba de la foto daba un corte recto contra el crema. Se funde
   con una máscara: la foto se disuelve en el fondo en el primer cuarto, y las
   nubes cruzan justo por esa franja, que es donde las pone la referencia. */
.montes-lienzo>img{
  width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 14%,rgba(0,0,0,.6) 30%,#000 46%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 14%,rgba(0,0,0,.6) 30%,#000 46%);
}
.nubes{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;
  /* si una nube toca el borde de arriba, que se desvanezca en vez de cortarse */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 12%,rgba(0,0,0,.7) 28%,#000 42%,#000 72%,transparent 96%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 12%,rgba(0,0,0,.7) 28%,#000 42%,#000 72%,transparent 96%);
}
/* Tres carriles en bucle, como la referencia: cada uno lleva la misma nube dos
   veces y se reinicia al haber recorrido una copia, así no hay salto.
   Velocidades medidas en era-residence.com: -58, -50 y -42 px/s. Van por TIEMPO,
   no por scroll (comprobado dejando la página quieta). */
.pista{position:absolute;display:flex;will-change:transform;left:0}
.pista img{display:block;height:auto;flex:0 0 auto}
/* Las nubes van recortadas a su contenido (antes cada archivo traía un 25% de
   vacío arriba y caían bajas aunque se subiera el carril), así que estos
   porcentajes son ya la posición real de la nube en pantalla. */
.pista.p1{top:-14%}
.pista.p1 img{width:62vw;opacity:.95}
.pista.p2{top:-2%}
.pista.p2 img{width:52vw;opacity:.9}
.pista.p3{top:10%}
.pista.p3 img{width:44vw;opacity:.78}

.montes-cita{z-index:3;
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 8vw;
}
.montes-cita p{
  color:var(--blanco);font-family:var(--didone);text-transform:uppercase;
  font-size:clamp(24px,3.4vw,50px);line-height:1.14;max-width:900px;
  text-shadow:0 1px 4px rgba(13,23,44,.85);
  /* Peor caso calculado: nube blanca pura justo detrás. Con .58 el blanco daba
     3,89; con .72 da 6,31. Las nubes se mueven, así que esto no se puede dejar
     a la suerte de dónde esté la nube cuando se mide. */
  background:rgba(13,23,44,.72);border-radius:6px;padding:26px 34px;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}

/* =====================================================================
   06 · APARTAMENTOS (bruma)
   ===================================================================== */
#apartamentos{padding:16vh 6vw;text-align:center}
#apartamentos .etiqueta{color:var(--gris-bruma);display:block;margin-bottom:4vh}
#apartamentos h2{font-size:clamp(30px,4.6vw,68px);line-height:1.1;max-width:1000px;margin:0 auto 9vh}
.ventanas{display:flex;justify-content:center;gap:3.5vw;max-width:1150px;margin:0 auto 9vh}
.ventana{flex:1 1 0;max-width:330px;margin:0}
.ventana .hueco{
  border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:3/4.6;
  will-change:transform;
}
.ventana .hueco img{width:100%;height:118%;object-fit:cover;will-change:transform}
.ventana figcaption{
  margin-top:18px;display:flex;flex-direction:column;gap:4px;text-align:center;
  /* las ventanas entran desplazadas y el pie podía quedar sobre la foto de al
     lado: con su propio fondo el contraste está garantizado siempre */
  position:relative;z-index:2;background:var(--bruma);padding:10px 6px 4px;
}
.ventana figcaption .didone{font-size:clamp(18px,1.8vw,26px)}
.ventana figcaption .cuanto{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-bruma)}
.ventana.v2{margin-top:6vh}
.ventana.v3{margin-top:2.5vh}
.apt-datos{display:flex;justify-content:center;gap:6vw;flex-wrap:wrap;margin-bottom:9vh}
.apt-datos .dato .didone{font-size:clamp(34px,4.4vw,58px)}
.apt-datos .dato .etiqueta{color:var(--gris-bruma);margin-top:6px;display:block}

/* botón circular */
.btn-circulo{
  position:relative;width:210px;height:210px;margin:0 auto;display:flex;
  align-items:center;justify-content:center;text-align:center;color:var(--tinta);
}
.btn-circulo::before{
  content:'';position:absolute;inset:0;border:1px solid var(--tinta);border-radius:50%;
  transition:transform .5s ease;
}
.btn-circulo:hover::before{transform:scale(1.07)}
.btn-circulo span{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;max-width:130px;line-height:1.8}

/* =====================================================================
   08 · COMUNIDAD — el cielo baja hacia la foto
   El fondo de la sección es EXACTAMENTE el color del cielo de la foto
   (#7FAFD1, medido de sus seis primeras filas y aplanado con degradado),
   así que el empalme no se ve: la foto emerge del propio cielo.
   Contraste comprobado: tinta sobre #7FAFD1 = 6,69. La crema da 2,07,
   así que aquí NO se usa crema para texto.
   ===================================================================== */
#comunidad{height:260vh;background:var(--cielo);position:relative;z-index:6}
.com-lienzo{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--cielo)}
.com-texto{
  position:absolute;top:14vh;left:0;right:0;padding:0 6vw;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:5vh;z-index:2;
}
.com-texto .parrafo{max-width:560px;color:var(--tinta)}
.com-titular{
  font-size:11px;letter-spacing:.28em;font-weight:700;text-transform:uppercase;
  color:var(--tinta);line-height:2;
}
.com-foto{position:absolute;left:0;right:0;bottom:0;height:82vh;will-change:transform}
/* La foto va RECORTADA con canal alfa (WebP VP8X), sin cielo: es lo que hace la
   referencia (img_cam_05_alpha.webp sobre su fondo de sección). Así el azul es
   siempre el mismo, el de la sección, y no puede haber corte. El intento
   anterior —cielo aplanado en la foto + degradado de empalme— dejaba una franja
   visible porque el cielo real tiene degradado y el degradado plano no encajaba. */
.com-foto picture{display:block;width:100%;height:100%}
.com-foto img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}

/* =====================================================================
   07 · EL ARCO sobre la noche
   ===================================================================== */
#noche-fondo{height:200vh;position:relative;z-index:1;background:var(--tinta)}
.noche-lienzo{position:sticky;top:0;height:100vh;overflow:hidden}
.noche-lienzo img{width:100%;height:100%;object-fit:cover}
.noche-eti{
  position:absolute;top:12vh;left:0;right:0;text-align:center;color:var(--blanco);
}
.noche-eti span{background:rgba(13,23,44,.5);border-radius:999px;padding:10px 22px;font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase}

#arco{
  position:relative;z-index:6;margin-top:-100vh;
  background:var(--crema);color:var(--tinta);
  border-radius:50vw 50vw 0 0;
  /* El padding de 30vh dejaba media pantalla vacía. Y el margen negativo de
     abajo asegura que tras las esquinas del arco verde haya crema y no la foto
     de noche, que es lo que asomaba en los laterales. */
  padding:22vh 6vw 20vh;text-align:center;margin-bottom:-16vh;
}
#arco h2{font-size:clamp(46px,9.5vw,150px)}
#arco .etiqueta{color:var(--gris);display:block;margin-top:5vh}
#arco .parrafo{max-width:480px;margin:6vh auto 0}

/* =====================================================================
   08 · LO QUE INCLUYE — carril horizontal con scrub (botella)
   ===================================================================== */
/* El verde entra con su propio arco: si sube en recto contra el crema, parece
   que la pieza de arriba cambia de color a media altura. Con la curva se lee
   como una ventana nueva que sube por detrás, que es el lenguaje del sitio. */
/* Sin verde: es la MISMA puerta crema del arco, extendida hasta abajo. Al ser
   el mismo color no hace falta curva propia — la del arco de arriba ya la da. */
#incluye{
  height:340vh;background:var(--crema);color:var(--tinta);
  position:relative;z-index:7;
}
.incluye-lienzo{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.incluye-cab{padding:0 6vw;margin-bottom:6vh;display:flex;align-items:baseline;gap:3vw;flex-wrap:wrap}
.incluye-cab h2{font-size:clamp(40px,7.5vw,110px)}
.incluye-cab .etiqueta{color:var(--gris);opacity:1}
.carril{display:flex;gap:3vw;padding:0 6vw;will-change:transform}
.vagon{flex:0 0 auto;width:min(30vw,400px)}
.vagon .foto{aspect-ratio:3/4;overflow:hidden;border-radius:2px}
.vagon img{width:100%;height:100%;object-fit:cover}
.vagon h3{font-family:var(--didone);font-weight:400;text-transform:uppercase;font-size:clamp(19px,1.9vw,27px);margin:20px 0 8px}
.vagon p{font-size:13px;line-height:1.7;letter-spacing:.02em;color:var(--gris);opacity:1}
.vagon .n{font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--gris)}
.incluye-extras{padding:5vh 6vw 0;font-size:12px;letter-spacing:.18em;font-weight:600;text-transform:uppercase;color:var(--gris)}

/* =====================================================================
   09 · ARQUITECTURA — titular gigante solapado a la foto
   ===================================================================== */
/* Como la referencia: foto a pantalla completa con la cita del equipo de
   arquitectura encima. El titular gigante "ARQUITECTURA" era cosa nuestra
   y no existe en la web de referencia. */
#arquitectura{height:200vh;position:relative;z-index:6;background:var(--tinta)}
.arq-lienzo{position:sticky;top:0;height:100vh;overflow:hidden}
.arq-lienzo>img{width:100%;height:112%;object-fit:cover;will-change:transform}
.arq-velo{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(13,23,44,0) 34%, rgba(13,23,44,.55) 68%, rgba(13,23,44,.62) 100%);
}
.arq-cita{
  position:absolute;top:50%;right:7vw;transform:translateY(-50%);
  max-width:520px;color:var(--blanco);margin:0;
}
.arq-cita .comillas{display:block;font-size:110px;line-height:.4;margin-bottom:14px;opacity:.9}
.arq-cita p{
  font-family:var(--didone);font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,2.1vw,32px);line-height:1.28;
  text-shadow:0 1px 4px rgba(13,23,44,.8);
}
/* la firma es letra pequeña (umbral 4,5): a pelo sobre la foto daba 3,38 */
.arq-cita cite{
  display:block;font-style:normal;margin-top:4vh;color:var(--blanco);
  text-shadow:0 1px 3px rgba(13,23,44,.9),0 0 14px rgba(13,23,44,.7);
}

/* =====================================================================
   10 · VISTAS AL CANTÁBRICO — imagen que crece (scrub)
   ===================================================================== */
#vistas{height:280vh;background:var(--crema);position:relative;z-index:6}
.vistas-lienzo{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.vistas-marco{
  position:absolute;inset:0;
  clip-path:inset(22% 24% 22% 24%);
  will-change:clip-path;
}
.vistas-marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.18);will-change:transform}
.vistas-texto{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--blanco);opacity:0;pointer-events:none;
}
.vistas-texto h2{
  font-size:clamp(44px,9vw,150px);
  /* la sombra difusa sola no aguantaba sobre la piedra clara: se le añade una
     sombra corta y densa que dibuja el borde de la letra */
  text-shadow:0 1px 3px rgba(13,23,44,.9),0 2px 34px rgba(13,23,44,.7);
}
.vistas-texto .etiqueta{margin-top:3vh;background:rgba(13,23,44,.66);border-radius:999px;padding:10px 22px}
/* Velo bajo el rótulo: sobre foto clara el blanco no se garantiza solo. */
.vistas-velo{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 66% 50% at 50% 52%, rgba(13,23,44,.68), rgba(13,23,44,0) 76%);
}

/* =====================================================================
   11 · PIE (botella)
   ===================================================================== */
footer{background:var(--botella);color:var(--crema);text-align:center;padding:16vh 6vw 6vh;position:relative;z-index:6}
footer .foto-pie{max-width:760px;margin:0 auto 10vh;aspect-ratio:16/7;overflow:hidden;border-radius:2px}
footer .foto-pie img{width:100%;height:100%;object-fit:cover}
footer .flor-sello{color:var(--crema);margin-bottom:5vh}
footer .etiqueta{display:block;margin-bottom:4vh;color:var(--crema)}
.tel-gigante{
  font-family:var(--didone);font-weight:400;
  font-size:clamp(40px,8.5vw,132px);line-height:1;color:var(--crema);
  display:inline-block;
}
.pie-datos{margin-top:6vh;font-size:12px;letter-spacing:.2em;font-weight:600;text-transform:uppercase;line-height:2.2;color:var(--crema)}
.pie-legal{
  margin-top:11vh;padding-top:4vh;border-top:1px solid rgba(242,241,233,.28);
  font-size:11px;letter-spacing:.06em;line-height:2;color:var(--crema);
  font-weight:500;max-width:860px;margin-left:auto;margin-right:auto;
}
.pie-legal strong{font-weight:600}

/* =====================================================================
   móvil
   ===================================================================== */
@media (max-width:900px){
  header{padding:18px 18px}
  .logo-giro{width:72px;height:72px}
  .nav-cta{font-size:16px}
  #rail{left:14px}
  #rail .linea{height:70px}
  .hero-arco{clip-path:inset(20% 14% 0% 14% round 42vw 42vw 0 0)}
  .hero-panoramica{height:175vh}
  .punto{width:26px;height:26px}
  .punto i{width:7px;height:7px}
  .hero-flanco.a{left:auto;right:auto;top:9vh;left:50%;transform:translateX(-50%)}
  .hero-flanco.b{display:none}
  .rama.a{top:-5vh;left:-16vw;width:56vw}
  .rama.b{top:-6vh;right:-18vw;width:48vw}
  .rama.c{top:-4vh;right:-15vw;width:44vw}
  /* el texto arranca por debajo de las ramas: colgaban sobre la etiqueta */
  #concepto{padding-top:34vh}
  /* en 390 px las sangrías sacaban la tipografía fuera de pantalla */
  .pan-tipografia{left:7vw;right:6vw}
  .pan-tipografia .l1,.pan-tipografia .l3{font-size:clamp(34px,11.5vw,62px)}
  .pan-tipografia .l2{font-size:clamp(28px,9vw,50px);margin-left:.5em}
  .pan-tipografia .l3{margin-left:.9em}
  /* el raíl es fijo y se cruzaba con la lista de paradas */
  .p3{padding-left:16vw;padding-right:6vw;align-items:flex-start}
  .p1 .tira.t1{right:-6vw;top:auto;bottom:6vh;width:38vw;height:44vh}
  .pan-flor{width:46vw;left:auto;right:0;top:0}
  .p2 .tira.t2{width:100vw;left:0;top:0;height:42vh}
  .p2 .btn-circulo{left:50%;transform:translate(-50%,0);top:46vh}
  .pan-texto{right:6vw;left:6vw;top:auto;bottom:6vh;transform:none;max-width:none}
  .camino svg{transform:scale(1.06)}
  .parada .sitio{font-size:11px}
  .pista.p1 img{width:120vw}
  .pista.p2 img{width:105vw}
  .pista.p3 img{width:90vw}
  #comunidad{height:220vh}
  .com-foto{height:62vh}
  .com-texto{top:12vh;gap:4vh}
  .arq-cita{right:6vw;left:6vw;max-width:none}
  .arq-velo{background:linear-gradient(rgba(13,23,44,.18), rgba(13,23,44,.6) 55%)}
  .ventanas{flex-direction:column;align-items:center;gap:7vh}
  .ventana{max-width:min(72vw,300px)}
  .ventana.v2,.ventana.v3{margin-top:0}
  .vagon{width:74vw}
  .vistas-marco{clip-path:inset(26% 12% 26% 12%)}
  .costa-marco{clip-path:inset(26% 32% 26% 32%)}
}
@media (max-width:520px){
  .conmutador .raya{width:34px}
  .conmutador.es-noche .raya i{left:28px}
  .intro-lado{display:none}
  /* Colgadas del camino no caben en 390 px: se pisan entre ellas. En móvil
     el camino queda como dibujo y las paradas pasan a lista de dos columnas. */
  /* sin ampliar el dibujo: agrandado, el trazo se cruzaba con la lista */
  .camino svg{transform:none}
  .paradas{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;
    gap:14px 10px;margin-top:30px}
  .parada{position:static;left:auto;bottom:auto;transform:none;padding:0;
    align-items:flex-start;text-align:left}
  .parada .sitio{font-size:13px}
  .parada .cuanto{font-size:9px}
}

/* accesibilidad: sin movimiento */
@media (prefers-reduced-motion:reduce){
  .logo-giro .anillo{animation:none}
}