/* Light: página de anúncio para empresas brasileiras nos EUA.
   Mesmos tokens do site, em arquivo próprio para abrir rápido. Escrito primeiro para 390 px; o desktop é a adaptação.
   Todo estado inicial de animação fica sob html.motion: sem JavaScript ou com movimento reduzido, a página já aparece completa. */

:root {
  --bg:     #DCDCDC;
  --paper:  #F0F0F0;
  --white:  #FFFFFF;
  --ink:    #0C1E29;
  --ink-2:  #163246;
  --steel:  #2C5873;
  --deep:   #07131A;
  --muted:  #4A5862;
  --line:   rgba(12,30,41,.14);
  --accent: #FFFE15;

  --outer: max(80vw, min(100vw - 24px, 900px));
  --u: calc(var(--outer) / 1232);
  --gap: clamp(56px, 16vw, 72px);
  --pad: 16px;
  --ease: cubic-bezier(.23, 1, .32, 1);

  --display: "Cal Sans", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: clamp(16px, 8px + .5556vw, 24px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--accent); border-radius: 6px; }
.panel :focus-visible, .top :focus-visible, .services :focus-visible { outline-color: var(--white); }
.bridge-sec :focus-visible { outline-color: var(--ink); box-shadow: none; }

.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-fill { width: 1.3em; height: 1.3em; flex: none; fill: currentColor; }

h2 { font: 400 clamp(26px, 7.4vw, 30px)/1.1 var(--display); letter-spacing: -.008em; text-wrap: balance; }
.wrap { width: var(--outer); margin-inline: auto; padding-inline: 4px; }
.block { padding-top: var(--gap); }
.lead { margin-top: 14px; color: var(--muted); max-width: 40rem; }
.lead-2 { margin-top: 8px; }

