/* pantallas.css — cada pantalla, en el lenguaje de Apple: la barra de arriba
   translúcida, la portada con el logo como ícono de app, las dos entradas
   grandes, la carta como lista agrupada, la hoja que sube desde abajo, el
   pedido, el seguimiento, las reservas y el pie. */

/* ---------- Barra de arriba (translúcida, siempre visible, con «Llamar») ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.08);
}
.cabecera-fila {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--alto-cabecera);
  padding-block: 0.25rem;
}
.cabecera-marca {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  min-height: 2.75rem; /* se toca para volver al inicio: 44 px como mínimo */
  flex: 1;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s var(--suave);
}
.cabecera-logo {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 9px; /* 22 %, como un ícono de app */
  object-fit: cover;
  clip-path: inset(1px round 9px); /* sin el filo claro de algunos logos */
}
.cabecera-textos {
  min-width: 0;
}
.cabecera-nombre {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Si está abierto lo dice la portada, en grande. */
.cabecera .estado-local {
  display: none;
}
/* En la portada el logo y el nombre ya están grandes: arriba queda solo «Llamar». */
body[data-pantalla='inicio'] .cabecera-marca {
  opacity: 0;
  pointer-events: none;
}
.boton-llamar {
  --fondo: var(--marca-suave);
  --color: var(--marca-texto);
  flex: none;
  min-height: 3rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
}

/* ---------- Pantallas ---------- */

.pantalla {
  padding-block: 1.25rem 3.5rem;
}
.pantalla-angosta {
  max-width: var(--ancho-angosto);
}
.pantalla-cabeza {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}
.pantalla-cabeza > .boton-plano:first-child {
  margin-left: -0.75rem;
  min-height: 3rem;
}
.titulo-pantalla:focus {
  outline: none;
}
.titulo-pantalla:focus-visible {
  outline: 3px solid var(--marca-boton);
}
.pantalla-bajada {
  margin-top: -0.5rem;
  color: var(--tinta-2);
  font-size: 1.05em;
}
.paso-de {
  color: var(--marca-texto);
  font-weight: 600;
  font-size: 0.9em;
}
.nota-al-pie {
  margin-top: 1.25rem;
  color: var(--tinta-2);
  font-size: 0.9em;
  text-align: center;
}

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

.portada {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding-top: 1.5rem;
  text-align: center;
}
.portada-logo {
  display: block;
  width: 7rem;
  height: 7rem;
  margin-bottom: 0.6rem;
  border-radius: 1.55rem; /* 22 %: el ícono de app de Apple */
  overflow: hidden;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.08),
    0 10px 30px rgb(0 0 0 / 0.12);
}
.portada-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05); /* esconde un borde claro que traen algunos logos */
}
.portada h1 {
  font-size: clamp(2.25rem, 1.9rem + 1.8vw, 3rem);
}
.portada-bajada {
  max-width: 26ch;
  color: var(--tinta-2);
  font-size: 1.1em;
}
.estado-local {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: var(--sombra);
  font-weight: 600;
  font-size: 0.95em;
}
.estado-local::before {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  flex: none;
  border-radius: 50%;
  background: #c77c02;
}
.estado-local.abierto::before {
  background: #28a745;
  box-shadow: 0 0 0 3px rgb(40 167 69 / 0.2);
}

/* ---------- Los botones grandes (inicio y ¿cómo lo querés?) ---------- */

