/* Isentos site styles, ported from the Framer project "ISENTOS - SITE - B (copy 2)".
   Breakpoints follow Framer's: phone < 810px, tablet 810–1199px, desktop ≥ 1200px
   (the home page adds "desktop grande" ≥ 1440px). No inline styles anywhere: the CSP allows
   only this file and /assets/components.css. */

/* ---------- Fonts (Poppins, SIL OFL 1.1: /assets/fonts/OFL.txt) ---------- */
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
/* Arial resized to Poppins' metrics, so swapping fonts doesn't shift the layout. */
@font-face { font-family: "Poppins Fallback"; src: local("Arial"); ascent-override: 91.95%; descent-override: 30.94%; line-gap-override: 7.96%; size-adjust: 113.11%; }

/* ---------- Tokens ---------- */
:root {
  --verde: #163337;
  --azul: #a3d3dc;
  --creme: #fffef4;
  --branco: #ffffff;
  --texto-suave: #4f6468;
  --linha: #cfdcdd;
  --lima: #dbff84;
  --alerta: #9a3d16;
  --orbita: #7e9696;

  --font: "Poppins", "Poppins Fallback", system-ui, sans-serif;
  --sidebar: 240px;
  --header: 64px;
  --gutter: 40px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-float: cubic-bezier(0.45, 0, 0.55, 1);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* Framer Motion springs (duration + bounce) sampled into linear() curves; the curve's shape
     depends only on the bounce, the duration comes from each transition. */
  --spring-b0: cubic-bezier(0.25, 0.9, 0.3, 1);
  --spring-b15: cubic-bezier(0.25, 0.9, 0.3, 1);
  --spring-b20: cubic-bezier(0.3, 1.1, 0.4, 1);
  --spring-b25: cubic-bezier(0.3, 1.15, 0.4, 1);
  --spring-b35: cubic-bezier(0.3, 1.3, 0.45, 1);
  --spring-b45: cubic-bezier(0.3, 1.45, 0.45, 1);
  --spring-b55: cubic-bezier(0.3, 1.6, 0.45, 1);
  --spring-b70: cubic-bezier(0.3, 1.9, 0.45, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-b0: linear(0, 0.028, 0.094, 0.18, 0.274, 0.367, 0.455, 0.536, 0.608, 0.671, 0.726, 0.773, 0.812, 0.846, 0.873, 0.897, 0.916, 0.932, 0.944, 0.955, 0.964, 0.971, 0.976, 0.981, 0.985, 0.988, 0.99, 0.992, 0.994, 0.995, 0.996, 0.997, 0.997, 0.998, 0.998, 0.999, 1);
    --spring-b15: linear(0, 0.025, 0.089, 0.174, 0.27, 0.368, 0.463, 0.552, 0.632, 0.703, 0.764, 0.816, 0.859, 0.894, 0.922, 0.945, 0.963, 0.976, 0.986, 0.993, 0.999, 1.002, 1.004, 1.006, 1.006, 1.006, 1.006, 1.006, 1.005, 1.004, 1.004, 1.003, 1.003, 1.002, 1.002, 1.001, 1);
    --spring-b20: linear(0, 0.027, 0.095, 0.187, 0.291, 0.396, 0.498, 0.592, 0.676, 0.748, 0.81, 0.861, 0.903, 0.935, 0.961, 0.979, 0.993, 1.003, 1.009, 1.013, 1.015, 1.015, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.006, 1.005, 1.004, 1.003, 1.002, 1.001, 1.001, 1.001, 1);
    --spring-b25: linear(0, 0.03, 0.104, 0.204, 0.317, 0.431, 0.54, 0.639, 0.727, 0.801, 0.863, 0.912, 0.95, 0.979, 0.999, 1.013, 1.022, 1.027, 1.028, 1.028, 1.026, 1.023, 1.02, 1.017, 1.014, 1.011, 1.008, 1.006, 1.004, 1.003, 1.002, 1.001, 1, 1, 0.999, 0.999, 1);
    --spring-b35: linear(0, 0.037, 0.128, 0.251, 0.387, 0.523, 0.649, 0.76, 0.853, 0.927, 0.983, 1.022, 1.048, 1.062, 1.068, 1.067, 1.062, 1.054, 1.045, 1.035, 1.027, 1.019, 1.012, 1.006, 1.002, 0.999, 0.997, 0.996, 0.995, 0.995, 0.996, 0.996, 0.997, 0.997, 0.998, 0.999, 1);
    --spring-b45: linear(0, 0.021, 0.075, 0.156, 0.252, 0.359, 0.468, 0.576, 0.679, 0.773, 0.856, 0.928, 0.988, 1.036, 1.072, 1.098, 1.115, 1.124, 1.126, 1.123, 1.115, 1.105, 1.093, 1.079, 1.065, 1.052, 1.039, 1.027, 1.017, 1.008, 1.001, 0.995, 0.99, 0.987, 0.985, 0.984, 0.984, 0.985, 0.986, 0.987, 0.989, 0.99, 0.992, 0.994, 0.995, 0.997, 0.998, 0.999, 1, 1.001, 1.001, 1.002, 1.002, 1.002, 1.002, 1.002, 1);
    --spring-b55: linear(0, 0.028, 0.104, 0.213, 0.343, 0.483, 0.623, 0.756, 0.876, 0.978, 1.061, 1.125, 1.169, 1.195, 1.205, 1.202, 1.189, 1.168, 1.142, 1.113, 1.084, 1.057, 1.031, 1.009, 0.991, 0.977, 0.967, 0.961, 0.958, 0.958, 0.96, 0.964, 0.97, 0.975, 0.981, 0.987, 0.992, 0.997, 1.001, 1.004, 1.006, 1.008, 1.009, 1.009, 1.008, 1.008, 1.007, 1.005, 1.004, 1.003, 1.002, 1.001, 1, 0.999, 0.999, 0.998, 1);
    --spring-b70: linear(0, 0.054, 0.198, 0.399, 0.625, 0.849, 1.047, 1.204, 1.31, 1.364, 1.369, 1.335, 1.272, 1.192, 1.107, 1.027, 0.958, 0.907, 0.875, 0.862, 0.866, 0.883, 0.909, 0.94, 0.972, 1, 1.024, 1.04, 1.049, 1.052, 1.048, 1.04, 1.029, 1.018, 1.006, 0.996, 0.989, 0.983, 0.981, 0.981, 0.983, 0.986, 0.991, 0.995, 0.999, 1.003, 1.005, 1.007, 1.007, 1.007, 1.006, 1.004, 1.003, 1.001, 1, 0.999, 1);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (max-width: 1199.98px) { html { scroll-padding-top: calc(var(--header) + 12px); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--creme);
  color: var(--verde);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--lima); color: var(--verde); }

[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--lima); }
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 1000; padding: 12px 20px; border-radius: 100px;
  background: var(--lima); color: var(--verde); font-weight: 700; text-decoration: none;
  transform: translateY(-160%); transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* Page transitions between pages of the site (Framer: fade + rise 16px, 0.4s). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 0.2s var(--ease-in-out) both vt-out; }
  ::view-transition-new(root) { animation: 0.4s var(--ease-in-out) both vt-in; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 16px; } }

