/* Mittere — site de vendas (mittere.com.br). Padrão da categoria, no acabamento do respond.io.
   Desde 20/10/2026 (pedido do Dudu: sem azul, botões laranja, mais formas e movimento): creme quente com campos grafite,
   laranja para ação, verde só no logo e no que está ao vivo. As formas vêm do logo (balão, círculo, rota do avião) e o
   movimento conta uma história só: mensagem enviada chega. Telas reais do produto. */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --creme: #FFF7EE;
  --areia: #F7EEE3;
  --chao: #FFFFFF;
  --tinta: #1F1A16;
  --tinta-2: #5A4F46;              /* 7,5:1 no creme */
  --tinta-3: #71665C;              /* 5,3:1 no creme; 4,9:1 na areia */
  --linha: #EADFD2;
  --linha-forte: #D9CABA;
  --grafite: #1E1A17;
  --grafite-950: #141110;
  --grafite-800: #2B2521;
  --sobre-escuro-2: #D9CFC5;       /* 11:1 no grafite */
  --sobre-escuro-3: #ADA196;       /* 6,8:1 no grafite */
  --linha-escura: rgba(255, 255, 255, .12);
  --laranja: #D14600;              /* botões: texto branco a 4,6:1 */
  --laranja-escuro: #B83F00;       /* hover e laranja em texto sobre claro */
  --laranja-vivo: #FF7A1A;         /* formas e destaque sobre grafite (6,6:1) */
  --laranja-suave: #FFE3CC;
  --laranja-claro: #FFF0E3;
  --verde: #25D366;                /* logo e "ao vivo" */
  --verde-texto: #0B7A3B;
  --verde-suave: #E6F9EE;
  --raio: 16px;
  --raio-p: 10px;
  --sombra-tela: 0 2px 4px rgba(60, 32, 10, .06), 0 40px 80px -36px rgba(60, 32, 10, .38);
  --sombra-cartao: 0 18px 40px -18px rgba(60, 32, 10, .42);
  --solta: cubic-bezier(.16, 1, .3, 1);
  --caixa: 1200px;
  --lateral: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(5rem, 9vw, 8rem);
  --fonte: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font-family: var(--fonte); font-size: 1.0625rem; line-height: 1.6; color: var(--tinta); background: var(--chao); font-feature-settings: "ss01"; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--laranja-suave); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; border-radius: 6px; }
