/* =====================================================================
   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:#0B3D2E;
  --crema:#F8F7F2;      /* subido desde #F2F1E9: casi blanco, así el empalme con las nubes no canta */
  --bruma:#BFD9C8;
  --cielo:#8FCFA8;      /* cielo de comunidad.jpg · tinta encima 6,69 · nunca crema (2,07) */
  --blanco:#FFFFFF;
  --botella:#0B3D2E;
  --gris:#4A5A52;        /* secundario sobre crema/blanco */
  --gris-bruma:#40544A;  /* secundario sobre bruma */
  --oro:#C8102E;         /* 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(8,45,34,.72) 0%,rgba(8,45,34,.38) 55%,rgba(8,45,34,0));
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.tema-claro .velo-cabecera{opacity:1}
/* Con fotos REALES de tonos medios detrás, la didone fina de la cabecera no
   se garantiza ni en blanco ni en tinta (glifos antialiased a 166 sobre 130).
   Pastilla propia, como el "Sigue bajando" de BRASA: el contraste ya no
   depende de la foto. */
.nav-cta,.nav-item{padding:5px 10px;border-radius:4px}
.nav-cta{background:rgba(248,247,242,.72)}          /* tinta sobre crema */
.nav-item{background:rgba(248,247,242,.62)}
.tema-claro .nav-cta{background:rgba(8,45,34,.62)}  /* crema sobre tinta */
.tema-claro .nav-item{background:rgba(8,45,34,.52)}

/* 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(8,45,34,.9),0 0 14px rgba(8,45,34,.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(8,45,34,.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(8,45,34,.34) 0%, rgba(8,45,34,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(8,45,34,.92),0 0 18px rgba(8,45,34,.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(8,45,34,.7),0 0 22px rgba(8,45,34,.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(8,45,34,.45),0 2px 10px rgba(8,45,34,.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(8,45,34,.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(8,45,34,.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(8,45,34,.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(8,45,34,.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(8,45,34,.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(8,45,34,.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:150vh;background:var(--cielo);position:relative;z-index:6}
/* la foto de la bombeadora se retira de momento (petición 2 sep): la sección
   queda como interludio de texto sobre el verde claro */
.com-foto{display:none}
.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:38% bottom;display:block} /* 38%: la parte alta (chimenea) entra también en móvil */

/* =====================================================================
   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(8,45,34,.82);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(8,45,34,0) 34%, rgba(8,45,34,.55) 68%, rgba(8,45,34,.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(8,45,34,.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(8,45,34,.9),0 0 14px rgba(8,45,34,.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(8,45,34,.9),0 2px 34px rgba(8,45,34,.7);
}
.vistas-texto .etiqueta{margin-top:3vh;background:rgba(8,45,34,.66);border-radius:999px;padding:10px 22px}

/* =====================================================================
   13 · LO QUE SE HA HECHO: el mapa-póster a sangre y las obras interactivas
   Colores: tinta de fondo (el azul noche del póster), principales en oro,
   secundarias en bruma, la ría en cielo. Hitos en crema sobre tinta (13,3),
   anillo oro (solo relleno). Los hitos son HTML: los coloca el JS con la misma
   transformación "slice" del SVG, así siempre caen sobre su calle.
   ===================================================================== */
#obras{position:relative;background:var(--tinta);color:var(--crema);min-height:110vh;overflow:hidden;z-index:6;
  display:grid;grid-template-columns:minmax(300px,420px) 1fr;grid-template-rows:auto 1fr auto;gap:0 4vw;padding:14vh 6vw 8vh}
/* el póster se ensancha hacia la derecha (140vw): los barrios quedan a la
   derecha de la columna de texto; #obras recorta lo que sobra */
