/* Base comum às 3 opções: cores, cabeçalho e o "motion" dos banners. */
:root{--bg:#0B0C0F;--txt:#F2F0EB;--mut:#9AA0AA;--acc:#F0A93B;--line:#23262D}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font-family:Inter,system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.grao{position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:50;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- fundo do banner ---------- */
.fundo{position:absolute;inset:0;overflow:hidden;background:#111}
.fundo img,.fundo video{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;
  animation:kenburns 16s ease-in-out infinite alternate;filter:saturate(1.05)}
.fundo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,9,11,.92) 0%,rgba(8,9,11,.6) 48%,rgba(8,9,11,.18) 100%)}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-2%,-2%)}}

/* brilho que atravessa o banner */
.brilho{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.brilho::before{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);transform:rotate(18deg);
  animation:varre 6s ease-in-out infinite;animation-delay:var(--atraso,0s)}
@keyframes varre{0%,55%{left:-60%}100%{left:130%}}

/* fundos animados para quem não tem foto */
.anim-rede{background:radial-gradient(circle at 20% 30%,rgba(21,214,160,.35) 0 2px,transparent 3px) 0 0/38px 38px,
  radial-gradient(circle at 70% 60%,rgba(85,240,198,.25) 0 1.5px,transparent 2.5px) 0 0/54px 54px,
  radial-gradient(600px 220px at 85% 50%,rgba(21,214,160,.28),transparent 70%),#04121a;
  animation:deriva 22s linear infinite}
.anim-lote{background:
  linear-gradient(rgba(244,196,48,.22) 1px,transparent 1px) 0 0/44px 44px,
  linear-gradient(90deg,rgba(244,196,48,.22) 1px,transparent 1px) 0 0/44px 44px,
  radial-gradient(500px 220px at 80% 40%,rgba(244,196,48,.25),transparent 70%),#15130a;
  animation:deriva 30s linear infinite}
.anim-ondas{background:repeating-radial-gradient(circle at 85% 50%,rgba(34,211,238,.22) 0 2px,transparent 3px 22px),
  radial-gradient(500px 220px at 85% 50%,rgba(34,211,238,.25),transparent 70%),#061218;
  animation:pulsa 5s ease-in-out infinite}
.anim-politica{background:
  repeating-linear-gradient(115deg,rgba(240,169,59,.10) 0 2px,transparent 2px 26px),
  radial-gradient(520px 240px at 50% 120%,rgba(240,169,59,.35),transparent 70%),
  radial-gradient(400px 200px at 10% -20%,rgba(55,147,199,.25),transparent 70%),#0d0c0a;
  background-size:300px 300px,100% 100%,100% 100%;animation:deriva-p 18s linear infinite}
@keyframes deriva-p{to{background-position:300px 0,0 0,0 0}}
@keyframes deriva{to{background-position:380px 190px,540px -270px,0 0,0 0}}
@keyframes pulsa{50%{filter:brightness(1.35)}}

/* etiqueta EM BREVE */
.embreve{display:inline-block;font:700 9px/1 'JetBrains Mono',monospace;letter-spacing:.14em;color:#04121a;
  background:var(--c);border-radius:99px;padding:5px 8px;vertical-align:middle;margin-left:6px}

/* logo: sombra para destacar sobre foto */
.logo{display:block;object-fit:contain;object-position:left center;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}

/* botão final */
.zap{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--acc);color:#0B0C0F;font-weight:800;
  border-radius:99px;padding:17px;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 10px 40px rgba(240,169,59,.25)}
.rodape{text-align:center;color:#5d626b;font-size:12px;margin-top:22px}

@media (prefers-reduced-motion:reduce){*{animation:none!important}}