@font-face {
  font-family: 'Anton';
  src: url('/assets/anton.woff2') format('woff2');
  font-display: block;
}

:root {
  --orange: #F25822;
  --strip: #F37021;
  --green: #3DB54A;
  --red: #E5173F;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --smooth: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--orange);
  cursor: none;
}

#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: center center;
  overflow: hidden;
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-style: italic;
  color: #fff;
  background: var(--orange);
}

/* ---------- Fondo animado ---------- */
.food {
  position: absolute; z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 58%, transparent 74%);
          mask-image: radial-gradient(ellipse at center, #000 58%, transparent 74%);
}
.food img { width: 100%; display: block; animation: bob var(--t, 6s) ease-in-out infinite alternate; }

/* Los rayos se dibujan en el lienzo #fx (una capa gigante giratoria hacía fallar Safari/TV) */
#rays { display: none; }
#glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(40% 40% at 30% 40%, rgba(255,190,90,.22), transparent 70%),
    radial-gradient(35% 35% at 75% 65%, rgba(255,120,60,.18), transparent 70%);
}
#vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(120,25,0,.35) 100%);
}
#fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* ---------- Paneles ---------- */
.panel { position: absolute; z-index: 6; }

.hdr {
  position: relative; overflow: hidden;
  height: var(--hdr-h);
  background: var(--red);
  border: 4px solid #fff; border-radius: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--hfs); line-height: 1; letter-spacing: 1px;
  text-shadow: 0 5px 0 rgba(110,0,20,.35);
  box-shadow: 0 14px 30px rgba(120,20,0,.35);
}
.hdr span { position: relative; z-index: 1; padding-top: 4px; }
.hdr::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: shine 8s var(--smooth) infinite;
  animation-delay: var(--sd, 3s);
}

.box {
  position: absolute; left: 0; right: 0;
  top: calc(var(--hdr-h) + var(--gap, 22px));
  height: var(--box-h);
  background: var(--green);
  border: 4px solid #fff; border-radius: 30px;
  display: flex;
  padding: 0 var(--gm, 34px) 0 var(--pl, 44px);
  box-shadow: 0 18px 40px rgba(110,25,0,.4);
}
.list {
  position: relative; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-start; padding-top: 25px;
}
.list + .list { padding-left: 34px; }
.list::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0;
  width: var(--strip-w); background: var(--strip);
}
.row {
  position: relative;
  height: calc((var(--box-h) - 50px) / var(--rows));
  display: grid; grid-template-columns: 1fr var(--strip-w);
  align-items: center;
  font-size: var(--fs); line-height: 1;
  text-shadow: 0 4px 0 rgba(0,60,10,.18);
}
.row { --hl-bg: #FFD23F; --hl-fg: #E5173F; }
/* Barra de color que entra al seleccionar la línea */
.row::before {
  content: ''; position: absolute; top: 7%; bottom: 7%; left: -30px; right: 0;
  border-radius: 16px;
  background:
    linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 60%),
    var(--hl-bg);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  opacity: 0; transform: scale(.94, .5);
  transition: opacity .2s ease-out, transform .4s var(--pop);
}
/* Flecha indicadora */
.row::after {
  content: ''; position: absolute; left: -24px; top: 50%;
  border-left: 18px solid var(--hl-fg); border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  transform: translate(-30px, -50%); opacity: 0;
  transition: transform .4s var(--pop), opacity .3s;
}
.nm, .pr { position: relative; white-space: nowrap; display: block; }
.nm em, .pr em { font-style: inherit; display: inline-block; transform-origin: left center;
  padding: .1em .18em; margin: -.1em -.18em; } /* margen para la inclinación de la letra */
.pr em { transform-origin: center; }
.pr { text-align: center; text-shadow: 0 4px 0 rgba(140,40,0,.25); }