.entradas {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
}
.pantalla-bajada + .entradas {
  margin-top: 1.5rem;
}
.boton-grande-fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 5.75rem;
  padding: 1.1rem 1.1rem 1.1rem 1.25rem;
  border: 0;
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: var(--sombra);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform 0.25s var(--suave),
    background-color 0.25s var(--suave),
    box-shadow 0.25s var(--suave);
  -webkit-tap-highlight-color: transparent;
}
/* La misma fila, como enlace (llamar, WhatsApp). */
a.boton-grande-fila {
  box-sizing: border-box;
  text-decoration: none;
}
.boton-grande-fila:hover {
  background: var(--superficie-hover);
}
.boton-grande-fila:active {
  transform: scale(0.985);
}
.boton-grande-icono {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--marca-suave);
  color: var(--marca-texto);
}
.boton-grande-textos {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.boton-grande-titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.3em;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.boton-grande-ayuda {
  color: var(--tinta-2);
  font-size: 0.9em;
  line-height: 1.35;
}
.boton-grande-flecha {
  color: var(--tinta-3);
}
.boton-grande-fila.es-principal {
  background: var(--marca-boton);
  color: var(--sobre-marca);
}
.boton-grande-fila.es-principal:hover {
  background: color-mix(in srgb, var(--marca-boton) 90%, #000);
}
.es-principal .boton-grande-icono {
  background: rgb(255 255 255 / 0.18);
  color: var(--sobre-marca);
}
.es-principal .boton-grande-ayuda,
.es-principal .boton-grande-flecha {
  color: var(--sobre-marca);
}
/* La forma que ya había elegido (al volver a cambiarla) */
.boton-grande-fila[aria-pressed='true'] {
  box-shadow: inset 0 0 0 3px var(--marca-boton);
}
.boton-grande-fila[aria-pressed='true'] .boton-grande-flecha {
  color: var(--marca-texto);
}

/* ---------- Listas agrupadas (como en Ajustes) ---------- */

.titulo-lista {
  margin: 0 0 0.6rem 0.25rem;
  font-size: 1.25rem;
}
.lista {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.lista > li + li {
  box-shadow: inset 4.5rem 1px 0 var(--superficie), inset 0 1px 0 var(--linea);
}
.fila-lista {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 4.25rem;
  padding: 0.8rem 1rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s var(--suave);
}
.fila-lista:hover {
  background: var(--superficie-hover);
}
.fila-lista:active {
  background: var(--relleno);
}
.fila-lista-icono {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: var(--marca-suave);
  color: var(--marca-texto);
}
.fila-lista-textos {
  display: grid;
  min-width: 0;
}
.fila-lista-titulo {
  font-weight: 600;
}
.fila-lista-detalle {
  color: var(--tinta-2);
  font-size: 0.9em;
}
.fila-lista-flecha {
  color: var(--tinta-3);
}
.en-curso {
  margin-top: 2.5rem;
}

/* ---------- Carta ---------- */

.carta-cabeza {
  display: grid;
  gap: 1rem;
  max-width: var(--ancho-angosto);
}
.carta-cabeza .pantalla-cabeza {
  margin-bottom: 0;
}
.carta-arriba {
  display: grid;
  gap: 0.75rem;
}
.carta-arriba:empty {
  display: none;
}
.como-lo-recibe {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.5rem;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  border-radius: var(--radio-chico);
  background: var(--superficie);
  box-shadow: var(--sombra);
  font-weight: 600;
}
.como-lo-recibe .icono {
  color: var(--marca-texto);
}
.como-lo-recibe span {
  flex: 1;
}
.lo-de-siempre {
  display: grid;
  gap: 0.6rem;
  padding: 1.25rem;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.lo-de-siempre h2 {
  font-size: 1.25rem;
}
.lo-de-siempre .resumen {
  color: var(--tinta-2);
}
.lo-de-siempre .precio {
  color: var(--tinta);
  font-weight: 600;
}
.lo-de-siempre .boton {
  justify-self: start;
}
@media (max-width: 40rem) {
  .cabecera-logo {
    width: 2.25rem;
    height: 2.25rem;
  }
  .boton-llamar {
    min-height: 2.75rem;
  }
}
.buscador {
  position: relative;
}
.buscador .icono {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-3);
  pointer-events: none;
}
.buscador input {
  padding-left: 3rem;
}
/* Las carpetas de la carta: todas a la vista, dos por renglón en el celular,
   grandes, como las carpetas de la app de comandas. */
.carta-buscar input {
  min-height: 3.25rem;
}
.carta-resultados {
  margin-top: 1.25rem;
}
.carpetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.25rem), 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.carpetas li {
  display: grid;
}
.carpeta {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-height: 6rem;
  padding: 1rem 2.25rem 1rem 1.1rem;
  border: 0;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra), inset 0 0 0 1px var(--linea);
  color: var(--tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s var(--suave),
    transform 0.16s var(--suave);
}
.carpeta:active {
  transform: scale(0.97);
  background: var(--relleno);
}
@media (hover: hover) and (pointer: fine) {
  .carpeta:hover {
    background: var(--superficie-hover);
  }
}
.carpeta-nombre {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.carpeta-cuantas {
  color: var(--tinta-2);
  font-size: 0.95rem;
}
.carpeta-flecha {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--marca-texto);
}
.carpeta-bajada {
  margin-top: 0.25rem;
  color: var(--tinta-2);
}
.carta > .productos {
  margin-top: 1.25rem;
}
.otras-carpetas {
  margin-top: 2.5rem;
}
.otras-carpetas h2 {
  margin: 0 0.25rem 0.75rem;
  font-size: 1.5rem;
}
.volver-carpetas {
  margin-top: 1.5rem;
}
.aviso-salsas {
  display: grid;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

.seccion {
  margin-top: 2rem;
}
.seccion:first-child {
  margin-top: 0;
}
.seccion-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0.25rem 0.75rem;
}
.seccion-cabeza h2 {
  font-size: 1.625rem;
}
.seccion-cabeza span {
  color: var(--tinta-2);
  font-size: 0.9em;
  white-space: nowrap;
}

/* Los productos: una lista agrupada en el celular; en la computadora, dos
   columnas separadas por la misma línea fina. */
.productos {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.producto {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--superficie);
}
.productos .producto.tarjeta {
  border-radius: 0;
  box-shadow: none;
}
.productos .producto + .producto {
  box-shadow: inset 0 1px 0 var(--linea);
}
@media (min-width: 48rem) {
  .productos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--linea);
  }
  .productos .producto + .producto {
    box-shadow: none;
  }
  .producto:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
/* h3 debajo de una carpeta, h2 cuando la carpeta es la pantalla: se ven igual. */
.producto :is(h2, h3) {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.producto-descripcion {
  color: var(--tinta-2);
}
.producto-nota {
  font-size: 0.9em;
  color: var(--tinta-2);
}
.producto-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.producto-precios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.25rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--tinta-2);
}
.producto-precios strong {
  color: var(--tinta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.producto-precios .no-hay {
  text-decoration: line-through;
}
.producto-precios {
  margin-bottom: 0.4rem;
}
.boton-agregar {
  --fondo: var(--marca-suave);
  --color: var(--marca-texto);
  align-self: flex-start;
  margin-top: auto; /* en dos columnas, todos a la misma altura */
  min-height: 3rem;
  padding: 0.5rem 1.25rem 0.5rem 1rem;
  border-radius: 999px;
}
.boton-agregar.boton-ancho {
  width: auto;
}
.boton-agregar:hover:not(:disabled) {
  --fondo: color-mix(in srgb, var(--marca-suave) 85%, var(--marca));
}
.producto.agotado :is(h2, h3),
.producto.agotado .producto-descripcion {
  color: var(--tinta-3);
}
.volver-arriba {
  margin-top: 0.5rem;
}
.sin-resultados {
  display: grid;
  gap: 1rem;
  justify-items: start;
  margin-top: 1.5rem;
  padding: 1.5rem;
}

/* ---------- La barra de abajo («Ver mi pedido») ---------- */

.barra-pedido {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.08);
  animation: aparecer-abajo 0.45s var(--suave);
}
.barra-pedido .boton {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: var(--ancho-angosto);
  margin-inline: auto;
}
body.con-barra {
  padding-bottom: 6.5rem;
}
/* Con el Tab, lo enfocado no queda debajo de la barra. */
html:has(body.con-barra) {
  scroll-padding-bottom: 7rem;
}
@keyframes aparecer-abajo {
  from {
    transform: translateY(100%);
  }
}

/* El aviso que aparece y se va solo: como las notificaciones de iOS, oscuro y
   arriba, así nunca tapa el botón principal de abajo. */
.aviso-flotante {
  position: fixed;
  left: 50%;
  top: 4.75rem;
  z-index: 40;
  width: min(30rem, calc(100% - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}
.aviso-flotante > .aviso {
  pointer-events: auto;
  align-items: center;
  background: rgb(29 29 31 / 0.94);
  color: #fff;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  animation: aparecer-abajo-corto 0.4s var(--suave);
}
.aviso-flotante > .aviso .icono {
  margin-top: 0;
}
@keyframes aparecer-abajo-corto {
  from {
    opacity: 0;
    transform: translateY(-0.75rem);
  }
}

/* ---------- La hoja del producto (<dialog>): sube desde abajo ---------- */

.dialogo {
  width: 100%;
  max-width: 40rem;
  height: auto;
  max-height: calc(100% - 1.5rem);
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: var(--radio-grande) var(--radio-grande) 0 0;
  background: var(--fondo);
  color: var(--tinta);
  overflow: hidden;
  box-shadow: 0 -10px 40px rgb(0 0 0 / 0.18);
}
.dialogo[open] {
  display: flex;
  flex-direction: column;
  animation: subir 0.45s var(--suave);
}
.dialogo::backdrop {
  background: rgb(0 0 0 / 0.4);
  animation: oscurecer 0.3s var(--suave);
}
@keyframes subir {
  from {
    transform: translateY(100%);
  }
}
@keyframes oscurecer {
  from {
    opacity: 0;
  }
}
@media (min-width: 48rem) {
  .dialogo {
    max-height: calc(100% - 4rem);
    margin: auto;
    border-radius: var(--radio-grande);
    box-shadow: 0 24px 70px rgb(0 0 0 / 0.3);
  }
  .dialogo[open] {
    animation: acercar 0.4s var(--suave);
  }
  @keyframes acercar {
    from {
      opacity: 0;
      transform: scale(0.96) translateY(1rem);
    }
  }
}
.dialogo-cabeza {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1rem 0.5rem 0.25rem;
}
/* La manija de las hojas de iOS */
.dialogo-cabeza::before {
  content: '';
  position: absolute;
  top: 0.45rem;
  left: 50%;
  width: 2.5rem;
  height: 0.3rem;
  border-radius: 999px;
  background: #c7c7cc;
  transform: translateX(-50%);
}
@media (min-width: 48rem) {
  .dialogo-cabeza::before {
    display: none;
  }
}
.dialogo-cuerpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem var(--gutter) 2rem;
  display: grid;
  gap: 1rem;
  align-content: start;
}
/* Las zonas que ese producto no usa (sabores en una pizza) quedan vacías. */
.dialogo-cuerpo > div:empty {
  display: none;
}
.dialogo-cuerpo > div:has(> .grupo + .grupo) {
  display: grid;
  gap: 1rem;
}
.dialogo-titulo {
  display: grid;
  gap: 0.4rem;
  padding: 0 0.25rem 0.5rem;
}
.dialogo-titulo h2 {
  font-size: clamp(1.875rem, 1.6rem + 1.2vw, 2.375rem);
  letter-spacing: -0.025em;
}
.dialogo-titulo h2:focus {
  outline: none;
}
.dialogo-titulo p {
  color: var(--tinta-2);
}
/* Cada grupo de la hoja, un bloque blanco */
.dialogo-cuerpo .grupo,
.dialogo-cuerpo > .campo,
.dialogo-cuerpo .fila-cantidad {
  padding: 1rem 1.15rem 1.15rem;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.dialogo-cuerpo .grupo .grupo {
  padding: 0;
  margin-top: 1rem;
  box-shadow: none;
}
.dialogo-pie {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem var(--gutter) calc(0.85rem + env(safe-area-inset-bottom));
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.08);
}
.dialogo-pie .falta {
  text-align: center;
  font-weight: 600;
  color: var(--tinta-2);
}
.dialogo-pie .falta:empty {
  display: none;
}

/* Los grupos (hoja, pedido, reservas): título, ayuda y lo que se elige */
.grupo {
  display: grid;
  gap: 0.75rem;
}
.grupo legend,
.grupo-titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.grupo legend {
  margin-bottom: 0.125rem;
}
.grupo legend + .ayuda {
  margin-top: -0.5rem;
}

.sabores {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sabor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding-block: 0.4rem;
}
.sabor + .sabor {
  box-shadow: inset 0 1px 0 var(--linea);
}
.sabor.elegido .sabor-nombre {
  font-weight: 600;
}
.cuenta-sabores {
  color: var(--tinta-2);
  font-weight: 500;
}
.cuenta-sabores.completo {
  color: var(--ok);
  font-weight: 600;
}
.fila-cantidad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ---------- Mi pedido ---------- */

.renglones {
  display: grid;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.renglones .renglon.tarjeta {
  border-radius: 0;
  box-shadow: none;
}
.renglon {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
}
.renglon + .renglon {
  box-shadow: inset 0 1px 0 var(--linea) !important;
}
.renglon-arriba {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.renglon-nombre {
  font-weight: 600;
}
.renglon-importe {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.renglon-extra {
  color: var(--tinta-2);
  font-size: 0.9em;
}
.renglon-problema {
  color: var(--error);
  font-weight: 600;
}
.renglon.con-problema {
  background: var(--error-suave);
}
/* El contador arriba; «Cambiar» y «Sacar» abajo, alineados con el texto.
   En pantallas anchas, los tres en un renglón. */
.renglon-acciones {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.35rem 0.25rem;
  margin-top: 0.5rem;
}
.renglon-acciones .contador {
  grid-column: 1 / -1;
  justify-self: start;
}
.renglon-acciones .boton-plano {
  min-height: 3rem;
}
.renglon-acciones .contador + .boton-plano,
.renglon-acciones > .boton-plano:first-child {
  margin-left: -0.75rem;
}
.renglon-acciones .boton-plano:last-child {
  --color: var(--error);
}
@media (min-width: 30rem) {
  .renglon-acciones {
    grid-template-columns: auto auto auto 1fr;
  }
  .renglon-acciones .contador {
    grid-column: auto;
    margin-right: 0.75rem;
  }
  .renglon-acciones .contador + .boton-plano {
    margin-left: 0;
  }
}
.como-lo-recibe + .aviso,
.renglones + .boton {
  margin-top: 0.25rem;
}
.pantalla > .como-lo-recibe {
  margin-block: 1.25rem;
}

/* La cuenta: productos, envío desglosado, total */
.cuenta {
  margin: 1.25rem 0 0;
  padding: 0.35rem 1.25rem;
}
.cuenta > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.75rem;
}
.cuenta > div + div {
  box-shadow: inset 0 1px 0 var(--linea);
}
.cuenta dt {
  color: var(--tinta-2);
}
.cuenta dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cuenta .total dt,
.cuenta .total dd {
  color: var(--tinta);
  font-size: 1.2em;
  font-weight: 700;
}
.envio-direccion {
  display: block;
  font-size: 0.85em;
}
.confirmar-final {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.confirmar-final .error-campo {
  text-align: center;
}

/* ---------- Tus datos (#confirmar) y la reserva: formulario agrupado ---------- */

.formulario {
  display: grid;
  gap: 1rem;
}
.formulario > section,
.formulario > .campo,
.formulario > .grupo,
.formulario > div > section.grupo {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.formulario > section:empty {
  display: none;
}
.formulario h2 {
  font-size: 1.25rem;
}
.formulario > div:empty {
  display: none;
}
.formulario .cuenta {
  margin-top: 0;
}
.formulario > section > .grupo {
  gap: 1rem;
}
.dos-columnas {
  display: grid;
  gap: 1rem;
}
@media (min-width: 34rem) {
  .dos-columnas {
    grid-template-columns: 1fr 1fr;
  }
}
/* ---------- El día y la hora (js/calendario.js) ----------
   Como el calendario del iPhone: semanas de lunes a domingo, el día elegido
   en un círculo del color del negocio, hoy con el número en ese color. */
.calendario {
  display: grid;
  gap: 0.75rem;
}
.calendario-grilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 0.15rem;
  text-align: center;
}
.calendario-inicial {
  padding-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tinta-3);
  text-decoration: none;
}
/* El nombre del mes arriba de su primer día (como en el iPhone). */
.calendario-mes {
  padding: 0.35rem 0 0 0.55rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--marca-texto);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.dia {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 3.5rem; /* el círculo y, abajo, «hoy» */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.dia-numero {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  max-width: 100%;
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition:
    background-color 0.2s var(--suave),
    color 0.2s var(--suave),
    transform 0.16s var(--suave);
}
button.dia {
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  button.dia:hover:not([aria-pressed='true']) .dia-numero {
    background: var(--relleno);
  }
}
button.dia:active .dia-numero {
  transform: scale(0.94);
}
button.dia:focus-visible {
  outline: none;
}
button.dia:focus-visible .dia-numero {
  outline: 3px solid var(--marca-boton);
  outline-offset: 2px;
}
.dia.es-hoy .dia-numero {
  color: var(--marca-texto);
}
button.dia[aria-pressed='true'] .dia-numero {
  background: var(--marca-boton);
  color: var(--sobre-marca);
}
.dia-hoy {
  position: absolute;
  bottom: 0.05rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: var(--marca-texto);
}
/* Los días que no se pueden elegir: apagados, sin negrita. En el gris de
   las flechas (5:1), no en el de los bordes (3,6:1): el número se tiene que
   poder leer igual, para ubicarse en el mes. */
.dia-apagado .dia-numero {
  font-weight: 400;
  color: var(--tinta-3);
}
.calendario-elegido {
  min-height: 1.5em;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linea);
  font-weight: 600;
  text-align: center;
}
.calendario-elegido:empty {
  display: none;
}

/* El plano en «¿Dónde?» (js/plano.js): el dibujo recortado a los lugares
   de esa hora; cada lugar se toca, y el elegido queda iluminado. */
.plano-lugares {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.plano-marco {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-chico);
  background: var(--relleno);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.plano-marco img {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.plano-zona {
  position: absolute;
  padding: 0;
  border: 2px dashed var(--marca-boton);
  border-radius: 8px;
  background: color-mix(in srgb, var(--marca-boton) 12%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s var(--suave),
    transform 0.16s var(--suave);
}
.plano-zona:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .plano-zona:hover {
    background: color-mix(in srgb, var(--marca-boton) 24%, transparent);
  }
}
/* Con un lugar elegido, los demás se apagan y el elegido queda como bajo
   un foco: el oscuro sale de la sombra del elegido. */
.plano-marco.con-elegido .plano-zona:not(.es-elegida) {
  border-color: transparent;
  background: transparent;
}
.plano-zona.es-elegida {
  z-index: 1;
  border: 3px solid var(--sobre-marca);
  background: transparent;
  box-shadow:
    0 0 0 3px var(--marca-boton),
    0 0 0 100vmax rgb(0 0 0 / 0.42);
  transition: box-shadow 0.25s var(--suave);
}
/* El foco aparece de a poco (en los navegadores que lo saben hacer). */
@starting-style {
  .plano-zona.es-elegida {
    box-shadow:
      0 0 0 3px var(--marca-boton),
      0 0 0 100vmax rgb(0 0 0 / 0);
  }
}
.plano-lugares figcaption {
  text-align: center;
}

/* Las horas: primero la parte del día (segmentado), después pastillas. */
.selector-hora {
  display: grid;
  gap: 0.85rem;
}
.horas-grilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.horas-grilla.con-detalle {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5rem), 1fr));
}
.opcion.hora {
  min-height: 3rem;
  padding: 0.45rem 0.25rem;
  font-variant-numeric: tabular-nums;
}
.horas-grilla.con-detalle .opcion.hora {
  min-height: 3.5rem;
}

/* ---------- Seguimiento y confirmación de la reserva ---------- */

/* El «¡Listo!»: centrado, con aire, el número grande en el medio */
.recibido {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 2rem 1.25rem 1.75rem;
  text-align: center;
}
.recibido h1 {
  font-size: clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem);
  margin-bottom: 0.75rem;
}
.recibido > p:not([class]) {
  color: var(--tinta-2);
}
.recibido .codigo-grande {
  margin-bottom: 0.5rem;
}
.recibido .hora-estimada + .hora-estimada {
  color: var(--tinta-2);
  font-weight: 500;
}
.recibido.cancelado .sello {
  background: var(--tinta-3);
}
.pantalla > h2 {
  margin: 2rem 0.25rem 0.75rem;
}
.pantalla > .cuenta {
  margin-top: 0;
}
.pantalla > .grupo,
.pantalla > .acciones,
.pantalla > .aviso {
  margin-top: 1.25rem;
}

.sello {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background: var(--prendido);
  color: #fff;
  animation: sellar 0.5s var(--suave);
}
@keyframes sellar {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}
.codigo-grande {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hora-estimada {
  font-size: 1.15em;
  font-weight: 600;
}

.pasos {
  display: grid;
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  list-style: none;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.paso {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.75rem;
  color: var(--tinta-2);
}
/* La línea que une los pasos */
.paso + .paso::before {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: -1.1rem;
  width: 2px;
  height: 2.2rem;
  transform: translateX(-50%);
  background: var(--linea);
}
.paso.hecho + .paso::before {
  background: var(--prendido);
}
.paso-marca {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: 50%;
  background: var(--relleno);
  color: var(--tinta-2);
  font-weight: 600;
  font-size: 0.95em;
  transition: background-color 0.4s var(--suave);
}
.paso.hecho {
  color: var(--tinta);
}
.paso.hecho .paso-marca {
  background: var(--prendido);
  color: #fff;
}
.paso.actual {
  color: var(--tinta);
  font-weight: 600;
}
.paso.actual .paso-marca {
  background: var(--marca-boton);
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-boton) 22%, transparent);
}

/* ---------- Mensajes de pantalla completa ---------- */

.pantalla-mensaje {
  display: grid;
  justify-items: start;
  gap: 1rem;
  max-width: var(--ancho-angosto);
  padding-block: 3rem;
}
.telefono-grande {
  font-family: var(--fuente-titulos);
  font-size: 1.75em;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

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

.pie {
  margin-top: 1rem;
  padding-block: 2.5rem 3rem;
  box-shadow: inset 0 1px 0 var(--linea);
  color: var(--tinta-2);
  font-size: 0.92em;
}
.pie-grilla {
  display: grid;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .pie-grilla {
    grid-template-columns: 1.1fr 1.3fr 1fr;
  }
}
.pie section {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  justify-items: start;
}
.pie h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tinta);
}
.pie .telefono-grande {
  color: var(--tinta);
  font-size: 1.5em;
}
.pie a {
  font-weight: 600;
}
/* Los links sueltos en su renglón («Cómo llegar», WhatsApp, Instagram): más
   alto para tocarlos (44 px), sin mover nada de lugar. */
.pie p > a:only-child:not(.boton),
.presentacion p > a:only-child:not(.boton) {
  display: inline-block;
  padding-block: 0.6rem;
  margin-block: -0.6rem;
}
.horarios {
  width: 100%;
  border-collapse: collapse;
}
.horarios th,
.horarios td {
  padding: 0.4rem 0;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.horarios th {
  padding-right: 1rem;
  white-space: nowrap;
}
.horarios tr + tr > * {
  box-shadow: inset 0 1px 0 var(--linea);
}
.horarios .hoy > * {
  color: var(--tinta);
  font-weight: 600;
}
.horarios .nota {
  display: block;
  font-size: 0.9em;
}

/* ==========================================================================
   Contrato v2 (27/9/2026): pastas, cuentas y la página principal.
   Todo lo de acá aparece solo cuando /config o /carta lo traen.
   ========================================================================== */

/* El campo que un robot completa y una persona nunca ve. */
.trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.firma {
  margin: 0;
  font-family: var(--fuente-firma, cursive);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--marca-texto);
}
.portada-frase {
  margin: 0.25rem 0 0;
  color: var(--tinta-2);
}

/* La hoja de la pasta */
.dialogo-sobretitulo {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--marca-texto);
}
.producto-mas {
  color: var(--tinta-2);
  font-size: 0.95rem;
}
.contador-ancho output {
  min-width: 4.5ch;
}
.cuanto-pido {
  padding: 1rem 1.25rem;
}
.notas-rapidas {
  margin: 0.25rem 0 0.75rem;
}

