/* La Mordida Perfecta — blanco y naranja, pensada para celular. */
:root {
  --naranja: #ff7a1a;
  --naranja-fuerte: #f25c05;
  --ambar: #ffb347;
  --crema: #fff5ea;
  --crema-2: #ffe7cf;
  --tinta: #2b1a10;
  --tinta-2: #7a655a;
  --blanco: #fff;
  --verde: #2fa35a;
  --sombra: 0 10px 30px -12px rgba(242, 92, 5, .45);
  --sombra-suave: 0 6px 22px -10px rgba(43, 26, 16, .28);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.22, 1, .36, 1);
  --guion: 'Oleo Script', cursive;
  --gorda: 'Fredoka', system-ui, sans-serif;
  --texto: 'Outfit', system-ui, sans-serif;
  --pestanas: 68px;
  /* garabatos de fondo, como en el cartel */
  --garabatos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%23ffd9b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='30' cy='34' r='14'/%3E%3Cpath d='M22 22c3-5 6-3 8 0M34 21c2-4 6-3 7 1'/%3E%3Cpath d='M150 30l26 10-20 22z'/%3E%3Ccircle cx='160' cy='42' r='2.5'/%3E%3Cpath d='M92 96c10-14 30-12 34 4-12 12-28 10-34-4zM96 98l26 2'/%3E%3Cpath d='M28 150c8-6 16 6 24 0s16 6 24 0'/%3E%3Ccircle cx='190' cy='130' r='4'/%3E%3Ccircle cx='200' cy='142' r='2.5'/%3E%3Ccircle cx='184' cy='146' r='2.5'/%3E%3Cpath d='M140 180c0-12 18-12 18 0v14h-18z'/%3E%3Cpath d='M74 30l4 8 8 1-6 6 2 8-8-4-7 4 1-8-6-6 8-1z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font: 400 16px/1.5 var(--texto);
  padding-bottom: calc(var(--pestanas) + env(safe-area-inset-bottom));
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
main, .barra, .pie { max-width: 520px; margin-inline: auto; }
/* la cinta va girada y se sale por los lados: sin esto la página se podía arrastrar de lado */
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
i { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--naranja-fuerte); outline-offset: 3px; border-radius: 8px; }
.guion { font-family: var(--guion); font-weight: 400; }
section[id] { scroll-margin-top: 62px; }

