/* Fontes hospedadas no próprio servidor (sem ida ao Google Fonts) + fontes reserva com as mesmas
   medidas, para o texto não "pular" (CLS) quando a fonte final chega. Métricas: scripts/ (fontTools). */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 700 800; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-next.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("../fonts/kalam-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"), local("Roboto"); size-adjust: 109.9%; ascent-override: 79.9%; descent-override: 19.1%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback"; src: local("Arial"), local("ArialMT"), local("Roboto"); size-adjust: 99.6%; ascent-override: 98.8%; descent-override: 31.7%; line-gap-override: 0%; }
@font-face { font-family: "Kalam Fallback"; src: local("Arial"), local("ArialMT"), local("Roboto"); size-adjust: 99.9%; ascent-override: 106.4%; descent-override: 53.1%; line-gap-override: 0%; }

/* FADEC — base compartilhada pelas landings A (tradicional) e B (quiz) */

:root {
  --navy-950: #081834;
  --navy-900: #0c2150;
  --navy-800: #13306b;
  --navy-600: #2a4f99;
  --ink: #16223d;
  --ink-soft: #4a5672;
  --gold: #f7c544;
  --gold-soft: #fde9a8;
  --gold-deep: #c98f00;
  --paper: #f4f6fa;
  --white: #ffffff;
  --sky: #e5edf9;
  --line: #d6deeb;
  --ok: #148a4b;
  --ok-soft: #e3f5ea;
  --error: #b42318;
  --error-soft: #fdecea;
  --wa: #15803d;

  --f-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible Next", "Atkinson Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-hand: "Kalam", "Kalam Fallback", cursive;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --shadow-card: 0 1px 2px rgb(8 24 52 / .06), 0 8px 24px -8px rgb(8 24 52 / .18);
  --shadow-lift: 0 2px 4px rgb(8 24 52 / .08), 0 22px 44px -18px rgb(8 24 52 / .35);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--navy-600); text-underline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); color: var(--navy-900); line-height: 1.05; letter-spacing: -.01em; }
h1 { font-weight: 800; font-stretch: 112%; font-size: clamp(2.15rem, 1.4rem + 3.6vw, 4rem); }
h2 { font-weight: 800; font-stretch: 108%; font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); }
h3 { font-weight: 700; font-size: 1.25rem; line-height: 1.2; }

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--navy-950); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--navy-600); outline-offset: 3px; border-radius: 6px; }

.ico { width: 1.4em; height: 1.4em; flex: none; --duo: var(--gold); --duo-o: .55; }

/* ----- marca-texto: a faixa dourada "pinta" a frase uma vez ----- */
.mark {
  background: linear-gradient(transparent 58%, var(--gold) 58%, var(--gold) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
  padding-inline: .06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: mark-in 900ms var(--ease-out) 350ms forwards;
}
.on-navy .mark { color: var(--white); background-image: linear-gradient(transparent 60%, rgb(247 197 68 / .9) 60%, rgb(247 197 68 / .9) 90%, transparent 90%); }
@keyframes mark-in { to { background-size: 100% 100%; } }

/* ----- botões ----- */
.btn {
  --bg: var(--gold); --fg: var(--navy-950);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 56px; padding: .85em 1.5em;
  border: 0; border-radius: 14px;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-display); font-weight: 800; font-stretch: 104%; font-size: 1.1rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 0 var(--gold-deep), 0 10px 20px -10px rgb(201 143 0 / .8);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--gold-deep), 0 16px 26px -12px rgb(201 143 0 / .9); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--gold-deep); }
