/* ============================================================================
 * banner-gasolito — "La Revelación": placa de retorno de Gasolito + cupón.
 * Hero de campaña (Día del Niño). Incógnito (silueta + ?) 3s → revelación
 * silueta→color de Gasolito en 2s → texto + cupón + props flotando.
 * Sin scroll-trigger: la coreografía corre al cargar. Todo scopeado bajo
 * .pg-bnr-gaso. Anima transform/opacity/filter/clip. Respeta reduced-motion.
 * Assets: img/hero/gasolito-reveal.webp + img/hero/props/*.webp
 * ==========================================================================*/
.pg-bnr-gaso{
  /* Paleta de campaña (overridable por JSON: --g-accent) */
  --stage-1:#171341; --stage-2:#241a6e; --glow:#ffcf3f;
  --g-body:#ffce3a; --g-accent:#ff5d73; --sky:#5cc0f2; --ticket:#fff; --ink:#171341;
  --bg-ease-out:cubic-bezier(.22,1,.36,1); --bg-ease-expo:cubic-bezier(.16,1,.3,1);
  position:relative; overflow:hidden; border-radius:20px; margin:10px 0;
  min-height:560px; isolation:isolate; color:#fff;
  background:radial-gradient(120% 120% at 60% 38%, var(--stage-2) 0%, var(--stage-1) 68%);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
/* Contenido capado y centrado: en monitores anchos el texto y Gasolito no se
   separan (el fondo sigue full-bleed, esto sólo centra la escena). */
.pg-bnr-gaso .frame{position:relative; z-index:1; max-width:1280px; margin:0 auto; min-height:inherit}

/* Luz cálida que florece detrás de Gasolito */
.pg-bnr-gaso .glow{
  position:absolute; z-index:0; top:8%; right:8%; width:64%; aspect-ratio:1/1;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb,var(--glow) 82%, transparent) 0%, transparent 62%);
  filter:blur(6px); opacity:0; transform:scale(.2);
  animation:bg-glow-bloom 1400ms var(--bg-ease-expo) 2860ms forwards;
}
.pg-bnr-gaso .rays{
  position:absolute; z-index:0; width:90%; aspect-ratio:1/1; right:-6%; top:-24%;
  background:conic-gradient(from 0deg, transparent 0 8%, color-mix(in srgb,var(--glow) 22%, transparent) 9% 11%, transparent 12% 20%,
            color-mix(in srgb,var(--glow) 16%, transparent) 21% 22%, transparent 23%);
  opacity:0; mix-blend-mode:screen; pointer-events:none;
  animation:bg-rays-in 1400ms var(--bg-ease-out) 3300ms forwards, bg-rays-spin 60s linear infinite;
}

.pg-bnr-gaso .inner{
  position:relative; z-index:2; display:grid; gap:20px; grid-template-columns:1fr;
  align-items:center; padding:34px 26px 30px; min-height:inherit;
}

/* ---- Texto ---- */
.pg-bnr-gaso .text{max-width:600px}
.pg-bnr-gaso .hi{
  display:inline-flex; align-items:center; gap:10px;
  font-size:clamp(1.05rem,2.2vw,1.25rem); font-weight:800; letter-spacing:.01em;
  color:color-mix(in srgb,var(--glow) 90%, #fff);
  opacity:0; animation:bg-rise 700ms var(--bg-ease-out) 4000ms forwards;
}
.pg-bnr-gaso .hi::before{content:'';width:34px;height:3px;border-radius:2px;background:var(--glow)}

.pg-bnr-gaso .row{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3vw,44px); margin-top:14px}
.pg-bnr-gaso .copy{flex:1 1 320px; min-width:0}

