/* ============================================================
   COTA · Café de altura
   Lienzo: niebla fría gris verdosa. Acento: cereza carmesí fría.
   Tokens borrador: se remuestrean del fotograma final aprobado.
   ============================================================ */

/* ----- Tipografías autoalojadas ----- */
@font-face{font-family:'Bricolage Grotesque';src:url('assets/fonts/bricolage-grotesque-v9-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('assets/fonts/bricolage-grotesque-v9-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('assets/fonts/bricolage-grotesque-v9-latin-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('assets/fonts/newsreader-v26-latin-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('assets/fonts/newsreader-v26-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('assets/fonts/newsreader-v26-latin-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Martian Mono';src:url('assets/fonts/martian-mono-v6-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Martian Mono';src:url('assets/fonts/martian-mono-v6-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ----- Tokens ----- */
/* Tokens remuestreados del metraje aprobado: niebla #748088, dosel #131817,
   cereza del plano medio, con la guarda anti crema aplicada al lienzo. */
:root{
  --canvas:       #E3E7E5;
  --canvas-deep:  #D0D7D5;
  --canvas-warm:  #E8EAE6;
  --panel:        #F1F3F1;
  --ink:          #131817;
  --ink-soft:     #2C3534;
  --ink-mute:     #5D6660;
  --accent:       #A31E33;
  --accent-hover: #7E1527;
  --accent-mute:  rgba(163,30,51,.16);
  --altitude:     #3E574A;
  --line:         rgba(19,24,23,.14);
  --luz:          #F0F2F1;             /* texto sobre el vídeo */
  --tshadow:0 1px 2px rgba(8,12,12,.9),0 3px 12px rgba(8,12,12,.66),0 10px 44px rgba(8,12,12,.6);
  --ease:cubic-bezier(.33,.02,.2,1);
  --ease-soft:cubic-bezier(.25,.1,.25,1);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Newsreader',Georgia,serif;
  --mono:'Martian Mono',ui-monospace,monospace;
}

/* ----- Base ----- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  background:var(--canvas-now,var(--canvas));
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.04;letter-spacing:-.015em}
h2{font-size:clamp(2rem,4.4vw,3.4rem);max-width:18ch}
h3{font-size:1.25rem;font-weight:700}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
em{font-style:italic}

.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.wrap-narrow{max-width:760px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}

.kicker{font-family:var(--mono);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
/* Sobre tinta el cereza no llega a 3:1: el anillo va en claro, como en la carta y el panel */
.pie :focus-visible,.tostar-panel :focus-visible{outline-color:var(--panel)}

.skip{position:fixed;top:-60px;left:16px;z-index:200;background:var(--ink);color:var(--panel);padding:10px 18px;border-radius:6px;font-family:var(--display);font-weight:700;text-decoration:none;transition:top .25s var(--ease)}
.skip:focus-visible{top:12px}

::selection{background:var(--accent-mute);color:var(--ink)}

/* ----- Botones ----- */
.btn{
  display:inline-block;background:var(--accent);color:var(--panel);
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.01em;
  padding:14px 30px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 30px rgba(179,23,57,.28)}
.btn:active{transform:translateY(0)}
.btn-nav{padding:10px 22px;font-size:.9rem}
.btn-hero{text-shadow:none}

@media (pointer:coarse){
  .btn,.btn-cookie,.enlace-cookies,.nav-links a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ----- Curvas de nivel: la capa fija de fondo ----- */
.contours{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.contours svg{width:110%;height:110%;position:absolute;top:-5%;left:-5%}
.ct{
  stroke:var(--altitude);stroke-width:1.1;opacity:.16;
  stroke-dasharray:2400;stroke-dashoffset:2400;
  transition:stroke-dashoffset 2.6s var(--ease-soft);
}
body.lineas-listas .ct{stroke-dashoffset:0}
.contour-set{animation:derivaContornos 110s linear infinite alternate}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
@keyframes derivaContornos{
  from{transform:translate3d(-1.4%,-.8%,0)}
  to{transform:translate3d(1.4%,.8%,0)}
}
/* Las curvas se van juntando al descender: JS escribe --apriete 0..1 */
.contours svg{transform:scaleY(calc(1 - .18*var(--apriete,0)));transform-origin:50% 100%}

/* ----- El altímetro ----- */
.altimeter{
  position:fixed;right:clamp(14px,2.4vw,34px);bottom:clamp(16px,3vh,34px);z-index:90;
  display:flex;align-items:baseline;gap:6px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
.alt-tick{width:26px;height:1px;background:var(--accent);align-self:center}
.alt-value{font-size:1.05rem;font-weight:600;min-width:5ch;text-align:right}
.alt-unit{font-size:.72rem}
.hero-activo .altimeter{color:var(--luz)}
.hero-activo .altimeter .alt-tick{background:var(--accent)}

/* ----- Cabecera ----- */
.top{position:fixed;top:0;left:0;right:0;z-index:100}
.nav{
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:14px clamp(20px,4vw,48px);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark{width:34px;height:34px;color:currentColor}
.brand-word{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:.14em}
.nav-links{display:flex;gap:clamp(12px,2vw,28px);margin-left:auto}
.nav-links a{
  font-family:var(--display);font-weight:700;font-size:.9rem;text-decoration:none;
  color:var(--ink-soft);padding:6px 2px;position:relative;transition:color .3s var(--ease);
}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--accent);transition:right .35s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
.hero-activo .top .brand,.hero-activo .nav-links a{color:var(--luz);text-shadow:var(--tshadow)}
.hero-activo .nav-links a:hover{color:#fff}
@media (max-width:720px){.nav-links{display:none}}

/* ============================================================
   EL HERO: EL DESCENSO
   ============================================================ */
.hero{height:1000vh;position:relative}
.hero-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#99A4A3}
.poster{position:absolute;inset:0;background-size:cover;background-position:center}
#heroVideo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease);will-change:transform;transform:translateZ(0);
}
.hero-stage.video-ready #heroVideo{opacity:1}
.hero-stage.video-failed #heroVideo{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,14,14,0) 35%,rgba(10,14,14,.5) 100%)}

.ring{
  position:absolute;left:50%;bottom:9vh;width:34px;height:34px;margin-left:-17px;
  color:var(--luz);opacity:.85;transform:rotate(-90deg);
}
.scroll-cue{position:absolute;left:50%;bottom:8.6vh;width:22px;height:34px;margin-left:-11px;border:1.5px solid rgba(240,242,241,.7);border-radius:12px}
.scroll-cue span{position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--luz);animation:cueBaja 1.8s var(--ease-soft) infinite}
@keyframes cueBaja{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}
.scroll-cue{display:none}
.hero-stage.video-failed .scroll-cue{display:block}

/* Bandas */
.band{
  position:absolute;inset:0;display:grid;pointer-events:none;
  opacity:0;color:var(--luz);text-shadow:var(--tshadow);
}
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at var(--cx,50%) var(--cy,50%),rgba(8,12,12,.62) 0%,rgba(8,12,12,.4) 46%,rgba(8,12,12,0) 76%);
}
.band-line{
  position:relative;font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.12;letter-spacing:-.01em;
  max-width:22ch;
}
.band-line.xl{font-size:clamp(2.6rem,6vw,5.2rem);font-weight:800;letter-spacing:-.02em}
.mono-kicker{display:block;font-family:var(--mono);font-weight:600;font-size:.78rem;letter-spacing:.3em;margin-bottom:14px;color:rgba(240,242,241,.85)}
.band-line.stack span{display:block}
.band-line em{font-style:normal}
.u-cereza{background-image:linear-gradient(to top,var(--accent) 0,var(--accent) .14em,transparent .14em);background-size:calc(100%*var(--k,1)) 100%;background-repeat:no-repeat;padding-bottom:.06em}

/* La banda 5 vive sobre el tramo dorado, el más claro: scrim un punto más hondo */
.band-5::before{background:radial-gradient(ellipse 74% 62% at var(--cx,50%) var(--cy,50%),rgba(8,12,12,.70) 0%,rgba(8,12,12,.48) 46%,rgba(8,12,12,0) 76%)}

/* Posiciones por banda: el carril de acción queda libre */
.band-1{place-items:start center;--cy:36%}
.band-1 .band-line{margin-top:24vh;text-align:center}
.band-2{place-items:center start;--cx:30%}
.band-2 .band-line{margin-left:clamp(20px,7vw,110px)}
.band-3{place-items:end center;--cy:70%}
.band-3 .band-line{text-align:center;margin-bottom:18vh}
.band-4{place-items:center end;--cx:72%}
.band-4 .band-line{margin-right:clamp(20px,7vw,110px);text-align:right}
.band-5{place-items:start center;--cy:32%}
.band-5 .band-line{margin-top:20vh;text-align:center}

/* Entradas por banda, movidas por --k */
.band-1 .band-line{transform:translateY(calc((1 - var(--k,0))*12px))}
.band-2 .band-line{clip-path:inset(calc((1 - var(--k,0))*100%) 0 0 0);transform:translateY(calc((1 - var(--k,0))*18px))}
.band-3 .band-line span:nth-child(1){opacity:calc(clamp(0,var(--k,0)*2.2,1));transform:translateY(calc((1 - clamp(0,var(--k,0)*2.2,1))*16px))}
.band-3 .band-line span:nth-child(2){opacity:calc(clamp(0,(var(--k,0) - .35)*2.2,1));transform:translateY(calc((1 - clamp(0,(var(--k,0) - .35)*2.2,1))*16px))}
.band-5 .band-line{transform:scale(calc(.94 + .06*var(--k,1)))}

/* Desenfoque que se resuelve (banda 4): dos copias apiladas, blur estático */
.band-4 .band-line{position:relative}
.band-4 .nitida{opacity:var(--k,1)}
.band-4 .suave{position:absolute;inset:0;filter:blur(9px);opacity:calc(1 - var(--k,1))}

/* Hero estático: compuesto, no una disculpa */
.hero-static{
  position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:clamp(24px,6vw,72px);color:var(--luz);text-shadow:var(--tshadow);
  background:linear-gradient(to top,rgba(10,14,14,.62) 0%,rgba(10,14,14,.18) 55%,rgba(10,14,14,.3) 100%);
}
.static-title{font-size:clamp(2.6rem,9vw,4.6rem);font-weight:800;margin:14px 0 12px}
.static-lede{max-width:34ch;font-size:1.1rem;margin-bottom:26px}
.hero-static .kicker{color:rgba(240,242,241,.9)}

/* Las cinco puertas del hero estático (idénticas en JS) */
@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{height:100vh}
  #heroVideo,.ring{display:none}
  .band{display:none}
  .hero-static{
    display:flex;
    background-image:linear-gradient(to top,rgba(10,14,14,.62) 0%,rgba(10,14,14,.18) 55%,rgba(10,14,14,.3) 100%),url('assets/hero-poster.webp');
    background-size:cover;background-position:center;
  }
  /* El hero estático ya carga con el mismo titular y CTA: el asiento sobraría dos veces seguidas */
  .settle{display:none}
}
@media (max-height:560px){.altimeter,.scroll-cue{display:none}}

/* ----- El bloque de asiento ----- */
.settle{
  min-height:100vh;display:grid;place-items:center;text-align:center;
  background-image:url('assets/hero-ending.webp');background-size:cover;background-position:center;
  color:var(--luz);position:relative;
}
.settle::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 34%,rgba(8,12,12,.5) 0%,rgba(8,12,12,.24) 50%,rgba(8,12,12,0) 78%)}
.settle-inner{position:relative;padding:20vh 24px 26vh;text-shadow:var(--tshadow)}
.settle-title{font-size:clamp(3rem,7.5vw,6rem);font-weight:800;margin:16px 0 10px}
.settle-lede{font-size:clamp(1.1rem,1.8vw,1.35rem);margin-bottom:30px}
.settle .kicker{color:rgba(240,242,241,.9)}

/* ============================================================
   LA PÁGINA DE ABAJO
   ============================================================ */
main{position:relative}
section{position:relative}

.sec-head{margin-bottom:clamp(28px,5vh,54px)}
.sec-lede{color:var(--ink-soft);font-size:1.1rem;max-width:52ch;margin-top:10px}

/* Revelados */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ----- 1 · Manifiesto: columna estrecha + fila de datos ----- */
.s-manifiesto{padding:clamp(80px,14vh,150px) 0 clamp(60px,10vh,110px)}
.manifiesto-verso{margin-top:18px}
.manifiesto-verso p{
  font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2.3rem);
  line-height:1.25;letter-spacing:-.01em;
}
.manifiesto-verso p:nth-child(2){color:var(--ink-soft)}
.manifiesto-verso p:nth-child(3){color:var(--accent)}
.manifiesto-datos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);
  margin-top:clamp(40px,7vh,70px);padding-top:clamp(28px,4vh,44px);border-top:1px solid var(--line);
}
.dato-cifra{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:600;color:var(--ink)}
.dato-nombre{font-family:var(--display);font-weight:700;margin:6px 0 8px}
.dato-texto{font-size:.98rem;color:var(--ink-soft);font-weight:300}
.manifiesto-cierre{margin-top:clamp(36px,6vh,60px);font-size:1.15rem;color:var(--ink-soft)}
@media (max-width:820px){.manifiesto-datos{grid-template-columns:1fr}}

