:root {
  --noche: #171f44;        /* fondo del logo */
  --noche-honda: #0f1532;
  --noche-clara: #212b5c;
  --cielo: #42acd3;
  --cielo-claro: #9bd8f0;
  --crema: #f4eede;
  --crema-suave: #b9bdd3;
  --brasa: #f2603e;
  --llama: #ffd54f;
  --linea: rgba(155, 216, 240, 0.18);
  --titulos: 'Marcellus', 'Times New Roman', serif;
  --texto: 'Jost', 'Segoe UI', sans-serif;
  --mono: 'DM Mono', 'Consolas', monospace;
  --ancho: 46rem;
}

*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--noche);
  color: var(--crema);
  font: 400 1.0625rem/1.5 var(--texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, fieldset { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.estado {
  padding: 30vh 1.5rem 0; text-align: center;
  font-family: var(--titulos); font-size: 1.25rem; color: var(--cielo-claro);
}

/* ---------- Portada ---------- */
.portada {
  position: relative;
  padding: 1.25rem 1.25rem 2.25rem;
  text-align: center;
  overflow: hidden;
}
.portada > * { animation: subir 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.portada > :nth-child(3) { animation-delay: 0.12s; }
.portada > :nth-child(4) { animation-delay: 0.2s; }
.portada > :nth-child(5) { animation-delay: 0.3s; }

.portada__logo {
  position: relative;
  width: min(72vw, 19rem);
  margin: -1.25rem auto 0;
}
/* Resplandor de brasas detrás del horno del logo */
.portada__logo::before {
  content: '';
  position: absolute; left: 50%; top: 42%;
  width: 46%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(242, 96, 62, 0.55), rgba(255, 213, 79, 0.12) 55%, transparent 70%);
  filter: blur(14px);
  animation: brasa 3.2s ease-in-out infinite alternate;
}
.portada__logo img {
  position: relative; display: block; width: 100%; height: auto;
  mix-blend-mode: lighten; /* funde el fondo del logo con el resplandor */
}

.portada__direccion {
  margin-top: -0.5rem;
  color: var(--crema-suave);
  letter-spacing: 0.04em;
}

.contacto {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  margin-top: 1.25rem;
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.9rem; padding: 0.55rem 1.15rem;
  border: 1.5px solid var(--cielo); border-radius: 999px;
  background: transparent; color: var(--crema);
  font: 500 1rem/1 var(--texto); letter-spacing: 0.03em;
  text-decoration: none; cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.boton svg { width: 1.15rem; height: 1.15rem; fill: var(--cielo); transition: fill 0.2s; }
.boton:hover, .boton:focus-visible { background: var(--cielo); color: var(--noche-honda); }
.boton:hover svg, .boton:focus-visible svg { fill: var(--noche-honda); }
.boton:active { transform: scale(0.97); }
.boton__numero { white-space: nowrap; font-variant-numeric: tabular-nums; }
.boton--fuego {
  border: 0; color: var(--noche-honda); font-weight: 600;
  background: linear-gradient(100deg, var(--llama), #ff9a4a 60%, var(--brasa));
}
.boton--fuego:hover, .boton--fuego:focus-visible { background: var(--llama); }

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

.horario {
  max-width: 24rem; margin: 2rem auto 0; padding: 1.1rem 0.75rem 1.2rem;
  border: 1px solid var(--linea); border-radius: 1.1rem 1.1rem 0.4rem 0.4rem;
  background: linear-gradient(var(--noche-clara), transparent);
}
.horario h2 {
  font: 400 0.8rem/1 var(--texto); letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--cielo); margin-bottom: 0.7rem;
}
.horario p { white-space: pre-line; overflow-wrap: anywhere; font-size: 0.94rem; }

/* ---------- Índice ---------- */
.indice {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 0.4rem; overflow-x: auto;
  padding: 0.7rem max(1rem, calc((100vw - var(--ancho)) / 2));
  background: rgba(15, 21, 50, 0.92); backdrop-filter: blur(8px);
  border-block: 1px solid var(--linea);
  scrollbar-width: none;
}
.indice::-webkit-scrollbar { display: none; }
.indice a {
  flex: none; padding: 0.4rem 0.95rem; border-radius: 999px;
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--cielo-claro);
  transition: background 0.2s, color 0.2s;
}
.indice a:hover, .indice a:focus-visible { background: var(--noche-clara); color: var(--crema); }
.indice .indice__arma { color: var(--llama); box-shadow: inset 0 0 0 1px rgba(255, 213, 79, 0.45); }

/* ---------- Menú ---------- */
main { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }

.categoria { padding-top: 2.75rem; }

.titulo {
  display: flex; align-items: center; gap: 1rem;
  font: 400 1.7rem/1.1 var(--titulos); letter-spacing: 0.14em; text-transform: uppercase;
}
.titulo::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--cielo), transparent); }

