/* Apartaments Cadí · Fórnols — "desconectar en el Cadí"
   Paleta sacada de las propias fotos: niebla de la mañana, azul del Cadí, ocre de la hierba seca. */
:root{
  --canvas:#eef0ec;        /* niebla */
  --panel:#f8f8f4;
  --ink:#1c2830;
  --ink-2:#4d5b63;
  --line:#d3d9d4;
  --line-strong:#7d8a91;   /* bordes de campos: 3:1 sobre el canvas */
  --cadi:#23394a;          /* azul del Cadí al atardecer */
  --cadi-2:#2f4d63;
  --on-cadi:#eef2f3;
  --on-cadi-2:#b9c6cf;
  --accent:#94600f;        /* ocre de la hierba seca: solo el botón y poco más */
  --accent-hover:#7c5010;
  --accent-muted:#e2c27f;
  --display:'Young Serif',Georgia,serif;
  --body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(6,12,18,.9),0 3px 12px rgba(6,12,18,.7),0 10px 44px rgba(6,12,18,.75);
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--ink);
  font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;opacity:0;animation:page-in .9s var(--e-out) .05s forwards}
@keyframes page-in{to{opacity:1}}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.01em;margin:0}
p{margin:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px;transition:top .2s var(--e-out)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.kicker{font:500 .74rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#fff;
  font:600 1rem/1 var(--body);text-decoration:none;padding:16px 26px;border-radius:999px;border:0;cursor:pointer;
  transition:background .25s var(--e-out),transform .25s var(--e-out)}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn svg{width:18px;height:18px;transition:transform .3s var(--e-out)}
.btn:hover svg{transform:translateX(3px)}
.link{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .2s}
.link:hover{opacity:.75}
@media (pointer:coarse){.btn,.link,.nav a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* El fondo: una sola capa fija, niebla que se mueve muy despacio y grano. Todo el sitio vive delante. */
.entorno-fijo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.entorno-fijo::before{content:"";position:absolute;inset:-30%;
  background:radial-gradient(40% 35% at 30% 40%,rgba(185,198,207,.45),transparent 70%),
             radial-gradient(35% 30% at 72% 65%,rgba(226,194,127,.18),transparent 70%);
  animation:niebla 80s var(--e-inout) -20s infinite alternate}
.entorno-fijo::after{content:"";position:absolute;inset:0;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes niebla{to{transform:translate3d(6%,-4%,0) scale(1.08)}}

/* Navegación */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);color:#fff;transition:background .4s var(--e-out),color .4s var(--e-out),box-shadow .4s}
.nav.solida{background:rgba(238,240,236,.92);color:var(--ink);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.marca{font:400 1.3rem/1 var(--display);text-decoration:none;display:flex;align-items:center;gap:10px}
.marca svg{width:30px;height:30px}
.marca small{display:block;font:500 .62rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.8;margin-top:4px}
.nav ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-weight:500;font-size:.95rem;opacity:.9}
.nav ul a:hover{opacity:1}
.nav .btn{padding:12px 20px;font-size:.92rem}
.nav:not(.solida) ul a:not(.btn){text-shadow:0 1px 8px rgba(0,0,0,.45)}
@media (max-width:900px){.nav ul{display:none}}

/* ─────────── Portada: la película que avanza con el scroll ─────────── */
.hero{position:relative;height:1000vh;background:#1b2731}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:center/cover no-repeat}
.stage video{opacity:0;transition:opacity .8s var(--e-out);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(8,14,20,0) 40%,rgba(8,14,20,.5) 100%),
             linear-gradient(180deg,rgba(8,14,20,.35) 0%,rgba(8,14,20,0) 18%)}
.ring{position:absolute;right:var(--pad);bottom:34px;width:44px;height:44px;color:#fff;opacity:.85;transition:opacity .6s}
.ring circle.fondo{opacity:.25}
.stage.video-ready .ring{opacity:0}
.cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);color:#fff;font:500 .7rem/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-shadow:var(--tshadow);transition:opacity .5s}
.cue i{width:1px;height:38px;background:linear-gradient(#fff,transparent);animation:cue 2.4s var(--e-inout) -0.6s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.stage.lejos .cue{opacity:0}

.band{position:absolute;z-index:1;color:#fff;text-shadow:var(--tshadow);opacity:0;pointer-events:none;max-width:min(560px,86vw)}
.band.activa{pointer-events:auto}
.band::before{content:"";position:absolute;inset:-75% -48%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(closest-side,rgba(6,12,18,var(--a,.66)) 0%,rgba(6,12,18,calc(var(--a,.66)*.92)) 60%,rgba(6,12,18,calc(var(--a,.66)*.5)) 80%,rgba(6,12,18,0) 100%)}
.band .kicker{color:#e9eef0;margin-bottom:16px}
.band h1,.band h2{font-size:clamp(2.2rem,1.2rem + 2.8vw,3.6rem)}
.band p.sub{font-size:clamp(1.02rem,.95rem + .35vw,1.25rem);margin-top:18px;max-width:40ch;color:#f1f4f2}
.band .btn{text-shadow:none}
.band .fila{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.band .fila .link{color:#fff}
.b1{left:var(--pad);top:clamp(96px,16vh,170px);--a:.66;max-width:min(700px,86vw)}
.b2{right:var(--pad);bottom:15vh;text-align:right;--a:.56}
.b2 p.sub{margin-left:auto}
.b3{right:var(--pad);top:clamp(96px,15vh,160px);text-align:right;--a:.63}
.b3 p.sub{margin-left:auto}
/* b4 a la derecha: el pueblo cae en el tercio izquierdo del plano final y no se tapa */
.b4{right:var(--pad);bottom:11vh;text-align:right;--a:.74;max-width:min(520px,86vw)}
.b4 p.sub{margin-left:auto}
.b4 .fila{justify-content:flex-end}

/* Palabras: cada una con su umbral --th; --k lo escribe el scroll */
.w{display:inline-block;white-space:pre}
.c-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3.2,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*.55em))}
.c-blur{display:grid}
.c-blur>*{grid-area:1/1}
.c-blur .blando{filter:blur(10px);opacity:calc(1 - var(--k,0))}
.c-blur .nitido{opacity:var(--k,0)}
.c-depth{transform-origin:right center;opacity:clamp(0,var(--k,0)*1.6,1);transform:scale(calc(.84 + .16*var(--k,0)))}
.lento{opacity:clamp(0,(var(--k,0) - .62)*3.5,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .62)*3.5,1))*10px))}
.ultimo{opacity:clamp(0,(var(--k,0) - .78)*5,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .78)*5,1))*10px))}

