/* ==========================================================================
   MAMASITA MEDALLO · Sitio público
   Header · Hero · Carta · Reserva · Eventos · Nosotros · Sedes ·
   Redes · Footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header · cabecera de revista en dos niveles
   Móvil/tablet: [logo] [buscador] [tema · menú ☰]
   Escritorio:   nivel 1 -> [logo] [buscador] [tema · Hacer pedido · Ingresar]
                 nivel 2 -> índice de secciones CENTRADO
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--linea-fina);
  transition: box-shadow 240ms var(--ease), background-color 240ms var(--ease);
}

.site-header.is-stuck { box-shadow: 0 1px 0 var(--linea), 0 10px 30px rgba(0, 0, 0, 0.06); }

.site-header__bar {
  width: var(--shell);
  margin-inline: auto;
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
}

/* Marca ------------------------------------------------------------------ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.brand__logo {
  width: clamp(32px, 2.2vw + 26px, 46px);
  height: auto;
  flex: none;
}

.brand__text { display: none; line-height: 1; }

@media (min-width: 560px) { .brand__text { display: block; } }

.brand__name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

.brand__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  color: var(--rojo-text);
  text-transform: uppercase;
}

/* Buscador --------------------------------------------------------------- */

.search {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 460px;
}

.search__field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 40px;
  padding-inline: var(--sp-3);
  background: var(--paper-pink);
  border: 1px solid var(--linea-fina);
  border-radius: var(--radius-pill);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease),
              box-shadow 180ms var(--ease);
}

.search__field:focus-within {
  background: var(--surface);
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rojo) 18%, transparent);
}

.search__icon { width: 16px; height: 16px; flex: none; color: var(--rojo); }

.search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font-size: var(--fs-sm);
}

.search__input:focus { outline: none; }
.search__input::-webkit-search-cancel-button { display: none; }

.search__clear {
  display: none;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--tinta-12);
  color: var(--tinta-70);
  font-size: 13px; line-height: 1;
  flex: none;
}

.search__field.has-value .search__clear { display: inline-flex; }

.search__hint {
  display: none;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--tinta-55);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 1px 5px;
  flex: none;
}

@media (min-width: 900px) { .search__hint { display: block; } }

/* Resultados en vivo */
.search__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  max-height: min(60svh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-2);
  display: none;
}

.search__results[data-open='true'] { display: block; }

.search__group {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-40);
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
}

.search__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2);
  border-radius: var(--radius);
  text-align: left;
  transition: background-color 140ms var(--ease);
}

.search__item:hover,
.search__item[aria-selected='true'] { background: var(--paper-pink); }

.search__thumb {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--rosa-100);
}

.search__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search__meta {
  font-size: var(--fs-xs);
  color: var(--tinta-55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search__price {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--rojo-text);
  white-space: nowrap;
}

.search__item mark { background: var(--rosa-200); color: var(--tinta); border-radius: 2px; }

.search__empty { padding: var(--sp-4); text-align: center; color: var(--tinta-55); font-size: var(--fs-sm); }

/* Acciones del header ----------------------------------------------------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-self: end;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 40px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--linea);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-toggle__bars { display: grid; gap: 3px; width: 16px; }
.nav-toggle__bars span { height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 200ms var(--ease), opacity 200ms var(--ease); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* Cajón de navegación (móvil y tablet) ------------------------------------ */

.nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 80;
  background: var(--paper);
  border-top: 1px solid var(--linea-fina);
  padding: var(--sp-5) var(--gutter) calc(var(--sp-7) + env(safe-area-inset-bottom));
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: var(--sp-1);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms var(--ease);
}

.nav[data-open='true'] { opacity: 1; transform: none; visibility: visible; }

.nav__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--linea-fina);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  line-height: 1.16;
  transition: color 160ms var(--ease), padding-left 200ms var(--ease);
}

.nav__link:hover { color: var(--rojo); padding-left: var(--sp-2); }
.nav__link .folio { font-size: var(--fs-micro); opacity: 0.6; }

.nav__link--cta { color: var(--rojo); }
.nav__link--login { color: var(--tinta-55); font-family: var(--font-body); font-size: var(--fs-sm); letter-spacing: 0.14em; font-weight: 700; }

/* Acciones del nivel 1 (solo escritorio) */

.deck { display: none; align-items: center; gap: var(--sp-3); }

.deck__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-inline: var(--sp-4);
  background: var(--rojo-btn-bg);
  color: var(--rojo-btn-fg);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 180ms var(--ease), transform 180ms var(--ease);
}

