/* ===========================================================
   CREMA galiano · Ferrol
   Paleta crema + espresso · tipografía editorial
   =========================================================== */

/* ---------- Tipografías auto-alojadas (sin CDN externo) ---------- */
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap;
  src:url('fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Jost'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/jost-latin-300-normal.woff2') format('woff2'); }
@font-face{ font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/jost-latin-500-normal.woff2') format('woff2'); }

:root{
  /* Paleta */
  --crema-bg:      #F1EBE0;
  --crema-light:   #F7F3EB;
  --arena:         #D8CBB8;
  --taupe:         #A79783;
  --moka:          #735E4D;
  --espresso:      #2A211B;
  --espresso-deep: #211914;
  --salvia:        #858B75;
  --terracota:     #B7795C;
  --crema-on-dark: #E7DDCC;

  /* Tipografía */
  --serif: 'Cormorant Garamond', 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Ritmo */
  --wrap: 1240px;
  --gut: clamp(22px, 5vw, 64px);
  --sec-y: clamp(88px, 12vw, 168px);
  --r-card: 18px;
  --r-lg: 28px;

  /* Galería: cinta de fotos */
  --band-w: 300px;      /* ancho de tarjeta */
  --band-gap: 26px;
  --band-time: 62s;     /* lo que tarda en pasar la serie entera */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--crema-bg);
  color:var(--espresso);
  font-family:var(--sans);
  /* 400 y no 300: sobre foto el trazo fino de la Jost light se deshace */
  font-weight:400;
  font-size:17px;
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:var(--sec-y); position:relative; scroll-margin-top:92px; }
section[id]{ scroll-margin-top:92px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--espresso); color:var(--crema-light); padding:12px 20px; border-radius:0 0 12px 0;
}
.skip:focus{ left:0; }

