/* ===========================================================
   BLACK VITALICIA CMA — pagina de captura
   Identidade: preto + ouro (Black Friday) sobre o sistema da
   pagina da comunidade (Space Grotesk + Inter, CTA verde).
   =========================================================== */

:root{
  /* fundos — quatro tons, nunca dois iguais colados */
  --preto:      #050505;
  --preto-2:    #0a0a0a;
  --carvao:     #111111;
  --branco:     #ffffff;

  /* texto */
  --texto:      #f4f4f5;
  --texto-2:    #a1a1aa;
  --texto-3:    #71717a;
  --escuro:     #0a0a0a;
  --escuro-2:   #52525b;

  /* acentos */
  --ouro:       #C9A84C;
  --ouro-claro: #E8C86A;
  --ouro-fraco: rgba(201,168,76,.18);
  --verde:      #39FF14;
  --verde-2:    #2de010;

  --linha:      #1e1e1e;
  --linha-clara:#e4e4e7;
  --raio:       14px;
  --barra-alt:  64px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
img,picture{display:block;max-width:100%}
img{height:auto}

body{
  font-family:'Inter',sans-serif;
  background:var(--preto);
  color:var(--texto);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--barra-alt);
}

/* fallback de visibilidade antes de tudo: se o JS morrer, nada some */
h1,h2,h3,p,li,a,span{opacity:1}

.container{max-width:1160px;margin:0 auto;padding:0 24px}
.secao{padding:88px 0;position:relative}

/* fundos dos blocos */
.fundo-preto  {background:var(--preto)}
.fundo-preto-2{background:var(--preto-2)}
.fundo-carvao {background:var(--carvao)}
.fundo-branco {background:var(--branco);color:var(--escuro)}

/* ── TIPOGRAFIA ───────────────────────────────────────────── */
.titulo{
  font-family:'Space Grotesk',sans-serif;
  font-weight:800;font-size:clamp(30px,5.2vw,62px);
  line-height:1.02;letter-spacing:-.03em;text-align:center;
  margin-bottom:22px;
}
.titulo-md{
  font-family:'Space Grotesk',sans-serif;
  font-weight:800;font-size:clamp(24px,3.6vw,40px);
  line-height:1.08;letter-spacing:-.02em;
}
.ouro{color:var(--ouro)}
.ouro-brilho{
  background:linear-gradient(100deg,#8f7324 0%,var(--ouro-claro) 32%,#fff3cf 50%,var(--ouro-claro) 68%,#8f7324 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--ouro);
}
.verde{color:var(--verde)}
.sub{
  font-size:clamp(15px,1.7vw,18px);line-height:1.65;color:var(--texto-2);
  text-align:center;max-width:740px;margin:0 auto 14px;
}
.fundo-branco .sub{color:var(--escuro-2)}
.selo{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ouro);border:1px solid var(--ouro-fraco);
  background:rgba(201,168,76,.06);
  padding:7px 14px;border-radius:999px;margin-bottom:18px;
}
.selo svg{width:14px;height:14px}
.fundo-branco .selo{color:#8f7324;border-color:rgba(0,0,0,.1);background:rgba(201,168,76,.1)}
.centro{text-align:center}
.selo-centro{display:flex;justify-content:center}

/* ── BOTOES ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:clamp(14px,1.5vw,17px);letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;border:0;border-radius:999px;cursor:pointer;
  padding:19px 38px;position:relative;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn-verde{
  background:linear-gradient(180deg,var(--verde) 0%,var(--verde-2) 100%);
  color:#06230a;
  box-shadow:0 0 0 1px rgba(57,255,20,.4),0 14px 36px -12px rgba(57,255,20,.55);
}
.btn-verde:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(57,255,20,.6),0 18px 44px -12px rgba(57,255,20,.7)}
.btn-ouro{
  background:linear-gradient(180deg,var(--ouro-claro) 0%,var(--ouro) 100%);
  color:#2a1f00;box-shadow:0 10px 26px -12px rgba(201,168,76,.8);
}
.btn-ouro:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-seta{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  background:rgba(0,0,0,.18);display:grid;place-items:center;
}
.btn-seta svg{width:14px;height:14px}
.btn-bloco{display:flex;width:100%;max-width:440px;margin:0 auto}

/* pulso suave no CTA principal */
.btn-verde::after{
  content:'';position:absolute;inset:-6px;border-radius:999px;
  border:1px solid rgba(57,255,20,.35);
  animation:pulso 2.6s ease-out infinite;pointer-events:none;
}
@keyframes pulso{
  0%{transform:scale(.97);opacity:.7}
  70%{transform:scale(1.07);opacity:0}
  100%{opacity:0}
}

.aviso{
  display:block;text-align:center;margin-top:14px;
  font-size:12.5px;letter-spacing:.06em;color:var(--ouro);
  text-transform:uppercase;font-weight:600;
}
.fundo-branco .aviso{color:#8f7324}

.bloco-cta{margin-top:40px}

/* ── BARRA FIXA (BLOCO 00) ────────────────────────────────── */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:90;height:var(--barra-alt);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 20px;background:#000;
  border-bottom:1px solid var(--linha);
}
.barra::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--ouro),transparent);
  opacity:.6;
}
.barra-logo img{height:30px;width:auto}
.barra-cta{padding:12px 22px;font-size:12.5px}

