/* ============================================================
   Visiolux — tokens (extraídos do design system, inline no site)
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap");

:root {
  /* navy */
  --navy-950:#081A34; --navy-900:#0C2340; --navy-800:#12294B; --navy-700:#1A3861; --navy-600:#244a7d;
  /* blue */
  --blue-700:#2E5A9E; --blue-600:#3A6AB0; --blue-500:#4A6FA5; --blue-400:#7194C2; --blue-300:#A6C0DE;
  /* sky */
  --sky-50:#F5F9FD; --sky-100:#E9F2FA; --sky-200:#D8E8F5; --sky-300:#C3DBEF; --sky-400:#A7C8E6;
  /* neutrals */
  --white:#FFFFFF; --gray-50:#F6F8FA; --gray-100:#ECEFF3; --gray-200:#DCE2E9; --gray-300:#C6CFD9;
  --gray-400:#9AA7B5; --gray-500:#6B7B8C; --gray-600:#4A5867;
  /* refração */
  --accent-yellow:#FFC400; --accent-amber:#F5A623; --accent-green:#14A44D; --accent-teal:#0E9B8E;
  --refraction:linear-gradient(150deg,var(--accent-yellow) 0%,var(--accent-amber) 30%,var(--accent-green) 100%);
  --refraction-spectrum:linear-gradient(100deg,#ff5f6d,#ffc400,#14a44d,#4a6fa5,#8a5cff);
  /* semânticos */
  --text-strong:var(--navy-900); --text-body:var(--navy-700); --text-muted:var(--gray-500);
  --text-link:var(--blue-600); --border-subtle:var(--gray-200); --border-strong:var(--gray-300);
  --border-brand:var(--blue-300); --focus-ring:var(--blue-500);
  --success:#14A44D; --warning:#E8A400; --danger:#D64545; --info:var(--blue-600);
  /* type */
  --font-sans:"Mulish",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-display:4.5rem; --fs-h1:3rem; --fs-h2:2.25rem; --fs-h3:1.75rem; --fs-h4:1.375rem;
  --fs-lead:1.25rem; --fs-body:1rem; --fs-sm:0.875rem; --fs-xs:0.75rem; --fs-eyebrow:0.8125rem;
  --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tight:-0.02em; --ls-wide:0.04em; --ls-eyebrow:0.28em;
  /* spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;
  --container-max:1200px; --container-narrow:760px;
  /* radii */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-pill:999px;
  /* shadows */
  --shadow-xs:0 1px 2px rgba(12,35,64,.06); --shadow-sm:0 2px 8px rgba(12,35,64,.07);
  --shadow-md:0 8px 24px rgba(12,35,64,.09); --shadow-lg:0 18px 48px rgba(12,35,64,.12);
  --shadow-glow:0 8px 40px rgba(74,111,165,.22); --shadow-inset:inset 0 1px 0 rgba(255,255,255,.7);
  /* glass */
  --glass-bg:rgba(255,255,255,.55); --glass-border:rgba(255,255,255,.7); --glass-blur:blur(16px);
  /* gradientes */
  --grad-sky:linear-gradient(160deg,#FFFFFF 0%,var(--sky-100) 55%,var(--sky-200) 100%);
  --grad-brand:linear-gradient(155deg,var(--navy-800) 0%,var(--navy-950) 100%);
  --grad-lens:radial-gradient(120% 100% at 15% 0%,#FFFFFF 0%,var(--sky-100) 45%,var(--sky-300) 100%);
  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-fast:140ms; --dur-base:220ms; --dur-slow:400ms;
}

* { box-sizing:border-box; }
html,body { margin:0; background:var(--white); font-family:var(--font-sans); color:var(--navy-900);
  -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:var(--text-link); }
.wrap { max-width:var(--container-max); margin:0 auto; padding-left:32px; padding-right:32px; }

/* ---- eyebrow ---- */
.eyebrow { font-weight:600; font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--blue-500); display:inline-block; }

/* ---- buttons ---- */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:700; line-height:1; letter-spacing:.01em; cursor:pointer;
  border-radius:var(--radius-md); border:1px solid transparent; padding:12px 24px; font-size:var(--fs-body);
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out); }
.btn:active { transform:scale(.98); }
.btn-sm { padding:8px 16px; font-size:var(--fs-sm); gap:6px; border-radius:var(--radius-sm); }
.btn-lg { padding:16px 32px; font-size:var(--fs-lead); gap:10px; }
.btn-primary { background:var(--navy-900); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--navy-800); box-shadow:var(--shadow-md); }
.btn-secondary { background:#fff; color:var(--navy-900); border:1.5px solid var(--blue-400); }
.btn-secondary:hover { background:var(--sky-100); }
.btn-ghost { background:transparent; color:var(--blue-600); }
.btn-ghost:hover { background:var(--sky-100); }
.btn-accent { background:var(--navy-900); color:#fff; box-shadow:var(--shadow-sm); padding-left:30px; overflow:hidden; }
.btn-accent:hover { box-shadow:var(--shadow-glow); }
.btn-accent::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:var(--refraction); }
.btn-accent.btn-sm { padding-left:22px; }
.btn-accent.btn-sm::before { width:4px; }
.btn-full { width:100%; }
.btn svg { width:1.1em; height:1.1em; }

/* ---- cards ---- */
.card { background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:var(--space-6); }
.card-hover { transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out); }
.card-hover:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.card-glass { background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--shadow-md); }

