/* =====================================================================
   Tema de Roger's Cartagena · Food & Drinks
   Sale de su carta 2026 y su Instagram: negro cálido, el rojo del logo, el dorado de las franjas
   de papel rasgado, títulos condensados en mayúscula (Anton) y fotos con marco blanco tipo sticker
   (como el borde de su logo). Sin degradados. Las hojas y diálogos se quedan claros para leer cómodo.
   ===================================================================== */
.tienda {
  --amarillo: #FFC629; --amarillo-2: #FFD866; --amarillo-3: #FFF1C7;
  --rojo-marca: #E1251B; --rojo-hondo: #A8160F;
  --papel: #0E0B0B; --blanco: #1B1514; --tinta: #F6EFE6; --tinta-2: #FFFFFF; --papel-2: #2A2120; --borde: #3A2E2C; --gris: #BFB2A6;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --duro: 4px 4px 0 var(--rojo-marca); --duro-negro: 3px 3px 0 #000;
  background: #0E0B0B url("../img/fondo-grunge.svg") repeat; background-size: 900px;
}
.tienda .hoja, .tienda .dialogo-caja, .tienda .toast, .tienda .sugerencias {
  --papel: #F7F4F1; --blanco: #FFFFFF; --tinta: #141010; --tinta-2: #2A2120; --papel-2: #EFEAE6; --borde: #E4DDD7; --gris: #5E5550;
  color: var(--tinta);
}
.tienda .toast { background: #141010; color: #fff; box-shadow: 4px 4px 0 var(--rojo-marca); }
.tienda h1, .tienda h2, .tienda h3 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
.tienda .hoja h2, .tienda .dialogo-caja h2 { font-family: var(--display); }
.tienda .mano { font-family: var(--display); color: var(--amarillo); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }

/* Logo */
.logo { display: block; height: 40px; width: auto; }
.tienda .marca { color: inherit; }
.logo-tarjeta { height: 34px; width: auto; }

/* Botones: rojo de la marca con sombra sólida */
.tienda .btn { font-family: var(--display); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
.tienda .btn-amarillo, .tienda .btn-tinta { background: var(--rojo-marca); color: #fff; box-shadow: var(--duro-negro); }
.tienda .btn-amarillo:hover, .tienda .btn-tinta:hover { background: #F2382E; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
.tienda .btn-amarillo:active, .tienda .btn-tinta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.tienda .btn-borde { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.tienda .btn-contorno { background: transparent; color: var(--amarillo); box-shadow: inset 0 0 0 2px var(--amarillo); }
.tienda .btn-contorno:hover { background: rgba(255, 198, 41, .1); }
.tienda .btn-grande { min-height: 52px; padding: 0 28px; font-size: 18px; }
.tienda .hoja .btn-tinta, .tienda .dialogo-caja .btn-tinta { background: #141010; color: #fff; box-shadow: 3px 3px 0 var(--rojo-marca); }
.tienda .hoja .btn-borde, .tienda .dialogo-caja .btn-borde { color: #141010; box-shadow: inset 0 0 0 1.5px #E4DDD7; }
.tienda .btn-whatsapp { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; }

/* Cabecera negra */
.tienda .cabecera { background: #070505; box-shadow: none; }
.tienda .cabecera-links a { color: #fff; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; }
.tienda .cabecera-links a:hover { border-color: var(--rojo-marca); }
.tienda .buscador { background: #1E1817; color: #A39587; }
.tienda .buscador input { color: #fff; }
.tienda .buscador:focus-within { background: #2A2120; box-shadow: inset 0 0 0 2px var(--amarillo); }
.tienda .btn-carrito { background: var(--rojo-marca); color: #fff; }
.tienda .contador { background: var(--amarillo); color: #141010; }

/* Cinta que corre (rojo) y borde de papel rasgado dorado */
.cinta { background: var(--rojo-marca, #E1251B); color: #fff; overflow: hidden; }
.cinta-pista { display: flex; width: max-content; animation: correr 40s linear infinite; }
.cinta-pista span { font-family: "Anton", Impact, sans-serif; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 0; white-space: nowrap; }
.cinta-pista span::after { content: "★"; margin: 0 18px; color: #FFC629; }
@keyframes correr { to { transform: translateX(-50%); } }
.rasgado { height: 16px; margin-bottom: -10px; position: relative; z-index: 2; pointer-events: none; background: url("../img/rasgado.svg") repeat-x top left; background-size: 600px 16px; }

/* Portada */
.portada {
  position: relative; margin-top: 22px; display: grid; gap: 28px; padding: 26px 20px; border-radius: 18px;
  background: #120D0C; border: 2px solid #2C1F1D; box-shadow: 0 0 0 1px #000, 0 0 46px rgba(225, 37, 27, .22); overflow: hidden;
}
.portada-texto { display: grid; gap: 14px; align-content: center; justify-items: start; }
.portada .logo-portada { height: 92px; width: auto; filter: drop-shadow(0 0 22px rgba(225, 37, 27, .45)); }
.portada h1 { font-size: clamp(38px, 5vw, 64px); line-height: .98; color: var(--amarillo); }
.portada h1 span { display: block; color: #fff; }
.portada-sub { font-size: 16px; max-width: 48ch; color: #EDE3D8; }
.aviso-cerrado { background: var(--amarillo); color: #141010; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: 15px; padding: 9px 14px; max-width: 48ch;
  clip-path: polygon(0 4%, 3% 0, 20% 6%, 42% 1%, 63% 5%, 85% 0, 100% 5%, 99% 95%, 80% 100%, 58% 94%, 36% 100%, 14% 95%, 1% 100%); }
.portada-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.portada-datos { list-style: none; margin: 6px 0 0; padding: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; border-top: 2px dashed #3A2E2C; font-size: 14px; color: #CDBFB2; width: 100%; }
.portada-datos b { color: var(--amarillo); font-family: var(--display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.polaroids { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: center; }
.polaroid {
  background: #fff; color: #141010; padding: 8px 8px 10px; border-radius: 10px; box-shadow: 5px 5px 0 var(--rojo-marca), 5px 5px 0 2px #000;
  display: grid; gap: 8px; transition: transform .3s var(--rebote); min-width: 0;
}
.polaroid:first-child { grid-column: 1 / -1; transform: rotate(-1.5deg); justify-self: center; width: min(100%, 380px); }
.polaroid:nth-child(2) { transform: rotate(2deg); }
.polaroid:nth-child(3) { transform: rotate(-2.5deg); }
.polaroid:hover { transform: rotate(0) scale(1.03); z-index: 2; }
.polaroid-foto { border: 0; padding: 0; background: #EEE; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; cursor: pointer; }
.polaroid-foto img { width: 100%; height: 100%; object-fit: cover; }
.polaroid-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.polaroid-pie > div { min-width: 0; }
.polaroid h3 { font-size: 18px; line-height: 1.05; }
.polaroid-pie > div > span { font-weight: 800; font-size: 14px; color: var(--rojo-hondo); }
.polaroid .mas { background: #141010; color: #fff; }
@media (min-width: 900px) { .portada { grid-template-columns: 1.1fr 1fr; padding: 40px 44px; gap: 40px; } .portada .logo-portada { height: 118px; } }
@media (max-width: 899px) {
  .polaroid:not(:first-child) .polaroid-pie { flex-direction: column; align-items: flex-start; }
  .polaroid:not(:first-child) h3 { font-size: 16px; }
}

/* Títulos como franja de papel rasgado dorado (como "HOT DOGS" en su carta) */
.sticker {
  display: inline-block; background: var(--amarillo); color: #141010 !important; padding: 8px 22px 6px;
  clip-path: polygon(0 10%, 4% 0, 18% 8%, 36% 2%, 55% 9%, 74% 1%, 92% 7%, 100% 0, 99% 90%, 86% 100%, 66% 92%, 47% 100%, 28% 93%, 10% 100%, 1% 92%);
  font-size: clamp(24px, 2.6vw, 34px) !important; line-height: 1;
}
.tienda .bloque-cab { align-items: center; }
.tienda .club .sticker, .tienda .bloque-cab .sticker { justify-self: start; }

/* Datos rápidos y cuadritos */
.tienda .datos-rapidos li { background: #1B1514; border: 1px solid #2E2422; box-shadow: 3px 3px 0 #000; }
.tienda .datos-rapidos svg { color: var(--rojo-marca); }
.tienda .datos-rapidos b { color: #fff; }
.tienda .datos-rapidos small { color: #BFB2A6; }
.tienda .cuadro { background: #1B1514; border: 1px solid #2E2422; box-shadow: 3px 3px 0 #000; color: #fff; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.tienda .cuadro:hover { box-shadow: 4px 4px 0 var(--rojo-marca); }
.tienda .cuadro .foto-circ { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rojo-marca); color: #141010; }

/* Tarjetas de producto */
.tienda .prod { background: #1B1514; border: 1px solid #2E2422; box-shadow: 4px 4px 0 #000; }
.tienda .prod:hover { box-shadow: 4px 4px 0 var(--rojo-marca); }
.tienda .prod h3 { font-size: 19px; line-height: 1.05; color: #fff; letter-spacing: .02em; }
.tienda .prod-desc { color: #BFB2A6; }
.tienda .prod-precio { color: var(--amarillo); font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .02em; }
.tienda .prod-precio s { color: #9A8C80; }
.tienda .prod-nota { background: #34201C; color: var(--amarillo); }
.tienda .prod-etiqueta { background: var(--rojo-marca); color: #fff; transform: rotate(-3deg); box-shadow: 2px 2px 0 #000; font-family: var(--display); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
.tienda .prod.agotado h3 { color: #8E8076; }
.tienda .prod.agotado .prod-foto::after { background: rgba(14, 11, 11, .55); }
.tienda .mas { width: auto; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--rojo-marca); color: #fff; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 14px; letter-spacing: .05em; box-shadow: 2px 2px 0 #000; }
.tienda .mas:hover { background: #F2382E; transform: translate(-1px, -1px); }
.tienda .mas[disabled] { background: #2A2120; color: #8E8076; box-shadow: none; font-size: 12px; }
.tienda .paso { background: var(--amarillo); box-shadow: 2px 2px 0 #000; }
.tienda .paso button { background: #141010; color: #fff; }
.tienda .paso output { color: #141010; }
.tienda .prod-foto { border: 2px solid #000; color: #141010; }

/* Muro de antojos con marco blanco tipo sticker */
.tienda .fila-tarjetas { padding: 14px 8px 18px; }
.tienda .fila-tarjetas .prod { background: #fff; border: 0; padding: 8px 8px 12px; border-radius: 10px; box-shadow: 5px 5px 0 var(--rojo-marca), 5px 5px 0 2px #000; overflow: visible; }
.tienda .fila-tarjetas .prod:nth-child(odd) { transform: rotate(-1.2deg); }
.tienda .fila-tarjetas .prod:nth-child(even) { transform: rotate(1.2deg); }
.tienda .fila-tarjetas .prod:hover { transform: rotate(0) translateY(-3px); }
.tienda .fila-tarjetas .prod-foto { border-radius: 6px; border: 0; }
.tienda .fila-tarjetas .prod-info, .tienda .fila-tarjetas .prod-pie { padding: 0 4px; }
.tienda .fila-tarjetas .prod h3 { color: #141010; }
.tienda .fila-tarjetas .prod-desc { color: #5E5550; }
.tienda .fila-tarjetas .prod-precio { color: var(--rojo-hondo); }
.tienda .rango { left: 6px; right: auto; top: 6px; background: var(--amarillo); color: #141010; transform: rotate(-4deg); box-shadow: 2px 2px 0 #000; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; padding: 2px 10px; border-radius: 3px; }

/* Filtros y categorías */
.tienda .hambre-btn { background: #1B1514; color: #fff; box-shadow: inset 0 0 0 1.5px #3A2E2C; }
.tienda .hambre-btn:hover { box-shadow: inset 0 0 0 1.5px var(--amarillo); }
.tienda .hambre-btn[aria-selected="true"] { background: var(--amarillo); color: #141010; box-shadow: 2px 2px 0 #000; }
.tienda .presupuesto { background: #1B1514; border: 2px dashed #4A3A36; }
.tienda .presupuesto output { color: var(--amarillo); }
.tienda input[type="range"] { background: #3A2E2C; }
.tienda input[type="range"]::-webkit-slider-thumb { background: var(--rojo-marca); border-color: #fff; }
.tienda .chip-plato { background: #2A2120; color: #fff; }
.tienda .cats { background: #0E0B0B; }
.tienda .cats a { color: #CDBFB2; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .05em; }
.tienda .cats a:hover { color: #fff; }
.tienda .cats a.activo { background: var(--rojo-marca); color: #fff; }
.tienda .cat-cab h3 { color: var(--rojo-marca); font-size: 26px; letter-spacing: .03em; }
.tienda .cat-cab span { color: #BFB2A6; }

/* Carrito lateral */
.tienda .lateral-caja { background: #1B1514; border: 2px solid #000; box-shadow: 5px 5px 0 var(--rojo-marca); }
.tienda .lateral-caja h2 { color: var(--amarillo); font-size: 24px; }
.tienda .lateral-caja .linea { border-color: #2E2422; }
.tienda .lateral-caja .linea-nota { background: #2A2120; color: #fff; }
.tienda .lateral-caja .linea-sub, .tienda .lateral-vacio { color: #BFB2A6; }

/* Club y sedes */
.tienda .club { background: #160F0E; border: 2px solid #000; box-shadow: 6px 6px 0 var(--rojo-marca); }
.tienda .club h2 { color: #141010; }
.tienda .club-cuenta { color: #F6EFE6; }
.tienda .tarjeta { background: #141010; color: #fff; border: 2px solid var(--amarillo); box-shadow: 4px 4px 0 var(--rojo-marca); transform: rotate(-1deg); }
.tienda .tarjeta-cab { color: var(--amarillo); }
.tienda .tarjeta-premio { color: #fff; }
.tienda .sello { background: #2A2120; color: #fff; }
.tienda .sello .icono { opacity: .35; }
.tienda .sello.lleno { background: var(--rojo-marca); color: #fff; }
.tienda .sello.premio { background: var(--amarillo); color: #141010; }
.tienda .sello.premio .icono { opacity: 1; }
.tienda .sede { background: #1B1514; border: 1px solid #2E2422; box-shadow: 3px 3px 0 #000; }
.tienda .sede h3 { color: var(--amarillo); font-size: 22px; }
.tienda .sede .foto-circ { background: var(--rojo-marca); color: #fff; font-family: var(--display); font-weight: 400; }
.tienda .horario { color: var(--amarillo); }

/* Pie y barras flotantes */
.tienda .pie { background: #070505; border-top: 3px solid var(--rojo-marca); }
.tienda .pie-marca .logo { height: 64px; }
.tienda .barra-carrito { background: var(--rojo-marca); color: #fff; box-shadow: 4px 4px 0 #000; border: 2px solid #000; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .05em; }
.tienda .barra-carrito strong { color: var(--amarillo); }
.tienda .seguimiento { box-shadow: 3px 3px 0 #000; border: 2px solid #000; }
.seguimiento-x { margin-left: 4px; font-size: 20px; line-height: 1; padding: 0 4px; }

/* Modo mesa (?mesa=N): solo el menú para mirar; el mesero toma el pedido */
.mesa-banner { margin-top: 22px; display: grid; gap: 16px; align-items: center; padding: 22px; border-radius: 18px; background: #120D0C; border: 2px solid #2C1F1D; box-shadow: 0 0 46px rgba(225, 37, 27, .22); }
.mesa-banner h1 { font-size: clamp(32px, 4vw, 48px); color: var(--amarillo); }
.mesa-banner p:last-child { color: #EDE3D8; max-width: 52ch; }
.mesa-banner .btn { justify-self: start; }
@media (min-width: 760px) { .mesa-banner { grid-template-columns: 1fr auto; padding: 28px 36px; } }
.modo-mesa .portada, .modo-mesa .prod-control, .modo-mesa .btn-carrito, .modo-mesa .barra-carrito, .modo-mesa .carrito-lateral,
.modo-mesa .presupuesto, .modo-mesa #sedes, .modo-mesa .seguimiento, .modo-mesa #d-agregar, .modo-mesa .dialogo .paso,
.modo-mesa .dialogo .campo, .modo-mesa .datos-rapidos li:nth-child(2) { display: none !important; }
.modo-mesa .menu-y-carrito { grid-template-columns: minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) { .cinta-pista { animation: none; } }