/* ── Barra ── */
.barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255, 255, 255, .96);
  transition: box-shadow .3s;
}
.barra.pegada { box-shadow: 0 8px 24px -18px rgba(43, 26, 16, .5); }
.barra-marca { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.barra-marca .guion { color: var(--naranja-fuerte); font-size: 24px; }
.barra-marca b { font: 700 15px var(--gorda); letter-spacing: .12em; text-transform: uppercase; }
.barra-pedido {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: var(--crema); display: grid; place-items: center;
  transition: transform .2s var(--rebote);
}
.barra-pedido:active { transform: scale(.9); }
.barra-pedido svg, .pestanas svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cuenta {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--naranja-fuerte); color: #fff;
  font: 600 12px/20px var(--gorda); text-align: center;
}
.barra-pedido .cuenta { position: absolute; top: -2px; right: -4px; border: 2px solid #fff; height: 22px; line-height: 18px; }
.cuenta.brinca { animation: brinca .5s var(--rebote); }
@keyframes brinca { 40% { transform: scale(1.5); } }

/* ── Botones ── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: linear-gradient(180deg, var(--naranja), var(--naranja-fuerte));
  color: #fff; font: 600 16px var(--gorda); letter-spacing: .01em;
  box-shadow: var(--sombra), inset 0 -3px 0 rgba(0, 0, 0, .12);
  transition: transform .18s var(--rebote), box-shadow .2s;
}
.boton:active { transform: scale(.95); }
.boton-grande { min-height: 54px; font-size: 17px; text-transform: uppercase; letter-spacing: .06em; }
.boton-grande span { transition: transform .3s var(--suave); }
.boton-grande:hover span { transform: translateX(4px); }
.boton-linea { background: #fff; color: var(--naranja-fuerte); box-shadow: inset 0 0 0 2px var(--naranja); }
.boton-blanco { background: #fff; color: var(--naranja-fuerte); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.boton-chico { min-height: 36px; padding: 0 14px; font-size: 13px; box-shadow: none; background: var(--crema-2); color: var(--naranja-fuerte); }
.ancho { width: 100%; }

/* ── Portada ── */
.portada {
  position: relative; text-align: center;
  padding: 18px 16px 28px;
  background: var(--garabatos) center top / 220px, radial-gradient(120% 60% at 50% 0, var(--crema), #fff 70%);
}
.rayos { width: 92px; margin: 0 auto -4px; stroke: var(--ambar); stroke-width: 5; stroke-linecap: round; fill: none; }
.marca { line-height: .9; }
.marca .guion {
  display: block; color: var(--naranja-fuerte); font-size: clamp(54px, 17vw, 84px);
  transform: rotate(-4deg); text-shadow: 0 3px 0 var(--crema-2);
}
.marca-fuerte {
  display: block; font: 700 clamp(44px, 14vw, 70px)/1 var(--gorda);
  text-transform: uppercase; letter-spacing: .04em; color: var(--tinta); margin-top: 2px;
}
.lema {
  display: inline-block; margin-top: 12px; padding: 5px 16px; border-radius: 999px;
  background: var(--tinta); color: #fff; font: 500 13px var(--gorda); letter-spacing: .06em;
}

.plato { position: relative; width: min(100%, 400px); margin: 6px auto 0; aspect-ratio: 1 / .92; }
.plato-disco {
  position: absolute; inset: 9% 7% 3%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffc27a, var(--naranja) 55%, var(--naranja-fuerte));
  box-shadow: var(--sombra);
  animation: late 5s ease-in-out infinite;
}
.plato-anillo {
  position: absolute; inset: 4% 2% -2%; border-radius: 50%;
  border: 2px dashed var(--ambar); opacity: .8;
  animation: gira 40s linear infinite;
}
.plato-foto {
  position: absolute; left: 50%; top: 52%; width: 96%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 22px 18px rgba(92, 34, 0, .45));
  animation: flota 5s ease-in-out infinite;
}
.flota {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px;
  background: #fff; box-shadow: var(--sombra-suave);
  animation: flota-chico 4s ease-in-out infinite;
}
.f1 { left: 2%; top: 20%; }
.f2 { right: 3%; top: 12%; animation-delay: -1.3s; }
.f3 { left: 6%; bottom: 8%; animation-delay: -2.1s; }
.f4 { right: 0; bottom: 30%; animation-delay: -.6s; width: 40px; height: 40px; font-size: 20px; }
.sello {
  position: absolute; right: 0; bottom: -2%; width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-content: center; gap: 0; line-height: 1.05;
  background: var(--tinta); color: #fff; transform: rotate(10deg);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--tinta), var(--sombra-suave);
  animation: sello 3.6s ease-in-out infinite;
}
.sello small { font-size: 10px; letter-spacing: .04em; opacity: .85; }
.sello b { font: 700 22px var(--gorda); color: var(--ambar); }
@keyframes flota { 50% { transform: translate(-50%, -53%) rotate(-1.2deg); } }
@keyframes flota-chico { 50% { transform: translateY(-10px) rotate(8deg); } }
@keyframes late { 50% { transform: scale(1.03); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes sello { 50% { transform: rotate(4deg) scale(1.05); } }

.portada-botones { display: grid; gap: 12px; margin-top: 20px; }
.atajos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; }
.atajo {
  display: grid; justify-items: center; gap: 1px; padding: 12px 2px 10px;
  border-radius: 18px; background: #fff; box-shadow: var(--sombra-suave);
  transition: transform .2s var(--rebote);
}
.atajo:active { transform: scale(.93); }
.atajo i { font-size: 24px; line-height: 1.2; }
.atajo b { font: 600 13px var(--gorda); }
.atajo span { font-size: 10.5px; color: var(--tinta-2); }
.atajo-fuerte { background: linear-gradient(180deg, var(--naranja), var(--naranja-fuerte)); color: #fff; box-shadow: var(--sombra); }
.atajo-fuerte span { color: #fff; opacity: .9; }

/* entrada de la portada */
.entra { opacity: 0; transform: translateY(18px); animation: entra .6s var(--suave) forwards; animation-delay: calc(var(--i) * 55ms); }
.marca .guion.entra { animation-name: entra-giro; }
@keyframes entra { to { opacity: 1; transform: none; } }
@keyframes entra-giro { from { opacity: 0; transform: translateY(18px) rotate(-10deg) scale(.9); } to { opacity: 1; transform: rotate(-4deg); } }

/* aparecer al hacer scroll */
.ver { opacity: 0; transform: translateY(22px) scale(.98); transition: opacity .6s var(--suave), transform .6s var(--suave); transition-delay: calc(var(--n, 0) * 70ms); }
.ver.visto { opacity: 1; transform: none; }

/* ── Cinta ── */
.cinta { overflow: hidden; background: var(--naranja-fuerte); color: #fff; transform: rotate(-1.5deg) scale(1.04); margin: 6px 0 4px; }
.cinta-pista { display: flex; width: max-content; animation: cinta 26s linear infinite; }
.cinta-pista span { padding: 9px 14px; font: 600 15px var(--gorda); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cinta-pista span::after { content: '★'; margin-left: 28px; color: #ffd9a8; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ── Secciones ── */
.seccion { position: relative; padding: 44px 16px 40px; }
.crema { background: var(--garabatos) center / 220px, var(--crema); border-radius: 36px; }
.titulo { text-align: center; margin-bottom: 22px; }
.titulo p { margin-top: 12px; color: var(--tinta-2); font-size: 15px; }
.pastilla {
  display: inline-block; padding: 6px 26px 10px; border-radius: 18px 26px 16px 24px;
  background: linear-gradient(180deg, var(--naranja), var(--naranja-fuerte)); color: #fff;
  font: 400 34px/1.1 var(--guion); transform: rotate(-2.5deg);
  box-shadow: var(--sombra), inset 0 -4px 0 rgba(0, 0, 0, .1);
}
.pastilla-clara { background: #fff; color: var(--naranja-fuerte); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .5); }

/* ── Tu Mordida: los ingredientes rodean al sándwich ── */
.orbita {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px;
  grid-template-areas: 'izq centro der' 'abajo abajo abajo';
  align-items: center; row-gap: 6px;
}
.orbita-lado { display: grid; gap: 10px; position: relative; z-index: 2; }
.orbita-lado.izq { grid-area: izq; }
.orbita-lado.der { grid-area: der; }
/* curva: el de en medio se abre hacia fuera */
.orbita-lado.izq .ing:nth-child(odd) { transform: translateX(16px); }
.orbita-lado.der .ing:nth-child(odd) { transform: translateX(-16px); }
.orbita-abajo { grid-area: abajo; display: flex; justify-content: center; gap: 22px; position: relative; z-index: 2; }
.orbita-abajo .ing:nth-child(2) { transform: translateY(14px); }
.orbita-centro { grid-area: centro; position: relative; aspect-ratio: 1; margin: 0 -22px; }
.orbita-disco {
  position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd4a0, var(--naranja) 60%, var(--naranja-fuerte));
  box-shadow: var(--sombra);
}
.orbita-anillo { position: absolute; inset: 1%; border-radius: 50%; border: 2px dashed var(--ambar); animation: gira 50s linear infinite; }
.orbita-anillo::before, .orbita-anillo::after {
  content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--naranja-fuerte); top: 50%; left: -7px;
}
.orbita-anillo::after { left: auto; right: -7px; background: var(--ambar); }
.orbita-foto { position: absolute; inset: 0; }
.orbita-foto.pop { animation: pop .5s var(--rebote); }
@keyframes pop { 0% { transform: scale(.86) rotate(-3deg); } 60% { transform: scale(1.05) rotate(1deg); } }
.capa {
  position: absolute; left: 50%; top: 50%; width: 104%; max-width: none;
  transform: translate(-50%, -50%) scale(.92); opacity: 0;
  filter: drop-shadow(0 16px 12px rgba(92, 34, 0, .4));
  transition: opacity .32s ease, transform .45s var(--rebote);
}
.capa.visible { opacity: 1; transform: translate(-50%, -50%); }

.ing { display: grid; justify-items: center; gap: 3px; width: 72px; transition: transform .3s var(--rebote); }
.ing-bola {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-size: 27px;
  background: #fff; box-shadow: 0 0 0 2.5px var(--naranja), var(--sombra-suave);
  transition: transform .25s var(--rebote), box-shadow .25s, filter .25s, background .25s;
}
.ing-bola::after {
  content: '✓'; position: absolute; right: -4px; top: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--verde); color: #fff; font: 700 12px/20px var(--gorda); text-align: center;
  box-shadow: 0 0 0 2px #fff; transition: background .2s, transform .3s var(--rebote);
}
.ing-nombre { font: 600 11.5px/1.1 var(--gorda); text-align: center; transition: color .2s; }
.ing:active .ing-bola { transform: scale(.86); }
.ing[aria-pressed='false'] .ing-bola { background: #f4efea; box-shadow: 0 0 0 2px #d9cfc7; filter: grayscale(1); }
.ing[aria-pressed='false'] .ing-bola::after { content: '+'; background: var(--tinta-2); transform: rotate(180deg); filter: none; }
.ing[aria-pressed='false'] .ing-nombre { color: #a8998f; text-decoration: line-through; }

.orbita-estado {
  width: fit-content; max-width: 100%; margin: 26px auto 0; padding: 7px 16px; border-radius: 999px;
  background: var(--crema); color: var(--naranja-fuerte); font: 600 14px var(--gorda); text-align: center;
}

.bloque { margin-top: 26px; }
.bloque h3, .hoja-sub { display: flex; align-items: center; gap: 8px; font: 600 18px var(--gorda); margin-bottom: 12px; }
.bloque h3 i { width: 26px; height: 26px; border-radius: 50%; background: var(--tinta); color: #fff; font-size: 14px; display: grid; place-items: center; }
.bloque h3 small { font: 500 12px var(--texto); color: var(--tinta-2); background: var(--crema); padding: 2px 8px; border-radius: 999px; }
.fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1.5px #ead9c9; font: 500 14px var(--gorda);
  transition: transform .2s var(--rebote), background .2s, color .2s, box-shadow .2s;
}
.ficha:active { transform: scale(.93); }
.ficha[aria-pressed='true'] { background: var(--naranja); color: #fff; box-shadow: var(--sombra); }
.salsas { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 14px; scroll-snap-type: x proximity; scrollbar-width: none; }
.salsas::-webkit-scrollbar, .categorias::-webkit-scrollbar { display: none; }
.salsa {
  flex: 0 0 132px; scroll-snap-align: start; text-align: left; padding: 12px; border-radius: 18px;
  background: #fff; box-shadow: inset 0 0 0 1.5px #ead9c9;
  transition: transform .2s var(--rebote), box-shadow .2s;
}
.salsa i { display: block; width: 34px; height: 34px; border-radius: 50% 50% 50% 8px; background: var(--c); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .12); margin-bottom: 8px; transition: transform .4s var(--rebote); }
.salsa b { display: block; font: 600 14px/1.15 var(--gorda); }
.salsa span { font-size: 11.5px; color: var(--tinta-2); line-height: 1.25; display: block; margin-top: 2px; }
.salsa[aria-pressed='true'] { box-shadow: inset 0 0 0 2.5px var(--naranja), var(--sombra); }
.salsa[aria-pressed='true'] i { transform: rotate(-20deg) scale(1.15); }

.resumen {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 10px;
  margin-top: 22px; padding: 18px; border-radius: 24px;
  background: var(--tinta); color: #fff;
}
.resumen-nombre { font: 600 17px var(--gorda); }
.resumen-lleva { font-size: 13px; opacity: .75; }
.resumen-precio { font: 700 28px var(--gorda); color: var(--ambar); }
.resumen .boton { grid-column: 1 / -1; }

/* ── Menú ── */
.categorias { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 16px; padding: 4px 16px 10px; scrollbar-width: none; }
.categoria {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: #fff; font: 600 14px var(--gorda); box-shadow: var(--sombra-suave);
  transition: transform .2s var(--rebote), background .25s, color .25s;
}
.categoria[aria-selected='true'] { background: var(--tinta); color: #fff; transform: scale(1.04); }
.categoria.pronto { opacity: .7; }
.productos { display: grid; gap: 12px; min-height: 240px; }
.producto {
  display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px 10px 10px; border-radius: 22px; background: #fff; box-shadow: var(--sombra-suave);
  opacity: 0; transform: translateY(14px);
  animation: entra .5s var(--suave) forwards; animation-delay: calc(var(--n) * 55ms);
}
.producto-foto {
  position: relative; width: 84px; height: 84px; border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, var(--crema), var(--crema-2));
  display: grid; place-items: center; font-size: 34px;
}
.producto-foto img { width: 92%; filter: drop-shadow(0 6px 5px rgba(92, 34, 0, .3)); }
.producto-foto img.alta { width: auto; height: 96px; margin-top: -10px; }
.producto-foto img.atras { position: absolute; height: 74px; width: auto; right: 2px; top: 2px; }
.producto-foto img.frente { position: relative; width: 78%; margin: 22px 14px 0 0; }
.producto-foto .gota { width: 40px; height: 40px; border-radius: 50% 50% 50% 10px; background: var(--c); box-shadow: inset -5px -5px 0 rgba(0, 0, 0, .12); transform: rotate(-12deg); }
.producto-foto .veces { position: absolute; left: -4px; top: -4px; background: var(--tinta); color: #fff; font: 600 12px var(--gorda); padding: 2px 7px; border-radius: 999px; }
.producto h3 { font: 600 16px/1.15 var(--gorda); }
.producto p { font-size: 12.5px; line-height: 1.3; color: var(--tinta-2); margin-top: 3px; }
.producto .precio { display: block; margin-top: 5px; font: 700 16px var(--gorda); color: var(--naranja-fuerte); }
.producto .precio.sin { font-weight: 500; font-size: 12.5px; color: var(--tinta-2); }
.mas {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: linear-gradient(180deg, var(--naranja), var(--naranja-fuerte)); color: #fff;
  font: 500 26px/1 var(--gorda); box-shadow: var(--sombra);
  transition: transform .2s var(--rebote);
}
.mas:active { transform: scale(.85) rotate(90deg); }
.mas.listo { animation: listo .5s var(--rebote); }
@keyframes listo { 50% { transform: scale(1.25) rotate(180deg); background: var(--verde); } }
.muy-pronto { text-align: center; padding: 34px 20px; border-radius: 24px; border: 2px dashed #f1c9a3; background: rgba(255, 255, 255, .7); animation: entra .5s var(--suave) both; }
.muy-pronto i { font-size: 52px; display: block; animation: flota-chico 3s ease-in-out infinite; }
.muy-pronto b { display: block; font: 400 30px var(--guion); color: var(--naranja-fuerte); }
.muy-pronto span { color: var(--tinta-2); font-size: 14px; }

/* ── Carrusel de bebidas: cambia la botella, no el lugar ── */
.carrusel {
  --c: var(--naranja);
  position: relative; height: 380px; border-radius: 34px; overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  background: color-mix(in srgb, var(--c) 14%, #fff);
  transition: background .5s ease;
}
.carrusel-fondo {
  position: absolute; left: 50%; top: 54%; width: 270px; height: 270px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--c);
  box-shadow: 0 0 0 22px color-mix(in srgb, var(--c) 22%, transparent), 0 0 0 50px color-mix(in srgb, var(--c) 10%, transparent);
  transition: background .5s ease, box-shadow .5s ease;
}
.carrusel-gota { position: absolute; border-radius: 50%; background: var(--c); opacity: .55; transition: background .5s; animation: flota-chico 5s ease-in-out infinite; }
.g1 { width: 26px; height: 26px; left: 9%; top: 18%; }
.g2 { width: 16px; height: 16px; right: 12%; top: 26%; animation-delay: -2s; }
.g3 { width: 34px; height: 34px; right: 7%; bottom: 14%; animation-delay: -3.4s; }
.carrusel-tipo {
  position: absolute; left: 16px; top: 16px; z-index: 2; padding: 4px 12px; border-radius: 999px;
  background: #fff; font: 600 12px var(--gorda); letter-spacing: .08em; text-transform: uppercase;
}
.carrusel-botellas { position: absolute; inset: 0; }
.botella {
  position: absolute; left: 50%; bottom: 22px; height: 332px; width: auto; max-width: none;
  transform: translateX(-50%) scale(.9); opacity: 0; pointer-events: none;
  filter: drop-shadow(0 18px 14px rgba(43, 26, 16, .35));
  transition: opacity .38s ease, transform .5s var(--rebote);
}
.botella.activa { opacity: 1; transform: translateX(-50%) rotate(var(--giro, 0deg)); }
.carrusel-flecha {
  position: absolute; top: 50%; z-index: 2; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%;
  background: #fff; font: 500 26px/38px var(--gorda); box-shadow: var(--sombra-suave);
  transition: transform .2s var(--rebote);
}
.carrusel-flecha:active { transform: scale(.85); }
.ant { left: 10px; } .sig { right: 10px; }
.carrusel-desliza { position: absolute; bottom: 6px; inset-inline: 0; text-align: center; font: 500 11px var(--gorda); letter-spacing: .14em; text-transform: uppercase; opacity: .55; animation: desliza 2.4s ease-in-out infinite; }
@keyframes desliza { 50% { transform: scaleX(1.12); opacity: .8; } }
.carrusel-pie { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; margin-top: 16px; }
.carrusel-nombre { font-size: 32px; line-height: 1; color: var(--tinta); }
.carrusel-nota { font-size: 13.5px; color: var(--tinta-2); margin-top: 4px; }
.carrusel-precio { font: 700 22px var(--gorda); color: var(--naranja-fuerte); }
.carrusel-pie .cambia { animation: cambia .45s var(--suave); }
@keyframes cambia { from { opacity: 0; transform: translateY(10px); } }
.puntos { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.puntos button { width: 9px; height: 9px; border-radius: 999px; background: #ead9c9; transition: width .35s var(--suave), background .35s; }
.puntos button[aria-current='true'] { width: 26px; background: var(--naranja-fuerte); }
.tambien { margin-top: 20px; text-align: center; font-size: 13.5px; color: var(--tinta-2); }
.tambien b { color: var(--tinta); font-weight: 600; }

/* ── Club VIP ── */
.club {
  color: #fff; border-radius: 36px 36px 0 0; margin-top: 10px;
  background: var(--garabatos) center / 220px, linear-gradient(165deg, #ff8f2e, var(--naranja-fuerte) 55%, #d94a00);
  background-blend-mode: soft-light, normal;
}
.club .titulo p { color: #fff; opacity: .92; }
.tarjeta {
  position: relative; overflow: hidden; aspect-ratio: 1.6; max-width: 340px; margin: 6px auto 0; padding: 18px 20px;
  border-radius: 22px; color: #fff; display: grid; align-content: space-between;
  background: linear-gradient(135deg, #3a2114, #170d07);
  box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transform: rotate(-3deg);
}
.tarjeta.visto { animation: tarjeta 6s ease-in-out infinite 1s; }
@keyframes tarjeta { 50% { transform: rotate(1deg) translateY(-6px); } }
.tarjeta-brillo { position: absolute; inset: -40% auto -40% 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); transform: translateX(-150%) rotate(18deg); animation: brillo 4.5s ease-in-out infinite; }
@keyframes brillo { 0%, 55% { transform: translateX(-150%) rotate(18deg); } 100% { transform: translateX(325%) rotate(18deg); } }
.tarjeta-marca .guion { font-size: 24px; color: var(--ambar); }
.tarjeta-marca b { font: 700 14px var(--gorda); letter-spacing: .2em; background: var(--ambar); color: var(--tinta); padding: 2px 8px; border-radius: 6px; margin-left: 4px; }
.tarjeta-corona { position: absolute; right: 18px; top: 12px; font-size: 30px; }
.tarjeta-puntos b { font: 700 40px/1 var(--gorda); color: var(--ambar); }
.tarjeta-pie { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .12em; opacity: .75; }
.flujo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 30px 0 18px; text-align: center; font: 600 13px/1.2 var(--gorda); }
.flujo li { position: relative; }
.flujo li + li::before { content: '→'; position: absolute; left: -10px; top: 14px; font-size: 18px; opacity: .8; animation: flecha 1.6s ease-in-out infinite; }
@keyframes flecha { 50% { transform: translateX(4px); } }
.flujo i { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: 24px; }
.beneficios { display: grid; gap: 10px; }
.beneficios li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .18); }
.beneficios li:nth-child(2) { --n: 1; } .beneficios li:nth-child(3) { --n: 2; } .beneficios li:nth-child(4) { --n: 3; }
.beneficios i { font-size: 26px; }
.beneficios b { display: block; font: 600 15px var(--gorda); }
.beneficios span { font-size: 13px; opacity: .9; }
.club-precio { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.club-precio p { line-height: 1.1; }
.club-precio small { display: block; font-size: 12px; opacity: .9; }
.club-precio b { font: 700 34px var(--gorda); }

/* ── Pie ── */
.pie { text-align: center; padding: 34px 16px 30px; }
.marca-chica .guion { font-size: 40px; }
.marca-chica .marca-fuerte { font-size: 32px; }
.pie-lema { margin-top: 12px; font-size: 20px; color: var(--naranja-fuerte); }
.pie-fino { margin-top: 10px; font-size: 12px; color: var(--tinta-2); }

/* ── Pestañas ── */
.pestanas {
  position: fixed; z-index: 40; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(100%, 520px); height: calc(var(--pestanas) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -10px 30px -16px rgba(43, 26, 16, .4);
}
.pestanas > * { display: grid; justify-items: center; gap: 2px; font: 500 11px var(--gorda); color: #a8998f; transition: color .25s, transform .2s var(--rebote); }
.pestanas > *:active { transform: scale(.9); }
.pestanas .activa { color: var(--naranja-fuerte); }
.pestana-centro span {
  width: 60px; height: 60px; margin-top: -30px; border-radius: 50%; display: grid; place-items: center; font-size: 28px;
  background: linear-gradient(180deg, var(--naranja), var(--naranja-fuerte)); box-shadow: 0 0 0 6px #fff, var(--sombra);
  transition: transform .3s var(--rebote);
}
.pestana-centro.activa span { transform: translateY(-4px) rotate(-8deg) scale(1.06); }

.flotante {
  position: fixed; z-index: 35; left: 50%; bottom: calc(var(--pestanas) + env(safe-area-inset-bottom) + 12px);
  width: min(calc(100% - 32px), 488px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 0 18px 0 12px; height: 52px; border-radius: 999px;
  background: var(--tinta); color: #fff; font: 600 15px var(--gorda);
  box-shadow: 0 16px 30px -14px rgba(43, 26, 16, .8);
  animation: sube .5s var(--rebote);
}
.flotante b { margin-left: auto; color: var(--ambar); }
@keyframes sube { from { transform: translate(-50%, 90px); } }

/* ── Hojas ── */
.velo { position: fixed; inset: 0; z-index: 50; background: rgba(43, 26, 16, .5); backdrop-filter: blur(3px); animation: velo .3s ease; }
@keyframes velo { from { opacity: 0; } }
.hoja {
  position: fixed; z-index: 60; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(100%, 520px); max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 30px 30px 0 0;
  animation: hoja .45s var(--suave);
}
@keyframes hoja { from { transform: translate(-50%, 100%); } }
.hoja::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 9px; background: #e4d6ca; margin: 10px auto 0; }
.hoja-cierra { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--crema); font: 500 24px/1 var(--gorda); }
.hoja-cuerpo { padding: 12px 18px calc(24px + env(safe-area-inset-bottom)); }
.hoja-titulo { font-size: 34px; line-height: 1.1; color: var(--naranja-fuerte); }
.hoja-sub { margin: 24px 0 12px; }
.pasos { display: flex; gap: 4px; margin: 14px 0 18px; font: 500 10.5px var(--gorda); text-align: center; color: #a8998f; }
.pasos li { flex: 1; padding-top: 9px; border-top: 4px solid #eee2d8; border-radius: 2px; }
.pasos .hecho { border-color: var(--ambar); color: var(--tinta-2); }
.pasos .actual { border-color: var(--naranja-fuerte); color: var(--naranja-fuerte); font-weight: 600; }
.lineas { display: grid; gap: 10px; }
.linea { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; border-radius: 18px; background: var(--crema); animation: entra .4s var(--suave) both; }
.linea b { font: 600 15px var(--gorda); }
.linea small { display: block; font-size: 12.5px; color: var(--tinta-2); line-height: 1.3; }
.linea .precio { font: 700 15px var(--gorda); color: var(--naranja-fuerte); text-align: right; }
.cantidad { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 3px; font: 600 14px var(--gorda); }
.cantidad button { width: 28px; height: 28px; border-radius: 50%; background: var(--crema-2); color: var(--naranja-fuerte); font-size: 18px; line-height: 1; }
.vacio { text-align: center; padding: 26px 0 30px; color: var(--tinta-2); }
.vacio a { color: var(--naranja-fuerte); font-weight: 600; text-decoration: underline; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campos label { display: grid; gap: 4px; font: 500 12px var(--gorda); color: var(--tinta-2); }
.campos .ancho { grid-column: 1 / -1; }
.campos input { min-height: 46px; padding: 0 14px; border-radius: 14px; border: 1.5px solid #ead9c9; background: #fff; font: 400 16px var(--texto); color: var(--tinta); width: 100%; }
.campos input:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 4px rgba(255, 122, 26, .18); }
.pagos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pagos input { position: absolute; opacity: 0; }
.pagos span { display: grid; justify-items: center; gap: 2px; padding: 12px 4px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px #ead9c9; font: 500 12.5px var(--gorda); transition: transform .2s var(--rebote), box-shadow .2s, background .2s; }
.pagos i { font-size: 24px; }
.pagos input:checked + span { background: var(--crema); box-shadow: inset 0 0 0 2.5px var(--naranja); transform: translateY(-2px); }
.pagos input:focus-visible + span { outline: 3px solid var(--naranja-fuerte); outline-offset: 2px; }
.pago-nota { margin-top: 10px; font-size: 13px; color: var(--tinta-2); }
.totales { margin: 20px 0 16px; display: grid; gap: 6px; }
.totales div { display: flex; justify-content: space-between; color: var(--tinta-2); }
.totales .total { padding-top: 10px; margin-top: 4px; border-top: 2px dashed #ead9c9; color: var(--tinta); font: 700 22px var(--gorda); }
.totales .total dd { color: var(--naranja-fuerte); }
.hoja-cuerpo.listo { text-align: center; display: grid; gap: 12px; justify-items: center; padding-top: 30px; }
.listo-numero { font: 500 16px var(--gorda); background: var(--crema); padding: 6px 16px; border-radius: 999px; }
.palomita svg { width: 92px; fill: none; stroke: var(--verde); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.palomita circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: traza .6s ease forwards; }
.palomita path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: traza .4s .5s ease forwards; }
@keyframes traza { to { stroke-dashoffset: 0; } }
.demo { font: 500 12px var(--gorda); color: var(--tinta-2); background: #f4efea; padding: 5px 12px; border-radius: 999px; width: fit-content; }
.demo-arriba { margin-bottom: 12px; }

.perfil { display: flex; align-items: center; gap: 14px; }
.perfil-foto { width: 62px; height: 62px; border-radius: 50%; background: var(--crema-2); display: grid; place-items: center; font-size: 32px; box-shadow: 0 0 0 3px var(--naranja); }
.perfil p { font-size: 14px; color: var(--tinta-2); }
.chapa { background: var(--verde); color: #fff; font: 600 11px var(--gorda); padding: 2px 8px; border-radius: 999px; }
.saldo { margin-top: 18px; padding: 16px 18px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, var(--naranja), var(--naranja-fuerte)); box-shadow: var(--sombra); }
.saldo small { display: block; font-size: 12px; opacity: .9; }
.saldo > p:first-child b { font: 700 42px/1 var(--gorda); }
.barra-puntos { height: 9px; border-radius: 9px; background: rgba(255, 255, 255, .3); margin: 12px 0 8px; overflow: hidden; }
.barra-puntos span { display: block; height: 100%; width: var(--avance); border-radius: 9px; background: #fff; animation: avanza 1.2s var(--suave) both .2s; }
@keyframes avanza { from { width: 0; } }
.saldo-nota { font-size: 13px; }
.datos-vip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.datos-vip li { display: grid; padding: 12px; border-radius: 16px; background: var(--crema); font-size: 12px; color: var(--tinta-2); }
.datos-vip i { font-size: 20px; }
.datos-vip b { font: 600 14px var(--gorda); color: var(--tinta); }
.historial { display: grid; gap: 10px; }
.historial li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 18px; box-shadow: inset 0 0 0 1.5px #ead9c9; }
.historial b { display: block; font: 600 14.5px var(--gorda); }
.historial span { font-size: 12.5px; color: var(--tinta-2); }

.aviso {
  position: fixed; z-index: 70; left: 50%; top: 70px; transform: translate(-50%, -140%);
  max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 999px;
  background: var(--tinta); color: #fff; font: 500 14px var(--gorda); text-align: center;
  box-shadow: var(--sombra-suave); opacity: 0; pointer-events: none;
  transition: transform .45s var(--rebote), opacity .3s;
}
.aviso.sale { transform: translate(-50%, 0); opacity: 1; }

@media (min-width: 560px) {
  body { background: var(--crema); }
  main, .pie { background: #fff; }
  main { box-shadow: 0 0 60px -30px rgba(43, 26, 16, .4); }
}
@media (max-width: 350px) {
  .orbita { grid-template-columns: 64px minmax(0, 1fr) 64px; }
  .ing { width: 64px; } .ing-bola { width: 50px; height: 50px; font-size: 24px; }
  .pastilla { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ver, .entra, .producto { opacity: 1; transform: none; }
}

/* ── Acceso a las aguas, debajo del sándwich ── */
.aguas {
  display: grid; grid-template-columns: 118px 1fr auto; align-items: center; gap: 10px;
  margin-top: 22px; padding: 8px 14px 8px 8px; border-radius: 24px; text-align: left;
  background: linear-gradient(120deg, #fff, var(--crema)); box-shadow: var(--sombra-suave), inset 0 0 0 1.5px var(--crema-2);
  transition: opacity .6s var(--suave), transform .6s var(--suave);
}
.aguas img { width: 118px; margin: -22px 0 -4px; filter: drop-shadow(0 8px 8px rgba(92, 34, 0, .25)); animation: flota-chico 5s ease-in-out infinite; }
.aguas small { display: block; font: 600 11px var(--gorda); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.aguas b { display: block; font-size: 26px; line-height: 1.05; color: var(--naranja-fuerte); }
.aguas em { display: block; font-style: normal; font-size: 12.5px; color: var(--tinta-2); line-height: 1.25; }
.aguas i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--naranja-fuerte); color: #fff; font: 600 18px var(--gorda); animation: flecha 1.6s ease-in-out infinite; }

/* ── El jugo de la mordida ── */
.jugos { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none; scroll-snap-type: x proximity; }
.jugos::-webkit-scrollbar, .rapido-pista::-webkit-scrollbar { display: none; }
.jugo {
  flex: 0 0 84px; scroll-snap-align: start; display: grid; justify-items: center; gap: 4px; padding: 8px 4px 10px;
  border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px #ead9c9;
  transition: transform .2s var(--rebote), box-shadow .2s, background .2s;
}
.jugo-foto { height: 84px; display: grid; place-items: center; font-size: 34px; }
.jugo-foto img { height: 84px; width: auto; filter: drop-shadow(0 5px 4px rgba(43, 26, 16, .25)); transition: transform .35s var(--rebote); }
.jugo b { font: 600 12px/1.15 var(--gorda); text-align: center; }
.jugo[aria-pressed='true'] { background: var(--crema); box-shadow: inset 0 0 0 2.5px var(--naranja), var(--sombra); }
.jugo[aria-pressed='true'] img { transform: scale(1.12) rotate(-6deg); }
.bloque-nota { font-size: 13px; color: var(--tinta-2); }
.bloque-nota a { color: var(--naranja-fuerte); font-weight: 600; }

/* ── Botón flotante de agregar rápido ── */
.rapido {
  position: fixed; z-index: 36; right: max(16px, calc(50% - 244px)); bottom: calc(var(--pestanas) + env(safe-area-inset-bottom) + 12px);
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-content: center; justify-items: center;
  background: linear-gradient(180deg, var(--naranja), var(--naranja-fuerte)); color: #fff;
  box-shadow: 0 0 0 4px #fff, var(--sombra); transition: transform .2s var(--rebote);
}
.rapido::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(242, 92, 5, .5); animation: onda 2.4s ease-out infinite; }
@keyframes onda { to { transform: scale(1.65); opacity: 0; } }
.rapido:active { transform: scale(.88) rotate(90deg); }
.rapido span { font: 500 28px/22px var(--gorda); }
.rapido small { font: 600 9.5px/1 var(--gorda); letter-spacing: .04em; margin-top: 2px; }
/* la pastilla del pedido le deja su sitio */
.flotante { left: max(16px, calc(50% - 244px)); width: calc(min(100%, 520px) - 32px - 72px); transform: none; animation-name: sube-2; }
@keyframes sube-2 { from { transform: translateY(90px); } }

.rapido-bajada { color: var(--tinta-2); font-size: 14px; margin-bottom: 6px; }
.rapido-fila h3 { font: 600 16px var(--gorda); margin: 16px 0 8px; }
.rapido-pista { display: flex; gap: 10px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 10px; scrollbar-width: none; }
.mini {
  position: relative; flex: 0 0 108px; display: grid; justify-items: center; align-content: start; gap: 3px;
  padding: 8px 6px 10px; border-radius: 18px; background: var(--crema); text-align: center;
  transition: transform .2s var(--rebote);
}
.mini:active { transform: scale(.93); }
.mini .producto-foto { width: 84px; height: 84px; background: #fff; }
.mini b { font: 600 12.5px/1.15 var(--gorda); }
.mini .precio { font: 700 12.5px var(--gorda); color: var(--naranja-fuerte); }
.mini i { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--naranja-fuerte); color: #fff; font: 500 19px/1 var(--gorda); box-shadow: 0 0 0 3px var(--crema); }
.mini i.listo { animation: listo .5s var(--rebote); }
#hoja-rapido .boton { margin-top: 14px; position: sticky; bottom: 12px; }

/* ── Arma tu mordida: la estrella de la página ── */
.arma {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; border-radius: 26px; text-align: left; color: #fff;
  background: linear-gradient(135deg, #3a2114, var(--tinta));
  box-shadow: 0 0 0 2px var(--ambar), 0 18px 30px -16px rgba(43, 26, 16, .8);
  transition: transform .18s var(--rebote);
}
.arma:active { transform: scale(.96); }
.arma::before {
  content: ''; position: absolute; inset: -40% auto -40% 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  transform: translateX(-160%) rotate(18deg); animation: arma-brillo 3.6s ease-in-out infinite 1.2s;
}
@keyframes arma-brillo { 0%, 50% { transform: translateX(-160%) rotate(18deg); } 100% { transform: translateX(420%) rotate(18deg); } }
.arma-bola {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 30px;
  background: #fff; box-shadow: 0 0 0 3px var(--naranja); animation: arma-mueve 2.8s ease-in-out infinite;
}
@keyframes arma-mueve { 0%, 60%, 100% { transform: none; } 70% { transform: rotate(-12deg) scale(1.08); } 85% { transform: rotate(9deg) scale(1.08); } }
.arma small { display: block; font: 600 11px var(--gorda); letter-spacing: .12em; text-transform: uppercase; color: var(--ambar); }
.arma b { display: block; font-size: 29px; line-height: 1.05; }
.arma-flecha { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--naranja), var(--naranja-fuerte)); font: 600 19px var(--gorda); animation: flecha 1.6s ease-in-out infinite; }

.estrella { background: var(--garabatos) center top / 220px, radial-gradient(120% 420px at 50% 0, var(--crema), #fff 75%); }
.estrella .rayos { display: block; }
.estrella-chapa {
  display: inline-block; margin: 4px 0 8px; padding: 4px 14px; border-radius: 999px;
  background: var(--tinta); color: var(--ambar); font: 600 12px var(--gorda); letter-spacing: .12em; text-transform: uppercase;
}
.marca-seccion .guion { font-size: clamp(48px, 15vw, 72px); }
.marca-seccion .marca-fuerte {
  width: fit-content; margin: 2px auto 0; padding: 0 12px; font-size: clamp(44px, 14vw, 68px);
  background: linear-gradient(transparent 58%, var(--ambar) 58%, var(--ambar) 90%, transparent 90%);
}
.estrella .titulo p:last-child { margin-top: 14px; }
.escenario {
  position: relative; margin: 30px -6px 0; padding: 30px 6px 20px; border-radius: 34px;
  background: radial-gradient(circle at 50% 40%, #fff 30%, var(--crema));
  box-shadow: inset 0 0 0 2px var(--crema-2), 0 22px 40px -26px rgba(242, 92, 5, .7);
}
.escenario-toca {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 6px 16px; border-radius: 999px; color: #fff; font: 600 13px var(--gorda);
  background: linear-gradient(180deg, var(--naranja), var(--naranja-fuerte)); box-shadow: var(--sombra);
}
.escenario-toca i { display: inline-block; margin-right: 4px; animation: toca 1.6s ease-in-out infinite; }
@keyframes toca { 50% { transform: translateY(4px) scale(.9); } }
.escenario .orbita-estado { background: #fff; box-shadow: inset 0 0 0 1.5px var(--crema-2); }

/* ── Pantalla de carga ── */
.carga {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: var(--garabatos) center / 220px, radial-gradient(circle at 50% 40%, #fff 20%, var(--crema));
  transition: opacity .45s ease, visibility 0s .45s;
  /* si el script falla, se quita sola */
  animation: carga-fuera .4s 7s forwards;
}
.lista .carga { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes carga-fuera { to { opacity: 0; visibility: hidden; } }
.carga-plato {
  position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffc27a, var(--naranja) 55%, var(--naranja-fuerte)); box-shadow: var(--sombra);
}
.carga-plato i { font-size: 62px; line-height: 1; animation: carga-brinca .9s var(--suave) infinite alternate; }
.carga-anillo { position: absolute; inset: -14px; border-radius: 50%; border: 3px dashed var(--ambar); animation: gira 6s linear infinite; }
@keyframes carga-brinca { from { transform: translateY(5px) rotate(-6deg) scale(.96); } to { transform: translateY(-9px) rotate(6deg) scale(1.04); } }
/* letras del sistema de respaldo: la pantalla sale antes que las de Google */
.carga-marca { margin-top: 10px; text-align: center; line-height: 1; }
.carga-marca .guion { display: block; color: var(--naranja-fuerte); font-size: 46px; transform: rotate(-4deg); }
.carga-marca b { display: block; margin-top: 4px; font: 700 34px var(--gorda); letter-spacing: .06em; text-transform: uppercase; }
.carga-barra { width: 168px; height: 8px; border-radius: 8px; background: var(--crema-2); overflow: hidden; }
.carga-barra span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--ambar), var(--naranja-fuerte)); transform-origin: left; animation: carga-llena 2.4s var(--suave) forwards; }
@keyframes carga-llena { from { transform: scaleX(.06); } to { transform: scaleX(.9); } }
.lista .carga-barra span { animation: none; transform: none; }
.carga-texto { font: 500 13px var(--gorda); letter-spacing: .06em; color: var(--tinta-2); }
/* la portada espera a que se quite la pantalla para entrar */
body:not(.lista) .entra { animation-play-state: paused; }