.sello {
  display: inline-grid; place-items: center;
  width: 1.45em; height: 1.45em; border-radius: 50%;
  border: 1px solid var(--llama); color: var(--llama);
  font: 500 0.72em/1 var(--texto); letter-spacing: 0; vertical-align: 0.12em;
}
.nota-mitad {
  margin-top: 0.9rem; padding-left: 0.1rem;
  font-size: 0.92rem; color: var(--crema-suave);
}
.nota-mitad .sello { font-size: 0.95rem; margin-right: 0.3rem; }

.items { margin-top: 0.6rem; }
.item { padding: 1.05rem 0; border-bottom: 1px solid var(--linea); }
.item:last-child { border-bottom: 0; }
.item__cabecera { display: flex; align-items: baseline; gap: 0.6rem; }
.item h3 { font: 400 1.22rem/1.25 var(--titulos); letter-spacing: 0.02em; }
.item__puntos { flex: 1; min-width: 1rem; border-bottom: 2px dotted rgba(155, 216, 240, 0.3); transform: translateY(-0.25em); }
.item__precio { font-weight: 500; color: var(--llama); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item__descripcion { margin-top: 0.2rem; color: var(--crema-suave); font-size: 0.98rem; max-width: 34rem; }
.item__tamanos { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; margin-top: 0.5rem; }
.item__tamanos li { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cielo-claro); }
.item__tamanos b { margin-left: 0.3rem; font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: var(--llama); font-variant-numeric: tabular-nums; }

.item--agotado h3, .item--agotado .item__descripcion { opacity: 0.45; }
.item__agotado {
  padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--crema-suave);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--crema-suave);
}

