/* ============================================================
   DEMO 3 — Gumba's Italian Restaurant
   176 S Murphy Ave, Sunnyvale

   Sistema visual PROPIO. Ni marca.css, ni nada de los otros dos
   demos. Y a propósito NO se parece a Emelina's, que está a 76
   números en la misma calle: Emelina's es oscuro y va con foto
   por plato. Si los dos se vieran igual, se notaría la plantilla
   justo delante de los dos dueños que pueden compararlos.

   LA PORTADA sale de su fachada. En 176 S Murphy la pared está
   pintada a mano: "Gumba's" en rojo, "Italian foods Pizzaria" en
   verde, sobre pared clara; el toldo es verde-blanco-rojo y hay
   un banner que dice SINCE 1988. De ahí salen --hueso,
   --rojo-letrero y --verde-letrero, medidos contra AA.

   EL RESTO DE LA PÁGINA sigue en papel crema y tinta café, que es
   la carta. Dos registros a propósito: la fachada te recibe, la
   carta se lee.

   Sin una sola fotografía, y no por falta: una carta italiana de
   verdad es tipográfica. Eso además hace que la página pese nada
   y cargue al instante, que es exactamente el argumento contra
   el sitio actual (menús en JPG y un PDF para descargar).

   CONTRASTES (calculados, no estimados):
     tinta   #241A12 sobre papel #FAF4E8 .... 15.6 : 1
     suave   #5C4A3A sobre papel ...........   7.7 : 1
     rojo    #9E2B25 sobre papel ...........   6.8 : 1
     blanco  sobre rojo ...................    7.4 : 1
     verde   #4A5D3A sobre papel ..........    6.6 : 1
     papel   sobre noche #1E1611 ..........   16.3 : 1
     bruma   #C9B99F sobre noche ..........    9.3 : 1
     coral   #E86A5E sobre noche ..........    5.7 : 1
     falta   #6B3D00 sobre #FFD98A ........    6.8 : 1
   ============================================================ */

@import url("../fonts/fuentes.css");

:root{
  /* Papel y tinta */
  --papel:#FAF4E8;
  --papel-2:#FFFFFF;
  --crema:#F2E9D8;
  --tinta:#241A12;
  --suave:#5C4A3A;
  --linea:#DFD1B8;
  --linea-fuerte:#C9B79A;

  /* Italia, apagada */
  --rojo:#9E2B25;        /* para TEXTO y botones */
  --rojo-vivo:#C4322B;   /* SOLO decorativo: filetes y adornos */
  --verde:#4A5D3A;
  --noche:#1E1611;
  --bruma:#C9B99F;
  --coral:#E86A5E;       /* acento sobre oscuro */

  /* Lo que falta — en papel crema el ámbar claro se perdía,
     así que aquí el chip va más cargado. */
  --falta-fondo:#FFD98A;
  --falta-texto:#6B3D00;
  --falta-borde:#A9701A;

  /* Portada. El crema #FAF4E8 con display serif y acento terracota es
     el aspecto que sale por defecto en cualquier página de restaurante.
     Para la portada se sale de ahí: hueso con matiz verde (pared de
     comedor viejo, no papel de carta), tinta oliva en vez de marrón,
     chianti de verdad para los acentos y latón para las líneas de
     firma. El resto de la página conserva su papel crema. */
  --hueso:#ECEEE8;
  --chianti:#8E2230;
  /* Los colores del LETRERO PINTADO de 176 S Murphy: "Gumba's" en rojo,
     "Italian foods Pizzaria" en verde. Medidos sobre hueso: 4.57:1 y
     5.31:1, los dos pasan AA. No son "rojo y verde italianos" de
     catálogo: son los de su pared. */
  --rojo-letrero:#C13B2A;
  --verde-letrero:#3A6B4A;

  --laton:#A07D33;        /* SOLO decorativo: el filete de la firma (3.28:1) */
  --laton-texto:#7F6224;  /* para TEXTO: 4.89:1 sobre hueso, medido */

  --display:'Alfa Slab One', Georgia, 'Times New Roman', serif;
  --body:'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ancho:1000px;
  --r:6px;          /* radios pequeños: el papel no tiene esquinas redondas */
}

*{box-sizing:border-box; margin:0; padding:0;}

/* Sin esto, cualquier `display` de más abajo le gana al atributo
   `hidden` y el elemento se ve igual. */
[hidden]{display:none !important;}

html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  scroll-padding-top:120px;   /* barra de On The Map + nav pegajosa */
}

body{
  font-family:var(--body);
  background:var(--papel);
  color:var(--tinta);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit;}
svg{display:block;}

.envoltura{max-width:var(--ancho); margin:0 auto; padding:0 20px;}
.estrecho{max-width:760px;}

.saltar{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:#FFB238; color:#12152B; font-weight:700;
  padding:12px 18px; border-radius:0 0 8px 0;
}
.saltar:focus{left:0;}

:focus-visible{outline:3px solid var(--rojo-vivo); outline-offset:2px; border-radius:3px;}


/* ============================================================
   1. Barra de On The Map — el marco de Angel
   ============================================================ */

.otm{
  position:sticky; top:0; z-index:120;
  background:#12152B; border-bottom:1px solid #2C3157; color:#F7F5F0;
}
.otm .envoltura{
  display:flex; align-items:center; gap:10px 14px;
  flex-wrap:wrap; padding-top:9px; padding-bottom:9px;
}
.otm-marca{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  font-weight:700; font-size:.95rem; letter-spacing:-.01em;
}
.otm-marca .punto{
  width:10px; height:10px; border-radius:50%; background:#FFB238;
  box-shadow:0 0 0 4px rgba(255,178,56,.2); flex-shrink:0;
}
.otm-nota{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:#FFB238; flex:1 1 180px; min-width:0;
}
.otm-acciones{display:flex; align-items:center; gap:9px; margin-left:auto; flex-shrink:0;}