.btn .ico { width: 1.25em; height: 1.25em; transition: transform .2s var(--ease-out); }
.btn:hover .ico-arrow { transform: translateX(4px); }
.btn[disabled], .btn[aria-busy="true"] { cursor: progress; opacity: .85; transform: none; }
.btn-block { width: 100%; }
.btn-wa { --bg: var(--wa); --fg: #fff; box-shadow: 0 2px 0 #0f6630, 0 10px 20px -10px rgb(15 102 48 / .8); }
.btn-wa:hover { box-shadow: 0 4px 0 #0f6630, 0 16px 26px -12px rgb(15 102 48 / .9); }
.btn-ghost { --bg: transparent; --fg: var(--navy-900); box-shadow: inset 0 0 0 2px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--navy-600); }
.spinner { width: 1.1em; height: 1.1em; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ----- campos ----- */
.field { display: grid; gap: 6px; margin-bottom: 14px; position: relative; }
.field > label, .legend { font-weight: 700; font-size: .95rem; color: var(--navy-900); }
.field .hint { font-size: .85rem; color: var(--ink-soft); }
.input {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--white);
  font-size: 1.05rem; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #8a94a8; }
.input:hover { border-color: #b7c3d7; }
.input:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 4px rgb(42 79 153 / .15); }
.input[aria-invalid="true"] { border-color: var(--error); background: #fffafa; }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgb(180 35 24 / .14); }
.input:disabled { background: #eef1f6; color: #8a94a8; cursor: not-allowed; }
.err { display: flex; gap: 6px; align-items: flex-start; color: var(--error); font-size: .9rem; font-weight: 700; }
.err:empty { display: none; }
.phone-ok { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--ok); font-size: .9rem; font-weight: 700; line-height: 1.35; }
.phone-ok::before { content: "✓"; flex: none; }
.phone-ok[hidden] { display: none; }
.phone-ok .nowrap { white-space: nowrap; }
.field:has(.input[aria-invalid="true"]) .phone-ok:not(.phone-fixo) { display: none; }
/* fixo: "Ele tem WhatsApp?" com dois botões */
.phone-fixo { flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--sky); color: var(--ink); font-weight: 600; }
.phone-fixo::before { content: none; }
.phone-fixo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-mini { min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--wa); border-radius: 999px; background: var(--wa); color: #fff; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.btn-mini-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-mini:focus-visible { outline: 3px solid var(--navy-600); outline-offset: 2px; }
.err::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--error); color: #fff; font-size: .75rem; }

/* opções tipo "chip" (radio) */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; margin: 0 0 14px; }
.choices legend { margin-bottom: 8px; padding: 0; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px;
  background: var(--white); font-weight: 700; font-size: .95rem; line-height: 1.2;
  transition: border-color .15s, background-color .15s, transform .15s var(--ease-out);
}
.choice input:hover + span { border-color: #b7c3d7; }
.choice input:checked + span { border-color: var(--navy-800); background: var(--sky); color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--navy-800); }
.choice input:focus-visible + span { outline: 3px solid var(--navy-600); outline-offset: 2px; }
.choices[aria-invalid="true"] .choice span { border-color: #e7b4ae; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy-800); flex: none; cursor: pointer; }
.check[aria-invalid="true"] { color: var(--error); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ----- autocomplete (combobox) ----- */
.combo { position: relative; }
.combo-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  max-height: min(300px, 45vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); border: 2px solid var(--navy-600); border-radius: 12px; box-shadow: var(--shadow-lift);
}
.combo-list[hidden] { display: none; }
.combo-list li { padding: 11px 12px; border-radius: 8px; cursor: pointer; line-height: 1.3; }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--sky); }
.combo-list li b { color: var(--navy-900); }
.combo-list li small { color: var(--ink-soft); margin-left: 6px; }
.combo-list .empty { color: var(--ink-soft); cursor: default; background: none !important; }

