/* ============================================================
   LA PIZZADA · carta de pedidos
   Colores de la marca: negro #1E1E1C · rojo #E10612 · amarillo #FCCB1B
   ============================================================ */

:root {
  --ink: #1E1E1C;
  --red: #E10612;
  --yellow: #FCCB1B;
  --paper: #F7F0E1;
  --paper-2: #EFE5CF;
  --field: #FFFBF2;
  --muted: #5B574E;
  --line: rgba(30, 30, 28, .28);

  --display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: 20px;
  --bar-h: 76px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  /* Papel con un grano muy suave */
  background-image:
    radial-gradient(rgba(30, 30, 28, .045) 1px, transparent 1.2px),
    radial-gradient(rgba(30, 30, 28, .03) 1px, transparent 1.2px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
}

body.sin-scroll { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tabs__list { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

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

.hero {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 44px var(--gutter) 40px;
  border-bottom: 6px solid var(--red);
}

.hero__logo { width: min(400px, 78vw); margin: 0 auto; }

.hero__rule {
  display: block;
  width: 64px;
  height: 4px;
  background: var(--red);
  margin: 26px auto 18px;
}

.hero__kicker {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .32em;
  text-transform: uppercase;
  padding-left: .32em; /* compensa el espaciado final para centrar */
}

.hero__lead {
  margin: 12px auto 0;
  max-width: 30em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .82);
}

/* ---------- Navegación entre categorías ---------- */

.tabs {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--paper);
  border-bottom: 3px double var(--ink);
}

.tabs__list {
  scroll-behavior: smooth;
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: 980px;
  position: relative;
  display: flex;
  gap: clamp(0px, 1.6vw, 14px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}

.tabs__list::-webkit-scrollbar { display: none; }
/* centrado sólo cuando entran todas: con margin auto el scroll se traba */
.tabs__list--centrado { justify-content: center; }
.tabs__list li { flex: none; }

.tabs a {
  display: block;
  padding: 14px 10px 11px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}

.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--red); }

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

.carta {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(var(--bar-h) + 24px);
}

.carta__aviso { text-align: center; padding: 40px 0; }

.seccion { padding-top: 56px; scroll-margin-top: 52px; }

.seccion__cab { text-align: center; margin-bottom: 8px; }

.seccion__cab h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(44px, 9vw, 68px);
  line-height: 1.05;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.orn { display: block; margin: 10px auto 12px; }

.seccion__hint {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--muted);
}

.grupo { margin-top: 36px; }

.grupo__titulo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  color: var(--red);
}

.grupo__titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink);
  opacity: .5;
}

.items { list-style: none; margin: 0; padding: 0; }

.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 28px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px dotted var(--line);
}

.item:last-child { border-bottom: 0; }

.item__nombre {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.item__desc {
  margin: 3px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  color: var(--muted);
}

.precios { display: flex; align-items: flex-start; gap: 10px; }

/* Botón de tamaño + precio. Al tocarlo se transforma en un contador (− 1 +) */
.chip {
  min-width: 104px;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  transition: background .15s, color .15s, transform .12s;
}

.chip__add {
  width: 100%;
  min-height: 46px;
  padding: 8px 10px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: transparent;
  border: 0;
  color: inherit;
}

.chip__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
}

.chip__pr {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: .02em;
}

.chip:hover:not([data-qty]:not([data-qty="0"])) .chip__add { background: var(--yellow); }
.chip:hover .chip__lbl { color: var(--ink); }
.chip:active { transform: scale(.97); }

/* Ya está en el pedido */
.chip[data-qty]:not([data-qty="0"]) { background: var(--ink); color: var(--paper); }
.chip[data-qty]:not([data-qty="0"]) .chip__lbl { color: rgba(247, 240, 225, .75); }
.chip[data-qty]:not([data-qty="0"]) .chip__pr { color: var(--yellow); }

.chip__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 0 6px 8px;
}