.idioma{
  display:flex; border:1px solid #454B79; border-radius:100px; overflow:hidden;
  font-family:var(--mono); font-size:.68rem; font-weight:700; flex-shrink:0;
}
.idioma button{
  background:transparent; border:0; color:#B9BDD8; cursor:pointer;
  padding:6px 12px; font:inherit; letter-spacing:.06em; line-height:1.3;
}
.idioma button[aria-pressed="true"]{background:#FFB238; color:#12152B;}

.otm-wa{
  display:inline-flex; align-items:center; gap:6px;
  background:#25D366; color:#0B2E19; text-decoration:none;
  font-weight:700; font-size:.78rem; padding:7px 14px; border-radius:100px;
  white-space:nowrap;
}
.otm-wa:hover{background:#1FBE5B;}


/* ============================================================
   2. Portada
   ============================================================ */

/* ============================================================
   LA PORTADA — el muro
   ============================================================
   Antes: fondo oscuro, todo centrado, nombre en serif enorme,
   rombo ornamental y tres botones iguales. Dos problemas. Uno,
   el brief prohíbe parecerse a Emelina's, que es "oscuro" — y
   estábamos abriendo en oscuro. Dos, era el patrón que sale por
   defecto para cualquier restaurante.

   Ahora: hueso claro y tinta oliva, alineado a la izquierda, y
   el protagonista es el catálogo entero a la vista. El oscuro se
   fue al pie, donde no compite.
   ============================================================ */
.portada{
  background:var(--hueso); color:var(--tinta);
  padding:clamp(28px, 6vw, 60px) 0 0;
  border-bottom:1px solid var(--linea);
  overflow:hidden;
}

/* La firma: nombre, hairline de latón, dirección. Una sola línea.
   El nombre va en el display pero PEQUEÑO — el display grande se
   gasta una sola vez en la página, en el titular. */
.marca{
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap; margin-bottom:clamp(22px, 5vw, 40px);
}
/* La bandera del toldo de su entrada. Vertical y pequeña, pegada al
   nombre, como el escudito de su propio banner — no una franja ancha
   cruzando la página, que es lo que se veía a turista. */
.bandera{
  display:inline-flex; width:16px; height:34px; flex-shrink:0;
  border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px rgba(36,26,18,.14);
}
.bandera i{flex:1;}
.bandera i:nth-child(1){background:var(--verde-letrero);}
.bandera i:nth-child(2){background:#F7F8F4;}
.bandera i:nth-child(3){background:var(--rojo-letrero);}

/* Los dos colores del letrero pintado: "Gumba's" en rojo,
   "Italian foods · Pizzaria" en verde. Tal cual la pared. */
.marca-nombre{
  display:flex; flex-direction:column; gap:1px; line-height:1;
}
.mn-rojo{
  font-family:var(--display); font-size:1.5rem; line-height:1;
  color:var(--rojo-letrero); letter-spacing:-.01em;
}
.mn-verde{
  font-family:var(--body); font-weight:600; font-size:.72rem;
  letter-spacing:.05em; color:var(--verde-letrero);
}
.marca-sep{
  flex:1; min-width:20px; height:2px; background:var(--laton); opacity:.55;
}
.marca-lugar{
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--suave);
}

/* El titular. Aquí es donde se gasta toda la tipografía. Dos líneas,
   interlineado apretado, la segunda en chianti para que el ojo caiga
   en la promesa y no en el número. */
.titular{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.3rem, 8.5vw, 4.6rem); line-height:.93;
  letter-spacing:-.02em; margin:0 0 clamp(20px, 4vw, 30px);
  max-width:16ch;
}
.titular-1{display:block; color:var(--tinta);}
.titular-2{display:block; color:var(--chianti);}

/* El buscador de portada. Sin caja: una línea de latón que se
   enciende al enfocar. La cuenta va a la derecha, en mono. */
.busca-portada{
  display:flex; align-items:center; gap:12px;
  border-bottom:2px solid var(--linea-fuerte);
  padding:10px 2px; margin-bottom:clamp(20px, 4vw, 28px);
  max-width:560px; transition:border-color .18s ease;
}
.busca-portada:focus-within{border-bottom-color:var(--laton);}
.busca-portada .lupa{width:19px; height:19px; color:var(--suave); flex-shrink:0;}
.busca-portada input{
  flex:1; min-width:0; border:0; background:none; padding:4px 0;
  font-family:var(--body); font-size:1.02rem; color:var(--tinta);
}
.busca-portada input:focus{outline:none;}
.busca-portada input::placeholder{color:var(--suave); opacity:.75;}
.busca-cuenta{
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--suave);
  white-space:nowrap;
}

/* El titular se queda a todo lo ancho; lo que se parte en dos es lo
   de debajo: buscador + muro a la izquierda, vitrina a la derecha. */
.portada-cuerpo{display:grid; gap:clamp(24px, 4vw, 40px);}
@media (min-width:980px){
  .portada-cuerpo{grid-template-columns:minmax(0,1fr) 300px; align-items:start;}
}
.portada-izq{min-width:0;}

/* ---- LA VITRINA ----
   Marco vacío para las fotos del restaurante. Proporción 4:5, que es
   la del teléfono en vertical — que es como Tony las va a tener. */
.vitrina{display:flex; flex-direction:column; gap:12px;}
.vitrina-marco{
  /* Apaisado en el teléfono y vertical en escritorio. A 4:5 y ancho
     completo, en un móvil el marco medía casi 470 px de alto y echaba
     el botón fuera de la primera pantalla. El 4:5 se queda para la
     columna de la derecha, donde sí es la proporción de una foto de
     teléfono en vertical. */
  position:relative; aspect-ratio:16/10; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:20px; text-align:center;
  /* El borde va en latón (3.28:1) y no en --linea-fuerte, que se
     quedaba en 1.67:1 — un marco que no se ve no enseña dónde van
     las fotos, que es todo lo que este elemento tiene que hacer. */
  border:2px dashed var(--laton); border-radius:var(--r);
  background:rgba(255,255,255,.4);
}

/* Con fotos dentro deja de ser un hueco: borde sólido, sin relleno,
   y la leyenda se apoya abajo sobre un velo para que se lea encima
   de cualquier parte de la imagen. */
