/* =================================================================
   ZZZ LATAM — banner.css  (revamp · AMARILLO ZZZ + NEGRO)
   Fondo amarillo de marca + halftone + estampado ZZZ; título ZENLESS
   negro (sin recorte) detrás del grupo; ZONE ZERO + LATAM; badge ZZZ.
   ================================================================= */
:root{
  --yellow:#FFDE17; --yellow-hi:#FFE969; --yellow-lo:#F5C400;
  --ink:#16170F; --black:#121310;
  --ff-display:'Anton', Impact, sans-serif;
  --ff-body:'Archivo', system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ff-body);overflow:hidden;background:var(--yellow);color:var(--ink)}

.banner-wrapper{position:relative;width:100%;height:100%;overflow:hidden}
.banner{position:relative;width:100%;height:100%;overflow:hidden;
  background:radial-gradient(120% 130% at 28% 18%, var(--yellow-hi) 0%, var(--yellow) 52%, var(--yellow-lo) 100%);}

/* estampado ZZZ (sutil) */
.zzz-stamp{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url('assets/bg-pattern-light.jpg') center/120% auto;opacity:.28;mix-blend-mode:multiply;}
/* halftone (puntos negros, lenguaje ZZZ) */
.halftone{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.10;
  background-image:radial-gradient(circle, #000 26%, transparent 27%);background-size:13px 13px;}
/* resplandor blanco detrás del grupo para separarlo del amarillo */
.glow{position:absolute;right:-4%;bottom:-10%;width:64%;height:130%;z-index:2;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.6), transparent 72%);}

/* eyebrow */
.b-eyebrow{position:absolute;left:5%;top:8%;z-index:6;
  font-family:var(--ff-body);font-weight:800;font-size:clamp(.6rem,1.2vw,1rem);
  letter-spacing:.26em;text-transform:uppercase;color:var(--black);}

/* título ZENLESS — negro, sin recorte, detrás del grupo */
.b-title{position:absolute;left:3%;top:11%;z-index:3;white-space:nowrap;
  font-family:var(--ff-display);font-weight:400;color:var(--black);
  font-size:clamp(56px,13vw,188px);line-height:1.04;letter-spacing:.006em;
  padding:.06em .1em .08em 0;text-transform:uppercase;
  transform:skewX(-3deg);transform-origin:left center;
  text-shadow:0 3px 0 rgba(255,255,255,.45);}

/* bloque inferior-izquierda */
.b-lower{position:absolute;left:4.5%;bottom:9%;z-index:6;display:flex;flex-direction:column;gap:.4em}
.b-row{display:flex;align-items:center;gap:.5em;transform:skewX(-3deg)}
.b-zone{font-family:var(--ff-display);font-weight:400;
  font-size:clamp(26px,4.6vw,64px);line-height:.86;letter-spacing:.01em;color:var(--black);
  text-shadow:0 2px 0 rgba(255,255,255,.5);}
.b-latam{font-family:var(--ff-display);
  font-size:clamp(18px,3vw,42px);line-height:1;letter-spacing:.05em;color:#fff;
  background:var(--black);padding:.08em .42em .02em;
  box-shadow:5px 5px 0 rgba(0,0,0,.18);}

/* grupo de personajes */
.cast{position:absolute;right:-1%;bottom:0;height:104%;width:auto;z-index:4;
  filter:drop-shadow(-10px 10px 20px rgba(60,50,0,.30));
  pointer-events:none;user-select:none;}

/* badge ZZZ */
.zzz-badge{position:absolute;right:3%;bottom:8%;z-index:7;
  display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 10px;
  background:var(--black);padding:11px 15px;border-radius:10px;
  box-shadow:0 12px 26px rgba(16,18,24,.4);}
.zzz-badge__logo{grid-row:1 / span 2;width:clamp(28px,3.2vw,44px);height:auto;display:block}
.zzz-badge__zzz{font-family:var(--ff-display);color:#fff;font-size:clamp(15px,1.9vw,25px);
  letter-spacing:.14em;line-height:1;align-self:end;}
.zzz-badge__sub{font-family:var(--ff-body);font-weight:700;color:#fff;
  font-size:clamp(6px,.8vw,9.5px);letter-spacing:.18em;align-self:start;}

/* responsive */
@media (max-width:760px){
  .cast{height:92%;right:-12%}
  .b-title{font-size:clamp(54px,17vw,140px)}
  .zzz-badge{right:4%;bottom:6%;padding:8px 11px}
}
@media (max-width:460px){
  .cast{height:78%;opacity:.95}
  .zzz-badge__sub{display:none}
}