.deck__cta:hover { background: var(--tinta); color: var(--paper); transform: translateY(-1px); }

.deck__login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-70);
  white-space: nowrap;
  transition: color 160ms var(--ease);
}

.deck__login:hover { color: var(--rojo); }
.deck__login svg { width: 17px; height: 17px; }

/* Índice de secciones: nivel 2, centrado (solo escritorio) */

.masthead-index { display: none; border-top: 1px solid var(--linea-fina); }

.masthead-index__inner {
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(0.7rem, 1.35vw, 1.6rem);
  min-height: 38px;
  padding-block: 2px;
}

.masthead-index a {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-70);
  white-space: nowrap;
  position: relative;
  padding-block: 9px;
  transition: color 160ms var(--ease);
}

.masthead-index a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 4px;
  height: 1px;
  background: var(--rojo);
  transition: right 260ms var(--ease);
}

.masthead-index a:hover { color: var(--tinta); }
.masthead-index a:hover::after { right: 0; }
.masthead-index .folio { font-size: 9px; opacity: 0.55; }

/* A partir de 1000px se despliega la cabecera de dos niveles */
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .nav { display: none; }
  .deck { display: flex; }
  .masthead-index { display: block; }
  html { scroll-padding-top: calc(var(--header-h) + 38px + var(--sp-4)); }
}

/* El sangrado de la trama se ancla al contenido, no al documento entero:
   así el cierre queda visible antes del pie, que ya trae su propia trama. */
main { position: relative; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(560px, 86svh, 940px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -3; }

.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: var(--media-filter);
  opacity: var(--media-opacity);
  transform: scale(1.04);
}

/* Desvanecido hacia el papel.
   Dos capas. La de abajo es la de siempre: el papel baja en vertical por todo
   el hero. La de arriba es un refuerzo LOCAL bajo la columna de texto, porque
   el titular lleva el segundo renglón en rojo y el rojo sobre una zona oscura
   de la fotografía se queda en 2,3:1 (necesita 3).

   Es una elipse y no un rectángulo a propósito: un rectángulo se corta en
   seco contra sus propios bordes —eso deja las líneas del recuadro— mientras
   que la elipse se apaga sola en las cuatro direcciones. Sus radios están
   calculados para morir antes del borde derecho y del pie del hero; lo único
   que la recorta es el borde izquierdo del papel, que es donde tiene que
   sangrar. Medido: el salto de luz por píxel no sube respecto de no tenerla. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(62% 62% at 22% 42%,
      color-mix(in srgb, var(--paper) 62%, transparent) 0%,
      color-mix(in srgb, var(--paper) 45%, transparent) 42%,
      transparent 80%),
    linear-gradient(180deg,
      var(--veil-top) 0%,
      var(--veil-mid) 34%,
      var(--veil-low) 70%,
      var(--veil-end) 100%);
}

/* Arranque del documento: la tinta entra por el costado izquierdo del hero,
   por encima del velo y por debajo del titular.
   Usa la variante de costado y no la de esquina a propósito: la de esquina
   tiene el núcleo EN el vértice, así que el borde superior de su caja la
   corta en recto —y acá ese borde no es el filo del papel, es la línea de
   la cabecera, en plena página. Anclada al costado, lo único que la recorta
   es el margen izquierdo. */
.hero__bloom {
  top: 0;
  right: 0;
  left: auto;
  width: min(48%, 620px);
  height: clamp(300px, 48vw, 680px);
  /* El hero no tiene margen libre donde poner el nucleo: el texto arranca a
     37px del borde, asi que la mancha le queda debajo si o si. Por eso aca la
     tinta baja —lo que se pierde en fuerza se gana en que la volanta siga
     siendo legible sobre ella. */
  z-index: -1;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin-inline: auto;
  padding-block: var(--sp-8) var(--sp-6);
  display: grid;
  /* Los hijos de una grilla se estiran a todo el ancho aunque su texto no
     llegue ni a la mitad. Acá el ancho de caja importa: el velo local solo
     cubre la columna izquierda, y una caja que se estira hasta el borde
     derecho queda medio fuera. */
  justify-items: start;
  gap: var(--sp-4);
}

/* El titular necesita respirar respecto de lo que viene antes y después */
.hero__title { margin-block: var(--sp-2) var(--sp-3); }
.hero__inner .lead { margin-bottom: var(--sp-2); }

