/* ===========================================================
   ADDSTV — Pagina de vendas do anunciante (layout de referencia)
   Depende de tokens.css (1B) + landing.css.

   Estrutura adotada da referencia:
   - nav com logo centrada e CTA em pilula
   - hero centrado, headline em dois pesos
   - leque de telas em perspectiva, sangrando nas bordas
   - legendas em tres colunas separadas por filete
   - bento assimetrico
   Paleta e tipografia continuam as do 1B.
   =========================================================== */

/* ---------- Nav centrada ---------- */
.nav2{
  position:sticky;top:0;z-index:60;
  background:rgba(251,251,249,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
}
.nav2-in{
  height:76px;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:var(--s-5);
}
.nav2-esq,.nav2-dir{display:flex;align-items:center;gap:var(--s-6)}
.nav2-dir{justify-content:flex-end}
.nav2 a.nav2-link{
  font-size:13.5px;font-weight:500;color:var(--ink-600);white-space:nowrap;
}
.nav2 a.nav2-link:hover{color:var(--ink-900);text-decoration:none}
.nav2-logo{justify-self:center;display:flex;align-items:center}
.nav2-logo img{height:34px;display:block}

/* CTA em pilula escura, como na referencia */
.pill-cta{
  display:inline-flex;align-items:center;gap:10px;padding:9px 9px 9px 20px;
  border-radius:var(--r-full);background:var(--ink-900);color:#fff;
  font-size:13.5px;font-weight:600;white-space:nowrap;
  transition:background .18s ease,transform .14s ease;
}
.pill-cta:hover{background:var(--brand-blue);color:#fff;text-decoration:none;transform:translateY(-1px)}
.pill-cta i{
  width:26px;height:26px;flex:none;border-radius:var(--r-full);
  background:#fff;color:var(--ink-900);display:grid;place-items:center;
  font-style:normal;font-size:13px;line-height:1;transition:transform .18s ease;
}
.pill-cta:hover i{transform:translateX(2px)}
.pill-cta.lg{padding:13px 13px 13px 28px;font-size:15px}
.pill-cta.lg i{width:34px;height:34px;font-size:15px}
/* variante clara: mesma pilula, cores invertidas, para a acao secundaria */
.pill-cta.claro{background:#fff;color:var(--ink-900)}
.pill-cta.claro i{background:var(--ink-900);color:#fff}
.pill-cta.claro:hover{background:var(--brand-blue);color:#fff}
.pill-cta.claro:hover i{background:#fff;color:var(--ink-900)}

/* menu mobile */
.nav2-hamb{
  display:none;width:38px;height:38px;border-radius:var(--r-md);
  border:1.5px solid var(--border);background:var(--white);cursor:pointer;
  padding:0;place-items:center;
}
.nav2-hamb i{display:block;width:16px;height:2px;background:var(--ink-700);border-radius:2px}
.nav2-hamb i+i{margin-top:3px}
@media(max-width:940px){
  .nav2-in{grid-template-columns:auto 1fr auto;height:64px}
  .nav2-esq{display:none}
  .nav2-logo{justify-self:flex-start}
  .nav2-hamb{display:grid}
  .nav2-dir .nav2-link{display:none}
}
.nav2-drawer{
  display:none;border-top:1px solid var(--border-soft);background:var(--surface);
  padding:var(--s-4) 0 var(--s-5);
}
.nav2-drawer.is-open{display:block}
.nav2-drawer a{
  display:block;padding:11px var(--s-5);font-size:15px;font-weight:500;color:var(--ink-700);
}
.nav2-drawer a:hover{background:var(--surface-alt);text-decoration:none}
@media(min-width:941px){.nav2-drawer{display:none !important}}

/* ---------- Hero centrado ---------- */
.hero2{padding-block:var(--s-16) 0;text-align:center}
.hero2-in{max-width:900px;margin-inline:auto;padding-inline:var(--s-5)}
.hero2 h1{
  font-family:var(--font-display);margin:0 0 var(--s-5);
  color:var(--ink-900);text-wrap:balance;
}
/* dois pesos, como na referencia (la e serif + sans; aqui e o
   contraste de peso do proprio Space Grotesk, para nao sair do 1B) */
.hero2 .h1-leve{
  display:block;font-weight:400;font-size:clamp(28px,4.6vw,48px);
  line-height:1.06;letter-spacing:-.02em;color:var(--ink-700);
}
.hero2 .h1-forte{
  display:block;font-weight:700;font-size:clamp(34px,6.4vw,66px);
  line-height:1.02;letter-spacing:var(--tracking-display);
}
.hero2 .lead{
  font-size:16.5px;line-height:1.6;color:var(--ink-500);
  max-width:44ch;margin:0 auto var(--s-6);text-wrap:balance;
}
.hero2-nota{font-size:13px;color:var(--ink-400);margin-top:var(--s-4)}

/* ---------- Leque de telas em perspectiva ---------- */
.leque{
  margin-top:var(--s-10);
  perspective:1500px;
  overflow:hidden;
  padding-block:var(--s-5) 0;
}
.leque-trilha{
  display:flex;justify-content:center;align-items:flex-end;gap:14px;
  transform-style:preserve-3d;
  padding-inline:var(--s-4);
}
.leque-card{
  --ang:calc(var(--i) * -11deg);
  --push:calc(var(--i) * var(--i) * -26px);
  flex:none;width:clamp(104px,12vw,158px);aspect-ratio:9/16;
  border-radius:14px;overflow:hidden;position:relative;
  transform:rotateY(var(--ang)) translateZ(var(--push));
  box-shadow:0 18px 40px rgba(10,35,64,.18);
  display:grid;place-items:center;text-align:center;padding:var(--s-3);
  background:linear-gradient(165deg,var(--c1),var(--c2));
}
/* as pontas somem nas bordas, como na referencia */
.leque-card[data-i="-3"],.leque-card[data-i="3"]{opacity:.5}
.leque-card[data-i="-2"],.leque-card[data-i="2"]{opacity:.82}
@media(max-width:820px){
  .leque-card[data-i="-3"],.leque-card[data-i="3"]{display:none}
}
@media(max-width:520px){
  .leque-card[data-i="-2"],.leque-card[data-i="2"]{display:none}
  .leque-trilha{gap:10px}
}
.leque-emoji{font-size:26px;line-height:1}
.leque-nome{
  font-family:var(--font-display);font-weight:700;font-size:12.5px;line-height:1.25;
  color:#fff;letter-spacing:-.01em;margin-top:8px;text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.leque-tv{
  position:absolute;left:0;right:0;bottom:8px;
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.leque-tag{
  position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:5px;
  background:var(--accent);color:#fff;font-size:8.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border-radius:3px;
}
.leque-tag b{width:4px;height:4px;border-radius:50%;background:#fff;animation:blink 1.6s infinite}

/* ---------- Legendas em tres colunas ---------- */
.legendas{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:940px;margin:var(--s-8) auto 0;padding-inline:var(--s-5);
}
.legendas > div{padding:0 var(--s-6);text-align:center}
.legendas > div + div{border-left:1px solid var(--border)}
.legendas h3{font-size:15.5px;margin-bottom:6px}
.legendas p{font-size:12.8px;line-height:1.6;color:var(--ink-500);margin:0}
@media(max-width:760px){
  .legendas{grid-template-columns:1fr;gap:var(--s-5)}
  .legendas > div + div{border-left:none;border-top:1px solid var(--border);padding-top:var(--s-5)}
}

/* ---------- Cabecalho de secao centrado ---------- */
.head2{max-width:760px;margin:0 auto var(--s-10);text-align:center;padding-inline:var(--s-5)}
.head2 h2{
  font-size:clamp(26px,4.2vw,42px);line-height:1.08;margin-bottom:var(--s-4);
  text-wrap:balance;
}
.head2 p{font-size:15px;line-height:1.65;color:var(--ink-500);max-width:60ch;margin:0 auto;text-wrap:pretty}

/* ---------- Bento ---------- */
.bento{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--s-4);
}
.bento-item{
  border-radius:18px;overflow:hidden;position:relative;
  min-height:270px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--s-6);background:var(--surface-alt);border:1px solid var(--border);
}
.bento-item h3{font-size:20px;margin-bottom:8px;letter-spacing:-.02em}
.bento-item p{font-size:13.5px;line-height:1.6;margin:0;color:var(--ink-600);max-width:42ch}

/* variantes de preenchimento */
.bento-item.fill-blue{
  background:linear-gradient(150deg,#0B72F0,#0A3B7A);border-color:transparent;
}
.bento-item.fill-deep{background:var(--surface-dark);border-color:transparent}
.bento-item.fill-accent{
  background:linear-gradient(150deg,#FF7A1A,#C74F00);border-color:transparent;
}
.bento-item.fill-blue h3,.bento-item.fill-deep h3,.bento-item.fill-accent h3{color:#fff}
.bento-item.fill-blue p,.bento-item.fill-accent p{color:rgba(255,255,255,.86)}
.bento-item.fill-deep p{color:#A9C6EC}
.bento-item.fill-soft{background:var(--brand-blue-050);border-color:var(--border-blue)}

/* larguras */
.b-7{grid-column:span 7}
.b-5{grid-column:span 5}
.b-4{grid-column:span 4}
.b-8{grid-column:span 8}
.b-6{grid-column:span 6}
@media(max-width:900px){
  .b-7,.b-5,.b-4,.b-8,.b-6{grid-column:span 12}
  .bento-item{min-height:210px}
}

/* selo grande dentro do bento */
.bento-selo{
  position:absolute;top:var(--s-5);right:var(--s-5);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(38px,7vw,72px);line-height:1;letter-spacing:-.04em;
  color:rgba(255,255,255,.16);
}
.bento-item.fill-soft .bento-selo{color:rgba(11,114,240,.14)}
.bento-item:not([class*="fill-"]) .bento-selo{color:rgba(10,35,64,.07)}

/* mini mockup vertical dentro de um card do bento */
.bento-tv{
  position:absolute;right:var(--s-6);bottom:-28px;width:118px;aspect-ratio:9/16;
  border-radius:12px;background:#0A2340;padding:6px;
  box-shadow:0 20px 44px rgba(10,35,64,.32);transform:rotate(-5deg);
}
.bento-tv > div{
  width:100%;height:100%;border-radius:7px;
  background:linear-gradient(160deg,#0B72F0,#0A3B7A);
  display:grid;place-items:center;color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:11px;text-align:center;padding:8px;
}
@media(max-width:900px){.bento-tv{display:none}}

/* ---------- Faixa de numeros do hero ---------- */
.numeros2{
  display:flex;justify-content:center;gap:clamp(var(--s-6),6vw,var(--s-16));
  flex-wrap:wrap;padding-block:var(--s-10);
}
.numeros2 div{text-align:center}
.numeros2 b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(26px,3.4vw,38px);letter-spacing:var(--tracking-display);
  color:var(--ink-900);line-height:1.05;
}
.numeros2 b.azul{color:var(--brand-blue)}
.numeros2 b.laranja{color:var(--accent)}
.numeros2 span{
  display:block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--ink-400);margin-top:6px;
}