/* ---------- Tipografía editorial ---------- */
.eyebrow{
  display:block; font-family:var(--sans); font-weight:500;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--taupe); margin-bottom:22px;
}
.title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.3rem, 5.4vw, 4.4rem);
  line-height:1.06; letter-spacing:-.015em;
  color:var(--ink, var(--espresso));
  text-wrap:balance;
}
.sub{
  max-width:58ch; color:var(--moka); font-weight:500;
  font-size:clamp(1rem, 1.3vw, 1.12rem);
  margin-top:26px;
}
.lead{
  max-width:46ch; color:var(--moka);
  font-size:clamp(1.02rem, 1.35vw, 1.18rem);
  line-height:1.78;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 32px; border-radius:999px;
  font-family:var(--sans); font-weight:400; font-size:.94rem; letter-spacing:.02em;
  transition:background .45s cubic-bezier(.22,.61,.36,1), color .45s, border-color .45s, transform .45s;
  will-change:transform;
}
.btn-solid{ background:var(--espresso); color:var(--crema-light); }
.btn-line{ border:1px solid rgba(251,247,239,.55); color:var(--ink, var(--espresso)); }
@media (hover:hover){
  .btn-solid:hover{ background:#735E4D; transform:translateY(-2px); }  /* literal: --moka se redefine sobre foto */
  .btn-line:hover{ border-color:#fff; background:rgba(251,247,239,.12); transform:translateY(-2px); }
}
.dark .btn-solid{ background:var(--crema-light); color:var(--espresso); }

/* ===========================================================
   INTRO · CORTINA DE CREMA
   Guion: crema + logo → cae una masa de crema con el borde ondulado →
   se parte por el centro y se abre → queda la fachada del hero.
   Sólo se animan transform y opacity (compuestas en GPU). El único
   filtro es un drop-shadow en la lengua de crema, y se cae en móvil.
   =========================================================== */
:root{
  --cream-hi:  #F4EBDD;   /* brillo del labio */
  --cream-mid: #E9DECA;   /* cuerpo */
  --cream-lo:  #DCCDB4;   /* fondo, da espesor */

  /* Guion de tiempos: tocar AQUÍ para reajustar la secuencia.
     Total = --i-open + --i-open-dur (y ese mismo total va en script.js). */
  --i-logo:     150ms;    /* el logo empieza a subir desde abajo */
  --i-logo-dur:1150ms;    /* lo que tarda en llegar al centro */
  --i-pour:    1700ms;    /* empieza a caer la crema (tras el destello) */
  --i-open:    2600ms;    /* se abre el telón */
  --i-open-dur:1000ms;    /* lo que tarda en abrirse */
  --i-out:     2600ms;    /* se va el logo. Arranca A LA VEZ que la apertura y
                             con fundido corto: aguanta la primera rendija del
                             telón y desaparece antes de que asome el rótulo
                             de la fachada. */
}
.intro{ position:fixed; inset:0; z-index:120; overflow:hidden; }
.intro-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* Las dos hojas del telón */
.intro-half{
  position:absolute; inset:0;
  will-change:transform; transform:translate3d(0,0,0);
  animation:var(--i-open-dur) cubic-bezier(.66,0,.24,1) var(--i-open) both;
}
.intro-l{ clip-path:inset(0 50% 0 0); animation-name:curtainL; }
.intro-r{ clip-path:inset(0 0 0 50%); animation-name:curtainR; }
@keyframes curtainL{ to{ transform:translate3d(-101%,0,0); } }
@keyframes curtainR{ to{ transform:translate3d(101%,0,0); } }

/* Base: el mismo crema de la web. Es lo que tapa la fachada. */
.intro-base{ position:absolute; inset:0; background:var(--crema-bg); }

/* La masa de crema que cae */
.intro-pour{
  position:absolute; left:0; top:0; width:100%; height:100%;
  will-change:transform; transform:translate3d(0,-100%,0);
  animation:creamFall 900ms cubic-bezier(.36,.03,.22,1) var(--i-pour) both;
}
@keyframes creamFall{ to{ transform:translate3d(0,-48%,0); } }
.pour-body{
  position:absolute; inset:0;
  /* La masa tiene que ser claramente más densa que el crema del fondo
     (#F1EBE0), si no la cortina no se ve caer. El labio va brillante. */
  background:linear-gradient(180deg,
    #C9B899 0%, #D4C3A5 26%, var(--cream-lo) 52%,
    #E6D9C2 78%, #F2E8D8 92%, #FDFAF3 98%, var(--cream-hi) 100%);
  clip-path:url(#creamWave);
  filter:drop-shadow(0 8px 18px rgba(110,86,60,.30));
}

/* Dos o tres gotas colgando del borde. Caen con la cortina y se van al abrir. */
.drop{
  position:absolute; display:block; width:9px; height:13px;
  background:linear-gradient(180deg, #F7F0E3 0%, #EADCC6 55%, #D9C7A8 100%);
  border-radius:50% 50% 52% 52% / 40% 40% 60% 60%;
  box-shadow:0 4px 9px -4px rgba(120,96,70,.45);
  opacity:0;
  animation:
    dropHang 620ms cubic-bezier(.34,.05,.24,1) calc(var(--i-pour) + 340ms) both,
    dropGo   280ms ease-in calc(var(--i-open) - 40ms) forwards;
}
.dz-1{ left:26%; top:96.4%; }
.dz-2{ left:12%; top:96.0%; width:7px;  height:11px; animation-delay:calc(var(--i-pour) + 420ms), calc(var(--i-open) - 40ms); }
.dz-3{ left:84%; top:96.0%; width:10px; height:15px; animation-delay:calc(var(--i-pour) + 280ms), calc(var(--i-open) - 40ms); }
@keyframes dropHang{ from{ opacity:0; transform:translate3d(0,-7px,0) scaleY(.7); }
                     to  { opacity:.92; transform:translate3d(0,0,0) scaleY(1); } }
@keyframes dropGo{ to{ opacity:0; transform:translate3d(0,9px,0); } }

/* El logo: pieza única, intacta.
   Entra desde FUERA del borde inferior y sube hasta el centro en 1,15 s.
   calc(50vh + 62%) lo coloca justo debajo de la pantalla sea cual sea el
   tamaño. La curva (.14,.86,.22,1) hace casi todo el recorrido en el primer
   tercio y se posa muy despacio. El desenfoque inicial es la estela.
   Sube la CAJA, no la imagen: así el destello puede ir dentro y quedar
   recortado a la forma de la placa. */
.intro-logo-wrap{ position:absolute; inset:0; display:grid; place-items:center; }
.intro-logo-box{
  position:relative; width:min(56vw, 460px);
  border-radius:14px; overflow:hidden;
  opacity:0; transform:translate3d(0, calc(50vh + 62%), 0) scale(.9);
  will-change:transform, opacity;
  box-shadow:0 26px 60px -30px rgba(16,11,8,.75);
  animation:
    introLogoRise var(--i-logo-dur) cubic-bezier(.14,.86,.22,1) var(--i-logo) both,
    introLogoOut  350ms cubic-bezier(.35,0,.7,1) var(--i-out) forwards;
}
.intro-logo{ display:block; width:100%; height:auto; }
@keyframes introLogoRise{
  0%   { opacity:0; transform:translate3d(0, calc(50vh + 62%), 0) scale(.9);  filter:blur(9px); }
  14%  { opacity:1; }
  46%  { filter:blur(0); }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1);                    filter:blur(0); }
}
@keyframes introLogoOut{ from{ opacity:1; transform:translate3d(0,0,0) scale(1); }
                          to  { opacity:0; transform:translate3d(0,0,0) scale(1.015); } }
/* Sin desplazamiento si el usuario pide menos movimiento */
@keyframes introLogoFade{ from{ opacity:0; } to{ opacity:1; transform:none; } }

/* --- El destello ----------------------------------------------------------
   Entra 260 ms ANTES de que la placa termine de posarse, así los dos gestos
   se encadenan en vez de ir uno detrás de otro. Dura 1,5 s. mix-blend-mode
   screen para que sólo AÑADA luz al relieve, sin taparlo ni cambiarle el
   color. Dos capas: la banda que cruza y un pico central de brillo. */
.intro-flare{
  position:absolute; inset:-20% -60%; pointer-events:none;
  mix-blend-mode:screen; opacity:0;
  background:linear-gradient(105deg,
    rgba(255,250,240,0)   34%,
    rgba(255,250,240,.32) 44%,
    rgba(255,253,247,.95) 50%,
    rgba(255,250,240,.32) 56%,
    rgba(255,250,240,0)   66%);
  transform:translate3d(-45%,0,0);
  will-change:transform, opacity;
  animation:introFlare 1500ms cubic-bezier(.4,.05,.2,1) calc(var(--i-logo) + var(--i-logo-dur) - 260ms) both;
}
.intro-flare::after{
  content:''; position:absolute; left:50%; top:50%; width:52%; height:70%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(255,253,247,.9), rgba(255,250,240,.35) 45%, rgba(255,250,240,0) 100%);
  opacity:0;
  animation:introFlarePeak 1500ms ease-out calc(var(--i-logo) + var(--i-logo-dur) - 260ms) both;
}
@keyframes introFlare{
  0%  { opacity:0; transform:translate3d(-45%,0,0); }
  15% { opacity:1; }
  85% { opacity:1; }
  100%{ opacity:0; transform:translate3d(45%,0,0); }
}
@keyframes introFlarePeak{
  0%,30% { opacity:0; }
  50%    { opacity:1; }
  100%   { opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .intro-flare{ display:none; } }

.intro.gone{ opacity:0; visibility:hidden; transition:opacity .7s ease, visibility .7s; }
/* Al saltar la intro con un clic o un toque, el fundido es corto: lo que se
   quiere es entrar ya, pero sin que el telón desaparezca de golpe. */
.intro.gone.rapido{ transition-duration:.26s; }
body.loading{ overflow:hidden; }

/* Fase 4: la cabecera entra detrás del telón (el hero ya usa .rv) */
body.intro-run #head{ opacity:0; }
body.intro-run .head-actions,
body.intro-run .nav a{ opacity:0; transform:translateY(8px); }
.head-actions, .nav a{
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1), color .45s ease;
}

/* --- El logo del header se descubre con un barrido de crema --------------
   Sólo se esconde si el JS ha marcado body.intro-run; si el script no llega
   a ejecutarse, el logo se ve normal desde el primer momento.
   ------------------------------------------------------------------------ */
body.intro-run .brand{ clip-path:inset(0 100% 0 0); }
.brand.brand-sweep{ animation:brandClip 620ms cubic-bezier(.5,.02,.2,1) both; }
/* Los insets negativos del final dejan el recorte FUERA de la caja: si no,
   al acabar el barrido el propio clip-path se comería la gota y el destello. */
@keyframes brandClip{
  from{ clip-path:inset(-30% 100% -140% 0); }
  to  { clip-path:inset(-30% -80% -140% 0); }
}

/* --- Destello periódico en el logo del header ---------------------------
   El mismo gesto que revela el logo en la intro, repetido cada 14 s. Va en
   ::before (::after es el barrido de entrada, que sólo corre una vez).
   Empieza a los 8 s para no pisar ni la intro ni ese barrido.
   ------------------------------------------------------------------------ */
.brand::before{
  content:''; position:absolute; inset:-10% -50%; z-index:2;
  pointer-events:none; opacity:0;
  background:linear-gradient(100deg,
    rgba(244,235,221,0)   0%,  rgba(248,242,232,.42) 32%,
    rgba(255,253,248,1)   50%, rgba(248,242,232,.38) 68%,
    rgba(244,235,221,0)   100%);
  transform:translate3d(-130%,0,0);
  will-change:transform, opacity;
  animation:brandGlint 7s linear 4.5s infinite;
}
/* El 0-18% es el barrido (1,26 s); el resto del ciclo no pasa nada. */
@keyframes brandGlint{
  0%        { opacity:0; transform:translate3d(-130%,0,0); }
  3%        { opacity:1; }
  15%       { opacity:1; }
  18%       { opacity:0; transform:translate3d(130%,0,0); }
  18.1%,100%{ opacity:0; transform:translate3d(-130%,0,0); }
}
@media (prefers-reduced-motion: reduce){ .brand::before{ animation:none; display:none; } }

/* La lengua de crema que va por delante del borde */
.brand::after{
  content:''; position:absolute; inset:-6% -55%; z-index:2;
  pointer-events:none; opacity:0;
  /* Banda ancha y difusa: tiene que leerse como luz, no como un rectángulo */
  background:linear-gradient(100deg,
    rgba(244,235,221,0) 0%, rgba(246,240,230,.30) 32%,
    rgba(252,248,241,.72) 50%, rgba(246,240,230,.26) 68%,
    rgba(244,235,221,0) 100%);
}
.brand.brand-sweep::after{ animation:brandSheen 780ms cubic-bezier(.45,.05,.25,1) both; }
@keyframes brandSheen{
  from{ transform:translate3d(-115%,0,0); opacity:1; }
  72% { opacity:1; }
  to  { transform:translate3d(118%,0,0);  opacity:0; }
}

/* Móvil: fuera gotas y filtro. La secuencia se mantiene. */
@media (max-width:760px){
  .drop{ display:none; }
  .pour-body{ filter:none; }
}

/* Accesibilidad: sin caída ni apertura, sólo el logo y un fundido. */
@media (prefers-reduced-motion: reduce){
  .intro-pour, .drop{ display:none; }
  .intro-half{ animation:none; }
  .intro-logo-box{ animation:introLogoFade 260ms ease both; }
  body.intro-run #head,
  body.intro-run .head-actions,
  body.intro-run .nav a{ opacity:1; transform:none; }
  body.intro-run .brand{ clip-path:none; }
  .brand.brand-sweep, .brand.brand-sweep::after{ animation:none; }
}

/* ===========================================================
   HEADER
   =========================================================== */
header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  padding-block:18px;
  background:transparent;
  transition:padding .5s ease, background-color .5s ease, box-shadow .5s ease;
}
header.scrolled{
  padding-block:10px;
  background:var(--crema-bg);
  box-shadow:0 1px 0 rgba(42,33,27,.09), 0 10px 30px -26px rgba(42,33,27,.5);
}
.head-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
/* El logotipo va SIEMPRE tal cual: con su propio fondo crema. */
.brand{ display:block; position:relative; overflow:hidden; border-radius:6px; width:104px; transition:width .5s ease; }
header.scrolled .brand{ width:92px; }
.brand img{ width:100%; height:auto; border-radius:5px; box-shadow:0 4px 16px -8px rgba(20,14,10,.5); }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.2vw,34px); }
.nav a{
  font-size:.86rem; letter-spacing:.045em; color:var(--espresso);
  position:relative; padding-block:4px; opacity:.8;
  transition:opacity .35s, color .45s ease;
}
header:not(.scrolled) .nav a{ color:var(--crema-light); opacity:.94; text-shadow:0 1px 12px rgba(20,14,10,.7); }
header:not(.scrolled) .nav .lang{ border-color:rgba(247,243,235,.55); }
header:not(.scrolled) .head-actions .ig{ color:var(--crema-light); filter:drop-shadow(0 1px 8px rgba(20,14,10,.7)); }
header:not(.scrolled) .burger span{ background:var(--crema-light); }
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover){ .nav a:hover{ opacity:1; } .nav a:hover::after{ transform:scaleX(1); } }
.nav .lang{
  border:1px solid rgba(42,33,27,.24); border-radius:999px;
  padding:5px 13px; font-size:.72rem; letter-spacing:.12em; opacity:.85;
}
.nav .lang::after{ display:none; }
.head-actions{ display:flex; align-items:center; gap:14px; }
.head-actions .ig{ display:inline-flex; color:var(--espresso); opacity:.85; transition:opacity .35s, color .45s ease; }
.head-actions .ig svg{ width:21px; height:21px; }
@media (hover:hover){ .head-actions .ig:hover{ opacity:1; } }

