/* assets/css/base.css (COMPLETO)
   - Tudo aqui (main1..main6 embutido)
   - Background 100% branco (#fff)
   - Container e larguras consistentes em todas as sections
   - Kicker (faixa vermelha + emoji) corrigido
   - Vídeos / thumbs sempre 100% da largura do container
*/

/* =========================
   TOKENS
========================= */
:root{
  --bg:#ffffff;
  --surface:#ffffff;

  --ink:#0b1220;
  --muted:#526277;

  --brand:#0b4ea2;
  --brand-2:#083d82;
  --danger:#e11d48;
  --link:#1d4ed8;

  /* largura “boa” editorial */
  --container: 700px;
  --container-pad: 0px;

  --line:rgba(11,18,32,.10);

  --r-sm:12px;
  --r-md:16px;
  --r-lg:22px;

  /* sombras só em mídia/offer (não em “card global”) */
  --shadow-sm: 0 10px 28px rgba(11,18,32,.08);
  --shadow-md: 0 26px 70px rgba(11,18,32,.12);

  --fz:16px;
  --lh:1.65;

  --ease: cubic-bezier(.2,.8,.2,1);
  --focus: rgba(29,78,216,.28);

  /* ritmos */
  --sec-py: 28px;     /* padding vertical por seção */
  --block-gap: 14px;  /* distância entre blocos (img, video, boxes) */
  --flow-gap: 16px;   /* distância entre parágrafos/itens no prose */
}

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

html{
  font-size:var(--fz);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:Poppins,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video,canvas{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:var(--link);
  text-decoration:none;
  text-underline-offset:3px;
}
a:hover{ text-decoration:underline; }

button,input,select,textarea{
  font:inherit;
  color:inherit;
}
button{ cursor:pointer; }

::selection{ background:rgba(29,78,216,.18); }

/* =========================
   LAYOUT BASE
========================= */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}

.page{ width:100%; }

/* garante respiro do topo (pra não “colar” no header do site) */
main.page{
  padding-top: 40px;
  padding-bottom: 0px;
}

/* todas as sections com mesma “largura útil” e ritmo */
main.page > section{
  padding: var(--sec-py) 0;
}

/* remove qualquer “card por seção” antigo */
main.page > section .container{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding-top:0;
  padding-bottom:0;
}

/* se você ainda usa classes .main1..6 no HTML, elas não quebram */
.main1,.main2,.main3,.main4,.main5,.main6{
  padding:0 !important;
  margin:0 !important;
}

/* =========================
   TIPOGRAFIA / PROSE
========================= */
.prose{
  width:100%;
}

/* flow spacing (equilibrado) */
.prose > *{ margin:0; }
.prose > * + *{ margin-top: var(--flow-gap); }

.prose p{
  color:var(--ink);
  font-size:16px;
}
.prose small{ color:var(--muted); }

/* títulos */
.title{
  margin:0 0 12px;
  font-size:56px;
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:900;
  color:var(--ink);
  max-width:none;        /* evita “comprimir” */
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}

.h2, h2{
  margin: 18px 0 12px;
  font-size:36px;
  line-height:1.12;
  letter-spacing:-.03em;
  font-weight:900;
  color:var(--ink);
}

.lead{
  margin:0 0 14px;
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
  max-width:72ch;
}

/* links “editorial” */
.link{ color:var(--link); font-weight:800; }
.link:hover{ text-decoration:underline; }

.hl-red{ color:var(--danger); font-weight:900; }

/* =========================
   MAIN 1 (Kicker + Meta + Hero)
========================= */
.kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin:4px 0 14px;
  flex-wrap:wrap;
}

/* badge NÃO pode virar “barra” */
.kicker__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:100%;
  padding:7px 12px;
  border-radius:999px;
  background:#ff3b30;
  color:#fff;
  font-weight:900;
  font-size:12px;
  line-height:1;
  letter-spacing:.2px;
  white-space:nowrap;
  box-shadow:0 10px 22px rgba(255,59,48,.18);
  gap:8px;
}

/* se o emoji estiver num span, garante que aparece bonito */
.kicker__badge .icon,
.kicker__badge .emoji{
  display:inline-block;
  line-height:1;
  transform: translateY(-.5px);
}

.kicker__text{
  font-weight:900;
  font-size:13px;
  color:var(--ink);
  line-height:1.1;
}

.meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  color:var(--muted);
  padding-bottom:14px;
  margin:0 0 14px;
  border-bottom:1px solid var(--line);
}
.meta strong{ color:var(--ink); font-weight:900; }
.meta__sep{ opacity:.5; }
.meta__muted{ opacity:.85; }

.hero{
  margin:14px 0 0;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid rgba(11,18,32,.08);
  box-shadow:var(--shadow-md);
  position:relative;
}
.hero__img{ width:100%; height:auto; }

/* overlay leve */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.18));
  pointer-events:none;
}

/* =========================
   MAIN 2 (Texto)
========================= */
.main2 .prose{ margin-top:0; }
.main2 .prose p strong{ font-weight:900; }

/* =========================
   MAIN 3 (Wide media)
========================= */
.wide-media{
  margin: 0 0 var(--block-gap);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid rgba(11,18,32,.08);
  box-shadow:var(--shadow-md);
  background:#0b1220;
}
.wide-media__img{ width:100%; height:auto; opacity:.98; }

