/* =========================================================
   Pizzabella — estilos
   Idea: la página se ve como el local. La portada es su muro
   blanco, con las palabras grises de la pared, el arcoíris
   pintado a brocha y la frase con cada palabra de un color.
   La carta va en blanco y fácil de leer, con las franjas de
   sus mesas pintadas de arcoíris.
   Los pedidos se hacen por WhatsApp (botón fijo abajo).
   ========================================================= */

/* ----- Tipografías (guardadas en el sitio) ----- */
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

/* ----- Variables: cambia aquí y se actualiza todo el sitio ----- */
:root {
  --negro: #000000;        /* fondo del logo y chip activo */
  --blanco: #FFFFFF;
  --tinta: #16131D;        /* texto sobre blanco (18,3:1) */
  --gris: #5D5868;         /* texto secundario sobre blanco (6,9:1) */
  --niebla: #F2F0F6;       /* fondos suaves */
  --linea: #E3E0EA;        /* separadores */
  --amarillo: #FFC83D;     /* botones (texto negro encima: 13,6:1) */
  --amarillo-2: #FFB800;
  --whatsapp: #0E7A40;     /* botón de WhatsApp (texto blanco: 5,4:1) */
  --whatsapp-2: #0B6535;
  --abierto: #3DDC84;      /* punto verde de "Abierto" */
  --cerrado: #8A8594;
  --muro-letras: #F2F1F5;  /* palabras grises de la pared (solo decoración) */
  --estrella: #E8A400;
  /* colores de las letras del muro, un poco más oscuros para que se lean en blanco */
  --t-rojo: #D10A0A;       /* 5,6:1 */
  --t-naranjo: #C84B00;    /* 4,7:1 */
  --t-dorado: #A87A00;     /* 3,9:1 (solo en letras grandes) */
  --t-verde: #0A7A2F;      /* 5,5:1 */
  --t-azul: #24408E;       /* 9,6:1 */
  --t-violeta: #732982;    /* 8,9:1 */
  /* arcoíris de las mesas (bandera del orgullo) */
  --a1: #E40303; --a2: #FF8C00; --a3: #FFED00; --a4: #008026; --a5: #24408E; --a6: #732982;
  --naranjo-texto: #B54E00; /* naranjo oscuro para que el texto blanco se lea (5,2:1) */
  --azul-texto: #1F5FBF;    /* azul para la segunda "T" (6,1:1) */
  --titulo: "Fredoka", "Nunito", system-ui, sans-serif;
  --letra: "Nunito", system-ui, sans-serif;
  --contenido: 1200px;
  --barra-alto: 84px;     /* alto del encabezado (en escritorio es más alto, ver abajo) */
  --chips-alto: 56px;
  --radio: 16px;
  --velo: rgb(22 19 29 / .92);  /* fondo oscuro detrás del visor de fotos */
  --sombra: 0 12px 24px -12px rgb(0 0 0 / .5);
  /* Pizarra de las reseñas (como las pizarras del local) */
  --pizarra: #1F2423;
  --madera: #7A4E2D;          /* marco de la pizarra */
  --tiza: #F4F1EA;            /* 14,9:1 sobre la pizarra */
  --tiza-suave: #D5D2CB;      /* 11:1 */
  --tiza-amarilla: #FFE27A;   /* 13,4:1 */
  --tiza-celeste: #9AD8FF;    /* 10,7:1 */
  --tiza-rosada: #FFB3C7;     /* 10,1:1 */
  --tiza-polvo: rgb(255 255 255 / .06);
  /* Papel cuadriculado rojo y blanco (el papel en que sirven las pizzas) */
  --amarillo-suave: #FFF4CC;   /* fondo del aviso de la pizza dúo */
  --vegana-fondo: #EAF6EE;    /* fondo de la tarjeta de la pizza vegana */
  --papel: #FBE4E3;           /* rojo muy suave: el mantel queda de fondo, sin competir con las fotos */
  /* Franja con bordes irregulares, como pintada a brocha (se usa de máscara) */
  --brochazo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M3 7C60 1 140 9 210 4S350 8 398 2L396 30 399 68 397 98C330 95 250 100 190 96S60 99 2 95L4 60 1 30Z'/%3E%3C/svg%3E");
}

