/* ============================================================================
 * banner-colorea — "Coloreá a Gasolito": concurso Día del Niño + descarga de lámina.
 * Claro/luminoso (día de dibujar) para diferenciarse del banner de retorno (oscuro).
 * El botón de DESCARGA es el héroe (late). Gasolito ofrece la hoja + crayón; sobre
 * su hoja aparecen trazos de color (el "coloreo"). Scopeado bajo .pg-colorea.
 * Anima transform/opacity. Respeta reduced-motion y focus-visible.
 * Assets: img/hero/gasolito_dibujame.webp + PDF en img/descargas/
 * ==========================================================================*/
.pg-colorea{
  --ink:#1b2550; --ink-soft:#54608f; --gold:#f4b400; --coral:#ff5d73; --sky:#59b3e6;
  --cx-ease:cubic-bezier(.22,1,.36,1);
  position:relative; overflow:hidden; border-radius:20px; margin:10px 0;
  min-height:520px; isolation:isolate;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:
    radial-gradient(90% 120% at 84% 6%, #fff3cf 0%, transparent 46%),
    radial-gradient(120% 120% at 16% 100%, #dff0ff 0%, transparent 55%),
    linear-gradient(180deg, #eaf5ff 0%, #ffffff 100%);
}

.pg-colorea .confetti{position:absolute;inset:0;z-index:0;pointer-events:none}
.pg-colorea .confetti i{position:absolute;width:14px;height:14px;border-radius:3px;opacity:.85;animation:cxg-drift 6s ease-in-out infinite}
.pg-colorea .confetti i:nth-child(1){left:10%;top:18%;background:var(--coral);transform:rotate(20deg);animation-delay:-.4s}
.pg-colorea .confetti i:nth-child(2){left:26%;top:74%;background:var(--sky);transform:rotate(-15deg);animation-delay:-1.6s}
.pg-colorea .confetti i:nth-child(3){left:60%;top:10%;background:var(--gold);border-radius:50%;animation-delay:-2.6s}
.pg-colorea .confetti i:nth-child(4){left:92%;top:58%;background:#34c98a;transform:rotate(30deg);animation-delay:-3.4s}
.pg-colorea .confetti i:nth-child(5){left:70%;top:86%;background:#8b5cf6;border-radius:50%;animation-delay:-2s}

/* Contenido capado y centrado (no se separa en monitores anchos) */
.pg-colorea .inner{
  position:relative; z-index:2; max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:14px; padding:30px 24px;
  align-items:center; min-height:inherit;
}

.pg-colorea .badge{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:var(--coral);color:#fff;
  font-weight:800;font-size:.92rem;padding:8px 16px;border-radius:999px;box-shadow:0 8px 18px rgba(255,93,115,.35);
  opacity:0;animation:cxg-rise .6s var(--cx-ease) .1s forwards}
.pg-colorea .title{margin:14px 0 0;font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--ink);
  font-size:clamp(2.5rem,7vw,4.4rem);text-wrap:balance;opacity:0;animation:cxg-rise .7s var(--cx-ease) .22s forwards}
.pg-colorea .title em{font-style:normal;position:relative;color:var(--gold);white-space:nowrap}
.pg-colorea .title em svg{position:absolute;left:0;right:0;bottom:-.14em;width:100%;height:.14em;overflow:visible}
.pg-colorea .title em svg path{stroke:var(--coral);stroke-width:10;fill:none;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:cxg-draw .7s var(--cx-ease) .8s forwards}
.pg-colorea .sub{margin:14px 0 0;max-width:42ch;font-size:clamp(1.05rem,2.3vw,1.28rem);font-weight:600;line-height:1.4;color:var(--ink-soft);
  opacity:0;animation:cxg-rise .7s var(--cx-ease) .4s forwards}
.pg-colorea .cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px;opacity:0;animation:cxg-rise .7s var(--cx-ease) .55s forwards}
.pg-colorea .btn{display:inline-flex;align-items:center;gap:12px;background:var(--coral);color:#fff;text-decoration:none;
  font-weight:800;font-size:clamp(1.05rem,2.4vw,1.3rem);padding:16px 28px;border-radius:16px;border:none;cursor:pointer;
  box-shadow:0 14px 30px rgba(255,93,115,.42);animation:cxg-pulse 2.4s ease-in-out 1.4s infinite;
  transition:filter 140ms var(--cx-ease)}
.pg-colorea .btn svg{width:1.35em;height:1.35em;flex-shrink:0}
.pg-colorea .btn:hover{filter:brightness(1.05)}
.pg-colorea .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.pg-colorea .chip{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--ink);font-weight:800;font-size:.95rem;
  padding:10px 16px;border-radius:999px;box-shadow:0 6px 16px rgba(27,37,80,.12);border:2px solid var(--gold)}
/* Bases del concurso: enlace SECUNDARIO. Deliberadamente más discreto que el botón de
   descargar la lámina — hay un solo CTA primario por vista. Igual respeta los 44px de alto
   mínimo para que se pueda tocar cómodo con el pulgar. */
.pg-colorea .bases{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  min-height:44px;padding:10px 16px;border-radius:12px;
  background:#fff;border:2px solid rgba(27,37,80,.12);
  color:var(--ink);font-weight:700;font-size:.98rem;text-decoration:none;
  opacity:0;animation:cxg-rise .7s var(--cx-ease) .62s forwards;
  transition:border-color 140ms var(--cx-ease), transform 140ms var(--cx-ease);
}
.pg-colorea .bases:hover{border-color:var(--coral);transform:translateY(-2px)}
.pg-colorea .bases:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.pg-colorea .bases svg{width:1.15em;height:1.15em;flex-shrink:0;color:var(--coral)}
.pg-colorea .bases__pdf{
  font-size:.68rem;font-weight:800;letter-spacing:.04em;
  background:rgba(27,37,80,.08);color:var(--ink-soft);padding:2px 6px;border-radius:5px;
}

.pg-colorea .micro{margin:16px 0 0;font-size:1.12rem;line-height:1.45;font-weight:600;color:var(--ink-soft);
  opacity:0;animation:cxg-rise .7s var(--cx-ease) .7s forwards}
.pg-colorea .micro b{color:var(--ink)}

.pg-colorea .scene{position:relative;justify-self:center;width:min(440px,90vw);aspect-ratio:1/1;opacity:0;animation:cxg-rise .8s var(--cx-ease) .3s forwards}
.pg-colorea .gaso{position:absolute;inset:0;z-index:2}
.pg-colorea .gaso img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(27,37,80,.22));animation:cxg-bob 5s ease-in-out infinite}
/* trazos de color que "colorean" la hoja que sostiene (loop) */
.pg-colorea .scribble{position:absolute;left:19%;top:47%;width:17%;height:19%;z-index:3;transform:rotate(-5deg);pointer-events:none}
.pg-colorea .scribble svg{width:100%;height:100%;overflow:visible}
.pg-colorea .scribble path{fill:none;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120;animation:cxg-color 3.2s var(--cx-ease) infinite}
.pg-colorea .scribble path:nth-child(1){stroke:var(--coral);stroke-width:11;animation-delay:1.4s}
.pg-colorea .scribble path:nth-child(2){stroke:var(--sky);stroke-width:11;animation-delay:1.9s}
.pg-colorea .scribble path:nth-child(3){stroke:var(--gold);stroke-width:11;animation-delay:2.4s}

@media (min-width:820px){
  .pg-colorea .inner{grid-template-columns:1.12fr .88fr;padding:44px 52px;gap:30px}
  .pg-colorea .scene{width:100%;max-width:500px;justify-self:end}
}

@keyframes cxg-rise{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
@keyframes cxg-draw{to{stroke-dashoffset:0}}
@keyframes cxg-bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes cxg-pulse{0%,100%{transform:scale(1);box-shadow:0 14px 30px rgba(255,93,115,.42)}50%{transform:scale(1.04);box-shadow:0 20px 40px rgba(255,93,115,.55)}}
@keyframes cxg-drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(12deg)}}
@keyframes cxg-color{0%{stroke-dashoffset:120}45%{stroke-dashoffset:0}75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

@media (prefers-reduced-motion:reduce){
  .pg-colorea .badge,.pg-colorea .title,.pg-colorea .title em svg path,.pg-colorea .sub,.pg-colorea .cta,
  .pg-colorea .bases,.pg-colorea .micro,.pg-colorea .scene,.pg-colorea .gaso img,.pg-colorea .btn,
  .pg-colorea .confetti i,.pg-colorea .scribble path{
    animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .pg-colorea .scribble{display:none}
}