.nm em, .pr em { transition: color .3s .15s, text-shadow .3s .15s, transform .45s var(--smooth); }
.row.hot em { transition-delay: 0s; }
.row::before { right: -10px; }
.list:last-child .row::before { right: -16px; }
.pr::before, .pr::after { content: ''; position: absolute; left: 50%; top: 50%; pointer-events: none; opacity: 0; }
.pr::after { width: 1em; height: 1em; margin: -.5em 0 0 -.5em; border-radius: 50%; border: 5px solid var(--hl-fg); }
.pr::before {
  width: 1.9em; height: 1.9em; margin: -.95em 0 0 -.95em; border-radius: 50%;
  background: repeating-conic-gradient(var(--hl-fg) 0deg 5deg, transparent 5deg 30deg);
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 32%, transparent 70%);
          mask-image: radial-gradient(circle, transparent 30%, #000 32%, transparent 70%);
}

/* Línea seleccionada: cambia de color, salta y destella */
.row.hot { z-index: 2; }
.row.hot::before { opacity: 1; transform: none; transition-duration: .3s, .4s; animation: barSheen 1.3s .3s ease-out both; }
.row.hot::after { transform: translate(0, -50%); opacity: 1; animation: arrowNudge .7s .4s ease-in-out infinite alternate; }
.row.hot em { color: var(--hl-fg); text-shadow: 0 3px 0 rgba(0,0,0,.12); }
.row.hot .nm em { transform: translateX(10px) scale(1.04); }
.row.hot .pr em { animation: prPop .6s .1s var(--pop), prBeat 1.2s .7s ease-in-out infinite; }
.row.hot .pr::after { animation: ring .9s .2s ease-out both; }
.row.hot .pr::before { animation: burst .9s .15s ease-out both; }

/* Panel activo: borde iluminado y título que late */
.panel .box, .panel .hdr { transition: box-shadow .5s; }
.panel .hdr span { transition: transform .5s var(--pop); }
.panel.has-hot .box { box-shadow: 0 0 0 7px var(--hl-panel, #FFD23F), 0 0 50px var(--hl-panel, #FFD23F), 0 18px 40px rgba(110,25,0,.4); }
.panel.has-hot .hdr { box-shadow: 0 0 0 5px var(--hl-panel, #FFD23F), 0 14px 30px rgba(120,20,0,.35); }
.panel.has-hot .hdr span { transform: scale(1.07); }

/* ---------- Logo ---------- */
.logoWrap { position: absolute; z-index: 7; }
.logoWrap .burst {
  position: absolute; inset: -22%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,255,255,.22) 0deg 6deg, transparent 6deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 38%, transparent 70%);
          mask-image: radial-gradient(circle, #000 38%, transparent 70%);
  animation: spin 40s linear infinite;
}
.logoWrap svg.ring { position: absolute; inset: -6%; width: 112%; height: 112%; animation: spin 24s linear infinite reverse; }
.logoWrap .halo {
  position: absolute; inset: -3%; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,255,255,.5);
  animation: halo 3s ease-out infinite;
}
.logoWrap img {
  position: relative; width: 100%; display: block;
  filter: drop-shadow(0 20px 30px rgba(110,20,0,.45));
  animation: breathe 4s ease-in-out infinite;
}

.tag { position: absolute; z-index: 7; text-align: center; }
.tag b { display: block; font-weight: normal; text-shadow: 0 5px 0 rgba(120,25,0,.3); }
.tag small { display: block; letter-spacing: 6px; opacity: .95; }

/* ---------- Transición entre ciclos ---------- */
#wipe {
  position: absolute; z-index: 50; top: -20%; height: 140%; width: 160%; left: 0;
  transform: translateX(-110%) skewX(-14deg);
  display: flex; pointer-events: none;
}
#wipe i { display: block; height: 100%; }
#wipe .w1 { width: 9%; background: #fff; }
#wipe .w2 { width: 7%; background: var(--green); }
#wipe .w3 { flex: 1; background: var(--red); display: flex; align-items: center; justify-content: center; }
#wipe .w3 span { transform: skewX(14deg); font-size: 120px; letter-spacing: 2px; text-shadow: 0 8px 0 rgba(100,0,20,.35); }
#wipe .w4 { width: 7%; background: var(--strip); }
#wipe.go { animation: wipe 2.4s cubic-bezier(.77, 0, .18, 1) both; }

/* ---------- Animaciones de entrada (se re-disparan con .intro) ---------- */
.intro .a-logo   { animation: logoIn 1.4s var(--pop) both;  animation-delay: var(--d); }
.intro .a-food   { animation: foodIn 1.2s var(--smooth) both; animation-delay: var(--d); }
.intro .a-hdr    { animation: hdrIn .9s var(--smooth) both; animation-delay: var(--d); }
.intro .a-box    { animation: boxIn 1s var(--pop) both;     animation-delay: var(--d); }
.intro .a-row    { animation: rowIn .7s var(--smooth) both; animation-delay: var(--d); }
.intro .a-price  { animation: priceIn .7s var(--pop) both;  animation-delay: var(--d); }
.intro .a-up     { animation: upIn .9s var(--smooth) both;  animation-delay: var(--d); }

@keyframes logoIn { 0% { opacity: 0; transform: scale(.2) rotate(-200deg); } 100% { opacity: 1; transform: none; } }
@keyframes foodIn { 0% { opacity: 0; transform: translateY(120px) scale(.7) rotate(-12deg); } 100% { opacity: 1; transform: none; } }
@keyframes hdrIn  { 0% { clip-path: inset(0 100% 0 0 round 30px); transform: translateX(-60px); } 100% { clip-path: inset(0 0 0 0 round 30px); transform: none; } }
@keyframes boxIn  { 0% { opacity: 0; transform: translateY(80px) scale(.92); } 100% { opacity: 1; transform: none; } }
@keyframes rowIn  { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: none; } }
@keyframes priceIn{ 0% { opacity: 0; transform: scale(0) rotate(-20deg); } 100% { opacity: 1; transform: none; } }
@keyframes upIn   { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: none; } }