/* ----- Base ----- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra-alto) + var(--chips-alto) + 8px); }
body { margin: 0; font-family: var(--letra); font-size: 1rem; line-height: 1.55; color: var(--tinta); background: var(--blanco); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titulo); font-weight: 600; line-height: 1.1; }
p { margin: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--a5); outline-offset: 3px; border-radius: 6px; }
.contenedor { width: min(100% - 32px, var(--contenido)); margin-inline: auto; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.saltar { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--amarillo); color: var(--negro); padding: 10px 16px; border-radius: 8px; font-weight: 800; }
.saltar:focus { left: 8px; }

/* ----- Franjas de las mesas arcoíris ----- */
.mesa { display: grid; grid-template-rows: repeat(6, 9px); }
.mesa span:nth-child(1) { background: var(--a1); }
.mesa span:nth-child(2) { background: var(--a2); }
.mesa span:nth-child(3) { background: var(--a3); }
.mesa span:nth-child(4) { background: var(--a4); }
.mesa span:nth-child(5) { background: var(--a5); }
.mesa span:nth-child(6) { background: var(--a6); }

/* ----- Botones ----- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border: 2px solid var(--amarillo); border-radius: 999px;
  background: var(--amarillo); color: var(--negro); font-weight: 900; font-size: 1rem; text-decoration: none;
  transition: background-color .2s;
}
.boton:hover { background: var(--amarillo-2); border-color: var(--amarillo-2); }
.boton svg { fill: currentColor; stroke: none; flex: none; }
.boton--whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--blanco); }
.boton--whatsapp:hover { background: var(--whatsapp-2); border-color: var(--whatsapp-2); }
.boton--borde { background: var(--blanco); color: var(--tinta); border-color: var(--tinta); }
.boton--borde:hover { background: var(--niebla); border-color: var(--tinta); }

/* ----- Encabezado ----- */
.barra { position: sticky; top: 0; z-index: 60; height: var(--barra-alto); background: var(--blanco); color: var(--tinta); border-bottom: 1px solid var(--linea); }
.barra__dentro { height: 100%; width: min(100% - 24px, 1320px); margin-inline: auto; display: flex; align-items: center; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca img { width: 70px; height: 70px; }   /* logo del encabezado */
.marca span { font-family: var(--titulo); font-weight: 600; font-size: 1.35rem; }
.estado { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--gris); }
.estado__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--cerrado); }
.estado--abierto .estado__punto { background: var(--abierto); box-shadow: 0 0 0 4px rgba(61, 220, 132, .2); }
.estado__largo { display: none; }   /* en celular se ve solo "Abierto" o "Cerrado" */

/* ----- Portada: el muro del local ----- */
.portada { position: relative; overflow: hidden; background: var(--blanco); color: var(--tinta); }
/* Palabras grises de la pared, de fondo (decoración, no se leen en voz alta) */
.muro { position: absolute; inset: 0; z-index: 0; padding-top: 6px; font-family: var(--letra); font-weight: 900; font-size: 1.45rem; line-height: 1.25; letter-spacing: .02em; color: var(--muro-letras); white-space: nowrap; pointer-events: none; user-select: none; }
.muro::before { content: "PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO\A LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS\A SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD\A PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA\A ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD\A ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR\A TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA\A DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA\A PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO\A LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS\A SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD\A PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA\A ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD\A ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR\A TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA\A DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA\A PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO\A LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS\A SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD\A PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA\A ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD\A ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR ORGULLO PIZZA PARA TODXS LIBERTAD ALEGRÍA DIVERSIDAD SABOR"; white-space: pre; display: block; margin-left: -40px; }
.portada__dentro { position: relative; z-index: 1; display: grid; }
.portada__texto { width: min(100% - 32px, 640px); margin-inline: auto; padding: 62px 0 30px; }
.arcoiris { display: block; width: min(64%, 260px); height: auto; margin-bottom: 10px; }
/* Tope de 3.6rem: la frase "Aquí todxs tienen un lugar en la mesa." es larga y así queda en 2 líneas en el computador */
.portada h1 { font-size: clamp(2.6rem, 1.7rem + 4.4vw, 3.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -.01em; }
.portada__todxs { margin-top: 8px; font-family: var(--titulo); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); line-height: 1.1; }
.portada__todxs i { font-style: normal; display: inline-block; }
.portada h1 span { display: inline-block; }
.portada__bajada { margin-top: 16px; color: var(--gris); font-size: 1.08rem; max-width: 44ch; }
.portada__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.datos { list-style: none; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--linea); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font-size: .86rem; color: var(--gris); }
.datos b { display: block; font-family: var(--titulo); font-weight: 600; font-size: 1.15rem; color: var(--tinta); }
.portada__foto img { width: 100%; height: 320px; object-fit: cover; }
/* Logo grande (solo en la página 404) */
.portada__logo { width: 120px; height: auto; border-radius: 50%; }

