/* ==========================================================================
   Pulpería 9 Rabos — secciones
   Fase 2: maquetación estática de las ocho secciones. Sin animación todavía.
   Móvil primero. Nada de 100vw (mete scroll horizontal por la barra): lo que
   va a sangre sale del .envoltura en el HTML, no se estira con vw.
   ========================================================================== */

/* ==========================================================================
   CABECERA
   ========================================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecera);
  background: color-mix(in srgb, var(--negro) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--linea);
}
.cabecera__interior {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-height: 72px;
}
.cabecera__tel { margin-left: auto; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;          /* medido antes: 39 px en escritorio, 26 en movil */
  text-decoration: none;
  flex: none;
}
.logo__pulpo { width: 52px; flex: none; color: var(--oro); }
.logo__texto { display: flex; flex-direction: column; gap: 2px; }
.logo__nombre {
  font-family: var(--fuente-titular);
  font-weight: var(--peso-fuerte);
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hueso);
  white-space: nowrap;
}
.logo__nombre b { color: var(--oro); font-weight: inherit; }
.logo__lema {
  font-family: var(--fuente-plato);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--oro-profundo);
}

.nav__lista { display: flex; gap: var(--e3); }
/* La zona pulsable llega a 44 px de alto. Medida antes: 18 px, por debajo del
   minimo de 24 de WCAG 2.5.8. El texto no se mueve: crece la caja, no la letra. */
.nav__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--e1);
  font-size: var(--t-pequeno);
  color: var(--gris-marea);
  text-decoration: none;
  transition: color var(--dur-corta) ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__lista a:hover { color: var(--oro); }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .logo__lema { display: none; }
}
@media (max-width: 480px) {
  .cabecera__interior { gap: var(--e2); }
  .cabecera__tel { padding-inline: var(--e2); font-size: var(--t-micro); }
  .logo__pulpo { width: 42px; }
  .logo__nombre { font-size: 15px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; background: var(--negro-puro); }

/* El lienzo tiene EXACTAMENTE la proporción de la foto, así que los
   porcentajes de la pizarra (72.6% / 29.3% / 6.9% / 22%) son válidos sobre él.
   En móvil se agranda y desborda el marco, que lo recorta: las coordenadas
   siguen siendo buenas porque se miden contra el lienzo, no contra el marco. */
.hero__marco {
  --alto-marco: 62svh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  /* align-items: center es OBLIGATORIO, no estetico. Con el "stretch" por
     defecto, el lienzo recibe la altura del marco y eso ANULA su aspect-ratio:
     la caja pasaba de 1,777 a 2,553 de proporcion y los porcentajes de la
     pizarra dejaban de caer sobre la pizarra. Con center, manda la proporcion
     y el recorte lo hace el overflow del marco, arriba y abajo por igual. */
  align-items: center;
  height: var(--alto-marco);
}
.hero__lienzo {
  position: relative;
  flex: none;
  aspect-ratio: 1672 / 941;
  /* Nunca menos de lo que hace falta para cubrir el marco: así el recorte
     lo hace el marco y el lienzo conserva la proporción de la foto. */
  width: max(100%, calc(var(--alto-marco) * 1672 / 941));
}
.hero__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.82) saturate(1.05) blur(0px);
}

/* --- La luz del hero -------------------------------------------------------
   Unica micro-interaccion en reposo de la web (brief 7.7). Al pasar el raton
   por el truck sube la luz del mostrador y las letras PULPO cogen brillo.
   NADA se mueve de sitio: solo cambia la opacidad, que es gratis para el
   compositor. Gated tras hover+pointer:fine porque en tactil el hover se queda
   pegado despues del toque.
   -------------------------------------------------------------------------- */