/* ----- 2 · Las tres cotas: sección de mapa ----- */
.s-cotas{padding:clamp(70px,12vh,130px) 0;background:linear-gradient(to bottom,transparent,rgba(210,216,214,.5) 18%,rgba(210,216,214,.5) 82%,transparent)}
.cotas-lines{position:absolute;left:0;right:0;top:16%;height:64%;width:100%;pointer-events:none}
.cotas-lines path{fill:none;stroke:var(--altitude);stroke-width:1.2;opacity:.3;stroke-dasharray:1300;stroke-dashoffset:1300;transition:stroke-dashoffset 2.4s var(--ease-soft)}
.s-cotas.lineas .cotas-lines path{stroke-dashoffset:0}
.cotas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,36px);position:relative}
.cota-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(20,24,26,.07);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cota-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(20,24,26,.11)}
/* A distinta altura vertical según su cota */
.cota-card[data-alt="1850"]{margin-top:0}
.cota-card[data-alt="1400"]{margin-top:clamp(30px,6vh,72px)}
.cota-card[data-alt="950"]{margin-top:clamp(60px,12vh,144px)}
.cota-media{aspect-ratio:4/5;overflow:hidden;background:var(--canvas-deep)}
.cota-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cota-card:hover .cota-media img{transform:scale(1.035)}
.cota-body{padding:20px 22px 24px}
.cota-body h3{font-family:var(--mono);font-weight:600;font-size:1.02rem;letter-spacing:.06em;margin-bottom:14px}
.cota-datos div{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);align-items:baseline}
.cota-datos div:last-child{border-bottom:none}
.cota-datos dt{font-family:var(--mono);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);min-width:9ch}
.cota-datos dd{font-size:.98rem}
.cota-precio{margin-top:14px;font-size:.92rem;color:var(--ink-soft)}
.cota-precio .mono{font-weight:600;font-size:1.05rem;color:var(--ink);margin-right:6px}
.cotas-nota{margin-top:clamp(40px,7vh,64px);text-align:center;font-size:1.15rem;color:var(--ink-soft)}
@media (max-width:900px){
  .cotas-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .cota-card[data-alt]{margin-top:0}
  .cotas-lines{display:none}
}

