/* Brilex Burger · base funcional y componentes del pedido. */

:root {
  --fondo: #fafafa;
  --superficie: #ffffff;
  --tinta: #202124;
  --tinta-suave: #6c6e73;
  --linea: #ebebec;
  --linea-fuerte: #d9d9dc;
  --tomate: #790e00;
  --tomate-oscuro: #5c0a00;
  --tomate-suave: #f6eeee;
  --mostaza: #790e00;
  --mostaza-suave: #f0f0f2;
  --plato: #141414;
  --verde: #202124;
  --verde-oscuro: #101112;
  --error: #790e00;

  --letra: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --letra-titulo: 'Manrope', system-ui, sans-serif;

  --alto-cabecera: 60px;
  --alto-categorias: 54px;
  --radio: 16px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgba(30, 32, 36, 0.06), 0 6px 18px -8px rgba(30, 32, 36, 0.18);
  --ancho: 1120px;
  --margen: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--alto-cabecera) + var(--alto-categorias) + 8px);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.con-barra {
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

:focus-visible {
  outline: 3px solid var(--tomate);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radio-chico);
  background: var(--tinta);
  color: #fff;
}

.saltar:focus {
  top: 12px;
}

/* ===== Cabecera ===== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--alto-cabecera);
  background: var(--fondo);
}

.cabecera-contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--ancho);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--margen);
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta);
  text-decoration: none;
}

.marca img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #fff;
}

.marca span {
  font-family: var(--letra-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

.boton-icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--verde);
}

.boton-icono svg {
  width: 24px;
  height: 24px;
}

.boton-pedido {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
}

.boton-pedido-texto,
.boton-pedido-total {
  display: none;
}

.contador {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tomate);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

/* ===== Banner y buscador ===== */
.intro {
  display: grid;
  gap: 12px;
  max-width: var(--ancho);
  margin: 4px auto 0;
  padding: 0 var(--margen);
}

.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radio);
  background: var(--mostaza-suave);
  color: #34353a;
}

.banner svg {
  width: 26px;
  height: 26px;
}

.banner p {
  margin: 0;
}

.banner-titulo {
  font-family: var(--letra-titulo);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.2;
}

.banner-texto {
  font-size: 0.88rem;
}

.buscador {
  position: relative;
  display: flex;
  align-items: center;
}

.buscador > svg {
  position: absolute;
  left: 14px;
  color: var(--tinta-suave);
  pointer-events: none;
}

.buscador input {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 44px;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  background: var(--superficie);
  font-size: 1rem;
}

.buscador input::placeholder {
  color: #77787e;
}

.buscador input:focus {
  border-color: var(--tinta);
  outline: none;
}

.buscador input::-webkit-search-cancel-button {
  display: none;
}

.buscador-limpiar {
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-suave);
}

/* ===== Categorías ===== */
.categorias {
  position: sticky;
  top: var(--alto-cabecera);
  z-index: 20;
  margin-top: 6px;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}

.categorias-pista {
  display: flex;
  gap: 6px;
  max-width: var(--ancho);
  height: var(--alto-categorias);
  margin: 0 auto;
  padding: 0 var(--margen);
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: var(--margen);
}

.categorias-pista::-webkit-scrollbar {
  display: none;
}

.categorias a {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--tinta-suave);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.categorias a[aria-current='true'] {
  background: var(--tinta);
  color: #fff;
}

/* ===== Contenido ===== */
.contenido {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 8px var(--margen) 40px;
}

.resultado-busqueda {
  margin: 12px 0 0;
  color: var(--tinta-suave);
  font-size: 0.92rem;
}

.resultado-busqueda:empty {
  display: none;
}

.titulo-seccion,
.categoria h2 {
  margin: 0;
  font-family: var(--letra-titulo);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.categoria,
.seccion-especial {
  padding-top: 28px;
}

.categoria-desc {
  max-width: 60ch;
  margin: 6px 0 0;
  color: var(--tinta-suave);
  font-size: 0.95rem;
}

.productos {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* ===== Tarjeta de producto ===== */
.producto {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  min-height: 132px;
  padding: 14px;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.producto-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.producto h3 {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 650;
  line-height: 1.25;
}

.producto-abrir {
  padding: 0;
  border: 0;
  background: none;
  font-weight: inherit;
  text-align: left;
}

/* Toda la tarjeta abre la ficha; el botón de agregar va por encima. */
.producto-abrir::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radio);
}

.producto-abrir:focus-visible {
  outline: none;
}

.producto-abrir:focus-visible::after {
  outline: 3px solid var(--tomate);
  outline-offset: 2px;
}

.producto-desc {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--tinta-suave);
  font-size: 0.88rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.producto-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: auto;
  padding-top: 10px;
}