.relogio{display:flex;align-items:center;gap:10px}
.relogio-rotulo{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.14em;color:var(--ouro);white-space:nowrap;
}
.relogio-caixas{display:flex;gap:6px}
.relogio-caixa{
  min-width:42px;padding:5px 6px;border-radius:8px;
  background:#121212;border:1px solid var(--linha);text-align:center;
}
.relogio-num{
  display:block;font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:16px;line-height:1;color:var(--texto);font-variant-numeric:tabular-nums;
}
.relogio-cap{display:block;font-size:8px;letter-spacing:.12em;color:var(--texto-3);margin-top:3px}

/* ── HERO (BLOCO 1) ───────────────────────────────────────── */
/* Celular: a arte entra em cima (ela ja vem com degrade para o preto na
   base do arquivo) e o texto desce por baixo. Desktop: a arte vira fundo
   da secao, alinhada a direita, e o texto ocupa a coluna escura da esquerda. */
#hero{
  position:relative;overflow:hidden;
  padding:0 0 64px;text-align:center;
  /* mesmo preto da arte da logo: sem isso a logo parece colada
     num fundo diferente do resto do hero */
  background:#000;
}
.hero-arte{display:block;position:relative;z-index:0}
.hero-arte img{display:block;width:100%;height:auto}
/* No celular a arte termina num corte reto contra o preto da secao.
   Este degrade fecha a emenda — comeca abaixo da bolsa, para nao cobrir ela. */
.hero-arte::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:26%;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 55%,#000 100%);
  pointer-events:none;
}

.hero-conteudo{position:relative;z-index:2;margin-top:4px}
.hero-col{max-width:620px;margin:0 auto}

/* A logo do hero e a arte ORIGINAL, opaca: o fundo dela e #000 e o do hero
   tambem, entao encaixa sem emenda. Nada de alfa aqui — converter o preto em
   transparencia deixava as bordas sujas e a arte com cara de baixa resolucao. */