.hero__mark {
  width: clamp(72px, 12vw, 132px);
  filter: drop-shadow(0 6px 22px color-mix(in srgb, var(--rojo) 26%, transparent));
  animation: float-mark 7s ease-in-out infinite;
}

@keyframes float-mark {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-10px) rotate(1.5deg); }
}

.hero__title {
  /* Un h1 de bloque ocupa todo el ancho aunque el texto no llegue ni a la
     mitad. Ajustarlo al texto deja libre el costado derecho del hero, que es
     donde ahora entra la trama sin pisarle el renglón rojo. */
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-hero);
  text-transform: uppercase;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* El wordmark va en dos tonos. Son dos renglones de Anton y los dos macizos
   en negro se leen como una sola mancha: el segundo toma el rojo profundo de
   la marca —no el del logo, que en cuerpo grande sobre papel se queda corto
   de contraste— y el remate baja a gris para no repetir el acento. */
.wordmark-2 { color: var(--rojo-ink); }

.hero__title em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.42em;
  line-height: var(--lh-accent);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--tinta-70);
  margin-top: 0.34em;
}

/* El folio de esta tira es una etiqueta micro (10px) que en pantallas
   angostas queda al alcance de un parche de orla. Mismo criterio que
   .venue__tag: micro va en gris, el rojo se reserva para los acentos
   grandes —en la navegación el folio sigue rojo, ahí no hay trama—. */
.hero__meta .folio { color: var(--tinta-55); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--linea);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-2); }

/* Tira de datos en vivo bajo el hero */
.livestrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea-fina);
  border-block: 1px solid var(--linea);
  margin-top: var(--sp-5);
}

@media (min-width: 760px) { .livestrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.livestrip__cell {
  background: var(--paper);
  padding: var(--sp-3);
  display: grid;
  gap: 4px;
  min-width: 0;
}

.livestrip__k {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-55);
}

.livestrip__v {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.16;
  color: var(--rojo-text);
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.livestrip__v small {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tinta-55);
  letter-spacing: 0.06em;
}

.pulse-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 6px;
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); }
  60%      { box-shadow: 0 0 0 7px transparent; }
}

/* --------------------------------------------------------------------------
   Secciones
   --------------------------------------------------------------------------
   Dos reglas de ritmo:

   1. El aire entre bloques es generoso pero acotado (--section-pad). Antes
      había 256px de nada entre secciones y la página se leía desarmada.
   2. Ninguna sección corta en seco. Los fondos entran y salen con un
      degradado, y en las costuras va una trama de puntos que hace de
      transición en vez de una línea dura.
   -------------------------------------------------------------------------- */

.section { position: relative; padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * 0.72); }

/* NO hay secciones con fondo propio, a propósito.
   «Sobre nosotros» llevaba un bloque rosa de ~900px que ocupaba justo esa
   sección: un tinte rojizo delimitado por sus bordes hace que esa sección se
   lea como una zona aparte y que se note dónde termina una y empieza otra.
   La página es una sola superficie de papel continua; el único cambio de
   fondo deliberado es la contraportada, y ese se desvanece a lo largo de
   --footer-fade. */


/* --------------------------------------------------------------------------
   Orla · la trama alrededor de la página
   --------------------------------------------------------------------------
   Por qué parches chicos y no manchas grandes:

   Una mancha de 600px con puntos de 9px se lee como un TONO —un glow rojo— y,
   al estar confinada a una sección, marca esa sección como zona aparte. El
   mismo punto en un parche de 150px son ~9 puntos de ancho: ahí se ven los
   puntos. Misma tinta, misma cobertura, lectura opuesta.

   Por qué van DENTRO de cada sección y no a un porcentaje del documento:
   posicionados por porcentaje caen donde caigan, y al reflujo del contenido
   terminan sobre texto que no los tolera. Anclados a su sección, siguen a su
   sección en cualquier ancho y se elige a cuáles se les pone.

   «Sobre nosotros» no lleva: es la única sección con acentos rojos en los
   tres niveles (la cita destacada, los créditos de testimonio y el remate del
   titular). Rojo sobre trama roja no pasa AA a ninguna densidad útil.

   Sangran por el borde del papel, que es el único canto recto admitido.
   -------------------------------------------------------------------------- */

.orla__mota {
  position: absolute;
  z-index: 0;
  width: clamp(68px, 8.5vw, 150px);
  height: clamp(150px, 18vw, 300px);
  translate: 0 -50%;
  --dot-grid: 16px;
  --dot-half: 8px;
  --dot-a-coarse: 0.34;
  --dot-a-medium: 0.34;
  --dot-a-fine: 0.34;
}