.chip__step button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.chip__step button:hover { background: #ffd94a; }
.chip__step button:active { transform: scale(.9); }

.chip__num {
  min-width: 26px;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
}

.chip.pop { animation: pop .28s ease-out; }
@keyframes pop { 40% { transform: scale(1.06); } }

/* Etiquetas (Nueva, Recomendada…) */
.tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px 1px;
  vertical-align: 3px;
  background: var(--red);
  color: #fff;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.item__txt { min-width: 0; }

.grupo__nota, .seccion__nota {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
  color: var(--muted);
}

.seccion__nota { max-width: 34em; margin: 6px auto 0; text-wrap: balance; }

/* Opciones de cada producto (pan, carne, guarnición…) */
.opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin-top: 10px; }

.opt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.opt__nom {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.opt select, .campo select {
  max-width: 100%;
  padding: 8px 30px 8px 10px;
  font-size: 15px;
  font-weight: 600;
  background-color: var(--field);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E1E1C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
}

.campo select { width: 100%; padding: 12px 34px 12px 14px; font-size: 16px; }

.seg--mini { flex-wrap: nowrap; gap: 6px; }
.seg--mini label { flex: none; min-width: 0; }
.seg--mini span { padding: 7px 12px; font-size: 14px; }

.linkbtn {
  margin: 4px 0 0;
  padding: 8px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.linkbtn:hover { color: var(--red); }

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

.pie {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 40px var(--gutter) calc(var(--bar-h) + 40px);
  border-top: 6px solid var(--red);
}

.pie__logo { width: 190px; margin: 0 auto; }

.pie__links {
  margin: 22px 0 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 15px;
  letter-spacing: .06em;
}

.pie__links a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.pie__links a:hover { border-bottom-color: var(--yellow); color: var(--yellow); }
.pie__links span[aria-hidden] { color: var(--red); }

.pie__nota { margin: 14px 0 0; font-size: 13px; color: rgba(255, 255, 255, .6); }

/* ---------- Barra flotante ---------- */

.barra {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 30;
  width: min(640px, calc(100% - 24px));
  height: 60px;
  padding: 0 8px 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(30, 30, 28, .35);
  transform: translateX(-50%);
  animation: sube .28s ease-out;
}

@keyframes sube { from { transform: translate(-50%, 120%); } }

.barra__info { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.barra__ico { color: var(--yellow); flex: none; }

.barra__total {
  margin-left: auto;
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: .02em;
  color: var(--yellow);
}

.barra__cta {
  height: 44px;
  padding: 0 18px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--red);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.barra:hover .barra__cta { background: #c40510; }

/* ---------- Hoja del pedido (dialog) ---------- */

.hoja {
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;

  /* escritorio: panel a la derecha */
  margin: 0 0 0 auto;
  width: min(460px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
}

.hoja[open] { display: flex; flex-direction: column; animation: entra-lado .25s ease-out; }
.hoja::backdrop { background: rgba(30, 30, 28, .6); animation: aparece .25s ease-out; }

@keyframes entra-lado { from { transform: translateX(100%); } }
@keyframes entra-abajo { from { transform: translateY(100%); } }
@keyframes aparece { from { opacity: 0; } }

.hoja__cab {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  background: var(--ink);
  color: #fff;
  border-bottom: 4px solid var(--red);
}

.hoja__cab h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hoja__cerrar {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: #fff;
}

.hoja__cerrar:hover { background: rgba(255, 255, 255, .14); }

.hoja__cuerpo { flex: 1; overflow-y: auto; padding: 8px 20px 24px; overscroll-behavior: contain; }

.hoja__pie {
  flex: none;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--paper-2);
  border-top: 3px double var(--ink);
}

.hoja__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.hoja__total span { font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.hoja__total strong { font-family: var(--display); font-weight: 600; font-size: 32px; line-height: 1; }

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

.linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dotted var(--line);
}

.linea__nombre {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.linea__tam { display: block; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }

.linea__precio { font-family: var(--display); font-weight: 600; font-size: 19px; text-align: right; }

.paso {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.paso button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--field);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}

.paso button:hover { background: var(--yellow); }
.paso output { min-width: 32px; text-align: center; font-weight: 700; }
.paso__unit { margin-left: auto; font-size: 12px; color: var(--muted); }

.vacio { text-align: center; padding: 48px 0; }
.vacio p { font-family: var(--serif); font-style: italic; font-size: 22px; margin: 0 0 16px; }

/* Formulario */
.campo { margin: 20px 0 0; padding: 0; border: 0; min-width: 0; }

.campo > label, .campo > legend {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.opc { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }

.campo input[type="text"], .campo textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px; /* evita el zoom automático en iPhone */
  background: var(--field);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
}

.campo textarea { resize: vertical; min-height: 84px; }
.campo input::placeholder, .campo textarea::placeholder { color: #8b8579; }
.campo [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(225, 6, 18, .18); }

.campo__err { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--red); }
.campo__ayuda { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

/* Selector de opciones (botones tipo pastilla) */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { flex: 1 1 0; min-width: max-content; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }

.seg span {
  display: block;
  padding: 11px 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background: var(--field);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.seg span:hover { background: var(--yellow); }
.seg input:checked + span { background: var(--ink); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }

/* Botones */
.btn {
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
}

.btn--wa { background: var(--red); border-color: var(--red); color: #fff; }
.btn--wa:hover { background: #c40510; border-color: #c40510; }
.btn--wa:disabled { background: #b9b4a8; border-color: #b9b4a8; cursor: not-allowed; }

.btn--linea { background: transparent; color: var(--ink); }
.btn--linea:hover { background: var(--yellow); }

.enviado { padding: 24px 0; text-align: center; }
.enviado p { margin: 0 0 14px; font-family: var(--serif); font-size: 21px; line-height: 1.3; }
a.btn { text-decoration: none; }
.enviado .btn { margin-bottom: 12px; }

/* ---------- Celulares ---------- */

@media (max-width: 700px) {
  :root { --gutter: 16px; }

  .hero { padding: 32px var(--gutter) 30px; }
  .hero__lead { font-size: 20px; }

  .tabs a { font-size: 16px; padding: 13px 6px 10px; }
  .seccion { padding-top: 44px; scroll-margin-top: 48px; }

  .grupo__titulo { font-size: 28px; }

  .item { grid-template-columns: 1fr; gap: 12px; padding: 18px 0 20px; }
  .item__nombre { font-size: 21px; }

  .precios { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); align-items: start; gap: 8px; }
  .precios.uno { grid-template-columns: minmax(150px, 62%); }
  .chip { min-width: 0; }

  /* hoja del pedido: sube desde abajo */
  .hoja {
    margin: auto 0 0;
    width: 100%;
    height: auto;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
  }

  .hoja[open] { animation-name: entra-abajo; }
  .hoja__cab { border-radius: 16px 16px 0 0; }
  .barra__info span:last-child { font-size: 13px; }
}


/* Barra del pedido en pantallas angostas: todo en una sola línea */
.barra__info, .barra__cta, .barra__total { white-space: nowrap; }
.seccion__hint { text-wrap: balance; }

@media (max-width: 700px) {
  .barra { padding: 0 8px 0 14px; gap: 10px; }
  .barra__info { gap: 8px; font-size: 12.5px; }
  .barra__total { font-size: 23px; }
  .barra__cta { padding: 0 12px; font-size: 12px; }
}

@media (max-width: 700px) {
  .hoja { max-width: 100%; }
  .btn { padding: 0 12px; font-size: 14.5px; letter-spacing: 0; }
}

/* Mascota Pizzín en la cabecera de una sección */
.seccion__img {
  width: min(230px, 52vw);
  height: auto;
  margin: 0 auto 6px;
  filter: drop-shadow(0 10px 18px rgba(30, 30, 28, .18));
  animation: saluda 3.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}

@keyframes saluda {
  0%, 100% { transform: rotate(-2.5deg) translateY(0); }
  50%      { transform: rotate(2.5deg) translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .seccion__img { animation: none; }
}

/* ---------- Cartel de abierto / cerrado ---------- */

.estado {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 20px auto 0;
  padding: 8px 16px 7px;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.estado::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.estado--abierto { background: rgba(255, 255, 255, .1); color: #7BE08A; }
.estado--cerrado { background: var(--red); color: #fff; }
.estado--abierto::before { box-shadow: 0 0 0 0 currentColor; animation: latido 2.4s ease-out infinite; }

@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(123, 224, 138, .7); }
  70%  { box-shadow: 0 0 0 7px rgba(123, 224, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(123, 224, 138, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .estado--abierto::before { animation: none; }
}

/* Aviso dentro del pedido cuando el local está cerrado */
.aviso {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: rgba(225, 6, 18, .09);
  border-left: 4px solid var(--red);
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

/* Horarios en el pie */
.pie__horarios { margin: 26px 0 0; }

.pie__horarios h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--yellow);
}

.pie__horarios ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
}

/* ---------- Flechas para correr las categorías ---------- */

.tabs__caja {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}

.tabs__flecha {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 40px;
  display: grid;
  place-items: center;
  border: 0;
  color: var(--ink);
  background: var(--paper);
}

.tabs__flecha--izq { left: 0; box-shadow: 14px 0 14px -6px var(--paper); }
.tabs__flecha--der { right: 0; box-shadow: -14px 0 14px -6px var(--paper); }
.tabs__flecha:hover { color: var(--red); }
.tabs__flecha:active { transform: scale(.9); }

/* Con flechas visibles ya no hace falta desvanecer los bordes */
.tabs__list {
  -webkit-mask-image: none;
  mask-image: none;
  scroll-padding: 0 44px;
}

/* ---------- Buscador ---------- */

.buscador {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--gutter) 12px;
}

.buscador__ico {
  position: absolute;
  left: calc(var(--gutter) + 13px);
  color: var(--muted);
  pointer-events: none;
}

.buscador input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 40px;
  font-size: 16px; /* evita el zoom automático en iPhone */
  background: var(--field);
  border: 1.5px solid var(--line);
  border-radius: 100px;
  appearance: none;
}

.buscador input::-webkit-search-cancel-button { display: none; }
.buscador input:focus { border-color: var(--ink); outline: none; }
.buscador input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.buscador input::placeholder { color: #8b8579; }

.buscador__x {
  position: absolute;
  right: calc(var(--gutter) + 6px);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 50%;
}

.buscador__x:hover { background: var(--red); }

.sinresultados {
  margin: 0;
  padding: 56px 0 24px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: var(--muted);
  text-wrap: balance;
}

/* Mientras se busca, la carta se muestra más compacta */
body.buscando .seccion { padding-top: 34px; }
body.buscando .seccion__cab h2 { font-size: clamp(30px, 6vw, 40px); }
body.buscando .orn,
body.buscando .seccion__hint,
body.buscando .seccion__nota,
body.buscando .seccion__img { display: none; }

/* ---------- Local cerrado: no se puede pedir ---------- */

body.cerrado .chip { opacity: .5; }
body.cerrado .chip__add,
body.cerrado .chip__step button,
body.cerrado .paso button { cursor: not-allowed; }
body.cerrado .chip:hover .chip__add { background: transparent; }
body.cerrado .chip:active { transform: none; }

/* Cartel de "estamos cerrados" */
.cartel {
  width: min(400px, calc(100% - 32px));
  padding: 26px 24px 22px;
  border: 0;
  border-top: 6px solid var(--red);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 24px 60px rgba(30, 30, 28, .4);
  overflow: hidden;
}

.cartel::backdrop { background: rgba(30, 30, 28, .6); }
.cartel[open] { animation: aparece .2s ease-out; }

.cartel__titulo {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cartel__txt {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.3;
  text-wrap: balance;
}

.cartel__horario {
  margin: 0 0 20px;
  padding: 10px 12px;
  background: var(--paper-2);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 700px) {
  .tabs__flecha { width: 34px; }
  .buscador { padding-bottom: 10px; }
  .buscador input { height: 42px; }
}

/* Cuando hay flechas, las categorías dejan lugar para no quedar debajo */
.tabs__list:not(.tabs__list--centrado) { padding-left: 42px; padding-right: 42px; }

@media (max-width: 700px) {
  .tabs__list:not(.tabs__list--centrado) { padding-left: 36px; padding-right: 36px; }
}

/* Texto destacado dentro de un producto (juguete de regalo, pan de miga…) */
.item__destacado {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--red);
}

/* El selector de salsa es largo: que pueda ocupar todo el ancho */
.opt:has(select) { flex: 1 1 260px; }