/* ===== Botões ===== */
.btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 18px;
  border-radius: 999px; background: var(--accent); color: var(--ink); text-decoration: none; text-align: center;
  font: 600 1rem/1.2 var(--body); box-shadow: inset 0 0 0 1.5px var(--ink), 0 12px 22px -12px rgba(7,19,26,.6);
  transition: background-color .16s, translate .16s var(--ease), scale .12s var(--ease);
}
.btn-wa:hover { background: var(--white); translate: 0 -1px; }
.btn-wa:active { scale: .98; }
.panel .btn-wa, .top .btn-wa, .services .btn-wa { box-shadow: 0 14px 28px -14px rgba(0,0,0,.85); }
.btn-big { min-height: 60px; padding-inline: 10px; }
.btn-small { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.14); color: var(--white); text-decoration: none; font: 500 .875rem/1.1 var(--body); white-space: nowrap; transition: background-color .16s, color .16s; }
.btn-small:hover { background: var(--accent); color: var(--ink); }
.cta { margin-top: 28px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.micro { font-size: .875rem; line-height: 1.4; color: var(--muted); }
.panel .micro { color: rgba(255,255,255,.78); }

/* ===== Topo ===== */
.top { position: relative; background: var(--ink); color: var(--white); padding: 0 calc((100% - var(--outer)) / 2 + var(--pad)) 16px; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.logo { font: 400 1.5rem/1 var(--display); letter-spacing: -.01em; }
.logo-dot { display: inline-block; width: .3em; height: .3em; margin-left: .04em; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 1.5px currentColor; }

.hero { padding-top: 18px; }
/* Sobre fundo claro o amarelo é marca-texto, nunca cor de texto */
.kicker { display: inline; padding: .18em .4em; border-radius: 5px; background: var(--accent); color: var(--ink); font: 600 .75rem/1.75 var(--body); letter-spacing: .03em; text-transform: uppercase; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
h1 { margin-top: 12px; font: 400 clamp(32px, 9.2vw, 38px)/1.06 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.hero-sub { margin-top: 12px; color: rgba(255,255,255,.84); }
.hero .btn-wa { margin-top: 16px; }
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 14px; font-size: .875rem; font-weight: 500; line-height: 1.25; }
.promises li { display: flex; align-items: center; gap: 7px; }
.promises .i { width: 1.35em; height: 1.35em; padding: .22em; border-radius: 50%; background: var(--accent); color: var(--ink); stroke-width: 3; }

/* A ponte em uma cena: foto, confirmações, celular e balão, cada plano no seu ritmo.
   --hp é o progresso da rolagem; --mx e --my, a posição do ponteiro (só desktop). */
.scene { --hp: 0; --mx: 0; --my: 0; position: relative; margin-top: 28px; padding-bottom: 20px; font-size: 9.5px; line-height: 1.2; }
.scene-photo { position: relative; z-index: 0; aspect-ratio: 1 / .94; overflow: hidden; border-radius: 18px; background: var(--ink-2); }
.scene-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; scale: 1.08; translate: calc(var(--mx) * -8px) calc(var(--hp) * 5% + var(--my) * -8px); }
.ticker { position: absolute; z-index: 2; left: 12px; top: 12px; right: 12px; font-size: 1.3em; }
.ticker li { display: inline-flex; align-items: center; gap: .45em; padding: .5em .85em .5em .55em; border-radius: 99px; background: var(--accent); color: var(--ink); font-weight: 600; box-shadow: 0 10px 18px -10px rgba(7,19,26,.8); }
.ticker li:not(:first-child) { display: none; }
.ticker .i { stroke-width: 3; }
.phone { position: absolute; z-index: 3; right: 10px; bottom: 0; width: 13.5em; padding: .5em; border-radius: 2.1em; background: #24323B; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 28px 34px -20px rgba(7,19,26,.9); translate: calc(var(--mx) * 7px) calc(var(--hp) * -44px + var(--my) * 6px); rotate: calc(2.5deg - var(--hp) * 2.5deg); will-change: transform; }
.phone-in { display: flex; flex-direction: column; gap: .7em; height: 20em; padding: 1.1em .95em .95em; border-radius: 1.7em; overflow: hidden; background: var(--white); color: var(--ink); }
.ph-nav { display: flex; align-items: center; justify-content: space-between; }
.ph-nav b { font: 400 1.1em/1 var(--display); }
.ph-nav i { width: 1.7em; height: .9em; border-block: .15em solid var(--ink); }
.ph-h { font: 400 1.6em/1.06 var(--display); letter-spacing: -.01em; }
.ph-img { flex: 1; min-height: 0; border-radius: .9em; background: radial-gradient(70% 70% at 78% 22%, #DDE9F0 0 8%, #6D97B0 34%, var(--ink-2) 78%); }
.ph-l { display: block; height: .5em; border-radius: 9px; background: #C8CED2; }
.ph-l + .ph-l { width: 64%; margin-top: -.3em; }
.ph-btn { padding: .75em; border-radius: 99px; background: var(--ink); color: var(--white); text-align: center; font-weight: 600; }
.wa-bubble { position: absolute; z-index: 4; left: 8px; bottom: 44px; width: 13em; padding: .75em .95em 1.15em; border-radius: .3em 1.1em 1.1em 1.1em; background: #D9FDD3; color: #10231A; font-size: 1.32em; line-height: 1.3; box-shadow: 0 22px 28px -16px rgba(7,19,26,.8), 0 0 0 1px rgba(12,30,41,.06); translate: calc(var(--mx) * 12px) calc(var(--hp) * 30px + var(--my) * 10px); }
.wa-bubble b { display: block; margin-bottom: .2em; font-weight: 600; color: #0B6B4F; font-size: .9em; }
.wa-msg { display: block; }
.wa-tick { position: absolute; right: .55em; bottom: .3em; color: #0B7FB5; }
.wa-tick .i { width: .95em; height: .95em; stroke-width: 2.6; }
.wa-dots { display: none; }

/* A cena nunca fica parada: a foto respira, as confirmações se revezam e a conversa recomeça. O texto do hero não espera nada disso. */
@media (prefers-reduced-motion: no-preference) {
  .phone { animation: rise .7s var(--ease) .1s both; }
  .wa-bubble { animation: pop .45s var(--ease) .55s both; }
  .scene-photo img { animation: breathe 16s ease-in-out infinite alternate; }
  .wa-msg, .wa-tick { animation: msg 9s linear .6s infinite both; }
  .wa-dots { position: absolute; left: 1em; top: 50%; translate: 0 -50%; display: flex; gap: .3em; animation: dots 9s linear .6s infinite both; }
  .wa-dots i { width: .5em; height: .5em; border-radius: 50%; background: #0B6B4F; animation: dot .8s ease-in-out infinite; }
  .wa-dots i:nth-child(2) { animation-delay: .12s; }
  .wa-dots i:nth-child(3) { animation-delay: .24s; }
  .ticker li, .ticker li:not(:first-child) { position: absolute; left: 0; top: 0; display: inline-flex; white-space: nowrap; opacity: 0; animation: chip 9s var(--ease) 1.2s infinite both; }
  .ticker li:nth-child(2) { animation-delay: 4.2s; }
  .ticker li:nth-child(3) { animation-delay: 7.2s; }
  .scene.paused * { animation-play-state: paused; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes pop { from { opacity: 0; transform: translateY(.7em) scale(.94); } to { opacity: 1; transform: none; } }
  @keyframes breathe { from { transform: none; } to { transform: scale(1.09); } }
  @keyframes msg { 0%, 12% { opacity: 0; } 14%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
  @keyframes dots { 0%, 12% { opacity: 1; } 14%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
  @keyframes chip { 0% { opacity: 0; transform: translateY(.6em) scale(.96); } 4%, 29% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-.4em); } }
  @keyframes dot { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-.25em); opacity: 1; } }
}

/* ===== Faixa de confiança ===== */
.trust { padding-block: 26px 30px; text-align: center; overflow: hidden; background: var(--ink); }
.trust > p { width: var(--outer); margin-inline: auto; padding-inline: 8px; font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.78); text-wrap: balance; }
.trust-logos { margin-top: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.trust-track { display: flex; align-items: center; gap: 14px; width: max-content; padding-right: 14px; animation: slide 44s linear infinite; }
/* Plaquinha branca: parte dos logos tem fundo próprio e não pode ser invertida */
.trust-track img { width: auto; height: 100%; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.1); }
.logos img { width: auto; height: 100%; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.1); }
.trust-track li { flex: none; box-sizing: content-box; height: 26px; padding: 8px 14px; border-radius: 10px; background: var(--white); }
@keyframes slide { to { transform: translateX(-25%); } }

/* ===== Bloco 2: a dor ===== */
.bubbles { display: grid; gap: 12px; margin-top: 22px; }
.bubbles li { position: relative; padding: 12px 16px; margin-left: 8px; border-radius: 4px 16px 16px 16px; background: var(--white); box-shadow: 0 10px 18px -14px rgba(7,19,26,.5); }
.bubbles li::before { content: ""; position: absolute; left: -8px; top: 0; width: 9px; height: 12px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.turn { margin: 30px auto 0; max-width: 34rem; text-align: center; font: 400 clamp(21px, 5.8vw, 24px)/1.25 var(--display); text-wrap: balance; }
/* Marca-texto: --mk vai de 0 a 1 conforme a rolagem; sem script fica inteiro */
.mark { padding: .04em .14em; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / calc(var(--mk, 1) * 100%) 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Entradas de um elemento por vez, só quando ele chega na tela */
.motion .bubbles li[data-in] { opacity: 0; transform: translateY(14px) scale(.97); transform-origin: 0 0; transition: opacity .35s linear, transform .5s var(--ease); }
.motion .bubbles li.is-in { opacity: 1; transform: none; }
/* Cada balão aparece digitando; o espaço da frase já está reservado, para a página não pular */
.motion .bubbles li[data-in]:not(.is-said) { color: transparent; }
.motion .bubbles li[data-in]:not(.is-said)::after { content: ""; position: absolute; left: 16px; top: 50%; width: 34px; height: 8px; margin-top: -4px; background: radial-gradient(circle at 4px 4px, var(--muted) 3.5px, transparent 4px) 0 0 / 13px 8px repeat-x; animation: typing .9s ease-in-out infinite; }
@keyframes typing { 50% { opacity: .35; } }

/* ===== Blocos escuros ===== */
.panel { width: 100%; margin: var(--gap) auto 0; padding: 44px calc((100% - var(--outer)) / 2 + 8px); color: var(--white); background: radial-gradient(90% 60% at 80% 0%, var(--steel), var(--ink) 62%, var(--deep)); }

/* Bloco 3: a ponte, o ponto alto da página. Amarelo inteiro: a cor forte aparece aqui e só aqui. */
.bridge-sec { background: var(--accent); color: var(--ink); }
.bridge-text { display: grid; gap: 10px; margin-top: 18px; }
.bridge-text span { display: block; }
.bridge-text span + span { margin-top: 10px; }
.bridge { position: relative; margin-top: 30px; }
.bridge-col { position: relative; }
.bridge-col h3 { padding-left: 54px; margin-bottom: 8px; font: 400 1.5rem/1.1 var(--display); }
.bridge-col li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 54px; padding-block: 6px; line-height: 1.3; font-weight: 500; }
.b-node { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--accent); transition: background-color .22s, color .22s, box-shadow .22s, scale .3s var(--ease); }
.b-node .i { width: 20px; height: 20px; }
.bridge-mid { position: relative; z-index: 1; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; padding-block: 14px; }
.bridge-mark { display: none; }
.bridge-label { display: contents; font-weight: 600; }
.bridge-label .i { justify-self: center; width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 2px var(--ink); stroke-width: 2; }
/* Trilho do celular: corre pela coluna dos ícones, do primeiro ao último item */
.rail { display: none; }
.motion .rail { position: absolute; left: 20px; width: 2px; display: block; background: rgba(12,30,41,.2); }
.motion .rail i { display: block; height: 100%; background: var(--ink); transform-origin: 0 0; transform: scaleY(var(--rp, 0)); }
.motion .bridge-sec.live li:not(.is-lit) .b-node { background: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(12,30,41,.4); scale: .9; }
.cables { display: none; }
.motto { margin: 32px auto 0; padding-block: 18px; max-width: 36rem; text-align: center; border-block: 1.5px solid var(--ink); font: 400 clamp(21px, 5.8vw, 24px)/1.2 var(--display); text-wrap: balance; }
/* Sobre o amarelo, o botão se inverte: botão amarelo sumiria */
.bridge-sec .btn-wa { background: var(--ink); color: var(--accent); }
.bridge-sec .btn-wa:hover { background: var(--deep); color: var(--white); }
.panel.bridge-sec .micro { color: var(--ink); }

/* ===== Bloco 4: por que uma equipe brasileira ===== */
.tint { margin-top: var(--gap); padding-block: var(--gap); }
.why { margin-top: 0; background: var(--ink); color: var(--white); }
.why-photo { margin-top: 22px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--ink-2); }
.reasons { display: grid; gap: 4px; margin-top: 22px; }
.reasons li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding-block: 16px; border-top: 1px solid rgba(255,255,255,.16); }
.reasons li:first-child { border-top: 0; }
.ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: 1.05rem; }
.reasons h3 { font: 400 1.3125rem/1.15 var(--display); text-wrap: balance; }
.reasons p { margin-top: 4px; color: rgba(255,255,255,.84); }
.reasons .is-key { position: relative; margin-block: 6px; padding: 18px 14px; border: 0; border-radius: 16px; background: var(--accent); color: var(--ink); }
.reasons .is-key + li { border-top: 0; }
.reasons .is-key p { color: var(--ink); }
.reasons .is-key .ico { background: var(--ink); color: var(--accent); }
.seal { display: inline-block; margin-bottom: 6px; padding: 3px 9px; border-radius: 99px; background: var(--ink); color: var(--accent); font-size: .75rem; font-weight: 600; }
.motion .reasons li[data-in] { opacity: 0; transform: translateY(18px); transition: opacity .35s linear calc(var(--i, 0) * 70ms), transform .6s var(--ease) calc(var(--i, 0) * 70ms); }
.motion .reasons li.is-in { opacity: 1; transform: none; }

/* ===== Bloco 5: serviços. Os cards se empilham conforme a rolagem ===== */
.services { padding-block: var(--gap); background: var(--steel); color: var(--white); }
.services .lead { color: rgba(255,255,255,.84); }
.services .micro { color: rgba(255,255,255,.84); }
.svc-photo { margin-top: 22px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--ink-2); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.svc { display: grid; gap: 12px; margin-top: 22px; }
.svc li { position: relative; padding: 20px; border-radius: 18px; background: var(--ink); box-shadow: 0 -14px 28px -18px rgba(7,19,26,.75), inset 0 0 0 1px rgba(255,255,255,.1); }
.svc .ico { margin-bottom: 12px; border-radius: 12px; background: var(--accent); color: var(--ink); }
.svc h3 { font: 400 1.3125rem/1.15 var(--display); text-wrap: balance; }
.svc p { margin-top: 4px; color: rgba(255,255,255,.84); }
.svc strong { display: block; margin-bottom: 4px; color: var(--white); font-weight: 600; }
.motion .svc li { position: sticky; top: calc(14px + var(--n) * 10px); min-height: var(--svc-h, 0); transform-origin: 50% 0; transform: scale(calc(1 - var(--st, 0) * .05)); will-change: transform; }
.motion .svc li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--deep); opacity: calc(var(--st, 0) * .55); pointer-events: none; }
.svc li:nth-child(1) { --n: 0; }
.svc li:nth-child(2) { --n: 1; }
.svc li:nth-child(3) { --n: 2; }
.svc li:nth-child(4) { --n: 3; }
.svc li:nth-child(5) { --n: 4; }

/* Fotos que correm num ritmo diferente do texto: --py vai de 0 a 1 enquanto a foto atravessa a tela */
[data-plx] img { width: 100%; height: 124%; object-fit: cover; transform: translateY(calc(var(--py, .5) * -19.35%)); will-change: transform; }

/* ===== Bloco 6: a oferta, o ponto de conversão. Fundo escuro de ponta a ponta ===== */
.offer-sec { margin-top: 0; padding-block: var(--gap); padding-inline: calc((100% - var(--outer)) / 2 + 8px); background: var(--deep); }
.offer-seal { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 99px; background: var(--accent); color: var(--ink); font: 400 1.0625rem/1.1 var(--display); rotate: -2deg; }
.offer-text { margin-top: 12px; color: rgba(255,255,255,.84); }
.offer h3 { margin-top: 22px; font: 400 1.25rem/1.15 var(--display); }
.checks { display: grid; gap: 12px; margin-top: 12px; }
.checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; line-height: 1.4; }
.checks .i { width: 24px; height: 24px; padding: 4.5px; border-radius: 50%; background: var(--accent); color: var(--ink); stroke-width: 3; }
/* Cada item ganha o seu visto ao chegar na tela */
.motion .checks li[data-in] .i { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .4s var(--ease) .1s; }
.motion .checks li.is-in .i { stroke-dashoffset: 0; }
.free { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.84); }
.free strong { color: var(--white); font-weight: 600; }
.free + .cta { margin-top: 16px; }
.call { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Brilho discreto: é o botão mais importante da página */
  .offer .btn-wa { animation: glow 2.8s ease-out infinite; }
  @keyframes glow { from { box-shadow: 0 0 0 0 rgba(255,254,21,.45); } to { box-shadow: 0 0 0 16px rgba(255,254,21,0); } }
}