.pg-bnr-gaso .title{
  margin:10px 0 0; font-weight:900; line-height:.98; letter-spacing:-.02em;
  font-size:clamp(2.4rem,7vw,4.4rem); text-wrap:balance;
}
.pg-bnr-gaso .title .w{display:inline-block; opacity:0; transform:translateY(22px); animation:bg-rise-y 720ms var(--bg-ease-expo) forwards}
.pg-bnr-gaso .title .w:nth-of-type(1){animation-delay:4150ms}
.pg-bnr-gaso .title .w:nth-of-type(2){animation-delay:4230ms}
.pg-bnr-gaso .title .w:nth-of-type(3){animation-delay:4310ms}
.pg-bnr-gaso .name{
  display:inline-block; position:relative; color:var(--g-body);
  font-weight:900; letter-spacing:-.01em; transform:rotate(-2deg);
  text-shadow:0 3px 0 color-mix(in srgb,var(--g-body) 55%, #000), 0 6px 18px rgba(0,0,0,.35);
  opacity:0; animation:bg-pop 640ms var(--bg-ease-expo) 4450ms forwards;
}
.pg-bnr-gaso .name svg{position:absolute; left:0; right:0; bottom:-.16em; width:100%; height:.16em; overflow:visible}
.pg-bnr-gaso .name svg path{stroke:var(--g-accent); stroke-width:10; fill:none; stroke-linecap:round;
  stroke-dasharray:420; stroke-dashoffset:420; animation:bg-draw 700ms var(--bg-ease-out) 4750ms forwards}

.pg-bnr-gaso .sub{
  margin:16px 0 0; font-size:clamp(1.12rem,2.5vw,1.38rem); font-weight:600; line-height:1.4;
  color:color-mix(in srgb,#fff 88%, var(--sky)); max-width:44ch;
  opacity:0; animation:bg-rise 700ms var(--bg-ease-out) 4600ms forwards;
}

/* ---- Cupón ---- */
.pg-bnr-gaso .actions{flex:0 0 auto; opacity:0; animation:bg-rise 700ms var(--bg-ease-out) 4800ms forwards}
.pg-bnr-gaso .ticket{
  position:relative; display:flex; align-items:center; gap:18px;
  background:var(--ticket); color:var(--ink); border-radius:16px; padding:18px 26px;
  box-shadow:0 18px 40px color-mix(in srgb,var(--g-accent) 45%, transparent), 0 8px 20px rgba(0,0,0,.28);
  overflow:hidden; border:none; cursor:pointer; font:inherit;
  transition:transform 160ms var(--bg-ease-out), box-shadow 160ms var(--bg-ease-out);
}
.pg-bnr-gaso .ticket:hover,.pg-bnr-gaso .ticket:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 26px 54px color-mix(in srgb,var(--g-accent) 58%, transparent), 0 12px 26px rgba(0,0,0,.34);
  outline:none;
}
.pg-bnr-gaso .ticket:focus-visible{outline:3px solid var(--g-accent); outline-offset:3px}
.pg-bnr-gaso .ticket::before,.pg-bnr-gaso .ticket::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;
  background:var(--stage-2); top:50%; transform:translateY(-50%)}
.pg-bnr-gaso .ticket::before{left:-9px} .pg-bnr-gaso .ticket::after{right:-9px}
.pg-bnr-gaso .shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 66%);
  transform:translateX(-120%); animation:bg-shine 1200ms var(--bg-ease-out) 5300ms}