.hero-logo{
  width:min(250px,64%);height:auto;margin:0 auto 18px;
}
#hero h1{
  font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:clamp(23px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em;
  margin:0 auto 16px;
}
.hero-texto{
  margin:0 auto 30px;color:var(--texto-2);
  font-size:clamp(15px,1.7vw,17px);line-height:1.6;
}
.hero-data{
  display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.1em;color:var(--texto-2);
}
.hero-data b{color:var(--ouro-claro)}
.ponto-vivo{
  width:9px;height:9px;border-radius:50%;background:#ff3b30;
  box-shadow:0 0 0 0 rgba(255,59,48,.6);animation:vivo 1.6s infinite;
}
@keyframes vivo{70%{box-shadow:0 0 0 10px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}

@media (min-width:1000px){
  #hero{display:flex;align-items:center;min-height:min(680px,calc(100vh - var(--barra-alt)));padding:0}
  .hero-arte{position:absolute;inset:0}
  .hero-arte::after{display:none}
  /* `top` e nao `center`: quando a janela e mais baixa que a arte, o corte
     tem que sair de baixo. Com `center` o cover come a cabeca dela. */
  .hero-arte img{width:100%;height:100%;object-fit:cover;object-position:78% top}
  .hero-conteudo{width:100%;margin:0;padding:56px 0}
  .hero-col{max-width:560px;margin:0}
  .hero-logo{width:300px}
  .hero-texto{max-width:470px}
}


/* ── cards dourados flutuando sobre a foto do hero ────────────────
   Sao HTML, nao estao gravados na imagem: o texto fica nitido em
   qualquer tela, anima e da para editar sem refazer a arte.
   O conteudo so repete o que o documento ja afirma — nada de numero
   de venda inventado. */
.hero-cards{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-card{
  position:absolute;display:flex;align-items:center;gap:12px;
  width:max-content;max-width:248px;
  padding:12px 16px;border-radius:14px;
  background:linear-gradient(135deg,rgba(32,25,9,.90),rgba(10,10,10,.82));
  border:1px solid rgba(201,168,76,.45);
  box-shadow:0 20px 46px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,233,170,.14);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  animation:flutua 7s ease-in-out infinite alternate;
}
.hero-card-ico{
  flex:0 0 30px;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  background:rgba(201,168,76,.16);border:1px solid rgba(201,168,76,.4);
  color:var(--ouro-claro);
}
.hero-card-ico svg{width:17px;height:17px}
.hero-card-txt{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  font-size:11px;line-height:1.3;color:var(--texto-2);
}
.hero-card-txt b{
  font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:12.5px;letter-spacing:.08em;color:var(--ouro-claro);
}
@keyframes flutua{
  from{transform:translateY(-7px)}
  to{transform:translateY(7px)}
}

/* Celular: a camada dos cards passa a ter o tamanho EXATO da arte (que e
   quadrada e ocupa a largura toda). Assim as porcentagens abaixo sao da foto,
   nao da altura do hero — que muda conforme o texto quebra. */
.hero-cards{bottom:auto;height:auto;aspect-ratio:1}

/* O rosto dela fica entre 12% e 38% da altura da foto, e entre 45% e 62% da
   largura. Os cards tem largura fixa, entao em tela estreita eles avancavam
   ate la. Agora ficam os dois abaixo do rosto, e bem separados um do outro. */
.hero-card{max-width:188px;padding:9px 12px;gap:9px;border-radius:12px}
.hero-card-ico{flex:0 0 24px;width:24px;height:24px;border-radius:7px}
.hero-card-ico svg{width:14px;height:14px}
.hero-card-txt{font-size:9.5px}
.hero-card-txt b{font-size:11px;letter-spacing:.06em}
.hero-card-1{top:46%;left:3%}
.hero-card-2{display:none}
.hero-card-3{top:68%;right:3%;animation-delay:-3.5s}

@media (min-width:1000px){
  /* desktop: os tres na faixa entre o texto e ela, sem cobrir o rosto */
  .hero-card{max-width:270px;padding:14px 18px;gap:12px;border-radius:14px}
  .hero-card-ico{flex:0 0 30px;width:30px;height:30px;border-radius:9px}
  .hero-card-ico svg{width:17px;height:17px}
  .hero-card-txt{font-size:11px}
  .hero-card-txt b{font-size:12.5px;letter-spacing:.08em}
  .hero-cards{bottom:0;height:auto;aspect-ratio:auto}
  .hero-card-1{top:17%;left:53%;right:auto}
  .hero-card-2{display:flex;top:45%;left:60%;animation-delay:-2.3s}
  .hero-card-3{top:71%;left:51%;right:auto;animation-delay:-4.6s}
}

@media (prefers-reduced-motion:reduce){
  .hero-card{animation:none}
}

/* ── FAIXAS / DIVISORES ───────────────────────────────────── */
.faixa-x{
  position:relative;height:152px;overflow:hidden;background:var(--preto-2);
}
.faixa-x .fita{
  position:absolute;left:-12%;top:50%;width:124%;
  padding:9px 0;white-space:nowrap;overflow:hidden;
}
.faixa-x .fita-1{
  transform:translateY(-50%) rotate(-3.2deg);
  background:linear-gradient(90deg,var(--ouro) 0%,var(--ouro-claro) 50%,var(--ouro) 100%);
  box-shadow:0 10px 30px -14px rgba(201,168,76,.9);
}
.faixa-x .fita-2{
  transform:translateY(-50%) rotate(3.2deg);
  background:#0d0d0d;border-top:1px solid var(--ouro);border-bottom:1px solid var(--ouro);
}
.fita-trilho{display:inline-flex;animation:corre 26s linear infinite;will-change:transform}
.fita-2 .fita-trilho{animation-direction:reverse;animation-duration:30s}
.fita-trilho span{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:#1a1200;padding:0 18px;
}
.fita-2 .fita-trilho span{color:var(--ouro-claro)}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* filete dourado simples entre blocos */
.filete{height:3px;background:linear-gradient(90deg,transparent,var(--ouro),transparent)}


/* fita reta, usada como segunda quebra antes do bloco da oferta.
   Estilo diferente do cruzado do hero, para nao parecer repeticao. */
.faixa-reta{
  position:relative;overflow:hidden;
  padding:11px 0;white-space:nowrap;
  background:linear-gradient(90deg,var(--ouro) 0%,var(--ouro-claro) 50%,var(--ouro) 100%);
  box-shadow:0 -10px 34px -18px rgba(201,168,76,.9),0 10px 34px -18px rgba(201,168,76,.9);
}
.faixa-reta .fita-trilho span{color:#1a1200}

/* faixa de fotos de evento: ponte do bloco branco para o escuro.
   Sao fotos reais, ja tratadas no arquivo para o preto+ouro da pagina. */
.faixa-fotos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--ouro);          /* o gap vira um fio dourado entre as fotos */
  border-top:1px solid rgba(201,168,76,.55);
  border-bottom:1px solid rgba(201,168,76,.55);
}
.faixa-fotos img{
  width:100%;height:clamp(132px,19vw,250px);object-fit:cover;display:block;
  /* Cada foto tem a Jessica numa altura diferente do quadro, entao o ponto de
     ancoragem e por foto. Regra: baixar ate a cabeca dela aparecer inteira. */
  object-position:50% 20%;
}
.faixa-fotos img:nth-child(1){object-position:50% 0}
.faixa-fotos img:nth-child(3){object-position:50% 5%}