/* La cuenta: mis puntos */
.puntos {
  padding: 1.25rem 1.5rem;
  margin-block: 1rem;
}
.puntos-numero {
  margin: 0.25rem 0;
  font-family: var(--fuente-titulos);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--marca-texto);
}
.movimientos {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.movimientos li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linea);
}
.entrar-pasos {
  margin-top: 1rem;
  padding: 1.25rem;
}
.entrar-pasos p {
  margin: 0.5rem 0;
}
.cuenta details summary,
.presentacion details summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

/* La página principal: la anatomía de las páginas de Apple. Cada sección
   es un rótulo chico en el color del negocio, un título grande que dice
   algo y lo demás abajo; entre sección y sección, aire (no líneas). */
.presentacion {
  display: grid;
  gap: 4rem;
  margin-top: 3.5rem;
}
.presentacion-cabeza {
  margin-bottom: 1rem;
}
.sobretitulo {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--marca-texto);
}
.presentacion-cabeza h2 {
  font-size: clamp(1.75rem, 1.45rem + 1.4vw, 2.25rem);
  letter-spacing: -0.022em;
  line-height: 1.12;
}
.presentacion-cabeza .firma {
  font-size: 1.75rem;
}
.presentacion-seccion > p {
  margin: 0.5rem 0;
  color: var(--tinta-2);
}
.presentacion-seccion > .ayuda {
  margin-bottom: 0.75rem;
}
.presentacion-seccion > .boton {
  margin-top: 1.25rem;
}