.burger{ display:none; width:40px; height:40px; position:relative; }
.burger span{
  position:absolute; left:9px; right:9px; height:1px; background:var(--espresso);
  transition:transform .4s cubic-bezier(.22,.61,.36,1), opacity .3s, background .4s;
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:23px; }
body.nav-open .burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ===========================================================
   HERO — fachada a sangre, degradado sólo en la parte baja
   =========================================================== */
.hero{
  position:relative;
  /* La altura la fija script.js en px y sólo se recalcula al girar el móvil.
     Así la barra del navegador no re-escala el fondo al hacer scroll. */
  height:var(--hero-h, 100vh);
  min-height:560px;
  /* El bloque va centrado y ligeramente por encima del centro: el padding-bottom
     de .hero-in es lo que lo sube (mitad de ese valor). */
  display:flex; align-items:center;
  background:var(--arena);
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:38% 62%; }
.hero-shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    /* sólo un difuminado suave abajo, para enlazar con la sección crema */
    linear-gradient(to top,
      var(--crema-bg) 0%,
      rgba(241,235,224,.82) 4%,
      rgba(241,235,224,.42) 8%,
      rgba(241,235,224,.14) 13%,
      rgba(241,235,224,0)   18%),
    /* Velo superior. Llega hasta el 38% para cubrir también la línea de
       "Cafetería · Rúa Galiano · Ferrol", que caía justo donde se acababa. */
    linear-gradient(to bottom,
      rgba(28,20,15,.48) 0%, rgba(28,20,15,.24) 13%,
      rgba(28,20,15,.17) 26%, rgba(28,20,15,.06) 34%, rgba(28,20,15,0) 42%);
}
.hero-in{
  position:relative; z-index:2;
  /* Centrado exacto: sin padding vertical, el bloque queda a la MISMA distancia
     del borde de arriba que del de abajo. Cualquier padding aquí lo descentra
     (desplaza el contenido la mitad de su valor). */
  padding-block:0;
  color:var(--crema-light);
  text-align:center;
}
/* Va sobre el rótulo dorado de la fachada: sin una sombra de verdad no se lee */
.hero-in .eyebrow{
  color:#FFFDF9; font-weight:500;
  margin-bottom:clamp(26px,4vh,46px);
  text-shadow:0 1px 2px rgba(14,9,6,.95), 0 2px 10px rgba(14,9,6,.9),
              0 2px 22px rgba(14,9,6,.85), 0 0 38px rgba(14,9,6,.7);
}
/* width:fit-content para que el <h1> mida lo que la placa y no todo el ancho:
   si no, el destello de abajo cruzaría la pantalla entera en vez del logo. */