/* ===== Bloco 7: como funciona ===== */
.steps { --sp: 1; position: relative; display: grid; gap: 22px; margin-top: 26px; }
.steps::before, .steps::after { content: ""; position: absolute; left: 25px; top: 20px; bottom: var(--sb, 30px); width: 2px; background: var(--ink); }
.steps::before { opacity: .2; }
.steps::after { transform-origin: 0 0; transform: scaleY(var(--sp)); }
.step { position: relative; z-index: 1; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--ink); text-decoration: none; }
.step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--accent); font: 400 1.75rem/1 var(--display); transition: background-color .22s, color .22s, box-shadow .22s; }
.motion .steps.live li:not(.is-lit) .step:not(.step-link) .step-n { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 2px rgba(12,30,41,.3); }
.step-body { display: flex; gap: 10px; align-items: flex-start; padding-top: 4px; }
.step-body strong { font-weight: 600; }
.step-ico { width: 1.3em; height: 1.3em; margin-top: .12em; color: var(--muted); }
.step-link .step-n { background: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.step-link .step-ico { color: #128C4A; }
.step-link strong { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.step-link:hover .step-n { background: var(--white); }
/* Cada ícone reage quando a linha chega no passo */
.motion .steps.live .step:not(.step-link) .step-ico { transition: opacity .25s linear, transform .45s var(--ease), color .25s linear; }
.motion .steps.live li:not(.is-lit) .step:not(.step-link) .step-ico { opacity: .3; transform: scale(.72); }
.motion .steps.live li.is-lit .step-ico { color: var(--ink); }
.motion .steps.live .step-n { transition: background-color .22s, color .22s, box-shadow .22s, transform .45s var(--ease); }
.motion .steps.live li:not(.is-lit) .step:not(.step-link) .step-n { transform: scale(.9); }

/* ===== Bloco 8: prova ===== */
.proof { background: var(--steel); color: var(--white); }
.result { margin-top: 22px; padding: 20px 18px; border-radius: 16px; background: var(--ink); box-shadow: 0 18px 30px -22px rgba(7,19,26,.9); }
.result-tag { font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.84); }
.result-n { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 6px; font: 400 clamp(25px, 7.3vw, 30px)/1.15 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.result-n .i { width: .8em; height: .8em; stroke-width: 2.4; }
.result-n span:last-child { padding-inline: .16em; border-radius: .14em; background: var(--accent); color: var(--ink); text-align: center; }
/* As barras respeitam a proporção real: 40 mil é um décimo de 400 mil. A maior nasce do tamanho da menor e cresce até dez vezes. */
.result-bars { display: grid; gap: 6px; margin-top: 14px; }
.bar { display: block; height: 12px; border-radius: 99px; transform-origin: 0 0; }
.bar-a { width: 10%; background: var(--white); }
.bar-b { width: 100%; background: var(--accent); }
.motion .result[data-in] .bar-b { transform: scaleX(.1); transition: transform 1.2s cubic-bezier(.33, 1, .68, 1); }
.motion .result.is-in .bar-b { transform: none; }
.result-text { margin-top: 14px; color: rgba(255,255,255,.84); }
.proof-text { margin-top: 26px; }
.logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.logos li { display: flex; align-items: center; justify-content: center; height: 56px; padding: 10px 12px; border-radius: 12px; background: var(--white); }
.motion .logos li[data-in] { opacity: 0; transform: translateY(12px); transition: opacity .3s linear calc(var(--i, 0) * 45ms), transform .5s var(--ease) calc(var(--i, 0) * 45ms); }
.motion .logos li.is-in { opacity: 1; transform: none; }

/* ===== Bloco 9: perguntas frequentes ===== */
.faq-in { width: var(--outer); max-width: 720px; margin-inline: auto; padding-inline: 4px; }
.faq h2 { margin-bottom: 20px; }
.faq details { margin-top: 8px; border-radius: 12px; background: var(--white); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 12px 16px; cursor: pointer; font-weight: 600; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--white); font: 400 1.25rem/1 var(--body); }
.faq details[open] summary::after { content: "\2212"; background: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.faq details p { padding: 0 16px 16px; color: var(--muted); }
.faq details p:has(+ p) { padding-bottom: 8px; }
.faq-more { margin-top: 20px; text-align: center; }
.faq-more a { display: inline-block; padding-block: 10px; font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details::details-content { height: 0; overflow: clip; transition: height .22s var(--ease), content-visibility .22s allow-discrete; }
    .faq details[open]::details-content { height: auto; }
  }
}

/* ===== Bloco 10: CTA final, com a equipe ao fundo ===== */
.final { position: relative; overflow: hidden; padding-block: 72px; text-align: center; background: var(--deep); }
.final > :not(.final-lines, .final-photo) { position: relative; z-index: 2; }
.final-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Película escura: a foto nunca pode tirar a leitura do texto, em nenhum ponto */
.final-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(7,19,26,.8), rgba(7,19,26,.88)); }
.final h2 { margin-inline: auto; max-width: 18em; }
.final > p { margin: 14px auto 0; max-width: 34rem; color: rgba(255,255,255,.88); }
.final > p + p { margin-top: 8px; }
.final-lines { display: none; }

