/* site.v4.css: uniao de site.v3, preview-hero, clinicas, wpp, home-claro, home-escuro, bench e v2 (versao de 11/11/2026). Para mudar, publique site.v5.css. */
/* ===== site.v3.css ===== */
/* Landing da Omen. Tokens da identidade (Guia de Marca) e regras em docs/design-system-painel.md §11.
   Sem build, sem CDN, sem estilo inline: a CSP do site só aceita 'self'. */
@font-face { font-family: "Gyrochrome"; font-weight: 400; font-display: swap; src: url("fonts/gyrochrome-400.v1.woff2") format("woff2"); }
@font-face { font-family: "Gyrochrome"; font-weight: 500; font-display: swap; src: url("fonts/gyrochrome-500.v1.woff2") format("woff2"); }
@font-face { font-family: "Gyrochrome"; font-weight: 700; font-display: swap; src: url("fonts/gyrochrome-700.v1.woff2") format("woff2"); }
@font-face { font-family: "Gyrochrome"; font-weight: 800; font-display: swap; src: url("fonts/gyrochrome-800.v1.woff2") format("woff2"); }
@font-face { font-family: "Gyrochrome"; font-weight: 900; font-display: swap; src: url("fonts/gyrochrome-900.v1.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --fonte: "Gyrochrome", "Avenir Next", "Century Gothic", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --indigo: #1A0176; --violeta: #6E28FC; --magenta: #EF41FA; --ciano: #84F4F5; --rosado: #F1E4ED; --grafite: #202125;
  --bg: #F1E4ED; --surface: #FFFFFF; --elev: #E8D6E2; --text: #202125; --muted: #54505C; --border: #D9C4D3;
  --accent: #6E28FC; --accent-hover: #5B1BE0; --accent-fg: #FFFFFF; --accent-text: #5B1BE0; --ring: #6E28FC;
  --sh: 0 24px 48px -20px rgba(26, 1, 118, .28), 0 6px 14px -6px rgba(26, 1, 118, .12);
  --faixa: var(--surface); --faixa-texto: var(--text); --faixa-acento: var(--accent-text);
  --glow-1: rgba(26, 1, 118, .16); --glow-2: rgba(110, 40, 252, .13); --glow-3: rgba(239, 65, 250, .09); --glow-4: rgba(132, 244, 245, .22);
  --r-md: 12px; --r-lg: 20px; --r-xl: 28px;
  --largura: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #202125; --surface: #2A2B31; --elev: #34353C; --text: #F1E4ED; --muted: #B9B4C0; --border: #3F4048;
    --accent: #84F4F5; --accent-hover: #B4FAFA; --accent-fg: #1A0176; --accent-text: #84F4F5; --ring: #84F4F5;
    --sh: 0 24px 48px -20px rgba(0, 0, 0, .7), 0 6px 14px -6px rgba(0, 0, 0, .5);
    --glow-1: rgba(26, 1, 118, .55); --glow-2: rgba(110, 40, 252, .24); --glow-3: rgba(239, 65, 250, .07); --glow-4: rgba(132, 244, 245, .06);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, ::before, ::after { transition: none !important; animation: none !important; } }
body { position: relative; margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--fonte); -webkit-font-smoothing: antialiased; }
img, picture { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-text); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
@media (forced-colors: active) { :focus-visible { outline: 3px solid Highlight; } .cartao, .passo, .faixa, .btn { border: 1px solid CanvasText; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--accent); color: var(--accent-fg); border-radius: 999px; font-weight: 700; text-decoration: none; }
.pular:focus { top: 12px; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 12% 0%, var(--glow-1), transparent 70%), radial-gradient(50% 45% at 92% 8%, var(--glow-2), transparent 70%),
    radial-gradient(55% 45% at 85% 100%, var(--glow-3), transparent 70%), radial-gradient(50% 40% at 5% 95%, var(--glow-4), transparent 70%); }
.claro { display: block; } .escuro { display: none; }
@media (prefers-color-scheme: dark) { .claro { display: none; } .escuro { display: block; } }
.caixa { width: min(var(--largura), calc(100% - 32px)); margin-inline: auto; }

/* tipografia: títulos em caixa alta (como na apresentação), pesos de 400 a 900 */
h1, h2, h3 { font-weight: 800; line-height: 1.12; margin: 0; text-transform: uppercase; letter-spacing: .02em; }
h1 { font-size: clamp(32px, 7vw, 64px); font-weight: 900; }
h2 { font-size: clamp(24px, 4.4vw, 40px); }
h3 { font-size: 17px; letter-spacing: .04em; }
.kicker { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lead { font-size: clamp(16px, 2.2vw, 20px); margin: 0; max-width: 60ch; }
p { margin: 0 0 14px; }
.muted { color: var(--muted); }

/* botões e chips */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 2px solid transparent;
  font: 700 15px/1 var(--fonte); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
.btn.pri { background: var(--accent); color: var(--accent-fg); }
.btn.pri:hover { background: var(--accent-hover); }
.btn.sec { background: transparent; color: var(--text); border-color: var(--text); }
.btn.sec:hover { background: var(--elev); }
.faixa .btn.sec, .hero-card .btn.sec { color: var(--faixa-texto); border-color: var(--faixa-texto); }
.faixa .btn.sec:hover, .hero-card .btn.sec:hover { background: var(--elev); }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--elev); color: var(--text); font-size: 13px; font-weight: 700; }

/* cabeçalho */
.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.topo .caixa { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.logo-link { display: inline-flex; align-items: center; min-height: 44px; }
.logo-link img { height: 22px; width: auto; }
.nav { display: none; gap: 22px; align-items: center; }
.nav a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; padding: 10px 2px; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: currentColor; }
.menu-mobile { position: relative; }
.menu-mobile summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid var(--text); border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 14px; text-transform: uppercase; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile nav { position: absolute; right: 0; top: 52px; width: min(280px, 86vw); padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); display: grid; }
.menu-mobile nav a { padding: 14px 12px; min-height: 48px; color: var(--text); text-decoration: none; font-weight: 700; border-radius: var(--r-md); }
.menu-mobile nav a:hover { background: var(--elev); }
.topo .btn { min-height: 44px; padding: 0 20px; display: none; }
@media (min-width: 960px) { .nav { display: flex; } .menu-mobile { display: none; } .topo .btn { display: inline-flex; } }

/* hero: o pattern fica atrás do mascote; o texto vai num painel sólido */
.hero { position: relative; padding: 32px 0 56px; }
.hero .caixa { display: grid; gap: 28px; align-items: center; }
.hero-card { background: var(--faixa); color: var(--faixa-texto); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px 24px; box-shadow: var(--sh); }
.hero-card .kicker { color: var(--faixa-acento); }
.hero-card .lead { color: var(--faixa-texto); }
.hero-card .acoes, .faixa .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-arte { display: grid; place-items: center; padding: 8px; }
.hero-arte .selo { background: var(--rosado); border-radius: var(--r-xl); padding: 22px 26px 26px; display: grid; justify-items: center; gap: 14px; box-shadow: var(--sh); }
.hero-arte .selo .mascote { width: clamp(120px, 28vw, 220px); }
.hero-arte .selo .principal { width: clamp(180px, 40vw, 300px); }
@media (min-width: 900px) { .hero { padding: 64px 0 80px; } .hero .caixa { grid-template-columns: 1.25fr 1fr; gap: 48px; } .hero-card { padding: 44px 40px; } }

/* seções */
.secao { padding: 64px 0; }
.secao.alt { background: color-mix(in srgb, var(--surface) 62%, transparent); }
.secao-cab { max-width: 760px; margin-bottom: 36px; }
.secao-cab .kicker { color: var(--accent-text); }
.secao-cab p { margin-top: 14px; color: var(--muted); font-size: 17px; }
.grade { display: grid; gap: 16px; }
@media (min-width: 700px) { .grade.c2 { grid-template-columns: repeat(2, 1fr); } .grade.c3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grade.c3 { grid-template-columns: repeat(3, 1fr); } .grade.c5 { grid-template-columns: repeat(5, 1fr); } }
.cartao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; }
.secao.alt .cartao { background: var(--bg); }
.cartao h3 { margin-bottom: 8px; }
.cartao p { margin: 0; color: var(--muted); }
.num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 14px; font-weight: 900; font-size: 20px; }
.num { background: var(--accent); color: var(--accent-fg); }
.ciclo { margin-top: 28px; max-width: 70ch; font-size: 18px; font-style: italic; }
.atributo { border-radius: var(--r-lg); padding: 22px; border: 1px solid var(--border); background: var(--surface); }
.atributo h3 { font-size: 15px; margin-bottom: 8px; color: var(--accent-text); }
.atributo p { margin: 0; font-size: 15px; color: var(--muted); }

/* o painel (capturas reais) */
.painel-vitrine { display: grid; gap: 20px; align-items: start; }
.painel-vitrine figure { margin: 0; }
.painel-vitrine img { border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--sh); width: 100%; }
.painel-vitrine figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.painel-celulares { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 900px) { .painel-vitrine { grid-template-columns: 1.6fr 1fr; } }
.aviso-dados { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* segurança */
.lista-ok { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lista-ok li { position: relative; padding-left: 34px; }
.lista-ok li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 900; font-size: 14px; }
.nota { margin-top: 24px; padding: 18px 20px; border-radius: var(--r-md); background: var(--elev); font-size: 15px; }

/* faq */
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 18px 20px; min-height: 56px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 900; color: var(--accent-text); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 20px 18px; color: var(--muted); }

/* faixa de contato */
.faixa { position: relative; padding: 56px 0; }
.faixa .miolo { background: var(--faixa); color: var(--faixa-texto); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 36px 28px; display: grid; gap: 18px; justify-items: start; }
.faixa .miolo h2 { color: var(--faixa-texto); }
.faixa .miolo p { color: var(--faixa-texto); max-width: 56ch; margin: 0; }
.faixa .miolo a:not(.btn) { color: var(--faixa-acento); }
.faixa .mascote-mini { width: 64px; }
@media (min-width: 900px) { .faixa .miolo { padding: 52px 56px; } }

