/* ============================================================
   SILENCIÔMETRO — estilo base
   ============================================================ */

:root{
  --bg:        #0A0A0A;
  --fg:        #E8E8E8;
  --muted:     #8A8A8A;
  --red:       #E10600;
  --red-dim:   #8E1010;
  --yellow:    #FFD400;
  --maxw:      680px;
  --metal: linear-gradient(180deg,
            #ffffff 0%, #f2f2f2 26%, #9d9d9d 48%,
            #ffffff 58%, #d4d4d4 76%, #767676 100%);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:48px 20px 40px;
}

/* ============================================================
   LOGO
   ============================================================ */

.logo{
  margin:0 0 26px;
  text-align:center;
  line-height:0;
}

.logo img{
  width:min(100%,420px);
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
}

/* ============================================================
   HEADLINE
   ============================================================ */

.headline{
  font-family:"Anton",Impact,"Arial Narrow",sans-serif;
  font-weight:400;
  font-size:clamp(24px,6.4vw,34px);
  line-height:1.12;
  letter-spacing:.005em;
  text-transform:uppercase;
  text-align:center;
  margin:0 0 30px;
  color:#fff;
}

.headline .hl{
  color:var(--red);
  border-bottom:3px solid var(--yellow);
  padding-bottom:2px;
  /* nunca parte "Banco Master?" ao meio — o sublinhado sai inteiro */
  white-space:nowrap;
}

/* ============================================================
   CONTADOR
   ============================================================ */

.counter{
  border:2px solid var(--red);
  border-radius:16px;
  padding:38px 10px 24px;
  margin:0 0 54px;
  background:linear-gradient(180deg,
              rgba(225,6,0,.30) 0%,
              rgba(225,6,0,.13) 42%,
              rgba(225,6,0,.03) 72%,
              rgba(225,6,0,0)  100%);
}

.counter-inner{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(4px,2vw,14px);
}

.unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:0 0 auto;
  min-width:clamp(46px,14.5vw,96px);
}

.num{
  font-family:"Big Shoulders Display","Anton",Impact,"Arial Narrow",sans-serif;
  font-weight:800;
  font-size:clamp(62px,19vw,128px);
  line-height:.78;
  color:#fff;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.005em;
  text-shadow:0 0 40px rgba(255,255,255,.09);
}

.label{
  margin-top:16px;
  font-size:clamp(9px,2.5vw,12px);
  letter-spacing:.14em;
  color:var(--muted);
  text-transform:uppercase;
}

.sep{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(9px,3.2vw,17px);
  padding-top:clamp(20px,6.5vw,38px);
  flex:0 0 auto;
}

.sep i{
  display:block;
  width:clamp(6px,1.8vw,10px);
  height:clamp(6px,1.8vw,10px);
  background:#3A3A3A;
  border-radius:2px;
}

/* ============================================================
   CARROSSEL
   ============================================================ */

.carousel{ margin:0 0 56px; }

.carousel-stage{
  position:relative;
}

.viewport{
  overflow:hidden;
}

.track{
  display:flex;
  margin:0;
  padding:0;
  list-style:none;
  transition:transform .5s cubic-bezier(.33,.02,.2,1);
}

@media (prefers-reduced-motion:reduce){
  .track{ transition:none; }
}

.slide{
  flex:0 0 100%;
  min-width:0;
}

.video{
  position:relative;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:#141414;
  box-shadow:0 10px 34px rgba(0,0,0,.55);
  isolation:isolate;          /* garante o corte do raio no Safari */
}

.video iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  border-radius:inherit;
}

.thumb{
  position:absolute; inset:0;
  width:100%; height:100%;
  padding:0; border:0;
  background:#141414;
  border-radius:inherit;
  cursor:pointer;
  display:block;
  overflow:hidden;
}

.thumb img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s;
}

.thumb:hover img,
.thumb:focus-visible img{ transform:scale(1.035); opacity:.86; }

.play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:68px;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}

.play svg{ width:100%; height:auto; display:block; }
.play-bg{ fill:#212121; opacity:.82; transition:fill .2s,opacity .2s; }

.thumb:hover .play-bg,
.thumb:focus-visible .play-bg{ fill:var(--red); opacity:1; }
.thumb:hover .play,
.thumb:focus-visible .play{ transform:translate(-50%,-50%) scale(1.08); }

/* ---------- setas ---------- */

/* faixa invisível com a mesma altura do vídeo, para centralizar as setas
   sem que a legenda puxe o eixo vertical para baixo */
.arrows{
  position:absolute;
  top:0; left:0;
  width:100%;
  aspect-ratio:16/9;
  pointer-events:none;
}

.arrow{
  position:absolute;
  top:50%;
  width:46px; height:46px;
  margin-top:-23px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(12,12,12,.5);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  backdrop-filter:blur(10px) saturate(1.3);
  color:#fff;
  cursor:pointer;
  pointer-events:auto;
  display:grid;
  place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.5);
  transition:background .25s, border-color .25s, box-shadow .25s,
             opacity .25s, transform .18s;
}