/* ----- 3 · Mantén pulsado para tostar ----- */
.s-tostar{padding:clamp(70px,12vh,130px) 0}
.tostar-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.tostar-media{margin-top:clamp(24px,4vh,40px);border-radius:14px;overflow:hidden;aspect-ratio:3/2;background:var(--canvas-deep)}
.tostar-media img{width:100%;height:100%;object-fit:cover}
.tostar-panel{
  background:var(--ink);color:var(--panel);border-radius:18px;
  padding:clamp(26px,3.4vw,46px);display:flex;flex-direction:column;align-items:center;gap:20px;
  position:sticky;top:90px;
}
.grano-visor{position:relative;width:130px;height:130px;display:grid;place-items:center}
.grano{
  width:74px;height:96px;border-radius:50% 50% 50% 50%/58% 58% 44% 44%;
  background:var(--grano-color,#7A8F5A);position:relative;
  transition:background 0.25s linear;
}
.grano::after{content:"";position:absolute;left:50%;top:12%;bottom:12%;width:5px;margin-left:-2.5px;border-radius:4px;background:rgba(20,24,26,.35)}
.grano-humo{position:absolute;top:-14px;width:8px;height:26px;opacity:0;border-radius:8px;background:linear-gradient(to top,rgba(240,242,241,.0),rgba(240,242,241,.5));transition:opacity .4s}
.tostar-lecturas{display:flex;gap:clamp(14px,2vw,28px);font-size:.82rem;color:rgba(240,242,241,.85)}
.tostar-lecturas span{min-width:6ch;text-align:center}
.tostar-barra{width:100%;height:5px;border-radius:4px;background:rgba(240,242,241,.16);position:relative;overflow:visible}
.tostar-barra span{display:block;height:100%;width:0;border-radius:4px;background:var(--accent);transition:none}
.marca-punto{position:absolute;left:78%;top:-4px;width:2px;height:13px;background:var(--panel);opacity:.8}
.btn-tostar{
  background:var(--accent);color:var(--panel);border:none;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:1.05rem;padding:16px 38px;cursor:pointer;
  transition:background .3s var(--ease),transform .2s var(--ease);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.btn-tostar:hover{background:var(--accent-hover)}
.btn-tostar:active{transform:scale(.97)}
.tostar-estado{min-height:3.2em;text-align:center;font-size:1.02rem;color:var(--panel)}
@media (max-width:900px){.tostar-grid{grid-template-columns:1fr}.tostar-panel{position:static}}

/* ----- 4 · La carta: cabecera lateral + listas ----- */
.s-carta{padding:clamp(70px,12vh,130px) 0;background:var(--panel);border-block:1px solid var(--line)}
.carta-grid{display:grid;grid-template-columns:minmax(220px,.8fr) 1.4fr;gap:clamp(28px,5vw,80px)}
.carta-head{position:sticky;top:110px;align-self:start}
.carta-cat{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin:26px 0 10px}
.carta-cat:first-child{margin-top:0}
.carta-lista{list-style:none}
.carta-lista li{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
.carta-lista i{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.carta-lista .mono{font-weight:600;white-space:nowrap}
.carta-nota{margin-top:20px;font-size:.95rem;color:var(--ink-soft);font-style:italic}
@media (max-width:820px){.carta-grid{grid-template-columns:1fr}.carta-head{position:static}}

/* ----- 5 · El sitio: imagen a sangre + tarjeta ----- */
.s-sitio{padding:0;display:grid;grid-template-columns:1.25fr .9fr;align-items:stretch;min-height:76vh}
.sitio-media{overflow:hidden;background:var(--canvas-deep)}
.sitio-media img{width:100%;height:100%;object-fit:cover}
.sitio-card{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,80px);gap:18px}
.sitio-datos div{display:flex;gap:16px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.sitio-datos dt{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);min-width:13ch}
.sitio-limite{color:var(--ink-soft);font-size:1.05rem}
@media (max-width:900px){.s-sitio{grid-template-columns:1fr}.sitio-media{aspect-ratio:16/10}}

/* ----- 6 · FAQ ----- */
.s-faq{padding:clamp(70px,12vh,130px) 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  display:flex;align-items:baseline;gap:18px;list-style:none;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.3rem);
  padding:20px 44px 20px 0;position:relative;transition:color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-weight:400;font-size:1.2rem;color:var(--accent);
  transition:transform .35s var(--ease);
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:hover{color:var(--accent)}
.faq-n{font-size:.7rem;font-weight:600;color:var(--ink-mute);letter-spacing:.1em}
.faq-item p{padding:0 0 22px 0;max-width:58ch;color:var(--ink-soft)}

/* ----- 7 · Reseñas ----- */
.s-resenas{padding:clamp(70px,12vh,130px) 0;background:linear-gradient(to bottom,transparent,rgba(210,216,214,.4) 30%,rgba(210,216,214,.4) 70%,transparent)}
.resenas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px)}
.resena{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:18px}
.resena p{font-size:1.08rem;line-height:1.55}
.resena footer{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:14px}
.resena footer span:first-child{font-family:var(--display);font-weight:700}
.resena footer .mono{font-size:.72rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.12em}
.resena:nth-child(2){transform:translateY(18px)}
.resena:nth-child(2).in{transform:translateY(18px)}
@media (max-width:900px){.resenas-grid{grid-template-columns:1fr}.resena:nth-child(2),.resena:nth-child(2).in{transform:none}}

/* ----- 8 · La cata del sábado ----- */
.s-cata{padding:clamp(80px,13vh,150px) 0}
.cata-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.cata-lede{font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.5;margin:16px 0 14px;font-weight:300}
.cata-precio{font-size:.82rem;color:var(--ink-soft)}
.cata-form{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:clamp(24px,3vw,42px);display:grid;grid-template-columns:1fr 1fr;gap:16px;
  box-shadow:0 24px 70px rgba(20,24,26,.08);
}
/* Por debajo de 390 px las dos columnas no caben: la segunda se queda a su ancho y la primera encoge */
@media (max-width:389px){.cata-form{grid-template-columns:minmax(0,1fr) auto}}
.campo{display:flex;flex-direction:column;gap:6px;grid-column:1/-1}
.campo-mitad{grid-column:auto}
.campo label{font-family:var(--mono);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}
.campo input,.campo select{
  font-family:var(--body);font-size:1.02rem;color:var(--ink);
  background:var(--canvas);border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.campo input:focus-visible,.campo select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-mute)}