/* Colores de las letras, como en el muro */
.c-rojo { color: var(--t-rojo); }
.c-naranjo { color: var(--t-naranjo); }
.c-dorado { color: var(--t-dorado); }
.c-verde { color: var(--t-verde); }
.c-azul { color: var(--t-azul); }
.c-violeta { color: var(--t-violeta); }

/* ----- Banderines de la terraza (encima de la portada) ----- */
.banderines { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; gap: 7px; padding: 4px 6px 0; overflow: hidden; pointer-events: none; }
/* el cordel */
.banderines::before { content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 2px; background: var(--gris); }
.banderines span { flex: none; width: 26px; height: 34px; background: var(--a1); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; animation: mecer 3s ease-in-out infinite alternate; }
.banderines span:nth-child(6n+2) { background: var(--a2); animation-duration: 2.6s; }
.banderines span:nth-child(6n+3) { background: var(--a3); animation-duration: 3.4s; animation-delay: -1s; }
.banderines span:nth-child(6n+4) { background: var(--a4); animation-delay: -.6s; }
.banderines span:nth-child(6n+5) { background: var(--a5); animation-duration: 2.8s; animation-delay: -1.6s; }
.banderines span:nth-child(6n+6) { background: var(--a6); animation-duration: 3.2s; animation-delay: -.3s; }
/* "rotate" suelto (no "transform"), para no chocar con Motion */
@keyframes mecer { from { rotate: -7deg; } to { rotate: 7deg; } }

/* ----- Chips de categorías (fijos al bajar) ----- */
.chips { position: sticky; top: var(--barra-alto); z-index: 50; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.chips ul { list-style: none; margin: 0 auto; padding: 10px 12px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 1320px; }
.chips ul::-webkit-scrollbar { display: none; }
.chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--niebla); text-decoration: none; font-weight: 800; font-size: .9rem; white-space: nowrap; }
.chips a[aria-current="true"] { background: var(--negro); color: var(--blanco); }

/* ----- Carta ----- */
.carta { width: min(100% - 32px, 1320px); margin-inline: auto; padding: 28px 0 64px; }
.carta__titulo { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); font-weight: 700; }
.carta__como { margin-top: 8px; color: var(--gris); font-size: 1.05rem; max-width: 60ch; }
.carta__como a { color: var(--tinta); font-weight: 900; }
/* Página carta.html (la que abre el código QR) */
.carta-cabeza { width: min(100% - 32px, 1320px); margin-inline: auto; padding: 28px 0 24px; }
.carta__volver { margin-top: 40px; font-weight: 900; }