.precio {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.precio-anterior {
  color: var(--tinta-suave);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.etiqueta {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--mostaza-suave);
  color: #4d4e54;
  font-size: 0.76rem;
  font-weight: 650;
}

.etiqueta-promo {
  background: var(--tomate-suave);
  color: var(--tomate-oscuro);
}

.en-pedido {
  color: var(--tomate-oscuro);
  font-size: 0.8rem;
  font-weight: 650;
}

.producto-lado {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.producto-foto {
  width: 116px;
  height: 116px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--plato);
}

.producto-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.producto-lado .control {
  position: relative;
  z-index: 2;
}

.producto-foto + .control {
  position: absolute;
  right: -6px;
  bottom: -6px;
}

.producto.agotado .producto-foto img {
  filter: grayscale(1) brightness(0.7);
}

.producto.agotado h3,
.producto.agotado .precio {
  color: var(--tinta-suave);
}

.agotado-texto {
  position: relative;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f0f0f2;
  color: var(--tinta-suave);
  font-size: 0.8rem;
  font-weight: 650;
}

.producto-foto + .agotado-texto {
  position: absolute;
  right: 6px;
  bottom: 6px;
}

/* Botón + y contador − 2 + */
.boton-agregar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid var(--superficie);
  border-radius: 50%;
  background: var(--tomate);
  color: #fff;
  box-shadow: 0 2px 6px rgba(30, 32, 36, 0.25);
}

.boton-agregar:hover {
  background: var(--tomate-oscuro);
}

.contador-cantidad {
  display: flex;
  align-items: center;
  height: 44px;
  border: 3px solid var(--superficie);
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.contador-cantidad button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
}

.contador-cantidad svg {
  width: 18px;
  height: 18px;
}

.contador-cantidad output {
  min-width: 18px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.contador-cantidad.claro {
  border: 1.5px solid var(--linea-fuerte);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: none;
}

/* ===== Destacados ===== */
.carril {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 12px;
  margin: 16px calc(-1 * var(--margen)) 0;
  padding: 2px var(--margen) 8px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.carril > li {
  scroll-snap-align: start;
}

.destacado {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.destacado .destacado-foto {
  aspect-ratio: 766 / 363;
  background: var(--plato);
}

.destacado .destacado-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.destacado .producto-texto {
  padding: 12px 14px 14px;
}

.destacado .producto-pie {
  justify-content: space-between;
}

/* ===== Estados ===== */
.cargando {
  display: grid;
  gap: 12px;
  padding-top: 28px;
}

.esqueleto {
  height: 132px;
  border-radius: var(--radio);
  background: linear-gradient(90deg, #eeeeef 0%, #f8f8f9 50%, #eeeeef 100%);
  background-size: 200% 100%;
  animation: brillo 1.4s linear infinite;
}

@keyframes brillo {
  to {
    background-position: -200% 0;
  }
}

.vacio {
  max-width: 420px;
  margin: 40px auto;
  text-align: center;
  color: var(--tinta-suave);
}

.vacio p {
  margin: 0 0 8px;
}

.vacio a:not(.boton) {
  color: var(--verde);
  font-weight: 650;
}

.vacio-titulo {
  color: var(--tinta);
  font-family: var(--letra-titulo);
  font-size: 1.35rem;
  font-weight: 700;
}

.vacio .boton {
  margin-top: 12px;
}

/* ===== Botones ===== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font-weight: 650;
  text-decoration: none;
}

.boton-primario {
  background: var(--tomate);
  color: #fff;
}

.boton-primario:hover {
  background: var(--tomate-oscuro);
}

.boton-secundario {
  border: 1.5px solid var(--tinta);
  background: transparent;
  color: var(--tinta);
}

.boton-whatsapp {
  background: var(--verde);
  color: #fff;
}

.boton-whatsapp:hover {
  background: var(--verde-oscuro);
}

.boton-texto {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ancho {
  width: 100%;
}

/* ===== Pie de página ===== */
.pie {
  border-top: 1px solid var(--linea);
}

.pie-contenido {
  display: flex;
  gap: 14px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 28px var(--margen) 40px;
  color: var(--tinta-suave);
  font-size: 0.92rem;
}

.pie-contenido img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
}

.pie p {
  margin: 0 0 6px;
}

.pie-nombre {
  color: var(--tinta);
  font-family: var(--letra-titulo);
  font-size: 1.2rem;
  font-weight: 700;
}

.pie a {
  color: var(--verde);
  font-weight: 650;
}

.pie-nota {
  font-size: 0.82rem;
}

/* ===== Barra inferior del pedido (celular) ===== */
.barra-pedido {
  position: fixed;
  inset: auto 0 0;
  z-index: 25;
  padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--fondo) 70%, rgba(252, 245, 234, 0));
}

.barra-pedido button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  min-height: 56px;
  margin: 0 auto;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--tomate);
  color: #fff;
  font-weight: 650;
  box-shadow: 0 6px 18px -6px rgba(30, 32, 36, 0.5);
}

