/* ==========================================================
   TRIVANNI — LP Ortodontia e Alinhadores Transparentes em Osasco
   Paleta e tipografia: Manual técnico da marca (Opção 2, v1.1).
   Sobriedade: dourado só em detalhe, nunca como fundo.
   ========================================================== */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-var-latin.woff2") format("woff2-variations"), url("../fonts/montserrat-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-italic-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* reservas com métricas próximas: evitam salto de layout quando a fonte carrega */
@font-face { font-family: "Montserrat Reserva"; src: local("Arial"); size-adjust: 112%; ascent-override: 86%; descent-override: 22%; line-gap-override: 0%; }

:root {
  /* manual da marca */
  --champagne: #B8A48D;
  --taupe: #5B524B;
  --taupe-medio: #8A7E74;
  --bege: #F0EBE3;
  --branco: #FFFFFF;
  /* derivados, para contraste AA e superfícies */
  --creme: #FAF7F2;
  --tinta: #3E3731;
  --texto: #5B524B;
  --texto-2: #6A6057;
  --ouro-texto: #7C6A55;
  --escuro: #2B2521;
  --escuro-2: #3B332D;
  --linha: #E2DACE;
  --champagne-claro: #DCCFBE;
  --sans: "Montserrat", "Montserrat Reserva", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --conteudo: min(1400px, 50.9vw + 423px);   /* 1400 px no Full HD; encolhe com a tela */
  --lateral: clamp(20px, 5vw, 48px);
  --ouro: #AD8650;
  --ouro-titulo: #A67E45;
  --secao: clamp(64px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--branco); color: var(--texto); font-family: var(--sans); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; border-radius: 2px; }
.escuro :focus-visible, .rodape :focus-visible { outline-color: var(--champagne-claro); }

.conteudo { width: min(var(--conteudo), 100% - var(--lateral) * 2); margin-inline: auto; }
.secao { padding-block: var(--secao); }

h1, h2 { color: var(--tinta); font-weight: 300; letter-spacing: -.012em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); line-height: 1.2; }
.lead { font-size: clamp(1rem, .96rem + .2vw, 1.125rem); line-height: 1.75; text-wrap: pretty; }

/* Botão: uma linha só, área mínima de 48 px */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 34px; border-radius: 999px;
  background: var(--taupe); color: var(--branco);
  font-size: .9375rem; font-weight: 600; letter-spacing: .08em; white-space: nowrap; text-decoration: none;
  transition: background-color .25s ease, transform .25s ease;
}
.botao svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.botao:hover { background: var(--tinta); transform: translateY(-1px); }
.botao:active { transform: none; }

/* ---------- Topo simples: política e 404 ---------- */
.topo { background: var(--branco); }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
.topo__logo { display: block; width: 222px; }
.topo__local { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--texto); white-space: nowrap; }
.topo__local svg { width: 20px; height: 26px; fill: var(--ouro); }

/* ---------- Política de privacidade e 404 ---------- */
.legal { padding-block: clamp(32px, 5vw, 64px) var(--secao); background: var(--creme); }
.legal__texto { max-width: 780px; margin-inline: auto; }
.legal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.15; }
.legal h2 { margin-top: 40px; font-size: 1.375rem; font-weight: 500; line-height: 1.35; }
.legal p, .legal ul { margin-top: 14px; }
.legal ul { padding-left: 20px; list-style: disc; }
.legal li + li { margin-top: 8px; }
.legal__data { color: var(--texto-2); font-size: .875rem; }
.legal strong { color: var(--tinta); font-weight: 600; }
.legal__acoes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.erro { display: grid; place-items: center; min-height: 62vh; padding: 48px 0; background: var(--creme); text-align: center; }
.erro h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.15; }
.erro p { margin: 14px 0 28px; }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao, .botao:hover { transition: none; transform: none; }
}

/* ==========================================================
   Sistema visual da LP. Escala: --c = 1 quando o conteúdo tem 1400 px.
   Seções depois da hero: padding-block padrão de --sec (120 px).
   Uma escala só: h2 / h3 / apoio / corpo; títulos 500 com destaque 800, h3 700, texto 450.
   ========================================================== */
:root {
  --c: calc(min(var(--conteudo), 100vw - var(--lateral) * 2) / 1400); --sec: 120px;
  --ouro-forte: #A5691A; --ouro-claro: #D9A441; --ouro-texto-forte: #8C5A14; --preto: #1F1C1A; --seda: #171513;
  --t-h2: max(calc(var(--c) * 46), 30px); --t-h3: max(calc(var(--c) * 22), 19px); --t-apoio: max(calc(var(--c) * 19), 17px); --t-corpo: max(calc(var(--c) * 17), 16px);
  --tx: #1F1C1A; --tx-2: #4A423B; --tx-claro: #F7F2EA; --tx-claro-2: #D9D2C8;
  --cartao: #FFFFFF; --cartao-borda: rgba(165, 105, 26, .14); --cartao-sombra: 0 1px 2px rgba(60, 40, 15, .04), 0 calc(var(--c) * 14) calc(var(--c) * 34) rgba(90, 62, 25, .09);
  --raio: max(calc(var(--c) * 20), 16px); --bloco: max(calc(var(--c) * 52), 36px);
}

