/* Capa de marca: Naranjo’s Juicy Burgers.
   Sale de su menú impreso: naranja, crema de papel y azul marino; letra condensada en itálica;
   franjas horizontales y estrella de "favoritas del chef". Solo cambia el aspecto, no el funcionamiento.
   Letras: Barlow y Barlow Condensed (Google Fonts, gratis). En producción conviene servirlas desde el sitio. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;1,700;1,800&family=Barlow:wght@400;500;600;700&display=swap');

:root {
  --marca: #dd4d09;
  --marca-texto: #fffaf0;
  --naranja-osc: #c2410c;
  --crema: #fbf1de;
  --papel: #fffaf0;
  --plato: #fdf7ec;              /* el fondo de las fotos del menú */
  --marino: #1d2a5c;
  --amarillo: #ffc83d;
  --fondo: var(--crema);
  --superficie: var(--papel);
  --tinta: #2a1d14;
  --suave: #6e5a4a;
  --linea: #ecd9b9;
  --radio: 16px;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --franjas: repeating-linear-gradient(to bottom, var(--marca) 0 3px, transparent 3px 6px);
  font-family: 'Barlow', system-ui, sans-serif;
}

/* La marca manda sobre el color guardado en la base. */
html { --marca: #dd4d09 !important; }
body { background: var(--crema); font-size: 16px; }

h1, h2, h3, .titulo-vista, .barra-nombre strong {
  font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
}

/* ---------- Barra ---------- */
.barra { background: var(--marca); box-shadow: 0 3px 0 var(--papel), 0 6px 0 var(--marca), 0 9px 0 var(--papel), 0 12px 0 var(--marca); margin-bottom: 12px; }
.barra-nombre strong { font-size: 20px; }
.chip-estado { background: var(--marino); color: var(--papel); font-family: var(--display); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.globo { background: var(--amarillo); color: var(--marino); }

/* ---------- Portada ---------- */
.titulo-vista { font-size: 40px; color: var(--marino); }
body[data-marca] .portada h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.portada {
  position: relative; overflow: hidden; gap: 10px; padding: 18px 18px 0; border-radius: 22px;
  background: var(--marca); box-shadow: 5px 5px 0 var(--marino);
}
.portada-logo { width: 62%; max-width: 270px; margin: 2px 0 0 -2px; filter: drop-shadow(3px 3px 0 var(--naranja-osc)); }
.portada-ilustracion {
  position: absolute; top: 14px; right: 12px; width: 31%; max-width: 132px; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; border: 4px solid var(--papel); box-shadow: 3px 3px 0 var(--marino);
  transform: rotate(6deg);
}
.portada-eslogan {
  font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; color: var(--papel);
  font-size: clamp(38px, 12.5vw, 54px); line-height: .9; letter-spacing: .005em; margin-top: 6px; opacity: 1 !important;
  text-shadow: 3px 3px 0 var(--naranja-osc);
}
.portada-subeslogan { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 21px; color: var(--amarillo); opacity: 1 !important; }
.portada #descripcion { font-size: 16px; max-width: 34ch; }
.portada .hoy {
  justify-self: start; background: var(--marino); color: var(--papel); padding: 6px 12px; border-radius: 999px;
  font-size: 15px;
}
.portada-foto {
  margin: 8px -18px 0; width: calc(100% + 36px); max-width: none; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--plato); border-top: 6px solid var(--marino);
}

/* ---------- Acciones ---------- */
.accion {
  background: var(--papel); border: 2px solid var(--marino); border-radius: 14px; box-shadow: 3px 3px 0 var(--marino);
  color: var(--marino); font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .02em;
}
.accion svg { stroke: var(--marca); stroke-width: 2.2; width: 26px; height: 26px; }
.accion:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--marino); }