/* Portada fija: móviles, tabletas en vertical y movimiento reducido */
.hero-fija{display:none}
@media (max-width: 720px),(orientation: portrait) and (max-width: 1024px),(orientation: portrait) and (pointer: coarse),(orientation: landscape) and (pointer: coarse) and (max-height: 560px),(prefers-reduced-motion: reduce){
  .hero{display:none}
  .hero-fija{display:flex;position:relative;min-height:100vh;min-height:100svh;align-items:flex-end;color:#fff;
    background:#1b2731 url(img/hero-fija.jpg) 46% center/cover no-repeat;padding:0 var(--pad) 12vh}
  .hero-fija::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,20,.45) 0%,rgba(8,14,20,0) 28%,rgba(8,14,20,.15) 45%,rgba(8,14,20,.78) 100%)}
  .hero-fija>div{position:relative;text-shadow:var(--tshadow);max-width:34rem}
  .hero-fija .kicker{color:#e9eef0;margin-bottom:14px}
  .hero-fija h1{font-size:clamp(2.1rem,1.5rem + 3vw,3.2rem)}
  .hero-fija p{margin:16px 0 26px;font-size:1.08rem;max-width:34ch}
  .hero-fija .btn{text-shadow:none}
}
@media (max-height:560px){.cue,.ring{display:none}}

/* ─────────── Secciones ─────────── */
section{position:relative;padding:clamp(80px,12vw,150px) var(--pad)}
.ancho{max-width:1240px;margin:0 auto}
.titulo h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.3rem);max-width:18ch}
.titulo .kicker{margin-bottom:18px}
.lede{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--ink-2);max-width:52ch}