.hero__luz,
.hero__pulpo {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hero__luz {
  background: radial-gradient(34% 26% at 47% 44%,
    rgba(255, 201, 112, 0.55), rgba(255, 190, 96, 0.16) 55%, transparent 74%);
  opacity: 0.35;
}
.hero__pulpo {
  background: radial-gradient(13% 9% at 54% 56%,
    rgba(255, 226, 160, 0.5), transparent 72%);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .hero__lienzo:hover .hero__luz { opacity: 0.75; }
  .hero__lienzo:hover .hero__pulpo { opacity: 0.85; }
}

/* El recorte de la pizarra que ya está en la foto. En reposo es invisible:
   es literalmente el trozo que hay ahí. Se anima en la Fase 4. */
.pizarra {
  /* Coordenadas del brief 6.1, en % del lienzo. Confirmadas con la caja roja
     el 2026-09-07: caen sobre la pizarra entera, marco de madera incluido. */
  position: absolute;
  left: 72.6%;
  top: 29.3%;
  width: 6.9%;
  height: 22%;
  display: block;
  border-radius: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Sin overflow:hidden: recortaria el ::after del resplandor. El recorte a
     las esquinas lo hacen las capas con border-radius: inherit. */
}
/* El dedo necesita 44 px y la caja mide 40 de ancho en movil. Se agranda solo
   la zona de toque, por detras: el recorte visible no se mueve ni un pixel. */
.pizarra::before {
  content: "";
  position: absolute;
  inset: -10px -14px;
}
.pizarra__slate,
.pizarra__foto {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
}
.pizarra__slate {
  opacity: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 62%),
    linear-gradient(158deg, var(--pizarra-alto) 0%, var(--pizarra-bajo) 58%, var(--pizarra-medio) 100%);
}
/* El recorte de la pizarra, reescalado x4 con Lanczos: a pantalla completa se
   ve a ~441 px y en la foto solo mide 115.

   La imagen NO se declara aqui: la pone `pizarra.js` despues del `load`. Medido,
   esos 23 KB competian con la foto del hero entre los 1554 y los 1976 ms, y solo
   hacen falta cuando alguien pulsa. En reposo esto queda TRANSPARENTE y se ve la
   foto de debajo, que es exactamente lo que se quiere: cero costura posible.
   Lleva el mismo filtro que la foto del hero para que al aparecer encaje. */
.pizarra__foto {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: brightness(0.82) saturate(1.05) blur(0px);
}
.pizarra__banda {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(100% / 6 + 1px);
  background: linear-gradient(158deg, var(--pizarra-alto), var(--pizarra-banda));
  opacity: 0;
}

/* El resplandor va en un ::after con la sombra FIJA y se anima solo su
   opacidad. Animar box-shadow repinta en cada fotograma y el napkin de este
   proyecto ya lo prohibe. 200 ms, dentro del techo de 300 ms para interfaz. */
.pizarra::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--oro), 0 0 22px rgba(223, 170, 47, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--sal-entra);
}
@media (hover: hover) and (pointer: fine) {
  .pizarra:hover::after { opacity: 1; }
}
.pizarra:focus-visible::after { opacity: 1; }
.pizarra:focus-visible { outline: none; }
.pizarra--abierta::after { opacity: 0 !important; }

/* ---- Estado abierto: a pantalla completa, centrada ---------------------- */
.capa-pizarra {
  position: fixed;
  inset: 0;
  z-index: var(--z-pizarra);
  pointer-events: none;
}
.capa-pizarra__fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  opacity: 0;
}
.pizarra--abierta {
  position: fixed;
  inset: 0;
  margin: auto;
  left: 0; top: 0; right: 0; bottom: 0;
  width: auto;
  /* La proporcion real del recorte: 115/207 */
  height: min(88svh, calc(92vw / 0.5556));
  aspect-ratio: 0.5556;
  border-radius: 5px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(223, 170, 47, 0.18);
  cursor: default;
}
.pizarra--volando { will-change: transform; }

/* Polvo de tiza: 12 particulas en escritorio, 6 en movil. Sin canvas. */
.tiza {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(245, 243, 238, 0.9);
  filter: blur(3px);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform, opacity;
}

.velo-salto {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--negro);
  opacity: 0;
  pointer-events: none;
}

/* Con movimiento reducido no hay animacion NINGUNA: salto directo a la carta.
   Obligatorio (brief 6.1 y 7.8). */
@media (prefers-reduced-motion: reduce) {
  .pizarra::after { transition: none; }
  .capa-pizarra, .tiza { display: none !important; }
}

.hero__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--negro-puro) 0%,
    rgba(0,0,0,0.88) 22%,
    rgba(0,0,0,0.35) 52%,
    rgba(0,0,0,0.12) 100%);
}

