/*
  Menú de prueba de TapNFC (demo.tapnfcs.com): el diseño de Fritanga J&J sin su marca, con el sello
  "Tu logo aquí". Lo abre el botón "Ver menú de prueba" de tapnfcs.com. Los pedidos llegan al WhatsApp de TapNFC.
  Cabecera crema con dibujitos rojos de comida típica (dibujos.svg) y el sello redondo (logo.svg) encima, y cada
  sección con un título en tarjeta negra (con "5 opciones · desde $3.000" y una rayita verde), sin imagen. Los
  platos van sin foto (el usuario lo prefirió así); si alguien sube una desde el panel de prueba, sale a la derecha.
  Colores: el rojo es la marca y lo que se toca ("Carta", "Pedir a domicilio", los +, "Ver pedido"); el verde hoja
  de plátano va en los detalles (sección activa, bolitas de los platos, "Los más pedidos", "Ahorra"). Rojo, verde
  y crema, como la comida típica (hogao, ají, hoja de plátano).
*/

:root { --verde: #2e6b30; --verde-vivo: #79b465; --verde-claro: #edf3e8; }

/* La cinta de arriba en negro, para que no se pierda contra la cabecera roja */
.cinta { background: #1c1c1c; }

/* Cabecera: crema, con dibujitos de comida típica en rojo que flotan despacio (dibujos.svg: empanada, ají, plátano,
   arepa, limón, chorizo, hoja, vaso y botella; es una máscara, así que se pinta del color que se quiera), el sello
   encima y debajo los datos rápidos (abierto, domicilios, ciudad) en pastillas blancas */
.hero { isolation: isolate; overflow: hidden; padding: 22px 0 56px; background: #fbf1e4; border-radius: 0 0 32px 32px; }
.hero::before, .portada::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--raya); opacity: .2;
  -webkit-mask: url(dibujos.svg) 0 0 / 300px repeat; mask: url(dibujos.svg) 0 0 / 300px repeat; animation: dibujos-flotar 80s linear infinite; }
@keyframes dibujos-flotar { to { -webkit-mask-position: 300px 300px; mask-position: 300px 300px; } }
.logo { width: 124px; height: 124px; filter: drop-shadow(0 10px 18px rgba(120, 40, 20, .25)); }
.lugar { margin-top: 14px; color: #8a5a44; font-weight: 600; }
.historia { max-width: 26em; margin-top: 6px; padding-top: 0; border-top: 0; font-size: .95rem; font-weight: 500; line-height: 1.5; color: #1c1c1c; }
.datos-rapidos .dato { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.datos-rapidos svg { color: var(--raya); }
/* "Carta | Pedir a domicilio": tarjeta blanca montada sobre el borde de la cabecera */
.modo { position: relative; z-index: 2; margin-top: -30px; padding-top: 0; }
/* Sin domicilios (no sale "Carta | Pedir a domicilio"), la portada no deja el espacio que era para el selector montado
   en su borde: "Los más pedidos" sube */
body:not(.con-selector) .hero { padding-bottom: 30px; }
.modo-caja { background: #fff; border: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); }
/* La entrada (el sello mientras carga la carta), con el mismo fondo */
.portada { isolation: isolate; background: #fbf1e4; }
@media (prefers-reduced-motion: reduce) { .hero::before, .portada::before { animation: none; } }

/* Títulos: tarjeta negra con el nombre en blanco, cuántas opciones hay y desde cuánto, una rayita roja, y la imagen
   de la sección saliéndose por la derecha */
#carta .cat { padding-top: 64px; }
#carta .titulo-cat { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px;
  min-height: 100px; padding: 20px 128px 20px 20px; border-radius: 22px; background: #1c1c1c; color: #fff; }
#carta .titulo-cat:not(.con-foto) { padding-right: 20px; }
#carta .titulo-cat::after { content: ""; width: 34px; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--verde-vivo); }
#carta h2 { margin: 0; color: #fff; font-weight: 800; font-style: normal; text-transform: none; letter-spacing: -.01em;
  font-size: clamp(1.25rem, 5.6vw, 1.8rem); line-height: 1.1; overflow-wrap: normal; }
#carta h2::after { content: none; }
#carta .resumen-cat { display: block; margin: 0; color: #bfe0ae; font-size: .74rem; font-weight: 600; white-space: nowrap; }
#carta .foto-cat { position: absolute; right: -10px; bottom: 8px; width: 152px; height: 128px; object-fit: contain; object-position: right bottom;
  pointer-events: none; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)); }
.nota-cat { margin-top: 12px; }

/* Platos: bolita verde antes del nombre */
.platos { gap: 0; margin-top: 8px; }
.plato { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.plato:last-child { border-bottom: 0; }
.nombre { font-weight: 600; font-size: 1.02rem; letter-spacing: 0; text-transform: none; text-wrap: balance; } /* sin una palabra sola abajo ("x / 4") */
.nombre::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--verde); vertical-align: 2px; }
.precio { font-weight: 700; }
.desc { padding-left: 16px; }
/* La foto de cada plato: miniatura a la derecha, del alto del plato */
.plato:has(.foto) { position: relative; grid-template-columns: minmax(0, 1fr) 96px; }
.foto { width: 96px; height: 80px; border-radius: 14px; }
/* Con foto, el nombre arriba con todo el ancho, el precio debajo y el corazón sobre la esquina de la foto */
.plato:has(.foto) > .fila { flex-direction: column; align-items: flex-start; row-gap: 3px; }
.plato:has(.foto) > .fila .nombre { flex: none; }
.plato:has(.foto) > .fila .precio { margin-left: 16px; }
.plato:has(.foto) > .fila .gusta { position: absolute; top: 17px; right: 5px; min-width: 0; min-height: 28px; margin: 0; padding: 0 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); color: #3a3330; }
.plato:has(.foto) > .fila .gusta svg { width: 16px; height: 16px; }
.fav-foto { height: 92px; border-radius: 12px; object-fit: cover; }
/* "Los más pedidos" sin foto: la tarjeta con dibujitos suaves arriba y el nombre y el precio abajo, debajo del corazón */
.fav:not(:has(.fav-foto)) { position: relative; isolation: isolate; overflow: hidden; min-height: 112px; align-content: end; padding-top: 44px; }
.fav:not(:has(.fav-foto))::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--verde); opacity: .16;
  -webkit-mask: url(dibujos.svg) 0 0 / 240px repeat; mask: url(dibujos.svg) 0 0 / 240px repeat; }
.marca { background: var(--raya); color: #fff; letter-spacing: .04em; }

/* La sección donde va la persona, "Los más pedidos", "Ahorra" y "¿Algo para tomar?", en verde */
.cats a[aria-current="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.fav { background: var(--verde-claro); }
.fav .precio { color: var(--verde); }
.ahorro { color: var(--verde); }
.pedido-hoja .ph-sugerir { background: var(--verde-claro); } /* más fuerte: el estilo del pedido se carga después */

/* Pie */
/* Pie: solo el aviso legal (propina voluntaria, precios con impuestos y el del alcohol), pequeño y discreto */
footer { margin-top: 28px; background: none; border-top: 0; }
footer .col { padding-top: 0; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
footer h3 { font-style: normal; font-weight: 800; color: var(--texto); }
.pie-legal { margin: 0; padding-top: 14px; font-size: .72rem; line-height: 1.5; text-align: center; opacity: .8; }
footer .arriba { display: none; }