/* Yummy · menú digital
   Paleta extraída del PDF original del cliente, no estimada. */

:root {
  --fucsia:      #e62382;
  --fucsia-hond: #c11d7a;
  --ciruela:     #3f2f38;
  --gris:        #524a4e;
  --crema:       #fffcef;
  --crema-2:     #fcf8da;
  --mantequilla: #f7f2af;
  --menta:       #a3d3c7;
  --menta-hond:  #85bcab;
  --rosa:        #f2aac5;
  --papel:       #ffffff;
  --borde:       #efe6dd;

  --radio:   1.25rem;
  --radio-s: .7rem;
  --sombra:    0 1px 2px rgb(63 47 56 / .05), 0 6px 20px -8px rgb(63 47 56 / .14);
  --sombra-alta: 0 -6px 28px -8px rgb(63 47 56 / .22);

  --slab:   'Aleo', Georgia, serif;
  --sans:   'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Sacramento', 'Brush Script MT', cursive;

  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --crema:   #221a1f;
    --crema-2: #2b2127;
    --papel:   #2e2329;
    --ciruela: #f7efe7;
    --gris:    #c3b3ba;
    --borde:   #453640;
    --mantequilla: #3a3324;
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 6px 20px -8px rgb(0 0 0 / .5);
    --sombra-alta: 0 -6px 28px -8px rgb(0 0 0 / .55);
    color-scheme: dark;
  }
}

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

/* Varios elementos acá declaran display: flex/grid, que por especificidad le gana
   al atributo hidden. Sin esto, cosas que deben estar ocultas se ven. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--crema);
  color: var(--ciruela);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(5.5rem + var(--seguro-abajo));
}
body.sin-scroll { overflow: hidden; }

h1, h2, h3 { font-family: var(--slab); line-height: 1.2; margin: 0; letter-spacing: -.01em; }

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

:where(button, input, textarea, select, a):focus-visible {
  outline: 3px solid var(--fucsia);
  outline-offset: 2px;
  border-radius: .35rem;
}

.saltar {
  position: absolute; left: -9999px; top: .5rem; z-index: 100;
  background: var(--fucsia); color: #fff; padding: .7rem 1.2rem;
  border-radius: 999px; font-weight: 700; text-decoration: none;
}
.saltar:focus { left: .5rem; }

.cursiva {
  font-family: var(--script);
  font-size: clamp(1.9rem, 6.5vw, 2.6rem);
  color: var(--fucsia);
  line-height: .9;
  margin: 0 0 .1em;
  font-weight: 400;
}

.enlace {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--fucsia); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Cabecera ---------- */
.cabecera {
  background: var(--fucsia);
  color: #fff;
  padding: .7rem 1rem;
  padding-top: max(.7rem, env(safe-area-inset-top));
}
.cabecera__fila {
  max-width: 68rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marca { margin: 0; display: flex; flex-direction: column; }
.marca__nombre {
  font-family: var(--script);
  font-size: 2.35rem; line-height: .85; letter-spacing: .01em;
}
.marca__bajada {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .18em;
  opacity: .9; font-weight: 600;
}
.chip-modo {
  flex-shrink: 0;
  background: rgb(255 255 255 / .16); color: #fff;
  border: 1.5px solid rgb(255 255 255 / .45);
  border-radius: 999px; padding: .45rem .95rem;
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-modo:hover { background: rgb(255 255 255 / .28); }

/* ---------- Portada ---------- */
.portada {
  max-width: 68rem; margin-inline: auto;
  padding: 1.6rem 1rem .4rem;
  display: grid; gap: 1.1rem;
}
.portada h1 { font-size: clamp(1.6rem, 6vw, 2.5rem); margin: 0 0 .5rem; }
.portada__sub { margin: 0; color: var(--gris); max-width: 42ch; }
.portada__foto img {
  width: 100%; height: clamp(9rem, 38vw, 15rem); object-fit: cover;
  border-radius: var(--radio); box-shadow: var(--sombra);
}
@media (min-width: 46rem) {
  .portada { grid-template-columns: 1.15fr 1fr; align-items: center; padding-block: 2.4rem 1rem; }
  .portada__foto img { height: 16rem; }
}

/* ---------- Antojos ---------- */
.antojos { max-width: 68rem; margin-inline: auto; padding: 1.1rem 0 .3rem; }
.antojos__t {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--gris);
  padding-inline: 1rem; margin-bottom: .55rem;
}
.antojos__chips {
  display: flex; gap: .5rem; overflow-x: auto; padding: .15rem 1rem .6rem;
  scrollbar-width: none;
}
.antojos__chips::-webkit-scrollbar { display: none; }
.antojo {
  flex-shrink: 0; cursor: pointer;
  background: var(--papel); color: var(--ciruela);
  border: 1.5px solid var(--borde); border-radius: 999px;
  padding: .45rem .9rem; font: inherit; font-size: .88rem; font-weight: 600;
  transition: transform .12s ease, background .12s ease;
}
.antojo:active { transform: scale(.96); }
.antojo[aria-pressed="true"] {
  background: var(--ciruela); color: var(--crema); border-color: var(--ciruela);
}

/* ---------- Barra pegajosa ---------- */
.barra-pegajosa {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--crema) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
  padding-top: .6rem;
}
.buscador {
  position: relative; max-width: 68rem; margin: 0 auto .55rem; padding-inline: 1rem;
  display: flex; align-items: center;
}
.buscador__lupa {
  position: absolute; left: 1.85rem; width: 1.15rem; height: 1.15rem;
  fill: none; stroke: var(--gris); stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
#buscador {
  width: 100%; font: inherit; color: var(--ciruela);
  background: var(--papel); border: 1.5px solid var(--borde);
  border-radius: 999px; padding: .62rem 2.6rem;
  -webkit-appearance: none;
}
#buscador::-webkit-search-cancel-button { display: none; }
#buscador::placeholder { color: var(--gris); opacity: .8; }
.buscador__x {
  position: absolute; right: 1.6rem; width: 1.7rem; height: 1.7rem;
  display: grid; place-content: center; cursor: pointer;
  background: var(--borde); color: var(--ciruela); border: 0; border-radius: 50%;
  font-size: 1.15rem; line-height: 1;
}
.nav-cat {
  display: flex; gap: .4rem; overflow-x: auto;
  padding: 0 1rem .6rem; scrollbar-width: none;
  max-width: 68rem; margin-inline: auto;
}
.nav-cat::-webkit-scrollbar { display: none; }
.nav-cat a {
  flex-shrink: 0; text-decoration: none; white-space: nowrap;
  color: var(--gris); font-size: .86rem; font-weight: 600;
  padding: .3rem .75rem; border-radius: 999px;
  border: 1.5px solid transparent;
}
.nav-cat a.activo { color: var(--fucsia); border-color: var(--fucsia); background: color-mix(in srgb, var(--fucsia) 8%, transparent); }