.hero-logo{
  position:relative; width:fit-content;
  margin:0 auto clamp(28px,3.6vh,42px);
  border-radius:14px; overflow:hidden;
  box-shadow:0 26px 60px -30px rgba(16,11,8,.75);
}
.hero-logo img{
  display:block; width:min(420px, 74vw); height:auto;
  border-radius:14px;
}
/* --- Destello del logo de la portada, cada 4 s --------------------------
   Mismo gesto que en la intro. El barrido ocupa el 30% del ciclo (1,2 s) y
   los otros 2,8 s no pasa nada. Se para solo cuando la portada sale de
   pantalla (clase .on del observador). */
.hero-logo::after{
  content:''; position:absolute; inset:-20% -60%; z-index:2;
  pointer-events:none; mix-blend-mode:screen; opacity:0;
  background:linear-gradient(105deg,
    rgba(255,250,240,0)   34%,
    rgba(255,250,240,.32) 44%,
    rgba(255,253,247,.95) 50%,
    rgba(255,250,240,.32) 56%,
    rgba(255,250,240,0)   66%);
  transform:translate3d(-45%,0,0);
  will-change:transform, opacity;
  animation:heroGlint 4s linear var(--i-glint, 4.2s) infinite;
  animation-play-state:paused;
}
.hero-logo.on::after{ animation-play-state:running; }
@keyframes heroGlint{
  0%       { opacity:0; transform:translate3d(-45%,0,0); }
  4%       { opacity:1; }
  26%      { opacity:1; }
  30%      { opacity:0; transform:translate3d(45%,0,0); }
  30.1%,100%{ opacity:0; transform:translate3d(-45%,0,0); }
}
@media (prefers-reduced-motion: reduce){ .hero-logo::after{ animation:none; display:none; } }
/* --- LLUVIA DE GOTAS DE CREMA sobre la fachada ---------------------------
   Gotas reales (img/gota-a..h.webp con transparencia), no formas de CSS:
   ocho siluetas distintas, cinco lágrimas y tres perlas. Cada una lleva su
   silueta, carril, tamaño, velocidad, deriva y giro; el retardo es
   negativo, así al entrar la lluvia ya está cayendo en vez de arrancar de
   cero. Sólo se animan transform y opacity. Se paran solas cuando la portada
   sale de pantalla.
   ------------------------------------------------------------------------ */
.lluvia{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  /* Va ANTES de .hero-shade en el HTML: el velo del hero cae por encima de las
     gotas. Así quedan dentro de la escena en vez de pegadas sobre ella, y de
     paso no le roban contraste al rótulo (medido: 3,98 → 4,7). */
}
.lluvia i{
  position:absolute; top:-12%; left:var(--x);
  height:var(--h); aspect-ratio:var(--ar);   /* la proporción real de cada recorte */
  background-image:var(--g);
  background-size:contain; background-repeat:no-repeat; background-position:center;
  filter:drop-shadow(0 2px 4px rgba(60,42,26,.35));
  opacity:0; will-change:transform, opacity;
  animation:gotaCae var(--d) linear var(--dl) infinite;
  animation-play-state:paused;
}
.lluvia.on i{ animation-play-state:running; }
@keyframes gotaCae{
  0%  { opacity:0;        transform:translate3d(0,0,0) rotate(0deg); }
  8%  { opacity:var(--o); }
  88% { opacity:var(--o); }
  100%{ opacity:0;        transform:translate3d(var(--dx),118vh,0) rotate(var(--rot)); }
}
/* Móvil: se quedan las marcadas con .mov (mezcla de tamaños a propósito) y
   suben un 25% — en una pantalla estrecha las perlas pequeñas no se veían. */
@media (max-width:760px){
  .lluvia i:not(.mov){ display:none; }
  .lluvia i{ height:calc(var(--h) * 1.25); filter:none; }
}
@media (prefers-reduced-motion: reduce){ .lluvia{ display:none; } }

.hero .cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:clamp(30px,4vh,44px); }
.hero .btn-solid{ background:var(--crema-light); color:var(--espresso); }
/* Relleno oscuro muy leve: en móvil este botón caía sobre una zona clara
   de la fachada y el texto blanco se perdía. */
.hero .btn-line{ border-color:rgba(247,243,235,.6); color:#FFFDF9;
  background:rgba(22,16,11,.30); backdrop-filter:none; }
