/* ============================================================
   EL REENCUENTRO · Benetússer (València)
   Dirección: negro carbón + oro del logo + brasa.
   Editorial, contrastado, con movimiento.
   ============================================================ */

:root{
  --negro:      #070708;
  --negro-2:    #0D0D0F;
  --carbon:     #131316;
  --carbon-2:   #1B1B20;
  --humo:       #26262C;

  --oro:        #D9A94C;
  --oro-claro:  #F6E3B0;
  --oro-hondo:  #8A6520;
  --brasa:      #E2622B;
  --grad-oro:   linear-gradient(100deg,#8A6520 0%,#F5D488 26%,#D9A94C 48%,#FBEDC4 72%,#A87C28 100%);

  /* los mismos colores en piezas sueltas, para poder cambiar de piel
     sin tocar cada borde y cada veladura de la hoja */
  --oro-rgb:       217,169,76;
  --oro-claro-rgb: 246,227,176;
  --negro-rgb:     7,7,8;
  --brasa-rgb:     226,98,43;
  /* las chispas de la portada las pinta js/app.js leyendo estas dos */
  --chispa-rgb:    246,227,176;
  --chispa-fuerza: 1;
  --sobre-oro:     #0B0906;

  --crema:      #F6F1E7;
  --texto:      #B9B2A6;
  --tenue:      #74706A;

  --f-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  /* textos: Source Serif 4, de la familia de Benton Modern (24/9) */
  --f-sans:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-script:  'Great Vibes', cursive;

  /* nada acaba en pico: un solo sitio donde cambiar la curva */
  --r-foto:   20px;
  --r-bloque: 28px;
  --r-chico:  14px;
  /* sombra de las fotos y tarjetas: que parezcan apoyadas, no pegadas */
  --sombra:   0 26px 50px -22px rgba(0,0,0,.75), 0 6px 16px -8px rgba(0,0,0,.5);
  --sombra-chica: 0 10px 20px -10px rgba(0,0,0,.6);

  --ancho: 1320px;
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
html.bloqueado, body.bloqueado{ overflow:hidden; height:100%; }

body{
  margin:0;
  background:var(--negro);
  color:var(--texto);
  font-family:var(--f-sans);
  font-size:17px;
  font-weight:400;
  line-height:1.65;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Grano de película */
body::after{
  content:""; position:fixed; inset:-120%; z-index:9000;
  pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grano 700ms steps(3) infinite;
}
@keyframes grano{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)}
}

img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--crema);
  font-weight:500;
  line-height:1.02;
  margin:0 0 .4em;
  letter-spacing:-.015em;
}
p{ margin:0 0 1.15em; }

.env{
  width:min(100% - 2.4rem, var(--ancho));
  margin-inline:auto;
  position:relative; z-index:2;
}
.env.estrecho{ width:min(100% - 2.4rem, 880px); }

/* ============================================================
   CURSOR
   ============================================================ */
.cursor,.cursor-anillo{
  position:fixed; top:0; left:0; z-index:9500;
  pointer-events:none; border-radius:50%;
  mix-blend-mode:difference;
}
.cursor{ width:6px; height:6px; background:var(--oro-claro); margin:-3px 0 0 -3px; }
.cursor-anillo{
  width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1px solid rgba(var(--oro-rgb),.55);
  transition:width .35s var(--e-out), height .35s var(--e-out), margin .35s var(--e-out), border-color .35s, background .35s;
}
body.toca .cursor-anillo{
  width:74px; height:74px; margin:-37px 0 0 -37px;
  background:rgba(var(--oro-rgb),.1); border-color:rgba(var(--oro-claro-rgb),.9);
}
@media (hover:none),(max-width:900px){ .cursor,.cursor-anillo{ display:none } }

/* ============================================================
   INTRO
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:9200;
  background:var(--negro);
  display:grid; place-items:center;
  overflow:hidden;
  cursor:pointer;
}

/* ---- El viaje: mapa, ruta y avión ---- */
.intro-mapa{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  opacity:0;
  animation:mapaEntra .9s ease .15s forwards,
            mapaSale 1.3s cubic-bezier(.7,0,.28,1) 4.15s forwards;
}
@keyframes mapaEntra{ to{ opacity:1 } }
@keyframes mapaSale{ to{ opacity:0; transform:scale(3.4) } }

.intro-mapa svg{
  width:min(94vw, 1000px); height:auto;
  transform-origin:85.3% 34.2%;   /* Benetússer: el zoom entra por ahí */
  overflow:visible;
}
.intro-mapa .malla{ stroke:rgba(var(--oro-rgb),.11); stroke-width:1; fill:none; }

/* Sudamérica y Portugal: solo dan contexto, quedan en segundo plano */
.intro-mapa .tierra{
  fill:rgba(var(--oro-rgb),.04);
  stroke:rgba(var(--oro-rgb),.26); stroke-width:1.1;
  stroke-dasharray:2600; stroke-dashoffset:2600;
  animation:dibuja 1.9s ease .2s forwards;
}
.intro-mapa .tierra.dos{ animation-delay:.55s }

/* Argentina y España: los protagonistas */
.intro-mapa .pais{
  fill:rgba(var(--oro-rgb),.14);
  stroke:var(--oro); stroke-width:1.9; stroke-linejoin:round;
  stroke-dasharray:2200; stroke-dashoffset:2200;
  animation:dibuja 1.7s ease .45s forwards;
}
.intro-mapa .pais.dos{ animation-delay:.8s }

/* Baleares: sin trazo animado, aparecen y ya */
.intro-mapa .islas{
  fill:rgba(var(--oro-rgb),.14); stroke:var(--oro); stroke-width:1.4;
  opacity:0; animation:aparece .7s ease 1.5s forwards;
}
@keyframes dibuja{ to{ stroke-dashoffset:0 } }

/* líneas finas que llevan del punto a su etiqueta */
.intro-mapa .guia{
  stroke:rgba(var(--oro-rgb),.45); stroke-width:1; fill:none;
  stroke-dasharray:130; stroke-dashoffset:130;
}
.intro-mapa .guia.ar{ animation:dibuja .6s ease 1.15s forwards }
.intro-mapa .guia.es{ animation:dibuja .6s ease 3.6s forwards }

/* El camino se intuye punteado y el avión va dejando la línea maciza.
   La ruta mide 690 unidades: por eso el dasharray es 700. */
.intro-mapa .ruta-base{
  fill:none; stroke:rgba(var(--oro-rgb),.28); stroke-width:1.6;
  stroke-dasharray:5 8; stroke-linecap:round;
  opacity:0; animation:aparece .6s ease 1.1s forwards;
}
.intro-mapa .ruta{
  fill:none; stroke:var(--oro-claro); stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:700; stroke-dashoffset:700;
  animation:vuela 2.5s cubic-bezier(.45,.02,.35,1) 1.35s forwards;
}
@keyframes vuela{ to{ stroke-dashoffset:0 } }

.intro-mapa .avion{
  opacity:0;
  animation:apareceAvion .3s ease 1.35s forwards, apagaAvion .4s ease 3.85s forwards;
}
.intro-mapa .avion path{ fill:var(--oro-claro); }
@keyframes apareceAvion{ to{ opacity:1 } }
@keyframes apagaAvion{ to{ opacity:0 } }

.intro-mapa .pin{ fill:var(--oro-claro); opacity:0; animation:aparece .5s ease forwards; }
.intro-mapa .pin.ar{ animation-delay:1.1s }
.intro-mapa .pin.es{ animation-delay:3.6s }
.intro-mapa .halo{
  fill:none; stroke:var(--oro); stroke-width:1.5; opacity:0;
  transform-box:fill-box; transform-origin:center;
}
.intro-mapa .halo.ar{ animation:late 1.9s ease-out 1.1s infinite }
.intro-mapa .halo.es{ animation:late 1.6s ease-out 3.6s infinite }
@keyframes late{
  0%{ opacity:.85; transform:scale(.3) }
  100%{ opacity:0; transform:scale(2.6) }
}
@keyframes aparece{ to{ opacity:1 } }

.intro-mapa .et{
  fill:var(--crema); font-family:'Sora',sans-serif;
  font-size:15px; letter-spacing:.24em; text-transform:uppercase;
  opacity:0; animation:aparece .6s ease forwards;
}
.intro-mapa .et.chica{ fill:var(--oro); font-size:11.5px; letter-spacing:.2em; }
.intro-mapa .et.ar{ animation-delay:1.25s }
.intro-mapa .et.es{ animation-delay:3.7s }