.categoria { padding-top: 30px; }
.categoria__cabeza { padding-bottom: 14px; border-bottom: 3px solid var(--tinta); }
.categoria__cabeza h3,
.categoria__cabeza h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 600; }   /* h2 en carta.html */
.categoria__cabeza--foto { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.categoria__foto { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.categoria__nota { margin-top: 4px; color: var(--gris); font-size: .92rem; }
.tamanos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: .95rem; }
.tamanos b { font-family: var(--titulo); font-weight: 600; }

/* ----- Franjas de color de la carta (27-10-2026) -----
   Cada categoría lleva el color de una de sus mesas pintadas, en orden de arcoíris
   (rojo, naranjo, amarillo, verde, azul, violeta y se repite). El color sale de
   la clase categoria--c1 ... c6 de cada sección. */
.categoria--c1 { --franja: var(--a1); --franja-texto: var(--blanco); }          /* 4,9:1 */
.categoria--c2 { --franja: var(--naranjo-texto); --franja-texto: var(--blanco); } /* 5,2:1 */
.categoria--c3 { --franja: var(--a3); --franja-texto: var(--tinta); }           /* 15:1 */
.categoria--c4 { --franja: var(--a4); --franja-texto: var(--blanco); }          /* 5,1:1 */
.categoria--c5 { --franja: var(--a5); --franja-texto: var(--blanco); }          /* 9,6:1 */
.categoria--c6 { --franja: var(--a6); --franja-texto: var(--blanco); }          /* 8,9:1 */
.categoria--franja .categoria__cabeza { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 18px; border-bottom: 0; color: var(--franja-texto); }
/* El color va detrás, recortado con bordes de brocha */
.categoria--franja .categoria__cabeza::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--franja); -webkit-mask: var(--brochazo) center / 100% 100% no-repeat; mask: var(--brochazo) center / 100% 100% no-repeat; }
.categoria--franja .categoria__foto { flex: none; width: 56px; height: 56px; border: 3px solid var(--blanco); }
.categoria--franja .tamanos { margin-top: 4px; gap: 0 10px; font-size: .88rem; }
.categoria__textos { display: block; flex: 1; min-width: 0; }
.categoria--franja .categoria__nota { display: block; color: inherit; }
.categoria--franja .platos { margin-top: 4px; }
/* En index.html las notas (base de salsa, pizza dúo…) van adentro, al abrir la categoría,
   para que las franjas cerradas queden parejas */
.categoria--franja .categoria__nota--abierta { margin: 12px 0 0; color: var(--gris); }

/* Carta plegable (solo index.html): la franja es el botón que abre y cierra */
.carta__ayuda { margin-top: 30px; color: var(--gris); font-weight: 800; }
.categoria--plegable { padding-top: 10px; }
.categoria__plegable > summary { list-style: none; cursor: pointer; }
.categoria__plegable > summary::-webkit-details-marker { display: none; }
.categoria__flecha { flex: none; width: 30px; height: 30px; stroke-width: 3; transition: rotate .25s ease; }
.categoria__plegable[open] .categoria__flecha { rotate: 180deg; }
.categoria__plegable[open] > .platos { padding-bottom: 18px; }
.categoria__plegable[open] > :not(summary) { animation: desplegar .3s ease both; }
@keyframes desplegar { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@media (hover: hover) { .categoria__plegable > summary:hover::before { filter: brightness(1.08); } }

/* Filas de la carta: nombre, descripción, precio y foto (si hay) */
.platos { list-style: none; margin: 0; padding: 0; }
.platos__grupo { padding: 18px 0 2px; font-family: var(--titulo); font-weight: 600; font-size: 1.05rem; color: var(--gris); }
.plato { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.plato__texto { min-width: 0; }
.plato__nombre { font-size: 1.2rem; font-weight: 600; }
.plato__desc { margin-top: 2px; color: var(--gris); font-size: .95rem; max-width: 60ch; }
.plato__precio { margin-top: 6px; font-weight: 900; font-size: .95rem; }
.plato__foto { width: 88px; height: 88px; object-fit: cover; border-radius: 14px; }

/* Listas de ingredientes separadas con raya (pedido de la clienta, 28-10-2026) */
.plato__lista { margin-top: 6px; max-width: 70ch; font-size: .95rem; line-height: 1.7; }

/* Pizza dúo destacada: etiqueta en la franja de Premium y aviso al abrir */
.etiqueta-duo { display: inline-block; margin-top: 6px; padding: 3px 12px; border-radius: 999px; background: var(--amarillo); color: var(--tinta); font-weight: 900; font-size: .85rem; }
.aviso-duo { margin-top: 12px; padding: 12px 16px; border: 2px solid var(--amarillo); border-radius: 12px; background: var(--amarillo-suave); font-weight: 700; }
.aviso-duo b { font-family: var(--titulo); font-weight: 600; }

/* Pizza vegana destacada: tarjeta verde */
.plato--vegana { grid-column: 1 / -1; margin-top: 14px; padding: 16px; border: 2px solid var(--a4); border-radius: var(--radio); background: var(--vegana-fondo); }
.etiqueta-vegana { display: inline-block; margin-bottom: 6px; padding: 2px 12px; border-radius: 999px; background: var(--a4); color: var(--blanco); font-weight: 900; font-size: .8rem; }

/* Promociones: tarjetas de color (lo destacado de la carta) */
.promos { list-style: none; margin: 16px -16px 0; padding: 0 16px 6px; display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: thin; }
.promo { scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radio); color: var(--blanco); }
.promo--1 { background: var(--a1); }
.promo--2 { background: var(--a4); }
.promo--3 { background: var(--a5); }
.promo--4 { background: var(--a6); }
.promo__numero { font-weight: 900; font-size: .85rem; opacity: .85; }
.promo__titulo { font-size: 1.3rem; font-weight: 600; }
.promo__texto { font-size: .93rem; }
.promo__nota { align-self: flex-start; margin-top: 2px; padding: 2px 10px; border-radius: 999px; background: var(--blanco); color: var(--tinta); font-size: .8rem; font-weight: 900; }
.promo__pie { margin-top: auto; padding-top: 10px; }
.promo__precio { font-family: var(--titulo); font-weight: 700; font-size: 1.6rem; }

/* ----- Botón de WhatsApp fijo (abajo a la derecha) ----- */
.whatsapp-flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 18px;
  border-radius: 999px; background: var(--whatsapp); color: var(--blanco); text-decoration: none;
  font-weight: 900; font-size: 1rem; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55);
  transition: background-color .2s;
}
.whatsapp-flotante:hover { background: var(--whatsapp-2); }
/* Con JavaScript, aparece solo cuando ya no se ve el botón de la portada */
.js .whatsapp-flotante { opacity: 0; translate: 0 16px; visibility: hidden; transition: opacity .25s, translate .25s, visibility .25s, background-color .2s; }
.js .whatsapp-flotante.visible { opacity: 1; translate: 0 0; visibility: visible; }
.whatsapp-flotante svg { width: 26px; height: 26px; fill: currentColor; stroke: none; flex: none; }