/* ---- badge / tag ---- */
.badge { display:inline-flex; align-items:center; gap:5px; font-weight:700; line-height:1.4;
  font-size:var(--fs-sm); padding:4px 12px; border-radius:var(--radius-pill); border:1px solid transparent; }
.badge-sky { background:var(--sky-100); color:var(--navy-800); border-color:var(--sky-300); }
.badge-accent { background-image:var(--refraction); color:var(--navy-900); }
.tag { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:var(--fs-sm);
  padding:6px 12px; border-radius:var(--radius-sm); background:var(--sky-100); color:var(--navy-800);
  border:1px solid var(--sky-300); cursor:pointer; transition:all var(--dur-fast) var(--ease-out); }
.tag[aria-pressed="true"] { background:var(--navy-900); color:#fff; border-color:var(--navy-900); }

/* ---- inputs ---- */
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:var(--fs-sm); font-weight:600; color:var(--navy-800); }
.field .control { display:flex; align-items:center; gap:8px; background:#fff;
  border:1.5px solid var(--border-strong); border-radius:var(--radius-md); padding:0 14px;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); }
.field .control:focus-within { border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(74,111,165,.18); }
.field input { flex:1; border:none; outline:none; background:transparent; font-family:var(--font-sans);
  font-size:var(--fs-body); color:var(--navy-900); padding:12px 0; }
.field .control svg { width:18px; height:18px; color:var(--gray-400); }

/* ---- nav ---- */
.nav { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--border-subtle); }
.nav .wrap { display:flex; align-items:center; gap:32px; padding-top:14px; padding-bottom:14px; }
.nav nav { display:flex; gap:26px; margin-left:8px; }
.nav nav a { font-size:var(--fs-sm); font-weight:600; color:var(--navy-700); text-decoration:none; }
.nav nav a:hover { color:var(--navy-900); }
.nav .right { margin-left:auto; display:flex; gap:12px; align-items:center; }
.nav .right .partner { font-size:var(--fs-sm); font-weight:700; color:var(--blue-600); text-decoration:none; }

/* ---- hero ---- */
.hero { position:relative; overflow:hidden; background:var(--grad-lens); }
.hero .grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding-top:72px; padding-bottom:84px; position:relative; }
.hero h1 { margin:16px 0 0; font-size:clamp(38px,4.4vw,60px); font-weight:900; line-height:1.03;
  letter-spacing:-.02em; color:var(--navy-900); }