/* Botão de ação único (WhatsApp): verde com anel girando e faixa de brilho */
.botao--acao { position: relative; overflow: hidden; isolation: isolate; gap: 10px; min-height: 56px; padding: 0 30px; background: linear-gradient(135deg, #25D366, #1EBE5A); box-shadow: inset 0 0 0 1px rgba(4, 51, 26, .18), 0 10px 26px rgba(37, 211, 102, .4); color: #04331A; font-size: 1.0625rem; font-weight: 500; line-height: 1.1; letter-spacing: .01em; transition: transform .25s ease, box-shadow .25s ease; }
.botao--acao:hover, .botao--acao:focus-visible { background: linear-gradient(135deg, #1CB456, #19A84F); box-shadow: inset 0 0 0 1px rgba(4, 51, 26, .18), 0 16px 34px rgba(37, 211, 102, .55); color: #04331A; transform: translateY(-3px); }
.botao--acao:active { transform: none; }
.botao--acao > * { position: relative; z-index: 2; }
.botao--acao .botao__wa { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
.botao--acao::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 60%; border-radius: inherit; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); pointer-events: none; transform: translateX(-180%) skewX(-18deg); animation: botao-brilho 3.8s ease-in-out infinite; }
.botao--acao > .botao__anel { position: absolute; inset: 0; z-index: 1; overflow: hidden; padding: 2px; border-radius: inherit; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.botao__anel::before { content: ""; position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; margin: -80% 0 0 -80%; background: conic-gradient(rgba(255, 255, 255, 0) 0%, #CFFFE0 6%, #FFF 12%, #0E8A45 18%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 50%, #CFFFE0 56%, #FFF 62%, #0E8A45 68%, rgba(255, 255, 255, 0) 76%); animation: botao-gira 4s linear infinite; }
@keyframes botao-gira { to { transform: rotate(1turn); } }
@keyframes botao-brilho { 0%, 100% { transform: translateX(-180%) skewX(-18deg); } 55% { transform: translateX(280%) skewX(-18deg); } }

/* WhatsApp flutuante */
.whats-flutuante { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 900; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #25D366; box-shadow: 0 12px 30px rgba(37, 211, 102, .45); color: #FFF; text-decoration: none; transition: transform .25s ease; }
.whats-flutuante:hover { transform: scale(1.08); }
.whats-flutuante:focus-visible { outline: 3px solid rgba(37, 211, 102, .5); outline-offset: 3px; }
.whats-flutuante svg { width: 32px; height: 32px; fill: currentColor; }
.whats-flutuante::after { content: ""; position: absolute; inset: 0; border: 2px solid #25D366; border-radius: 50%; pointer-events: none; animation: whats-pulso 2.4s ease-out infinite; }
@keyframes whats-pulso { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }

.icone { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.circulo { display: grid; place-items: center; flex: none; border: 1px solid rgba(165, 105, 26, .55); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #FFF, #FBF4EA); box-shadow: 0 calc(var(--c) * 4) calc(var(--c) * 12) rgba(130, 95, 45, .14); color: var(--ouro-forte); }
.circulo .icone { width: 56%; height: 56%; stroke-width: .85; }

/* Topo da LP */
html { scroll-padding-top: 88px; }
/* Menu fixo: transparente sobre a hero; ao rolar, barra clara e mais baixa */
.cabecalho { position: fixed; inset: 0 0 auto; z-index: 800; transition: background-color .35s ease, box-shadow .35s ease; }
.cabecalho.is-reduzido { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(165, 105, 26, .16), 0 10px 28px rgba(60, 40, 15, .08); }
.cabecalho__linha { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: max(calc(var(--c) * 112), 84px); transition: min-height .35s ease; }
.is-reduzido .cabecalho__linha { min-height: 68px; }

.cabecalho__logo { display: block; flex: none; width: max(calc(var(--c) * 280), 190px); transition: width .35s ease; }
.is-reduzido .cabecalho__logo { width: 172px; }
/* menu em cápsula clara em todas as larguras: fica legível sobre qualquer foto do hero */
.cabecalho__menu ul { display: flex; align-items: center; gap: calc(var(--c) * 26); padding-inline: 18px; border-radius: 99px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cabecalho__menu a { display: inline-flex; align-items: center; min-height: 48px; color: var(--preto); font-size: max(calc(var(--c) * 16), 15px); font-weight: 500; line-height: 1.2; text-decoration: none; transition: color .2s ease; }
.cabecalho__menu a:hover { color: var(--ouro-forte); }
.cabecalho__menu a span { padding-block: 7.5px 6px; border-bottom: 1.5px solid transparent; transition: border-color .25s ease; }
.cabecalho__menu [aria-current] { color: var(--ouro-forte); }
.cabecalho__menu [aria-current] span { border-bottom-color: var(--ouro-forte); }
.cabecalho .botao--acao { min-height: 48px; padding-inline: 22px; font-size: 1rem; transition: min-height .35s ease, padding .35s ease, transform .25s ease, box-shadow .25s ease; }
.is-reduzido .botao--acao { min-height: 44px; padding-inline: 18px; font-size: .9375rem; }
.is-reduzido .cabecalho__menu ul { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-reduzido .cabecalho__menu a { font-size: .9375rem; }

/* Hero */
.hero { position: relative; min-height: max(calc(var(--c) * 831), 560px); background: #FBFAF8; overflow: hidden; }
.hero__arte, .hero__arte img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__arte img { object-fit: cover; object-position: right center; }
.hero__grade { position: relative; }
.hero__texto { max-width: calc(var(--c) * 580); padding-top: max(calc(var(--c) * 166), 104px); padding-bottom: calc(var(--c) * 30); }
.hero h1 { font-size: max(calc(var(--c) * 70), 36px); font-weight: 500; line-height: 1.02; letter-spacing: -.032em; color: var(--tx); }
.hero h1 .l { display: block; }
.hero h1 em { font-style: normal; font-weight: 800; letter-spacing: -.038em; color: var(--ouro-forte); }
.hero h2 { margin-top: calc(var(--c) * 18); font-size: max(calc(var(--c) * 30), 21px); font-style: italic; font-weight: 450; line-height: 1.2; letter-spacing: -.02em; color: var(--tx); }
.hero h2 .l, .hero .lead .l { display: block; }
.hero .lead { margin-top: calc(var(--c) * 20); color: var(--tx-2); font-size: var(--t-apoio); font-weight: 450; line-height: 1.55; letter-spacing: -.01em; }
.hero .botao { margin-top: calc(var(--c) * 30); }
.selos { display: flex; gap: calc(var(--c) * 30); }
.selos li { display: flex; align-items: center; gap: calc(var(--c) * 12); }
.selos p { line-height: 1.25; }
.selos .l { display: block; }

/* Faixa em loop */
.faixa { position: relative; display: flex; align-items: center; min-height: 64px; background: var(--seda); color: #F3ECE0; overflow: hidden; }
.faixa__trilho { display: flex; flex: none; width: max-content; animation: faixa 46s linear infinite; }
.faixa:hover .faixa__trilho, .faixa:focus-within .faixa__trilho, .faixa.is-parada .faixa__trilho { animation-play-state: paused; }
.faixa__grupo { display: flex; flex: none; align-items: center; }
.faixa__grupo li { display: flex; align-items: center; font-size: .9375rem; font-weight: 500; line-height: 1.3; letter-spacing: .01em; white-space: nowrap; }
.faixa__grupo li::after { content: ""; width: 6px; height: 6px; margin-inline: 34px; background: var(--ouro-claro); transform: rotate(45deg); }
.faixa__pausa { position: absolute; right: 8px; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0; border: 0; border-radius: 50%; background: var(--seda); box-shadow: -14px 0 14px var(--seda); color: #F3ECE0; cursor: pointer; }
.faixa__pausa svg { width: 18px; height: 18px; fill: currentColor; }
.faixa__pausa .ico-tocar, .faixa.is-parada .ico-pausar { display: none; }
.faixa.is-parada .ico-tocar { display: block; }
@keyframes faixa { to { transform: translateX(-50%); } }

/* Seções: padrão de 120 px e tipografia comum */
.opcoes, .solucao, .diferenciais, .passos, .faq, .chamada { position: relative; padding-block: var(--sec); }
.opcoes .conteudo, .solucao .conteudo, .diferenciais .conteudo, .passos .conteudo, .faq .conteudo, .chamada .conteudo { position: relative; }
.passos__fundo, .passos__fundo img, .faq__fundo, .faq__fundo img, .chamada__fundo, .chamada__fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opcoes h2, .solucao h2, .diferenciais h2, .passos h2, .faq h2, .chamada h2 { color: var(--tx); font-size: var(--t-h2); font-weight: 500; line-height: 1.14; letter-spacing: -.028em; }
.opcoes h2 .l, .solucao h2 .l, .diferenciais h2 .l, .chamada h2 .l { display: block; }
.opcoes h2 em, .solucao h2 em, .passos h2 em, .faq h2 em { font-style: normal; font-weight: 800; letter-spacing: -.03em; color: var(--ouro-forte); }
.diferenciais h2 em, .chamada h2 em { font-style: normal; font-weight: 800; letter-spacing: -.03em; color: var(--ouro-claro); }
.diferenciais h2, .chamada h2 { color: var(--branco); }
.opcoes .lead, .solucao .lead, .passos .lead, .faq .lead { margin-top: max(calc(var(--c) * 16), 12px); color: var(--tx-2); font-size: var(--t-apoio); font-weight: 450; line-height: 1.58; letter-spacing: -.008em; }
.diferenciais .lead, .chamada .lead { margin-top: max(calc(var(--c) * 16), 12px); color: var(--tx-claro); font-size: var(--t-apoio); font-weight: 450; line-height: 1.58; letter-spacing: -.008em; }

/* Opções */
.fluxo { position: relative; overflow: hidden; background: radial-gradient(52% 26% at 92% 6%, rgba(217, 164, 65, .16), transparent 72%), radial-gradient(50% 30% at 0% 60%, rgba(217, 164, 65, .08), transparent 72%), radial-gradient(44% 24% at 98% 96%, rgba(217, 164, 65, .15), transparent 72%), linear-gradient(180deg, #FCFAF6, #F7F0E6 52%, #FAF5ED); }
.fluxo__fundo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.titulo-centro { text-align: center; }
.opcoes .lead .l { display: block; }
.opcoes__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(calc(var(--c) * 32), 24px); margin-top: var(--bloco); }
.opcao { overflow: hidden; border: 1px solid var(--cartao-borda); border-radius: var(--raio); background: var(--cartao); box-shadow: var(--cartao-sombra); }
.opcao > img { width: 100%; }
.opcao figcaption { padding: max(calc(var(--c) * 26), 20px) max(calc(var(--c) * 32), 22px) max(calc(var(--c) * 30), 24px); }
.opcao h3 { display: flex; align-items: center; gap: 14px; color: var(--tx); font-size: var(--t-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.opcao h3 .icone { width: 42px; height: 42px; stroke-width: .9; color: var(--ouro-forte); }
.opcao p { margin-top: 10px; color: var(--tx-2); font-size: var(--t-corpo); font-weight: 450; line-height: 1.55; text-wrap: pretty; }

/* Solução */
.solucao__grade { display: grid; grid-template-columns: minmax(0, 620fr) minmax(0, 687fr); gap: calc(var(--c) * 93); align-items: center; }
.solucao .lead { max-width: calc(var(--c) * 580); }
.solucao .botao { margin-top: max(calc(var(--c) * 30), 24px); }
.solucao__lista li { position: relative; display: flex; align-items: center; padding-left: calc(var(--c) * 40); }
.solucao__lista li + li { margin-top: max(calc(var(--c) * 14), 12px); }
.solucao__lista .circulo { position: absolute; z-index: 1; left: 0; top: 50%; width: max(calc(var(--c) * 80), 64px); height: max(calc(var(--c) * 80), 64px); margin-top: calc(max(calc(var(--c) * 80), 64px) / -2); }
.solucao__lista p { flex: 1; min-height: max(calc(var(--c) * 92), 84px); display: flex; flex-direction: column; justify-content: center; padding: 12px calc(var(--c) * 26) 12px max(calc(var(--c) * 62), 52px); border: 1px solid var(--cartao-borda); border-radius: var(--raio); background: var(--cartao); box-shadow: var(--cartao-sombra); color: var(--tx-2); font-size: var(--t-corpo); font-weight: 450; line-height: 1.45; }
.solucao__lista .l { display: block; }
.solucao__lista strong { color: var(--tx); font-weight: 700; }

/* Por que avaliar */
/* fundo escuro com brilhos dourados, título centrado e sem foto (padrão das LPs) */
.diferenciais { background: radial-gradient(60% 90% at 85% 0%, rgba(217, 164, 65, .1), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgba(217, 164, 65, .06), transparent 70%), var(--seda); color: var(--branco); }
.diferenciais__topo { text-align: center; }
.diferenciais .lead { max-width: calc(var(--c) * 640); margin-inline: auto; }
.diferenciais__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--bloco); }
.diferencial { position: relative; padding-inline: calc(var(--c) * 26); text-align: center; }
.diferencial + .diferencial::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: rgba(255, 255, 255, .14); }
.diferencial .circulo { width: max(calc(var(--c) * 72), 60px); height: max(calc(var(--c) * 72), 60px); margin-inline: auto; border-color: rgba(217, 164, 65, .7); background: rgba(255, 255, 255, .05); box-shadow: none; color: var(--ouro-claro); }
.diferencial h3 { margin-top: max(calc(var(--c) * 18), 14px); color: var(--branco); font-size: max(calc(var(--c) * 19), 18px); font-weight: 700; line-height: 1.3; letter-spacing: -.012em; }
.diferencial h3 strong { font-weight: 700; }
.diferencial p { margin-top: 8px; color: var(--tx-claro-2); font-size: var(--t-corpo); font-weight: 450; line-height: 1.5; text-wrap: pretty; }

/* Passos */
.passos { background: #F8F1E8; }
.passos__titulo { text-align: center; }
.passos__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(calc(var(--c) * 34), 20px); margin-top: var(--bloco); }
.passo { position: relative; display: flex; flex-direction: column; align-items: center; }
.passo > .circulo { position: relative; z-index: 1; width: max(calc(var(--c) * 88), 76px); height: max(calc(var(--c) * 88), 76px); }
.passo__card { flex: 1; width: 100%; margin-top: calc(max(calc(var(--c) * 88), 76px) / -2); padding: calc(max(calc(var(--c) * 88), 76px) / 2 + 18px) max(calc(var(--c) * 22), 18px) max(calc(var(--c) * 26), 22px); border: 1px solid var(--cartao-borda); border-radius: var(--raio); background: var(--cartao); box-shadow: var(--cartao-sombra); text-align: center; }
.passo span { display: inline-block; padding: 3px 14px; border-radius: 99px; background: rgba(165, 105, 26, .1); color: var(--ouro-texto-forte); font-size: .8125rem; font-weight: 700; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.passo p { margin-top: 12px; color: var(--tx-2); font-size: var(--t-corpo); font-weight: 450; line-height: 1.5; text-wrap: pretty; }
/* conector: vai de um círculo ao seguinte, por cima dos cartões */
.passos__lista { --r: max(calc(var(--c) * 44), 38px); --g: max(calc(var(--c) * 34), 20px); }
.passo:not(:last-child)::before { content: ""; position: absolute; left: calc(50% + var(--r) * .9 + 8px); width: calc(100% + var(--g) - var(--r) * 1.8 - 16px); top: calc(var(--r) * .5); height: 1px; background: linear-gradient(90deg, rgba(165, 105, 26, .2), rgba(165, 105, 26, .85)); }
.passo:not(:last-child)::after { content: ""; position: absolute; left: calc(150% + var(--g) - var(--r) * .9 - 18px); top: calc(var(--r) * .5 - 4.5px); width: 10px; height: 10px; border-top: 1px solid rgba(165, 105, 26, .9); border-right: 1px solid rgba(165, 105, 26, .9); transform: rotate(45deg); }

/* FAQ */
.faq { background: #FEF4EA; overflow: hidden; }
/* altura fixa: abrir uma pergunta não pode dar zoom na foto; a base se dissolve na cor da seção */
@media (min-width: 1025px) {
  .faq__fundo { bottom: auto; height: min(38.5vw, 800px); -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); }
  .faq__fundo img { object-position: 25% top; }
}
.faq__grade { display: grid; grid-template-columns: minmax(0, 775fr) minmax(0, 625fr); align-items: start; }
.faq__texto { padding-left: calc(var(--c) * 326); padding-right: calc(var(--c) * 40); }
.faq h2 .l, .faq h2 em { display: block; }
.faq .botao { margin-top: max(calc(var(--c) * 28), 22px); }
.faq__lista { --faq-num: max(calc(var(--c) * 34), 28px); --faq-gap: max(calc(var(--c) * 14), 12px); --faq-lado: max(calc(var(--c) * 18), 14px); --faq-traco: rgba(165, 105, 26, .24); border-top: 1px solid var(--faq-traco); interpolate-size: allow-keywords; }
.faq__item { border-bottom: 1px solid var(--faq-traco); border-radius: 0; transition: background-color .35s ease, border-color .35s ease, border-radius .35s ease, box-shadow .35s ease; }
.faq__item:has(+ .faq__item[open]) { border-bottom-color: transparent; }
.faq__item[open] { border-bottom-color: transparent; border-radius: var(--raio); background: var(--cartao); box-shadow: var(--cartao-sombra); }
.faq__item::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .4s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, content-visibility .4s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; opacity: 1; }
.faq summary { display: grid; grid-template-columns: var(--faq-num) minmax(0, 1fr) auto; align-items: center; gap: var(--faq-gap); min-height: max(calc(var(--c) * 58), 54px); padding: 8px var(--faq-lado); border-radius: inherit; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--ouro-forte); outline-offset: 2px; }
.faq__num { color: var(--ouro-texto-forte); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.faq summary h3 { color: var(--tx); font-size: var(--t-corpo); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; transition: color .25s ease; }
.faq summary:hover h3, .faq__item[open] summary h3 { color: var(--ouro-texto-forte); }
.faq__sinal { position: relative; display: block; flex: none; width: 32px; height: 32px; border: 1px solid rgba(165, 105, 26, .5); border-radius: 50%; color: var(--ouro-forte); transition: transform .4s cubic-bezier(.2, .7, .2, 1), background-color .3s ease, border-color .3s ease, color .3s ease; }
.faq__sinal::before, .faq__sinal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.25px; margin: -.625px 0 0 -6px; border-radius: 1px; background: currentColor; }
.faq__sinal::after { transform: rotate(90deg); }
.faq summary:hover .faq__sinal { border-color: var(--ouro-forte); background: #FFF; }
.faq__item[open] .faq__sinal { border-color: transparent; background: linear-gradient(135deg, #AE7A28, #8F5E17); color: #FFF; transform: rotate(135deg); }
.faq__resposta { padding: 0 calc(var(--faq-lado) + 32px + var(--faq-gap)) max(calc(var(--c) * 20), 16px) calc(var(--faq-lado) + var(--faq-num) + var(--faq-gap)); color: var(--tx-2); font-size: var(--t-corpo); font-weight: 450; line-height: 1.55; }

/* Chamada */
.chamada { background: #241D17; color: var(--branco); }
.chamada__texto { width: calc(var(--c) * 720); margin-left: calc(var(--c) * 582); text-align: center; }
.chamada .lead .l { display: block; }
.chamada .botao { margin-top: max(calc(var(--c) * 28), 22px); }
.chamada .selos { justify-content: center; margin-top: max(calc(var(--c) * 34), 28px); text-align: left; color: var(--tx-claro); font-size: max(calc(var(--c) * 15.5), 15px); font-weight: 500; }
.chamada .selos .icone { width: 36px; height: 36px; stroke-width: 1; color: var(--ouro-claro); }
.chamada .selos li + li { position: relative; padding-left: calc(var(--c) * 26); }
.chamada .selos li + li::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(217, 164, 65, .45); }

/* Rodapé */
.rodape { position: relative; background: radial-gradient(60% 120% at 88% 0%, rgba(217, 164, 65, .09), transparent 70%), #191613; color: var(--tx-claro-2); font-size: 1rem; line-height: 1.55; overflow: hidden; }
.rodape::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 164, 65, .75) 20%, rgba(241, 213, 155, .9) 50%, rgba(217, 164, 65, .75) 80%, transparent); }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 390fr) minmax(0, 190fr) minmax(0, 390fr) minmax(0, 360fr); gap: max(calc(var(--c) * 36), 24px); padding-block: max(calc(var(--c) * 76), 56px) max(calc(var(--c) * 60), 44px); }
.rodape__logo { display: block; width: max(calc(var(--c) * 268), 210px); }
.rodape__institucional { margin-top: 20px; max-width: 320px; color: #F3ECE0; font-size: .9375rem; font-weight: 500; line-height: 1.45; }
.rodape__institucional a { text-decoration: none; }
.rodape__institucional a:hover { text-decoration: underline; }
.rodape__selo { margin-top: 10px; max-width: 320px; font-size: .9375rem; line-height: 1.45; }
.rodape__titulo { margin-bottom: 18px; color: var(--ouro-claro); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rodape a:not(.botao) { color: inherit; text-underline-offset: 3px; transition: color .2s ease; }
.rodape a:not(.botao):hover { color: var(--branco); }
.rodape__nav ul { display: grid; gap: 4px; }
.rodape__nav a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.rodape__nav a:not(.botao):hover { color: var(--ouro-claro); }
.rodape__contato { display: flex; gap: 12px; }
.rodape__contato + .rodape__contato { margin-top: 14px; }
.rodape__contato .icone { width: 20px; height: 20px; margin-top: 3px; color: var(--ouro-claro); }
.rodape__contato a { min-height: 26px; text-decoration: none; }
.rodape__contato strong { color: #F3ECE0; font-weight: 600; }
.rodape .botao { margin-top: 20px; }
.rodape__fim { display: flex; align-items: center; justify-content: space-between; gap: 14px 32px; padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .875rem; }
.rodape__fim p { display: flex; flex-wrap: wrap; align-items: center; margin: 0; color: #B9B1A6; }
.rodape__fim p a { text-decoration: none; }
.rodape__fim p a:hover { text-decoration: underline; }
.rodape__sep { display: inline-block; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%; background: rgba(217, 164, 65, .8); vertical-align: middle; }
.rodape__dev { display: inline-flex; align-items: center; gap: 12px; color: #B9B1A6; text-decoration: none; }
.rodape__dev img { width: 138px; height: auto; transition: transform .25s ease; }
.rodape__dev:hover img { transform: translateY(-1px); }

/* ==========================================================
   Entrada no scroll. Só com a classe .mov no <html> (JS ligado e sem "reduzir movimento").
   Títulos: palavra a palavra com o espaçamento fechando; destaque com mola e faísca.
   Cartões: chegam de direções diferentes e encaixam. Ícones: traço se desenha. Fotos: revelação circular.
   ========================================================== */
:root { --e-mola: cubic-bezier(.34, 1.56, .64, 1); --e-encaixe: cubic-bezier(.22, 1.18, .36, 1); --e-suave: cubic-bezier(.16, 1, .3, 1); }
.mov .revelar:not(.visivel) { opacity: 0; }
.p { display: inline-block; transform-origin: 0 70%; }
.mov .e-texto.visivel .p { animation: e-palavra .85s var(--e-suave) calc(var(--n) * 55ms) backwards; }
.mov .e-texto.visivel .p--o { animation: e-destaque .75s var(--e-mola) calc(var(--n) * 55ms + 120ms) backwards; }
.mov .e-texto.visivel .lead { animation: e-sobe .8s var(--e-suave) calc(var(--t, 8) * 55ms + 200ms) backwards; }
.mov .e-texto.visivel .botao { animation: e-pop .75s var(--e-mola) calc(var(--t, 8) * 55ms + 480ms) backwards; }
.mov .e-card.visivel { animation: e-card 1s var(--e-encaixe) calc(var(--i, 0) * 90ms) backwards; }
.mov .e-sobe.visivel { animation: e-sobe .8s var(--e-suave) calc(var(--i, 0) * 70ms) backwards; }
.mov .e-foto.visivel { animation: e-circulo 1.5s cubic-bezier(.65, 0, .35, 1) backwards; }
.mov .opcao.visivel > img { animation: e-circulo 1.2s cubic-bezier(.65, 0, .35, 1) calc(var(--i, 0) * 90ms + 180ms) backwards; }
.mov .visivel .circulo { animation: e-pop .75s var(--e-mola) calc(var(--i, 0) * 90ms + 260ms) backwards; }
.mov .visivel .circulo .icone [pathLength] { animation: e-traco 1.1s ease-out calc(var(--i, 0) * 90ms + 420ms) backwards; }
.mov .passo.visivel:not(:last-child)::before { transform-origin: left center; animation: e-linha .6s ease-out calc(var(--i, 0) * 90ms + 620ms) backwards; }
.mov .passo.visivel:not(:last-child)::after { animation: e-seta .4s var(--e-mola) calc(var(--i, 0) * 90ms + 1120ms) backwards; }
.mov .diferencial.visivel + .diferencial.visivel::before { transform-origin: center top; animation: e-risco .8s var(--e-suave) .3s backwards; }
.opcao:nth-child(odd) { --dx: -70px; --ry: 10deg; }
.opcao:nth-child(even) { --dx: 70px; --ry: -10deg; }
.solucao__lista li { --dx: 70px; --ry: -8deg; }
.passo:nth-child(odd) { --dy: -56px; --rx: -12deg; }
.passo:nth-child(even) { --dy: 56px; --rx: 12deg; }
.faq__item { --dx: 36px; --dy: 0px; }
.faq__fundo { --cx: 18%; --cy: 42%; }
.chamada__fundo { --cx: 22%; --cy: 50%; }
.faisca { position: absolute; right: -.08em; top: .14em; width: 0; height: 0; pointer-events: none; }
.gota { position: absolute; left: -.11em; top: -.11em; width: .22em; height: .22em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F7E4B8, #D9A441 70%); box-shadow: 0 0 .5em rgba(217, 164, 65, .8); opacity: 0; }
.faisca b { position: absolute; left: -.16em; top: -.03em; width: .32em; height: .06em; border-radius: 1em; background: linear-gradient(90deg, #D9A441, #F1D59B); opacity: 0; transform: rotate(var(--r)) translateX(.2em); }
.mov .e-texto.visivel .gota { animation: e-gota 1s cubic-bezier(.3, .7, .3, 1) calc(var(--t, 8) * 55ms + 60ms) both; }
.mov .e-texto.visivel .faisca b { animation: e-raio .75s var(--e-suave) calc(var(--t, 8) * 55ms + 640ms) both; }
@keyframes e-palavra { from { opacity: 0; transform: translateY(.45em) scaleX(1.24); filter: blur(7px); } 60% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes e-destaque { from { opacity: 0; transform: translateY(.5em) scale(.72) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes e-sobe { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 28px)); } to { opacity: 1; transform: none; } }
@keyframes e-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes e-card { from { opacity: 0; transform: perspective(1000px) translate(var(--dx, 0), var(--dy, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(.94); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes e-circulo { from { clip-path: circle(0% at var(--cx, 50%) var(--cy, 55%)); } to { clip-path: circle(130% at var(--cx, 50%) var(--cy, 55%)); } }
@keyframes e-traco { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes e-linha { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes e-risco { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes e-seta { from { opacity: 0; transform: rotate(45deg) translate(-6px, 6px); } to { opacity: 1; transform: rotate(45deg); } }
@keyframes e-gota { 0% { opacity: 0; transform: translate(-3em, -1.5em) scale(.4); } 18% { opacity: 1; } 55% { transform: translate(0, 0) scale(1.5, .75); } 66% { transform: scale(.85, 1.25); } 78% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(0); } }
@keyframes e-raio { 0% { opacity: 0; transform: rotate(var(--r)) translateX(.15em) scaleX(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--r)) translateX(.95em) scaleX(.5); } }

@media (max-width: 1199px) {
  .cabecalho__menu { display: none; }
  .solucao__lista .l { display: inline; }
}
/* Até 1024 px: seções empilhadas */
@media (max-width: 1024px) {
  :root { --sec: 88px; }
  html { scroll-padding-top: 76px; }
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero__grade { order: 1; }
  .hero__texto { max-width: 640px; padding-top: 100px; padding-bottom: 8px; }
  .hero .lead { margin-top: 16px; }
  .hero .lead .l { display: inline; }
  .hero h2 { margin-top: 14px; }
  .hero .botao { width: 100%; max-width: 420px; margin-top: 22px; }
  .selos li { gap: 10px; }
  .hero__arte { order: 2; position: relative; inset: auto; display: block; height: auto; margin-top: 10px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
  .hero__arte img { position: static; height: auto; }
  .opcoes .lead .l { display: inline; }
  .solucao__grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .solucao__lista p { padding-left: 52px; }
  .solucao__lista li { padding-left: 32px; }
  .solucao h2 .l { display: inline; }
  .solucao .lead { max-width: none; }
  .solucao .botao { width: 100%; max-width: 420px; }
  .diferenciais .lead { max-width: none; }
  .diferenciais__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .diferencial:nth-child(3)::before { display: none; }
  .passos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .passo:not(:last-child)::before, .passo:not(:last-child)::after { display: none; }
  .faq { padding-top: 0; }
  .faq__grade { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq__fundo { position: relative; inset: auto; display: block; height: 300px; margin-bottom: 24px; }
  .faq__fundo img { position: static; object-position: left top; }
  .faq__texto { padding-inline: 0; }
  .faq .botao { width: 100%; max-width: 420px; }
  .chamada { padding-top: calc(min(70vw, 460px) + 36px); }
  .chamada__fundo { inset: 0 0 auto; height: min(70vw, 460px); }
  .chamada__fundo img { object-position: 30% 20%; }
  .chamada__texto { width: auto; margin-left: 0; }
  .chamada .lead .l { display: inline; }
  .chamada .botao { width: 100%; max-width: 420px; }
  .chamada .selos { flex-wrap: wrap; gap: 16px 24px; }
  .chamada .selos li + li { padding-left: 0; }
  .chamada .selos li + li::before { display: none; }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; padding-block: 56px 40px; }
  .rodape__grade > div:last-child { grid-column: 2; grid-row: 1; }
  .rodape__fim { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .opcoes__grade { grid-template-columns: minmax(0, 1fr); }
  .opcao h3 { gap: 12px; }
  .whats-flutuante { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 56px; height: 56px; }
  /* no celular: deslocamentos menores e sem desfoque, que custa caro */
  .opcao:nth-child(odd), .opcao:nth-child(even), .solucao__lista li { --dx: 0px; --dy: 40px; --rx: 8deg; --ry: 0deg; }
  .passo:nth-child(odd), .passo:nth-child(even) { --dx: 0px; --dy: 40px; --rx: 8deg; }
  .faq__item { --dx: 20px; }
  @keyframes e-palavra { from { opacity: 0; transform: translateY(.4em) scaleX(1.16); } to { opacity: 1; transform: none; } }
}
@media (max-width: 560px) {
  :root { --sec: 64px; }
  .cabecalho .botao { display: none; }
  .is-reduzido .cabecalho__linha { min-height: 60px; }
  .is-reduzido .cabecalho__logo { width: 150px; }
  .diferenciais__grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .diferencial + .diferencial::before { display: none; }
  .passos__lista { grid-template-columns: minmax(0, 1fr); }
  .faq__fundo { height: 240px; }
  .faq__resposta { padding-right: var(--faq-lado); }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rodape__grade > div:last-child { grid-column: auto; grid-row: auto; }
  .rodape__fim p { gap: 2px 18px; }
  .rodape__sep { display: none; }
  .rodape__nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cabecalho, .cabecalho__linha, .cabecalho__logo, .cabecalho .botao--acao { transition: none; }
  .botao__anel::before, .whats-flutuante::after { animation: none; }
  .botao--acao::after, .whats-flutuante::after { display: none; }
  .rodape__dev img, .rodape a { transition: none; }
  .faq__item, .faq__item::details-content, .faq__sinal, .faq summary h3 { transition: none; }
  .faixa { justify-content: center; padding-block: 12px; }
  .faixa__trilho { width: auto; flex: 1; animation: none; }
  .faixa__grupo { flex: 1; flex-wrap: wrap; justify-content: center; gap: 8px 0; padding-inline: 16px; }
  .faixa__grupo[aria-hidden] { display: none; }
  .faixa__grupo li { white-space: normal; }
  .faixa__grupo li:last-child::after { display: none; }
  .faixa__pausa { display: none; }
}

/* ==========================================================
   Kit WebFormas: acessibilidade, barra de rolagem, links de privacidade e card LGPD
   Colar no fim do style.css do projeto. Ajustar as variáveis --lgpd-* (card LGPD, ver o bloco
   do card: layout fixo, cores da PALETA DO PROJETO) e as cores
   da barra de rolagem para a paleta do cliente (--navy/--orange = cores do projeto).
   ========================================================== */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: #fff; color: var(--bege); padding: 10px 16px;
}
.skip-link:focus { left: 10px; top: 10px; }
.sr-only {
  position: absolute; top: -10000em; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bege); }
::-webkit-scrollbar-thumb { background: var(--champagne); border: 3px solid var(--bege); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--taupe-medio); }
::-webkit-scrollbar-corner { background: var(--bege); }
/* Firefox (no Chrome, "scrollbar-color" desativaria o estilo arredondado acima) */
@supports (-moz-appearance: none) {
  html { scrollbar-color: var(--champagne) var(--bege); }
}

/* ---------- Links de privacidade no rodapé ---------- */
.lgpd-links { margin-top: 10px; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: inherit; }
.lgpd-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lgpd-links a:hover { color: var(--branco); }

/* ============================================================
   Card de privacidade e cookies — padrão WebFormas (layout de 08/10/2026)
   Card escuro no canto inferior esquerdo, brilho suave no canto superior direito,
   ícone em círculo, texto, e três ações NA MESMA LINHA no desktop:
   [ACEITAR TODOS] (acento)  [SÓ NECESSÁRIOS] (pill translúcido)  Preferências (link).
   Referência aprovada: LP Água Mar Del Plata (navy + ciano) e site com laranja (anexo do usuário).

   PALETA DO PROJETO — o layout é fixo, as cores vêm SEMPRE do projeto em desenvolvimento.
   Preencher as variáveis abaixo com os tokens do próprio site (var(--...) do style.css):
     --lgpd-bg-1 / --lgpd-bg-2  tom MAIS ESCURO da marca (navy, grafite, marrom-escuro…);
                                 bg-2 um pouco mais escuro que bg-1 (degradê diagonal).
                                 Marca sem tom escuro? usar um quase-preto puxado para a cor
                                 primária (ex.: #14110F para laranja, #0B1220 para azul).
     --lgpd-accent              cor de DESTAQUE da marca (a dos CTAs/realces), numa versão
                                 clara o bastante para ler sobre o fundo escuro.
     --lgpd-accent-fg           texto sobre o botão de acento: claro ou escuro, o que der
                                 contraste ≥ 4,5:1 (medir; laranja/ciano claros pedem texto escuro).
     --lgpd-glow                o acento em rgba com ~.18–.25 de opacidade (brilho do canto).
     --lgpd-font-head / -body   fontes do projeto (títulos/botões e texto corrido).
   Não usar a cor do WhatsApp como acento (o card não é CTA de conversão).
   ============================================================ */
.lgpd {
  --lgpd-bg-1: var(--escuro-2);
  --lgpd-bg-2: #211C19;
  --lgpd-accent: var(--champagne-claro);
  --lgpd-accent-fg: var(--escuro);
  --lgpd-glow: rgba(184,164,141,.22);
  --lgpd-font-head: var(--sans);
  --lgpd-font-body: var(--lgpd-font-head);
  --lgpd-fg: #ffffff;
  --lgpd-muted: rgba(255,255,255,.78);
  --lgpd-border: rgba(255,255,255,.1);
  --lgpd-z: 99995;                 /* acima do botão flutuante, abaixo de modais */
  position: fixed; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: var(--lgpd-z);
  width: min(500px, calc(100vw - 2rem));
  font-family: var(--lgpd-font-head); color: var(--lgpd-fg);
  transform: translateY(calc(100% + 2rem)); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s;
}
.lgpd.is-visivel { transform: none; opacity: 1; }
.lgpd[hidden] { display: none; }
.lgpd__card {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--lgpd-glow), transparent 55%),
    linear-gradient(160deg, var(--lgpd-bg-1), var(--lgpd-bg-2));
  border: 1px solid var(--lgpd-border); border-radius: 18px;
  padding: 1.35rem 1.6rem 1.5rem; box-shadow: 0 24px 60px -18px rgba(0,0,0,.6);
}
.lgpd__topo { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.lgpd__ico {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); color: var(--lgpd-accent);
}
.lgpd__ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lgpd__titulo { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 0; color: var(--lgpd-fg); }
.lgpd__txt { font-family: var(--lgpd-font-body); font-size: .875rem; line-height: 1.65; color: var(--lgpd-muted); margin: 0 0 1.2rem; }
.lgpd__txt a {
  color: var(--lgpd-accent); text-decoration: underline; text-underline-offset: 3px;
  display: inline-block; padding-block: .2rem; margin-block: -.2rem;   /* alvo de toque de 24px */
}
.lgpd__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem .9rem; }
.lgpd__btn {
  min-height: 48px; padding: .85rem 1.3rem; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 .78rem/1 var(--lgpd-font-head); letter-spacing: .07em; text-transform: uppercase;
  transition: transform .2s, filter .2s, background-color .2s;
}
.lgpd__btn:hover { transform: translateY(-1px); }
/* cores repetidas no :hover/:focus: o CSS do site pode ter regras globais de button:hover */
.lgpd__btn--sim, .lgpd__btn--sim:hover, .lgpd__btn--sim:focus {
  background: var(--lgpd-accent); color: var(--lgpd-accent-fg);
  box-shadow: 0 10px 26px -6px var(--lgpd-glow);
}
.lgpd__btn--sim:hover { filter: brightness(1.07); }
.lgpd__btn--nao, .lgpd__btn--nao:focus { background: rgba(255,255,255,.1); color: var(--lgpd-fg); }
.lgpd__btn--nao:hover { background: rgba(255,255,255,.16); color: var(--lgpd-fg); }
.lgpd__link, .lgpd__link:focus {
  background: none; border: 0; padding: .5rem .2rem; cursor: pointer;
  font: 600 .8125rem/1 var(--lgpd-font-head); color: var(--lgpd-fg);
  text-decoration: underline; text-underline-offset: 4px;
}
.lgpd__link:hover { background: none; color: var(--lgpd-accent); }
.lgpd__btn:focus-visible, .lgpd__link:focus-visible, .lgpd__txt a:focus-visible { outline: 2px solid var(--lgpd-accent); outline-offset: 3px; }
/* painel de preferências (mesmo card, troca o miolo) */
.lgpd__prefs { display: none; }
.lgpd.is-prefs .lgpd__txt, .lgpd.is-prefs .lgpd__card > .lgpd__acoes { display: none; }
.lgpd.is-prefs .lgpd__prefs { display: block; }
.lgpd__opcao { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--lgpd-border); }
.lgpd__opcao:last-of-type { border-bottom: 1px solid var(--lgpd-border); margin-bottom: 1.1rem; }
/* cor explícita: regra global "strong { color: escuro }" do site deixava o título invisível */
.lgpd__opcao strong { display: block; font-size: .9rem; font-weight: 600; color: var(--lgpd-fg); margin-bottom: .15rem; }
.lgpd__opcao span { display: block; font-family: var(--lgpd-font-body); font-size: .78rem; line-height: 1.45; color: var(--lgpd-muted); }
.lgpd__opcao small { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lgpd-accent); white-space: nowrap; }
.lgpd__switch { position: relative; flex: none; width: 46px; height: 26px; }
.lgpd__switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.lgpd__switch i { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.22); transition: background .2s; }
.lgpd__switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.lgpd__switch input:checked + i { background: var(--lgpd-accent); }
.lgpd__switch input:checked + i::after { transform: translateX(20px); }
.lgpd__switch input:focus-visible + i { outline: 2px solid var(--lgpd-accent); outline-offset: 2px; }
/* Botão flutuante (WhatsApp, voltar ao topo) sai de cena enquanto o card está aberto:
   no mobile ele cai em cima dos botões do card. Ajustar o seletor ao do projeto. */
body.has-lgpd .whatsapp-float, body.has-lgpd .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 767px) {
  .lgpd { left: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); width: calc(100vw - 1.5rem); }
  .lgpd__card { padding: 1.15rem 1.15rem 1.2rem; border-radius: 16px; }
  .lgpd__txt { font-size: .8125rem; line-height: 1.55; margin-bottom: 1rem; }
  .lgpd__btn { padding: .8rem 1.1rem; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .lgpd { transition: none; } }
@media print { .lgpd { display: none !important; } }

/* Card de privacidade na linguagem da LP: seda, filete dourado, traço fino, sem caixa alta.
   O verde fica só no Agendar Avaliação; aqui o destaque é o dourado. */
.lgpd { --lgpd-accent: #D9A441; --lgpd-accent-fg: #1F1C1A; --lgpd-muted: #D9D2C8; width: min(468px, calc(100vw - 2rem)); transition: transform .6s cubic-bezier(.22, 1.18, .36, 1), opacity .35s; }
.lgpd__card { padding: 1.35rem 1.5rem 1.4rem; border: 1px solid rgba(217, 164, 65, .28); border-radius: 20px; background: radial-gradient(120% 120% at 100% 0%, rgba(217, 164, 65, .12), transparent 60%), #191613; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65), 0 2px 8px rgba(0, 0, 0, .25); }
.lgpd__card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(241, 213, 155, .9) 50%, transparent); }
.lgpd__topo { gap: .7rem; margin-bottom: .7rem; }
.lgpd__ico { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(217, 164, 65, .6); border-radius: 50%; background: none; color: var(--lgpd-accent); }
.lgpd__ico svg { width: 18px; height: 18px; stroke-width: 1.2; }
.lgpd__titulo { font-size: 1rem; font-weight: 600; letter-spacing: -.012em; }
.lgpd__txt { margin-bottom: 1.1rem; font-size: .875rem; font-weight: 450; line-height: 1.6; }
.lgpd__txt a { color: #E9C37A; text-decoration-thickness: 1px; }
.lgpd__acoes { flex-wrap: nowrap; gap: .6rem; }
.lgpd__btn { min-height: 46px; padding: 0 1.2rem; font: 600 .875rem/1 var(--lgpd-font-head); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.lgpd__btn--sim, .lgpd__btn--sim:hover, .lgpd__btn--sim:focus { background: linear-gradient(135deg, #E9BE6B, #D9A441 60%, #C8922F); box-shadow: 0 10px 22px -10px rgba(217, 164, 65, .7); color: #1F1C1A; }
.lgpd__btn--nao, .lgpd__btn--nao:focus { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); color: #F3ECE0; }
.lgpd__btn--nao:hover { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .7); color: #FFF; }
.lgpd__link, .lgpd__link:focus { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0 .1rem; font: 500 .8125rem/1 var(--lgpd-font-head); color: #D9D2C8; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; }
.lgpd__link:hover { color: var(--lgpd-accent); }
.lgpd__opcao strong { font-size: .875rem; }
.lgpd__opcao span { font-size: .8125rem; font-weight: 450; }
.lgpd__opcao small { font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.lgpd__switch { width: 40px; height: 22px; }
.lgpd__switch i::after { top: 3px; left: 3px; width: 16px; height: 16px; }
.lgpd__switch input:checked + i::after { transform: translateX(18px); background: #1F1C1A; }
/* Com o card aberto o WhatsApp flutuante sai de cena: no celular cairia sobre os botões */
.whats-flutuante { transition: transform .25s ease, opacity .3s ease, visibility .3s; }
body.has-lgpd .whats-flutuante { opacity: 0; visibility: hidden; pointer-events: none; }
/* Notebook baixo: à esquerda o card cobriria o botão do hero; à direita fica sobre a ilustração */
@media (min-width: 1024px) and (max-height: 860px) {
  .lgpd { left: auto; right: 1rem; }
}
@media (max-width: 559px) {
  .lgpd { left: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom)); width: calc(100vw - 1rem); }
  .lgpd__card { padding: .95rem 1rem 1rem; border-radius: 16px; }
  .lgpd__topo { gap: .55rem; margin-bottom: .45rem; }
  .lgpd__ico { width: 28px; height: 28px; }
  .lgpd__ico svg { width: 15px; height: 15px; }
  .lgpd__titulo { font-size: .9375rem; }
  .lgpd__txt { margin-bottom: .7rem; font-size: .8125rem; line-height: 1.45; }
  .lgpd__card > .lgpd__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .5rem; }
  .lgpd__card > .lgpd__acoes .lgpd__btn { min-height: 44px; padding: .5rem .4rem; font-size: .8125rem; }
  .lgpd__card > .lgpd__acoes .lgpd__link { grid-column: 1 / -1; justify-self: center; margin-left: 0; min-height: 28px; padding: 0 .5rem; }
}

/* ==========================================================
   LP3 (estética): só o que difere da LP1. Vem depois do pagina.css no style.css da LP3.
   Mesma base da LP2; muda a quantidade de itens (5 opções e 5 diferenciais).
   ========================================================== */
/* Hero: parede da imagem continua à esquerda; título em duas linhas */
.hero { background: #F5EFE9; }
.hero__texto { max-width: calc(var(--c) * 660); }
.hero h1 { font-size: max(calc(var(--c) * 70), 36px); }

/* Problema: frase curta e centrada, com o ícone do sorriso como abertura */
.problema .titulo-centro > .circulo { width: max(calc(var(--c) * 76), 64px); height: max(calc(var(--c) * 76), 64px); margin: 0 auto max(calc(var(--c) * 26), 20px); }
.problema .lead { margin-inline: auto; }

/* Opções: título em destaque e descrição embaixo, em cada cartão */
.solucao__lista p { gap: 2px; }
.solucao__lista strong { font-size: max(calc(var(--c) * 18), 17px); }
.solucao__nota { margin-top: max(calc(var(--c) * 14), 12px); padding-left: 14px; border-left: 2px solid rgba(165, 105, 26, .45); font-size: var(--t-corpo); }

/* Diferenciais: cinco itens numa linha */
.diferenciais__grade { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: max(calc(var(--c) * 56), 40px); }
.diferencial { padding-inline: calc(var(--c) * 20); }

/* FAQ: mesmo layout da LP1; no celular a imagem é horizontal e fica centralizada */

@media (max-width: 1199px) {
  .diferenciais__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .diferencial:nth-child(3n + 1)::before { display: none; }
}
@media (max-width: 1024px) {
  .hero__texto { max-width: 640px; }
  .diferenciais__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diferencial:nth-child(3n + 1)::before { display: block; }
  .diferencial:nth-child(odd)::before { display: none; }
  .faq__fundo img { object-position: center 45%; }
}
@media (max-width: 560px) {
  .diferenciais__grade { grid-template-columns: minmax(0, 1fr); }
  .diferencial + .diferencial::before { display: none; }
}