/* =========================================================================
   MOLLY MALONE · página compacta

   Carbón, oro de neón y una pizca de verde de tubo. El rótulo son las piezas
   del logo del pub (cada letra es una imagen): se encienden una a una al abrir
   y giran con el scroll para dejar ver la carta. Sin librerías: esta hoja y un
   main.js pequeño. Las fuentes viven en assets/fonts (nada externo).
   ========================================================================= */
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:300 800; font-stretch:62% 125%; font-display:swap; src:url(assets/fonts/Archivo-normal-latin.woff2) format("woff2"); }
@font-face{ font-family:"Big Shoulders Display"; font-style:normal; font-weight:500 900; font-display:swap; src:url(assets/fonts/BigShouldersDisplay-normal-latin.woff2) format("woff2"); }

:root{
  --fondo:     #060806;
  --tinta:     #F1EEE6;
  --tinta-2:   rgba(241,238,230,.64);
  --linea:     rgba(241,238,230,.12);
  --oro:       #F6CF4F;                       /* el amarillo del rótulo encendido */
  --oro-2:     #D4AA33;
  --oro-tinta: #1A1403;                       /* texto sobre oro */
  --verde:     #3BE27E;                       /* el tubo verde de las filigranas */
  --display:   "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --texto:     Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease-out:  cubic-bezier(.23, 1, .32, 1);
}

*{ box-sizing:border-box; }
html{ background:var(--fondo); color-scheme:dark; overflow-x:clip; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--texto); font-size:16px; line-height:1.5;
  color:var(--tinta); background:var(--fondo); -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.saltar{ position:absolute; left:16px; top:-60px; z-index:30; background:var(--oro); color:var(--oro-tinta); padding:8px 12px; border-radius:8px; text-decoration:none; }
.saltar:focus{ top:16px; }
:focus-visible{ outline:2px solid var(--oro); outline-offset:3px; border-radius:6px; }
a, button{ -webkit-tap-highlight-color:transparent; }

/* ---------- la barra de arriba: tres acciones y el idioma, fijas ----------
   Transparente sobre el rótulo; en cuanto se baja, main.js le pone .barra--fondo. */
