/* =========================================================
   isaac.dev — landing da oferta
   Paleta tirada da própria logo: azul #2743D9, tinta #101014,
   cinza #8B8B95 e branco. Fora dela, só o vermelho do prazo —
   uma cor que a página não usa em lugar nenhum, justamente para
   que o relógio da condição não se confunda com o resto.
   ========================================================= */

:root{
  /* cor */
  --blue:#2743D9;
  --blue-deep:#1B2FA8;
  --blue-soft:#EBEEFF;
  --blue-line:#C9D1FF;
  --ink:#101014;
  --body:#4C4C58;
  --gray:#8B8B95;
  --line:#E4E6F0;
  --paper:#FFFFFF;
  --bg:#F6F7FB;
  --night:#0A0D1F;
  --night-2:#141A3D;
  --wpp:#25D366;

  /* o vermelho do prazo, e só dele: a escala vai do vermelho do
     despertador da ilustração — onde a cena encosta no cartão — até o
     fundo em que o cartão fecha, escuro o bastante para segurar o texto
     branco por cima */
  --alert:#E11D2E;
  --alert-2:#C0121F;
  --alert-3:#8E0A14;
  --alert-4:#630710;

  /* tipo */
  --display:'Poppins',system-ui,sans-serif;
  --text:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* medidas */
  --deal-h:56px;                     /* altura da faixa do prazo, pinada no topo */
  --wrap:1180px;
  --pad:clamp(1.15rem,4vw,2.5rem);
  --r:18px;
  --r-lg:26px;
  --ease:cubic-bezier(.22,.7,.28,1);
  --ease-in:cubic-bezier(.5,0,.85,.35);   /* para saídas: sai puxando, sem freio no fim */
  --shadow:0 1px 2px rgba(16,16,20,.04),0 12px 28px -12px rgba(16,16,20,.14);
  --shadow-lg:0 40px 80px -40px rgba(20,26,61,.45),0 2px 8px rgba(16,16,20,.05);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* o respiro do âncora acompanha a barra: header (76px) mais um fio de folga */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(94px + var(--deal-h));overflow-x:hidden;overflow-x:clip}
/* sem JavaScript a faixa não existe: o header volta a colar no topo da tela */
html:not(.js){--deal-h:0px}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--text);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;color:var(--ink);font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.06}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong,b{font-weight:600;color:var(--ink)}

:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---------- o cursor ----------
   Peça que se mexe no hover pede a mão aberta: o cursor avisa que aquilo ali é
   um objeto, não um pedaço de fundo. Ao apertar ela fecha, como quem pega.
   Cuidado com a promessa: quem leva clique de verdade — link, botão, pergunta
   do FAQ — segue com a mãozinha de apontar, e o campo de busca com o cursor de
   texto. As regras vêm depois da mão aberta e cada uma declara o próprio
   cursor, então elas ganham da herança do bloco de cima. */
.mock,
.ticker,
.step,
.plano,
.plan__lado,
.plano__itens li,
.goog__list li,
.serp,
.faq__badge{cursor:grab}

.mock:active,
.ticker:active,
.step:active,
.plano:active,
.plan__lado:active,
.plano__itens li:active,
.goog__list li:active,
.serp:active,
.faq__badge:active{cursor:grabbing}

a,button,summary,label,[role="button"]{cursor:pointer}
input,textarea,select{cursor:auto}
.faq__input{cursor:text}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:.9rem 1.3rem;border-radius:0 0 12px 0}
.skip:focus{left:0}