.hero h1 .light { font-weight:500; }
.hero .lead { margin:22px 0 0; font-size:var(--fs-lead); line-height:1.5; color:var(--navy-700); max-width:480px; }
.hero .actions { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero .assur { display:flex; gap:26px; margin-top:40px; flex-wrap:wrap; }
.hero .assur div { display:flex; align-items:center; gap:8px; color:var(--navy-700); font-size:var(--fs-sm); font-weight:600; }
.hero .assur svg { width:18px; height:18px; color:var(--blue-500); }
.hero .photo { position:relative; }
.hero .photo .frame { position:relative; border-radius:var(--radius-xl); overflow:hidden;
  box-shadow:var(--shadow-lg); aspect-ratio:4/5; }
.hero .photo .frame img { width:100%; height:100%; object-fit:cover; }
.hero .photo .float { position:absolute; left:-28px; bottom:40px; width:240px; padding:18px; }
.float-row { display:flex; align-items:center; gap:10px; }
.float-ic { width:40px; height:40px; border-radius:10px; background:var(--navy-900); color:#fff;
  display:flex; align-items:center; justify-content:center; }
.float-ic svg { width:20px; height:20px; }

/* lens arc motif */
.lens-arc { position:absolute; border-radius:50%; pointer-events:none;
  border:2px solid rgba(255,255,255,.75); box-shadow:inset 0 0 80px rgba(120,160,220,.35);
  background:conic-gradient(from 200deg,rgba(255,95,109,.18),rgba(255,196,0,.16),rgba(20,164,77,.16),rgba(74,111,165,.2),transparent 62%); }

/* ---- section headers ---- */
.section { padding-top:84px; padding-bottom:84px; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.sec-head h2 { margin:12px 0 0; font-size:var(--fs-h2); font-weight:800; color:var(--navy-900); line-height:1.1; }

/* ---- products ---- */
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.prod-grid { margin-top:36px; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px; }
.prod-card { padding:0; overflow:hidden; }
.prod-card .thumb { height:168px; overflow:hidden; position:relative; }
.prod-card .thumb img { width:100%; height:100%; object-fit:cover; }
.prod-card .thumb .badge { position:absolute; top:12px; left:12px; }
.prod-card .body { padding:20px 22px 24px; }
.prod-card h3 { margin:0; font-size:var(--fs-h4); font-weight:800; color:var(--navy-900); }
.prod-card p { margin:8px 0 16px; font-size:var(--fs-sm); line-height:1.55; color:var(--text-body); }

/* ---- stats ---- */
.stats { background:var(--sky-50); }
.stat-grid { margin-top:24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
.statcard { position:relative; overflow:hidden; background:#fff; border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:var(--space-6);
  display:flex; flex-direction:column; gap:8px; }
.statcard .top { display:flex; align-items:center; justify-content:space-between; }
.statcard .lbl { font-size:var(--fs-sm); font-weight:600; color:var(--text-muted); }
.statcard .val { font-size:var(--fs-h2); font-weight:800; color:var(--navy-900); line-height:1; }
.statcard .delta { font-size:var(--fs-sm); font-weight:600; }
.statcard svg { width:20px; height:20px; color:var(--blue-500); }
/* ---- hover: gradiente de refração "carrega" da esquerda + leve elevação ---- */
.statcard::after { content:""; position:absolute; top:0; left:0; height:4px; width:100%;
  background:var(--refraction); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out); }
.statcard:hover::after { transform:scaleX(1); }
.statcard:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* animação de entrada do "Por que Visiolux".
   Estado escondido só entra quando o JS marca .js-anim — sem JS, tudo visível. */
.stats.js-anim .statcard { opacity:0; transform:translateY(22px); }
.stats.js-anim .eyebrow { opacity:0; transform:translateY(10px); }
.stats.js-anim.in .statcard { opacity:1; transform:translateY(0);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.stats.js-anim.in .statcard:nth-child(1){ transition-delay:0ms; }
.stats.js-anim.in .statcard:nth-child(2){ transition-delay:90ms; }
.stats.js-anim.in .statcard:nth-child(3){ transition-delay:180ms; }
.stats.js-anim.in .statcard:nth-child(4){ transition-delay:270ms; }
/* hover precisa vencer a especificidade da entrada e ser rápido */
.stats.js-anim.in .statcard:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); transition-delay:0s; }
.stats.js-anim.in .eyebrow { opacity:1; transform:translateY(0);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
@media (prefers-reduced-motion:reduce){
  .stats.js-anim .statcard,.stats.js-anim .eyebrow{ opacity:1!important; transform:none!important; }
  .statcard::after{ display:none; }
}

/* ---- reels (vídeos verticais) ---- */
.reels { background:var(--white); }
.reels .head { text-align:center; margin-bottom:40px; }
.reels .head h2 { margin:12px 0 0; font-size:var(--fs-h2); font-weight:800; color:var(--navy-900); line-height:1.1; }
.reels .head p { margin:12px auto 0; max-width:520px; font-size:var(--fs-lead); color:var(--navy-700); line-height:1.5; }
.reels .row { display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.reel { position:relative; width:300px; max-width:80vw; aspect-ratio:9/16; border-radius:var(--radius-xl);
  overflow:hidden; box-shadow:var(--shadow-lg); background:var(--sky-100); border:1px solid var(--border-subtle); }
.reel video { width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   "Quanto sua ótica ganha" — calculadora + comparativo
   ============================================================ */
.ganho { background:var(--sky-50); position:relative; overflow:hidden; }
.ganho .head { max-width:640px; }
.ganho .head h2 { margin:12px 0 0; font-size:var(--fs-h2); font-weight:800; color:var(--navy-900); line-height:1.1; }
.ganho .head p { margin:16px 0 0; font-size:var(--fs-lead); color:var(--navy-700); line-height:1.5; }
.ganho .grid2 { display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:stretch; margin-top:40px; }

/* calculadora */
.calc { display:flex; flex-direction:column; gap:22px; }
.calc-field { display:flex; flex-direction:column; gap:10px; }
.calc-field .row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.calc-field .row label { font-size:var(--fs-sm); font-weight:700; color:var(--navy-800); }
.calc-field .row output { font-size:var(--fs-h4); font-weight:800; color:var(--navy-900); }
.vx-range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:var(--radius-pill);
  background:var(--sky-200); outline:none; }
.vx-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--navy-900); border:3px solid #fff; box-shadow:var(--shadow-md); cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out); }
.vx-range::-webkit-slider-thumb:hover { transform:scale(1.08); }
.vx-range::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--navy-900);
  border:3px solid #fff; box-shadow:var(--shadow-md); cursor:pointer; }
.vx-range:focus-visible { box-shadow:0 0 0 3px rgba(74,111,165,.25); }

.calc-out { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:4px; }
.out-tile { position:relative; overflow:hidden; background:#fff; border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:16px; display:flex; flex-direction:column; gap:4px; }
.out-tile .accent-top { position:absolute; top:0; left:0; right:0; height:4px; background:var(--refraction); }
.out-tile .k { font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.out-tile .v { font-size:1.5rem; font-weight:900; color:var(--navy-900); line-height:1.05; }
.out-tile .v small { font-size:var(--fs-sm); font-weight:700; color:var(--text-muted); }
.out-tile.hero-tile .v { color:var(--accent-green); }
.calc details { margin-top:2px; }
.calc summary { cursor:pointer; font-size:var(--fs-sm); font-weight:700; color:var(--blue-600); list-style:none; }
.calc summary::-webkit-details-marker { display:none; }
.calc .premises { display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; }
.calc .premises .p { flex:1; min-width:150px; }
.calc .premises .p label { display:block; font-size:var(--fs-xs); font-weight:700; color:var(--navy-800); margin-bottom:6px; }
.calc .premises .p input { width:100%; border:1.5px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:9px 12px; font-family:var(--font-sans); font-size:var(--fs-body); color:var(--navy-900); }
.calc .premises .p input:focus { outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(74,111,165,.15); }
.calc .disclaimer { font-size:var(--fs-xs); color:var(--text-muted); line-height:1.5; margin:2px 0 0; }

/* comparativo */
.compare { padding:0; overflow:hidden; }
.compare .crow { display:grid; grid-template-columns:1.2fr 1fr 1fr; align-items:stretch;
  padding:0 20px; }
/* divisórias só nas colunas laterais — a coluna Visiolux fica contínua */
.compare .crow:not(:last-child) .feat,
.compare .crow:not(:last-child) .other,
.compare .crow:not(:last-child) .cell:not(.colv) { border-bottom:1px solid var(--border-subtle); }
.compare .crow > * { padding-top:14px; padding-bottom:14px; }
.compare .crow.chead > * { padding-top:16px; padding-bottom:16px; }
.compare .feat { font-size:var(--fs-sm); font-weight:700; color:var(--navy-800);
  display:flex; align-items:center; }
.compare .cell { font-size:var(--fs-sm); color:var(--text-body); text-align:center; display:flex;
  align-items:center; justify-content:center; gap:6px; }
.compare .cell svg { width:16px; height:16px; }
.compare .vx { display:flex; align-items:center; justify-content:center; }
.compare .clogo { height:30px; width:auto; display:block; }
.compare .other { text-align:center; font-weight:700; color:var(--gray-500); align-self:center; }
/* coluna Visiolux: tira o gradiente manchado, usa tom sólido contínuo */
/* coluna Visiolux = coluna destacada, contínua e delimitada, com barra de refração no topo */
.compare .colv { background:var(--sky-50); position:relative;
  border-left:1.5px solid var(--border-brand); border-right:1.5px solid var(--border-brand); }
.compare .crow.chead .colv { border-top:1.5px solid var(--border-brand);
  border-radius:var(--radius-md) var(--radius-md) 0 0; padding-top:20px; }
.compare .crow.chead .colv::before { content:""; position:absolute; top:0; left:-1.5px; right:-1.5px;
  height:4px; background:var(--refraction); border-radius:var(--radius-md) var(--radius-md) 0 0; }
.compare .crow:last-child .colv { border-bottom:1.5px solid var(--border-brand);
  border-radius:0 0 var(--radius-md) var(--radius-md); }
.compare .crow .cell.good { color:var(--accent-green); font-weight:800; }

@media (max-width:920px){
  .ganho .grid2 { grid-template-columns:1fr; }
  .calc-out { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .calc-out { grid-template-columns:1fr; }
}

/* ============================================================
   Guia do Vendedor (diagnóstico) — nova seção
   ============================================================ */
.finder { position:relative; overflow:hidden; background:var(--grad-sky); }
.finder .shell { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start; position:relative; }
.finder .intro h2 { margin:12px 0 0; font-size:var(--fs-h2); font-weight:800; color:var(--navy-900); line-height:1.1; }
.finder .intro p { margin:18px 0 0; font-size:var(--fs-lead); line-height:1.5; color:var(--navy-700); max-width:420px; }
.finder .intro .note { margin-top:24px; font-size:var(--fs-sm); color:var(--text-muted); max-width:400px; line-height:1.6; }

.quiz { padding:28px; }
.quiz .progress { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.quiz .progress .track { flex:1; height:6px; border-radius:var(--radius-pill); background:var(--sky-200); overflow:hidden; }
.quiz .progress .bar { height:100%; width:0; background:var(--refraction); border-radius:var(--radius-pill);
  transition:width var(--dur-slow) var(--ease-out); }
.quiz .progress .count { font-size:var(--fs-xs); font-weight:700; color:var(--blue-600); letter-spacing:.04em; }

.q-step { display:none; animation:rise var(--dur-base) var(--ease-out); }
.q-step.active { display:block; }
@keyframes rise { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:translateY(0);} }
.q-step .kicker { font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500); }
.q-step h3 { margin:8px 0 20px; font-size:var(--fs-h4); font-weight:800; color:var(--navy-900); line-height:1.2; }
.opts { display:flex; flex-direction:column; gap:10px; }
.opt { display:flex; align-items:center; gap:14px; text-align:left; width:100%; cursor:pointer;
  background:#fff; border:1.5px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:14px 16px; font-family:var(--font-sans); transition:all var(--dur-fast) var(--ease-out); }
.opt:hover { border-color:var(--blue-400); background:var(--sky-50); }
.opt .dot { flex-shrink:0; width:22px; height:22px; border-radius:50%; border:2px solid var(--border-strong); }
.opt .txt { display:flex; flex-direction:column; gap:2px; }
.opt .txt strong { font-size:var(--fs-body); font-weight:700; color:var(--navy-900); }
.opt .txt span { font-size:var(--fs-sm); color:var(--text-muted); }
.quiz .back { margin-top:20px; }

/* resultado */
.result { display:none; }
.result.active { display:block; animation:rise var(--dur-base) var(--ease-out); }
.result .head { display:flex; align-items:center; gap:14px; }
.result .head .pill { display:inline-block; }
.result .lens { margin:16px 0 0; font-size:var(--fs-h3); font-weight:900; color:var(--navy-900); line-height:1.1; }
.result .why { margin:10px 0 0; font-size:var(--fs-body); line-height:1.55; color:var(--text-body); }
.result .argument { margin-top:20px; border-radius:var(--radius-md); background:var(--sky-50);
  border:1px solid var(--sky-200); padding:16px 18px; position:relative; }
.result .argument .accent { position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:var(--radius-pill); background:var(--refraction); }
.result .argument .lbl { font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-600); }
.result .argument p { margin:6px 0 0 0; font-size:var(--fs-sm); line-height:1.6; color:var(--navy-800); padding-left:12px; }
.result .argument .lbl { padding-left:12px; }
.result .also { margin-top:18px; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.55; }
.result .also b { color:var(--navy-800); }
.result .actions { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }

/* ---- CTA ---- */
.cta { position:relative; overflow:hidden; background:var(--grad-brand); }
.cta .grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
  padding-top:80px; padding-bottom:80px; position:relative; }
.cta h2 { margin:14px 0 0; font-size:var(--fs-h2); font-weight:800; color:#fff; line-height:1.1; }
.cta .lead { margin:18px 0 0; font-size:var(--fs-lead); color:var(--sky-200); line-height:1.5; max-width:460px; }
.cta .form h3 { margin:0 0 4px; font-size:var(--fs-h4); font-weight:800; color:var(--navy-900); }
.cta .form .muted { margin:0 0 18px; font-size:var(--fs-sm); color:var(--text-muted); }
.cta .form .stack { display:flex; flex-direction:column; gap:14px; }

/* ---- footer ---- */
.footer { background:var(--navy-950); color:var(--sky-200); }
.footer .grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px;
  padding-top:56px; padding-bottom:40px; }
.footer .logo { height:30px; filter:brightness(0) invert(1); }
.footer .about { margin:18px 0 0; font-size:var(--fs-sm); line-height:1.6; max-width:260px; color:var(--blue-300); }
.footer h4 { font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
.footer .col a { display:block; font-size:var(--fs-sm); color:var(--blue-300); text-decoration:none; margin-bottom:10px; }
.footer .col a:hover { color:#fff; }
.footer .bottom { border-top:1px solid rgba(255,255,255,.1); padding:18px 32px; text-align:center;
  font-size:var(--fs-xs); color:var(--blue-400); }

/* toast */
.toast { position:fixed; bottom:24px; right:24px; z-index:50; width:340px; box-shadow:var(--shadow-lg);
  border-radius:var(--radius-md); display:none; }
.toast.show { display:block; animation:rise var(--dur-base) var(--ease-out); }
.alert { display:flex; align-items:flex-start; gap:12px; background:#E4F6EC; border:1px solid #BCE6CD;
  border-radius:var(--radius-md); padding:14px 16px; color:#0E5A2C; }
.alert svg { width:20px; height:20px; color:#0E7A38; flex-shrink:0; margin-top:1px; }
.alert .title { font-weight:700; font-size:var(--fs-body); color:#0E7A38; }
.alert .msg { font-size:var(--fs-sm); line-height:1.5; }
.alert .x { margin-left:auto; border:none; background:transparent; cursor:pointer; color:#0E7A38; font-size:16px; }

/* responsivo */
@media (max-width:920px) {
  .hero .grid,.finder .shell,.cta .grid { grid-template-columns:1fr; }
  .hero .photo { order:-1; }
  .footer .grid { grid-template-columns:1fr 1fr; }
  .nav nav { display:none; }
}
@media (max-width:560px) {
  .wrap { padding-left:20px; padding-right:20px; }
  .footer .grid { grid-template-columns:1fr; }
}