/* =========================================================
   PET VETER, HOME NOVA
   Direção em estudo-direcao/direcao-home-v2.md, aprovada em 17/09/2026.
   O que se repetiu nas 5 referências (FunilMaker, Dark Planner,
   BotConversa, Autentique e Pluggy): uma sans geométrica só, uma cor
   de destaque só, fundo claro com tinta leve, hero centralizado com
   selo em pílula, tela do produto embaixo do hero, cartão de borda
   fina com sombra quase nula e uma faixa escura perto do fim.
   Fontes escolhidas por você em 17/09/2026, DynaPuff nos títulos e
   Google Sans Flex no texto.
   Paleta ameixa, escolhida por você. O azul da marca saiu.
   Laranja #F97205 entrou em 17/09/2026, tirado dos posts do Instagram
   @planopetveter. Ele nunca é texto em cima de branco, porque não passa
   no contraste. Aparece em selo, sublinhado, estrela, ícone e na faixa escura.
   ========================================================= */

/* As duas fontes ficam dentro do site, em assets/fontes.
   Assim elas aparecem mesmo sem internet e sem depender do Google. */
@font-face{font-family:"DynaPuff";src:url("fontes/dynapuff-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Google Sans Flex";src:url("fontes/googlesansflex-latin.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --font:"Google Sans Flex",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-titulo:"DynaPuff","Google Sans Flex",system-ui,sans-serif; /* escolhida por você em 17/09/2026 */
  --accent:#7A1F7A;     /* ameixa, a cor de destaque */
  --accent-h:#651865;   /* hover do botão */
  --ink:#1C1020;        /* texto */
  --muted:#5E5263;      /* texto de apoio */
  --bg:#FFFFFF;
  --bg-2:#F7F3F8;       /* fundo das seções claras alternadas */
  --tint:#F1E6F1;       /* fundo de selo e ícone */
  --line:#ECE4EE;
  --dark:#22091F;       /* a faixa escura */
  --laranja:#F97205;    /* o laranja dos posts do Instagram deles, só em detalhe */
  --laranja-tint:#FFF1E6;
  --laranja-texto:#9A4300; /* laranja escuro, pra texto em cima do tint */
  --padrao-patas:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22 viewBox=%220 0 240 240%22%3E%3Cg fill=%22none%22 stroke=%22%239A5E9A%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(18 16) rotate(-18) scale(1.25)%22%3E%3Ccircle cx=%227%22 cy=%228.5%22 r=%222.2%22/%3E%3Ccircle cx=%2212%22 cy=%226.4%22 r=%222.3%22/%3E%3Ccircle cx=%2217%22 cy=%228.5%22 r=%222.2%22/%3E%3Ccircle cx=%2220.2%22 cy=%2213.4%22 r=%221.9%22/%3E%3Cpath d=%22M12 12.4c2.9 0 5.3 2 5.3 4.4 0 1.9-1.7 3-3.6 2.6-1-.2-2.3-.2-3.3 0-1.9.4-3.7-.7-3.7-2.6 0-2.4 2.4-4.4 5.3-4.4z%22/%3E%3C/g%3E%3Cpath transform=%22translate(128 22) rotate(12) scale(1.05)%22 d=%22M12 20s-7.5-4.6-7.5-10A4 4 0 0 1 12 7.6 4 4 0 0 1 19.5 10C19.5 15.4 12 20 12 20z%22/%3E%3Cpath transform=%22translate(64 82) rotate(-30) scale(1.15)%22 d=%22M6.5 9.5a2.5 2.5 0 1 1 1.8-4.3 2.5 2.5 0 1 1 4.3 1.8l4.2 4.2a2.5 2.5 0 1 1 4.3 1.8 2.5 2.5 0 1 1-1.8 4.3 2.5 2.5 0 1 1-4.3-1.8L10.8 11.3a2.5 2.5 0 0 1-4.3-1.8z%22/%3E%3Cg transform=%22translate(150 118) rotate(24) scale(1.05)%22%3E%3Ccircle cx=%227%22 cy=%228.5%22 r=%222.2%22/%3E%3Ccircle cx=%2212%22 cy=%226.4%22 r=%222.3%22/%3E%3Ccircle cx=%2217%22 cy=%228.5%22 r=%222.2%22/%3E%3Ccircle cx=%2220.2%22 cy=%2213.4%22 r=%221.9%22/%3E%3Cpath d=%22M12 12.4c2.9 0 5.3 2 5.3 4.4 0 1.9-1.7 3-3.6 2.6-1-.2-2.3-.2-3.3 0-1.9.4-3.7-.7-3.7-2.6 0-2.4 2.4-4.4 5.3-4.4z%22/%3E%3C/g%3E%3Cpath transform=%22translate(26 146) rotate(-10) scale(0.95)%22 d=%22M12 20s-7.5-4.6-7.5-10A4 4 0 0 1 12 7.6 4 4 0 0 1 19.5 10C19.5 15.4 12 20 12 20z%22/%3E%3Cpath transform=%22translate(104 150)%22 d=%22M6 0v12M0 6h12%22/%3E%3Cpath transform=%22translate(178 64)%22 d=%22M6 0v12M0 6h12%22/%3E%3Cpath transform=%22translate(196 178) rotate(40) scale(0.95)%22 d=%22M6.5 9.5a2.5 2.5 0 1 1 1.8-4.3 2.5 2.5 0 1 1 4.3 1.8l4.2 4.2a2.5 2.5 0 1 1 4.3 1.8 2.5 2.5 0 1 1-1.8 4.3 2.5 2.5 0 1 1-4.3-1.8L10.8 11.3a2.5 2.5 0 0 1-4.3-1.8z%22/%3E%3Cg transform=%22translate(92 200) rotate(-6) scale(1.1)%22%3E%3Ccircle cx=%227%22 cy=%228.5%22 r=%222.2%22/%3E%3Ccircle cx=%2212%22 cy=%226.4%22 r=%222.3%22/%3E%3Ccircle cx=%2217%22 cy=%228.5%22 r=%222.2%22/%3E%3Ccircle cx=%2220.2%22 cy=%2213.4%22 r=%221.9%22/%3E%3Cpath d=%22M12 12.4c2.9 0 5.3 2 5.3 4.4 0 1.9-1.7 3-3.6 2.6-1-.2-2.3-.2-3.3 0-1.9.4-3.7-.7-3.7-2.6 0-2.4 2.4-4.4 5.3-4.4z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --topo-h:76px;         /* altura do menu, a primeira seção passa por baixo dele */
  --wrap:1200px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
/* DynaPuff é arredondada e larga, então pede entrelinha maior,
   espaçamento zero e tamanho menor que uma sans comum */
/* a DynaPuff fica só nos títulos grandes, h1 e h2.
   Em texto pequeno ela cansa, então h3, rótulo, preço e número usam a Google Sans Flex */
h1,h2{font-family:var(--font-titulo);font-weight:600;letter-spacing:0;line-height:1.24;text-wrap:balance}
h3{font-weight:700;letter-spacing:-.015em;line-height:1.3;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.8vw,3.7rem);line-height:1.18}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.1rem}
p{text-wrap:pretty}
.acc{color:var(--accent)}
section{padding:112px 0}
.alt{background:var(--bg-2)}

/* === RÓTULO E CABEÇA DE SEÇÃO === */
.rotulo{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.cabeca{max-width:44rem;margin:0 auto 56px;text-align:center}
.cabeca h2{margin:.8rem 0 1rem}
.cabeca p{color:var(--muted);font-size:1.08rem}

/* === BOTÕES === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:52px;padding:0 1.6rem;
  border-radius:999px;font-weight:600;font-size:.97rem;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-acc{background:var(--accent);color:#fff}
.btn-acc:hover{background:var(--accent-h)}
.btn-linha{border-color:var(--line);background:#fff;color:var(--ink)}
.btn-linha:hover{border-color:var(--accent);color:var(--accent)}
.btn-branco{background:#fff;color:var(--ink)}
.btn-branco:hover{background:var(--tint)}
.btn-vazado{border-color:rgba(255,255,255,.3);color:#fff}
.btn-vazado:hover{border-color:#fff}
.btn-sm{height:42px;padding:0 1.15rem;font-size:.9rem}
.btn .seta{transition:transform .25s var(--ease)}
.btn:hover .seta{transform:translateX(3px)}

/* === MENU === */
.topo{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease}
.topo.rolou{border-bottom-color:var(--line)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:1.5rem}
.marca{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.12rem;letter-spacing:-.02em;flex:none}
.marca img{width:40px;height:40px}
.links{display:flex;gap:2rem;font-size:.93rem;font-weight:500;color:var(--muted)}
.links a{transition:color .2s ease}
.links a:hover{color:var(--ink)}
.topo-dir{display:flex;align-items:center;gap:1.1rem}
.cliente{font-size:.9rem;font-weight:500;color:var(--muted)}
.cliente:hover{color:var(--ink)}

/* === HERO === */
.hero{position:relative;padding:88px 0 0;overflow:hidden;text-align:center}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(900px 520px at 50% -10%,var(--tint),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(700px 420px at 50% 20%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(700px 420px at 50% 20%,#000,transparent 75%)}
.selo{display:inline-flex;align-items:center;gap:.55rem;height:36px;padding:0 1rem;border-radius:999px;background:#fff;
  border:1px solid var(--line);font-size:.86rem;font-weight:600;color:var(--ink);margin-bottom:1.8rem}
.selo i{width:7px;height:7px;border-radius:50%;background:var(--laranja)}
.hero h1{max-width:23ch;margin:0 auto}
.hero .sub{max-width:40rem;margin:1.5rem auto 0;font-size:1.14rem;color:var(--muted)}
.hero-acoes{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.checks{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem;list-style:none;
  font-size:.9rem;color:var(--muted);font-weight:500}
.checks li{display:flex;align-items:center;gap:.45rem}
.checks svg{width:16px;height:16px;color:var(--accent);flex:none}

/* === TÍTULO COM PATINHAS E PALAVRA QUE GIRA ===
   Comportamento copiado de dois componentes do 21st.dev, o Sparkles Text
   e o Text Rotate, refeitos em CSS porque aqui é HTML puro.
   No sparkles as estrelinhas piscam em posição sorteada, aqui são patinhas.
   No text rotate a última palavra troca dentro de uma caixa colorida. */
.patas{position:relative}
/* discretas de propósito. Cada uma tem o seu tempo e o seu atraso,
   então aparece uma aqui e outra ali, nunca todas juntas. */
.pata{position:absolute;width:var(--t,26px);height:var(--t,26px);opacity:0;pointer-events:none;
  animation:pata var(--d,9s) ease-in-out infinite;will-change:transform,opacity}
.pata svg{width:100%;height:100%;display:block}
@keyframes pata{
  0%,72%,100%{opacity:0;transform:scale(.72) rotate(var(--r,0deg))}
  82%{opacity:.5;transform:scale(1) rotate(var(--r,0deg))}
  92%{opacity:.5;transform:scale(1) rotate(var(--r,0deg))}
}
/* === QUADRO DO APP, montado em HTML ===
   Refeito em 17/09/2026 no formato que você mandou. Carteirinha de um lado,
   coberturas do outro, pouco texto e cor no que importa. */
/* respiro de 80px a mais entre os checks e o quadro, pedido seu em 17/09/2026 */
.app{position:relative;max-width:1060px;margin:136px auto 0;padding:16px;border-radius:28px 28px 0 0;
  background:linear-gradient(180deg,#fff,var(--bg-2));border:1px solid var(--line);border-bottom:0;text-align:left}
.app-barra{display:flex;align-items:center;gap:.4rem;padding:4px 8px 14px}
.app-barra i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.app-barra span{margin-left:auto;font-size:.76rem;font-weight:500;color:var(--muted)}
.app-grade{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px}

/* carteirinha */
.carteira{position:relative;background:var(--accent);color:#fff;border-radius:22px;padding:22px;
  display:flex;flex-direction:column;overflow:hidden}
.carteira>*{position:relative}
.cart-topo{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:20px}
.cart-pill{display:inline-flex;align-items:center;gap:.4rem;height:30px;padding:0 .8rem;border-radius:999px;
  background:rgba(255,255,255,.16);font-size:.78rem;font-weight:600}
.cart-pill svg{width:15px;height:15px}
.cart-marca{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:1rem}
.cart-marca svg{width:18px;height:18px}
.cart-pet{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.cart-foto{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.2);border:3px solid rgba(255,255,255,.42);
  display:grid;place-items:center;font-size:.54rem;font-weight:600;text-align:center;line-height:1.3;flex:none}
.cart-pet b{display:block;font-size:1.6rem;line-height:1.15}
.cart-pet small{display:block;font-size:.88rem;opacity:.8;margin-bottom:.7rem}
.selo-plano{display:inline-flex;align-items:center;gap:.4rem;height:34px;padding:0 .9rem;border-radius:999px;
  background:var(--laranja);color:#1C1020;font-size:.86rem;font-weight:600}
.selo-plano svg{width:16px;height:16px}
.carteira .linha{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:13px 0;
  border-top:1px solid rgba(255,255,255,.2);font-size:.92rem}
.carteira .linha span{display:flex;align-items:center;gap:.5rem;opacity:.88}
.carteira .linha span svg{width:19px;height:19px}
.carteira .linha b{font-size:1.05rem;white-space:nowrap}
.carteira .destaque-zero b{font-size:1.55rem;color:var(--laranja)}
.cart-foto{object-fit:cover}
.rodape-cart{display:flex;gap:.55rem;margin-top:auto;padding-top:18px;font-size:.84rem;opacity:.84;line-height:1.45}
.rodape-cart svg{width:18px;height:18px;flex:none;margin-top:1px}

/* coberturas */
.painel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px}
.painel h4{font-size:1.06rem;font-weight:700;margin-bottom:16px}
.uso{display:grid;gap:10px}
.uso-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--bg-2)}
.uso-item .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--accent);color:#fff}
.uso-item .ic svg{width:17px;height:17px}
.uso-item .ic-tema{width:26px;height:26px;color:var(--accent);flex:none}
.uso-item .ic-tema svg{width:100%;height:100%}
.uso-item b{display:block;font-size:.98rem;font-weight:600;line-height:1.25}
.uso-item small{font-size:.8rem;color:var(--muted)}
.uso-item em{margin-left:auto;font-style:normal;font-size:.82rem;font-weight:600;color:var(--accent);white-space:nowrap;
  background:var(--tint);border-radius:999px;padding:.3rem .7rem}
.uso-item.espera{background:var(--laranja-tint)}
.uso-item.espera .ic{background:var(--laranja);color:#1C1020}
.uso-item.espera .ic-tema{color:var(--laranja-texto)}
.uso-item.espera em{color:var(--laranja-texto);background:rgba(249,114,5,.16)}
.perto{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);font-size:.88rem}
.perto>b{display:flex;align-items:center;gap:.4rem;font-weight:600}
.perto>b svg{width:17px;height:17px;color:var(--accent)}
.perto-link{margin-left:auto;font-weight:600;color:var(--accent);font-size:.84rem}
.perto .chip{display:inline-flex;align-items:center;gap:.3rem;height:30px;padding:0 .7rem;border-radius:999px;
  background:var(--tint);color:var(--accent);font-size:.8rem;font-weight:600}
.perto .chip svg{width:13px;height:13px}
.atalhos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.atalho{display:flex;align-items:center;gap:.5rem;padding:12px;border:1px solid var(--line);border-radius:14px;
  font-size:.86rem;font-weight:600}
.atalho svg{width:20px;height:20px;color:var(--accent);flex:none}
.atalho i{margin-left:auto;font-style:normal;color:var(--muted)}

.flutua{position:absolute;z-index:4;display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:.65rem .9rem;font-size:.84rem;font-weight:600;box-shadow:0 12px 32px -16px rgba(28,16,32,.28)}
.flutua.f1{left:-24px;top:-18px}
.flutua.f2{right:-58px;bottom:18px}
.flutua .ok{width:22px;height:22px;border-radius:50%;background:var(--laranja);color:#1C1020;display:grid;place-items:center}
.flutua .ok svg{width:12px;height:12px}
.flutua .estrela{color:var(--laranja)}

/* === NÚMEROS === */
.numeros{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.numeros .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.num{padding:34px 24px;text-align:center}
.num+.num{border-left:1px solid var(--line)}
.num b{display:block;font-size:2.05rem;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.num span{font-size:.88rem;color:var(--muted)}

/* === COMO FUNCIONA === */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.passo{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;
  transition:transform .35s var(--ease),border-color .3s ease}
.passo:hover{transform:translateY(-3px);border-color:#DCCDDF}
.passo-n{width:40px;height:40px;border-radius:12px;background:var(--tint);color:var(--accent);display:grid;place-items:center;
  font-weight:700;margin-bottom:22px}
.passo h3{margin-bottom:.5rem}
.passo p{color:var(--muted);font-size:.95rem}

/* === PLANOS, carrossel de largura total ===
   A faixa ocupa a tela inteira e os cartões começam alinhados ao container.
   A diferença entre os planos aparece no nível, no tom do cartão e no selo. */
.planos-faixa{--gutter:max(28px,calc((100vw - 1200px) / 2));position:relative}
.planos-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:34px}
.planos-topo .cabeca{margin:0;text-align:left;max-width:34rem}
.planos-nav{display:flex;gap:.6rem;flex:none}
.seta-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;
  cursor:pointer;color:var(--ink);transition:border-color .2s ease,color .2s ease,opacity .2s ease,transform .2s var(--ease)}
.seta-btn:hover{border-color:var(--accent);color:var(--accent)}
.seta-btn:active{transform:scale(.94)}
.seta-btn:disabled{opacity:.3;cursor:default;border-color:var(--line);color:var(--ink)}
.seta-btn svg{width:20px;height:20px}
.planos{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:10px var(--gutter) 30px;scrollbar-width:none;-ms-overflow-style:none;
  scroll-padding-left:var(--gutter)}
.planos::-webkit-scrollbar{display:none}
.planos::after{content:"";flex:0 0 1px}
.plano{flex:0 0 360px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:26px;
  padding:36px 34px 34px;display:flex;flex-direction:column;
  transition:transform .4s var(--ease),border-color .3s ease,box-shadow .3s ease}
.plano:hover{transform:translateY(-6px);border-color:#D9C6DC;box-shadow:0 26px 60px -34px rgba(28,16,32,.42)}
.nivel{display:flex;gap:5px;margin-bottom:20px}
.nivel i{width:22px;height:5px;border-radius:99px;background:var(--line)}
.nivel i.on{background:var(--accent)}
.plano h3{font-size:1.32rem;letter-spacing:-.01em}
.plano .pra{font-size:.94rem;color:var(--muted);margin-top:.5rem;min-height:3.4em}
.preco{margin:26px 0 24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.preco small{display:block;font-size:.78rem;color:var(--muted)}
.preco b{font-size:2.35rem;font-weight:700;letter-spacing:-.035em;line-height:1.1;display:block;margin:.2rem 0}
.preco span{display:block;font-size:.84rem;color:var(--muted)}
.plano ul{list-style:none;display:grid;gap:.85rem;margin-bottom:28px;flex:1}
.plano li{display:flex;gap:.55rem;font-size:.93rem;line-height:1.45}
.plano li svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:3px}
.plano li.base{font-weight:700}
.plano .btn{width:100%;height:54px}
.plano .ver{display:block;text-align:center;font-size:.85rem;font-weight:600;color:var(--muted);margin-top:1rem}
.plano .ver:hover{color:var(--accent)}
/* o plano do meio pra cima ganha fundo lilás, e o último fica escuro */
.plano.tom2{background:var(--bg-2)}
.plano.tom3{background:var(--tint);border-color:#E3D2E5}
.plano.escuro{background:var(--dark);border-color:var(--dark);color:#fff}
.plano.escuro .pra,.plano.escuro .preco small,.plano.escuro .preco span,.plano.escuro .ver{color:rgba(255,255,255,.66)}
.plano.escuro .preco{border-bottom-color:rgba(255,255,255,.16)}
.plano.escuro li svg{color:var(--laranja)}
.plano.escuro .nivel i{background:rgba(255,255,255,.22)}
.plano.escuro .nivel i.on{background:var(--laranja)}
.plano.escuro .ver:hover{color:#fff}
.plano.escuro .btn-linha{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.plano.escuro .btn-linha:hover{border-color:var(--laranja);color:var(--laranja)}
.letras{text-align:center;font-size:.82rem;color:var(--muted);margin-top:10px}

/* === REDE === */
.rede{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.rede h2{margin:.8rem 0 1rem}
.rede-txt>p{color:var(--muted);font-size:1.04rem;margin-bottom:1.8rem}
.busca{position:relative}
.busca svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted)}
.busca input{width:100%;height:56px;border-radius:999px;border:1px solid var(--line);background:#fff;padding:0 1.2rem 0 3rem;
  font-family:inherit;font-size:1rem;color:var(--ink)}
.busca input:focus{outline:3px solid var(--tint);border-color:var(--accent)}
.cidades{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.cidades button{height:36px;padding:0 .95rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.84rem;
  font-weight:600;color:var(--muted);cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.cidades button:hover{border-color:var(--accent);color:var(--accent)}
.cidades button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.resultados{background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px}
.res{display:flex;gap:14px;align-items:center;padding:14px;border-radius:14px}
.res+.res{border-top:1px solid var(--line);border-radius:0}
.res b{display:block;font-size:.95rem;line-height:1.3}
.res small{font-size:.82rem;color:var(--muted)}
.res em{margin-left:auto;font-style:normal;font-size:.72rem;font-weight:700;padding:.22rem .6rem;border-radius:999px;
  background:var(--laranja-tint);color:var(--laranja-texto);white-space:nowrap}
.res-rodape{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:14px;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--muted)}
.res-rodape a{font-weight:700;color:var(--accent)}
.vazio{padding:28px 14px;text-align:center;color:var(--muted);font-size:.92rem}

/* === AVALIAÇÕES === */
.aval{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.av{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column}
.av .estrelas{color:var(--laranja);font-size:.9rem;letter-spacing:.08em;margin-bottom:.8rem}
.av p{font-size:.95rem;flex:1}
.quem{display:flex;align-items:center;gap:.7rem;margin-top:1.3rem}
.quem i{width:36px;height:36px;border-radius:50%;background:var(--tint) center/cover;color:var(--accent);display:grid;place-items:center;
  font-style:normal;font-weight:700;font-size:.85rem;flex:none}
.quem b{display:block;font-size:.86rem;line-height:1.25}
.quem small{font-size:.76rem;color:var(--muted)}
.google{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:28px;font-size:.9rem;color:var(--muted)}
.google b{color:var(--ink)}
.google a{font-weight:700;color:var(--accent)}

/* === FAIXA ESCURA ===
   Refeita em 17/09/2026. Antes ela era um bloco arredondado flutuando no meio
   do branco, com margem dos dois lados e uma linha logo abaixo. Agora ela
   atravessa a tela inteira e encosta na seção seguinte. */
.faixa-sec{padding:0}
.faixa{background:var(--dark);color:#fff;padding:96px 0;text-align:center;position:relative;overflow:hidden}
.faixa::before{content:"";position:absolute;inset:0;opacity:.55;
  background:radial-gradient(760px 420px at 50% 0%,rgba(122,31,122,.6),transparent 70%)}
.faixa>*{position:relative;z-index:1}
.nq{white-space:nowrap}
.faixa h2{max-width:22ch;margin:0 auto}
.faixa p{color:rgba(255,255,255,.72);margin:1rem auto 0;max-width:36rem}
.faixa .hero-acoes{margin-top:2rem}
.central{display:inline-flex;align-items:center;gap:.5rem;height:32px;padding:0 .9rem;border-radius:999px;
  background:rgba(255,255,255,.08);font-size:.8rem;font-weight:600;margin-bottom:1.4rem}
.central i{width:8px;height:8px;border-radius:50%;background:var(--laranja)}
.central.fechada i{background:rgba(255,255,255,.45)}

/* === DÚVIDAS === */
.faq{max-width:46rem;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:22px 0;font-weight:600;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--bg-2);display:grid;
  place-items:center;font-size:1.1rem;color:var(--accent);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--muted);max-width:40rem}
.faq-mais{text-align:center;margin-top:30px}

/* === RODAPÉ === */
.rodape{background:var(--bg-2);padding:72px 0 32px;font-size:.9rem;color:var(--muted)}
.rodape-grade{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.rodape .marca{color:var(--ink);margin-bottom:1rem}
.rodape h4{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem}
.rodape ul{list-style:none;display:grid;gap:.6rem}
.rodape a:hover{color:var(--accent)}
.rodape-fim{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:24px;font-size:.8rem}

/* botão fixo no celular */
.fixo{display:none}

/* === ENTRADA NO SCROLL === */
/* entrada no estilo do site da sua mãe, sobe 30px saindo de um desfoque leve */
.rv{opacity:0;transform:translateY(30px);filter:blur(6px);
  transition:opacity 1.15s cubic-bezier(.16,1,.3,1),transform 1.15s cubic-bezier(.16,1,.3,1),filter 1.15s ease}
.rv.in{opacity:1;transform:none;filter:none}
@media(max-width:640px){.rv{transform:translateY(14px)}}
/* o que a Lenis precisa pra rolar suave sem brigar com o navegador */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;filter:none;transition:none}
  .pata{display:none}
  .barra u{transition:none}
  html{scroll-behavior:auto}
}

/* === RESPONSIVO === */
@media(max-width:1100px){
  .links,.cliente{display:none}
  .plano{flex:0 0 320px;padding:30px 26px}
  .planos-topo{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .planos::-webkit-scrollbar{display:none}
  .plano{scroll-snap-align:start}
  .flutua{display:none}
}
@media(max-width:900px){
  .app-grade{grid-template-columns:1fr}
  .rede{grid-template-columns:1fr;gap:36px}
  .aval,.passos{grid-template-columns:1fr 1fr}
  .rodape-grade{grid-template-columns:1fr 1fr}
  .numeros .wrap{grid-template-columns:1fr 1fr}
  .num:nth-child(3){border-left:0}
  .num:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  section{padding:76px 0}
  .topo .wrap{height:64px}
  .topo-dir .btn{display:none}
  .hero{padding-top:56px}
  .hero .sub{font-size:1.02rem}
  .hero-acoes .btn{width:100%}
  .checks{flex-direction:column;align-items:center;gap:.5rem}
  .app{margin-top:40px;padding:10px;border-radius:20px 20px 0 0}
  .carteira,.painel{padding:18px}
  .atalhos{grid-template-columns:1fr}
  .cart-foto{width:76px;height:76px}
  .cart-pet b{font-size:1.35rem}
  .aval,.passos,.rodape-grade{grid-template-columns:1fr}
  .aval .av:nth-child(n+4){display:none}
  .planos-faixa{--gutter:20px}
  .plano{flex:0 0 84%;padding:28px 24px}
  .preco b{font-size:2.1rem}
  .faixa{padding:68px 0}
  .num{padding:24px 12px}
  .num b{font-size:1.65rem}
  .fixo{display:block;position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;
    transform:translateY(140%);transition:transform .45s var(--ease)}
  .fixo.on{transform:none}
  .fixo .btn{width:100%;box-shadow:0 14px 30px -12px rgba(28,16,32,.5)}
  body{padding-bottom:84px}
}


/* =========================================================
   LARANJA, detalhes
   ========================================================= */
.rotulo::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--laranja);transform:rotate(45deg)}
/* sublinhado laranja embaixo das palavras de destaque do título */
.risco{background-image:linear-gradient(var(--laranja),var(--laranja));background-repeat:no-repeat;
  background-size:100% .1em;background-position:0 94%;padding-bottom:.02em}
.laranja{color:var(--laranja)}
.numeros .num::before{content:"";display:block;width:24px;height:3px;border-radius:3px;background:var(--laranja);margin:0 auto 14px}
.btn-laranja{background:var(--laranja);color:var(--ink)}
.btn-laranja:hover{background:#FF8424}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 .7rem;border-radius:999px;font-size:.74rem;font-weight:700;
  background:var(--tint);color:var(--accent)}
.tag.lj{background:var(--laranja-tint);color:var(--laranja-texto)}

/* =========================================================
   ESPAÇO DE FOTO, cinza com a medida escrita dentro
   ========================================================= */
.foto{position:relative;background:#DADADA;border-radius:20px;overflow:hidden;display:grid;place-items:center}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto span{max-width:80%;text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#4A4A4A;background:rgba(255,255,255,.78);padding:.45rem .8rem;border-radius:8px;line-height:1.45}
.r43{aspect-ratio:4/3}.r32{aspect-ratio:3/2}.r11{aspect-ratio:1/1}.r45{aspect-ratio:4/5}.r169{aspect-ratio:16/9}.r219{aspect-ratio:21/9}

/* =========================================================
   CAPA DE PÁGINA INTERNA, texto de um lado e foto do outro
   ========================================================= */
.capa{position:relative;padding:72px 0 88px;overflow:hidden}
.capa::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(800px 460px at 20% -10%,var(--tint),transparent 70%)}
.capa-grade{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.trilha{font-size:.84rem;color:var(--muted);margin-bottom:1.2rem}
.trilha a:hover{color:var(--accent)}
.trilha span{margin:0 .4rem;opacity:.5}
.capa h1{font-size:clamp(2rem,4vw,3.1rem);max-width:none;margin:0}
.capa .sub{margin-top:1.2rem;font-size:1.1rem;color:var(--muted);max-width:34rem}
.capa .hero-acoes{justify-content:flex-start}

/* === DIVISÃO TEXTO E FOTO === */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.inv>:first-child{order:2}
.split h2{margin:.8rem 0 1rem}
.split p{color:var(--muted);font-size:1.04rem}
.split p+p{margin-top:.9rem}
.lista-check{list-style:none;display:grid;gap:.7rem;margin-top:1.6rem}
.lista-check li{display:flex;gap:.6rem;font-weight:500}
.lista-check svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:3px}

/* === CARTÕES GENÉRICOS === */
.grade{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;transition:transform .35s var(--ease),border-color .3s ease}
.card:hover{transform:translateY(-3px);border-color:#DCCDDF}
.card h3{margin:.9rem 0 .45rem}
.card p{color:var(--muted);font-size:.95rem}
.card .grande{display:block;font-size:2.3rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.card>.foto{margin:-14px -14px 20px;border-radius:14px}
.icone{width:44px;height:44px;border-radius:12px;background:var(--laranja-tint);color:var(--laranja-texto);display:grid;place-items:center}
.icone svg{width:22px;height:22px}
.passo>.foto{margin:-16px -16px 22px;border-radius:14px}

/* === PLANOS COMPLETOS === */
.tabela{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff;margin-bottom:40px}
.tabela table{width:100%;border-collapse:collapse;min-width:680px;font-size:.92rem}
.tabela th,.tabela td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
.tabela th{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--bg-2)}
.tabela tr:last-child td{border-bottom:0}
.tabela .sim{color:var(--accent);font-weight:700}
.tabela .nao{color:#8E8192}
.plano-longo{display:grid;grid-template-columns:320px 1fr;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;scroll-margin-top:100px}
.plano-longo+.plano-longo{margin-top:20px}
.plano-longo>.foto{border-radius:0;min-height:260px}
.pl-corpo{padding:32px 36px}
.pl-topo{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:flex-start}
.pl-topo h2{font-size:2rem;margin-top:.6rem}
.pl-topo .pra{color:var(--muted);margin-top:.3rem}
.pl-preco{text-align:right}
.pl-preco small{display:block;font-size:.78rem;color:var(--muted)}
.pl-preco b{font-size:1.9rem;font-weight:700;letter-spacing:-.03em}
.pl-resumo{margin-top:1rem;max-width:40rem}
.pl-acoes{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.cobertura{margin-top:1.6rem;border-top:1px solid var(--line);padding-top:1rem}
.cobertura summary{list-style:none;cursor:pointer;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:.6rem}
.cobertura summary::-webkit-details-marker{display:none}
.cobertura summary::before{content:"+";width:26px;height:26px;border-radius:50%;background:var(--tint);display:grid;place-items:center;transition:transform .3s var(--ease)}
.cobertura[open] summary::before{transform:rotate(45deg)}
.cob-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 26px;margin-top:1.3rem}
.cob-grade h4{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.cob-grade ul{list-style:none;display:grid;gap:.2rem}
.cob-grade li{font-size:.86rem;color:var(--muted)}
.letras-lista{margin-top:28px;font-size:.84rem;color:var(--muted);display:grid;gap:.3rem;text-align:center}

/* === REDE COMPLETA === */
.busca.grande{max-width:40rem;margin:0 auto}
.filtros{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin:18px 0 10px}
.filtros button{height:38px;padding:0 1rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.86rem;font-weight:600;
  color:var(--muted);cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.filtros button:hover{border-color:var(--accent);color:var(--accent)}
.filtros button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.conta{text-align:center;font-size:.9rem;color:var(--muted);margin-bottom:26px}
.rede-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cred{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column}
.cred .tags{display:flex;gap:.35rem;min-height:26px;margin-bottom:.7rem}
.cred b{font-size:1rem;line-height:1.3}
.cred .end{font-size:.86rem;color:var(--muted);margin-top:.3rem}
.cred .serv{font-size:.84rem;margin-top:.5rem}
.cred .acoes{display:flex;gap:.4rem;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.cred .acoes .btn{height:38px;font-size:.82rem;padding:0 .9rem}

/* === FORMULÁRIO === */
.form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px}
.form h3{font-size:1.3rem}
.form>p{color:var(--muted);font-size:.9rem;margin:.3rem 0 1.4rem}
.campo{margin-bottom:14px}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:block;font-size:.8rem;font-weight:700;margin-bottom:.35rem}
.form input,.form select,.form textarea{width:100%;height:48px;padding:0 .95rem;border:1px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff}
.form textarea{height:auto;min-height:100px;padding:.8rem .95rem;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--tint);border-color:var(--accent)}
.form .btn{width:100%;margin-top:6px}
.form .nota{font-size:.78rem;color:var(--muted);text-align:center;margin-top:.8rem}
.passos-lista{list-style:none;display:grid;gap:1.3rem;margin-top:1.8rem}
.passos-lista li{display:flex;gap:1rem}
.passos-lista .n{width:32px;height:32px;border-radius:10px;background:var(--laranja-tint);color:var(--laranja-texto);display:grid;place-items:center;font-weight:700;flex:none}
.passos-lista b{display:block}
.passos-lista span{font-size:.92rem;color:var(--muted)}

/* === DÚVIDAS COMPLETAS === */
.faq ul{padding:0 0 22px 1.2rem;color:var(--muted);display:grid;gap:.25rem}

/* === ARTIGO E BLOG === */
.artigo{max-width:44rem;margin:0 auto}
.artigo h2{font-size:1.85rem;margin:2.6rem 0 .9rem}
.artigo h3{margin:1.8rem 0 .5rem}
.artigo p,.artigo li{font-size:1.06rem;line-height:1.8}
.artigo p+p{margin-top:1rem}
.artigo ul,.artigo ol{padding-left:1.3rem;margin:1rem 0;display:grid;gap:.35rem}
.artigo .destaque{background:var(--laranja-tint);border-radius:14px;padding:1.1rem 1.3rem;margin:1.6rem 0;font-weight:600}
.artigo .tabela{margin:1.4rem 0}
.artigo .tabela table{min-width:0}
.artigo>.foto{margin:2rem 0}
.artigo-capa{max-width:62rem;margin:0 auto}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),border-color .3s ease}
.post:hover{transform:translateY(-4px);border-color:#DCCDDF}
.post>.foto{border-radius:0}
.post .txt{padding:22px 24px 26px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.post h3{margin:.8rem 0 .5rem}
.post p{font-size:.92rem;color:var(--muted);flex:1}
.post .ler{margin-top:1rem;font-weight:700;font-size:.9rem;color:var(--accent)}
.post.maior{grid-column:span 2}

@media(max-width:900px){
  .capa-grade,.split{grid-template-columns:1fr;gap:36px}
  .split.inv>:first-child{order:0}
  .g3,.g4,.rede-grade,.posts{grid-template-columns:1fr 1fr}
  .plano-longo{grid-template-columns:1fr}
  .plano-longo>.foto{min-height:0;aspect-ratio:16/9}
  .cob-grade{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .capa{padding:44px 0 60px}
  .g2,.g3,.g4,.rede-grade,.posts,.cob-grade,.duas{grid-template-columns:1fr}
  .post.maior{grid-column:span 1}
  .pl-corpo{padding:24px 22px}
  .pl-preco{text-align:left}
  .pl-acoes .btn{width:100%}
  .form{padding:26px 20px}
  .capa .hero-acoes .btn{width:100%}
}

/* faixa escura com foto do lado */
.faixa-foto{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;text-align:left}
.faixa-foto h2{margin:0;max-width:18ch}
.faixa-foto p{margin:1rem 0 0}
.faixa-foto .hero-acoes{justify-content:flex-start}
.faixa-foto .foto{background:#4A3448}
.faixa-foto .foto span{background:rgba(255,255,255,.85)}
.artigo .tabela-box{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff;margin:1.4rem 0}
.artigo .tabela-box table{width:100%;border-collapse:collapse;font-size:.92rem}
.artigo .tabela-box th,.artigo .tabela-box td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
.artigo .tabela-box th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg-2)}
.artigo .tabela-box tr:last-child td{border-bottom:0}
@media(max-width:900px){.faixa-foto{grid-template-columns:1fr;gap:36px}.faixa-foto .foto{max-width:360px}}
@media(max-width:640px){.faixa-foto .hero-acoes .btn{width:100%}}
/* no desktop o trecho sublinhado não quebra no meio, senão o risco laranja fica partido */
/* no computador o título quebra em 3 linhas, nos pontos marcados pelo <br class="q"> */
@media(min-width:901px){.hero h1 .risco{white-space:nowrap}}
/* no celular a quebra fixa some, e o espaço do HTML segura as palavras separadas */
@media(max-width:900px){.hero h1 .q{display:none}}
/* menos patinhas no celular, senão elas encostam no texto */
@media(max-width:640px){.pata:nth-child(n+5){display:none}.pata{--t:24px}}

/* === QUEBRA DE LINHA EQUILIBRADA ===
   Regra dada por você em 17/09/2026. Parágrafo curto não pode terminar
   com uma linha de duas palavras, então o navegador equilibra as linhas. */
.cabeca p,.hero .sub,.capa .sub,.faixa p,.letras,.letras-lista p,.split p,.card p,.passo p,
.plano .pra,.rede-txt>p,.artigo .destaque,.google,.conta,.nota,.form>p,.post p,.faq .resp p{text-wrap:balance}

/* =========================================================
   SEÇÃO DO WHATSAPP, painel escuro de ponta a ponta
   Refeita em 17/09/2026 por pedido seu, a antiga era clara e sem peso.
   A direção é uma só, painel ameixa quase preto com brilho atrás do
   aparelho, e dentro dele o WhatsApp como ele é de verdade, no modo
   escuro, com a foto da Pet Veter no lugar do contato. O verde do
   aplicativo é o contraste, e é o que tira a seção do genérico.
   ========================================================= */
.zap-sec{position:relative;background:var(--dark);color:#fff;overflow:hidden;padding:104px 0}
.zap-sec::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 640px at 76% 45%,rgba(122,31,122,.62),transparent 68%)}
/* o pattern do fundo, pedido seu em 17/09/2026. Patinha, coração, osso e cruz só no traço,
   a 30% de opacidade, e ele some no meio pra não brigar com o texto nem com o celular.
   É SVG e não imagem gerada, então pesa quase nada e fica nítido em qualquer tela.
   O brilho laranja que ficava aqui saiu no mesmo dia, você não gostou dele. */
.zap-sec::after{content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;
  background-image:var(--padrao-patas);background-size:240px;
  mask-image:radial-gradient(ellipse 75% 85% at 50% 50%,transparent 35%,#000 95%);
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 50% 50%,transparent 35%,#000 95%)}
.zap-sec>*{position:relative;z-index:1}
.zap{display:grid;grid-template-columns:1fr .78fr;gap:72px;align-items:center}
.zap-txt h2{margin:.9rem 0 1.1rem}
.zap-txt>p{color:rgba(255,255,255,.74);font-size:1.06rem;max-width:34rem}
/* sem verde, pedido seu em 17/09/2026. O verde do WhatsApp saía da paleta,
   então o destaque desta seção é o laranja, igual à faixa escura do fim */
.zap-sec .rotulo{color:var(--laranja)}
.zap-linhas{list-style:none;display:grid;gap:.85rem;margin-top:1.9rem}
.zap-linhas li{display:flex;gap:.65rem;font-size:.97rem;color:rgba(255,255,255,.9)}
.zap-linhas svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--laranja)}
.zap-txt .hero-acoes{justify-content:flex-start;margin-top:2.1rem}
.btn-zap svg{width:21px;height:21px}
.zap-nota{display:flex;align-items:flex-start;gap:.55rem;margin-top:1.6rem;font-size:.86rem;color:rgba(255,255,255,.6)}
.zap-nota i{width:7px;height:7px;border-radius:50%;background:var(--laranja);flex:none;margin-top:.52rem}

/* === O APARELHO ===
   O formato é o do WhatsApp no modo escuro, e as cores são as da marca.
   O verde e o azul do aplicativo saíram em 17/09/2026, pedido seu, porque
   fugiam da paleta. O que faz ele ler como WhatsApp é o desenho, o topo,
   os tiques e a barra de baixo, não a cor. */
.fone-palco{position:relative;display:grid;place-items:center}
.fone-palco::before{content:"";position:absolute;width:112%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(193,120,193,.2),transparent 62%)}
.fone{position:relative;width:min(330px,100%);aspect-ratio:9/18.6;border-radius:46px;padding:11px;
  background:linear-gradient(158deg,#4A4150,#140A11 55%,#2A1F2C);
  box-shadow:0 70px 100px -45px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.09)}
.fone::before{content:"";position:absolute;left:50%;top:20px;transform:translateX(-50%);width:32%;height:23px;
  border-radius:99px;background:#0B0509;z-index:3}
.fone-tela{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#170B16;display:flex;flex-direction:column}
.fone-status{flex:none;display:flex;align-items:center;justify-content:space-between;padding:13px 20px 5px;
  background:#2A1629;color:#fff;font-size:.7rem}
.fone-status b{font-weight:600}
.fone-status span{display:flex;align-items:center;gap:5px}
.fone-status svg{height:10px;width:auto;color:#fff}
.fone-topo{display:flex;align-items:center;gap:10px;padding:5px 12px 11px;background:#2A1629;color:#E9EDEF;flex:none}
.fone-topo .volta{flex:none;color:#C4B3C3;display:grid;place-items:center}
.fone-topo .volta svg{width:17px;height:17px}
.fone-foto{width:38px;height:38px;border-radius:50%;object-fit:contain;background:#fff;flex:none;padding:2px}
.fone-nome b{display:block;font-size:.89rem;font-weight:600;line-height:1.2}
.fone-nome small{font-size:.69rem;color:#A08C9F}
.fone-acoes{margin-left:auto;display:flex;align-items:center;gap:15px;color:#C4B3C3}
.fone-acoes svg{width:17px;height:17px}

/* o papel de parede do WhatsApp, com patinha no lugar do rabisco */
.fone-chat{flex:1;padding:12px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;overflow:hidden;
  background-color:#170B16;background-size:150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='%23ffffff' opacity='.045'%3E%3Cg transform='translate(24 26) rotate(-18) scale(.62)'%3E%3Cellipse cx='7' cy='9' rx='2.1' ry='2.7'/%3E%3Cellipse cx='12' cy='7' rx='2.1' ry='2.9'/%3E%3Cellipse cx='17' cy='9' rx='2.1' ry='2.7'/%3E%3Cellipse cx='20' cy='14' rx='1.8' ry='2.2'/%3E%3Cpath d='M12 12.4c2.9 0 5.3 2 5.3 4.4 0 1.9-1.7 3-3.6 2.6-1-.2-2.3-.2-3.3 0-1.9.4-3.7-.7-3.7-2.6 0-2.4 2.4-4.4 5.3-4.4z'/%3E%3C/g%3E%3Cg transform='translate(98 78) rotate(22) scale(.55)'%3E%3Cellipse cx='7' cy='9' rx='2.1' ry='2.7'/%3E%3Cellipse cx='12' cy='7' rx='2.1' ry='2.9'/%3E%3Cellipse cx='17' cy='9' rx='2.1' ry='2.7'/%3E%3Cellipse cx='20' cy='14' rx='1.8' ry='2.2'/%3E%3Cpath d='M12 12.4c2.9 0 5.3 2 5.3 4.4 0 1.9-1.7 3-3.6 2.6-1-.2-2.3-.2-3.3 0-1.9.4-3.7-.7-3.7-2.6 0-2.4 2.4-4.4 5.3-4.4z'/%3E%3C/g%3E%3Cg transform='translate(56 118) rotate(-6) scale(.48)'%3E%3Cellipse cx='7' cy='9' rx='2.1' ry='2.7'/%3E%3Cellipse cx='12' cy='7' rx='2.1' ry='2.9'/%3E%3Cellipse cx='17' cy='9' rx='2.1' ry='2.7'/%3E%3Cellipse cx='20' cy='14' rx='1.8' ry='2.2'/%3E%3Cpath d='M12 12.4c2.9 0 5.3 2 5.3 4.4 0 1.9-1.7 3-3.6 2.6-1-.2-2.3-.2-3.3 0-1.9.4-3.7-.7-3.7-2.6 0-2.4 2.4-4.4 5.3-4.4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}

.balao{max-width:81%;padding:6px 9px 4px;border-radius:9px;font-size:.78rem;line-height:1.36;color:#E9EDEF;
  box-shadow:0 1px 1px rgba(0,0,0,.28)}
.balao small{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:.6rem;
  color:rgba(233,237,239,.5);margin-top:1px}
.balao .visto{width:14px;height:auto;color:#53BDEB;flex:none}
.balao.dela{align-self:flex-start;background:#2E1A2D;border-top-left-radius:2px}
.balao.sua{align-self:flex-end;background:#5E1F5E;border-top-right-radius:2px}
.balao.dia{align-self:center;background:#241323;color:#A08C9F;font-size:.6rem;font-weight:600;letter-spacing:.07em;
  padding:4px 11px;max-width:none;box-shadow:none}
.digitando{align-self:flex-start;display:flex;gap:4px;background:#2E1A2D;border-radius:9px;border-top-left-radius:2px;
  padding:12px;box-shadow:0 1px 1px rgba(0,0,0,.28)}
.digitando i{width:6px;height:6px;border-radius:50%;background:#A08C9F;animation:pisca 1.25s infinite}
.digitando i:nth-child(2){animation-delay:.18s}
.digitando i:nth-child(3){animation-delay:.36s}
@keyframes pisca{0%,62%,100%{opacity:.35;transform:translateY(0)}31%{opacity:1;transform:translateY(-3px)}}
/* a conversa acontece, cada fala entra e empurra a de cima, igual ao aplicativo.
   A classe .anima só entra pelo JS, então sem JS a conversa aparece inteira. */
.fone-chat.anima>*{display:none}
.fone-chat.anima .balao.on{display:block;animation:balaoEntra .34s var(--ease) both}
.fone-chat.anima .balao.dia.on,.fone-chat.anima .digitando.on{display:flex;animation:balaoEntra .3s var(--ease) both}
@keyframes balaoEntra{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}

.fone-barra{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px 18px;background:#2A1629}
.fone-campo{flex:1;height:36px;border-radius:999px;background:#3A2439;display:flex;align-items:center;gap:9px;
  padding:0 12px;font-size:.76rem;color:#A08C9F}
.fone-campo>span{flex:1}
.fone-campo svg{width:17px;height:17px;color:#A08C9F;flex:none}
.fone-enviar{width:38px;height:38px;border-radius:50%;background:#7A1F7A;color:#fff;display:grid;place-items:center;flex:none}
.fone-enviar svg{width:19px;height:19px}
/* enquanto o tutor escreve, o microfone vira o aviãozinho de enviar, igual ao aplicativo */
.fone-enviar .ic-enviar{display:none;width:17px;height:17px;margin-left:2px}
.fone-barra.escrevendo .ic-mic{display:none}
.fone-barra.escrevendo .ic-enviar{display:block}
.fone-barra.escrevendo .fone-campo{color:#E9EDEF}
#foneCampo{overflow:hidden;white-space:nowrap}
#foneStatus{transition:color .2s ease}
#foneStatus.digita{color:#E9EDEF}

@media(max-width:900px){
  .zap{grid-template-columns:1fr;gap:44px}
  .zap-txt{text-align:center}
  .zap-txt>p{margin:0 auto}
  .zap-txt .rotulo{justify-content:center}
  .zap-txt .hero-acoes{justify-content:center}
  .zap-linhas{justify-items:center}
  .zap-nota{justify-content:center;max-width:24rem;margin-left:auto;margin-right:auto;text-align:left}
}
@media(max-width:640px){
  .zap-sec{padding:76px 0}
  .fone{width:min(300px,100%)}
  .zap-txt .hero-acoes .btn{width:100%}
  .zap-linhas li{text-align:left}
}



/* =========================================================
   DEPOIMENTOS EM ESTEIRA, pedido seu em 17/09/2026
   No molde do site da sua mãe, mais devagar e com o cartão no
   formato do Google. A lista é escrita duas vezes e o trilho anda
   metade da largura, então a emenda cai exatamente no mesmo ponto
   e a volta não aparece.
   ========================================================= */
.aval-sec{overflow:hidden}
.aval-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;margin-bottom:44px}
.aval-topo h2{margin-top:.8rem;max-width:20ch}
.nota-google{display:grid;grid-template-columns:auto auto;align-items:center;gap:.2rem .7rem;flex:none}
.nota-google .g{width:30px;height:30px;grid-row:span 2}
.nota-google b{font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.nota-google .estrelas{color:var(--laranja);font-size:1rem;letter-spacing:.1em}
.nota-google small{grid-column:2;font-size:.84rem;color:var(--muted)}

.esteira{position:relative;overflow:hidden;padding:10px 0 4px;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.esteira-trilho{display:flex;gap:18px;width:max-content}
.esteira.anda .esteira-trilho{animation:esteira var(--tempo,180s) linear infinite}
.esteira:hover .esteira-trilho,.esteira:focus-within .esteira-trilho{animation-play-state:paused}
@keyframes esteira{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--dist,50%) * -1),0,0)}}

.esteira .av{flex:0 0 358px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;
  display:flex;flex-direction:column;box-shadow:0 14px 34px -28px rgba(28,16,32,.5)}
.av-topo{display:flex;align-items:center;gap:.75rem;margin-bottom:.9rem}
.av-foto{width:42px;height:42px;border-radius:50%;background:var(--tint) center/cover;color:var(--accent);
  display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.95rem;flex:none}
.av-quem b{display:block;font-size:.95rem;font-weight:600;line-height:1.25}
.av-quem small{font-size:.78rem;color:var(--muted)}
.av-topo .g{width:19px;height:19px;margin-left:auto;flex:none}
.esteira .av .estrelas{color:var(--laranja);font-size:.9rem;letter-spacing:.08em;margin-bottom:.65rem}
.esteira .av p{font-size:.94rem;color:var(--ink);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.aval-sec .faq-mais{margin-top:40px}

@media (prefers-reduced-motion:reduce){
  .esteira{overflow-x:auto;scrollbar-width:none}
  .esteira::-webkit-scrollbar{display:none}
  .esteira.anda .esteira-trilho{animation:none}
}
@media(max-width:900px){
  .aval-topo{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .aval-topo h2{max-width:none}
}
@media(max-width:640px){
  .esteira .av{flex:0 0 300px;padding:20px}
  .esteira{mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
}

/* =========================================================
   A FAIXA ESCURA EM ARCO, refeita em 17/09/2026
   A partir das montagens da Neurolândia que você mandou. A foto
   ocupa o lado direito até a borda da tela, e a borda esquerda
   dela é um pedaço de uma elipse enorme, com centro lá embaixo à
   direita. Por isso o arco começa estreito em cima e abre embaixo.
   Antes era uma foto recortada solta no meio da faixa, que você
   disse que ficou no meio do nada.
   ========================================================= */
.faixa-sec{position:relative;z-index:2}
.faixa-arco{padding:132px 0;min-height:620px;text-align:left;display:flex;align-items:center}
.faixa-arco .wrap{position:relative;z-index:1}
.faixa-arco .faixa-txt{max-width:34rem}
.faixa-arco h2{margin:0;max-width:16ch}
.faixa-arco p{margin:1.1rem 0 0;max-width:30rem}
.faixa-arco .hero-acoes{justify-content:flex-start}
.arco-foto{position:absolute;top:0;right:0;bottom:0;width:58%;margin:0;z-index:0;
  clip-path:ellipse(88% 125% at 100% 100%)}
.arco-foto img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
/* uma sombra de ameixa na borda do arco, pra foto não parecer colada */
.arco-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(34,9,31,.55),transparent 38%)}

/* o selo branco que atravessa a borda de baixo da faixa */
.arco-selo{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);z-index:3;
  display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 40px);
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 22px 14px 14px;
  box-shadow:0 24px 50px -24px rgba(28,16,32,.45)}
.arco-selo-ic{width:46px;height:46px;border-radius:13px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.arco-selo-ic svg{width:24px;height:24px}
.arco-selo p{font-size:.86rem;color:var(--muted);line-height:1.4;margin:0}
.arco-selo b{display:block;font-size:.98rem;color:var(--ink);font-weight:700}
/* a seção depois da faixa ganha espaço pro selo que desce nela */
.faixa-sec+section{padding-top:140px}

@media(max-width:900px){
  .faixa-arco{display:block;padding:0 0 72px;min-height:0}
  .arco-foto{position:relative;width:100%;height:340px;clip-path:ellipse(140% 100% at 50% 0%)}
  .arco-foto::after{background:linear-gradient(0deg,rgba(34,9,31,.5),transparent 40%)}
  .faixa-arco .wrap{padding-top:40px}
  .faixa-arco h2{max-width:none}
}
@media(max-width:640px){
  .arco-foto{height:260px}
  .faixa-arco .hero-acoes .btn{width:100%}
  .arco-selo{padding:12px 16px 12px 12px;gap:12px}
  .arco-selo-ic{width:40px;height:40px}
  .faixa-sec+section{padding-top:112px}
}

/* =========================================================
   A ATENDENTE QUE FALA, refeita em 17/09/2026
   No mesmo jeito do balão do seu site, o barra-cta.tsx. Ela chega
   2,6 segundos depois da página abrir, com um anel que abre uma vez
   só. O balão abre com os três pontinhos de quem está escrevendo e
   depois vira a frase. Fica 9 segundos, fecha, e volta a cada 45 com
   a frase seguinte. O ritmo e as frases moram no visual.js.
   O verde do WhatsApp saiu, o ponto de estado é laranja.
   ========================================================= */
.zap-flutua{position:fixed;right:24px;bottom:24px;z-index:45;pointer-events:none;
  opacity:0;transform:translateY(26px) scale(.72);transform-origin:right bottom;
  transition:opacity .3s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.zap-flutua.on{opacity:1;transform:none;pointer-events:auto}
.zap-flutua a{display:flex;align-items:center;gap:12px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.zap-flutua a:hover{transform:scale(1.04)}
.zap-flutua a:active{transform:scale(.96)}

/* o balão, com o canto de cima à direita menos redondo e o bico desse lado */
.zf-balao{position:relative;display:grid;align-items:center;background:#fff;border:1px solid var(--line);color:var(--ink);
  font-weight:600;font-size:.92rem;line-height:1;white-space:nowrap;
  padding:.8rem 1.1rem;border-radius:16px 6px 16px 16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  opacity:0;transform:translateX(12px) scale(.9);transform-origin:right center;
  transition:opacity .25s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.zf-balao::after{content:"";position:absolute;top:7px;right:-3px;width:8px;height:8px;background:#fff;
  border-radius:1.5px;transform:rotate(45deg)}
.zap-flutua.fala .zf-balao{opacity:1;transform:none}
/* os pontos e a frase dividem o mesmo lugar. A frase, mesmo invisível, já dá a
   largura final ao balão, então ele abre no tamanho certo e não dá salto */
.zf-pontos,.zf-frase{grid-area:1/1}
.zf-pontos{display:flex;gap:4px;align-items:center;transition:opacity .2s ease}
.zf-pontos i{width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.45;animation:pisca 1s ease-in-out infinite}
.zf-pontos i:nth-child(2){animation-delay:.16s}
.zf-pontos i:nth-child(3){animation-delay:.32s}
.zf-frase{opacity:0;transition:opacity .25s ease}
.zap-flutua.escreveu .zf-pontos{opacity:0}
.zap-flutua.escreveu .zf-frase{opacity:1}

.zf-foto{position:relative;width:62px;height:62px;border-radius:50%;flex:none;padding:3px;background:var(--accent);
  box-shadow:0 16px 38px -16px rgba(122,31,122,.8),0 2px 10px -4px rgba(0,0,0,.5)}
.zf-foto img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 30%}
/* o anel que abre uma vez, quando ela chega */
.zf-anel{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0;pointer-events:none}
.zap-flutua.on .zf-anel{animation:anel 1.1s ease-out .18s 1 both}
@keyframes anel{from{opacity:.85;transform:scale(1)}to{opacity:0;transform:scale(1.75)}}
/* o ponto de estado, laranja e pulsando devagar */
.zf-ponto{position:absolute;right:1px;bottom:1px;width:15px;height:15px;border-radius:50%;background:#fff}
.zf-ponto::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--laranja);animation:ponto 2.4s ease-in-out infinite}
@keyframes ponto{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}

/* no celular ela sobe acima do botão fixo do rodapé */
@media(max-width:640px){
  .zap-flutua{right:14px;bottom:calc(92px + env(safe-area-inset-bottom))}
  .zf-foto{width:54px;height:54px}
  .zf-balao{font-size:.86rem;padding:.7rem .95rem}
}
@media (prefers-reduced-motion:reduce){
  .zap-flutua,.zf-balao{transition:opacity .15s ease}
  .zap-flutua{transform:none}.zf-balao{transform:none}
  .zf-anel{display:none}.zf-ponto::after,.zf-pontos i{animation:none}
}

/* =========================================================
   O MENU SEM A FAIXA EMBAIXO, pedido seu em 17/09/2026
   No topo da página ele é transparente e a primeira seção passa por
   baixo dele, então não aparece mais aquela divisória entre o menu e
   o hero. O fundo branco com desfoque e a linha só entram quando a
   pessoa começa a rolar.
   ========================================================= */
main{margin-top:calc(-1 * var(--topo-h))}
.topo{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background-color .3s ease,border-color .3s ease}
.topo.rolou{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:var(--line)}
.hero{padding-top:calc(88px + var(--topo-h))}
@media(max-width:640px){
  :root{--topo-h:64px}
  .hero{padding-top:calc(56px + var(--topo-h))}
}

/* =========================================================
   A CAPA DAS PÁGINAS INTERNAS, no estilo das seções da Neurolândia
   Um bloco de cor arredondado, a foto sangrando até a borda direita
   dele com a borda esquerda num arco grande, o texto em branco em
   cima da cor e o selo branco atravessando a borda de baixo.
   O método está na skill /montagem-de-secao.
   ========================================================= */
.capa{padding:calc(24px + var(--topo-h)) 0 104px}
.capa::before{display:none}
.capa .wrap{position:relative}
.capa-bloco{position:relative;overflow:hidden;border-radius:30px;min-height:540px;display:flex;align-items:center;color:#fff;
  background:linear-gradient(125deg,#92308F 0%,#6A1C68 38%,#2A0B28 100%)}
/* as patinhas no fundo do lado do texto, bem apagadas */
.capa-bloco::before{content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;
  background-image:var(--padrao-patas);background-size:240px;
  mask-image:linear-gradient(90deg,#000,transparent 55%);-webkit-mask-image:linear-gradient(90deg,#000,transparent 55%)}
.capa-foto{position:absolute;top:0;right:0;bottom:0;width:56%;clip-path:ellipse(92% 130% at 100% 100%)}
.capa-foto .foto{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;height:100%;background:#4A3448}
.capa-foto .foto img{object-position:60% 40%}
.capa-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(42,11,40,.5),transparent 35%)}
.capa-txt{position:relative;z-index:1;width:48%;padding:72px 0 92px 64px}
.capa-bloco .trilha{color:rgba(255,255,255,.62);margin-bottom:1.3rem}
.capa-bloco .trilha a:hover{color:#fff}
.capa-bloco h1{color:#fff;font-size:clamp(2rem,3.4vw,3rem);margin:0;max-width:15ch}
.capa-bloco .acc{color:var(--laranja)}
.capa-bloco .sub{color:rgba(255,255,255,.78);margin-top:1.2rem;max-width:30rem}
.capa-bloco .hero-acoes{justify-content:flex-start}
.capa-bloco .btn-acc{background:var(--laranja);color:var(--ink)}
.capa-bloco .btn-acc:hover{background:#FF8424}
.capa-bloco .btn-linha{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.capa-bloco .btn-linha:hover{border-color:#fff;color:#fff}
.capa .arco-selo-ic{font-size:1.25rem}
@media(max-width:900px){
  .capa-bloco{display:block;min-height:0}
  .capa-foto{position:relative;width:100%;height:300px;clip-path:ellipse(140% 100% at 50% 0%)}
  .capa-foto::after{background:linear-gradient(0deg,rgba(42,11,40,.45),transparent 40%)}
  .capa-txt{width:auto;padding:28px 28px 76px}
  .capa-bloco h1{max-width:none}
}
@media(max-width:640px){
  .capa{padding:calc(12px + var(--topo-h)) 0 88px}
  .capa .wrap{padding:0 12px}
  .capa-bloco{border-radius:24px}
  .capa-foto{height:240px}
  .capa-txt{padding:24px 20px 72px}
  .capa-bloco .hero-acoes .btn{width:100%}
}

/* =========================================================
   PRA QUEM É, com as bordas em onda, pedido seu em 17/09/2026
   A borda de cima e a de baixo são ondas que andam devagar, em duas
   camadas com velocidades diferentes, então o limite da seção mexe.
   A foto sai da caixa e vira uma forma orgânica, com uma mancha
   ameixa girando atrás, e dois adesivos boiando por cima.
   Só transform anima, nada que force o navegador a refazer a página.
   ========================================================= */
.onda-sec{position:relative;background:var(--tint);padding:210px 0 220px;overflow:hidden}
.onda{position:absolute;left:0;right:0;height:130px;overflow:hidden;pointer-events:none;z-index:1}
.onda-cima{top:-1px}
.onda-baixo{bottom:-1px}
.onda span{position:absolute;top:0;left:0;height:100%;width:calc(100% + 1440px);background-repeat:repeat-x;background-size:1440px 100%;
  will-change:transform;animation:onda 22s linear infinite}
.onda span+span{opacity:.45;animation-duration:34s;animation-direction:reverse}
.onda-cima span{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='90' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 45 C240 5 480 5 720 45 S1200 85 1440 45 V0 H0 Z'/%3E%3C/svg%3E")}
.onda-cima span+span{top:22px}
.onda-baixo span{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='90' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 45 C240 85 480 85 720 45 S1200 5 1440 45 V90 H0 Z'/%3E%3C/svg%3E")}
.onda-baixo span+span{top:-22px}
@keyframes onda{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1440px,0,0)}}

.onda-sec .wrap{position:relative;z-index:2}
.onda-foto{position:relative;padding:28px}
.onda-foto .foto{position:relative;z-index:1;border-radius:58% 42% 46% 54% / 48% 56% 44% 52%;
  box-shadow:0 40px 70px -40px rgba(74,20,72,.6)}
.onda-mancha{position:absolute;inset:0;z-index:0;background:var(--accent);opacity:.9;
  border-radius:44% 56% 62% 38% / 52% 40% 60% 48%;animation:mancha 28s linear infinite}
@keyframes mancha{to{transform:rotate(360deg)}}
.onda-card{position:absolute;z-index:2;left:0;bottom:34px;display:flex;align-items:center;gap:12px;
  background:#fff;border-radius:18px;padding:12px 18px 12px 14px;box-shadow:0 22px 44px -22px rgba(28,16,32,.45);
  animation:boia 6s ease-in-out infinite}
.onda-card b{font-size:1.7rem;font-weight:700;letter-spacing:-.03em;color:var(--accent);line-height:1}
.onda-card span{font-size:.8rem;line-height:1.3;color:var(--muted)}
.onda-adesivo{position:absolute;z-index:2;right:6px;top:10px;width:64px;height:64px;border-radius:50%;
  background:var(--laranja);color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -12px rgba(249,114,5,.7);
  animation:boia 5s ease-in-out -2s infinite}
.onda-adesivo svg{width:30px;height:30px;transform:rotate(-14deg)}
@keyframes boia{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-3deg)}}
@media(max-width:900px){.onda-sec{padding:150px 0 160px}.onda-foto{max-width:520px;margin:0 auto}}
@media(max-width:640px){
  .onda{height:60px}
  .onda-sec{padding:110px 0 120px}
  .onda-foto{padding:18px}
  .onda-card{bottom:14px;padding:10px 14px 10px 12px}
  .onda-card b{font-size:1.35rem}
  .onda-adesivo{width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){
  .onda span,.onda-mancha,.onda-card,.onda-adesivo{animation:none}
}

/* =========================================================
   BOTÃO FOFO, pedido seu em 17/09/2026
   No hover o botão faz um balanço de gelatina, espicha e volta, uma
   vez só. No clique saem patinhas voando do ponto onde o dedo tocou,
   em laranja e ameixa, e somem. As patinhas moram no visual.js.
   ========================================================= */
@keyframes geleia{
  0%{transform:scale(1,1)}
  30%{transform:scale(1.08,.9)}
  45%{transform:scale(.94,1.06)}
  60%{transform:scale(1.03,.97)}
  75%{transform:scale(.99,1.01)}
  100%{transform:scale(1,1)}
}
.btn:hover{animation:geleia .62s ease}
.btn:active{animation:none;transform:scale(.94)}
.pata-voa{position:fixed;left:0;top:0;width:16px;height:16px;pointer-events:none;z-index:9999;will-change:transform,opacity}
.pata-voa svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){.btn:hover{animation:none}}

/* =========================================================
   ESCOLHAS DO FORMULÁRIO, pedido seu em 17/09/2026
   A lista do navegador não aceita estilo, então cada select ganhou uma
   escolha própria. O botão tem o mesmo desenho dos campos. A lista abre
   com uma mola, as opções entram uma atrás da outra, e a escolhida fica
   lilás com uma patinha na frente.
   ========================================================= */
.escolha{position:relative}
.escolha-nativo{position:absolute!important;inset:0;opacity:0;pointer-events:none}
.escolha-btn{width:100%;height:48px;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:0 .8rem 0 .95rem;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:.95rem;
  color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.escolha-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.escolha-btn:hover{border-color:#D9C6DC}
.escolha.aberta .escolha-btn,.escolha-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
.escolha-seta{width:26px;height:26px;padding:4px;flex:none;border-radius:8px;background:var(--bg-2);color:var(--accent);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .2s ease}
.escolha.aberta .escolha-seta{transform:rotate(180deg);background:var(--tint)}
.escolha-lista{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;list-style:none;margin:0;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 26px 50px -22px rgba(28,16,32,.4);
  opacity:0;transform:translateY(-6px) scale(.96);transform-origin:top center;pointer-events:none;
  transition:opacity .18s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}
.escolha.aberta .escolha-lista{opacity:1;transform:none;pointer-events:auto}
.escolha-lista li{display:flex;align-items:center;gap:.6rem;padding:.62rem .7rem;border-radius:11px;font-size:.93rem;
  cursor:pointer;transition:background-color .15s ease,color .15s ease;opacity:0;transform:translateY(-4px)}
.escolha.aberta .escolha-lista li{opacity:1;transform:none;
  transition:background-color .15s ease,color .15s ease,opacity .25s ease calc(var(--i) * 35ms),transform .35s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 35ms)}
.escolha-lista li:hover,.escolha-lista li:focus{outline:none;background:var(--bg-2)}
.escolha-marca{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;border:1.5px solid var(--line);color:transparent;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.escolha-marca svg{width:13px;height:13px}
.escolha-lista li[aria-selected="true"]{background:var(--tint);color:var(--accent);font-weight:600}
.escolha-lista li[aria-selected="true"] .escolha-marca{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(-12deg)}
.escolha-lista li:hover .escolha-marca{border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .escolha-lista,.escolha-lista li,.escolha.aberta .escolha-lista li,.escolha-seta{transition:opacity .15s ease}
  .escolha-lista,.escolha-lista li{transform:none}
}

/* =========================================================
   O LILÁS DA SEÇÃO DE BAIXO SOBE POR TRÁS DA CAPA, pedido seu em 17/09/2026
   Quando a seção seguinte à capa é lilás, o lilás começa mais alto, na altura
   do terço de baixo do bloco ameixa, então o bloco fica metade no branco e
   metade no lilás, e a seção de baixo parece passar por baixo dele.
   Nas páginas em que a seção seguinte é branca, nada muda.
   ========================================================= */
.capa{position:relative;isolation:isolate}
.capa:has(+ section.alt)::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;
  height:calc(104px + 140px);background:var(--bg-2)}
@media(max-width:640px){.capa:has(+ section.alt)::after{height:calc(88px + 110px)}}

/* =========================================================
   O HAMBURGER E O MENU DO CELULAR, refeitos em 18/09/2026
   O hamburger são duas linhas de tamanhos diferentes numa bolinha
   lilás, e elas viram um X. O menu entra da direita como uma folha,
   na curva que o iPhone usa pra painel, com os itens chegando um
   atrás do outro. Tudo que anima é transform e opacity.
   ========================================================= */
.burger{display:none;position:relative;width:46px;height:46px;border:0;border-radius:50%;background:var(--tint);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.burger:active{transform:scale(.9)}
.burger span{position:absolute;left:13px;top:18px;width:20px;height:2.4px;border-radius:3px;background:var(--accent);
  transform-origin:left center;transition:transform .45s cubic-bezier(.32,.72,0,1)}
.burger span+span{top:26px;transform:scaleX(.6)}
html.menu-aberto .burger span{transform-origin:center}
html.menu-aberto .burger span:first-child{transform:translateY(4px) rotate(45deg)}
html.menu-aberto .burger span+span{transform:translateY(-4px) rotate(-45deg)}

.menu-fundo{position:fixed;inset:0;z-index:60;background:rgba(34,9,31,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .4s ease}
html.menu-aberto .menu-fundo{opacity:1;pointer-events:auto}
html.menu-aberto,html.menu-aberto body{overflow:hidden}
.menu{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(86vw,380px);display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:28px 0 0 28px;touch-action:pan-y;
  padding:calc(12px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow:-30px 0 60px -30px rgba(34,9,31,.55);transform:translateX(calc(100% + 90px));transition:transform .5s cubic-bezier(.32,.72,0,1)}
html.menu-aberto .menu{transform:none}
/* uma mancha lilás com patinhas no canto de cima, pra ele não ser só uma lista */
.menu::before{content:"";position:absolute;top:-90px;right:-90px;width:260px;height:260px;border-radius:50%;z-index:0;
  background:var(--tint);-webkit-mask-image:none}
.menu::after{content:"";position:absolute;top:-90px;right:-90px;width:260px;height:260px;border-radius:50%;z-index:0;opacity:.35;
  background-image:var(--padrao-patas);background-size:180px}
.menu>*{position:relative;z-index:1}
.menu-topo{display:flex;align-items:center;justify-content:space-between;min-height:52px}
.menu-fechar{width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--accent);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(34,9,31,.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.menu-fechar:active{transform:scale(.9) rotate(90deg)}
.menu-fechar svg{width:18px;height:18px}
.menu-oi{font-family:var(--font-titulo);font-size:1.55rem;font-weight:600;line-height:1.15;margin:22px 6px 14px;color:var(--ink)}
.menu-links{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;margin:0 -6px;padding:0 6px}
.menu-links a{display:flex;align-items:center;gap:14px;min-height:56px;padding:6px 12px 6px 6px;border-radius:18px;
  font-weight:600;font-size:1.02rem;color:var(--ink);-webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateX(28px);transition:background-color .2s ease,opacity .35s ease,transform .5s cubic-bezier(.32,.72,0,1)}
html.menu-aberto .menu-links a{opacity:1;transform:none;transition-delay:0s,calc(90ms + var(--i) * 40ms),calc(90ms + var(--i) * 40ms)}
.menu-links a:active{background:var(--bg-2)}
.menu-links a[aria-current]{background:var(--tint);color:var(--accent)}
.menu-ic{width:42px;height:42px;border-radius:14px;background:var(--bg-2);color:var(--accent);display:grid;place-items:center;flex:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.menu-links a:active .menu-ic{transform:scale(.9) rotate(-6deg)}
.menu-ic svg{width:21px;height:21px}
.menu-links a[aria-current] .menu-ic{background:var(--accent);color:#fff}
.menu-links i{margin-left:auto;font-style:normal;font-size:1.3rem;color:#B9AEBB}
.menu-central{display:flex;align-items:center;gap:.6rem;margin:14px 0 12px;padding:12px 14px;border-radius:14px;
  background:var(--laranja-tint);color:var(--laranja-texto);font-size:.84rem;font-weight:600}
.menu-central i{width:8px;height:8px;border-radius:50%;background:var(--laranja);box-shadow:0 0 0 4px rgba(249,114,5,.18);flex:none}
.menu-central.fechada{background:var(--bg-2);color:var(--muted)}
.menu-central.fechada i{background:#B9AEBB;box-shadow:none}
.menu-acoes{display:grid;gap:10px}
.menu-acoes .btn{width:100%;height:54px}
@media(max-width:1100px){.burger{display:block}}
@media(min-width:1101px){.menu,.menu-fundo{display:none}}
@media (prefers-reduced-motion:reduce){
  .menu,.menu-links a,.burger span{transition-duration:.01s!important;transition-delay:0s!important}
}

/* =========================================================
   A PASSADA DE CELULAR, 18/09/2026
   ========================================================= */
@media(max-width:640px){
  /* o hero lê da esquerda, com título menor e mais respiro. Centralizado em
     cinco linhas estreitas ele ficava apertado, que foi o que você viu */
  .hero{text-align:left}
  .hero .wrap{padding:0 22px}
  .selo{margin-bottom:1.3rem}
  .hero h1{font-size:2rem;line-height:1.14;max-width:none;margin:0}
  .hero .sub{font-size:1rem;line-height:1.6;max-width:34ch;margin:1.1rem 0 0;text-wrap:pretty}
  .hero .hero-acoes{justify-content:flex-start;margin-top:1.8rem}
  .checks{align-items:flex-start;gap:.55rem;margin-top:1.4rem}
  /* o quadro do app ocupava quase duas telas, fica só o que diz o essencial */
  .perto,.atalhos{display:none}
  .painel{padding:18px 16px}


  /* a tabela dos planos. O preço não quebra e a coluna do nome fica parada enquanto arrasta */
  .tabela{border-radius:16px}
  .tabela td{white-space:nowrap}
  .tabela th:first-child,.tabela td:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:6px 0 10px -8px rgba(28,16,32,.25)}
  .tabela th:first-child{background:var(--bg-2)}

  /* rodapé em duas colunas, com a marca e o contato ocupando a largura toda */
  .rodape-grade{grid-template-columns:1fr 1fr;gap:34px 20px}
  .rodape-grade>:first-child,.rodape-grade>:last-child{grid-column:1/-1}
  .rodape-fim{flex-direction:column;gap:.4rem}

  /* a atendente fica no pé da tela, e só sobe quando a barra de contratar aparece */
  .zap-flutua{bottom:calc(14px + env(safe-area-inset-bottom))}
  body.fixo-on .zap-flutua.on{transform:translateY(-72px)}
  .zap-flutua{transition:opacity .3s ease,transform .5s cubic-bezier(.32,.72,0,1)}

  /* respiro de seção um pouco menor, e alvo de toque de pelo menos 44px */
  section{padding:68px 0}
  .faq summary{padding:18px 0;min-height:44px}
  .cidades button,.filtros button{height:40px}
}

/* =========================================================
   CARROSSEL NO CELULAR, com setas e bolinhas, 18/09/2026
   Os passos e as grades de quatro cartões viram carrossel de arrastar.
   Embaixo, a seta da esquerda, uma bolinha por cartão e a seta da direita.
   A bolinha do cartão atual estica e fica ameixa.
   ========================================================= */
.carrossel-ctl{display:none}
.arrastando{cursor:grabbing;scroll-snap-type:none!important;scroll-behavior:auto!important;user-select:none}
.arrastando *{pointer-events:none}
@media(max-width:640px){
  .carrossel-mob{display:flex!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 14px;
    scroll-padding:0 20px;scrollbar-width:none;cursor:grab}
  .carrossel-mob::-webkit-scrollbar{display:none}
  .carrossel-mob>*{flex:0 0 84%;scroll-snap-align:center}
  .passo{padding:22px}
  .carrossel-ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px}
  .carrossel-ctl .seta-btn{width:44px;height:44px}
  .cc-ant svg{transform:rotate(180deg)}
  .cc-pontos{display:flex;gap:13px;align-items:center}
  .cc-pontos i{width:8px;height:8px;border-radius:99px;background:#DCCDDF;cursor:pointer;
    transition:background-color .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
  .cc-pontos i.on{background:var(--accent);transform:scaleX(2.2)}
}

/* =========================================================
   O MENU ROLA, 18/09/2026. A lista rola dentro dele sem puxar a
   página, e em tela baixa, como o Safari com a barra aberta,
   os itens ficam um pouco mais baixos pra caber mais.
   ========================================================= */
.menu-links{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0}
@media(max-height:760px){
  .menu-oi{font-size:1.3rem;margin:12px 6px 8px}
  .menu-links a{min-height:48px}
  .menu-ic{width:36px;height:36px;border-radius:12px}
  .menu-ic svg{width:19px;height:19px}
  .menu-central{margin:10px 0 8px;padding:10px 12px}
  .menu-acoes .btn{height:48px}
}

/* =========================================================
   O CELULAR PARADO ENQUANTO DIGITA, 18/09/2026
   O texto que ia sendo escrito esticava a barra de baixo, que
   empurrava o aparelho inteiro e fazia ele tremer. Agora a barra
   tem largura travada e o texto corre dentro dela.
   ========================================================= */
.zap>*,.fone-palco,.fone,.fone-tela,.fone-barra,.fone-campo{min-width:0}
#foneCampo{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap}
.fone{contain:layout paint}
@media(max-height:700px){
  .menu-links{gap:2px}
  .menu-links a{min-height:44px;padding:4px 10px 4px 4px}
  .menu-oi{font-size:1.15rem;margin:8px 6px 6px}
}
.menu-links{touch-action:pan-y}



/* =========================================================
   OS ITENS COBERTOS, redesenhados em 18/09/2026
   A lista abre na largura inteira do cartão, num painel lilás claro
   embaixo da foto e do texto. Busca, um interruptor pra ver só o que é
   novo no plano, cinco filtros, e os grupos em cartões brancos que se
   encaixam sem deixar buraco, cada um com o seu contador.
   ========================================================= */
[hidden]{display:none!important}
.cob-abrir{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;width:100%;margin-top:1.6rem;padding:1.1rem 0 0;
  border:0;border-top:1px solid var(--line);background:none;font:inherit;font-weight:700;font-size:1rem;color:var(--accent);
  cursor:pointer;text-align:left}
.cob-sinal{position:relative;width:30px;height:30px;border-radius:50%;background:var(--tint);flex:none;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),background-color .2s ease}
.cob-sinal::before,.cob-sinal::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;
  background:var(--accent);transform:translate(-50%,-50%)}
.cob-sinal::after{transform:translate(-50%,-50%) rotate(90deg)}
.cob-abrir:hover .cob-sinal{background:#E7D3E8}
.plano-longo.aberto .cob-sinal{transform:rotate(45deg)}
.cob-novos{font-size:.76rem;font-weight:600;color:var(--laranja-texto);background:var(--laranja-tint);border-radius:999px;padding:.28rem .7rem}

.cob-painel{grid-column:1/-1;background:var(--bg-2);border-top:1px solid var(--line);padding:28px 36px 30px}
.plano-longo.aberto .cob-painel{animation:cobAbre .5s cubic-bezier(.32,.72,0,1)}
@keyframes cobAbre{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.cob-barra{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap}
.cob-busca{position:relative;flex:1 1 300px}
.cob-busca svg{position:absolute;left:17px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.cob-busca input{width:100%;height:50px;border-radius:999px;border:1px solid var(--line);background:#fff;padding:0 1.2rem 0 2.9rem;
  font:inherit;font-size:.95rem;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.cob-busca input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
.cob-so-novo{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;user-select:none}
.cob-so-novo input{position:absolute;opacity:0;width:1px;height:1px}
.cob-trilho{position:relative;width:42px;height:26px;border-radius:99px;background:#DCCDDF;flex:none;transition:background-color .25s ease}
.cob-trilho::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(28,16,32,.25);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.cob-so-novo input:checked+.cob-trilho{background:var(--laranja)}
.cob-so-novo input:checked+.cob-trilho::after{transform:translateX(16px)}
.cob-so-novo input:focus-visible+.cob-trilho{box-shadow:0 0 0 3px var(--laranja-tint)}

.cob-chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px}
.cob-chip{display:inline-flex;align-items:center;gap:.45rem;height:38px;padding:0 .95rem;border-radius:999px;border:1px solid var(--line);
  background:#fff;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.cob-chip b{font-size:.74rem;font-weight:700;color:var(--muted)}
.cob-chip:hover{border-color:var(--accent)}
.cob-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.cob-chip.on b{color:rgba(255,255,255,.75)}
.cob-resumo{min-height:1.4em;margin:8px 2px 10px;font-size:.84rem;color:var(--muted)}

.cob-grupos{columns:3 260px;column-gap:16px}
.cob-grupo{break-inside:avoid;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 14px 12px;margin:0 0 16px}
.cob-grupo header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:0 2px 8px}
.cob-grupo h4{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);line-height:1.35}
.cob-conta{font-size:.72rem;font-weight:700;color:var(--accent);background:var(--tint);border-radius:999px;padding:.15rem .55rem;flex:none}
.cob-grupo ul{list-style:none;display:grid;gap:1px}
.cob-grupo li{display:flex;align-items:flex-start;gap:.55rem;padding:6px 4px;border-radius:8px;font-size:.9rem;line-height:1.35;color:var(--ink)}
.cob-grupo li:hover{background:var(--bg-2)}
.cob-ok{width:18px;height:18px;border-radius:50%;background:var(--tint);color:var(--accent);display:grid;place-items:center;flex:none;margin-top:1px}
.cob-ok svg{width:11px;height:11px}
.cob-grupo li em{margin-left:auto;font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--laranja-texto);background:var(--laranja-tint);border-radius:999px;padding:.18rem .5rem;flex:none;margin-top:1px}
.cob-grupo li.novo .cob-ok{background:var(--laranja-tint);color:var(--laranja-texto)}
.cob-grupo[data-longo]:not(.inteiro):not(.filtrado) li:nth-child(n+9){display:none}
.cob-grupo.filtrado .cob-mais{display:none}
.cob-mais{margin:6px 2px 2px;padding:6px 0;border:0;background:none;font:inherit;font-size:.84rem;font-weight:700;color:var(--accent);cursor:pointer}
.cob-mais:hover{text-decoration:underline}
.cob-vazio{text-align:center;background:#fff;border:1px dashed #DCCDDF;border-radius:16px;padding:28px 20px}
.cob-vazio p{margin-bottom:14px;color:var(--muted)}
.cob-vazio b{color:var(--ink)}
.cob-recolher{display:flex;margin:10px auto 0;height:44px;padding:0 1.3rem;align-items:center;border-radius:999px;border:1px solid var(--line);
  background:#fff;font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer}
.cob-recolher:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:900px){.cob-painel{padding:24px 22px 26px}}
@media(max-width:640px){
  .cob-painel{padding:20px 16px 22px}
  /* os filtros quebram em linhas, porque fileira que arrasta ninguém descobre sozinho */
  .cob-chips{gap:7px;margin:14px 0 2px}
  .cob-chip{height:34px;padding:0 .8rem;font-size:.8rem}
  .cob-grupos{columns:1}
  .cob-novos{margin-left:calc(30px + .7rem)}
}
@media (prefers-reduced-motion:reduce){.plano-longo.aberto .cob-painel{animation:none}}
/* a fileira de filtros é mais larga que a tela no celular e esticava a coluna
   inteira do cartão. Com o mínimo em zero, ela rola por dentro e o resto fica no lugar */
.plano-longo>*{min-width:0}
@media(max-width:900px){.plano-longo{grid-template-columns:minmax(0,1fr)}}

/* =========================================================
   A ESCADA DOS PLANOS NO CELULAR, 18/09/2026
   A tabela de seis colunas some no celular e entra a escada. Um
   trilho liga os cinco degraus, cada degrau diz o que soma ao
   anterior num destaque laranja, e o PLATINUM fica escuro como
   no carrossel da home. Tocar num degrau desce até o plano.
   ========================================================= */
.escada{display:none}
@media(max-width:640px){
  .tabela{display:none}
  .escada{display:grid;gap:10px;list-style:none;position:relative;margin:0 0 44px}
  .escada::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;border-radius:2px;
    background:linear-gradient(var(--tint),var(--accent))}
  .degrau{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
    background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 14px 14px 12px;color:var(--ink);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .2s ease}
  .degrau:active{transform:scale(.98)}
  .deg-n{width:32px;height:32px;border-radius:50%;background:var(--tint);color:var(--accent);display:grid;place-items:center;
    font-weight:700;font-size:.85rem;position:relative;z-index:1;box-shadow:0 0 0 4px var(--bg-2)}
  .deg-txt{min-width:0;display:grid;gap:2px}
  .deg-txt b{font-size:1rem;letter-spacing:.02em}
  .deg-txt small{font-size:.74rem;color:var(--muted)}
  .deg-txt em{justify-self:start;font-style:normal;font-size:.8rem;font-weight:600;color:var(--laranja-texto);
    background:var(--laranja-tint);border-radius:8px;padding:.2rem .5rem;margin-top:3px;line-height:1.3}
  .deg-preco{text-align:right;font-weight:700;font-size:1rem;white-space:nowrap}
  .deg-preco small{display:block;font-size:.7rem;font-weight:500;color:var(--muted)}
  .topo-escada{background:var(--dark);border-color:var(--dark);color:#fff}
  .topo-escada .deg-n{background:var(--laranja);color:var(--ink)}
  .topo-escada .deg-txt small,.topo-escada .deg-preco small{color:rgba(255,255,255,.62)}
  .topo-escada .deg-txt em{background:rgba(249,114,5,.18);color:#FFB27A}
}

/* =========================================================
   AS FOTOS DOS PLANOS NO CELULAR, 18/09/2026
   A foto é vertical e a caixa era deitada em 16:9, então sobrava o
   pedaço de cima, com a cabeça cortada embaixo. Agora a caixa é 4:3
   e a foto se posiciona um pouco acima do meio, onde fica o rosto.
   ========================================================= */
@media(max-width:900px){
  .plano-longo>.foto{position:relative;aspect-ratio:4/3;min-height:0;height:auto}
  .plano-longo>.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
}

/* =========================================================
   OS PETS ESPIANDO O QUADRO DO APP, pedido seu em 19/09/2026
   Primeira tentativa, carinhas redondas três de cada lado do título,
   foi recusada por poluir o hero. Agora o título fica limpo e os pets
   espiam por cima da borda do quadro do app, com o queixo escondido
   atrás dele. É o mesmo gesto do pug do site antigo, que aparece
   espiando com as patinhas na borda.
   Os adesivos são seus, feitos no ChatGPT, e moram em assets/carinhas.
   Eles sobem um de cada vez quando o quadro entra na tela, numa mola
   com um pouco de passo, e no hover o bicho estica o pescoço.
   No celular ficam três, os do meio.
   ========================================================= */
.espiam{position:relative;height:0;max-width:1060px;margin:170px auto 0;z-index:0}
.espiam + .app{margin-top:0}
/* --w é a largura de verdade, e o queixo que some atrás do quadro é só 12% dela */
.espiam img{--w:var(--t);position:absolute;left:var(--l);bottom:calc(var(--w) * -.12);width:var(--w);height:auto;
  transform:translate(-50%,100%) rotate(var(--r));
  transition:transform .9s cubic-bezier(.34,1.5,.64,1) calc(var(--i) * .12s);
  filter:drop-shadow(0 10px 14px rgba(34,9,31,.22));pointer-events:auto;will-change:transform}
.espiam.dentro img{transform:translate(-50%,0) rotate(var(--r))}
.espiam.dentro img:hover{transform:translate(-50%,-10px) rotate(calc(var(--r) * -1));transition-delay:0s;transition-duration:.45s}
@media(max-width:900px){
  .espiam img{--w:calc(var(--t) * .8)}
}
@media(max-width:640px){
  .espiam{margin-top:130px}
  .espiam img:nth-child(1),.espiam img:nth-child(5){display:none}
  .espiam img{--w:calc(var(--t) * .78)}
  .espiam img:nth-child(2){left:20%}
  .espiam img:nth-child(3){left:50%}
  .espiam img:nth-child(4){left:80%}
}
@media (prefers-reduced-motion:reduce){
  .espiam img,.espiam.dentro img{transition:none;transform:translate(-50%,0) rotate(var(--r))}
}

/* === SELETOR DE IDIOMA PT EN ES ===
   Três pílulas discretas. A língua da página fica com fundo suave e opacidade total,
   as outras ficam mais apagadas. No computador mora no cabeçalho, antes dos botões,
   e no celular mora no topo do menu. O alvo de toque chega a 40px pelo ::before.
   Só opacity muda na transição. */
.lang-sw{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--bg-2);
  border:1px solid var(--line);flex:none}
.lang-sw a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:30px;padding:0 .6rem;
  border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.05em;line-height:1;color:var(--ink);opacity:.55;
  transition:opacity .2s ease}
.lang-sw a::before{content:"";position:absolute;inset:-5px -1px}
.lang-sw a:hover{opacity:.9}
.lang-sw a[aria-current]{background:var(--tint);color:var(--accent);opacity:1}
.lang-sw a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;opacity:1}
.lang-sw-menu{display:flex;width:100%;margin:0 0 14px;padding:4px;gap:4px}
.lang-sw-menu a{flex:1;height:40px;font-size:.88rem}
.lang-sw-menu a::before{inset:-2px 0}
@media(max-width:1100px){.topo-dir .lang-sw{display:none}}
@media(min-width:1101px){.lang-sw-menu{display:none}}
@media (prefers-reduced-motion:reduce){.lang-sw a{transition-duration:.01s}}
/* o seletor ocupa espaço no cabeçalho, então os links ficam numa linha só e o respiro encolhe nas larguras médias */
.topo .links a,.topo .cliente{white-space:nowrap}
.topo .wrap{gap:1rem}.links{gap:1.3rem}.topo-dir{gap:.8rem}
@media(max-width:1200px){.links{gap:.95rem;font-size:.88rem}.cliente{font-size:.86rem}}
@media(max-width:1160px){.links{gap:.7rem;font-size:.84rem}.cliente{font-size:.82rem}.lang-sw a{min-width:32px;padding:0 .45rem}}

/* a tarja da prévia, igual à da Open Net. Sai quando o contrato fechar */
.faixa-previa{position:relative;z-index:62;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px;
  background:#1C1020;color:rgba(255,255,255,.72);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 16px;text-align:center}
.faixa-previa b{color:#fff;font-weight:600}
.faixa-previa i{font-style:normal;opacity:.45}
.faixa-previa a{color:#FFB27A;font-weight:600;text-decoration:none}
.assinatura-previa{flex-basis:100%;opacity:.8}
.assinatura-previa a{color:var(--accent);font-weight:600}
@media(max-width:520px){.faixa-previa{letter-spacing:.06em;font-size:.66rem}}