.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* =========================================================
   peças reutilizáveis
   ========================================================= */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  margin:0 0 1.35rem;
  font-family:var(--mono);font-size:.74rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
}
.eyebrow__mark{
  display:inline-flex;align-items:center;
  padding:.3rem .55rem;border-radius:7px;
  background:var(--blue-soft);color:var(--blue);
  letter-spacing:.06em;font-weight:700;
}
.eyebrow--light{color:#9FB0FF}
.eyebrow--light .eyebrow__mark{background:rgba(124,144,255,.16);color:#B9C5FF}

.btn{
  --btn-bg:var(--blue);--btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.4rem;
  border-radius:999px;
  font-family:var(--display);font-size:.97rem;font-weight:600;letter-spacing:-.01em;
  background:var(--btn-bg);color:var(--btn-fg);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s;
  will-change:transform;
}
.btn svg{width:19px;height:19px;flex:none}
.btn--lg{min-height:60px;padding:1.05rem 2rem;font-size:1.06rem}
.btn--sm{min-height:50px;padding:.65rem 1.45rem;font-size:1rem}
/* o zap acompanha o corpo do botão, senão o ícone encolhe dentro dele */
.btn--sm svg{width:21px;height:21px}
.btn--block{width:100%}

.btn--primary{box-shadow:0 12px 30px -12px rgba(39,67,217,.75)}
.btn--primary:hover{background:var(--blue-deep);transform:translateY(-3px);box-shadow:0 20px 38px -14px rgba(39,67,217,.85)}
.btn--primary:active{transform:translateY(-1px)}

/* o secundário fica ao lado do azul: sem corpo próprio ele sumia no fundo.
   Papel branco para descolar do --bg, fio azul da paleta e uma sombra rasa —
   lido como botão, mas ainda um degrau abaixo do primário */
.btn--ghost{
  background:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--blue-line),0 1px 2px rgba(16,16,20,.05),0 10px 24px -14px rgba(39,67,217,.4);
}
.btn--ghost:hover{
  background:var(--blue-soft);color:var(--blue-deep);transform:translateY(-3px);
  box-shadow:inset 0 0 0 1.5px var(--blue),0 1px 2px rgba(16,16,20,.05),0 18px 32px -16px rgba(39,67,217,.55);
}
.btn--ghost:active{transform:translateY(-1px)}

.btn--wpp{background:var(--wpp);color:#062d16;box-shadow:0 14px 34px -12px rgba(37,211,102,.7)}
.btn--wpp:hover{background:#1fbd5b;transform:translateY(-3px)}

/* o claro é para fundo escuro: no cartão do plano ele é a peça mais clara
   da caixa, que é o que faz o olho parar nele */
.btn--light{
  background:#fff;color:var(--blue-deep);
  box-shadow:0 2px 0 rgba(255,255,255,.35),0 18px 36px -14px rgba(4,7,20,.85);
}
.btn--light:hover{background:#fff;transform:translateY(-3px);box-shadow:0 2px 0 rgba(255,255,255,.5),0 26px 46px -16px rgba(4,7,20,.95)}
.btn--light:active{transform:translateY(-1px)}
/* a seta anda quando o ponteiro chega, como quem já vai abrindo a porta */
.btn__seta{transition:transform .35s var(--ease)}
.btn--light:hover .btn__seta{transform:translateX(4px)}

/* brilho que passa pelo botão */
.btn--primary::after,.btn--wpp::after{
  content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  background-size:250% 100%;background-position:180% 0;
  transition:background-position .7s var(--ease);pointer-events:none;
}
.btn--primary:hover::after,.btn--wpp:hover::after{background-position:-60% 0}

.section{padding:clamp(4.5rem,9vw,8rem) 0}
.section__head{max-width:640px;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section__title{font-size:clamp(2rem,1.3rem + 2.9vw,3.35rem)}
/* palavra em destaque dentro do título da seção */
.section__title .mark{color:var(--blue);white-space:nowrap}
.section__lead{margin-top:1.1rem;font-size:1.08rem;color:var(--body)}

/* marca */
/* o corpo é o mesmo do nome na nota do plano: a marca aparece do mesmo
   tamanho nos dois lugares em que ela é escrita */
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand__tag{display:flex;color:var(--blue);transition:transform .4s var(--ease)}
/* o sinal sai no tamanho do próprio desenho: 44×24 é o viewBox dele */
.brand__tag svg{width:44px;height:24px}
.brand:hover .brand__tag{transform:translateX(-2px) scale(1.06)}
.brand__word{font-family:var(--display);font-weight:600;font-size:1.6rem;letter-spacing:-.045em;color:var(--ink)}
.brand__dot{color:var(--blue)}
.brand__dev{color:var(--gray);font-weight:500}

/* Revelações no scroll. O estado escondido só existe quando há JavaScript —
   sem ele a página continua legível do começo ao fim. */
.reveal{transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:calc(var(--i,0) * 95ms)}
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.in{opacity:1;transform:none}

/* entrada da página */
@keyframes loadUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.load{opacity:0;animation:loadUp .95s var(--d,0s) var(--ease) both}

/* =========================================================
   o prazo da oferta
   Faixa grudada no topo, acima do header, presente na página inteira.
   Quem calcula a data é o main.js: o limite é sempre a virada do mês
   corrente, então a faixa nunca aparece vencida e ninguém precisa lembrar
   de trocar data nenhuma na mão.
   ========================================================= */
/* sem JavaScript não há relógio: em vez de quatro zeros parados, nada */
html:not(.js) .deal{display:none}

.deal{
  position:sticky;top:0;z-index:90;
  /* o brilho de cima tira o chapado da faixa cheia e dá alguma profundidade */
  background:
    radial-gradient(120% 200% at 50% -70%,rgba(255,255,255,.2),transparent 62%),
    linear-gradient(90deg,var(--blue-deep),var(--blue) 50%,var(--blue-deep));
  color:#DCE2FF;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.14);
}
.deal__in{
  display:flex;align-items:center;justify-content:center;gap:clamp(.7rem,1.6vw,1.4rem);
  height:var(--deal-h);
}
.deal__lab{
  display:flex;align-items:center;gap:.6rem;min-width:0;
  font-family:var(--mono);font-size:.8rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.deal__lab b{color:#fff}
.deal__ico{flex:none;width:19px;height:19px;opacity:.85}

/* mono e largura tabular: o número troca a cada segundo sem empurrar o resto */
.deal__clock{
  display:flex;align-items:center;gap:.35rem;flex:none;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.deal__u{
  display:flex;align-items:baseline;gap:.05rem;
  padding:.32rem .55rem;border-radius:9px;
  background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.deal__u b{font-size:1rem;font-weight:700;letter-spacing:-.03em;color:#fff}
.deal__u i{font-style:normal;font-size:.72rem;opacity:.7}
/* na reta final os blocos acendem: é o último dia da condição */
.deal.is-final .deal__u{background:rgba(255,255,255,.28)}

.deal__sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* =========================================================
   header
   ========================================================= */
/* encostado embaixo da faixa da oferta, que fica pinada no topo */
.site-header{position:sticky;top:var(--deal-h);z-index:80;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.site-header.is-stuck{background:rgba(246,247,251,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
/* a barra é o botão (50px) mais um respiro de cada lado: fica apertada o
   bastante para não boiar e larga o bastante para a marca crescer */
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:76px}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,1.9rem)}
/* os links são Poppins como o botão ao lado deles: duas famílias de sem-serifa
   na mesma linha do header entregavam a costura */
.nav > a:not(.btn){
  position:relative;padding:.4rem 0;
  font-family:var(--display);font-size:1.06rem;font-weight:500;letter-spacing:-.015em;
  color:var(--ink);
}
.nav > a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.nav > a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}

.burger{display:none;width:46px;height:46px;border-radius:12px;padding:12px}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.burger span + span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   hero
   ========================================================= */
.hero{position:relative;overflow:hidden;padding:clamp(3.5rem,3.5vw + 1.9rem,5.3rem) 0 clamp(4rem,7vw,6rem)}
.hero__in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:center;
}

.hero__grid{
  position:absolute;inset:-20% 0 0;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 20%,#000 10%,transparent 72%);
  mask-image:radial-gradient(120% 80% at 50% 20%,#000 10%,transparent 72%);
  opacity:.75;
}
.hero__glow{
  position:absolute;z-index:1;top:-28%;right:-14%;width:min(760px,85vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(39,67,217,.22),rgba(39,67,217,0) 62%);
  animation:drift 16s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-6%,7%,0) scale(1.14)}
}

.hero__title{font-size:clamp(2.5rem,1.35rem + 4.3vw,4.05rem);font-weight:700;letter-spacing:-.045em;line-height:1.02}
.hero__title span{display:block}
.hero__title .mark{display:inline;position:relative;color:var(--blue);white-space:nowrap}
.hero__title .mark::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.03em;height:.11em;border-radius:99px;
  background:var(--blue);opacity:.22;
  transform:scaleX(0);transform-origin:left;
  animation:swipe .8s 1.1s var(--ease) forwards;
}
@keyframes swipe{to{transform:scaleX(1)}}

/* o lead usa a Poppins (a fonte da logo) num corpo maior: destaca a oferta
   sem competir com o título, que é a mesma família em peso 700 */
.hero__lead{
  margin-top:1.6rem;max-width:21em;
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.18rem,1.02rem + .62vw,1.5rem);
  letter-spacing:-.022em;line-height:1.42;color:var(--body);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem}

/* ---------- o navegador que se monta sozinho ---------- */
.hero__stage{position:relative;perspective:1400px}

.mock{position:relative;transform:rotateY(-7deg) rotateX(3deg);transform-style:preserve-3d}
.mock__browser{
  position:relative;border-radius:16px;overflow:hidden;background:var(--paper);
  box-shadow:var(--shadow-lg);border:1px solid var(--line);
}
.mock__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#F1F2F7;border-bottom:1px solid var(--line)}
.mock__dot{width:9px;height:9px;border-radius:50%;background:#D5D7E2}
.mock__dot:nth-child(1){background:#E4E6F0}
.mock__url{
  display:flex;align-items:center;gap:7px;flex:1;margin-left:8px;
  height:26px;padding:0 11px;border-radius:99px;background:#fff;border:1px solid var(--line);
  font-family:var(--mono);font-size:.68rem;color:var(--gray);overflow:hidden;
}
.mock__lock{width:11px;height:11px;color:var(--wpp);flex:none}
/* A URL é datilografada caractere a caractere. A largura anda em passos de 1ch
   (a fonte é monoespaçada) e para na medida exata do texto — antes ela crescia
   até 100% da barra, o que jogava o cursor lá na ponta direita, longe da letra.
   --chars = número de caracteres de .mock__type. */
.mock__type{
  --chars:17;
  box-sizing:content-box;
  display:inline-block;overflow:hidden;white-space:nowrap;
  width:0;padding-right:2px;
  border-right:1.5px solid var(--blue);
  animation:
    typeIt 11s steps(var(--chars),end) infinite both,
    caret .8s steps(1) infinite;
}
@keyframes typeIt{
  0%,3%{width:0}
  17%,80%{width:calc(var(--chars) * 1ch)}
  88%,100%{width:0}
}
@keyframes caret{50%{border-color:transparent}}

.mock__screen{position:relative;padding:16px;min-height:290px;background:var(--paper)}
.mock__scan{
  position:absolute;top:0;left:0;height:2px;width:100%;transform-origin:left;
  background:linear-gradient(90deg,var(--blue),#7C90F0);
  animation:scan 11s infinite both;
}
@keyframes scan{0%,15%{transform:scaleX(0);opacity:1}27%{transform:scaleX(1);opacity:1}33%,100%{opacity:0;transform:scaleX(1)}}

.b{animation:blockIn 11s var(--d,0s) infinite both}
@keyframes blockIn{
  0%{opacity:0;transform:translateY(14px) scale(.94)}
  5%{opacity:1;transform:none}
  84%{opacity:1;transform:none}
  91%{opacity:0;transform:translateY(-10px) scale(.98)}
  100%{opacity:0;transform:translateY(14px) scale(.94)}
}

.mock__nav{display:flex;align-items:center;gap:9px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.mock__logo{width:34px;height:11px;border-radius:3px;background:var(--ink)}
.mock__link{width:26px;height:6px;border-radius:99px;background:#E7E9F2;margin-left:auto}
.mock__link + .mock__link{margin-left:0}

.mock__body{padding:22px 4px 18px}
.mock__h1{display:block;height:17px;width:82%;border-radius:5px;background:var(--ink)}
.mock__h1--2{width:56%;margin-top:9px;background:var(--blue)}
.mock__txt{display:block;height:7px;width:68%;margin-top:14px;border-radius:99px;background:#E7E9F2}
.mock__btn{
  display:inline-flex;align-items:center;margin-top:18px;padding:8px 15px;border-radius:99px;
  background:var(--wpp);color:#062d16;font-family:var(--display);font-size:.66rem;font-weight:600;
}
.mock__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 4px}
.mock__cards i{height:52px;border-radius:9px;background:linear-gradient(160deg,#F1F3FA,#E8EBF6);border:1px solid var(--line)}
.mock__foot{height:22px;margin:14px 4px 0;border-radius:7px;background:#F1F3FA}

/* celular sobreposto */
.mock__phone{
  position:absolute;right:-6%;bottom:-13%;width:26%;min-width:112px;
  padding:7px;border-radius:20px;background:var(--ink);
  box-shadow:0 30px 50px -22px rgba(16,16,20,.55);
  transform:translateZ(60px) rotate(3deg);
}
.mock__phone::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:28%;height:4px;border-radius:99px;background:#3A3A46}
.mock__phone-screen{padding:14px 8px 10px;border-radius:14px;background:var(--paper);min-height:150px}
.mock__nav-m{display:block;height:7px;width:60%;border-radius:99px;background:var(--ink)}
.mock__phone-screen .mock__h1{height:9px;width:92%;margin-top:12px}
.mock__phone-screen .mock__h1--2{width:64%;margin-top:6px}
.mock__btn--m{display:block;height:15px;width:78%;margin-top:12px;padding:0;border-radius:99px}
.mock__card-m{display:block;height:34px;margin-top:11px;border-radius:8px;background:#F1F3FA;border:1px solid var(--line)}

.mock__badge{
  position:absolute;top:-16px;left:-18px;z-index:3;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .85rem;border-radius:99px;
  background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.04em;
  box-shadow:0 14px 26px -12px rgba(16,16,20,.6);
}
.mock__badge svg{width:12px;height:12px;color:var(--wpp)}

/* =========================================================
   ticker
   ========================================================= */
.ticker{
  overflow:hidden;padding:1.05rem 0;
  background:var(--ink);color:#fff;
  border-block:1px solid var(--ink);
}
.ticker__track{display:flex;width:max-content;animation:roll 34s linear infinite}
.ticker__track span{
  padding-right:1.2rem;white-space:nowrap;
  font-family:var(--display);font-size:clamp(1rem,2.6vw,1.5rem);font-weight:600;letter-spacing:-.02em;
}
.ticker__track b{color:var(--blue);padding:0 .55rem;font-weight:400}
@keyframes roll{to{transform:translateX(-50%)}}

/* =========================================================
   como funciona
   ========================================================= */
/* faixa um pouco mais baixa que as demais seções */
.steps{padding:clamp(3.25rem,6.5vw,5.75rem) 0}
.steps .section__head{margin-bottom:clamp(2rem,3.6vw,2.75rem)}

.steps__list{
  --rail:3.25rem;                     /* diâmetro do marcador que fica sobre a linha */
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem);
}
/* a linha horizontal que costura os três passos; some nas pontas */
.steps__list::before{
  content:"";position:absolute;left:0;right:0;top:calc(var(--rail) / 2);
  height:2px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,var(--blue-line) 7%,var(--blue-line) 93%,transparent);
}

/* marcador na primeira faixa, card na segunda — os três alinhados na mesma linha */
.step{position:relative;display:grid;grid-template-rows:var(--rail) 1fr;gap:1.5rem}

.step__num{
  grid-row:1;justify-self:center;z-index:2;
  display:grid;place-items:center;
  width:var(--rail);height:var(--rail);border-radius:50%;
  background:var(--paper);border:1.5px solid var(--blue-line);
  box-shadow:0 0 0 8px var(--bg);   /* abre um vão na linha em volta do marcador */
  font-family:var(--mono);font-size:.95rem;font-weight:700;line-height:1;
  color:var(--blue);
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.step:hover .step__num{background:var(--blue);border-color:var(--blue);color:#fff}

.step__card{
  grid-row:2;position:relative;z-index:1;   /* fica acima da linha quando ela vira vertical */
  padding:1.8rem 1.7rem 2rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.step:hover .step__card{transform:translateY(-8px);border-color:var(--blue-line);box-shadow:0 30px 50px -30px rgba(39,67,217,.5)}

/* painel de fundo: dá altura igual às três ilustrações, que têm proporções bem diferentes */
.step__art{
  display:grid;place-items:center;margin-bottom:1.5rem;padding:1.1rem;
  background:var(--blue-soft);border-radius:calc(var(--r-lg) - 9px);
}
.step__art img{display:block;width:auto;height:auto;max-width:100%;max-height:clamp(120px,12vw,160px)}

.step__title{font-size:1.32rem;margin-bottom:.7rem}
.step p{font-size:.99rem}

/* =========================================================
   plano — a nota
   ========================================================= */
.plan{position:relative;background:var(--paper);border-block:1px solid var(--line)}
/* o mesmo quadriculado do hero, na mesma medida de 64px: é o fundo da
   página aparecendo atrás dos dois cartões, que trazem cada um a sua
   versão dele por cima do azul e do vermelho. A máscara abre no alto,
   onde está o título, e fecha antes do rodapé da seção — o quadriculado
   some sozinho em vez de bater na borda.
   O pico da máscara não vai em preto cheio: o hero desenha a mesma linha
   por cima do cinza do --bg, e aqui o fundo é o branco do --paper, onde
   ela bateria bem mais forte. Os 35% derrubam a linha para perto de
   #F5F6FA no ponto mais cheio — no branco ela só precisa ser sugerida,
   quem carrega a seção são os dois cartões. */
.plan::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 88% at 50% 20%,rgba(0,0,0,.35) 14%,transparent 78%);
  mask-image:radial-gradient(120% 88% at 50% 20%,rgba(0,0,0,.35) 14%,transparent 78%);
}
/* o conteúdo sobe por cima do quadriculado: sem isto o ::before, que é
   posicionado, passaria na frente do texto */
.plan .container{position:relative;z-index:1}

/* o cabeçalho do plano segue a régua do banner: título Poppins 700 bem
   fechado e o lead na mesma família em peso 500, num corpo maior */
/* a medida vai em rem: em `em` ela resolveria contra o corpo do texto e
   apertaria o título, que roda num tamanho bem maior */
.plan .section__head{max-width:46rem}
.plan .section__title{
  font-size:clamp(2.35rem,1.3rem + 3.9vw,3.7rem);
  font-weight:700;letter-spacing:-.045em;line-height:1.02;
}
.plan .section__lead{
  margin-top:1.5rem;max-width:30em;
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.12rem,1rem + .52vw,1.38rem);
  letter-spacing:-.022em;line-height:1.42;
}

/* o cartão de um lado, o relógio do outro; no meio da faixa larga eles se
   olham na mesma linha do preço */
.plan__grid{
  display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:center;
}

/* a coluna da direita é uma pilha só: a cena em cima do relógio, as duas
   com a mesma largura do cartão do prazo. Sem folga entre elas — quem
   encosta uma na outra é a margem negativa da cena */
.plan__lado{
  /* a altura da cena e, dela, o pedaço que fica abaixo da linha do chão:
     as pernas. As duas medidas descem para a cena e para o cartão */
  --art:clamp(150px,16vw,235px);
  --pernas:calc(var(--art) * .2087);
  /* o quanto o conjunto sobe no ponto mais alto da flutuação */
  --sobe:clamp(6px,1.1vw,12px);
  display:grid;justify-items:start;
  width:100%;max-width:29rem;
  /* ---------- a flutuação ----------
     Quem flutua é a coluna inteira, e não a cena de um lado e o cartão do
     outro: ela está sentada na borda de cima do vermelho, e duas animações
     parecidas, mesmo com a mesma duração, descolariam as pernas dela do
     cartão no primeiro respiro. Um transform só, no pai, sobe e desce os
     dois no mesmo passo — sincronizado por construção, sem depender de
     dois relógios baterem juntos.
     A curva é simétrica de propósito: freia em cima e freia embaixo, que é
     o que faz o movimento parecer peso boiando e não peça sendo puxada.
     Quem pede menos movimento não vê nada disso — o bloco do fim da folha
     zera a duração de toda animação da página. */
  animation:flutua 3.2s cubic-bezier(.45,0,.55,1) infinite;
}
/* A entrada da coluna também é daqui (o .reveal está na peça, no HTML), e
   aqui ela é só o apagado acendendo: o translate do .reveal não chega a
   valer nada porque animação ganha de declaração normal no cascata, e o
   transform desta peça é da flutuação do primeiro quadro em diante. Era o
   que fazia a cena cair dentro do cartão no carregamento — agora quem diz
   que a coluna chegou é a própria flutuação. */
/* o 0% e o 100% ficam implícitos: são o transform que a peça já tem parada */
@keyframes flutua{
  50%{transform:translateY(calc(var(--sobe) * -1))}
}
/* ---------- a mulher sentada no cartão ----------
   Na cena original ela senta numa linha de chão que atravessa o desenho.
   A linha foi tirada do SVG e quem faz o papel dela agora é a borda de
   cima do cartão: a margem negativa sobe o cartão até o ponto onde a
   linha estava — 79,13% da altura do desenho (y 640,17 de 809) — e o que
   sobra embaixo cai por cima do cartão, pernas balançando.
   Por isso a altura vai fixa, e não em max-height: a conta precisa do
   número. */
.plan__art{
  position:relative;z-index:1;
  justify-self:center;
  width:auto;height:var(--art);
  margin-bottom:calc(var(--pernas) * -1);
}

/* ---------- o cartão do plano ----------
   Um cartão só, encostado na esquerda embaixo do título, com o azul da logo
   em gradiente. É partido em dois andares, como toda tabela de plano: em
   cima o nome e o preço, embaixo o que vem dentro e o botão. */
/* o quadriculado é da seção, não dos cartões: aqui o degradê fica limpo */
.plano{
  position:relative;
  max-width:520px;
  border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(124,144,255,.45),transparent 62%),
    linear-gradient(158deg,var(--blue) 0%,var(--blue-deep) 58%,#16257F 100%);
  color:#C4CEFF;
  box-shadow:0 50px 90px -45px rgba(20,26,61,.75),0 2px 8px rgba(16,16,20,.06);
}

/* no hover o cartão só sobe, e a sombra abre junto pra parecer que ele
   descolou da página. O gesto vai no translate e não no transform: o
   transform do cartão é do .reveal, que o traz de baixo na entrada, e um
   sobrescreveria o outro. No toque não entra, senão o :hover cola depois
   do tap e o cartão fica pendurado no ar. */
@media (hover:hover){
  .plano{transition:translate .4s var(--ease),box-shadow .4s var(--ease)}
  .plano:hover{
    translate:0 -10px;
    box-shadow:0 64px 100px -45px rgba(20,26,61,.8),0 2px 8px rgba(16,16,20,.06);
  }
}

/* o desenho guardado do visto: sai da página sem ocupar linha nenhuma e
   fica só esperando os [use] apontarem para ele */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- o andar de cima: etiqueta, nome e preço ---------- */
/* o fundo mais fundo separa o cabeçalho do corpo sem precisar de moldura;
   o arredondado repete o do cartão só nas duas quinas de cima */
.plano__topo{
  position:relative;
  padding:clamp(1.9rem,1.4rem + 1.7vw,2.6rem) clamp(1.5rem,1rem + 1.7vw,2.4rem) clamp(1.7rem,1.3rem + 1.4vw,2.2rem);
  text-align:center;
  background:rgba(7,10,30,.4);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.16);
}

/* o nome em caixa alta é o que dá cara de plano; nessa medida a Poppins pede
   espaço entre as letras em vez do aperto que os títulos usam */
.plano__nome{
  font-size:clamp(1.75rem,1.45rem + 1.1vw,2.15rem);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;
}
/* as duas linhas centradas ficam mais parelhas com o balance, em vez de
   sobrar uma palavra sozinha embaixo */
.plano__diz{margin:.6rem auto 0;max-width:24em;font-size:.99rem;color:#AFBCFF;text-wrap:balance}

/* o bloco do preço inteiro, separado do nome por um fio curto no meio: o
   número, a condição de cobrança e a conta do dia leem como uma coisa só */
.plano__preco{position:relative;margin-top:1.8rem;padding-top:1.6rem}
.plano__preco::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:56px;height:1px;background:rgba(255,255,255,.28);
}
/* a condição vem logo abaixo do número, do jeito que as tabelas de plano
   escrevem quando a cobrança não começa no primeiro mês */
.plano__quando{
  margin-top:.5rem;
  font-family:var(--mono);font-size:.73rem;letter-spacing:.16em;
  text-transform:uppercase;color:#A9B7FF;
}
.plano__valor{display:flex;align-items:baseline;justify-content:center;gap:.22rem;color:#fff}
.plano__valor i{font-style:normal;font-family:var(--display);font-size:1.6rem;font-weight:600}
/* o número é o maior desta seção: cresce menos que o resto pra não virar
   uma escala à parte */
.plano__valor span{font-family:var(--display);font-size:clamp(3.5rem,8vw,4.6rem);font-weight:700;letter-spacing:-.06em;line-height:1}
.plano__valor em{font-style:normal;font-family:var(--mono);font-size:1rem;font-weight:500;color:#B9C5FF}
.plano__nota{margin:.55rem auto 0;max-width:24em;font-size:.95rem;text-wrap:balance}
.plano__nota b{color:#fff}

/* ---------- o andar de baixo: o que vem dentro ---------- */
.plano__corpo{padding:clamp(1.6rem,1.2rem + 1.4vw,2.1rem) clamp(1.5rem,1rem + 1.7vw,2.4rem) clamp(1.7rem,1.3rem + 1.4vw,2.3rem)}

.plano__itens{display:grid;gap:.82rem}
.plano__itens li{
  display:flex;align-items:flex-start;gap:.72rem;
  font-size:1.02rem;line-height:1.45;color:#DDE3FF;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(.2s + var(--i,0) * 75ms);
}
/* o fio que fecha o par que sai de graça e abre o que a mensalidade cobre */
.plano__itens li:nth-child(3){
  margin-top:.3rem;padding-top:1.12rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.js .plano__itens li{opacity:0;transform:translateX(-12px)}
.js .plano.in .plano__itens li{opacity:1;transform:none}
.plano__ok{
  flex:none;display:grid;place-items:center;
  width:21px;height:21px;margin-top:.16rem;border-radius:50%;
  background:rgba(255,255,255,.2);color:#fff;
}
.plano__ok svg{width:11px;height:11px}
/* o preço da criação vai na ponta da linha, como na nota antiga */
.plano__zero{
  flex:none;margin-left:auto;
  padding:.14rem .48rem;border-radius:7px;
  background:rgba(255,255,255,.2);color:#fff;
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.02em;
}

/* o botão do plano é o de card de plano: largura cheia, rótulo curto em
   caixa alta e a seta no fim, sem marca de aplicativo nenhum */
.plano__btn{
  margin-top:1.9rem;
  font-size:1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.plano__fino{margin-top:1rem;text-align:center;font-family:var(--mono);font-size:.72rem;line-height:1.7;letter-spacing:.02em;color:#9AA9EC}

/* ---------- o relógio ao lado do plano ----------
   Cartão irmão do plano na anatomia — mesmo raio, mesma sombra funda, o
   mesmo degradê limpo — e o oposto dele na cor: onde um é o azul da
   logo, o outro é o vermelho que a página não usa em mais nenhum lugar.
   Um vende, o outro cobra o prazo. O quadriculado dos dois é o da seção,
   por baixo, e não a peça de cada um.
   O prazo é o mesmo da faixa do topo, contado pelo mesmo laço do main.js.
   Sem JavaScript não há relógio: em vez de um mostrador parado, nada. */
html:not(.js) .prazo{display:none}

/* o topo abre o tanto das pernas dela mais um respiro: os números começam
   depois dos pés, e não embaixo deles */
.prazo{
  position:relative;z-index:0;
  width:100%;max-width:29rem;
  padding:calc(var(--pernas,0px) + clamp(1.3rem,1rem + .9vw,1.75rem)) clamp(1.4rem,1rem + 1.4vw,2.1rem) clamp(1.5rem,1.2rem + 1.2vw,1.9rem);
  border-radius:var(--r-lg);
  /* a primeira parada do degradê é o vermelho exato do despertador que
     está sentado em cima: a cena encosta no cartão sem emenda de cor, e
     dali para baixo ele vai fechando — é o escuro do fim do degradê que
     segura o texto branco lá embaixo */
  background:
    radial-gradient(110% 85% at 84% 0%,rgba(255,255,255,.2),transparent 62%),
    linear-gradient(170deg,var(--alert) 0%,var(--alert-2) 45%,var(--alert-3) 100%);
  color:#FFD5D9;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 44px 74px -40px rgba(142,10,20,.78),
    0 2px 8px rgba(16,16,20,.07);
  text-align:center;
  transition:background .6s var(--ease),box-shadow .6s var(--ease);
}
/* ---------- os números ----------
   Quatro colunas separadas por dois pontos, alinhadas pela base do número
   para os dois pontos caírem na linha certa. Largura tabular: o segundo
   troca sem empurrar nada. */
.prazo__conta{
  display:flex;align-items:baseline;justify-content:center;
  gap:clamp(.35rem,1.4vw,.75rem);
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.prazo__u{display:inline-grid;justify-items:center;gap:.5rem}
.prazo__u b{
  font-size:clamp(2rem,1.1rem + 3vw,3rem);font-weight:700;
  letter-spacing:-.05em;line-height:1;color:#fff;
}
.prazo__u i{
  font-style:normal;font-size:.62rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);
}
/* o segundo é o único número que anda na frente de quem está olhando.
   No cartão vermelho ele não pode ser mais vermelho ainda: o que o
   destaca é o brilho, o mesmo da cabeça da barra logo abaixo */
.prazo__u--s b{text-shadow:0 0 24px rgba(255,255,255,.65)}
.prazo__sep{
  font-size:clamp(1.5rem,.9rem + 2vw,2.2rem);font-weight:700;line-height:1;
  color:#fff;opacity:.5;
  animation:pisca 1s steps(1) infinite;
}
@keyframes pisca{50%{opacity:.1}}

/* ---------- o mês em riscos ----------
   Um risco por dia do mês — o main.js escreve quantos são no --dias, que
   nem todo mês tem 31. Os riscos acesos são os dias que ainda faltam, e
   contam o mesmo que o número grande em cima: 18 no visor, 18 riscos.
   Os apagados já foram embora.
   Os dois planos usam o mesmo desenho de riscos e a mesma largura total;
   o de cima é recortado no ponto do --resta em vez de ser encurtado, se
   não os riscos dos dois deixariam de casar. */
.prazo__barra{
  --risco:calc(100% / var(--dias,31));
  position:relative;
  height:16px;margin-top:clamp(1.4rem,1.1rem + 1vw,1.8rem);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 2px,transparent 2px var(--risco));
}
.prazo__barra::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px var(--risco));
  clip-path:inset(0 calc(100% - var(--resta,1) * 100%) 0 0);
  transition:clip-path 1s linear;
}
/* a cabeça da contagem: onde os riscos acesos acabam. É o único ponto do
   cartão que se mexe sozinho — o pulso diz que o relógio está andando */
.prazo__barra::after{
  content:"";position:absolute;top:50%;left:calc(var(--resta,1) * 100%);
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:#fff;
  transition:left 1s linear;
  animation:cabeca 2.4s var(--ease) infinite;
}
@keyframes cabeca{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}
  70%{box-shadow:0 0 0 11px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* a legenda fecha o cartão dizendo o que os números são — na régua de
   rótulo do resto da página: mono, caixa alta e bem espaçada */
.prazo__diz{
  margin-top:1.25rem;
  font-family:var(--mono);font-size:.7rem;font-weight:500;line-height:1.5;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.84);
}

/* ---------- o último dia ----------
   Faltando menos de um dia o cartão queima mais fundo: o topo continua no
   vermelho do despertador, para a cena não descolar, e o resto escurece.
   A coluna dos dias, que só marcaria zero, sai com o dois-pontos que
   vinha atrás dela, e os três números que sobram crescem no lugar. */
.prazo.is-final{
  background:
    radial-gradient(110% 85% at 84% 0%,rgba(255,255,255,.16),transparent 62%),
    linear-gradient(170deg,var(--alert) 0%,var(--alert-3) 38%,var(--alert-4) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 44px 74px -40px rgba(99,7,16,.85),
    0 2px 8px rgba(16,16,20,.07);
}
.prazo.is-final .prazo__u--d,
.prazo.is-final .prazo__u--d + .prazo__sep{display:none}
.prazo.is-final .prazo__u b{font-size:clamp(2.3rem,1.3rem + 3.4vw,3.4rem)}

/* ---------- o hover ----------
   O mesmo gesto do cartão do plano: encostou o mouse, o cartão sobe e a
   sombra abre junto. Duas diferenças que a peça obriga:
   quem sobe é a coluna inteira, e não o vermelho sozinho — a cena está
   sentada na borda de cima dele, e um cartão subindo por baixo entraria
   nas pernas dela. É a mesma razão da flutuação morar no pai.
   E o movimento vai no translate porque o transform desta peça já é da
   flutuação, que é animação e ganha de qualquer declaração normal.
   A transição é redeclarada aqui porque a do .reveal, que também mora
   nesta peça, é um atalho e apagaria o translate. O transform sai da
   lista: nele quem manda é a flutuação, transição nenhuma pega. */
@media (hover:hover){
  .plan__lado{transition:opacity .75s var(--ease),translate .42s var(--ease)}
  .plan__lado:hover{translate:0 -10px}
  .plan__lado:hover .prazo{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      0 58px 88px -40px rgba(142,10,20,.82),
      0 2px 8px rgba(16,16,20,.07);
  }
}

/* =========================================================
   google: ser encontrado na pesquisa
   ========================================================= */
/* Mesma cor da faixa da oferta: o azul da logo em degradê de ponta a ponta, com
   as bordas puxando para o tom fundo. O texto acompanha o mesmo par da faixa —
   corpo em #DCE2FF, destaque em branco. */
.goog{
  position:relative;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue) 50%,var(--blue-deep));
  color:#DCE2FF;
  padding:clamp(4.5rem,9vw,7.5rem) 0;overflow:hidden;
}
.goog::before{
  content:"";position:absolute;inset:0;
  /* o mesmo brilho de cima da faixa, aberto na altura da seção */
  background:radial-gradient(120% 130% at 50% -35%,rgba(255,255,255,.2),transparent 62%);
}
.goog__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(2.75rem,5vw,4.5rem);align-items:center;
}

.goog__title{color:#fff;font-size:clamp(1.95rem,1.1rem + 2.4vw,2.85rem)}
.goog__lead{margin-top:1.3rem;max-width:34em;font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
/* Em cima do azul cheio nenhum tom de azul se destaca: o realce vira branco,
   como o da faixa da oferta. No título, que já é branco, quem marca é o traço
   claro embaixo da palavra. */
.goog__title .mark,.goog__lead .mark{color:#fff;white-space:nowrap}
.goog__title .mark{position:relative;display:inline}
.goog__title .mark::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.03em;height:.11em;
  border-radius:99px;background:#fff;opacity:.42;
}
.goog__lead .mark{font-weight:600}

.goog__list{display:grid;gap:1.5rem;margin-top:2.3rem}
.goog__list li{display:flex;gap:1.1rem;align-items:flex-start}
/* os ícones são coloridos, então a caixinha vai branca para eles aparecerem */
.goog__ico{
  flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:#fff;box-shadow:0 10px 22px -14px rgba(0,0,0,.9);
  transition:transform .4s var(--ease),box-shadow .3s;
}
.goog__ico svg{width:23px;height:23px}
/* o gesto é de quem tem mouse: no toque o :hover cola no ícone depois do tap e
   a caixinha fica torta até a pessoa encostar em outro lugar da tela */
@media (hover:hover){
  .goog__list li:hover .goog__ico{transform:translateY(-3px) rotate(-6deg);box-shadow:0 14px 26px -12px rgba(0,0,0,.9)}
}
.goog__list b{display:block;font-family:var(--display);font-size:1.03rem;color:#fff;margin-bottom:.15rem}
.goog__list p{font-size:.95rem}

/* ---------- o resultado da pesquisa ---------- */
.serp{
  position:relative;border-radius:var(--r-lg);background:var(--paper);
  padding:1.15rem;
  /* o recorte faz a barra de carregamento acompanhar a curva do cartão */
  overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
}
/* Barra de carregamento no topo, como a de um navegador. O gradiente fica
   parado e quem anda é o recorte: as cores vão sendo reveladas da esquerda
   para a direita, em vez de a paleta inteira nascer espremida. */
.serp__load{
  position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#4285F4,#EA4335 34%,#FBBC04 67%,#34A853);
  clip-path:inset(0 100% 0 0);opacity:0;
}
.serp.is-carregando .serp__load{animation:serpCarregando .8s var(--ease) forwards}
/* avança rápido, hesita no meio e só então fecha: é assim que carregamento
   de verdade se comporta, e é o que faz a barra parecer real */
@keyframes serpCarregando{
  0%{clip-path:inset(0 100% 0 0);opacity:1}
  20%{clip-path:inset(0 52% 0 0);opacity:1}
  50%{clip-path:inset(0 33% 0 0);opacity:1}
  78%{clip-path:inset(0 19% 0 0);opacity:1}
  93%{clip-path:inset(0 0 0 0);opacity:1}
  100%{clip-path:inset(0 0 0 0);opacity:0}
}
.serp__bar{
  display:flex;align-items:center;gap:.7rem;
  height:46px;padding:0 1rem;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(16,16,20,.06);
}
.serp__g{flex:none;display:grid;place-items:center}
.serp__g svg{width:19px;height:19px}
.serp__q{flex:1;min-width:0;font-size:.93rem;color:var(--ink);overflow:hidden;white-space:nowrap}
/* O cursor é um elemento à parte, logo depois da última letra: assim ele
   acompanha o texto em vez de parar na largura do campo. */
.serp__caret{
  display:inline-block;width:1.5px;height:1.05em;margin-left:1px;
  background:var(--blue);vertical-align:-.16em;
  animation:piscar .9s steps(1) infinite;
}
@keyframes piscar{50%{opacity:0}}
.serp__lupa{flex:none;width:18px;height:18px;color:var(--blue)}

.serp__hits{display:grid;gap:1.15rem;margin-top:1.35rem;padding:0 .35rem .35rem}
.serp__hit,.serp__ghost{
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 140ms + 200ms);
}
.js .serp__hit,.js .serp__ghost{opacity:0;transform:translateY(14px)}
.js .serp.in .serp__hit,.js .serp.in .serp__ghost{opacity:1;transform:none}

/* Enquanto "carrega": o resultado sai de cena e as barras cinzas ficam
   pulsando no lugar dele, que é o que uma página mostra enquanto busca.
   Quando a classe é retirada, a regra de cima traz tudo de volta escalonado —
   a mesma entrada da primeira vez, e é isso que faz parecer página nova. */
.js .serp.is-carregando .serp__hit{
  opacity:0;transform:translateY(10px);
  transition-duration:.18s;transition-delay:0s;
}
.js .serp.is-carregando .serp__ghost{
  opacity:1;transform:none;
  transition-duration:.18s;transition-delay:0s;
  animation:serpPulso 1.1s ease-in-out infinite;
}
@keyframes serpPulso{50%{opacity:.42}}

.serp__hit--you{
  position:relative;padding:1rem 1.1rem;border-radius:var(--r);
  background:var(--blue-soft);border:1px solid var(--blue-line);
}
.serp__flag{
  position:absolute;top:-.7rem;right:1rem;
  padding:.22rem .6rem;border-radius:999px;
  background:var(--blue);color:#fff;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
}
.serp__id{display:flex;align-items:center;gap:.6rem}
.serp__fav{
  flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--paper);color:var(--blue);border:1px solid var(--blue-line);
}
.serp__fav svg{width:15px;height:15px}
.serp__id b{display:block;font-family:var(--display);font-size:.83rem;color:var(--ink);line-height:1.3}
.serp__id span{font-size:.75rem;color:var(--gray)}
/* A altura do título varia de uma busca para outra, mas a troca acontece com
   o resultado fora de cena — o ajuste some junto com o "carregando". */
.serp__t{
  margin-top:.55rem;font-family:var(--display);font-weight:500;
  font-size:1.02rem;line-height:1.3;color:#1a4bd8;
}
.serp__d{margin-top:.3rem;font-size:.85rem;line-height:1.5;color:var(--body)}

.serp__ghost{display:grid;gap:.5rem;padding:0 1.1rem}
.serp__ghost i{display:block;height:9px;border-radius:99px;background:var(--line)}
.serp__ghost i:nth-child(1){width:32%;height:11px;background:#EDEEF6}
.serp__ghost i:nth-child(2){width:74%;background:#DEE1EF}
.serp__ghost i:nth-child(3){width:88%}

/* =========================================================
   dúvidas
   ========================================================= */
/* a seção toda no mesmo fundo dos passos, de ponta a ponta da tela */
.faq{background:var(--bg)}

/* faixa de abertura: a busca no meio, o cenário nas pontas */
.faq__top{
  position:relative;overflow:hidden;
  padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(2.6rem,5vw,4rem);
  background:var(--bg);border-bottom:1px solid var(--line);
}
.faq__scene{position:absolute;inset:0;pointer-events:none;user-select:none}
/* o chão que costura as duas pontas, no mesmo traço da linha dos passos */
.faq__scene::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--blue-line),transparent 32%,transparent 68%,var(--blue-line));
}
.faq__art{
  position:absolute;bottom:0;width:auto;height:clamp(140px,17vw,230px);
  opacity:.92;
}
.faq__art--esq{left:0;scale:-1 1}   /* espelhado: o cenário abre para fora */
.faq__art--dir{right:0}

.faq__top-in{position:relative;z-index:1;text-align:center}

/* selo da seção: parado, só o balão dentro do círculo */
.faq__badge{
  display:grid;place-items:center;width:62px;height:62px;margin:0 auto 1.3rem;
}
.faq__badge-core{
  display:grid;place-items:center;
  width:62px;height:62px;border-radius:50%;color:var(--blue);
  background:var(--paper);
  box-shadow:0 0 0 1px var(--blue-line);
}
.faq__badge-core svg{width:30px;height:30px}

.faq__top-in .eyebrow{margin-bottom:1rem}
.faq__title{max-width:20ch;margin-inline:auto;font-size:clamp(1.6rem,1.05rem + 2.2vw,2.6rem)}

/* campo de busca — filtra a lista logo abaixo e, se você quiser, manda no zap.
   a borda é um degradê girando: fica no fundo, não numa borda de verdade */
@property --faq-giro{syntax:'<angle>';initial-value:0deg;inherits:false}

.faq__find{
  position:relative;display:flex;align-items:center;gap:.55rem;
  width:min(540px,100%);margin:1.9rem auto 0;padding:.2rem .35rem .2rem 1.1rem;
  border:1.6px solid transparent;border-radius:999px;
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    conic-gradient(from var(--faq-giro,0deg),var(--line),var(--line)) border-box;
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .4s;
}
.faq__find:hover{transform:translateY(-2px);box-shadow:0 22px 40px -26px rgba(20,26,61,.5)}
.faq__find:focus-within{
  transform:translateY(-3px);
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    conic-gradient(from var(--faq-giro,0deg),var(--blue),#7C90FF 22%,var(--blue-line) 42%,#7C90FF 66%,var(--blue)) border-box;
  box-shadow:0 0 0 5px var(--blue-soft),0 26px 46px -26px rgba(39,67,217,.8);
  animation:faq-giro 4.5s linear infinite;
}
@keyframes faq-giro{to{--faq-giro:360deg}}

.faq__lupa{flex:none;width:20px;height:20px;color:var(--gray);transition:color .3s,transform .45s var(--ease)}
.faq__find:focus-within .faq__lupa{color:var(--blue);transform:scale(1.12) rotate(-12deg)}
.faq__input{
  flex:1;min-width:0;height:52px;border:0;background:none;outline:none;
  font-family:var(--text);font-size:1rem;color:var(--ink);
}
.faq__input::placeholder{color:var(--gray)}
.faq__input::-webkit-search-cancel-button{display:none}
.faq__clear{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  border:0;border-radius:50%;background:none;color:var(--gray);cursor:pointer;
  transition:background .25s,color .25s,transform .25s var(--ease);
}
.faq__clear:hover{background:var(--bg);color:var(--ink);transform:rotate(90deg)}
.faq__clear[hidden]{display:none}
.faq__clear svg{width:15px;height:15px}

/* “Enviar” só existe depois que você escreve algo */
.faq__send{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:.45rem;
  height:42px;padding:0 1.05rem 0 .9rem;
  border:0;border-radius:999px;background:var(--blue);color:#fff;cursor:pointer;
  font-family:var(--display);font-size:.9rem;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 12px 24px -12px rgba(39,67,217,.95);
  transition:background .25s,transform .28s var(--ease),box-shadow .3s;
  animation:faq-send-in .5s var(--ease) both;
}
.faq__send[hidden]{display:none}
.faq__send svg{width:17px;height:17px;flex:none}
.faq__send:hover{background:var(--blue-deep);transform:translateY(-1px) scale(1.04)}
.faq__send:active{transform:scale(.96)}
@keyframes faq-send-in{
  0%{opacity:0;transform:translateX(16px) scale(.6)}
  55%{opacity:1;transform:translateX(0) scale(1.08)}
  100%{opacity:1;transform:none}
}
.faq__dica{
  margin:.85rem auto 0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--gray);
  animation:faq-dica-in .45s var(--ease) both;
}
.faq__dica[hidden]{display:none}
.faq__dica strong{color:var(--blue);font-weight:600}
@keyframes faq-dica-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* lista */
.faq__in{padding:clamp(2.6rem,5vw,3.6rem) var(--pad) clamp(4rem,8vw,6.5rem)}
/* título da lista, no tamanho de um subtítulo: a mesma Poppins do resto do site */
.faq__kicker{
  max-width:840px;margin:0 auto 1.1rem;padding-inline:.4rem;
  font-size:clamp(1.35rem,1.2rem + .5vw,1.6rem);
}
/* sem caixa em volta: as perguntas ficam soltas na página, cada uma com um
   fio embaixo e a seta num botão redondo — o desenho do bloco do Google */
.faq__list{max-width:840px;margin-inline:auto}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.25rem .35rem;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:1.16rem;font-weight:500;letter-spacing:-.02em;color:var(--ink);
  transition:color .25s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover,.qa[open] summary{color:var(--blue)}

/* a bolinha segue os botões do site: branca com aro fino, sobe no hover e
   fica azul quando a resposta está aberta */
.qa__seta{
  flex:none;display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;background:var(--blue);
  box-shadow:0 9px 20px -10px rgba(39,67,217,.85);
  transition:background .25s,box-shadow .3s var(--ease),transform .3s var(--ease);
}
.qa__seta::before{
  content:"";width:7px;height:7px;
  border-right:1.9px solid #fff;border-bottom:1.9px solid #fff;
  border-radius:0 0 2px 0;
  transform:translateY(-1.5px) rotate(45deg);
  transition:transform .45s var(--ease);
}
/* mesmo gesto do botão azul do site: escurece e sobe */
.qa summary:hover .qa__seta{
  transform:translateY(-3px);background:var(--blue-deep);
  box-shadow:0 15px 26px -12px rgba(39,67,217,.9);
}
/* aberta: a seta se vira para cima e o azul fica mais fundo */
.qa[open] .qa__seta{
  background:var(--blue-deep);
  box-shadow:0 11px 22px -10px rgba(39,67,217,.9);
}
.qa[open] .qa__seta::before{transform:translateY(1.5px) rotate(225deg)}

.qa__body{overflow:hidden}
.qa__body p{padding:0 .35rem 1.5rem;max-width:62ch;font-size:1.06rem;color:var(--body)}

/* =========================================================
   rodapé — a faixa que fecha a página
   ========================================================= */
/* A mesma faixa azul do prazo lá do topo: a página começa e termina na mesma
   cor. Dentro não vai texto nenhum — só os dois botões das redes, quadrado de
   canto redondo com a cor cheia da marca e o ícone em branco por cima. */
.rodape{
  background:
    radial-gradient(120% 200% at 50% -70%,rgba(255,255,255,.2),transparent 62%),
    linear-gradient(90deg,var(--blue-deep),var(--blue) 50%,var(--blue-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.rodape__redes{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.85rem,2.2vw,1.15rem);
  padding:clamp(1.7rem,3.6vw,2.4rem) var(--pad);
}

.rede{
  /* cada rede reescreve os dois: o enchimento do botão e o halo do hover */
  --cheio:#fff;
  --halo:rgba(255,255,255,.35);

  display:grid;place-items:center;
  width:clamp(52px,12vw,60px);aspect-ratio:1;
  border-radius:clamp(15px,3.4vw,18px);
  background:var(--cheio);
  color:#fff;
  box-shadow:0 10px 22px -12px rgba(4,7,32,.75);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.rede svg{width:52%;height:52%}
.rede:hover,.rede:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 16px 28px -12px rgba(4,7,32,.8),0 0 0 4px var(--halo);
}
/* no fundo azul o aro azul do foco sumiria: aqui ele vai de branco */
.rede:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* ---------- as cores de cada rede ---------- */
/* o degradê do Instagram na ordem da marca: âmbar, vermelho, roxo e azul */
.rede--ig{
  --cheio:linear-gradient(135deg,#FFD521,#F50000 34%,#B900B4 66%,#5B6DEF);
  --halo:rgba(206,32,163,.45);
}
.rede--wpp{
  --cheio:linear-gradient(135deg,#3BE07A,#0FA968);
  --halo:rgba(37,211,102,.42);
}

/* =========================================================
   botão flutuante
   ========================================================= */
/* balãozinho de conversa + bolinha verde, igual ao chat do zap */
/* as medidas do conjunto moram aqui em cima, porque o balão é medido a partir
   delas: mexer no vão da borda ou no tamanho da bolinha refaz a conta sozinho,
   em vez de deixar uma largura fixa velha para trás.
   O recuo da borda ainda soma as áreas seguras do aparelho — sem isso, no
   iPhone a bolinha pousa em cima da barrinha de gesto. */
.fab{
  --fab-edge:clamp(1rem,3vw,2rem);
  --fab-gap:clamp(.5rem,1.8vw,.75rem);
  --fab-size:clamp(52px,calc(3.2vw + 40px),62px);
  /* o que sobra da largura da tela depois da bolinha, dos dois vãos e de um
     respiro na borda esquerda: é esse resto que segura o balão no celular */
  --fab-room:calc(100vw - var(--fab-size) - var(--fab-gap) - var(--fab-edge) * 2 - 1rem);
  position:fixed;z-index:90;
  right:calc(var(--fab-edge) + env(safe-area-inset-right,0px));
  bottom:calc(var(--fab-edge) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:var(--fab-gap);
}
/* o estado escondido serve duas horas: enquanto a pessoa ainda está no herói,
   que já tem o CTA na frente, e quando o rodapé se aproxima — lá embaixo o zap
   já está na faixa azul, e o balão por cima dos dois ícones sujava o fim da
   página. Quem manda o is-on é o main.js.

   Sair não é entrar de trás para frente. A entrada é um convite: meio segundo,
   com o freio macio do site. A saída é só dar espaço, e boa saída é a que
   ninguém vê acontecer — 0,26s numa curva que puxa desde o começo, encolhendo
   na direção do canto. A visibilidade espera o fade terminar para não cortar o
   botão no meio do caminho. */
.js .fab{
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.94);
  transition:opacity .26s var(--ease-in),transform .26s var(--ease-in),
             visibility 0s linear .26s;
}
.js .fab.is-on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s;
}

/* ---------- o balão ---------- */
/* três tetos, o menor manda: os 198px do desenho, um pedaço da tela para o
   balão nunca tomar o celular inteiro, e o espaço que de fato sobra ao lado da
   bolinha. Os 54vw são calibrados para a frase caber em uma linha até num
   aparelho de 320px — em duas linhas o balão fica mais alto que a bolinha e o
   canto pesa */
.fab__bubble{
  position:relative;max-width:min(198px,54vw,var(--fab-room));
  padding:clamp(.5rem,1.5vw,.6rem) clamp(.78rem,2.2vw,.95rem) clamp(.55rem,1.7vw,.7rem);
  border-radius:clamp(13px,3vw,15px);
  background:var(--paper);
  box-shadow:0 1px 2px rgba(16,16,20,.05),0 20px 38px -18px rgba(16,16,20,.5);
  transition:translate .3s var(--ease),box-shadow .3s var(--ease);
}
/* a mesma sobrancelha em mono do resto do site */
.fab__who{
  display:block;margin-bottom:.15rem;
  font-family:var(--mono);font-size:clamp(.55rem,1.5vw,.6rem);font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gray);
}
.fab__say{
  position:relative;display:block;min-height:1.35em;
  font-family:var(--display);font-weight:600;font-size:clamp(.85rem,2.4vw,.94rem);line-height:1.35;
  letter-spacing:-.02em;color:var(--ink);
}
.fab__txt{display:block;text-wrap:balance}
/* a pontinha que encosta na bolinha */
.fab__bubble::before{
  content:"";position:absolute;top:50%;right:-5px;width:14px;height:14px;
  background:var(--paper);border-radius:0 3px 0 0;
  transform:translateY(-50%) rotate(45deg);
}
/* o mesmo brilho que passa nos botões do site, aqui em azul pra aparecer no branco */
.fab__bubble::after{
  content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(39,67,217,.13) 50%,transparent 64%);
  background-size:250% 100%;background-position:180% 0;background-repeat:no-repeat;
  transition:background-position .8s var(--ease);
}
.fab:hover .fab__bubble::after{background-position:-60% 0}

/* os três pontinhos de "digitando", que somem quando o texto chega */
.fab__dots{position:absolute;left:0;top:50%;translate:0 -50%;display:flex;gap:5px;opacity:0}
.fab__dots i{width:6px;height:6px;border-radius:50%;background:#C9CBD8}

/* ---------- a bolinha verde ---------- */
.fab__btn{
  position:relative;display:grid;place-items:center;flex:none;
  width:var(--fab-size);height:var(--fab-size);border-radius:50%;
  background:var(--wpp);color:#fff;
  box-shadow:0 16px 34px -14px rgba(37,211,102,.9);
  transition:background .25s,translate .3s var(--ease),box-shadow .3s var(--ease);
}
/* o ícone acompanha a bolinha na mesma proporção de sempre (30 em 62) */
.fab__btn svg{position:relative;z-index:1;width:48%;height:48%}
/* auréola verde, no espírito dos glows do herói e do rodapé */
.fab__btn::before{
  content:"";position:absolute;inset:calc(var(--fab-size) * -.26);border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(37,211,102,.45),rgba(37,211,102,0) 68%);
  animation:fabAura 5.5s ease-in-out infinite;
}
/* luz de vidro no topo, pra bolinha não ficar chapada */
.fab__btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.34),rgba(255,255,255,0) 52%);
}
/* dois anéis em sequência, como quem chama */
.fab__ring,.fab__ring::before,.fab__ring::after{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.fab__ring::before,.fab__ring::after{content:"";border:2px solid rgba(37,211,102,.85)}
.fab.is-on .fab__ring::before{animation:ring 3s ease-out infinite}
.fab.is-on .fab__ring::after{animation:ring 3s ease-out 1.5s infinite}
/* contadorzinho de mensagem, no azul da marca */
.fab__badge{
  position:absolute;top:-1px;right:-1px;z-index:2;
  display:grid;place-items:center;
  min-width:clamp(20px,5.4vw,21px);height:clamp(20px,5.4vw,21px);
  padding:0 .28rem;border-radius:99px;
  background:var(--blue);color:#fff;
  font-family:var(--display);font-size:clamp(.68rem,1.9vw,.7rem);font-weight:700;line-height:1;
  box-shadow:0 6px 14px -4px rgba(39,67,217,.95);
}

/* hover e clique repetem o gesto dos botões: sobe 3px e a sombra abre */
.fab:hover .fab__btn{background:#1fbd5b;box-shadow:0 24px 44px -14px rgba(37,211,102,.95)}
.fab:hover .fab__bubble{box-shadow:0 1px 2px rgba(16,16,20,.05),0 26px 46px -20px rgba(16,16,20,.55)}
/* o lift usa translate pra não brigar com o transform da entrada */
.fab:hover .fab__btn,.fab:hover .fab__bubble{translate:0 -3px}
.fab:active .fab__btn,.fab:active .fab__bubble{translate:0 -1px}

/* ---------- a mensagem chegando ----------
   só na primeira vez que o botão aparece: o balão entra, digita e o texto cai. */
.js .fab__bubble{
  opacity:0;transform:translateX(14px) scale(.92);transform-origin:right center;
  /* na saída o balão vai na frente e sem espera: recolhe para dentro da
     bolinha em 0,16s. Antes ele herdava os 0,28s de espera da entrada e a
     mensagem ficava pairando enquanto o botão já tinha ido embora */
  transition:opacity .16s var(--ease-in),transform .16s var(--ease-in),
             translate .3s var(--ease),box-shadow .3s var(--ease);
}
.js .fab.is-on .fab__bubble{
  opacity:1;transform:none;
  /* na entrada é o contrário: a bolinha pousa primeiro e a mensagem chega depois */
  transition:opacity .45s var(--ease) .28s,transform .45s var(--ease) .28s,
             translate .3s var(--ease),box-shadow .3s var(--ease);
}
.js .fab.is-first .fab__who{animation:fabSobe .5s var(--ease) .5s both}
.js .fab.is-first .fab__dots{animation:fabDigita 1.5s .5s both}
.js .fab.is-first .fab__dots i{animation:fabPula .95s ease-in-out 2 both}
.js .fab.is-first .fab__dots i:nth-child(2){animation-delay:.14s}
.js .fab.is-first .fab__dots i:nth-child(3){animation-delay:.28s}
.js .fab.is-first .fab__txt{animation:fabSobe .5s var(--ease) 1.75s both}
.js .fab.is-first .fab__badge{animation:fabSelo .55s var(--ease) 2.1s both}

@keyframes ring{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.42);opacity:0}}
@keyframes fabAura{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.16);opacity:1}}
@keyframes fabDigita{0%{opacity:0}14%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes fabPula{0%,100%{transform:translateY(0);opacity:.5}45%{transform:translateY(-4px);opacity:1}}
@keyframes fabSobe{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes fabSelo{0%{opacity:0;transform:scale(.2)}62%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:none}}

/* =========================================================
   responsivo
   ========================================================= */
@media (max-width:1000px){
  /* o relógio desce para debaixo do cartão */
  .plan__grid{grid-template-columns:1fr;gap:2.75rem;justify-items:start}
  /* e a sombra do cartão passa a cair em cima da cena, não mais no vazio ao
     lado dela: são 50px de sombra para 44px de vão, e o cinza atravessa o
     despertador, que é desenho vazado — a mancha aparece por dentro do
     branco dele. Aqui ela encurta para morrer antes do vão. O cartão continua
     descolado do fundo; quem tinha a sombra funda era a versão de duas
     colunas, onde não há nada embaixo para sujar. */
  .plano{box-shadow:0 24px 44px -32px rgba(20,26,61,.6),0 2px 8px rgba(16,16,20,.06)}
  .hero__in{grid-template-columns:1fr;gap:3.5rem}
  .hero__copy{max-width:640px}
  .hero__stage{max-width:520px;margin-inline:auto;width:100%}
  .mock{transform:none}
  .goog__in{grid-template-columns:1fr;gap:3rem}
  .goog__copy{max-width:640px}
  .serp{max-width:520px;margin-inline:auto;width:100%}
  /* não cabem três colunas: a linha vira vertical e os cards empilham */
  .steps__list{grid-template-columns:1fr;gap:2.25rem;max-width:640px}
  .steps__list::before{
    left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;margin:0 0 0 -1px;
    background:linear-gradient(180deg,transparent,var(--blue-line) 5%,var(--blue-line) 95%,transparent);
  }
  .step__art img{max-height:190px}
  /* as cenas encolhem em vez de sair pela borda: meia ilustração cortada fica estranho */
  .faq__art{height:clamp(112px,14vw,150px);opacity:.8}
}

@media (max-width:820px){
  .site-header__in{height:68px}
  .burger{display:block}
  .nav{
    position:fixed;inset:calc(68px + var(--deal-h)) 0 auto;z-index:70;
    flex-direction:column;align-items:stretch;gap:0;
    padding:.6rem var(--pad) 1.6rem;
    background:rgba(246,247,251,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .nav > a:not(.btn){padding:1.05rem 0;border-bottom:1px solid var(--line);font-size:1.14rem}
  .nav > a:not(.btn)::after{display:none}
  .nav .btn{margin-top:1.1rem}
  /* o flutuante não tem mais degrau aqui: vão, bolinha, balão e tipos descem
     por conta própria com a largura da tela (ver .fab lá em cima) */
  /* a faixa fecha a página: no celular ela não precisa da altura do monitor,
     só do ar suficiente em volta dos dois botões */
  .rodape__redes{padding-block:clamp(1.25rem,3.4vw,1.7rem)}
}

@media (max-width:560px){
  :root{--r-lg:20px}
  .hero{padding-top:2.8rem}
  .hero__title,.plan .section__title{letter-spacing:-.04em}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  /* no celular o mockup só empurra o CTA para baixo: sai de cena */
  .hero__stage{display:none}
  /* na tela estreita o brilho azul ocupa quase tudo e o azul chapado disputa
     com o título: fica só como um respiro no canto de cima */
  .hero__glow{width:min(420px,62vw);top:-14%;right:-20%;opacity:.5}

  /* ---- os três passos no celular ----
     empilhado com o marcador ACIMA do card, cada passo comia uma tela
     inteira: o dedo rolava três vezes para ler três frases. Aqui o trilho desce
     pela lateral, o número vira uma bolinha acesa montada nele e o card fica ao
     lado — a mesma leitura de linha do tempo, na metade da altura */
  .steps__list{--rail:2.3rem;gap:1.15rem;max-width:none}
  .steps__list::before{
    /* nasce no centro da primeira bolinha e morre depois da última, em vez de
       vazar para fora dos passos nas duas pontas */
    left:calc(var(--rail) / 2);top:calc(var(--rail) / 2);
    background:linear-gradient(180deg,var(--blue-line),var(--blue-line) 66%,transparent 80%);
  }
  .step{
    grid-template-columns:var(--rail) 1fr;grid-template-rows:auto;
    gap:.85rem;align-items:start;
  }
  .step__num{
    grid-row:1;grid-column:1;font-size:.72rem;
    background:var(--blue);border-color:var(--blue);color:#fff;
    /* o anel da cor do fundo abre o vão no trilho; a sombra azul descola a
       bolinha do risco */
    box-shadow:0 0 0 5px var(--bg),0 8px 16px -9px rgba(39,67,217,.85);
  }
  .step__card{grid-row:1;grid-column:2;padding:1rem 1.05rem 1.15rem}
  /* a cena ilustra, não precisa dominar: vira uma faixa baixa no topo do card */
  .step__art{margin-bottom:.85rem;padding:.7rem;border-radius:calc(var(--r-lg) - 8px)}
  .step__art img{max-height:92px}
  .step__title{font-size:1.06rem;margin-bottom:.35rem;line-height:1.25}
  .step p{font-size:.93rem}
  /* ---- a nota no celular ----
     No monitor o cartão tem folga de sobra. Na tela do telefone cada
     folga daquelas vira rolagem, e entre o preço e o botão de começar
     cabiam três dedadas — a pessoa lia o valor numa tela e só encontrava
     o botão na outra. Aqui os dois andares fecham as medidas: num telefone
     de 375px o cartão sai de 961px para 819px de altura, umas seis linhas
     de texto a menos entre o preço e o "começar de graça".
     O cartão também solta o teto de 520px: na largura do telefone ele já
     era menor que isso, e sem o teto ele acompanha o contêiner sem sobrar
     um fio de fundo de um lado nem do outro. */
  .plano{max-width:none}
  .plan__grid{gap:2.25rem}

  /* o andar de cima: o nome cede um pouco para o número, que é o que a
     pessoa veio ver. O aperto entre as letras do nome também afrouxa,
     senão em caixa alta ele encosta na borda do cartão */
  .plano__topo{padding:1.65rem 1.15rem 1.5rem}
  .plano__nome{font-size:1.62rem;letter-spacing:.03em}
  .plano__diz{margin-top:.45rem;max-width:22em;font-size:.94rem}
  .plano__preco{margin-top:1.3rem;padding-top:1.25rem}
  .plano__valor span{font-size:3.4rem}
  .plano__valor i{font-size:1.4rem}
  /* a condição é escrita em mono e bem espaçada: numa tela de 320px ela
     chegava a quatro pixels de quebrar no "2º mês". Menos corpo e menos
     espaço entre letras devolvem a folga */
  .plano__quando{font-size:.66rem;letter-spacing:.12em}
  .plano__nota{margin-top:.5rem;font-size:.92rem}

  /* ---- a lista do que vem dentro ----
     é o trecho mais alto do cartão: oito linhas que no telefone viram uma
     rolagem inteira. O respiro entre elas fecha, o visto encolhe junto com
     o texto e as bordas do corpo cedem — cada milímetro que sai daqui volta
     como largura para a frase, que é o que decide se a linha quebra em duas */
  .plano__corpo{padding:1.45rem 1.15rem 1.6rem}
  .plano__itens{gap:.7rem}
  .plano__itens li{
    font-size:.96rem;line-height:1.42;gap:.58rem;
    /* metade das frases quebra em duas linhas nessa largura, e a segunda
       vinha com uma palavra sozinha — "segurança", "precisar", "site".
       O pretty tira uma palavra da linha de cima para fechar a de baixo;
       quem não entende a regra continua quebrando como antes */
    text-wrap:pretty;
    /* a entrada das oito linhas levava três quartos de segundo para chegar
       na última: rolando com o dedo, as de baixo apareciam depois que a
       pessoa já tinha passado por elas. Com o passo mais curto a lista
       inteira se monta enquanto o cartão ainda está entrando */
    transition-delay:calc(.12s + var(--i,0) * 45ms);
    /* no toque o cinza do realce piscava na linha inteira sem que houvesse
       nada para clicar ali */
    -webkit-tap-highlight-color:transparent;
  }
  .plano__itens li:nth-child(3){margin-top:.22rem;padding-top:.98rem}
  .plano__ok{width:19px;height:19px;margin-top:.13rem}
  .plano__ok svg{width:10px;height:10px}
  .plano__zero{padding:.12rem .42rem;font-size:.66rem}

  /* o texto do botão não cabe em uma linha na medida grande */
  .plano__btn{margin-top:1.55rem;padding-inline:1rem;gap:.55rem;font-size:.92rem;letter-spacing:.08em}
  /* nas telas de 320px a linha fina quebrava com o "quiser." sozinho
     embaixo: o balance parte a frase no ponto final, uma ideia por linha */
  .plano__fino{margin-top:.85rem;text-wrap:balance}

  /* ---- o relógio no celular ----
     As quatro colunas mais os três dois-pontos são a peça mais larga da
     página: em medida fixa elas passavam folgadas num telefone grande e
     encostavam nas bordas num de 320px. Tudo aqui vira medida fluida presa
     entre um piso e um teto — o teto é o mesmo tamanho que a regra de cima
     entrega em 560px, então nada pula no ponto de quebra, e o piso é o que
     ainda cabe na tela mais estreita com os rótulos inteiros embaixo. */
  .plan__lado{--art:clamp(128px,32vw,150px)}
  .prazo{padding-inline:clamp(1.1rem,4.4vw,1.4rem)}
  .prazo__conta{gap:clamp(.18rem,1.5vw,.35rem)}
  .prazo__u{gap:.4rem}
  /* o teto é o tamanho que o relógio já tinha: de 375px para cima nada
     mudou, e a conta só encolhe abaixo disso, onde os quatro números mais
     os dois-pontos raspavam nas bordas do cartão */
  .prazo__u b{font-size:clamp(1.75rem,9.2vw,2.15rem)}
  .prazo__u i{font-size:clamp(.53rem,2.45vw,.6rem);letter-spacing:.12em}
  .prazo__sep{font-size:clamp(1.25rem,6.4vw,1.5rem)}
  .prazo__barra{height:14px;margin-top:1.3rem}
  .prazo__diz{margin-top:1.05rem;font-size:clamp(.58rem,2.6vw,.66rem);letter-spacing:.11em}
  /* no último dia sobram três números e eles crescem: o teto acompanha o
     mesmo salto da regra de cima, sem estourar a largura do cartão */
  .prazo.is-final .prazo__u b{font-size:clamp(2rem,8.9vw,2.4rem)}
  /* no celular a faixa é a primeira coisa que a pessoa vê: ela cresce em vez
     de encolher, para o prazo ser lido de relance com o telefone na mão.
     Tudo aqui é medida fluida, presa entre um piso e um teto: em uma linha só,
     a faixa cresce com a tela em vez de pular de degrau em degrau — nos
     tamanhos fixos o rótulo era cortado justamente nas telas mais comuns
     (410–500px), que ficam entre os dois pontos de quebra. */
  :root{--deal-h:clamp(58px,13vw,74px)}
  .deal__in{gap:clamp(.45rem,2vw,.9rem)}
  .deal__lab{font-size:clamp(.6rem,2.9vw,.92rem);letter-spacing:.05em;gap:clamp(.4rem,1.4vw,.6rem)}
  .deal__ico{width:clamp(16px,5.2vw,26px);height:clamp(16px,5.2vw,26px)}
  .deal__clock{gap:clamp(.24rem,1.2vw,.44rem)}
  .deal__u{padding:clamp(.28rem,1.5vw,.5rem) clamp(.28rem,1.6vw,.62rem);border-radius:10px}
  .deal__u b{font-size:clamp(.88rem,4.1vw,1.3rem)}
  .deal__u i{font-size:clamp(.66rem,2.8vw,.88rem)}
  /* ---- ser achado, no celular ----
     A seção foi desenhada em duas colunas: a conversa de um lado, o resultado
     da busca do outro. Empilhada ela vira uma tira de 1200px de altura num
     telefone de 360px, e o que era folga entre as colunas virou vão morto
     entre um bloco e outro. Aqui os vãos fecham e cada peça é medida pela
     tela: o corpo do texto pela largura útil, o campo de busca pela frase
     mais longa que ele digita. */
  .goog{padding-block:clamp(3.4rem,13vw,4.5rem)}
  .goog__in{gap:clamp(2rem,7vw,2.6rem)}

  /* O <br> é o tempo da frase: uma sentença por linha, e a segunda é a virada.
     Em medida fixa a primeira não cabia — num telefone de 360px sobrava um
     "ar." sozinho na segunda linha, e em 320px o "achado." também caía sozinho
     numa quarta: quatro linhas rasgadas no lugar de duas. Aqui o corpo é o que
     couber. A conta é a largura útil (a tela menos as duas bordas) dividida
     pela frase mais larga, com um fio de folga; o teto é o mesmo tamanho que a
     regra de cima já entregava, então de 380px para cima nada mudou. O aperto
     entre as letras acompanha o dos outros títulos no celular e ainda devolve
     meio caractere de folga na linha. */
  .goog__title{
    font-size:clamp(1.55rem,calc(9.2vw - 3.4px),1.95rem);
    letter-spacing:-.04em;
  }
  /* a última linha vinha com uma palavra só — "acha você." pendurada embaixo
     de duas linhas cheias. O pretty puxa uma palavra da linha de cima */
  .goog__lead{margin-top:1.05rem;text-wrap:pretty}

  /* ---- os três itens ----
     cada frase quebra em duas ou três linhas nessa largura, então a caixinha
     do ícone devolve alguns pixels para o texto ao lado, e o respiro entre os
     itens fecha: é o que tira meia tela de rolagem da lista */
  .goog__list{margin-top:1.9rem;gap:1.25rem}
  .goog__list li{
    gap:.9rem;
    /* nada aqui é clicável: o cinza do toque piscava na linha inteira à toa */
    -webkit-tap-highlight-color:transparent;
  }
  .goog__ico{width:40px;height:40px;border-radius:12px}
  .goog__ico svg{width:21px;height:21px}
  .goog__list b{font-size:1rem}
  .goog__list p{font-size:.93rem;text-wrap:pretty}

  .serp{padding:.9rem;-webkit-tap-highlight-color:transparent}
  .serp__bar{height:42px;padding:0 .8rem}
  .serp__q{font-size:.85rem}
  .serp__hits{gap:1rem;margin-top:1.15rem}
  .serp__hit--you{padding:.9rem .95rem}
  .serp__t{font-size:.95rem}
  /* ---- dúvidas no celular ----
     no desktop as duas cenas ficam nas pontas, atrás da busca. Na tela do
     celular não existe ponta que caiba: uma sumia, a outra ficava cortada na
     borda e ainda sobrava um vão branco de 8,5rem embaixo do campo só para
     abrir espaço para ela. Aqui a faixa deixa de ser um fundo com coisas
     soltas e vira uma coluna — selo, título, busca e, no lugar do vão, as
     duas cenas lado a lado pisando na linha que fecha a seção. */
  .faq__top{
    display:flex;flex-direction:column;
    padding:clamp(2.4rem,9vw,3.4rem) 0 0;
  }
  .faq__top-in{order:1}
  .faq__scene{
    order:2;position:static;
    display:flex;align-items:flex-end;justify-content:center;
    gap:clamp(.4rem,3.5vw,1.4rem);
    margin-top:clamp(1.5rem,7vw,2.6rem);
    padding-inline:var(--pad);
  }
  /* mesma altura e mesma base nas duas: lidas juntas, viram uma cena só.
     A largura é o que sobrar — em tela estreita elas encolhem antes de
     empurrar uma à outra para fora */
  .faq__art{
    position:static;display:block;
    width:auto;max-width:48%;height:clamp(118px,33vw,178px);
    object-fit:contain;object-position:bottom;
    opacity:.92;
  }
  .faq__art--esq{left:auto}
  .faq__art--dir{right:auto}
  /* o chão segue as cenas: acende no meio, embaixo delas, em vez das pontas */
  .faq__scene::after{
    background:linear-gradient(90deg,transparent,var(--blue-line) 24%,var(--blue-line) 76%,transparent);
  }
  .faq__badge,.faq__badge-core{width:54px;height:54px}
  .faq__badge{margin-bottom:1rem}
  .faq__badge-core svg{width:26px;height:26px}
  .faq__find{margin-top:1.5rem;padding-left:.95rem;gap:.4rem}
  .faq__input{height:48px;font-size:.95rem}
  .faq__send{height:38px;padding:0 .85rem 0 .75rem;font-size:.86rem}
  .faq__clear{width:30px;height:30px}
  .faq__dica{font-size:.68rem;line-height:1.5}

  /* ---- a lista de perguntas ----
     as duas faixas encostavam uma na outra: a lista começa mais embaixo, e o
     título ganha um vão antes da primeira pergunta para não parecer o topo
     dela */
  /* ---- o recuo das perguntas ----
     A borda da página é a mesma --pad para todo telefone: ela trava no piso
     de 1,15rem e não cresce mais, então a pergunta encostava na borda e a
     bolinha da seta raspava do outro lado. O recuo daqui é o que sobra da
     tela depois dos 330px em que as perguntas mais longas ainda cabem numa
     linha: num aparelho pequeno ele é zero, e a partir dos 375px ele já
     entrega quase um rem de cada lado, sem empurrar nenhuma pergunta para
     uma segunda linha que ela não tinha.
     Quem recua é a lista, não cada pergunta: assim o fio que separa uma da
     outra anda junto com o texto, em vez de correr mais largo que ele. */
  .faq__in{padding-top:clamp(3rem,11vw,4.4rem);--recuo:clamp(0px,(100vw - 330px) * .3,.9rem)}
  .faq__kicker{
    margin-bottom:1.35rem;padding-inline:calc(var(--recuo) + .15rem);
    font-size:clamp(1.14rem,1rem + 1.5vw,1.4rem);
  }
  .faq__list{padding-inline:var(--recuo)}
  .qa summary{padding:1.05rem .15rem;gap:.85rem;font-size:clamp(.98rem,.9rem + .8vw,1.1rem)}
  .qa__body p{padding:0 .15rem 1.2rem;font-size:.98rem}
  /* a bolinha estava do tamanho de um botão de verdade e roubava a linha da
     pergunta, que já quebrava em duas: encolhe para a pergunta caber */
  .qa__seta{width:28px;height:28px;box-shadow:0 7px 15px -8px rgba(39,67,217,.85)}
  .qa__seta::before{width:6px;height:6px;border-width:1.7px}
  /* ---- o rodapé no celular ----
     a faixa carregava 5rem de chão só para o botão flutuante não pousar em
     cima dos dois ícones. Agora o flutuante se recolhe quando o rodapé chega
     (ver .fab lá embaixo), então esse vão saiu: a faixa é uma tira baixa, os
     ícones um pouco menores e o mesmo respiro em cima e embaixo — num telefone
     de 375px ela cai de ~156px para ~80px de altura. */
  .rodape__redes{padding-block:1.05rem;gap:.7rem}
  .rede{width:clamp(46px,11.5vw,52px);border-radius:clamp(14px,3.2vw,16px)}
}

/* na tela bem estreita o “Enviar” fica só com o ícone do zap: o texto comeria o campo */
@media (max-width:400px){
  .faq__send{width:38px;padding:0;gap:0;justify-content:center}
  .faq__send span{display:none}
  /* a faixa do prazo não precisa de regra própria aqui: as medidas fluidas do
     bloco de cima já chegam no piso delas por volta de 320px, com o rótulo
     inteiro e o relógio em uma linha só */

  /* ---- a busca do Google nessa largura ----
     O campo digita sete buscas, e a mais longa — "loja de material de
     construção" — é 17px mais larga que o espaço que sobra entre a letra G e a
     lupa num telefone de 320px. Como o texto é uma linha só com recorte, ela
     era cortada no meio da palavra e o cursor sumia junto, bem no momento em
     que a busca "acontece". As bordas do campo apertam e os vãos fecham: são
     10px devolvidos para a frase, e daí para cima ela cabe inteira, com o
     cursor piscando no fim. */
  .serp__bar{padding:0 .65rem;gap:.55rem}
}

/* Abaixo de ~330px nem o campo apertado segura a busca mais longa: aí o texto
   também cede um ponto. É a última tela em que a página é lida (iPhone SE
   antigo, Android de entrada) e a única em que o tamanho do texto muda. */
@media (max-width:340px){
  .serp__q{font-size:.78rem}
}

/* =========================================================
   quem prefere menos movimento
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .load,.reveal,.plano__itens li,.serp__hit,.serp__ghost{opacity:1 !important;transform:none !important}
  .mock__type{width:auto !important;border-right-color:transparent !important}
  .serp__caret{display:none}
  .hero__title .mark::after{transform:scaleX(1) !important}
  /* sem animação de entrada, mas o botão continua obedecendo o is-on: assim
     ele também não fica plantado por cima do rodapé para quem pede menos
     movimento — só aparece e some, sem transição */
  .fab.is-on,.fab.is-on .fab__bubble,.fab.is-on .fab__who,.fab.is-on .fab__txt,.fab.is-on .fab__badge{opacity:1 !important;visibility:visible !important;transform:none !important}
  .fab__ring,.fab__dots{display:none}
  .fab__btn::before{animation:none}
}