.barra-unidades {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.9rem;
}

.barra-total {
  font-variant-numeric: tabular-nums;
}

/* ===== Aviso flotante ===== */
.aviso {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 60;
  width: fit-content;
  margin: 0 auto;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font-size: 0.92rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.aviso.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Diálogos ===== */
dialog {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: var(--superficie);
  color: var(--tinta);
}

dialog::backdrop {
  background: rgba(30, 32, 36, 0.5);
}

body.modal-abierto {
  overflow: hidden;
}

.cerrar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Ficha de producto: hoja desde abajo en celular. */
.hoja {
  inset: auto 0 0;
  width: 100%;
  max-height: 92dvh;
  margin: 0;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.hoja[open] {
  display: flex;
  flex-direction: column;
  animation: subir 0.22s ease-out;
}

@keyframes subir {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

.ficha-cuerpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ficha-foto {
  position: relative;
  aspect-ratio: 766 / 363;
  background: var(--plato);
}

.ficha-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ficha-sin-foto {
  position: relative;
  height: 64px;
}

.ficha-foto .cerrar,
.ficha-sin-foto .cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
}

.ficha-texto {
  padding: 16px 20px 8px;
}

.ficha-texto h2 {
  margin: 0;
  padding-right: 40px;
  font-family: var(--letra-titulo);
  font-size: 1.7rem;
  line-height: 1.1;
}

.ficha-foto ~ .ficha-texto h2 {
  padding-right: 0;
}

.ficha-texto > p {
  margin: 8px 0 0;
  color: var(--tinta-suave);
}

.ficha-precio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 12px;
}

.ficha-precio .precio {
  font-size: 1.25rem;
}

.ficha-grupo {
  margin: 16px 20px 0;
  padding: 0;
  border: 0;
}

.ficha-grupo legend,
.campo > label,
.campo-titulo {
  display: block;
  margin-bottom: 6px;
  font-weight: 650;
}

.opcional {
  color: var(--tinta-suave);
  font-weight: 400;
}

.opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 4px;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
}

.opcion input {
  width: 20px;
  height: 20px;
  accent-color: var(--tomate);
}

.opcion span:first-of-type {
  flex: 1;
}

.opcion .precio-opcion {
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.ficha-pie {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
}

.ficha-pie .boton {
  flex: 1;
}

.ficha-agotado {
  flex: 1;
  margin: 0;
  color: var(--tinta-suave);
  font-weight: 600;
  text-align: center;
}

/* Campos */
.campo {
  margin-top: 16px;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  font-size: 1rem;
}

.campo textarea {
  min-height: 76px;
  resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--tinta);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 32, 36, 0.12);
}

.campo [aria-invalid='true'] {
  border-color: var(--error);
}

.ayuda {
  margin: 6px 0 0;
  color: var(--tinta-suave);
  font-size: 0.85rem;
}

.error-campo {
  margin: 6px 0 0;
  color: var(--error);
  font-size: 0.86rem;
  font-weight: 600;
}

.error-campo:empty {
  display: none;
}

.campos-dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.campos-dos .campo {
  margin-top: 0;
}

.ficha-grupo .campo {
  margin-top: 0;
}

/* Panel del pedido: pantalla completa en celular. */
.panel {
  inset: 0;
  width: 100%;
  height: 100dvh;
  margin: 0;
}

.panel[open] {
  display: flex;
  flex-direction: column;
  animation: entrar 0.2s ease-out;
}

@keyframes entrar {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
}

.panel-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 8px 12px 8px 8px;
  border-bottom: 1px solid var(--linea);
}

.panel-cabecera h2 {
  flex: 1;
  margin: 0;
  font-family: var(--letra-titulo);
  font-size: 1.45rem;
  line-height: 1.1;
}

.panel-cabecera .cerrar {
  box-shadow: none;
}

.volver {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.volver[hidden] + h2 {
  padding-left: 12px;
}

.pasos {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0 20px;
  list-style: none;
  color: var(--tinta-suave);
  font-size: 0.82rem;
}

.pasos li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 0;
}

.pasos li + li::before {
  content: '';
  width: 18px;
  height: 1.5px;
  background: var(--linea-fuerte);
}

.pasos [aria-current='step'] {
  color: var(--tinta);
  font-weight: 650;
}

.panel-cuerpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 20px 24px;
}

.panel-pie {
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--superficie);
}

.panel-pie .nota-pie {
  margin: 8px 0 0;
  color: var(--tinta-suave);
  font-size: 0.82rem;
  text-align: center;
}

/* Líneas del pedido */
.lineas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.linea {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
}

.linea-nombre {
  margin: 0;
  font-weight: 650;
}