/* ---- El logo, al aterrizar ---- */
.intro-marca{
  position:relative; z-index:4;
  font-family:var(--f-script);
  font-size:clamp(2.6rem,9vw,6rem);
  line-height:1.5; padding:0 .12em;
  background:var(--grad-oro);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  clip-path:inset(-12% 101% -16% -6%);
  animation:escribe 1.5s cubic-bezier(.62,.03,.24,1) 4.5s forwards;
}
@keyframes escribe{ to{ clip-path:inset(-12% -6% -16% -6%) } }
.intro-logo-img{
  position:relative; z-index:4;
  height:clamp(90px,16vw,190px); width:auto;
  opacity:0; transform:scale(.94);
  animation:logoEntra 1.1s var(--e-out) 4.5s forwards;
}
@keyframes logoEntra{ to{ opacity:1; transform:scale(1) } }

.intro-linea{
  position:absolute; left:50%; bottom:19%; z-index:4;
  width:0; height:1px; background:var(--oro-hondo);
  transform:translateX(-50%);
  animation:linea 1.1s var(--e-out) 5.1s forwards;
}
@keyframes linea{ to{ width:min(56vw,460px) } }

.intro-pie{
  position:absolute; bottom:clamp(1.4rem,5vw,3rem); left:0; right:0; z-index:4;
  text-align:center; font-size:.62rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--humo);
}
.intro-saltar{
  position:absolute; top:clamp(1.2rem,4vw,2.4rem); right:clamp(1.2rem,4vw,2.4rem); z-index:5;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--tenue); border:1px solid rgba(var(--oro-rgb),.25);
  padding:.5rem 1rem; border-radius:100px; background:none; cursor:pointer;
  transition:color .35s, border-color .35s;
}
.intro-saltar:hover{ color:var(--oro-claro); border-color:var(--oro); }

/* ---- Cortinas que suben al final ---- */
.intro-panel{
  position:fixed; top:0; bottom:0; z-index:1;
  background:var(--negro); width:25.2%;
  transform:translateY(0);
}
.intro-panel:nth-child(1){ left:0 }
.intro-panel:nth-child(2){ left:25% }
.intro-panel:nth-child(3){ left:50% }
.intro-panel:nth-child(4){ left:75% }

.intro.fuera{ background:transparent; transition:background .5s ease .25s; }
.intro.fuera .intro-marca,
.intro.fuera .intro-logo-img,
.intro.fuera .intro-linea,
.intro.fuera .intro-pie,
.intro.fuera .intro-saltar,
.intro.fuera .intro-mapa{
  opacity:0; transition:opacity .4s ease; animation:none;
}
.intro.fuera .intro-panel{
  transform:translateY(-101%);
  transition:transform 1.05s var(--e-io);
}
.intro.fuera .intro-panel:nth-child(2){ transition-delay:.08s }
.intro.fuera .intro-panel:nth-child(3){ transition-delay:.16s }
.intro.fuera .intro-panel:nth-child(4){ transition-delay:.24s }

@media (max-width:620px){
  .intro-mapa .et{ font-size:22px }
  .intro-mapa .et.chica{ font-size:17px }
}

/* Cortina de cambio de página */
.cortina{
  position:fixed; inset:0; z-index:9000;
  background:var(--negro); transform:translateY(101%);
  pointer-events:none;
}
.cortina.entra{ transform:translateY(0); transition:transform .55s var(--e-io); }

/* ============================================================
   CABECERA
   ============================================================ */
.top{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  padding:1.35rem 0;
  transition:padding .5s var(--e-out), background .5s var(--e-out);
}
.top::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(var(--negro-rgb),.92), rgba(var(--negro-rgb),0));
  opacity:1; transition:opacity .4s;
}
.top.pegada{
  padding:.7rem 0;
  background:rgba(var(--negro-rgb),.82);
  backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 1px 0 rgba(var(--oro-rgb),.16);
}
.top.pegada::before{ opacity:0 }
.top.oculta{ transform:translateY(-104%); transition:transform .5s var(--e-io), padding .5s, background .5s; }

.top .env{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.logo{ display:flex; align-items:center; gap:.7rem; overflow:visible; }
.logo img{ height:60px; width:auto; transition:height .5s var(--e-out); }
.top.pegada .logo img{ height:46px; }
.logo-txt{
  font-family:var(--f-script);
  font-size:2.1rem;
  /* con hueco arriba y abajo: la caligráfica tiene rabos largos */
  line-height:1.55;
  padding:0 .14em;
  display:inline-block;
  background:var(--grad-oro);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap;
  transition:font-size .5s var(--e-out);
}
.top.pegada .logo-txt{ font-size:1.7rem; }

.nav{ display:flex; align-items:center; gap:2.4rem; }
.nav a{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--texto); position:relative; padding:.4rem 0; overflow:hidden;
  display:inline-block;
}
.nav a span{ display:block; transition:transform .45s var(--e-out); }
.nav a::after{
  content:attr(data-t); position:absolute; left:0; top:100%;
  color:var(--oro-claro); transition:transform .45s var(--e-out);
}
.nav a:hover span{ transform:translateY(-100%); }
.nav a:hover::after{ transform:translateY(-100%); }
.nav a.aqui{ color:var(--oro); }
.nav a.aqui::before{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--grad-oro);
}

.nav-btn{
  display:none; background:none; border:0; cursor:pointer;
  width:46px; height:40px; padding:9px; z-index:8600;
}
.nav-btn i{
  display:block; height:1.5px; background:var(--oro); margin:6px 0;
  transition:transform .4s var(--e-out), opacity .3s;
}
.nav-btn.x i:nth-child(1){ transform:translateY(7.5px) rotate(45deg) }
.nav-btn.x i:nth-child(2){ opacity:0 }
.nav-btn.x i:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg) }

/* ============================================================
   BOTONES
   ============================================================ */
.b{
  position:relative; display:inline-flex; align-items:center; gap:.8rem;
  padding:1.05rem 2.4rem; border-radius:100px;
  font-size:.71rem; letter-spacing:.24em; text-transform:uppercase; font-weight:400;
  border:1px solid rgba(var(--oro-rgb),.5); color:var(--oro-claro);
  overflow:hidden; cursor:pointer; background:transparent;
  transition:color .5s var(--e-out), border-color .5s;
  will-change:transform;
}
/* Sin rellenos que suben al pasar el ratón: solo el borde se aviva
   y la flecha se mueve. */
.b:hover{ color:var(--crema); border-color:var(--oro); }
.b .fl{ transition:transform .5s var(--e-out); }
.b:hover .fl{ transform:translateX(6px); }

/* El botón principal ya nace dorado; al pasar por encima solo aclara */
.b.lleno{
  color:var(--sobre-oro); border-color:transparent;
  background:var(--grad-oro);
  transition:filter .45s ease, color .4s;
}
.b.lleno:hover{ color:var(--sobre-oro); filter:brightness(1.1); }

/* ============================================================
   PORTADA
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:grid; align-items:center;
  padding:10rem 0 7rem; overflow:hidden;
}
/* el canvas es un elemento reemplazado: sin width/height explícitos
   se queda en sus 300x150 de fábrica */
#brasas{ position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; }
.hero-luz{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(620px 520px at var(--mx,50%) var(--my,42%), rgba(var(--brasa-rgb),.16), transparent 62%);
  transition:background .6s ease-out;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(900px 640px at 50% 30%, rgba(var(--oro-rgb),.11), transparent 65%),
    linear-gradient(180deg, transparent 55%, var(--negro) 98%);
}

.hero-cont{ position:relative; z-index:3; text-align:center; }

.hero .arriba{
  font-size:.68rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--oro); margin-bottom:2rem;
}
.hero h1{
  font-family:var(--f-script);
  font-size:clamp(3.6rem,13vw,10rem);
  line-height:1.28; padding:0 .1em; margin:0;
  background:var(--grad-oro);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 40px rgba(var(--oro-rgb),.22));
}
/* el nombre se "escribe" de izquierda a derecha */
.hero h1.escribe{ clip-path:inset(-10% 101% -14% -6%); }
.hero h1.escribe.va{
  clip-path:inset(-10% -6% -14% -6%);
  transition:clip-path 1.9s cubic-bezier(.62,.03,.24,1) .12s;
}