.hero__texto {
  position: relative;
  z-index: var(--z-contenido);
  margin-top: clamp(-190px, -11vw, -96px);
  padding-bottom: var(--e10);
}
.hero h1 {
  font-size: var(--t-hero);
  text-transform: uppercase;
  margin-bottom: var(--e2);
}
.hero h1 b { color: var(--oro); font-weight: inherit; }
.hero__lema {
  font-family: var(--fuente-plato);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-lead);
  color: var(--oro);
  margin-bottom: var(--e3);
}
.hero__datos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e1) var(--e3);
  font-size: var(--t-pequeno);
  color: var(--gris-marea);
  margin-bottom: var(--e5);
}
.hero__datos b { color: var(--hueso); font-weight: 600; }
.hero__datos span { display: inline-flex; align-items: center; gap: 8px; }
.hero__datos svg { flex: none; color: var(--oro); }

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e4);
}
.hero__evento {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-pequeno);
  color: var(--oro);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--borde-fuerte);
  align-self: flex-start;
  transition: border-color var(--dur-corta) var(--sal-entra);
}
@media (hover: hover) and (pointer: fine) {
  .hero__evento:hover { border-color: var(--oro); }
}
.hero__sello { margin-top: var(--e5); }

/* En móvil la foto es apaisada y el hueco es alto: recortar por arriba y abajo
   no da nada (a 390 px la foto solo mide 219 de alto). Se amplía un 130 % y se
   alinea a la DERECHA, que es donde está la pizarra: si se centra, el recorte
   se la come y la animación de la Fase 4 se queda sin objeto visible. */
@media (max-width: 780px) {
  .hero__marco { height: auto; justify-content: flex-end; }
  /* 155 % de ancho y 6 % de desbordamiento a la derecha: se ve del 32 % al 96 %
     de la foto, que deja dentro el mostrador Y la pizarra (72,6 %). */
  .hero__lienzo { width: 155%; margin-right: -6%; }
  .hero__texto { margin-top: clamp(-96px, -16vw, -48px); }
}

/* ==========================================================================
   ACTOS — apertura a pantalla completa
   ========================================================================== */
.acto { position: relative; }
.acto + .acto { padding-top: var(--hueco-acto); }

.apertura {
  position: relative;
  height: 100svh;
  min-height: 480px;
  max-height: 900px;
  overflow: hidden;
}
.apertura__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.apertura--pescando .apertura__foto { object-position: 50% 42%; }
.apertura--olla .apertura__foto { object-position: 50% 38%; }

.apertura__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--negro) 0%,
    rgba(11,11,12,0.86) 18%,
    rgba(11,11,12,0.25) 55%,
    rgba(11,11,12,0.45) 100%);
}
.apertura__interior {
  position: absolute;
  inset: auto 0 0 0;
  padding-bottom: clamp(40px, 7vw, 80px);
}
.apertura__frase {
  font-family: var(--fuente-plato);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3rem);
  line-height: 1.18;
  color: var(--blanco-cal);
  max-width: 18ch;
  text-wrap: balance;
}
.acto__texto {
  padding-top: var(--e8);
  max-width: var(--ancho-texto);
}
.acto__texto p { color: var(--gris-marea); font-size: var(--t-lead); }
.acto__texto p strong { color: var(--hueso); font-weight: 600; }

/* ==========================================================================
   ACTO II — el trío, el jamón y el cierre
   ========================================================================== */
.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e2);
  padding-top: var(--e8);
}
.trio figure { margin: 0; position: relative; }
.trio img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.trio figcaption {
  font-size: var(--t-micro);
  color: var(--gris-marea);
  padding-top: 10px;
}

/* En móvil, carrusel con scroll nativo y scroll-snap. Sin librerías. */
@media (max-width: 720px) {
  .trio {
    display: flex;
    gap: var(--e2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--margen);
    margin-inline: calc(var(--margen) * -1);
  }
  .trio::-webkit-scrollbar { display: none; }
  .trio figure { flex: 0 0 76%; scroll-snap-align: center; }
}

.jamon {
  display: grid;
  gap: var(--e5);
  padding-top: var(--hueco-seccion);
  align-items: center;
}
@media (min-width: 860px) {
  .jamon { grid-template-columns: 1fr 1fr; gap: var(--e10); }
}
.jamon__foto { margin: 0; position: relative; }
.jamon__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.jamon__plato {
  position: absolute;
  right: -6%;
  bottom: -8%;
  width: 42%;
  border: 4px solid var(--negro);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}