.orla__mota--izq { left: 0; }
.orla__mota--der { right: 0; }

/* altura dentro de su propia sección */
.orla__mota--a { top: 18%; }
.orla__mota--b { top: 40%; }
.orla__mota--c { top: 62%; }
.orla__mota--d { top: 84%; }

/* variación de tamaño para que no se vean estampadas */
.orla__mota--c { height: clamp(120px, 14vw, 240px); }
.orla__mota--d { width: clamp(56px, 7vw, 120px); }

/* En el teléfono no hay margen: el parche se metería debajo del texto. Se
   achica y baja la tinta, queda como un roce en el filo. */
@media (max-width: 759px) {
  .orla__mota {
    width: clamp(42px, 13vw, 70px);
    height: clamp(110px, 26vw, 190px);
    --dot-a-coarse: 0.26;
    --dot-a-medium: 0.26;
    --dot-a-fine: 0.26;
  }
}

/* --------------------------------------------------------------------------
   Encabezado de sección
   --------------------------------------------------------------------------
   El contraste de revista se juega acá: un folio enorme y fino contra una
   etiqueta diminuta en versalitas, y al lado el titular pesado. Tres tamaños
   muy distintos en la misma línea de base.
   -------------------------------------------------------------------------- */

.section__head {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

@media (min-width: 900px) {
  .section__head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);
    align-items: end;
    gap: var(--sp-7);
  }
}

.section__lead-col { display: grid; gap: var(--sp-4); }

/* Folio gigante + etiqueta minúscula */
.section__mark {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--linea);
  padding-bottom: var(--sp-3);
}

.section__num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.9vw, 4rem);
  line-height: 0.8;
  /* Mismo motivo que el remate del titular: sobre la banda de fotos el rojo
     del logo se queda en 2,97:1 y necesita 3. */
  color: var(--rojo-ink);
  letter-spacing: -0.03em;
  flex: none;
}

.section__label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tinta-55);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-display);
  text-transform: uppercase;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.section__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.06em;
  line-height: var(--lh-accent);
  text-transform: none;
  /* El rojo del logo no aguanta cuerpo grande sobre fotografía: en la banda
     de reservas se quedaba en 2,67:1 y necesita 3. El profundo sí, y sobre
     papel limpio se distingue igual del negro. */
  color: var(--rojo-ink);
  letter-spacing: -0.01em;
}

.section__aside {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  /* el texto de apoyo no se pega al titular */
  padding-bottom: var(--sp-1);
}

/* --------------------------------------------------------------------------
   Manchas de sección
   --------------------------------------------------------------------------
   Un gesto por sección, alternando costado a medida que se baja: izquierda,
   derecha, izquierda, derecha. Entra por el borde del papel a media altura
   del bloque y se apaga hacia dentro. Ninguna cruza la página de lado a lado.
   -------------------------------------------------------------------------- */

.section__bloom {
  top: 50%;
  translate: 0 -50%;
  width: min(46%, 560px);
  height: clamp(320px, 46vw, 700px);
}

/* La mancha es un elemento posicionado; sin esto pintaria por encima del
   texto, que es contenido de bloque sin posicionar. */
.section > .shell,
.section > .shell-narrow { position: relative; z-index: 1; }

.section__bloom--left  { left: 0; }
.section__bloom--right { right: 0; }

/* La silueta suelta (--libre) no toca ningún borde, así que puede ir en
   mitad de la página: no hay caja que la recorte. Es la que rompe con que
   toda la trama cargue siempre el mismo costado. */
.section__bloom--suelta {
  left: 14%;
  right: auto;
  width: min(70%, 860px);
}

/* Una sección larga se come dos pantallas y media sin que pase nada: ahí van
   varias manchas escalonadas en vez de una sola al medio. */
.section__bloom--alto { top: 26%; }
.section__bloom--bajo { top: 78%; }

/* A media altura pero con el alto corto de --low, para que quepa por debajo
   del encabezado en una sección de altura media. */
.section__bloom--medio {
  top: 46%;
  height: clamp(220px, 28vw, 420px);
}

/* El encabezado de seccion lleva el remate en serif italica ROJA. Rojo sobre
   una trama roja no se lee a ninguna densidad —da 1.8:1— y no hay color de
   texto que lo arregle. En las secciones cortas, donde la mancha centrada le
   caeria justo encima, se la baja al cuerpo. */