/* ===== Rodapé mínimo ===== */
.foot { width: var(--outer); margin-inline: auto; padding: 24px 8px 26px; text-align: center; font-size: .8125rem; color: var(--muted); }
.foot a { display: inline-block; padding-block: 12px; color: var(--ink); text-underline-offset: 2px; }
.foot p + p { margin-top: 2px; }

/* ===== Barra fixa do celular ===== */
.fixbar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(240,240,240,.94); box-shadow: 0 -10px 24px -14px rgba(7,19,26,.5); transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
.fixbar.on { transform: none; visibility: visible; }

/* ===== Desktop: adaptação do celular ===== */
@media (min-width: 900px) {
  :root { --gap: clamp(80px, calc(108 * var(--u)), 120px); --pad: max(24px, calc(56 * var(--u))); }
  h2 { font-size: max(32px, calc(46 * var(--u))); }
  .wrap { padding-inline: 0; }
  .lead { margin-top: 16px; font-size: 1.0625rem; max-width: 48rem; }
  .lead-2 { margin-top: 6px; }
  .btn-wa { display: inline-flex; width: auto; padding-inline: 28px; }
  .btn-big { min-height: 64px; padding-inline: 36px; font-size: 1.125rem; }
  .cta-left { justify-items: start; text-align: left; }
  .micro { font-size: .9375rem; }
  .fixbar { display: none; }

  /* O cabeçalho vira uma pílula flutuante depois do hero: no desktop ele faz o papel da barra fixa */
  .top { padding-top: 76px; padding-bottom: max(44px, calc(64 * var(--u))); }
  .head { position: absolute; left: calc((100% - var(--outer)) / 2 + var(--pad)); right: calc((100% - var(--outer)) / 2 + var(--pad)); top: 14px; padding-top: 0; z-index: 40; }
  .head.float { position: fixed; left: 50%; right: auto; top: 12px; width: 400px; margin-left: -200px; padding: 6px 6px 6px 22px; border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(12,30,41,.08), 0 18px 30px -16px rgba(7,19,26,.6); animation: drop .24s var(--ease) both; }
  .head.float .btn-small { background: var(--ink-2); color: var(--white); }
  .head.float .btn-small:hover { background: var(--ink); color: var(--accent); }
  .head.float :focus-visible { outline-color: var(--ink); }
  @keyframes drop { from { transform: translateY(-140%); } to { transform: none; } }
  .logo { font-size: 1.625rem; }

  .hero { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: max(24px, calc(44 * var(--u))); align-items: center; padding-top: max(16px, calc(26 * var(--u))); }
  .kicker { font-size: .8125rem; }
  h1 { margin-top: 18px; font-size: max(38px, calc(58 * var(--u))); }
  .hero-sub { margin-top: 18px; font-size: 1.0625rem; max-width: 36rem; }
  .hero .btn-wa { margin-top: 24px; }
  .promises { margin-top: 20px; max-width: 30rem; font-size: .9375rem; gap: 10px 16px; }
  .scene { margin: 0; padding: 0; height: max(440px, calc(660 * var(--u))); font-size: max(10px, calc(15 * var(--u))); }
  .scene-photo { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 24px; }
  .scene-photo img { object-position: 52% 50%; }
  .ticker { left: 18px; top: 18px; right: 18px; font-size: 1.15em; }
  .phone { right: -16px; bottom: -22px; }
  .wa-bubble { left: -22px; bottom: 15%; font-size: 1.25em; }

  .trust { padding-block: max(24px, calc(34 * var(--u))) max(34px, calc(50 * var(--u))); }
  .trust > p { font-size: .9375rem; }
  .trust-logos { margin-top: 18px; }
  .trust-track { gap: 20px; padding-right: 20px; }
  .trust-track li { height: 34px; padding: 10px 18px; border-radius: 12px; }

  /* Balões desencontrados, como numa conversa */
  .bubbles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; margin-top: 32px; }
  .bubbles li { padding: 18px 22px; font-size: 1.0625rem; }
  .bubbles li:nth-child(even) { top: 26px; }
  .turn { margin-top: 72px; max-width: 46rem; font-size: max(24px, calc(34 * var(--u))); }

  /* --cx e --cr recortam o painel: ele começa com a largura da página e abre até as bordas */
  .panel { padding-block: max(52px, calc(92 * var(--u))); padding-inline: calc((100% - var(--outer)) / 2 + max(32px, calc(72 * var(--u)))); }
  .bridge-sec { margin-top: calc(var(--gap) + 12px); padding-inline: calc((100% - var(--outer)) / 2); clip-path: inset(0 var(--cx, 0px) round var(--cr, 0px)); }
  .h2-big { max-width: 22em; margin-inline: auto; text-align: center; font-size: max(34px, calc(52 * var(--u))); }
  .bridge-text { max-width: 50rem; margin: 22px auto 0; gap: 12px; text-align: center; font-size: 1.0625rem; }
  .bridge-text span { display: inline; }
  .bridge-text span + span { margin-top: 0; }

  /* O diagrama: colunas sem caixa, com os ícones virados para o centro e os fios ligando tudo à marca */
  .bridge-pin.on .bridge-stage { position: sticky; top: var(--bt); }
  .bridge-pin.on::after { content: ""; display: block; height: 80vh; }
  .bridge { display: grid; grid-template-columns: minmax(0, 1fr) max(200px, calc(320 * var(--u))) minmax(0, 1fr); align-items: center; gap: 0; margin-top: max(30px, calc(46 * var(--u))); }
  .bridge-col h3 { padding-left: 0; margin-bottom: 14px; font-size: max(24px, calc(32 * var(--u))); }
  .bridge-col li { grid-template-columns: minmax(0, 1fr) 46px; gap: 16px; min-height: 66px; font-size: 1.0625rem; }
  .bridge-col .b-node { width: 46px; height: 46px; }
  .col-a { text-align: right; }
  .col-a li > .b-node { order: 1; }
  .col-b li { grid-template-columns: 46px minmax(0, 1fr); }
  .col-b h3 { padding-left: 62px; }
  .col-a h3 { padding-right: 62px; }
  .bridge-mid { display: flex; justify-content: center; padding: 0; }
  .bridge-mid::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--ink); }
  .bridge-mark { position: relative; display: inline-flex; align-items: baseline; padding: 14px 22px; border-radius: 99px; background: var(--ink); color: var(--white); font: 400 1.75rem/1 var(--display); box-shadow: 0 16px 28px -14px rgba(7,19,26,.8); transition: scale .35s var(--ease); }
  .bridge-mark .logo-dot { background: var(--accent); box-shadow: none; }
  .bridge.flow .bridge-mark { animation: beat 2.4s ease-in-out infinite; }
  @keyframes beat { 50% { scale: 1.06; } }
  .motion .bridge-sec.live .bridge-mark:not(.on) { scale: .86; }
  .bridge-label { display: none; }
  .rail, .motion .rail { display: none; }
  .motion .bridge-sec.live .bridge-mid::before { display: none; }
  .cables { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
  .cables path { fill: none; stroke-width: 1.5; }
  .cables .c-base { stroke: rgba(12,30,41,.2); }
  .cables .c-live { stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 1; }
  /* Depois de ligada, a ponte continua trabalhando: um sinal corre pelas linhas */
  .cables .c-flow { stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .05 .95; opacity: 0; }
  .bridge.flow .c-flow { opacity: 1; animation: flow 2.4s linear infinite; }
  @keyframes flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .motto { margin-top: max(40px, calc(64 * var(--u))); max-width: 46rem; font-size: max(24px, calc(34 * var(--u))); }

  .why-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: max(32px, calc(64 * var(--u))); align-items: center; }
  .why-head h2 { font-size: max(34px, calc(52 * var(--u))); }
  .why-photo { margin-top: 0; aspect-ratio: 16 / 10; border-radius: 22px; }
  .reasons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: max(12px, calc(18 * var(--u))); margin-top: max(32px, calc(48 * var(--u))); }
  .reasons li { grid-column: span 2; }
  .reasons li:nth-child(4) { grid-column: 2 / span 2; }
  .reasons li { display: block; padding: max(22px, calc(32 * var(--u))); border: 0; border-radius: 20px; background: var(--ink-2); }
  .reasons .is-key { margin: 0; padding: max(22px, calc(32 * var(--u))); background: var(--accent); translate: 0 -6px; }
  .reasons .ico { margin-bottom: 16px; }
  .reasons h3 { font-size: max(21px, calc(27 * var(--u))); }
  .reasons p { margin-top: 6px; }
  .seal { position: absolute; top: max(22px, calc(32 * var(--u))); right: max(22px, calc(32 * var(--u))); margin: 0; rotate: 3deg; }
  .svc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: max(38px, calc(64 * var(--u))) max(32px, calc(64 * var(--u))); align-items: start; }
  .motion .svc-side { position: sticky; top: 88px; }
  .svc-photo { margin-top: 28px; aspect-ratio: 16 / 9; border-radius: 20px; }
  .svc { gap: max(14px, calc(22 * var(--u))); margin-top: 0; }
  .svc li { padding: max(24px, calc(38 * var(--u))); border-radius: 22px; }
  .motion .svc li { top: calc(88px + var(--n) * 14px); }
  .svc h3 { font-size: max(22px, calc(30 * var(--u))); }
  .svc p { margin-top: 8px; }
  .svc strong { display: inline; margin: 0; }
  .services .cta { grid-column: 1 / -1; margin-top: 0; }

  /* A oferta: texto à esquerda e, à direita, a videochamada que acompanha a leitura */
  .offer-sec { padding-inline: calc((100% - var(--outer)) / 2); }
  .offer { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: max(36px, calc(72 * var(--u))); align-items: start; }
  .offer-seal { padding: 9px 18px; font-size: 1.25rem; }
  .offer-main h2 { font-size: max(34px, calc(52 * var(--u))); }
  .offer-text { font-size: 1.0625rem; }
  .call { position: relative; display: block; height: min(calc(100vh - 110px), calc(660 * var(--u))); min-height: 420px; border-radius: 24px; color: var(--white); }
  .motion .call { position: sticky; top: 88px; }
  .call-photo { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--ink-2); }
  .call-photo img { object-position: 42% 50%; }
  .call-label { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 99px; background: rgba(7,19,26,.78); font-size: .875rem; }
  .call-you { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; align-content: center; gap: 2px; width: 30%; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--ink-2); box-shadow: 0 0 0 2.5px var(--accent), 0 14px 24px -12px rgba(7,19,26,.9); font-size: .8125rem; }
  .call-you .i { width: 34%; height: auto; aspect-ratio: 1; }
  .call-bar { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
  .call-bar i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--ink); }
  .motion .offer[data-in] .call { opacity: 0; transform: translateY(28px) scale(.97); transition: opacity .4s linear, transform .8s var(--ease); }
  .motion .offer.is-in .call { opacity: 1; transform: none; }

  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(14px, calc(26 * var(--u))); margin-top: 38px; }
  .steps::before, .steps::after { left: 34px; right: calc(25% - 34px); top: 33px; bottom: auto; width: auto; height: 2px; }
  .steps::after { transform: scaleX(var(--sp)); }
  .step { display: block; }
  .step-n { position: relative; width: 68px; height: 68px; margin-bottom: 18px; font-size: 2.125rem; }
  .step-body { padding-top: 0; }
  .how .turn { margin-top: 56px; }

  .result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px max(24px, calc(56 * var(--u))); align-items: center; margin-top: 32px; padding: max(26px, calc(48 * var(--u))); border-radius: 20px; }
  .result-tag { grid-column: 1 / -1; font-size: .9375rem; }
  .result-n { font-size: max(32px, calc(52 * var(--u))); margin-top: 0; gap: 2px 14px; }
  .result-text { margin-top: 0; font-size: 1.0625rem; max-width: 30rem; }
  .result-bars { grid-column: 1 / -1; grid-row: 3; margin-top: 18px; gap: 8px; }
  .bar { height: 16px; }
  .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
  .logos li { height: max(64px, calc(76 * var(--u))); padding: 14px 16px; }

  .faq h2 { text-align: center; margin-bottom: 26px; }
  .faq summary { padding-inline: 20px; }
  .faq details p { padding-inline: 20px; }

  /* --cx e --cr recortam o bloco: ele começa com a largura da página e a foto abre até as bordas */
  .final { padding-block: max(96px, calc(168 * var(--u))); padding-inline: calc((100% - var(--outer)) / 2 + max(32px, calc(72 * var(--u)))); clip-path: inset(0 var(--cx, 0px) round var(--cr, 0px)); }
  .final h2 { font-size: max(34px, calc(52 * var(--u))); }
  .final > p { font-size: 1.0625rem; }
  .final .cta { margin-top: 34px; }
  .final-lines { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }
  .final-lines path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; }
}

@media (hover: hover) and (pointer: fine) {
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .trust-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding-inline: 16px; row-gap: 12px; }
  .trust-track .dup { display: none; }
  .fixbar { transition: none; }
  .btn-wa, .bridge-mark { transition: none; }
}