/* Variáveis que o JS muda a cada quadro (brilho dos cards, mouse): não herdáveis. Sem isso, cada mudança faz o
   navegador recalcular o estilo do card inteiro e de tudo dentro dele (era o que travava a rolagem no celular). */
@property --sx { syntax: '<length>'; inherits: false; initial-value: -999px; }
@property --sy { syntax: '<length>'; inherits: false; initial-value: -999px; }
@property --perto { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --hx { syntax: '<length>'; inherits: false; initial-value: -999px; }
@property --hy { syntax: '<length>'; inherits: false; initial-value: -999px; }

/* Confia — estilos do site. tokens.css e componentes.css vêm do design system e não são editados aqui. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { min-width: 320px; }
img, svg { display: block; }
h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
ul { padding: 0; list-style: none; }
a { color: var(--link); }
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.cf-btn:focus-visible, .cf-icon-btn:focus-visible { border-radius: var(--radius-full); }

/* Marca de pendência: some antes de ligar o domínio (grep -r 'class="pendente"' public) */
.pendente { outline: 1.5px dashed var(--warning); outline-offset: 2px; border-radius: 4px; cursor: help; }
.cf-card-feature .pendente, .rodape .pendente { outline-color: #ffc857; }

.pular { position: absolute; left: var(--space-4); top: -60px; z-index: 50; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--ink); color: var(--surface); text-decoration: none; }
.pular:focus { top: var(--space-3); }

.moldura { width: 100%; max-width: calc(var(--content-max) + 2 * var(--space-10)); margin-inline: auto; padding-inline: var(--space-10); }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 30; background: var(--surface); transition: box-shadow .2s ease-out; }
.topo.rolou { box-shadow: 0 1px 0 var(--line), var(--shadow-sm); }
.topo.rolou .topo__barra { height: 64px; }
/* o que a barra perde vira margem embaixo: a altura total fica igual e o conteúdo não se desloca
   (sem isso a rolagem era corrigida pelo navegador e o topo ficava encolhendo e voltando sem parar) */
.topo { transition: box-shadow .2s ease-out, margin-bottom .2s ease-out; }
.topo.rolou { margin-bottom: 12px; }
@media (max-width: 1020px) { .topo.rolou { margin-bottom: 0; } .topo.rolou .topo__barra { height: 64px; } }
.topo__barra { display: flex; align-items: center; gap: var(--space-6); height: 76px; transition: height .2s ease-out; max-width: calc(var(--content-max) + 2 * var(--space-10)); margin-inline: auto; padding-inline: var(--space-10); }
.topo__marca { flex: none; border-radius: 6px; }
.logo-h { height: 40px; width: auto; }
.logo-w { display: none; height: 22px; width: auto; }
.topo__nav { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.topo__nav > a:not(.cf-btn) { color: var(--ink); text-decoration: none; padding: var(--space-2) 0; background: linear-gradient(var(--verde), var(--verde)) 0 100% / 0 2px no-repeat; transition: background-size .2s ease-out; }
.topo__nav > a:not(.cf-btn):hover { background-size: 100% 2px; }
.topo__assinar { flex: none; }
.topo__abrir { display: none; }

@media (max-width: 1020px) {
  .topo__barra { gap: var(--space-3); height: 64px; padding-inline: var(--space-5); }
  .logo-h { display: none; }
  .logo-w { display: block; }
  .topo__assinar { margin-left: auto; }
  .topo__abrir { display: inline-grid; }
  .topo__nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: var(--space-2) var(--space-5) var(--space-6); background: var(--surface); box-shadow: var(--shadow-lg); border-top: 1px solid var(--line); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s .18s; }
  .topo__nav > a:not(.cf-btn) { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); background: none; font-size: 16px; }
  .topo__central { margin-top: var(--space-5); height: var(--control-md); }
  .topo.aberto .topo__nav { visibility: visible; opacity: 1; transform: none; transition: opacity .18s ease-out, transform .18s ease-out; }
  .moldura { padding-inline: var(--space-5); }
}

