/* ============================================================
   FENAPI 2026 — Design system compartilhado
   Carregado por todas as páginas do site (home, hospedagem,
   curso-blaster). Contém apenas o que é idêntico nas páginas:
   variáveis de marca, reset básico, botões, cabeçalho/menu
   mobile e rodapé. Estilos específicos de cada página continuam
   no <style> local de cada arquivo .html.
   ============================================================ */
:root{
  /* Cores oficiais FENAPI */
  --primary:#232C77;
  --primary-d:#161C4D;
  --secondary:#E7343F;
  --secondary-d:#B91F28;
  --c-ciano:#009FE3;
  --c-verde:#3AAA35;
  --c-amarelo:#FFD500;
  --bk:#000000;
  --g-md:#888888;
  --g-lt:#E8E8E8;
  --wh:#FFFFFF;
  --success:#10B981;
  --error:#EF4444;
  --warning:#F59E0B;
  --info:#3B82F6;
  /* Tipografia */
  --fd:'Parkinsans',sans-serif;
  --fb:'Parkinsans',sans-serif;
  /* Espaçamento base-4 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px;
  /* Raios */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:20px; --r-full:9999px;
  /* Gradientes */
  --grad-institucional:linear-gradient(135deg,var(--primary-d),var(--primary) 55%,var(--secondary-d));
  --grad-piro:linear-gradient(90deg,var(--c-ciano),var(--c-verde),var(--c-amarelo),var(--secondary),var(--primary));
  --grad-glow:radial-gradient(circle at 50% 20%, rgba(0,159,227,.35), transparent 60%), linear-gradient(180deg,#0D0D0D,var(--primary-d) 60%,var(--primary));
  /* Movimento */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--fd);font-weight:800;line-height:1.15;letter-spacing:-.01em;}
.container{max-width:1180px;margin:0 auto;padding:0 var(--sp-6);}
section{padding:var(--sp-24) 0;}
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--c-ciano);margin-bottom:var(--sp-4);}
.eyebrow.on-light{color:var(--primary);}
.section-tag{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--secondary);margin-bottom:var(--sp-2);}