/* La lista agrupada de iOS (Ajustes): un bloque blanco con filas separadas
   por una línea fina que arranca después del ícono. */
.lista-agrupada {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.lista-agrupada > * {
  position: relative;
}
.lista-agrupada > * + *::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.25rem;
  right: 0;
  height: 1px;
  background: var(--linea);
}
.lista-agrupada > li + li::before {
  left: 4.75rem; /* después del ícono, como en iOS */
}
.fila-lista {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 4.75rem;
  padding: 0.9rem 1rem 0.9rem 1.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
button.fila-lista {
  cursor: pointer;
  transition: background-color 0.2s var(--suave);
}
button.fila-lista:active {
  background: var(--relleno);
}
@media (hover: hover) and (pointer: fine) {
  button.fila-lista:hover {
    background: var(--superficie-hover);
  }
}
.fila-lista:focus-visible {
  outline-offset: -3px;
  border-radius: var(--radio);
}
.fila-icono {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--marca-suave);
  color: var(--marca-texto);
}
.fila-textos {
  flex: 1;
  min-width: 0;
}
.fila-textos strong {
  display: block;
  font-size: 1.1rem;
  line-height: 1.25;
}
.fila-textos span {
  display: block;
  margin-top: 0.15rem;
  color: var(--tinta-2);
  font-size: 0.95rem;
  line-height: 1.35;
}
.fila-flecha {
  flex: none;
  color: var(--tinta-3);
}