.btn-form{grid-column:1/-1;justify-self:start;margin-top:6px}
.form-exito{grid-column:1/-1;font-size:1.05rem;color:var(--altitude);font-style:italic}
.cata-form.enviado .btn-form{display:none}
@media (max-width:900px){.cata-grid{grid-template-columns:1fr}}

/* ----- 9 · Cómo llegar ----- */
.s-llegar{padding:clamp(70px,12vh,130px) 0 clamp(80px,13vh,140px)}
.llegar-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:center}
.llegar-dir{font-style:normal;font-size:1.2rem;margin:18px 0 22px;font-weight:300}
.llegar-horario div{display:flex;gap:16px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.llegar-horario dt{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);min-width:9ch}
.llegar-enlace{display:inline-block;margin-top:22px;font-family:var(--display);font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;transition:color .3s var(--ease)}
.llegar-enlace:hover{color:var(--accent)}
.llegar-mapa{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.llegar-mapa svg{display:block;width:100%;height:auto}
.mapa-fondo{fill:var(--panel)}
.mapa-calles path{stroke:var(--line);stroke-width:10;fill:none;stroke-linecap:round}
.mapa-rambla path{stroke:var(--canvas-deep);stroke-width:18;fill:none;stroke-linecap:round}
.mapa-punto{fill:var(--accent)}
.mapa-etiqueta{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--ink);letter-spacing:.08em}
.mapa-etiqueta.suave{fill:var(--ink-mute);font-weight:400;font-size:12px}
@media (max-width:820px){.llegar-grid{grid-template-columns:1fr}}