.poster{position:absolute;top:0;bottom:0;left:0;right:-40vw;z-index:0}
.poster .poster-velo,.poster .hitos{position:absolute;inset:0}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.poster-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(11,61,46,.86) 0, rgba(11,61,46,.72) 30%, rgba(11,61,46,.12) 58%, rgba(11,61,46,0) 75%)}
.hitos{position:absolute;inset:0;z-index:2;pointer-events:none}
.hito{position:absolute;left:0;top:0;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  background:none;border:0;padding:0;color:var(--crema);font-family:var(--sans);display:flex;align-items:center;gap:10px}
.hito i{width:30px;height:30px;border-radius:50%;background:var(--tinta);color:var(--crema);font-style:normal;font-weight:700;font-size:12px;
  display:grid;place-items:center;box-shadow:0 0 0 2.5px var(--oro),0 0 0 9px rgba(200,16,46,.18);transition:box-shadow .3s,transform .3s}
.hito .nombre{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  background:rgba(11,61,46,.9);padding:7px 12px;border-radius:999px;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.hito:hover .nombre,.hito:focus-visible .nombre,.hito.activo .nombre{opacity:1;transform:none}
.hito.activo i,.hito:hover i{box-shadow:0 0 0 2.5px var(--oro),0 0 0 14px rgba(200,16,46,.28);transform:scale(1.12)}
.hito.izq{flex-direction:row-reverse}
.hito.izq .nombre{transform:translateX(6px)}
.obras-cab{position:relative;z-index:3;grid-column:1;grid-row:1;max-width:420px}
.obras-cab h2{font-size:clamp(40px,4.6vw,72px);line-height:.98;margin:2vh 0 3vh;color:var(--crema)}
.obras-cab .parrafo,.obras-cab .etiqueta{color:var(--crema)}
.obras-lista{position:relative;z-index:3;grid-column:1;grid-row:2;list-style:none;margin:4vh 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.obras-lista button{width:100%;text-align:left;background:rgba(11,61,46,.55);border:1px solid rgba(248,247,242,.14);border-radius:12px;
  padding:12px 14px;color:var(--crema);font-family:var(--sans);display:grid;grid-template-columns:34px 1fr;gap:2px 12px;cursor:pointer;transition:background .25s,border-color .25s}
.obras-lista li.activo button,.obras-lista button:hover{background:rgba(248,247,242,.12);border-color:rgba(200,16,46,.7)}
.obras-lista .n{grid-row:1/3;font-family:var(--didone);font-size:26px;line-height:1;color:var(--crema)}
.obras-lista strong{font-weight:600;font-size:14px;letter-spacing:.01em}
.obras-lista .t{font-size:12px;line-height:1.55;color:var(--bruma)}
.obras-fuente{position:relative;z-index:3;grid-column:1;grid-row:3;margin:4vh 0 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bruma)}
@media (max-width:900px){
  /* móvil: cabecera ARRIBA sobre tinta lisa, el póster debajo a sangre en el
     flujo (78vh, con los hitos dentro), y la lista después. Ningún texto tapa
     un punto: el texto del mapa lo tapaba todo en 390 px. */
  #obras{display:block;min-height:0;padding:12vh 0 8vh}
  .obras-cab,.obras-lista,.obras-fuente{padding:0 5vw}
  .obras-cab{max-width:none;margin-bottom:4vh}
  .obras-cab h2{font-size:clamp(34px,10vw,44px)}
  .poster{position:relative;height:78vh;inset:auto}
  .poster-velo{background:linear-gradient(var(--tinta) 0,rgba(11,61,46,0) 14%,rgba(11,61,46,0) 86%,var(--tinta) 100%)}
  .hito .nombre{display:none}
  .hito i{width:32px;height:32px;font-size:13px}
  .obras-lista{margin-top:4vh}
}

/* =====================================================================
   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}
  /* "Ibarrekolanda" no cabe a tamaño OLATU: 15px de desborde medidos */
  #loc h2{font-size:clamp(30px,10.4vw,64px);overflow-wrap:anywhere}
  .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:130vh}
  .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(8,45,34,.18), rgba(8,45,34,.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}
}