/* ---------- Banner rotativo ---------- */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sorriso { position: absolute; fill: var(--verde); pointer-events: none; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.vitrine { padding-block: var(--space-6) var(--space-8); }
.vitrine__palco { display: grid; border-radius: var(--radius-xl); overflow: hidden; touch-action: pan-y; box-shadow: var(--shadow-sm); }
.slide { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1.05fr; min-height: clamp(460px, 64vh, 600px); visibility: hidden; opacity: 0; transition: opacity .5s ease, visibility 0s .5s; }
.slide.ativo { z-index: 1; visibility: visible; opacity: 1; transition: opacity .5s ease; }
/* o slide que sai fica opaco por baixo enquanto o novo aparece: o fundo não vaza na troca */
.slide.saindo { z-index: 0; visibility: visible; opacity: 1; transition: none; }
.slide__texto { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(28px, 5vw, 64px); }
.slide .overline { text-transform: uppercase; }
.slide__titulo { font-size: clamp(42px, 5.4vw, 80px); line-height: .95; margin: var(--space-4) 0 var(--space-5); }
.slide__apoio { max-width: 26em; }
.slide .acoes { margin-top: var(--space-8); }
.slide--marinho .slide__texto { background: var(--marinho); color: var(--creme); }
.slide--marinho .overline { color: var(--lima); }
.slide--marinho .slide__apoio { color: #c9d1c0; }
.slide--lima .slide__texto { background: var(--lima); color: var(--marinho); }
.slide--violeta .slide__texto { background: var(--violeta); color: var(--creme); }
.slide--violeta .overline { color: var(--lima); }
.slide--creme .slide__texto { background: var(--surface-raised); color: var(--ink); }
.slide--creme .overline { color: var(--primary-text); }
.slide--creme .slide__apoio { color: var(--ink-muted); }
.slide__foto { position: relative; overflow: hidden; background: var(--verde); min-height: 260px; }
.slide__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -8px); transition: translate .4s ease-out; }
.slide.ativo .slide__texto > * { animation: entra .7s cubic-bezier(.2, .8, .2, 1) both; }
.slide.ativo .slide__texto > :nth-child(2) { animation-delay: .07s; }
.slide.ativo .slide__texto > :nth-child(3) { animation-delay: .14s; }
.slide.ativo .slide__texto > :nth-child(4) { animation-delay: .21s; }
.slide.ativo .slide__texto > :nth-child(5) { animation-delay: .28s; }
.slide__parceiro { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); color: var(--ink-subtle); text-transform: uppercase; letter-spacing: .16em; }
.slide__parceiro img { height: 30px; width: auto; }
.slide__parceiro + .acoes { margin-top: var(--space-6); }
.beneficio__titulo-logo { display: flex; align-items: center; gap: var(--space-2); }
.beneficio__titulo-logo img { flex: none; width: 28px; height: 28px; }
.slide.ativo .slide__foto img { animation: foto 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes foto { from { opacity: 0; transform: translateX(7%) scale(1.06); } to { opacity: 1; transform: none; } }

.vitrine__controles { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.vitrine__pontos { display: flex; align-items: center; gap: var(--space-1); }
.ponto { border: 0; background: none; padding: 12px 4px; cursor: pointer; }
.ponto span { position: relative; display: block; width: 24px; height: 6px; overflow: hidden; border-radius: var(--radius-full); background: var(--cinza); transition: width .3s cubic-bezier(.2, .8, .2, 1); }
.ponto:hover span { background: var(--line-strong); }
.ponto[aria-current="true"] span { width: 64px; background: var(--cinza); }
.ponto[aria-current="true"] span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; animation: progresso var(--tempo, 7s) linear forwards; }
.vitrine.pausada .ponto span::after { animation-play-state: paused; }
.vitrine.parada .ponto[aria-current="true"] span::after { animation: none; transform: none; }
@keyframes progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vitrine__pausa { margin-left: auto; }

@media (max-width: 900px) {
  .vitrine { padding-top: var(--space-4); }
  .slide { grid-template-columns: 1fr; grid-template-rows: clamp(240px, 64vw, 360px) auto; min-height: 0; }
  .slide__foto { order: -1; }
  .slide__texto { padding: var(--space-6) var(--space-6) var(--space-8); }
  .slide__titulo { margin-block: var(--space-3) var(--space-4); }
  .slide .acoes { margin-top: var(--space-6); }
}
@media (max-width: 420px) { .acoes .cf-btn { width: 100%; } }

/* Faixa corrida: o JS duplica o conteúdo para a volta não ter emenda */
.faixa-moldura { overflow: hidden; padding-block: var(--space-8); }
.faixa { overflow: hidden; background: var(--lima); color: var(--marinho); padding-block: var(--space-4); margin-inline: -24px; transform: rotate(-1.2deg); }
.faixa__trilho { display: flex; align-items: center; gap: var(--space-6); width: max-content; animation: corre 45s linear infinite; }
.faixa:hover .faixa__trilho { animation-play-state: paused; }
.faixa span { font-size: clamp(20px, 2.3vw, 30px); line-height: 1; white-space: nowrap; }
.faixa i { flex: none; width: 34px; height: 18px; background: var(--marinho); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 201.83 105.12'%3E%3Cpath d='M201.83 52.54C182.71 84.06 148.07 105.12 108.51 105.12C52.05 105.12 5.61 62.23 0 7.26L51.4 0C53.43 29.77 78.22 53.29 108.51 53.29C129.52 53.29 147.88 41.98 157.83 25.11L201.83 52.54Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 201.83 105.12'%3E%3Cpath d='M201.83 52.54C182.71 84.06 148.07 105.12 108.51 105.12C52.05 105.12 5.61 62.23 0 7.26L51.4 0C53.43 29.77 78.22 53.29 108.51 53.29C129.52 53.29 147.88 41.98 157.83 25.11L201.83 52.54Z'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes corre { to { transform: translateX(-50%); } }

/* Entrada ao rolar (o JS põe .js no html e tira a classe depois da animação) */
.js .revela { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.js .revela.visivel { opacity: 1; transform: none; }

/* ---------- Seções ---------- */
.secao { padding-block: var(--space-16); }
.secao__cabeca { max-width: 46rem; margin-bottom: var(--space-10); }
.secao__cabeca .heading-xl { margin-top: var(--space-3); }
.secao__apoio { margin-top: var(--space-4); color: var(--ink-muted); }
@media (max-width: 640px) {
  .secao { padding-block: var(--space-12); }
  .heading-xl { font-size: 30px; line-height: 38px; }
}

/* Incluso em todos os planos */
.todos { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.todos li { display: flex; align-items: center; gap: var(--space-2); }
.todos .cf-icon { color: var(--primary-text); }

/* Planos */
.planos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.plano { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.plano > .overline { position: relative; }
.plano__nome { position: relative; margin-top: calc(-1 * var(--space-3)); }
.plano__vel { position: relative; margin-top: calc(-1 * var(--space-3)); color: var(--ink-subtle); }
.plano__itens { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.plano__itens li { display: flex; gap: var(--space-2); }
.plano__itens .cf-icon { flex: none; margin-top: 1px; color: var(--primary-text); }
.cf-card-feature .plano__itens .cf-icon { color: var(--verde); }
.escolha__titulo { color: var(--ink-subtle); margin-bottom: var(--space-2); }
.escolha__opcoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.escolha__opcoes .cf-badge { height: 28px; }
.plano__preco { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.plano__preco .amount-xl { font-size: 34px; line-height: 40px; }
.plano__depois { margin-top: var(--space-1); color: var(--ink-subtle); }
.plano__arte { width: 150px; top: -54px; right: -46px; }
.planos__nota { margin-top: var(--space-5); color: var(--ink-subtle); }
.plano__selo { position: relative; line-height: 0; }
.escolha__opcoes .app { padding-left: 4px; gap: 6px; }
.app img { width: 20px; height: 20px; border-radius: var(--radius-full); }

@media (max-width: 1100px) { .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .planos { grid-template-columns: 1fr; }
  .todos { padding: var(--space-4); gap: var(--space-3) var(--space-5); }
}

/* Benefícios */
.beneficios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.beneficio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.beneficio .body { color: var(--ink-muted); flex: 1; }
.beneficio .cf-btn { margin-left: calc(-1 * var(--space-4)); }
.beneficio--foto { padding: 0; gap: 0; }
.beneficio__foto { align-self: stretch; aspect-ratio: 1.3; overflow: hidden; background: var(--verde); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.beneficio__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transform-origin: center bottom; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.beneficio__foto--espelho img { scale: -1 1; }
.beneficio__corpo { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.beneficio__icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--lima); color: var(--marinho); margin-bottom: var(--space-1); }
@media (max-width: 900px) { .beneficios { grid-template-columns: 1fr; } }
/* Serviços para a sua casa: cards com capa colorida (sem pessoa), como os benefícios de cima */
.servicos__rotulo { margin: var(--space-16) 0 var(--space-6); }
.servicos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.servico { padding: 0; gap: 0; }
.servico .beneficio__corpo { gap: var(--space-3); }
.servico .body { flex: none; }
.servico__capa { position: relative; align-self: stretch; aspect-ratio: 1.9; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }
.servico__capa--verde { background: var(--verde); color: var(--marinho); }
.servico__capa--marinho { background: var(--marinho); }
.servico__capa--lima { background: var(--lima); color: var(--marinho); }
.servico__capa--violeta { background: var(--violeta); }
.servico__sorriso { width: 74%; right: -22%; bottom: -26%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.servico__capa--verde .servico__sorriso { fill: #ffffff; }
.servico__capa--lima .servico__sorriso { fill: var(--verde); }
.servico__capa--violeta .servico__sorriso { fill: var(--lima); opacity: .9; }
.servico__selo { position: relative; justify-self: start; align-self: flex-start; margin: var(--space-6) auto 0 var(--space-6); font-size: clamp(40px, 4vw, 56px); line-height: .95; text-transform: uppercase; }
.servico__apps { position: relative; display: flex; justify-content: center; gap: var(--space-2); }
.servico__apps img { width: clamp(40px, 3.6vw, 52px); height: auto; border-radius: var(--radius-full); box-shadow: 0 0 0 2px rgba(239, 253, 216, .18), 0 8px 18px -8px rgba(0, 0, 0, .6); }
.servico__icone { position: relative; display: grid; place-items: center; width: 80px; height: 80px; margin-right: 12%; border-radius: var(--radius-full); background: var(--marinho); color: var(--lima); }
.servico__icone svg { fill: none; stroke: currentColor; }
.servico__app-grande { position: relative; width: 84px; height: 84px; margin-right: 12%; border-radius: 20px; box-shadow: 0 0 0 2px rgba(239, 253, 216, .3), 0 12px 24px -10px rgba(0, 0, 0, .55); }
.servico__inclui { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; margin: var(--space-1) 0 var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--ink); }
.servico__inclui li { display: flex; align-items: flex-start; gap: var(--space-2); }
.servico__inclui .cf-icon { flex: none; margin-top: 1px; color: var(--primary-text); }
.servico__preco { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.servico__preco .amount-xl { font-size: 32px; line-height: 1.1; }
.servico__preco .body-sm { color: var(--ink-subtle); }
.servico .lojas { margin-top: auto; }
.servico .beneficio__corpo > .cf-btn { margin-top: auto; }
@media (hover: hover) { .servico:hover .servico__sorriso { transform: translate(-6%, -6%) rotate(-6deg); } }
@media (max-width: 1100px) { .servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .servicos { grid-template-columns: 1fr; } .servicos__rotulo { margin-top: var(--space-12); } .servico__capa { aspect-ratio: 2.2; } }
@media (prefers-reduced-motion: reduce) { .servico__sorriso { transition: none; } }

/* Sobre: marinho, foto inteira com um sorriso verde sangrando */
.sobre { position: relative; overflow: hidden; background: var(--marinho); color: var(--creme); padding: 112px var(--space-10); }
.sobre__grade { position: relative; max-width: var(--content-max); margin-inline: auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-16); align-items: center; }
.sobre .overline { color: var(--lima); }
.sobre .heading-xl { margin-top: var(--space-3); }
.sobre strong { font-weight: 700; color: var(--verde); }
.sobre__texto { margin-top: var(--space-6); color: #c9d1c0; display: flex; flex-direction: column; gap: var(--space-4); }
.sobre__texto p:last-child { color: var(--creme); }
.sobre__sorriso { width: clamp(200px, 22vw, 320px); top: -40px; left: -70px; transform: rotate(180deg); }
.sobre__foto { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-xl); aspect-ratio: 4 / 3.4; }
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.sobre__foto .sorriso { width: 48%; left: -14%; bottom: -12%; }
@media (max-width: 900px) {
  .sobre { padding: 96px var(--space-5) var(--space-16); }
  .sobre__grade { grid-template-columns: 1fr; gap: var(--space-10); }
  .sobre__sorriso { width: 180px; top: -30px; left: -60px; }
}

/* Contato */
.contato { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); align-items: start; }
.contato .cf-listitem { min-height: 76px; padding-inline: var(--space-5); }
.cobertura { display: flex; flex-direction: column; gap: var(--space-4); }
.cobertura__arte { width: 240px; right: -64px; top: -82px; fill: #ffffff; }
.cobertura__icone { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--marinho); color: var(--verde); }
.cobertura__titulo { position: relative; max-width: 70%; }
.cobertura__apoio { position: relative; max-width: 30em; }
.cobertura__campos { position: relative; display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-3); }
.cobertura .cf-field-msg { color: var(--marinho); }
.cobertura .cf-field-error .cf-field-msg { font-weight: 700; }
.cobertura .cf-btn { position: relative; margin-top: var(--space-2); }
@media (max-width: 900px) { .contato { grid-template-columns: 1fr; } }

/* Rodapé */
.rodape { background: var(--marinho); color: var(--creme); padding: var(--space-16) var(--space-5) var(--space-8); }
.rodape a { color: var(--creme); }
.rodape__miolo { max-width: var(--content-max); margin-inline: auto; display: grid; grid-template-columns: auto 1fr 1fr; gap: var(--space-12); align-items: start; }
.rodape__logo { width: 156px; height: auto; }
.rodape__links { display: flex; flex-direction: column; gap: var(--space-3); }
.rodape__links a { text-decoration: none; }
.rodape__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape__contato { display: flex; flex-direction: column; gap: var(--space-2); color: #c9d1c0; }
.rodape__legal { max-width: var(--content-max); margin: var(--space-12) auto 0; padding-top: var(--space-6); border-top: 1px solid #2a3b50; color: #a9b2bb; }
.rodape :focus-visible { box-shadow: 0 0 0 2px var(--marinho), 0 0 0 4px var(--lima); }
@media (max-width: 760px) { .rodape__miolo { grid-template-columns: 1fr; gap: var(--space-8); } .rodape__logo { width: 132px; } }

/* Página Negócios */
.negocio-topo { padding-block: var(--space-12) var(--space-8); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-10); align-items: end; }
.negocio-topo .overline { color: var(--primary-text); }
.negocio-topo .display-xl { font-size: clamp(40px, 5.4vw, 74px); line-height: .98; margin: var(--space-4) 0 var(--space-5); }
.negocio-topo .body-lg { color: var(--ink-muted); max-width: 32em; }
.negocio-faixa { position: relative; overflow: hidden; height: 100%; min-height: 300px; max-height: 460px; margin: 0; border-radius: var(--radius-xl); background: var(--marinho); }
.negocio-faixa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.negocio-faixa .sorriso { width: 40%; right: -12%; bottom: -14%; }
.pme-beneficios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.pme-beneficios .beneficio .body { flex: none; }
.porque { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }

.porque p { color: var(--ink-muted); }
.planos--pme { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.planos--pme .plano__nome { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.1; margin-top: calc(-1 * var(--space-2)); }
.plano__condicao { position: relative; color: var(--ink-subtle); margin-top: calc(-1 * var(--space-3)); }
@media (max-width: 900px) {
  .negocio-topo { grid-template-columns: 1fr; }
  .negocio-faixa { min-height: 180px; }
  .pme-beneficios, .planos--pme { grid-template-columns: 1fr; }
  .porque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .porque { grid-template-columns: 1fr; }
}
@media (min-width: 621px) and (max-width: 1100px) { .planos--pme { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .topo__nav, .topo__nav > a { transition: none !important; }
}

/* Política de privacidade */
.politica { max-width: calc(46rem + 2 * var(--space-10)); padding-block: var(--space-12) var(--space-16); }
.politica h1 { margin-top: var(--space-3); }
.politica__abertura { margin-top: var(--space-5); color: var(--ink-muted); }
.politica__data { margin-top: var(--space-3); color: var(--ink-subtle); }
.politica section { margin-top: var(--space-10); display: flex; flex-direction: column; gap: var(--space-3); }
.politica section .body { color: var(--ink-muted); }
.politica strong { color: var(--ink); font-weight: 600; }
.politica__lista { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-5); list-style: disc; color: var(--ink-muted); }
.politica__lista li::marker { color: var(--primary-text); }
.politica__contato { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.politica__contato li { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .politica__contato li { grid-template-columns: 1fr; gap: 0; } }

/* Cartões que respondem ao mouse */
.plano, .beneficio, .porque__item, .pme-beneficios > .beneficio { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease-out; }
@media (hover: hover) {
  .plano:hover, .beneficio:hover, .porque__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .beneficio:hover .beneficio__foto img { transform: scale(1.05); }
  .beneficio:hover .beneficio__icone, .porque__item:hover .beneficio__icone { transform: rotate(-8deg) scale(1.08); }
}
.beneficio__icone { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }

/* Opções dos planos: o cliente monta o plano e a escolha vai na mensagem */
.planos__dica { margin: calc(-1 * var(--space-2)) 0 var(--space-5); color: var(--ink-subtle); }
.escolha__opcoes { align-items: center; }
.escolha__ou { color: var(--ink-subtle); }
.opcao { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-3); border: 1.5px solid var(--line); border-radius: var(--radius-full); background: transparent; color: var(--ink); font: 600 13px/1.2 var(--font-sans); text-align: left; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, transform .1s ease-out; }
.opcao:hover { border-color: var(--ink); }
.opcao:active { transform: scale(.95); }
.opcao[aria-pressed="true"] { background: var(--lima); border-color: var(--lima); color: var(--marinho); }
.opcao--logo { padding-left: 6px; }
.opcao--logo img { width: 22px; height: 22px; border-radius: var(--radius-full); }
.opcao--app { justify-content: center; width: 46px; height: 46px; padding: 0; border-width: 2px; border-color: transparent; }
.opcao--app img { width: 36px; height: 36px; border-radius: var(--radius-full); }
.opcao--app:hover { border-color: var(--line-strong); }
.opcao--app[aria-pressed="true"] { background: transparent; border-color: var(--primary-text); }
.opcao--app[aria-pressed="true"]::after { content: ""; position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1a28' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: 0 0 0 2px var(--surface-raised); animation: estala .25s cubic-bezier(.2, .8, .2, 1.4); }
.cf-card-feature .opcao { border-color: rgba(239, 253, 216, .35); color: var(--creme); }
.cf-card-feature .opcao:hover { border-color: var(--creme); }
.cf-card-feature .opcao[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: var(--marinho); }
.cf-card-feature .opcao--app { border-color: transparent; }
.cf-card-feature .opcao--app[aria-pressed="true"] { border-color: var(--verde); background: transparent; }
.cf-card-feature .opcao--app[aria-pressed="true"]::after { box-shadow: 0 0 0 2px var(--marinho); }
.plano__pedido { margin-top: calc(-1 * var(--space-2)); color: var(--ink-subtle); min-height: 16px; }
.cf-card-feature .plano__pedido { color: var(--lima); }
.plano__assinar.pulsa { animation: pulsa .45s cubic-bezier(.2, .8, .2, 1.4); }
@keyframes estala { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes pulsa { 40% { transform: scale(1.04); } }

/* Planos no celular: lado a lado com rolagem lateral */
.rolagem__pontos { display: none; }
@media (max-width: 620px) {
  .planos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-3); margin-inline: calc(-1 * var(--space-5)); padding: var(--space-2) var(--space-5) var(--space-4); scroll-padding-inline: var(--space-5); scrollbar-width: none; overscroll-behavior-x: contain; }
  .planos::-webkit-scrollbar { display: none; }
  .planos { overflow-y: hidden; } /* só rolagem lateral, nunca vertical dentro da lista */
  .planos > .plano { flex: 0 0 84%; scroll-snap-align: start; }
  .planos { align-items: flex-start; }
  /* "Em todos os planos" no celular: pílulas centralizadas que se acomodam em linhas equilibradas (sem quebrar texto) */
  .todos { justify-content: center; gap: var(--space-2); padding: var(--space-4); }
  .todos li { gap: 6px; padding: 7px var(--space-3) 7px 10px; border-radius: var(--radius-full); background: rgba(172, 245, 131, .38); white-space: nowrap; }
  .todos .cf-icon { flex: none; width: 18px; height: 18px; }
  .pagina-negocios .todos li { background: var(--accent-soft); }
  .planos__dica { text-align: center; }
  .rolagem__pontos { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-2); }
  .rolagem__pontos span { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--cinza); transition: width .25s ease-out, background-color .25s; }
  .rolagem__pontos span.ativo { width: 24px; background: var(--ink); }
}

/* Por que a Confia Negócios */
.porque__item { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.porque__item .heading-sm { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .slide, .slide.ativo, .slide__foto img { transition: none; }
  .slide.ativo .slide__texto > *, .slide.ativo .slide__foto img { animation: none; }
  .faixa__trilho { animation: none; }
  .js .revela { opacity: 1; transform: none; transition: none; }
  .plano, .beneficio, .porque__item, .beneficio__foto img, .beneficio__icone { transition: none; }
  .opcao--app[aria-pressed="true"]::after, .plano__assinar.pulsa { animation: none; }
}

/* Ícone do app Confia Security (quadrado arredondado, como na loja) */
.app-icone, .opcao--logo img.app-icone { border-radius: 6px; }
.slide__app img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(239, 253, 216, .25); }
.beneficio__app { width: 48px; height: 48px; border-radius: 12px; margin-bottom: var(--space-1); }
.pme-beneficios .beneficio .cf-btn { margin-left: calc(-1 * var(--space-4)); }

/* Pílula combinada do Maxx: ocupa a linha inteira */
.opcao--combo { flex-basis: 100%; justify-content: center; padding-inline: var(--space-3); }
.opcao__mais { margin-inline: var(--space-1); opacity: .6; font-weight: 500; }
.lojas { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-left: calc(-1 * var(--space-4)); }
.pme-beneficios .lojas .cf-btn { margin-left: 0; }

/* =====================================================================
   Página Confia Negócios: tema escuro do design system (data-theme="dark"),
   violeta como acento (o DS reserva o violeta para materiais empresariais)
   e o sorriso rolando atrás do conteúdo.
   ===================================================================== */
.pagina-negocios body { background: var(--surface); }
.pagina-negocios main, .pagina-negocios .rodape { position: relative; z-index: 1; }
.pagina-negocios .topo { background: rgba(13, 26, 40, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.pagina-negocios .topo.rolou { box-shadow: 0 1px 0 var(--line); }
.pagina-negocios .topo__nav > a:not(.cf-btn) { background-image: linear-gradient(var(--accent), var(--accent)); }
@media (max-width: 1020px) { .pagina-negocios .topo__nav { background: var(--surface); } }

/* Sorriso de fundo */
.sorriso-palco { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.sorriso-fundo { position: absolute; top: 0; left: 0; will-change: transform; transform-origin: 50% 50%; backface-visibility: hidden; }
.sorriso-fundo--a { width: min(78vw, 1150px); fill: var(--violeta); opacity: .55; }
.sorriso-fundo--b { width: min(40vw, 560px); fill: var(--verde); opacity: .16; }

/* Vidro: o card deixa o sorriso aparecer desfocado e acende a borda onde ele passa */
/* Cores do vidro em variáveis: escuro (Negócios) por padrão; a página de casa troca para o claro */
.vidro { --vidro-fundo: rgba(22, 38, 56, .66); --vidro-solido: rgba(22, 38, 56, .9); --vidro-borda: rgba(239, 253, 216, .08); --vidro-luz: rgba(157, 143, 255, .95); --vidro-luz-0: rgba(157, 143, 255, 0); --vidro-tinta: rgba(70, 43, 229, .22); --vidro-mouse: rgba(239, 253, 216, .07);
  position: relative; isolation: isolate; background: var(--vidro-fundo) !important; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid var(--vidro-borda); box-shadow: 0 1px 0 rgba(239, 253, 216, .04) inset, var(--shadow-sm); }
.vidro::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none; background: radial-gradient(420px circle at var(--sx, -999px) var(--sy, -999px), var(--vidro-luz), var(--vidro-luz-0) 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: var(--perto, 0); }
.vidro::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(520px circle at var(--sx, -999px) var(--sy, -999px), var(--vidro-tinta), transparent 60%), radial-gradient(360px circle at var(--hx, -999px) var(--hy, -999px), var(--vidro-mouse), transparent 60%); opacity: 1; }
.cf-card-feature.vidro { background: rgba(28, 47, 69, .78) !important; border-color: rgba(157, 143, 255, .45); }
.todos.vidro { border-color: rgba(239, 253, 216, .1); }

/* Acentos sóbrios */
.pagina-negocios .beneficio__icone { background: var(--accent-soft); color: var(--accent); }
.pagina-negocios .todos .cf-icon, .pagina-negocios .plano__itens .cf-icon { color: var(--accent); }
.pagina-negocios .cf-card-feature .plano__itens .cf-icon { color: var(--verde); }
.pagina-negocios .opcao[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.pagina-negocios .cf-card-feature .opcao[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--creme); }
.pagina-negocios .plano__pedido { color: var(--accent); }
.pagina-negocios .cf-card-feature .plano__pedido { color: var(--lima); }
.pagina-negocios .rodape { background: #091320; border-top: 1px solid var(--line); }
.beneficio__app--kas { border-radius: 0; }
.parceiro { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-subtle); text-transform: uppercase; letter-spacing: .16em; }
.parceiro img { height: 20px; width: auto; }

/* Banner principal */
.banner-pme { padding-block: var(--space-6) var(--space-4); }
.banner-pme__caixa { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; border-radius: var(--radius-xl); min-height: clamp(440px, 60vh, 580px); }
.banner-pme__texto { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(28px, 5vw, 64px); }
.banner-pme__texto .overline { color: var(--accent); }
.banner-pme__titulo { font-size: clamp(40px, 5.2vw, 76px); line-height: .96; margin: var(--space-4) 0 var(--space-5); }
.banner-pme__apoio { color: var(--ink-muted); max-width: 30em; }
.banner-pme__foto { position: relative; margin: 0; min-height: 260px; overflow: hidden; }
.banner-pme__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; animation: foto 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.banner-pme__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 26, 40, .55), rgba(13, 26, 40, 0) 35%); }
.banner-pme__texto > * { animation: entra .7s cubic-bezier(.2, .8, .2, 1) both; }
.banner-pme__texto > :nth-child(2) { animation-delay: .07s; }
.banner-pme__texto > :nth-child(3) { animation-delay: .14s; }
.banner-pme__texto > :nth-child(4) { animation-delay: .21s; }

/* Faixa sóbria */
.faixa--sobria { background: #162638; color: var(--creme); border-block: 1px solid rgba(157, 143, 255, .3); }
.faixa--sobria i { background: var(--verde); }

/* Banner SLA */
.banner-sla { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-10); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-xl); background: var(--violeta); color: var(--creme); position: relative; overflow: hidden; }
.banner-sla .overline { text-transform: uppercase; color: var(--lima); }
.banner-sla h2 { margin: var(--space-3) 0 var(--space-4); font-size: clamp(36px, 4.4vw, 60px); line-height: 1; }
.banner-sla .body-lg { color: rgba(239, 253, 216, .88); max-width: 30em; }
.banner-sla__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.banner-sla__lista li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: rgba(13, 26, 40, .28); border: 1px solid rgba(239, 253, 216, .14); transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .3s; }
.banner-sla__lista li:last-child { background: var(--marinho); border-color: var(--marinho); }
.banner-sla__lista .caption { grid-column: 1 / -1; color: var(--lima); }
@media (hover: hover) { .banner-sla__lista li:hover { transform: translateX(6px); } }

/* Banner final */
.banner-final-moldura { padding-bottom: var(--space-16); }
.banner-final { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-xl); }
.banner-final .heading-xl { margin: var(--space-3) 0 var(--space-3); }
.banner-final .body-lg { color: var(--ink-muted); }

@media (max-width: 900px) {
  .banner-pme__caixa { grid-template-columns: 1fr; }
  .banner-pme__foto { order: -1; height: clamp(220px, 56vw, 340px); }
  .banner-pme__foto::after { background: linear-gradient(0deg, rgba(13, 26, 40, .5), transparent 40%); }
  .banner-sla { grid-template-columns: 1fr; gap: var(--space-6); }
  .banner-final { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .vidro { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vidro-solido) !important; }
  .sorriso-fundo--a { width: 130vw; opacity: .45; }
  .sorriso-fundo--b { width: 70vw; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-pme__foto img, .banner-pme__texto > * { animation: none; }
  .banner-sla__lista li { transition: none; }
}
/* Cards de vidro entram só com movimento: fade + backdrop-filter renderiza errado no Chromium */
.js .vidro.revela { opacity: 1; }

/* =====================================================================
   Página de casa: o mesmo vidro e os sorrisos de fundo, em versão clara e alegre
   (creme, branco translúcido, verde, lima e violeta).
   ===================================================================== */
.pagina-casa main, .pagina-casa .rodape { position: relative; z-index: 1; }
.pagina-casa .topo { background: rgba(239, 253, 216, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@media (max-width: 1020px) { .pagina-casa .topo__nav { background: var(--surface); } }
.pagina-casa .sorriso-fundo--a { fill: var(--verde); opacity: .5; }
.pagina-casa .sorriso-fundo--b { fill: var(--violeta); opacity: .2; }
.pagina-casa .vidro { --vidro-fundo: rgba(255, 255, 255, .52); --vidro-solido: rgba(255, 255, 255, .9); --vidro-borda: rgba(255, 255, 255, .85); --vidro-luz: rgba(77, 195, 69, .95); --vidro-luz-0: rgba(77, 195, 69, 0); --vidro-tinta: rgba(172, 245, 131, .35); --vidro-mouse: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 28px -10px rgba(13, 26, 40, .18); }
/* o Ultra continua o card escuro de destaque, agora como vidro escuro */
.pagina-casa .cf-card-feature.vidro { --vidro-fundo: rgba(13, 26, 40, .86); --vidro-solido: var(--marinho); --vidro-borda: rgba(77, 195, 69, .45); --vidro-tinta: rgba(77, 195, 69, .22); --vidro-mouse: rgba(239, 253, 216, .07); background: var(--vidro-fundo) !important; border-color: var(--vidro-borda); }
.pagina-casa .todos.vidro { border-color: rgba(255, 255, 255, .85); }
.pagina-casa .beneficio--foto.vidro .beneficio__foto { border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }

/* =====================================================================
   Vidro fosco nos banners e no "Sobre nós": os sorrisos de fundo aparecem
   desfocados atrás. Abaixo de 700 px o desfoque sai e a cor fica quase opaca.
   ===================================================================== */
.pagina-casa .slide__texto, .pagina-casa .sobre, .banner-sla {
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
.pagina-casa .slide--marinho .slide__texto { background: rgba(13, 26, 40, .74); }
.pagina-casa .slide--lima .slide__texto { background: rgba(172, 245, 131, .66); }
.pagina-casa .slide--violeta .slide__texto { background: rgba(70, 43, 229, .74); }
.pagina-casa .slide--creme .slide__texto { background: rgba(255, 255, 255, .58); }
.pagina-casa .vitrine__palco { box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 36px -14px rgba(13, 26, 40, .28); }
.pagina-casa .sobre { background: rgba(13, 26, 40, .8); }
.banner-sla { background: rgba(70, 43, 229, .76); border: 1px solid rgba(239, 253, 216, .14); }
@media (max-width: 700px) {
  .pagina-casa .slide__texto, .pagina-casa .sobre, .banner-sla { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pagina-casa .slide--marinho .slide__texto { background: rgba(13, 26, 40, .94); }
  .pagina-casa .slide--lima .slide__texto { background: rgba(172, 245, 131, .92); }
  .pagina-casa .slide--violeta .slide__texto { background: rgba(70, 43, 229, .94); }
  .pagina-casa .slide--creme .slide__texto { background: rgba(255, 255, 255, .9); }
  .pagina-casa .sobre { background: rgba(13, 26, 40, .95); }
  .banner-sla { background: rgba(70, 43, 229, .94); }
}

/* ULTRA: nome em branco puro e vidro escuro mais denso, para não parecer apagado */
.pagina-casa .cf-card-feature.vidro { --vidro-fundo: rgba(13, 26, 40, .92); --vidro-tinta: rgba(77, 195, 69, .14); }
.cf-card-feature .plano__nome { color: #ffffff; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.cf-card-feature .plano__itens li, .cf-card-feature .amount-xl { color: #ffffff; }
/* Painéis escuros sobre a página clara: escurecem o que está atrás (brightness) para o marinho continuar marinho */
.pagina-casa .slide--marinho .slide__texto, .pagina-casa .sobre {
  background: rgba(13, 26, 40, .7); -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(.3); backdrop-filter: blur(18px) saturate(170%) brightness(.3); }
.pagina-casa .slide--violeta .slide__texto {
  background: rgba(70, 43, 229, .72); -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(.7); backdrop-filter: blur(18px) saturate(160%) brightness(.7); }
@media (max-width: 700px) {
  .pagina-casa .slide--marinho .slide__texto, .pagina-casa .sobre, .pagina-casa .slide--violeta .slide__texto { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pagina-casa .slide--marinho .slide__texto, .pagina-casa .sobre { background: rgba(13, 26, 40, .95); }
  .pagina-casa .slide--violeta .slide__texto { background: rgba(70, 43, 229, .94); }
}

/* =====================================================================
   Banner rotativo, troca suave (06/11/2026). Fade no slide inteiro quebra o
   vidro fosco no Chromium (o ancestral com opacity < 1 corta o fundo do
   backdrop-filter). Agora: um único painel de vidro (.vitrine__vidro) que só
   muda de cor; o texto troca por cima dele e as fotos se sobrepõem à direita.
   ===================================================================== */
.vitrine__vidro { grid-area: 1 / 1; z-index: 0; display: none; }
.pagina-casa .vitrine__vidro { display: block; background: rgba(13, 26, 40, .62);
  -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(.3); backdrop-filter: blur(18px) saturate(170%) brightness(.3);
  transition: background-color .6s ease, -webkit-backdrop-filter .6s ease, backdrop-filter .6s ease; }
.pagina-casa .vitrine[data-cor="lima"] .vitrine__vidro { background: rgba(172, 245, 131, .58); -webkit-backdrop-filter: blur(18px) saturate(150%) brightness(1); backdrop-filter: blur(18px) saturate(150%) brightness(1); }
.pagina-casa .vitrine[data-cor="violeta"] .vitrine__vidro { background: rgba(70, 43, 229, .64); -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(.7); backdrop-filter: blur(18px) saturate(160%) brightness(.7); }
.pagina-casa .vitrine[data-cor="creme"] .vitrine__vidro { background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(18px) saturate(150%) brightness(1); backdrop-filter: blur(18px) saturate(150%) brightness(1); }

/* slides sem fade no conjunto: o texto não tem fundo próprio (o vidro está atrás) */
.pagina-casa .slide { opacity: 1; visibility: hidden; transition: none; z-index: 1; }
.pagina-casa .slide.ativo { visibility: visible; z-index: 2; transition: none; }
.pagina-casa .slide.saindo { visibility: visible; z-index: 1; }
.pagina-casa .slide .slide__texto, .pagina-casa .slide--marinho .slide__texto, .pagina-casa .slide--lima .slide__texto,
.pagina-casa .slide--violeta .slide__texto, .pagina-casa .slide--creme .slide__texto {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* texto que sai some rápido; o que entra usa a animação "entra" (com escalonamento) */
.pagina-casa .slide.saindo .slide__texto > * { opacity: 0; transition: opacity .22s ease; animation: none; }
/* foto: a nova aparece por cima; a antiga fica opaca embaixo até a troca terminar */
.pagina-casa .slide .slide__foto { opacity: 0; transition: opacity .6s ease; }
.pagina-casa .slide.ativo .slide__foto { opacity: 1; }
.pagina-casa .slide.saindo .slide__foto { opacity: 1; transition: none; }
.pagina-casa .slide.ativo .slide__foto img { animation: foto-suave 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes foto-suave { from { transform: translateX(4%) scale(1.04); } to { transform: none; } }

@media (max-width: 700px) {
  .pagina-casa .vitrine__vidro { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(13, 26, 40, .95); }
  .pagina-casa .vitrine[data-cor="lima"] .vitrine__vidro { background: rgba(172, 245, 131, .94); }
  .pagina-casa .vitrine[data-cor="violeta"] .vitrine__vidro { background: rgba(70, 43, 229, .95); }
  .pagina-casa .vitrine[data-cor="creme"] .vitrine__vidro { background: rgba(255, 255, 255, .93); }
}
@media (prefers-reduced-motion: reduce) {
  .pagina-casa .vitrine__vidro, .pagina-casa .slide .slide__foto, .pagina-casa .slide.saindo .slide__texto > * { transition: none; }
  .pagina-casa .slide.ativo .slide__foto img { animation: none; }
}

/* Celular: sem desfoque, o vidro claro fica quase opaco (com .9 aparecia a borda do sorriso por trás) */
@media (max-width: 700px) {
  .pagina-casa .vidro { --vidro-solido: rgba(255, 255, 255, .97); }
}
/* Banner no celular: a foto mantém a proporção do recorte, ancorada embaixo, com folga verde em cima
   (antes o cover cortava o topo e a cabeça das pessoas) */
@media (max-width: 900px) {
  .slide { grid-template-rows: auto 1fr; }
  .slide__foto { min-height: 0; aspect-ratio: 1.2; }
  .slide__foto img { top: auto; height: auto; max-height: 100%; object-fit: contain; object-position: center bottom; }
}

/* Links do app Confia Security: sempre os mesmos botões "App Store / Google Play" (.lojas), em todo o site */
.slide__app { text-transform: none; letter-spacing: 0; color: inherit; align-items: flex-start; }
.slide__app > div { display: flex; flex-direction: column; gap: var(--space-1); }
.slide--violeta .lojas .cf-btn-ghost, .slide--marinho .lojas .cf-btn-ghost { color: var(--creme); }
.slide--violeta .lojas .cf-btn-ghost:hover { background: rgba(239, 253, 216, .14); }
.lojas .cf-btn { margin-left: 0 !important; }
/* Banner no celular: texto alinhado logo abaixo da foto (sem vão quando o slide é mais curto que o maior) */
@media (max-width: 900px) { .slide__texto { justify-content: flex-start; } }
.servico h4 { margin: 0; }

/* "Até 1 Giga" na capa: "Até" menor em cima (a velocidade é sempre "até") */
.servico__selo small { display: block; font-size: .42em; line-height: 1.1; letter-spacing: .04em; margin-bottom: .12em; }

/* Ícone do WhatsApp (img/apps/whatsapp.png como máscara: pega a cor do texto do botão) */
.ic-wpp { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url(/img/apps/whatsapp.png) center / contain no-repeat; mask: url(/img/apps/whatsapp.png) center / contain no-repeat; }
.cf-btn-sm .ic-wpp { width: 18px; height: 18px; }
.cf-listitem-icon .ic-wpp { width: 22px; height: 22px; }

/* Botões das lojas sempre lado a lado e compactos */
.lojas { flex-wrap: nowrap; gap: 2px; margin-left: -10px; }
.lojas .cf-btn { padding-inline: 10px; gap: 6px; white-space: nowrap; }
.lojas .cf-btn .cf-icon { width: 16px; height: 16px; }
/* Cards de benefícios: a foto aparece inteira, na proporção do recorte (o cover cortava 23 a 44 px do topo,
   onde ficam as cabeças). O zoom do hover parte do topo, então só corta embaixo. */
.beneficio__foto { position: relative; aspect-ratio: 1.13; }
.beneficio__foto img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; transform-origin: center top; }
/* Capa "Até 1 Giga": sorriso menor e mais baixo, para não passar por trás do texto */
.servico__capa--verde .servico__sorriso { width: 40%; right: -4%; bottom: -16%; }

/* ---------- Pista de benefícios no celular ----------
   A seção fica presa na tela e a rolagem vertical desliza os cards para o lado; só depois do último card a
   página continua descendo. O JS liga com .pista--ativa (≤620 px, sem "reduzir movimento"); sem JS ou com
   movimento reduzido, os cards ficam um embaixo do outro como antes. */
@media (max-width: 620px) {
  .pista--ativa { position: relative; }
  .pista--ativa .pista__fixo { position: sticky; top: var(--pista-topo, 76px); overflow: hidden; margin-inline: calc(-1 * var(--space-5)); padding: var(--space-2) var(--space-5) 0; }
  .pista--ativa .beneficios, .pista--ativa .servicos { display: flex; gap: var(--space-3); will-change: transform; }
  .pista--ativa .beneficios > *, .pista--ativa .servicos > * { flex: 0 0 min(84vw, 360px); }
  .pista--ativa .rolagem__pontos { margin-top: var(--space-3); padding-bottom: var(--space-2); }
}
/* Pista em tela baixa (o painel não cabia abaixo do menu): foto mais baixa cortando embaixo, nunca a cabeça */
@media (max-width: 620px) {
  .pista--compacta .beneficio__foto { aspect-ratio: 1.55; }
  .pista--compacta .beneficio__foto img { top: 0; bottom: auto; }
  .pista--compacta .servico__capa { aspect-ratio: 3; }
  .pista--compacta .servico__capa .servico__selo { margin-top: var(--space-4); font-size: 34px; }
  .pista--compacta .servico__app-grande { width: 64px; height: 64px; border-radius: 15px; }
  .pista--compacta .servico__icone { width: 64px; height: 64px; }
  .pista--compacta .beneficio__corpo { padding: var(--space-5); }
}
/* com as variáveis não herdáveis, só os pseudo-elementos do brilho pegam o valor do card */
.vidro::before, .vidro::after { --sx: inherit; --sy: inherit; --perto: inherit; --hx: inherit; --hy: inherit; }

/* =====================================================================
   Banner com espiadas (06/11/2026, pedido do usuário): em tela larga, o banner anterior e o próximo aparecem nos
   espaços vazios dos lados, menores e apagados. O banner central continua igual (vidro único + troca suave).
   As espiadas são cópias decorativas (aria-hidden, inert) dentro de janelas (.vitrine__espiada) que só ocupam o
   espaço lateral: nada fica atrás do vidro central. Na troca, as cópias deslizam no sentido da navegação.
   O JS liga .vitrine--espiadas quando sobram ≥ 90 px de cada lado e define --espia, --vit-w e --vit-h.
   ===================================================================== */
.vitrine__espiada { display: none; }
.pagina-casa .vitrine--espiadas .vitrine__palco { position: relative; overflow: visible; }
.pagina-casa .vitrine--espiadas .vitrine__palco > .vitrine__vidro, .pagina-casa .vitrine--espiadas .slide { border-radius: var(--radius-xl); }
.pagina-casa .vitrine--espiadas .slide { overflow: hidden; }
.pagina-casa .vitrine--espiadas .vitrine__espiada { display: block; position: absolute; top: 0; bottom: 0; z-index: 0; width: var(--espia, 0px); padding: 0; border: 0; background: none; overflow: hidden; cursor: pointer; }
.vitrine__espiada--esq { right: 100%; }
.vitrine__espiada--dir { left: 100%; }
.espiada__card { position: absolute; top: 0; width: var(--vit-w, 1200px); height: var(--vit-h, 600px); display: grid; grid-template-columns: 1fr 1.05fr; overflow: hidden; text-align: left;
  border-radius: var(--radius-xl); scale: .86; translate: 0 0; box-shadow: 0 12px 36px -14px rgba(13, 26, 40, .28);
  transition: translate .7s cubic-bezier(.22, .8, .2, 1), opacity .7s ease; pointer-events: none; }
.vitrine__espiada--esq .espiada__card { left: 0; transform-origin: left center; }
.vitrine__espiada--dir .espiada__card { right: 0; transform-origin: right center; }
.espiada__card::after { content: ""; position: absolute; inset: 0; background: var(--surface); opacity: .45; transition: opacity .3s ease; }
.vitrine__espiada:hover .espiada__card::after { opacity: .25; }
/* cópia sem vidro (cores sólidas) e sem animação de entrada */
.espiada__card .slide__texto { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.espiada__card.slide--marinho .slide__texto { background: var(--marinho); }
.espiada__card.slide--lima .slide__texto { background: var(--lima); }
.espiada__card.slide--violeta .slide__texto { background: var(--violeta); }
.espiada__card.slide--creme .slide__texto { background: #ffffff; }
.espiada__card .slide__texto > *, .espiada__card .slide__foto img { animation: none !important; }
.espiada__card .slide__foto img { translate: none; }
.espiada__card .overline { text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .espiada__card { transition: none; } }

/* Banner da página inicial: brilho que segue o mouse (como o banner de vidro de Para empresas). Camada própria
   entre o vidro e os slides (z-index 0, depois do .vitrine__vidro): aparece pelo painel de texto translúcido e a
   foto, opaca, cobre o efeito, como em Para empresas; em vez da classe .vidro: o backdrop-filter dela no palco cortaria o vidro de dentro. */
.vitrine__brilho { grid-area: 1 / 1; z-index: 0; position: relative; border-radius: var(--radius-xl); pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--hx, -999px) var(--hy, -999px), rgba(255, 255, 255, .16), transparent 60%); }
.vitrine__brilho::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; --hx: inherit; --hy: inherit;
  background: radial-gradient(360px circle at var(--hx, -999px) var(--hy, -999px), rgba(77, 195, 69, .95), rgba(77, 195, 69, 0) 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.vitrine.com-mouse .vitrine__brilho { opacity: 1; }

/* "Em todos os planos" da página inicial com frase de abertura (06/11/2026): a frase diz que nada disso é extra */
.todos--frase { display: grid; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.todos__frase { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; }
.todos__frase strong { margin: 0; color: var(--ink); }
.todos__frase .body-sm { color: var(--ink-muted); }
.todos__lista { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.todos__lista li { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 620px) {
  .todos--frase { padding: var(--space-5) var(--space-4) var(--space-4); }
  .todos__frase { flex-direction: column; align-items: center; text-align: center; gap: var(--space-1); }
  .todos__lista { justify-content: center; gap: var(--space-2); }
}
.todos__frase > * { text-wrap: balance; }

/* =====================================================================
   Pente-fino (06/11/2026)
   ===================================================================== */
/* 1. Topo de Para empresas em telas bem estreitas: "Consultor" no lugar de "Falar com consultor" */
.topo__curto { display: none; }
@media (max-width: 400px) { .topo__longo { display: none; } .topo__curto { display: inline; } }

/* 2. Setas do banner não encolhem */
.vitrine__seta { flex: none; min-width: 44px; min-height: 44px; }

/* 3. Tablet: os 3 benefícios lado a lado (antes ficavam empilhados com fotos enormes) */
@media (min-width: 621px) and (max-width: 900px) {
  .beneficios { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .beneficios .beneficio__corpo { padding: var(--space-4); }
  .beneficios .beneficio__corpo .heading-md { font-size: 18px; line-height: 24px; }
}

/* 4. Banner no celular/tablet: botão sempre no pé do painel (mesma posição em todos os slides);
   a sobra de altura fica entre o texto e o botão, em vez de um bloco vazio embaixo */
@media (max-width: 900px) {
  .slide__texto { justify-content: flex-start; }
  .slide .acoes { margin-top: auto; padding-top: var(--space-6); }
}

/* 5. Selo "O mais completo" com a mesma altura do sobretítulo "CONFIA": nomes dos planos alinhados */
.plano__selo { height: 16px; display: flex; align-items: center; }

/* 6 e 10. Quebra de linha equilibrada em títulos */
.heading-xl, .heading-lg, .heading-md, .heading-sm, .slide__titulo { text-wrap: balance; }

/* 8. Nota dos planos centralizada no celular, como a dica */
@media (max-width: 620px) { .planos__nota { text-align: center; } }

/* 9. Para empresas no tablet: o Enterprise, sozinho na segunda linha, fica centralizado */
@media (min-width: 621px) and (max-width: 1100px) {
  .planos--pme > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--space-2)); }
}

/* 12. Áreas de toque de 44 px no celular sem mudar o desenho (camada invisível maior) */
.ponto { padding-block: 19px; }
@media (pointer: coarse) {
  .cf-btn-sm, .opcao { position: relative; }
  .cf-btn-sm::before, .opcao::before { content: ""; position: absolute; inset: -6px -2px; z-index: 1; }
  .rodape__links a, .rodape__contato a, .politica a { padding-block: 10px; margin-block: -10px; }
  .rodape__links a { display: inline-block; }
  .topo__marca { padding-block: 11px; margin-block: -11px; }
}

/* 13. Véu atrás do menu do celular */
.topo__veu { position: fixed; inset: 0; z-index: 29; background: rgba(13, 26, 40, .45); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
@media (max-width: 1020px) {
  .menu-aberto .topo__veu { opacity: 1; visibility: visible; transition: opacity .2s ease; }
}
@media (prefers-reduced-motion: reduce) { .topo__veu { transition: none; } }

/* 14. Pista também em Para empresas (benefícios PME e "Por que a Confia Negócios") */
@media (max-width: 620px) {
  .pista--ativa .pme-beneficios, .pista--ativa .porque { display: flex; gap: var(--space-3); will-change: transform; }
  .pista--ativa .pme-beneficios > *, .pista--ativa .porque > * { flex: 0 0 min(84vw, 360px); }
}

/* 19. Página 404 */
.erro { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-block: clamp(64px, 12vh, 140px); min-height: 60vh; }
.erro__sorriso { width: clamp(120px, 18vw, 200px); fill: var(--verde); margin-bottom: var(--space-4); }
.erro h1 { max-width: 20em; margin: 0; }
.erro__apoio { color: var(--ink-muted); margin: 0; }
.erro__acoes { margin-top: var(--space-4); }
/* controles do banner em telas bem estreitas (setas de 44 px não podem empurrar o "Pausar" para fora) */
@media (max-width: 400px) {
  .vitrine__controles { gap: var(--space-1); }
  .vitrine__pontos { gap: 0; }
  .ponto[aria-current="true"] span { width: 40px; }
  .vitrine__seta { min-width: 40px; }
  .vitrine__pausa { padding-inline: var(--space-2); }
}
/* Banner no celular: sem a linha do app (ícone + lojas) no slide "Casa segura": era o slide mais alto e deixava
   vão nos outros. O botão do slide já fala do Confia Security e as lojas estão no card do serviço, mais abaixo */
@media (max-width: 620px) {
  .slide__app { display: none; }
}
/* Banner de Para empresas em telas estreitas: a palavra "CONECTADA" alargava a coluna e o texto era cortado */
@media (max-width: 900px) { .banner-pme__caixa { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .banner-pme__titulo { font-size: clamp(28px, 9.2vw, 40px); } }

/* =====================================================================
   Rodadas de UX/UI (06/11/2026): Impeccable (craft floor e polish), frontend-design e crítica por heurísticas
   ===================================================================== */
/* Superfícies do navegador com as cores da marca (seleção, cursor de texto, controles nativos, barra de rolagem) */
::selection { background: var(--lima); color: var(--marinho); }
.pagina-negocios ::selection { background: var(--violeta); color: #ffffff; }
html { accent-color: var(--verde); scrollbar-color: rgba(13, 26, 40, .35) transparent; -webkit-tap-highlight-color: rgba(77, 195, 69, .18); }
.pagina-negocios { scrollbar-color: rgba(239, 253, 216, .3) transparent; }
input, textarea { caret-color: var(--verde); }
a { text-underline-offset: .18em; text-decoration-thickness: from-font; }

/* Texto corrido sem palavra órfã na última linha; medida confortável (≤ 65 caracteres) */
p, li { text-wrap: pretty; }
.secao__apoio, .slide__apoio, .banner-pme__apoio, .sobre p, .politica p { max-width: 65ch; }

/* Resposta imediata ao toque/clique (100 ms), sem esperar a página reagir */
.cf-btn, .opcao, .ponto, .vitrine__seta, .cf-listitem-action { transition-property: background-color, color, border-color, box-shadow, transform; }
.cf-btn:active, .opcao:active, .vitrine__seta:active { transform: scale(.97); transition-duration: .1s; }
.cf-listitem-action:active { background: var(--primary-soft); }
@media (prefers-reduced-motion: reduce) { .cf-btn:active, .opcao:active, .vitrine__seta:active { transform: none; } }

/* Confirmação da consulta de cobertura */
.cobertura__status { position: relative; margin: var(--space-3) 0 0; color: var(--marinho); }
.cobertura__status:empty { display: none; }
.cobertura__status a { color: var(--marinho); font-weight: 600; }

/* Celular: menos trabalho de pintura enquanto rola (sombras grandes custam caro em GPU fraca) */
@media (max-width: 620px) {
  .pista--ativa .vidro { box-shadow: 0 1px 2px rgba(13, 26, 40, .08); }
  .faixa { will-change: auto; }
}

/* =====================================================================
   Botões que se enchem (06/11/2026, pedido do usuário): no hover, a pílula se enche da esquerda para a direita,
   como a linha verde do menu, e ao completar pulsa de leve para convidar ao clique. --btn-cheio = cor que enche,
   --btn-texto = cor do texto sobre ela, --btn-pulso = cor do anel do pulso.
   ===================================================================== */
.topo__central { margin-top: 0; height: auto; }
.cf-btn { --btn-cheio: var(--primary-soft); --btn-texto: var(--ink); --btn-pulso: rgba(77, 195, 69, .45);
  background-image: linear-gradient(var(--btn-cheio), var(--btn-cheio)); background-repeat: no-repeat; background-position: 0 0; background-size: 0% 100%; }
.cf-btn-primary { --btn-cheio: var(--marinho); --btn-texto: var(--lima); --btn-pulso: rgba(77, 195, 69, .5); }
.cf-btn-secondary { --btn-cheio: var(--verde); --btn-texto: var(--marinho); --btn-pulso: rgba(77, 195, 69, .5); }
.cf-btn-outline { --btn-cheio: var(--ink); --btn-texto: var(--surface); --btn-pulso: rgba(13, 26, 40, .3); }
.cf-btn-ghost { --btn-cheio: var(--primary-soft); --btn-texto: var(--ink); --btn-pulso: rgba(77, 195, 69, .35); }
/* contextos escuros: o que enche precisa contrastar com o fundo */
.cf-card-feature .cf-btn-primary, .pagina-negocios .cf-btn-primary, .cobertura .cf-btn-secondary,
.slide--marinho .cf-btn-primary, .slide--violeta .cf-btn-primary, .sobre .cf-btn-primary { --btn-cheio: var(--lima); --btn-texto: var(--marinho); }
.pagina-negocios .cf-btn-secondary { --btn-cheio: var(--verde); --btn-texto: var(--marinho); }
.pagina-negocios .cf-btn-outline { --btn-pulso: rgba(239, 253, 216, .3); }
.slide--violeta .lojas .cf-btn-ghost, .slide--marinho .lojas .cf-btn-ghost, .cf-card-feature .cf-btn-ghost { --btn-cheio: rgba(239, 253, 216, .16); --btn-texto: var(--creme); }

@media (hover: hover) {
  .cf-btn { transition: background-size .45s cubic-bezier(.22, .8, .2, 1), color .3s ease, border-color .3s ease, box-shadow .2s ease, transform .1s ease; }
  /* a cor de fundo fica como estava; quem muda é a camada que enche (o DS trocava o fundo inteiro no hover) */
  .cf-btn-primary:hover:not(:disabled) { background-color: var(--primary); }
  .cf-btn-secondary:hover:not(:disabled) { background-color: var(--ink); }
  .cf-btn-outline:hover:not(:disabled), .cf-btn-ghost:hover:not(:disabled), .slide--violeta .lojas .cf-btn-ghost:hover { background-color: transparent; }
  .cf-btn:hover:not(:disabled) { background-image: linear-gradient(var(--btn-cheio), var(--btn-cheio)); background-size: 100% 100%; color: var(--btn-texto); }
  .cf-btn-outline:hover:not(:disabled) { border-color: var(--btn-cheio); }
  .cf-btn:hover:not(:disabled) .cf-icon { color: inherit; }
  /* opções dos planos: enchem de leve (não confunde com a opção já escolhida, que fica cheia de verde) */
  .opcao { background-image: linear-gradient(rgba(172, 245, 131, .4), rgba(172, 245, 131, .4)); background-repeat: no-repeat; background-size: 0% 100%;
    transition: background-size .4s cubic-bezier(.22, .8, .2, 1), border-color .2s ease, color .2s ease, transform .1s ease; }
  .opcao:not([aria-pressed="true"]):hover { background-size: 100% 100%; }
  .cf-card-feature .opcao { background-image: linear-gradient(rgba(239, 253, 216, .12), rgba(239, 253, 216, .12)); }
  .pagina-negocios .opcao { background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); }
  /* links do rodapé: a mesma linha do menu */
  .rodape__links a { background: linear-gradient(var(--verde), var(--verde)) 0 100% / 0 1.5px no-repeat; transition: background-size .3s ease; }
  .rodape__links a:hover { text-decoration: none; background-size: 100% 1.5px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cf-btn:hover:not(:disabled) { animation: btn-pulso 1.8s cubic-bezier(.2, .8, .2, 1) .45s infinite; }
}
@keyframes btn-pulso {
  0% { box-shadow: 0 0 0 0 var(--btn-pulso); }
  70%, 100% { box-shadow: 0 0 0 9px transparent; }
}
@media (prefers-reduced-motion: reduce) { .cf-btn, .opcao { transition-duration: 0s !important; } }

/* App do Confia Security no banner: ícone centralizado na altura do nome + lojas */
.slide__app { align-items: center; }
/* Menu do topo: itens nunca quebram linha; espaço menor entre eles em notebooks estreitos */
.topo__nav > a { white-space: nowrap; }
@media (min-width: 1021px) and (max-width: 1240px) {
  .topo__barra { gap: var(--space-4); }
  .topo__nav { gap: var(--space-4); }
  .topo__nav > a:not(.cf-btn) { font-size: 13px; }
}
/* Menu do celular em Confia Negócios: sem o traço de hover como fundo (a cor de destaque enchia os itens) */
@media (max-width: 1020px) { .pagina-negocios .topo__nav > a:not(.cf-btn) { background: none; } }
/* Correção do enchimento: o hover do DS usa o atalho `background:`, que religava a repetição do fundo; a faixa
   que crescia se repetia e enchia o botão na hora. Repetição e posição ficam travadas também no hover.
   Entrada: ancorada à esquerda, cresce até a direita. Saída: ancorada à direita, recolhe para a direita
   (a posição troca sem transição; só o tamanho anima). */
@media (hover: hover) {
  .cf-btn, .opcao { background-repeat: no-repeat; background-position: 100% 0; }
  .cf-btn:hover:not(:disabled), .opcao:not([aria-pressed="true"]):hover { background-repeat: no-repeat; background-position: 0 0; }
}
/* Varredura perceptível: .6 s com aceleração suave nos dois extremos; o pulso começa quando ela termina */
@media (hover: hover) {
  .cf-btn { transition: background-size .6s cubic-bezier(.45, 0, .25, 1), color .35s ease .1s, border-color .35s ease, box-shadow .2s ease, transform .1s ease; }
  .opcao { transition: background-size .5s cubic-bezier(.45, 0, .25, 1), border-color .2s ease, color .2s ease, transform .1s ease; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cf-btn:hover:not(:disabled) { animation: btn-pulso 1.8s cubic-bezier(.2, .8, .2, 1) .6s infinite; }
}
/* Seções de planos só com o rótulo (a frase de título saiu em 07/11/2026): rótulo mais próximo do conteúdo */
.secao__cabeca--rotulo { margin-bottom: var(--space-5); }
.secao__cabeca--rotulo h2 { margin: 0; }
/* 07/11/2026: enchimento como sanfona (abre da esquerda para a direita e fecha de volta para a esquerda) e
   cobrindo a pílula inteira, inclusive a borda de 1,5 px (origem do fundo na borda, não no padding) */
@media (hover: hover) {
  .cf-btn, .opcao, .cf-btn:hover:not(:disabled), .opcao:not([aria-pressed="true"]):hover { background-position: 0 0; background-origin: border-box; background-clip: border-box; }
}
/* 07/11/2026: o texto do botão não muda de cor no hover (trocava de uma vez enquanto o enchimento ainda estava
   no meio e, entrando e saindo rápido, ficava ilegível). Cada variante enche com uma cor em que o texto original
   continua legível: */
.cf-btn-primary { --btn-cheio: var(--lima); --btn-texto: var(--on-primary); }                 /* verde → lima, texto marinho */
.cf-btn-secondary { --btn-cheio: var(--violeta); --btn-texto: var(--surface); }               /* marinho → violeta, texto creme */
.pagina-negocios .cf-btn-secondary { --btn-cheio: var(--lima); --btn-texto: var(--surface); }  /* creme → lima, texto marinho */
.cf-btn-outline { --btn-cheio: var(--lima); --btn-texto: var(--ink); }                        /* contorno → lima, texto marinho */
.pagina-negocios .cf-btn-outline { --btn-cheio: var(--violeta); --btn-texto: var(--ink); }     /* contorno → violeta, texto creme */
.cf-btn-ghost { --btn-cheio: var(--primary-soft); --btn-texto: var(--ink); }
.cf-card-feature .cf-btn-primary, .pagina-negocios .cf-btn-primary, .slide--marinho .cf-btn-primary,
.slide--violeta .cf-btn-primary, .sobre .cf-btn-primary { --btn-cheio: var(--lima); --btn-texto: var(--on-primary); }
.cobertura .cf-btn-secondary { --btn-cheio: var(--violeta); --btn-texto: var(--surface); }
.slide--violeta .lojas .cf-btn-ghost, .slide--marinho .lojas .cf-btn-ghost, .cf-card-feature .cf-btn-ghost { --btn-cheio: rgba(239, 253, 216, .16); --btn-texto: var(--creme); }
@media (hover: hover) {
  .cf-btn-outline:hover:not(:disabled) { border-color: var(--btn-cheio); }
  .cf-btn { transition: background-size .6s cubic-bezier(.45, 0, .25, 1), border-color .3s ease, box-shadow .2s ease, transform .1s ease; }
}
.cobertura .cf-btn-secondary { --btn-cheio: #24384f; }  /* texto verde do botão continua legível */


/* =====================================================================
   Avaliações do Google em carrossel (07/11/2026): mesma linguagem do banner da página inicial. Um painel de
   vidro único (.depo__vidro) muda de cor; os depoimentos trocam por cima dele (sem fade no conjunto: o vidro
   não pode ter ancestral com opacity < 1). Resumo da nota à esquerda; no celular, em cima.
   ===================================================================== */
.avaliacoes__titulo { margin: 0 0 var(--space-5); }
.depo { display: grid; grid-template-columns: minmax(240px, 1fr) 2.2fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.depo__resumo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.depo__nota { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.depo__numero { font: 800 clamp(56px, 7vw, 88px)/.9 var(--font-sans); letter-spacing: -.03em; color: var(--ink); }
.depo__estrelas, .depo__estrelas-slide { color: #f5a524; letter-spacing: .06em; line-height: 1; }
.depo__estrelas { font-size: 22px; }
.depo__total { margin: 0 0 var(--space-2); color: var(--ink-muted); max-width: 22em; }
.depo__palco { position: relative; display: grid; border-radius: var(--radius-xl); overflow: hidden; touch-action: pan-y; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 36px -14px rgba(13, 26, 40, .28); }
.depo__vidro { grid-area: 1 / 1; z-index: 0; background: rgba(13, 26, 40, .62);
  -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(.3); backdrop-filter: blur(18px) saturate(170%) brightness(.3);
  transition: background-color .6s ease, -webkit-backdrop-filter .6s ease, backdrop-filter .6s ease; }
.depo[data-cor="lima"] .depo__vidro { background: rgba(172, 245, 131, .58); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.depo[data-cor="violeta"] .depo__vidro { background: rgba(70, 43, 229, .64); -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(.7); backdrop-filter: blur(18px) saturate(160%) brightness(.7); }
.depo[data-cor="creme"] .depo__vidro { background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.depo__slide { grid-area: 1 / 1; z-index: 1; position: relative; display: flex; flex-direction: column; gap: var(--space-4); margin: 0;
  padding: clamp(28px, 4.5vw, 56px) clamp(24px, 4.5vw, 64px); min-height: 320px; visibility: hidden; }
.depo__slide.ativo { visibility: visible; z-index: 2; }
.depo__slide.saindo { visibility: visible; }
.depo__slide > * { position: relative; }
.depo__slide.ativo > * { animation: entra .7s cubic-bezier(.2, .8, .2, 1) both; }
.depo__slide.ativo > :nth-child(2) { animation-delay: .05s; }
.depo__slide.ativo > :nth-child(3) { animation-delay: .1s; }
.depo__slide.ativo > :nth-child(4) { animation-delay: .18s; }
.depo__slide.saindo > * { opacity: 0; transition: opacity .25s ease; animation: none; }
.depo__aspas { position: absolute !important; top: clamp(4px, 1vw, 16px); right: clamp(16px, 3vw, 40px); font-size: clamp(120px, 14vw, 200px); line-height: 1; opacity: .18; pointer-events: none; }
.depo__estrelas-slide { margin: 0; font-size: 20px; }
.depo__texto { margin: 0; flex: 1; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.45; font-weight: 500; max-width: 38em; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.depo__autor { display: flex; align-items: center; gap: var(--space-3); }
.depo__quem { display: flex; flex-direction: column; }
.depo__avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-full); }
/* cores de cada depoimento (texto sobre o vidro) */
.depo__slide--marinho, .depo__slide--violeta { color: var(--creme); }
.depo__slide--marinho .depo__avatar { background: var(--verde); color: var(--marinho); }
.depo__slide--violeta .depo__avatar { background: var(--lima); color: var(--marinho); }
.depo__slide--marinho .caption, .depo__slide--violeta .caption { color: rgba(239, 253, 216, .75); }
.depo__slide--marinho .depo__aspas { color: var(--verde); opacity: .5; }
.depo__slide--violeta .depo__aspas { color: var(--lima); opacity: .4; }
.depo__slide--lima, .depo__slide--creme { color: var(--marinho); }
.depo__slide--lima .depo__avatar { background: var(--marinho); color: var(--lima); }
.depo__slide--creme .depo__avatar { background: var(--verde); color: var(--marinho); }
.depo__slide--lima .caption, .depo__slide--creme .caption { color: rgba(13, 26, 40, .7); }
.depo__slide--lima .depo__aspas { color: var(--marinho); opacity: .12; }
.depo__slide--creme .depo__aspas { color: var(--verde); opacity: .35; }
.depo__slide--lima .depo__estrelas-slide, .depo__slide--creme .depo__estrelas-slide { color: #c77700; }
.depo__controles { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.depo.pausada .ponto span::after { animation-play-state: paused; }
.depo.parada .ponto[aria-current="true"] span::after { animation: none; transform: none; }
.depo__pontos .ponto[aria-current="true"] span::after { --tempo: 8s; }
@media (max-width: 900px) {
  .depo { grid-template-columns: 1fr; gap: var(--space-5); }
  .depo__resumo { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-5); }
  .depo__total { margin: 0; flex: 1 1 14em; }
}
@media (max-width: 700px) {
  .depo__vidro { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(13, 26, 40, .95); }
  .depo[data-cor="lima"] .depo__vidro { background: rgba(172, 245, 131, .94); }
  .depo[data-cor="violeta"] .depo__vidro { background: rgba(70, 43, 229, .95); }
  .depo[data-cor="creme"] .depo__vidro { background: rgba(255, 255, 255, .95); }
  .depo__slide { min-height: 0; }
  .depo__texto { -webkit-line-clamp: 9; }
}
@media (prefers-reduced-motion: reduce) {
  .depo__vidro, .depo__slide.saindo > * { transition: none; }
  .depo__slide.ativo > * { animation: none; }
}
/* 07/11/2026: separação do menu ao rolar mais suave (era um traço sólido de 1 px bem marcado) */
.topo.rolou { box-shadow: 0 1px 0 rgba(13, 26, 40, .05), 0 10px 28px -18px rgba(13, 26, 40, .35); }
.pagina-negocios .topo.rolou { box-shadow: 0 1px 0 rgba(239, 253, 216, .05), 0 10px 28px -18px rgba(0, 0, 0, .7); }
/* aspas decorativas: transparência na cor (a animação de entrada zerava o opacity) */
.depo__aspas { opacity: 1 !important; }
.depo__slide.ativo > .depo__aspas { animation: none; }
.depo__slide--marinho .depo__aspas { color: rgba(77, 195, 69, .28); }
.depo__slide--violeta .depo__aspas { color: rgba(172, 245, 131, .22); }
.depo__slide--lima .depo__aspas { color: rgba(13, 26, 40, .1); }
.depo__slide--creme .depo__aspas { color: rgba(77, 195, 69, .25); }
@media (min-width: 701px) { .depo__texto { padding-right: clamp(40px, 7vw, 110px); } }
/* Carrossel de avaliações no celular: a linha de controles não pode alargar o painel */
.depo > * { min-width: 0; }
.depo { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.2fr); }
@media (max-width: 900px) { .depo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .depo__controles { gap: var(--space-1); }
  .depo__pontos { gap: 0; }
  .depo__pontos .ponto { padding-inline: 3px; }
  .depo__pontos .ponto span { width: 16px; }
  .depo__pontos .ponto[aria-current="true"] span { width: 36px; }
  .depo__controles .vitrine__seta { min-width: 40px; }
  .depo__pausa { margin-left: auto; padding-inline: var(--space-2); }
}

/* =====================================================================
   Divisor entre seções no mesmo fundo (07/11/2026, pedido do usuário): linha fina que some nas pontas e um
   sorriso pequeno da marca no meio. Só entre .secao vizinhas (as outras transições já têm faixa, bloco escuro
   ou banner). A linha é recortada no centro (mask) para o sorriso não ficar sobre ela.
   ===================================================================== */
.secao:not([hidden]) + .secao { position: relative; }
.secao:not([hidden]) + .secao::before, .secao:not([hidden]) + .secao::after { content: ""; position: absolute; top: 0; left: 50%; pointer-events: none; }
.secao:not([hidden]) + .secao::before {
  width: min(var(--content-max), calc(100% - 2 * var(--space-10))); height: 1px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(13, 26, 40, .14) 18%, rgba(13, 26, 40, .14) 82%, transparent);
  -webkit-mask: linear-gradient(90deg, #000 calc(50% - 34px), transparent calc(50% - 34px), transparent calc(50% + 34px), #000 calc(50% + 34px));
  mask: linear-gradient(90deg, #000 calc(50% - 34px), transparent calc(50% - 34px), transparent calc(50% + 34px), #000 calc(50% + 34px)); }
.secao:not([hidden]) + .secao::after {
  width: 34px; height: 18px; translate: -50% -55%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 201.83 105.12'%3E%3Cpath fill='%234dc345' d='M201.83 52.54C182.71 84.06 148.07 105.12 108.51 105.12C52.05 105.12 5.61 62.23 0 7.26L51.4 0C53.43 29.77 78.22 53.29 108.51 53.29C129.52 53.29 147.88 41.98 157.83 25.11L201.83 52.54Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .9; }
.pagina-negocios .secao:not([hidden]) + .secao::before { background: linear-gradient(90deg, transparent, rgba(239, 253, 216, .14) 18%, rgba(239, 253, 216, .14) 82%, transparent); }
@media (max-width: 1020px) { .secao:not([hidden]) + .secao::before { width: calc(100% - 2 * var(--space-5)); } }
.secao:not([hidden]) + .secao::after { width: 40px; height: 21px; translate: -50% -50%; }