/* ===== Tokens ===== */
:root{
  --preto-painel:#0b0c0e;
  --preto-abs:#000000;
  --chumbo:#1a1d21;
  --chumbo-alto:#25292f;
  --ambar:#F39C12;
  --ambar-alto:#ffc44d;
  --ambar-fundo:#3a2907;
  --branco:#ffffff;
  --branco-fosco:#c9cdd3;
  --branco-tenue:#8a8f97;

  --font-display:'Archivo Black', 'Arial Black', sans-serif;
  --font-body:'Work Sans', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', monospace;

  --wrap:600px;
  --radius:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--preto-painel);
  color:var(--branco);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Fix: Imagens não distorcem */
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}

.skip-link{
  position:absolute;left:-999px;top:0;
  background:var(--ambar);color:var(--preto-abs);
  padding:10px 16px;z-index:100;font-family:var(--font-mono);font-weight:600;
}
.skip-link:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--ambar-alto);outline-offset:3px}

/* ===== Barra de atenção ===== */
.topbar{
  background:var(--ambar);
  color:var(--preto-abs);
  text-align:center;
  padding:9px 14px;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.02em;
  line-height:1.4;
}
.topbar p{margin:0}

/* ===== Eyebrow / rótulos técnicos ===== */
.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ambar);
  margin-bottom:14px;
}

/* ===== Hero ===== */
.hero{
  padding:22px 0 26px;
}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 6.6vw, 2.5rem);
  line-height:1.16;
  margin:0 0 12px;
  letter-spacing:-.01em;
}
.hero__title .hl{color:var(--ambar)}
.hero__lead{
  font-size:clamp(1rem, 3.6vw, 1.15rem);
  color:var(--branco-fosco);
  margin:0 0 20px;
  max-width:46ch;
}

/* Fix: Imagem Hero Customizada */
.hero__image-wrapper {
  margin: 0 auto 24px;
  max-width: 320px;
  width: 100%;
}
.hero__img-custom {
  border-radius: 12px;
  border: 3px solid var(--ambar);
  box-shadow: 0 0 0 4px var(--ambar-fundo);
  width: 100%;
}

/* ===== CTA: interruptor de disjuntor ===== */
.switch{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  background:var(--ambar);
  color:var(--preto-abs);
  font-family:var(--font-body);
  font-weight:800;
  font-size:clamp(1rem, 4.2vw, 1.2rem);
  text-decoration:none;
  text-align:center;
  padding:19px 22px 19px 44px;
  border-radius:10px;
  border:1px solid var(--preto-abs);
  box-shadow:0 0 0 3px var(--ambar-fundo), 0 10px 26px -8px rgba(243,156,18,.55);
  animation:pulse 2.2s ease-in-out infinite;
}
.switch--sm{
  width:auto;
  padding:14px 22px 14px 40px;
  font-size:1rem;
  margin-inline:auto;
}
.switch__toggle{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:24px;
  border-radius:4px;
  background:var(--preto-abs);
}
.switch__toggle::after{
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  width:12px;
  height:10px;
  border-radius:3px;
  background:var(--ambar-alto);
}
.switch__icon{width:22px;height:22px;flex:none}
.switch__sub{
  text-align:center;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--branco-tenue);
  margin:10px 0 22px;
}

@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px var(--ambar-fundo), 0 10px 26px -8px rgba(243,156,18,.55)}
  50%{box-shadow:0 0 0 6px var(--ambar-fundo), 0 10px 34px -6px rgba(243,156,18,.85)}
}
@media (prefers-reduced-motion:reduce){
  .switch{animation:none}
}

/* ===== Painel do disjuntor: contador ===== */
.panel{
  position:relative;
  background:var(--chumbo);
  border:1px solid var(--chumbo-alto);
  border-radius:var(--radius);
  padding:20px 18px 16px;
  text-align:center;
}
/* Fix do panel hidden via script */
#countdownPanel[hidden] { 
  display: none !important; 
  margin: 0 !important; 
  padding: 0 !important;
  height: 0 !important;
  border: none !important;
}

.panel__rivet{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #4a4f57, #101215 70%);
}
.panel__rivet--tl{top:9px;left:9px}
.panel__rivet--tr{top:9px;right:9px}
.panel__rivet--bl{bottom:9px;left:9px}
.panel__rivet--br{bottom:9px;right:9px}

.panel__nameplate{
  display:block;
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--branco-tenue);
  margin-bottom:14px;
}
.panel__digits{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
}
.panel__unit{display:flex;flex-direction:column;align-items:center;min-width:52px}
.panel__num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(1.7rem, 7vw, 2.3rem);
  color:var(--ambar);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px rgba(243,156,18,.45);
  line-height:1;
}
.panel__tag{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--branco-tenue);
  margin-top:4px;
}
.panel__sep{
  font-family:var(--font-mono);
  font-size:clamp(1.4rem, 5vw, 1.8rem);
  color:var(--chumbo-alto);
  padding-bottom:14px;
}
.panel__foot{
  display:block;
  font-family:var(--font-mono);
  font-size:.62rem;
  color:var(--branco-tenue);
  margin-top:12px;
  letter-spacing:.04em;
}

