/* LACTOS360 — site de vendas. Identidade 2026 (brandbook v1): Lato, azul profundo, azul sistema, ciano ativo, gelo técnico.
   Sem CDN, sem rastreadores. O @font-face do Lato é emitido por views/pagina.php (com ?v= do build); aqui só os tokens. */

:root {
  /* marca */
  --cor: #146CC2; --cor-esc: #0A3158; --cor-clara: #E3EFF9; --gelo: #EDF6FB; --ciano: #08A9D5; --leite: #FFFFFF;
  /* texto e linhas */
  --tinta: #183249; --mudo: #52687B; --linha: #D8E5EC; --ok: #167C62;
  --raio: 16px; --sombra: 0 10px 30px rgba(10, 49, 88, .12);
  --fonte-titulo: "Lato", Arial, sans-serif; --fonte: "Lato", Arial, sans-serif;
  /* apoio em fundos escuros */
  --sobre-esc: #BFD3E6; --sobre-esc-2: #A9C3DA;
  /* linguagem gráfica "órbita 360°" (anéis azul/ciano), embutida para não depender de arquivo e de cache */
  --orbita: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' width='800' height='800'%3E%3Ccircle cx='400.0' cy='400.0' r='110.0' fill='none' stroke='%23FFFFFF' stroke-opacity='0.12' stroke-width='2.0'/%3E%3Ccircle cx='400.0' cy='400.0' r='200.0' fill='none' stroke='%23FFFFFF' stroke-opacity='0.12' stroke-width='2.0'/%3E%3Ccircle cx='400.0' cy='400.0' r='290.0' fill='none' stroke='%23FFFFFF' stroke-opacity='0.12' stroke-width='2.0'/%3E%3Ccircle cx='400.0' cy='400.0' r='380.0' fill='none' stroke='%23FFFFFF' stroke-opacity='0.12' stroke-width='2.0'/%3E%3Cpath d='M468.4 212.1A200.0 200.0 0 0 1 500.0 573.2' fill='none' stroke='%2308A9D5' stroke-width='14.0' stroke-linecap='round' opacity='1'/%3E%3Ccircle cx='365.3' cy='597.0' r='9.0' fill='%2308A9D5' opacity='1'/%3E%3Cpath d='M148.9 545.0A290.0 290.0 0 0 1 475.1 119.9' fill='none' stroke='%23146CC2' stroke-width='14.0' stroke-linecap='round' opacity='1'/%3E%3Ccircle cx='622.2' cy='213.6' r='9.0' fill='%23146CC2' opacity='1'/%3E%3Cpath d='M774.2 466.0A380.0 380.0 0 0 1 366.9 778.6' fill='none' stroke='%2308A9D5' stroke-width='7.0' stroke-linecap='round' opacity='0.6'/%3E%3Ccircle cx='42.9' cy='270.0' r='6.0' fill='%2308A9D5' opacity='0.6'/%3E%3Cpath d='M296.6 362.4A110.0 110.0 0 0 1 495.3 345.0' fill='none' stroke='%23146CC2' stroke-width='10.0' stroke-linecap='round' opacity='1'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--fonte); font-size: 1.0625rem; color: var(--tinta); background: var(--leite); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: var(--cor); }
h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.15rem); font-weight: 900; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 900; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
.cont { width: min(1160px, 100% - 40px); margin-inline: auto; }
.so-leitor { position: absolute; left: -9999px; }
.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec.alt { background: var(--gelo); }
.sec.escura { background: var(--cor-esc); color: #E6F0F8; position: relative; overflow: hidden; }
.sec.escura::before { content: ""; position: absolute; right: -260px; top: -200px; width: 720px; height: 720px; background: var(--orbita) center / contain no-repeat; opacity: .55; pointer-events: none; }
.sec.escura > .cont { position: relative; }
.sec.escura h2, .sec.escura h3 { color: #fff; }
.eyebrow { display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #0F5DA6; background: var(--cor-clara); padding: 6px 12px; border-radius: 99px; margin-bottom: 16px; }
.escura .eyebrow, .hero .eyebrow { background: rgba(8,169,213,.16); color: #8BDBF2; }
.lead { font-size: 1.15rem; color: var(--mudo); max-width: 62ch; }
.escura .lead, .hero .lead { color: var(--sobre-esc); }
.centro { text-align: center; } .centro .lead { margin-inline: auto; }

/* Botões */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 700 1rem var(--fonte-titulo); padding: 14px 24px; border-radius: 12px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-pri { background: var(--cor); color: #fff; box-shadow: 0 8px 20px rgba(20,108,194,.28); }
.btn-pri:hover { background: var(--cor-esc); }
.btn-sec { background: transparent; color: var(--cor); border-color: var(--cor); }
.btn-ouro { background: var(--ciano); color: var(--cor-esc); box-shadow: 0 8px 20px rgba(8,169,213,.32); }
/* sobre fundo azul profundo o botão principal é ciano com texto azul profundo (contraste 4,8:1), como no banner da marca */
.hero .btn-pri, .sec.escura .btn-pri, .cta-final .btn-pri { background: var(--ciano); color: var(--cor-esc); box-shadow: 0 8px 20px rgba(8,169,213,.28); }
.hero .btn-pri:hover, .sec.escura .btn-pri:hover, .cta-final .btn-pri:hover { background: #3CC0E6; }
.btn-g { padding: 17px 30px; font-size: 1.08rem; }
.btn-bloco { width: 100%; justify-content: center; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo .cont { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; font: 900 1.25rem var(--fonte-titulo); color: var(--cor-esc); text-decoration: none; letter-spacing: -.02em; }
.marca img { width: 36px; height: 36px; border-radius: 10px; }
.marca b { color: var(--cor); }
.menu { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.menu a { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .95rem;  white-space: nowrap; }
.menu a:hover { color: var(--cor); }
.menu .btn { padding: 10px 18px; color: #fff; white-space: nowrap; }
.hamb { display: none; margin-left: auto; background: none; border: 0; font-size: 1.7rem; color: var(--cor-esc); cursor: pointer; }

/* Hero */
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 96px); background: linear-gradient(120deg, #0A3158 0%, #0A3158 58%, #0C3F72 100%); color: #E6F0F8; overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; right: -230px; top: -150px; width: 860px; height: 860px; background: var(--orbita) center / contain no-repeat; pointer-events: none; }
.hero .cont { position: relative; }
.hero h1 { color: #fff; }
.hero-1::before { right: -520px; top: -260px; width: 760px; height: 760px; }
.hero .cont { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 em { font-style: normal; color: var(--ciano); white-space: nowrap; }
.hero .acoes { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 22px; }
.garantias { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 0; color: var(--sobre-esc); font-size: .92rem; }
.garantias li::before { content: "✓"; color: var(--ciano); font-weight: 800; margin-right: 6px; }
.mock { position: relative; }
.tela { background: #fff; border: 1px solid var(--linha); border-radius: 20px; box-shadow: var(--sombra); overflow: hidden; }
.tela .barra { display: flex; gap: 6px; padding: 12px 14px; background: var(--gelo); border-bottom: 1px solid var(--linha); }
.tela .barra i { width: 10px; height: 10px; border-radius: 50%; background: #C3D5E2; }
.tela .corpo { padding: 18px; display: grid; gap: 14px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { background: var(--gelo); border-radius: 12px; padding: 12px; }
.kpi small { color: var(--mudo); font-size: .72rem; display: block; }
.kpi b { font: 700 1.25rem var(--fonte-titulo); color: var(--cor-esc); }
.kpi.ok b { color: var(--ok); } .kpi.av b { color: #9A5F12; }
.barras { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 6px 4px 0; }
.barras span { flex: 1; background: linear-gradient(var(--cor), var(--cor-esc)); border-radius: 6px 6px 0 0; }
.linha-m { display: flex; justify-content: space-between; font-size: .85rem; padding: 10px 12px; border-radius: 10px; background: var(--leite); border: 1px solid var(--linha); }
.linha-m b { color: var(--cor-esc); } .linha-m .tag { color: var(--ok); font-weight: 700; }
.celular { position: absolute; right: -10px; bottom: -34px; width: 150px; background: #fff; border: 6px solid #183249; border-radius: 26px; box-shadow: var(--sombra); padding: 10px 8px 12px; }
.celular .t { font: 700 .72rem var(--fonte-titulo); color: var(--cor-esc); margin-bottom: 6px; }
.celular .b { background: var(--cor); color: #fff; border-radius: 8px; text-align: center; font-size: .7rem; padding: 8px 4px; margin-top: 6px; font-weight: 700; }
.celular .c { background: var(--gelo); border-radius: 8px; padding: 6px; font-size: .66rem; color: var(--mudo); margin-top: 4px; }

/* Faixa de números/dores */
.faixa { background: var(--cor); color: #fff; padding: 22px 0; }
.faixa .cont { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between; font-weight: 600; font-size: .95rem; }
.faixa span::before { content: "●"; color: #9BE3F6; margin-right: 8px; font-size: .6rem; vertical-align: middle; }

/* Cartões */
.grade { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.card .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--cor-clara); color: var(--cor); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 14px; }
.card p { color: var(--mudo); margin: 0; font-size: .96rem; }
.card ul { margin: 10px 0 0; padding-left: 18px; color: var(--mudo); font-size: .92rem; }
.etiqueta { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--gelo); color: var(--cor-esc); margin-left: 6px; vertical-align: middle; }
.etiqueta.pro { background: #CDEFF8; color: var(--cor-esc); }

/* Perfis */
.perfil { background: #fff; border-radius: var(--raio); border: 1px solid var(--linha); padding: 28px; }
.perfil h3 { display: flex; align-items: center; gap: 10px; }
.perfil .n { font: 900 2rem var(--fonte-titulo); color: #4F93D6; line-height: 1; }
.perfil ul { padding-left: 18px; color: var(--mudo); margin: 12px 0 0; }
.perfil li { margin-bottom: 6px; }

/* Passos */
.passos { counter-reset: p; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.passo { position: relative; padding: 28px 24px 24px; border-radius: var(--raio); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.passo::before { counter-increment: p; content: counter(p); position: absolute; top: -18px; left: 22px; width: 38px; height: 38px; border-radius: 50%; background: var(--ciano); color: var(--cor-esc); font: 900 1.1rem var(--fonte-titulo); display: grid; place-items: center; }
.passo p { color: var(--sobre-esc); margin: 0; }

/* Destaque dividido */
.dividido { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lista-ck { list-style: none; padding: 0; margin: 18px 0 0; }
.lista-ck li { padding: 10px 0 10px 32px; position: relative; border-bottom: 1px dashed var(--linha); }
.lista-ck li::before { content: "✓"; position: absolute; left: 0; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--cor-clara); color: var(--cor); font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.escura .lista-ck li { border-color: rgba(255,255,255,.14); } .escura .lista-ck li::before { background: rgba(255,255,255,.14); color: var(--ciano); }
.painel-ref { background: #fff; color: var(--tinta); border-radius: 18px; padding: 22px; box-shadow: var(--sombra); }
.painel-ref table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.painel-ref th { text-align: left; color: var(--mudo); font-weight: 600; padding: 8px 6px; border-bottom: 2px solid var(--linha); }
.painel-ref td { padding: 9px 6px; border-bottom: 1px solid var(--linha); }
.painel-ref .ok { color: var(--ok); font-weight: 700; }
.aviso-leg { font-size: .82rem; color: var(--mudo); margin-top: 14px; }
.escura .aviso-leg, .hero .aviso-leg { color: var(--sobre-esc-2); }
/* cartões e painéis brancos dentro de seções escuras mantêm texto escuro */
.escura .card h3, .escura .perfil h3, .escura .plano h3, .escura .painel-ref h3, .escura .cenario h3, .escura .calc h3 { color: var(--tinta); }
.escura .painel-ref .aviso-leg, .escura .card .aviso-leg { color: var(--mudo); }

/* Preços */
.alterna { display: inline-flex; background: #fff; border: 1px solid var(--linha); border-radius: 99px; padding: 4px; margin: 22px 0 36px; }
.alterna button { border: 0; background: none; font: 700 .95rem var(--fonte-titulo); padding: 10px 20px; border-radius: 99px; cursor: pointer; color: var(--mudo); }
.alterna button[aria-pressed="true"] { background: var(--cor); color: #fff; }
.alterna small { color: var(--ok); font-weight: 900; }
.planos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; text-align: left; }
.plano { background: #fff; border: 1px solid var(--linha); border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; position: relative; }
.plano.dest { border: 2px solid var(--cor); box-shadow: var(--sombra); transform: translateY(-8px); }
.plano .sel { position: absolute; top: -13px; left: 24px; background: var(--ciano); color: var(--cor-esc); font: 900 .72rem var(--fonte-titulo); letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px; }
.plano h3 { margin-bottom: 4px; }
.plano .desc { color: var(--mudo); font-size: .9rem; min-height: 4.4em; }
.preco { font: 700 2.5rem var(--fonte-titulo); color: var(--cor-esc); letter-spacing: -.03em; margin: 8px 0 2px; }
.preco small { font: 600 .9rem var(--fonte); color: var(--mudo); letter-spacing: 0; }
.eco { font-size: .82rem; color: var(--ok); font-weight: 700; min-height: 1.3em; }
.plano ul { list-style: none; padding: 0; margin: 18px 0 24px; flex: 1; font-size: .92rem; }
.plano li { padding: 6px 0 6px 24px; position: relative; }
.plano li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.plano li.nao { color: #5F7385; } .plano li.nao::before { content: "–"; color: #5F7385; }
.nota-preco { margin-top: 24px; color: var(--mudo); font-size: .88rem; }

/* FAQ */
.faq { max-width: 820px; margin: 36px auto 0; text-align: left; }
.faq details { background: #fff; border: 1px solid var(--linha); border-radius: 14px; margin-bottom: 12px; padding: 4px 20px; }
.faq summary { cursor: pointer; font: 700 1.05rem var(--fonte-titulo); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--cor); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { color: var(--mudo); padding-bottom: 14px; margin: 0; }

/* CTA final + rodapé */
.cta-final { position: relative; overflow: hidden; background: linear-gradient(135deg, #0A3158 0%, #0A3158 55%, #0C3F72 100%); color: #fff; border-radius: 28px; padding: clamp(36px, 6vw, 72px); text-align: center; }
.cta-final::before { content: ""; position: absolute; right: -200px; top: -260px; width: 640px; height: 640px; background: var(--orbita) center / contain no-repeat; opacity: .8; pointer-events: none; }
.cta-final > * { position: relative; }
.cta-final h2 { color: #fff; } .cta-final p { color: var(--sobre-esc); max-width: 56ch; margin-inline: auto; }
/* 1.21.0: botão secundário (contorno) legível sobre fundo escuro */
.cta-final .btn-sec, .sec.escura .btn-sec, .hero .btn-sec { color: #fff; border-color: rgba(255,255,255,.75); }
.cta-final .btn-sec:hover, .sec.escura .btn-sec:hover, .hero .btn-sec:hover { background: rgba(255,255,255,.12); }
.rodape { padding: 48px 0 32px; background: var(--cor-esc); color: var(--sobre-esc-2); font-size: .92rem; border-top: 4px solid var(--ciano); }
.rodape .cont { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.rodape h4 { color: #fff; font: 700 .95rem var(--fonte-titulo); margin: 0 0 12px; }
.rodape a { color: var(--sobre-esc-2); display: block; text-decoration: none; margin-bottom: 8px; } .rodape a:hover { color: #fff; }
.rodape .legal { grid-column: 1/-1; border-top: 1px solid rgba(255,255,255,.16); padding-top: 20px; font-size: .82rem; }
.whats { position: fixed; right: 18px; bottom: 18px; z-index: 60; background: #25d366; color: #fff; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.25); font-size: 1.7rem; text-decoration: none; }

/* Texto legal */
.legal-pag { max-width: 820px; padding: 48px 0 80px; }
.legal-pag h1 { font-size: 2.2rem; } .legal-pag h2 { font-size: 1.3rem; margin-top: 2em; }
.legal-pag li { margin-bottom: 6px; }

/* Revelar ao rolar */
.rev { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s; }
.rev.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .btn, .card { transition: none; } }

@media (max-width: 980px) {
  .hero .cont, .dividido { grid-template-columns: 1fr; }
  .g3, .g4, .passos { grid-template-columns: 1fr 1fr; }
  .planos { grid-template-columns: 1fr 1fr; } .plano.dest { transform: none; }
  .rodape .cont { grid-template-columns: 1fr 1fr; }
  .celular { right: 6px; bottom: -26px; }
}
@media (max-width: 680px) {
  .hero::before { width: 460px; height: 460px; right: -250px; top: -190px; opacity: .55; }
  .sec.escura::before { width: 420px; height: 420px; right: -220px; top: -170px; opacity: .4; }
  .cta-final::before { width: 380px; height: 380px; right: -190px; top: -190px; opacity: .55; }
  .hamb { display: block; }
  .menu { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--leite); flex-direction: column; align-items: stretch; padding: 18px 20px 24px; border-bottom: 1px solid var(--linha); gap: 14px; }
  .menu.aberto { display: flex; }
  .g2, .g3, .g4, .passos, .planos { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr 1fr; }
  .celular { display: none; }
  .hero .acoes .btn { width: 100%; justify-content: center; }
  .rodape .cont { grid-template-columns: 1fr; }
  .hero h1 em { white-space: normal; }
}


/* ===== 1.19.0 — site de várias páginas ===== */
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cor-esc); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px; text-decoration: none; font-weight: 700; }
.pular:focus { top: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--cor); outline-offset: 3px; border-radius: 6px; }
.hero a:focus-visible, .escura a:focus-visible, .rodape a:focus-visible, .cta-final a:focus-visible, .faixa a:focus-visible, .escura button:focus-visible { outline-color: var(--ciano); }
.marca img { width: auto; height: 34px; border-radius: 0; }
.rodape .marca img { height: 34px; }
.menu a[aria-current="page"] { color: var(--cor); }

/* Menu com grupos */
.dd { position: relative; }
.dd-b { background: none; border: 0; font: 600 .95rem var(--fonte); color: var(--tinta); cursor: pointer; padding: 6px 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.dd-b::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.dd-b:hover, .dd.aberto .dd-b { color: var(--cor); }
.dd.aberto .dd-b::after { transform: rotate(225deg) translateY(-2px); }
.dd-m { display: none; position: absolute; top: 100%; left: -16px; min-width: 330px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra); padding: 8px; z-index: 70; }
.dd.aberto .dd-m { display: block; }
.dd-m a { display: block; padding: 10px 14px; border-radius: 10px; white-space: normal; }
.dd-m a b { display: block; font-weight: 700; font-size: .95rem; }
.dd-m a small { display: block; color: var(--mudo); font-weight: 400; font-size: .82rem; line-height: 1.35; margin-top: 2px; }
.dd-m a:hover, .dd-m a[aria-current="page"] { background: var(--cor-clara); color: var(--cor-esc); }
@media (hover: hover) and (min-width: 681px) { .dd:hover .dd-m { display: block; } .dd:hover .dd-b { color: var(--cor); } }

/* Telas reais */
.shot { margin: 0; background: #fff; border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
.shot-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--gelo); border-bottom: 1px solid var(--linha); }
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #C3D5E2; }
.shot-bar span { margin-left: 10px; flex: 1; background: #fff; border-radius: 99px; font-size: .68rem; color: var(--mudo); padding: 2px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption { padding: 12px 16px 14px; font-size: .86rem; color: var(--mudo); border-top: 1px solid var(--linha); }
.fone { margin: 0; width: 100%; max-width: 230px; background: #183249; border-radius: 30px; padding: 8px; box-shadow: var(--sombra); }
.fone img { width: 100%; height: auto; border-radius: 23px; display: block; }
.hero-midia { position: relative; }
.hero-midia .fone { position: absolute; right: -8px; bottom: -36px; width: 28%; max-width: 168px; min-width: 112px; }
.hero-1 .cont { grid-template-columns: 1fr; max-width: 860px; }
.hero-1 { padding-bottom: clamp(36px, 5vw, 64px); }
.duo { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: center; }
.duo.inv { grid-template-columns: 1fr 1.7fr; }
.duo .fone { margin-inline: auto; }
.trio-fone { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; justify-items: center; align-items: start; margin-top: 40px; }
.trio-fone figure { margin: 0; text-align: center; }
.trio-fone figcaption { font-size: .85rem; color: var(--mudo); margin-top: 10px; max-width: 24ch; margin-inline: auto; }

/* Vitrine com abas */
.vitrine { margin-top: 40px; display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.vit-abas { display: flex; flex-direction: column; gap: 6px; }
.vit-abas button { text-align: left; border: 1px solid var(--linha); background: #fff; border-radius: 12px; padding: 12px 14px; font: 700 .95rem var(--fonte-titulo); color: var(--tinta); cursor: pointer; transition: border-color .15s, background .15s; }
.vit-abas button small { display: block; font: 400 .78rem var(--fonte); color: var(--mudo); margin-top: 2px; }
.vit-abas button[aria-selected="true"] { border-color: var(--cor); background: var(--cor-clara); }
.vit-tela[hidden] { display: none; }

/* Números */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.num { background: #fff; border: 1px solid var(--linha); border-radius: 16px; padding: 22px 18px; text-align: center; }
.num b { display: block; font: 700 2rem var(--fonte-titulo); color: var(--cor); letter-spacing: -.03em; line-height: 1.1; }
.num span { display: block; color: var(--mudo); font-size: .88rem; margin-top: 6px; }
.escura .num { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); } .escura .num b { color: var(--ciano); } .escura .num span { color: var(--sobre-esc); }

/* Etiquetas extras */
.etiqueta.comp { background: #DCEAF7; color: var(--cor-esc); }
.etiqueta.val { background: #FBF0DC; color: #6E4308; border: 1px dashed #D18A28; }
.etiqueta.novo { background: #DAF2EA; color: #0F5E49; }

/* Tabelas */
.rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: 14px; background: #fff; margin-top: 28px; }
.tabela-s { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.tabela-s th { text-align: left; background: var(--gelo); font: 700 .85rem var(--fonte-titulo); padding: 12px 14px; border-bottom: 2px solid var(--linha); position: sticky; top: 0; }
.tabela-s td { padding: 11px 14px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela-s tr:last-child td { border-bottom: 0; }
.tabela-s td.c, .tabela-s th.c { text-align: center; }
.tabela-s .ok { color: var(--ok); font-weight: 900; } .tabela-s .nao { color: #5F7385; }
.tabela-s tr.grupo td { background: var(--cor-clara); font: 700 .8rem var(--fonte-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--cor-esc); }

/* Funcionalidades */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.chips a { text-decoration: none; background: #fff; border: 1px solid var(--linha); border-radius: 99px; padding: 8px 16px; font-weight: 600; font-size: .9rem; color: var(--tinta); }
.chips a:hover { border-color: var(--cor); color: var(--cor); }
.area { scroll-margin-top: 84px; }
.area-cab { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center; }
.area-cab.inv .shot { order: -1; }
.area .grade { margin-top: 36px; }
.lista-mod { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.lista-mod li { padding-left: 24px; position: relative; font-size: .95rem; }
.lista-mod li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.lista-mod b { font-weight: 700; }

/* Galeria */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.galeria button { border: 1px solid var(--linha); background: #fff; border-radius: 14px; padding: 0; overflow: hidden; cursor: zoom-in; text-align: left; transition: transform .2s, box-shadow .2s; }
.galeria button:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.galeria img { width: 100%; height: auto; display: block; aspect-ratio: 16/10; object-fit: cover; object-position: top; }
.galeria span { display: block; padding: 10px 14px 12px; font: 700 .9rem var(--fonte-titulo); }
.galeria small { display: block; font: 400 .78rem var(--fonte); color: var(--mudo); }
dialog.luz { border: 0; padding: 0; background: transparent; max-width: min(1200px, 96vw); width: 96vw; }
dialog.luz::backdrop { background: rgba(6, 28, 51, .86); }
dialog.luz img { width: 100%; height: auto; border-radius: 12px; display: block; background: #fff; }
dialog.luz p { color: #fff; text-align: center; margin: 10px 0 0; font-size: .9rem; }
dialog.luz button { position: absolute; right: 8px; top: 8px; border: 0; background: #fff; border-radius: 99px; width: 40px; height: 40px; font-size: 1.3rem; cursor: pointer; }

/* Código */
.codigo { background: #082640; color: #DCEAF5; border-radius: 14px; padding: 18px 20px; font: .84rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; margin: 0; white-space: pre; }
.codigo .c { color: #8FB0CC; } .codigo .k { color: #5CCBEA; }

/* Faixa de convite e destaques */
.faixa-cta { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; background: var(--cor-clara); border-radius: 20px; padding: 28px 32px; }
.faixa-cta h3 { margin: 0 0 4px; } .faixa-cta p { margin: 0; color: var(--mudo); }
.dest-box { border-left: 5px solid var(--ciano); background: #fff; border-radius: 0 14px 14px 0; padding: 18px 22px; box-shadow: var(--sombra); }
.dest-box p:last-child { margin-bottom: 0; }
.cenario { background: #fff; border: 1px solid var(--linha); border-radius: 16px; padding: 26px; }
.cenario h3 { margin-bottom: 14px; }
.cenario dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; }
.cenario dt { color: var(--mudo); } .cenario dd { margin: 0; text-align: right; font-weight: 700; color: var(--cor-esc); }
.cenario .tot { grid-column: 1 / -1; border-top: 2px solid var(--linha); padding-top: 10px; display: flex; justify-content: space-between; font: 700 1.15rem var(--fonte-titulo); color: var(--ok); }
.nivel { text-align: center; }
.nivel .pct { font: 700 2.6rem var(--fonte-titulo); color: var(--cor); letter-spacing: -.03em; line-height: 1; }
.nivel.ouro .pct { color: #9A5F12; }
.sel-status { display: inline-block; font-size: .78rem; font-weight: 700; background: #FBF0DC; color: #6E4308; border-radius: 99px; padding: 4px 12px; border: 1px dashed #D18A28; }
.trilha-h { display: flex; gap: 0; margin-top: 40px; flex-wrap: wrap; }
.trilha-h > div { flex: 1 1 200px; padding: 20px 20px 20px 24px; border-left: 3px solid var(--ciano); background: rgba(255,255,255,.06); margin: 0 6px 6px 0; border-radius: 0 12px 12px 0; }
.trilha-h h3 { font-size: 1.05rem; margin-bottom: 6px; } .trilha-h p { margin: 0; font-size: .9rem; color: var(--sobre-esc); }
.planos.tres { grid-template-columns: repeat(3, 1fr); }
.planos.cinco { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1080px) { .planos.cinco { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) {
  .vitrine { grid-template-columns: 1fr; }
  .vit-abas { flex-direction: row; flex-wrap: wrap; } .vit-abas button { flex: 1 1 140px; }
  .vit-abas button small { display: none; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .area-cab, .duo, .duo.inv { grid-template-columns: 1fr; } .area-cab.inv .shot { order: 0; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .hero-midia .fone { right: 6px; bottom: -26px; }
  .planos.tres { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .menu { max-height: calc(100vh - 68px); overflow-y: auto; }
  .dd-b { width: 100%; justify-content: space-between; padding: 8px 0; font-size: 1rem; }
  .dd-m { position: static; min-width: 0; box-shadow: none; border: 0; padding: 0 0 6px 10px; background: transparent; }
  .dd-m a small { display: none; }
  .numeros, .galeria, .lista-mod, .trio-fone, .planos.tres, .planos.cinco { grid-template-columns: 1fr; }
  .hero-midia .fone { display: none; }
  .faixa-cta { padding: 22px; }
  .marca img { height: 30px; }
}
@media print { .topo, .rodape, .whats, .cta-final { display: none; } .rev { opacity: 1; transform: none; } }

/* Simulador de comissão e legendas */
.calc { background: #fff; border: 1px solid var(--linha); border-radius: 18px; padding: 26px; box-shadow: var(--sombra); }
.calc h3 { margin-bottom: 14px; }
.calc-campos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 18px; }
.calc label { display: block; font: 600 .85rem var(--fonte); color: var(--mudo); }
.calc select, .calc input { display: block; width: 100%; margin-top: 6px; font: 600 1rem var(--fonte); padding: 12px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--leite); color: var(--tinta); }
.calc dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 0; }
.calc dt { color: var(--mudo); } .calc dd { margin: 0; text-align: right; font: 700 1.15rem var(--fonte-titulo); color: var(--cor-esc); }
.calc dd#c-ano { color: var(--ok); font-size: 1.4rem; }
.leg-fone { font-size: .85rem; color: var(--mudo); margin: 10px auto 0; max-width: 24ch; text-align: center; }
@media (max-width: 680px) { .calc-campos { grid-template-columns: 1fr; } }
.passos.quatro { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .passos.quatro { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .passos.quatro { grid-template-columns: 1fr; } }

/* Botão flutuante de WhatsApp (só aparece quando o Admin Geral informa o número de contato) */
.zap { position: fixed; right: 18px; bottom: 18px; z-index: 40; background: #1fa855; color: #fff; font-weight: 700; padding: 12px 18px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.25); text-decoration: none; }
.zap:hover, .zap:focus-visible { background: #178a45; outline: 3px solid #fff; outline-offset: 2px; }