@media (hover:hover){
  .hero .btn-solid:hover{ background:#fff; }
  .hero .btn-line:hover{ border-color:var(--crema-light); background:rgba(22,16,11,.46); }
}


/* ===========================================================
   GALERÍA — cinta de fotos, avance continuo, NO interactiva
   Una sola capa animada (translateX). Mucho más ligera que el anillo 3D:
   sin preserve-3d, sin 14 planos compuestos y con fotos más pequeñas.
   =========================================================== */
.gal{ padding-bottom:clamp(70px,9vw,120px); overflow:hidden; background:var(--crema-light); }
.gal-head{ text-align:center; }
.gal-head .sub{ margin-inline:auto; text-align:center; }

.band-stage{
  position:relative; z-index:1;
  margin-top:clamp(44px, 6vw, 84px);
  /* SIN overflow aquí. Al recortar en este contenedor, Chromium lo compone en
     una capa aparte y se veía una costura horizontal contra la foto de fondo
     de la sección. De cortar la cinta a lo ancho ya se encarga `.gal`. */
  padding-block:22px;
  pointer-events:none;          /* sólo se mira */
  user-select:none;
}
.band-track{
  display:flex; align-items:flex-end;
  width:max-content;
  will-change:transform;
  animation:bandRun var(--band-time) linear infinite;
}
/* El set va duplicado: al desplazar exactamente la mitad, el salto es invisible.
   OJO: nada de `gap` aquí — con gap, el 50% no cae justo entre copia y copia. */
@keyframes bandRun{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
.band-stage:not(.on) .band-track{ animation-play-state:paused; }

.band-card{
  flex:0 0 auto;
  width:var(--band-w);
  margin:0 var(--band-gap) 0 0;
}
.band-card:nth-child(odd)  { transform:rotate(-1.1deg); }
.band-card:nth-child(even) { transform:rotate(1.1deg); }
.band-card:nth-child(5n+3) { width:calc(var(--band-w) * .84); }
.band-card img{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--r-card);
  box-shadow:0 18px 40px -28px rgba(42,33,27,.5);
}

/* Los extremos se funden en crema: la cinta no "empieza" ni "acaba" */
.band-veil{ position:absolute; top:0; bottom:0; z-index:2; width:clamp(60px, 13vw, 230px); pointer-events:none; }
/* (velos retirados) */
.band-veil-l{ left:0;  background:linear-gradient(to right, var(--crema-bg) 8%, rgba(241,235,224,.7) 52%, rgba(241,235,224,0) 100%); }
.band-veil-r{ right:0; background:linear-gradient(to left,  var(--crema-bg) 8%, rgba(241,235,224,.7) 52%, rgba(241,235,224,0) 100%); }

/* ===========================================================
   FOTO DE FONDO EN CADA SECCIÓN
   Fotos LIMPIAS: sin desenfoque y sin curvas de tono. Lo único que las
   integra es la transparencia; el color de la sección se ve a través.

   NITIDEZ — dos resoluciones, se descarga UNA sola:
     · 1920x1600 para pantallas normales
     · 2880x2400 para pantallas con escalado (Windows al 125%, portátiles
       Retina/HiDPI). Sin esto, en esas pantallas el navegador amplía la
       foto 1,25-2x y se ve blanda por mucha calidad que tenga el archivo.
   El 6:5 no es casual: la sección de Pinchos es la más alta (1596 px) y
   con texturas de 1200 px de alto obligaba a ampliar un 33% incluso a 1x.
   =========================================================== */
/* --- FONDO FOTOGRÁFICO DE LAS SECCIONES ---------------------------------
   Cada sección lleva su foto recortada con `cover`: se amplía lo justo para
   llenar la sección entera y punto. Nada de fondos fijos ni efectos al
   scrollear: la foto se mueve con la página, como el resto.
   ---------------------------------------------------------------------- */
/* --- MANDO DE RESERVA: velo oscuro por sección (--tex-veil) --------------
   La letra es clara y va directamente sobre la foto, sin recuadro. Si alguna
   vez una foto nueva trae una zona clara donde cae texto, se sube este número
   SÓLO en esa sección (p. ej. `.carta{ --tex-veil:.4 }`) y la foto se apaga
   lo justo. Es un velo OSCURO, no el blanquecino de antes.
   HOY TODAS VAN A 0: comprobado texto por texto, ninguna lo necesita.
   ---------------------------------------------------------------------- */
.sec, footer{ --tex-veil:0; }

.sec::before, footer::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(18,12,8,var(--tex-veil,0)), rgba(18,12,8,var(--tex-veil,0))),
    var(--tex);
  background-size:cover; background-position:center;
  /* ===== EL ÚNICO MANDO ===================================================
     Va a 1 A PROPÓSITO: la foto no se mezcla con el color de la sección, que
     es lo que producía el velo blanquecino. Lo que baja su presencia es el
     contraste, ya horneado en el propio .webp.
     Si algún día quieres velo, baja este número; volverá el lavado.
     ====================================================================== */
  opacity:var(--tex-o, 0.99);
}

/* La carta cambia de alto al cambiar de pestaña (Desayunos tiene 8 líneas y
   Cafés y bebidas 11), y con `cover` eso hacía que la foto diera un salto de
   zoom del 21 %. Aquí la capa de la foto se dibuja SIEMPRE con el alto de la
   pestaña más larga (--tex-h, en píxeles, lo mide el JS) y lo que sobra se
   recorta. Al ser un alto ABSOLUTO no lo arrastra la animación de la sección.
   Así el encuadre es idéntico en las dos pestañas y no hay ningún salto, sin
   dejar el hueco vacío que quedaba cuando la sección medía siempre lo máximo. */
.carta{ overflow:hidden; }
.carta::before{ bottom:auto; height:var(--tex-h, 100%); }

.sec > *, footer > *{ position:relative; z-index:1; }

/* --- LETRA CLARA CON FILETE OSCURO ---------------------------------------
   Toda la web va como la portada: texto crema con un contorno de 1 px
   espresso pegado al trazo y una sombra corta. No hay ningún fondo detrás
   de la letra; la foto se ve entera. */
.sec, footer{
  --ink:   #FBF7EF;                 /* texto principal */
  --ink-2: #F1E8DA;                 /* texto secundario */
  --ink-3: #E6DAC6;                 /* volanderas y notas */
  --rule:  rgba(251,247,239,.22);   /* filetes y separadores */
  --stk:   rgba(20,14,10,.92);
  color:var(--ink);
  text-shadow: 0 0 1px var(--stk), 0 0 1px var(--stk), 0 1px 2px var(--stk), 0 1px 6px rgba(20,14,10,.45);
}
.btn, .tab.on, .h-d em, .osm, .map-img{ text-shadow:none; }

/* --- LEGIBILIDAD SOBRE LA FOTO -----------------------------------------
   Medido en el navegador: sobre el fondo fotográfico, --moka daba 2,8 de
   contraste y --taupe 1,3. El mínimo legible es 4,5. Los dos tonos suaves
   estaban calculados para un fondo crema liso, no para una foto.
   Se redefinen SOLO dentro de las secciones con foto: la jerarquía se
   mantiene (siguen siendo más suaves que los titulares), sólo ganan peso.
   No se toca el fondo, así que la foto se sigue viendo igual.
   ---------------------------------------------------------------------- */