/* ---------- Combos ---------- */
.combos {
  max-width: 68rem; margin: 1.6rem auto 0; padding: 1.4rem 1rem 1.6rem;
  background: linear-gradient(160deg, var(--mantequilla), var(--crema-2));
  border-radius: var(--radio);
  width: calc(100% - 2rem);
}
.combos h2 { font-size: clamp(1.35rem, 5vw, 1.8rem); }
.combos__sub { margin: .3rem 0 1rem; color: var(--gris); font-size: .94rem; }
.combos__lista { display: grid; gap: .7rem; }
@media (min-width: 40rem) { .combos__lista { grid-template-columns: 1fr 1fr; } }
.combo-card {
  display: flex; align-items: center; gap: .8rem; text-align: left; cursor: pointer;
  background: var(--papel); border: 1.5px solid transparent; border-radius: var(--radio-s);
  padding: .85rem 1rem; font: inherit; color: inherit;
  transition: border-color .12s ease, transform .12s ease;
}
.combo-card:hover { border-color: var(--fucsia); }
.combo-card:active { transform: scale(.99); }
.combo-card__t { font-family: var(--slab); font-weight: 700; display: block; }
.combo-card__d { font-size: .86rem; color: var(--gris); display: block; }
.combo-card__f { margin-left: auto; color: var(--fucsia); font-size: 1.5rem; line-height: 1; }