/* ── BLOCO 2 — O QUE E A CMA ──────────────────────────────── */
.nega{
  max-width:720px;margin:0 auto 34px;text-align:center;
  font-size:clamp(16px,1.9vw,19px);line-height:1.6;color:var(--escuro-2);
}
.nega b{color:var(--escuro)}
.checks{list-style:none;display:grid;gap:14px;max-width:720px;margin:0 auto}
.checks li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:16px;line-height:1.5;
  padding:15px 18px;border-radius:12px;
  background:rgba(0,0,0,.035);border:1px solid var(--linha-clara);
}
.checks li svg{flex:0 0 22px;width:22px;height:22px;margin-top:1px}
.checks li span{flex:1}
.destaque-escuro{
  margin:38px auto 0;max-width:760px;text-align:center;
  padding:26px 24px;border-radius:var(--raio);
  background:var(--escuro);color:var(--texto);
  border:1px solid rgba(201,168,76,.35);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
}
.destaque-escuro p{font-size:clamp(15px,1.8vw,18px);line-height:1.55}
.destaque-escuro b{color:var(--ouro-claro)}

/* ── BLOCO 3 — ENTREGAVEIS ────────────────────────────────── */
.entregas{display:grid;gap:16px;margin-top:40px}
@media (min-width:760px){.entregas{grid-template-columns:repeat(2,1fr)}}
.entrega{
  position:relative;padding:26px 24px 24px;border-radius:var(--raio);
  background:linear-gradient(180deg,#151515 0%,#0d0d0d 100%);
  border:1px solid var(--linha);overflow:hidden;
}
.entrega::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.7),transparent);
}
.entrega-num{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.14em;color:var(--ouro);display:block;margin-bottom:10px;
}
.entrega h3{
  font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:clamp(17px,2vw,21px);line-height:1.15;letter-spacing:-.01em;
  margin-bottom:10px;color:var(--texto);
}
.entrega p{font-size:14.5px;line-height:1.6;color:var(--texto-2)}
.entrega-larga{grid-column:1/-1}