/* ===== Seções genéricas ===== */
.section{padding:34px 0}
.section__title{
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 5vw, 1.7rem);
  line-height:1.24;
  margin:0 0 22px;
}
.promise{
  font-size:1.05rem;
  color:var(--branco-fosco);
  max-width:52ch;
}

/* Faixa de risco (divisor) */
.hazard{
  height:8px;
  background:repeating-linear-gradient(
    -45deg,
    var(--ambar) 0 14px,
    var(--preto-abs) 14px 28px
  );
}

/* ===== Bullets (Fascination) ===== */
.bullets-section { text-align: center; }
.bullets-list { list-style: none; padding: 0; margin: 0 auto; max-width: 580px; text-align: left; }
.bullets-list li { font-size: 1.05rem; color: var(--branco-fosco); margin-bottom: 18px; display: flex; align-items: flex-start; gap: 12px; line-height: 1.4; }
.bullets-list .check { color: var(--ambar); font-weight: 800; font-size: 1.3rem; line-height: 1; margin-top: 2px; }
.bullets-list strong { color: var(--branco); }

/* ===== P.S. (Objeção) ===== */
.ps-text {
  font-size: 0.95rem; color: var(--branco-tenue); margin-top: 18px; text-align: center; font-style: italic; max-width: 500px; margin-inline: auto;
}

/* ===== Mockup da apostila ===== */
.book{margin:0}
.book__img{
  border-radius:10px;
  border:1px solid var(--chumbo-alto);
  box-shadow:0 0 0 3px var(--ambar-fundo);
}

/* ===== Oferta VIP ===== */
.offer{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.offer__item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:var(--chumbo);
  border:1px solid var(--chumbo-alto);
  border-radius:12px;
  padding:16px;
}
.offer__led{
  flex:none;
  width:10px;height:10px;
  margin-top:6px;
  border-radius:50%;
  background:var(--ambar);
  box-shadow:0 0 8px 1px rgba(243,156,18,.7);
}
.offer__item strong{
  display:block;
  font-size:1.02rem;
  margin-bottom:3px;
}
.offer__item p{
  margin:0;
  color:var(--branco-fosco);
  font-size:.92rem;
}
/* Destaque p/ brinde */
.offer__item--prize{flex-direction:column; align-items:center; text-align:center; padding: 24px 16px;}
.offer__row{display:flex;align-items:flex-start;gap:14px;width:100%; justify-content: center; text-align: left;}
.offer__prize-img{
  width:100%;
  max-width:380px !important;
  margin:20px auto 0 !important;
  border-radius:12px !important;
  border:2px solid var(--ambar) !important;
  box-shadow: 0 0 20px rgba(243, 156, 18, 0.25);
}

/* ===== Autoridade ===== */
.section--authority{padding-block:38px}
.authority{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
}
.authority__avatar{
  width:108px;height:108px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--ambar);
  box-shadow:0 0 0 4px var(--ambar-fundo);
  margin-bottom:10px;
}
.authority__name{font-size:1.1rem}
.authority__tag{color:var(--branco-tenue);font-size:.9rem}
.authority__stat{
  margin:8px 0 0;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--branco-fosco);
}

/* ===== CTA final ===== */
.cta-final{text-align:center}
.cta-final .section__title{max-width:22ch;margin-inline:auto}

/* ===== Rodapé ===== */
.footer{
  padding:28px 0 40px;
  border-top:1px solid var(--chumbo);
  text-align:center;
}
.footer__copy{
  font-size:.82rem;
  color:var(--branco-fosco);
  margin:0 0 10px;
}
.footer__links{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-bottom:14px;
}
.footer__links a{
  font-size:.8rem;
  text-decoration:underline;
  color:var(--branco-fosco);
}
.footer__legal{
  font-size:.72rem;
  color:var(--branco-tenue);
  max-width:52ch;
  margin-inline:auto;
  line-height:1.6;
}

/* ===== Tablet / Desktop ===== */
@media (min-width:640px){
  .wrap{max-width:680px}
  .hero{padding:34px 0 40px}
  .switch{width:auto;padding-inline:34px 40px;min-width:340px}
  .panel{padding:24px 30px 20px;max-width:420px;margin-inline:auto}
  .offer{max-width:520px;margin-inline:auto 26px}
}

@media (min-width:900px){
  :root{--wrap:960px}
  .hero .wrap{display:flex; align-items:center; justify-content:space-between; gap:40px;}
  .hero__content{flex:1; max-width:560px; order:1; text-align:left;}
  .hero__image-wrapper { flex: 1; max-width: 400px; margin: 0; order: 2; }
  .hero__lead{margin-inline:0}
  .switch,.panel{margin-inline:0}
  .hero .switch__sub{text-align:left}
  .panel{text-align:left}
  .panel__digits{justify-content:flex-start}
}