/* ---------- Catálogo ---------- */
.categoria { max-width: 68rem; margin: 2.4rem auto 0; padding-inline: 1rem; scroll-margin-top: 8.5rem; }
.categoria__cab { margin-bottom: 1rem; }
.categoria__cab h2 {
  font-size: .78rem; font-family: var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--ciruela);
}
/* :not(.cursiva) — si no, este selector le gana por especificidad y la achica. */
.categoria__cab p:not(.cursiva) { margin: .25rem 0 0; color: var(--gris); font-size: .92rem; }
.categoria__cab .cursiva { font-size: clamp(1.5rem, 5vw, 2rem); }

.platos { display: grid; gap: .7rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .platos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .platos { grid-template-columns: repeat(3, 1fr); } }

.plato {
  display: flex; gap: .85rem; width: 100%; text-align: left; cursor: pointer;
  background: var(--papel); border: 1.5px solid var(--borde); border-radius: var(--radio-s);
  padding: .8rem; font: inherit; color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.plato:hover { border-color: var(--fucsia); box-shadow: var(--sombra); }
.plato:active { transform: scale(.99); }
.plato--foto { align-items: flex-start; }
.plato__txt { flex: 1; min-width: 0; }
.plato__n { font-family: var(--slab); font-weight: 700; font-size: 1rem; display: block; }
.plato__d { font-size: .85rem; color: var(--gris); margin: .15rem 0 0; line-height: 1.4; }
.plato__pie { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; flex-wrap: wrap; }
.plato__p { font-weight: 700; color: var(--fucsia); font-variant-numeric: tabular-nums; }
.plato__desde { font-size: .74rem; color: var(--gris); font-weight: 600; }
.plato__img {
  width: 5.2rem; height: 5.2rem; flex-shrink: 0;
  object-fit: cover; border-radius: .55rem; background: var(--crema-2);
}
.plato__mas {
  margin-left: auto; align-self: center; flex-shrink: 0;
  width: 1.9rem; height: 1.9rem; display: grid; place-content: center;
  background: var(--fucsia); color: #fff; border-radius: 50%;
  font-size: 1.2rem; line-height: 1; font-weight: 400;
}
.et {
  font-size: .68rem; font-weight: 700; padding: .1rem .45rem;
  border-radius: 999px; background: var(--crema-2); color: var(--gris);
  border: 1px solid var(--borde);
}
.et--en-carrito { background: var(--menta); color: #1e3b34; border-color: var(--menta-hond); }

.sin-resultados { text-align: center; color: var(--gris); padding: 3rem 1rem; }

/* ---------- Pie ---------- */
.pie {
  margin-top: 3.5rem; padding: 2.2rem 1rem calc(2.2rem + var(--seguro-abajo));
  background: var(--ciruela); color: var(--crema); text-align: center;
}
.marca__nombre--pie { font-size: 2.6rem; margin: 0 0 .3rem; color: var(--rosa); }
.pie p { margin: .25rem 0; }
.pie__fino { font-size: .8rem; opacity: .68; line-height: 1.6; }
.pie__duo { margin-top: 1.2rem; }
.pie a { color: var(--rosa); }

/* ---------- Barra del carrito ---------- */
.barra-carrito {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: .7rem 1rem calc(.7rem + var(--seguro-abajo));
  background: linear-gradient(to top, var(--crema) 68%, transparent);
  pointer-events: none;
}
.barra-carrito__btn {
  pointer-events: auto;
  display: flex; align-items: center; gap: .8rem; width: 100%; max-width: 30rem;
  margin-inline: auto; cursor: pointer;
  background: var(--fucsia); color: #fff; border: 0; border-radius: 999px;
  padding: .85rem 1.1rem; font: inherit; font-weight: 700;
  box-shadow: 0 8px 26px -8px rgb(230 35 130 / .7);
  animation: subir .22s ease;
}
.barra-carrito__btn:hover { background: var(--fucsia-hond); }
@keyframes subir { from { transform: translateY(120%); } to { transform: none; } }
.barra-carrito__bolsa { position: relative; display: grid; place-content: center; }
.barra-carrito__bolsa svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.barra-carrito__n {
  position: absolute; top: -.35rem; right: -.5rem;
  min-width: 1.15rem; height: 1.15rem; padding-inline: .2rem;
  display: grid; place-content: center;
  background: #fff; color: var(--fucsia); border-radius: 999px;
  font-size: .72rem; font-weight: 800;
}
.barra-carrito__txt { flex: 1; text-align: left; }
.barra-carrito__total { font-variant-numeric: tabular-nums; }

/* ---------- Hojas (dialog) ---------- */
.hoja {
  width: min(34rem, 100%);
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0; border: 0;
  background: var(--crema);
  color: var(--ciruela);
  border-radius: var(--radio) var(--radio) 0 0;
  box-shadow: var(--sombra-alta);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.hoja--alta { min-height: min(62dvh, 34rem); }
.hoja::backdrop { background: rgb(63 47 56 / .5); backdrop-filter: blur(3px); }
.hoja[open] { animation: hoja-entra .24s cubic-bezier(.2,.8,.3,1); }
@keyframes hoja-entra { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 40rem) {
  .hoja { margin: auto; border-radius: var(--radio); max-height: 88dvh; }
  .hoja[open] { animation: hoja-entra-d .2s ease; }
  @keyframes hoja-entra-d { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
}

.hoja__cerrar-form { position: absolute; top: .6rem; right: .6rem; z-index: 2; margin: 0; }
.hoja__cerrar {
  width: 2.1rem; height: 2.1rem; display: grid; place-content: center; cursor: pointer;
  background: var(--papel); color: var(--ciruela);
  border: 1.5px solid var(--borde); border-radius: 50%;
  font-size: 1.35rem; line-height: 1;
}
.hoja__cuerpo { overflow-y: auto; padding: 1.3rem 1.15rem 1rem; -webkit-overflow-scrolling: touch; }
.hoja__t { font-size: 1.4rem; margin-bottom: .8rem; }
.hoja__pie {
  display: flex; gap: .6rem; padding: .85rem 1.15rem calc(.85rem + var(--seguro-abajo));
  border-top: 1px solid var(--borde); background: var(--papel);
}

/* max-width: none — si no, la regla global img{max-width:100%} anula el sangrado. */
.hp__img { width: calc(100% + 2.3rem); max-width: none; margin: -1.3rem -1.15rem 1rem; height: 11rem; object-fit: cover; }
.hp__n { font-size: 1.45rem; }
.hp__d { color: var(--gris); margin: .4rem 0 0; }
.hp__base { font-weight: 700; color: var(--fucsia); margin: .5rem 0 0; }

.grupo { margin-top: 1.4rem; border: 0; padding: 0; }
.grupo__leyenda { display: flex; align-items: baseline; gap: .5rem; padding: 0; margin-bottom: .55rem; }
.grupo__n { font-family: var(--slab); font-weight: 700; }
.grupo__req { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--fucsia); }
.grupo__opc { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.opciones { display: grid; gap: .4rem; }
.opcion {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  background: var(--papel); border: 1.5px solid var(--borde);
  border-radius: var(--radio-s); padding: .6rem .8rem;
}
.opcion:has(input:checked) { border-color: var(--fucsia); background: color-mix(in srgb, var(--fucsia) 6%, var(--papel)); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--fucsia); outline-offset: 2px; }
.opcion input { accent-color: var(--fucsia); width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin: 0; }
.opcion__n { flex: 1; }
.opcion__e { font-size: .86rem; font-weight: 700; color: var(--fucsia); font-variant-numeric: tabular-nums; }
.opcion__e--cero { color: var(--gris); font-weight: 600; }

/* Opciones de un producto elegido dentro de un paso del combo. */
.paso-ops:empty { display: none; }
.paso-ops { border-left: 3px solid var(--rosa); padding-left: .8rem; margin-top: .2rem; }
.paso-ops .grupo { margin-top: .8rem; }
.paso-ops .grupo__n { font-size: .92rem; }

.campo { display: block; margin-top: 1rem; }
.campo__et { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.campo__et em { font-style: normal; font-weight: 400; color: var(--gris); }
.campo input, .campo textarea, .campo select {
  width: 100%; font: inherit; color: var(--ciruela);
  background: var(--papel); border: 1.5px solid var(--borde);
  border-radius: var(--radio-s); padding: .6rem .8rem; resize: vertical;
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #d12; }
.campo__error { color: #d12; font-size: .82rem; margin: .25rem 0 0; font-weight: 600; }

.cantidad {
  display: flex; align-items: center; gap: .1rem; flex-shrink: 0;
  background: var(--crema-2); border-radius: 999px; padding: .2rem;
}
.cantidad button {
  width: 2.2rem; height: 2.2rem; cursor: pointer;
  background: var(--papel); color: var(--ciruela); border: 0; border-radius: 50%;
  font-size: 1.15rem; font-weight: 700; line-height: 1;
}
.cantidad button:disabled { opacity: .35; cursor: default; }
.cantidad output { min-width: 2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.btn-principal, .btn-secundario {
  flex: 1; cursor: pointer; font: inherit; font-weight: 700;
  border-radius: 999px; padding: .8rem 1rem; border: 1.5px solid transparent;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
}
.btn-principal { background: var(--fucsia); color: #fff; }
.btn-principal:hover:not(:disabled) { background: var(--fucsia-hond); }
.btn-principal:disabled { opacity: .45; cursor: not-allowed; }
.btn-principal--ancho { flex: 1; }
.btn-secundario { background: var(--papel); color: var(--ciruela); border-color: var(--borde); flex: 0 0 auto; padding-inline: 1.1rem; }
.btn-wa { background: #25d366; color: #05331a; }
.btn-wa:hover:not(:disabled) { background: #1fbb59; }
.ico-wa { width: 1.2rem; height: 1.2rem; fill: currentColor; }

/* ---------- Líneas del carrito ---------- */
.lineas { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.linea {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--papel); border: 1.5px solid var(--borde);
  border-radius: var(--radio-s); padding: .7rem .8rem;
}
.linea__txt { flex: 1; min-width: 0; }
.linea__n { font-weight: 700; font-family: var(--slab); }
.linea__det { font-size: .84rem; color: var(--gris); margin: .1rem 0 0; }
.linea__p { font-weight: 700; color: var(--fucsia); font-variant-numeric: tabular-nums; white-space: nowrap; }
.linea__acc { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.linea .cantidad { transform: scale(.85); transform-origin: right center; }
.linea__quitar { background: none; border: 0; cursor: pointer; color: var(--gris); font-size: .78rem; text-decoration: underline; padding: 0; }

.carrito-vacio { text-align: center; color: var(--gris); padding: 2rem 0; }
.cuenta { margin: 1.1rem 0 0; display: grid; grid-template-columns: 1fr auto; gap: .3rem .5rem; }
.cuenta dt { color: var(--gris); }
.cuenta dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cuenta .total-dt, .cuenta .total-dd {
  font-family: var(--slab); font-weight: 700; font-size: 1.15rem; color: var(--ciruela);
  border-top: 1.5px solid var(--borde); padding-top: .5rem; margin-top: .3rem;
}
.cuenta .total-dd { color: var(--fucsia); }
.guardado { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin-top: 1.2rem; font-size: .9rem; }

/* ---------- Modos ---------- */
.modos { display: grid; gap: .55rem; }
@media (min-width: 30rem) { .modos { grid-template-columns: repeat(3, 1fr); } }
.modo {
  display: flex; flex-direction: column; gap: .1rem; text-align: left; cursor: pointer;
  background: var(--papel); border: 1.5px solid var(--borde); border-radius: var(--radio-s);
  padding: .8rem .9rem; font: inherit; color: inherit;
}
.modo[aria-checked="true"] { border-color: var(--fucsia); background: color-mix(in srgb, var(--fucsia) 7%, var(--papel)); }
.modo__ico { font-size: 1.3rem; line-height: 1.2; }
.modo__n { font-family: var(--slab); font-weight: 700; }
.modo__d { font-size: .8rem; color: var(--gris); }
.campos:empty { display: none; }
.aviso {
  margin-top: 1rem; padding: .75rem .9rem; border-radius: var(--radio-s);
  background: var(--mantequilla); color: var(--ciruela);
  font-size: .88rem; border: 1.5px solid color-mix(in srgb, var(--ciruela) 12%, transparent);
}

/* ---------- Aviso flotante ---------- */
.aviso-flotante {
  position: fixed; left: 50%; bottom: calc(5.5rem + var(--seguro-abajo)); z-index: 60;
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  background: var(--ciruela); color: var(--crema);
  padding: .65rem 1.1rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600; box-shadow: var(--sombra);
  max-width: calc(100vw - 2rem); text-align: center;
  transition: opacity .2s ease, transform .2s ease;
}
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }