/* =========================================================
   PARCHAO DEMO — estilos base
   Estructura inicial: los colores son PROVISIONALES hasta
   ajustarlos con las referencias de la marca.
   ========================================================= */

/* ----- 1. Variables de marca (cambiar aquí, en un solo lugar) ----- */
:root {
  --negro: #0e0e0e;
  --rojo: #d7261e;
  --amarillo: #f7c427;
  --crema: #f6ecd6;

  --fondo: var(--negro);
  --texto: var(--crema);
  --acento: var(--amarillo);
  --fondo-menu: #140f0d;   /* negro cálido del menú; la transición termina en este color */
  --tarjeta: #1d1613;

  /* Tipografías provisionales (se elegirán en la fase de diseño) */
  --fuente-titulos: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --alto-encabezado: 4.75rem; /* js/main.js lo reemplaza por la altura real del encabezado */
  --ancho-max: 1200px;
  --radio: 18px;
  --espacio: clamp(1rem, 4vw, 2rem);
  --seccion: clamp(4rem, 10vw, 8rem);
}

/* ----- 2. Base ----- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding: los enlaces internos (#ubicacion, etc.) se detienen debajo del encabezado fijo */
html { scroll-behavior: smooth; scroll-padding-top: var(--alto-encabezado); }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--fuente-titulos); line-height: 1.05; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 8vw, 5.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
a { color: inherit; }

.contenedor { width: min(100% - 2 * var(--espacio), var(--ancho-max)); margin-inline: auto; }
.etiqueta { text-transform: uppercase; letter-spacing: .15em; font-size: .85rem; color: var(--acento); margin: 0 0 .75rem; }
.dos-columnas { display: grid; gap: var(--espacio); align-items: center; }
@media (min-width: 800px) { .dos-columnas { grid-template-columns: 1fr 1fr; } }

.saltar { position: absolute; left: -999px; top: 0; background: var(--amarillo); color: var(--negro); padding: .5rem 1rem; z-index: 100; }
.saltar:focus { left: 1rem; }

/* Marca visible para todo lo que falta por definir */
.provisional {
  border: 2px dashed color-mix(in srgb, var(--crema) 45%, transparent);
  border-radius: var(--radio);
  padding: 1rem;
  text-align: center;
  color: color-mix(in srgb, var(--crema) 75%, transparent);
}

.boton {
  display: inline-block;
  background: var(--rojo);
  color: var(--crema);
  font-weight: 700;
  text-decoration: none;
  padding: .9rem 1.6rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
}
.boton:focus-visible, .carrito-boton:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

/* ----- 3. Encabezado ----- */
.encabezado { position: fixed; inset: 0 0 auto; z-index: 50; padding-block: 1rem; }
.encabezado__fila { display: flex; align-items: center; gap: 1.5rem; }
.marca { font-family: var(--fuente-titulos); font-size: 1.5rem; text-decoration: none; color: var(--amarillo); }
.navegacion { display: none; gap: 1.5rem; margin-left: auto; }
.navegacion a { text-decoration: none; }
@media (min-width: 800px) { .navegacion { display: flex; } }
.carrito-boton {
  margin-left: auto;
  display: flex; align-items: center; gap: .5rem;
  background: var(--amarillo); color: var(--negro);
  border: 0; border-radius: 999px; padding: .55rem 1rem;
  font: inherit; font-weight: 700; cursor: pointer;
}
@media (min-width: 800px) { .carrito-boton { margin-left: 0; } }
.carrito-boton__contador { background: var(--negro); color: var(--crema); border-radius: 999px; min-width: 1.6em; text-align: center; }

/* ----- 4. Escena de la hamburguesa (se fija mientras se hace scroll) ----- */
.escena--hamburguesa { position: relative; overflow: hidden; }
.escena__fijo {
  position: relative;
  height: 100vh;
  height: 100svh; /* en celulares descuenta la barra del navegador */
  min-height: 520px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Brillo cálido detrás de la hamburguesa */
.escena__brillo {
  position: absolute;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  top: 50%; left: 50%;
  translate: -50% -55%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rojo) 55%, transparent) 0%, color-mix(in srgb, var(--amarillo) 18%, transparent) 35%, transparent 65%);
  z-index: -2;
  pointer-events: none;
}

/* Tamaño de la hamburguesa: depende del ancho y también del alto de la pantalla.
   Se usa como lienzo la foto de referencia: 1024 x 1536 px (proporción 2:3). */
.hamburguesa__escenario {
  position: relative;
  width: min(84vw, 520px, 44svh);
  translate: 0 -7svh;
}
.hamburguesa__inclinacion { transform-style: preserve-3d; }
.hamburguesa {
  position: relative;
  aspect-ratio: 1024 / 1536;
  transform-origin: 50% 90%;
}

/* Cada ingrediente es una foto recortada a su tamaño. Se centra en el lienzo y
   se ubica como en la foto de referencia (separados). Su alto es automático,
   así la imagen conserva siempre su proporción.
   --ancho:  ancho de la foto en % del lienzo (px de la foto / 1024)
   --arriba: posición separada en % del alto del lienzo (px / 1536)
   --armada: cuánto baja para formar la hamburguesa (número, en % del alto del lienzo)
   --armada-escala: tamaño final (el pan superior se reduce un poco)
   La animación lee estos valores. */
.capa {
  position: absolute;
  width: var(--ancho);
  left: calc((100% - var(--ancho)) / 2);
  top: var(--arriba);
  will-change: transform;
  pointer-events: none;
}
.capa img { display: block; width: 100%; height: auto; user-select: none; }
.capa--pan-superior { --ancho: 66.89%; --arriba: 0.72%;  --armada: 46.3; --armada-escala: 0.96;
                      z-index: 1; transform-origin: 50% 97%; } /* escala desde su base */
.capa--lechuga      { --ancho: 70.8%;  --arriba: 23.18%; --armada: 38.2; z-index: 2; } /* delante del borde del pan */
.capa--tomate       { --ancho: 61.52%; --arriba: 37.5%;  --armada: 30.5; }
.capa--queso        { --ancho: 64.16%; --arriba: 52.28%; --armada: 22.6; }
.capa--carne        { --ancho: 63.18%; --arriba: 66.47%; --armada: 9.9; }
.capa--pan-inferior { --ancho: 65.23%; --arriba: 82.62%; --armada: 0; }

/* Sin JavaScript o con "reducir movimiento": la hamburguesa se muestra armada */
.escena:not(.con-animacion) .capa {
  top: calc(var(--arriba) + var(--armada) * 1%);
  scale: var(--armada-escala, 1);
}

.hamburguesa__sombra {
  position: absolute;
  left: 16%; right: 16%;
  bottom: -3%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / .8), transparent 70%);
}

/* Texto de portada */
.escena__texto {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(2.5rem, 7svh, 4.5rem);
  text-align: center;
  padding-inline: var(--espacio);
  z-index: 2;
}
.escena__texto h1 { font-size: clamp(1.2rem, 3.2vw, 2.4rem); max-width: 26ch; margin-inline: auto; }

.escena__pista {
  position: absolute;
  bottom: 1rem; left: 50%;
  translate: -50% 0;
  margin: 0;
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .6;
  animation: pista 1.8s ease-in-out infinite;
}
@keyframes pista { 50% { transform: translateY(6px); } }

/* Transición hacia el menú: ocultos al inicio (círculo de radio 0) */
.transicion { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.transicion__circulo { position: absolute; inset: 0; clip-path: circle(0% at 50% 50%); }
.transicion__circulo--rojo { background: var(--rojo); }
.transicion__circulo--menu { background: var(--fondo-menu); }

/* Encabezado oscuro cuando pasa sobre fondo crema */
.encabezado--claro .marca { color: var(--rojo); }
.encabezado--claro .navegacion { color: var(--negro); }

/* Encabezado con fondo cuando el contenido pasa por debajo (después de la portada) */
.encabezado { transition: background-color .4s ease, box-shadow .4s ease; }
.encabezado--solido {
  background: color-mix(in srgb, var(--fondo-menu) 92%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--crema) 8%, transparent);
}

/* Versión sin movimiento: la hamburguesa ya armada, sin efectos */
.escena--estatica .escena__pista { display: none; }

/* ----- 5. Secciones ----- */
.seccion { padding-block: var(--seccion); }
.seccion--alterna { background: var(--crema); color: var(--negro); }
.seccion--alterna .provisional { color: var(--negro); border-color: var(--negro); }
.seccion__titulo { margin-bottom: 2.5rem; }
/* ----- Menú interactivo ----- */
.menu {
  position: relative;
  isolation: isolate;
  background: var(--fondo-menu);
  /* arriba: la altura del encabezado fijo + aire, para que el título nunca quede tapado */
  padding-block: calc(var(--alto-encabezado) + clamp(2.5rem, 7vw, 5.5rem)) var(--seccion);
  /* el enlace "Menú" llega al borde superior de la sección (su espacio ya incluye el encabezado) */
  scroll-margin-top: calc(-1 * var(--alto-encabezado));
  overflow: hidden;
}
/* Brillos de color de fondo (rojo arriba a la izquierda, amarillo abajo a la derecha) */
.menu__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40rem 30rem at 0% 0%, color-mix(in srgb, var(--rojo) 22%, transparent), transparent 70%),
    radial-gradient(36rem 28rem at 100% 100%, color-mix(in srgb, var(--amarillo) 12%, transparent), transparent 70%);
  /* se desvanece arriba para que no haya un borde recto al salir de la portada */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18rem);
  mask-image: linear-gradient(to bottom, transparent, #000 18rem);
}

.menu__cabecera { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.menu__titulo {
  font-size: clamp(3rem, 11vw, 7.5rem);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.02em;
  /* con interlineado tan apretado, las letras sobresalen de su caja: .15em compensa
     ese sobrante (crece con el tamaño del título) y 1rem es el aire hasta el aviso */
  margin-bottom: calc(.15em + 1rem);
}
.menu__titulo-linea { display: block; }
.menu__titulo-linea--acento { color: var(--amarillo); }
.menu__aviso {
  display: inline-block;
  margin: 0;
  font-size: .9rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--crema) 35%, transparent);
  color: color-mix(in srgb, var(--crema) 75%, transparent);
}

/* Pestañas: se pueden desplazar de lado en pantallas angostas */
.menu__categorias {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  gap: .25rem;
  padding: .35rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 999px;
  background: color-mix(in srgb, var(--crema) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--crema) 10%, transparent);
  overflow-x: auto;
  scrollbar-width: none;
}
.menu__categorias::-webkit-scrollbar { display: none; }
.menu__indicador {
  position: absolute;
  top: .35rem; bottom: .35rem; left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--amarillo);
  z-index: 0;
}
.menu__pestana {
  position: relative;
  z-index: 1;
  flex: none;
  border: 0;
  background: none;
  color: var(--crema);
  font: inherit;
  font-weight: 700;
  font-size: clamp(.85rem, 2.6vw, 1rem);
  padding: .65rem clamp(.9rem, 3vw, 1.4rem);
  border-radius: 999px;
  cursor: pointer;
  transition: color .3s ease;
}
.menu__pestana[aria-selected="true"] { color: var(--negro); }
/* Celulares: pestañas más compactas para que las tres quepan completas */
@media (max-width: 480px) {
  .menu__categorias { padding: .25rem; gap: .1rem; }
  .menu__indicador { top: .25rem; bottom: .25rem; }
  .menu__pestana { font-size: .78rem; padding: .6rem .55rem; }
}
.menu__pestana:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
/* Sin JavaScript el indicador no se mueve: la pestaña activa se pinta directamente */
.menu:not(.menu--con-js) .menu__pestana[aria-selected="true"] { background: var(--amarillo); }

/* Grilla de tarjetas: 1 columna en celular, 2 en tableta, 3 en computadora */
.menu__grilla {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .menu__grilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .menu__grilla { grid-template-columns: repeat(3, 1fr); } }

/* Tarjeta de producto */
.tarjeta-menu {
  --mx: 50%; --my: 0%;   /* posición del brillo que sigue al mouse (js/menu/menu.js) */
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  background: var(--tarjeta);
  border: 1px solid color-mix(in srgb, var(--crema) 9%, transparent);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.tarjeta-menu::after {   /* brillo suave que sigue al mouse */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(22rem circle at var(--mx) var(--my), color-mix(in srgb, var(--amarillo) 12%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .45s ease;
}
@media (hover: hover) {
  .tarjeta-menu:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--amarillo) 45%, transparent);
    box-shadow: 0 24px 50px -20px rgb(0 0 0 / .8), 0 0 0 1px color-mix(in srgb, var(--rojo) 30%, transparent);
  }
  .tarjeta-menu:hover::after { opacity: 1; }
  .tarjeta-menu:hover .tarjeta-menu__foto-icono { transform: scale(1.08) rotate(-4deg); }
  .tarjeta-menu:hover .tarjeta-menu__linea { transform: scaleX(1); }
}

/* Espacio para la fotografía del producto (4:3) */
.tarjeta-menu__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rojo) 35%, transparent), transparent 65%),
    #241a16;
  overflow: hidden;
}
.tarjeta-menu__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-menu__foto--pendiente::before {   /* marco punteado: "aquí va una foto" */
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px dashed color-mix(in srgb, var(--crema) 22%, transparent);
  border-radius: 16px;
}
.tarjeta-menu__foto-icono {
  width: clamp(64px, 22%, 96px);
  color: color-mix(in srgb, var(--crema) 55%, transparent);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.tarjeta-menu__foto-texto {
  position: absolute;
  bottom: 26px;
  left: 0; right: 0;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crema) 55%, transparent);
}
.tarjeta-menu__sello {   /* etiqueta roja "Provisional" */
  position: absolute;
  top: 22px; left: 22px;
  z-index: 1;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--rojo);
  color: var(--crema);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tarjeta-menu__cuerpo { position: relative; padding: 1.25rem 1.4rem 1.5rem; display: grid; gap: .45rem; }
.tarjeta-menu__linea {   /* línea amarilla que se dibuja al pasar el mouse */
  position: absolute;
  top: 0; left: 1.4rem; right: 1.4rem;
  height: 2px;
  background: linear-gradient(90deg, var(--amarillo), var(--rojo));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.tarjeta-menu__categoria {
  margin: 0;
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--amarillo);
}
.tarjeta-menu__nombre { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
.tarjeta-menu__descripcion { margin: 0; font-size: .95rem; color: color-mix(in srgb, var(--crema) 70%, transparent); }
.tarjeta-menu__precio {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  color: var(--crema);
}
/* Fila inferior: precio y botón de compra */
.tarjeta-menu__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .5rem;
}
.tarjeta-menu__boton {
  position: relative;
  z-index: 1;   /* por encima del brillo de la tarjeta */
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.2rem;
  background: var(--rojo);
  color: var(--crema);
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.tarjeta-menu__boton:hover:not(:disabled) { background: var(--amarillo); color: var(--negro); }
.tarjeta-menu__boton:active:not(:disabled) { transform: scale(.96); }
.tarjeta-menu__boton:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.tarjeta-menu__boton--ok, .tarjeta-menu__boton--ok:hover { background: var(--amarillo); color: var(--negro); }
.tarjeta-menu__boton:disabled {   /* tarjetas provisionales: no se pueden comprar */
  background: none;
  color: color-mix(in srgb, var(--crema) 45%, transparent);
  border: 1px dashed color-mix(in srgb, var(--crema) 25%, transparent);
  cursor: not-allowed;
}
/* Sello de las tarjetas con productos de demostración */
.tarjeta-menu__sello--demo { background: var(--amarillo); color: var(--negro); }
.tarjeta-menu--provisional .tarjeta-menu__nombre,
.tarjeta-menu--provisional .tarjeta-menu__precio { color: color-mix(in srgb, var(--crema) 80%, transparent); }
.mascota { min-height: 320px; display: grid; place-items: center; }
.mapa { min-height: 300px; display: grid; place-items: center; }
.opiniones { display: grid; gap: var(--espacio); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.opinion { margin: 0; }

/* ----- 6. Carrito (panel lateral) ----- */
/* Mientras el carrito está abierto, la página de fondo no se desplaza.
   scrollbar-gutter evita que el contenido "salte" al ocultarse la barra. */
html { scrollbar-gutter: stable; }
html.carrito-abierto { overflow: hidden; }

.carrito-velo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(0 0 0 / .6);
}
.carrito-velo[hidden], .carrito[hidden] { display: none; }

.carrito {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 61;
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  background: var(--fondo-menu);
  color: var(--crema);
  border-left: 1px solid color-mix(in srgb, var(--crema) 10%, transparent);
  box-shadow: -30px 0 60px -20px rgb(0 0 0 / .7);
}
.carrito::before {   /* franja superior roja y amarilla */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--rojo), var(--amarillo));
}

.carrito__encabezado {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem var(--espacio) 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--crema) 8%, transparent);
}
.carrito__encabezado .etiqueta { margin-bottom: .2rem; }
.carrito__titulo { margin: 0; font-size: clamp(1.8rem, 6vw, 2.2rem); text-transform: uppercase; }
.carrito__cerrar {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--crema) 18%, transparent);
  background: none;
  color: var(--crema);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.carrito__cerrar svg { width: 20px; }
.carrito__cerrar:hover { background: var(--rojo); border-color: var(--rojo); transform: rotate(90deg); }
.carrito__cerrar:focus-visible, .carrito-item button:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

.carrito__cuerpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem var(--espacio);
}
.carrito__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.carrito__lista:empty { display: none; }

/* Producto dentro del carrito */
.carrito-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: .4rem .9rem;
  align-items: center;
  padding: .75rem;
  border-radius: 18px;
  background: var(--tarjeta);
  border: 1px solid color-mix(in srgb, var(--crema) 8%, transparent);
}
.carrito-item__foto {
  grid-row: span 2;
  width: 64px; height: 64px;
  border-radius: 12px;
  overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rojo) 35%, transparent), transparent 70%), #241a16;
  color: color-mix(in srgb, var(--crema) 55%, transparent);
}
.carrito-item__foto img { width: 100%; height: 100%; object-fit: cover; }
.carrito-item__foto svg { width: 36px; }
.carrito-item__info { min-width: 0; }
.carrito-item__nombre { margin: 0; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.carrito-item__unitario { margin: .15rem 0 0; font-size: .85rem; color: color-mix(in srgb, var(--crema) 65%, transparent); }
.carrito-item__eliminar {
  align-self: start;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--crema) 60%, transparent);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.carrito-item__eliminar svg { width: 18px; }
.carrito-item__eliminar:hover { color: var(--crema); background: var(--rojo); }
.carrito-item__cantidad {   /* − 1 + */
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--crema) 15%, transparent);
}
.carrito-item__cantidad button {
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--crema);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.carrito-item__cantidad button:hover:not(:disabled) { background: var(--amarillo); color: var(--negro); }
.carrito-item__cantidad button:disabled { opacity: .35; cursor: not-allowed; }
.carrito-item__numero { min-width: 2ch; text-align: center; font-weight: 700; }
.carrito-item__linea {   /* subtotal de la línea */
  justify-self: end;
  margin: 0;
  font-family: var(--fuente-titulos);
  color: var(--amarillo);
}

/* Carrito vacío */
.carrito__vacio { text-align: center; padding: clamp(2rem, 10vh, 5rem) 1rem; }
.carrito__vacio[hidden] { display: none; }
.carrito__vacio-icono {
  width: 96px; height: 96px;
  margin: 0 auto 1.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--amarillo);
  background: color-mix(in srgb, var(--rojo) 18%, transparent);
  border: 1px dashed color-mix(in srgb, var(--amarillo) 45%, transparent);
}
.carrito__vacio-icono svg { width: 52px; }
.carrito__vacio h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.carrito__vacio p { margin: 0 0 1.5rem; color: color-mix(in srgb, var(--crema) 70%, transparent); }

/* Totales */
.carrito__pie {
  padding: 1rem var(--espacio) calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--crema) 10%, transparent);
  background: color-mix(in srgb, var(--tarjeta) 70%, var(--fondo-menu));
}
.carrito__pie[hidden] { display: none; }
.carrito__totales { margin: 0 0 .75rem; display: grid; gap: .35rem; }
.carrito__totales div { display: flex; justify-content: space-between; align-items: baseline; }
.carrito__totales dt { color: color-mix(in srgb, var(--crema) 70%, transparent); }
.carrito__totales dd { margin: 0; font-weight: 700; }
.carrito__total dt { color: var(--crema); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.carrito__total dd { font-family: var(--fuente-titulos); font-size: 1.6rem; color: var(--amarillo); }
.carrito__nota { margin: 0 0 .75rem; font-size: .85rem; color: color-mix(in srgb, var(--crema) 60%, transparent); }
.carrito__confirmar { width: 100%; }
.carrito__confirmar:disabled { opacity: .45; cursor: not-allowed; }

/* Botón "Pedido" del encabezado y su contador (los anima js/carrito/carrito.js) */
.carrito-boton__contador { display: inline-block; }

/* Bolita que "vuela" desde la tarjeta hasta el botón "Pedido" al añadir */
.vuelo-carrito {
  position: fixed;
  left: 0; top: 0;
  z-index: 70;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--amarillo);
  color: var(--negro);
  font-weight: 800;
  font-size: .85rem;
  box-shadow: 0 6px 20px rgb(0 0 0 / .45), 0 0 0 4px color-mix(in srgb, var(--rojo) 55%, transparent);
  pointer-events: none;
}

/* Aviso fijo "Página de demostración" (solo con CONFIG.modoDemo en js/main.js) */
.aviso-demo {
  position: fixed;
  left: 1rem; bottom: 1rem;
  z-index: 55;
  max-width: calc(100% - 2rem);
  padding: .5rem .9rem;
  border-radius: 12px;
  background: var(--amarillo);
  color: var(--negro);
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgb(0 0 0 / .4);
}

/* ----- 6b. Animación del pedido en la caja negra (solo modo demostración) -----
   La escena la crea js/animaciones/caja.js solo cuando CONFIG.modoDemo es true. */
html.pedido-abierto { overflow: hidden; }

.boton--secundario {   /* botón "Ver animación del pedido" dentro del carrito */
  width: 100%;
  margin-bottom: .6rem;
  background: none;
  color: var(--amarillo);
  border: 1px solid color-mix(in srgb, var(--amarillo) 55%, transparent);
}
.boton--secundario:hover { background: var(--amarillo); color: var(--negro); }

.pedido-escena {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  overflow: hidden;
  /* fondo oscuro con una luz cálida y suave desde arriba */
  background:
    radial-gradient(34rem 26rem at 50% 42%, rgb(255 196 120 / .2), transparent 65%),   /* foco cálido detrás de la caja */
    radial-gradient(60rem 40rem at 50% 10%, rgb(255 214 140 / .08), transparent 60%),
    radial-gradient(40rem 30rem at 50% 85%, color-mix(in srgb, var(--rojo) 14%, transparent), transparent 70%),
    #070606;
  color: var(--crema);
  padding: calc(var(--alto-encabezado) * .5) var(--espacio) calc(2rem + env(safe-area-inset-bottom));
}
.pedido-escena[hidden] { display: none; }
.pedido-escena__cerrar {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--crema) 20%, transparent);
  background: rgb(0 0 0 / .4);
  color: var(--crema);
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}
.pedido-escena__cerrar svg { width: 22px; }
.pedido-escena__cerrar:hover { background: var(--rojo); transform: rotate(90deg); }
.pedido-escena__cerrar:focus-visible, .pedido-escena .boton:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.pedido-escena__demo {   /* etiqueta "Demostración" arriba a la izquierda */
  position: absolute;
  top: 1.4rem; left: 1rem;
  margin: 0;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--amarillo);
  color: var(--negro);
}

/* Escenario 3D de la caja con compartimentos.
   Todo se mide con --w (ancho de la caja), así se adapta a cualquier pantalla.
   Origen (0,0,0) = centro de la bandeja. Vista de planta (x → derecha, z → frente):

        z = -fondo/2 = -.33w (atrás, bisagra de la tapa)
        ┌───────────────┬────────────┐
        │               │   PAPAS    │
        │  HAMBURGUESA  ├────────────┤  ← divisor b (z = -.03w)
        │               │  BEBIDA ◯  │  ← portavasos circular
        └───────────────┴────────────┘
        x=-.5w        x=.06w       x=.5w
        z = +fondo/2 = +.33w (frente, con PARCHAO)
   Cada compartimento está medido para su producto (ver "Productos dentro de la caja"). */
.caja-escena {
  --w: clamp(230px, 74vw, 400px);
  --d: calc(var(--w) * .66);      /* fondo */
  --h: calc(var(--w) * .2);       /* alto de la bandeja (pared frontal baja) */
  --l: calc(var(--w) * .34);      /* alto de la tapa: deja .54w libres sobre el piso al cerrar */
  --hd: calc(var(--w) * .15);     /* alto de los divisores */
  --w2: calc(var(--w) + 4px);
  --d2: calc(var(--d) + 4px);
  position: relative;
  align-self: center;
  width: 100%;
  height: calc(var(--w) * 1.3);
  perspective: 1200px;
  perspective-origin: 50% 20%;
}
.caja-mundo {
  position: absolute;
  left: 50%; top: 71%;   /* deja espacio arriba para la tapa abierta */
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.caja-mundo--estatica { transform: rotateY(-12deg) rotateX(-34deg); } /* sin animación */

/* Cara genérica: centrada en el origen; cada clase la coloca con transform */
.caja-cara {
  position: absolute;
  left: 0; top: 0;
  background: #121212;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 0 0 1px rgb(255 255 255 / .05);
}

/* ---- Bandeja ---- */
.caja-cara--piso {
  width: var(--w); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2);
  transform: rotateX(-90deg) translateZ(calc(var(--h) / 2));
  background: radial-gradient(ellipse at 40% 45%, #1d1d1d, #0a0a0a 85%);
}
.caja-cara--frente, .caja-cara--atras {
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
}
.caja-cara--frente {
  transform: translateZ(calc(var(--d) / 2));
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #2c2c2c 0%, #1a1a1a 50%, #0f0f0f 100%);
}
.caja-cara--atras {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: linear-gradient(180deg, #1e1e1e, #0c0c0c);
}
.caja-cara--izq, .caja-cara--der {
  width: var(--d); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2);
}
.caja-cara--izq {
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background: linear-gradient(180deg, #353535 0%, #222 55%, #141414 100%);   /* lado iluminado */
}
.caja-cara--der {
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
  background: linear-gradient(180deg, #1a1a1a, #0b0b0b);
}

/* ---- Compartimentos (divisores más bajos que las paredes) ----
   Se tocan solo por los bordes, sin cruzarse (así Safari los dibuja bien) */
.caja-cara--divisor-a, .caja-cara--divisor-b {
  height: var(--hd);
  margin-top: calc(var(--hd) / -2);
  background: linear-gradient(180deg, #262626, #121212);
}
.caja-cara--divisor-a {   /* separa la hamburguesa (.56w de ancho) del resto (.44w) */
  width: var(--d);
  margin-left: calc(var(--d) / -2);
  transform: translate3d(calc(var(--w) * .06), calc(var(--h) / 2 - var(--hd) / 2), 0) rotateY(90deg);
}
.caja-cara--divisor-b {   /* separa las papas (atrás, .30w de fondo) de la bebida (adelante, .36w) */
  width: calc(var(--w) * .44);
  margin-left: calc(var(--w) * -.22);
  transform: translate3d(calc(var(--w) * .28), calc(var(--h) / 2 - var(--hd) / 2), calc(var(--w) * -.03));
}
/* Portavasos: disco circular compacto a ras del piso, del tamaño de la base del vaso
   (hueco oscuro + aro rojo fino + borde). El vaso se apoya DENTRO del hueco.
   Medidas en px (no en %) para que conserve su tamaño. */
.caja-cara--portavasos {
  --aro: calc(var(--w) * .045);   /* radio del hueco = media base del vaso */
  width: calc(var(--w) * .15); height: calc(var(--w) * .15);
  margin: calc(var(--w) * -.075) 0 0 calc(var(--w) * -.075);
  border-radius: 50%;
  transform: translate3d(calc(var(--w) * .28), calc(var(--h) / 2 - 1px), calc(var(--w) * .115)) rotateX(90deg);
  background:
    radial-gradient(circle at 50% 50%, #020202 0 var(--aro), var(--rojo) calc(var(--aro) + 1px) calc(var(--aro) + var(--w) * .007),
                    #202020 calc(var(--aro) + var(--w) * .007 + 1px) calc(var(--aro) + var(--w) * .022),
                    #0c0c0c calc(var(--aro) + var(--w) * .024) 100%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .06);
}

/* ---- Nombre de la marca (mismo estilo que el encabezado) ---- */
.caja-logo {
  font-family: var(--fuente-titulos);
  letter-spacing: .05em;
  color: var(--amarillo);
  text-shadow: 0 1px 0 rgb(0 0 0 / .6);
  position: relative;
  line-height: 1;
}
.caja-logo::after {   /* línea roja corta bajo el nombre */
  content: "";
  position: absolute;
  left: 50%; bottom: -.4em;
  width: 30%; height: .12em;
  translate: -50% 0;
  border-radius: 2px;
  background: var(--rojo);
}
.caja-cara--frente .caja-logo { font-size: calc(var(--w) * .085); }
.caja-cara--tapa .caja-logo { font-size: calc(var(--w) * .12); }

/* ---- Tapa: gira sobre el borde superior trasero de la bandeja ---- */
.caja-tapa {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform-origin: 0 calc(var(--h) / -2) calc(var(--d) / -2);
}
.caja-cara--tapa, .caja-cara--tapa-dentro {
  width: var(--w2); height: var(--d2);
  margin: calc(var(--d2) / -2) 0 0 calc(var(--w2) / -2);
  backface-visibility: hidden;
}
.caja-cara--tapa {
  transform: translateY(calc(var(--h) / -2 - var(--l))) rotateX(90deg);
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 30% 25%, rgb(255 255 255 / .09), transparent 55%),
    linear-gradient(160deg, #2a2a2a 0%, #181818 50%, #0d0d0d 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 0 0 8px #101010,
              inset 0 0 0 9px color-mix(in srgb, var(--rojo) 55%, transparent); /* filete rojo */
}
.caja-cara--tapa-dentro {
  transform: translateY(calc(var(--h) / -2 - var(--l) + 1px)) rotateX(-90deg);
  background: radial-gradient(ellipse at 50% 35%, #1a1a1a, #070707 85%);
}
.caja-cara--tapa-frente, .caja-cara--tapa-atras {
  width: var(--w2); height: var(--l);
  margin: calc(var(--l) / -2) 0 0 calc(var(--w2) / -2);
}
.caja-cara--tapa-frente {
  transform: translate3d(0, calc(var(--h) / -2 - var(--l) / 2), calc(var(--d2) / 2));
  background: linear-gradient(180deg, #232323, #121212);
}
.caja-cara--tapa-atras {
  transform: translate3d(0, calc(var(--h) / -2 - var(--l) / 2), calc(var(--d2) / -2)) rotateY(180deg);
  background: #101010;
}
.caja-cara--tapa-izq, .caja-cara--tapa-der {
  width: var(--d2); height: var(--l);
  margin: calc(var(--l) / -2) 0 0 calc(var(--d2) / -2);
}
.caja-cara--tapa-izq {
  transform: translate3d(calc(var(--w2) / -2), calc(var(--h) / -2 - var(--l) / 2), 0) rotateY(-90deg);
  background: linear-gradient(180deg, #2b2b2b, #171717);
}
.caja-cara--tapa-der {
  transform: translate3d(calc(var(--w2) / 2), calc(var(--h) / -2 - var(--l) / 2), 0) rotateY(90deg);
  background: linear-gradient(180deg, #151515, #0a0a0a);
}
.caja-pestana {   /* pestaña roja de cierre en el borde frontal de la tapa */
  position: absolute;
  left: 50%; bottom: 0;
  width: 14%; height: 34%;
  translate: -50% 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #e0342b, #a8170f);
}

/* Sombra en el suelo */
.caja-sombra {
  position: absolute;
  left: 50%; top: calc(71% + var(--w) * .2);
  width: calc(var(--w) * 1.45);
  height: calc(var(--w) * .42);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .5) 40%, transparent 70%);
  filter: blur(6px);
}

/* ---- Productos dentro de la caja ----
   El elemento exterior se apoya en el piso (origen abajo al centro) y se inclina
   hacia la cámara; el interior gira para quedar siempre de frente: así la foto
   nunca se ve aplastada ni deformada. */
.caja-contenido {   /* debe conservar el 3D: si no, los productos se aplanan contra un plano */
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.caja-producto {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}
.caja-producto__frente {
  position: relative;
  width: 100%; height: 100%;
  transform: rotateY(12deg);   /* inverso del giro lateral de la cámara (js: CAMARA) */
  transform-origin: 50% 100%;
}

/* Hamburguesa: las mismas 6 capas de la portada, ya armadas.
   El lienzo de la portada (1024 x 1536) se desplaza para mostrar solo la hamburguesa. */
.caja-producto--hamburguesa {
  --hb: calc(var(--w) * .5);   /* compartimento de .56w: margen de .03w a cada lado */
  width: var(--hb);
  height: calc(var(--hb) * 1.076);
  margin: calc(var(--hb) * -1.076) 0 0 calc(var(--hb) / -2);
}
.caja-producto--hamburguesa .caja-producto__frente::after {   /* sombra de contacto bajo el pan */
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: -4%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / .85), transparent 70%);
  z-index: -1;
}
.hamburguesa-mini {
  position: absolute;
  width: calc(var(--hb) / .708);
  aspect-ratio: 1024 / 1536;
  left: calc(var(--hb) / .708 * -.146);
  top: calc(var(--hb) / .708 * -.717);
}
.hamburguesa-mini .capa {   /* posición armada, sin animación */
  top: calc(var(--arriba) + var(--armada) * 1%);
  scale: var(--armada-escala, 1);
  will-change: auto;
}

/* Papas y bebida: fotos recortadas (img/caja/recortadas/). Alto = ancho × proporción
   real de la imagen, así nunca se deforman. Se apoyan por su borde inferior. */
.caja-producto--papas {
  --ancho-p: calc(var(--w) * .38);  /* compartimento de .44w: el envase ocupa casi todo el ancho */
  width: var(--ancho-p);
  height: calc(var(--ancho-p) * 284 / 560);
  margin: calc(var(--ancho-p) * -284 / 560) 0 0 calc(var(--ancho-p) / -2);
}
.caja-producto--bebida {   /* más alta que las papas: cabe bajo la tapa cerrada */
  --ancho-b: calc(var(--w) * .13);  /* base ≈ .09w: entra justo en el hueco del portavasos */
  width: var(--ancho-b);
  height: calc(var(--ancho-b) * 580 / 300);
  margin: calc(var(--ancho-b) * -580 / 300) 0 0 calc(var(--ancho-b) / -2);
}
.caja-producto--papas img, .caja-producto--bebida img { display: block; width: 100%; height: 100%; }
/* Sombra de contacto: apoya la foto en el piso o en el portavasos (no flota) */
.caja-producto--papas .caja-producto__frente::after,
.caja-producto--bebida .caja-producto__frente::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%; bottom: -5%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / .8), transparent 70%);
  z-index: -1;
}

/* Mensaje final */
.pedido-escena__mensaje { text-align: center; max-width: 32rem; }
.pedido-escena__mensaje h2 { font-size: clamp(1.5rem, 5vw, 2.4rem); margin-bottom: .4rem; }
.pedido-escena__mensaje p { margin: 0 0 1.25rem; color: color-mix(in srgb, var(--crema) 70%, transparent); }

/* ----- 7. Pie ----- */
.pie { padding-block: 2rem; border-top: 1px solid color-mix(in srgb, var(--crema) 20%, transparent); }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.pie__aviso { opacity: .7; }

/* ----- 8. Accesibilidad: si la persona pidió "reducir movimiento" ----- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}