/* =========================
   MAIN 4 (Vídeo + Feature box)
========================= */
/* garante FULL WIDTH do container */
.video{
  width:100%;
  margin: var(--block-gap) 0;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid rgba(11,18,32,.08);
  box-shadow:var(--shadow-md);
  background:#0b1220;
  position:relative;
}

/* se você usa thumbnail IMG */
.video__thumb{
  width:100%;
  height:auto;
  display:block;
  opacity:.96;
}

/* se você usa iframe/video real */
.video iframe,
.video video{
  width:100%;
  display:block;
  border:0;
}

/* play fake (só visual) */
.video::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:64px; height:64px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}
.video::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:0; height:0;
  transform:translate(-38%,-50%);
  border-left:16px solid rgba(255,255,255,.9);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}

.video__cap{
  position:absolute;
  left:14px; bottom:12px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(11,18,32,.72);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:12px;
  font-weight:800;
  backdrop-filter:blur(6px);
}

/* box de features (mantém “bonito” sem virar card genérico) */
.feature-box{
  margin-top:var(--block-gap);
  background:#f2f7ff;
  border:1px solid rgba(29,78,216,.12);
  border-left:6px solid var(--danger);
  border-radius:18px;
  padding:18px;
}
.feature-list{ margin:0; padding-left:18px; }
.feature-list li{ margin:10px 0; color:var(--ink); line-height:1.65; }
.feature-list strong{ font-weight:900; }


/* =========================
   MAIN 6 (Comentários)
========================= */
.comments-head{
  background:#f2f7ff;
  border:1px solid rgba(29,78,216,.12);
  border-radius:14px;
  padding:10px 14px;
  color:var(--ink);
  font-weight:900;
  margin:0 0 14px;
}

.comments{ display:flex; flex-direction:column; }

.comment{
  display:flex;
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.comment:last-child{ border-bottom:0; }

.comment__avatar{
  width:44px; height:44px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(11,18,32,.12);
  flex:0 0 44px;
}

.comment__body{ min-width:0; flex:1; }

.comment__name{
  font-weight:900;
  color:var(--brand);
  font-size:14px;
  margin:0 0 6px;
}

.comment__text{
  margin:0 0 8px;
  color:var(--ink);
  font-size:14px;
  line-height:1.7;
}

.comment__actions{
  font-size:12px;
  color:rgba(11,18,32,.60);
  margin:0 0 10px;
  display:flex;
  gap:10px;
}
.comment__actions a{
  color:var(--link);
  font-weight:900;
  text-decoration:none;
}
.comment__actions a:hover{ text-decoration:underline; }
.comment__actions a.is-on{ color:var(--danger); }

.comment__media{
  display:block;
  width:min(300px,100%);
  border-radius:14px;
  border:1px solid rgba(11,18,32,.12);
  margin-top:8px;
}

.comment__replies{
  margin-top:10px;
  padding-left:12px;
  border-left:2px solid rgba(11,18,32,.10);
}
.comment--reply{
  padding:12px 0 0;
  border-bottom:0;
}
.comment--reply .comment__avatar{
  width:36px;height:36px;flex-basis:36px;border-radius:12px;
}
.comment--reply .comment__name{ font-size:13px; }
.comment--reply .comment__text{ font-size:13px; }

.comments-cta{
  margin:18px 0 0;
  display:flex;
}

/* =========================
   BOTÕES
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:16px 18px;
  border-radius:16px;
  font-weight:900;
  letter-spacing:.2px;
  border:1px solid transparent;
  background:var(--danger);
  color:#fff;
  text-decoration:none;
  transition:transform .18s var(--ease), filter .18s var(--ease);
  will-change:transform;
}
.btn:hover{
  text-decoration:none;
  filter:brightness(.99);
  transform:translateY(-1px);
}
.btn:active{ transform:translateY(0); }
.btn:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

.btn--pulse{
  animation: btnPulse 2.6s var(--ease) infinite;
}
@keyframes btnPulse{
  0%,100%{ transform:translateY(0); filter:brightness(1); }
  50%{ transform:translateY(-1px); filter:brightness(1.01); }
}

/* =========================
   REVEAL (se você usa)
========================= */
.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal.is-in{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   FOOTER (se existir)
========================= */
.footer{
  padding:24px 0;
  color:var(--muted);
  font-size:13px;
  border-top:1px solid var(--line);
}

/* =========================
   RESPONSIVO
========================= */
@media (max-width:980px){
  .title{ font-size:46px; }
  .h2, h2{ font-size:32px; }
}

@media (max-width:720px){
  :root{ --container-pad:16px; --sec-py:22px; --flow-gap:14px; }
  main.page{ padding-top: 6px; }

  .title{ font-size:34px; line-height:1.08; }
  .lead{ font-size:16px; }

  .hero, .wide-media, .video{ border-radius:18px; }
  .offer__headline{ font-size:26px; }
  .offer__to{ font-size:24px; }
  .offer__card{ padding:16px 14px 14px; }
  .offer__img{ width:min(260px,76%); }

  .comment{ padding:14px 0; }
  .comment__avatar{ width:40px; height:40px; flex-basis:40px; }
  .comment__media{ width:100%; }
  .comment__replies{ padding-left:10px; }
}

/* =========================
   ACESSIBILIDADE
========================= */
@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover{ transition:none; }
  .btn--pulse{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .video::before, .video::after{ display:none; }
}