.sec-escura :focus-visible, .rodape :focus-visible { outline-color: var(--laranja-vivo); }
html { scrollbar-color: #CDBBA8 transparent; caret-color: var(--laranja); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb { background: #D6C5B2; border-radius: 99px; border: 3px solid var(--chao); }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 1rem; top: -100px; z-index: 300; background: var(--laranja); color: #fff; padding: .75rem 1.2rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
.pular:focus { top: 1rem; }
.caixa { width: min(100% - 2 * var(--lateral), var(--caixa)); margin-inline: auto; }

/* ---------------------------------------------------------------- botões */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.1rem; padding: 0 1.5rem; border-radius: 999px; border: 1.5px solid transparent; font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--solta), box-shadow .3s; }
.bt .ic { width: 1.1em; height: 1.1em; transition: transform .35s var(--solta); }
.bt:hover .ic-seta { transform: translateX(4px); }
.bt:active { transform: translateY(1px); }
.bt-laranja { background: var(--laranja); color: #fff; box-shadow: 0 10px 22px -14px rgba(60, 32, 10, .55); }
.bt-laranja:hover { background: var(--laranja-escuro); transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(60, 32, 10, .55); }
.bt-contorno { border-color: var(--linha-forte); color: var(--tinta); background: rgba(255, 255, 255, .55); }
.bt-contorno:hover { border-color: var(--tinta); background: #fff; }
.bt-p { min-height: 2.6rem; padding: 0 1.1rem; font-size: .93rem; }
.bt[disabled] { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------------- topo */
.topo { position: sticky; top: 0; z-index: 100; background: var(--creme); color: var(--tinta); transition: box-shadow .3s; }
.topo.rolou { box-shadow: 0 1px 0 var(--linha), 0 14px 30px -24px rgba(60, 32, 10, .45); }
.topo-in { display: flex; align-items: center; gap: 2rem; min-height: 76px; }
.marca { display: block; flex: none; }
.marca img { height: 34px; width: auto; }
.menu { display: flex; gap: .25rem; margin-left: auto; }
.menu a { padding: .6rem .85rem; border-radius: 8px; color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: .97rem; transition: color .2s, background-color .2s; }
.menu a:hover { color: var(--tinta); background: rgba(31, 26, 22, .05); }
.topo-cta { margin-left: .5rem; }
.abrir-menu { display: none; margin-left: auto; background: none; border: 1.5px solid var(--linha-forte); color: var(--tinta); border-radius: 999px; padding: .55rem .95rem; align-items: center; gap: .45rem; font-weight: 650; cursor: pointer; }
@media (max-width: 960px) {
  .menu, .topo-cta { display: none; }
  .abrir-menu { display: inline-flex; }
  .topo.aberto .menu { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--creme); padding: .5rem var(--lateral) 1.5rem; gap: 0; box-shadow: 0 24px 40px -24px rgba(60, 32, 10, .4); height: calc(100dvh - 76px); align-content: start; overflow-y: auto; }
  html:has(.topo.aberto) { overflow: hidden; }
  .topo.aberto .menu a { padding: 1rem 0; border-bottom: 1px solid var(--linha); border-radius: 0; font-size: 1.15rem; color: var(--tinta); }
  .topo.aberto .menu .bt { margin-top: 1.25rem; border-bottom: 0; border-radius: 999px; color: #fff; padding: 0 1.5rem; font-size: 1rem; font-weight: 700; }
}
.menu .bt-menu { display: none; color: #fff; }
@media (max-width: 960px) { .topo.aberto .menu .bt-menu { display: inline-flex; } }

/* ---------------------------------------------------------------- formas (do logo: círculo, balão, rota) */
.formas { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
.forma { position: absolute; display: block; }
.f-sol { width: var(--t, 30rem); aspect-ratio: 1; border-radius: 50%; background: var(--laranja-suave); }
.f-sol-vivo { background: var(--laranja-vivo); }
.f-anel { width: var(--t, 8rem); aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--laranja-vivo); opacity: .7; }
.f-ponto { width: var(--t, 1rem); aspect-ratio: 1; border-radius: 50%; background: var(--laranja); }
.f-balao { width: var(--t, 4.5rem); color: var(--laranja-vivo); }
.f-balao svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.f-balao-cheio svg { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- abertura */
.abertura { position: relative; isolation: isolate; overflow: clip; background: var(--creme); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.abertura::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 42% at 50% 100%, rgba(255, 122, 26, .2), transparent 70%); }
.abertura .f-sol { --t: clamp(18rem, 34vw, 34rem); right: -9rem; top: 4rem; }
.abertura .f-anel { --t: clamp(5rem, 9vw, 8.5rem); left: 5%; top: 18%; }
.abertura .f-balao { --t: clamp(3rem, 5vw, 4.75rem); left: 13%; top: 46%; }
.abertura .f-ponto { right: 22%; top: 12%; }
.abertura .f-meia { left: -7rem; bottom: 6rem; --t: clamp(12rem, 22vw, 22rem); }
.f-meia { width: var(--t); aspect-ratio: 1; border-radius: 50%; background: var(--laranja-claro); border: 1.5px solid var(--laranja-suave); }
.abertura-texto { text-align: center; max-width: 52rem; margin-inline: auto; }
.abertura h1 { font-size: clamp(2.6rem, 5.8vw, 4.4rem); line-height: 1.02; font-weight: 800; letter-spacing: -.032em; text-wrap: balance; }
.abertura h1 em { font-style: normal; color: var(--laranja); }
.abertura-apoio { margin: 1.5rem auto 0; max-width: 40rem; font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.abertura-apoio strong { color: var(--tinta); font-weight: 650; }
.abertura-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.2rem; }
.garantias { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.75rem; margin-top: 2rem; font-size: .94rem; color: var(--tinta-2); }
.garantias li { display: flex; align-items: center; gap: .45rem; }
.garantias .ic { color: var(--tinta); width: 1.1em; height: 1.1em; }

.vitrine { position: relative; margin-top: clamp(2.5rem, 4.5vw, 3.5rem); }
.caixa-vitrine { width: min(100% - 2 * var(--lateral), 1240px); margin-inline: auto; }
.vitrine-tela { position: relative; width: min(100%, 1120px); margin-inline: auto; border-radius: 18px 18px 0 0; overflow: hidden; box-shadow: 0 -1px 0 rgba(60, 32, 10, .06), 0 40px 90px -30px rgba(60, 32, 10, .45); aspect-ratio: 1440 / 640; background: #fff; }
.vitrine-tela picture { display: block; }
.vitrine-tela img { width: 100%; }
.vitrine-tela figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4.5rem 1rem 1rem; text-align: center; font-size: .8rem; color: var(--tinta-3); background: linear-gradient(rgba(255, 255, 255, 0) 0, #fff 3.25rem); }

/* os balões que se escrevem por cima da tela */
.balao { position: absolute; z-index: 2; width: min(21rem, 34vw); padding: .95rem 1.05rem; border-radius: 16px; background: #fff; color: var(--tinta); box-shadow: var(--sombra-cartao); font-size: .95rem; line-height: 1.45; }
.balao-quem { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; font-size: .82rem; font-weight: 700; color: var(--tinta-2); }
.avatar { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: .72rem; font-weight: 800; color: #fff; background: #0E7C66; flex: none; }
.avatar-ia { background: var(--grafite); color: var(--verde); }
.avatar-ia .ic { width: 1rem; height: 1rem; }
.balao-hora { margin-left: auto; font-weight: 500; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
/* a pergunta termina antes da coluna de conversas da tela (20% da largura dela), para não fatiar a busca e os filtros */
.balao-cliente { --l: min(18.75rem, 30vw); width: var(--l); top: 14%; left: max(calc(1rem - var(--lateral)), calc(50% - min(50%, 560px) + min(20%, 224px) - .5rem - var(--l))); }
.balao-agente { background: var(--verde-suave); }
/* resposta e reunião numa pilha só: posições em % da tela colidiam entre 901 e 1200px */
.pilha { position: absolute; z-index: 2; right: max(0px, calc(50% - 620px)); top: 16%; display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
.pilha .balao { position: relative; }
.balao-agente .balao-quem { color: var(--verde-texto); }
.tempo { display: inline-flex; align-items: center; gap: .35rem; margin-top: .65rem; padding: .3rem .65rem; border-radius: 999px; background: var(--grafite); color: #fff; font-size: .78rem; font-weight: 700; }
.tempo .ponto { width: .45rem; height: .45rem; border-radius: 50%; background: var(--verde); }
.digitando { display: none; gap: .3rem; padding: .25rem 0; }
.digitando i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--tinta-3); animation: pula 1s 2 ease-in-out; } /* o "digitando" fica ~1,4 s na tela: duas batidas bastam, nada pulsa para sempre */
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
.marcado { position: relative; z-index: 2; display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: 14px; background: var(--grafite); color: #fff; box-shadow: var(--sombra-cartao); font-size: .9rem; }
.marcado .ic { color: var(--verde); width: 1.35rem; height: 1.35rem; }
.marcado small { display: block; color: var(--sobre-escuro-2); font-size: .8rem; }

/* a rota do avião: o JS desenha da pergunta até a resposta e o avião leva a mensagem uma vez */
.rota { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.rota-linha { fill: none; stroke: var(--laranja-vivo); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.rota-mascara { fill: none; stroke: #fff; stroke-width: 8; }
.aviao { position: absolute; left: 0; top: 0; z-index: 4; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--laranja); color: #fff; box-shadow: 0 10px 20px -10px rgba(60, 32, 10, .55); opacity: 0; pointer-events: none; offset-rotate: auto 45deg; }
.aviao svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.abertura.voou .rota { opacity: 1; }

/* coreografia de abertura (o JS só liga quando há movimento permitido) */
.abertura.anima .balao, .abertura.anima .marcado { opacity: 0; transform: translateY(14px) scale(.98); }
.abertura.anima .mostra { opacity: 1; transform: none; transition: opacity .6s var(--solta), transform .7s var(--solta); }
.abertura.anima .balao-agente.escrevendo .digitando { display: flex; }
.abertura.anima .balao-agente.escrevendo .texto, .abertura.anima .balao-agente.escrevendo .tempo { display: none; }

@media (max-width: 900px) {
  .vitrine-tela { aspect-ratio: auto; width: min(100%, 26rem); border-radius: 14px 14px 0 0; }
  .pilha { display: contents; }
  .balao { position: relative; width: auto; left: auto; right: auto; top: auto; margin: 0 0 .75rem; }
  .balao-cliente { margin-right: 12%; }
  .balao-agente { margin-left: 12%; }
  .marcado { position: relative; right: auto; top: auto; margin: 0 0 1.5rem 12%; }
  .conversa-movel { display: block; margin-bottom: 1.75rem; }
  .rota, .aviao { display: none; }
  .abertura .f-balao, .abertura .f-ponto { display: none; }
  .abertura .f-anel { left: auto; right: 6%; top: 6%; }
}
@media (min-width: 901px) { .conversa-movel { display: contents; } }
/* notebook de tela baixa (1366x768, 1280x800): aperta os respiros da abertura para a resposta da agente caber na primeira dobra */
@media (min-width: 901px) and (max-height: 840px) {
  .abertura { padding-top: 1.75rem; }
  .abertura h1 { font-size: clamp(2.6rem, 4.6vw, 3.75rem); }
  .abertura-apoio { margin-top: 1.1rem; }
  .abertura-acoes { margin-top: 1.6rem; }
  .garantias { margin-top: 1.4rem; }
  .vitrine { margin-top: 2.5rem; }
  .pilha { top: 10%; }
  .abertura .f-balao { display: none; }
}

/* ---------------------------------------------------------------- seções */
.sec { position: relative; isolation: isolate; overflow-x: clip; padding-block: var(--sec); }
.sec-areia { background: var(--areia); }
.sec-escura { background: var(--grafite); color: #fff; overflow: clip; }
.titulo { font-size: clamp(2rem, 3.6vw, 3.05rem); line-height: 1.08; font-weight: 780; letter-spacing: -.026em; text-wrap: balance; }
.titulo-centro { text-align: center; max-width: 46rem; margin-inline: auto; }
.lead { margin-top: 1.1rem; font-size: 1.15rem; line-height: 1.6; color: var(--tinta-2); max-width: 40rem; text-wrap: pretty; }
.sec-escura .lead { color: var(--sobre-escuro-2); }
.lead-centro { margin-inline: auto; text-align: center; }

/* dores */
.dores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(3rem, 5vw, 4.5rem); }
.dor { padding-top: 1.5rem; border-top: 1px solid var(--linha); }
.dor .ic { width: 1.6rem; height: 1.6rem; color: var(--tinta); }
.dor h3 { margin-top: 1rem; font-size: 1.3rem; line-height: 1.25; font-weight: 750; letter-spacing: -.01em; }
.dor p { margin-top: .6rem; color: var(--tinta-2); }

/* passos: os três ligados pela rota do avião, que anda conforme a página rola */
.passos-area { position: relative; margin-top: clamp(3rem, 5vw, 4.5rem); }
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); position: relative; }
.passos-area + .palco-legenda { margin-top: 2rem; }
.trilho { position: absolute; top: 1.5rem; left: 1.5rem; right: calc(33.3% - 1.5rem); height: 0; border-top: 2px dashed var(--laranja-vivo); container-type: inline-size; }
.trilho-aviao { position: absolute; left: calc(25% - 1.15rem); top: -1.15rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--laranja); color: #fff; box-shadow: 0 10px 20px -10px rgba(60, 32, 10, .55); }
.trilho-aviao svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(45deg); }
.passo { position: relative; display: flex; flex-direction: column; }
.passo-n { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--grafite); color: #fff; font-weight: 800; font-size: 1.15rem; position: relative; font-variant-numeric: tabular-nums; }
.passo h3 { margin-top: 1.4rem; font-size: 1.3rem; font-weight: 750; letter-spacing: -.01em; }
.passo p { margin-top: .6rem; color: var(--tinta-2); }
/* cada recorte do produto começa na mesma altura nas três colunas, do tamanho em que se lê */
.passo-tela { margin-top: auto; padding-top: 1.75rem; height: 15.5rem; display: flex; align-items: flex-start; justify-content: center; }
.passo-tela img { width: auto; max-width: 100%; max-height: 100%; border-radius: 14px; background: #fff; box-shadow: var(--sombra-cartao); }

/* blocos de recurso: texto + tela real */
.recurso { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.recurso + .recurso { margin-top: clamp(5rem, 9vw, 8rem); }
.recurso-inv { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.recurso-inv .recurso-texto { order: 2; }
.recurso-texto .lead { font-size: 1.1rem; }
.lista-ok { display: grid; gap: .85rem; margin-top: 1.75rem; }
.lista-ok li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; color: var(--tinta-2); }
.lista-ok .ic { margin-top: .15rem; color: var(--tinta); width: 1.25rem; height: 1.25rem; }
.sec-escura .lista-ok li { color: var(--sobre-escuro-2); }
.sec-escura .lista-ok .ic { color: var(--laranja-vivo); }
.tela { border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-tela); background: #fff; }
.tela img { width: 100%; }
.sec-escura .tela { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 90px -30px rgba(0, 0, 0, .75); }
.tela-legenda { margin-top: .75rem; font-size: .82rem; color: var(--tinta-3); }
.sec-escura .tela-legenda { color: var(--sobre-escuro-3); }
/* tela com um recorte ampliado por cima (IA: o resumo que a agente escreve) */
.com-cartao { position: relative; }
.com-cartao-area { position: relative; padding-bottom: 6.5rem; }
.com-cartao .cartao-flutua { position: absolute; z-index: 2; right: -1.5rem; bottom: 0; width: min(20rem, 52%); }
.sec-escura .formas .f-sol { --t: clamp(22rem, 40vw, 40rem); right: -12rem; top: 14%; }
.sec-escura .formas .f-anel { --t: clamp(8rem, 14vw, 13rem); right: 30%; bottom: -3rem; opacity: .5; }

/* o que mais vem junto */
.extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 5rem); margin-top: clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid var(--linha); }
.extra { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--linha); }
.extra .ic { width: 1.5rem; height: 1.5rem; color: var(--tinta); margin-top: .1rem; }
.extra h3 { font-size: 1.1rem; font-weight: 720; }
.extra p { margin-top: .3rem; color: var(--tinta-2); }

/* destaque: disparo em massa e grupos. Mesma linguagem da abertura: a tela real ao fundo e recortes ampliados por cima */
.destaque .f-balao { --t: clamp(3.5rem, 6vw, 5.5rem); left: 2%; top: 6%; }
.destaque .f-balao-cheio { --t: clamp(2.25rem, 3.5vw, 3.25rem); color: var(--laranja-suave); right: 6%; top: 10%; left: auto; }
.destaque .f-anel { --t: clamp(7rem, 12vw, 11rem); right: -3rem; top: 46%; }
.destaque-topo { max-width: 54rem; text-align: center; }
.destaque-topo .lead { margin-inline: auto; max-width: 44rem; }
.palco { position: relative; margin-top: clamp(2.75rem, 5vw, 4rem); }
.palco-tela { width: min(100%, 1120px); margin: 0 auto; border-radius: var(--raio); overflow: hidden; background: #fff; box-shadow: var(--sombra-tela); }
.palco-tela img { width: 100%; }
.palco-cartao { display: block; width: 100%; height: auto; border-radius: 14px; background: #fff; box-shadow: var(--sombra-cartao); transition: transform .4s var(--solta), box-shadow .4s; }
.palco-cartao:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -20px rgba(60, 32, 10, .5); }
/* à esquerda o grupo e a trava cobrem só a barra lateral; à direita a prévia cai sobre o celular da própria tela */
.palco-pilha { position: absolute; z-index: 2; top: 9%; left: max(calc(1rem - var(--lateral)), calc(50% - min(50%, 560px) - 4rem)); width: min(17rem, 24vw); display: flex; flex-direction: column; gap: 1rem; }
.palco-previa { position: absolute; z-index: 2; bottom: 12%; right: max(calc(1rem - var(--lateral)), calc(50% - min(50%, 560px) - 1.5rem)); width: min(19rem, 26vw); } /* pela base: cobre por inteiro o celular e o "Público agora" da tela de fundo */
.palco-legenda { margin-top: 1.25rem; text-align: center; font-size: .82rem; color: var(--tinta-3); }
.destaque-colunas { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 5.5rem); }
.destaque-colunas h3 { font-size: 1.3rem; font-weight: 750; line-height: 1.25; letter-spacing: -.01em; }
.destaque-colunas p { margin-top: .7rem; color: var(--tinta-2); }
.destaque-colunas .lista-ok { margin-top: 1.4rem; }

/* para quem */
/* linhas por borda, não por fundo no vão de 1px: com colunas fracionadas o fundo vazava nas quinas */
.segmentos { margin-top: clamp(2.5rem, 4vw, 3.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmento { padding: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--linha); }
.segmento:nth-child(-n+2) { border-top: 0; }
.segmento:nth-child(even) { border-left: 1px solid var(--linha); }
.segmento .ic { width: 1.75rem; height: 1.75rem; color: var(--tinta); }
.segmento h3 { margin-top: 1rem; font-size: 1.25rem; font-weight: 750; }
.segmento p { margin-top: .5rem; color: var(--tinta-2); }

/* perguntas */
.faq-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq-grade .lead a { color: var(--laranja-escuro); font-weight: 650; text-underline-offset: 3px; }
.faq { border-top: 1px solid var(--linha-forte); }
.faq details { border-bottom: 1px solid var(--linha-forte); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.12rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--tinta-3); transition: transform .35s var(--solta), color .2s; }
.faq summary:hover .ic { color: var(--laranja); }
.faq details[open] summary .ic { transform: rotate(45deg); color: var(--laranja); }
.faq details p { padding: 0 2.5rem 1.4rem 0; color: var(--tinta-2); }

/* demonstração */
.sec-escura.demo-sec .f-sol { --t: clamp(18rem, 30vw, 30rem); left: -10rem; right: auto; bottom: -10rem; top: auto; }
.sec-escura.demo-sec .f-anel { --t: clamp(6rem, 10vw, 9rem); left: 32%; top: 12%; right: auto; bottom: auto; }
.demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.demo .titulo { color: #fff; }
.promessas { display: grid; gap: .9rem; margin-top: 2rem; }
.promessas li { display: flex; gap: .7rem; align-items: center; color: var(--sobre-escuro-2); }
.promessas .ic { color: var(--laranja-vivo); }
.demo-wa { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--linha-escura); color: var(--sobre-escuro-2); }
.demo-wa a { color: #fff; font-weight: 700; text-underline-offset: 3px; text-decoration-color: var(--laranja-vivo); }
.form { background: #fff; color: var(--tinta); border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; align-items: start; }
.campo { display: grid; gap: .4rem; }
.campo-cheio { grid-column: 1 / -1; }
.campo label { font-size: .9rem; font-weight: 650; }
.campo label small { font-weight: 500; color: var(--tinta-3); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; border-radius: var(--raio-p); border: 1.5px solid var(--linha-forte); background: #fff; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.campo textarea { min-height: 6rem; resize: vertical; }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371665C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem; padding-right: 2.5rem; }
.campo ::placeholder { color: var(--tinta-3); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #C4B19C; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 4px rgba(255, 122, 26, .22); }
.campo.erro input, .campo.erro select, .campo.erro input:focus, .campo.erro select:focus { border-color: #C2253D; }
.campo.erro input:focus, .campo.erro select:focus { box-shadow: 0 0 0 4px rgba(194, 37, 61, .16); }
.campo .msg { font-size: .84rem; color: #B01F35; min-height: 0; }
.consentimento { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin-top: 1.25rem; font-size: .88rem; color: var(--tinta-2); }
.consentimento input { width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; accent-color: var(--laranja); }
.consentimento a { color: var(--tinta); text-underline-offset: 3px; }
.consentimento.erro { color: #B01F35; }
.form .bt { width: 100%; margin-top: 1.4rem; min-height: 3.4rem; font-size: 1.05rem; }
.form-status { margin-top: 1rem; font-size: .92rem; }
.form-status.erro { color: #B01F35; }
.form-status a { color: var(--tinta); font-weight: 700; text-underline-offset: 3px; }
.form-ok { text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 1rem; }
.form-ok .ic { width: 3rem; height: 3rem; margin: 0 auto; color: var(--verde-texto); }
.form-ok h3 { margin-top: 1rem; font-size: 1.5rem; font-weight: 780; }
.form-ok p { margin-top: .6rem; color: var(--tinta-2); }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* rodapé */
.rodape { background: var(--grafite-950); color: var(--sobre-escuro-2); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: .95rem; }
.rodape-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.rodape img { height: 32px; width: auto; }
.rodape p { margin-top: 1rem; max-width: 22rem; }
.rodape h2 { font-size: .85rem; letter-spacing: .02em; color: #fff; font-weight: 700; }
.rodape ul { display: grid; gap: .55rem; margin-top: 1rem; }
.rodape a { color: var(--sobre-escuro-2); text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--laranja-vivo); text-underline-offset: 3px; }
.rodape-base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linha-escura); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--sobre-escuro-3); }

/* atalho de WhatsApp */
.wa { position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 90; display: flex; align-items: center; gap: .55rem; padding: .85rem 1.15rem; border-radius: 999px; background: var(--laranja); color: #fff; font-weight: 750; text-decoration: none; box-shadow: 0 16px 30px -14px rgba(60, 32, 10, .6); transition: transform .3s var(--solta), box-shadow .3s, background-color .2s, opacity .25s, visibility .25s; }
/* some enquanto a abertura (balões) e o formulário (que já tem o próprio link) estão na tela */
.wa.recolhido { opacity: 0; visibility: hidden; transform: translateY(.75rem); pointer-events: none; }
.wa:hover { background: var(--laranja-escuro); transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(60, 32, 10, .65); }
.wa .ic { width: 1.35rem; height: 1.35rem; }

/* página de texto (privacidade) */
.texto-legal { max-width: 46rem; }
.texto-legal h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.08; font-weight: 800; letter-spacing: -.026em; }
.texto-legal .data { margin-top: .75rem; color: var(--tinta-3); }
.texto-legal h2 { margin-top: 3rem; font-size: 1.45rem; font-weight: 760; letter-spacing: -.01em; }
.texto-legal p, .texto-legal li { color: var(--tinta-2); }
.texto-legal p { margin-top: 1rem; }
.texto-legal ul { margin-top: 1rem; padding-left: 1.2rem; display: grid; gap: .6rem; }
.texto-legal li::marker { color: var(--laranja); }
.texto-legal strong { color: var(--tinta); }
.texto-legal a { color: var(--tinta); text-underline-offset: 3px; text-decoration-color: var(--laranja); }
.voltar { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 2rem; color: var(--tinta-2); font-weight: 650; text-decoration: none; }
.voltar .ic { transform: rotate(180deg); }
.voltar:hover { color: var(--tinta); }

/* ---------------------------------------------------------------- movimento ligado à rolagem
   Só onde o navegador sabe animar pela rolagem e a pessoa não pediu menos movimento. Sem isso, tudo aparece pronto e parado:
   nada depende da animação para ser visto. As telas e recortes "chegam" como mensagem enviada; as formas derivam devagar. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .forma { animation: deriva linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .f-sol { --y: -90px; --r: 0deg; }
    .f-anel { --y: -160px; --r: 50deg; }
    .f-balao { --y: -120px; --r: -10deg; }
    .f-ponto { --y: -220px; }
    .f-meia { --y: -60px; }
    .abertura .forma { animation-timeline: scroll(root); animation-range: 0 100vh; }

    .recurso .tela, .palco-tela { animation: chega linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
    .palco-pilha .palco-cartao { animation: chega-esq linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .palco-pilha .palco-cartao + .palco-cartao { animation-range: entry 25% cover 48%; }
    .palco-previa { animation: chega-dir linear both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
    .cartao-flutua { animation: chega-esq linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
    .passo-tela img { animation: chega linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .passo:nth-child(2) .passo-tela img { animation-range: entry 10% cover 38%; }
    .passo:nth-child(3) .passo-tela img { animation-range: entry 20% cover 46%; }

    .trilho-aviao { left: 0; animation: percorre linear both; animation-timeline: --passos; animation-range: entry 70% cover 60%; }
    .passos-area { view-timeline: --passos block; }
  }
}
@keyframes deriva { to { transform: translate3d(0, var(--y, -80px), 0) rotate(var(--r, 0deg)); } }
@keyframes chega { from { opacity: .25; transform: translateY(56px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes chega-esq { from { opacity: 0; transform: translate(-70px, 30px) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes chega-dir { from { opacity: 0; transform: translate(70px, 30px) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes percorre { from { transform: translateX(2rem); } to { transform: translateX(calc(100cqw - 4.3rem)); } }

/* ---------------------------------------------------------------- responsivo */
@media (max-width: 960px) {
  .dores, .passos { grid-template-columns: 1fr; }
  .trilho { top: 1.5rem; bottom: 1.5rem; left: 1.5rem; right: auto; width: 0; height: auto; border-top: 0; border-left: 2px dashed rgba(255, 122, 26, .6); }
  .trilho-aviao { display: none; }
  .passo { padding-left: 4.5rem; min-height: 3rem; }
  .passo-n { position: absolute; left: 0; top: 0; }
  .passo h3 { margin-top: .55rem; }
  .passo-tela { height: auto; max-height: 15rem; justify-content: flex-start; padding-top: 1.25rem; }
  .passo-tela img { max-height: 13.5rem; }
  .recurso, .recurso-inv, .faq-grade, .demo { grid-template-columns: 1fr; }
  .recurso-inv .recurso-texto { order: 0; }
  .extras, .segmentos { grid-template-columns: 1fr; }
  .destaque-colunas { grid-template-columns: 1fr; }
  .segmento:nth-child(even) { border-left: 0; }
  .segmento:nth-child(2) { border-top: 1px solid var(--linha); }
  .rodape-in { grid-template-columns: 1fr 1fr; }
  .rodape-in > :first-child { grid-column: 1 / -1; }
  .com-cartao .cartao-flutua { right: .75rem; }
  /* empilhado, o texto vem antes da tela: as formas descem para trás da tela e saem de cima do texto */
  .sec-escura .formas .f-sol { top: auto; bottom: 5rem; right: -15rem; }
  .sec-escura .formas .f-anel { right: -2.5rem; left: auto; top: 1.5rem; bottom: auto; }
  .sec-escura.demo-sec .f-sol { left: -12rem; bottom: -12rem; }
}
@media (max-width: 900px) {
  /* no celular a tela inteira vira miniatura: ficam só os recortes, que se leem */
  .palco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
  .palco-tela { display: none; }
  .destaque .f-balao { display: none; }
  .palco-pilha, .palco-previa { position: static; width: auto; }
}
@media (max-width: 560px) {
  .campos { grid-template-columns: 1fr; }
  .palco { grid-template-columns: 1fr; gap: 1.25rem; }
  .palco-pilha { width: min(100%, 20rem); justify-self: center; }
  .palco-previa { width: min(100%, 17rem); justify-self: center; }
  /* no celular a tela inteira vira miniatura ilegível: recorte 4:5 na região de que o texto fala */
  .tela img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 35% 0; }
  .tela.foco-direita img { object-position: 85% 0; }
  .com-cartao-area { padding-bottom: 0; }
  .com-cartao .cartao-flutua { position: relative; right: auto; bottom: auto; width: min(92%, 19rem); margin: -1.5rem 0 0 auto; }
  .tela.tela-inteira img { aspect-ratio: auto; object-fit: fill; }
  .abertura-acoes .bt { width: 100%; }
  .wa span { display: none; }
  .rodape-in { grid-template-columns: 1fr; }
  .rodape a { white-space: nowrap; }
  .wa { padding: .95rem; }
  .faq details p { padding-right: 0; }
  .abertura .f-sol { right: -12rem; top: 2rem; }
  .abertura .f-anel { display: none; }
  .sec-escura .formas .f-sol { right: -16rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}