.arrow svg{
  width:21px; height:21px;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}

.prev{ left:12px; }
.next{ right:12px; }

.arrow:hover{
  background:var(--red);
  border-color:var(--red);
  box-shadow:0 8px 26px rgba(225,6,0,.5);
}

.arrow:active{ transform:scale(.93); }

.prev:hover svg{ transform:translateX(-2px); }
.next:hover svg{ transform:translateX(2px); }

/* no primeiro/último vídeo a seta some, em vez de ficar apagada sobre a arte */
.arrow[disabled]{
  opacity:0;
  pointer-events:none;
  transform:scale(.85);
}

/* sem hover (touch) a seta fica um pouco mais sólida, para ler bem sobre o vídeo */
@media (hover:none){
  .arrow{ background:rgba(12,12,12,.62); }
}

/* ---------- dots ---------- */

.dots{
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:18px;
}

.dot{
  width:8px; height:8px;
  border-radius:50%;
  border:0;
  padding:0;
  background:#3A3A3A;
  cursor:pointer;
  transition:background .25s, transform .25s, width .25s, border-radius .25s;
}

.dot:hover{ background:#5A5A5A; }

.dot[aria-selected="true"]{
  background:var(--red);
  width:22px;
  border-radius:5px;
}

.caption{
  margin:18px auto 0;
  max-width:520px;
  text-align:center;
  font-weight:700;
  font-size:clamp(13px,3.4vw,15px);
  line-height:1.35;
  text-transform:uppercase;
  letter-spacing:.01em;
}

/* ============================================================
   TEXTO / NARRATIVA
   ============================================================ */

.story{
  max-width:540px;
  margin:0 auto 60px;
  font-size:clamp(15px,4vw,17px);
  line-height:1.55;
}

/* ---------- reveal ao rolar ---------- */
/* prefixado com .js: sem JavaScript, tudo aparece normalmente */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- 1. o valor ---------- */

.stat{ text-align:center; margin-bottom:64px; }

.stat-lead,
.stat-sub{
  color:#B4B4B4;
  margin:0;
  font-size:clamp(16px,4.4vw,20px);
  line-height:1.5;
}

.stat-sub{ margin-top:18px; }
.stat-sub strong{ color:#fff; font-weight:600; }

.stat-value{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  margin:20px 0 0;
  font-family:"Anton",Impact,sans-serif;
  line-height:.9;
  color:#fff;
  text-shadow:0 0 46px rgba(225,6,0,.42);
}

.stat-value .cur{
  font-size:clamp(32px,8.4vw,50px);
  color:var(--red);
  align-self:flex-start;
  margin-top:.35em;
}

.stat-value .amount{
  font-size:clamp(96px,26vw,164px);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}

.stat-value .unit{
  font-family:"Poppins",sans-serif;
  font-weight:700;
  font-size:clamp(17px,4.6vw,24px);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#9A9A9A;
  align-self:flex-end;
  margin-bottom:.5em;
}

/* ---------- 2. a data ---------- */

.event{
  display:flex;
  align-items:center;
  gap:18px;
  text-align:left;
  padding:20px;
  margin-bottom:64px;
  border:1px solid #232323;
  border-left:4px solid var(--red);
  border-radius:10px;
  background:linear-gradient(90deg,rgba(225,6,0,.09),transparent 55%);
}

.event p{
  margin:0;
  font-size:clamp(13.5px,3.6vw,15px);
  line-height:1.5;
  color:#C4C4C4;
}
.event strong{ color:#fff; font-weight:600; }

.event-date{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:74px;
  padding:10px 0;
  border-radius:8px;
  background:#141414;
  border:1px solid #2A2A2A;
  font-family:"Anton",Impact,sans-serif;
  line-height:1;
}

.event-date .d{ font-size:32px; color:#fff; }
.event-date .m{ font-size:13px; color:var(--red); letter-spacing:.12em; margin-top:5px; }
.event-date .y{ font-size:11px; color:#6E6E6E; letter-spacing:.1em; margin-top:4px; }

/* ---------- 3. os silêncios ---------- */

.silence-head{
  font-family:"Anton",Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  text-align:center;
  font-size:clamp(19px,5.2vw,26px);
  letter-spacing:.02em;
  color:#4E4E4E;
  margin:0 0 34px;
}
.silence-head span{ color:#fff; }

.silence{
  list-style:none;
  margin:0 0 56px;
  padding:0 0 0 40px;
  position:relative;
}

/* linha vertical ligando os itens */
.silence::before{
  content:"";
  position:absolute;
  left:14px;
  top:8px;
  bottom:8px;
  width:2px;
  background:linear-gradient(180deg,var(--red),var(--red-dim) 55%,#1E1E1E);
}

.silence li{
  position:relative;
  margin-bottom:28px;
}

.silence li:last-child{ margin-bottom:0; }

.idx{
  position:absolute;
  left:-40px;
  top:0;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--red);
  display:grid;
  place-items:center;
  font-family:"Anton",Impact,sans-serif;
  font-size:12px;
  color:#fff;
  letter-spacing:.02em;
}

.fact{
  margin:0 0 10px;
  padding-top:4px;
  color:#fff;
  font-size:clamp(14.5px,3.9vw,16px);
  line-height:1.45;
}
.fact strong{ font-weight:600; color:#fff; }

/* a resposta: uma barra morta, sem cor */
.mute{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:9px 14px;
  border-radius:5px;
  background:#111;
  border:1px solid #1E1E1E;
  color:#5F5F5F;
}

.mute svg{ width:17px; height:17px; flex:0 0 auto; }

.mute span{
  font-size:clamp(11.5px,3vw,13px);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* ---------- 4. o grito ---------- */

.finale{ text-align:center; }

.demand{
  margin:0 0 30px;
  font-size:clamp(15px,4vw,17px);
  color:#C4C4C4;
}
.demand strong{ color:#fff; font-weight:600; }

.cry{
  margin:0;
  font-family:"Anton",Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:1.02;
}

.cry span{ display:block; }

.cry-1{
  font-size:clamp(21px,5.8vw,28px);
  color:#fff;
  letter-spacing:.01em;
}

.cry-2{
  font-size:clamp(37px,10.6vw,54px);
  color:var(--red);
  letter-spacing:-.005em;
  margin-top:6px;
  text-shadow:0 0 54px rgba(225,6,0,.5);
}

/* ============================================================
   COMPARTILHAR
   ============================================================ */

.share{
  border-top:1px solid #1E1E1E;
  padding-top:34px;
  margin-bottom:44px;
  text-align:center;
}

.share-title{
  font-family:"Anton",Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(16px,4.4vw,20px);
  letter-spacing:.01em;
  margin:0 0 20px;
  color:#fff;
}

.share-btns{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border-radius:999px;
  border:1px solid #2A2A2A;
  background:#141414;
  color:var(--fg);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .2s,background .2s,transform .12s;
}

.btn svg{ width:18px; height:18px; flex:0 0 auto; }
.btn:hover{ background:#1C1C1C; border-color:#3A3A3A; }
.btn:active{ transform:translateY(1px); }
.btn.wa:hover{ border-color:#25D366; color:#25D366; }
.btn.x:hover{ border-color:#fff; color:#fff; }
.btn.fb:hover{ border-color:#1877F2; color:#1877F2; }
.btn.copy.done{ border-color:var(--yellow); color:var(--yellow); }

/* ============================================================
   RODAPÉ
   ============================================================ */

.footer{
  border-top:1px solid #1E1E1E;
  padding-top:24px;
  text-align:center;
  font-size:13px;
  color:var(--muted);
}

.sources{ margin-bottom:18px; }

.sources summary{
  cursor:pointer;
  display:inline-block;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--muted);
}

.sources ul{
  list-style:none;
  padding:0;
  margin:16px 0 0;
  text-align:left;
  max-width:480px;
  margin-inline:auto;
}

.sources li{ margin-bottom:8px; }
.sources a{ color:#B9B9B9; }
.sources a:hover{ color:#fff; }

.disclaimer{
  max-width:480px;
  margin:16px auto 0;
  font-size:11.5px;
  line-height:1.5;
  color:#6A6A6A;
}

.copy-line{
  margin:0;
  font-size:11.5px;
  color:#5C5C5C;
}

/* ============================================================
   FOCO VISÍVEL
   ============================================================ */

a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:3px;
  border-radius:4px;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */


@media (max-width:559px){
  .wrap{ padding:34px 16px 32px; }
  .counter{ padding:30px 4px 20px; }
  .arrow{ width:40px; height:40px; margin-top:-20px; }
  .arrow svg{ width:19px; height:19px; }
  .prev{ left:9px; }
  .next{ right:9px; }
  .play{ width:56px; }
  .video{ border-radius:14px; }
  .btn{ padding:10px 15px; font-size:13px; }
}

@media (max-width:359px){
  .unit{ min-width:42px; }
  .num{ font-size:19vw; }
  .share-btns{ gap:8px; }
}