.vitrina-marco.vitrina-llena{
  border:1px solid var(--linea-fuerte);
  padding:0; overflow:hidden; justify-content:flex-end;
  background:var(--crema);
}
.vitrina-foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity 1.1s ease;
}
.vitrina-foto.activa{opacity:1;}

.vitrina-icono{width:34px; height:34px; color:var(--laton-texto);}
.vitrina-titulo{
  font-family:var(--body); font-weight:600; font-size:.95rem; color:var(--tinta);
}
.vitrina-pie{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--suave); line-height:1.6;
  transition:opacity .3s ease;
}
.vitrina-pie.cambiando{opacity:0;}

/* La leyenda, dentro del marco y sobre la foto. El velo va de
   transparente a casi negro para que el texto blanco se lea encima
   del patio soleado igual que encima de la fachada de noche. */
.vitrina-llena .vitrina-pie{
  position:relative; z-index:2; width:100%; margin:0;
  padding:38px 14px 12px; color:#FFFFFF; text-align:left;
  /* El velo NUNCA baja de 0.62 de opacidad donde cae el texto. Eso
     pone un suelo al contraste: aunque debajo hubiera un píxel blanco
     puro, el blanco encima sigue por encima de 5:1. Así la leyenda se
     lee igual sobre el patio a pleno sol que sobre la fachada de
     noche, sin depender de cómo sea la foto. */
  background:linear-gradient(to top, rgba(12,9,6,.82) 0%, rgba(12,9,6,.62) 45%, rgba(12,9,6,0) 100%);
}

/* La proporción de escritorio va AQUÍ, después de la regla base:
   estaba antes y por eso no surtía efecto — mismo peso, gana la
   última. Es el segundo tropiezo con lo mismo en esta sesión. */
@media (min-width:980px){
  .vitrina-marco{aspect-ratio:4/5;}
}

.vitrina-puntos{display:flex; gap:6px; justify-content:center;}
.vitrina-puntos i{
  width:6px; height:6px; border-radius:50%;
  background:#82827A; transition:background .25s ease;   /* 3.31:1 */
}
.vitrina-puntos i.activo{background:var(--laton-texto);}
.vitrina-nota{margin:0; text-align:center;}

@media (prefers-reduced-motion:reduce){
  .vitrina-pie{transition:none;}
}

/* ---- Las secciones de la carta ----
   Van `hidden` en el HTML: sin JavaScript la carta sale entera y
   estos botones no harían nada. */
.secciones{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 18px; justify-content:center;
}
.secciones button{
  font-family:var(--body); font-weight:600; font-size:.9rem;
  color:var(--tinta); background:var(--papel-2);
  border:1px solid var(--linea-fuerte); border-radius:100px;
  /* 44 px de alto: es el mínimo para tocar con el dedo sin fallar.
     Con 9px de padding se quedaba en 37. */
  padding:11px 20px; min-height:44px; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.secciones button:hover{border-color:var(--tinta);}
.secciones button[aria-pressed="true"]{
  background:var(--rojo); border-color:var(--rojo); color:#FFFFFF;
}
/* Mientras hay una búsqueda puesta, la sección no manda: los botones
   se atenúan para que se vea que están en pausa, no rotos. */
.secciones button.atenuado{opacity:.55;}

.secciones-aviso{
  text-align:center; margin:-8px 0 18px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--suave);
}

/* ============================================================
   EL MAPA
   ============================================================
   Dibujado a mano con coordenadas de OpenStreetMap. Los colores
   son los del papel de la carta, no los de un mapa de navegación:
   esto va dentro de una carta de restaurante, no dentro de una
   app de GPS.
   ============================================================ */
