/* =============================================================================
   Seja um Franqueado — Rei do Mate · landing estática (Cloudflare Pages)
   Design: Claude Design, artifact R7nBM8GVLjWjfFZ8nofpbi (Main + Mobile)
   Paleta oficial 2026: verde #2D684D · preto · dourado #CC9932 · branco
   ========================================================================== */

@font-face { font-family: 'Lemon Milk'; src: url('fonts/LemonMilk-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aoutoory Dragon'; src: url('fonts/AoutooryDragon.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --verde: #2D684D; --verde-escuro: #23543E; --verde-claro: #DCEBE3; --verde-tint: #F1F7F4; --verde-linha: #B9D6C7; --verde-chip: #8FBFA8;
  --dourado: #CC9932; --dourado-tint: #FBF6EA; --dourado-linha: #EBD79F; --dourado-texto: #755416;
  --preto: #000000; --texto: #3A3638; --texto-suave: #6F6A6C; --texto-claro: #C3BFC0; --linha: #DEDBDC; --borda-input: #C3BFC0; --superficie: #F7F6F6; --erro: #B3261E;
  --display: 'Lemon Milk', Montserrat, sans-serif;
  --script: 'Aoutoory Dragon', 'Caveat', cursive;
  --fonte: Montserrat, system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--texto); font-family: var(--fonte); -webkit-font-smoothing: antialiased; }
a { color: var(--verde); } a:hover { color: var(--verde-escuro); }
img, video { max-width: 100%; }
input, select, textarea, button { font-family: var(--fonte); }
details summary::-webkit-details-marker { display: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- tipografia utilitária ---- */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lockup { display: flex; flex-direction: column; line-height: .92; margin: 0; }
.lockup .alta { font-family: var(--display); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--preto); }
.lockup .script { font-family: var(--script); font-weight: 400; color: var(--verde); line-height: .9; margin-left: 4px; }
.h2 { margin: 0; font-weight: 800; font-size: 36px; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; color: var(--preto); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--verde); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--verde-escuro); color: #fff; }
.btn.preto { background: var(--preto); } .btn.preto:hover { background: #222; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---- cabeçalho ---- */
.topo { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--linha); }
.topo .wrap { min-height: 80px; display: flex; align-items: center; gap: 12px 32px; }
.topo .logo img { height: 44px; width: auto; display: block; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-left: auto; }
.nav a { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--preto); padding: 10px 2px; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--verde); color: var(--preto); }
.nav .btn, .nav .btn:hover { height: 44px; padding: 0 22px; border-bottom: 0; color: #fff; }
.nav .btn:hover { background: var(--verde-escuro); }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; margin-left: auto; cursor: pointer; align-items: center; justify-content: center; }

