/* ================================================================
   NEW CHINA TOWN — hoja de estilos
   ================================================================
   1. Tokens (color / tipografía)
   2. Base
   3. Cabecera y navegación
   4. Hero
   5. Franja de información práctica
   6. Tarjeta "menús para grupos" (aviso en portada)
   7. Carta (secciones y platos)
   8. Botón añadir / stepper de cantidad
   9. Carrito flotante "Tu pedido"
   10. Formulario de pedido en mesa
   11. Página de menús para grupos
   12. Botón flotante de WhatsApp
   13. Pie de página
   14. Utilidades y responsive
   15. Impresión
   ================================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  color-scheme: light; /* refuerzo del <meta color-scheme>: nunca modo oscuro forzado */
  /* Paleta más blanca y limpia (antes era un tono "papel envejecido"
     muy cálido) — mismo rojo de marca, pero sobre una base neutra
     que se siente más "app de pedidos actual" que "carta impresa". */
  --ink:       #221a15;
  --ink-soft:  #6b5d51;
  --paper:     #faf8f4;
  --paper-2:   #f1ece3;
  --card:      #ffffff;
  --red:       #ab1c1f;
  --red-deep:  #711414;
  --gold:      #c1963f;
  --jade:      #3d6a51;
  --whatsapp:  #25963f;
  --line:      #e8e1d3;
  --line-soft: rgba(34,26,21,.10);
  --radius:    14px;   /* antes 4px — esquinas más suaves, más "app moderna" y menos "documento de los 90" */
  --radius-sm: 9px;    /* para piezas pequeñas: píldoras de código, inputs */
  --maxw:      1080px;
  --shadow:      0 10px 26px rgba(36,21,18,.16);
  --shadow-card: 0 1px 2px rgba(36,21,18,.06), 0 8px 20px -6px rgba(36,21,18,.12); /* sombra suave y "de capas", en vez de un borde plano */
  --shadow-hover:0 4px 10px rgba(36,21,18,.08), 0 16px 32px -8px rgba(36,21,18,.18);
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:106.25%;background:var(--paper)} /* ~17px en vez de 16px: un empujón global y suave a toda la tipografía, sin tener que retocar cada regla. El fondo también aquí, no solo en body: no dejamos ningún elemento sin color explícito. */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans',Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Work Sans',Arial,sans-serif;font-weight:700;margin:0;letter-spacing:-.01em}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
img{max-width:100%;height:auto} /* red de seguridad: ninguna imagen desborda en pantallas estrechas */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- 3. CABECERA Y NAVEGACIÓN ---------- */
/* Efecto "cristal esmerilado": semitransparente + desenfoque de lo
   que hay detrás al hacer scroll. Es el acabado que ya esperan ver
   en cualquier app o web actual en una barra fija. Si el navegador
   no soporta backdrop-filter, se queda en el fondo solido de
   siempre (background-color de respaldo antes de la version con
   transparencia) — nunca se rompe, solo se pierde el matiz. */