/* Entradas: el observador añade .in; los hijos llegan escalonados */
.ent .e{opacity:0;transform:translateY(22px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
.ent.in .e{opacity:1;transform:none}
.ent.in .e:nth-child(2){transition-delay:.08s}.ent.in .e:nth-child(3){transition-delay:.16s}
.ent.in .e:nth-child(4){transition-delay:.24s}.ent.in .e:nth-child(5){transition-delay:.32s}
.ent.hecha .e,.ent.hecha .e:nth-child(n){transition-delay:0s!important}

/* La casa: texto a un lado, collage al otro */
.casa .ancho{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:center}
.casa p+p{margin-top:16px}
.casa .lede{margin-top:24px}
.datos{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:30px 0 0}
.datos li{font:500 .76rem/1 var(--mono);letter-spacing:.06em;padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.collage{position:relative;aspect-ratio:1/1}
.collage img{position:absolute;object-fit:cover;border-radius:6px;box-shadow:0 30px 60px -30px rgba(28,40,48,.45)}
.collage .uno{inset:0 14% 18% 0;width:86%;height:82%}
.collage .dos{right:0;bottom:0;width:48%;height:44%;border:6px solid var(--canvas)}
.collage .sello{position:absolute;left:-14px;bottom:8%;font:500 .7rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:var(--cadi);color:var(--on-cadi);padding:12px 14px;border-radius:4px;transform:rotate(-3deg)}
@media (max-width:860px){.casa .ancho{grid-template-columns:1fr}.collage{aspect-ratio:4/3.4}}

/* Apartamentos: tres fichas iguales */
.apts{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.apts .titulo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:56px}
.apts .titulo .lede{max-width:40ch}
.fichas{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:980px){.fichas{grid-template-columns:1fr;max-width:620px}}
.ficha{display:flex;flex-direction:column;background:var(--canvas);border-radius:8px;overflow:hidden;border:1px solid var(--line);
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.ficha:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(28,40,48,.5)}
.fotos{position:relative;aspect-ratio:3/2;overflow:hidden;background:#cfd5d0}
.fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--e-out)}
.fotos img.vista{opacity:1}
.puntos{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px}
.puntos button{width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.puntos button::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;opacity:.55;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:opacity .3s,transform .3s}
.puntos button[aria-current="true"]::after{opacity:1;transform:scale(1.25)}
.ficha .cuerpo{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.ficha .spec{font:500 .74rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ficha h3{font-size:1.65rem;margin:8px 0 12px}
.ficha p{color:var(--ink-2);font-size:.98rem}
.ficha .nombres{margin-top:16px;font-size:.88rem;color:var(--ink)}
.ficha .nombres b{font-weight:600}
.ficha .link{margin-top:auto;align-self:flex-start;padding-top:22px;border:0;color:var(--accent);background:none;font:600 .95rem/1 var(--body);cursor:pointer}
.ficha .link span{border-bottom:1px solid currentColor;padding-bottom:2px}

/* El momento: mantener pulsado para desconectar */
.calma{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;--h:0;background:#1b2731}
.calma .foto{position:absolute;inset:0;background:url(img/desconecta.jpg) center/cover no-repeat;transform:scale(calc(1.06 - .06*var(--h)));transition:transform .2s linear}
.calma .velo{position:absolute;inset:0;background:#3a434a;opacity:calc(.72 - .52*var(--h))}
.calma .velo2{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(8,14,20,.5),rgba(8,14,20,.15) 70%,rgba(8,14,20,.4))}
.ruido{position:absolute;inset:0;list-style:none;margin:0;padding:0;pointer-events:none}
.ruido li{position:absolute;font:500 clamp(.8rem,.7rem + .4vw,1.05rem)/1 var(--mono);letter-spacing:.06em;color:#fff;
  padding:9px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(20,26,31,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  --o:clamp(0,1 - (var(--h) - var(--th))*5,1);opacity:var(--o);
  transform:translate3d(calc((1 - var(--o))*var(--dx)),calc((1 - var(--o))*-30px),0);animation:flota 7s var(--e-inout) infinite alternate}
.calma.vivo .ruido li{animation-play-state:running}
.calma:not(.vivo) .ruido li{animation-play-state:paused}
@keyframes flota{to{translate:0 -10px}}
.calma .texto{position:relative;max-width:560px;padding:0 20px;text-shadow:var(--tshadow)}
.calma h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.3rem)}
.calma .texto>p{margin:18px auto 34px;max-width:40ch;font-size:1.1rem;color:#eef2f3}
.mantener{position:relative;font:600 1rem/1 var(--body);color:#fff;background:rgba(20,26,31,.35);border:1.5px solid rgba(255,255,255,.7);
  border-radius:999px;padding:18px 30px 18px 58px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;text-shadow:none;
  transition:background .3s,border-color .3s,opacity .5s}
.mantener:hover{background:rgba(20,26,31,.55)}
.mantener svg{position:absolute;left:16px;top:50%;width:28px;height:28px;margin-top:-14px;transform:rotate(-90deg)}
.mantener circle{fill:none;stroke-width:3}
.mantener .pista{stroke:rgba(255,255,255,.3)}
.mantener .lleno{stroke:var(--accent-muted);stroke-dasharray:76;stroke-dashoffset:calc(76 - 76*var(--h))}
.calma .fin{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:0 20px;opacity:0;pointer-events:none}
.calma .fin h2{opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--e-out),transform 1.2s var(--e-out)}
.calma .fin p{opacity:0;margin-top:16px;font-size:1.1rem;transition:opacity 1.2s var(--e-out) .5s}
.calma.hecho .texto{opacity:0;transition:opacity .6s var(--e-out)}
.calma.hecho .fin{opacity:1;pointer-events:auto}
.calma.hecho .fin h2{opacity:1;transform:none}
.calma.hecho .fin p{opacity:1}

/* Opiniones: el azul del Cadí */
.opiniones{background:var(--cadi);color:var(--on-cadi)}
.opiniones .ancho{display:grid;grid-template-columns:.85fr 1.4fr;gap:clamp(40px,6vw,90px)}
@media (max-width:900px){.opiniones .ancho{grid-template-columns:1fr}}
.opiniones .kicker{color:var(--on-cadi-2)}
.nota{display:flex;align-items:flex-end;gap:18px;margin:22px 0 10px}
.nota b{font:400 clamp(4.5rem,3rem + 6vw,7.5rem)/.85 var(--display);color:#fff}
.nota span{font:500 .78rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-cadi-2);padding-bottom:6px}
.nota span strong{display:block;color:var(--accent-muted);font-size:1rem;letter-spacing:.06em}
.barras{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:14px}
.barras li{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:.92rem;align-items:baseline}
.barras li b{font:500 .85rem/1 var(--mono);color:#fff}
.barras li i{grid-column:1/-1;height:3px;background:rgba(255,255,255,.14);border-radius:3px;overflow:hidden;position:relative}
.barras li i::after{content:"";position:absolute;inset:0;background:var(--accent-muted);transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--e-out)}
.barras.in li i::after{transform:scaleX(var(--v))}
.barras.in li:nth-child(2) i::after{transition-delay:.1s}.barras.in li:nth-child(3) i::after{transition-delay:.2s}
.barras.in li:nth-child(4) i::after{transition-delay:.3s}.barras.in li:nth-child(5) i::after{transition-delay:.4s}.barras.in li:nth-child(6) i::after{transition-delay:.5s}
.fuente{margin-top:26px;font-size:.82rem;color:var(--on-cadi-2)}
.fuente a{color:var(--on-cadi)}
.citas{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:start}
@media (max-width:640px){.citas{grid-template-columns:1fr}}
.cita{margin:0;padding:24px 24px 22px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.04)}
.cita.grande{grid-column:1/-1}
.cita blockquote{margin:0;font:400 1.12rem/1.5 var(--display);color:#fff}
.cita.grande blockquote{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.cita figcaption{margin-top:14px;font:500 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-cadi-2)}

/* El entorno: la silueta real del Cadí, dibujándose */
.entorno .titulo{text-align:center;display:flex;flex-direction:column;align-items:center}
.entorno .titulo h2{max-width:20ch}
.entorno .titulo .lede{margin-top:20px}
.silueta{margin:56px auto 0;max-width:1240px;position:relative}
.silueta svg{width:100%;height:auto;overflow:visible}
.silueta .cresta{fill:none;stroke:var(--cadi);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--d,0))}
.silueta .relleno{fill:url(#degr);clip-path:inset(0 calc((1 - var(--d,0))*100%) 0 0)}
.silueta .punto{fill:var(--accent);opacity:clamp(0,(var(--d,0) - .6)*4,1)}
.silueta .halo{fill:var(--accent);opacity:clamp(0,(var(--d,0) - .6)*4,.25);transform-box:fill-box;transform-origin:center;animation:halo 4s var(--e-inout) -1s infinite}
.entorno.vivo .halo{animation-play-state:running}
.entorno:not(.vivo) .halo{animation-play-state:paused}
@keyframes halo{0%,100%{transform:scale(1)}50%{transform:scale(2.2)}}
.silueta text{font:500 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;fill:var(--ink-2);opacity:clamp(0,(var(--d,0) - .5)*3,1)}
.silueta text.fornols{fill:var(--accent)}
.cosas{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(40px,6vw,90px);margin-top:70px}
@media (max-width:860px){.cosas{grid-template-columns:1fr}}
.actividades{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 34px}
@media (max-width:560px){.actividades{grid-template-columns:1fr}}
.actividades li{border-top:1px solid var(--line);padding-top:16px}
.actividades .kicker{color:var(--accent)}
.actividades h3{font-size:1.3rem;margin:8px 0 6px}
.actividades p{color:var(--ink-2);font-size:.95rem}
.distancias h3{font-size:1.3rem;margin-bottom:12px}
.distancias ul{list-style:none;padding:0;margin:0}
.distancias li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.distancias li span:last-child{font:500 .85rem/1 var(--mono);color:var(--ink-2);white-space:nowrap}

/* Preguntas */
.preguntas .ancho{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(40px,6vw,90px)}
@media (max-width:860px){.preguntas .ancho{grid-template-columns:1fr}}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;
  font:400 1.22rem/1.3 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:14px;height:14px;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--ink);transition:transform .35s var(--e-out)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .resp{color:var(--ink-2);padding:0 0 22px;max-width:60ch}

/* Pie */
footer{background:#16232d;color:#a9b6bf;font-size:.88rem;padding:56px var(--pad) 40px}
footer .ancho{display:grid;grid-template-columns:2fr 1fr;gap:34px}
@media (max-width:760px){footer .ancho{grid-template-columns:1fr}}
footer .marca{color:#fff;margin-bottom:14px}
footer h4{font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#d4dde3;margin:0 0 14px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline;color:#fff}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:.8rem}

/* Páginas legales: el mismo mundo, en lectura tranquila */
.doc main{padding:clamp(120px,14vw,170px) var(--pad) clamp(80px,10vw,120px)}
.texto-legal{max-width:780px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:clamp(28px,5vw,64px)}
.texto-legal h1{font-size:clamp(2rem,1.4rem + 2.2vw,3rem);max-width:20ch}
.texto-legal .fecha{font:500 .74rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:18px 0 10px}
.texto-legal h2{font-size:1.45rem;margin:2.1em 0 .6em}
.texto-legal p,.texto-legal li{color:var(--ink-2)}
.texto-legal p+p{margin-top:1em}
.texto-legal strong{color:var(--ink);font-weight:600}
.texto-legal ul{padding-left:1.2em;margin:.8em 0 0;display:grid;gap:.5em}
.texto-legal a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}
.texto-legal table{border-collapse:collapse;width:100%;margin-top:18px}
.texto-legal td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
.texto-legal td:first-child{font:500 .72rem/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);width:36%;padding-right:16px}
@media (max-width:560px){
  .texto-legal tr{display:block;border-bottom:1px solid var(--line);padding:12px 0}
  .texto-legal td{display:block;width:auto!important;border:0;padding:0}
}

/* Pausar todo lo que se mueve cuando la pestaña no se ve */
body.pausa *,body.pausa *::before,body.pausa *::after{animation-play-state:paused!important}

/* Movimiento reducido: todo en su estado final */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important;scroll-behavior:auto!important}
  body{opacity:1}
  .ent .e{opacity:1;transform:none}
  .barras li i::after{transform:scaleX(var(--v))}
  .silueta{--d:1!important}
  .calma .texto{display:none}
  .calma{--h:1!important}
  .calma .fin,.calma .fin h2,.calma .fin p{opacity:1;transform:none}
}

/* Móvil: las etiquetas de ruido, repartidas para que no se pisen */
@media (max-width:720px){
  .ruido li:nth-child(1){left:6%!important;top:9%!important;right:auto!important;bottom:auto!important}
  .ruido li:nth-child(2){right:6%!important;top:17%!important;left:auto!important;bottom:auto!important}
  .ruido li:nth-child(3){left:6%!important;bottom:20%!important;top:auto!important;right:auto!important}
  .ruido li:nth-child(4){right:6%!important;bottom:28%!important;top:auto!important;left:auto!important}
  .ruido li:nth-child(5){left:12%!important;top:25%!important;right:auto!important;bottom:auto!important}
  .ruido li:nth-child(6){right:12%!important;bottom:11%!important;top:auto!important;left:auto!important}
}