/* ---------- Typography (Framer text styles) ---------- */
.t-h1 { font-size: 56px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.t-h2 { font-size: 44px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.t-h3 { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.t-body { font-size: 18px; line-height: 1.55; font-weight: 400; }
.t-small { font-size: 16px; line-height: 1.5; font-weight: 400; }
.t-button { font-size: 18px; line-height: 1.2; font-weight: 700; }
.t-num { font-size: 80px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.t-num-xl { font-size: 200px; line-height: 0.95; font-weight: 700; letter-spacing: -0.03em; }
.t-label { font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: 0.04em; }
.t-lead { font-size: 24px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.t-menu { font-size: 16px; line-height: 1.3; font-weight: 500; }
.t-menu-lg { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.t-valor { font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; }
.t-table { font-size: 18px; line-height: 1.45; font-weight: 400; }
.t-table-strong { font-size: 18px; line-height: 1.45; font-weight: 500; }
@media (min-width: 810px) and (max-width: 1199.98px) {
  .t-h1 { font-size: 52px; }
  .t-h2 { font-size: 38px; }
  .t-h3 { font-size: 22px; }
  .t-num { font-size: 64px; }
  .t-num-xl { font-size: 160px; }
  .t-lead { font-size: 22px; }
  .t-valor { font-size: 40px; }
}
@media (max-width: 809.98px) {
  .t-h1 { font-size: 40px; }
  .t-h2 { font-size: 30px; }
  .t-h3 { font-size: 21px; }
  .t-num { font-size: 52px; }
  .t-num-xl { font-size: 112px; }
  .t-lead { font-size: 20px; }
  .t-menu-lg { font-size: 30px; }
  .t-valor { font-size: 34px; }
  .t-table, .t-table-strong { font-size: 16px; }
}
.c-suave { color: var(--texto-suave); }
.c-azul { color: var(--azul); }
.c-creme { color: var(--creme); }
.tnum { font-variant-numeric: tabular-nums; }

/* Highlighted words: italic in blue on dark sections, or a rounded "marker" pill. */
.hl { font-style: italic; font-weight: 700; color: var(--azul); }
mark.pill {
  font-style: italic; color: inherit; background: var(--azul);
  padding: 2px 10px; border-radius: 14px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
mark.pill--creme { background: var(--creme); }
mark.pill--branco { background: var(--branco); }
mark.pill--sm { padding: 0 10px; border-radius: 12px; }

/* ---------- Buttons (Framer component "Botão") ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px; border-radius: 100px;
  font-family: var(--font); font-size: 18px; line-height: 1.2; font-weight: 700; text-align: center;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: opacity 0.4s var(--spring-b20), scale 0.12s var(--ease-out), background-color 0.15s var(--ease);
}
.btn:hover { opacity: 0.86; }
.btn:active { opacity: 0.72; scale: 0.97; }
.btn--primario { background: var(--verde); color: var(--creme); }
.btn--claro { background: var(--creme); color: var(--verde); }
.btn--lima { background: var(--lima); color: var(--verde); }
/* Framer draws borders inside the box, so outlined buttons are as tall as filled ones. */
.btn--contorno { color: var(--verde); box-shadow: inset 0 0 0 2px var(--verde); }
.btn--contorno-claro { color: var(--creme); box-shadow: inset 0 0 0 2px var(--creme); }
.btn--largo { width: 320px; padding: 14px 20px; white-space: normal; }
@media (max-width: 809.98px) {
  .btn { white-space: normal; }
  .btn--fill-phone { width: 100%; }
}

/* ---------- Sections ---------- */
.bg-verde { --bg: var(--verde); background-color: var(--verde); color: var(--creme); }
.bg-creme { --bg: var(--creme); background-color: var(--creme); color: var(--verde); }
.bg-azul { --bg: var(--azul); background-color: var(--azul); color: var(--verde); }
.bg-lima { --bg: var(--lima); background-color: var(--lima); color: var(--verde); }
.bg-branco { --bg: var(--branco); background-color: var(--branco); color: var(--verde); }
.from-verde { --prev: var(--verde); }
.from-creme { --prev: var(--creme); }
.from-azul { --prev: var(--azul); }
.from-lima { --prev: var(--lima); }
/* "Transição de cor": a 120px band that fades from the previous section's color. */
.blend { position: relative; }
.blend::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 120px; pointer-events: none;
  background: linear-gradient(var(--prev), var(--bg));
}
.blend > * { position: relative; }
.wrap { width: 100%; padding: 0 var(--gutter); }
@media (max-width: 1199.98px) { :root { --gutter: 32px; } }
@media (max-width: 809.98px) { :root { --gutter: 20px; } }

/* ---------- Motion: appear on scroll (Framer "Appear" effects) ----------
   lib/ui/motion.ts adds .is-in when the element scrolls into view (once). With scripting on,
   elements start hidden from the first paint; a failsafe shows everything if the script never
   runs. data-delay="0.08" sets --delay. */
[data-appear] {
  --ax: 0px; --ay: 0px; --as: 1; --ar: 0deg; --dur: 0.3s; --e: var(--ease-out);
  transition:
    opacity var(--dur) var(--e) var(--delay, 0s),
    translate var(--dur) var(--e) var(--delay, 0s),
    scale var(--dur) var(--e) var(--delay, 0s),
    rotate var(--dur) var(--e) var(--delay, 0s);
}
[data-appear="up8"] { --ay: 8px; }
[data-appear="up8-slow"] { --ay: 8px; --dur: 0.35s; }
[data-appear="up12"] { --ay: 12px; --dur: 0.45s; }
[data-appear="up30"] { --ay: 30px; --dur: 0.7s; --e: var(--spring-b20); }
[data-appear="up40"] { --ay: 40px; --dur: 0.6s; --e: var(--spring-b20); }
[data-appear="left24"] { --ax: -24px; --dur: 0.6s; --e: var(--spring-b15); }
[data-appear="scale97"] { --as: 0.97; --dur: 0.5s; }
[data-appear="scale97-fast"] { --as: 0.97; --dur: 0.45s; }
[data-appear="scale60"] { --as: 0.6; --dur: 0.7s; --e: var(--spring-b45); }
[data-appear="pop"] { --as: 0.4; --ar: -6deg; --dur: 0.9s; --e: var(--spring-b55); }
[data-appear="wobble"] { --ar: 3deg; --dur: 0.9s; --e: var(--spring-b70); }
@media (scripting: enabled) {
  [data-appear]:not(.is-in) { opacity: 0; translate: var(--ax) var(--ay); scale: var(--as); rotate: var(--ar); }
  html:not(.js) [data-appear]:not(.is-in) { animation: appear-failsafe 0.01s 4s forwards; }
}
@keyframes appear-failsafe { to { opacity: 1; translate: none; scale: none; rotate: none; } }

/* Hero title: words rise in one after another (Framer text effect, per word). */
.split-words .w { display: inline-block; }
@media (scripting: enabled) {
  .split-words:not(.is-split) { opacity: 0; }
  html:not(.js) .split-words:not(.is-split) { animation: appear-failsafe 0.01s 4s forwards; }
  .split-words .w { opacity: 0; translate: 0 18px; transition: opacity 0.6s var(--spring-b0), translate 0.6s var(--spring-b0); transition-delay: var(--delay, 0s); }
  .split-words.is-in .w { opacity: 1; translate: none; }
}

/* Gentle float (Framer loop effect: y −10px, 2.6s, eased, mirrored). */
@keyframes float { from { translate: 0 0; } to { translate: 0 -10px; } }
.float { animation: float 2.6s var(--ease-float) infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  /* Like Framer's "reduced motion": no movement, only quick fades. */
  [data-appear], .split-words .w { translate: none !important; scale: none !important; rotate: none !important; transition-property: opacity !important; transition-duration: 0.2s !important; }
  .float { animation: none; }
  @view-transition { navigation: none; }
}

/* ---------- Form helpers kept from the lead-form contract ---------- */
/* Honeypot: off-screen rather than display:none, which some bots detect and skip. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field-error { color: var(--alerta); font-size: 16px; line-height: 1.4; font-weight: 500; }
.on-dark .field-error { color: var(--lima); }

/* ======================================================================
   Layout chrome (Framer layout template "Site Isentos")
   ====================================================================== */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
html { transition: --p 0.3s var(--spring-b0); }

@media (min-width: 1200px) {
  body { padding-left: var(--sidebar); }
  .topbar, .progress-bar, .vovo-button--fab { display: none !important; }
}
@media (max-width: 1199.98px) {
  .sidebar { display: none !important; }
}

/* ---------- Sidebar (desktop) ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--sidebar);
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  padding: 28px 20px 24px 22px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  background: var(--verde); color: var(--creme);
}
/* On short windows the sidebar scrolls instead of squashing its button. */
.sidebar > * { flex-shrink: 0; }
.sidebar__logo img { width: 150px; height: 27px; }
.sidebar__nav { position: relative; width: 100%; }
.sidebar__links { position: relative; display: flex; flex-direction: column; gap: 4px; }
.sidebar__links a {
  position: relative; z-index: 1; display: flex; align-items: center; height: 44px; padding: 0 14px;
  border-radius: 999px; color: var(--creme); font-size: 17px; line-height: 1.2; font-weight: 500;
  text-decoration: none; white-space: nowrap; transition: background-color 0.15s var(--ease), color 0.22s var(--ease-out);
}
.sidebar__links a:hover { background-color: rgb(255 255 255 / 0.08); }
/* The lime pill behind the section in view (home only). */
.sidebar__links::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; border-radius: 999px;
  background: var(--lima); opacity: 0; translate: 0 calc(var(--active, 0) * 48px);
  transition: translate 0.22s var(--ease-out), opacity 0.22s var(--ease-out);
}
.sidebar__links[data-active]::before { opacity: 1; }
.sidebar__links a.is-active { color: var(--verde); background-color: transparent; }
.sidebar__track { display: none; }
.is-home .sidebar__nav { margin-top: 4px; padding-left: 3px; }
.is-home .sidebar__track {
  display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 2px; background: rgb(163 211 220 / 0.3);
}
.sidebar__fill {
  position: absolute; inset: 0; border-radius: 2px; background: var(--lima);
  transform-origin: 50% 0; scale: 1 max(0.01, var(--p));
}
.sidebar__face {
  position: absolute; left: -13px; top: calc(var(--p) * 100% - 14px); width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%; background: var(--creme);
}
.sidebar__face img { width: 24px; height: 24px; }
.sidebar__cta { width: 100%; height: 56px; padding: 0 16px; border-radius: 999px; }
.sidebar__vovo { width: 100%; display: flex; justify-content: center; padding-top: 12px; }

/* ---------- The vovô buttons that open the conversation ---------- */
.vovo-button { position: relative; display: block; border-radius: 50%; background: var(--azul); transition: scale 0.12s var(--ease-out); }
.vovo-button:active { scale: 0.96; }
.vovo-button--sidebar { width: 132px; height: 132px; box-shadow: 0 10px 28px rgb(0 0 0 / 0.25); }
.vovo-button--fab { position: fixed; z-index: 45; right: 20px; bottom: 20px; width: 80px; height: 80px; box-shadow: 0 6px 20px rgb(22 51 55 / 0.14); }
/* It floats over light and dark sections alike: a cream ring inside the green one shows on both. */
.vovo-button--fab:focus-visible { box-shadow: 0 0 0 3px var(--creme), 0 6px 20px rgb(22 51 55 / 0.14); }
@media (max-width: 809.98px) { .vovo-button--fab { right: 14px; bottom: 14px; width: 68px; height: 68px; } }
.vovo-button__3d { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
/* Before WebGL draws (or without it), the drawn face stands in. */
.vovo-button__3d:empty { background: url("/assets/img/rosto-vovo.png") center / 70% no-repeat; }

/* ---------- Header (tablet / phone) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--header);
  display: flex; align-items: center; justify-content: space-between; padding: 0 32px;
  background: var(--creme);
}
.topbar__logo img { width: 150px; height: 27px; }
.topbar__actions { display: flex; align-items: center; gap: 12px; }
.topbar__menu { padding: 14px 22px; }
@media (max-width: 809.98px) {
  .topbar { padding: 0 16px; }
  .topbar__logo img { width: 124px; height: 22px; }
  .topbar__cta { display: none; }
}
.progress-bar { display: none; position: fixed; z-index: 39; top: var(--header); left: 0; right: 0; height: 4px; background: rgb(163 211 220 / 0.35); }
.is-home .progress-bar { display: block; }
.progress-bar span { position: absolute; inset: 0; background: var(--lima); transform-origin: 0 50%; scale: max(0.01, var(--p)) 1; }

/* ---------- Full-screen menu (a native <dialog>) ---------- */
.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: 16px 20px 40px; border: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
  background: var(--verde); color: var(--creme);
}
.menu:not([open]) { display: none; }
.menu::backdrop { background: rgb(20 51 54 / 0.6); }
.menu[open] { animation: menu-in 0.35s var(--spring-b15); }
.menu.is-closing { animation: menu-out 0.25s var(--ease-out) forwards; }
@keyframes menu-in { from { opacity: 0; translate: 0 -16px; } }
@keyframes menu-out { to { opacity: 0; translate: 0 -16px; } }
.menu__top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.menu__top img { width: 140px; height: 25px; }
.menu__close { padding: 14px 22px; }
.menu__links { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.menu__links a { display: block; padding: 6px 0; font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
@media (max-width: 809.98px) { .menu__links a { font-size: 30px; } }
.menu .btn--largo { max-width: 100%; }

/* ---------- "Fale com a gente" panel (a native popover) ---------- */
.conversa {
  position: fixed; inset: auto; margin: 0; padding: 0; border: 0; background: transparent; color: var(--verde);
  width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: visible;
}
/* Browsers without the Popover API (Safari < 17, Firefox < 125) would show the panel all the time
   and the vovô buttons would do nothing, so both stay hidden there. */
@supports not selector(:popover-open) {
  .conversa, .vovo-button { display: none !important; }
}
@media (min-width: 1200px) { .conversa { left: 256px; bottom: 24px; } }
@media (min-width: 810px) and (max-width: 1199.98px) { .conversa { right: 20px; bottom: 112px; } }
@media (max-width: 809.98px) { .conversa { left: 0; right: 0; bottom: 0; width: 100%; max-width: none; padding: 0 16px 16px; } }
.conversa::backdrop { background: rgb(22 51 55 / 0.25); }
.conversa:popover-open { animation: conversa-in 0.2s var(--ease-out); }
@keyframes conversa-in { from { opacity: 0; translate: 0 8px; scale: 0.96; } }
html:has(.conversa:popover-open) { overflow: hidden; }
.conversa__painel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px;
  max-height: calc(100vh - 48px); overflow-y: auto; border-radius: 24px; background: var(--branco);
}
.conversa__topo { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.conversa__titulo { font-size: 20px; line-height: 1.3; font-weight: 600; }
.conversa__sub { margin-top: 2px; font-size: 16px; line-height: 1.4; color: var(--texto-suave); }
.conversa__fechar { flex: none; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--creme); font-size: 16px; font-weight: 600; transition: scale 0.12s var(--ease-out); }
.conversa__fechar:active { scale: 0.97; }
.conversa__balao { max-width: 100%; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--azul); font-size: 17px; line-height: 1.45; }
.conversa__respostas { display: flex; flex-wrap: wrap; gap: 8px; }
.conversa__respostas a {
  display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px; background: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha); font-size: 16px; line-height: 1.3; font-weight: 500; text-decoration: none;
  transition: background-color 0.15s var(--ease), scale 0.12s var(--ease-out);
}
.conversa__respostas a:hover { background-color: var(--creme); }
.conversa__respostas a:active { scale: 0.97; }
.conversa__botoes { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.conversa__botao {
  display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px;
  font-size: 17px; font-weight: 600; text-decoration: none; transition: scale 0.12s var(--ease-out), opacity 0.15s var(--ease);
}
.conversa__botao:hover { opacity: 0.9; }
.conversa__botao:active { scale: 0.97; }
.conversa__botao--verde { background: var(--verde); color: var(--creme); }
.conversa__botao--lima { background: var(--lima); color: var(--verde); }
.conversa__botao--contorno { box-shadow: inset 0 0 0 2px var(--verde); color: var(--verde); }
.conversa__nota { font-size: 16px; line-height: 1.4; color: var(--texto-suave); }

/* ---------- Footer ---------- */
.rodape { padding: 72px 0 56px; background: var(--creme); color: var(--verde); border-top: 1px solid var(--linha); }
.rodape__conteudo { display: flex; flex-direction: column; gap: 32px; }
.rodape__topo { display: flex; align-items: flex-start; gap: 56px; }
.rodape__marca { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.rodape__marca img { width: 160px; height: 28px; }
.rodape__marca p { max-width: 460px; }
.rodape__links { display: flex; gap: 48px; }
.rodape__links ul { display: flex; flex-direction: column; gap: 12px; }
.rodape__links a { font-size: 16px; line-height: 24px; text-decoration: none; white-space: nowrap; }
.rodape__links a:hover, .rodape__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.rodape__legal { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; border-top: 1px solid var(--linha); }
.rodape__cookies { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 809.98px) {
  .rodape { padding: 56px 0 112px; }
  .rodape__topo { flex-direction: column; gap: 32px; }
  .rodape__links { flex-wrap: wrap; gap: 24px 40px; }
}
/* Narrow phones (360 px): the two link columns still fit side by side; below that they wrap. */
@media (max-width: 389.98px) { .rodape__links { column-gap: 20px; } }

/* ---------- Cookie banner (Framer "Aviso de cookies") ---------- */
.consent {
  position: fixed; z-index: 60; left: 264px; bottom: 24px; width: 560px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 24px;
  background: var(--verde); color: var(--creme); box-shadow: 0 10px 30px rgb(22 51 55 / 0.2);
  animation: consent-in 0.3s var(--ease-in-out);
}
@keyframes consent-in { from { opacity: 0; translate: 0 24px; } }
@media (min-width: 810px) and (max-width: 1199.98px) { .consent { bottom: 110px; width: 480px; } }
@media (max-width: 809.98px) { .consent { left: 12px; right: 12px; bottom: 96px; width: auto; } }
/* Never taller than the screen: on short phones the text scrolls and the buttons stay in view. */
.consent { max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
.consent > * { flex-shrink: 0; }
.consent > .consent__texto { flex-shrink: 1; min-height: 4.5em; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 810px) and (max-width: 1199.98px) { .consent { max-height: calc(100dvh - 122px); } }
@media (max-width: 809.98px) { .consent { max-height: calc(100dvh - 108px); } }
.consent__texto { font-size: 16px; line-height: 1.5; }
.consent__preferencias { display: grid; gap: 10px; font-size: 16px; line-height: 1.4; }
.consent__preferencias label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.consent__preferencias input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lima); }
.consent__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.consent__botao {
  padding: 14px 24px; border-radius: 100px; font-size: 18px; line-height: 1.2; font-weight: 700;
  color: var(--creme); box-shadow: inset 0 0 0 2px var(--creme); transition: opacity 0.2s var(--ease), scale 0.12s var(--ease-out);
}
.consent__botao:hover { opacity: 0.86; }
.consent__botao:active { scale: 0.97; }
.consent__botao--cheio { background: var(--creme); color: var(--verde); }
.consent__link { padding: 0 8px; font-size: 16px; font-weight: 500; text-underline-offset: 3px; }

/* ======================================================================
   Home page sections
   ====================================================================== */
.sec { min-height: 100vh; padding: 176px 0 128px; }
#quem-somos, #crie-seu-personagem { min-height: 0; }
@media (min-width: 810px) and (max-width: 1199.98px) { .sec { padding: 160px 0 112px; } }
@media (max-width: 809.98px) { .sec { padding: 112px 0 88px; } }
.stack { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- Topo ---------- */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 72px 0 48px; overflow: hidden; }
.hero__inner { display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 0 24px 0 40px; }
.hero__marca { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.hero__logo { width: 340px; height: 60px; }
.hero__linha { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.hero__texto { width: 496px; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero__botoes { display: flex; align-items: center; gap: 12px; }
.hero__role { display: flex; flex-direction: column; gap: 8px; }
.hero__seta { width: 48px; height: 80px; }
.hero__vovo { position: relative; width: 640px; height: 780px; flex: none; }
.hero__brilho { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(50% 50% at 50% 45%, rgb(163 211 220 / 0.25) 0%, rgb(163 211 220 / 0) 70%); }
.hero__3d { position: absolute; inset: 0; }
/* No WebGL, or the 3D code didn't load (lib/ui/components.ts marks it): the drawn vovô instead. */
.hero__3d.componente--falhou { background: url("/assets/img/vovo-isentos.png") 50% 45% / min(78%, 460px) auto no-repeat; }
.hero__esmaecimento { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(rgb(22 51 55 / 0), var(--verde)); pointer-events: none; }
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .hero__vovo { width: 480px; height: 580px; }
}
@media (max-width: 1199.98px) {
  .hero__linha { flex-direction: column; justify-content: flex-start; }
  .hero__texto { width: 100%; max-width: 560px; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .hero { padding: 104px 0 64px; }
  .hero__inner { padding: 0 32px; }
  .hero__linha { align-items: flex-end; }
  .hero__vovo { width: 440px; height: 530px; }
}
@media (max-width: 809.98px) {
  .hero { padding: 88px 0 56px; justify-content: flex-start; }
  .hero__inner { padding: 0 20px; }
  .hero__marca { gap: 8px; }
  .hero__logo { width: 240px; height: auto; }
  .hero__linha { align-items: flex-start; gap: 32px; }
  .hero__botoes { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__btn { width: 100%; padding: 14px 20px; }
  .hero__role { display: none; }
  .hero__vovo { width: 311px; height: 379px; align-self: center; }
}

/* ---------- Quem pode pedir ---------- */
.qpp { display: flex; flex-direction: column; align-items: flex-start; gap: 56px; }
.qpp__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.checks { display: flex; flex-direction: column; gap: 16px; }
.check { display: flex; align-items: flex-start; gap: 16px; }
.check > .t-body { padding-top: 8px; }
.check__caixa { position: relative; flex: none; width: 44px; height: 44px; }
.check__caixa svg { position: absolute; inset: 0; width: 44px; height: 44px; }
.check__marca { left: 3px !important; top: -5px !important; opacity: 0; scale: 0.4; transition: opacity 0.6s var(--spring-b35), scale 0.6s var(--spring-b35); }
.check.is-checked .check__marca { opacity: 1; scale: 1; }
@media (max-width: 1199.98px) { .qpp { gap: 32px; } }

/* Teste rápido */
.quiz {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 32px; padding: 36px 32px;
  border-radius: 32px; background: var(--verde); color: var(--creme);
}
.quiz__conteudo { flex: 1 1 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.quiz__topo { display: flex; align-items: center; gap: 16px; }
.quiz__pergunta { transition: opacity 0.2s var(--ease-out), translate 0.5s var(--spring-b25); }
.quiz__pergunta.is-changing { opacity: 0; translate: 0 6px; transition: none; }
.quiz__respostas, .quiz__fim { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.quiz__botao {
  padding: 16px 32px; border-radius: 100px; font-size: 18px; line-height: 1.2; font-weight: 700;
  color: var(--creme); box-shadow: inset 0 0 0 2px var(--creme); transition: opacity 0.2s var(--ease), scale 0.12s var(--ease-out);
}
.quiz__botao:hover { opacity: 0.86; }
.quiz__botao:active { scale: 0.97; }
.quiz__botao--cheio { background: var(--creme); color: var(--verde); }
.quiz__recomecar { font-size: 18px; font-weight: 600; color: var(--creme); text-decoration: underline; text-underline-offset: 4px; padding: 8px 4px; }
.quiz__fim .btn[data-quiz-cta] { display: none; }
.quiz[data-state="sim"] [data-quiz-cta="sim"], .quiz[data-state="conferir"] [data-quiz-cta="conferir"] { display: inline-flex; }
.quiz__personagem { position: relative; flex: none; width: 200px; height: 220px; }
.quiz__rosto {
  position: absolute; left: 10px; right: 10px; margin: auto; top: 0; bottom: 0; width: auto; max-width: calc(100% - 20px);
  opacity: 0; scale: 0.8; transition: opacity 0.5s var(--spring-b25), scale 0.5s var(--spring-b25);
}
.quiz__rosto--touca { width: 180px; height: 186px; }
.quiz__rosto--surpreso { width: 144px; height: 158px; }
.quiz__rosto--oculos { width: 144px; height: 176px; }
.quiz__rosto--piscando { width: 144px; height: 169px; }
.quiz[data-face="touca"] .quiz__rosto--touca,
.quiz[data-face="surpreso"] .quiz__rosto--surpreso,
.quiz[data-face="oculos"] .quiz__rosto--oculos,
.quiz[data-face="piscando"] .quiz__rosto--piscando,
.quiz:not([data-face]) .quiz__rosto--touca { opacity: 1; scale: 1; }
@media (max-width: 809.98px) {
  .quiz { padding: 28px 24px; gap: 24px; }
  .quiz__personagem { width: 150px; height: 165px; }
  .quiz__rosto--touca { width: 135px; height: 140px; }
  .quiz__rosto--surpreso, .quiz__rosto--oculos, .quiz__rosto--piscando { width: 108px; height: auto; }
}

/* ---------- Doenças ---------- */
#doencas { display: flex; flex-direction: column; gap: 40px; }
.doencas__cab { display: flex; align-items: flex-end; gap: 40px; }
.doencas__titulo { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.doencas__vovo { flex: none; width: 176px; display: flex; flex-direction: column; align-items: center; }
.doencas__vovo img { width: 176px; height: 160px; }
.doencas__seta { width: 72px; height: 92px; margin: -4px 0 -26px; rotate: 20deg; }
.doencas__tabela { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.doencas__grade { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.doenca {
  display: flex; align-items: flex-start; gap: 14px; min-height: 88px; padding: 18px 22px;
  border-radius: 20px; background: var(--creme); color: var(--verde); box-shadow: inset 0 0 0 1px var(--linha);
}
.doenca__check { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lima); }
.doenca__textos { display: flex; flex-direction: column; gap: 2px; }
.doenca__nome { font-size: 20px; line-height: 1.3; font-weight: 600; }
.doenca__tecnico { font-size: 16px; line-height: 1.4; color: var(--texto-suave); }
.doencas__mais { font-size: 22px; line-height: 1.3; font-weight: 600; margin-top: 12px; }
.doencas__destaque { margin-top: 12px; }
.doencas__tabela a { text-underline-offset: 3px; }
@media (min-width: 810px) and (max-width: 1199.98px) { .doencas__cab { padding-right: 32px; } }
@media (max-width: 809.98px) {
  .doencas__cab { flex-direction: column; align-items: flex-start; gap: 24px; }
  .doencas__vovo { flex-direction: row; width: 208px; align-items: flex-end; margin-left: 20px; }
  .doencas__grade { display: flex; flex-direction: column; gap: 12px; }
  .doenca { width: 100%; }
}

/* ---------- Dinheiro de volta ---------- */
.dinheiro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.dinheiro__titulo { max-width: 880px; }
.dinheiro__texto { max-width: 720px; }
.dinheiro__simulador { width: 100%; }

/* ---------- Quanto custa ---------- */
.quanto__conteudo { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.quanto__titulo { max-width: 880px; }
.quanto__gratis { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.quanto__zero { position: relative; padding: 24px 56px; transform-origin: 30% 50%; }
.quanto__nuvem { position: absolute; top: -12px; left: -20px; right: 22.8px; bottom: 6px; width: calc(100% - 2.8px); height: calc(100% + 6px); overflow: visible; }
.quanto__valor { position: relative; white-space: nowrap; }
.quanto__texto { max-width: 720px; }
@media (max-width: 809.98px) { .quanto__zero { padding: 16px 24px; } }

/* ---------- Pinned scenes (payslip, steps) ---------- */
.cena { position: relative; }
.cena__painel { min-height: 100vh; display: flex; flex-direction: column; padding: 176px 0 48px; }
.cena__marcador { height: 70vh; }
.cena--passos .cena__marcador { height: 66vh; }
@media (min-width: 1200px) {
  /* Pinned, and at least a screen tall. On short screens it grows rather than cutting its content
     off; lib/ui/scroll.ts then shifts the step changes so they still happen while it's pinned. */
  .cena__painel { position: sticky; top: 0; }
}
@media (min-width: 1200px) and (max-height: 860px) {
  .cena__painel { padding-top: 112px; }
}
@media (max-width: 1199.98px) {
  .cena__marcador { display: none; }
}
@media (max-width: 809.98px) {
  .cena__painel { min-height: 0; }
}
@media (min-width: 810px) and (max-width: 1199.98px) { .cena__painel { padding: 160px 0 48px; } .cena--passos .cena__painel { padding-bottom: 112px; } }
@media (max-width: 809.98px) { .cena__painel { padding: 128px 0 40px; } .cena--passos .cena__painel { padding-bottom: 88px; } }

/* Essa linha não deveria existir */
.cena__linha { display: flex; align-items: center; gap: 56px; }
.cena__titulo { flex: 1; max-width: 544px; }
.cc { width: 520px; flex: none; display: flex; flex-direction: column; padding: 32px; border-radius: 24px; background: var(--branco); color: var(--verde); box-shadow: inset 0 0 0 1px var(--linha); }
.cc__titulo { font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: 0.04em; color: var(--texto-suave); }
.cc__linha { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--linha); font-size: 18px; line-height: 1.55; }
.cc__valor { font-weight: 500; font-variant-numeric: tabular-nums; }
.cc__linha--ir { color: var(--alerta); }
.cc__ir { transition: opacity 0.8s var(--spring-b15); }
.cc__risco {
  position: absolute; left: 0; right: 0; top: 32px; height: 3px; border-radius: 3px; background: var(--alerta);
  scale: 0 1; transform-origin: 0 50%; transition: scale 0.8s var(--spring-b15);
}
.cc__recebe { display: flex; flex-direction: column; gap: 4px; padding-top: 20px; }
.cc__valores { position: relative; height: 56px; overflow: clip; }
.cc__antes, .cc__depois { position: absolute; left: 0; top: 2px; white-space: nowrap; transition: translate 0.8s var(--spring-b15), opacity 0.8s var(--spring-b15); }
.cc__depois { translate: 0 60px; opacity: 0; }
.cena--contracheque[data-step="1"] .cc__ir { opacity: 0.6; }
.cena--contracheque[data-step="1"] .cc__risco { scale: 1 1; }
.cena--contracheque[data-step="1"] .cc__antes { translate: 0 -60px; opacity: 0; }
.cena--contracheque[data-step="1"] .cc__depois { translate: none; opacity: 1; }
.cena__frase { display: flex; flex-direction: column; gap: 12px; padding-bottom: 128px; }
.cena__frase .t-lead { max-width: 720px; }
@media (max-width: 1199.98px) {
  .cena__linha { flex-direction: column; align-items: flex-start; gap: 32px; }
  .cena__titulo { max-width: none; }
  .cc { width: 100%; max-width: 520px; }
}
@media (min-width: 810px) and (max-width: 1199.98px) { .cena__frase { padding-bottom: 112px; } }
@media (max-width: 809.98px) { .cc { padding: 24px; } .cena__frase { padding-bottom: 88px; } }

/* Como funciona */
.passos-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.passos { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.passo {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 28px;
  background: var(--branco); color: var(--verde);
  transition: background-color 0.55s var(--spring-b20), color 0.55s var(--spring-b20), scale 0.55s var(--spring-b20), opacity var(--dur) var(--e) var(--delay, 0s), translate var(--dur) var(--e) var(--delay, 0s);
}
.passo__topo { display: flex; justify-content: flex-end; height: 32px; }
.passo__feito { display: grid; visibility: hidden; width: 32px; height: 32px; border-radius: 100px; background: var(--azul); place-items: center; }
.passos__caminho { position: relative; width: 100%; height: 124px; margin-top: -32px; }
.passos__linha { position: absolute; left: 0; right: 0; top: 118px; height: 2px; background-image: linear-gradient(90deg, var(--verde) 50%, transparent 50%); background-size: 10px 2px; }
.passos__marcador { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--lima); translate: calc(var(--t, 0) * 900px) 0; transition: translate 0.4s var(--spring-b0); }
@media (min-width: 1200px) {
  /* Active step: dark and slightly larger; finished steps get a check. */
  .cena--passos[data-step="0"] .passo:nth-child(1),
  .cena--passos[data-step="1"] .passo:nth-child(2),
  .cena--passos[data-step="2"] .passo:nth-child(3),
  .cena--passos[data-step="3"] .passo:nth-child(4) { background: var(--verde); color: var(--creme); scale: 1.03; }
  .cena--passos[data-step="1"] .passo:nth-child(-n+1) .passo__feito,
  .cena--passos[data-step="2"] .passo:nth-child(-n+2) .passo__feito,
  .cena--passos[data-step="3"] .passo:nth-child(-n+3) .passo__feito { visibility: visible; }
  .cena--passos:not([data-step]) .passo:nth-child(1) { background: var(--verde); color: var(--creme); scale: 1.03; }
}
@media (max-width: 1199.98px) {
  .passos { display: flex; flex-direction: column; gap: 16px; }
  .passo { width: 100%; }
  .passos__caminho { display: none; }
}

/* ---------- Confiança ---------- */
.confianca__conteudo { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.confianca__lista { display: flex; flex-direction: column; gap: 14px; }
.confianca__lista li { display: flex; align-items: flex-start; gap: 14px; }
.confianca__lista .t-body { padding-top: 2px; }
.icone { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 100px; }
.icone--ok { background: var(--azul); }
.icone--x { background: var(--creme); }
.golpe { width: 100%; display: flex; align-items: flex-start; gap: 16px; padding: 24px 28px; border-radius: 24px; background: var(--creme); color: var(--verde); font-size: 18px; line-height: 1.55; font-weight: 400; transform-origin: 0 50%; }
.confianca__intro { max-width: 680px; }
.golpe strong { font-weight: 700; }
.golpe__icone { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 100px; background: var(--alerta); color: var(--creme); font-size: 18px; font-weight: 700; }
@media (max-width: 809.98px) { .golpe { padding: 20px; } }

/* ---------- Depoimentos ---------- */
.depo__conteudo { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.depo__lista { width: 100%; display: flex; align-items: flex-start; gap: 24px; }
.depo__card { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: 32px; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); }
.depo__estrelas { font-size: 24px; line-height: 1.4; font-weight: 600; letter-spacing: 0.05em; }
.depo__card blockquote { margin: 0; }
.depo__card figcaption { font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: 0.04em; color: var(--texto-suave); }
@media (max-width: 809.98px) {
  /* A sideways-scrolling row on phones, as in the design. */
  .depo__lista {
    gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter);
  }
  .depo__lista::-webkit-scrollbar { display: none; }
  .depo__card { flex: 0 0 300px; padding: 28px; scroll-snap-align: start; }
}

/* ---------- Números ---------- */
.numeros__conteudo { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.numeros__lista { width: 100%; display: flex; flex-direction: column; }
.numero { display: flex; flex-direction: column; gap: 6px; padding: 28px 0; border-bottom: 1px solid rgb(22 51 55 / 0.35); transform-origin: 0 50%; }
.numeros__frase { max-width: 760px; }

/* ---------- Quem somos ---------- */
.quem { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.quem__titulo { max-width: 940px; }
.quem__texto { max-width: 720px; display: flex; flex-direction: column; gap: 28px; }

/* ---------- Dúvidas / FAQ ---------- */
.duvidas { display: flex; flex-direction: column; align-items: flex-start; gap: 56px; }
.duvidas__linha { width: 100%; display: flex; align-items: flex-start; gap: 56px; }
.duvidas__titulo { width: 320px; flex: none; }
.faq { flex: 1; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.faq__item { border-radius: 24px; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); overflow: clip; }
.faq__item summary {
  display: flex; align-items: center; gap: 16px; padding: 22px 24px 22px 28px; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary > .t-lead { flex: 1; }
.faq__icone { position: relative; flex: none; width: 36px; height: 36px; border-radius: 100px; background: var(--azul); }
.faq__icone::before, .faq__icone::after { content: ""; position: absolute; left: 10px; top: 17px; width: 16px; height: 2.5px; border-radius: 4px; background: var(--verde); transition: rotate 0.2s var(--ease-out); }
.faq__icone::after { rotate: 90deg; }
.faq__item[open] .faq__icone::after { rotate: 0deg; }
.faq__resposta { padding: 0 28px 24px; }
/* Smooth open/close (lib/ui/faq.ts animates the height; this is the no-script fallback). */
.faq__item.is-animating { transition: height 0.2s var(--ease-out); }
.faq__item .faq__resposta { transition: opacity 0.2s var(--ease-out); }
.faq__item:not([open]) .faq__resposta, .faq__item.is-closing .faq__resposta { opacity: 0; }
.faq__item.is-animating:not(.is-closing) .faq__resposta { animation: faq-in 0.2s var(--ease-out); }
@keyframes faq-in { from { opacity: 0; } }
.ajuda { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 48px; border-radius: 32px; background: var(--branco); }
.ajuda .t-body { max-width: 620px; }
@media (max-width: 1199.98px) {
  .duvidas__linha { flex-direction: column; gap: 32px; }
  .duvidas__titulo { width: auto; }
}
@media (max-width: 809.98px) {
  .ajuda { padding: 32px 24px; }
  .faq__item summary { padding: 20px 20px 20px 22px; }
  .faq__resposta { padding: 0 22px 22px; }
}

/* ---------- Crie seu personagem ---------- */
.crie__conteudo { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.crie__topo { max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.crie__passos { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.crie__passos li { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-radius: 20px; background: var(--branco); }
.crie__numero { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lima); font-size: 18px; font-weight: 700; }
.crie__criador { width: 100%; }
.crie__nota { max-width: 696px; font-size: 20px; line-height: 1.5; font-weight: 500; }
.crie__faq { max-width: 760px; }
@media (max-width: 809.98px) {
  .crie__passos { display: flex; flex-direction: column; gap: 12px; }
}

/* ---------- Instagram ---------- */
.insta__conteudo { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.insta__cartao { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; border-radius: 28px; background: var(--branco); }
.insta__texto { font-size: 20px; line-height: 1.5; }
@media (max-width: 809.98px) { .insta__cartao { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; } }

/* ---------- Final da página ---------- */
.final__conteudo { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.final__conteudo .t-h2 { max-width: 720px; }
.final__conteudo .t-body { max-width: 620px; }
.final__botoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
@media (max-width: 809.98px) {
  .final__conteudo { align-items: flex-start; text-align: left; }
  .final__botoes { width: 100%; flex-direction: column; align-items: stretch; }
  .final__botoes .btn:last-child { align-self: center; }
}

/* ======================================================================
   /avaliacao: the evaluation form (Framer page "Avaliação")
   ====================================================================== */
.aval { padding: 112px 0; }
.aval__linha { display: flex; align-items: flex-start; gap: 56px; }
.aval__texto { flex: 1; max-width: 584px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
@media (min-width: 1200px) { .aval__texto { position: sticky; top: 40px; } }
.aval__intro { max-width: 520px; }
.aval__garantias { display: flex; flex-direction: column; gap: 10px; }
.aval__garantias li { display: flex; align-items: center; gap: 12px; }
.aval__check { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lima); }
.aval__rapido { font-size: 18px; line-height: 1.4; font-weight: 600; }
.aval__depois { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.aval__depois ol { display: flex; flex-direction: column; gap: 14px; }
.aval__depois li { display: flex; align-items: center; gap: 14px; }
.aval__numero { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 100px; background: var(--azul); font-size: 18px; font-weight: 700; }

.aval__form { width: 480px; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 32px; border-radius: 28px; background: var(--branco); }
.aval__grupo { display: flex; flex-direction: column; gap: 18px; }
.aval__grupo-titulo { font-size: 20px; line-height: 1.3; font-weight: 600; }
.campo { display: flex; flex-direction: column; gap: 8px; }
fieldset.campo { gap: 10px; }
.campo__rotulo { font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: 0.04em; padding: 0; }
.campo__dica { display: block; margin-top: 8px; font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: var(--texto-suave); }
/* The visible edges are box-shadows; the transparent border and outline are for Windows high
   contrast (forced colors), which drops shadows but draws transparent borders and outlines. */
.campo__input {
  width: 100%; height: 56px; padding: 0 15px; border: 1px solid transparent; border-radius: 14px; background: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha); font-size: 18px; color: var(--verde); transition: box-shadow 0.15s var(--ease);
}
.campo__input:focus { outline: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--verde); }
.campo__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--alerta); }
.opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opcao {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 16px; border-radius: 14px; cursor: pointer;
  background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); font-size: 18px; line-height: 1.55; transition: box-shadow 0.15s var(--ease);
}
.opcao:has(input:checked) { box-shadow: inset 0 0 0 2px var(--verde); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--verde); outline-offset: 2px; }
.opcao input {
  appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 100px;
  border: 2px solid var(--verde); background: var(--branco); display: grid; place-items: center; cursor: pointer;
}
.opcao input::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--verde); scale: 0; transition: scale 0.2s var(--spring-b35); }
.opcao input:checked::before { scale: 1; }
.opcao input:focus-visible { outline: none; }
fieldset[aria-invalid="true"] .opcao { box-shadow: inset 0 0 0 1px var(--alerta); }
.aval__autorizacao { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 16px; background: var(--creme); font-size: 16px; line-height: 1.5; }
.aval__autorizacao label { cursor: pointer; }
.aval__autorizacao a { text-underline-offset: 3px; }
.caixa {
  appearance: none; flex: none; width: 26px; height: 26px; margin: 0; border-radius: 6px; border: 2px solid var(--verde);
  background: var(--branco); display: grid; place-items: center; cursor: pointer;
}
.caixa::before { content: ""; width: 12px; height: 7px; margin-top: -3px; border: solid var(--verde); border-width: 0 0 2.5px 2.5px; rotate: -45deg; scale: 0; transition: scale 0.2s var(--spring-b35); }
.caixa:checked::before { scale: 1; }
.caixa[aria-invalid="true"] { border-color: var(--alerta); }
@media (forced-colors: active) {
  .opcao { border: 1px solid CanvasText; }
  .opcao:has(input:checked) { border-color: Highlight; outline: 2px solid Highlight; outline-offset: -3px; }
  .opcao input::before { forced-color-adjust: none; background: CanvasText; }
  .campo__input:focus { outline-color: Highlight; }
}
.aval__erro-consentimento { margin-top: -16px; }

/* "Botão de enviar": dimmed until the required answers are in, "Enviando…" while sending. */
.enviar {
  position: relative; width: 100%; min-height: 60px; padding: 16px 28px; border-radius: 100px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--verde); color: var(--creme); font-size: 18px; line-height: 1.2; font-weight: 700;
  transition: opacity 0.25s var(--ease-in-out), background-color 0.25s var(--ease-in-out), scale 0.12s var(--ease-out);
}
.enviar:active { scale: 0.98; }
.aval__form:has(:invalid) .enviar { opacity: 0.55; }
.enviar__enviando { display: none; }
.aval__form[data-state="sending"] .enviar { opacity: 1; }
.aval__form[data-state="sending"] .enviar__padrao { display: none; }
.aval__form[data-state="sending"] .enviar__enviando { display: inline; }
.enviar--ok { background: var(--azul); color: var(--verde); }
.aval__ok { align-self: flex-start; }
.aval__ok:focus { outline: none; }
@media (max-width: 1199.98px) {
  .aval__linha { flex-direction: column; gap: 40px; }
  .aval__texto { max-width: 640px; }
  .aval__form { width: 100%; max-width: 560px; }
}
@media (max-width: 809.98px) {
  .aval { padding: 72px 0 80px; }
  .aval__form { padding: 20px; }
}

/* ======================================================================
   Subpages: quem-somos, consignado, privacidade, termos, crie-seu-personagem
   ====================================================================== */
.sub { padding: 112px 0 128px; }
.sub__conteudo { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.sub__titulo { max-width: 940px; }
.sub__estreito { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sub__reservado { width: 100%; padding: 32px; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--linha); }
@media (min-width: 810px) and (max-width: 1199.98px) { .sub { padding: 104px 0 112px; } }
@media (max-width: 809.98px) { .sub { padding: 72px 0 88px; } .sub__reservado { padding: 24px; } }

.sub--quem { padding-top: 120px; padding-bottom: 112px; }
.fundadores { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 24px; }
.fundador { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 48px 40px 40px; border-radius: 32px; text-align: center; }
.fundador--azul { background: var(--azul); }
.fundador--lima { background: var(--lima); }
.fundador__inicial { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--verde); color: var(--creme); font-size: 32px; font-weight: 700; }
.sub--esperar { padding: 96px 0 112px; }
.sub--esperar .sub__conteudo { gap: 24px; }
@media (max-width: 809.98px) { .fundadores { grid-template-columns: 1fr; gap: 16px; } }

/* Consignado: the question mark with three characters in orbit. */
.sub--consignado { display: flex; flex-direction: column; align-items: center; gap: 40px; overflow: hidden; }
.orbita { --r: 520px; position: relative; width: calc(var(--r) + 40px); height: calc(var(--r) + 40px); flex: none; }
.orbita__circulo { position: absolute; inset: 20px; width: var(--r); height: var(--r); }
.orbita__interrogacao {
  position: absolute; inset: 40px 80px; display: grid; place-items: center;
  font-size: calc(var(--r) * 0.81); line-height: 1; font-weight: 700; color: var(--azul);
  animation: balancar 4.25s var(--ease-float) infinite alternate;
}
.orbita__rotor { position: absolute; inset: 20px; animation: girar 40s linear infinite; }
.orbita__lugar { position: absolute; width: calc(var(--r) * 0.27); height: calc(var(--r) * 0.27); display: grid; place-items: center; animation: girar 40s linear infinite reverse; }
.orbita__lugar img { max-width: 86%; max-height: 96%; width: auto; height: auto; }
/* Framer's three seats on the 520px ring: top centre, lower right, lower left. */
.orbita__lugar--1 { left: calc(var(--r) * 0.365); top: calc(var(--r) * -0.131); }
.orbita__lugar--2 { left: calc(var(--r) * 0.794); top: calc(var(--r) * 0.613); }
.orbita__lugar--3 { left: calc(var(--r) * -0.063); top: calc(var(--r) * 0.613); }
@keyframes girar { to { rotate: 360deg; } }
@keyframes balancar { from { rotate: 0deg; translate: 0 0; } to { rotate: 12deg; translate: 0 -14px; } }
@media (prefers-reduced-motion: reduce) { .orbita__rotor, .orbita__lugar, .orbita__interrogacao { animation: none; } }
@media (max-width: 809.98px) { .orbita { --r: min(520px, calc(100vw - 100px)); } }
.sub--consignado .sub__estreito { max-width: 860px; }
.consignado__destaque { width: 100%; padding: 24px 28px; border-radius: 24px; box-shadow: inset 0 0 0 2px var(--azul); }
@media (max-width: 809.98px) {
  .orbita__lugar { width: 96px; height: 96px; }
  .orbita__lugar img { max-width: 84px; max-height: 92px; }
  .orbita__lugar--1 { left: calc(50% - 48px); top: -40px; }
  .orbita__lugar--2 { left: calc(100% - 96px + 20px); top: calc(75% - 48px); }
  .orbita__lugar--3 { left: -20px; top: calc(75% - 48px); }
}

/* Crie seu personagem (page and home section) */
.sub--crie { padding-top: 80px; }
.crie__nota { width: 100%; max-width: 760px; padding: 28px 32px; border-radius: 24px; background: var(--azul); }

/* ---------- Reduced motion: the rest of what moves ---------- */
/* The scroll-in effects, the float, the orbit and page transitions are handled where they're
   defined. Here: panels fade instead of sliding, and state changes fade or jump in place. */
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* (The menu then closes without an animation: lib/ui/menu.ts.) */
  .menu[open], .conversa:popover-open, .consent { animation-name: fade-in; }
  .cc__antes, .cc__depois, .passo, .quiz__rosto, .quiz__pergunta, .check__marca { translate: none !important; scale: none !important; }
  .cc__risco { scale: 1 1 !important; opacity: 0; transition: opacity 0.2s var(--ease) !important; }
  .cena--contracheque[data-step="1"] .cc__risco { opacity: 1; }
  .sidebar__links::before { transition-property: opacity; }
  .passos__marcador { transition: none; }
}

/* Long legal texts (privacidade, termos): headings, paragraphs and bulleted lists. */
.texto-legal { display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.6; }
.texto-legal h3 { margin-top: 18px; font-size: 19px; line-height: 1.35; font-weight: 700; }
.texto-legal ul { display: flex; flex-direction: column; gap: 8px; padding-left: 1.25em; list-style: disc; }
.texto-legal strong { font-weight: 600; }