.sec:not(.dark), footer{
  --moka:  var(--ink-2);
  --taupe: var(--ink-3);
  /* Halo oscuro corto, ADEMÁS del contorno de siempre. Al pasar la carta
     delante de los pinchos cambió el alto de la sección y, con
     background-size:cover, el recorte de la foto: bajo la nota de alérgenos y
     el subtítulo quedó una zona clara y el contraste caía por debajo de 4,5.
     Esto lo recupera sin tocar el color de la letra ni poner fondo detrás. */
  text-shadow:0 0 1px var(--stk), 0 0 2px rgba(18,12,8,.82),
              0 1px 3px rgba(18,12,8,.6), 0 1px 10px rgba(18,12,8,.45);
}
/* Las rutas de las texturas NO viven aquí: están en un <style> generado por
   index.php para que lleven el ?v= de la versión de assets. Una url dentro de
   un .css estático se queda cacheada en el navegador aunque el CSS cambie —
   eso hacía que se siguieran viendo las fotos viejas por muy bien que se
   regenerasen. Aquí sólo lo que no depende de la versión. */
footer{ position:relative; overflow:hidden; }

/* (halos retirados: con la foto tan transparente el texto se lee solo) */
.sec .btn, footer .btn, .sec .tab, .foot-logo, .credit, .band-cap, .pin figcaption{
  text-shadow:none;
}

/* ===========================================================
   LA CASA — sección espresso, compacta: foto cuadrada + texto
   =========================================================== */
/* Sobre la foto oscura el taupe original se hunde: aquí sube en vez de bajar */
.dark{
  background:var(--espresso);
  color:var(--crema-on-dark);
  /* Más recogida que el resto: aquí no hace falta tanto aire */
  padding-block:clamp(72px, 9vw, 118px);
}
.dark .title{ color:var(--crema-light); font-size:clamp(2.1rem, 3.9vw, 3.2rem); text-shadow:0 2px 22px rgba(18,12,8,.55); }
.dark .eyebrow{ color:var(--ink-3); }
.dark p{ color:#F3EBDD; font-weight:500; text-shadow:0 1px 14px rgba(18,12,8,.6); }

.casa-grid{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(28px, 4.5vw, 64px); align-items:center;
}
.casa-foto{ margin:0; }
.casa-foto img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--r-card);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.75);
}
.casa-txt p{
  font-size:clamp(.98rem, 1.1vw, 1.05rem); line-height:1.75; max-width:52ch;
  margin-bottom:.9em;
  /* Justificado. Con `hyphens` y `text-wrap:pretty` para que el navegador
     reparta el espacio sin dejar ríos ni renglones con huecos enormes:
     justificar sin partir palabras en una columna estrecha queda fatal. */
  text-align:justify; text-justify:inter-word;
  hyphens:auto; -webkit-hyphens:auto;
  text-wrap:pretty;
}
.casa-txt .title{ margin-bottom:22px; }
.casa-txt p:last-child{ margin-bottom:0; }

/* --- A qué hora venir ------------------------------------------------------
   Sin tablas ni hilos: la hora en cifra grande hace de elemento gráfico y el
   momento cuelga debajo. Un travesaño de terracota marca el arranque de cada
   columna y el conjunto se apoya en una sola línea fina arriba. */
.horas-t{
  font-family:var(--sans); font-weight:500;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink);
  margin:clamp(50px, 6.5vw, 88px) 0 20px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(216,203,184,.18);
}
/* El número de momentos del día no está fijado: lo marca data-n en el HTML.
   Se ajustan las columnas para que nunca quede una fila coja (con 3 momentos
   y 4 columnas quedaba un hueco, y con 2 columnas en móvil, uno descolgado). */
.horas{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(24px, 3.4vw, 52px);
  margin-top:clamp(28px, 3.4vw, 44px);
}
.horas[data-n="3"]{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.horas[data-n="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.horas li{ position:relative; padding-top:20px; }
.horas li::before{                       /* travesaño de arranque */
  content:''; position:absolute; top:0; left:0;
  width:26px; height:2px; background:var(--terracota); border-radius:2px;
}
.horas .h{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem, 3.1vw, 2.7rem); line-height:1;
  color:rgba(236,227,211,.76);
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1;
  letter-spacing:-.005em;
  margin-bottom:12px;
}
.horas b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:1.42rem; color:var(--crema-light); margin-bottom:7px; letter-spacing:.005em;
  text-shadow:0 1px 14px rgba(18,12,8,.5);
}
.horas .n{
  display:block; font-size:.87rem; color:rgba(236,228,214,.86);
  text-shadow:0 0 2px rgba(18,12,8,.8), 0 1px 3px rgba(18,12,8,.6), 0 1px 12px rgba(18,12,8,.55);
  line-height:1.6; max-width:30ch;
}

/* ===========================================================
   CARTA
   =========================================================== */