.section__bloom--low {
  top: auto;
  bottom: var(--section-pad);
  /* Más baja que la centrada: tiene que caber por debajo del encabezado en
     una sección corta, que es justo para lo que existe. */
  height: clamp(220px, 28vw, 420px);
  translate: none;
}

/* El centrado va en `translate` y no en `transform`, para no pisar el
   espejado de --tr/--bl/--br: son propiedades distintas y el navegador las
   aplica en orden (translate primero, transform después). */

/* En pantallas chicas no hay margen donde sangrar: la mancha se metería
   debajo del texto en vez de enmarcarlo. Se achica y se apaga. */
@media (max-width: 759px) {
  .section__bloom {
    width: 56%;
    height: clamp(240px, 58vw, 400px);
  }
}

/* Filtros por carta */
.index-bar {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-5);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.index-bar::-webkit-scrollbar { display: none; }
.index-bar .chip { scroll-snap-align: start; flex: none; }

/* --------------------------------------------------------------------------
   La carta · grilla de categorías
   -------------------------------------------------------------------------- */

.cat-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--linea-fina);
  border-radius: var(--radius);
  background: var(--rosa-100);
  aspect-ratio: 3 / 4;
  isolation: isolate;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}

.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

/* Trama sobre la fotografía.
   Es donde la trama se ve de verdad: hay 24 tarjetas repartidas por toda la
   carta, así que el recurso aparece a cada pantalla de scroll en vez de en
   dos manchas sueltas. Y no cuesta contraste: el texto de la tarjeta se apoya
   en su propio velo, que pinta por encima de esto.
   Orden de capas: foto (-3) → trama (-2) → velo (-1) → texto. */
.event::before,
.venue__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(var(--dot-rgb), 0.82) 26%, transparent 30%),
    radial-gradient(circle, rgba(var(--dot-rgb), 0.82) 26%, transparent 30%);
  background-size: 9px 9px;
  background-position: 0 0, 4.5px 4.5px;
  /* La máscara tiene que morir DENTRO de la foto, no en su borde.
     Antes era `86% 72% at 100% 0%`: centrada justo en el vértice superior
     derecho, o sea la tinta más densa (0,82 de alfa, la más fuerte de la
     página) caía exactamente sobre el canto y la cortaban en seco los bordes
     superior y derecho de la tarjeta. Medido: alfa 0,82 en los dos bordes, en
     cinco fotos. Eso es el «glow rojo cortado»: un borde de tarjeta es una
     recta dentro de la composición, igual que cualquier otra.

     Ahora son dos elipses cuyos extremos quedan por dentro:
       E1  x 42→98 %   y  4→48 %
       E2  x 28→60 %   y 28→64 %
     ningún alcance llega a 0 % ni a 100 %, así que la trama se apaga sola
     antes de tocar ningún canto. */
  -webkit-mask-image:
    radial-gradient(28% 22% at 70% 26%, #000 0%, #000 34%, transparent 100%),
    radial-gradient(16% 18% at 44% 46%, #000 0%, #000 40%, transparent 100%);
  mask-image:
    radial-gradient(28% 22% at 70% 26%, #000 0%, #000 34%, transparent 100%),
    radial-gradient(16% 18% at 44% 46%, #000 0%, #000 40%, transparent 100%);
}

.cat-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(0.98);
  transition: transform 800ms var(--ease), filter 500ms var(--ease);
}

.cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* El velo tiene que aguantar la foto MAS CLARA de la carta: en el movil el
     nombre baja a 20px y ahi ya no cuenta como texto grande, asi que el
     degradado carga mas abajo en vez de repartirse parejo. */
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--media-scrim) 25%, transparent) 30%,
    color-mix(in srgb, var(--media-scrim) 72%, transparent) 62%,
    var(--media-scrim-deep) 100%);
}

.cat-card:hover img { transform: scale(1.06); filter: saturate(1) contrast(1); }

.cat-card__body {
  position: absolute;
  inset: auto 0 0 0;
  /* El velo de la tarjeta entera marca el ambiente, pero el que garantiza la
     lectura es este: local al pie, arranca transparente y no depende del alto
     de la tarjeta. En el movil la tarjeta es chica y el nombre baja a 20px
     —deja de contar como texto grande para la norma AA— asi que el piso de
     contraste tiene que estar asegurado aca. */
  padding: var(--sp-7) var(--sp-4) var(--sp-4);
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--media-scrim-deep) 58%, transparent) 44%,
    var(--media-scrim-deep) 100%);
  display: grid;
  gap: var(--sp-1);
  color: var(--on-media);
}

