/* ============================================================
   Quiz "Pintor no Lucro" · v1 (rascunho)
   Escrito do zero, com a referência (eletricistalucrativo.shop/quiz/) só como modelo de layout:
   mesma paleta clara (fundo cinza-azulado, azul de destaque, botão verde, vermelho do erro, verde do acerto),
   mesmas fontes (Big Shoulders Display nos títulos, Barlow no texto), cantos de 3 a 4 px, coluna de 460 px,
   e a tela do diagnóstico no escuro.
   ============================================================ */

/* Fontes no próprio site (as mesmas da referência, SIL OFL 1.1, baixadas dela): só o subconjunto latino. */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800 900; font-display: swap; src: url(assets/fonts/big-shoulders-display-800-900.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/barlow-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/barlow-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/barlow-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/barlow-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f6f8fb;
  --bg-2: #eef1f6;
  --panel: #ffffff;
  --line: #dde2ea;
  --text: #14171c;
  --soft: #3a404a;
  --muted: #5a616c;
  --accent: #1e46b8;
  --accent-dk: #183a99;
  --accent-2: #5b7fdc;
  --accent-rgb: 30, 70, 184;
  --cta: #1fa855;
  --cta-2: #179a4b;
  --cta-dk: #0f6e35;
  --cta-rgb: 31, 168, 85;
  --red: #d2373c;
  --red-rgb: 210, 55, 60;
  --green: #13834a;
  --green-rgb: 19, 131, 74;

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 4px;
  --gutter: 20px;
  --maxw: 460px;
  --sombra-cartao: 0 1px 2px rgba(20, 23, 28, .05), 0 10px 24px -16px rgba(20, 23, 28, .24);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-x: clip; }

body {
  min-height: 100dvh;
  overflow-x: clip;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(120% 60% at 50% -10%, #fbfcfe 0%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(20, 23, 28, .018) 0 1px, transparent 1px 64px),
    var(--bg);
}
/* grão bem leve por cima de tudo (textura de parede) */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

img, video, svg { max-width: 100%; }
b, strong { font-weight: 700; }

/* texto só para leitor de tela */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sem-js { max-width: var(--maxw); margin: 40px auto; padding: 0 var(--gutter); text-align: center; }

/* ---------- faixa do topo: os 3 fios da referência, mesmo traço e enquadramento, viraram 3 faixas de tinta
   deixadas por um rolo (no fim, à direita, o rolo no lugar da ponta descascada do fio) ---------- */
.faixa { position: relative; height: 22px; }
.faixa::before, .faixa::after { content: ""; position: absolute; top: 0; bottom: 0; }
.faixa::before { left: 0; right: 120px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='22' viewBox='0 0 240 22'><defs><path id='f0' d='M-240 5.8C-200 7.00 -160 7.00 -120 5.8C-80 4.60 -40 4.60 0 5.8C40 7.00 80 7.00 120 5.8C160 4.60 200 4.60 240 5.8C280 7.00 320 7.00 360 5.8'/><path id='f1' d='M-36 11.2C-16 12.40 4 12.40 24 11.2C44 10.00 64 10.00 84 11.2C104 12.40 124 12.40 144 11.2C164 10.00 184 10.00 204 11.2C224 12.40 244 12.40 264 11.2'/><path id='f2' d='M-145 16.6C-105 17.80 -65 17.80 -25 16.6C15 15.40 55 15.40 95 16.6C135 17.80 175 17.80 215 16.6C255 15.40 295 15.40 335 16.6'/></defs><g fill='none'><use href='%23f0' stroke='%230C1635' stroke-width='6.8'/><use href='%23f0' stroke='%231E46B8' stroke-width='5.2'/><use href='%23f0' stroke='%235B7FDC' stroke-opacity='.75' stroke-width='1.3' y='-1.3'/><use href='%23f1' stroke='%233E7DB8' stroke-width='6.8'/><use href='%23f1' stroke='%238EC1E8' stroke-width='5.2'/><use href='%23f1' stroke='%23E6F2FC' stroke-opacity='.75' stroke-width='1.3' y='-1.3'/><use href='%23f2' stroke='%231C6E33' stroke-width='6.8'/><use href='%23f2' stroke='%2333A852' stroke-width='5.2'/><use href='%23f2' stroke='%23B9F0C6' stroke-opacity='.75' stroke-width='1.3' y='-1.3'/></g></svg>") repeat-x right -120px top 0 / 240px 22px; }
.faixa::after { right: 0; width: 120px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='120 0 120 22'><defs><path id='f0' d='M0 5.8C40 7.00 80 7.00 120 5.8C160 4.60 200 4.60 240 5.8C280 7.00 320 7.00 360 5.8'/><path id='f1' d='M-36 11.2C-16 12.40 4 12.40 24 11.2C44 10.00 64 10.00 84 11.2C104 12.40 124 12.40 144 11.2C164 10.00 184 10.00 204 11.2C224 12.40 244 12.40 264 11.2'/><path id='f2' d='M-145 16.6C-105 17.80 -65 17.80 -25 16.6C15 15.40 55 15.40 95 16.6C135 17.80 175 17.80 215 16.6C255 15.40 295 15.40 335 16.6'/></defs><clipPath id='c'><rect x='110' width='92' height='22'/></clipPath><g fill='none' clip-path='url(%23c)'><use href='%23f0' stroke='%230C1635' stroke-width='6.8'/><use href='%23f0' stroke='%231E46B8' stroke-width='5.2'/><use href='%23f0' stroke='%235B7FDC' stroke-opacity='.75' stroke-width='1.3' y='-1.3'/><use href='%23f1' stroke='%233E7DB8' stroke-width='6.8'/><use href='%23f1' stroke='%238EC1E8' stroke-width='5.2'/><use href='%23f1' stroke='%23E6F2FC' stroke-opacity='.75' stroke-width='1.3' y='-1.3'/><use href='%23f2' stroke='%231C6E33' stroke-width='6.8'/><use href='%23f2' stroke='%2333A852' stroke-width='5.2'/><use href='%23f2' stroke='%23B9F0C6' stroke-opacity='.75' stroke-width='1.3' y='-1.3'/></g><rect x='200' y='1' width='11' height='20' rx='3.5' fill='%235B84E6' stroke='%230C1635' stroke-width='1.4'/><path d='M203.5 4v14M207 3.5v15' stroke='%23A9C3F5' stroke-width='1'/><path d='M211 11h7V4.5h6' fill='none' stroke='%230C1635' stroke-width='2.6' stroke-linejoin='round'/><path d='M211 11h7V4.5h6' fill='none' stroke='%23C9CFD8' stroke-width='1' stroke-linejoin='round'/><rect x='223.5' y='2' width='13' height='5.4' rx='2.2' fill='%23F2C230' stroke='%230C1635' stroke-width='1'/></svg>") no-repeat 0 0 / 120px 22px; }

.app {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--gutter) calc(28px + env(safe-area-inset-bottom));
}

/* ---------- marcadores de pendência (MODO_RASCUNHO) ---------- */
mark.pend {
  display: inline;
  padding: .05em .3em;
  border-radius: 3px;
  background: #fff1a8;
  color: #3d3200;
  box-shadow: inset 0 0 0 1px #e8cf4a;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .82em;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  vertical-align: baseline;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:is(h1, h2, .q__title, .pv__h1, .pv__h2, .offer__price, .offer__once, .nofee__big, .punch, .fracao__t) mark.pend {
  font-size: 14px; line-height: 1.5; vertical-align: middle; font-weight: 600;
}
.selo-rascunho {
  position: fixed; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 50;
  padding: 4px 8px; border-radius: 3px;
  background: #fff1a8; color: #3d3200; box-shadow: inset 0 0 0 1px #e8cf4a, 0 4px 10px -4px rgba(0, 0, 0, .3);
  font: 700 11px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  pointer-events: none; opacity: .92;
}

/* ---------- entrada escalonada ---------- */
.reveal { opacity: 0; transform: translateY(14px); animation: subir .55s cubic-bezier(.2, .7, .2, 1) forwards; }
.reveal:nth-child(1) { animation-delay: .05s; }
.reveal:nth-child(2) { animation-delay: .15s; }
.reveal:nth-child(3) { animation-delay: .25s; }
.reveal:nth-child(4) { animation-delay: .35s; }
.reveal:nth-child(5) { animation-delay: .45s; }
.reveal:nth-child(6) { animation-delay: .55s; }
@keyframes subir { to { opacity: 1; transform: none; } }

/* ============================================================
   ABERTURA
   ============================================================ */
.cover {
  display: flex; flex-direction: column; gap: 16px;
  min-height: calc(100dvh - 22px - 16px - 28px - env(safe-area-inset-bottom));
}
.cover h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 9vw, 42px);
  line-height: 1.04;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}