/* ---- hero ---- */
.hero .wrap { padding: 64px 24px; display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: flex-start; }
.hero-texto { flex: 1 1 400px; min-width: 0; max-width: 520px; display: flex; flex-direction: column; gap: 24px; }
.hero-texto .lockup .alta { font-size: 72px; } .hero-texto .lockup .script { font-size: 94px; margin-top: -20px; margin-left: 6px; }
.hero-texto p { margin: 0; font-size: 17px; line-height: 1.55; max-width: 560px; }
.selos { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.selo-verde { display: inline-flex; flex-direction: column; align-items: flex-start; background: var(--verde); color: #fff; border-radius: 16px; padding: 18px 26px 16px; line-height: 1; }
.selo-verde .l1, .selo-verde .l3 { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; }
.selo-verde .l3 { line-height: 1.25; }
.selo-verde .l2 { font-family: var(--script); font-size: 46px; color: var(--dourado); line-height: .8; margin: -2px 0 -4px 2px; }
.selo-branco { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--preto); border: 1px solid var(--linha); border-radius: 16px; padding: 14px 24px; line-height: 1; }
.selo-branco .num { font-family: var(--script); font-size: 44px; line-height: .8; }
.selo-branco .txt { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.3; }
.hero .so-mobile, .form .so-mobile, legend .so-mobile { display: none; }
.nota-mobile { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--texto-suave); } .nota-mobile svg { flex: none; margin-top: 2px; }
.chips-preco { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-preco span { padding: 8px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.chips-preco .loja { background: var(--verde-tint); color: var(--verde-escuro); }
.chips-preco .quiosque { background: var(--dourado-tint); color: var(--dourado-texto); }

/* ---- formulário ---- */
.hero-form { flex: 1 1 440px; min-width: 0; max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.form { background: var(--verde-tint); border: 1px solid var(--verde-linha); border-radius: 12px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.form-cab { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--verde-linha); }
.form-cab .eyebrow { color: var(--verde); }
.form-cab h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .01em; text-transform: uppercase; color: var(--preto); }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label, .campo legend { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); padding: 0; }
.campo legend { margin: 0 0 2px; }
.ob { color: var(--erro); }
.campo input, .campo select { height: 40px; padding: 0 12px; border: 1px solid var(--borda-input); border-radius: 8px; font-size: 14px; background: #fff; color: var(--preto); width: 100%; }
.campo input:focus, .campo select:focus { outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--erro); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-uf { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
/* cidade: só as do IBGE da UF escolhida */
.combo { position: relative; }
.combo input:disabled { background: #F4F5F4; color: #8A8F8C; cursor: not-allowed; }
.combo input[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.combo-lista { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 0; padding: 4px 0; list-style: none; max-height: 248px; overflow-y: auto; background: #fff; border: 1px solid var(--verde); border-top: 0; border-radius: 0 0 8px 8px; box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.combo-lista li { padding: 9px 12px; font-size: 14px; color: var(--preto); cursor: pointer; }
.combo-lista li[aria-selected="true"], .combo-lista li:hover { background: var(--verde-tint); color: var(--verde-escuro); }
.combo-lista li mark { background: none; color: var(--verde); font-weight: 700; }
.combo-lista li.info { cursor: default; color: #6B706D; font-size: 12px; background: none; }
fieldset.campo { margin: 0; padding: 0; border: 0; }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilulas label { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 36px; border: 1px solid var(--borda-input); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--preto); cursor: pointer; text-transform: none; letter-spacing: 0; }
.pilulas label:has(input:checked) { border-color: var(--verde); background: var(--verde); color: #fff; }
.pilulas input { accent-color: var(--verde); width: 16px; height: 16px; margin: 0; }
.aceites { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--verde-linha); }
.aceites label { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--texto); cursor: pointer; }
.aceites input { accent-color: var(--verde); width: 16px; height: 16px; margin: 1px 0 0; flex: none; }
.aceites strong { color: var(--preto); }
.aceites button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--verde); text-decoration: underline; cursor: pointer; }
.envio { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.turnstile-box { min-height: 48px; display: flex; align-items: center; justify-content: center; }
.turnstile-box.placeholder { border: 1px dashed #9A9698; border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--texto-suave); background: #fff; }
.form-erro { display: none; padding: 10px 12px; border-radius: 8px; background: #FDECEA; border: 1px solid #F3B7B0; color: var(--erro); font-size: 13px; line-height: 1.45; }
.form-erro[data-ativo="1"] { display: block; }
.honey { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; opacity: 0; }
.garantias { list-style: none; margin: 0; padding: 0 4px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; font-size: 12px; line-height: 1.4; color: var(--texto-suave); }
.garantias li { display: flex; gap: 8px; align-items: flex-start; }
.garantias svg { flex: none; margin-top: 1px; }
.garantias strong { color: var(--preto); }

/* confirmação (depois do envio) */
.confirmacao { display: none; padding: 24px; border-radius: 12px; background: var(--verde-tint); border: 1px solid var(--verde-linha); flex-direction: column; gap: 12px; }
.confirmacao[data-ativo="1"] { display: flex; }
.confirmacao .titulo { display: flex; align-items: center; gap: 10px; }
.confirmacao .check { width: 40px; height: 40px; border-radius: 50%; background: var(--verde); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.confirmacao h2 { margin: 0; font-weight: 800; font-size: 18px; letter-spacing: -.02em; text-transform: uppercase; color: var(--preto); }
.confirmacao p { margin: 0; font-size: 14px; line-height: 1.55; } .confirmacao strong { color: var(--preto); }

/* ---- números ---- */
.numeros { background: var(--superficie); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.numeros .wrap { padding: 64px 24px; }
.numeros-cab { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; margin-bottom: 28px; }
.numeros-cab .lockup .alta { font-size: 36px; } .numeros-cab .lockup .script { font-size: 58px; margin-top: -11px; }
.numeros-cab .eyebrow { color: var(--texto-suave); padding-bottom: 6px; }
.mapa-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 64px; margin-bottom: 40px; }
.mapa { position: relative; flex: 0 1 400px; min-width: 280px; }
.mapa img { display: block; width: 100%; height: auto; }
.mapa .rotulo { position: absolute; left: 57%; top: 30%; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; text-align: center; white-space: nowrap; }
.mapa .rotulo .num { font-family: var(--script); font-size: 72px; line-height: 1; }
.mapa .rotulo .txt { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.mapa-texto { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.mapa-texto p { margin: 0; max-width: 480px; font-size: 16px; line-height: 1.6; }
.bolhas { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.bolha { width: 224px; height: 224px; border-radius: 50%; background: var(--verde); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 24px; }
.bolha.desloca { margin-top: 56px; }
.bolha .num { font-family: var(--script); font-size: 52px; line-height: .9; }
.bolha .txt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.producao { border-top: 1px solid var(--linha); padding-top: 40px; display: flex; flex-direction: column; gap: 28px; }
.producao > .eyebrow { color: var(--texto-suave); text-align: center; }
.produtos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; justify-items: center; }
.produtos li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.produtos .circulo { width: 220px; height: 220px; border-radius: 50%; background: #fff; border: 1px solid var(--linha); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.produtos .circulo img { width: 86%; height: 86%; object-fit: contain; }
.produtos .num { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .01em; color: var(--verde); display: block; }
.produtos .txt { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--preto); line-height: 1.5; display: block; margin-top: 4px; }

/* ---- modelos ---- */
.modelos .wrap { padding: 72px 24px; }
.sec-cab { max-width: 720px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.sec-cab p { margin: 0; font-size: 16px; line-height: 1.55; }
.cards-modelo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.card-modelo { background: #fff; border-radius: 12px; border: 1px solid var(--linha); overflow: hidden; display: flex; flex-direction: column; }
.card-modelo > img { display: block; width: 100%; height: 260px; object-fit: cover; border-bottom: 1px solid var(--linha); }
.card-modelo .corpo { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.card-modelo .cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-modelo h3 { margin: 0; font-weight: 800; font-size: 26px; letter-spacing: -.02em; text-transform: uppercase; color: var(--preto); }
.tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.tag.verde { background: var(--verde-tint); color: var(--verde-escuro); } .tag.dourado { background: var(--dourado-tint); color: var(--dourado-texto); }
.card-modelo dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; font-size: 14px; }
.card-modelo dt { color: var(--texto-suave); } .card-modelo dd { margin: 0; font-weight: 700; color: var(--preto); text-align: right; }
.total { border-top: 1px solid var(--linha); padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.total .eyebrow { color: var(--texto-suave); }
.total .valor { font-weight: 800; font-size: 28px; letter-spacing: -.02em; color: var(--verde); }
.taxa { background: var(--superficie); border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.5; } .taxa strong { color: var(--preto); }
.nota { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: var(--texto-suave); }

/* ---- expansão (verde) ---- */
.expansao { background: var(--verde); color: #fff; }
.expansao .wrap { padding: 64px 24px; display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: center; }
.expansao .texto { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.expansao .eyebrow { font-size: 12px; color: var(--verde-claro); }
.expansao h2 { margin: 0; font-weight: 800; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.expansao p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--verde-claro); }
.locais { flex: 1 1 420px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.locais li { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--verde-chip); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---- suporte ---- */
.suporte .wrap { padding: 72px 24px; }
.suporte .sub { margin: 8px 0 36px; font-size: 16px; max-width: 640px; }
.cards-suporte { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.card-suporte { padding: 24px; border-radius: 12px; border: 1px solid var(--linha); background: #fff; display: flex; flex-direction: column; gap: 12px; }
.card-suporte h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--preto); }
.card-suporte ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; }

/* ---- reconhecimento (preto) ---- */
.reconhecimento { background: var(--preto); color: #fff; }
.reconhecimento .wrap { padding: 72px 24px; }
.premio { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: center; margin-bottom: 56px; }
.premio .texto { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.premio .emblema { width: 200px; height: auto; margin: -16px 0 0 -16px; }
.premio .lockup .alta { font-size: 40px; color: #fff; } .premio .lockup .script { font-size: 67px; color: var(--dourado); margin-top: -13px; }
.premio p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--texto-claro); }
.video { flex: 1 1 420px; min-width: 0; width: 100%; max-width: 640px; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--texto); background: #000; }
.video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
/* o poster já traz o botão de play desenhado: a área inteira é o botão; os controles só aparecem depois de tocar */
.video .video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.video .video-play:hover { background: rgba(255,255,255,.06); }
.video .video-play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.video.tocando .video-play { display: none; }
.reconhecimento .rotulo { display: block; text-align: center; font-size: 12px; color: var(--dourado); margin-bottom: 28px; }
.selos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.selos-lista li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.selos-lista img { height: 150px; width: auto; max-width: 100%; object-fit: contain; }
.selos-lista strong { font-size: 14px; color: #fff; }
.selos-lista span { font-size: 13px; line-height: 1.5; color: var(--texto-claro); }

/* ---- processo ---- */
.processo .wrap { padding: 72px 24px; }
.processo .sub { margin: 8px 0 36px; font-size: 16px; max-width: 680px; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.passos li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 12px; background: #fff; border: 1px solid var(--linha); font-size: 14px; line-height: 1.45; }
.passos li.feito-aqui { background: var(--verde-tint); border-color: var(--verde-linha); color: var(--preto); }
.passos .n { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--verde); color: var(--verde); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.passos li.feito-aqui .n { background: var(--verde); color: #fff; }
.passos .t { padding-top: 7px; }

/* ---- FAQ ---- */
.faq { background: var(--superficie); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.faq .wrap { max-width: 880px; padding: 72px 24px; }
.faq .h2 { margin-bottom: 28px; }
.faq-lista { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 4px 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-size: 15px; font-weight: 700; color: var(--preto); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; }

/* ---- rodapé ---- */
.rodape { border-top: 1px solid var(--linha); }
.rodape .wrap { padding: 40px 24px 28px; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; }
.rodape .logo { height: 40px; width: auto; }
.rodape nav { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.rodape nav a, .rodape nav button { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); text-decoration: none; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.redes { display: flex; flex-direction: column; gap: 10px; }
.redes .eyebrow { font-weight: 600; color: var(--texto-suave); }
.redes div { display: flex; gap: 14px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.redes a { color: var(--preto); text-decoration: none; }
.copy { max-width: 1200px; margin: 0 auto; padding: 0 24px 28px; }
.copy div { border-top: 1px solid var(--linha); padding-top: 16px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); }

/* ---- diálogo LGPD ---- */
dialog.lgpd { border: 1px solid var(--linha); border-radius: 12px; padding: 0; max-width: 560px; width: calc(100% - 32px); color: var(--texto); }
dialog.lgpd::backdrop { background: rgba(0,0,0,.45); }
dialog.lgpd .corpo { padding: 24px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.6; }
dialog.lgpd h2 { margin: 0; font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: var(--preto); }
dialog.lgpd .versao { font-size: 11px; color: var(--texto-suave); }

/* =============================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 900px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--linha); padding: 8px 24px 16px; }
  .nav[data-aberto="1"] { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .nav .btn { margin-top: 12px; border-bottom: 0; }
  .menu-btn { display: inline-flex; }
  .topo .wrap { position: relative; min-height: 64px; }
  .topo .logo img { height: 34px; }
}
@media (max-width: 720px) {
  .hero .wrap { padding: 28px 20px 24px; gap: 28px; }
  .hero-texto { gap: 14px; }
  .hero-texto .lockup .alta { font-size: 44px; } .hero-texto .lockup .script { font-size: 63px; margin-top: -13px; }
  .hero-texto p { font-size: 14px; }
  .hero .so-mobile, legend .so-mobile { display: block; }
  .hero .chips-preco.so-mobile { display: flex; }
  .form .nota-mobile.so-mobile { display: flex; }
  .hero .so-desktop, legend .so-desktop { display: none; }
  .garantias { display: none; }
  legend .so-mobile { display: inline; }
  .fachada { display: block; width: 100%; height: 200px; object-fit: cover; object-position: 40% center; border-radius: 12px; border: 1px solid var(--linha); }
  .selo-verde .l1, .selo-verde .l3 { font-size: 13px; } .selo-verde .l2 { font-size: 40px; }
  .selo-branco .num { font-size: 38px; } .selo-branco .txt { font-size: 12px; }
  .form { padding: 20px 16px; gap: 16px; }
  .form-cab h2 { font-family: var(--fonte); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
  .campo label, .campo legend { font-size: 12px; }
  .campo input, .campo select { height: 48px; font-size: 16px; padding: 0 14px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-uf { grid-template-columns: 100px 1fr; }
  .pilulas label { flex: 1; justify-content: center; height: 46px; font-size: 14px; }
  .aceites label { font-size: 13px; line-height: 1.5; } .aceites input { width: 20px; height: 20px; }
  .envio { grid-template-columns: 1fr; }
  .envio .btn { height: 56px; width: 100%; font-size: 14px; }
  .turnstile-box.placeholder { height: 64px; font-size: 12px; }
  .garantias { grid-template-columns: 1fr; }
  .h2 { font-size: 28px; }
  .numeros .wrap, .modelos .wrap, .suporte .wrap, .reconhecimento .wrap, .processo .wrap, .faq .wrap, .expansao .wrap { padding: 48px 20px; }
  .bolha { width: 180px; height: 180px; } .bolha.desloca { margin-top: 0; } .bolha .num { font-size: 42px; }
  .mapa .rotulo .num { font-size: 56px; } .mapa .rotulo .txt { font-size: 20px; }
  .produtos .circulo { width: 180px; height: 180px; }
  .card-modelo > img { height: 200px; }
  .premio .emblema { width: 150px; margin: -8px 0 0 -8px; }
  .premio .lockup .alta { font-size: 32px; } .premio .lockup .script { font-size: 54px; }
}

/* =============================================================================
   Etapa 2 — Relatório confidencial (board Etapa2 do artifact)
   ========================================================================== */
body.e2 { background: var(--superficie); }
.e2-wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.e2-topo { background: #fff; border-bottom: 1px solid var(--linha); }
.e2-topo .e2-wrap { min-height: 80px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.e2-logo { height: 40px; width: auto; }
.e2-rotulo { color: var(--texto-suave); }
.e2-cadeado { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--verde-tint); border: 1px solid var(--verde-linha); color: var(--verde-escuro); font-size: 12px; font-weight: 700; }
.e2-main { padding: 48px 24px 96px; display: flex; flex-direction: column; gap: 32px; }
.e2-estado { font-size: 15px; color: var(--texto); display: flex; align-items: center; gap: 12px; }
.e2-caixa { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 28px; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 640px; }
.e2-caixa.e2-ok { background: var(--verde-tint); border-color: var(--verde-linha); }
.e2-caixa p { margin: 0; line-height: 1.6; }
.e2-h1 { margin: 0; font-weight: 800; font-size: 22px; letter-spacing: -.02em; text-transform: uppercase; color: var(--preto); }
.e2-ok .titulo { display: flex; align-items: center; gap: 10px; }
.e2-ok .check { width: 40px; height: 40px; border-radius: 50%; background: var(--verde); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.e2-mini { font-size: 12px; color: var(--texto-suave); line-height: 1.5; }
.e2-spinner { width: 18px; height: 18px; border: 2px solid var(--linha); border-top-color: var(--verde); border-radius: 50%; animation: e2spin .8s linear infinite; }
@keyframes e2spin { to { transform: rotate(360deg); } }
.e2-progresso { display: flex; flex-direction: column; gap: 14px; }
.e2-progresso ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.e2-progresso li { display: flex; align-items: center; gap: 8px; color: var(--preto); }
.e2-progresso li.feito { color: var(--verde); }
.e2-progresso .n { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--verde); color: var(--verde); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.e2-progresso li.feito .n { background: var(--verde); color: #fff; }
.e2-progresso em { font-style: normal; font-weight: 600; color: var(--texto-suave); text-transform: none; letter-spacing: 0; }
.e2-progresso .barra { height: 6px; border-radius: 999px; background: var(--linha); overflow: hidden; } .e2-progresso .barra div { height: 100%; background: var(--verde); }
.e2-hero { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; }
.e2-hero .texto { flex: 1 1 480px; min-width: 0; max-width: 720px; display: flex; flex-direction: column; gap: 12px; }
.e2-hero .eyebrow.verde { font-size: 12px; color: var(--verde); }
.e2-hero .lockup .alta { font-size: 36px; } .e2-hero .lockup .script { font-size: 67px; margin-top: -13px; }
.e2-hero p { margin: 0; font-size: 16px; line-height: 1.6; } .e2-hero strong { color: var(--preto); }
.e2-hero .foto { flex: 0 0 260px; width: 260px; height: 190px; object-fit: cover; object-position: 40% center; border-radius: 12px; border: 1px solid var(--linha); }
#e2-form { display: flex; flex-direction: column; gap: 24px; }
.e2-bloco { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.e2-bloco-cab { display: flex; align-items: center; gap: 12px; }
.e2-bloco-cab h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; color: var(--preto); }
.e2-bloco-cab.simples { justify-content: space-between; flex-wrap: wrap; gap: 8px; } .e2-bloco-cab.simples h2 { font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.e2-bloco-cab .num { width: 32px; height: 32px; border-radius: 8px; background: var(--verde); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none; }
.e2-dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; font-size: 14px; }
.e2-dl dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.e2-dl dd { margin: 2px 0 0; font-weight: 600; color: var(--preto); word-break: break-word; }
.e2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.e2-grid.larga { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.e2-span { grid-column: 1 / -1; margin: 0; }
.e2 .campo { gap: 6px; }
.e2 .campo label { font-size: 12px; }
.e2 .campo input, .e2 .campo select { height: 44px; padding: 0 14px; font-size: 15px; }
.e2 .campo textarea { padding: 12px 14px; border: 1px solid var(--borda-input); border-radius: 8px; font-size: 15px; background: #fff; color: var(--preto); resize: vertical; font-family: var(--fonte); }
.e2 .campo textarea:focus { outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }
button.link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--verde); text-decoration: underline; cursor: pointer; align-self: flex-start; }
.e2-aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--texto); cursor: pointer; }
.e2-aceite input { accent-color: var(--verde); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.e2-aceite strong { color: var(--preto); } .e2-aceite button.link { font-size: 13px; font-weight: 400; }
.e2-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.e2-acoes .btn { height: 56px; padding: 0 32px; font-size: 14px; }
.btn.branco { background: #fff; color: var(--preto); border: 1px solid var(--preto); } .btn.branco:hover { background: var(--superficie); color: var(--preto); }
.e2-relogio { display: inline-flex; align-items: center; gap: 6px; }
.e2-rodape { background: #fff; border-top: 1px solid var(--linha); color: var(--texto-suave); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.e2-rodape .e2-wrap { padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.e2-rodape a, .e2-rodape button.link { color: var(--verde); font-size: 11px; font-weight: 600; text-decoration: none; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 720px) {
  .e2-main { padding: 28px 20px 64px; gap: 24px; }
  .e2-hero .lockup .alta { font-size: 28px; } .e2-hero .lockup .script { font-size: 50px; margin-top: -9px; }
  .e2-hero .foto { flex-basis: 100%; width: 100%; height: 180px; }
  .e2-bloco { padding: 20px 16px; }
  .e2 .campo input, .e2 .campo select { height: 48px; font-size: 16px; }
  .e2-acoes .btn { width: 100%; }
  .e2-cadeado { margin-left: 0; }
}