.carta-head{ max-width:760px; }
.tabs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:clamp(44px,6vw,72px) 0 clamp(34px,4vw,52px);
  border-bottom:1px solid var(--rule); padding-bottom:18px;
}
.tab{
  padding:9px 20px; border-radius:999px; cursor:pointer;
  /* Un punto más oscuras que el resto del texto suave: caen sobre la zona
     más oscura de la foto de la carta. */
  font-size:.9rem; font-weight:500; letter-spacing:.03em; color:var(--ink);
  border:1px solid transparent;
  transition:background .4s, color .4s, border-color .4s;
  touch-action:manipulation;
}
@media (hover:hover){ .tab:hover{ border-color:rgba(251,247,239,.4); color:#fff; } }
.tab.on{ background:var(--espresso); color:var(--crema-light); }

/* Todos los paneles ocupan la MISMA celda de la rejilla, así al cambiar de
   pestaña no se mueve nada de sitio. Pero el panel que NO está activo se
   colapsa (max-height:0), para que la sección mida lo que mide el panel que
   se está viendo y no lo que mide el más largo: con "Desayunos" (8 líneas)
   frente a "Cafés y bebidas" (11) quedaban 324 px de hueco vacío en móvil.
   La altura se anima a la vez que el fundido, así el cambio no da un salto. */
.panels{ display:grid; }
.panel{
  grid-area:1 / 1;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 clamp(40px,6vw,90px);
  align-content:start;
  opacity:0; visibility:hidden; pointer-events:none;
  max-height:0; overflow:hidden;
  /* La altura NO se anima. Los dos paneles comparten celda, así que la altura
     de la sección es el MÁXIMO de los dos, no la suma: al animarlos a la vez
     el máximo bajaba a mitad de camino y la sección se encogía (1509 -> 1204)
     antes de crecer. Se veía como un tirón. Ahora el alto cambia de golpe y lo
     único que se anima es el fundido, que es lo que se espera de unas pestañas. */
  transition:opacity .35s ease;
}
.panel.on{ opacity:1; visibility:visible; pointer-events:auto; max-height:var(--h, 2600px); }
.dish{ padding:24px 0; border-bottom:1px solid var(--rule); }
.dish h4{
  font-family:var(--serif); font-weight:400; font-size:1.42rem;
  color:var(--ink); line-height:1.2; margin-bottom:6px;
}
.dish p{ margin:0; font-size:1rem; font-weight:500; color:var(--moka); line-height:1.6; }

.allergen{
  margin-top:38px; font-size:.86rem; font-weight:500; color:var(--taupe);
  border-left:1px solid var(--rule); padding-left:16px; max-width:62ch;
}

/* ===========================================================
   PINCHOS
   =========================================================== */
.pinchos{ background:var(--crema-light); }
/* La sección va CENTRADA de arriba abajo: volandera, título, lista de nombres
   y rejilla de fotos comparten eje. Antes el título iba a la izquierda y la
   lista centrada, y al quitar el párrafo de debajo el desajuste cantaba. */
.pin-head{ max-width:820px; margin-inline:auto; text-align:center; }

/* Lista de nombres de la barra. Va apilada, no en línea seguida: así en móvil
   nunca queda una fila con tres nombres y la siguiente con uno. Los filetes
   son sólo entre elementos (el primero no lleva). */
.pin-lista{
  list-style:none; margin:clamp(30px,3.6vw,42px) auto 0; padding:0;
  max-width:560px; text-align:center;
}
.pin-lista li{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.16rem, 1.05rem + .5vw, 1.44rem);
  line-height:1.35; padding:14px 4px;
}
.pin-lista li + li{ border-top:1px solid var(--rule); }

.pin-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(24px, 3vw, 48px) clamp(18px, 2.4vw, 34px); margin-top:clamp(46px,6vw,76px);
}
.pin{ margin:0; }
.pin img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--r-card);
  box-shadow:0 16px 38px -28px rgba(42,33,27,.5);
  /* Deriva lentísima, tipo Ken Burns: la sección respira sin llamar la atención.
     Una vuelta completa dura casi medio minuto y el zoom no llega al 6 %. */
  animation:pinDrift 28s ease-in-out infinite alternate;
  animation-delay:calc(var(--k, 0) * -4.6s);
  will-change:transform;
}
.pin:nth-child(even) img{ animation-direction:alternate-reverse; }
@keyframes pinDrift{
  from{ transform:scale(1)     translate3d(0,0,0); }
  to  { transform:scale(1.055) translate3d(0,-.8%,0); }
}
/* Sólo se mueve mientras la sección está en pantalla */
.pinchos:not(.on) .pin img{ animation-play-state:paused; }

/* Al pasar por encima, la tarjeta se levanta un poco. No toca el transform de
   la imagen, así que no pelea con la deriva. */
.pin{ transition:transform .7s cubic-bezier(.22,.61,.36,1); }
@media (hover:hover){
  .pin:hover{ transform:translateY(-6px); }
  .pin:hover img{ box-shadow:0 26px 50px -26px rgba(42,33,27,.55); }
  .pin:hover figcaption b{ color:var(--moka); }
}
.pin figcaption{ padding-top:18px; }
.pin figcaption b{
  display:block; font-family:var(--serif); font-weight:400; font-size:1.28rem;
  color:var(--ink); margin-bottom:5px; transition:color .5s ease;
}
.pin figcaption span{ display:block; font-size:1rem; font-weight:500; color:var(--moka); line-height:1.6; }

/* ===========================================================
   CONTACTO
   =========================================================== */
.con-head{ max-width:820px; }
.con-grid{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(34px, 5vw, 76px); margin-top:clamp(46px,6vw,72px); align-items:start;
}
.info-b{ padding-bottom:28px; margin-bottom:28px; border-bottom:1px solid var(--rule); }
.info-b h4{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--moka); margin-bottom:12px; font-weight:500;
}
.info-b p{ font-weight:500; margin:0; font-family:var(--serif); font-size:1.35rem; color:var(--ink); line-height:1.45; }
.info-b a{ border-bottom:1px solid var(--arena); }

.hours{ margin-top:2px; }
.h-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:7px 0; font-family:var(--sans); font-size:.95rem; font-weight:500; color:var(--ink-2);
  border-bottom:1px dotted var(--rule);
}
.h-row:last-child{ border-bottom:0; }
.h-row.today{ color:var(--ink); }
.h-d{ display:flex; align-items:center; gap:10px; }
.h-d em{
  font-style:normal; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--espresso); color:var(--crema-light); padding:3px 9px; border-radius:999px;
}
.h-h{ white-space:nowrap; flex:0 0 auto; font-variant-numeric:tabular-nums; color:var(--ink); }
.info-b .note{ margin:14px 0 0; font-family:var(--sans); font-size:.86rem; font-weight:500; line-height:1.6; color:var(--ink-2); }
.info .btn{ margin-top:6px; }

.map-wrap{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 22px 60px -38px rgba(42,33,27,.45); }
#map{ width:100%; height:clamp(320px, 46vw, 520px); background:var(--arena); filter:saturate(.72) contrast(.96); }
.map-img{ display:block; }
.map-img img{ width:100%; height:clamp(320px, 46vw, 520px); object-fit:cover; transition:transform 1.2s cubic-bezier(.22,.61,.36,1); }
@media (hover:hover){ .map-img:hover img{ transform:scale(1.03); } }
.leaflet-container{ background:var(--arena); }
/* Chapa del crédito del mapa. Antes iba semitransparente (.82) con letra
   #5b5044: sobre el mapa quedaba gris sobre gris y no se leía. Ahora la
   chapa es opaca y la letra bien oscura, así no depende de lo que haya debajo. */
.osm{ position:absolute; right:10px; bottom:8px; z-index:500; font-size:.62rem;
      color:#2A211B; background:#F4EFE6; padding:4px 9px; border-radius:6px;
      box-shadow:0 1px 6px rgba(20,14,10,.25); }
.osm a{ text-decoration:underline; }

/* ===========================================================
   FOOTER — en claro, para que el logo se vea como el logo original
   =========================================================== */