/* ---------- Tarjeta de sellos (mini) ---------- */
.mini-tarjeta {
  background: var(--marino); color: var(--papel); border: 0; border-radius: 18px; padding: 18px 20px;
  box-shadow: inset 0 -12px 0 -6px var(--marca);
}
.mini-tarjeta > span:first-child { color: var(--amarillo); font-family: var(--display); font-style: italic; font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.mini-tarjeta .chico { color: color-mix(in srgb, var(--papel) 85%, transparent); }
.mini-sellos i { border-color: var(--amarillo); }
.mini-sellos i.lleno { background: var(--amarillo); }

/* ---------- Aviso ---------- */
.aviso-tarjeta { background: var(--amarillo); border: 0; border-radius: 16px; color: var(--marino); box-shadow: 4px 4px 0 var(--marino); }
.aviso-tarjeta strong { font-family: var(--display); font-style: italic; font-size: 24px; text-transform: uppercase; line-height: 1.05; }
.aviso-tarjeta .suave { color: var(--marino); opacity: .8; }

/* ---------- Encabezados con franjas, como su menú ---------- */
.bloque h2, .categoria h2 { font-size: 30px; color: var(--marino); display: flex; align-items: center; gap: 12px; }
.bloque h2::after, .categoria h2::after { content: ''; flex: 1; height: 15px; background: var(--franjas); min-width: 30px; }
.bloque-cabeza { align-items: center; }
.bloque-cabeza h2 { flex: 1; font-size: clamp(21px, 7vw, 26px); white-space: nowrap; min-width: 0; }
.bloque-cabeza a { flex-shrink: 0; white-space: nowrap; }
.bloque-cabeza a { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 16px; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Promos: cupones ---------- */
.promo {
  background: var(--papel); border: 2px dashed var(--marca); border-left: 2px dashed var(--marca); border-radius: 16px;
  -webkit-mask: radial-gradient(circle 10px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 10px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 10px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 10px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  padding: 16px 22px;
}
.promo h3 { font-size: 24px; color: var(--marca); line-height: 1.05; }
.promo.bloqueada { border-color: color-mix(in srgb, var(--marino) 45%, transparent); }
.promo.bloqueada h3 { color: var(--marino); }
.etq { font-family: var(--display); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; }
.etq-hoy { background: var(--marca); color: var(--papel); }
.etq-miembros { background: var(--marino); color: var(--papel); }
.etq-destacado { background: var(--amarillo); color: var(--marino); }

/* ---------- Lo más pedido ---------- */
.carrusel { grid-auto-columns: 68%; }
.destacado {
  background: var(--plato); border: 2px solid var(--marino); border-radius: 18px; box-shadow: 4px 4px 0 var(--marino);
  padding: 10px 14px 14px; gap: 2px; margin: 0 4px 6px 0;
}
.destacado img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--plato); }
.destacado strong { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 26px; text-transform: uppercase; color: var(--marino); }
.precio { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 26px; color: var(--marca); }

/* ---------- Horario ---------- */
.horario { gap: 0; background: var(--papel); border-radius: 16px; padding: 6px 14px; border: 2px solid var(--linea); }
.horario li { background: none; border-radius: 0; padding: 9px 0; border-bottom: 1px dashed var(--linea); }
.horario li:last-child { border-bottom: 0; }
.horario li.hoy-dia { outline: 0; color: var(--marca); }
.horario li.hoy-dia::before { content: '▸ '; }

/* ---------- Botones ---------- */
button.principal, .boton.principal {
  font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 3px 3px 0 var(--marino); border-radius: 14px;
}
.boton, button { border-radius: 12px; }
#contacto .boton { border: 2px solid var(--marino); color: var(--marino); background: var(--papel); font-weight: 700; }

/* ---------- Menú: una carta, no una pila de tarjetas ---------- */
#buscar-menu { border: 2px solid var(--marino); background: var(--papel); }
.chip { border: 2px solid var(--marino); color: var(--marino); background: var(--papel); font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; }
.chip[aria-pressed=true] { background: var(--marino); border-color: var(--marino); color: var(--papel); }
.categoria { gap: 0; margin-bottom: 26px; }
.categoria h2 { margin-bottom: 10px; }
.platillo {
  background: var(--papel); border: 0; border-radius: 0; padding: 14px 4px; gap: 14px; align-items: center;
  border-bottom: 2px dashed var(--linea);
}
.categoria .platillo:first-of-type { border-radius: 16px 16px 0 0; }
.platillo img { width: 104px; height: 80px; object-fit: cover; background: var(--plato); border-radius: 12px; }
.platillo h3 { font-size: 23px; color: var(--marino); line-height: 1; }
.platillo .precio { font-size: 26px; align-self: center; }
.platillo.agotado .precio { font-size: 15px; font-style: normal; color: var(--suave); }
.platillo .chico.suave { font-size: 15px; }
.mini-etqs span { background: color-mix(in srgb, var(--marca) 14%, var(--papel)); color: var(--naranja-osc); font-weight: 700; }
.categoria { background: var(--papel); border-radius: 18px; padding: 16px 14px 4px; border: 2px solid var(--linea); }
.categoria .platillo:last-child { border-bottom: 0; }

/* ---------- Reservar y formularios ---------- */
.tarjeta-ui { background: var(--papel); border: 2px solid var(--linea); border-radius: 18px; }
input, select, textarea { border: 2px solid var(--linea); background: #fff; border-radius: 12px; }
.horas .chip { font-size: 17px; }

/* ---------- Tarjeta de sellos ---------- */
.tarjeta-sellos { box-shadow: 5px 5px 0 var(--marino); position: relative; overflow: hidden; }
.tarjeta-sellos::before { content: ''; position: absolute; inset: auto 0 0; height: 18px; background: repeating-linear-gradient(to bottom, var(--papel) 0 3px, transparent 3px 6px); opacity: .5; }
.tarjeta-cabeza h1 { font-size: 0; color: transparent; width: 58%; aspect-ratio: 900 / 486; background: url('fotos/app/logo.webp?v=2') left center / contain no-repeat; }
.sellos li.puesto { color: var(--marca); }
.avance { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 24px; text-transform: uppercase; }
.encabezado h1 { color: var(--marino); font-size: 36px; line-height: 1; }
.negocio { color: var(--marca); font-family: var(--display); font-weight: 800; text-transform: uppercase; }

/* ---------- Pestañas ---------- */
.pestanas { background: var(--marino); border-top: 4px solid var(--marca); }
.pestanas a { color: color-mix(in srgb, var(--papel) 70%, transparent); font-family: var(--display); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; }
.pestanas a[aria-current] { color: var(--amarillo); }

/* ---------- Avisos ---------- */
.dialogo { background: var(--crema); }
.dialogo h2 { color: var(--marino); font-size: 30px; }

/* ---------- Pedidos ---------- */
.agregar { background: var(--marca); color: var(--papel); box-shadow: 2px 2px 0 var(--marino); font-family: var(--display); font-weight: 800; }
.agregar:active { transform: translate(2px, 2px); box-shadow: none; }
.agregar-n { font-size: 21px; }
.barra-pedido {
  background: var(--marca); color: var(--papel); border-radius: 16px; box-shadow: 4px 4px 0 var(--marino);
  font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .03em;
}
.barra-pedido strong { font-style: italic; font-size: 24px; color: var(--amarillo); }
.pedido-linea { border-bottom: 2px dashed var(--linea); }
.pedido-linea strong { color: var(--marino); font-family: var(--display); font-style: italic; font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1.05; }
.contador button { border: 2px solid var(--marino); color: var(--marino); background: var(--papel); font-weight: 800; }
.pedido-total span { font-family: var(--display); font-weight: 800; text-transform: uppercase; color: var(--marino); font-size: 22px; }
.pedido-total strong { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 32px; color: var(--marca); }
.pedido-estado { background: var(--papel); border: 2px solid var(--marino); box-shadow: 4px 4px 0 var(--marino); }
.pedido-estado strong:first-child { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 24px; text-transform: uppercase; color: var(--marino); }
.etq-pedido-listo { background: var(--amarillo); color: var(--marino); }
.entrega button { border: 2px solid var(--marino); color: var(--marino); background: var(--papel); font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.recomendar-avisos { background: var(--amarillo); border: 2px solid var(--marino); box-shadow: 4px 4px 0 var(--marino); color: var(--marino); }
.recomendar-avisos p strong { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 19px; text-transform: uppercase; line-height: 1.1; }
.recomendar-icono { background: var(--marino); color: var(--amarillo); }
.pedido-tiempo { background: var(--papel); border: 2px dashed var(--marino); color: var(--marino); }
.pasos-pedido li { font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.pasos-pedido li[data-hecho] { border-top-color: var(--marino); color: var(--marino); }
.entrega button[aria-pressed="true"] { background: var(--marino); border-color: var(--marino); color: var(--papel); box-shadow: 3px 3px 0 var(--marca); }