.cat-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.cat-card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-media-dim);
}

.cat-card__num {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--on-media);
  /* El folio cae en la parte ALTA de la foto, donde el velo de la tarjeta
     todavia es transparente: la pastilla es lo unico que lo separa de la
     imagen, asi que tiene que aguantar sola la foto mas clara de la carta. */
  background: color-mix(in srgb, var(--media-scrim) 88%, transparent);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   Banda de reserva / pedido (fondo2)
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.band__media { position: absolute; inset: 0; z-index: -2; }

.band__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--media-filter);
  opacity: var(--media-opacity);
}

.band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Los bordes superior e inferior se funden con el papel. El desvanecido
       es LARGO a propósito —40% del alto de la banda por lado— porque con un
       tramo corto, por suave que sea, el ojo encuentra igual dónde arranca y
       dónde termina la fotografía. Así la imagen aparece y desaparece en vez
       de empezar. */
    linear-gradient(180deg, var(--paper) 0%, transparent 42%,
                    transparent 58%, var(--paper) 100%),
    /* El velo lateral estaba tan alto que dejaba la banda casi blanca: el 28%
       de su superficie por encima de 0,90 de luminancia. Bajarlo devuelve la
       fotografía sin tocar el desvanecido de los bordes, que es lo que evita
       que se vea el canto de la imagen. Ahora queda en 17%. */
    linear-gradient(100deg,
      color-mix(in srgb, var(--paper) 72%, transparent) 0%,
      color-mix(in srgb, var(--paper) 46%, transparent) 48%,
      color-mix(in srgb, var(--paper) 20%, transparent) 100%);
}

.band__inner {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin-inline: auto;
  padding-block: calc(var(--section-pad) + var(--bleed) * 0.6);
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 960px) {
  .band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: var(--sp-7); }
}

.band__card {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--linea);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  box-shadow: var(--shadow-soft);
}

/* --------------------------------------------------------------------------
   Eventos
   -------------------------------------------------------------------------- */

.events {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 680px) { .events { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.event {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  background: var(--rosa-100);
  isolation: isolate;
}

.event img {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}

.event:hover img { transform: scale(1.07); }

.event::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 38%, var(--media-scrim) 100%);
}

.event__body {
  position: absolute;
  inset: auto 0 0 0;
  /* Mismo criterio que .cat-card__body: el velo que garantiza la lectura es
     local al pie y no depende del alto de la tarjeta ni del brillo de la foto. */
  padding: var(--sp-7) var(--sp-4) var(--sp-4);
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--media-scrim-deep) 58%, transparent) 44%,
    var(--media-scrim-deep) 100%);
  color: var(--on-media);
  display: grid;
  gap: var(--sp-1);
}

.event__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  text-transform: uppercase;
  line-height: 1.16;
}

.event__desc { font-size: var(--fs-xs); color: var(--on-media-dim); }

/* --------------------------------------------------------------------------
   Nosotros
   -------------------------------------------------------------------------- */

.about { display: grid; gap: var(--sp-6); }

@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
}

.pull {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.pull span { color: var(--rojo); }

.quotes { display: grid; gap: var(--sp-6); }

.quote {
  border-left: 2px solid var(--rojo);
  padding-left: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}

.quote__text { font-size: var(--fs-sm); color: var(--tinta-70); line-height: 1.6; }

.quote__by {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rojo-text);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Nuestras sedes
   -------------------------------------------------------------------------- */

.venues {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 820px) { .venues { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); } }

.venue {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--tinta);
  align-content: start;
}

.venue__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }

.venue__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-display);
  text-transform: uppercase;
  letter-spacing: -0.018em;
}

.venue__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Gris y no rojo: es una etiqueta micro (10-12px) que puede quedar bajo un
     parche de trama, y el rojo chico sobre trama roja no pasa AA a ninguna
     densidad util. Además así va con las otras etiquetas micro del sitio
     (.kicker, .section__label, .cat-card__meta), y el rojo queda para los
     acentos grandes. */
  color: var(--tinta-55);
  white-space: nowrap;
}

.venue__media {
  position: relative;
  /* aísla el apilado para que la trama de ::before quede sobre la foto */
  isolation: isolate;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--rosa-100);
}

.venue__media img {
  position: relative;
  z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease);
}