.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(36,21,18,.03);
}
.topbar-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 18px}
.topbar img.logo{height:32px;width:auto;display:block}
.topbar-links{display:flex;align-items:center;gap:18px;margin-left:8px}
.topbar-links a{font-size:.9rem;font-weight:500;text-decoration:none;color:var(--ink-soft);transition:color .15s}
.topbar-links a:hover,.topbar-links a.active{color:var(--red)}
.topbar-links a.pedir{color:#fff;background:var(--red);padding:9px 18px;border-radius:20px;transition:background-color .15s}
.topbar-links a.pedir:hover{background:var(--red-deep);color:#fff}

.search-wrap{margin-left:auto;position:relative;width:min(240px,38vw)}
.search-wrap input{width:100%;padding:9px 14px 9px 34px;border:1px solid var(--line);border-radius:20px;background:var(--card);font-size:.9rem;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.search-wrap input:focus{outline:none;border-color:var(--red)}
.search-wrap input::placeholder{color:var(--ink-soft)}
.search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;opacity:.55}

/* Fila que junta el botón de menú (fijo, no se desliza) con el
   deslizante de pestañas (que sí se desplaza en horizontal) */
.catnav-row{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:4px;padding:0 12px 10px}
.menu-burger{
  flex:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background-color .15s;
}
.menu-burger:hover{background:var(--paper-2)}
.menu-burger svg{width:19px;height:19px}
/* En escritorio ya está la barra lateral fija con todo — el botón
   de menú (pensado para móvil) no hace falta ahí */
@media (min-width:980px){
  .menu-burger{display:none}
}

.catnav{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;padding:0 6px 0;scrollbar-width:thin}
.catnav::-webkit-scrollbar{height:5px}
.catnav::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.catnav a{flex:none;white-space:nowrap;font-size:.86rem;font-weight:500;color:var(--ink-soft);text-decoration:none;padding:6px 10px;border-radius:20px;transition:background-color .15s,color .15s}
.catnav a:hover{background:var(--paper-2)}
.catnav a.active{color:#fff;background:var(--red)}
.catnav a.active:hover{background:var(--red)}

/* ---------- 4. HERO ---------- */
/* Fondo CLARO (antes era un marrón oscuro sin ninguna imagen real
   detrás, lo que quedaba apagado y sin vida). El motivo decorativo
   en SVG y la etiqueta superior le dan presencia sin necesitar una
   fotografía — nunca vamos a poner una foto de un plato que no sea
   una foto real vuestra, para no prometer algo que luego no coincida. */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--paper-2),var(--paper) 65%);
  padding:56px 18px 40px;text-align:center;color:var(--ink);
}
.hero-motivo{
  position:absolute;top:0;right:2%;height:100%;width:auto;
  color:var(--red);opacity:.08;pointer-events:none;
}
.hero-eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);margin-bottom:10px;
}
.hero .hanzi{display:block;font-size:1.1rem;letter-spacing:.3em;color:var(--gold);margin-bottom:10px}
.hero img.wordmark{max-width:min(480px,80vw);height:auto;display:block;margin:0 auto;position:relative}
.hero .tagline{margin:16px auto 0;max-width:40ch;font-size:1.02rem;color:var(--ink-soft);position:relative}
.hero .rule{width:64px;height:3px;background:var(--red);margin:22px auto 0;border:0;border-radius:2px}
.hero .jump{margin-top:26px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;position:relative}
.hero .jump a{text-decoration:none;font-size:.9rem;font-weight:600;color:var(--ink);border:1.5px solid var(--line);background:var(--card);padding:11px 20px;border-radius:24px;transition:border-color .15s,transform .15s}
.hero .jump a:hover{border-color:var(--red);transform:translateY(-1px)}
.hero .jump a.solid{background:var(--red);border-color:var(--red);color:#fff}
.hero .jump a.solid:hover{background:var(--red-deep);border-color:var(--red-deep)}

/* ---------- 5. FRANJA DE INFORMACIÓN PRÁCTICA ---------- */
/* Minimalista a propósito: icono + texto, sin tarjetas ni bordes.
   Es la franja de datos rápidos, no necesita "pesar" visualmente —
   así se lee de un vistazo, como en una app de pedidos. */
.info-strip{background:var(--paper-2);border-bottom:1px solid var(--line);padding:22px 18px}
.info-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 20px;
  max-width:var(--maxw);margin:0 auto;
}
/* El icono ahora va dentro de un círculo con su propio fondo — el
   mismo lenguaje que ya usa el bloque de contacto del cajón — y
   cada fila lleva una línea fina debajo para separarlas con
   claridad, en vez de quedar todo apelmazado en una sola columna. */
.info-item{display:flex;gap:14px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line)}
.info-item:last-child{border-bottom:none}
.info-item svg{
  flex:none;width:20px;height:20px;color:var(--red);
  background:var(--card);border-radius:50%;padding:10px;box-sizing:content-box;
}
.info-item strong{display:block;font-size:.9rem}
.info-item span{display:block;font-size:.83rem;color:var(--ink-soft)}
.info-item a.info-tel{display:block;font-size:.83rem;color:var(--ink-soft);text-decoration:none}
.info-item a.info-tel:hover{color:var(--red)}

@media (min-width:640px){
  /* En pantallas mas anchas, la rejilla ya reparte en columnas y
     las lineas divisorias de fila dejan de tener sentido */
  .info-item{border-bottom:none}
}