/* ----- Pie ----- */
.pie{background:var(--ink);color:var(--panel);padding:clamp(44px,7vh,80px) 0 30px}
.pie-grid{display:grid;grid-template-columns:1fr auto auto;gap:clamp(24px,4vw,64px);align-items:start}
.pie-marca{display:flex;align-items:center;gap:14px}
.pie-marca .brand-mark{width:40px;height:40px}
.pie-marca .mono{font-size:.8rem;letter-spacing:.1em}
.pie-enlaces{display:flex;flex-direction:column;gap:10px}
.pie-enlaces a,.enlace-cookies{
  color:var(--panel);text-decoration:none;font-family:var(--display);font-weight:700;font-size:.92rem;
  background:none;border:none;cursor:pointer;text-align:left;padding:0;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);width:fit-content;
}
.pie-enlaces a:hover,.enlace-cookies:hover{border-color:var(--accent)}
.pie-redes{display:flex;flex-direction:column;gap:8px;font-size:.78rem;color:rgba(240,242,241,.75)}
.pie-aviso{margin-top:clamp(30px,5vh,50px);padding-top:22px;border-top:1px solid rgba(240,242,241,.14);font-size:.85rem;color:rgba(240,242,241,.6)}
@media (max-width:820px){.pie-grid{grid-template-columns:1fr}}