.venue:hover .venue__media img { transform: scale(1.04); }

.venue__rows { display: grid; gap: var(--sp-2); }

.venue__row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-sm);
  padding-block: var(--sp-1);
}

.venue__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-55);
}

.venue__value { color: var(--tinta-70); }
.venue__value a { text-decoration: underline; text-underline-offset: 3px; }
.venue__value a:hover { color: var(--rojo); }

.venue__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* --------------------------------------------------------------------------
   Redes sociales
   -------------------------------------------------------------------------- */

.social-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 760px) { .social-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.social-card {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  background: var(--surface);
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}

.social-card:hover { background: var(--rosa-100); border-color: var(--rosa-300); transform: translateY(-3px); }

.social-card__icon { width: 26px; height: 26px; color: var(--rojo); }
.social-card__name { font-family: var(--font-display); font-size: var(--fs-md); text-transform: uppercase; line-height: 1.16; }
.social-card__handle { font-size: var(--fs-xs); color: var(--tinta-55); }

/* --------------------------------------------------------------------------
   Footer · la contraportada
   --------------------------------------------------------------------------
   Compacto pero con carácter: una trama roja que sube desde abajo a la
   izquierda, la marca grande, una frase en serif y las columnas reducidas a
   lo mínimo. La idea es que se lea como el cierre de la revista, no como un
   pie de página de relleno.
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  isolation: isolate;
  /* El papel no se corta: se va oscureciendo hasta la contraportada a lo
     largo de --footer-fade. Ese tramo es el que antes era el margen de aire
     entre la última sección y el pie, así que no crece la página. El relleno
     de arriba incluye el desvanecido para que el contenido del pie arranque
     cuando el fondo ya es negro pleno. */
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--footer-bg) var(--footer-fade)),
    var(--footer-bg);
  color: var(--footer-fg);
  /* El contenido no espera a que el degradado termine: arranca al 72% del
     recorrido, que es donde el fondo ya está lo bastante oscuro para que el
     texto claro pase AA. Esperar al 100% costaba 100px de pie vacío. */
  padding-block: calc(var(--footer-fade) * 0.72 + var(--sp-3)) var(--sp-3);
  overflow: hidden;
}

/* Cierre del documento: la mancha entra por el vértice inferior izquierdo de
   la contraportada. Sobre el negro se aclara en vez de multiplicar (ver
   .dot-bloom--on-dark), así que el rojo se convierte en brasa y no en una
   mancha negra encima de otra negra. */
.footer__bloom {
  bottom: 0;
  left: 0;
  width: min(64%, 720px);
  height: clamp(220px, 32vw, 400px);
  --dot-a-coarse: 0.36;
  --dot-a-medium: 0.36;
  --dot-a-fine: 0.36;
  z-index: -1;
}

/* Filo rojo que separa el pie del cuerpo sin una línea dura */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rojo) 0%, var(--rosa-400) 45%, transparent 100%);
  z-index: 1;
}

.site-footer .shell { position: relative; z-index: 1; }

.site-footer a { transition: color 160ms var(--ease); }
.site-footer a:hover { color: var(--rosa-on-dark); }

/* Cabecera del pie: marca grande contra texto diminuto */
.footer-top {
  display: grid;
  gap: var(--sp-3);
  align-items: end;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--bar-line);
}

@media (min-width: 820px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); }
}

.footer-mark {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.footer-mark img {
  width: clamp(44px, 5vw, 64px);
  height: auto;
  flex: none;
}

.footer-wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.5rem);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}

.footer-wordmark .wordmark-2 { color: var(--rosa-on-dark); }

.footer-wordmark em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.44em;
  line-height: var(--lh-accent);
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--footer-dim);
  margin-top: 0.3em;
}

.footer-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Columnas */
.footer-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 820px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
}

.footer-col { display: grid; gap: var(--sp-2); align-content: start; }

.footer-col__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rosa-on-dark);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--bar-line);
}

.footer-col ul { display: grid; gap: 6px; }

.footer-col li,
.footer-col p { font-size: var(--fs-xs); color: var(--footer-dim); line-height: 1.65; }

.footer-hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--footer-dim);
  line-height: 1.5;
}

.footer-hours dt { font-weight: 700; color: var(--footer-fg); white-space: nowrap; }
.footer-hours dd { margin: 0; font-variant-numeric: tabular-nums; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--bar-line);
  font-size: var(--fs-micro);
  /* Esta franja cae justo sobre el nucleo de la mancha del pie, que ACLARA
     el fondo (screen). El gris del pie se queda en 3.9:1 ahi; en blanco
     pleno aguanta. Es letra chica legal: no pierde nada por ir entera. */
  color: var(--footer-fg);
}