/* ----- cartão "Seu certificado chegou" (assinatura) ----- */
.cert {
  --tilt: -4deg;
  position: relative; width: min(100%, 360px); aspect-ratio: 1.45;
  padding: 7% 8% 8%;
  background:
    linear-gradient(135deg, var(--navy-900) 0 9%, transparent 9.2%) top left / 100% 100% no-repeat,
    linear-gradient(-45deg, var(--navy-900) 0 9%, transparent 9.2%) bottom right / 100% 100% no-repeat,
    #fffdf7;
  border-radius: 6px;
  box-shadow: var(--shadow-lift);
  transform: rotate(var(--tilt));
  color: var(--navy-950);
  text-align: center;
  display: grid; align-content: center; gap: .15em;
  font-family: var(--f-display);
}
.cert::after { /* borda gravada */
  content: ""; position: absolute; inset: 5%; border: 1.5px solid rgb(201 143 0 / .55); border-radius: 3px; pointer-events: none;
}
.cert-brand { font-weight: 800; font-stretch: 118%; font-size: clamp(1.5rem, 7vw, 2.1rem); letter-spacing: .06em; line-height: 1; }
.cert-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.cert-name {
  font-family: var(--f-hand); font-weight: 700; font-size: clamp(1.2rem, 5vw, 1.5rem); line-height: 1.15;
  color: var(--navy-800); min-height: 1.2em; margin-top: .2em;
  border-bottom: 1.5px dashed rgb(19 48 107 / .35); padding-bottom: .1em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cert:has(.cert-seal) { padding-left: 76px; }  /* px: % aqui seria calculado sobre a área ao redor, não sobre o cartão */
.cert-name.is-placeholder { color: rgb(19 48 107 / .45); }
.cert-line { font-family: var(--f-body); font-size: .78rem; line-height: 1.35; color: var(--ink-soft); }
.cert-seal {
  position: absolute; left: 6%; top: 34%; width: 16%; aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3d06a, var(--gold-deep));
  box-shadow: 0 0 0 3px #fffdf7, 0 0 0 5px rgb(201 143 0 / .5);
  color: var(--navy-950);
}
.cert-seal svg { width: 58%; height: 58%; --duo: #fff; --duo-o: .45; }
.cert-seal::after { /* fitas */
  content: ""; position: absolute; top: 80%; left: 22%; width: 56%; height: 70%; z-index: -1;
  background: linear-gradient(100deg, #c0392b 0 45%, transparent 45% 55%, #c0392b 55%);
  clip-path: polygon(0 0, 45% 0, 30% 100%, 15% 80%, 0 100%, 55% 0, 100% 0, 100% 100%, 85% 80%, 70% 100%);
}
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: currentColor; vertical-align: -.1em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ----- estrelas / Google ----- */
.stars { display: inline-flex; gap: 2px; color: #f4b400; }
.stars svg { width: 1em; height: 1em; }

/* ----- aparição na rolagem ----- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.no-js .reveal { opacity: 1; transform: none; }

/* ----- modal ----- */
dialog.modal {
  width: min(100% - 24px, 440px); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-lift); overflow: auto;
}
dialog.modal::backdrop { background: rgb(8 24 52 / .6); backdrop-filter: blur(2px); }
dialog.modal[open] { animation: pop .35s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.modal-head { display: flex; gap: 12px; align-items: center; padding: 20px 20px 0; }
.modal-head .badge-wa { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #e6f7ec; color: var(--wa); }
.modal-head .badge-wa svg { width: 26px; height: 26px; }
.modal-head h2 { font-size: 1.35rem; font-stretch: 100%; }
.modal-close { margin-left: auto; align-self: flex-start; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--paper); cursor: pointer; }
.modal-close svg { width: 18px; height: 18px; }
.modal-body { padding: 14px 20px 20px; }
.modal-body > p { color: var(--ink-soft); font-size: .98rem; }

/* ----- alertas / estados ----- */
.alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: .95rem; margin-bottom: 14px; }
.alert[hidden] { display: none; }
.alert-error { background: var(--error-soft); color: #7a1a12; border: 1px solid #f3c1bb; }
.alert-ok { background: var(--ok-soft); color: #0e5a31; border: 1px solid #b7e2c7; }
.fallback-link { font-size: .95rem; }

/* ----- WhatsApp flutuante ----- */
.wa-float {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  width: 60px; height: 60px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--wa); color: #fff; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgb(15 102 48 / .8), 0 0 0 4px rgb(255 255 255 / .9);
  transition: transform .2s var(--ease-out);
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 32px; height: 32px; }
.wa-float .wa-tip {
  position: absolute; right: 72px; white-space: nowrap; background: var(--white); color: var(--ink);
  padding: 8px 12px; border-radius: 12px; font-size: .9rem; font-weight: 700; box-shadow: var(--shadow-card);
  opacity: 0; transform: translateX(8px); transition: .3s var(--ease-out); pointer-events: none;
}
.wa-float.show-tip .wa-tip, .wa-float:hover .wa-tip { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .mark { background-size: 100% 100%; }
  .reveal { opacity: 1; transform: none; }
}