/* Lo que se despliega adentro de una lista (la carta, las preguntas): la
   flecha de iOS a la derecha, que gira al abrir. */
.lista-agrupada details {
  padding: 0 1.25rem;
}
.lista-agrupada summary {
  position: relative;
  min-height: 3.5rem;
  padding: 0.75rem 2rem 0.75rem 0;
  list-style: none;
  line-height: 1.3;
}
.lista-agrupada summary::-webkit-details-marker {
  display: none;
}
.lista-agrupada summary::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: -0.55rem;
  background: var(--tinta-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s var(--suave);
}
.lista-agrupada details[open] > summary::after {
  transform: rotate(90deg);
}
.carta-plegada[open] {
  padding-bottom: 1rem;
}
/* La carta: el plato a la izquierda y el precio a la derecha, con una línea
   de puntos suave en el medio. */
.menu-lineas {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-lineas li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0;
  flex-wrap: wrap;
}
.menu-lineas .menu-plato {
  flex: 0 1 auto;
}
.menu-lineas .menu-puntos {
  flex: 1 1 1.5rem;
  border-bottom: 1px dotted var(--linea-campo);
  transform: translateY(-0.3em);
  min-width: 1.5rem;
}
.menu-lineas .menu-precio {
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.menu-lineas .menu-media {
  flex-basis: 100%;
  text-align: right;
  font-size: 0.9rem;
  color: var(--tinta-2);
}
.menu-lineas .no-hay .menu-plato {
  text-decoration: line-through;
  color: var(--tinta-2);
}

/* Los horarios, en su bloque blanco. */
.lista-tabla {
  padding: 0.25rem 1.25rem;
}
.horarios-grandes {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.horarios-grandes th,
.horarios-grandes td {
  text-align: left;
  padding: 0.7rem 0.25rem 0.7rem 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}
.horarios-grandes thead th {
  padding-block: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta-2);
}
.horarios-grandes tbody tr:last-child > * {
  border-bottom: 0;
}
.horarios-grandes tbody th {
  font-weight: 600;
}
.horarios-grandes tr + tr > * {
  box-shadow: none; /* la línea ya la pone el borde de abajo */
}
.horarios-grandes .hoy > * {
  color: var(--marca-texto);
}
.etiqueta-hoy {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--marca-boton);
  color: var(--sobre-marca);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: 0.15em;
}
.plano {
  margin: 1.25rem 0 0;
}
.plano img {
  border-radius: var(--radio);
  width: 100%;
  height: auto;
}
.direccion-grande {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.preguntas details p {
  margin: 0 0 1rem;
  color: var(--tinta-2);
}
.redes {
  text-align: center;
}

/* ---- Con el tema propio del negocio (marca.tema) ----
   El tema cambia colores y letras por variables (js/marca.js); acá quedan
   solo los detalles que no son variables. Desde el 29/9/2026 nada de
   adornos: mayúsculas, marcos y firmas se fueron con el tema del papel
   (etiqueta «diseno-original-27-9»). */

/* El nombre en la letra de la marca, como un logotipo. Solo el nombre: el
   resto de los títulos sigue en la letra del sistema. */
.portada h1,
.cabecera-nombre {
  font-family: var(--fuente-marca, var(--fuente-titulos));
}
/* Un sello redondo no se recorta como ícono de app. */
.con-tema .portada-logo {
  border-radius: 50%;
  background: transparent;
}

/* ==========================================================================
   La mascota del negocio (js/mascota.js, 29/9/2026).
   ========================================================================== */

/* Quieto adentro de la página, con su globo: portada, confirmaciones, errores. */
.momento {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  margin: 0.25rem 0 1rem;
}
.momento-imagen {
  flex: none;
  width: 5.5rem;
  height: auto;
}
.momento-grande {
  justify-content: center;
  margin: 1.25rem 0 1.5rem;
}
.momento-grande .momento-imagen {
  width: 7.5rem;
}
.momento-chico {
  margin: 0.1rem 0 0.25rem;
}
.momento-chico .momento-imagen {
  width: 3.4rem;
}
.momento-globo {
  position: relative;
  display: grid;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: 18px 18px 18px 6px;
  background: var(--superficie);
  box-shadow: var(--sombra), inset 0 0 0 1px var(--linea);
  font-weight: 500;
  line-height: 1.35;
}
.momento-grande .momento-globo {
  max-width: 15rem;
  font-size: 1.05rem;
}
.momento-chico .momento-globo {
  margin-bottom: 0.4rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.95rem;
  background: var(--fondo);
  box-shadow: none;
}
.momento-globo .acciones {
  margin: 0;
}

/* El guía que acompaña al bajar: abajo a la izquierda, la cara y un globo de
   una línea. Nunca por encima de la barra de «Ver mi pedido». */
.guia {
  position: fixed;
  left: max(0.75rem, env(safe-area-inset-left));
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 25;
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  max-width: min(21rem, calc(100vw - 1.5rem));
  pointer-events: none;
  transition:
    opacity 0.25s var(--suave),
    transform 0.25s var(--suave),
    visibility 0.25s;
}
.guia > * {
  pointer-events: auto;
}
body:has(.barra-pedido) .guia {
  bottom: calc(5.4rem + env(safe-area-inset-bottom));
}
/* Lugar abajo para que lo último de la página pueda subir por encima del guía. */
body.con-guia #contenido {
  padding-bottom: 5rem;
}
.guia.apagada,
.guia.escribiendo {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
}
.guia-quien {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.guia-cara {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow:
    0 2px 10px rgb(0 0 0 / 0.14),
    inset 0 0 0 1px var(--linea);
  object-fit: contain;
}
.guia-cuerpo {
  display: none;
}
.guia-globo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  padding: 0.6rem 2rem 0.6rem 0.85rem;
  border-radius: 16px 16px 16px 5px;
  background: var(--superficie);
  box-shadow:
    0 4px 18px rgb(0 0 0 / 0.14),
    inset 0 0 0 1px var(--linea);
  transform-origin: left bottom;
  transition:
    opacity 0.2s var(--suave),
    transform 0.2s var(--suave);
}
.guia.achicada .guia-globo {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}
.guia.cambio .guia-globo {
  animation: globo-entra 0.3s var(--suave);
}
@keyframes globo-entra {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
}
.guia-texto {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
}
.guia-ir {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
  min-height: 2.25rem;
  padding: 0.3rem 0.5rem 0.3rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--marca-boton);
  color: var(--sobre-marca);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.guia-ir[hidden] {
  display: none;
}
.guia-ir .icono {
  transform: rotate(90deg);
}
.guia-cerrar {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-3);
  cursor: pointer;
}

