/* Página inicial · fontes, tokens de cor (escuro = padrão, claro = [data-theme="light"]) e base.
   Layout e espaçamento ficam nas classes Tailwind do HTML. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url("../fonts/schibsted-grotesk-var-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2")}
:root{
  --bg:#0B111D;--sf:#131B2B;--sf2:#1A2336;--bd:#25304A;--hl:#34415F;--tx:#EEF2F8;--mu:#96A1B5;--ft:#7F8AA0;
  --ac-tx:#8A9FFF;--onchip:#C3CEFF;--hdr:rgba(11,17,29,.85);--chat:#0F1624;--wa-in:#1A2336;--wa-out:#1D4A37;
  --wa-out-tx:#EAF7F0;--wa-out-mu:#9CC9B3;--hum:#2B3242;--hum-tx:#C5CCD8;--warn:#F2CF6B;
  --sh3:0 2px 3px rgba(0,0,0,.13),0 10px 20px -6px rgba(0,0,0,.2),0 34px 64px -18px rgba(0,0,0,.45);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F3F5F8;--sf:#FFFFFF;--sf2:#EEF1F5;--bd:#DCE1E9;--hl:#C9D1DD;--tx:#0D1524;--mu:#5A6577;--ft:#5F6A7C;
  --ac-tx:#1F3BC4;--onchip:#1F3BC4;--hdr:rgba(243,245,248,.85);--chat:#EFEAE2;--wa-in:#FFFFFF;--wa-out:#D9F5D0;
  --wa-out-tx:#1C2428;--wa-out-mu:#476456;--hum:#E6E9EF;--hum-tx:#3A4458;--warn:#8A5A10;
  --sh3:0 2px 3px rgba(13,21,36,.05),0 10px 20px -6px rgba(13,21,36,.08),0 34px 64px -18px rgba(13,21,36,.16);
  color-scheme:light;
}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--tx);font-family:"Schibsted Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
/* :where() mantém especificidade zero, para as classes Tailwind sempre vencerem */
:where(a){color:var(--tx);text-decoration:none}
:where(a:hover){color:var(--ac-tx)}
::selection{background:#2747E8;color:#FFFFFF}
@keyframes avBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes avLive{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes avFill{from{width:0}to{width:100%}}
@keyframes avMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Manchete que se reescreve (trazida do iEntrega, 03/10/2026) ----------
   Escondido dos olhos, não do leitor de tela: display:none tiraria o texto da árvore de acessibilidade. */
.apenas-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* A linha que gira é um bloco próprio. A altura é reservada pela .gira__medida (a frase mais larga),
   então trocar de frase não empurra o subtítulo. Sem white-space:nowrap: a frase quebra livre. */
.gira{position:relative;display:block;color:#2747E8;text-wrap:wrap}
:root:not([data-theme="light"]) .gira{color:#8A9FFF}
.gira__medida{visibility:hidden;padding-right:.13em}
.gira__vivo{position:absolute;left:0;top:0;right:0}
.gira__cursor{display:none;width:.055em;height:.74em;margin-left:.07em;background:currentColor;border-radius:1px;vertical-align:-.02em}
.gira.is-vivo .gira__cursor{display:inline-block}
/* Pisca só parado: piscar enquanto digita entrega o efeito como enfeite. */
.gira.is-parado .gira__cursor{animation:gira-pisca 1.06s steps(1,end) infinite}
@keyframes gira-pisca{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ---------- Fundo que se move ----------
   .hero__malha: malha WebGL (js/malha.js), só no computador; nasce transparente e acende no 1º quadro.
   A máscara a tira de trás do texto (coluna da esquerda): fundo animado não pode variar o contraste da manchete. */
.hero__malha{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .6s ease;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 14%,rgba(0,0,0,.20) 42%,#000 68%);mask-image:linear-gradient(90deg,transparent 14%,rgba(0,0,0,.20) 42%,#000 68%)}
.hero__malha.is-pronta{opacity:1}
.hero.tem-malha .hero__glow{opacity:.45;transition:opacity .6s ease}
/* Sem malha (celular, tablet, sem WebGL) o brilho verde "respira": transform e opacidade só, barato para a bateria. */
.hero:not(.tem-malha) .hero__glow{animation:hero-respira 14s ease-in-out infinite alternate}
@keyframes hero-respira{
  0%{transform:translate(-50%,0) scale(1);opacity:.85}
  50%{transform:translate(-38%,6%) scale(1.12);opacity:1}
  100%{transform:translate(-60%,-4%) scale(.96);opacity:.8}
}
@media (prefers-reduced-motion:reduce){
  .gira .gira__cursor{display:none!important}
  .hero__malha{display:none}
  .hero .hero__glow{animation:none!important}
}

/* ---------- Marca-texto na linha que gira (como no iEntrega) ----------
   A faixa fica no texto VIVO, não na linha: cresce junto com a digitação, como caneta passando.
   Cortes em 15% e 86% deixam ar em cima e embaixo — é o que separa marca-texto de fundo colorido. */
:root{--marca:rgba(39,71,232,.24)}
:root[data-theme="light"]{--marca:rgba(39,71,232,.16)}
.gira__txt{background:linear-gradient(180deg,transparent 15%,var(--marca) 15%,var(--marca) 86%,transparent 86%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .07em;border-radius:.06em}
.gira__medida{padding-right:.27em}

/* ---------- Rodapé (desenho do iEntrega) ---------- */
.site-footer{position:relative;overflow:hidden;border-top:1px solid var(--bd);background:var(--bg)}
.site-footer::before{content:"";position:absolute;left:50%;bottom:-300px;width:min(1300px,150%);height:700px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(39,71,232,.22),transparent);pointer-events:none;z-index:0}
:root[data-theme="light"] .site-footer::before{background:radial-gradient(closest-side,rgba(39,71,232,.14),transparent)}
.site-footer>*{position:relative;z-index:1}
.rodape-wrap{max-width:1369px;margin:0 auto;padding-left:clamp(20px,4vw,52px);padding-right:clamp(20px,4vw,52px)}
.rodape-olho,.rodape-cab{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.rodape-olho{font-size:11.5px;color:var(--ac-tx)}
.rodape-faixa{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;padding-top:56px;padding-bottom:56px;border-bottom:1px solid var(--bd)}
.rodape-faixa h3{margin:14px 0 0;font-size:clamp(21px,2.2vw,26px);line-height:1.15;letter-spacing:-.02em;font-weight:600;color:var(--tx)}
.rodape-faixa p{margin:10px 0 0;max-width:52ch;font-size:14.5px;line-height:1.55;color:var(--mu)}
.rodape-faixa__acoes{display:flex;gap:10px;flex-wrap:wrap}
.rodape-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 22px;border-radius:10px 10px 0 10px;font-size:15px;font-weight:600;
  background:#2747E8;color:#FFFFFF;box-shadow:0 12px 30px -12px rgba(39,71,232,.9);text-decoration:none}
.rodape-btn:hover{filter:brightness(1.08);color:#FFFFFF}
.rodape-btn--sec{background:var(--sf);color:var(--tx);border:1px solid var(--bd);box-shadow:none}
.rodape-btn--sec:hover{color:var(--tx);border-color:var(--hl);filter:none}
.rodape-grade{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:36px;padding-top:56px;padding-bottom:36px}
.rodape-marca{display:inline-flex;align-items:center;gap:9px;color:var(--tx);text-decoration:none;font-size:17px;font-weight:700;letter-spacing:-.03em}
.rodape-tagline{margin:14px 0 0;max-width:28ch;font-size:13.5px;line-height:1.55;color:var(--mu)}
.rodape-col{display:flex;flex-direction:column;gap:10px}
.rodape-col a,.rodape-col span{font-size:13.5px;color:var(--mu);text-decoration:none}
.rodape-col a:hover{color:var(--ac-tx)}
.rodape-garantias{display:flex;align-items:center;justify-content:space-between;gap:16px 26px;flex-wrap:wrap;padding-bottom:26px}
.rodape-garantias__itens{display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap}
.rodape-garantia{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--mu)}
.rodape-mail{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--mu);text-decoration:none}
.rodape-mail:hover{color:var(--ac-tx)}
.rodape-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:18px;padding-bottom:40px;border-top:1px solid var(--bd);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--mu)}
.rodape-legal{display:flex;gap:8px 20px;flex-wrap:wrap}
.rodape-legal a,.rodape-legal button{color:var(--mu);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.rodape-legal a:hover,.rodape-legal button:hover{color:var(--ac-tx)}
@media (max-width:1000px){
  .rodape-grade{grid-template-columns:1fr 1fr;gap:30px}
  .rodape-grade>div:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  .rodape-faixa{padding-top:40px;padding-bottom:40px}
  .rodape-faixa__acoes{width:100%}
  .rodape-btn{flex:1 1 auto}
  .rodape-grade{padding-top:40px;padding-bottom:26px}
  .rodape-base{padding-bottom:32px}
}

/* ---------- Conteúdo que sobe ao entrar na tela (js/main.js marca os blocos) ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
/* O topo já está na tela ao abrir: entra uma vez ao carregar, texto primeiro, conversa depois. */
@media (prefers-reduced-motion:no-preference){
  #topo > .relative > div:first-child > *{animation:entra .8s cubic-bezier(.2,.7,.2,1) both}
  #topo > .relative > div:first-child > :nth-child(2){animation-delay:.06s}
  #topo > .relative > div:first-child > :nth-child(3){animation-delay:.12s}
  #topo > .relative > div:first-child > :nth-child(4){animation-delay:.18s}
  #topo > .relative > div:first-child > :nth-child(n+5){animation-delay:.24s}
  #topo > .relative > div:last-child{animation:entra .9s cubic-bezier(.2,.7,.2,1) .2s both}
}
@keyframes entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Abas do "Por dentro do painel" ---------- */
.shot-aba{border:0;background:transparent;color:var(--mu);font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer}
.shot-aba:hover{color:var(--tx)}
.shot-aba[aria-selected="true"]{background:#2747E8;color:#FFFFFF}

/* ---------- Barra fixa do rodapé (como no iEntrega) ----------
   Aparece quando o topo sai da tela e some no fechamento e no rodapé. Fina de propósito: acompanha a página
   inteira, então cada pixel de altura cobre conteúdo. No computador: selo, frase e botão agrupados à direita;
   no celular vira só o botão, largura toda. */
.ctabar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:6px clamp(16px,4vw,52px) calc(6px + env(safe-area-inset-bottom));
  background:var(--hdr);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-top:1px solid var(--bd);transform:translateY(100%);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.ctabar[hidden]{display:none}
.ctabar.is-in{transform:none}
.ctabar__in{max-width:1369px;min-height:38px;margin:0 auto;display:flex;align-items:center;justify-content:flex-end;gap:16px}
.ctabar__novo{flex:none;display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;
  background:rgba(39,71,232,.13);color:var(--ac-tx);font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ctabar__pisca{width:6px;height:6px;border-radius:50%;background:currentColor;animation:ctabar-pulso 2.4s ease-out infinite}
@keyframes ctabar-pulso{0%{box-shadow:0 0 0 0 rgba(39,71,232,.55)}70%{box-shadow:0 0 0 6px rgba(39,71,232,0)}100%{box-shadow:0 0 0 0 rgba(39,71,232,0)}}
.ctabar__t{font-size:13.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ctabar__t b{color:var(--tx);font-weight:600}
.ctabar__ca{display:inline-block;height:15px;width:auto;vertical-align:-2.5px;margin-left:2px}
.ctabar__btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:10px 10px 0 10px;background:#2747E8;color:#FFFFFF;
  font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;box-shadow:0 10px 26px -12px rgba(39,71,232,.9)}
.ctabar__btn:hover{color:#FFFFFF;filter:brightness(1.06)}
@media (max-width:899px){
  .ctabar{padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
  .ctabar__novo,.ctabar__t{display:none}
  .ctabar__in{justify-content:stretch}
  .ctabar__btn{flex:1;min-height:46px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.ctabar{transition:none}.ctabar__pisca{animation:none}}

/* ---------- Print em tela cheia ---------- */
.ampliado{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,12,14,.92)}
.ampliado::backdrop{background:rgba(10,12,14,.6)}
.ampliado__rolo{width:100%;height:100%;overflow:auto;display:flex;align-items:center;-webkit-overflow-scrolling:touch}
.ampliado__rolo img{display:block;margin:auto;max-width:none;width:min(1600px,max(100vw,1100px));height:auto}
.ampliado__fechar{position:fixed;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:#FFFFFF;color:#0D1524;
  font-size:26px;line-height:1;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35)}

/* ---------- "digitando…" no cartão de Funcionalidades ---------- */
.digitando{display:inline-flex;gap:4px;align-items:center;padding:10px 12px!important}
.digitando i{width:6px;height:6px;border-radius:50%;background:var(--wa-out-mu);animation:digita 1.2s infinite ease-in-out}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes digita{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.digitando i{animation:none}}

/* ---------- Quadros com cara de WhatsApp (topo e etapas) ---------- */
.wa-papel{background-color:var(--chat);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.042' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18h16a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4h-9l-5 4v-4h-2a4 4 0 0 1-4-4v-8a4 4 0 0 1 4-4z'/%3E%3Ccircle cx='86' cy='22' r='7'/%3E%3Cpath d='M83 22h6M86 19v6'/%3E%3Cpath d='M58 58l6 6 10-12'/%3E%3Crect x='14' y='76' width='18' height='14' rx='3'/%3E%3Cpath d='M18 76v-3a5 5 0 0 1 10 0v3'/%3E%3Cpath d='M84 80c4-8 14-8 18 0-4 8-14 8-18 0z'/%3E%3Ccircle cx='93' cy='80' r='2'/%3E%3Cpath d='M44 104h14M51 97v14'/%3E%3Cpath d='M100 104l6 6M106 104l-6 6'/%3E%3C/g%3E%3C/svg%3E")}
[data-theme=dark] .wa-papel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18h16a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4h-9l-5 4v-4h-2a4 4 0 0 1-4-4v-8a4 4 0 0 1 4-4z'/%3E%3Ccircle cx='86' cy='22' r='7'/%3E%3Cpath d='M83 22h6M86 19v6'/%3E%3Cpath d='M58 58l6 6 10-12'/%3E%3Crect x='14' y='76' width='18' height='14' rx='3'/%3E%3Cpath d='M18 76v-3a5 5 0 0 1 10 0v3'/%3E%3Cpath d='M84 80c4-8 14-8 18 0-4 8-14 8-18 0z'/%3E%3Ccircle cx='93' cy='80' r='2'/%3E%3Cpath d='M44 104h14M51 97v14'/%3E%3Cpath d='M100 104l6 6M106 104l-6 6'/%3E%3C/g%3E%3C/svg%3E")}
/* "biquinho" do balão: só no primeiro balão de cada lado, como no WhatsApp */
.wa-c-in,.wa-c-out,.wa-c-hum{position:relative}
.wa-c-in{border-top-left-radius:0!important}.wa-c-out,.wa-c-hum{border-top-right-radius:0!important}
.wa-c-in::before,.wa-c-out::before,.wa-c-hum::before{content:"";position:absolute;top:0;width:8px;height:13px}
.wa-c-in::before{left:-8px;background:var(--wa-in);clip-path:polygon(0 0,100% 0,100% 100%)}
.wa-c-out::before{right:-8px;background:var(--wa-out);clip-path:polygon(0 0,100% 0,0 100%)}
.wa-c-hum::before{right:-8px;background:var(--hum);clip-path:polygon(0 0,100% 0,0 100%)}