/* ---------- Arma tu pizza ---------- */
.arma {
  margin: 4rem -1.25rem 0;
  padding: 0 1.25rem 1.5rem;
  background: var(--noche-honda);
  border-top: 1px solid var(--linea);
}
.arma__horno {
  display: block; width: 11rem; margin: -3rem auto 0;
  filter: drop-shadow(0 0 0.6rem var(--noche-honda));
}
/* Horno del logo (LOGO_MAFARIELLO.svg), sin el texto. El "oscuro" toma el fondo de la sección. */
.arma__horno .h-8, .arma__horno .h-11 { fill: var(--cielo); }
.arma__horno .h-8 { fill-rule: evenodd; }
.arma__horno .h-9 { fill: var(--noche-honda); }
.arma__horno .h-2 { fill: none; stroke: var(--noche-honda); stroke-width: 31.37px; }
.arma__horno .h-5 { fill: none; stroke: var(--cielo); stroke-width: 4.48px; }
.arma__horno .h-6 { fill: #f77557; stroke: var(--noche-honda); stroke-width: 9.22px; }
.arma__horno .h-4 { fill: var(--llama); stroke: var(--noche-honda); stroke-width: 11.24px; }
.arma__horno .h-12 { fill: #cf2634; }
.arma__horno .h-13 { fill: #fff; }
.arma__horno .h-14 { fill: #019444; }
.llama { transform-box: fill-box; transform-origin: 50% 100%; animation: llama 1.6s ease-in-out infinite alternate; }
.llama--dentro { animation-duration: 1.1s; }

.titulo--arma { justify-content: center; margin-top: 1.1rem; font-size: 2rem; text-align: center; }
.titulo--arma::after { content: none; }
.arma__bajada { max-width: 26rem; margin: 0.6rem auto 0; text-align: center; color: var(--crema-suave); }

.paso { margin-top: 2.25rem; }
.paso legend {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  font: 400 1.3rem/1.2 var(--titulos); letter-spacing: 0.08em;
}
.paso__n {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--cielo); color: var(--noche-honda);
  font: 600 0.95rem/1 var(--texto); letter-spacing: 0;
}

.opciones { display: grid; gap: 0.55rem; margin-top: 0.9rem; }
.opciones--tamanos { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }

.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion__cuerpo {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 3.1rem; padding: 0.6rem 0.95rem;
  border: 1.5px solid var(--linea); border-radius: 0.8rem;
  background: var(--noche);
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
/* Marca: círculo (radio) o cuadrado (casilla) */
.opcion__cuerpo::before {
  content: ''; flex: none; width: 1.15rem; height: 1.15rem;
  border: 1.5px solid var(--cielo); border-radius: 50%;
  transition: background 0.15s, box-shadow 0.15s;
}
.opcion input[type='checkbox'] + .opcion__cuerpo::before { border-radius: 0.3rem; }
.opcion__nombre { flex: 1; }
.opcion__precio { color: var(--cielo-claro); font-size: 0.95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.opcion__detalle { color: var(--crema-suave); font-size: 0.9rem; }

.opcion input:checked + .opcion__cuerpo { border-color: var(--llama); background: var(--noche-clara); }
.opcion input:checked + .opcion__cuerpo::before { background: var(--llama); border-color: var(--llama); box-shadow: inset 0 0 0 3px var(--noche-clara); }
.opcion input:checked + .opcion__cuerpo .opcion__precio { color: var(--llama); }
.opcion input:focus-visible + .opcion__cuerpo { outline: 2px solid var(--llama); outline-offset: 2px; }
.opcion input:disabled { cursor: not-allowed; }
.opcion input:disabled + .opcion__cuerpo { opacity: 0.38; }

.opcion--tamano .opcion__cuerpo { flex-wrap: wrap; gap: 0.1rem 0.6rem; padding: 0.8rem 0.95rem; }
.opcion--tamano .opcion__nombre { flex: 1 0 calc(100% - 2rem); font: 400 1.15rem/1.2 var(--titulos); letter-spacing: 0.04em; }
.opcion--tamano .opcion__detalle { margin-left: 1.9rem; }
.opcion--tamano .opcion__precio { margin-left: auto; font-size: 1rem; }

.interruptor {
  position: relative; display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; cursor: pointer;
}
.interruptor input { position: absolute; opacity: 0; }
.interruptor__riel {
  flex: none; position: relative; width: 3rem; height: 1.7rem; border-radius: 999px;
  background: var(--noche-clara); border: 1.5px solid var(--cielo);
  transition: background 0.2s, border-color 0.2s;
}
.interruptor__riel::after {
  content: ''; position: absolute; top: 50%; left: 0.2rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--cielo);
  transform: translateY(-50%); transition: left 0.2s, background 0.2s;
}
.interruptor input:checked + .interruptor__riel { background: var(--llama); border-color: var(--llama); }
.interruptor input:checked + .interruptor__riel::after { left: 1.45rem; background: var(--noche-honda); }
.interruptor input:focus-visible + .interruptor__riel { outline: 2px solid var(--llama); outline-offset: 3px; }
.interruptor small { display: block; color: var(--crema-suave); font-size: 0.85rem; }

.mitades { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
.mitad__titulo {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cielo);
}
.mitad__cuenta { letter-spacing: 0.06em; color: var(--crema-suave); font-variant-numeric: tabular-nums; }
.mitad__cuenta--llena { color: var(--llama); }
.mitad .opciones { margin-top: 0.6rem; }
.aviso-max, .vacio { margin-top: 0.7rem; font-size: 0.92rem; color: var(--llama); }
.vacio { color: var(--crema-suave); }

.resumen { margin-top: 2.5rem; }
.resumen h3 { font: 400 0.8rem/1 var(--texto); letter-spacing: 0.34em; text-transform: uppercase; color: var(--cielo); }
.boleta {
  margin: 0.8rem 0 0; padding: 1.1rem 1rem 1.3rem;
  overflow-x: auto;
  background: var(--crema); color: #1d2444;
  font: 400 clamp(0.68rem, 2.9vw, 0.9rem)/1.75 var(--mono);
  border-radius: 0.4rem 0.4rem 0 0;
  /* borde inferior dentado, como una boleta */
  --diente: 0.5rem;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--diente) 51% repeat-x,
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--diente) / 2) no-repeat;
}

.barra-total {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 -1.25rem; padding: 0.8rem 1.25rem calc(0.8rem + env(safe-area-inset-bottom));
  background: rgba(15, 21, 50, 0.94); backdrop-filter: blur(8px);
  border-top: 1px solid var(--linea);
}
.barra-total p span { display: block; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cielo); }
.barra-total p b { font: 500 1.5rem/1.15 var(--texto); color: var(--llama); font-variant-numeric: tabular-nums; }
.barra-total .boton { min-width: 10.5rem; }
.arma__nota { margin-top: 1rem; text-align: center; font-size: 0.88rem; color: var(--crema-suave); }

.pie {
  padding: 2.5rem 1.25rem 3rem; text-align: center;
  background: var(--noche-honda); color: var(--crema-suave); font-size: 0.9rem;
}
.pie p:first-child { font-family: var(--titulos); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cielo-claro); }

/* ---------- Escritorio ---------- */
@media (min-width: 46rem) {
  .portada { padding-top: 2.5rem; }
  .titulo { font-size: 2rem; }
  .categoria { padding-top: 3.5rem; }
  .arma { margin-inline: 0; padding-inline: 2.5rem; border: 1px solid var(--linea); border-radius: 1.5rem 1.5rem 0 0; }
  .barra-total { margin-inline: -2.5rem; padding-inline: 2.5rem; }
  .opciones--lista { grid-template-columns: 1fr 1fr; }
  .mitades--dos { grid-template-columns: 1fr 1fr; }
  .mitades--dos .opciones--lista { grid-template-columns: 1fr; }
}

@keyframes subir { from { opacity: 0; transform: translateY(14px); } }
@keyframes brasa { from { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes llama { from { transform: scale(1, 0.94) skewX(-2deg); } to { transform: scale(0.97, 1.05) skewX(2deg); } }

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