.hero .bajo{
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.1rem,2.6vw,1.85rem);
  color:var(--crema); margin:.6rem 0 .5rem;
}
.hero .sitio{
  font-size:.68rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--tenue); margin-bottom:3rem;
}
.hero .cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* letras que suben */
.letra{ display:inline-block; will-change:transform,opacity; }
.enmascara{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em; }

.baja{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  z-index:4; display:grid; place-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--tenue);
}
.baja .barra{
  width:1px; height:52px; background:linear-gradient(var(--oro),transparent);
  position:relative; overflow:hidden;
}
.baja .barra::after{
  content:""; position:absolute; inset:0;
  background:var(--oro-claro);
  animation:corre 2.2s var(--e-io) infinite;
}
@keyframes corre{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ============================================================
   CINTA
   ============================================================ */
.cinta{
  border-block:1px solid rgba(var(--oro-rgb),.18);
  background:var(--negro-2);
  padding:1.5rem 0; overflow:hidden; white-space:nowrap;
  position:relative; z-index:3;
}
.cinta-pista{ display:inline-flex; align-items:center; animation:desliza 42s linear infinite; }
.cinta:hover .cinta-pista{ animation-play-state:paused; }
.cinta span{
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.3rem,3.2vw,2.1rem); color:var(--crema);
  padding:0 1.6rem; opacity:.85;
}
.cinta b{ color:var(--oro); font-weight:400; padding:0 .2rem; }
@keyframes desliza{ to{ transform:translateX(-50%) } }

/* ============================================================
   SECCIONES
   ============================================================ */
.s{ padding:clamp(5.5rem,11vw,10rem) 0; position:relative; }
.s.oscura{ background:var(--negro-2); }

.enc{ margin-bottom:clamp(3rem,6vw,5rem); }
.enc.centro{ text-align:center; }
.enc .kicker{
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--oro); margin-bottom:1.4rem;
}
.enc .kicker::before{
  content:""; width:38px; height:1px; background:var(--oro-hondo);
}
.enc.centro .kicker::after{
  content:""; width:38px; height:1px; background:var(--oro-hondo);
}
.enc h2{
  font-size:clamp(2.3rem,6.4vw,4.6rem);
}
.enc h2 i{
  font-family:var(--f-script); font-style:normal;
  font-size:1.16em; line-height:1.3; padding:0 .06em;
  display:inline-block;
  background:var(--grad-oro);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.enc p{ max-width:56ch; color:var(--tenue); margin-top:1.2rem; font-size:1.02rem; }
.enc.centro p{ margin-inline:auto; }

/* ---------- Dos columnas ---------- */
.par{
  display:grid; gap:clamp(2.5rem,6vw,5.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  align-items:center;
}
.par.arriba{ align-items:flex-start; }

.enfoque{ position:relative; }
.enfoque .caja{
  position:relative; overflow:hidden;
  aspect-ratio:4/5; border-radius:var(--r-foto);
}
.enfoque img{ width:100%; height:100%; object-fit:cover; }
.enfoque .num{
  position:absolute; right:-.1em; bottom:-.32em; z-index:3;
  font-family:var(--f-display); font-size:clamp(5rem,13vw,10rem);
  color:transparent; -webkit-text-stroke:1px rgba(var(--oro-rgb),.4);
  line-height:1; pointer-events:none;
}

/* Marcador cuando aún no hay foto */
.hueco{
  display:grid; place-items:center; height:100%; width:100%; text-align:center;
  border-radius:var(--r-foto);
  background:
    repeating-linear-gradient(118deg, rgba(255,255,255,.014) 0 2px, transparent 2px 10px),
    linear-gradient(150deg,var(--carbon-2),var(--negro));
  font-family:var(--f-script); color:rgba(var(--oro-rgb),.22);
  font-size:clamp(1.5rem,3.6vw,2.4rem); line-height:1.6;
  border:1px solid rgba(var(--oro-rgb),.14);
}

/* ---------- Especialidades ---------- */
.espec{ display:grid; gap:0; border-top:1px solid rgba(var(--oro-rgb),.16); }
.fila-e{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:2rem; align-items:center;
  padding:clamp(1.6rem,3.4vw,2.5rem) .4rem;
  border-bottom:1px solid rgba(var(--oro-rgb),.16);
  position:relative; overflow:hidden;
  transition:padding-left .55s var(--e-out), color .4s;
}
.fila-e::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(var(--oro-rgb),.1), transparent 65%);
  transform:translateX(-101%); transition:transform .7s var(--e-out);
}
.fila-e:hover::before{ transform:translateX(0); }
.fila-e:hover{ padding-left:1.6rem; }
.fila-e>*{ position:relative; z-index:1; }
.fila-e .idx{
  font-family:var(--f-display); font-size:.9rem; color:var(--oro-hondo);
  min-width:2.4rem; transition:color .4s, transform .5s var(--e-out);
}
.fila-e:hover .idx{ color:var(--oro); transform:translateY(-2px); }
.fila-e h3{
  font-size:clamp(1.35rem,3.4vw,2.15rem); margin:0;
  transition:color .4s, transform .55s var(--e-out);
}
.fila-e:hover h3{ color:var(--oro-claro); }
.fila-e .d{ font-size:.92rem; color:var(--tenue); margin:.3rem 0 0; max-width:52ch; }
.fila-e .p{
  font-family:var(--f-display); font-size:clamp(1.1rem,2.6vw,1.55rem);
  color:var(--oro); white-space:nowrap; transition:color .4s;
}
.fila-e:hover .p{ color:var(--oro-claro); }

/* ---------- Tarjetas ---------- */
.malla{ display:grid; gap:1.4rem; }
.malla.c3{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.malla.c2{ grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)); }

.t{
  position:relative; padding:2.6rem 2rem; border-radius:var(--r-bloque);
  background:var(--carbon); border:1px solid rgba(var(--oro-rgb),.14);
  overflow:hidden; display:block;
  transition:transform .6s var(--e-out), border-color .5s, background .5s;
  transform-style:preserve-3d;
}
.t::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:100%;
  background:var(--grad-oro); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--e-out);
}
.t:hover{ border-color:rgba(var(--oro-rgb),.4); background:var(--carbon-2); }
.t:hover .ic{ border-color:var(--oro); color:var(--oro-claro); background:rgba(var(--oro-rgb),.12); }
.t:hover::after{ transform:scaleX(1); }
.t .ic{
  width:44px; height:44px; margin-bottom:1.5rem;
  display:grid; place-items:center;
  border:1px solid rgba(var(--oro-rgb),.35); border-radius:50%;
  color:var(--oro); font-family:var(--f-display); font-size:.9rem;
  transition:border-color .45s, color .45s, background .45s;
}
.t h3{ font-size:1.55rem; margin-bottom:.6rem; }
.t p{ font-size:.94rem; color:var(--tenue); margin:0; }

/* ---------- Cita a pantalla ---------- */
.golpe{
  padding:clamp(6rem,14vw,12rem) 0; text-align:center; position:relative;
  background:
    linear-gradient(rgba(var(--negro-rgb),.9),rgba(var(--negro-rgb),.94)),
    radial-gradient(720px 420px at 50% 50%, rgba(var(--brasa-rgb),.2), transparent 70%);
  border-block:1px solid rgba(var(--oro-rgb),.16);
}
.golpe q{
  font-family:var(--f-display); font-style:italic; quotes:none;
  font-size:clamp(1.7rem,5.2vw,3.6rem); line-height:1.28;
  color:var(--crema); display:block; max-width:22ch; margin-inline:auto;
}
.golpe .fi{
  margin-top:2rem; font-size:.66rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--oro);
}

/* ---------- Cifras ---------- */
.cifras{ display:grid; gap:2.4rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); text-align:center; }
.cifra .n{
  font-family:var(--f-display); font-size:clamp(2.6rem,7vw,4.4rem);
  line-height:1; color:var(--crema);
}
.cifra .n em{ font-style:normal; color:var(--oro); }
.cifra .e{
  margin-top:.7rem; font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--tenue);
}

/* ---------- Reseñas ---------- */
/* Carrusel: las reseñas cruzan la pantalla sin parar y se paran
   al pasar el ratón por encima. */
