/* Layout de desktop da página de vendas (fatia 2 do site novo, decisão 19753a79-361). Carrega depois do base.css.
   Mockup aprovado: https://claude.ai/artifact/F11RQx9M6WubL3bhixy2Ka
   - Topo que cabe num notebook de 1366x768: título menor, celular menor e um cartão flutuante só, fora do celular.
   - Todo o conteúdo visível sem esperar a animação da rolagem.
   - "Parte por parte" vira grade, os 4 passos ficam lado a lado, os estilos viram grade e as dúvidas, 2 colunas.
   O celular (até 760 px) continua como hoje; lá só muda a grade dos estilos (3 por linha, os 6 primeiros). */

/* Do tablet para cima (761 px): o celular fica com a animação, os títulos e o topo de hoje. */
@media (min-width:761px){
  /* Conteúdo visível parado: a rolagem não esconde mais nada. */
  .js .reveal{opacity:1;transform:none;transition:none}
  /* O antes e depois e os avisos da Esma Expert também ficam no estado final, sem depender da rolagem. */
  .js .cmp-row:not(.is-in) .antes .t::after{transform:scaleX(1)}
  .js .cmp-row:not(.is-in) .mk{transform:none}
  .js .cmp-row:not(.is-in) .seta,.js .cmp-row:not(.is-in) .depois{opacity:1;transform:none}
  .js .expert .ex-avisos .exn{opacity:1;transform:none}

  .sec{padding-block:clamp(56px,7vw,96px)}
  .sec-head{margin-bottom:clamp(28px,4vw,44px)}
  .h2{font-size:clamp(30px,3.2vw,44px);line-height:1.08}

  /* ---------- Topo ---------- */
  .hero{padding-block:calc(68px + clamp(28px,4vw,48px)) clamp(40px,5vw,64px)}
  .hero h1{font-size:clamp(38px,3.8vw,54px);line-height:1.04}
  .hero-txt{gap:18px}
  .hero .lead{font-size:clamp(16px,1.25vw,18px);max-width:52ch}
}
/* Preço do topo numa linha, sem caixa, e os três botões numa fileira só: o principal é o "Começar 7 dias grátis",
   "Ver os planos" e "Ver uma página pronta" ficam secundários. A ordem segue o mockup: título, texto, preço, botões. */
@media (min-width:981px){
  .hero .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .hero h1{max-width:13em}
  .hero .hero-txt{display:flex;flex-wrap:wrap;align-items:center;gap:16px 12px}
  .hero .hero-txt>*{flex:0 0 100%;margin:0}
  .hero .hero-txt>h1{order:1}
  .hero .hero-txt>.lead{order:2}
  .hero .conv-topo,.hero .hero-ctas{display:contents}
  .hero .conv-topo-preco{order:3;flex:0 0 auto}
  .hero .conv-topo-preco b{font-size:22px}
  .hero .conv-topo-oferta{order:3;flex:1 1 auto;font-size:15px}
  .hero .conv-topo .btn{order:4;flex:0 0 auto;width:auto}
  .hero .hero-ctas .btn{order:4;flex:0 0 auto}
  .hero .hero-checks{order:5}
  .hero .hero-txt>p:last-child{order:6}
}
@media (min-width:761px){
  .hero-ctas .btn-ink{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(16,18,25,.14)}
  .hero-ctas .btn-ink:hover{background:#fff}
  .hero-ctas .btn-ghost{background:none;box-shadow:none;color:var(--violet-ink);padding-inline:8px}
  .hero-ctas .btn-ghost::after{content:"→";margin-left:2px}
}

/* Celular menor e um cartão só ("Novo pedido"), à esquerda e embaixo, fora da tela do celular. */
@media (min-width:981px){
  .hero-vis{--s:.8;padding-block:0}
  .gpos.c0,.gpos.c1,.gpos.c2,.gpos.n2{display:none}
  .gpos.n1{left:-4%;right:auto;top:auto;bottom:10%}
}
@media (min-width:981px) and (max-height:820px){.hero-vis{--s:.72}}

/* ---------- Parte por parte: no desktop, as partes ficam paradas lado a lado; no celular segue a faixa que corre ---------- */
@media (min-width:761px){
  .partes{padding-block:0 clamp(48px,6vw,80px)}
  .partes-tit{text-align:left;max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
  .marquee{-webkit-mask-image:none;mask-image:none;overflow:visible;max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
  .marquee-track{animation:none;width:auto;display:block}
  .marquee-track>div:first-child{display:flex!important;flex-wrap:wrap;gap:10px}
  .marquee-track>div:nth-child(n+2){display:none!important}
  .chip{margin:0;white-space:nowrap;padding:10px 16px 10px 10px;border:1px solid var(--line);box-shadow:none;font-size:15px;font-weight:700;line-height:1.25}
}
@media (min-width:761px){.tour{padding-top:clamp(24px,3vw,40px)}}

/* ---------- Títulos das seções alinhados à esquerda no desktop ---------- */
@media (min-width:761px){
  .sec-head.center{margin-inline:0;text-align:left;justify-items:start}
  .sec-head.center .lead{margin-inline:0}
}

/* ---------- Como funciona: os 4 passos lado a lado (2 por linha entre 901 e 1099 px) ---------- */
@media (min-width:901px){
  .spine,.node{display:none}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
  .step,.step.rev{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:20px;padding:0;align-items:start}
  .step .step-txt,.step.rev .step-txt{order:2;gap:12px}
  .step .step-vis,.step.rev .step-vis{order:1;height:380px;min-height:0;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
  .step-txt h3{font-size:22px}
  .step-txt>p{font-size:15.5px}
  .checks{gap:8px;font-size:15px}
  .scene{width:100%;zoom:.86}
}
@media (min-width:1100px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .step .step-vis,.step.rev .step-vis{height:330px}
  .scene{zoom:.72}
}

/* ---------- Estilos: grade com os 6 primeiros, imagem fixa (sem moldura preta vazia) ---------- */
.est-marquee{-webkit-mask-image:none;mask-image:none;overflow:visible;max-width:1200px;margin-inline:auto;padding:0 clamp(16px,4vw,32px) 28px}
.est-track{animation:none;width:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.est-track>div:first-child{display:contents!important}
.est-track>div:nth-child(n+2){display:none!important}
.est{width:auto;margin:0;align-content:start}
.est.dn{translate:none}
.est:nth-of-type(n+7){display:none}
.est-ph{padding:4px;border-radius:16px;box-shadow:none;background:#fff;border:1px solid var(--line)}
.est-ph img{border-radius:12px}
.est b{font-size:16px;margin-top:4px}
.est small{font-size:13px}
.est:hover .est-ph,.est:focus-visible .est-ph{transform:translateY(-4px);box-shadow:var(--card)}
@media (max-width:760px){
  .est-track{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .est small{display:none}
}
.est-cta{justify-content:flex-start;text-align:left}

/* ---------- Dúvidas: título em cima e as perguntas em 2 colunas ---------- */
@media (min-width:901px){
  .faq-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .faq-side{position:static}
  .faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}

/* ---------- Fim: faixa grafite com o título à esquerda e o botão à direita ---------- */
@media (min-width:901px){
  .final{grid-template-columns:minmax(0,1fr) auto;justify-items:start;align-items:center;text-align:left;column-gap:48px}
  .final>*{grid-column:1}
  .final>.btn,.final>.final-ctas,.final>a.btn{grid-column:2;grid-row:1 / span 3;align-self:center}
  .final .lead{margin-inline:0}
  .final-checks{justify-content:flex-start}
}
@media (min-width:761px){.final .aurora{display:none}}