.pg-bnr-gaso .t-l{display:flex;flex-direction:column;line-height:1;text-align:left}
.pg-bnr-gaso .t-k{font-size:.82rem;font-weight:800;color:color-mix(in srgb,var(--ink) 55%, #fff);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.pg-bnr-gaso .t-code{font-size:1.6rem;font-weight:900;letter-spacing:.01em;white-space:nowrap;display:flex;align-items:baseline;gap:8px}
.pg-bnr-gaso .t-code b{color:var(--g-accent)}
.pg-bnr-gaso .t-off{background:var(--g-accent);color:#fff;font-size:1.55rem;font-weight:900;padding:12px 16px;border-radius:12px;box-shadow:0 6px 16px color-mix(in srgb,var(--g-accent) 45%, transparent)}
.pg-bnr-gaso .t-copy{font-size:1rem;font-weight:700;color:color-mix(in srgb,var(--ink) 52%, #fff);margin-top:6px}

/* ---- Escenario: Gasolito ---- */
.pg-bnr-gaso .stage{position:relative; justify-self:center; width:min(440px,86vw); aspect-ratio:1/1}
.pg-bnr-gaso .gaso{
  position:absolute; inset:0 0 -2% 0; z-index:2;
  filter:brightness(0);
  animation:bg-reveal-color 2000ms cubic-bezier(.65,0,.35,1) 3000ms forwards, bg-bob 5s ease-in-out 5000ms infinite;
}
.pg-bnr-gaso .gaso img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.35)); transform:scale(1.12); transform-origin:center 88%}
.pg-bnr-gaso .qmark{position:absolute;inset:0;display:grid;place-items:center;z-index:3;font-size:9rem;font-weight:900;
  color:rgba(255,255,255,.5);animation:bg-q-pulse 1500ms ease-in-out 300ms 2, bg-q-out 900ms var(--bg-ease-out) 3000ms forwards}

/* ---- Props flotando ---- */
.pg-bnr-gaso .props{position:absolute; inset:-10% -8%; z-index:3; pointer-events:none}
.pg-bnr-gaso .prop{position:absolute; opacity:0; animation:bg-prop-in 620ms var(--bg-ease-out) forwards}
.pg-bnr-gaso .prop .e{display:block; width:100%; height:auto; animation:bg-bob 5s ease-in-out infinite}
.pg-bnr-gaso .prop--sheet{width:clamp(96px,16vw,210px); bottom:5%; right:3%; z-index:4; animation-delay:5250ms}
.pg-bnr-gaso .prop--sheet .e{filter:drop-shadow(0 16px 18px rgba(0,0,0,.45)); animation-delay:-3.2s}
.pg-bnr-gaso .prop--pencils{width:clamp(84px,14vw,185px); bottom:20%; left:1%; animation-delay:4950ms}
.pg-bnr-gaso .prop--pencils .e{filter:drop-shadow(0 13px 15px rgba(0,0,0,.42)); animation-delay:-.6s}
.pg-bnr-gaso .prop--palette{width:clamp(82px,13vw,175px); top:46%; right:2%; animation-delay:5100ms}
.pg-bnr-gaso .prop--palette .e{filter:drop-shadow(0 13px 15px rgba(0,0,0,.42)); animation-delay:-2.4s}
.pg-bnr-gaso .prop--brush{width:clamp(70px,11vw,150px); top:26%; left:-1%; animation-delay:5050ms}
.pg-bnr-gaso .prop--brush .e{filter:drop-shadow(0 10px 12px rgba(0,0,0,.36)); animation-delay:-1.6s}
.pg-bnr-gaso .prop--spark{width:clamp(58px,9vw,120px); top:5%; right:1%; animation-delay:5350ms}
.pg-bnr-gaso .prop--spark .e{filter:drop-shadow(0 0 10px rgba(255,207,63,.6)); animation:bg-twinkle 2.4s ease-in-out infinite}
.pg-bnr-gaso .prop--plane{width:clamp(80px,12vw,165px); top:3%; left:12%; z-index:1; opacity:1; animation:none}
.pg-bnr-gaso .prop--plane .e{filter:drop-shadow(0 8px 12px rgba(0,0,0,.3)) blur(.3px);
  animation:bg-plane-fly 1700ms var(--bg-ease-out) 4700ms both, bg-bob 6s ease-in-out 6400ms infinite}

/* ---- Desktop ---- */
@media (min-width:820px){
  .pg-bnr-gaso .inner{grid-template-columns:1fr 1fr; padding:40px 48px}
  .pg-bnr-gaso .stage{width:100%; max-width:640px; justify-self:end}
  .pg-bnr-gaso .qmark{font-size:12rem}
}

/* ---- Keyframes ---- */
@keyframes bg-reveal-color{0%{filter:brightness(0) blur(3px);transform:scale(.92)}35%{filter:brightness(.12) blur(2px)}70%{filter:brightness(.85) blur(.3px);transform:scale(1.02)}88%{filter:brightness(1.08) blur(0)}100%{filter:none;transform:scale(1)}}
@keyframes bg-glow-bloom{0%{opacity:0;transform:scale(.2)}55%{opacity:.95}100%{opacity:.8;transform:scale(1)}}
@keyframes bg-rays-in{to{opacity:.6}}
@keyframes bg-rays-spin{to{transform:rotate(360deg)}}
@keyframes bg-q-pulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.7;transform:scale(1.06)}}
@keyframes bg-q-out{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}
@keyframes bg-rise{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes bg-rise-y{to{opacity:1;transform:none}}
@keyframes bg-pop{0%{opacity:0;transform:rotate(-2deg) scale(.6)}70%{transform:rotate(-2deg) scale(1.08)}100%{opacity:1;transform:rotate(-2deg) scale(1)}}
@keyframes bg-draw{to{stroke-dashoffset:0}}
@keyframes bg-bob{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes bg-shine{to{transform:translateX(120%)}}
@keyframes bg-prop-in{0%{opacity:0;transform:translateY(16px) scale(.55)}70%{transform:translateY(0) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes bg-twinkle{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.18)}}
@keyframes bg-plane-fly{0%{opacity:0;transform:translate(-90px,70px) rotate(-22deg)}55%{opacity:1}100%{opacity:1;transform:translate(0,0) rotate(-8deg)}}

/* ---- Accesibilidad: sin animación, todo visible en su estado final ---- */
@media (prefers-reduced-motion:reduce){
  .pg-bnr-gaso .glow,.pg-bnr-gaso .rays,.pg-bnr-gaso .hi,.pg-bnr-gaso .title .w,.pg-bnr-gaso .name,
  .pg-bnr-gaso .name svg path,.pg-bnr-gaso .sub,.pg-bnr-gaso .actions,.pg-bnr-gaso .gaso,.pg-bnr-gaso .qmark,
  .pg-bnr-gaso .shine,.pg-bnr-gaso .prop,.pg-bnr-gaso .prop .e{
    animation:none!important; opacity:1!important; transform:none!important; filter:none!important; stroke-dashoffset:0!important;
  }
  .pg-bnr-gaso .qmark{display:none}
  .pg-bnr-gaso .glow{opacity:.8;transform:scale(1)}
  .pg-bnr-gaso .gaso img{transform:scale(1.12)}
}