.mapa-caja{margin:18px 0 20px;}
.mapa{
  width:100%; height:auto; display:block;
  border:1px solid var(--linea-fuerte); border-radius:var(--r);
}
.m-fondo{fill:#F7F2E6;}

/* Las calles: cuanto más grande la vía, más gruesa la línea. */
.m-chica{stroke:#DCD0B6; stroke-width:3; fill:none; stroke-linecap:round;}
.m-media{stroke:#CDBE9E; stroke-width:5; fill:none; stroke-linecap:round;}
.m-grande{stroke:#BCAA85; stroke-width:8; fill:none; stroke-linecap:round;}

/* Murphy va en verde y más marcada: es la calle del restaurante y
   es peatonal, que es justo lo que hay que entender del mapa. */
.m-murphy{stroke:var(--verde); stroke-width:9; fill:none; stroke-linecap:round;}

.m-rot{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  fill:#7A6A4E; text-anchor:middle;
}
.m-rot-murphy{
  font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:.08em;
  fill:#33472A; text-anchor:middle;
}

.m-tren circle{fill:#5C4A3A;}
.m-tren text{
  font-family:var(--mono); font-size:15px; font-weight:700;
  letter-spacing:.06em; fill:#4A3B2C;
}

/* El pin del restaurante, encima de todo. El halo no es adorno:
   separa el punto del fondo cuando cae sobre una calle. */
.m-halo{fill:var(--rojo); opacity:.16;}
.m-punto{fill:var(--rojo); stroke:#FFF; stroke-width:2.5;}
/* Alineados a la derecha porque el rótulo cuelga a la IZQUIERDA del
   pin — a la derecha chocaba con el nombre de S Sunnyvale Avenue. */
.m-yo{
  font-family:var(--display); font-size:26px; fill:var(--rojo); text-anchor:end;
}
.m-yo-dir{
  font-family:var(--mono); font-size:14px; letter-spacing:.04em;
  fill:#5C4A3A; text-anchor:end;
}

.m-escala path{stroke:#7A6A4E; stroke-width:1.5; fill:none;}
.m-escala text{
  font-family:var(--mono); font-size:13px; fill:#7A6A4E;
}

/* En un teléfono el mapa cae a ~280 px de ancho y los nombres de calle
   quedarían en 5 px: ilegibles y encima ensucian. Se quitan los
   secundarios y se deja lo que hace falta para orientarse — Murphy en
   verde, el pin, el Caltrain y la escala. */
@media (max-width:620px){
  .m-rot{display:none;}
}

.mapa-pie{
  margin-top:9px; font-size:.82rem; line-height:1.55; color:var(--suave);
}

/* ============================================================
   LA CINTA DE CANALES
   ============================================================
   Va en oscuro a propósito: esto es On The Map hablando, no el
   restaurante. El papel crema es la carta; esto es el análisis.

   El bucle sin costura se hace con la lista pintada DOS veces y
   un desplazamiento de exactamente -50 %: cuando la primera copia
   acaba de salir por la izquierda, la segunda está justo donde
   empezó la primera. No hay salto porque no hay final.

   Es CSS puro. Sin JavaScript la cinta se mueve igual.
   ============================================================ */
.canales{
  background:var(--noche); color:var(--papel);
  padding:clamp(34px, 6vw, 56px) 0;
  overflow:hidden;
}
.canales-cabeza{max-width:640px;}
.canales-rotulo{
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#FFB238;
}
.canales-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem, 4.2vw, 2.3rem); line-height:1.08;
  margin:12px 0 12px; color:var(--papel);
}
.canales-entrada{color:var(--bruma); font-size:1rem; line-height:1.65;}

.canales-marco{
  margin:clamp(26px, 5vw, 40px) 0 clamp(20px, 4vw, 28px);
  /* Las máscaras de los bordes hacen que las tarjetas se desvanezcan
     al entrar y salir en vez de aparecer cortadas contra el borde. */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.canales-pista{
  display:flex; width:max-content;
  animation:desfilar 56s linear infinite;
}
/* Se para para poder leerla: al pasar el ratón y también al llegar
   con el teclado, que si no es imposible alcanzar los enlaces. */
.canales-marco:hover .canales-pista,
.canales-pista:focus-within{animation-play-state:paused;}

@keyframes desfilar{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.canales-lista{display:flex; list-style:none; margin:0; padding:0;}

.canal{
  flex:0 0 auto; width:236px; margin-right:14px;
  padding:16px 18px; border-radius:var(--r);
  border:1px solid #3A2E24; background:rgba(255,255,255,.04);
  display:flex; flex-direction:column; gap:7px;
}
/* Los suyos se marcan: es la mitad del argumento. De doce sitios,
   manda en cuatro. */
.canal.es-suyo{border-color:#6E5A2E; background:rgba(255,178,56,.07);}

.canal-nom{
  font-family:var(--body); font-weight:700; font-size:1rem;
  color:var(--papel); line-height:1.2;
}
.canal.es-suyo .canal-nom{color:#FFD08A;}
.canal-que{
  font-size:.79rem; line-height:1.45; color:var(--bruma);
  min-height:2.2em;
}
.canal-dato{
  font-family:var(--mono); font-size:.9rem; font-weight:700;
  color:#F2C87E; letter-spacing:.01em;
}

.canales-pie{
  color:var(--bruma); font-size:.86rem; line-height:1.7; max-width:640px;
}

/* Quien pide menos movimiento no ve una cinta corriendo: ve la lista
   quieta y la recorre con el dedo o la rueda. El contenido es el
   mismo, la animación no es el contenido. */
@media (prefers-reduced-motion:reduce){
  .canales-pista{animation:none;}
  .canales-marco{overflow-x:auto; -webkit-mask-image:none; mask-image:none;}
  .canales-lista[aria-hidden="true"]{display:none;}
}

/* ---- Los atajos del buscador ----
   Botones, no texto que haya que teclear. Tony los toca y ve moverse
   el muro. Van con `hidden` en el HTML: sin JavaScript no filtrarían
   nada y serían botones muertos. */
.atajos{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:-6px 0 clamp(20px, 4vw, 28px);
}
.atajos-que{
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--suave);
  margin-right:2px;
}
.atajos button{
  font-family:var(--body); font-size:.83rem; color:var(--tinta);
  background:none; border:1px solid var(--linea-fuerte);
  border-radius:100px; padding:6px 14px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.atajos button:hover{border-color:var(--tinta);}
.atajos button[aria-pressed="true"]{
  background:var(--tinta); border-color:var(--tinta); color:var(--hueso);
}

/* ---- EL MURO ----
   Los 96 nombres a la vez. En columnas, denso, pequeño. No es
   decoración: es el tamaño del catálogo hecho imagen. Al escribir
   en el buscador, lo que no coincide se apaga y lo que coincide
   se queda en tinta. Ése es el momento de la venta. */
.muro{position:relative; margin:0 -4px;}
.muro-lista{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:30px;
  max-height:clamp(210px, 34vh, 320px); overflow:hidden;
}
.muro-lista li{
  font-family:var(--body); font-size:.83rem; line-height:1.95;
  color:var(--suave);
  break-inside:avoid; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  transition:color .16s ease, opacity .16s ease;
}
/* Estados de filtrado. Los pone SIEMPRE el script — nunca el HTML.
   Sin JavaScript el muro se queda como índice completo y legible. */
/* Al filtrar, el muro NO se atenúa: se encoge. Pasar de 96 nombres a
   4 delante de los ojos es el argumento entero de la página, y con el
   apagado no se veía — los que coincidían quedaban repartidos fuera de
   pantalla y el muro seguía igual de lleno.

   Los que no coinciden se retiran (no se pintan de gris claro, que
   además fallaba el contraste). Los que quedan van en tinta plena, en
   una sola columna, como una lista de resultados. */
/* La sección detrás del nombre. En el muro lleno va callada; al
   filtrar sube a mono para que se lea de qué carta sale cada
   resultado. */
/* En el muro lleno la etiqueta NO se enseña: 46 líneas seguidas
   diciendo PASTA es ruido, no información. Aparece sólo al filtrar,
   que es cuando hace falta — ahí sí hay que distinguir la pizza
   "Seafood" del calzone "Seafood". */
.muro-seccion{display:none;}
.muro.filtrando .muro-seccion{
  display:inline; margin-left:10px;
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--laton-texto);
}

.muro-lista li.apagado{display:none;}
.muro.filtrando .muro-lista{
  columns:1; max-height:none;
}
.muro.filtrando .muro-lista li{font-size:1rem; line-height:2.1;}
.muro.filtrando .muro-velo{display:none;}
.muro-lista li.encendido{color:var(--chianti); font-weight:600;}

/* El velo de abajo: corta el muro sin que parezca cortado. */
.muro-velo{
  position:absolute; left:0; right:0; bottom:0; height:90px;
  background:linear-gradient(to bottom, rgba(236,238,232,0), var(--hueso) 88%);
  pointer-events:none;
}

/* ---- El pie de la portada ----
   UN botón. Los otros dos pasan a enlaces de texto. El brief le
   critica a gumbas.com tener tres botones rojos idénticos
   compitiendo; no vamos a repetirlo aquí. */
.portada-pie{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:14px 20px; padding:clamp(20px, 4vw, 28px) 0 clamp(24px, 5vw, 34px);
}
.portada-secundarios{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:.9rem; color:var(--suave);
}
.portada-secundarios a{color:var(--suave); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--linea-fuerte);}
.portada-secundarios a:hover{color:var(--chianti); text-decoration-color:currentColor;}
/* El punto separador iba en --linea-fuerte y se quedaba en 1.67:1.
   Es decorativo y lleva aria-hidden, pero un separador que no se ve
   no separa. #666E64 = 4.51:1, medido. */
.portada-secundarios .punto{color:#666E64;}

.btn-primario{
  background:var(--tinta); color:var(--hueso);
  border:2px solid var(--tinta);
}
.btn-primario:hover{background:var(--chianti); border-color:var(--chianti);}

.falta-portada{flex-basis:100%;}

/* Las reseñas de Google, pegadas al botón. Dejó de ser un hueco
   ámbar el 13 de agosto: son sus 4.0 con 1.1K, leídas de su ficha. */
.resenas{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:.9rem; color:var(--tinta);
}
/* El dorado va a 3.24:1 y la estrella vacía a 3.05:1, los dos por
   encima del mínimo de 3:1 que piden los iconos. El dorado "de
   catálogo" (#B8860B) se quedaba en 2.78:1 y el gris claro en 1.67:1
   — una quinta estrella que no se ve convierte 4 de 5 en "cuatro". */
.resenas-estrellas{display:inline-flex; gap:2px; color:#A87C09;}
.resenas-estrellas .apagada{color:#82827A;}
.resenas-texto{font-weight:600;}

/* ---- El especial de $42 ----
   Su mejor oferta, hoy enterrada en un PDF de 216 KB. Va en verde de
   letrero, que es el otro color de su fachada, para que se despegue
   de la carta sin gritar. */
.especial{padding:clamp(28px, 5vw, 40px) 0 0;}
.especial-caja{
  display:flex; align-items:center; gap:clamp(18px, 4vw, 36px);
  flex-wrap:wrap;
  background:var(--verde-letrero); color:#F4F7F2;
  border-radius:var(--r); padding:clamp(22px, 4vw, 32px);
}
.especial-texto{flex:1 1 260px; min-width:0;}
.especial-rotulo{
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:#D8E8DC;
}
.especial-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem, 4vw, 2.05rem); line-height:1.05;
  margin:10px 0 14px; color:#FFFFFF;
}
.especial-lista{list-style:none; margin:0 0 12px; padding:0;}
.especial-lista li{
  position:relative; padding-left:20px; line-height:1.85; font-size:1rem;
}
.especial-lista li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:9px; height:2px; background:#D8E8DC;
}
.especial-letra{font-size:.84rem; line-height:1.65; color:#D2E4D8; margin:0;}

.especial-precio{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  padding-left:clamp(0px, 2vw, 20px);
}
.ep-cifra{
  font-family:var(--display); font-size:clamp(3rem, 9vw, 4.4rem);
  line-height:.9; color:#FFFFFF;
}
.ep-imp{
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#D8E8DC; margin-top:8px;
}
.especial-nota{margin:14px 0 0;}

/* OJO: aquí había un `columns:4` a partir de 980px que pisaba —por ir
   más abajo en el archivo— al `columns:3` que pone la vitrina. Con la
   vitrina al lado, cuatro columnas dejan los nombres cortados con
   puntos suspensivos casi en todos. Se queda en 3 y hay un solo sitio
   donde se decide. */
@media (min-width:700px){
  .muro-lista{columns:2;}
}
@media (min-width:980px){
  .muro-lista{columns:3;}
}
@media (prefers-reduced-motion:reduce){
  .muro-lista li{transition:none;}
}

/* Filete tricolor: verde, crema, rojo. El único guiño a la
   bandera, y va fino — una franja gorda se ve a turista. */
.tricolor{height:4px; display:flex;}
.tricolor i{flex:1;}
.tricolor i:nth-child(1){background:#4A7A3A;}
.tricolor i:nth-child(2){background:#F2E9D8;}
.tricolor i:nth-child(3){background:var(--rojo-vivo);}

.rotulo{
  font-family:var(--mono); font-size:.64rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--coral);
  display:inline-block;
}
.rotulo.oscuro{color:var(--rojo);}
.rotulo.verde{color:var(--verde);}

.nombre{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem, 11vw, 5rem); line-height:.94;
  letter-spacing:-.005em; margin-top:12px; color:var(--papel);
}
.bajo-nombre{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--bruma); margin-top:12px;
}

/* El rombo va en coral, no en el rojo vivo: sobre el fondo oscuro
   el rojo se quedaba en 3.26:1. Es decorativo y lleva aria-hidden,
   así que no lo exige la norma — pero un adorno que casi no se ve
   tampoco adorna. */
.filete{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:20px auto 0; max-width:260px; color:var(--coral);
}
.filete::before, .filete::after{
  content:""; flex:1; height:1px; background:currentColor; opacity:.55;
}
.filete span{font-size:.85rem;}

.datos-portada{
  margin-top:20px; font-size:.95rem; color:var(--bruma); line-height:1.75;
}
.datos-portada a{color:var(--papel); font-weight:600; white-space:nowrap;}

/* Abierto ahora / cerrado — se calcula con los horarios reales */
.estado{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  border:1px solid #3A2E24; border-radius:100px; padding:8px 16px;
  font-size:.88rem; color:var(--papel); background:rgba(255,255,255,.04);
}
.estado .foco{width:9px; height:9px; border-radius:50%; background:var(--bruma); flex-shrink:0;}
.estado.abierto .foco{background:#5FD68A; box-shadow:0 0 0 4px rgba(95,214,138,.18);}
.estado.cerrado .foco{background:var(--coral);}

.botonera{
  display:flex; flex-wrap:wrap; gap:11px; margin-top:26px; justify-content:center;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:700; font-size:.96rem; line-height:1.3;
  padding:15px 28px; border-radius:var(--r); text-decoration:none;
  border:2px solid transparent; cursor:pointer; text-align:center;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform:translateY(1px);}
.btn-rojo{background:var(--rojo); color:#FFFFFF;}
.btn-rojo:hover{background:#872320;}
.btn-linea{border-color:#4A3B30; color:var(--papel);}
.btn-linea:hover{border-color:var(--coral); background:rgba(232,106,94,.1);}
.btn-papel{background:var(--papel); color:var(--tinta);}
.btn-papel:hover{background:#fff;}
.btn-wa{background:#25D366; color:#0B2E19;}
.btn-wa:hover{background:#1FBE5B;}


/* ============================================================
   3. Marca de dato que falta
   ============================================================ */

.falta{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--falta-fondo); color:var(--falta-texto);
  border:1px dashed var(--falta-borde); border-radius:var(--r);
  font-family:var(--mono); font-size:.76em; font-weight:700;
  letter-spacing:.02em; padding:3px 9px; line-height:1.45;
}
.falta::before{content:"?"; font-weight:700; opacity:.75;}
/* Este tratamiento es para fondo OSCURO. Antes lo llevaba también la
   portada; al pasarla a hueso, el ámbar claro se quedaba en un texto
   casi invisible. Ahora sólo lo usa el pie, que sigue siendo oscuro.
   La portada usa el chip ámbar normal, que trae su propio fondo y no
   depende del color de la página. */
.pie .falta{
  background:rgba(255,217,138,.15); color:#F2C87E; border-color:#8A6B33;
}

/* El "abierto ahora" también venía vestido para fondo oscuro:
   texto en --papel sobre un borde casi negro. Sobre hueso no se leía. */
.portada .estado{
  color:var(--tinta); border-color:var(--linea-fuerte);
  background:rgba(255,255,255,.55);
}

.leyenda{
  display:flex; align-items:flex-start; gap:13px;
  background:var(--falta-fondo); border:1px solid var(--falta-borde);
  border-radius:var(--r); padding:16px 18px;
  color:var(--falta-texto); font-size:.9rem; line-height:1.6;
}
.leyenda .icono{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--falta-texto); color:var(--falta-fondo);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:.85rem;
}


/* ============================================================
   4. Secciones
   ============================================================ */

section{padding:52px 0;}
h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.7rem, 5vw, 2.6rem); line-height:1.08;
  margin-top:10px;
}
h3{font-family:var(--display); font-weight:400; font-size:1.35rem; line-height:1.2;}
.entrada{font-size:1rem; color:var(--suave); max-width:58ch; margin-top:12px;}
.cabecera-seccion{margin-bottom:26px;}
.centrado{text-align:center;}
.centrado .entrada{margin-left:auto; margin-right:auto;}


/* ============================================================
   5. LA CARTA — el corazón del demo

   Esto es lo que el sitio de hoy no tiene: la carta como TEXTO,
   que se lee en un teléfono, se busca, se amplía y pesa nada.
   ============================================================ */

/* Navegación pegajosa de secciones */
.nav-carta{
  position:sticky; top:46px; z-index:110;
  background:var(--crema); border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.nav-carta .envoltura{
  display:flex; gap:6px; overflow-x:auto; padding-top:9px; padding-bottom:9px;
  scrollbar-width:none;
}
.nav-carta .envoltura::-webkit-scrollbar{display:none;}
.nav-carta a{
  flex-shrink:0; text-decoration:none; white-space:nowrap;
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--suave); padding:8px 14px; border-radius:100px;
  border:1px solid transparent;
}
.nav-carta a:hover{border-color:var(--linea-fuerte); color:var(--tinta);}
.nav-carta a.viva{background:var(--rojo); color:#fff;}

/* Buscador — solo aparece si hay JavaScript, porque sin él no
   haría nada. La carta completa se ve igual. */
.buscador{margin-top:22px;}
.buscador .caja{position:relative;}
.buscador input{
  width:100%; font:inherit; font-size:1rem;
  background:var(--papel-2); border:1.5px solid var(--linea-fuerte);
  border-radius:var(--r); padding:14px 16px 14px 44px; color:var(--tinta);
}
.buscador input:focus{
  outline:none; border-color:var(--rojo);
  box-shadow:0 0 0 3px rgba(158,43,37,.14);
}
.buscador .lupa{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--suave); pointer-events:none;
}
.buscador .cuenta{
  margin-top:9px; font-family:var(--mono); font-size:.72rem;
  color:var(--suave); letter-spacing:.04em; min-height:1.2em;
}

.filtros{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.filtro{
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  background:transparent; border:1px solid var(--linea-fuerte);
  color:var(--suave); border-radius:100px; padding:7px 14px; cursor:pointer;
}
.filtro[aria-pressed="true"]{background:var(--verde); border-color:var(--verde); color:#fff;}

/* Bloques de la carta */
.grupo{margin-top:44px; scroll-margin-top:120px;}
.grupo > .titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,4vw,2.1rem); line-height:1.1; text-align:center;
}
.grupo > .nota{
  text-align:center; font-size:.9rem; color:var(--suave); margin-top:8px;
  max-width:52ch; margin-left:auto; margin-right:auto;
}

.familia{margin-top:30px;}
.familia > .cabeza{
  display:flex; align-items:center; gap:14px; margin-bottom:4px;
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--rojo);
}
.familia > .cabeza::before, .familia > .cabeza::after{
  content:""; flex:1; height:1px; background:var(--linea);
}
.familia > .aclara{
  text-align:center; font-size:.85rem; color:var(--suave);
  font-style:italic; margin-bottom:14px;
}

/* ---------- Un plato: dos vistas, un solo HTML ---------------
   VISTA LISTA (la de siempre, y la que sale sin JavaScript):
   el dorso no existe, la carta se hojea como una carta impresa.
   Es la que gana para BUSCAR entre 95 platos.

   VISTA TARJETAS: cada plato es un cuadrito que se voltea y
   enseña el marco de su foto. Es la que gana para ANTOJAR.

   El interruptor lo pone el JavaScript. Sin él manda la lista,
   que está completa: nunca se esconde un plato ni un precio.
   ---------------------------------------------------------- */

.plato{padding:13px 0; border-bottom:1px solid var(--linea);}
.plato:last-child{border-bottom:none;}
.plato .dorso{display:none;}          /* en lista, el dorso no pinta */
.plato .linea{display:flex; align-items:baseline; gap:8px;}
.plato .nom{font-weight:600; font-size:1rem; line-height:1.35;}
.plato .puntos{
  flex:1; min-width:14px; border-bottom:1.5px dotted var(--linea-fuerte);
  transform:translateY(-4px);
}
.plato .precio{
  font-family:var(--mono); font-weight:700; font-size:.95rem;
  color:var(--rojo); white-space:nowrap;
}
.plato .desc{font-size:.9rem; color:var(--suave); margin-top:5px; max-width:62ch;}
.plato .marca-veg{
  display:inline-block; margin-left:7px; vertical-align:middle;
  font-family:var(--mono); font-size:.58rem; font-weight:700;
  letter-spacing:.1em; color:#fff; background:var(--verde);
  border-radius:3px; padding:2px 6px; line-height:1.4;
}

/* Precios de pizza por tamaño */
.tallas{
  display:flex; flex-wrap:wrap; gap:7px; margin-top:9px;
}
.tallas .t{
  font-family:var(--mono); font-size:.74rem;
  background:var(--crema); border:1px solid var(--linea);
  border-radius:var(--r); padding:4px 9px; color:var(--suave);
}
.tallas .t b{color:var(--tinta); font-weight:700;}
/* Con JavaScript se enseña solo el tamaño elegido */
.js-tallas .tallas .t{display:none;}
.js-tallas .tallas .t.viva{display:inline-block; background:#fff; border-color:var(--rojo); color:var(--rojo);}
.js-tallas .tallas .t.viva b{color:var(--rojo);}

.selector-talla{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:16px; padding:14px 16px;
  background:var(--crema); border:1px solid var(--linea); border-radius:var(--r);
}
.selector-talla .que{
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--suave);
  margin-right:4px;
}
.selector-talla button{
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  background:var(--papel-2); border:1px solid var(--linea-fuerte);
  color:var(--suave); border-radius:var(--r); padding:7px 12px; cursor:pointer;
}
.selector-talla button[aria-pressed="true"]{
  background:var(--rojo); border-color:var(--rojo); color:#fff;
}

/* ============================================================
   5b. Vista de tarjetas — se enciende con la clase `vista-fotos`
   que pone el JavaScript. Sin JavaScript nada de esto aplica.
   ============================================================ */

.vista-fotos .familia > .cabeza{margin-bottom:16px;}

.vista-fotos .familia .platos-rejilla,
.vista-fotos .familia{display:block;}

.vista-fotos .plato{
  padding:0; border-bottom:none;
  display:inline-block; vertical-align:top; width:100%;
}
@media (min-width:560px){
  .vista-fotos .familia{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px;
  }
  .vista-fotos .familia > .cabeza,
  .vista-fotos .familia > .aclara{grid-column:1 / -1;}
}
@media (max-width:559px){
  .vista-fotos .familia{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
  .vista-fotos .familia > .cabeza,
  .vista-fotos .familia > .aclara{grid-column:1 / -1;}
}

/* El volteo. `perspective` en el contenedor, `preserve-3d` en el
   giro. Sólo se animan transform y opacity: van en el compositor. */
.vista-fotos .giro{
  position:relative; width:100%; height:100%;
  min-height:190px; perspective:1000px;
}
.vista-fotos .cara{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--r); overflow:hidden;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  transform-style:preserve-3d;
}
.vista-fotos .frente{
  background:var(--papel-2); border:1px solid var(--linea);
  padding:16px; display:flex; flex-direction:column;
  transform:rotateY(0deg);
}
.vista-fotos .dorso{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #2E2016 0%, #1B120C 100%);
  border:1px solid #40301F; color:var(--papel);
  transform:rotateY(180deg); padding:16px;
  background-size:cover; background-position:center;
}
.vista-fotos .dorso.con-foto{background-color:#1B120C;}
.vista-fotos .dorso.con-foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,12,8,.15) 40%, rgba(20,12,8,.88) 100%);
}

/* Voltea al pasar el ratón, al enfocar con teclado, o al tocar
   (ahí la clase la pone el JavaScript, porque en táctil no hay hover) */
.vista-fotos .plato:hover .frente,
.vista-fotos .plato:focus-within .frente,
.vista-fotos .plato.volteada .frente{transform:rotateY(-180deg);}
.vista-fotos .plato:hover .dorso,
.vista-fotos .plato:focus-within .dorso,
.vista-fotos .plato.volteada .dorso{transform:rotateY(0deg);}

.vista-fotos .frente .linea{flex-wrap:wrap;}
.vista-fotos .frente .nom{font-size:.98rem; line-height:1.3;}
.vista-fotos .frente .puntos{display:none;}
.vista-fotos .frente .precio{margin-left:auto; font-size:1rem;}
.vista-fotos .frente .desc{
  font-size:.82rem; margin-top:7px;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden;
}
.vista-fotos .frente .tallas{margin-top:auto; padding-top:9px;}

.pide-foto{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  color:#C2A98A; text-align:center;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; position:relative; z-index:2;
}
.pide-foto svg{width:34px; height:34px; opacity:.8;}

.dorso-pie{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:13px 15px; text-align:left;
  background:linear-gradient(180deg, rgba(20,12,8,0), rgba(20,12,8,.92));
}
.dorso-nom{
  display:block; font-family:var(--display); font-weight:400;
  font-size:1rem; line-height:1.15; color:#FFFFFF;
}
.dorso-precio{
  display:block; margin-top:4px; font-family:var(--mono); font-weight:700;
  font-size:.85rem; color:#F0B98A;
}
/* El precio del reverso de las pizzas lleva los cinco tamaños y los
   enciende el MISMO mecanismo que el frente. Estas reglas deshacen el
   aspecto de "pastilla" que tienen los tamaños en la cara de delante:
   aquí es un precio suelto sobre la foto, no un chip. */
.js-tallas .dorso .tallas .t.viva{
  display:inline; background:none; border:0; padding:0;
  font-family:var(--mono); font-weight:700; font-size:.85rem; color:#F0B98A;
}

/* La insignia de la esquina: "el más pedido", "especialidad de la casa".
   Va en ámbar porque NO sabemos cuáles son — es un hueco, no una
   afirmación sobre el negocio de Tony. */
.sello{
  position:absolute; top:11px; left:11px; z-index:3;
  font-size:.6rem; padding:3px 8px;
}
.dorso .sello{
  background:rgba(255,217,138,.16); color:#FFD98A; border-color:#8A6B33;
}

/* En línea, junto al nombre. Sale en la lista Y en la tarjeta de
   frente: el cliente tiene que verla sin tener que voltear nada. */
.sello-linea{
  vertical-align:middle; margin-left:7px;
  font-size:.58rem; padding:2px 7px; letter-spacing:.04em;
}
.sello-linea::before{font-size:.9em;}

/* El botón que cambia de vista */
.vistas{display:flex; gap:6px; align-items:center; margin-left:auto;}
.vistas .que{
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--suave);
}
.vistas button{
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.06em; background:var(--papel-2);
  border:1px solid var(--linea-fuerte); color:var(--suave);
  border-radius:100px; padding:7px 13px; cursor:pointer;
}
.vistas button[aria-pressed="true"]{background:var(--rojo); border-color:var(--rojo); color:#fff;}

.pista-fotos{
  margin-top:14px; padding:13px 16px; background:var(--crema);
  border:1px dashed var(--linea-fuerte); border-radius:var(--r);
  font-size:.85rem; color:var(--suave); line-height:1.55;
}

@media (prefers-reduced-motion: reduce){
  .vista-fotos .cara{transition:none;}
}

.sin-resultados{
  text-align:center; padding:34px 20px; color:var(--suave);
  border:1px dashed var(--linea-fuerte); border-radius:var(--r); margin-top:24px;
}

.nota-carta{
  margin-top:34px; padding:16px 18px; background:var(--crema);
  border-left:3px solid var(--rojo); border-radius:0 var(--r) var(--r) 0;
  font-size:.87rem; color:var(--suave); line-height:1.6;
}


/* ============================================================
   6. Horario y dónde estamos
   ============================================================ */

.dos-columnas{display:grid; gap:20px; margin-top:26px;}
@media (min-width:820px){ .dos-columnas{grid-template-columns:1fr 1fr;} }

.tarjeta{
  background:var(--papel-2); border:1px solid var(--linea);
  border-radius:var(--r); padding:26px;
}
.tarjeta h3{margin-bottom:16px;}

.horario .fila{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--linea); font-size:.95rem;
}
.horario .fila:last-child{border-bottom:none;}
.horario .fila b{font-family:var(--mono); font-weight:700; white-space:nowrap;}
.horario .fila.hoy{color:var(--rojo); font-weight:700;}
.horario .fila.hoy b{color:var(--rojo);}
.horario .desayuno{
  margin-top:14px; font-size:.87rem; color:var(--suave);
  padding-top:13px; border-top:1px solid var(--linea);
}

.donde .dir{font-size:1.05rem; font-weight:600; line-height:1.5;}
.donde .tel{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  font-family:var(--mono); font-weight:700; font-size:1.15rem;
  color:var(--rojo); text-decoration:none;
}
.donde .acciones{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.donde .acciones .btn{padding:12px 20px; font-size:.9rem;}


/* ============================================================
   7. Pie
   ============================================================ */

footer.pie{background:var(--noche); color:var(--bruma); padding:38px 0 0; text-align:center;}
footer.pie .nombre{font-size:clamp(1.8rem,7vw,2.6rem);}
footer.pie .lema{font-size:.9rem; margin-top:14px;}
footer.pie .lema a{color:var(--papel); font-weight:600;}

.otm-franja{margin-top:32px; border-top:1px solid #33261C; background:#12152B; color:#B9BDD8; text-align:left;}
.otm-franja .envoltura{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding-top:20px; padding-bottom:22px;
}
.otm-franja .texto{flex:1 1 260px; min-width:0; font-size:.86rem; line-height:1.6;}
.otm-franja .aviso{
  flex-basis:100%; font-size:.72rem; color:#7C82A8;
  border-top:1px solid #2C3157; padding-top:14px; margin-top:2px; line-height:1.6;
}


/* ============================================================
   8. Movimiento — CSS puro, sin JavaScript
   ============================================================ */

@keyframes sube{
  from{opacity:0; transform:translateY(16px);}
  to  {opacity:1; transform:none;}
}
@supports (animation-timeline: view()){
  .sube{
    animation:sube linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 75%;
  }
}
@supports not (animation-timeline: view()){
  .sube{opacity:1; transform:none;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .sube{animation:none; opacity:1; transform:none;}
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Imprimir: una carta que se pueda imprimir es útil de verdad
   en un restaurante. Fuera el marco, fuera los botones. */
@media print{
  .otm, .otm-franja, .nav-carta, .buscador, .filtros, .selector-talla,
  .botonera, .estado, .leyenda{display:none !important;}
  body{background:#fff;}
  .portada{background:#fff; color:#000; border-bottom:2px solid #000;}
  .portada .nombre, .portada .datos-portada a{color:#000;}
  .datos-portada{color:#333;}
  .js-tallas .tallas .t{display:inline-block !important;}
  .grupo{break-inside:avoid;}
  .plato{break-inside:avoid;}
  section{padding:14px 0;}
}