.jamon__plato img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.jamon__texto h3 { margin-bottom: var(--e3); }
.jamon__texto p { color: var(--gris-marea); }

.cierre-acto { padding-top: var(--hueco-seccion); }
.cierre-acto img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: 50% 45%;
}

/* ==========================================================================
   ACTO III — LA CARTA
   ========================================================================== */
.carta {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(223,170,47,0.05), transparent 60%),
    repeating-linear-gradient(102deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--carta-alto) 0%, var(--carta-medio) 55%, var(--negro) 100%);
  border-top: 1px solid rgba(223,170,47,0.14);
  border-bottom: 1px solid rgba(223,170,47,0.14);
  padding-bottom: var(--hueco-seccion);
}
.carta__intro { max-width: 56ch; margin-bottom: var(--e8); }
.carta__intro h2 { text-transform: uppercase; margin-bottom: var(--e2); }
.carta__intro p { color: var(--gris-marea); font-size: var(--t-lead); }

.rejilla-carta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
}
/* Son SEIS tarjetas (la del pulpo lleva los dos precios dentro) y una ocupa
   doble. Eso da 7 huecos, que en 3 columnas dejan una fila coja. Por eso la
   última va a lo ancho: 3 + 3 + 3 y la rejilla cierra sin agujeros. */
@media (min-width: 640px) {
  .rejilla-carta { grid-template-columns: repeat(2, 1fr); }
  .plato--estrella, .plato--ancho { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .rejilla-carta { grid-template-columns: repeat(3, 1fr); }
  .plato--estrella { grid-column: span 2; }
  .plato--ancho { grid-column: span 3; }
}

.plato {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--negro-puro);
  border: var(--linea);
  border-radius: var(--radio);
  /* Sin overflow:hidden: recortaria el ::after del resplandor. La foto ya
     tiene el suyo propio para recortar la imagen. */
}
/* La foto crece para llenar la tarjeta cuando la fila la estira: si no, la
   tarjeta corta que va al lado de la estrella se queda con un hueco negro. */
.plato__foto {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--negro-puro);
  aspect-ratio: 4 / 3;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: inherit;
}
.plato__foto img { width: 100%; height: 100%; object-fit: cover; }
.plato--estrella .plato__foto { aspect-ratio: 16 / 9; }

/* La tarjeta ancha se tumba: foto a la izquierda, texto a la derecha. */
@media (min-width: 640px) {
  .plato--ancho { flex-direction: row; align-items: stretch; }
  .plato--ancho .plato__foto { aspect-ratio: 16 / 10; flex: 0 0 38%; }
  .plato--ancho .plato__cuerpo { justify-content: center; padding: var(--e5); }
  /* Sin el margin-top:auto del pie: aquí el texto va junto y centrado,
     si no los alérgenos se van solos al fondo de una tarjeta muy alta. */
  .plato--ancho .plato__pie { margin-top: 0; }
}

.plato__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: var(--e3);
}
.plato__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
}
.plato__nombre {
  font-family: var(--fuente-plato);
  font-optical-sizing: auto;
  font-size: var(--t-plato);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}
.plato__precio {
  font-family: var(--fuente-plato);
  font-size: var(--t-precio);
  font-weight: 700;
  line-height: 1;
  color: var(--oro);
  white-space: nowrap;
}
.plato__precios { display: flex; gap: var(--e3); align-items: baseline; }
.plato__precios div { text-align: right; }
.plato__precios span {
  display: block;
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-marea);
}
.plato__desc { color: var(--gris-marea); font-size: var(--t-pequeno); margin: 0; }
.plato__pie { margin-top: auto; padding-top: var(--e1); }


/* --- Hover de tarjeta (brief 6.4) -----------------------------------------
   El brief pedia 350 ms; el techo de interfaz son 300. Se resuelve con tiempos
   asimetricos, que es lo que manda el propio brief: entrada 300, salida 150.
   Solo transform y opacity. El resplandor es un ::after con la sombra FIJA del
   que se anima la opacidad, nunca un box-shadow animado.
   -------------------------------------------------------------------------- */