.hl {
  color: var(--accent);
  background: linear-gradient(transparent 78%, rgba(var(--accent-rgb), .22) 78%, rgba(var(--accent-rgb), .22) 94%, transparent 94%);
  padding: 0 .04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.warn { color: var(--red); }

.lede {
  text-align: center;
  color: var(--soft);
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.38;
  text-wrap: pretty;
}
.lede strong { color: var(--text); }
.lede strong.u { white-space: nowrap; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lede strong.brand { color: var(--accent); }
.chamada {
  text-align: center;
  font-size: 16px; font-weight: 700; line-height: 1.35;
  color: var(--text);
  text-wrap: balance;
  margin-top: -4px;
}

/* ---------- antes / depois (ilustração em SVG) ---------- */
.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-inline: calc(-1 * var(--gutter));
  flex: 1 1 auto;
  min-height: min(60vw, 300px);
  max-height: min(100vw, 460px);
}
.ba__item { --c: var(--red); position: relative; margin: 0; overflow: hidden; }
.ba__item--after { --c: var(--green); }
/* o que sobra do SVG ("meet") nas laterais leva as cores da borda da cena, nos mesmos pontos da referência */
.ba--loop .ba__item--before { background: linear-gradient(#b9c0cc 0 82.96%, #0c1635 0 83.6%, #9a7656 0 85.5%, #0c1635 0 86.1%, #7a5c41 0); }
.ba--loop .ba__item--after { background: linear-gradient(#f4f7fb 0 82.96%, #0c1635 0 83.6%, #ffffff 0 85.5%, #0c1635 0 86.1%, #dce4ee 0); }
.ba__item svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ba__item::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--c); pointer-events: none; }
.ba figcaption {
  position: absolute; left: 0; top: 0; z-index: 1;
  padding: 5px 10px 4px 8px;
  background: var(--c);
  font-family: var(--font-display); font-weight: 900;
  font-size: 15px; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
}
.ba--pv { flex: none; height: 250px; min-height: 0; max-height: none; margin: 10px 0 0; }
.ba--pv figcaption { left: auto; right: 0; }

/* fotos do antes e depois da oferta (P-01 e P-02): o topo fica, como na referência */
.ba--pv .ba__item { background: #e9edf2; }
.ba--pv .ba__item img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 0; }
.ba--pv .slot-gerar { position: absolute; inset: 0; padding-top: 34px; }

/* ---------- topo da oferta: a história em laço (4:5), integrada ao fundo com o esfumaçado da referência ---------- */
.hero-video { margin: -8px -16px 24px; width: calc(100% + 32px); max-width: 520px; align-self: center; }
.hero-cena { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; background: transparent;
  --fade-v: linear-gradient(to bottom, transparent 0, transparent 1%, rgba(0,0,0,.16) 3.75%, rgba(0,0,0,.5) 6.5%,
    rgba(0,0,0,.84) 9.25%, #000 12%, #000 89%, rgba(0,0,0,.96) 90.25%, rgba(0,0,0,.84) 91.5%, rgba(0,0,0,.68) 92.75%,
    rgba(0,0,0,.5) 94%, rgba(0,0,0,.32) 95.25%, rgba(0,0,0,.16) 96.5%, rgba(0,0,0,.04) 97.75%, transparent 99%);
  --fade-h: linear-gradient(to right, transparent 0, transparent 1%, rgba(0,0,0,.16) 2.75%, rgba(0,0,0,.5) 4.5%,
    rgba(0,0,0,.84) 6.25%, #000 8%, #000 92%, rgba(0,0,0,.84) 93.75%, rgba(0,0,0,.5) 95.5%, rgba(0,0,0,.16) 97.25%,
    transparent 99%);
  -webkit-mask-image: var(--fade-v), var(--fade-h); -webkit-mask-composite: source-in;
  mask-image: var(--fade-v), var(--fade-h); mask-composite: intersect; clip-path: inset(1px); }
.hero-cena svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- fotos (agitação e oferta), no quadro 4:5 da referência ---------- */
.photo { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 40px -20px rgba(20, 23, 28, .19); background: #e9edf2; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.photo--app img { object-position: 50% 15%; }
/* foto ainda a gerar (ver assets/PROMPTS-IMAGENS.md): cinza, com o código do prompt e o tamanho do original */
.slot-gerar { width: 100%; height: 100%; display: grid; place-content: center; gap: 6px; padding: 12px; text-align: center;
  background: repeating-linear-gradient(45deg, #e4e7ec 0 10px, #eceef2 10px 20px); color: #5a616c; }
.slot-gerar b { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: .06em; color: #4a515c; }
.slot-gerar span { font-size: 13px; font-weight: 700; color: #3a404a; }
.slot-gerar small { font-size: 12.5px; line-height: 1.3; }

/* ---------- copy v2 1:1: blocos da oferta no desenho da referência ---------- */
.perk > p { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 6px; }
.perk > p b { color: var(--text); font-weight: 600; }
.perk__pdf span { flex: 1; display: flex; flex-direction: column; }
.perk__pdf span b { flex: none; font-size: 14px; font-weight: 600; }
.perk__pdf small { font-size: 12px; color: #3f6b58; }
.perk mark.pend { display: inline-block; margin-top: 10px; }
.turn p span { color: var(--text); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.meet > p { font-size: 16px; line-height: 1.45; color: var(--soft); margin-top: 8px; }
.meet > p.meet__sub { font-weight: 700; color: var(--text); margin-top: 16px; }
.meet__steps li { align-items: center; font-weight: 700; font-size: 16px; color: var(--text); }
.meet > p.meet__ok { font-weight: 700; color: var(--text); margin-top: 12px; }
.feats .checks__title { margin-bottom: 12px; }
.box__pend { padding: 6px 0 8px; }
.offer__k { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--soft); }
.offer__stack { list-style: none; margin: 18px 0 12px; text-align: left; border-top: 1px solid var(--line); }
.offer__stack li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.offer__stack em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.offer__safe { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.fracao { margin: 4px 0 18px; }
.fracao__top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--soft); }
.fracao__top span:last-child { flex: none; }
.fracao__barra { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; }
.fracao__barra i { display: grid; place-items: center; height: 44px; border-radius: 3px; background: #dfe4ec; font-style: normal; font-size: 13px; font-weight: 600; color: #5a616c; }
.fracao__barra i:first-child { background: var(--accent); color: #fff; font-size: 12px; white-space: nowrap; }
.fracao__leg { display: grid; grid-template-columns: 1fr calc((100% - 4px) * (var(--n) - 1) / var(--n)); gap: 4px; margin-top: 6px; font-size: 13px; text-align: center; color: var(--muted); }
.fracao__leg b { font-weight: 600; color: var(--accent); }
.fracao__leg em { font-style: normal; font-weight: 600; color: var(--green); }
.fracao__txt b { font-weight: 600; }
.fracao mark.pend { display: inline-block; margin-top: 8px; }
.pv__close b { color: var(--accent); }

/* ---------- botão principal ---------- */
.btn {
  --press: 6px;
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--cta), var(--cta-2));
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 6vw, 24px);
  line-height: 1.05;
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 var(--press) 0 var(--cta-dk), 0 14px 30px -10px rgba(var(--cta-rgb), .5);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(var(--press)); box-shadow: 0 0 0 var(--cta-dk); }
.btn:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
.btn--pulse { animation: pulsa 1.6s ease-in-out .9s infinite; }
.btn--pulse::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(var(--cta-rgb), .55);
  animation: anel 1.6s ease-out .9s infinite;
  pointer-events: none;
}
.btn--pulse:active { animation: none; }
@keyframes pulsa { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
@keyframes anel { 0% { box-shadow: 0 0 0 0 rgba(var(--cta-rgb), .55); } 100% { box-shadow: 0 0 0 16px rgba(var(--cta-rgb), 0); } }

.btn, .opt, .q__back, [data-checkout], [data-restart] { touch-action: manipulation; -webkit-user-select: none; user-select: none; }

/* ============================================================
   PERGUNTAS
   ============================================================ */
.q { display: flex; flex-direction: column; gap: 14px; }
.q__top { display: flex; align-items: center; gap: 12px; }
.q > .q__top { margin-bottom: 26px; }
.q__back {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  box-shadow: var(--sombra-cartao);
}
.q__back svg { width: 18px; height: 18px; }
.q__back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.q__progress {
  flex: 1;
  height: 10px;
  border-radius: 3px;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.q__progress span {
  display: block; height: 100%;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 8px, var(--accent-dk) 8px 16px);
  border-radius: inherit;
  transition: width .5s cubic-bezier(.2, .7, .2, 1);
}
.q__count {
  flex: none;
  font-family: var(--font-display); font-weight: 800;
  font-size: 16px; letter-spacing: .06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.q__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 7.8vw, 36px);
  line-height: 1.02;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}
.q > .q__title { margin-bottom: 22px; }

.q__options { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.opt {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  min-height: 58px;
  padding: 9px 12px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--sombra-cartao);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
@media (hover: hover) and (pointer: fine) { .opt:hover { border-color: #9aa3b2; } }
.opt:active { transform: scale(.985); }
.opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt__emoji {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 22px;
  background: var(--bg-2);
  border-radius: 3px;
}
.opt__text { flex: 1; min-width: 0; font-weight: 700; font-size: 16px; line-height: 1.22; }
.opt__check {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  transition: background .15s ease, border-color .15s ease;
}
.opt.is-picked { border-color: var(--accent); background: #eef2fc; box-shadow: 0 0 0 1px var(--accent), 0 10px 24px -14px rgba(var(--accent-rgb), .35); }
.opt.is-picked .opt__check {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px no-repeat;
}

/* ============================================================
   TELAS SEM PERGUNTA (educativa, agitação, prova, demonstração)
   ============================================================ */
.info { min-height: calc(100dvh - 22px - 16px - 28px - env(safe-area-inset-bottom)); }
.txt { display: flex; flex-direction: column; gap: 10px; text-align: center; color: var(--soft); font-size: 16.5px; line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.txt b { color: var(--text); }

.shot-wrap { position: relative; margin: 6px 0 4px; display: flex; flex-direction: column; align-items: center; }
.shot-wrap::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 90%; height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .22), transparent);
  filter: blur(10px);
  pointer-events: none;
}
/* moldura do celular */
.shot {
  position: relative;
  width: min(78vw, 330px);
  aspect-ratio: 400 / 854;
  border-radius: 30px;
  padding: 5px;
  background: linear-gradient(160deg, #3a3d44, #121316 40%, #2a2c31);
  box-shadow: 0 0 0 1px rgba(20, 23, 28, .08), 0 26px 50px -18px rgba(20, 23, 28, .2), 0 0 40px -10px rgba(var(--accent-rgb), .25);
  transition: none;
}
.shot > img, .shot > video { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 25px; display: block; background: #fff; }
.rodape-ilustra { position: relative; margin-top: 12px; text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.shot-wrap + .checks { margin-top: 18px; }

/* slot de prova ainda sem material: cinza, com o aviso */
.slot-prova {
  display: grid; place-content: center; gap: 6px; text-align: center;
  width: 100%; height: 100%;
  border-radius: 25px;
  border: 2px dashed #b4bbc7;
  background: repeating-linear-gradient(45deg, #e4e7ec 0 10px, #eceef2 10px 20px);
  color: #5a616c;
  padding: 12px;
}
.slot-prova b { font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: #4a515c; }
.slot-prova span { font-size: 13px; line-height: 1.3; }

/* lista de orçamentos do app (tela ilustrativa da prova, Versão B de teste) */
/* Fonte do sistema (como num app de verdade), cinzas de iOS, status bar, abas com contador,
   grupos por data, avatar colorido, status com bolinha, botão de microfone, barra de navegação,
   barra de "home" e notificação que desce. */
.mlist {
  --ml-txt: #111318; --ml-sub: #5c6370; --ml-mut: #8e94a0; --ml-sep: #eceef2; --ml-bg: #f4f5f8;
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 25px;
  background: var(--ml-bg); color: var(--ml-txt); text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1;
}
.mlist__status { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 6px 20px 0 24px; background: #fff; font-size: 13px; font-weight: 600; }
.mlist__ilha { position: absolute; left: 50%; top: 7px; width: 74px; height: 21px; margin-left: -37px; border-radius: 12px; background: #0b0c0e; }
.mlist__icos { display: flex; align-items: center; gap: 4px; fill: currentColor; }
.mlist__top { position: relative; z-index: 2; padding: 6px 14px 10px; background: #fff; box-shadow: 0 1px 0 var(--ml-sep); }
.mlist__bar { display: flex; align-items: center; justify-content: space-between; }
.mlist__title { font-weight: 700; font-size: 21px; letter-spacing: -.02em; }
.mlist__lupa { color: var(--ml-sub); display: grid; }
.mlist__tabs { display: flex; gap: 6px; margin-top: 9px; font-size: 11px; }
.mlist__tabs b, .mlist__tabs i { font-style: normal; padding: 4px 9px; border-radius: 8px; background: #f0f1f4; color: var(--ml-sub); font-weight: 600; white-space: nowrap; }
.mlist__tabs b { background: #111318; color: #fff; }
.mlist__tabs em { font-style: normal; opacity: .6; margin-left: 2px; }
.mlist__ul { list-style: none; margin: 0; padding: 0 0 110px; }
.mlist__grp, .mlist__li { opacity: 0; transform: translateY(6px); animation: mlist-in .34s ease-out forwards; animation-delay: calc(.2s + var(--i) * .09s); }
.mlist__grp { padding: 10px 16px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ml-mut); }
.mlist__li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; margin: 0 8px 5px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: 0 1px 1px rgba(17, 19, 24, .04); }
.mlist__av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.mlist__who { min-width: 0; display: flex; flex-direction: column; line-height: 1.22; }
.mlist__who b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlist__who small { font-size: 11px; color: var(--ml-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlist__who em { font-style: normal; font-size: 10px; color: var(--ml-mut); }
.mlist__val { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; line-height: 1.2; }
.mlist__val b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mlist__st { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 6px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.mlist__st i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mlist__st--ok { color: #1b7a46; background: #e5f5ec; }
.mlist__st--espera { color: #a8610c; background: #fdf1e1; }
.mlist__st--visto { color: #2a4fb8; background: #e8eefc; }
.mlist__st--pop { animation: mlist-pop .5s ease-out; }
.mlist__fab { position: absolute; right: 14px; bottom: 74px; z-index: 2; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 10px 20px -8px rgba(var(--accent-rgb), .7); }
.mlist__nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 6px 20px; background: rgba(255, 255, 255, .96); box-shadow: 0 -1px 0 var(--ml-sep); }
.mlist__nav-i { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #a3a8b2; }
.mlist__nav-i small { font-size: 9.5px; font-weight: 600; }
.mlist__nav-i.is-on { color: var(--accent); }
.mlist__home { position: absolute; left: 50%; bottom: 6px; z-index: 3; width: 104px; height: 4px; margin-left: -52px; border-radius: 3px; background: #111318; }
.mlist__notif {
  position: absolute; left: 8px; right: 8px; top: 40px; z-index: 4;
  display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center;
  padding: 9px 11px; border-radius: 16px;
  background: rgba(246, 247, 250, .97); box-shadow: 0 12px 28px -10px rgba(17, 19, 24, .35), 0 0 0 1px rgba(17, 19, 24, .05);
  transform: translateY(-140%); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .3, 1.1), opacity .3s;
}
.mlist__notif.is-on { transform: none; opacity: 1; }
.mlist__notif-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); }
.mlist__notif-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mlist__notif-txt small { font-size: 9.5px; font-weight: 600; letter-spacing: .03em; color: var(--ml-mut); }
.mlist__notif-txt b { font-size: 12px; font-weight: 600; }
.mlist__notif-txt span { font-size: 11px; color: var(--ml-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes mlist-in { to { opacity: 1; transform: none; } }
@keyframes mlist-pop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .mlist__grp, .mlist__li { animation: none; opacity: 1; transform: none; }
  .mlist__st--pop { animation: none; }
  .mlist__notif { transition: none; }
}

/* ---- checklist animado */
.checks {
  padding: 18px 16px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, #f8fafd);
  border: 1px solid var(--line);
  box-shadow: var(--sombra-cartao);
}
.checks__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; line-height: 1; letter-spacing: .02em; text-transform: uppercase;
  margin-bottom: 14px;
}
.checks ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.checks li {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 4px;
  border-top: 1px solid rgba(20, 23, 28, .06);
  opacity: 0; transform: translateX(-14px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}
.checks li:first-child { border-top: 0; }
.checks li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.checks li b { font-size: 18px; line-height: 1.15; }
.checks li small { font-size: 14px; color: var(--muted); line-height: 1.3; }
.checks__ok {
  flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green);
  transform: scale(0);
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.checks__ok svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.checks__ok path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s ease .25s; }
.checks.is-in li { opacity: 1; transform: none; }
.checks.is-in .checks__ok { transform: scale(1); animation: ping-ok 1.1s ease-out .45s 1 both; }
.checks.is-in .checks__ok path { stroke-dashoffset: 0; }
@keyframes ping-ok { 0% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), .55); } 100% { box-shadow: 0 0 0 14px rgba(var(--green-rgb), 0); } }
/* um item de cada vez (0,45 s entre eles) */
.checks li:nth-child(1), .checks li:nth-child(1) .checks__ok { transition-delay: .05s; }
.checks li:nth-child(2), .checks li:nth-child(2) .checks__ok { transition-delay: .5s; }
.checks li:nth-child(3), .checks li:nth-child(3) .checks__ok { transition-delay: .95s; }
.checks li:nth-child(4), .checks li:nth-child(4) .checks__ok { transition-delay: 1.4s; }
.checks li:nth-child(5), .checks li:nth-child(5) .checks__ok { transition-delay: 1.85s; }
.checks li:nth-child(6), .checks li:nth-child(6) .checks__ok { transition-delay: 2.3s; }
.checks li:nth-child(1) .checks__ok path { transition-delay: .3s; }
.checks li:nth-child(2) .checks__ok path { transition-delay: .75s; }
.checks li:nth-child(3) .checks__ok path { transition-delay: 1.2s; }
.checks li:nth-child(4) .checks__ok path { transition-delay: 1.65s; }
.checks li:nth-child(5) .checks__ok path { transition-delay: 2.1s; }
.checks li:nth-child(6) .checks__ok path { transition-delay: 2.55s; }
.checks.is-in li:nth-child(2) .checks__ok { animation-delay: .9s; }
.checks.is-in li:nth-child(3) .checks__ok { animation-delay: 1.35s; }
.checks.is-in li:nth-child(4) .checks__ok { animation-delay: 1.8s; }
.checks.is-in li:nth-child(5) .checks__ok { animation-delay: 2.25s; }
.checks.is-in li:nth-child(6) .checks__ok { animation-delay: 2.7s; }
/* lista "ruim": ✕ vermelho */
.checks--bad .checks__ok { background: var(--red); }
.checks--bad li { padding: 9px 4px; }
.checks--bad li b { font-size: 17px; }
.checks--bad.is-in .checks__ok { animation-name: ping-mal; }
@keyframes ping-mal { 0% { box-shadow: 0 0 0 0 rgba(var(--red-rgb), .55); } 100% { box-shadow: 0 0 0 14px rgba(var(--red-rgb), 0); } }
/* listas longas da oferta: mais rápidas (0,12 s) */
.checks--tight li { padding: 8px 4px; }
.checks--tight li b { font-size: 16px; font-weight: 600; }
.checks--tight li:nth-child(1), .checks--tight li:nth-child(1) .checks__ok { transition-delay: .05s; }
.checks--tight li:nth-child(2), .checks--tight li:nth-child(2) .checks__ok { transition-delay: .17s; }
.checks--tight li:nth-child(3), .checks--tight li:nth-child(3) .checks__ok { transition-delay: .29s; }
.checks--tight li:nth-child(4), .checks--tight li:nth-child(4) .checks__ok { transition-delay: .41s; }
.checks--tight li:nth-child(5), .checks--tight li:nth-child(5) .checks__ok { transition-delay: .53s; }
.checks--tight li:nth-child(6), .checks--tight li:nth-child(6) .checks__ok { transition-delay: .65s; }
.checks--tight li:nth-child(n) .checks__ok path { transition-delay: .3s; }
.checks--tight.is-in li:nth-child(n) .checks__ok { animation-delay: .4s; }

/* ---- frase de impacto */
.punch {
  margin: 8px 0 10px;
  text-align: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 7.6vw, 34px); line-height: 1.08;
  text-transform: uppercase; text-wrap: balance;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease .1s, transform .6s cubic-bezier(.2, .8, .2, 1) .1s;
}
.punch__hl {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 4px 0;
  color: var(--accent);
  opacity: 0; transform: scale(.92);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1) .55s, opacity .3s ease .55s;
}
.punch__hl > span { background: linear-gradient(transparent 78%, rgba(var(--accent-rgb), .22) 78%, rgba(var(--accent-rgb), .22) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.punch.is-in, .punch.is-in .punch__hl { opacity: 1; transform: none; }
.punch--static, .punch--static .punch__hl { opacity: 1; transform: none; }

/* ---- notas */
.note {
  --c: var(--accent);
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--c);
  box-shadow: var(--sombra-cartao);
}
.note b { display: block; font-size: 17px; line-height: 1.25; margin-bottom: 4px; }
.note b:only-child { margin-bottom: 0; }
.note p { font-size: 15.5px; line-height: 1.45; color: var(--soft); }
.note--alert { --c: var(--red); background: linear-gradient(90deg, rgba(var(--red-rgb), .03), var(--panel) 60%); }
.note--alert b { color: var(--red); }
.note--good { --c: var(--green); background: linear-gradient(90deg, rgba(var(--green-rgb), .03), var(--panel) 60%); }
.note--good b { color: var(--green); }
.note[data-punch] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.note[data-punch].is-in { opacity: 1; transform: none; }

/* ============================================================
   PROVA (tela do quiz e grade da oferta)
   ============================================================ */
.prova-cap { position: relative; margin-top: 12px; font-size: 13px; font-weight: 700; text-align: center; }
.prova-cap::before { content: "💬 "; }
.prova-fala { position: relative; margin-top: 10px; max-width: 360px; padding: 12px 14px; border-radius: 12px 12px 12px 3px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sombra-cartao); font-size: 15px; line-height: 1.45; color: var(--soft); }

.proofs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.proofs__item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
.proofs__item {
  margin: 0;
  border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--sombra-cartao);
}
.proofs__item img { display: block; width: 100%; height: auto; }
.proofs__item .slot-prova { aspect-ratio: 1 / 2; border-radius: 0; border: 0; }
.proofs__item .slot-prova b { font-size: 18px; }
.proofs__item figcaption { padding: 8px 9px; font-size: 12.5px; font-weight: 700; line-height: 1.3; background: var(--panel); border-top: 1px solid var(--line); }
.proofs__item figcaption::before { content: "💬 "; }
.proofs__item figcaption small { display: block; margin-top: 4px; font-weight: 500; color: var(--muted); font-size: 12.5px; }
.prova__pend { margin: -10px 0 12px; text-align: center; font-size: 13px; }
.pv__h2 + .prova__pend { margin: 8px 0 12px; }

/* ============================================================
   CARREGAMENTO + DIAGNÓSTICO
   ============================================================ */
.diag__run { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 18px; }
.diag__run .q__title { margin: 0; }
.ring { position: relative; width: 132px; height: 132px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring circle:first-child { stroke: var(--bg-2); }
.ring__bar {
  stroke: var(--accent); stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p));
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .45));
}
.ring__n {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 36px;
  font-variant-numeric: tabular-nums;
}
.diag__steps { list-style: none; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.diag__steps li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-radius: 3px;
  background: var(--panel);
  border: 1px solid var(--line);
  opacity: .38;
  transition: opacity .3s ease, border-color .3s ease, background .3s ease;
}
.diag__steps li > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.diag__steps b { font-size: 15.5px; line-height: 1.25; }
.diag__steps small { font-size: 13.5px; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.diag__steps li.is-active { opacity: 1; border-color: rgba(var(--accent-rgb), .55); background: #eef2fc; }
.diag__steps li.is-done { opacity: 1; }
.diag__ic { position: relative; flex: none; width: 24px; height: 24px; margin-top: 1px; }
.diag__ic .spin { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: gira .8s linear infinite; }
.diag__ic svg {
  position: absolute; inset: 0; width: 24px; height: 24px; padding: 4px;
  border-radius: 50%; background: var(--green);
  fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.diag__steps li.is-done .spin { opacity: 0; }
.diag__steps li.is-done .diag__ic svg { transform: scale(1); }
@keyframes gira { to { transform: rotate(360deg); } }

.diag__res { display: flex; flex-direction: column; gap: 14px; }
.diag__res > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.diag__res.is-in > * { opacity: 1; transform: none; }
.diag__res.is-in > :nth-child(2) { transition-delay: .08s; }
.diag__res.is-in > :nth-child(3) { transition-delay: .2s; }
.diag__res.is-in > :nth-child(4) { transition-delay: .45s; }
.diag__res.is-in > :nth-child(5) { transition-delay: .7s; }
.diag__res.is-in > :nth-child(6) { transition-delay: .9s; }
.diag__res .q__title { margin: 0; }
.diag__tag {
  align-self: center;
  padding: 6px 14px; border-radius: 3px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .35);
}
.risk { padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.risk__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--soft); }
.risk__lvl { flex: none; padding: 4px 12px; border-radius: 3px; font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.risk__lvl--alto { color: #fff; background: var(--red); }
.risk__lvl--medio { color: #fff; background: var(--accent-2); }
.risk__lvl--baixo, .risk__lvl--moderado { color: #fff; background: var(--accent); }
.risk__bar { height: 12px; margin-top: 12px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.risk__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2) 55%, var(--red)); transition: width 1.4s cubic-bezier(.2, .8, .2, 1) .5s; }
.diag__res.is-in .risk__bar i { width: var(--w); }
.risk__time { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.finds { padding: 16px; border-radius: var(--radius); background: linear-gradient(180deg, #ffffff, #f8fafd); border: 1px solid var(--line); }
.finds ul { list-style: none; display: flex; flex-direction: column; }
.finds li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(20, 23, 28, .06); font-size: 15.5px; line-height: 1.4; }
.finds li:first-child { border-top: 0; padding-top: 2px; }
.finds__ic { flex: none; width: 30px; height: 30px; border-radius: 3px; display: grid; place-items: center; background: rgba(var(--red-rgb), .15); color: var(--red); }
.finds__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- a única tela no escuro: carregamento e diagnóstico */
body.escuro {
  --bg: #16171a; --bg-2: #1f2125; --panel: #26292e; --line: #3a3e45; --text: #f2efe8; --soft: #d4d0c7; --muted: #a9a59c;
  --accent: #ffc21a; --accent-dk: #c99400; --accent-2: #ff9f1a; --accent-rgb: 255, 194, 26;
  --cta: #22b85c; --cta-2: #1aa04e; --cta-dk: #127a3a; --cta-rgb: 34, 184, 92;
  --red: #ff5a3c; --red-rgb: 255, 90, 60; --green: #3ddc84; --green-rgb: 61, 220, 132;
  background:
    radial-gradient(120% 60% at 50% -10%, #2a2d33 0%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 64px),
    var(--bg);
}
body.escuro::after { opacity: .07; }
.escuro .ring circle:first-child { stroke: var(--panel); }
.escuro .diag__steps li.is-active { background: #2c2a22; }
.escuro .diag__ic svg { stroke: #0d2a19; }
.escuro .note p { color: #d4d0c7; }
.escuro .note--good { background: linear-gradient(90deg, rgba(61, 220, 132, .12), var(--panel) 60%); }
.escuro .note--good b { color: #5fe59a; }
.escuro .risk__lvl--medio { color: #141414; background: #ff9f1a; }
.escuro .risk__lvl--baixo, .escuro .risk__lvl--moderado { color: #141414; background: #ffc21a; }
.escuro .finds { background: linear-gradient(180deg, #24262b, #1d1f23); }
.escuro .finds li { border-top-color: rgba(255, 255, 255, .06); }
.escuro .finds__ic { background: rgba(255, 90, 60, .15); color: #ff7a5f; }
.escuro :is(.note, .finds, .risk, .diag__steps li) { box-shadow: none; }
:is(.risk, .finds, .diag__steps li) { box-shadow: var(--sombra-cartao); }

/* ============================================================
   DEMONSTRAÇÃO EM 3 PASSOS
   ============================================================ */
.how { display: flex; flex-direction: column; margin-top: 6px; }
.how__step { position: relative; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; padding-bottom: 34px; }
.how__step:last-child { padding-bottom: 8px; }
.how__step::before {
  content: "";
  position: absolute; left: 17px; top: 40px; bottom: 4px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(var(--accent), rgba(var(--accent-rgb), .15));
}
.how__n {
  position: relative; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 21px;
  color: var(--bg); background: var(--accent);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .14);
}
.how__body { position: relative; min-width: 0; padding-top: 2px; }
.how__eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.how__body h3 { font-size: 21px; line-height: 1.2; margin-top: 3px; }
.how__body p { font-size: 15px; color: var(--muted); line-height: 1.45; margin-top: 5px; }
.how__body p.how__ex { margin-top: 8px; padding: 8px 10px; border-radius: 3px; background: rgba(var(--accent-rgb), .08); border: 1px dashed rgba(var(--accent-rgb), .35); color: var(--soft); font-size: 14px; }
.how .shot { width: min(100%, 280px); margin: 16px 0 0; }
.how .rodape-ilustra { margin-top: 0; }

/* ============================================================
   PÁGINA DE OFERTA
   ============================================================ */
.pv { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.pv__bar { display: flex; align-items: center; gap: 10px; margin-bottom: -4px; }
.pv__hero { display: flex; flex-direction: column; gap: 18px; }
.pv__h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 8vw, 36px); line-height: 1.04;
  text-transform: uppercase; text-align: center; text-wrap: balance;
}
.pv__h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 7.6vw, 34px); line-height: 1.05;
  text-transform: uppercase; text-align: center; text-wrap: balance;
  margin-top: 14px;
}
.pv__hero .shot-wrap { margin: 0 0 6px; }
.pv__txt { text-align: center; font-size: 16.5px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.pv__txt b { color: var(--text); }

/* cartões dos 3 blocos */
.perks { display: flex; flex-direction: column; gap: 12px; }
.perk {
  --a: var(--accent); --a-bg: rgba(var(--accent-rgb), .12);
  position: relative; overflow: hidden;
  padding: 18px;
  border-radius: 3px;
  background: radial-gradient(120% 80% at 100% 0%, var(--a-bg), transparent 55%), linear-gradient(180deg, #ffffff, #f8fafd);
  border: 1px solid var(--line);
  box-shadow: var(--sombra-cartao);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.perk--g { --a: var(--green); --a-bg: rgba(var(--green-rgb), .13); }
.perk--b { --a: #1e46b8; --a-bg: rgba(30, 70, 184, .14); }
.perks.is-in .perk { opacity: 1; transform: none; }
.perks.is-in .perk:nth-child(2) { transition-delay: .12s; }
.perks.is-in .perk:nth-child(3) { transition-delay: .24s; }
.perk__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.perk__stat { font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: .85; color: var(--a); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; text-transform: uppercase; }
.perk__stat small { font-size: 22px; letter-spacing: .02em; }
.perk__stat--word { font-size: 46px; }
.perk__ic { flex: none; width: 46px; height: 46px; border-radius: 3px; display: grid; place-items: center; color: var(--a); background: var(--a-bg); border: 1px solid rgba(20, 23, 28, .08); }
.perk__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.perk h3 { font-size: 20px; line-height: 1.2; margin-top: 12px; }
.perk__pdf { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 3px; background: #e9f5ee; border: 1px solid rgba(19, 131, 74, .25); }
.perk__pdf i { font-style: normal; width: 34px; height: 40px; border-radius: 4px; display: grid; place-items: end center; padding-bottom: 4px; font-size: 9px; font-weight: 800; color: #fff; background: #d2373c; }
.perk__pdf b { flex: 1; font-size: 14px; font-weight: 600; }
.perk__pdf em { font-style: normal; font-weight: 800; color: #34a3e0; letter-spacing: -.12em; }
.perk__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.perk__chips span { padding: 6px 11px; border-radius: 3px; font-size: 13.5px; font-weight: 600; background: rgba(30, 70, 184, .1); border: 1px solid rgba(30, 70, 184, .3); color: #1e46b8; }
.perk__chips .more { background: transparent; border-style: dashed; color: var(--muted); }

/* entrada comum das listas da oferta */
.vs > *, .pains li, .numbered li, .feats li, .box li { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.vs.is-in > *, .pains.is-in li, .numbered.is-in li, .feats.is-in li, .box.is-in li { opacity: 1; transform: none; }
:is(.pains, .numbered, .feats ul, .box ul) li:nth-child(2), .vs > :nth-child(2) { transition-delay: .1s; }
:is(.pains, .numbered, .feats ul, .box ul) li:nth-child(3) { transition-delay: .2s; }
:is(.pains, .numbered, .feats ul, .box ul) li:nth-child(4) { transition-delay: .3s; }
:is(.pains, .numbered, .feats ul, .box ul) li:nth-child(5) { transition-delay: .4s; }
:is(.pains, .feats ul, .box ul) li:nth-child(6) { transition-delay: .5s; }
.feats ul li:nth-child(7) { transition-delay: .6s; }
.feats ul li:nth-child(8) { transition-delay: .7s; }

/* sem × com */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vs__col { min-width: 0; border-radius: var(--radius); padding: 14px 12px; border: 1px solid var(--line); box-shadow: var(--sombra-cartao); }
.vs__col--bad { background: linear-gradient(180deg, rgba(210, 55, 60, .07), var(--panel) 40%); border-color: rgba(210, 55, 60, .35); }
.vs__col--good { background: linear-gradient(180deg, rgba(19, 131, 74, .07), var(--panel) 40%); border-color: rgba(19, 131, 74, .4); }
.vs__h { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 10px; font-family: var(--font-display); font-weight: 900; font-size: 20px; text-transform: uppercase; line-height: 1; }
.vs__col--bad .vs__h { color: #d2373c; }
.vs__col--good .vs__h { color: #13834a; }
.vs ul { list-style: none; display: flex; flex-direction: column; }
.vs li { font-size: 13.5px; line-height: 1.3; padding: 7px 0; border-top: 1px solid rgba(20, 23, 28, .06); overflow-wrap: break-word; }
.vs li:first-child { border-top: 0; }
.vs__col--bad li { color: #5a616c; text-decoration: line-through; text-decoration-color: rgba(210, 55, 60, .6); }
.vs__col--good li { color: #14171c; font-weight: 600; }

/* cenas de dor */
.pains { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pains li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 3px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sombra-cartao); font-size: 16px; font-weight: 600; line-height: 1.3; }
.pains__e { flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-size: 22px; border-radius: 3px; background: var(--bg-2); }

/* virada */
.turn { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 26px; text-align: center; }
.turn p { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 7vw, 30px); line-height: 1.05; text-transform: uppercase; color: var(--muted); }
.turn i { width: 2px; height: 34px; position: relative; background: linear-gradient(transparent, var(--accent)); animation: desce 1.6s ease-in-out infinite; }
.turn i::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
@keyframes desce { 0%, 100% { transform: translateY(-4px); opacity: .6; } 50% { transform: translateY(4px); opacity: 1; } }
.turn + .pv__h2 { margin-top: 0; }

/* lista numerada */
.numbered { padding: 18px 16px 8px; border-radius: var(--radius); background: linear-gradient(180deg, #ffffff, #f8fafd); border: 1px solid var(--line); box-shadow: var(--sombra-cartao); }
.numbered ol { list-style: none; }
.numbered li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(20, 23, 28, .06); font-size: 17px; font-weight: 700; line-height: 1.25; }
.numbered li:first-child { border-top: 0; }
.numbered i { font-style: normal; flex: none; width: 44px; font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 1; color: var(--red); }

/* conheça */
.meet { padding: 22px 18px; border-radius: var(--radius); text-align: center; background: linear-gradient(180deg, #eef2fc, #f8fafd); border: 1px solid rgba(30, 70, 184, .35); box-shadow: var(--sombra-cartao); }
.meet__tag { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.meet .pv__h2 { margin-top: 2px; color: var(--accent); }
.meet__lead { margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.1; text-transform: uppercase; color: var(--text); text-wrap: balance; }
.meet > p.meet__sub { margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--soft); font-weight: 600; }
.meet__steps { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; text-align: left; }
.meet__steps li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-radius: 3px; background: var(--panel); font-size: 15.5px; line-height: 1.35; color: var(--soft); }
.meet__steps li b { color: var(--text); }
.meet__steps i { flex: none; font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; color: #fff; background: var(--accent); }

/* recursos */
.feats ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.feats li { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border-radius: 3px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sombra-cartao); font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.feats li.feats__wide { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 12px; }
.feats__ic { flex: none; width: 38px; height: 38px; border-radius: 3px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.feats__ic svg, .box__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* pagamento */
.nofee { padding: 22px 18px; text-align: center; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sombra-cartao); margin-top: 10px; }
.nofee__k { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.nofee__big { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 8.4vw, 38px); line-height: 1.02; text-transform: uppercase; margin: 10px 0 12px; }
.nofee__big s { color: var(--muted); text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.nofee__big span { color: var(--accent); }
.nofee p:last-child { font-size: 16px; line-height: 1.45; color: var(--soft); }

/* o que recebe */
.box { padding: 18px 16px 10px; border-radius: var(--radius); background: var(--panel); border: 1px dashed rgba(30, 70, 184, .45); box-shadow: var(--sombra-cartao); }
.box ul { list-style: none; }
.box li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(20, 23, 28, .06); font-size: 16px; font-weight: 600; line-height: 1.3; }
.box li:first-child { border-top: 0; }
.box li > span:nth-child(2) { flex: 1; min-width: 0; }
.box__ic { flex: none; width: 38px; height: 38px; border-radius: 3px; display: grid; place-items: center; color: var(--text); background: var(--bg-2); }
.box em { flex: none; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }

/* caixa da oferta (o bloco mais forte) */
.offer {
  position: relative; text-align: center;
  padding: 26px 18px 20px; margin-top: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #e8eefc, #ffffff 46%);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 8px rgba(30, 70, 184, .13), 0 34px 64px -24px rgba(30, 70, 184, .55), 0 10px 22px -12px rgba(20, 23, 28, .25);
}
.offer__price { font-family: var(--font-display); font-weight: 900; font-size: 72px; line-height: 1; color: var(--accent); margin: 4px 0; }
.offer__once { font-size: 14px; font-weight: 600; color: var(--muted); }
.offer .btn { margin-top: 6px; }

/* âncora */
.fracao { margin: 20px 0 18px; text-align: left; }
.fracao__t { margin-bottom: 12px; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.05; text-transform: uppercase; text-align: center; color: var(--text); text-wrap: balance; }
.fracao__t em { font-style: normal; color: var(--accent); }
.fracao__lin { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 3px; font-size: 14.5px; font-weight: 600; color: var(--soft); background: #dfe4ec; }
.fracao__lin + .fracao__lin { margin-top: 6px; }
.fracao__lin span:last-child { text-align: right; }
.fracao__lin--app { background: var(--accent); color: #fff; }
.fracao__txt { margin-top: 12px; font-size: 15.5px; line-height: 1.4; text-align: center; color: var(--text); }
.fracao__ref { margin-top: 8px; font-size: 12.5px; line-height: 1.35; text-align: center; color: var(--muted); font-style: italic; }

/* garantia */
.guarantee { text-align: center; padding: 24px 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sombra-cartao); margin-top: 10px; }
.guarantee p { font-size: 15.5px; line-height: 1.55; color: var(--soft); margin-top: 14px; }
.guarantee .garantia__pend { margin-top: 12px; }
.seal {
  width: 150px; height: 150px; margin: 0 auto 26px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 4px;
  color: var(--text);
  background: radial-gradient(closest-side, #ffffff 86%, transparent 87%), conic-gradient(from 0deg, #5b7fdc, #1e46b8, #5b7fdc, #1e46b8, #5b7fdc);
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px #5b7fdc;
}
.seal b { font-family: var(--font-display); font-weight: 900; font-size: 50px; line-height: .85; }
.seal span { font-family: var(--font-display); font-weight: 900; font-size: 17px; line-height: 1.1; text-transform: uppercase; color: var(--accent); }
.seal small { max-width: 96px; text-align: center; font-size: 8.5px; line-height: 1.2; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.guarantee .seal + mark.pend { display: inline-block; margin-top: -14px; }

/* perguntas */
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq__item { border-radius: 3px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sombra-cartao); overflow: hidden; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 16px; font-weight: 700; font-size: 16px; line-height: 1.3; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-size: 22px; font-weight: 600; color: var(--accent); transition: transform .2s ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq__item p { padding: 0 16px 16px; font-size: 15px; line-height: 1.5; color: #4a515c; }

.pv__close { text-align: center; font-size: 17px; line-height: 1.5; color: var(--soft); }
.pv__fim { margin-top: -6px; text-align: center; font-size: 13.5px; color: var(--muted); }

/* aviso do checkout ainda não definido (só no rascunho) */
.aviso {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0;
  width: min(92vw, 420px);
  padding: 12px 14px; border-radius: 4px;
  background: #14171c; color: #fff; font-size: 14px; line-height: 1.35; text-align: center;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.aviso.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   DEMONSTRAÇÃO DO APP (celular animado, tela ilustrativa)
   Os takes e os tempos seguem a linha do tempo da referência: gravando → confira o orçamento (itens entrando,
   item e total saltando) → gerar PDF → tela do PDF gerado → enviar → folha do PDF sobe e rola → aprovação.
   Tudo em cqw (largura da tela do celular): a animação é a mesma em qualquer largura.
   ============================================================ */
.app-demo { position: relative; width: 100%; height: 100%; container-type: inline-size; }
.dm { position: absolute; inset: 0; overflow: hidden; border-radius: 25px; background: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #1c1c1e; line-height: 1.2; }
.dm__v { position: absolute; inset: 0; background: #ffffff; transform-origin: 50% 50%; }
.dm__v[data-v="orc"], .dm__v[data-v="pdf"] { visibility: hidden; }
.dm__veu { position: absolute; inset: 0; z-index: 6; background: #14171c; opacity: 0; pointer-events: none; }
.dm svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* topo das telas (como nas capturas do app: título no meio, voltar à esquerda, lápis à direita) */
.dm-bar { position: absolute; left: 0; right: 0; top: 0; height: 15cqw; display: flex; align-items: center; justify-content: center; padding-top: 1.6cqw; background: #fff; }
.dm-bar__b, .dm-bar__l { position: absolute; top: 4.2cqw; width: 6cqw; height: 6cqw; color: #1c1c1e; }
.dm-bar__b { left: 5cqw; } .dm-bar__l { right: 5cqw; }
.dm-bar__b svg, .dm-bar__l svg { width: 100%; height: 100%; stroke-width: 2.2; }
.dm-bar__t { display: flex; flex-direction: column; align-items: center; gap: .6cqw; }
.dm-bar__t b { font-size: 4.3cqw; font-weight: 600; }
.dm-bar__t small { font-size: 3cqw; color: #6e6e73; }
.dm-x { position: absolute; left: 4.4cqw; right: 4.4cqw; }
.dm-x[data-e] { opacity: 0; }
.dm-tit { display: flex; align-items: center; justify-content: space-between; height: 10cqw; border-bottom: 1px solid #e5e5ea; }
.dm-tit b { font-size: 6cqw; font-weight: 500; letter-spacing: -.01em; }
.dm-tit i { width: 5cqw; height: 5cqw; color: #3a3a3c; } .dm-tit svg { width: 100%; height: 100%; }
.dm-cli { height: 14cqw; display: flex; align-items: center; gap: 3cqw; border-bottom: 1px solid #e5e5ea; }
.dm-av { flex: none; width: 10.4cqw; height: 10.4cqw; border-radius: 50%; display: grid; place-items: center; background: #f0f0f3; font-style: normal; font-size: 3.8cqw; color: #3a3a3c; }
.dm-cli span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .6cqw; }
.dm-cli b { font-size: 4.2cqw; font-weight: 500; }
.dm-cli small { font-size: 3.3cqw; color: #6e6e73; white-space: nowrap; }
.dm-cli em { font-style: normal; color: #d93a3a; }
.dm-chev { flex: none; width: 4.4cqw; height: 4.4cqw; color: #8e8e93; } .dm-chev svg { width: 100%; height: 100%; }
.dm-sec { height: 7.5cqw; display: flex; align-items: center; justify-content: space-between; font-size: 4.2cqw; font-weight: 500; }
.dm-sec em { font-style: normal; font-size: 4cqw; font-weight: 500; opacity: 0; font-variant-numeric: tabular-nums; }
.dm-row { height: 12.4cqw; display: flex; align-items: center; gap: 2cqw; background: #fff; border-bottom: 1px solid #ececf0; }
.dm-row__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5cqw; }
.dm-row__t b { font-size: 3.8cqw; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row__t small { font-size: 3.2cqw; color: #6e6e73; white-space: nowrap; }
.dm-step { flex: none; display: flex; align-items: center; justify-content: space-between; width: 26cqw; height: 8.6cqw; padding: 0 2cqw; border-radius: 2.2cqw; background: #f1f1f4; }
.dm-step i { width: 4.6cqw; height: 4.6cqw; display: grid; place-items: center; color: #3a3a3c; font-style: normal; font-size: 4.4cqw; line-height: 1; }
.dm-step i svg { width: 4.2cqw; height: 4.2cqw; stroke-width: 1.8; }
.dm-step b { font-size: 3.8cqw; font-weight: 500; font-variant-numeric: tabular-nums; }
.dm-add { height: 9cqw; display: flex; align-items: center; gap: 2.4cqw; font-size: 3.8cqw; font-weight: 500; color: #2346c9; }
.dm-add b { font-size: 5.6cqw; font-weight: 400; line-height: 1; }
.dm-pe { position: absolute; left: 0; right: 0; bottom: 0; height: 22cqw; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 0 4.4cqw 2cqw; background: #f5f4f7; border-top: 1px solid #e5e5ea; }
.dm-total { display: flex; flex-direction: column; gap: .4cqw; opacity: 0; }
.dm-total small { font-size: 3.2cqw; color: #6e6e73; }
.dm-total b { font-size: 6.2cqw; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dm-gerar { position: relative; flex: none; height: 12.6cqw; padding: 0 5cqw; display: flex; align-items: center; gap: 2cqw; border-radius: 2.8cqw; background: #2346c9; color: #fff; font-size: 4.4cqw; font-weight: 600; white-space: nowrap; }
.dm-toque, .dm-anel { position: absolute; left: 50%; top: 50%; width: 11.8cqw; height: 11.8cqw; margin: -5.9cqw 0 0 -5.9cqw; border-radius: 50%; opacity: 0; z-index: 3; pointer-events: none; }
.dm-toque { background: rgba(20, 23, 28, .26); box-shadow: 0 0 0 1.5cqw rgba(20, 23, 28, .07); }
.dm-anel { border: .5cqw solid rgba(20, 23, 28, .42); }
/* tela do orçamento (com o andamento) */
.dm-falta { font-size: 3.6cqw; color: #d93a3a; }
.dm-orc-tit { font-size: 6cqw; font-weight: 500; letter-spacing: -.01em; }
.dm-preco { display: flex; align-items: baseline; gap: 1.2cqw; }
.dm-preco small { font-size: 4.6cqw; }
.dm-preco b { font-size: 10.6cqw; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dm-cli--orc { height: 15cqw; }
.dm-env { height: 16cqw; display: flex; align-items: center; gap: 3cqw; border-bottom: 1px solid #e5e5ea; }
.dm-env span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .6cqw; }
.dm-env b { font-size: 4.2cqw; font-weight: 500; }
.dm-env small { font-size: 3.2cqw; color: #6e6e73; white-space: nowrap; }
.dm-docic { flex: none; width: 10.4cqw; height: 10.4cqw; display: grid; place-items: center; color: #3a3a3c; } .dm-docic svg { width: 6.2cqw; height: 6.2cqw; stroke-width: 1.7; }
.dm-and { display: flex; justify-content: space-between; align-items: center; height: 7cqw; }
.dm-and b { font-size: 4.3cqw; font-weight: 500; } .dm-and span { font-size: 3.6cqw; color: #6e6e73; }
.dm-linha { position: absolute; left: 9.6cqw; width: 0; border-left: .5cqw dashed #c7c7cc; }
.dm-et { display: flex; align-items: flex-start; gap: 3cqw; color: #8e8e93; }
.dm-et.is-on { color: #1c1c1e; }
.dm-et__ic { flex: none; position: relative; z-index: 1; width: 10.4cqw; height: 10.4cqw; border-radius: 50%; display: grid; place-items: center; background: #fff; border: .5cqw solid #c7c7cc; color: #8e8e93; }
.dm-et.is-on .dm-et__ic { border-color: #3a3a3c; color: #3a3a3c; }
.dm-et.is-feita .dm-et__ic { background: #636366; border-color: #636366; color: #fff; box-shadow: 0 0 0 .9cqw #fff, 0 0 0 1.4cqw #c7c7cc; }
.dm-et__ic svg { width: 5cqw; height: 5cqw; stroke-width: 1.8; }
.dm-et span { display: flex; flex-direction: column; gap: .8cqw; padding-top: 2.4cqw; }
.dm-et b { font-size: 4cqw; font-weight: 500; }
.dm-et small { font-size: 3.2cqw; color: #6e6e73; }
.dm-chip { display: inline-flex; align-items: center; gap: 1.4cqw; align-self: flex-start; margin-top: 1.4cqw; padding: 1.6cqw 3.2cqw; border-radius: 3cqw; background: #ebebef; font-style: normal; font-size: 3.4cqw; color: #1c1c1e; }
.dm-chip svg { width: 3.6cqw; height: 3.6cqw; stroke-width: 2.4; }
.dm-pe--orc { flex-direction: column; justify-content: center; gap: 2.4cqw; height: 26cqw; padding: 2.4cqw 4.4cqw 3cqw; background: #f5f4f7; }
.dm-enviar { width: 100%; height: 12.6cqw; display: flex; align-items: center; justify-content: center; gap: 2.2cqw; border-radius: 2.8cqw; background: #2fcf5f; color: #10331c; font-size: 4.4cqw; font-weight: 500; }
.dm-enviar svg { width: 5.4cqw; height: 5.4cqw; stroke-width: 1.9; }
.dm-pe--orc small { font-size: 3.2cqw; color: #3a3a3c; text-decoration: underline; text-underline-offset: .6cqw; }
/* a folha do PDF que sobe e rola (como o pdf.webp do app do dono) */
.dm-folha { bottom: auto; min-height: 100%; background: #fff; box-shadow: 0 -1cqw 5cqw rgba(20, 23, 28, .14); z-index: 4; overflow: hidden; }
.dm-folha__faixa { display: block; height: 2.4cqw; background: #2346c9; }
.dm-folha__c { display: flex; flex-direction: column; padding: 5cqw 7cqw 6cqw; }
.dm-folha__nome { font-size: 5.3cqw; font-weight: 700; }
.dm-folha__dados { margin-top: 1.2cqw; font-size: 2.7cqw; line-height: 1.35; color: #6e6e73; }
.dm-folha__num { display: flex; justify-content: space-between; align-items: center; margin-top: 4cqw; padding: 2.4cqw 3cqw; border-radius: 1.4cqw; background: #f2f2f5; font-size: 3.2cqw; }
.dm-folha__num b { font-weight: 700; } .dm-folha__num span { color: #6e6e73; }
.dm-folha__tit { margin-top: 4cqw; font-size: 4.8cqw; font-weight: 700; }
.dm-folha__k { font-size: 2.7cqw; color: #6e6e73; }
.dm-folha__tit + .dm-folha__k { margin-top: 3cqw; }
.dm-folha__cli { font-size: 3.6cqw; font-weight: 700; margin: .6cqw 0 .4cqw; }
.dm-folha__med { margin-top: 3cqw; padding: 2cqw 2.6cqw; border-radius: 1.4cqw; background: #eef2fc; color: #183a99; font-size: 2.9cqw; line-height: 1.4; font-weight: 600; }
.dm-folha__sec { margin-top: 4cqw; padding: 2cqw 3cqw; border-radius: 1.4cqw 1.4cqw 0 0; background: #f2f2f5; font-size: 3.3cqw; font-weight: 700; }
.dm-folha table { width: 100%; border-collapse: collapse; font-size: 3.2cqw; }
.dm-folha td { padding: 2.1cqw 3cqw; border-bottom: 1px solid #ececf0; vertical-align: top; }
.dm-folha td b { display: block; font-weight: 600; }
.dm-folha td small { display: block; margin-top: .4cqw; font-size: 2.7cqw; color: #6e6e73; }
.dm-folha td:last-child { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-folha tr.sub td { border-bottom: 0; color: #6e6e73; font-weight: 500; }
.dm-folha tr.sub td:last-child { color: #1c1c1e; font-weight: 700; }
.dm-folha__total { margin-top: 3cqw; display: flex; justify-content: space-between; align-items: center; padding: 3.4cqw 4cqw; border-radius: 1.8cqw; background: #2346c9; color: #fff; }
.dm-folha__total span { font-size: 3.6cqw; font-weight: 700; } .dm-folha__total b { font-size: 5.4cqw; font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-folha__val { margin-top: 4.4cqw; }
.dm-folha__txt { margin-top: .8cqw; font-size: 3cqw; line-height: 1.4; }
.dm-folha__hr { display: block; height: 1px; margin: 5cqw 0 4cqw; background: #e5e5ea; }
.dm-folha__aprovar { height: 10cqw; display: grid; place-items: center; border-radius: 1.8cqw; background: #6ed37f; font-size: 3.8cqw; font-weight: 600; color: #10331c; }
.dm-folha__rodape { margin-top: 2.4cqw; text-align: center; font-size: 2.6cqw; color: #6e6e73; }
.dm-folha__feito { margin-top: 2cqw; text-align: center; font-size: 2.2cqw; color: #8e8e93; }

/* o que sai do celular (fica fora dele: o celular recua e desfoca, isto não) */
.dm-pop { position: absolute; pointer-events: none; z-index: 4; container-type: inline-size; font-family: var(--font-body); color: #14171c; line-height: 1.25; }
.dm-audio {
  position: absolute; left: -6%; right: -6%; top: 2.5%;
  padding: 3.4cqw 4.2cqw 3.8cqw;
  border-radius: 4.5cqw; background: #fff; border: 1px solid #dde2ea;
  box-shadow: 0 .5cqw 1.5cqw rgba(20, 23, 28, .12), 0 6.7cqw 12.3cqw -3.6cqw rgba(20, 23, 28, .4);
  opacity: 0; visibility: hidden;
}
.dm-audio__top { display: flex; align-items: center; gap: 2.4cqw; font-size: 4.4cqw; line-height: 1.2; }
.dm-audio__top b { font-weight: 600; }
.dm-audio__top em { margin-left: auto; font-style: normal; font-weight: 600; color: #5a616c; font-variant-numeric: tabular-nums; }
.dm-audio__mic { width: 7.6cqw; height: 7.6cqw; border-radius: 50%; display: grid; place-items: center; background: #1e46b8; }
.dm-audio__mic svg { width: 4.2cqw; height: 4.2cqw; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.dm-audio__onda { display: flex; align-items: center; gap: 1cqw; height: 8.5cqw; margin: 2.2cqw 0 2.4cqw; }
.dm-audio__onda i { flex: 1; height: 100%; border-radius: 1cqw; background: #1e46b8; }
.dm-audio__txt { position: relative; font-size: 4.4cqw; line-height: 1.38; font-weight: 500; }
.dm-audio__fantasma { visibility: hidden; }
.dm-audio__fala { position: absolute; inset: 0; }
.dm-msg {
  position: absolute; right: -10%; bottom: 8%; width: 80%;
  display: flex; flex-direction: column; gap: 1cqw;
  padding: 3.2cqw 3.8cqw; border-radius: 4.2cqw 4.2cqw 1.2cqw 4.2cqw;
  background: #fff; border: 1px solid #dde2ea;
  font-size: 4.2cqw; line-height: 1.35; font-weight: 500; opacity: 0;
}
.dm-msg b { font-size: 3.6cqw; font-weight: 600; color: #5a616c; }
.how .dm-msg { right: -3%; }
.how .dm-audio { left: -4%; right: -4%; }
/* cópia do item que salta da tela */
.dm-salta { position: absolute; visibility: hidden; }
.dm-salta__f { width: 100%; height: 100%; display: flex; align-items: center; border-radius: 2.6cqw; background: #fff; }
.dm-salta__f > * { flex: 1; min-width: 0; opacity: 1 !important; }

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .btn--pulse, .btn--pulse::after, .turn i, .diag__ic .spin { animation: none; }
  .checks li, .checks__ok, .punch, .punch__hl, .note[data-punch], .perk, .vs > *, .pains li, .numbered li, .feats li, .box li, .diag__res > * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .checks__ok path { stroke-dashoffset: 0 !important; transition: none !important; }
  .risk__bar i { transition: none; }
  .ba svg * { animation: none !important; }
}


/* ============================================================
   O APLICATIVO, DO JEITO DO AR (mistura pedida pelo dono, 27/10)
   Copiado do style.css do Ar no Preço Certo (ref-ar/css/style.css): o celular da demonstração e a história do topo
   da oferta. Só os nomes do celular mudam (.shot → .arshot, .demo → .ardemo), para não bater no celular do Eletricista.
   As variáveis de cor do Ar ficam presas a estes blocos.
   ============================================================ */
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("fonts/poppins-800.woff2") format("woff2"); }
.arshot-wrap, .story {
  --ink: #0b1b3a; --muted: #56688a; --line: #dbe5f6; --green: #16a34a;
  --shadow: 0 10px 30px -12px rgba(2, 53, 143, .28), 0 2px 6px rgba(11, 27, 58, .06);
}

/* celular da demonstração (igual ao do Ar) */
.arshot-wrap { position: relative; margin: 6px 0 4px; padding: 8px 0 6px; background: radial-gradient(50% 50% at 50% 50%, #bfeef1 0%, rgba(207, 224, 255, 0) 70%); }
.arshot {
  position: relative; width: min(300px, 84%, max(150px, calc((100vh - 252px) * .439))); width: min(300px, 84%, max(150px, calc((100svh - 252px) * .439))); margin: 0 auto; aspect-ratio: 390 / 888;
  border: 9px solid #0b1b3a; border-radius: 38px; background: #f4f7ff; overflow: hidden;
  container-type: inline-size; box-shadow: 0 30px 50px -24px rgba(11, 27, 58, .55);
}
.arshot::before { content: ""; position: absolute; z-index: 5; top: 5px; left: 50%; width: 28%; height: 13px; transform: translateX(-50%); background: #0b1b3a; border-radius: 99px; }
.arshot--sm { width: min(270px, 84%, max(190px, calc((100vh - 140px) * .439))); width: min(270px, 84%, max(190px, calc((100svh - 140px) * .439))); margin: 16px auto 0; }
.ardemo { position: absolute; inset: 0; }
.ardemo__app { position: absolute; top: 0; left: 0; width: 390px; height: 844px; border: 0; transform-origin: 0 0; pointer-events: none; background: #f4f7ff; }
.arshot-wrap + .checks { margin-top: 18px; }
.how .arshot--sm { margin: 16px auto 0; }

/* história do topo da oferta (js/historia.js), igual à do Ar: 5 cenas com zoom lento e os cartões do app por cima */
.story { position: relative; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow); border: 4px solid #fff; background: #dfe9fb; container-type: inline-size; font-family: "Poppins", system-ui, -apple-system, sans-serif; font-weight: 500; color: var(--ink); line-height: 1.45; text-transform: none; letter-spacing: 0; }
.story img { display: block; max-width: none; }
.story b { font-weight: 700; }
.ht { position: absolute; inset: 0; overflow: hidden; font-size: clamp(12px, 4.2cqw, 14.5px); }
.ht::after { content: ""; position: absolute; inset: 0; background: #eaf2ff; opacity: 0; pointer-events: none; transition: opacity .45s; z-index: 9; }
.ht.fim::after { opacity: 1; }

.ht__cena { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.ht__cena img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--o, 50% 50%); }
.ht__c1 { --o: 35% 45%; } .ht__c2 { --o: 40% 35%; } .ht__c3 { --o: 50% 40%; } .ht__c4 { --o: 70% 25%; } .ht__c5 { --o: 50% 35%; }
.ht.f1 .ht__c1, .ht.f2 .ht__c2, .ht.f3 .ht__c3, .ht.f4 .ht__c4, .ht.f5 .ht__c5 { opacity: 1; }
.ht.f1 .ht__c1 img, .ht.f3 .ht__c3 img, .ht.f5 .ht__c5 img { animation: cam 4.4s ease-out forwards; }
.ht.f2 .ht__c2 img { animation: camin 4.4s ease-out forwards; }
.ht.f4 .ht__c4 img { animation: campan 3.2s ease-in-out forwards; }
@keyframes cam { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes camin { from { transform: scale(1.04); } to { transform: scale(1.14); } }
@keyframes campan { from { transform: scale(1.12) translateY(3%); } to { transform: scale(1.04) translateY(0); } }

.ht__balao, .ht__mic, .ht__grav, .ht__orc, .ht__noti, .ht__zap, .ht__status, .ht__selo { position: absolute; z-index: 2; opacity: 0; transition: opacity .35s, transform .5s cubic-bezier(.2, 1.4, .4, 1); }

.ht__balao {
  left: var(--b-x, 5%); top: var(--b-y, 20%); max-width: 46%; background: #fff; color: var(--ink); font-weight: 800; font-size: 1.05em; line-height: 1.2;
  padding: .6em .9em; border-radius: 1.1em; box-shadow: 0 .8em 1.6em -.6em rgba(11, 27, 58, .45); transform: translateY(.6em) scale(.85); transform-origin: 20% 100%;
}
.ht__balao::after { content: ""; position: absolute; left: 2.4em; bottom: -.55em; border: .6em solid transparent; border-top-color: #fff; border-bottom: 0; }
.ht.balao .ht__balao { opacity: 1; transform: none; }

.ht__mic { left: var(--mic-x, 56%); top: var(--mic-y, 30%); display: flex; align-items: center; gap: .3em; transform: scale(.6); }
.ht__mic b { width: 3.6em; height: 3.6em; border-radius: 50%; display: grid; place-items: center; border: .22em solid #3fe6f0; background: rgba(2, 53, 143, .35); box-shadow: 0 0 1.2em #01c6ce, inset 0 0 .8em rgba(1, 198, 206, .7); }
.ht__mic svg { width: 52%; height: 52%; fill: none; stroke: #c9fbff; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 .25em #01c6ce); }
.ht__onda { display: flex; align-items: center; gap: .18em; height: 2.6em; }
.ht__onda i { width: .24em; height: var(--h); border-radius: 99px; background: #7ff3f8; box-shadow: 0 0 .5em #01c6ce; animation: wave .55s var(--d) ease-in-out infinite alternate; }
.ht.mic .ht__mic { opacity: 1; transform: none; }
.ht__grav { left: var(--mic-x, 56%); top: calc(var(--mic-y, 30%) + 4.4em); display: flex; align-items: center; gap: .4em; white-space: nowrap; font-size: .86em; font-weight: 700; color: #fff; background: rgba(11, 27, 58, .72); padding: .35em .75em; border-radius: 99px; margin-left: .6em; transform: translateY(.4em); }
.ht__grav i { width: .55em; height: .55em; border-radius: 50%; background: #ff4d4d; animation: blink 1s infinite; }
.ht.mic .ht__grav { opacity: 1; transform: none; }
.ht.orc .ht__mic, .ht.orc .ht__grav { opacity: .0; }

.ht__orc { right: 3%; top: 4%; width: 50%; transform: translateY(-.6em) rotate(8deg) scale(.8); filter: drop-shadow(0 1em 1.2em rgba(11, 27, 58, .35)); }
.ht.orc .ht__orc { opacity: 1; transform: rotate(4deg); }
.ht__orc-top { display: flex; align-items: center; gap: .45em; background: #02358f; color: #fff; font-weight: 800; font-size: .95em; padding: .55em .7em; border-radius: .7em .7em 0 0; }
.ht__orc-top img { width: 1.6em; height: 1.6em; border-radius: .35em; }
.ht__orc-body { background: #fff; padding: .6em .75em 1.1em; border-radius: 0 0 .2em .2em;
  -webkit-mask: radial-gradient(.45em at 50% 100%, #0000 98%, #000) 50% / .9em 100%; mask: radial-gradient(.45em at 50% 100%, #0000 98%, #000) 50% / .9em 100%; }
.ht__orc-body span { display: block; color: #02358f; font-weight: 700; font-size: .9em; padding-bottom: .45em; border-bottom: 1.5px solid #dbe5f6; }
.ht__orc-body small { display: block; margin-top: .45em; font-size: .74em; font-weight: 800; color: var(--muted); letter-spacing: .06em; }
.ht__orc-body b { display: block; font-size: 1.65em; font-weight: 800; color: #02358f; line-height: 1.05; }

.ht__noti {
  left: 4%; right: 4%; top: 4%; display: flex; align-items: center; gap: .65em; padding: .65em .75em; border-radius: 1.2em;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 .8em 1.8em -.8em rgba(11, 27, 58, .5); transform: translateY(-130%);
}
.ht__noti img { width: 2.5em; height: 2.5em; border-radius: .6em; border: 1px solid var(--line); background: #fff; flex: none; }
.ht__noti span { min-width: 0; }
.ht__noti small { display: block; font-size: .74em; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.ht__noti b { display: block; font-size: .95em; line-height: 1.25; }
.ht__noti em { display: block; font-style: normal; font-size: .86em; font-weight: 700; color: #02358f; }
.ht.noti .ht__noti { opacity: 1; transform: none; }
.ht__zap {
  right: 5%; bottom: 9%; max-width: 70%; background: #d9fdd3; color: #0b5132; font-weight: 800; font-size: .95em; line-height: 1.25;
  padding: .6em .8em; border-radius: 1em 1em .25em 1em; box-shadow: 0 .8em 1.6em -.6em rgba(11, 27, 58, .45); transform: scale(.6); transform-origin: 100% 100%;
}
.ht__zap em { font-style: normal; color: #34b7f1; font-size: .8em; margin-left: .4em; }
.ht.zap .ht__zap { opacity: 1; transform: none; }

.ht__status { left: var(--st-x, 70%); top: var(--st-y, 6%); width: 3em; height: 3em; margin-left: -1.5em; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 .6em 1.2em -.6em rgba(11, 27, 58, .5); transform: scale(.6); }
.ht__spin { width: 64%; height: 64%; border-radius: 50%; border: .3em solid #cdeff1; border-top-color: #01c6ce; animation: spin .8s linear infinite; }
.ht__status svg { display: none; width: 60%; height: 60%; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ht.load .ht__status, .ht.check .ht__status { opacity: 1; transform: none; }
.ht.check .ht__status { background: var(--green); }
.ht.check .ht__spin { display: none; }
.ht.check .ht__status svg { display: block; }
.ht__selo {
  left: 50%; bottom: 5%; display: flex; align-items: center; gap: .45em; white-space: nowrap; background: var(--green); color: #fff; font-weight: 800; font-size: .95em;
  padding: .55em 1em; border-radius: 99px; box-shadow: 0 .8em 1.6em -.6em rgba(22, 163, 74, .8); transform: translate(-50%, .8em) scale(.8);
}
.ht__selo svg { width: 1.1em; height: 1.1em; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ht.selo .ht__selo { opacity: 1; transform: translate(-50%, 0); }
.ht { --b-x: 3%; --b-y: 4%; --mic-x: 50%; --mic-y: 22%; --st-x: 56%; --st-y: 15%; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .2; } }
@keyframes wave { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ht__cena img, .ht__onda i { animation: none !important; } }