/* En pantallas anchas hay lugar al costado: de cuerpo entero, con el globo
   arriba, y sin achicarse. */
@media (min-width: 90rem) {
  .guia {
    left: max(1.5rem, calc(50vw - var(--ancho) / 2 - 15rem));
    bottom: 2rem;
    flex-direction: column-reverse;
    align-items: flex-start;
    max-width: 14rem;
  }
  body:has(.barra-pedido) .guia {
    bottom: calc(6rem + env(safe-area-inset-bottom));
  }
  .guia-cara {
    display: none;
  }
  .guia-cuerpo {
    display: block;
    width: 9rem;
    height: auto;
  }
  .guia.achicada .guia-globo {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  body.con-guia #contenido {
    padding-bottom: 0;
  }
}

/* ---- La portada compacta en el celular (con página principal) ----
   Pedido de Joaquín (29/9/2026): apenas se entra tiene que verse todo, sin
   bajar: el logo, el nombre, abierto o cerrado, la mascota y los botones. Sin
   la barra de arriba en la portada (el «Llamar» queda al pie y arriba en las
   demás pantallas). */
@media (max-width: 40rem) {
  body.portada-compacta[data-pantalla='inicio'] .inicio.pantalla {
    padding-top: 0.25rem;
  }
  .portada-compacta .portada {
    gap: 0.3rem;
    padding-top: 0;
  }
  .portada-compacta .portada-logo {
    width: 4.75rem;
    height: 4.75rem;
    margin-bottom: 0.2rem;
  }
  .portada-compacta .portada h1 {
    font-size: 2.1rem;
  }
  .portada-compacta .portada-bajada {
    font-size: 1rem;
  }
  /* «Hecha acá, todos los días…» ya lo dice «Quiénes somos», más abajo. */
  .portada-compacta .portada-frase {
    display: none;
  }
  .portada-compacta .portada .estado-local {
    margin-top: 0.15rem;
    padding-block: 0.3rem;
    font-size: 0.9rem;
  }
  .portada-compacta .momento-grande {
    margin: 0.85rem 0 0.5rem;
  }
  .portada-compacta .momento-grande .momento-imagen {
    width: 4.75rem;
  }
  .portada-compacta .momento-grande .momento-globo {
    margin-bottom: 0.6rem;
    padding: 0.6rem 0.9rem;
    font-size: 1rem;
  }
  .portada-compacta .inicio .entradas {
    gap: 0.6rem;
    margin-top: 0.5rem;
  }
  .portada-compacta .inicio .boton-grande-fila {
    min-height: 4.5rem;
    padding-block: 0.75rem;
  }
  .portada-compacta .inicio .boton-grande-icono {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* ---------- Páginas legales (29/9/2026) ---------- */

.pantalla-legal {
  max-width: 44rem;
  padding-block: 1.5rem 3rem;
}
.legal-bloque {
  margin-top: 2rem;
}
.legal-bloque h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.legal-bloque p,
.legal-bloque li {
  line-height: 1.55;
}
.legal-bloque p + p,
.legal-bloque ul + p {
  margin-top: 0.75rem;
}
.legal-bloque ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.4rem;
}
.legal-otras {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  box-shadow: inset 0 1px 0 var(--linea);
}
.enlaces-legales {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
/* 44 px para tocarlos, como los otros links sueltos. */
.enlaces-legales a {
  display: inline-block;
  padding-block: 0.6rem;
}
.pie-legal {
  grid-column: 1 / -1;
  padding-top: 1.5rem;
  box-shadow: inset 0 1px 0 var(--linea);
}
.pie-titular {
  font-size: 0.9em;
}
.data-fiscal img {
  display: block;
}
.consentimiento {
  margin-top: 0.75rem;
  text-align: center;
  line-height: 1.45;
}
.sin-cortar {
  white-space: nowrap;
}

/* Los lugares sin disponibilidad a esa hora (29/9/2026): en gris, tachados y
   con el cartel, en la lista y en el plano. */
.opcion.sin-lugar {
  /* El tachado va solo en el nombre: si no, también tacha el cartel. */
  text-decoration: none;
  --fondo: transparent;
  box-shadow: inset 0 0 0 1.5px var(--linea-campo);
}
.opcion.sin-lugar > span {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.opcion.sin-lugar small {
  font-weight: 600;
  color: var(--tinta-2);
}
.plano-zona-llena {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    repeating-linear-gradient(135deg, rgb(0 0 0 / 0.22) 0 2px, transparent 2px 9px),
    rgb(120 120 120 / 0.55);
  pointer-events: none;
}
.plano-zona-llena span {
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.92);
  color: #3a3a3c;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

/* Las subcarpetas del Panel adentro de una carpeta grande (29/9/2026). */
.subcarpetas {
  margin-top: 1.5rem;
}
.subcarpeta + .subcarpeta {
  margin-top: 2rem;
}
.subcarpeta-titulo {
  font-size: 1.3rem;
  margin: 0 0 0.75rem;
}
/* Adentro de una subcarpeta: «PASTA ›» chico arriba de «Ravioles». */
.titulo-madre {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--tinta-2);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
/* «Todo»: la carpeta entera, con el color del negocio para que se distinga
   de las subcarpetas. */
.carpeta-todo {
  background: var(--marca-suave);
  box-shadow: inset 0 0 0 1.5px var(--marca);
}
.carpeta-todo .carpeta-nombre {
  color: var(--marca-texto);
}

/* ---------- El menú de las páginas (29/9/2026) ----------
   En la computadora: el logo bien a la izquierda, los enlaces en el medio y
   «Llamar» bien a la derecha, en una sola barra de lado a lado. En el
   celular: el logo, «Menú» (con la palabra) y «Llamar»; «Menú» abre la lista
   grande debajo. La barra y el pie van apenas teñidos del color del negocio
   para separarlos del resto (idea de la novia de Joaquín). */
.cabecera.con-menu {
  background: color-mix(in srgb, var(--marca-suave) 60%, var(--superficie));
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--marca) 16%, transparent);
}
.cabecera.con-menu .cabecera-fila {
  max-width: none;
  flex-wrap: wrap;
  column-gap: 1rem;
}
.cabecera-derecha {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
body.con-paginas .pie {
  background: color-mix(in srgb, var(--marca-suave) 55%, color-mix(in srgb, var(--fondo) 94%, #000));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--marca) 14%, transparent);
}
.boton-menu {
  display: none;
  flex: none;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  gap: 0.5rem;
  font-weight: 600;
}
.rayitas {
  display: grid;
  gap: 3px;
  width: 1.1rem;
}
.rayitas span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.menu-principal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.75rem;
}
.menu-principal a {
  display: inline-block;
  padding-block: 0.55rem;
  color: var(--tinta-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.menu-principal a:hover {
  color: var(--tinta);
}
.menu-principal a[aria-current='page'] {
  color: var(--marca-texto);
  border-bottom-color: var(--marca-boton);
}
@media (min-width: 40.01rem) {
  /* Tres partes: las de los costados ocupan lo mismo, así el menú queda
     justo en el medio. */
  .cabecera.con-menu .cabecera-marca,
  .cabecera.con-menu .cabecera-derecha {
    flex: 1 1 0;
  }
  .cabecera.con-menu .cabecera-derecha {
    justify-content: flex-end;
  }
  .cabecera.con-menu .menu-principal {
    flex: 0 1 auto;
  }
  .cabecera.con-menu {
    padding-inline: clamp(0rem, 2vw, 1.5rem);
  }
  /* Con el menú, el logo queda siempre a la izquierda, también en la portada. */
  body[data-pantalla='inicio'] .cabecera.con-menu .cabecera-marca {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 40rem) {
  .boton-menu {
    display: inline-flex;
    align-items: center;
  }
  .cabecera.con-menu .cabecera-marca {
    flex: 1;
  }
  .menu-principal {
    display: none;
    order: 9;
    flex-basis: 100%;
  }
  .menu-principal.abierto {
    display: block;
    box-shadow: inset 0 1px 0 var(--linea);
  }
  .menu-principal.abierto ul {
    flex-direction: column;
    gap: 0;
    padding-block: 0.5rem 1rem;
  }
  .menu-principal.abierto a {
    display: block;
    padding-block: 0.85rem;
    font-size: 1.2rem;
    color: var(--tinta);
    border-bottom: 1px solid var(--linea);
  }
  .menu-principal.abierto li:last-child a {
    border-bottom: 0;
  }
  .menu-principal.abierto a[aria-current='page'] {
    color: var(--marca-texto);
  }
  /* Con «Menú» y «Llamar» no entra el nombre: queda el logo, que lleva al inicio. */
  .cabecera.con-menu .cabecera-textos {
    display: none;
  }
  /* En la portada: arriba queda solo «Menú» (ni el nombre, que está grande
     abajo, ni «Llamar», que está al pie). */
  body.portada-compacta[data-pantalla='inicio'] .boton-llamar {
    display: none;
  }
}
.pantalla-seccion .presentacion {
  margin-top: 0;
}
.pantalla-seccion .presentacion-seccion:first-child {
  margin-top: 1rem;
}
.seccion-accesos {
  margin-top: 2.5rem;
}

/* ==========================================================================
   Portada sin logo y pie de contacto (pedido de Joaquín, 29/9/2026).
   Con páginas, el logo ya está arriba a la izquierda: la portada queda con
   el nombre bien grande y el eslogan; en la computadora, en dos columnas.
   ========================================================================== */

body.con-paginas[data-pantalla='inicio'] .cabecera.con-menu .cabecera-marca {
  opacity: 1;
  pointer-events: auto;
}
.portada-eslogan {
  max-width: 24ch;
  margin: 0;
  font-family: var(--fuente-marca, var(--fuente-titulos));
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--marca-texto);
}
body.con-paginas .portada h1 {
  font-size: clamp(3rem, 2.2rem + 3vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
body.con-paginas .portada .estado-local {
  margin-top: 0.5rem;
}
@media (max-width: 40rem) {
  body.con-paginas.portada-compacta .portada h1 {
    font-size: 2.9rem;
  }
  body.con-paginas.portada-compacta .portada {
    padding-top: 0.75rem;
  }
}

@media (min-width: 60rem) {
  body.con-paginas .inicio.pantalla {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
    max-width: var(--ancho);
    padding-block: 3.5rem 4.5rem;
  }
  body.con-paginas .inicio .portada {
    grid-column: 1;
    grid-row: 1 / span 6;
    justify-items: start;
    align-self: center;
    padding-top: 0;
    text-align: left;
  }
  body.con-paginas .inicio .portada h1 {
    font-size: clamp(4.25rem, 2rem + 4.2vw, 6.25rem);
  }
  body.con-paginas .inicio .portada-eslogan {
    font-size: 1.9rem;
  }
  body.con-paginas .inicio .momento-grande {
    justify-content: flex-start;
    margin: 1.75rem 0 0;
  }
  body.con-paginas .inicio > :not(.portada) {
    grid-column: 2;
  }
  body.con-paginas .inicio .entradas {
    margin-top: 0;
  }
  body.con-paginas .inicio .entradas ~ * {
    margin-top: 1rem;
  }
}

/* El pie: contacto arriba; lo legal, chico, en la última franja. */
body.con-paginas .pie .redes {
  margin: 0;
}
body.con-paginas .pie-legal {
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  font-size: 0.8rem;
}
body.con-paginas .pie-legal .enlaces-legales {
  gap: 0 1.1rem;
}
body.con-paginas .pie-legal .enlaces-legales a {
  padding-block: 0.35rem;
  font-weight: 500;
  color: var(--tinta-2);
}
body.con-paginas .pie-legal .pie-titular {
  font-size: 1em;
}

/* Las fotos de los platos (30/9/2026): 4:3 como se generaron, a todo el ancho
   de la tarjeta; sin foto no queda hueco. */
.producto-foto {
  display: block;
  width: calc(100% + 2.5rem);
  max-width: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: -1.15rem -1.25rem 0.5rem;
  background: var(--linea);
}
.producto.agotado .producto-foto {
  opacity: 0.55;
}
.dialogo-foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio, 0.9rem);
  margin: 0 0 1rem;
  background: var(--linea);
}

/* La introducción de la portada, debajo del eslogan (30/9/2026). */
.portada-intro {
  max-width: 34ch;
  margin: 0.25rem 0 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

/* Una pregunta que se abre (reserva: «¿Todavía no sabés cuántos van a
   ser?»). La flecha gira como en .lista-agrupada. */
.desplegable {
  margin-top: 0.75rem;
}
.desplegable summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-right: 1.75rem;
  list-style: none;
  cursor: pointer;
  color: var(--marca-texto);
  font-weight: 600;
  line-height: 1.3;
}
.desplegable summary::-webkit-details-marker {
  display: none;
}
.desplegable summary::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: -0.55rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s var(--suave);
}
.desplegable[open] > summary::after {
  transform: rotate(90deg);
}
.desplegable summary:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}
.desplegable-cuerpo {
  margin-top: 0.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radio);
  background: var(--marca-suave);
  color: var(--tinta);
}
.desplegable-cuerpo p + p {
  margin-top: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .desplegable summary::after {
    transition: none;
  }
}

/* ==========================================================================
   Las páginas del menú en la computadora (pedido de Joaquín, 1/10/2026:
   «está diseñado como para un celular»). Desde 60rem usan todo el ancho:
   las secciones van de a dos columnas y las listas, en tarjetas.
   ========================================================================== */
@media (min-width: 60rem) {
  /* El pie y la portada acompañan el ancho nuevo. */
  :root {
    --ancho: 76rem;
  }
  .pantalla-seccion {
    max-width: var(--ancho);
    padding-block: 2.5rem 4.5rem;
  }
  .pantalla-seccion > h1 {
    font-size: clamp(2.75rem, 1.5rem + 2.4vw, 3.75rem);
  }
  .pantalla-seccion .presentacion {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(3rem, 5vw, 5rem);
    row-gap: 4rem;
    align-items: start;
    margin-top: 2.5rem;
  }
  /* Lo que va solo o es largo ocupa las dos columnas. */
  .pantalla-seccion .presentacion > :only-child,
  .pantalla-seccion .presentacion > .redes,
  .pantalla-seccion .presentacion > [aria-labelledby='pres-quienes'] {
    grid-column: 1 / -1;
  }
  .pantalla-seccion .presentacion-seccion:first-child {
    margin-top: 0;
  }

  /* Dónde estamos: cómo llegar y el lugar a la izquierda, los horarios a la derecha. */
  .pantalla-seccion [aria-labelledby='pres-horarios'] {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .pantalla-seccion [aria-labelledby='pres-lugar'] {
    grid-column: 1;
  }

  /* Nosotros: la franja arriba y la historia en una columna cómoda de leer;
     las tres opciones, una al lado de la otra. */
  .pantalla-seccion .presentacion > [aria-labelledby='pres-formas'] {
    grid-column: 1 / -1;
  }
  .pantalla-seccion .nosotros > p {
    max-width: 44rem;
    margin-inline: auto;
    font-size: 1.15rem;
    line-height: 1.65;
  }

  /* La carta y las preguntas: cada fila es una tarjeta, de a dos. */
  .pantalla-seccion .lista-agrupada:not(.lista-tabla) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    align-items: start;
  }
  .pantalla-seccion .lista-agrupada:not(.lista-tabla) > * {
    background: var(--superficie);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
  }
  .pantalla-seccion .lista-agrupada:not(.lista-tabla) > * + *::before {
    display: none;
  }
  .pantalla-seccion .preguntas > details {
    padding-inline: 1.25rem;
  }
  .pantalla-seccion [aria-labelledby='pres-formas'] .lista-agrupada {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pantalla-seccion .seccion-accesos {
    margin-top: 4rem;
    justify-content: center;
  }
  .pantalla-seccion .seccion-accesos .boton {
    min-width: 16rem;
  }
}

/* ==========================================================================
   Portada con el aviso arriba y «A la mañana»; «Nosotros» con la franja de
   la foto; los títulos centrados en la computadora (Joaquín, 4/10/2026).
   ========================================================================== */
.portada-aviso {
  width: 100%;
  margin-top: 0.75rem;
  text-align: left;
}
.portada-aviso .aviso {
  margin: 0;
}

.portada-manana {
  margin-top: 2.5rem;
  padding: 1.75rem 1.5rem;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.portada-manana h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.portada-manana p:not(.sobretitulo) {
  margin: 0.4rem 0 0;
  color: var(--tinta-2);
  font-size: 1.1rem;
  line-height: 1.55;
}

.nosotros-franja {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(15rem, 42vh, 26rem);
  margin-bottom: 1.75rem;
  padding: 2rem 1.5rem;
  overflow: hidden;
  border-radius: var(--radio);
  background:
    radial-gradient(120% 90% at 20% 10%, rgb(255 255 255 / 0.12), transparent 60%),
    var(--marca-boton);
  color: #fff;
  text-align: center;
}
.nosotros-franja img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Con foto, un oscurecido de abajo hacia arriba para que la frase se lea. */
.nosotros-franja.con-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.2) 60%, rgb(0 0 0 / 0.1));
}
.nosotros-franja h2 {
  position: relative;
  z-index: 1;
  max-width: 18ch;
  margin: 0;
  color: #fff;
  font-family: var(--fuente-marca, var(--fuente-titulos));
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.25);
}