.linea-detalle {
  margin: 2px 0 0;
  color: var(--tinta-suave);
  font-size: 0.86rem;
}

.linea-nota {
  font-style: italic;
}

.linea-total {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.linea-total s {
  display: block;
  color: var(--tinta-suave);
  font-size: 0.82rem;
  font-weight: 400;
}

.linea-acciones {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.linea-acciones .contador-cantidad {
  height: 40px;
}

.linea-acciones .contador-cantidad button {
  width: 36px;
  height: 36px;
}

.totales {
  margin: 16px 0 0;
}

.totales div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
}

.totales dt,
.totales dd {
  margin: 0;
}

.totales dd {
  text-align: right;
}

.dd-nota {
  display: block;
  color: var(--tinta-suave);
  font-size: 0.82rem;
}

.totales dt {
  color: var(--tinta-suave);
}

.totales .total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--linea);
  font-size: 1.15rem;
  font-weight: 700;
}

.totales .total dt {
  color: var(--tinta);
}

.totales .descuento dd {
  color: var(--tomate-oscuro);
}

.pie-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pie-total span:first-child {
  color: var(--tinta-suave);
  font-weight: 500;
}

/* Elecciones (entrega y pago) */
.elecciones {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.eleccion {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  cursor: pointer;
}

.eleccion:has(input:checked) {
  border-color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
}

.eleccion input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--tinta);
}

.eleccion strong {
  display: block;
}

.eleccion small {
  display: block;
  color: var(--tinta-suave);
  font-size: 0.86rem;
}

.eleccion .gratis {
  color: var(--verde);
  font-weight: 650;
}

.subcampos {
  margin: 4px 0 4px;
  padding: 12px 14px 14px;
  border-radius: var(--radio-chico);
  background: #f7f7f8;
}

.subcampos .campo:first-child {
  margin-top: 0;
}

.datos-pago {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.datos-pago li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
}

.copiar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  font-size: 0.85rem;
  font-weight: 600;
}

.copiar svg {
  width: 16px;
  height: 16px;
}

.seccion-form {
  margin-top: 24px;
}

.titulo-resumen {
  margin-top: 24px;
}

.vacio-alterno {
  margin-top: 16px !important;
}

.seccion-form > .campo-titulo {
  font-family: var(--letra-titulo);
  font-size: 1.2rem;
  font-weight: 700;
}

/* Listo */
.listo {
  max-width: 420px;
  margin: 32px auto 0;
  text-align: center;
}

.listo-icono {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #f0f0f2;
  color: var(--verde);
}

.listo-icono svg {
  width: 36px;
  height: 36px;
}

.listo h3 {
  margin: 0 0 8px;
  font-family: var(--letra-titulo);
  font-size: 1.6rem;
  line-height: 1.15;
}

.listo p {
  margin: 0 0 12px;
  color: var(--tinta-suave);
}

.listo .acciones-listo {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

/* ===== Pantallas medianas y grandes ===== */
@media (min-width: 640px) {
  :root {
    --margen: 24px;
  }

  .productos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .producto-foto {
    width: 132px;
    height: 132px;
  }

  .producto {
    min-height: 160px;
  }

  .boton-pedido-texto {
    display: inline;
  }

  .titulo-seccion,
  .categoria h2 {
    font-size: 2.1rem;
  }

  .intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .intro .banner[hidden] + .buscador {
    grid-column: 1 / -1;
  }

  .hoja {
    inset: 0;
    width: min(560px, calc(100% - 48px));
    max-height: min(88dvh, 820px);
    margin: auto;
    border-radius: 20px;
  }

  .carril {
    grid-auto-columns: minmax(280px, 320px);
  }
}

@media (min-width: 900px) {
  .barra-pedido {
    display: none;
  }

  body.con-barra {
    padding-bottom: 0;
  }

  .aviso {
    bottom: 24px;
  }

  .boton-pedido-total {
    display: inline;
    font-variant-numeric: tabular-nums;
  }

  .boton-pedido.con-items {
    border-color: var(--tomate);
    background: var(--tomate);
    color: #fff;
  }

  .boton-pedido.con-items .contador {
    background: var(--tinta);
  }

  .panel {
    inset: 0 0 0 auto;
    width: 460px;
    height: 100dvh;
    box-shadow: -10px 0 30px rgba(30, 32, 36, 0.18);
  }

  .panel[open] {
    animation: deslizar 0.22s ease-out;
  }

  @keyframes deslizar {
    from {
      transform: translateX(40px);
      opacity: 0;
    }
  }
}

@media (hover: hover) {
  .producto:hover {
    box-shadow:
      0 1px 2px rgba(30, 32, 36, 0.06),
      0 10px 26px -10px rgba(30, 32, 36, 0.28);
  }

  .categorias a:not([aria-current='true']):hover {
    color: var(--tinta);
    background: #f0f0f2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}