/* ----- Reseñas de Google ----- */
/* Va sobre una pizarra con marco de madera, como las pizarras del local */
.resenas { background-color: var(--pizarra); background-image: radial-gradient(ellipse 60% 40% at 18% 22%, var(--tiza-polvo), transparent 70%), radial-gradient(ellipse 50% 45% at 82% 78%, var(--tiza-polvo), transparent 70%); border-block: 12px solid var(--madera); color: var(--tiza); padding: 64px 0 72px; }
.resenas__cabeza { display: grid; gap: 6px; margin-bottom: 26px; }
.resenas h2 { font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); font-weight: 700; color: var(--tiza-amarilla); }
.resenas__tiza { color: var(--tiza-celeste); }
.resenas__total { color: var(--tiza-suave); font-size: 1.08rem; }
.resenas__ver { justify-self: start; margin-top: 4px; padding: 6px 0; font-weight: 900; color: var(--tiza-amarilla); }
/* En celular las reseñas se deslizan de lado, como las promos */
.resenas__lista { list-style: none; margin: 0 -16px; padding: 10px 16px 16px; display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: thin; }
.resena { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--radio); background: var(--blanco); color: var(--tinta); border-top: 6px solid var(--a1); box-shadow: var(--sombra); rotate: -1deg; }
/* Un poco giradas, como papeles pegados en la pizarra */
.resena:nth-child(even) { rotate: .8deg; }
/* Cada reseña lleva arriba un color de las mesas */
.resena:nth-child(6n+2) { border-top-color: var(--a2); }
.resena:nth-child(6n+3) { border-top-color: var(--a3); }
.resena:nth-child(6n+4) { border-top-color: var(--a4); }
.resena:nth-child(6n+5) { border-top-color: var(--a5); }
.resena:nth-child(6n+6) { border-top-color: var(--a6); }
.estrellas { color: var(--estrella); letter-spacing: 2px; font-size: 1.1rem; line-height: 1; }
.resena blockquote { margin: 0; font-size: 1.02rem; }
.resena__autor { margin-top: auto; font-weight: 800; font-size: .92rem; color: var(--gris); }
/* Invitación a dejar reseña en Google */
.resenas__opinion { margin-top: 28px; padding: 22px; display: grid; gap: 16px; justify-items: start; border: 2px dashed var(--tiza-suave); border-radius: var(--radio); }
.resenas__opinion h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); font-weight: 700; color: var(--tiza-rosada); }
.resenas__opinion p { margin-top: 4px; color: var(--tiza-suave); }