/* ----- Banner de cookies ----- */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:150;padding:16px;display:grid;justify-items:center}
.cookies[hidden]{display:none}
.cookies-caja{
  max-width:640px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;box-shadow:0 24px 80px rgba(20,24,26,.25);
}
.cookies-caja h2{font-size:1.2rem;margin-bottom:8px}
.cookies-caja>p{font-size:.98rem;color:var(--ink-soft)}
.cookies-config{margin-top:16px;border-top:1px solid var(--line)}
.cookie-linea{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.cookie-linea p{font-size:.86rem;color:var(--ink-soft)}
.cookie-linea strong{font-family:var(--display)}
.cookie-fija{font-size:.7rem;color:var(--ink-mute);white-space:nowrap}
.cookies-botones{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn-cookie{
  flex:1;min-width:120px;font-family:var(--display);font-weight:700;font-size:.95rem;
  padding:12px 18px;border-radius:999px;border:1.5px solid var(--ink);background:none;color:var(--ink);
  cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease);
}
.btn-cookie:hover{background:var(--ink);color:var(--panel)}

/* ----- Páginas legales ----- */
.legal-main{max-width:760px;margin-inline:auto;padding:140px clamp(20px,4vw,48px) 90px}
.legal-main h1{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:8px}
.legal-fecha{font-family:var(--mono);font-size:.72rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.14em;margin-bottom:36px}
.legal-main h2{font-size:1.35rem;margin:38px 0 12px;max-width:none}
.legal-main p,.legal-main li{color:var(--ink-soft);margin-bottom:12px}
.legal-main ul{padding-left:22px}
.legal-main a{color:var(--ink);text-decoration-color:var(--accent)}
.marcador{background:var(--accent-mute);padding:1px 6px;border-radius:4px;font-family:var(--mono);font-size:.85em}
.legal-volver{display:inline-block;margin-top:44px;font-family:var(--display);font-weight:700;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:2px}

/* ============================================================
   MOVIMIENTO REDUCIDO: parar motores, nunca esconder contenido
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .resena:nth-child(2){transform:translateY(18px)}
  .ct{stroke-dashoffset:0}
  .cotas-lines path{stroke-dashoffset:0}
  .contour-set{transform:none}
  .band{opacity:1}
  .u-cereza{background-size:100% 100%}
  .grano{background:#5A3A28}
}