/* rodapé */
.rodape { padding: 40px 0 56px; border-top: 1px solid var(--border); }
.rodape .caixa { display: grid; gap: 24px; }
.rodape img.logo { height: 22px; width: auto; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rodape a { color: var(--text); }
.rodape small { color: var(--muted); display: block; font-size: 13px; }
@media (min-width: 800px) { .rodape .caixa { grid-template-columns: 1fr auto; align-items: start; } }
.passos { list-style: none; padding: 0; margin: 0; }
.faq .caixa { max-width: 860px; }
.hero-arte .selo .principal { height: auto; }
.rodape a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape ul { gap: 0 22px; }
.nav { gap: 18px; } .nav a { white-space: nowrap; }
.hero-card h1 { margin-bottom: 18px; }
.contato-linha { margin: 0; } .copiavel { user-select: all; word-break: break-all; }
.faixa .miolo .muted { color: var(--muted); }

/* páginas legais (privacidade e termos) */
.legal { padding: 48px 0 72px; }
.legal .caixa { max-width: 780px; }
.legal h1 { font-size: clamp(28px, 5.5vw, 44px); margin-bottom: 14px; }
.legal .atualizacao { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.legal h2 { font-size: 20px; text-transform: none; letter-spacing: 0; margin: 34px 0 10px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal p, .legal li { max-width: 70ch; }

/* sobre a empresa */
.dados-empresa { display: grid; gap: 0; margin: 28px 0 0; max-width: 820px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.dados-empresa > div { display: grid; gap: 2px; padding: 14px 20px; border-top: 1px solid var(--border); }
.dados-empresa > div:first-child { border-top: 0; }
.dados-empresa dt { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dados-empresa dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 700px) { .dados-empresa > div { grid-template-columns: 220px 1fr; gap: 16px; } }
.rodape .legal-nota { max-width: 62ch; }
.dados-empresa a { display: inline-flex; align-items: center; min-height: 44px; }
.hero-arte .selo { border: 1px solid var(--border); }

/* ===== preview-hero.css ===== */
/* PRÉVIA LOCAL: duas variações de hero, só em CSS. Usa os tokens do site.v3.css (cores, fonte, raios, sombras).
   Sem JavaScript, sem estilo inline, sem recurso externo: cabe na CSP do site. */

@keyframes subir { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.anim { animation: subir .7s cubic-bezier(.2, .7, .2, 1) both; }
.anim.d1 { animation-delay: .08s; } .anim.d2 { animation-delay: .16s; } .anim.d3 { animation-delay: .26s; } .anim.d4 { animation-delay: .38s; }

.hero-a, .hero-b { position: relative; text-align: center; overflow: clip; }
.hero-a h1, .hero-b h1 { margin-inline: auto; max-width: 16ch; text-wrap: balance; }
.hero-a .lead, .hero-b .lead { margin: 22px auto 0; text-align: center; color: var(--muted); }
.hero-a .acoes, .hero-b .acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.hero-a .kicker, .hero-b .kicker { color: var(--accent-text); }
/* o contraste de pesos faz o destaque: 900 no resto do título, 400 + cor na palavra-chave */
.hero-a h1 em, .hero-b h1 em { font-style: normal; font-weight: 400; color: var(--accent-text); }

/* ---------- A · leque de telas ---------- */
.hero-a { padding: 56px 0 8px; }
.leque { position: relative; width: min(980px, 100%); margin: 56px auto 0; height: clamp(250px, 47vw, 500px);
  -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.leque figure { position: absolute; margin: 0; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.leque img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--sh); background: var(--surface); }
.leque .centro { z-index: 2; left: 19%; width: 62%; top: 0; }
.leque .esq { z-index: 1; left: 1%; width: 24%; top: 16%; transform: rotate(-7deg); transform-origin: 80% 100%; }
.leque .dir { z-index: 1; right: 1%; width: 24%; top: 16%; transform: rotate(7deg); transform-origin: 20% 100%; }
.leque .esq:hover { transform: rotate(-9deg) translateY(-8px); }
.leque .dir:hover { transform: rotate(9deg) translateY(-8px); }
.leque .centro:hover { transform: translateY(-6px); }
@media (max-width: 640px) {
  .hero-a { padding-top: 36px; }
  .leque { margin-top: 36px; height: clamp(250px, 80vw, 340px); }
  .leque .centro { left: 6%; width: 88%; }
  .leque .esq { left: -4%; width: 34%; top: 34%; } .leque .dir { right: -4%; width: 34%; top: 34%; }
}

/* ---------- B · produto em moldura ---------- */
.hero-b { padding: 60px 0 16px; }
.selo-topo { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; margin-bottom: 26px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.selo-topo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
/* marcador atrás da palavra-chave (no escuro vira só cor, para não perder contraste) */
.hero-b h1 em { font-weight: 900; padding: 0 .08em;
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--ciano) 80%, transparent) 60% 90%, transparent 90%); color: inherit; }
@media (prefers-color-scheme: dark) { .hero-b h1 em { background: none; color: var(--accent-text); } }
.vitrine { position: relative; width: min(1040px, 100%); margin: 52px auto 0; }
.vitrine::before { content: ""; position: absolute; inset: -6% -4% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 55% at 50% 45%, var(--glow-2), transparent 70%); }
.moldura { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh); padding: 44px 10px 10px; position: relative; }
.moldura::before { content: ""; position: absolute; left: 20px; top: 16px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--border); box-shadow: 20px 0 0 var(--border), 40px 0 0 var(--border); }
.moldura img { width: 100%; border-radius: var(--r-md); border: 1px solid var(--border); }
.vitrine .flutua { position: absolute; right: -2%; bottom: -9%; width: 21%; margin: 0; transform: rotate(4deg); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.vitrine .flutua:hover { transform: rotate(2deg) translateY(-8px); }
.vitrine .flutua img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--sh); }
.publico { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 64px auto 0; max-width: 760px; align-items: center; }
.publico span.rot { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
@media (max-width: 640px) { .hero-b { padding-top: 36px; } .vitrine { margin-top: 36px; } .vitrine .flutua { width: 30%; right: -3%; bottom: -12%; } .publico { margin-top: 56px; } }

/* barra para trocar de variação (só existe na prévia) */
.troca { position: fixed; z-index: 200; left: 50%; bottom: 14px; translate: -50% 0; display: flex; gap: 6px; padding: 6px; background: var(--grafite); border-radius: 999px; box-shadow: var(--sh); }
.troca a { color: #F1E4ED; text-decoration: none; font: 700 13px/1 var(--fonte); padding: 11px 16px; border-radius: 999px; }
.troca a[aria-current="page"] { background: var(--violeta); color: #fff; }
.troca a:not([aria-current]):hover { background: #34353C; }

/* ===== clinicas.css ===== */
/* PRÉVIA LOCAL: LP "Clínicas", versão clara. Carrega depois do site.v3.css e reaproveita os tokens da marca.
   Sem JavaScript, sem estilo inline, sem recurso externo (cabe na CSP do site). */

/* tema claro fixo: <html class="lp"> vence o @media dark do :root (especificidade maior) */
html.lp { color-scheme: light;
  --bg: #FBF8FB; --surface: #FFFFFF; --elev: #F3EAF1; --text: #202125; --muted: #5A5663; --border: #E7DAE3;
  --accent: #6E28FC; --accent-hover: #5B1BE0; --accent-fg: #FFFFFF; --accent-text: #5B1BE0; --ring: #6E28FC;
  --sh: 0 24px 48px -26px rgba(26, 1, 118, .24), 0 6px 14px -8px rgba(26, 1, 118, .10);
  --glow-1: rgba(26, 1, 118, .05); --glow-2: rgba(110, 40, 252, .07); --glow-3: rgba(239, 65, 250, .04); --glow-4: rgba(132, 244, 245, .16);
  --faixa: var(--surface); --faixa-texto: var(--text); --faixa-acento: var(--accent-text);
  --tinta: #1A0176; --lavanda: #F5EFFB; --nao: #B4235E; }
html.lp .claro { display: block; } html.lp .escuro { display: none; }
.lp h1, .lp h2 { color: var(--tinta); }
.lp h1 em { font-style: normal; font-weight: 400; color: var(--accent-text); }
.lp .secao.alt { background: var(--lavanda); }
.lp .secao.alt .cartao { background: var(--surface); }

/* hero em duas colunas */
.lp-hero { padding: 48px 0 56px; }
.lp-hero .caixa { display: grid; gap: 40px; align-items: center; }
.lp-hero h1 { font-size: clamp(28px, 4.1vw, 44px); max-width: 21ch; text-wrap: balance; }
.lp-hero .lead { margin-top: 20px; color: var(--muted); }
.lp-hero .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lp-hero .btn.sec { color: var(--tinta); border-color: var(--tinta); }
.lp-hero .btn.sec:hover { background: var(--elev); }
.pills { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pills li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.pills svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.lp-hero .vitrine { margin: 0; width: 100%; }
@media (min-width: 960px) { .lp-hero { padding: 72px 0 88px; } .lp-hero .caixa { grid-template-columns: 1fr 1.08fr; gap: 56px; } }

/* hoje x com a Omen */
.vs { display: grid; gap: 16px; }
@media (min-width: 800px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs > div { border-radius: var(--r-xl); padding: 28px 26px; }
.vs h3 { font-size: 16px; margin-bottom: 16px; }
.vs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vs li { position: relative; padding-left: 32px; }
.vs li::before { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.vs .antes { background: var(--surface); border: 1px solid var(--border); }
.vs .antes li::before { content: "✕"; color: var(--nao); border: 1.5px solid color-mix(in srgb, var(--nao) 45%, transparent); }
.vs .antes li { color: var(--muted); }
.vs .depois { background: var(--lavanda); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.vs .depois h3 { color: var(--accent-text); }
.vs .depois li::before { content: "✓"; background: var(--accent); color: var(--accent-fg); }

/* cartões com ícone */
.icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--lavanda); color: var(--accent); margin-bottom: 16px; }
.icone svg { width: 24px; height: 24px; }
.cartao.com-icone { transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.cartao.com-icone:hover { transform: translateY(-3px); box-shadow: var(--sh); }

/* blocos que alternam texto e imagem */
.bloco { display: grid; gap: 32px; align-items: center; }
.bloco + .bloco { margin-top: 72px; }
.bloco h2 { font-size: clamp(22px, 3.6vw, 32px); }
.bloco p { color: var(--muted); margin-top: 14px; max-width: 56ch; }
.bloco .lista-ok { margin-top: 18px; }
.bloco .acoes { margin-top: 24px; }
@media (min-width: 900px) { .bloco { grid-template-columns: 1fr 1fr; gap: 64px; } .bloco.inverso > :first-child { order: 2; } }

/* conversa ilustrativa (HTML e CSS, sem imagem) */
.chat { width: min(380px, 100%); margin-inline: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--sh); overflow: hidden; }
.chat-topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--lavanda); }
.chat-topo img { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); padding: 5px; }
.chat-topo strong { display: block; font-size: 14px; line-height: 1.2; } .chat-topo span { font-size: 12px; color: var(--muted); }
.chat-corpo { display: grid; gap: 10px; padding: 18px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.msg.in { background: var(--elev); border-bottom-left-radius: 4px; justify-self: start; }
.msg.out { background: var(--accent); color: var(--accent-fg); border-bottom-right-radius: 4px; justify-self: end; }
.chat-nota { margin: 0; padding: 10px 18px 16px; font-size: 12px; color: var(--muted); text-align: center; }

/* painel */
.painel-bloco .vitrine { margin: 0; width: 100%; }

/* implantação e cartão de contato */
.lp .passos .cartao { height: 100%; }
.lp .faixa .miolo { background: linear-gradient(135deg, var(--tinta), #3B14B8); color: #fff; border: 0; }
.lp .faixa .miolo h2, .lp .faixa .miolo p { color: #fff; }
.lp .faixa .miolo .btn.pri { background: #fff; color: var(--tinta); }
.lp .faixa .miolo .btn.pri:hover { background: var(--elev); }
.lp .faixa .miolo .btn.sec { color: #fff; border-color: rgba(255, 255, 255, .7); }
.lp .faixa .miolo .btn.sec:hover { background: rgba(255, 255, 255, .12); }
.lp .faixa .miolo a:not(.btn) { color: #fff; }
.aviso-lp { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* ---- tipografia: caixa alta só no título principal e nos rótulos; o resto em caixa normal, para ler melhor ---- */
.lp h2, .lp h3 { text-transform: none; letter-spacing: -.005em; }
.lp h2 { font-size: clamp(24px, 3.3vw, 36px); font-weight: 800; line-height: 1.16; max-width: 24ch; text-wrap: balance; }
.lp .bloco h2 { font-size: clamp(22px, 2.9vw, 30px); max-width: 22ch; }
.lp h3 { font-size: 18px; font-weight: 800; line-height: 1.25; }
.lp .vs h3, .lp .secao-cab + * h3.noop { font-size: 16px; }
.lp .kicker { font-size: 12px; letter-spacing: .16em; }
.lp .secao-cab p { max-width: 62ch; }
.lp .cartao p { font-size: 15px; }

/* ---- fluxo em quatro etapas ---- */
.fluxo { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: etapa; }
.etapa { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 22px; }
.etapa::before { counter-increment: etapa; content: counter(etapa); position: absolute; top: 18px; right: 20px; font-weight: 900; font-size: 13px; color: var(--accent); opacity: .55; }
.etapa h3 { margin-bottom: 8px; } .etapa p { margin: 0; color: var(--muted); font-size: 15px; }
@media (min-width: 900px) {
  .fluxo { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .etapa:not(:last-child)::after { content: "→"; position: absolute; right: -19px; top: 50%; translate: 0 -50%; width: 22px; text-align: center; color: var(--accent); font-weight: 900; font-size: 18px; z-index: 1; }
}
@media (max-width: 899px) { .etapa:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -17px; translate: -50% 0; color: var(--accent); font-weight: 900; font-size: 16px; z-index: 1; } }
.volta { margin: 28px 0 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 20px; border-radius: 999px; background: var(--lavanda); border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); color: var(--tinta); font-weight: 700; text-align: center; }
.volta span { font-size: 20px; color: var(--accent); line-height: 1; }

/* ---- funil ilustrativo (sem números) ---- */
.funil { width: min(440px, 100%); margin-inline: auto; display: grid; gap: 10px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh); }
.funil .barra { height: 52px; border-radius: 14px; display: flex; align-items: center; padding: 0 16px; font-weight: 800; font-size: 14px; color: #fff; justify-self: center; }
.funil .b1 { width: 100%; background: var(--tinta); } .funil .b2 { width: 82%; background: #3B14B8; }
.funil .b3 { width: 64%; background: var(--accent); } .funil .b4 { width: 46%; background: #9B6BFF; }
.funil .chat-nota { padding: 6px 0 0; }
.bloco-funil { margin-top: 64px; }

/* ===== wpp.css ===== */
/* Botões de WhatsApp: sempre o verde original (#25D366) e o ícone oficial. PRÉVIA: os links ainda são provisórios.
   Texto escuro sobre o verde para manter o contraste de leitura (branco sobre #25D366 passa pouco de 2:1). */
.btn.wpp { background: #25D366; border-color: #25D366; color: #06281A; gap: 10px; }
.btn.wpp:hover { background: #1FBE5B; border-color: #1FBE5B; }
.btn.wpp svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.lp .faixa .miolo .btn.wpp { background: #25D366; color: #06281A; border-color: #25D366; }
.lp .faixa .miolo .btn.wpp:hover { background: #1FBE5B; }

/* botão flutuante, canto inferior direito */
.wpp-fixo { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: #25D366; color: #fff; box-shadow: 0 12px 26px -8px rgba(7, 94, 84, .6), 0 2px 6px rgba(0, 0, 0, .15); transition: transform .2s, background-color .2s; text-decoration: none; }
.wpp-fixo svg { width: 34px; height: 34px; fill: currentColor; }
.wpp-fixo:hover { transform: scale(1.07); background: #1FBE5B; }
.wpp-fixo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: wpp-pulso 2.4s ease-out infinite; pointer-events: none; }
@keyframes wpp-pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }
@media (max-width: 700px) { .wpp-fixo { right: 14px; bottom: 74px; width: 56px; height: 56px; } }

/* o botão do anúncio ilustrado também é de WhatsApp */
.ad-botao { background: #25D366; color: #06281A; }

.cartao-l .ad-botao { background: #25D366; color: #06281A; }

/* ===== home-claro.css ===== */
/* PRÉVIA LOCAL: home de marca ("Branding"), versão clara. Usa site.v3.css + clinicas.css (tema claro, fluxo, funil, ícones).
   Sem JavaScript, sem estilo inline, sem recurso externo (cabe na CSP do site). */

.home-hero { position: relative; text-align: center; overflow: clip; padding: 56px 0 24px; }
.home-hero h1 { margin-inline: auto; max-width: 18ch; text-wrap: balance; font-size: clamp(30px, 5vw, 56px); }
.home-hero .lead { margin: 22px auto 0; text-align: center; color: var(--muted); max-width: 62ch; }
.home-hero .acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.home-hero .btn.sec { color: var(--tinta); border-color: var(--tinta); }
.home-hero .btn.sec:hover { background: var(--elev); }
.home-hero .kicker { color: var(--accent-text); }

/* ---------- menu "Para quem" (lista suspensa sem JS) ---------- */
.dd { position: relative; }
.dd summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 10px 2px; border-bottom: 2px solid transparent;
  color: var(--text); font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.dd summary::-webkit-details-marker { display: none; }
.dd summary::after { content: "▾"; font-size: 11px; }
.dd[open] summary, .dd summary:hover { border-bottom-color: currentColor; }
.dd-lista { position: absolute; left: -14px; top: calc(100% + 12px); width: 310px; z-index: 60; display: grid; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); }
.nav .dd-lista a { display: block; padding: 12px 14px; border: 0; border-radius: var(--r-md); text-transform: none; letter-spacing: 0; white-space: normal; font-weight: 400; }
.nav .dd-lista a strong { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; }
.nav .dd-lista a span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.nav .dd-lista a:hover { background: var(--lavanda); }
.nav .dd-lista a.em-breve { opacity: .6; pointer-events: none; }
.tag { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 999px; background: var(--elev); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tag.ok { background: color-mix(in srgb, var(--accent) 14%, white); color: var(--accent-text); }
.menu-mobile nav .grupo { padding: 14px 12px 4px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- Leque A: três cartões (anúncio, atendimento, medição) ---------- */
.leque3 { position: relative; width: min(980px, 100%); margin: 56px auto 0; height: clamp(340px, 44vw, 450px);
  -webkit-mask-image: linear-gradient(#000 74%, transparent); mask-image: linear-gradient(#000 74%, transparent); text-align: left; }
.cartao-l { position: absolute; width: 31%; padding: 20px 16px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--sh); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.cartao-l .rotulo { position: absolute; top: -12px; left: 16px; padding: 7px 12px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 11px/1 var(--fonte); letter-spacing: .08em; text-transform: uppercase; }
.l-esq { left: 1%; top: 16%; transform: rotate(-6deg); transform-origin: 80% 100%; }
.l-meio { left: 32.5%; width: 35%; top: 0; z-index: 2; }
.l-dir { right: 1%; top: 16%; transform: rotate(6deg); transform-origin: 20% 100%; }
.l-esq:hover { transform: rotate(-8deg) translateY(-8px); } .l-dir:hover { transform: rotate(8deg) translateY(-8px); } .l-meio:hover { transform: translateY(-6px); }
.ad-topo { display: flex; align-items: center; gap: 10px; }
.ad-av { width: 34px; height: 34px; border-radius: 50%; background: var(--lavanda); display: grid; place-items: center; flex: none; }
.ad-av img { width: 22px; height: 22px; }
.ad-linhas { display: grid; gap: 6px; flex: 1; } .ad-linhas span { display: block; height: 8px; border-radius: 4px; background: var(--elev); } .ad-linhas span:first-child { width: 62%; background: color-mix(in srgb, var(--accent) 22%, var(--elev)); }
.ad-patro { font-size: 11px; color: var(--muted); margin: 10px 0 0; }
.ad-img { margin: 8px 0 12px; border-radius: 14px; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--tinta), var(--accent)); display: grid; place-items: center; }
.ad-img img { width: 64px; height: 64px; }
.ad-botao { text-align: center; padding: 11px; border-radius: 999px; background: var(--lavanda); color: var(--tinta); font-weight: 800; font-size: 13px; }
.cartao-l .chat-corpo { padding: 6px 0 0; gap: 8px; } .cartao-l .msg { font-size: 12.5px; padding: 8px 12px; }
.mini-funil { display: grid; gap: 8px; margin-top: 4px; }
.mini-funil .barra { height: 40px; border-radius: 12px; display: flex; align-items: center; padding: 0 12px; font-weight: 800; font-size: 12.5px; color: #fff; justify-self: start; }
.mini-funil .m1 { width: 100%; background: var(--tinta); } .mini-funil .m2 { width: 80%; background: #3B14B8; } .mini-funil .m3 { width: 60%; background: var(--accent); } .mini-funil .m4 { width: 42%; background: #9B6BFF; }
.mini-nota { margin: 12px 0 0; font-size: 11px; color: var(--muted); }
@media (max-width: 700px) { .home-hero { padding-top: 36px; } .leque3 { margin-top: 40px; height: 380px; } .l-esq, .l-dir { display: none; } .l-meio { left: 6%; width: 88%; } }

/* ---------- Leque B: moldura com o mapa do fluxo ---------- */
.mapa-frame { position: relative; width: min(1040px, 100%); margin: 52px auto 0; text-align: left; }
.mapa-frame::before { content: ""; position: absolute; inset: -6% -4% -10%; z-index: -1; pointer-events: none; background: radial-gradient(55% 55% at 50% 45%, var(--glow-2), transparent 70%); }
.mapa { padding: 52px 18px 20px; }
.mapa-grade { display: grid; gap: 12px; }
@media (min-width: 800px) { .mapa-grade { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.mapa .no { position: relative; background: var(--lavanda); border-radius: 18px; padding: 18px 16px; }
.mapa .no .icone { margin-bottom: 12px; background: var(--surface); }
.mapa .no h3 { font-size: 17px; margin-bottom: 4px; } .mapa .no p { margin: 0; font-size: 14px; color: var(--muted); }
@media (min-width: 800px) { .mapa .no:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; translate: 0 -50%; color: var(--accent); font-weight: 900; z-index: 1; } }
.mapa .volta { margin-top: 18px; }
.flutua-chat { position: absolute; right: -2%; bottom: -14%; width: min(260px, 44%); padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--sh); transform: rotate(3deg); }
.flutua-chat .chat-corpo { padding: 0; gap: 8px; } .flutua-chat .msg { font-size: 12.5px; padding: 8px 12px; }
.publico a.chip { text-decoration: none; color: var(--text); border: 1px solid var(--border); background: var(--surface); }
.publico a.chip:hover { background: var(--lavanda); }
.publico .chip.fraco { opacity: .6; }
@media (max-width: 700px) { .flutua-chat { display: none; } }

/* ---------- abas "Para quem" (CSS puro, com botões de rádio) ---------- */
.abas { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.abas > input { position: absolute; opacity: 0; pointer-events: none; }
.abas > label { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font-weight: 800; font-size: 15px; cursor: pointer; transition: background-color .15s, border-color .15s; }
.abas > label:hover { border-color: var(--accent); }
.abas > input:checked + label { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.abas > input:checked + label .tag { background: rgba(255, 255, 255, .18); color: #fff; }
.abas > input:focus-visible + label { outline: 3px solid var(--ring); outline-offset: 3px; }
.abas .aba-painel { display: none; flex: 0 0 100%; margin-top: 14px; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh); }
#aba1:checked ~ .p1, #aba2:checked ~ .p2, #aba3:checked ~ .p3 { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { #aba1:checked ~ .p1 { grid-template-columns: 1fr 1.1fr; gap: 48px; padding: 40px; } }
.aba-painel h3 { font-size: 24px; margin-bottom: 10px; } .aba-painel p { color: var(--muted); max-width: 56ch; }
.aba-painel .lista-ok { margin: 16px 0 22px; }
.aba-painel .moldura { padding: 40px 8px 8px; }
.nota-previa { margin: 18px 0 0; font-size: 13px; color: var(--muted); }

.aba-painel .vitrine { margin: 0; width: 100%; }

/* ajustes após a primeira revisão visual */
.leque3 { height: clamp(360px, 46vw, 470px); }
.l-meio { top: 18px; } .l-esq, .l-dir { top: calc(16% + 18px); }
.dd summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); font-size: 0; }
.mini-funil .barra { font-size: 12px; white-space: nowrap; padding: 0 10px; }
.mini-funil .m1 { width: 100%; } .mini-funil .m2 { width: 86%; } .mini-funil .m3 { width: 74%; } .mini-funil .m4 { width: 60%; }

/* revisão 2 */
.nav .dd-lista { width: 340px; min-width: 340px; }
.nav .dd-lista a { white-space: normal; }
.flutua-chat { right: -3%; bottom: -34%; width: min(250px, 42%); }
.mapa-frame + .publico { margin-top: 96px; }

.nav .dd-lista { width: 390px; min-width: 390px; }

/* revisão 3: os cartões girados não podem encostar na borda da máscara, senão o canto é cortado em linha reta */
.leque3 { width: min(1040px, 100%); padding-inline: 0; }
.l-esq { left: 5%; } .l-dir { right: 5%; }
.l-meio { left: 32%; width: 36%; }

.l-esq, .l-dir { width: 29%; } .l-meio { left: 33%; width: 34%; }

/* revisão 4: seção do fluxo no estilo da moldura do Leque B (usada no Leque A) */
.mapa-secao { margin: 0 auto; width: 100%; }
.mapa-secao .mapa-grade { list-style: none; margin: 0; padding: 0; }
.mapa-secao .no { padding: 20px 18px; }
.mapa-secao .no h3 { font-size: 18px; margin-bottom: 8px; }
.mapa-secao .no p { font-size: 15px; line-height: 1.55; }
@media (min-width: 800px) { .mapa-secao .mapa-grade { gap: 22px; } .mapa-secao .no:not(:last-child)::after { right: -19px; font-size: 18px; } }

/* revisão 5: o brilho violeta atrás da janela (como no Leque B) precisa de um contexto próprio para não ficar escondido */
.mapa-secao { isolation: isolate; }
.mapa-secao::before { inset: -10% -6% -16%; background: radial-gradient(52% 60% at 50% 46%, rgba(110, 40, 252, .55), rgba(110, 40, 252, .18) 55%, transparent 75%); }
.mapa-secao .flutua-chat { bottom: -26%; }

/* ===== home-escuro.css ===== */
/* PRÉVIA LOCAL: home de marca em tema ESCURO fixo, na linguagem da ferramenta de evidências (fundo #202125, degradês violeta/índigo/ciano,
   cartões translúcidos, ciano como acento). Carrega por último. Sem JavaScript, sem estilo inline, sem recurso externo. */

html.dk { color-scheme: dark;
  --bg: #202125; --surface: rgba(255, 255, 255, .045); --elev: rgba(255, 255, 255, .09); --text: #F1E4ED; --muted: rgba(241, 228, 237, .68); --border: rgba(241, 228, 237, .13);
  --accent: #84F4F5; --accent-hover: #B4FAFA; --accent-fg: #1A0176; --accent-text: #84F4F5; --ring: #84F4F5;
  --sh: 0 28px 56px -24px rgba(0, 0, 0, .75), 0 6px 14px -6px rgba(0, 0, 0, .5);
  --faixa: var(--surface); --faixa-texto: var(--text); --faixa-acento: var(--accent-text);
  --tinta: #F1E4ED; --lavanda: rgba(110, 40, 252, .16); --nao: #FF8AA1; --opaco: #2A2B31; }
html.dk .claro { display: none; } html.dk .escuro { display: block; }
html.dk body::before { background:
  radial-gradient(1000px 700px at 90% -12%, rgba(110, 40, 252, .5), transparent 60%),
  radial-gradient(900px 700px at -12% 30%, rgba(26, 1, 118, .9), transparent 60%),
  radial-gradient(700px 500px at 60% 110%, rgba(132, 244, 245, .10), transparent 60%); }

/* tipografia: caixa alta só no título principal e nos rótulos */
.dk h1 em { font-style: normal; font-weight: 400; color: var(--accent-text); text-shadow: 0 0 30px rgba(132, 244, 245, .35); }
.dk h2, .dk h3 { text-transform: none; letter-spacing: -.005em; }
.dk h2 { font-size: clamp(24px, 3.3vw, 36px); font-weight: 800; line-height: 1.16; max-width: 24ch; text-wrap: balance; }
.dk .bloco h2 { font-size: clamp(22px, 2.9vw, 30px); max-width: 22ch; }
.dk h3 { font-size: 18px; font-weight: 800; line-height: 1.25; }
.dk .vs h3 { font-size: 16px; }
.dk .kicker { font-size: 12px; letter-spacing: .16em; }
.dk .secao-cab p { max-width: 62ch; }
.dk .cartao p { font-size: 15px; }

/* vidro: cartões e painéis translúcidos sobre o degradê */
.dk .etapa, .dk .cartao, .dk .moldura, .dk .abas .aba-painel, .dk .vs .antes { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dk .secao.alt { background: rgba(255, 255, 255, .025); border-block: 1px solid rgba(241, 228, 237, .06); }
.dk .topo { background: color-mix(in srgb, #202125 78%, transparent); }

/* grade sutil e brilho no hero */
.dk .home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(241, 228, 237, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(241, 228, 237, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 28%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 50% 28%, #000, transparent 75%); }
.dk .home-hero { isolation: isolate; }

/* botões */
.dk .btn.sec { color: var(--text); border-color: rgba(241, 228, 237, .55); }
.dk .home-hero .btn.sec, .dk .faixa .btn.sec { color: var(--text); border-color: rgba(241, 228, 237, .55); }
.dk .btn.sec:hover { background: rgba(255, 255, 255, .08); }
.dk .selo-topo { background: rgba(255, 255, 255, .06); }

/* tags e abas */
.dk .tag { background: rgba(255, 255, 255, .10); color: var(--muted); }
.dk .tag.ok { background: rgba(132, 244, 245, .16); color: #84F4F5; }
.dk .abas > label { background: rgba(255, 255, 255, .05); }
.dk .abas > input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.dk .abas > input:checked + label .tag { background: rgba(26, 1, 118, .16); color: var(--accent-fg); }
.dk .abas .aba-painel { background: rgba(255, 255, 255, .05); }
.dk .dd-lista { background: var(--opaco); }
.dk .nav .dd-lista a:hover { background: rgba(110, 40, 252, .22); }

/* hero A: cartões em vidro escuro */
.dk .cartao-l { background: rgba(42, 43, 49, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(241, 228, 237, .16); }
.dk .cartao-l .rotulo { background: var(--accent); color: var(--accent-fg); }
.dk .ad-linhas span { background: rgba(255, 255, 255, .12); } .dk .ad-linhas span:first-child { background: rgba(132, 244, 245, .35); }
.dk .ad-av { background: rgba(110, 40, 252, .25); }
.dk .ad-img { background: linear-gradient(135deg, #1A0176, #6E28FC 70%, #84F4F5 160%); }
.dk .msg.in { background: rgba(255, 255, 255, .09); }
.dk .mini-funil .m1 { background: #6E28FC; color: #fff; } .dk .mini-funil .m2 { background: #8B52FF; color: #fff; }
.dk .mini-funil .m3 { background: #5CD6D8; color: #0C2A2B; } .dk .mini-funil .m4 { background: #84F4F5; color: #0C2A2B; }

/* hero B: moldura e chat flutuante */
.dk .moldura { background: rgba(255, 255, 255, .05); }
.dk .moldura::before { background: rgba(241, 228, 237, .25); box-shadow: 20px 0 0 rgba(241, 228, 237, .25), 40px 0 0 rgba(241, 228, 237, .25); }
.dk .mapa .no { background: rgba(110, 40, 252, .16); border: 1px solid rgba(241, 228, 237, .08); }
.dk .mapa .no .icone { background: rgba(132, 244, 245, .12); }
.dk .flutua-chat { background: var(--opaco); border-color: rgba(241, 228, 237, .16); }
.dk .publico a.chip { background: rgba(255, 255, 255, .06); color: var(--text); }
.dk .publico a.chip:hover { background: rgba(132, 244, 245, .14); }

/* fluxo, faixa de retorno e comparativo */
.dk .etapa { background: rgba(255, 255, 255, .05); }
.dk .volta { background: rgba(110, 40, 252, .16); border-color: rgba(132, 244, 245, .4); color: var(--text); }
.dk .volta span { color: var(--accent); }
.dk .vs .depois { background: rgba(110, 40, 252, .18); border-color: rgba(132, 244, 245, .28); }
.dk .icone { background: rgba(132, 244, 245, .12); color: var(--accent); }

/* contato */
.dk .faixa .miolo { background: linear-gradient(135deg, rgba(26, 1, 118, .85), rgba(110, 40, 252, .5)); border: 1px solid rgba(241, 228, 237, .16); backdrop-filter: blur(10px); }
.dk .faixa .miolo h2, .dk .faixa .miolo p { color: var(--text); }
.dk .faixa .miolo a:not(.btn) { color: var(--accent-text); }
.dk .rodape a { color: var(--text); }

/* botão flutuante do WhatsApp: sombra adequada ao escuro */
.dk .wpp-fixo { box-shadow: 0 12px 30px -6px rgba(37, 211, 102, .45), 0 2px 8px rgba(0, 0, 0, .5); }

/* ===== bench.css ===== */
/* bench.css: testes do benchmark de 11/11/2026 (Design/Referencias/benchmark-layout-2026-11-11.md).
   Carrega por último. Cada bloco é uma ideia independente: para desligar, apague o bloco.
   Só CSS puro, sem estilo inline, sem recurso externo (cabe na CSP do site). */

/* [B1] Título em duas tonalidades (Intercom, Linear): segunda frase esmaecida, em caixa normal */
h2 .suave { color: var(--muted); }
.lp h2 .suave { color: #6C6577; }

/* [B2] Linha miúda sob os botões do hero (Intercom, respond.io) */
.hero-nota { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.home-hero .hero-nota { text-align: center; }

/* [B3] Leque do hero invadindo o começo da seção seguinte (respond.io, Cal.com) */
.home-hero { padding-bottom: 0; }
.home-hero .leque3 { margin-bottom: -64px; position: relative; z-index: 3;
  -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); }
.dk #fluxo { padding-top: 112px; }
@media (max-width: 700px) { .home-hero .leque3 { margin-bottom: -40px; } .dk #fluxo { padding-top: 84px; } }

/* [B4] Cabeçalho flutuante em pílula (Cal.com), só na home escura */
html { scroll-padding-top: 92px; }
.dk .topo { top: 12px; width: min(var(--largura), calc(100% - 24px)); margin: 12px auto 0;
  border: 1px solid var(--border); border-radius: 999px; }
.dk .topo .caixa { width: 100%; padding-inline: 22px 10px; min-height: 60px; }
.dk .menu-mobile nav { right: -4px; }

/* [B5] LP de clínicas: fundo um pouco mais quente e "Segurança" no menu do topo (Doctoralia) */
html.lp { --bg: #FAF6F3; --lavanda: #F6F0F8; }

/* [B6] Cabeçalho minimalista: logo sem encolher, menu menor e mais leve, botão compacto, sublinhado que desliza */
.topo .logo-link { flex: none; }
.topo .logo-link img { height: 24px; width: auto; }
.topo .caixa { gap: 28px; }
.nav { gap: 30px; }
.nav a, .dd summary { border-bottom: 0; padding: 12px 0; font-size: 12.5px; font-weight: 500; letter-spacing: .08em;
  color: color-mix(in srgb, var(--text) 74%, transparent);
  background: linear-gradient(currentColor, currentColor) left calc(100% - 7px) / 0 1.5px no-repeat;
  transition: color .3s ease, background-size .4s cubic-bezier(.2, .7, .2, 1); }
.nav a:hover, .nav a:focus-visible, .dd summary:hover, .dd[open] summary { color: var(--text); background-size: 100% 1.5px; border-bottom: 0; }
.nav .dd-lista a { background: none; color: var(--text); font-size: 15px; letter-spacing: 0; transition: background-color .2s ease; padding: 12px 14px; }
.nav .dd-lista a:hover { background-color: var(--lavanda); }
.topo .btn { min-height: 38px; padding: 0 16px; font-size: 13px; letter-spacing: .01em; white-space: nowrap; gap: 8px; }
.topo .btn.wpp svg { width: 16px; height: 16px; }

/* [B7] LP de clínicas: fluxo de 4 etapas mais compacto e seção de mídia sem os 6 cartões repetidos */
.lp .etapa { padding: 18px 18px 20px; }
.lp .etapa h3 { font-size: 16px; margin-bottom: 6px; }
.lp .etapa p { font-size: 14px; line-height: 1.5; }
.lp .bloco-funil { margin-top: 8px; }
.lp .bloco-funil h3 { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; text-transform: none; letter-spacing: 0; margin-bottom: 14px; }

/* [B8] Celular: o cartão "2 · Atendimento" do leque estava com 34% da largura (regras de home-claro.css, linhas 106 a 110,
   sobrescreviam a de celular) e o texto quebrava a cada palavra. Aqui ele ocupa a largura toda e o rótulo não quebra. */
.cartao-l .rotulo { white-space: nowrap; }
@media (max-width: 700px) {
  .home-hero .leque3 { height: 330px; }
  .home-hero .l-meio { left: 4%; width: 92%; top: 14px; }
}

/* [B9] LP de clínicas: menos espaço entre as seções e gradeado bem clarinho no fundo (como na home escura) */
.lp .secao { padding: 44px 0; }
.lp .lp-hero { padding: 40px 0 28px; }
.lp .secao-cab { margin-bottom: 26px; }
.lp .bloco + .bloco { margin-top: 48px; }
.lp .bloco-funil { margin-top: 0; }
.lp .faixa { margin-top: 0; }
.lp .bloco .kicker { margin: 0 0 12px; color: var(--accent-text); }
@media (min-width: 960px) { .lp .lp-hero { padding: 56px 0 40px; } .lp .secao { padding: 56px 0; } }
html.lp body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(26, 1, 118, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 1, 118, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(90% 75% at 50% 25%, #000, transparent 85%); mask-image: radial-gradient(90% 75% at 50% 25%, #000, transparent 85%); }
.lp .secao.alt { background: color-mix(in srgb, var(--lavanda) 72%, transparent); }

/* ===== v2.css ===== */
/* v2.css: teste de direção "maduro + minimalista + tech" (11/11/2026). Carrega por último.
   Fonte: títulos serifados + Inter no texto (a Gyrochrome fica só no logo). Cada bloco pode ser apagado sozinho.
   As fontes web (Inter e a serifada) ainda NÃO estão baixadas: enquanto isso o navegador usa as da lista (Georgia / Segoe UI). */
html.lp, html.dk {
  --serif: "Newsreader", "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --r-md: 8px; --r-lg: 12px; --r-xl: 16px; }
html.lp { --bg: #F4F2EE; --surface: #FFFFFF; --elev: #ECE8E1; --border: #E2DDD4; --muted: #67646F; --tinta: #15123B; --lavanda: #EFEBF6; }

/* [V1] títulos serifados, leves, em caixa normal; rótulos discretos e numerados */
h1, h2 { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -.012em; line-height: 1.08; }
h1 { font-size: clamp(36px, 5vw, 60px); }
h2 { font-size: clamp(28px, 3.6vw, 42px); }
.lp h1, .lp h2 { color: var(--tinta); }
h1 em, .lp h1 em { font-style: italic; font-weight: 400; color: inherit; }
.ponto { color: var(--accent); }
h3 { font-family: var(--fonte); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 17px; }
.kicker, .secao-cab .kicker { font: 500 14px/1.4 var(--fonte); letter-spacing: 0; text-transform: none; color: var(--muted); }
.lp .bloco h2, .lp .lp-hero h1 { max-width: none; }
.lp .bloco h2 { font-size: clamp(26px, 3vw, 36px); }

/* [V2] botões e menu em Inter, cantos menores */
.btn { font-family: var(--fonte); font-weight: 600; letter-spacing: 0; border-radius: 8px; }
.btn.pri { border-radius: 8px; }
.nav a, .dd summary { font-family: var(--fonte); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
.topo .btn { border-radius: 8px; font-size: 13.5px; }
.chip, .tag { text-transform: none; letter-spacing: 0; }

/* [V3] hero em duas colunas, com o gradiente da marca à direita (padrão do designer, Pattern 3) */
.lp .lp-hero .caixa { align-items: center; }
.lp .lp-hero .lead { max-width: 52ch; font-size: 18px; }
.lp .hero-arte { margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 4.4; max-height: 540px; width: 100%; justify-self: end; box-shadow: var(--sh); }
.lp .hero-arte img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 959px) { .lp .hero-arte { aspect-ratio: 16 / 10; } }

/* [V4] trajetória: números sóbrios, em linha */
.prova { padding-top: 8px; }
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border-top: 1px solid var(--border); }
.numeros > div { padding: 22px 0 22px; border-bottom: 1px solid var(--border); }
.numeros dt { font: 400 clamp(34px, 4.4vw, 52px)/1 var(--serif); color: var(--tinta); letter-spacing: -.02em; }
.numeros dd { margin: 8px 0 0; font-size: 14px; color: var(--muted); max-width: 22ch; }
@media (min-width: 860px) { .numeros { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); } .numeros > div { border-bottom: 0; padding: 26px 24px 26px 0; } .numeros > div + div { padding-left: 24px; border-left: 1px solid var(--border); } }
.nota-prova { margin: 16px 0 0; font-size: 13px; color: var(--muted); max-width: 78ch; }
.dk .numeros, .dk .numeros > div { border-color: rgba(241, 228, 237, .14); }
.dk .numeros dt { color: var(--text); }

/* [V5] etapas de implantação como linhas numeradas com fio (como no layout de referência) */
.lp .passos { display: block; border-top: 1px solid var(--border); }
.lp .passos .passo { display: grid; grid-template-columns: 56px minmax(0, 260px) 1fr; gap: 8px 24px; align-items: baseline; padding: 22px 0; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; height: auto; }
.lp .passos .num { position: static; width: auto; height: auto; background: none; color: var(--accent); font: 500 15px/1 var(--fonte); }
.lp .passos .num::after { content: ""; }
.lp .passos h3 { margin: 0; font-size: 19px; }
.lp .passos p { margin: 0; color: var(--muted); }
@media (max-width: 700px) { .lp .passos .passo { grid-template-columns: 40px 1fr; } .lp .passos .passo p { grid-column: 2; } }

/* [V6] cartões e fluxo com cantos menores e fio fino */
.lp .etapa, .lp .cartao { border-radius: 10px; }
.lp .etapa::before { font-family: var(--fonte); font-weight: 500; }
.lp .volta { border-radius: 10px; }

/* [V7] sobrepõe regras mais específicas do clinicas.css (h2 em peso 800 e largura de 24ch; rótulo com espaçamento) */
.lp h2 { font-weight: 400; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; max-width: 26ch; letter-spacing: -.012em; }
.lp .bloco h2 { font-size: clamp(26px, 3vw, 36px); max-width: 24ch; }
.lp .faixa h2 { font-weight: 400; }
.lp .kicker, .lp .secao-cab .kicker, .lp .bloco .kicker { font: 500 14px/1.4 var(--fonte); letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0 0 12px; }
.lp .lp-hero .hero-arte { max-height: 470px; }
.lp h3 { text-transform: none; letter-spacing: 0; }

/* [V8] home: a seção de trajetória vem logo depois do leque, então herda o recuo que o #fluxo tinha */
.dk #trajetoria { padding-top: 84px; }
@media (max-width: 700px) { .dk #trajetoria { padding-top: 84px; } }
.cartao-l .rotulo, .mini-funil .barra, .ad-botao { font-family: var(--fonte); }

/* [V9] pattern da marca como fundo do lado direito do hero, em baixa visibilidade e com granulado.
   Camadas, de cima para baixo: grão (tile semitransparente) > véu da cor do fundo (controla a transparência) > pattern.
   Para mudar a força, troque o .70 do véu (maior = mais apagado). A máscara apaga a borda esquerda e a de baixo. */
.lp .lp-hero, .home-hero { position: relative; isolation: isolate; overflow: clip; }
.lp .lp-hero::before, .home-hero::after { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 62%; pointer-events: none;
  background-image: url("pattern/grao.v1.png"), linear-gradient(rgba(244, 242, 238, .58), rgba(244, 242, 238, .58)), url("pattern/omen-gradiente-3.v1.webp");
  background-size: 160px 160px, auto, cover; background-position: 0 0, 0 0, center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48%), linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 48%), linear-gradient(#000 72%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.dk .home-hero::after { background-image: url("pattern/grao.v1.png"), linear-gradient(rgba(32, 33, 37, .66), rgba(32, 33, 37, .66)), url("pattern/omen-gradiente-3.v1.webp"); }
.lp .lp-hero .caixa { grid-template-columns: 1fr; min-height: 380px; }
@media (min-width: 960px) { .lp .lp-hero .caixa { grid-template-columns: minmax(0, 560px); } }
@media (max-width: 959px) { .lp .lp-hero::before, .home-hero::after { width: 100%; opacity: .7; } }

/* [V10] a cabeça do mascote espiando por cima da borda dos cartões (como no pitch): mostra só a parte de cima */
.prova .caixa, .volta, .funil, .vitrine { position: relative; }
.espia { position: absolute; width: 58px; height: 31px; overflow: hidden; pointer-events: none; z-index: 2; }
.espia img { display: block; width: 58px; height: auto; }
.volta .espia, .funil .espia { top: -30px; }
.funil .espia { right: 32px; }
.volta .espia { right: 40px; }
.vitrine .espia { top: -30px; left: 32px; transform: rotate(-5deg); z-index: 3; }
.espia.e-dir { transform: rotate(5deg); }
.secao-cab { position: relative; }
.espia.e-canto { top: 0; right: 0; width: 76px; height: auto; overflow: visible; }
.espia.e-canto img { width: 76px; }
@media (max-width: 700px) { .espia.e-canto { width: 52px; } .espia.e-canto img { width: 52px; } }

/* [V11] checks e listas mais elegantes: fio fino e um "tique" desenhado, sem círculo cheio */
.lista-ok { gap: 0; border-top: 1px solid var(--border); }
.lista-ok li { padding: 12px 0 12px 32px; border-bottom: 1px solid var(--border); }
.lista-ok li::before { content: ""; left: 4px; top: calc(12px + .82em); width: 11px; height: 6px; border-radius: 0; background: none; display: block; font-size: 0;
  border: solid var(--accent); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
.vs .depois li::before { content: ""; width: 11px; height: 6px; top: .5em; left: 4px; border-radius: 0; background: none; border: solid var(--accent); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
.vs .antes li::before { content: "×"; width: auto; height: auto; top: -.08em; left: 2px; border: 0; border-radius: 0; background: none; font: 300 24px/1 var(--fonte); color: var(--nao); opacity: .8; }
.dk .lista-ok, .dk .lista-ok li { border-color: rgba(241, 228, 237, .14); }

/* [V12] funil: faixas contínuas em forma de funil, com degradê da marca */
.funil { width: min(460px, 100%); display: block; padding: 34px 28px 20px; border-radius: 16px; }
.funil .barra { display: flex; align-items: center; justify-content: center; width: 100% !important; height: 52px; margin: 0 0 4px; padding: 0; border-radius: 0;
  font: 500 13.5px/1 var(--fonte); letter-spacing: .01em; color: #fff; }
.funil .b1 { background: #1A0176; clip-path: polygon(0 0, 100% 0, 94.5% 100%, 5.5% 100%); }
.funil .b2 { background: #3B14B8; clip-path: polygon(5.5% 0, 94.5% 0, 89% 100%, 11% 100%); }
.funil .b3 { background: #6E28FC; clip-path: polygon(11% 0, 89% 0, 83.5% 100%, 16.5% 100%); }
.funil .b4 { background: linear-gradient(90deg, #A98BFF, #84F4F5); color: #1A0176; font-weight: 600; clip-path: polygon(16.5% 0, 83.5% 0, 78% 100%, 22% 100%); margin-bottom: 0; }
.funil .chat-nota { padding: 14px 0 0; }

/* [V13] chat em vidro (macOS/iPhone) sobre o pattern da marca */
.bloco > div:has(> .chat) { position: relative; padding: 40px 28px; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: url("pattern/grao.v1.png") 0 0 / 160px, url("pattern/omen-gradiente-2.v1.webp") center / cover; }
.chat { background: rgba(255, 255, 255, .46); border: 1px solid rgba(255, 255, 255, .62); border-radius: 26px; overflow: hidden;
  -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7);
  box-shadow: 0 34px 60px -26px rgba(26, 1, 118, .55), inset 0 1px 0 rgba(255, 255, 255, .7); }
.chat-topo { position: relative; background: rgba(255, 255, 255, .34); border-bottom: 1px solid rgba(255, 255, 255, .55); padding: 14px 18px 14px 74px; }
.chat-topo::before { content: ""; position: absolute; left: 18px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: #FF6B63; box-shadow: 16px 0 0 #FFC042, 32px 0 0 #3DCB5A; opacity: .9; }
.chat-topo img { background: rgba(255, 255, 255, .7); }
.chat-topo strong { color: #15123B; } .chat-topo span { color: rgba(21, 18, 59, .6); }
.chat .msg { box-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.chat .msg.in { background: rgba(255, 255, 255, .72); color: #15123B; border-radius: 18px 18px 18px 5px; }
.chat .msg.out { background: linear-gradient(180deg, #8B4DFF, #6E28FC); color: #fff; border-radius: 18px 18px 5px 18px; box-shadow: 0 6px 14px -6px rgba(110, 40, 252, .7); }
.chat .chat-nota { color: rgba(21, 18, 59, .62); }

/* [V14] menos espaço entre as seções, também na home escura */
.dk .secao { padding: 44px 0; }
.dk #fluxo { padding-top: 44px; }
@media (min-width: 960px) { .dk .secao { padding: 52px 0; } .dk #fluxo { padding-top: 52px; } .lp .secao { padding: 52px 0; } }
.prova .secao-cab { position: static; }
.lp .bloco-funil h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.01em; }

/* [V15] faixa fina do slogan (no lugar da seção de números): uma frase, segmentos em chips e selos de processo */
.faixa-slogan { padding: 28px 0 0; }
.faixa-slogan .caixa { border-top: 1px solid var(--border); padding-top: 36px; }
.faixa-slogan h2 { max-width: none; font-size: clamp(28px, 3.6vw, 42px); }
.faixa-slogan p { margin: 12px 0 0; color: var(--muted); font-size: 17px; max-width: 60ch; }
.chips-seg, .selos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-seg { margin-top: 20px; }
.chips-seg li { padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--muted); }
.selos { margin-top: 18px; gap: 6px 26px; }
.selos li { position: relative; padding-left: 20px; font-size: 14px; color: var(--text); }
.selos li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 5px; border: solid var(--accent); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
.dk .faixa-slogan .caixa, .dk .chips-seg li { border-color: rgba(241, 228, 237, .16); }
.dk .selos li::before { border-color: var(--accent-text); }

/* [V16] mascote de corpo inteiro (degradê da marca) flutuando ao lado do texto do hero */
.lp .lp-hero .caixa, .home-hero .caixa { position: relative; }
.mascote-voa { position: absolute; right: 5%; top: 50%; width: clamp(170px, 19vw, 270px); translate: 0 -50%; display: none; pointer-events: none; }
.mascote-voa img { display: block; width: 100%; height: auto; animation: voa 5.6s ease-in-out infinite; filter: drop-shadow(0 24px 30px rgba(26, 1, 118, .28)); }
.mascote-voa .sombra { display: block; width: 52%; height: 14px; margin: 22px auto 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(26, 1, 118, .34), transparent); animation: voa-sombra 5.6s ease-in-out infinite; }
@keyframes voa { 0%, 100% { transform: translateY(10px) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes voa-sombra { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.78); opacity: .55; } }
@media (min-width: 960px) { .lp .mascote-voa { display: block; } }
@media (min-width: 1180px) { .home-hero .mascote-voa { display: block; right: 1%; top: 40%; width: 190px; } }

/* [V17] posição do mascote: na home ele fica à esquerda do texto e menor; na LP de clínicas ele vai à direita, espelhado (olhando para a esquerda) */
.lp .mascote-voa img { scale: -1 1; }
@media (min-width: 1180px) { .home-hero .mascote-voa { left: 1%; right: auto; top: 42%; width: 150px; } }

/* [V18] leque da home: textos mais legíveis (Inter, maior, mais contraste) e mini-funil igual ao funil da LP */
.cartao-l { font-family: var(--fonte); }
.cartao-l .rotulo { font: 700 12px/1 var(--fonte); letter-spacing: .04em; padding: 8px 14px; }
.cartao-l .msg { font-size: 13.5px; line-height: 1.4; padding: 9px 13px; }
.cartao-l .ad-patro { font-size: 12.5px; }
.cartao-l .ad-botao { font: 600 14px/1 var(--fonte); padding: 12px; }
.mini-funil { display: block; margin-top: 8px; }
.dk .mini-funil .barra, .mini-funil .barra { width: 100%; height: 44px; margin: 0 0 4px; padding: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; justify-self: auto;
  font: 600 13.5px/1 var(--fonte); letter-spacing: .01em; color: #fff; white-space: nowrap; }
.dk .mini-funil .m1, .mini-funil .m1 { width: 100%; background: #1A0176; clip-path: polygon(0 0, 100% 0, 94.5% 100%, 5.5% 100%); border: 0; }
.dk .mini-funil .m2, .mini-funil .m2 { width: 100%; background: #3B14B8; clip-path: polygon(5.5% 0, 94.5% 0, 89% 100%, 11% 100%); }
.dk .mini-funil .m3, .mini-funil .m3 { width: 100%; background: #6E28FC; clip-path: polygon(11% 0, 89% 0, 83.5% 100%, 16.5% 100%); }
.dk .mini-funil .m4, .mini-funil .m4 { width: 100%; background: linear-gradient(90deg, #B7A3FF, #84F4F5); color: #1A0176; clip-path: polygon(16.5% 0, 83.5% 0, 78% 100%, 22% 100%); margin-bottom: 0; }
.cartao-l .mini-nota { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
@media (max-width: 700px) { .cartao-l .msg { font-size: 14px; } }

/* [V19] mascote espiando: a inclinação passa para a imagem (o recorte fica reto, sem "quadrado" aparecendo) e, na home, ele espia pelo topo da moldura do fluxo */
.espia, .espia.e-dir, .vitrine .espia { transform: none; }
.espia img { transform-origin: 50% 100%; }
.espia.e-dir img { transform: rotate(5deg); }
.vitrine .espia img { transform: rotate(-5deg); }
.mapa-frame.mapa-secao { position: relative; }
.mapa-secao > .espia.e-moldura { top: -30px; right: 56px; z-index: 3; }
.mapa-secao > .espia.e-moldura img { transform: rotate(4deg); }
/* [V19b] mostra um pouco mais da cabeça (com os olhos) */
.espia { height: 38px; }
.volta .espia, .funil .espia, .vitrine .espia, .mapa-secao > .espia.e-moldura { top: -37px; }
.espia.e-canto { height: auto; }

/* [V20] segmentos em faixa que corre de um lado ao outro, em loop (só CSS), com o Omen no meio das categorias */
.faixa-slogan { overflow-x: clip; }
.faixa-slogan .caixa-2 { border-top: 0; padding-top: 0; }
.marquee { margin-top: 22px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-trilho { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-trilho { animation-play-state: paused; }
.marquee ul { display: flex; flex: none; align-items: center; gap: 12px; margin: 0; padding: 0 12px 0 0; list-style: none; }
.marquee li { flex: none; white-space: nowrap; padding: 8px 18px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; color: var(--muted); }
.marquee li.omen { padding: 0 6px; border: 0; display: flex; align-items: center; }
.marquee li.omen img { display: block; width: 34px; height: auto; }
.dk .marquee li { border-color: rgba(241, 228, 237, .18); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-trilho { width: auto; flex-wrap: wrap; animation: none; }
  .marquee ul { flex-wrap: wrap; }
  .marquee ul[aria-hidden="true"] { display: none; }
}

/* [V21] os selos ficam centralizados na página; a faixa tem 8 cópias (2 metades de 4) para nunca mostrar vazio em telas largas */
.selos { justify-content: center; }
.marquee-trilho { animation-duration: 110s; }
@media (prefers-reduced-motion: reduce) { .marquee ul[aria-hidden="true"] { display: none; } }

/* [V22] a duração da volta acompanha o tamanho da lista (cerca de 25 px por segundo) */
.marq-home .marquee-trilho { animation-duration: 150s; }
.marq-lp .marquee-trilho { animation-duration: 150s; }

/* [V23] a faixa de segmentos corre só dentro da caixa de conteúdo, com o esmaecer nas bordas dela */
.marquee { width: min(var(--largura), calc(100% - 32px)); margin: 22px auto 0; }

/* [V24] fluxo em trilho: um circuito fechado (anúncio até acompanhamento e de volta), com o Omen percorrendo o caminho */
.trilho { color: var(--text); }
.trilho-volta { margin: 0 0 6px; text-align: center; font: 500 15px/1.4 var(--fonte); color: var(--muted); }
.trilho-volta span { margin-right: 8px; color: var(--accent-text); }
.trilho-svg { display: block; width: 100%; height: auto; overflow: visible; }
.trilho-pista { fill: none; stroke: url(#trilho-g); stroke-width: 2; stroke-opacity: .9; }
.trilho-seta { fill: none; stroke: currentColor; stroke-opacity: .5; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trilho-no { fill: var(--accent); }
.trilho-n { fill: var(--accent-fg); font: 700 14px var(--fonte); text-anchor: middle; }
.trilho-passos { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: passo; }
.trilho-passos li { padding: 0 20px; text-align: center; }
.trilho-passos h3 { margin: 0; font: 400 clamp(21px, 2.1vw, 26px)/1.15 var(--serif); letter-spacing: -.01em; }
.trilho-passos p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
@media (max-width: 860px) {
  .trilho { display: flex; flex-direction: column; }
  .trilho-svg { display: none; }
  .trilho-volta { order: 3; margin: 22px 0 0; text-align: left; }
  .trilho-passos { display: block; }
  .trilho-passos li { position: relative; padding: 0 0 26px 54px; text-align: left; counter-increment: passo; }
  .trilho-passos li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); font: 700 14px var(--fonte); }
  .trilho-passos li::after { content: ""; position: absolute; left: 15px; top: 38px; bottom: 6px; width: 0; border-left: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); }
  .trilho-passos li:last-child { padding-bottom: 0; } .trilho-passos li:last-child::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .trilho-omen { display: none; } }

/* [V25] celular: na LP de médicos o Omen aparece, menor, abaixo dos botões do hero */
@media (max-width: 959px) {
  .lp .mascote-voa { display: block; position: static; translate: none; order: 3; width: 120px; margin: 4px auto 0; }
  .lp .mascote-voa .sombra { height: 10px; margin-top: 14px; }
}

/* ===== Rodada de feedback (12/11/2026) ===== */

/* [V26] "O que a Omen entrega": criativos, rastreio e páginas, cada um com uma ilustração sóbria */
.entregas { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .entregas { grid-template-columns: repeat(3, 1fr); } }
.entrega { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.dk .entrega { background: rgba(255, 255, 255, .05); border-color: rgba(241, 228, 237, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ev-vis { position: relative; height: 224px; overflow: hidden; border-bottom: 1px solid var(--border);
  background: url("pattern/grao.v1.png") 0 0 / 160px, linear-gradient(135deg, rgba(110, 40, 252, .09), rgba(132, 244, 245, .20)); }
.dk .ev-vis { border-color: rgba(241, 228, 237, .14); background: url("pattern/grao.v1.png") 0 0 / 160px, linear-gradient(135deg, rgba(110, 40, 252, .22), rgba(132, 244, 245, .07)); }
.ev-txt { padding: 22px 24px 26px; }
.ev-k { margin: 0 0 6px; font: 600 15px/1.3 var(--fonte); color: var(--accent-text); }
.ev-txt h3 { margin: 0; font: 400 clamp(23px, 2.2vw, 27px)/1.2 var(--serif); letter-spacing: -.01em; }
.ev-txt > p:not(.ev-k) { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.ev-txt .lista-ok { margin-top: 16px; }
.ev-txt .lista-ok li { padding: 12px 0 12px 30px; font-size: 15.5px; }
.nota-ilus { margin: 16px 0 0; font-size: 15px; color: var(--muted); }

/* criativos: três peças em formatos diferentes (Stories 9:16, feed 4:5, carrossel 1:1) */
.pc { position: absolute; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 30px -14px rgba(26, 1, 118, .45), 0 0 0 1px rgba(255, 255, 255, .25) inset; }
.p-story { width: 84px; height: 150px; left: calc(50% - 134px); top: 34px; rotate: -7deg; background: linear-gradient(165deg, #1A0176, #6E28FC); }
.p-story .prog { position: absolute; left: 8px; right: 8px; top: 8px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .32); }
.p-story .prog::after { content: ""; position: absolute; inset: 0 55% 0 0; border-radius: 2px; background: #fff; }
.p-story .play { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -22px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.p-story .play::after { content: ""; position: absolute; left: 12px; top: 8px; border: solid transparent; border-width: 7px 0 7px 11px; border-left-color: #1A0176; }
.p-story img { position: absolute; left: 50%; bottom: 10px; width: 34px; height: auto; margin-left: -17px; }
.p-feed { width: 108px; height: 136px; left: calc(50% - 54px); top: 48px; z-index: 2; background: url("pattern/omen-gradiente-3.v1.webp") center / cover; }
.p-feed img { position: absolute; left: 50%; top: 16px; width: 54px; height: auto; margin-left: -27px; filter: drop-shadow(0 8px 10px rgba(26, 1, 118, .35)); }
.p-feed b, .p-feed u { position: absolute; left: 12px; height: 7px; border-radius: 4px; background: #fff; }
.p-feed b { bottom: 24px; width: 62%; } .p-feed u { bottom: 11px; width: 38%; opacity: .6; }
.p-car { width: 98px; height: 98px; left: calc(50% + 40px); top: 70px; rotate: 6deg; background: linear-gradient(135deg, #84F4F5, #B7A3FF); }
.p-car .s1 { position: absolute; inset: 12px 24px 26px 12px; border-radius: 6px; background: rgba(255, 255, 255, .78); }
.p-car .s2 { position: absolute; top: 12px; bottom: 26px; right: -12px; width: 30px; border-radius: 6px; background: rgba(255, 255, 255, .45); }
.p-car em { position: absolute; left: 0; right: 0; bottom: 9px; display: flex; justify-content: center; gap: 5px; }
.p-car em i { width: 6px; height: 6px; border-radius: 50%; background: #1A0176; opacity: .3; } .p-car em i:first-child { opacity: 1; }

/* rastreio: o caminho do contato, com a origem de cada etapa */
.ev-rast { display: grid; place-items: center; }
.ev-rast ol { list-style: none; margin: 0; padding: 12px 16px; width: min(304px, 90%); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 30px -18px rgba(26, 1, 118, .4); }
.dk .ev-rast ol { background: #2A2B31; border-color: rgba(241, 228, 237, .16); }
.ev-rast li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 38px; font: 500 15px/1 var(--fonte); color: var(--text); }
.ev-rast li i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.ev-rast li:not(:last-child) i::after { content: ""; position: absolute; left: 4.5px; top: 14px; width: 1px; height: 24px; background: color-mix(in srgb, var(--accent) 40%, transparent); }
.ev-rast li.fim i { background: linear-gradient(135deg, #84F4F5, #6E28FC); }
.ev-rast li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-rast li em { font-style: normal; font-size: 13px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.dk .ev-rast li em { border-color: rgba(241, 228, 237, .2); }

/* páginas: uma janela de navegador com a página de destino */
.ev-pag { display: grid; justify-items: center; align-items: end; }
.ev-pag > * { grid-area: 1 / 1; }
.ev-pag .nav-b, .ev-pag .corpo { width: min(280px, 86%); }
.ev-pag .nav-b { align-self: start; margin-top: 26px; display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; }
.ev-pag .nav-b i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.ev-pag .nav-b span { flex: 1; height: 12px; margin-left: 8px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.ev-pag .corpo { align-self: start; margin-top: 52px; height: 190px; padding: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 30px -18px rgba(26, 1, 118, .4); }
.dk .ev-pag .nav-b, .dk .ev-pag .corpo { background: #2A2B31; border-color: rgba(241, 228, 237, .16); }
.topo-p { display: flex; align-items: center; gap: 6px; height: 22px; }
.topo-p b { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 35%, transparent); } .topo-p b:nth-child(1) { width: 34px; } .topo-p b:nth-child(2) { width: 26px; }
.topo-p u { margin-left: auto; text-decoration: none; background: #25D366; color: #fff; font: 600 11.5px/1 var(--fonte); padding: 5px 9px; border-radius: 999px; }
.faixa-p { position: relative; height: 70px; margin-top: 8px; border-radius: 8px; background: url("pattern/omen-gradiente-3.v1.webp") center / cover; }
.faixa-p::before, .faixa-p::after { content: ""; position: absolute; left: 12px; height: 8px; border-radius: 4px; background: #fff; }
.faixa-p::before { top: 20px; width: 58%; } .faixa-p::after { top: 36px; width: 36%; opacity: .65; }
.col-p { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.col-p s { height: 40px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--border); }

/* [V27] cabeçalho de seção em duas colunas em tela larga (texto à esquerda, apoio à direita), em vez de uma coluna estreita com a metade vazia */
@media (min-width: 1000px) {
  .secao-cab:has(> p:not(.kicker)) { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 72px; align-items: end; }
  .secao-cab:has(> p:not(.kicker)) > .kicker { grid-column: 1; grid-row: 1; }
  body .secao-cab:has(> p:not(.kicker)) > h2 { grid-column: 1; grid-row: 2; max-width: none; margin: 0; }
  .secao-cab:has(> p:not(.kicker)) > p:not(.kicker) { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0 0 6px; max-width: 46ch; }
}
.secao-cab:not(:has(> p:not(.kicker))) { max-width: none; }
body .secao-cab:not(:has(> p:not(.kicker))) h2 { max-width: none; }

/* [V28] textos de apoio maiores: descrições, rótulos e notas sobem para 16–17px */
html .kicker, html .secao-cab .kicker, html .lp .kicker, html .lp .secao-cab .kicker, html .lp .bloco .kicker { font-size: 15px; }
html .secao-cab p, .lp .secao-cab p, .dk .secao-cab p { font-size: 18px; }
.lp .cartao p, .dk .cartao p, .etapa p, .lp .etapa p, .atributo p, .trilho-passos p, .mapa .no p, .mapa-secao .no p, .aba-painel p, .bloco p, .vs li, .faq details p, .nota { font-size: 16.5px; }
.lista-ok li, .selos li, .hero-nota, .nota-previa, .nota-prova, .aviso-lp, .aviso-dados, .legenda-seg, .marquee li, .trilho-volta { font-size: 16px; }
.chat-nota, .mini-nota, .cartao-l .mini-nota, .cartao-l .ad-patro, .chat-topo span { font-size: 14.5px; }
.cartao-l .rotulo { font-size: 13px; } .cartao-l .msg, .chat .msg, .msg { font-size: 15px; } .cartao-l .ad-botao { font-size: 15px; }
.funil .barra, .dk .mini-funil .barra, .mini-funil .barra { font-size: 15px; }
.nav a, .dd summary { font-size: 15px; } .topo .btn { font-size: 14.5px; } .tag { font-size: 12.5px; }
.nav .dd-lista a span { font-size: 14.5px; } .menu-mobile summary, .menu-mobile nav a { font-size: 15px; }
.rodape small, .legal-nota { font-size: 14px; }
.faq summary { font-size: 17px; }

/* [V29] menos botões competindo: secundários viram link de texto; WhatsApp flutuante só no celular (no computador o cabeçalho fixo já tem o botão) */
.acoes .btn.sec, .link-sec { background: none; border: 0; box-shadow: none; padding: 0 4px; min-height: 0; color: var(--text); font: 600 16px/1.2 var(--fonte); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 5px; }
.acoes .btn.sec::after { content: "→"; margin-left: 8px; text-decoration: none; display: inline-block; }
.acoes .btn.sec:hover, .link-sec:hover { text-decoration-color: currentColor; transform: none; background: none; }
.faixa .acoes { align-items: center; gap: 12px 28px; }
@media (min-width: 960px) { .wpp-fixo { display: none; } }

/* [V30] LP: painel em largura total, CTA no meio da página, lista de custo, legenda da faixa */
.painel-largo { display: block; }
.painel-largo .painel-txt { max-width: 640px; }
.painel-largo .painel-txt h2 { max-width: none; }
.painel-largo .vitrine { width: 100%; margin: 52px 0 0; }
.painel-largo .moldura { padding: 46px 12px 12px; }
.cta-meio { display: flex; align-items: center; gap: 20px; margin-top: 84px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.cta-meio img { width: 56px; height: auto; flex: none; }
.cta-meio div { display: grid; gap: 2px; }
.cta-meio strong { font: 600 18px/1.35 var(--fonte); color: var(--tinta, var(--text)); }
.cta-meio span { font-size: 16px; color: var(--muted); }
.cta-meio .btn { margin-left: auto; flex: none; }
@media (max-width: 700px) { .cta-meio { flex-direction: column; align-items: flex-start; margin-top: 64px; } .cta-meio .btn { margin-left: 0; } }
.custo { margin: 10px 0 10px; padding-left: 20px; } .custo li { margin: 6px 0; }
.faq details p, .faq details ul { max-width: 68ch; }
.legenda-seg { margin: 0; font-weight: 500; color: var(--muted); }
.faixa-slogan .marquee { margin-top: 16px; }

/* [V31] faixa de segmentos: o Omen em várias cores, cada um com um leve balanço */
.marquee li { padding: 9px 20px; }
.marquee li.omen { padding: 0 8px; }
.marquee li.omen img { width: 38px; animation: omen-bob 3.6s ease-in-out infinite; }
.marquee li.omen:nth-of-type(3n) img { animation-delay: -1.3s; } .marquee li.omen:nth-of-type(3n+1) img { animation-delay: -2.4s; }
@keyframes omen-bob { 0%, 100% { transform: translateY(2px) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
.marq-lp .marquee-trilho { animation-duration: 110s; }
@media (prefers-reduced-motion: reduce) { .marquee li.omen img { animation: none; } }
html body .kicker, html body .secao-cab .kicker, html body .bloco .kicker, html body .lp-hero .kicker { font-size: 15px; }


/* [V26] ajustes rápidos */
/* e-mail em destaque: só quebra se não couber na linha, nunca no meio da palavra */
.copiavel { word-break: normal; overflow-wrap: anywhere; }
/* rodapé: dados da empresa numa coluna larga o bastante, links alinhados à direita */
@media (min-width: 800px) {
  .rodape .caixa { grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 24px 48px; }
  .rodape ul { justify-content: flex-end; }
}
.rodape { padding-bottom: 104px; }
/* celular: botão do WhatsApp menor e no canto, sem pulso, e o rodapé termina acima dele */
@media (max-width: 700px) {
  .wpp-fixo { right: 12px; bottom: 16px; width: 50px; height: 50px; }
  .wpp-fixo svg { width: 28px; height: 28px; }
  .wpp-fixo::after { animation: none; display: none; }
  .rodape { padding-bottom: 88px; }
}
/* faixa de segmentos: esmaecer mais curto nas bordas e o Omen dentro de uma pílula, como os outros itens */
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.marquee li.omen { padding: 8px 14px; border: 1px solid var(--border); }
.dk .marquee li.omen { border-color: rgba(241, 228, 237, .18); }
.marquee li.omen img { width: 26px; }