/* ---------- 6. AVISO "MENÚS PARA GRUPOS" EN PORTADA ---------- */
.grupos-banner{max-width:var(--maxw);margin:34px auto 0;padding:0 18px}
.grupos-card{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:var(--radius);padding:20px 24px;
}
.grupos-card h2{font-size:1.2rem}
.grupos-card p{margin:4px 0 0;font-size:.9rem;color:var(--ink-soft);max-width:52ch}
.grupos-card a.btn{
  flex:none;text-decoration:none;font-weight:600;font-size:.9rem;color:#fff;
  background:var(--red);padding:11px 20px;border-radius:22px;white-space:nowrap;
}
.grupos-card a.btn:hover{background:var(--red-deep)}

/* ---------- 7. CARTA ---------- */
/* Contenedor de dos columnas: barra lateral + carta. En móvil se
   convierte en una sola columna (la barra lateral se oculta, ver
   responsive — en móvil usamos las pestañas de arriba en su lugar). */
.carta-layout{max-width:var(--maxw);margin:0 auto;padding:10px 18px 90px;display:flex;gap:32px;align-items:flex-start;background:var(--paper)}
.carta-contenido{flex:1;min-width:0;background:var(--paper)} /* min-width:0 evita que el texto largo desborde el flex */
main.carta{}