@media (min-width: 60rem) {
  body.con-paginas .inicio .portada-manana {
    grid-column: 1 / -1;
    margin-top: 4rem;
    padding: 2.5rem 3rem;
    text-align: center;
  }
  body.con-paginas .inicio .portada-manana p:not(.sobretitulo) {
    max-width: 44rem;
    margin-inline: auto;
  }
  .nosotros-franja {
    min-height: 28rem;
    margin-bottom: 2.5rem;
  }

  /* Los títulos de cada página y de cada sección, centrados (el nombre de la
     portada no: va en su columna, al lado de los botones). */
  .pantalla:not(.inicio) > .titulo-pantalla,
  .pantalla-seccion .presentacion-cabeza {
    text-align: center;
  }
  .pantalla-seccion .presentacion-cabeza h2 {
    text-wrap: balance;
  }
}

/* La franja de «Nosotros» de borde a borde, pegada a la barra de arriba (el
   alto queda como estaba; Joaquín, 4/10/2026). */
.pantalla-seccion.con-franja {
  padding-top: 0;
}
.pantalla-seccion.con-franja .presentacion {
  margin-top: 0;
}
.pantalla-seccion.con-franja .presentacion-seccion:first-child {
  margin-top: 0;
}
.con-franja .nosotros-franja {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
}