footer{ background:#E8E0D2; color:var(--ink); padding-block:clamp(70px,9vw,110px) 40px; }
.foot-top{ text-align:center; }
.foot-logo{ width:min(270px, 60%); height:auto; margin:0 auto 24px; border-radius:10px; box-shadow:0 12px 30px -20px rgba(42,33,27,.4); }
.foot-tag{ max-width:44ch; margin:0 auto; color:var(--ink); font-weight:500; font-size:.95rem; }
.foot-mid{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 34px;
  margin-top:clamp(40px,5vw,60px); padding-top:34px; border-top:1px solid var(--rule);
  text-align:center;
}
.foot-mid p{ margin:0; color:var(--moka); font-weight:500; font-size:.92rem; }
.foot-links{ display:flex; align-items:center; gap:26px; }
.foot-ig{ display:inline-flex; align-items:center; gap:8px; }
.foot-ig svg{ width:17px; height:17px; }
.foot-links a{ font-size:.86rem; color:var(--moka); border-bottom:1px solid var(--rule); padding-bottom:2px; transition:color .35s, border-color .35s; }
@media (hover:hover){ .foot-links a:hover{ color:#fff; border-color:#fff; } }
.foot-bot{ margin-top:44px; text-align:center; }
.disc{ font-size:.72rem; line-height:1.7; color:var(--moka); opacity:.85; max-width:78ch; margin:0 auto 10px; }
.copy{ font-size:.76rem; color:var(--taupe); margin:26px 0 0; }

/* Crédito del estudio: una firma, no un botón.
   Mismo cuerpo que la letra pequeña, sin caja, sin color de acento y sin
   flecha. Sólo al pasar por encima se dibuja el subrayado. */
.credit{
  display:inline-flex; align-items:baseline; gap:8px;
  margin-top:20px;
  font-family:var(--sans); font-weight:300;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--taupe);
  transition:color .55s cubic-bezier(.22,.61,.36,1);
}
.credit-t{ opacity:.78; }
.credit-b{
  position:relative; font-weight:400; color:var(--moka);
  transition:color .55s cubic-bezier(.22,.61,.36,1);
}
/* La distinción de "web" se hace con peso, no con color */
.credit-b em{ font-style:normal; font-weight:300; opacity:.7; }
.credit-b::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor; opacity:.5;
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
/* La flecha sobraba */
.credit svg{ display:none; }
@media (hover:hover){
  .credit:hover .credit-b{ color:#fff; }
  .credit:hover .credit-b::after{ transform:scaleX(1); }
}
@media (max-width:520px){
  .credit{ gap:6px; font-size:.64rem; letter-spacing:.14em; }
}

/* ===========================================================
   REVEALS (muy sutiles)
   =========================================================== */
.rv, .rv-s{ opacity:0; transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); }
.rv{ transform:translateY(16px); }
.rv-s{ transform:scale(.985); }
.pin.rv-s{ transform:translateY(22px) scale(.97); }
.rv.in, .rv-s.in{ opacity:1; transform:none; }
.d1{ transition-delay:.09s; } .d2{ transition-delay:.18s; }
.d3{ transition-delay:.27s; } .d4{ transition-delay:.36s; }
.d5{ transition-delay:.45s; } .d6{ transition-delay:.54s; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1080px){
  :root{ --band-w:250px; --band-gap:22px; --band-time:56s; }
}

@media (max-width:860px){
  .nav{
    /* Medido: el enlace más ancho ("Visítanos") ocupa ~160 px, así que con 340
       sobraban casi 200 px de panel vacío y se comía media pantalla. Ahora el
       ancho va ajustado al contenido más un margen cómodo. */
    position:fixed; inset:0 0 0 auto; width:min(68vw, 236px);
    background:var(--crema-light);
    /* Centrados: con los enlaces pegados al borde izquierdo, todo el hueco
       sobrante quedaba en el lado derecho y el panel parecía enorme y medio
       vacío. Centrados, el aire se reparte y el panel se lee como una pieza. */
    flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:60px 24px; text-align:center;
    transform:translateX(101%); transition:transform .6s cubic-bezier(.22,.61,.36,1);
    box-shadow:-24px 0 60px -30px rgba(42,33,27,.4);
  }
  body.nav-open .nav{ transform:none; }
  .nav a{ font-family:var(--serif); font-size:1.62rem; opacity:1; padding-block:8px; }
  .nav a::after{ display:none; }
  .nav .lang{ font-family:var(--sans); font-size:.74rem; margin-top:18px; }
  .burger{ display:block; z-index:95; }
  body.nav-open{ overflow:hidden; }

  /* El panel del menú es CREMA. Arriba del todo la cabecera pinta los enlaces,
     las barras de la hamburguesa y el icono de Instagram en crema (para que se
     lean sobre la foto de la portada), así que al abrir el menú quedaban crema
     sobre crema: no se veía nada. Aquí se devuelven a oscuro, que es lo que
     toca sobre el panel. Las tres reglas van DESPUÉS de las de la cabecera
     para ganarles sin tener que subir la especificidad ni usar !important. */
  .head-actions{ position:relative; z-index:95; }
  header:not(.scrolled) .nav a{ color:var(--espresso); opacity:.88; text-shadow:none; }
  header:not(.scrolled) .nav .lang{ border-color:rgba(42,33,27,.24); }
  body.nav-open .burger span{ background:var(--espresso); }
  body.nav-open .head-actions .ig{ color:var(--espresso); filter:none; }

  .hero-bg img{ object-position:50% 30%; }
  .hero-logo img{ width:min(340px, 78vw); }
  .hero .cta{ gap:10px; }
  .hero .btn{ padding:14px 26px; }
  .lead{ max-width:100%; }

  .casa-grid{ grid-template-columns:1fr; gap:26px; }
  .casa-foto{ max-width:420px; margin-inline:auto; }

  .horas{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:34px 26px; }
  /* Con 3 momentos, dos columnas dejaban uno solo en la fila de abajo:
     apilados quedan alineados y con el mismo aire. */
  .horas[data-n="3"]{ grid-template-columns:1fr; gap:28px; }
  .horas .n{ max-width:100%; }
  .panel{ grid-template-columns:1fr; }
  .pin-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .con-grid{ grid-template-columns:1fr; }
  .foot-mid{ flex-direction:column; }
}

@media (max-width:620px){
  :root{ --band-w:200px; --band-gap:16px; --band-time:44s; }
  body{ font-size:16px; }
  .pin-grid{ gap:22px 16px; }
}

@media (max-width:400px){
  :root{ --band-w:176px; --band-gap:14px; --band-time:40s; }
}

/* Móvil: los reveals sólo funden (nada de escala = nada de "zoom" al scrollear) */
@media (hover:none){
  .rv, .rv-s{ transform:none !important; }
}

/* ===========================================================
   ACCESIBILIDAD · movimiento reducido
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .band-track{ animation:none; }
  .pin img{ animation:none; }
  .intro-logo-box{ animation:none; opacity:1; transform:none; }
  .scroll-hint i{ animation:none; }
  .rv, .rv-s{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ transition-duration:.01ms !important; }
}