/* BOTÕES */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-family:var(--fd);font-weight:700;font-size:15px;padding:14px 28px;border-radius:var(--r-full);border:2px solid transparent;cursor:pointer;transition:transform .15s var(--spring), box-shadow .2s var(--ease-out), background .2s var(--ease-out);}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--secondary);color:var(--wh);box-shadow:0 8px 24px rgba(231,52,63,.35);}
.btn-primary:hover{background:#ff3c47;}
.btn-outline{border-color:rgba(255,255,255,.55);color:var(--wh);}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-outline-dark{border-color:var(--primary);color:var(--primary);}
.btn-outline-dark:hover{background:var(--primary);color:var(--wh);}
.btn-sm{padding:10px 18px;font-size:13.5px;}
.btn-wpp{background:#25D366;color:var(--wh);}
.btn-wpp:hover{background:#1ebd5a;}
.btn-ghost{background:#F1F2F8;color:var(--primary);}
.btn-ghost:hover{background:#E4E6F5;}
.btn-block{width:100%;}
.btn-pulse{animation:btn-pulse 1.6s ease-in-out infinite;}
.btn-pulse:hover{animation-play-state:paused;}
@keyframes btn-pulse{
  0%,100%{background:var(--secondary);box-shadow:0 8px 24px rgba(231,52,63,.35);}
  50%{background:#FF4D57;box-shadow:0 8px 30px rgba(255,213,0,.55), 0 0 0 7px rgba(255,213,0,.16);}
}
.btn-lg{padding:17px 32px;font-size:16px;}
/* CTA de maior destaque do site: ingresso avulso do show do Dennis DJ.
   Usado no hero, na faixa de destaque, na programação, nos shows e nas barras mobile. */
.btn-dennis{background:var(--secondary);color:var(--wh);box-shadow:0 8px 24px rgba(231,52,63,.4);animation:btn-dennis-blink 1.1s ease-in-out infinite;}
.btn-dennis:hover{animation-play-state:paused;}
@keyframes btn-dennis-blink{
  0%,100%{background:var(--secondary);color:var(--wh);box-shadow:0 8px 24px rgba(231,52,63,.45);}
  50%{background:var(--c-amarelo);color:var(--primary-d);box-shadow:0 8px 30px rgba(255,213,0,.6);}
}
@media(prefers-reduced-motion:reduce){
  .btn-pulse, .btn-dennis{animation:none;}
}

/* BARRA DE AVISO (topo do site) */
.topbar{position:relative;z-index:60;text-align:center;padding:10px var(--sp-4);background:linear-gradient(90deg,#FFD500,#FFF1A8,#FFD500);background-size:200% 100%;color:var(--primary-d);font-family:var(--fd);font-weight:700;font-size:13.5px;letter-spacing:.2px;animation:topbar-slide .5s var(--ease-out) both, topbar-shine 3.2s linear .5s infinite;}
.topbar-inner{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.topbar a{color:inherit;}
.topbar a:hover{text-decoration:underline;}
.topbar strong{color:var(--secondary-d);}
.topbar-dot{color:var(--secondary);font-weight:800;}
@keyframes topbar-shine{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
@keyframes topbar-slide{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
@media(prefers-reduced-motion:reduce){.topbar{animation:none;}}
@media(max-width:640px){.topbar{font-size:12px;padding:9px var(--sp-3);}}

/* POP-UP PROMOCIONAL (show Dennis DJ) */
.popup-overlay{position:fixed;inset:0;background:rgba(6,8,26,.72);backdrop-filter:blur(3px);z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out),visibility .3s;}
.popup-overlay.open{opacity:1;visibility:visible;}
.popup-card{position:relative;background:var(--wh);border-radius:var(--r-xl);max-width:420px;width:100%;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:scale(.9);transition:transform .35s var(--spring);}
.popup-overlay.open .popup-card{transform:scale(1);}
.popup-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:0;font-size:16px;line-height:1;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.popup-close:hover{background:var(--secondary);}
.popup-badge{position:absolute;top:14px;left:14px;background:var(--secondary);color:#fff;font-family:var(--fd);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:6px 12px;border-radius:var(--r-full);z-index:2;}
.popup-image{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--g-lt);}
.popup-body{padding:var(--sp-6) var(--sp-6) var(--sp-8);text-align:center;}
.popup-body h3{font-size:19px;color:var(--primary);margin-bottom:8px;line-height:1.25;}
.popup-body p{font-size:13.5px;color:#555;margin-bottom:var(--sp-5);}
.popup-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;font-family:var(--fd);font-weight:800;font-size:15px;color:#fff;background:var(--secondary);padding:15px 20px;border-radius:var(--r-full);letter-spacing:.3px;box-shadow:0 8px 24px rgba(231,52,63,.4);animation:popup-blink 1.1s ease-in-out infinite;}
@keyframes popup-blink{0%,100%{background:var(--secondary);color:#fff;box-shadow:0 8px 24px rgba(231,52,63,.45);}50%{background:var(--c-amarelo);color:var(--primary-d);box-shadow:0 8px 30px rgba(255,213,0,.6);}}
@media(prefers-reduced-motion:reduce){.popup-cta{animation:none;}}
@media(max-width:480px){.popup-card{max-width:100%;}.popup-body{padding:var(--sp-5) var(--sp-5) var(--sp-6);}}

/* HEADER / NAVEGAÇÃO */
header{position:sticky;top:0;z-index:50;background:rgba(18,23,66,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);transition:background .3s var(--ease-out), box-shadow .3s var(--ease-out);}
header.scrolled{background:rgba(14,18,56,.97);box-shadow:0 8px 24px rgba(0,0,0,.25);}
header.scrolled .nav-logo img{height:44px;}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:10px var(--sp-6);max-width:1280px;margin:0 auto;}
.nav-logo{flex-shrink:0;}
.nav-logo img{height:48px;transition:height .25s var(--ease-out);}
.nav-links{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:nowrap;}
.nav-links a{font-size:13.5px;font-weight:600;color:#EDEDED;white-space:nowrap;transition:color .15s;}
.nav-links a:hover, .nav-links a.active{color:var(--c-amarelo);}
.nav-cta{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0;}
.nav-cta .btn{padding:12px 22px;font-size:14px;white-space:nowrap;}
.nav-social{display:flex;align-items:center;gap:10px;}
.nav-social a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;transition:.2s var(--ease-out);}
.nav-social a:hover{background:var(--secondary);transform:translateY(-2px);}
.nav-social svg{width:16px;height:16px;}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.nav-burger span{width:22px;height:2px;background:#fff;display:block;}
.nav-mobile{display:none;}
.nav-backdrop{position:fixed;inset:0;background:rgba(6,8,26,.55);z-index:65;opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out), visibility .3s;}
.nav-backdrop.open{opacity:1;visibility:visible;}
.mobile-cta-bar{display:none;}
/* Quando a barra mobile traz o ingresso do Dennis DJ + Inscreva-se lado a lado */
.mobile-cta-bar.two-ctas .btn{font-size:12px;padding:12px 4px;letter-spacing:-.1px;}
@media(max-width:900px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav-cta .btn{display:none;}
  .nav-social{display:none;}
  .nav-mobile{display:flex;position:fixed;top:0;right:-88%;width:88%;max-width:320px;height:100vh;height:100dvh;background:#12173F;z-index:70;flex-direction:column;transition:right .35s var(--ease-out);box-shadow:-16px 0 40px rgba(0,0,0,.35);overflow-y:auto;padding-bottom:var(--sp-10);}
  .nav-mobile.open{right:0;}
  .nav-mobile-head{display:flex;align-items:center;justify-content:space-between;padding:18px var(--sp-6);border-bottom:1px solid rgba(255,255,255,.1);}
  .nav-mobile-head span{font-family:var(--fd);font-weight:800;color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.6px;}
  .nav-mobile-head button{background:rgba(255,255,255,.08);border:0;color:#fff;width:34px;height:34px;border-radius:50%;font-size:16px;cursor:pointer;}
  .nav-mobile a{padding:15px var(--sp-6);font-size:15px;font-weight:600;color:#EDEDED;border-bottom:1px solid rgba(255,255,255,.06);}
  .nav-mobile a.active{color:var(--c-amarelo);}
  .nav-mobile-actions{padding:var(--sp-5) var(--sp-6);display:flex;flex-direction:column;gap:10px;}
  .nav-logo img{height:44px;}
}

/* FOOTER */
footer{background:linear-gradient(135deg,var(--secondary-d),var(--secondary));color:#FFE1E3;padding:var(--sp-10) 0 var(--sp-8);font-size:13px;}
.footer-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-6);}
.footer-logo img{height:60px;}
.footer-social{display:flex;gap:var(--sp-4);}
.footer-social a{color:#FFE9EA;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.footer-social a:hover{color:var(--c-amarelo);}