/* ----- Conozcamos, respetemos y aceptemos ----- */
.respeto { background: var(--blanco); padding: 64px 0 72px; }
.respeto h2 { text-align: center; font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); font-weight: 700; max-width: 18ch; margin: 0 auto 10px; }
.respeto h3 { margin: 30px 0 12px; font-size: 1.2rem; }
.letras { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.letra { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 14px 18px 14px 14px; border-radius: var(--radio); color: var(--blanco); }
.letra__l { font-family: var(--titulo); font-weight: 700; font-size: 3.4rem; line-height: 1; text-align: center; }
.letra b { font-family: var(--titulo); font-weight: 600; font-size: 1.15rem; }
.letra p { font-size: .97rem; }
.letra--rojo { background: var(--a1); }
.letra--naranjo { background: var(--naranjo-texto); }
.letra--amarillo { background: var(--a3); color: var(--tinta); }
.letra--verde { background: var(--a4); }
.letra--azul { background: var(--azul-texto); }
.letra--indigo { background: var(--a5); }
.letra--violeta { background: var(--a6); }

/* ----- Así se ve en la mesa: fotos de la comida y de la gente ----- */
/* Fondo de mantel cuadriculado (suave), y las fotos como impresas encima */
.en-la-mesa { padding: 34px 0 22px; background-color: var(--blanco); background-image: repeating-conic-gradient(var(--papel) 0 25%, var(--blanco) 0 50%); background-size: 32px 32px; }
.en-la-mesa h2 { display: inline-block; margin-bottom: 14px; padding: 6px 18px 8px; border-radius: 12px; background: var(--blanco); box-shadow: var(--sombra); rotate: -1.5deg; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); font-weight: 700; }
/* En celular se deslizan de lado, como las promos */
.en-la-mesa__lista { list-style: none; margin: 0; padding: 0 16px 6px; display: grid; grid-auto-flow: column; grid-auto-columns: min(64%, 240px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: thin; }
/* Cuando avanza sola (main.js agrega .cinta): sin imán ni barra de desplazamiento */
.en-la-mesa__lista.cinta { scroll-snap-type: none; scrollbar-width: none; }
.en-la-mesa__lista.cinta::-webkit-scrollbar { display: none; }
.en-la-mesa__lista { padding-block: 10px 20px; }
.en-la-mesa__lista li { scroll-snap-align: start; rotate: -2deg; transition: rotate .25s ease; }
.en-la-mesa__lista li:nth-child(even) { rotate: 1.6deg; }
/* Marco blanco, como foto impresa */
.en-la-mesa__lista a { padding: 7px; background: var(--blanco); border-radius: 12px; box-shadow: var(--sombra); }
@media (hover: hover) { .en-la-mesa__lista li:hover { rotate: 0deg; } .en-la-mesa__lista a:hover img { scale: 1; } }
.en-la-mesa__lista img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 7px; }

/* Fotos que se abren en grande al tocarlas (franja y galería del local).
   El acercamiento usa "scale" (propiedad suelta), no "transform", para no chocar con Motion. */
[data-ampliar] { display: block; overflow: hidden; border-radius: var(--radio); cursor: zoom-in; }
[data-ampliar] img { transition: scale .25s ease; }
@media (hover: hover) { [data-ampliar]:hover img { scale: 1.04; } }

/* ----- Visor de fotos (ventana que se abre encima) ----- */
.visor { width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; margin: 0; padding: 16px; border: 0; background: transparent; }
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: var(--velo); }
.visor__foto { width: auto; height: auto; max-width: min(100%, 1100px); max-height: calc(100vh - 96px); border-radius: var(--radio); }
.visor__cerrar { position: fixed; top: 14px; right: 14px; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--blanco); color: var(--tinta); cursor: pointer; }