.barra{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px;   /* el grupo de acciones, centrado; el idioma, a la derecha */
  padding:calc(8px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  transition:background .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.barra--fondo{ background:rgba(6,8,6,.78); border-color:var(--linea); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.barra .acciones{ grid-column:2; display:flex; align-items:center; gap:8px; margin:0; max-width:none; }
.barra .accion{
  display:inline-flex; flex-direction:row; align-items:center; gap:6px;
  min-height:38px; padding:0 12px; border-radius:999px;
  border:1px solid rgba(246,207,79,.32); background:rgba(246,207,79,.06);
  color:var(--tinta); text-decoration:none; font:inherit; font-size:12px; font-weight:600; letter-spacing:.03em; white-space:nowrap; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .12s var(--ease-out);
}
.barra .accion svg{ width:16px; height:16px; color:var(--oro); }
.barra .accion:active{ transform:translateY(1px); }
@media (hover:hover) and (pointer:fine){ .barra .accion:hover{ background:rgba(246,207,79,.12); border-color:rgba(246,207,79,.6); } }
.barra .accion--principal{ background:linear-gradient(180deg, var(--oro), var(--oro-2)); color:var(--oro-tinta); border-color:transparent; box-shadow:0 1px 0 rgba(255,255,255,.35) inset; }
.barra .accion--principal svg{ color:var(--oro-tinta); }
@media (hover:hover) and (pointer:fine){ .barra .accion--principal:hover{ background:linear-gradient(180deg, #FFDA62, var(--oro-2)); border-color:transparent; } }
.barra .accion--principal[aria-expanded="true"]{ box-shadow:0 0 0 2px rgba(246,207,79,.45); }
/* Instagram y Llamar van solo con su icono, uno a cada lado de Reservar */
.barra .accion--icono{ width:38px; padding:0; justify-content:center; }
.barra .accion--icono span{ display:none; }
.idioma{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:2px; font-size:12px; letter-spacing:.16em; }
.idioma button{ border:0; background:transparent; color:var(--tinta-2); font:inherit; letter-spacing:inherit; padding:8px 6px; cursor:pointer; }
.idioma button[aria-pressed="true"]{ color:var(--oro); }
.idioma span{ color:var(--linea); }

/* ---------- el rótulo, fijo ----------
   --pin es cuánto scroll dura el giro. La capa del rótulo es fija, transparente y no atrapa
   toques; la carta está debajo, clavada en su sitio (sticky) durante ese tramo, así que al
   tirar hacia abajo nada se desplaza: las letras giran y la carta aparece detrás. */
:root{ --pin:90svh; }
.escenario{
  position:fixed; inset:0; height:100svh; z-index:2;
  display:grid; place-items:center; overflow:hidden; pointer-events:none;
}
.escenario--fuera{ visibility:hidden; }          /* el giro ha terminado: la capa ya no pinta nada */
.rotulo{
  position:relative; margin:0;
  width:min(86vw, 560px); aspect-ratio:1195 / 740.3;   /* la caja de las letras y las filigranas, en el logo original */
  perspective:1100px; transform-style:preserve-3d;      /* un solo punto de fuga: las letras giran como un mismo rótulo */
}
.pieza{
  position:absolute; left:var(--x); top:var(--y); width:var(--w);
  transform-origin:50% 50%; will-change:transform, opacity; backface-visibility:hidden;
}
.pieza img{ display:block; width:100%; height:auto; }

/* encendido: parpadeo de neón, letra a letra en el orden en que se leen. La animación va en
   la imagen y el giro del scroll en el contenedor: así no se pisan. */
.letra img{
  opacity:.14; filter:brightness(.35) saturate(.5);
  animation:enciende 1.1s steps(1, end) both;
  animation-delay:calc(.4s + var(--orden) * 95ms);
}
.letra[data-falla] img{ animation-name:enciende-falla; animation-duration:1.9s; }
@keyframes enciende{
  0%  { opacity:.14; filter:brightness(.35) saturate(.5); }
  9%  { opacity:1;   filter:brightness(1.05) drop-shadow(0 0 10px rgba(255,214,80,.55)) drop-shadow(0 0 30px rgba(255,190,40,.28)); }
  15% { opacity:.2;  filter:brightness(.4) saturate(.6); }
  23% { opacity:1;   filter:brightness(1.05) drop-shadow(0 0 10px rgba(255,214,80,.55)) drop-shadow(0 0 30px rgba(255,190,40,.28)); }
  100%{ opacity:1;   filter:brightness(1)    drop-shadow(0 0 10px rgba(255,214,80,.5))  drop-shadow(0 0 30px rgba(255,190,40,.26)); }
}
/* la Y tartamudea un poco antes de quedarse encendida, como un tubo viejo */
@keyframes enciende-falla{
  0%  { opacity:.14; filter:brightness(.35) saturate(.5); }
  6%  { opacity:.6;  filter:brightness(.8); }
  9%  { opacity:.14; filter:brightness(.35) saturate(.5); }
  28% { opacity:.14; filter:brightness(.35) saturate(.5); }
  31% { opacity:1;   filter:brightness(1.05) drop-shadow(0 0 10px rgba(255,214,80,.55)) drop-shadow(0 0 30px rgba(255,190,40,.28)); }
  36% { opacity:.25; filter:brightness(.45); }
  42% { opacity:1;   filter:brightness(1.05) drop-shadow(0 0 10px rgba(255,214,80,.55)) drop-shadow(0 0 30px rgba(255,190,40,.28)); }
  47% { opacity:.3;  filter:brightness(.45); }
  55% { opacity:1;   filter:brightness(1.05) drop-shadow(0 0 10px rgba(255,214,80,.55)) drop-shadow(0 0 30px rgba(255,190,40,.28)); }
  100%{ opacity:1;   filter:brightness(1)    drop-shadow(0 0 10px rgba(255,214,80,.5))  drop-shadow(0 0 30px rgba(255,190,40,.26)); }
}
/* las filigranas verdes, después de las letras y a media luz */
.filigrana img{ opacity:0; animation:filigrana 1s steps(1, end) both; animation-delay:1.75s; }
@keyframes filigrana{
  0%  { opacity:0; }
  30% { opacity:.55; filter:drop-shadow(0 0 8px rgba(59,226,126,.5)); }
  38% { opacity:.1; }
  50% { opacity:.55; filter:drop-shadow(0 0 8px rgba(59,226,126,.5)); }
  100%{ opacity:.55; filter:drop-shadow(0 0 8px rgba(59,226,126,.45)); }
}
/* indicio de scroll, al pie de la pantalla; main.js lo apaga en cuanto se baja */
.baja{
  position:absolute; left:50%; bottom:max(22px, env(safe-area-inset-bottom)); transform:translateX(-50%);
  margin:0; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--tinta-2);
}
.baja span, .baja i{ animation:aparece .6s var(--ease-out) 2.3s both; }
.baja i{ display:block; width:1px; height:28px; background:linear-gradient(var(--oro), transparent); }
@keyframes aparece{ from{ opacity:0; } }

/* ---------- la carta: aparece detrás del rótulo, sin moverse ----------
   .lienzo lleva un hueco de --pin al final: es el recorrido durante el que la carta, sticky, se
   queda quieta. Empieza invisible (main.js la va encendiendo con el scroll) y con su título a
   la altura del rótulo, para que aparezca justo detrás de las letras. */
.lienzo{ position:relative; }
.lienzo::after{ content:""; display:block; height:var(--pin); }   /* el hueco va como contenido: un padding no le daría recorrido al sticky */
.carta{
  position:sticky; top:0; z-index:1; margin:0 auto; max-width:880px;
  padding:calc(50svh - 44px) 20px 8px;
  opacity:0;
}
.carta--oculta{ visibility:hidden; }             /* mientras no se ve, tampoco se puede tocar */
.carta__cab{ text-align:center; margin-bottom:22px; }
.familias{ scroll-margin-top:64px; }
.carta h2{
  margin:0; font-family:var(--display); font-weight:800; font-size:clamp(46px, 10vw, 80px); line-height:.92;
  letter-spacing:.05em; text-transform:uppercase; color:var(--oro); text-shadow:0 0 22px rgba(246,207,79,.3);
}
.carta__aviso{ margin:0 0 18px; text-align:center; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-2); }
.familias{ display:grid; grid-template-columns:1fr 1fr; gap:26px 44px; }
@media (max-width:680px){ .familias{ grid-template-columns:1fr; gap:22px; } }
.familia h3{ margin:0 0 6px; font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:.14em; text-transform:uppercase; color:var(--oro); }
.familia ul{ list-style:none; margin:0; padding:0; }
.familia li{ display:flex; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px solid var(--linea); font-size:15px; }
.familia .desc{ color:var(--tinta-2); font-size:12.5px; }
.familia .precio{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--oro); font-weight:600; white-space:nowrap; }
.carta__nota{ margin:18px 0 0; font-size:12.5px; color:var(--tinta-2); text-align:center; }

/* ---------- reserva: calendario y formulario ---------- */
.reserva{ max-width:560px; margin:0 auto 30px; scroll-margin-top:72px; }
.reserva[hidden]{ display:none; }
.reserva__caja{ border:1px solid var(--linea); border-radius:18px; padding:18px 16px 16px; background:rgba(255,255,255,.025); animation:despliega .3s var(--ease-out) both; }
@keyframes despliega{ from{ opacity:0; transform:translateY(10px); } }
.reserva h2{ margin:0 0 4px; font-family:var(--display); font-weight:700; font-size:30px; letter-spacing:.06em; text-transform:uppercase; color:var(--oro); }
.reserva__intro{ margin:0 0 16px; font-size:13.5px; color:var(--tinta-2); }
.cal__cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cal__mes{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.1em; text-transform:uppercase; }
.cal__cab button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--linea); background:transparent; color:var(--tinta); font:inherit; font-size:20px; line-height:1; cursor:pointer; }
.cal__cab button:disabled{ opacity:.3; cursor:default; }
.cal__dias, .cal__celdas{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.cal__dias span{ text-align:center; font-size:10.5px; letter-spacing:.12em; color:var(--tinta-2); padding:4px 0; }
.cal__celdas button{
  aspect-ratio:1; border-radius:10px; border:1px solid transparent; background:rgba(255,255,255,.035);
  color:var(--tinta); font:inherit; font-size:14px; font-variant-numeric:tabular-nums; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.cal__celdas button:disabled{ color:rgba(241,238,230,.22); background:transparent; cursor:default; }
.cal__celdas button[data-hoy]{ border-color:var(--linea); }
.cal__celdas button[aria-pressed="true"]{ background:var(--oro); color:var(--oro-tinta); font-weight:700; }
@media (hover:hover) and (pointer:fine){ .cal__celdas button:not(:disabled):hover{ border-color:rgba(246,207,79,.5); } }
.cal__pie{ margin:8px 0 0; font-size:11.5px; color:var(--tinta-2); }
.campos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.campo{ display:flex; flex-direction:column; gap:5px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); }
.campo--ancho{ grid-column:1 / -1; }
.campo select, .campo input, .campo textarea{
  font:inherit; font-size:15px; letter-spacing:0; text-transform:none; color:var(--tinta);
  background:rgba(255,255,255,.04); border:1px solid var(--linea); border-radius:10px; padding:10px 12px; min-height:44px; width:100%;
}
.campo select:disabled{ color:var(--tinta-2); }
.campo textarea{ resize:vertical; }
.contador{ display:flex; align-items:center; gap:4px; }
.contador button{ width:44px; height:44px; border-radius:10px; border:1px solid var(--linea); background:transparent; color:var(--tinta); font-size:20px; cursor:pointer; }
.contador button:disabled{ opacity:.3; cursor:default; }
.contador output{ min-width:40px; text-align:center; font-size:18px; letter-spacing:0; color:var(--tinta); }
.zonas{ display:flex; gap:6px; }
.zonas label{ flex:1; position:relative; }
.zonas input{ position:absolute; opacity:0; pointer-events:none; }
.zonas span{ display:block; text-align:center; padding:11px 6px; border-radius:10px; border:1px solid var(--linea); font-size:11.5px; letter-spacing:.06em; color:var(--tinta); cursor:pointer; }
.zonas input:checked + span{ background:rgba(246,207,79,.14); border-color:var(--oro); color:var(--oro); }
.zonas input:focus-visible + span{ outline:2px solid var(--oro); outline-offset:2px; }
.enviar{
  grid-column:1 / -1; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px;
  border:0; border-radius:14px; cursor:pointer; font:inherit; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--oro-tinta); background:linear-gradient(180deg, var(--oro), var(--oro-2)); box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
  transition:transform .12s var(--ease-out), filter .18s ease;
}
.enviar svg{ width:20px; height:20px; }
.enviar:active{ transform:translateY(1px); }
@media (hover:hover) and (pointer:fine){ .enviar:hover{ filter:brightness(1.04); } }
.error{ display:block; color:#FF8A7A; font-size:12px; letter-spacing:0; text-transform:none; margin:0; }
.error[hidden]{ display:none; }
.formulario__ok{ grid-column:1 / -1; margin:0; font-size:13px; color:var(--verde); }
.formulario__ok a{ color:var(--oro); }
.reserva__ayuda{ margin:12px 0 0; text-align:center; font-size:12.5px; color:var(--tinta-2); }

/* ---------- horario y dirección ---------- */
.donde{ max-width:560px; margin:48px auto 0; padding:0 20px 36px; }
.horario{ width:100%; border-collapse:collapse; font-size:15px; }
.horario caption{ margin-bottom:8px; text-align:left; font-family:var(--display); font-weight:700; font-size:30px; letter-spacing:.06em; text-transform:uppercase; color:var(--oro); }
.horario th{ text-align:left; font-weight:500; padding:7px 0; border-bottom:1px solid var(--linea); color:var(--tinta-2); }
.horario td{ text-align:right; padding:7px 0; border-bottom:1px solid var(--linea); font-variant-numeric:tabular-nums; }
.horario tr[data-hoy] th, .horario tr[data-hoy] td{ color:var(--oro); font-weight:600; }
.donde__aviso{ margin:10px 0 0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2); }
.direccion{ margin:26px 0 0; font-size:14px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; }
.direccion a{ color:var(--oro); text-decoration:none; font-weight:600; letter-spacing:.04em; }
.pie{ margin:0; text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); padding:8px 20px max(28px, env(safe-area-inset-bottom)); }

/* ---------- menos movimiento: se enciende sin parpadeo y la carta llega sin giro ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .letra img{ animation:aparece .3s ease both; animation-delay:0s; opacity:1; filter:brightness(1) drop-shadow(0 0 10px rgba(255,214,80,.5)); }
  .filigrana img{ animation:aparece .3s ease both; animation-delay:0s; opacity:.55; filter:drop-shadow(0 0 8px rgba(59,226,126,.45)); }
  .baja span, .baja i{ animation:none; }
  .reserva__caja{ animation:aparece .2s ease both; }
}