.sidebar-carta{
  display:none; /* oculta por defecto (móvil); se activa en escritorio, ver el media query de más abajo */
  flex:none;width:240px;position:sticky;top:96px;
  flex-direction:column;gap:2px;
  max-height:calc(100vh - 116px);overflow-y:auto;
  background:var(--paper);
}
.sidebar-carta a, .menu-drawer-lista a{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:12px;text-decoration:none;color:var(--ink);
  transition:background-color .15s;
}
.sidebar-carta a:hover, .menu-drawer-lista a:hover{background:var(--paper-2)}
.sidebar-carta a.active, .menu-drawer-lista a.active{background:var(--red);color:#fff}
.sidebar-carta a.active .sidebar-texto small, .menu-drawer-lista a.active .sidebar-texto small{color:rgba(255,255,255,.75)}
/* "Todos los platos" va resaltado desde el principio (como en la
   referencia) y con un pequeño hueco antes de la lista de categorías */
/* "a.sidebar-todos" (no solo ".sidebar-todos") iguala la especificidad
   de ".sidebar-carta a" — si no, ese color:var(--ink) gana igualmente
   y el texto sale negro en vez de blanco, aunque esta regla vaya despues. */
.sidebar-carta a.sidebar-todos, .menu-drawer-lista a.sidebar-todos{background:var(--red);color:#fff;margin-bottom:12px}
.sidebar-carta a.sidebar-todos:hover, .menu-drawer-lista a.sidebar-todos:hover{background:var(--red-deep)}
.sidebar-icono{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.sidebar-icono svg{width:20px;height:20px}
.sidebar-texto{display:flex;flex-direction:column;line-height:1.25}
.sidebar-texto strong{font-size:.88rem;font-weight:600}
.sidebar-texto small{font-size:.74rem;color:var(--ink-soft)}
.sidebar-separador{border:none;border-top:1px solid var(--line);margin:10px 4px}

/* A partir de 980px hay sitio de sobra para la barra lateral — y
   como ella sola ya cubre TODA la navegación (incluye "Menús para
   compartir" y "Menú del día", no solo las categorías), las pestañas
   de arriba se ocultan aquí para no duplicar la misma navegación dos
   veces en la misma pantalla. En móvil (por debajo de 980px) es al
   revés: se ve el catnav de arriba y la barra lateral permanece oculta. */
@media (min-width:980px){
  .sidebar-carta{display:flex}
  .catnav{display:none}
}

/* Plano sobre el fondo, SIN tarjeta envolvente — así es exactamente
   como se ve en la referencia: un título con acento, y la lista de
   platos directamente debajo, separada por líneas finas y mucho
   aire vertical. Envolver cada categoría en una caja con borde y
   sombra (como hacíamos antes) es precisamente lo que da ese aire
   de "formulario apilado" — quitado. */
.section{margin:52px 0;background:var(--paper)} /* fondo explicito: algunos navegadores oscurecen agresivamente cualquier caja sin color de fondo declarado, aunque el body ya lo tenga */
main.carta > .section:first-child{margin-top:8px}

.section h2{
  font-size:1.5rem;font-weight:800;color:var(--red);margin-bottom:2px;
  letter-spacing:-.02em;display:flex;align-items:center;gap:10px;
}
.section h2::before{content:"";display:inline-block;width:16px;height:3px;background:var(--red);border-radius:2px;flex:none}
/* Los subtítulos (p.ej. "Tinto/Rosado/Blanco" dentro de Vinos) se
   leen como una etiqueta clara, no como un h3 cualquiera */
.section h3{
  font-size:.78rem;font-weight:700;color:var(--red-deep);
  text-transform:uppercase;letter-spacing:.06em;
  margin:26px 0 4px;
}

.items{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 40px}

/* Filas planas, con mucho aire vertical (como en la referencia) y
   una línea muy fina entre platos — nada de tarjetas ni resaltados
   por fila, solo espacio y una separación discreta. */
.item{
  display:flex;align-items:center;gap:12px;padding:16px 0;
  border-bottom:1px solid var(--line);
}
.item:last-child{border-bottom:none}

/* El número del plato, sin caja ni fondo — un simple numerito gris,
   suficiente para localizar un plato sin llamar la atención de más */
.item .code{
  font-size:.82rem;font-weight:500;color:var(--ink-soft);
  flex:none;min-width:1.6em;text-align:right;
}
.item .name{flex:1;font-size:1rem;line-height:1.4}
.item .price{font-size:1rem;font-weight:700;color:var(--red);white-space:nowrap;font-variant-numeric:tabular-nums;margin-right:2px}
.item.hidden{display:none}
.section.hidden{display:none}
.no-results{display:none;text-align:center;color:var(--ink-soft);padding:30px 0}
.no-results.show{display:block}

/* ---------- 8. BOTÓN AÑADIR / STEPPER ---------- */
.add-btn{
  flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--red);
  background:#fff;color:var(--red);font-size:1.2rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;
}
.add-btn:hover{background:var(--red);color:#fff}
.stepper{flex:none;display:flex;align-items:center;gap:8px}
.stepper button{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--red);background:#fff;color:var(--red);
  font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.stepper button:hover{background:var(--red);color:#fff}
.stepper .qty{min-width:1.4em;text-align:center;font-weight:600;font-size:.9rem}

/* ---------- 9. CARRITO FLOTANTE "TU PEDIDO" ---------- */
.cart-fab{
  position:fixed;right:18px;bottom:18px;z-index:50;
  display:flex;align-items:center;gap:10px;
  background:var(--red);color:#fff;border:none;border-radius:30px;
  padding:13px 20px;box-shadow:var(--shadow);cursor:pointer;font-weight:600;font-size:.92rem;
}
.cart-fab:hover{background:var(--red-deep)}
.cart-fab .count{
  background:#fff;color:var(--red);border-radius:50%;min-width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;padding:0 4px;
}
.cart-fab.hidden{display:none}

/* Cajón de categorías para móvil — mismo patrón que el del carrito,
   pero se abre desde la IZQUIERDA (es un menú de navegación, no un
   resumen de compra, así que el lado convencional es otro) */
.menu-drawer{position:fixed;inset:0;z-index:60;display:none}
.menu-drawer.open{display:block}
.menu-drawer .backdrop{position:absolute;inset:0;background:rgba(36,21,18,.45)}
.menu-drawer .panel{
  position:absolute;left:0;top:0;bottom:0;width:min(320px,86vw);
  background:var(--card);box-shadow:8px 0 24px rgba(0,0,0,.2);
  display:flex;flex-direction:column;
}
.menu-drawer .panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.menu-drawer .panel-head h3{font-size:1.1rem}
.menu-drawer-scroll{flex:1;overflow-y:auto}
.menu-drawer-lista{padding:10px 12px;display:flex;flex-direction:column;gap:2px}

/* Caja de contacto al final del cajón: relleno gris claro plano,
   sin borde ni sombra — igual que el resto de "cajas de aviso" de
   la web, para que se sienta coherente con lo demás. */
.menu-drawer-contacto{
  margin:14px 14px 18px;padding:20px 18px;text-align:center;
  background:var(--paper-2);border-radius:var(--radius);
}
.contacto-icono{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:var(--card);
  color:var(--red);margin-bottom:10px;
}
.contacto-icono svg{width:22px;height:22px}
.menu-drawer-contacto strong{display:block;font-size:.98rem;margin-bottom:2px}
.contacto-sub{display:block;font-size:.84rem;color:var(--ink-soft);margin-bottom:14px}
.contacto-btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.88rem;
  color:#fff;background:var(--red);padding:10px 22px;border-radius:20px;
}
.contacto-btn:hover{background:var(--red-deep)}
/* A partir de 980px ya no hace falta: el sidebar fijo cubre lo mismo */
@media (min-width:980px){
  .menu-drawer{display:none !important}
}

.cart-drawer{
  position:fixed;inset:0;z-index:60;display:none;
}
.cart-drawer.open{display:block}
.cart-drawer .backdrop{position:absolute;inset:0;background:rgba(36,21,18,.45)}
.cart-drawer .panel{
  position:absolute;right:0;top:0;bottom:0;width:min(380px,92vw);
  background:var(--card);box-shadow:-8px 0 24px rgba(0,0,0,.2);
  display:flex;flex-direction:column;
}
.cart-drawer .panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.cart-drawer .panel-head h3{font-size:1.1rem}
.cart-drawer .close-btn, .menu-drawer .close-btn{background:none;border:none;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink-soft)}
.cart-list{flex:1;overflow-y:auto;padding:6px 20px}
.cart-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px dotted var(--line-soft)}
.cart-row .name{flex:1;font-size:.92rem}
.cart-row .subtotal{font-size:.85rem;color:var(--ink-soft);min-width:4.5em;text-align:right}
.cart-empty{padding:40px 0;text-align:center;color:var(--ink-soft);font-size:.92rem}
.cart-drawer .panel-foot{padding:18px 20px;border-top:1px solid var(--line)}
.cart-total{display:flex;justify-content:space-between;font-size:1.05rem;margin-bottom:14px}
.cart-total strong{color:var(--red)}
.btn-block{display:block;width:100%;text-align:center;text-decoration:none;font-weight:700;border-radius:28px;padding:17px;font-size:1rem;cursor:pointer;border:none;transition:background-color .15s}
.btn-block.primary{background:var(--red);color:#fff}
.btn-block.primary:hover{background:var(--red-deep)}

/* ---------- 10. FORMULARIO DE PEDIDO EN MESA ---------- */
.pedir{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 18px}
.pedir-inner{max-width:600px;margin:0 auto}
.pedir h2{font-size:1.7rem;font-weight:800;color:var(--red);text-align:center}
.pedir > .pedir-inner > p.lead{text-align:center;color:var(--ink-soft);font-size:.94rem;margin:8px 0 28px}

/* Una sola tarjeta agrupa el resumen del pedido Y el formulario —
   antes eran dos bloques sueltos, ahora se leen como un unico paso. */
.pedir-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:28px 26px}

.pedir-resumen{padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.pedir-resumen h4{font-size:.78rem;color:var(--ink-soft);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.pedir-resumen .cart-row{padding:8px 0}
.pedir-resumen .cart-total{margin:8px 0 0}

/* Campos con linea inferior en vez de caja completa — mismo dato,
   con mucho menos peso visual. Menos "recuadros apilados". */
.field{margin-bottom:20px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.field input,.field textarea{
  width:100%;padding:9px 2px;border:none;border-bottom:1.5px solid var(--line);border-radius:0;
  background:transparent;font-family:inherit;font-size:.98rem;color:var(--ink);resize:vertical;
  transition:border-color .15s;
}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--red)}
.field-row{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.pedir-envio{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.pedir-envio .btn-block.whatsapp{background:var(--whatsapp);color:#fff}
.pedir-envio .btn-block.whatsapp:hover{background:#1f7d34}
.pedir-envio .btn-block.email{background:#fff;color:var(--red);border:1px solid var(--red)}
.pedir-envio .btn-block.email:hover{background:var(--paper)}
.pedir-nota{font-size:.8rem;color:var(--ink-soft);margin-top:14px;text-align:center}

/* ---------- 11. PÁGINA DE MENÚS PARA GRUPOS ---------- */
.grupos-hero{background:var(--ink);color:#fbf3e3;padding:44px 18px;text-align:center}
.grupos-hero h1{font-size:2rem;color:#fff}
.grupos-hero p{margin:10px auto 0;max-width:50ch;color:#e9d9bd;font-size:.98rem}
.grupos-lista{max-width:var(--maxw);margin:0 auto;padding:36px 18px 80px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
/* Sin borde de color arriba (parecía la cabecera de un formulario)
   y sin líneas entre cada plato incluido — una lista simple y
   suelta, más tranquila de leer, con solo la tarjeta blanca y su
   sombra para diferenciarla del fondo. */
.grupo-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:26px 24px 22px;display:flex;flex-direction:column;transition:box-shadow .2s}
.grupo-card:hover{box-shadow:var(--shadow-hover)}
.grupo-card .personas{font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.grupo-card .precio{font-family:'Work Sans',sans-serif;font-weight:800;font-size:1.9rem;color:var(--red);margin:2px 0 14px}
.grupo-card ul{list-style:none;margin:0 0 20px;padding:0;font-size:.92rem;line-height:1.7;color:var(--ink-soft);flex:1}
.grupo-card ul li{padding:0}
.grupo-card a.btn{text-decoration:none;text-align:center;font-weight:600;font-size:.9rem;color:#fff;background:var(--whatsapp);padding:11px 16px;border-radius:22px}
.grupo-card a.btn:hover{background:#1f7d34}

/* ---------- 12. BOTÓN FLOTANTE DE WHATSAPP ---------- */
.wa-fab{
  position:fixed;left:18px;bottom:18px;z-index:50;
  width:52px;height:52px;border-radius:50%;background:var(--whatsapp);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
  text-decoration:none;color:#fff;
}
.wa-fab svg{width:26px;height:26px}
.wa-fab:hover{background:#1f7d34}

/* ---------- 13. PIE DE PÁGINA ---------- */
footer.site-footer{background:var(--ink);color:#f3e9d3;padding:40px 18px 30px}
.footer-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px}
.footer-grid h4{font-family:'Work Sans',sans-serif;font-weight:700;color:var(--gold);font-size:1.05rem;margin:0 0 10px}
.footer-grid p, .footer-grid a{margin:0 0 4px;font-size:.9rem;color:#d9c9a8;text-decoration:none;display:block}
.footer-grid a:hover{color:#fff}
.footer-bottom{max-width:var(--maxw);margin:26px auto 0;padding-top:18px;border-top:1px solid rgba(243,233,211,.15);font-size:.8rem;color:#b9a888}

/* ---------- 14. UTILIDADES Y RESPONSIVE ---------- */
@media (max-width:760px){
  .topbar-links{display:none}
  .search-wrap{width:100%;order:3}
  .topbar-inner{flex-wrap:wrap}
  .items{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .pedir-envio{grid-template-columns:1fr}
  /* En pantallas pequeñas, algo menos de margen entre categorías:
     de sobra para respirar sin obligar a hacer scroll de más */
  .section{margin:42px 0}
  .section h2{font-size:1.35rem}
}

/* ---------- 15. IMPRESIÓN ---------- */
@media print{
  .topbar,.hero .jump,.cart-fab,.wa-fab,.pedir,footer.site-footer{display:none}
  .hero{padding:16px;color:#000;background:none}
  .hero .tagline,.hero .rule,.hero .hanzi{display:none}
  .grupos-banner{display:none}
  .section{break-inside:avoid}
}

/* ================================================================
   AMPLIACIONES — menus, chips de opciones, avisos y carrito
   ================================================================ */

/* ---------- Utilidad para ocultar ---------- */
.hidden{display:none !important}

/* ---------- Pestañas de la página de menús ---------- */
.menus-tabs{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;padding:24px 18px 0;max-width:var(--maxw);margin:0 auto}
.menus-tabs a{text-decoration:none;font-weight:600;font-size:.92rem;color:var(--ink-soft);border-bottom:2px solid transparent;padding-bottom:4px}
.menus-tabs a:hover{color:var(--red);border-bottom-color:var(--red)}

.section-menus{max-width:var(--maxw);margin:0 auto;padding:34px 18px 10px}
.section-menus h2{font-size:1.4rem;color:var(--red);text-align:center}
.section-nota{text-align:center;color:var(--ink-soft);font-size:.9rem;margin:6px auto 20px;max-width:58ch}

/* Botones del hero también en la cabecera de menús */
.grupos-hero .jump{margin-top:24px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.grupos-hero .jump a{text-decoration:none;font-size:.88rem;font-weight:500;color:#fbf3e3;border:1px solid rgba(251,243,227,.4);padding:8px 16px;border-radius:20px}
.grupos-hero .jump a:hover{background:rgba(251,243,227,.12)}
.grupos-hero .jump a.solid{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ---------- Menú del día ---------- */
.menu-dia-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:26px 24px;margin-top:16px}
.dia-disponibilidad{margin:0 0 18px;font-size:.85rem;color:var(--ink-soft);text-align:center}
.dia-columnas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.dia-columna h4{font-size:.86rem;color:var(--jade);margin:0 0 6px}
.dia-select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-family:inherit;font-size:.92rem;color:var(--ink)}
.dia-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.dia-foot strong{font-family:'Work Sans',sans-serif;font-weight:800;font-size:1.6rem;color:var(--jade);margin-right:10px}
.dia-foot span{font-size:.86rem;color:var(--ink-soft)}
.dia-foot .btn{background:var(--jade);color:#fff;border:none;border-radius:22px;padding:11px 22px;font-weight:600;font-size:.9rem;cursor:pointer}
.dia-foot .btn:hover{background:#2f5540}

/* ---------- Botón "Añadir al pedido" en tarjetas de menú ---------- */
.grupo-card .add-btn-ancho{
  width:100%;background:var(--red);color:#fff;border:none;border-radius:22px;
  padding:11px 16px;font-weight:600;font-size:.9rem;cursor:pointer;
}
.grupo-card .add-btn-ancho:hover{background:var(--red-deep)}

/* ---------- Chips de opciones (entrega, pago, regalo) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:block;padding:9px 16px;border:1px solid var(--line);border-radius:22px;
  background:var(--card);font-size:.88rem;transition:all .15s;
}
.chip input:checked + span{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.chip input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px}
@media (hover:hover){ .chip span:hover{border-color:var(--red)} }

.bloque-regalo{background:#fff6e0;border:1px dashed var(--gold);border-radius:var(--radius);padding:16px}
.bloque-regalo .chip input:checked + span{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ---------- Avisos y línea de bolsa ---------- */
.aviso{margin:10px 0 0;font-size:.84rem;color:var(--red);font-weight:500}
.cart-linea{display:flex;justify-content:space-between;font-size:.86rem;color:var(--ink-soft);padding:8px 0;border-top:1px dotted var(--line-soft)}

/* ---------- Detalle de una línea del carrito ---------- */
.cart-detalle{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:2px;line-height:1.35}

/* ---------- Botón flotante con importe ---------- */
.cart-fab .fab-total{font-weight:700;border-left:1px solid rgba(255,255,255,.35);padding-left:10px;margin-left:2px}
.cart-fab.pulse{transform:scale(1.06);transition:transform .15s}

@media (max-width:640px){
  .dia-foot{flex-direction:column;align-items:stretch}
  .dia-foot .btn{width:100%}
  .menus-tabs{gap:14px;font-size:.85rem}
}

/* ================================================================
   LANDING ÚNICA — bloques de menús integrados en la misma página
   ================================================================ */

/* Un "bloque" es cada gran sección de la landing (menú del día,
   menús para compartir, carta). Alternamos fondo para separarlas. */
.bloque{padding:46px 18px 40px;background:var(--paper)}
.bloque + .bloque{border-top:1px solid var(--line)}
.bloque-inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.bloque-inner h2{font-size:1.7rem;color:var(--red);display:flex;align-items:center;justify-content:center;gap:12px}
.bloque-inner h2::before{content:"";display:inline-block;width:22px;height:3px;background:var(--red);border-radius:2px}
.bloque-nota{color:var(--ink-soft);font-size:.93rem;margin:8px auto 22px;max-width:58ch}
.bloque-nota.pequena{font-size:.84rem;margin:10px auto 20px}
.bloque-etiqueta{
  display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--jade);border:1px solid var(--jade);
  border-radius:20px;padding:4px 12px;margin-bottom:10px;
}

/* El menú del día va sobre fondo distinto para que destaque */
.bloque-dia{background:var(--paper-2)}
.bloque-dia h2{color:var(--jade)}

/* Interruptor domicilio / comedor centrado */
.chips-centro{justify-content:center}

/* La carta dentro de la landing */
.bloque-carta{padding-bottom:0;background:var(--paper)}
.titulo-carta{font-size:1.7rem}
.bloque-carta .carta{padding-top:0}

/* Las tarjetas de menú vuelven a un grid centrado dentro del bloque */
.bloque .grupos-lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;text-align:left;margin-top:6px;
}

/* El menú del día se alinea a la izquierda dentro de su tarjeta */
.bloque .menu-dia-card{text-align:left}

@media (max-width:640px){
  .bloque{padding:34px 16px 30px}
  .bloque-inner h2{font-size:1.45rem}
}

/* ================================================================
   AJUSTES — menú del día discreto y aviso de Bizum
   ================================================================ */

/* Version sin protagonismo del menú del día: sin fondo ni borde de
   color, cabecera más pequeña (h3), todo en el flujo normal. */
.bloque-sutil{padding-top:38px;padding-bottom:38px}
.bloque-sutil h3{font-size:1.15rem;color:var(--ink);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:center}
.bloque-etiqueta-sutil{font-size:.76rem;font-weight:400;color:var(--ink-soft)}
.bloque-sutil .menu-dia-card{border-top-color:var(--line);max-width:760px;margin-left:auto;margin-right:auto}
.bloque-sutil .dia-foot strong{color:var(--ink)}
.bloque-sutil .dia-foot .btn{background:var(--ink-soft)}
.bloque-sutil .dia-foot .btn:hover{background:var(--ink)}

/* Aviso informativo (Bizum) — mismo estilo que un aviso, sin ser de error */
.aviso-info{margin:10px 0 0;font-size:.84rem;color:var(--ink-soft);background:var(--paper-2);border-radius:var(--radius-sm);padding:10px 14px}

/* ================================================================
   FASE 1 — cookies, reseñas y enlaces legales
   ================================================================ */

/* ---------- Aviso de cookies ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--ink);color:#f3e9d3;
  padding:16px 18px;display:none;
  box-shadow:0 -6px 20px rgba(0,0,0,.2);
}
.cookie-banner.visible{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.cookie-banner p{margin:0;font-size:.86rem;max-width:60ch;color:#e9d9bd}
.cookie-banner a{color:var(--gold);text-decoration:underline}
.cookie-botones{display:flex;gap:10px;flex:none}
.cookie-botones .btn-block{padding:9px 18px;font-size:.86rem;width:auto}

@media (max-width:640px){
  .cookie-banner.visible{flex-direction:column;align-items:stretch;text-align:center}
  .cookie-botones{justify-content:center}
}

/* ---------- Reseñas ---------- */
.bloque-resenas{background:var(--paper-2)}
.resenas-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:22px 0 26px;text-align:left}
.resena-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:22px 20px;margin:0}
.resena-card p{margin:0 0 10px;font-size:.94rem;color:var(--ink);font-style:italic}
.resena-card cite{font-size:.82rem;color:var(--ink-soft);font-style:normal}
.btn-resenas{display:inline-block;text-decoration:none;font-weight:600;font-size:.9rem;color:var(--red)}
.btn-resenas:hover{color:var(--red-deep)}

/* ---------- Enlaces legales en el pie ---------- */
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between}
.footer-legal{display:flex;gap:16px;flex-wrap:wrap}
.footer-legal a{font-size:.8rem;color:#b9a888;text-decoration:none}
.footer-legal a:hover{color:#fff}


.aviso-cerrado{display:flex;flex-direction:column;gap:2px;background:#fdecec;color:#8a1518;border-radius:12px;padding:14px 16px;margin-bottom:16px;font-size:.92rem}
.aviso-cerrado.hidden{display:none}
.aviso-cerrado strong{font-size:1rem}
#form-pedido.cerrado{opacity:.55}
#form-pedido.cerrado #pedir-enviar-whatsapp{background:#9a9a9a;cursor:not-allowed}