.tira{
  overflow:hidden; position:relative;
  width:100vw; margin-left:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tira-pista{
  display:flex; gap:1.5rem; width:max-content; padding:.6rem 0;
  animation:pasa 52s linear infinite;
}
.tira:hover .tira-pista{ animation-play-state:paused; }
/* dos filas: la de abajo va al revés y un poco más lenta */
.tira + .tira{ margin-top:1.4rem; }
.tira.al-reves .tira-pista{ animation-direction:reverse; animation-duration:60s; }
@keyframes pasa{ to{ transform:translateX(-50%) } }

.op{
  flex:0 0 clamp(280px, 34vw, 400px); border-radius:var(--r-bloque);
  padding:2.4rem 2rem; background:var(--carbon);
  border:1px solid rgba(var(--oro-rgb),.14); position:relative;
  transition:border-color .5s, background .5s;
}
.op:hover{ border-color:rgba(var(--oro-rgb),.4); background:var(--carbon-2); }
.op .est{ color:var(--oro); letter-spacing:.3em; font-size:.85rem; margin-bottom:1.2rem; }
.op q{
  font-family:var(--f-display); font-style:italic; quotes:none;
  font-size:1.12rem; color:var(--crema); display:block; margin-bottom:1.4rem;
}
.op .fi{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tenue); }

/* ============================================================
   CARTA
   ============================================================ */
/* Se queda arriba del todo y se va al bajar: David no quiere que
   le persiga por la pantalla ni que le coma sitio (12/9/2026). */
.barra-carta{
  padding:.4rem 0 1.4rem; margin-bottom:3rem;
  border-bottom:1px solid rgba(var(--oro-rgb),.12);
}
.tabs{ display:flex; gap:.5rem; }
.tabs, .al-botones{
  flex-wrap:nowrap; justify-content:center; justify-content:safe center;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  margin-inline:-1.2rem; padding-inline:1.2rem;
}
.tabs::-webkit-scrollbar, .al-botones::-webkit-scrollbar{ display:none; }
.tabs button, .al-btn, .al-limpiar{ flex:0 0 auto; }
.tabs button{
  background:transparent; border:1px solid rgba(var(--oro-rgb),.2); border-radius:100px;
  color:var(--texto); padding:.6rem 1.3rem; cursor:pointer;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  transition:color .4s, border-color .4s, background .4s, transform .4s var(--e-out);
}
.tabs button:hover{ border-color:var(--oro); color:var(--oro-claro); transform:translateY(-2px); }
.tabs button.on{ background:var(--grad-oro); color:var(--sobre-oro); border-color:transparent; }

.grupo{ margin-bottom:clamp(3.5rem,7vw,6rem); scroll-margin-top:170px; }
.grupo>h2{
  font-size:clamp(1.9rem,5vw,3.2rem); text-align:center; margin-bottom:.3rem;
}
.grupo .sub{
  text-align:center; color:var(--tenue); font-size:.92rem;
  max-width:54ch; margin:0 auto 3rem;
}

.platos{ display:grid; gap:0 3.5rem; grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)); }
.pl{
  padding:1.35rem 0; border-bottom:1px solid rgba(var(--oro-rgb),.13);
  transition:padding-left .5s var(--e-out);
}
.pl:hover{ padding-left:.7rem; }
.pl .l{ display:flex; align-items:baseline; gap:.8rem; }
.pl .n{
  font-family:var(--f-display); font-size:1.24rem; color:var(--crema);
  transition:color .35s;
}
.pl:hover .n{ color:var(--oro-claro); }
.pl .g{ flex:1; border-bottom:1px dotted rgba(var(--oro-rgb),.3); transform:translateY(-5px); }
.pl .p{
  font-family:var(--f-display); font-size:1.2rem; color:var(--oro);
  white-space:nowrap; transition:color .35s;
}
.pl:hover .p{ color:var(--oro-claro); }
.pl .d{ margin:.35rem 0 0; font-size:.9rem; color:var(--tenue); }
.pl .mas{ display:block; font-size:.8rem; color:var(--oro); opacity:.8; margin-top:.3rem; }

.nota-carta{
  text-align:center; padding:2rem 1.6rem; font-size:.9rem; color:var(--tenue);
  border-radius:var(--r-foto);
  border:1px solid rgba(var(--oro-rgb),.14); background:var(--carbon);
}

/* ---- Filtro de alérgenos ---- */
.filtro-al{ margin:.95rem 0 0; text-align:center; }
.filtro-al .titulo{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--tenue); margin:0 auto .75rem;
}
.filtro-al-info{ text-align:center; margin-bottom:2.4rem; }
.filtro-al-info:empty{ display:none; }
.al-botones{ display:flex; gap:.5rem; }
.al-btn, .al-limpiar{
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; border:1px solid rgba(var(--oro-rgb),.2); border-radius:100px;
  color:var(--texto); padding:.55rem 1.1rem; cursor:pointer;
  font-family:var(--f-sans); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  transition:color .4s, border-color .4s, background .4s, transform .4s var(--e-out);
}
.al-btn::before{
  content:""; width:8px; height:8px; border-radius:50%;
  border:1.5px solid rgba(var(--oro-rgb),.55);
  transition:background .3s, border-color .3s;
}
.al-btn:hover, .al-limpiar:hover{ border-color:var(--oro); color:var(--oro-claro); transform:translateY(-2px); }
.al-btn:hover::before{ background:rgba(var(--oro-rgb),.55); border-color:var(--oro); }
.al-btn.on{ background:var(--grad-oro); border-color:transparent; color:var(--sobre-oro); }
.al-btn.on::before{ background:var(--sobre-oro); border-color:var(--sobre-oro); }
.al-limpiar{ border-color:rgba(var(--oro-rgb),.5); color:var(--oro-claro); }
.al-aviso{
  margin:0 auto; max-width:62ch; font-size:.88rem;
  color:var(--oro); opacity:.9;
}

/* etiquetas de alérgenos dentro de cada plato */
.pl .al{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.55rem; }
.pl .al span{
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tenue); border:1px solid rgba(var(--oro-rgb),.18);
  border-radius:100px; padding:.22rem .6rem; line-height:1.4;
}
.pl:hover .al span{ border-color:rgba(var(--oro-rgb),.34); color:var(--texto); }

.al-vacio{
  margin:1.4rem auto 0; max-width:56ch; padding:1.6rem 1.4rem;
  border-radius:var(--r-foto);
  border:1px solid rgba(var(--oro-rgb),.18); background:var(--carbon);
}
.al-vacio p{ margin:0 0 1.1rem; font-size:.92rem; color:var(--texto); }