/* ── BLOCO 4 — IMPLEMENTACAO ──────────────────────────────── */
.passos{
  list-style:none;display:grid;gap:12px;max-width:760px;margin:34px auto 0;
  counter-reset:passo;
}
.passos li{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;border-radius:12px;
  border:1px solid var(--linha-clara);background:#fafafa;
  font-size:16px;font-weight:500;color:var(--escuro);
}
.passos li::before{
  counter-increment:passo;content:counter(passo,decimal-leading-zero);
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:14px;
  color:#8f7324;background:rgba(201,168,76,.16);
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  display:grid;place-items:center;
}
.fecho{
  margin:34px auto 0;max-width:780px;text-align:center;
  font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:clamp(18px,2.4vw,27px);line-height:1.22;letter-spacing:-.01em;
  color:var(--escuro);
}
.fecho b{
  background:linear-gradient(transparent 62%,rgba(201,168,76,.45) 62%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ── BLOCO 5 — DEPOIMENTOS ────────────────────────────────── */
#bloco-5{overflow:hidden}
.carrossel{width:100%;padding-bottom:52px!important;margin:44px 0 0}
.carrossel .swiper-slide{
  width:320px;height:400px;border-radius:10px;overflow:hidden;
  border:1px solid var(--linha);background:#fff;
  transition:transform .3s ease,border-color .3s ease;
}
.carrossel .swiper-slide img{width:100%;height:100%;object-fit:contain;display:block}
.carrossel .swiper-slide-active{transform:scale(1.04);border-color:var(--ouro)}
.carrossel .swiper-pagination-bullet{background:#3f3f46;opacity:1;width:7px;height:7px}
.carrossel .swiper-pagination-bullet-active{background:var(--ouro);transform:scale(1.4)}
.borda-carrossel{position:absolute;top:0;bottom:0;width:130px;pointer-events:none;z-index:10}
.borda-esq{left:0;background:linear-gradient(to right,var(--preto-2) 26%,transparent)}
.borda-dir{right:0;background:linear-gradient(to left,var(--preto-2) 26%,transparent)}
.legenda-carrossel{text-align:center;margin-top:30px;font-size:14px;color:var(--texto-3);font-style:italic}
/* sem JS o carrossel vira uma fila rolavel — nada some */
.carrossel:not(.swiper-initialized) .swiper-wrapper{display:flex;gap:14px;overflow-x:auto}

/* ── BLOCO 6 — OFERTA ─────────────────────────────────────── */
.oferta{
  max-width:720px;margin:40px auto 0;padding:34px 28px;
  border-radius:20px;background:var(--escuro);color:var(--texto);
  border:1px solid rgba(201,168,76,.4);
  box-shadow:0 40px 90px -46px rgba(0,0,0,.9);
  position:relative;overflow:hidden;
}
.oferta::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 220px at 50% -10%,rgba(201,168,76,.22),transparent 70%);
}
.oferta-titulo{
  font-family:'Space Grotesk',sans-serif;font-weight:800;text-align:center;
  font-size:clamp(20px,2.8vw,30px);letter-spacing:-.01em;margin-bottom:24px;
  position:relative;
}
.oferta-lista{list-style:none;display:grid;gap:2px;position:relative}
.oferta-lista li{
  display:flex;align-items:center;gap:12px;
  padding:14px 4px;border-bottom:1px dashed rgba(255,255,255,.1);
  font-size:15px;line-height:1.35;
}
.oferta-lista li svg{flex:0 0 20px;width:20px;height:20px}
.oferta-lista li span{flex:1}
.oferta-lista li b{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  color:var(--texto-3);text-decoration:line-through;white-space:nowrap;
}
.oferta-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  position:relative;
}
.oferta-total span{font-size:12px;letter-spacing:.16em;color:var(--texto-3);text-transform:uppercase}
.oferta-total b{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(22px,3vw,32px);
  color:var(--texto-3);text-decoration:line-through;
}
.oferta-preco{text-align:center;margin-top:26px;position:relative}
.oferta-preco .rotulo{
  display:block;font-size:12px;letter-spacing:.2em;color:var(--ouro);
  text-transform:uppercase;margin-bottom:6px;font-weight:700;
}
.oferta-preco .valor{
  display:block;font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:clamp(40px,8vw,74px);line-height:1;letter-spacing:-.03em;
}
.oferta-preco .valor small{font-size:.42em;letter-spacing:0;vertical-align:.45em;margin-right:4px}
.oferta-preco .revelacao{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ouro-claro);
  border:1px dashed rgba(201,168,76,.5);border-radius:999px;padding:8px 16px;
}
.premios{
  margin:34px auto 0;max-width:720px;text-align:center;
  padding:20px 22px;border-radius:14px;
  background:linear-gradient(90deg,rgba(201,168,76,.16),rgba(201,168,76,.06));
  border:1px solid rgba(201,168,76,.45);
  font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:clamp(16px,2.2vw,23px);line-height:1.25;color:var(--escuro);
}
.premios b{color:#8f7324}

/* contador grande do bloco da oferta */
.contador{display:flex;justify-content:center;gap:10px;margin:30px 0 0;position:relative}
.contador-caixa{
  min-width:74px;padding:14px 10px;border-radius:14px;
  background:#121212;border:1px solid rgba(201,168,76,.3);text-align:center;
}
.contador-num{
  display:block;font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:clamp(24px,4vw,34px);line-height:1;color:var(--ouro-claro);
  font-variant-numeric:tabular-nums;
}
.contador-cap{display:block;font-size:9.5px;letter-spacing:.16em;color:var(--texto-3);margin-top:7px}

/* ── BLOCO 7 — QUEM SOU EU ────────────────────────────────── */
.expert{display:grid;gap:40px;align-items:center;text-align:center}
@media (min-width:980px){
  .expert{grid-template-columns:.85fr 1.15fr;gap:60px}
  .expert-foto{margin:0 0 0 auto}
}
.expert-foto{
  border-radius:10px;border:1px solid var(--linha);overflow:hidden;
  filter:grayscale(18%);
  /* do tamanho do texto ao lado, nao gigante */
  max-width:360px;margin:0 auto;
}
.expert-foto img{width:100%;height:auto}
.expert h2{
  font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:clamp(34px,5vw,60px);line-height:1;letter-spacing:-.03em;margin-bottom:22px;
}
.expert p{font-size:15px;line-height:1.7;color:var(--texto-2);margin-bottom:15px}
.pilulas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px 0 26px}
.pilula{
  background:#141414;border:1px solid var(--linha);border-radius:999px;
  padding:8px 16px;font-size:12px;color:var(--texto-2);letter-spacing:.04em;
}
.pilula b{color:var(--ouro)}