.footer-legal nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }

/* --------------------------------------------------------------------------
   Burbuja de WhatsApp con ondas
   -------------------------------------------------------------------------- */

.wa {
  position: fixed;
  right: max(var(--sp-4), env(safe-area-inset-right));
  bottom: calc(max(var(--sp-4), env(safe-area-inset-bottom)) + var(--dock-h));
  z-index: 110;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rojo-btn-bg);
  color: var(--rojo-btn-fg);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--rojo) 40%, transparent);
  transition: transform 240ms var(--ease), background-color 240ms var(--ease), bottom 240ms var(--ease);
}

.wa:hover { transform: scale(1.07); background: var(--tinta); color: var(--paper); }
.wa svg { width: 28px; height: 28px; }

.wa__wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--rojo);
  opacity: 0;
  animation: wa-wave 3.2s var(--ease) infinite;
  pointer-events: none;
}

.wa__wave:nth-of-type(2) { animation-delay: 1.05s; }
.wa__wave:nth-of-type(3) { animation-delay: 2.1s; }

@keyframes wa-wave {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.9); opacity: 0;    }
  100% { transform: scale(1.9); opacity: 0;    }
}

.wa__label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--bar-bg);
  color: var(--bar-fg);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px var(--sp-3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

.wa:hover .wa__label { opacity: 1; transform: translateY(-50%); }

@media (max-width: 560px) { .wa__label { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .wa__wave { animation: none; }
  .hero__mark { animation: none; }
}

/* --------------------------------------------------------------------------
   Tarjeta de preferencias del comensal
   --------------------------------------------------------------------------
   Anclada abajo, no centrada: no tapa la carta y se puede ignorar. Un muro
   que obliga a responder para ver el menú convierte el consentimiento en un
   peaje, que es justo lo que la ley no considera consentimiento libre.
   -------------------------------------------------------------------------- */

.prefs {
  position: fixed;
  z-index: 60;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.prefs__caja {
  pointer-events: auto;
  position: relative;
  width: min(100%, 460px);
  max-height: min(78vh, 640px);
  overflow-y: auto;
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--linea-rosa);
  box-shadow: 0 18px 44px rgba(23, 17, 15, 0.18);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}

.prefs.is-in .prefs__caja { opacity: 1; transform: none; }

.prefs__cerrar {
  position: absolute;
  top: 6px; right: 8px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; background: none;
  font-size: 22px; line-height: 1;
  color: var(--tinta-55);
  cursor: pointer;
}

.prefs__tit {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-accent);
  color: var(--rojo-ink);
  padding-right: 32px;
}

.prefs__bajada {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--tinta-55);
}

.prefs__grupo { margin: 0 0 var(--sp-3); padding: 0; border: 0; }

.prefs__legend {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-55);
}

.prefs__ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* El radio nativo se oculta pero NO con display:none: eso lo saca del orden
   de tabulación y del lector de pantalla. Queda invisible y operable. */
.prefs__op input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.prefs__op span {
  display: block;
  padding: 7px 12px;
  border: 1px solid var(--linea-rosa);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--tinta);
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease),
              color 160ms var(--ease);
}

.prefs__op input:checked + span {
  background: var(--rojo-btn-bg);
  border-color: var(--rojo-btn-bg);
  color: var(--rojo-btn-fg);
}

.prefs__op input:focus-visible + span {
  outline: 2px solid var(--rojo);
  outline-offset: 2px;
}

.prefs__legal {
  margin: 0 0 var(--sp-3);
  font-size: 12px;
  line-height: 1.45;
  color: var(--tinta-55);
}

.prefs__legal a { color: var(--rojo-text); }

.prefs__acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* Un botón que se lee como enlace: en el pie, junto al aviso legal. */
.linkish {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.linkish[disabled] { text-decoration: none; opacity: 0.7; cursor: default; }

/* Plato marcado como apto según la dieta declarada. */
[data-apto='vegano']::after {
  content: 'Vegano';
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--linea-rosa);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rojo-ink);
}

@media (prefers-reduced-motion: reduce) {
  .prefs__caja { transition: none; opacity: 1; transform: none; }
}

.prefs__borrar {
  margin: var(--sp-3) 0 0;
  font-size: 12px;
  color: var(--tinta-55);
}