.plato__foto,
.plato__desc {
  transition: transform 150ms var(--sal-sale);
}
.plato::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radio);
  box-shadow: 0 0 0 1px rgba(223, 170, 47, 0.45), 0 18px 50px rgba(223, 170, 47, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--sal-sale);
}

@media (hover: hover) and (pointer: fine) {
  .plato:hover .plato__foto,
  .plato:focus-within .plato__foto {
    transform: scale(1.03);
    transition-duration: 300ms;
    transition-timing-function: var(--sal-entra);
  }
  .plato:hover .plato__desc,
  .plato:focus-within .plato__desc {
    transform: translateY(-4px);
    transition-duration: 300ms;
    transition-timing-function: var(--sal-entra);
  }
  .plato:hover::after,
  .plato:focus-within::after {
    opacity: 1;
    transition-duration: 300ms;
    transition-timing-function: var(--sal-entra);
  }
}

.carta__nota {
  margin-top: var(--e6);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: rgba(223,170,47,0.05);
  font-size: var(--t-pequeno);
}
.carta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e6);
}

/* ==========================================================================
   EVENTOS
   ========================================================================== */
/* "No es una nota al pie: es la seccion que mas dinero vale" (brief 6.5).
   Por eso lleva relleno de acto y una altura minima, no de seccion normal. */
.eventos {
  position: relative;
  overflow: hidden;
  background: var(--negro-puro);
  padding-block: var(--hueco-acto);
  min-height: 78svh;
  display: flex;
  align-items: center;
}
.eventos__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.eventos__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.eventos__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0,0,0,0.93) 0%,
    rgba(0,0,0,0.82) 40%,
    rgba(0,0,0,0.34) 100%);
}
.eventos__interior { position: relative; z-index: var(--z-contenido); width: 100%; }
.eventos__caja { max-width: 60ch; }
.eventos h2 { text-transform: uppercase; margin-bottom: var(--e3); }
.eventos__caja > p:not(.eventos__lead) { font-size: var(--t-lead); }
.eventos__lead {
  font-family: var(--fuente-plato);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: var(--t-lead);
  color: var(--oro);
  margin-bottom: var(--e3);
}
.eventos p { color: var(--blanco-cal); }

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  margin: var(--e5) 0;
}
.etiqueta-evento {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: var(--linea);
  border-radius: var(--radio-pildora);
  font-size: var(--t-pequeno);
  color: var(--hueso);
  background: rgba(11,11,12,0.55);
}
.etiqueta-evento svg { flex: none; color: var(--oro); }
.eventos__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ==========================================================================
   DÓNDE ESTAMOS
   ========================================================================== */
.donde__caja { display: grid; gap: var(--e6); }
@media (min-width: 900px) { .donde__caja { grid-template-columns: 380px 1fr; gap: var(--e8); } }

.ficha { display: flex; flex-direction: column; gap: var(--e4); }
.ficha__dato { display: flex; gap: var(--e2); align-items: flex-start; }
.ficha__dato svg { flex: none; color: var(--oro); margin-top: 3px; }
.ficha__dato dt {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-marea);
  margin-bottom: 4px;
}
.ficha__dato dd { margin: 0; color: var(--hueso); }
.ficha__dato dd a { color: var(--hueso); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .ficha__dato dd a:hover { color: var(--oro); }
}
.donde__puente {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: var(--linea);
  font-size: var(--t-pequeno);
  color: var(--gris-marea);
}
.donde__puente a { color: var(--oro); }

/* El mapa no carga nada de Google hasta que se pulsa. */
.mapa {
  position: relative;
  /* width:100% es obligatorio: con aspect-ratio y min-height, si el ancho no
     es definido el navegador lo recalcula desde la altura mínima y el bloque
     se sale de la pantalla en móvil (medido: 447 px en un hueco de 390). */
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 320px;
  border: var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(223,170,47,0.07), transparent 70%),
    var(--negro-humo);
}
@media (min-width: 900px) { .mapa { aspect-ratio: 16 / 11; } }
.mapa__reposo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  text-align: center;
  padding: var(--e5);
}
.mapa__pin { color: var(--oro); }
.mapa__dir { color: var(--hueso); font-size: var(--t-pequeno); max-width: 30ch; }
.mapa__aviso { color: var(--gris-marea); font-size: var(--t-micro); max-width: 38ch; }
.mapa--cargado .mapa__reposo { display: none; }
.mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(92%) hue-rotate(180deg) contrast(0.92) brightness(0.95);
}