/* ---------- Animaciones en bucle ---------- */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes bob     { 0% { transform: translateY(-12px) rotate(-3deg); } 100% { transform: translateY(14px) rotate(3deg); } }
@keyframes sway    { 0% { transform: rotate(-1.6deg); } 100% { transform: rotate(1.6deg); } }
@keyframes drift   { 0% { transform: translate(-4%, -3%); } 100% { transform: translate(5%, 4%); } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes halo    { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 100% { box-shadow: 0 0 0 60px rgba(255,255,255,0); } }
@keyframes shine   { 0% { transform: translateX(-130%); } 22%,100% { transform: translateX(130%); } }
@keyframes barSheen { from { background-position: 130% 0, 0 0; } to { background-position: -30% 0, 0 0; } }
@keyframes arrowNudge { from { transform: translate(0, -50%); } to { transform: translate(8px, -50%); } }
@keyframes prPop   { 0% { transform: scale(1); } 30% { transform: scale(.88); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes prBeat  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes ring    { 0% { opacity: 0; transform: scale(.5); } 10% { opacity: .9; } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes burst   { 0% { opacity: 0; transform: scale(.4) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2) rotate(40deg); } }
@keyframes prFlip  { 0% { transform: rotateX(0) scale(1); } 50% { transform: rotateX(180deg) scale(1.25); } 100% { transform: rotateX(360deg) scale(1); } }
@keyframes wipe    { 0% { transform: translateX(-110%) skewX(-14deg); } 100% { transform: translateX(80%) skewX(-14deg); } }

/* ---------- Botón pantalla completa ---------- */
#fsBtn {
  position: fixed; z-index: 100; right: 3vmin; bottom: 3vmin;
  display: flex; align-items: center; gap: 1.2vmin;
  padding: 1.6vmin 3vmin;
  font-family: 'Anton', Impact, sans-serif; font-style: italic; font-size: 3.2vmin; letter-spacing: 1px;
  color: #fff; background: var(--red);
  border: .4vmin solid #fff; border-radius: 2.4vmin;
  box-shadow: 0 1.2vmin 3vmin rgba(100,20,0,.45);
  cursor: pointer;
  opacity: 0; transform: translateY(3vmin) scale(.9); pointer-events: none;
  transition: opacity .5s var(--smooth), transform .5s var(--pop);
}
#fsBtn svg { width: 3.6vmin; height: 3.6vmin; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#fsBtn:hover { background: var(--green); }
body.show-ui { cursor: default; }
body.show-ui #fsBtn { opacity: 1; transform: none; pointer-events: auto; }

/* =========================================================
   VERSIÓN 2: banda superior, rayas diagonales, efectos al azar
   ========================================================= */
.v2 #stripes {
  position: absolute; top: 0; bottom: 0; left: -260px; right: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.055) 0 46px, rgba(255,255,255,0) 46px 92px);
  background-size: 260px 260px;
  animation: stripes 6s linear infinite;
}
.topbar {
  position: absolute; z-index: 8; left: 0; right: 0; top: 0; height: 170px;
  background: var(--red);
  border-bottom: 8px solid #fff;
  box-shadow: 0 8px 0 var(--green), 0 22px 40px rgba(100,20,0,.35);
  overflow: hidden;
}
.ticker { position: absolute; left: 245px; right: 0; top: 0; bottom: 0; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker .track { display: flex; white-space: nowrap; font-size: 84px; line-height: 1; animation: marquee 32s linear infinite;
  text-shadow: 0 6px 0 rgba(100,0,20,.35); }
.ticker .track span { padding-right: 60px; }
.ticker .track i { font-style: normal; color: #FFD27A; padding: 0 40px; }

.v2 .panel { perspective: 1800px; }
.v2 .box::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: 26px;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%) no-repeat;
  background-size: 250% 100%; background-position: 160% 0;
}
.v2 .panel.spot { z-index: 9; animation: spotPulse 2.6s var(--smooth); }
.v2 .panel.spot .box::after { animation: sheen 1.6s var(--smooth); }