.grupo.sin-platos{ display:none; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form{
  background:var(--carbon); border:1px solid rgba(var(--oro-rgb),.14);
  padding:clamp(1.8rem,4vw,3.2rem); border-radius:var(--r-bloque);
}
.cs{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.c{ display:flex; flex-direction:column; gap:.5rem; }
.c.full{ grid-column:1/-1; }
.c label{ font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--oro); }
.c input,.c select,.c textarea{
  background:transparent; border:0; border-bottom:1px solid rgba(var(--oro-rgb),.26);
  color:var(--crema); padding:.7rem .1rem; font-family:var(--f-sans); font-size:.98rem;
  transition:border-color .4s;
}
.c select option{ background:var(--carbon); color:var(--crema); }
.c input:focus,.c select:focus,.c textarea:focus{ outline:none; border-bottom-color:var(--oro); }
.c textarea{ resize:vertical; min-height:110px; }
.pie-f{ margin-top:2rem; display:flex; justify-content:space-between; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.pie-f .n{ font-size:.78rem; color:var(--tenue); margin:0; max-width:44ch; }

/* ============================================================
   CONTACTO
   ============================================================ */
.datos{ display:grid; gap:0; border-top:1px solid rgba(var(--oro-rgb),.16); }
.datos .d{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  padding:1.5rem .2rem; border-bottom:1px solid rgba(var(--oro-rgb),.16);
  transition:padding-left .5s var(--e-out);
}
.datos .d:hover{ padding-left:.8rem; }
.datos .d .k{
  font-family:var(--f-display); font-size:.78rem; color:var(--oro-hondo);
  min-width:2.2rem; padding-top:.35rem;
}
.datos .d h3{
  font-family:var(--f-sans); font-weight:400;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--oro); margin:0 0 .35rem;
}
.datos .d p{ margin:0; font-size:1.02rem; color:var(--crema); }
.datos .d a{ transition:color .35s; }
.datos .d a:hover{ color:var(--oro); }

.mapa{
  width:100%; height:100%; min-height:440px; border:1px solid rgba(var(--oro-rgb),.16);
  border-radius:var(--r-foto);
  filter:invert(1) hue-rotate(180deg) saturate(.5) brightness(.9) contrast(1.06);
  transition:filter .6s;
}
.mapa:hover{ filter:invert(1) hue-rotate(180deg) saturate(.8) brightness(1) contrast(1.06); }

.horas{ width:100%; border-collapse:collapse; }
.horas td{
  padding:1rem .2rem; border-bottom:1px solid rgba(var(--oro-rgb),.13);
  font-size:.96rem;
}
.horas td:last-child{ text-align:right; color:var(--crema); }
.horas tr.hoy td{ color:var(--oro-claro); }
.horas tr.hoy td:first-child::before{ content:"— "; color:var(--oro); }
.horas td.cerrado{ color:var(--tenue); font-style:italic; }
.horas tr.hoy td.cerrado{ color:var(--oro); opacity:.75; }

/* ============================================================
   PIE
   ============================================================ */
.pie{ background:var(--negro-2); border-top:1px solid rgba(var(--oro-rgb),.16); padding:clamp(4rem,8vw,6.5rem) 0 2rem; }
.pie-cta{ text-align:center; margin-bottom:clamp(3rem,6vw,5rem); }
.pie-cta .gr{
  font-family:var(--f-script); font-size:clamp(2.6rem,8vw,6rem);
  line-height:1.35; padding:0 .08em;
  background:var(--grad-oro); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pie-malla{ display:grid; gap:2.6rem; grid-template-columns:1.5fr 1fr 1fr; margin-bottom:3rem; }
.pie h4{
  font-family:var(--f-sans); font-weight:400;
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--oro); margin-bottom:1.3rem;
}
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.pie li,.pie p{ font-size:.94rem; }
.pie a{ position:relative; transition:color .35s; }
.pie a:hover{ color:var(--oro-claro); }
/* Semáforo de "abierto ahora", al final del pie */
.estado{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.6rem 1.3rem; border-radius:100px;
  border:1px solid currentColor;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:1.6rem;
}
.estado .luz{
  width:9px; height:9px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 0 currentColor;
  animation:pulso 2.2s ease-out infinite;
}
@keyframes pulso{
  0%{ box-shadow:0 0 0 0 currentColor; opacity:1 }
  70%{ box-shadow:0 0 0 9px transparent; opacity:.85 }
  100%{ box-shadow:0 0 0 0 transparent; opacity:1 }
}
.estado.abierto{ color:#5FBF7A; background:rgba(95,191,122,.08); }
.estado.cerrado{ color:#D8564E; background:rgba(216,86,78,.08); }
.estado .detalle{ color:var(--tenue); letter-spacing:.12em; text-transform:none; font-size:.72rem; }

.pie .legal{
  border-top:1px solid rgba(var(--oro-rgb),.13); padding-top:1.6rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.75rem; color:var(--tenue);
}
.redes{ display:flex; gap:.7rem; margin-top:1.4rem; }
.redes a{
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(var(--oro-rgb),.24);
  transition:border-color .4s, background .4s, transform .5s var(--e-out);
}
.redes a:hover{ border-color:var(--oro); background:rgba(var(--oro-rgb),.12); transform:translateY(-4px); }
.redes svg{ width:16px; height:16px; fill:var(--oro); }

/* Barra fija móvil */
.movil{
  position:fixed; bottom:0; left:0; right:0; z-index:7000;
  display:none; grid-template-columns:1fr 1fr;
  background:rgba(var(--negro-rgb),.94); backdrop-filter:blur(14px);
  border-top:1px solid rgba(var(--oro-rgb),.2);
}
.movil a{
  padding:1rem; text-align:center;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-claro);
}
.movil a+a{ border-left:1px solid rgba(var(--oro-rgb),.2); }

/* ============================================================
   CABECERA DE PÁGINA INTERIOR
   ============================================================ */
.pag{
  padding:14rem 0 clamp(4rem,8vw,7rem); position:relative; overflow:hidden;
  border-bottom:1px solid rgba(var(--oro-rgb),.16);
}
.pag::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(760px 420px at 50% -10%, rgba(var(--oro-rgb),.13), transparent 66%);
}
.pag .ruta{
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tenue); margin-bottom:1.6rem;
}
.pag .ruta a:hover{ color:var(--oro); }
.pag h1{ font-size:clamp(2.6rem,8vw,6rem); margin:0; }
.pag h1 i{
  font-family:var(--f-script); font-style:normal; display:block;
  font-size:1.1em; line-height:1.35; padding:0 .06em;
  background:var(--grad-oro); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pag p{ color:var(--tenue); max-width:58ch; margin-top:1.4rem; }

/* ============================================================
   ANIMACIONES DE SCROLL
   ============================================================ */
.rv{ opacity:0; transform:translateY(38px); }
.rv.vi{ opacity:1; transform:none; transition:opacity 1s var(--e-out), transform 1.05s var(--e-out); }
.rv.d1.vi{ transition-delay:.09s } .rv.d2.vi{ transition-delay:.18s }
.rv.d3.vi{ transition-delay:.27s } .rv.d4.vi{ transition-delay:.36s }

/* Nada de máscaras ni zoom en las fotos: entran con el mismo fundido
   hacia arriba que el resto (.rv). */

/* línea que se dibuja */
.ln{ transform:scaleX(0); transform-origin:left; }
.ln.vi{ transform:scaleX(1); transition:transform 1.1s var(--e-out); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .pie-malla{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav-btn{ display:block; }
  .nav{
    position:fixed; inset:0; z-index:8500;
    flex-direction:column; justify-content:center; gap:2.4rem;
    background:rgba(var(--negro-rgb),.98); backdrop-filter:blur(14px);
    clip-path:circle(0% at calc(100% - 46px) 42px);
    transition:clip-path .75s var(--e-io);
  }
  .nav.abierto{ clip-path:circle(150% at calc(100% - 46px) 42px); }
  .nav a{ font-size:1.35rem; letter-spacing:.1em; font-family:var(--f-display); text-transform:none; }
  .nav a::after{ display:none }
  .movil{ display:grid; }
  body{ padding-bottom:56px; }
  .barra-carta{ margin-inline:-1.2rem; padding-inline:1.2rem; margin-bottom:2.2rem; }
  .filtro-al{ margin-top:.75rem; }
  .filtro-al .titulo{ margin-bottom:.6rem; }
  .al-botones{ gap:.4rem; }
  .al-btn, .al-limpiar{ padding:.5rem .8rem; letter-spacing:.1em; gap:.4rem; }
  .grupo{ scroll-margin-top:100px; }
  .pie-malla{ grid-template-columns:1fr; text-align:center; }
  .pie ul{ justify-items:center; }
  .redes{ justify-content:center; }
  .pag{ padding-top:10.5rem; }
  .fila-e{ grid-template-columns:auto 1fr; gap:1.2rem; }
  .fila-e .p{ grid-column:2; }
  .enfoque .num{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .rv,.mk,.ln{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  body::after{ display:none }
}

/* ---- Fotos de los platos (24/9) ---- */
.pl.con-foto{ display:grid; grid-template-columns:118px 1fr; column-gap:1.4rem; align-items:center; }
.pl.con-foto>*{ grid-column:2; }
.pl.con-foto>.foto-pl{ grid-column:1; grid-row:1 / span 4; }
.foto-pl,.foto-g{
  display:block; padding:0; border:0; background:var(--carbon); cursor:zoom-in;
  overflow:hidden; border-radius:var(--r-chico);
}
.foto-pl{ width:118px; height:118px; }
.foto-pl img,.foto-g img{ width:100%; height:100%; object-fit:cover; display:block; }
.foto-pl:focus-visible,.foto-g:focus-visible{ outline:2px solid var(--oro); outline-offset:3px; }

.fotos-grupo{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  max-width:720px; margin:-1.4rem auto 2.6rem;
}
.foto-g{ aspect-ratio:4/3; border-radius:var(--r-foto); }

/* ---- Visor de fotos ---- */
.visor{
  position:fixed; inset:0; z-index:9400;
  display:flex; align-items:center; justify-content:center;
  padding:4.5rem 1rem 3.5rem;
  background:rgba(7,7,8,.93); opacity:0; transition:opacity .25s ease;
}
.visor.on{ opacity:1; }
.visor[hidden]{ display:none; }
.visor-img{
  max-width:min(100%,1000px); max-height:100%; object-fit:contain;
  border-radius:var(--r-chico); box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.visor-x,.visor-f{
  position:absolute; display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(20,20,22,.6);
  color:#F6F1E7; cursor:pointer; transition:background .2s, border-color .2s;
}
.visor-x:hover,.visor-f:hover{ background:rgba(40,40,44,.85); border-color:rgba(255,255,255,.5); }
.visor-x{ top:1rem; right:1rem; }
.visor-f{ top:50%; transform:translateY(-50%); display:none; }
.visor.varias .visor-f{ display:grid; }
.visor-f.ant{ left:1rem; }
.visor-f.sig{ right:1rem; }
.visor-n{
  position:absolute; bottom:1.2rem; left:0; right:0; text-align:center;
  font-size:.8rem; letter-spacing:.2em; color:rgba(246,241,231,.7);
}

/* ---- Cenas y eventos (inicio) ---- */
.eventos{
  display:grid; gap:1rem;
  grid-template-columns:1fr .75fr; max-width:900px; margin-inline:auto;
  height:clamp(380px,48vw,560px);
}
.eventos .foto-g{ aspect-ratio:auto; height:100%; }
.eventos .vid{
  overflow:hidden;
  border-radius:var(--r-foto); background:var(--carbon);
}
.eventos .vid video{ width:100%; height:100%; object-fit:cover; display:block; }
.eventos-cta{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.6rem; }

@media (max-width:720px){
  .pl.con-foto{ grid-template-columns:92px 1fr; column-gap:1rem; }
  .foto-pl{ width:92px; height:92px; }
  .fotos-grupo{ gap:.7rem; margin-top:-1.8rem; }
  .eventos{ grid-template-columns:1fr 1fr; height:auto; gap:.7rem; }
  .eventos .foto-g{ aspect-ratio:auto; height:100%; }
  .eventos .vid{ aspect-ratio:9/16; }
  .visor-f.ant{ left:.4rem; } .visor-f.sig{ right:.4rem; }
}
/* con una foto abierta, el interruptor de piel se aparta */
html:has(.visor.on) .piel-btn{ opacity:0; pointer-events:none; }
.fotos-grupo.una{ grid-template-columns:1fr; max-width:380px; }
.fotos-grupo.una .foto-g{ aspect-ratio:4/5; }

/* ---- Fotos de platos bajo las especialidades (inicio) ---- */
.espec-fotos{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3rem; }
.ef{ position:relative; display:block; overflow:hidden; border-radius:var(--r-foto); aspect-ratio:4/5; background:var(--carbon); }
.ef img{ width:100%; height:100%; object-fit:cover; display:block; }
.ef span{
  position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1rem .9rem;
  font-family:var(--f-display); font-size:1.02rem; line-height:1.25; color:#F6F1E7;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
}
@media (max-width:720px){ .espec-fotos{ grid-template-columns:1fr 1fr; gap:.7rem; } }


/* ============================================================
   PORTADA CON FOTO, FORMAS VIVAS Y PROFUNDIDAD (24/9)
   ============================================================ */

/* La foto del local lleno detrás del nombre, con velo para leer */
.hero-foto{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(7,7,8,.78) 0%, rgba(7,7,8,.58) 45%, rgba(7,7,8,.9) 100%),
    url("../img/eventos/cena-3.jpg") center 40% / cover no-repeat;
}
.hero .sitio{ color:rgba(246,241,231,.7); }

/* Sombras: las fotos y tarjetas se apoyan sobre la página */
.enfoque .caja img,.foto-g,.ef,.t,.op,.eventos .vid{ box-shadow:var(--sombra); }
.foto-pl{ box-shadow:var(--sombra-chica); }

/* ---- Foto en arco: recta arriba, redonda abajo.
   Al pasar el ratón (o tocarla) el redondeo se va arriba. ----
   En .enfoque la forma va en la imagen y no en la caja, porque
   la caja ya se inclina con el ratón y pisa su transición. */
.enfoque .forma-arco,.enfoque .forma-viva{ overflow:visible; border-radius:0; }
.forma-arco img{
  border-radius:7% 7% 50% 50% / 5.5% 5.5% 40% 40%;
  transition:border-radius .9s var(--e-out), opacity 1s var(--e-out), transform 1.05s var(--e-out);
}
.forma-arco:hover img{
  border-radius:50% 50% 7% 7% / 40% 40% 5.5% 5.5%;
}

/* ---- Foto viva: casi redonda sin serlo, y el borde respira ---- */
.forma-viva img{ border-radius:58% 42% 38% 62% / 42% 45% 55% 58%; animation:respira 14s ease-in-out infinite alternate, flota 9s ease-in-out infinite; }
.foto-pl{ border-radius:58% 42% 38% 62% / 42% 45% 55% 58%; animation:respira 11s ease-in-out infinite alternate; }
.pl:nth-child(2n) .foto-pl{ animation-delay:-4s; }
.pl:nth-child(3n) .foto-pl{ animation-delay:-8s; animation-duration:13s; }
@keyframes respira{
  0%  { border-radius:58% 42% 38% 62% / 42% 45% 55% 58%; }
  33% { border-radius:45% 55% 62% 38% / 53% 38% 62% 47%; }
  66% { border-radius:38% 62% 45% 55% / 60% 52% 48% 40%; }
  100%{ border-radius:55% 45% 52% 48% / 42% 58% 42% 58%; }
}
/* se desplaza un poco, sin zoom: usa "translate", que no choca
   con la inclinación que el ratón pone en "transform" */
@keyframes flota{
  0%,100%{ translate:0 0; }
  50%    { translate:6px -10px; }
}

@media (prefers-reduced-motion:reduce){
  .forma-viva img,.foto-pl{ animation:none; }
  .forma-arco img{ transition:none; }
}


/* ---- Fila de platos del inicio: arcos alternos (24/9) ----
   Uno con la curva abajo, el siguiente con la curva arriba. Al
   pasar el ratón cada uno se da la vuelta. En móvil (2 columnas)
   van en damero para que no queden dos iguales pegados. */
.espec-fotos .ef{ transition:border-radius .9s var(--e-out), opacity 1s var(--e-out), transform 1.05s var(--e-out); }
.espec-fotos .ef span{ text-align:center; padding:2.4rem 1.4rem 1rem; transition:padding .9s var(--e-out); }
.espec-fotos .ef:nth-child(odd){ border-radius:7% 7% 50% 50% / 5.5% 5.5% 40% 40%; }
.espec-fotos .ef:nth-child(odd) span{ padding-bottom:2rem; }
.espec-fotos .ef:nth-child(even){ border-radius:50% 50% 7% 7% / 40% 40% 5.5% 5.5%; }
.espec-fotos .ef:nth-child(odd):hover,.espec-fotos .ef:nth-child(odd):focus-visible{ border-radius:50% 50% 7% 7% / 40% 40% 5.5% 5.5%; }
.espec-fotos .ef:nth-child(odd):hover span{ padding-bottom:1rem; }
.espec-fotos .ef:nth-child(even):hover,.espec-fotos .ef:nth-child(even):focus-visible{ border-radius:7% 7% 50% 50% / 5.5% 5.5% 40% 40%; }
.espec-fotos .ef:nth-child(even):hover span{ padding-bottom:2rem; }
@media (max-width:720px){
  .espec-fotos .ef:nth-child(3){ border-radius:50% 50% 7% 7% / 40% 40% 5.5% 5.5%; }
  .espec-fotos .ef:nth-child(3) span{ padding-bottom:1rem; }
  .espec-fotos .ef:nth-child(4){ border-radius:7% 7% 50% 50% / 5.5% 5.5% 40% 40%; }
  .espec-fotos .ef:nth-child(4) span{ padding-bottom:2rem; }
  .espec-fotos .ef:nth-child(3):hover{ border-radius:7% 7% 50% 50% / 5.5% 5.5% 40% 40%; }
  .espec-fotos .ef:nth-child(4):hover{ border-radius:50% 50% 7% 7% / 40% 40% 5.5% 5.5%; }
}

/* ============================================================
   FAUNA ARGENTINA EN SOMBRA (24/9, segunda versión) · js/fauna.js
   Siluetas de un solo color. El ojo es un agujero del color del
   fondo, así parpadea. Las patas y el ala del otro lado, más claras.
   ============================================================ */
:root{ --fauna:rgba(226,208,178,.8); --fauna-lejos:rgba(226,208,178,.45); }
html.claro{ --fauna:rgba(42,29,23,.86); --fauna-lejos:rgba(42,29,23,.45); }

/* ---- La llama y su suelo ---- */
.espec-fotos.con-llama{ position:relative; margin-top:7.5rem; }
.espec-fotos.con-llama::before{
  content:""; position:absolute; left:0; right:0; bottom:calc(100% + 1.4rem);
  border-top:1px dashed rgba(var(--oro-rgb),.35);
}
.llama{
  position:absolute; left:0; bottom:calc(100% + 1.4rem - 2px); z-index:3;
  width:clamp(78px,8.5vw,108px); cursor:pointer; will-change:transform;
  -webkit-tap-highlight-color:transparent;
}
.llama svg{ width:100%; height:auto; display:block; overflow:visible; }
.llama svg *{ fill:var(--fauna); }
.llama .ll-lejos *{ fill:var(--fauna-lejos); }
.llama .ll-ojo{ fill:var(--negro); transform-box:fill-box; transform-origin:center; animation:parpadea 4.8s infinite; }
.llama .ll-gota{ fill:var(--fauna-lejos); opacity:0; transform-box:fill-box; }
.llama .ll-z text{ fill:var(--fauna); font-family:var(--f-display); font-style:italic; font-size:11px; opacity:0; }

.llama .ll-todo{ transition:transform .9s var(--e-out); }
.llama .ll-cuerpo{ transform-box:fill-box; transform-origin:50% 100%; animation:respira 3.6s ease-in-out infinite; }
.llama .ll-cuello{ transform-box:view-box; transform-origin:76px 62px; transition:transform .7s var(--e-out); }
.llama .ll-pata{ transform-box:view-box; transition:transform .6s var(--e-out); }
.llama .ll-cana{ transform-box:view-box; }
.llama .tl{ transform-origin:40px 70px; } .llama .tl .ll-cana{ transform-origin:40px 92px; }
.llama .dl{ transform-origin:74px 70px; } .llama .dl .ll-cana{ transform-origin:74px 92px; }
.llama .tc{ transform-origin:33px 70px; } .llama .tc .ll-cana{ transform-origin:33px 92px; }
.llama .dc{ transform-origin:68px 70px; } .llama .dc .ll-cana{ transform-origin:68px 92px; }
.llama .ll-oreja{ transform-box:fill-box; transform-origin:50% 100%; transition:transform .25s ease; }
.llama .ll-cola{ transform-box:fill-box; transform-origin:100% 25%; transition:transform .3s ease; }
.llama .ll-mandibula{ transform-box:fill-box; transform-origin:10% 20%; }

/* andando: paso de cuatro tiempos, como las llamas de verdad */
.llama.anda .ll-pata{ animation:muslo 1.05s linear infinite; }
.llama.anda .ll-cana{ animation:cana 1.05s linear infinite; }
.llama.anda .tc,.llama.anda .tc .ll-cana{ animation-delay:0s; }
.llama.anda .dc,.llama.anda .dc .ll-cana{ animation-delay:-.79s; }
.llama.anda .tl,.llama.anda .tl .ll-cana{ animation-delay:-.525s; }
.llama.anda .dl,.llama.anda .dl .ll-cana{ animation-delay:-.26s; }
.llama.anda .ll-todo{ animation:bota .525s ease-in-out infinite alternate; }
.llama.anda .ll-cuello{ animation:cabecea 1.05s ease-in-out infinite; }
.llama.corre .ll-pata,.llama.corre .ll-cana,.llama.corre .ll-cuello{ animation-duration:.42s; }
.llama.corre .ll-todo{ animation-duration:.21s; }

/* parada */
.llama.mira .ll-cuello{ transform:rotate(-8deg); }
.llama.mira .ll-oreja{ transform:rotate(-6deg); }
.llama.mastica .ll-mandibula{ animation:mastica .3s ease-in-out 8 alternate; }
.llama.oreja-1 .o1,.llama.oreja-2 .o2{ transform:rotate(22deg); }
.llama.coletazo .ll-cola{ transform:rotate(-24deg); }

/* clic: escupe */
.llama.escupe .ll-cuello{ animation:escupe .9s var(--e-out); }
.llama.escupe .ll-gota{ animation:gota .75s ease-out .18s; }
.llama.enfadada .ll-oreja{ transform:rotate(-38deg); }
.llama.respingo .ll-todo{ animation:respingo .6s var(--e-out); }

/* durmiendo: se tumba con las patas recogidas, el cuello sigue en alto */
.llama.duerme .ll-pata{ transform:rotate(-78deg) scale(.55); }
.llama.duerme .ll-todo{ transform:translateY(30px); }
.llama.duerme .ll-cuello{ transform:rotate(9deg) translateY(2px); }
.llama.duerme .ll-cuerpo{ animation-duration:5.5s; }
.llama.duerme .ll-ojo{ animation:none; transform:scaleY(.12); }
.llama.duerme .ll-z text{ animation:zeta 3s ease-out infinite; }
.llama.duerme .ll-z text:nth-child(2){ animation-delay:1s; }
.llama.duerme .ll-z text:nth-child(3){ animation-delay:2s; }

@keyframes muslo{
  0%  { transform:rotate(-19deg) }   /* apoya delante */
  60% { transform:rotate(17deg) }    /* empuja hasta atrás */
  80% { transform:rotate(-4deg) }
  100%{ transform:rotate(-19deg) }
}
@keyframes cana{
  0%,58%{ transform:rotate(0) }
  72%   { transform:rotate(42deg) }  /* dobla la rodilla al levantar */
  92%   { transform:rotate(6deg) }
  100%  { transform:rotate(0) }
}
@keyframes bota{ from{ transform:translateY(0) } to{ transform:translateY(-1.4px) } }
@keyframes cabecea{ 0%,100%{ transform:rotate(0) } 25%{ transform:rotate(-2.5deg) } 75%{ transform:rotate(2deg) } }
@keyframes respira{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(1.025) } }
@keyframes parpadea{ 0%,93%,100%{ transform:scaleY(1) } 96%{ transform:scaleY(.1) } }
@keyframes mastica{ from{ transform:rotate(0) } to{ transform:rotate(9deg) } }
@keyframes escupe{ 0%{ transform:rotate(0) } 25%{ transform:rotate(-13deg) } 45%{ transform:rotate(7deg) } 100%{ transform:rotate(0) } }
@keyframes gota{
  0%  { opacity:1; transform:translate(0,0) }
  50% { opacity:1; transform:translate(15px,-5px) }
  100%{ opacity:0; transform:translate(30px,12px) }
}
@keyframes respingo{ 0%,100%{ transform:translateY(30px) } 35%{ transform:translateY(-6px) } 70%{ transform:translateY(0) } }
@keyframes zeta{ 0%{ opacity:0; transform:translate(0,0) } 25%{ opacity:.85 } 100%{ opacity:0; transform:translate(7px,-13px) } }

/* ---- El cóndor posado encima de las empanadas ---- */
.condor-posado{
  position:absolute; left:56%; top:0; z-index:3; width:clamp(72px,7.5vw,96px);
  transform:translate(-50%,calc(-100% + 3px)); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.condor-posado svg{ width:100%; height:auto; display:block; overflow:visible; }
.condor-posado svg *{ fill:var(--fauna); }
.condor-posado .cp-pata{ fill:none; stroke:var(--fauna); stroke-width:2.6; stroke-linecap:round; }
.condor-posado .cp-ojo{ fill:var(--negro); transform-box:fill-box; transform-origin:center; animation:parpadea 5.4s infinite; }
.condor-posado .cp-ala.lejos *{ fill:var(--fauna-lejos); }
.condor-posado .cp-cuerpo{ transform-box:fill-box; transform-origin:50% 100%; animation:respira 4.2s ease-in-out infinite; }
.condor-posado .cp-cabeza{ transform-box:view-box; transform-origin:55px 42px; transition:transform .35s cubic-bezier(.3,1.4,.5,1); }
.condor-posado .cp-cola{ transform-box:fill-box; transform-origin:90% 10%; transition:transform .3s ease; }
/* las alas: plegadas no se ven; se abren desde el hombro */
.condor-posado .cp-ala{ transform-box:view-box; transform-origin:50px 48px; transform:rotate(38deg) scale(.15); opacity:0;
  transition:transform .45s var(--e-out), opacity .2s; }
.condor-posado .cp-ala.lejos{ transform-origin:52px 46px; }

/* gestos de pájaro: la cabeza gira a golpes, no en suave */
.condor-posado.mira-atras .cp-cabeza,
.condor-posado.te-mira .cp-cabeza{ transform:translateX(-4px) scaleX(-1); transition-duration:.12s; }
.condor-posado.mira-abajo .cp-cabeza{ transform:rotate(22deg); }
.condor-posado.acicala .cp-cabeza{ animation:acicala 1.8s ease-in-out; }
.condor-posado.sacude svg{ animation:sacude .7s ease-in-out; }
.condor-posado.sacude .cp-cola{ transform:rotate(-12deg); }
.condor-posado.estira .cp-ala.cerca{ transform:rotate(-8deg) scale(.95); opacity:1; }

/* clic: se agacha, abre las alas y aletea; vuelve planeando */
.condor-posado.despega svg{ transform:translateY(4px) scaleY(.94); transition:transform .25s; }
.condor-posado.despega .cp-ala,.condor-posado.vuela .cp-ala,
.condor-posado.planea .cp-ala,.condor-posado.aterriza .cp-ala{ opacity:1; }
.condor-posado.despega .cp-ala.cerca{ transform:rotate(-20deg); }
.condor-posado.despega .cp-ala.lejos{ transform:rotate(-10deg) scale(.85); }
.condor-posado.vuela .cp-ala.cerca{ animation:aleteo .34s ease-in-out infinite alternate; }
.condor-posado.vuela .cp-ala.lejos{ animation:aleteo-l .34s ease-in-out infinite alternate; }
.condor-posado.planea .cp-ala.cerca{ transform:rotate(-2deg); }
.condor-posado.planea .cp-ala.lejos{ transform:rotate(4deg) scale(.85); }
.condor-posado.aterriza .cp-ala.cerca{ animation:aleteo .45s ease-in-out infinite alternate; }
.condor-posado.aterriza .cp-ala.lejos{ animation:aleteo-l .45s ease-in-out infinite alternate; }
.condor-posado.vuela .cp-pata,.condor-posado.planea .cp-pata{ opacity:0; }
.condor-posado.posa svg{ animation:respingo-c .6s var(--e-out); }

@keyframes aleteo{ from{ transform:rotate(-30deg) } to{ transform:rotate(22deg) scaleY(.8) } }
@keyframes aleteo-l{ from{ transform:rotate(-22deg) scale(.85) } to{ transform:rotate(28deg) scale(.85,.7) } }
@keyframes acicala{ 0%,100%{ transform:none } 30%,45%{ transform:rotate(58deg) translate(-4px,4px) } 60%{ transform:rotate(48deg) translate(-4px,4px) } 75%{ transform:rotate(58deg) translate(-4px,4px) } }
@keyframes sacude{ 0%,100%{ transform:none } 20%{ transform:rotate(-3deg) scaleX(1.04) } 45%{ transform:rotate(3deg) scaleX(1.04) } 70%{ transform:rotate(-2deg) } }
@keyframes respingo-c{ 0%{ transform:translateY(-3px) } 50%{ transform:translateY(2px) scaleY(.95) } 100%{ transform:none } }

/* la cría: más pequeña, cabeza más grande en proporción no hace falta:
   basta con la escala y un paso más corto y rápido */
.llama.cria{ width:clamp(50px,5.4vw,68px); }
.llama.cria.anda .ll-pata,.llama.cria.anda .ll-cana,.llama.cria.anda .ll-cuello{ animation-duration:.8s; }
.llama.cria.anda .ll-todo{ animation-duration:.4s; }
.llama{ opacity:0; }
/* el cariño: la madre baja el cuello, la cría lo sube */
.llama.carino .ll-cuello{ transform:rotate(15deg) translateY(3px); }
.llama.cria.carino .ll-cuello{ transform:rotate(-10deg); }
.llama.carino .ll-ojo{ animation:none; transform:scaleY(.25); }
.llama.salta .ll-todo{ animation:salta .65s var(--e-out); }
@keyframes salta{ 0%,100%{ transform:translateY(0) } 40%{ transform:translateY(-14px) } 70%{ transform:translateY(1px) } }

/* el cóndor que llega por la derecha mira a la izquierda */
.condor-posado .cp-todo{ transform-box:view-box; transform-origin:50px 50px; }
.condor-posado.izq .cp-todo{ transform:scaleX(-1); }

@media (prefers-reduced-motion:reduce){
  .llama *,.condor-posado *{ animation:none !important; }
}


/* ============================================================
   JUEGOS (24/9) · juegos.html + js/juegos.js
   ============================================================ */
.juegos-lista{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.juego-tarjeta{
  display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer;
  border:1px solid rgba(var(--oro-rgb),.16); border-radius:var(--r-bloque); overflow:hidden;
  background:var(--carbon); color:inherit; font:inherit; box-shadow:var(--sombra);
  transition:transform .5s var(--e-out), border-color .4s;
}
.juego-tarjeta:hover{ transform:translateY(-4px); border-color:rgba(var(--oro-rgb),.4); }
.juego-tarjeta:focus-visible{ outline:2px solid var(--oro); outline-offset:4px; }
.j-vista{ width:100%; aspect-ratio:16/9; display:block; }
.jt-texto{ display:flex; flex-direction:column; gap:.6rem; padding:1.6rem 1.8rem 2rem; }
.jt-kicker{ font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--oro); }
.jt-nombre{ font-family:var(--f-display); font-size:clamp(1.7rem,4vw,2.3rem); color:var(--crema); line-height:1.15; }
.jt-nombre i{ font-family:var(--f-script); font-style:normal; color:var(--oro-hondo); font-size:1.15em; }
.jt-como{ color:var(--tenue); font-size:.98rem; max-width:40ch; }
.jt-texto .b{ align-self:flex-start; margin-top:.6rem; }
.juegos-nota{ text-align:center; color:var(--tenue); font-size:.9rem; margin:2.4rem auto 0; max-width:60ch; }

/* ---- la pantalla de juego ---- */
html.jugando,html.jugando body{ overflow:hidden; }
.juego-capa{
  position:fixed; inset:0; z-index:9800; background:#F7F1E6;
  height:100vh; height:100dvh; user-select:none; -webkit-user-select:none;
}
.juego-capa[hidden]{ display:none; }
.juego-capa canvas{ position:absolute; inset:0; display:block; touch-action:none; }
.j-marcador{
  position:absolute; left:0; right:0; top:0; z-index:2; pointer-events:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + .8rem) 1rem .8rem;
}
.j-puntos{
  position:absolute; left:50%; transform:translateX(-50%); top:calc(env(safe-area-inset-top,0px) + .4rem);
  font-family:var(--f-display); font-size:clamp(2.4rem,9vw,3.6rem); color:#2A1D17; line-height:1;
}
.j-record{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#8E4430; }
.j-cerrar{
  pointer-events:auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(42,29,23,.25); background:rgba(247,241,230,.85); color:#2A1D17; cursor:pointer;
}
.j-inicio,.j-fin{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:min(88vw,380px); text-align:center; padding:1.8rem 1.4rem 2rem;
  border-radius:var(--r-bloque); background:rgba(247,241,230,.93);
  box-shadow:0 30px 60px -30px rgba(42,29,23,.5); color:#2A1D17;
}
.j-inicio{ cursor:pointer; }
.j-inicio[hidden],.j-fin[hidden]{ display:none; }
.j-titulo,.j-fin-titulo{ font-family:var(--f-display); font-size:1.7rem; line-height:1.2; margin:0 0 .6rem; }
.j-ayuda{ color:#5C4C43; margin:0 0 1.2rem; }
.j-empieza{
  display:inline-block; margin:0; padding:.8rem 1.6rem; border-radius:100px;
  background:#22736C; color:#fff; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  animation:late 1.6s ease-in-out infinite;
}
@keyframes late{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }
.j-fin-puntos{ font-family:var(--f-display); font-size:4rem; line-height:1; margin:.4rem 0; color:#2A1D17; }
.j-fin-record{ margin:0 0 1.4rem; color:#5C4C43; }
.j-fin-record.nuevo{ color:#22736C; font-weight:600; }
.j-fin-botones{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
/* dentro del juego los botones van siempre en los colores claros, sea cual sea la piel */
.juego-capa .b{ color:#2A1D17; border-color:rgba(42,29,23,.3); }
.juego-capa .b.lleno{ background:#22736C; background-image:none; color:#fff; border-color:#22736C; }
@media (prefers-reduced-motion:reduce){ .j-empieza{ animation:none; } }

/* Firma de NIUXER en el pie: que se lea bien */
a[href="https://niuxer.com"]{ color:var(--oro); }