/* ==========================================================================
   QUIÉNES SOMOS
   ========================================================================== */
.nosotros__caja { display: grid; gap: var(--e6); align-items: center; }
@media (min-width: 900px) { .nosotros__caja { grid-template-columns: 0.85fr 1fr; gap: var(--e10); } }
.nosotros__foto { margin: 0; overflow: hidden; }
/* scale(1.08) da los ~30 px de recorrido que necesita el parallax sin que se
   vea el borde de la foto al desplazarla. Si el JS no corre, se ve normal. */
.nosotros__foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transform: scale(1.08);
}
.nosotros__texto p { color: var(--gris-marea); }
.nosotros__texto p + p { margin-top: var(--e2); }

.dos-negocios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin-top: var(--hueco-seccion);
  padding: var(--e5);
  border: var(--linea);
  border-radius: var(--radio);
  background: linear-gradient(100deg, rgba(223,170,47,0.06), transparent 70%);
}
.dos-negocios__frase {
  font-family: var(--fuente-titular);
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  max-width: 22ch;
}
.dos-negocios__frase b { color: var(--oro); font-weight: inherit; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto { text-align: center; }
.contacto__marca { display: inline-flex; flex-direction: column; align-items: center; gap: var(--e2); }
.contacto__pulpo { width: 132px; color: var(--oro); }
.contacto h2 { font-size: var(--t-h2); text-transform: uppercase; }
.contacto h2 b { color: var(--oro); font-weight: inherit; }
.contacto__lema {
  font-family: var(--fuente-plato);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: var(--t-lead);
  color: var(--oro);
}
.contacto__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 56px;
  margin: var(--e6) 0 var(--e3);
  font-family: var(--fuente-titular);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.03em;
  color: var(--hueso);
  text-decoration: none;
  transition: color var(--dur-corta) var(--sal-entra);
}
@media (hover: hover) and (pointer: fine) {
  .contacto__tel:hover { color: var(--oro); }
}
.contacto__redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2);
  margin-bottom: var(--e8);
}
.contacto__datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2) var(--e5);
  font-size: var(--t-pequeno);
  color: var(--gris-marea);
}
.contacto__datos b { color: var(--hueso); font-weight: 600; }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie {
  border-top: var(--linea);
  padding-block: var(--e8);
  background: var(--negro-puro);
}
.pie__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}
.pie__marca {
  font-family: var(--fuente-titular);
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}
.pie__marca b { color: var(--oro); font-weight: inherit; }
.pie__legal { font-size: var(--t-micro); margin: 0; }
.pie__legal a { color: var(--gris-marea); }
@media (hover: hover) and (pointer: fine) {
  .pie__legal a:hover { color: var(--oro); }
}

/* --- Alérgenos ------------------------------------------------------------
   Fila de iconos SVG con <title> accesible. El nombre va SIEMPRE visible al
   lado del icono, no escondido tras una pulsación: es información de
   seguridad alimentaria (Reglamento UE 1169/2011) y esconderla es peor que
   ahorrar dos líneas. El icono refuerza, no sustituye.
   -------------------------------------------------------------------------- */
.alergenos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(223, 170, 47, 0.12);
  list-style: none;
}
.alergeno {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-micro);
  line-height: 1.2;
  color: var(--gris-marea);
}
.alergeno svg { flex: none; color: var(--oro-profundo); }
.alergenos--vacio { font-size: var(--t-micro); color: var(--gris-marea); }
/* .alergenos resetea el margen del <ul>, así que hay que devolverle el
   margin-top:auto de .plato__pie o la fila deja de pegarse al fondo. */
.alergenos.plato__pie { margin-top: auto; }

/* La regla .alergenos.plato__pie de arriba tiene la misma especificidad que
   .plato--ancho .plato__pie y va despues, asi que ganaba y los alergenos de la
   tarjeta ancha se seguian yendo al fondo. Aqui se corrige con mas peso. */
@media (min-width: 640px) {
  .plato--ancho .alergenos.plato__pie,
  .plato--ancho .plato__pie { margin-top: 0; }
}