.v2.out .panel { animation: cardOut .8s cubic-bezier(.6, 0, .8, .2) both; animation-delay: var(--pd); }
.intro .a-bar { animation: barIn 1s var(--smooth) both; animation-delay: var(--d); }

/* Entradas aleatorias */
.v2.intro[data-fx="flip"]  .a-box { animation: flipIn 1.1s var(--smooth) both; animation-delay: var(--d); transform-origin: 50% 0; }
.v2.intro[data-fx="drop"]  .a-box { animation: dropIn 1.1s var(--pop) both;    animation-delay: var(--d); }
.v2.intro[data-fx="zoom"]  .a-box { animation: zoomIn 1s var(--pop) both;      animation-delay: var(--d); }
.v2.intro[data-fx="swing"] .a-box { animation: swingIn 1.2s var(--pop) both;   animation-delay: var(--d); transform-origin: 0 0; }
.v2.intro[data-fx="drop"]  .a-hdr { animation: dropIn .9s var(--pop) both;     animation-delay: var(--d); }
.v2.intro[data-fx="zoom"]  .a-hdr { animation: zoomIn .9s var(--pop) both;     animation-delay: var(--d); }
.v2.intro[data-fx="flip"]  .a-row,
.v2.intro[data-fx="swing"] .a-row { animation: rowInR .7s var(--smooth) both;  animation-delay: var(--d); }

@keyframes stripes   { to { transform: translateX(260px); } }
@keyframes marquee   { to { transform: translateX(-50%); } }
@keyframes barIn     { 0% { transform: translateY(-110%); } 100% { transform: none; } }
@keyframes spotPulse { 0%,100% { transform: none; } 35% { transform: scale(1.035) rotate(-.4deg); } }
@keyframes sheen     { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes priceWave { 0%,100% { transform: none; } 45% { transform: translateY(-12px) scale(1.3); color: #FFF3B0; } }
@keyframes nmWave    { 0%,100% { transform: none; } 45% { transform: translateX(8px); } }
@keyframes cardOut   { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-40px) rotateX(70deg) scale(.9); } }
@keyframes flipIn    { 0% { opacity: 0; transform: rotateX(-95deg); } 100% { opacity: 1; transform: none; } }
@keyframes dropIn    { 0% { opacity: 0; transform: translateY(-260px); } 100% { opacity: 1; transform: none; } }
@keyframes zoomIn    { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes swingIn   { 0% { opacity: 0; transform: rotate(-14deg) translateX(-120px); } 100% { opacity: 1; transform: none; } }
@keyframes rowInR    { 0% { opacity: 0; transform: translateX(60px); } 100% { opacity: 1; transform: none; } }
.v2 .logoWrap { z-index: 9; }

/* ---------- Rotativo ---------- */
.scene { display: none; }
.scene.on { display: block; }