/* ── RODAPE ───────────────────────────────────────────────── */
.rodape{background:var(--carvao);border-top:1px solid var(--linha);padding:44px 0 56px;text-align:center}
.rodape img{height:30px;width:auto;margin:0 auto 18px}
.rodape p{font-size:12.5px;line-height:1.7;color:var(--texto-3);max-width:720px;margin:0 auto}

/* ── MOTION ───────────────────────────────────────────────── */
.revela{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.revela.visivel{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none;transition:none}
  .fita-trilho,.btn-verde::after,.ponto-vivo{animation:none}
  .btn-verde::after{opacity:0}
}

/* ── RESPONSIVO ───────────────────────────────────────────── */
@media (max-width:860px){
  :root{--barra-alt:58px}
  .relogio-rotulo{display:none}
  .relogio-caixa{min-width:36px;padding:4px}
  .relogio-num{font-size:14px}
  .barra-logo img{height:24px}
  /* o rotulo do botao da barra nao pode quebrar em duas linhas:
     a pilula cresce e estoura a altura da barra */
  .barra-cta{padding:10px 13px;font-size:10.5px;gap:8px;white-space:nowrap;letter-spacing:.02em}
  .barra-cta .btn-seta{display:none}
}
@media (max-width:620px){
  .secao{padding:62px 0}
  .container{padding:0 18px}
  .btn{padding:17px 24px;width:100%}
  .barra-cta{width:auto}
  .btn-bloco{max-width:100%}
  .faixa-x{height:122px}
  .carrossel .swiper-slide{width:240px;height:300px}
  .borda-carrossel{width:48px}
  .pilulas{justify-content:center}
  .pilula{width:100%;text-align:center}
  .contador-caixa{min-width:62px;padding:12px 6px}
  .oferta{padding:26px 18px}
  .oferta-lista li{flex-wrap:wrap;gap:8px}
  .oferta-lista li b{width:100%;padding-left:32px}
}

/* telas bem estreitas (360px): a barra fixa e o lugar mais apertado da pagina —
   logo + 4 caixas de cronometro + botao. Tudo encolhe junto para caber numa linha. */
@media (max-width:420px){
  .barra{padding:0 12px;gap:8px}
  .barra-logo img{height:20px}
  .relogio{gap:6px}
  .relogio-caixas{gap:4px}
  .relogio-caixa{min-width:30px;padding:3px 2px;border-radius:6px}
  .relogio-num{font-size:12.5px}
  .relogio-cap{font-size:7px;letter-spacing:.08em;margin-top:2px}
  .barra-cta{padding:9px 11px;font-size:9.5px}
}
/* abaixo de 360px a logo so cabe espremida: melhor sumir e deixar
   cronometro e botao respirarem */
@media (max-width:359px){
  .barra-logo{display:none}
}