/* ============================================================
   Rincón del Antojo — styles.css
   ============================================================ */

:root{
  --indigo: #2C2767;
  --indigo-hondo: #211D50;
  --indigo-claro: #3A3480;
  --magenta: #EC008C;
  --naranja: #F7941D;
  --blanco: #FFFFFF;
  --hueso: #F8F7FB;
  --tinta-2: #5C5885;

  --radio: 16px;
  --radio-sm: 10px;
  --barra-h: 72px;
  --wrap: 1140px;
  color-scheme: light;
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--barra-h) + 12px);
}

body{
  margin:0;
  font-family: 'Archivo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-variation-settings: "wdth" 100;
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  color: var(--indigo-hondo);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,h2,h3,h4{
  font-variation-settings: "wdth" 115;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.15;
  margin:0 0 .5em;
}
h1{font-size: clamp(2rem, 4.4vw, 3rem)}
h2{font-size: clamp(1.6rem, 3vw, 2.2rem)}
h3{font-size: 1.2rem}
h4{font-size: 1rem}

p{margin:0 0 .8em}
a{color: inherit}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width:560px){ .wrap{padding: 0 18px} }

*:focus-visible{
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Patrones ------------------------------------------------- */

.azulejo{
  height:24px;
  background-color:#2C2767;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Crect width='48' height='24' fill='%232C2767'/%3E%3Cpath d='M24 0 L36 12 L24 24 L12 12 Z' fill='%23EC008C'/%3E%3Cpath d='M24 5 L31 12 L24 19 L17 12 Z' fill='%23F7941D'/%3E%3Cpath d='M0 12 L6 6 L12 12 L6 18 Z' fill='%23FFFFFF' fill-opacity='.9'/%3E%3Cpath d='M48 12 L42 6 L36 12 L42 18 Z' fill='%23FFFFFF' fill-opacity='.9'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:auto 24px;
}

.talavera{
  background-color:#2C2767;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.055' stroke-width='1.4'%3E%3Cpath d='M60 6 L114 60 L60 114 L6 60 Z'/%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3Cpath d='M0 0 L20 20 M120 0 L100 20 M0 120 L20 100 M120 120 L100 100'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}

.talavera-cuadro{
  background-color:#2C2767;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.075' stroke-width='1.4'%3E%3Cpath d='M60 6 L114 60 L60 114 L6 60 Z'/%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}

/* ---------- Botones -------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  border:0; cursor:pointer;
  font: inherit; font-weight:700;
  font-variation-settings: "wdth" 108;
  text-decoration:none;
  padding: 12px 18px;
  border-radius: 12px;
  min-height: 44px;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.btn:active{ transform: translateY(1px) }
.btn-sm{ padding: 8px 14px; min-height: 38px; font-size: .94rem }
.btn-bloque{ width:100%; padding: 14px 18px; font-size: 1.06rem }
/* Etiqueta corta de botón, solo en celular (ver @media max-width:560px). */
.btn-corto{ display: none }

.btn-naranja{ background: var(--naranja); color: var(--indigo-hondo) }
.btn-naranja:hover{ background: #ffa834 }

.btn-magenta{ background: var(--magenta); color: var(--blanco) }
.btn-magenta:hover{ background: #ff2ba1 }

.btn-linea{
  background: transparent;
  color: var(--indigo);
  border: 2px solid var(--indigo);
}
.btn-linea:hover{ background: var(--indigo); color: var(--blanco) }

.btn-linea-blanca{
  background: transparent;
  color: var(--blanco);
  border: 2px solid rgba(255,255,255,.55);
}
.btn-linea-blanca:hover{ background: rgba(255,255,255,.12) }

/* ---------- Barra superior ------------------------------------------- */

.barra{
  position: sticky; top: 0; z-index: 40;
  background: var(--indigo);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.barra-inner{
  max-width: var(--wrap);
  margin: 0 auto;
  height: var(--barra-h);
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.barra-logo{ display:flex; align-items:center }
.barra-logo img{ height: 52px; width: auto }

.barra-nav{ display:flex; align-items:center; gap: 18px }
.barra-nav a{
  color: var(--blanco); text-decoration: none; font-weight: 600;
}
.barra-nav a:hover{ color: var(--naranja) }
@media (max-width:760px){
  .barra-nav a:not(.btn){ display:none }
}
@media (max-width:560px){
  .barra-inner{ padding: 0 18px }
  .barra-logo img{ height: 44px }
}

/* ---------- Portada -------------------------------------------------- */

.portada{ color: var(--blanco); padding: 56px 0 64px }
.portada-inner{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(220px, 380px) 1fr;
  gap: 40px;
  align-items: center;
}
.portada-logo img{
  width: 100%; max-width: 380px; margin: 0 auto;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.25));
}
.portada .lead{ color: rgba(255,255,255,.9); font-size: 1.08rem; max-width: 52ch }
/* Dos versiones del texto de la bajada: la larga para escritorio y
   tablet, la corta solo en celular (<=560 px). Se intercambian con
   display, no con JS, para que no haya "flash" al cargar. */
.lead-corta{ display: none }
.lead-larga{ display: inline }

.portada-sucursales{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-top: 22px;
}
.suc-card{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radio);
  padding: 16px;
}
.suc-card h3{ margin-bottom: 2px; color: var(--blanco) }
.suc-calle{ color: rgba(255,255,255,.78); margin-bottom: 8px; font-size: .95rem }
.suc-estado{
  display:flex; align-items:center; gap: 8px;
  margin: 0 0 12px; font-weight: 600; font-size: .95rem;
}
.suc-estado .punto{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  flex-shrink: 0;
}
.suc-estado[data-abierto="true"] .punto{
  background: var(--naranja);
  animation: pulso 2.4s ease-in-out infinite;
}
@keyframes pulso{
  0%,100%{ opacity: 1 }
  50%{ opacity: .35 }
}
.suc-botones{ display:flex; flex-wrap:wrap; gap: 8px }
.suc-botones .btn{ flex: 1 1 auto; min-width: 120px }

@media (max-width:860px){
  .portada-inner{ grid-template-columns: 1fr; text-align: center }
  .portada-logo img{ max-width: 260px }
  .portada .lead{ margin-left:auto; margin-right:auto }
  .portada-sucursales{ text-align: left }
}
@media (max-width:560px){
  .portada{ padding: 40px 0 48px }
  .portada-inner{ padding: 0 18px }
  .portada-sucursales{ grid-template-columns: 1fr }
}

/* ---------- Menú ----------------------------------------------------- */

.menu{ padding: 48px 0 56px }
.menu-header{ margin-bottom: 24px }
.menu-bajada{ color: var(--indigo-hondo); font-size: 1.02rem; max-width: 60ch; margin-bottom: .4em }
.menu-aviso{ color: var(--tinta-2); font-size: .95rem; max-width: 60ch }

.cuadros{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.cuadro{ grid-column: span 3 }
.cuadro:nth-child(n+5){ grid-column: span 4 }
@media (max-width:860px){
  .cuadros{ grid-template-columns: repeat(2, 1fr) }
  .cuadro, .cuadro:nth-child(n+5){ grid-column: span 1 }
}

.cuadro{
  position: relative;
  min-height: 116px;
  border: 0;
  border-radius: var(--radio);
  color: var(--blanco);
  padding: 0;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end;
  font: inherit;
  transition: transform .12s ease;
  background-color: var(--indigo);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.075' stroke-width='1.4'%3E%3Cpath d='M60 6 L114 60 L60 114 L6 60 Z'/%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}
/* Altura fija de la foto (no por proporción): la retícula tiene cuadros de
   dos anchos distintos (span 3 arriba, span 4 abajo). Con aspect-ratio las
   dos filas quedarían de distinta altura. Con flex:1 1 auto, la foto absorbe
   cualquier sobrante vertical si el cuadro queda más alto que lo mínimo
   (p. ej. porque un hermano de la fila tiene un nombre más largo), así no
   aparece un hueco entre la foto y el bloque de texto. */
.cuadro-foto{
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: clamp(96px, 11vw, 136px);
  object-fit: cover;
  background: var(--indigo-hondo);
}
.cuadro-texto{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  flex: none;
  width: 100%;
  transition: background-color .12s ease;
}
.cuadro-marca{
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1;
  margin: 0;
}
.cuadro:hover .cuadro-texto{ background-color: var(--indigo-claro) }
.cuadro-nombre{
  font-variation-settings: "wdth" 115;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.15;
  min-height: 2.4em;
}
.cuadro-conteo{
  font-size: .82rem;
  color: rgba(255,255,255,.72);
  font-variant-numeric: tabular-nums;
}
.cuadro[aria-selected="true"] .cuadro-texto{
  background-color: var(--naranja);
  color: var(--indigo-hondo);
}
.cuadro[aria-selected="true"] .cuadro-conteo{
  color: rgba(33,29,80,.7);
}
@media (max-width:560px){
  .cuadro{ padding: 0 }
  .cuadro-texto{ padding: 11px 13px }
}

.menu-toolbar{
  display:flex; justify-content: flex-end;
  margin: 20px 0 10px;
}
.btn-toggle-todas{
  background: transparent;
  border: 1px solid rgba(44,39,103,.2);
  color: var(--indigo);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
}
.btn-toggle-todas:hover{ background: rgba(44,39,103,.06) }

/* ---------- Categorías desplegables --------------------------------- */

.cat{
  border: 1px solid rgba(44,39,103,.12);
  background: var(--blanco);
  border-radius: var(--radio);
  margin: 12px 0;
  overflow: hidden;
}
.cat > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  font-size: 1.1rem;
  color: var(--indigo);
}
.cat > summary::-webkit-details-marker{ display:none }
.cat-nombre{ flex: 1 1 auto; min-width: 0 }
.cat-globo{
  background: var(--magenta);
  color: var(--blanco);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cat-globo[hidden]{ display: none }
.cat-conteo{
  color: var(--tinta-2);
  font-weight: 500;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.cat-chevron{
  width: 10px; height: 10px;
  border-right: 2px solid var(--indigo);
  border-bottom: 2px solid var(--indigo);
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-left: 6px;
}
.cat[open] .cat-chevron{ transform: rotate(-135deg) }

.cat-nota{
  padding: 0 20px 4px;
  color: var(--tinta-2);
  font-size: .92rem;
  margin: -4px 0 0;
}

.aviso-expirado{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta-2);
  background: rgba(44,39,103,.05);
  border: 1px solid rgba(44,39,103,.12);
  border-radius: 12px;
  padding: 10px 12px 10px 16px;
  margin: 4px 0 16px;
  font-size: .92rem;
}
.aviso-expirado span{ flex: 1 1 auto }
.aviso-cerrar{
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--tinta-2);
  font-size: 1.4rem;
  line-height: 1;
  width: 32px; height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.aviso-cerrar:hover{ background: rgba(44,39,103,.08); color: var(--indigo) }

.cat-lista{
  padding: 8px 14px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 12px;
}

/* ---------- Tarjeta de platillo -------------------------------------- */

.plato{
  background: var(--blanco);
  border: 1px solid rgba(44,39,103,.14);
  border-radius: var(--radio);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.plato.tiene-pedido{
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(236,0,140,.14);
}
.plato-head{
  display: flex; align-items: flex-start; gap: 12px; justify-content: space-between;
}
.plato-nombre{
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--indigo-hondo);
  line-height: 1.25;
  margin: 0;
}
.plato-precio{
  background: var(--naranja);
  color: var(--indigo-hondo);
  font-weight: 800;
  font-variation-settings: "wdth" 108;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 1.08rem;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  align-self: flex-start;
}
.plato-desc{
  color: var(--tinta-2);
  font-size: .93rem;
  margin: 0;
}

/* Único precio: botón agregar / contador */
.plato-agregar{
  display:flex; justify-content: flex-end;
}
.btn-agregar{
  background: var(--magenta);
  color: var(--blanco);
  border: 0;
  border-radius: 10px;
  font: inherit; font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  min-height: 40px;
}
.btn-agregar:hover{ background: #ff2ba1 }

.contador{
  display:flex; align-items:center; gap: 10px;
  background: rgba(236,0,140,.08);
  border: 1px solid rgba(236,0,140,.25);
  border-radius: 10px;
  padding: 4px 6px;
}
.contador button{
  width: 32px; height: 32px;
  border: 0; background: var(--magenta); color: var(--blanco);
  border-radius: 8px;
  font-size: 1.15rem; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.contador button:hover{ background: #ff2ba1 }
.contador-cant{
  min-width: 22px; text-align: center;
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--indigo-hondo);
}
.contador-importe{
  margin-left: auto;
  font-weight: 700;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
  padding-right: 4px;
}

/* Con variantes: chips */
.plato-variantes{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.variante-chip{
  background: var(--blanco);
  border: 1.5px solid rgba(44,39,103,.2);
  border-radius: 999px;
  padding: 6px 12px 6px 14px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--indigo-hondo);
  font-size: .92rem;
  font-weight: 600;
  transition: border-color .12s ease, background .12s ease;
}
.variante-chip:hover{ border-color: var(--magenta) }
.variante-chip.activa{
  border-color: var(--magenta);
  background: rgba(236,0,140,.06);
}
.variante-nombre{ line-height: 1 }
.variante-precio{
  color: var(--tinta-2); font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: .88rem;
}
.variante-globo{
  background: var(--magenta); color: var(--blanco);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.variante-controles{
  display:inline-flex; align-items:center; gap: 4px;
  margin-left: 4px;
}
.variante-controles button{
  width: 24px; height: 24px;
  border: 0; background: rgba(236,0,140,.15); color: var(--magenta);
  border-radius: 6px;
  font-size: .95rem; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.variante-controles button:hover{ background: var(--magenta); color: var(--blanco) }

/* Variantes en modo solo lectura (PEDIDOS_ACTIVOS = false) */
.plato-variantes-lectura{
  margin: 0;
  color: var(--indigo-hondo);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.5;
}
.plato-variantes-lectura .variante-sep{
  color: var(--tinta-2);
  font-weight: 400;
}
.plato-variantes-lectura .variante-precio{
  color: var(--tinta-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Salsas --------------------------------------------------- */

.salsas{
  background: var(--indigo-hondo);
  color: var(--blanco);
  padding: 48px 0;
}
.salsas h2{ color: var(--blanco) }
.salsas p{ color: rgba(255,255,255,.86); max-width: 62ch }
.chips{
  list-style: none; padding: 0; margin: 18px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.chip{
  display: inline-flex; align-items: center;
  border: 1.5px solid rgba(255,255,255,.6);
  color: var(--blanco);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: .95rem;
}
.chip-habanero{
  background: var(--magenta);
  border-color: var(--magenta);
}

/* ---------- Franja de foto decorativa -------------------------------- */

/* La proporción real es 3.2:1, así que sin el object-fit la franja mediría
   112 px de alto en un celular de 360 px y los platillos serían ilegibles.
   El clamp la recorta: 150 px mínimo en celular, hasta 320 px en pantallas
   grandes. */
.franja-foto{ padding:0; line-height:0; background:var(--indigo-hondo) }
.franja-foto img{
  display:block;
  width:100%;
  height:clamp(150px, 16vw, 320px);
  object-fit:cover;
  object-position:center;
}

/* ---------- Sucursales (sección) ------------------------------------ */

.sucursales{ padding: 56px 0 }
.suc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width:860px){ .suc-grid{ grid-template-columns: 1fr } }

.suc-detalle{
  background: var(--blanco);
  border: 1px solid rgba(44,39,103,.14);
  border-radius: var(--radio);
  padding: 22px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.suc-detalle .suc-botones{ margin-top: auto }
.suc-detalle h3{ color: var(--indigo); margin-bottom: 6px }
.direccion{ color: var(--tinta-2); margin-bottom: 12px }
/* Dirección corta, solo en celular (ver @media max-width:560px). */
.dir-corta{ display: none }
.horario{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: .95rem;
}
.horario th, .horario td{
  padding: 6px 0;
  text-align: left;
  border-bottom: 1px dashed rgba(44,39,103,.14);
  font-weight: 500;
}
.horario td{ text-align: right; font-variant-numeric: tabular-nums; color: var(--indigo-hondo) }
.horario th{ color: var(--tinta-2) }

/* ---------- Pie ------------------------------------------------------ */

.pie{
  color: var(--blanco);
  padding: 48px 0 32px;
}
.pie-inner{ display: grid; gap: 28px }
.pie-marca img{ height: 96px; width: auto }
.pie-cols{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pie-col h4{ color: var(--naranja); margin-bottom: 8px }
.pie-col p{ color: rgba(255,255,255,.86); font-size: .95rem; margin-bottom: 6px }
.pie-col a{ color: var(--blanco); text-decoration: none }
.pie-col a:hover{ color: var(--naranja); text-decoration: underline }
.pie-col a.pie-tarjeta{
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--naranja);
  color: var(--naranja);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.pie-col a.pie-tarjeta:hover{
  background: var(--naranja);
  color: var(--indigo-hondo);
  text-decoration: none;
}
/* Enlaces sociales con icono */
.pie-col a[data-red]{
  display: flex;
  align-items: center;
  gap: 8px;
}
.pie-icono{
  width: 18px;
  height: 18px;
  flex: none;
  object-fit: contain;
}
/* Cada sucursal del pie es un <details class="pie-suc"> plegable.
   - En celular arranca cerrado; el usuario toca el summary (que luce como
     el h4 naranja de "También puedes") para abrirlo.
   - En >=861 px el media query de abajo deja la columna como lista plana:
     chevron oculto, summary sin pointer-events y <p>/<a> forzados a block.
     Si el script de matchMedia al final del HTML corre, además marca el
     <details> como open=true; si no corre, el CSS basta para que la
     columna se vea completa. */
.pie-suc{ margin: 0 }
.pie-suc > summary{
  list-style: none;
  cursor: pointer;
  color: var(--naranja);
  font-size: 1rem;
  font-weight: 800;
  font-variation-settings: "wdth" 115;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pie-suc > summary::-webkit-details-marker{ display: none }
.pie-suc > summary > span{ flex: 1 }
.pie-suc > summary::after{
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--naranja);
  border-bottom: 2px solid var(--naranja);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.pie-suc[open] > summary::after{ transform: rotate(-135deg) }
.pie-suc > p{ color: rgba(255,255,255,.86); font-size: .95rem; margin-bottom: 6px }
.pie-suc > a{ color: var(--blanco); text-decoration: none; margin-bottom: 6px }
.pie-suc > a:hover{ color: var(--naranja); text-decoration: underline }
.pie-suc[open] > p,
.pie-suc[open] > a{ display: block }
@media (min-width:861px){
  .pie-suc > summary{ pointer-events: none }
  .pie-suc > summary::after{ display: none }
  .pie-suc > p,
  .pie-suc > a{ display: block }
}
.pie-cierre{
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .88rem;
  color: rgba(255,255,255,.7);
}
.pie-cierre a{ color: var(--naranja); text-decoration: none }
.pie-cierre a:hover{ text-decoration: underline }
@media (max-width:720px){
  .pie-cols{ grid-template-columns: 1fr; gap: 16px }
}

/* ---------- Barra de pedido (fija abajo) ---------------------------- */

.barra-pedido{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--indigo-hondo);
  color: var(--blanco);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid rgba(255,255,255,.1);
  transform: translateY(100%);
  transition: transform .22s ease;
  pointer-events: none;
}
.barra-pedido[aria-hidden="false"]{
  transform: translateY(0);
  pointer-events: auto;
}
.barra-pedido-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  gap: 12px;
}
.barra-pedido-info{
  display: flex; flex-direction: column; line-height: 1.2;
}
.barra-pedido-total{
  font-weight: 800;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.barra-pedido-cant{
  font-size: .88rem;
  color: rgba(255,255,255,.72);
}
body.tiene-pedido{ padding-bottom: 84px }
@media (max-width:560px){
  .barra-pedido-inner{ padding: 10px 18px }
  body.tiene-pedido{ padding-bottom: 92px }
}

/* ---------- Panel lateral ------------------------------------------- */

.panel{
  padding: 0;
  border: 0;
  background: var(--blanco);
  color: var(--indigo-hondo);
  width: min(520px, 100vw);
  max-width: 100vw;
  max-height: 100vh;
  height: 100vh;
  margin: 0 0 0 auto;
  border-radius: 0;
}
.panel::backdrop{ background: rgba(33,29,80,.55) }
.panel[open]{
  display: flex;
  flex-direction: column;
}
.panel-inner{
  display: flex; flex-direction: column;
  height: 100%;
  padding: 22px 22px 20px;
  padding-top: calc(22px + env(safe-area-inset-top));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  gap: 16px;
  overflow: hidden;
}
.panel-head{
  display: flex; align-items: center; justify-content: space-between;
}
.panel-head h2{ margin: 0; color: var(--indigo) }
.panel-cerrar{
  background: transparent; border: 0; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: var(--indigo);
  width: 40px; height: 40px; border-radius: 8px;
}
.panel-cerrar:hover{ background: rgba(44,39,103,.06) }

.panel-lineas{
  flex: 1 1 auto;
  overflow-y: auto;
  border-top: 1px solid rgba(44,39,103,.1);
  border-bottom: 1px solid rgba(44,39,103,.1);
  padding: 8px 0;
  margin: 0 -4px;
}
.linea{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px dashed rgba(44,39,103,.1);
}
.linea:last-child{ border-bottom: 0 }
.linea-cont{
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(236,0,140,.08);
  border: 1px solid rgba(236,0,140,.25);
  border-radius: 8px;
  padding: 3px 4px;
}
.linea-cont button{
  width: 26px; height: 26px;
  border: 0; background: var(--magenta); color: var(--blanco);
  border-radius: 6px;
  font-weight: 700; cursor: pointer; line-height: 1;
}
.linea-cont span{
  min-width: 20px; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.linea-info{ min-width: 0 }
.linea-nombre{
  font-weight: 700; color: var(--indigo-hondo); line-height: 1.2;
}
.linea-variante{
  font-size: .86rem; color: var(--tinta-2);
}
.linea-importe{
  font-weight: 700; color: var(--indigo);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.panel-vacio{
  color: var(--tinta-2);
  text-align: center;
  padding: 32px 12px;
}

.panel-total-row{
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1.1rem;
}
.panel-total-row strong{
  color: var(--indigo);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.panel-sucursal{ border: 0; padding: 0; margin: 0 }
.panel-sucursal legend{
  font-weight: 700; color: var(--indigo-hondo);
  margin-bottom: 8px; padding: 0;
}
.suc-toggle{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.suc-btn{
  background: var(--blanco);
  border: 2px solid rgba(44,39,103,.2);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  font: inherit; font-weight: 700;
  color: var(--indigo-hondo);
}
.suc-btn[aria-pressed="true"]{
  border-color: var(--indigo);
  background: var(--indigo);
  color: var(--blanco);
}
.suc-btn:hover:not([aria-pressed="true"]){ border-color: var(--indigo) }

.link-vaciar{
  background: transparent; border: 0; padding: 4px;
  color: var(--tinta-2); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  align-self: center;
  font-size: .9rem;
}
.link-vaciar:hover{ color: var(--magenta) }

/* ---------- Ajustes para pantallas chicas ---------------------------- */

@media (max-width:860px){
  section{ padding: 56px 0 }
  .menu{ padding-top: 36px }
  .portada{ padding: 28px 0 36px }
  .portada-inner{ gap: 20px }
  .portada-logo img{ max-width: 190px }
  .portada h1{ font-size: clamp(1.9rem, 6.4vw, 2.6rem); margin-bottom: 14px }
  .portada .lead{ font-size: 1.02rem; margin-bottom: 26px }
  .menu-header h2, .sucursales h2{ font-size: clamp(1.6rem, 5.6vw, 2.2rem); max-width: none }
  .menu-bajada{ margin-bottom: 22px }
  .suc-grid{ gap: 26px }
  .pie-cols{ gap: 26px }
  .pie-marca img{ height: 72px; margin-bottom: 26px }
}
@media (max-width:560px){
  .lead-corta{ display: inline }
  .lead-larga{ display: none }
  .portada{ padding: 22px 0 30px }
  .portada-logo img{ max-width: 150px }
  .portada h1{ font-size: 1.6rem; line-height: 1.12; margin-bottom: 10px }
  .portada .lead{ font-size: .95rem; line-height: 1.45; margin-bottom: 20px }
  .portada-sucursales{ gap: 10px }
  .suc-card{ padding: 14px 15px }
  .suc-card h3{ font-size: 1.02rem }
  .suc-calle{ font-size: 12.5px; margin-bottom: 10px }
  .suc-estado{ font-size: 13.5px; margin-bottom: 12px }
  .sucursales{ padding: 44px 0 }
  .suc-detalle{ padding: 14px }
  .direccion{ margin-bottom: 10px }
  .dir-corta{ display: inline }
  .dir-larga{ display: none }
  .horario{ margin-bottom: 14px }
  /* Tres botones en una sola fila: "Cómo llegar" se acorta a "Mapa"
     (ver spans .btn-largo / .btn-corto en el HTML) para que WhatsApp,
     Llamar y Mapa quepan sin partir el texto ni la línea. */
  .suc-botones{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .suc-botones .btn{
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
  }
  .btn-corto{ display: inline }
  .btn-largo{ display: none }
  .cuadros{ margin-bottom: 26px }
  .cuadro-nombre{ font-size: .95rem }
  .cuadro-conteo{ font-size: 12px }
  .cat > summary{ padding: 13px 14px; font-size: 1rem }
  .cat-lista{ padding: 14px }
  .cat-nota{ font-size: 13px; margin-bottom: 14px }
  .plato{ padding: 15px 16px }
  .plato-nombre{ font-size: 1rem }
  .plato-precio{ font-size: .98rem; padding: 5px 10px }
  .plato-desc{ font-size: 13.5px }
  .plato-variantes-lectura{ font-size: .88rem }
  .menu-aviso{ font-size: 12.5px }
  .suc-detalle h3{ font-size: 1.35rem }
  .horario{ font-size: 14px }
  .btn{ padding: 12px 18px }
  .btn-sm{ padding: 9px 14px; font-size: 13.5px; min-height: 44px }
  /* Pie en celular: con las sucursales plegadas, los 26px de gap del grid
     dejaban las etiquetas con demasiado aire. Se cambia el hueco por una
     línea divisoria entre los tres hijos del grid y se aprietan los
     espacios verticales. */
  .pie{ padding: 40px 0 30px }
  .pie-marca img{ height: 60px; margin-bottom: 18px }
  .pie-cols{ gap: 0; margin-bottom: 26px }
  .pie-cols > *{ border-top: 1px solid rgba(255,255,255,.13); padding: 2px 0 }
  .pie-cols > *:last-child{ border-bottom: 1px solid rgba(255,255,255,.13); padding-bottom: 18px }
  .pie-cols h4{ margin: 16px 0 10px }
  .pie-suc > p{ margin-bottom: 6px }
  .pie-suc > a{ min-height: 38px; line-height: 38px; margin-bottom: 0 }
  .pie-suc[open]{ padding-bottom: 10px }
  .pie-col a.pie-tarjeta{ margin-bottom: 10px }
  .pie-cierre{ padding-top: 18px; font-size: 12.5px }
}

/* ---------- Motion ---------------------------------------------------- */

/* Desactivamos solo las animaciones decorativas (ver "Movimiento" en el
   BRIEF). Las transiciones de hover y de cambio de estado (botones, chips
   de variante, pastilla de la tarjeta digital, tarjetas de platillo que
   ganan borde al pedirse) se dejan activas porque le dan al usuario
   retroalimentación de un cambio que acaba de provocar. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto }
  .suc-estado[data-abierto="true"] .punto{ animation: none }
  .barra-pedido{ transition: none }
  .cat-chevron{ transition: none }
  .pie-suc > summary::after{ transition: none }
}