/* El pie, todo con la misma letra: títulos, teléfono, horarios, links y el
   botón (pedido de Joaquín, 4/10/2026). Los títulos solo van en negrita. */
body.con-paginas .pie-grilla,
body.con-paginas .pie-grilla h2,
body.con-paginas .pie-grilla p,
body.con-paginas .pie-grilla a,
body.con-paginas .pie-grilla .boton,
body.con-paginas .pie-grilla .horarios th,
body.con-paginas .pie-grilla .horarios td,
body.con-paginas .pie-grilla .telefono-grande {
  font-size: 1rem;
  line-height: 1.45;
}
body.con-paginas .pie-grilla .telefono-grande {
  font-weight: 600;
  letter-spacing: 0;
}
body.con-paginas .pie-grilla .horarios th,
body.con-paginas .pie-grilla .horarios td {
  font-weight: 400;
}
body.con-paginas .pie-grilla .horarios .hoy > * {
  font-weight: 600;
}
/* Lo legal sigue más chico (pedido del 29/9), todo del mismo tamaño. */
body.con-paginas .pie-grilla .pie-legal a,
body.con-paginas .pie-grilla .pie-legal p {
  font-size: 0.8rem;
}

.portada-destacado .boton {
  margin-top: 1rem;
}

/* Los horarios con dos turnos: uno abajo del otro. */
.horario-turnos {
  white-space: pre-line;
}

/* La foto del lugar elegido en la reserva (5/10/2026). */
.foto-lugar {
  margin: 1rem 0 0;
  display: grid;
  gap: 0.4rem;
}
.foto-lugar img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 60%;
  border-radius: var(--radio-chico, 12px);
  background: var(--relleno);
}
.foto-lugar figcaption {
  text-align: center;
}

/* Fotos: la de cada destacado de la portada y la grilla de «Nosotros» y «Dónde estamos». */
.destacado-foto {
  display: block;
  width: calc(100% + 3rem);
  max-width: none;
  margin: -1.75rem -1.5rem 1.25rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio) var(--radio) 0 0;
}
.galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0;
}
.galeria-foto {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.galeria-foto img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.galeria-foto figcaption {
  padding: 0.6rem 0.9rem 0.8rem;
  color: var(--tinta-2);
  font-size: 1rem;
  line-height: 1.35;
}
/* La carta impresa, frente y dorso, para mirarla en la página. */
.galeria-carta {
  grid-template-columns: minmax(0, 1fr);
}
.galeria-carta .galeria-foto img {
  aspect-ratio: auto;
}
@media (min-width: 720px) {
  .galeria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .galeria-carta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* La foto de la portada, arriba del nombre. */
.portada-foto {
  display: block;
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0 0 1.5rem;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
@media (max-width: 719px) {
  .portada-foto {
    aspect-ratio: 21 / 9;
    margin: 0 auto 1rem;
  }
}

/* Empanadas en el carrito: un contador por sabor */
.sabores-carrito { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.fila-sabor-carrito { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Título dentro de la lista de sabores (Empanadas / Canastitas) */
.sabores-titulo { list-style: none; padding: 14px 0 2px; }
.sabores-titulo h3 { margin: 0; font-size: 1.05rem; color: var(--marca-texto); }