/* ----- Nosotrxs y el local ----- */
.local { background: var(--niebla); padding: 64px 0 72px; }
.local__grilla { display: grid; gap: 28px; }
.local h2 { font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); font-weight: 700; }
.local__bajada { margin-top: 8px; color: var(--gris); font-size: 1.05rem; }
.ficha { margin: 22px 0; display: grid; gap: 10px; }
.ficha div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.ficha dt { font-weight: 900; font-size: .88rem; color: var(--gris); }
.ficha dd { margin: 0; font-weight: 700; }
.ficha a { font-weight: 900; }
.mapa { border-radius: var(--radio); overflow: hidden; background: var(--blanco); min-height: 300px; }
.mapa iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }

/* ----- Pie (con espacio abajo para que el botón de WhatsApp no tape el texto) ----- */
.pie { background: var(--blanco); color: var(--gris); padding-bottom: 96px; text-align: center; }
.pie__dentro { display: grid; justify-items: center; gap: 8px; padding-top: 36px; }
.pie img { width: 160px; margin-bottom: 6px; }
.pie__lema { font-family: var(--titulo); font-weight: 600; font-size: 1.3rem; color: var(--tinta); }
.pie__copia { font-size: .85rem; }

/* ----- Página 404 ----- */
.no-encontrada { min-height: calc(100vh - 54px); display: grid; align-items: center; }
.no-encontrada .portada__logo { width: 160px; margin: 0 0 18px; }

/* ----- Pantallas medianas ----- */
@media (min-width: 640px) {
  .estado__corto { display: none; }
  .estado__largo { display: inline; }
  .portada__foto img { height: 420px; }
  .promos { margin: 16px 0 0; padding: 0 0 6px; scroll-padding-inline: 0; grid-auto-columns: 280px; }
  .letras { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .resenas__lista { margin: 0; padding: 10px 4px 16px; scroll-padding-inline: 0; grid-auto-columns: 340px; }
  .resenas__opinion { grid-template-columns: 1fr auto; align-items: center; padding: 24px 28px; }
  .en-la-mesa__lista { grid-auto-columns: 250px; }
  .categoria--franja .categoria__foto { width: 64px; height: 64px; }
  .categoria--franja .tamanos { font-size: .95rem; }
  .whatsapp-flotante { right: 24px; bottom: 24px; }
}

/* ----- Escritorio ----- */
@media (min-width: 1024px) {
  /* Encabezado más alto para que el logo se lea bien */
  :root { --barra-alto: 108px; }
  .marca img { width: 92px; height: 92px; }
  .portada__dentro { grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 600px; }
  .portada__texto { width: auto; margin: 0; padding: 76px 40px 56px max(24px, calc((100vw - 1320px) / 2 + 24px)); align-self: center; }
  .portada__foto img { height: 100%; min-height: 600px; }
  .arcoiris { width: 300px; }
  /* Promos: las 4 en una fila */
  .promos { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  /* Reseñas: grilla de 3 x 2 */
  .resenas__lista { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  /* Carta en dos columnas, como una carta impresa */
  .platos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .platos__grupo { grid-column: 1 / -1; }
  .local__grilla { grid-template-columns: 1fr 1fr; align-items: start; }
  /* Local: datos a la izquierda y mapa a la derecha */
  .mapa { grid-column: 2; grid-row: 1; min-height: 340px; }
}

/* Movimiento reducido: todo quieto */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== ANIMACIONES (kit Motion) ===== */
/* Lo que se va a animar parte invisible SOLO si hay JavaScript
   (la clase .anim la pone el <head>). Sin JS, todo se ve normal. */
.anim [data-animar],
.anim [data-animar-grupo] > * {
  opacity: 0;
}

/* Portada: el arcoíris parte sin pintar y la frase escondida.
   main.js las anima una sola vez al abrir la página. */
.anim .arcoiris path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.anim .portada h1 span,
.anim .portada__todxs i { opacity: 0; }

/* Si la persona pidió menos movimiento, apagamos también las transiciones */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}