/* =========================================================================
   Metodo LASER TIME - Landing Page
   Dra. Ana Paula Samways | Samways Laserterapia
   Folha unica, sem dependencias externas.

   Stack de fonte local: o desenho original pede 'Inter' e cai em Segoe UI /
   system-ui. Nenhuma requisicao externa de fonte - a pagina fica self-contained.
   ========================================================================= */

:root{
  --bg: #070d18;
  --navy: #0e1a2f;
  --cyan: #11fff8;
  --yellow: #ffde59;
  --ink: #eef3fb;
  --muted: #a9b6cc;
  --line: rgba(255,255,255,0.08);
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Inter','Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.55;}
a{color:inherit;}
header{display:flex; align-items:center; justify-content:space-between; padding:20px 5%; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(7,13,24,0.9); backdrop-filter:blur(6px); z-index:20;}
.logo{display:flex; align-items:center; gap:12px; font-weight:700; font-size:20px; letter-spacing:0.5px; text-decoration:none; color:inherit;}
.logo-chip{background:#fff; border-radius:10px; padding:5px 10px; display:flex; align-items:center;}
.logo-chip img{height:26px; display:block;}
.logo-sep{width:1px; height:22px; background:var(--line);}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--yellow); box-shadow:0 0 12px 3px var(--yellow); animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
@keyframes glowpulse{0%,100%{box-shadow:0 6px 24px rgba(255,222,89,0.25), 0 0 0 0 rgba(255,222,89,0.35);}50%{box-shadow:0 6px 30px rgba(255,222,89,0.45), 0 0 24px 4px rgba(255,222,89,0.25);}}
nav{display:flex; gap:28px; font-size:14px; color:var(--muted);}
.btn{display:inline-block; padding:14px 26px; border-radius:999px; font-weight:700; font-size:15px; text-decoration:none; cursor:pointer; border:none;}
.btn-primary{background:var(--yellow); color:#151200; animation:glowpulse 2.6s ease-in-out infinite;}
.btn-secondary{background:transparent; color:var(--ink); border:1.5px solid rgba(17,255,248,0.35); box-shadow:0 0 14px rgba(17,255,248,0.08);}
section{padding:80px 5%; position:relative; overflow:hidden;}
.hero{padding-top:64px; padding-bottom:50px;}
.glow-blob{position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0;}
.glow-blob.cyan{background:radial-gradient(circle, rgba(17,255,248,0.16), transparent 70%);}
.glow-blob.yellow{background:radial-gradient(circle, rgba(255,222,89,0.13), transparent 70%);}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:rgba(255,222,89,0.1); border:1px solid rgba(255,222,89,0.35); color:var(--yellow); font-size:12px; font-weight:700; letter-spacing:0.6px; margin-bottom:24px;}
.badge .b-dot{width:7px;height:7px;border-radius:50%;background:var(--yellow); box-shadow:0 0 10px 3px rgba(255,222,89,0.7); animation:pulse 1.8s infinite;}
h1{font-size:44px; line-height:1.15; max-width:920px; margin:0 0 22px 0; font-weight:800;}
.complement{font-size:19px; color:var(--muted); max-width:760px; margin-bottom:18px;}
.subtitle{font-size:16px; color:var(--muted); max-width:760px; margin-bottom:34px;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:8px;}
.laser-sweep{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;}
.laser-sweep::before{content:""; position:absolute; top:0; left:-30%; width:20%; height:100%; background:linear-gradient(100deg, transparent, rgba(17,255,248,0.10), transparent); animation:sweep 6s linear infinite;}
@keyframes sweep{0%{left:-30%;}100%{left:130%;}}
.hero-inner{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.25fr 0.95fr; gap:48px; align-items:start;}
.hero-form-col{position:sticky; top:100px;}

.section-divider{display:flex; justify-content:center; align-items:center; padding:0; position:relative; height:1px; background:var(--line);}
.section-divider span{position:absolute; width:180px; height:2px; background:linear-gradient(90deg, transparent, var(--cyan), var(--yellow), transparent); box-shadow:0 0 18px 3px rgba(17,255,248,0.35); border-radius:2px;}

.numbers{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--navy);}
.numbers .num{padding:30px 18px; text-align:center; border-right:1px solid var(--line);}
.numbers .num:last-child{border-right:none;}
.numbers .num .n{font-size:26px; font-weight:800; color:var(--cyan);}
.numbers .num .l{font-size:13px; color:var(--muted); margin-top:6px;}

h2.section-title{font-size:30px; max-width:820px; margin:0 0 18px 0; font-weight:800;}
.section-intro{color:var(--muted); max-width:760px; margin-bottom:40px; font-size:15.5px;}
.eh-tag{display:inline-block; padding:6px 14px; border-radius:999px; background:rgba(17,255,248,0.08); border:1px solid rgba(17,255,248,0.3); color:var(--cyan); font-size:12px; font-weight:700; margin-bottom:16px;}

.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.pillar{border:1px solid var(--line); border-radius:16px; padding:26px; background:var(--navy);}
.pillar .step{color:var(--cyan); font-weight:800; font-size:13px; margin-bottom:10px;}
.pillar h4{margin:0 0 8px 0; font-size:16.5px;}
.pillar p{margin:0; color:var(--muted); font-size:14px;}
.method-note{margin-top:34px; color:var(--muted); font-size:15px; max-width:820px; border-left:3px solid var(--cyan); padding-left:18px;}

.eixo-block{border-top:1px solid var(--line); padding:36px 0; display:grid; grid-template-columns:110px 1fr; gap:24px;}
.eixo-block:first-of-type{border-top:none; padding-top:8px;}
.eixo-num{color:var(--cyan); font-weight:800; font-size:13px; letter-spacing:0.5px;}
.eixo-block h4{margin:0 0 14px 0; font-size:20px; font-weight:800;}
.eixo-block p{color:var(--muted); font-size:15px; margin:0 0 14px 0; max-width:760px;}
.modal-tags{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 8px;}
.modal-tags span{border:1px solid rgba(17,255,248,0.3); background:rgba(17,255,248,0.06); color:var(--cyan); font-size:12.5px; padding:6px 12px; border-radius:999px;}
.modal-more{font-size:13px; color:var(--yellow); margin-top:6px; font-style:italic;}
.detail-box{background:var(--navy); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-top:16px;}
.detail-box .dt{color:var(--ink); font-weight:700; font-size:14px; margin-bottom:8px;}
.detail-box p{margin:0; font-size:13.5px;}

.principles{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;}
.principle{border:1px solid rgba(255,222,89,0.25); background:rgba(255,222,89,0.04); border-radius:16px; padding:24px; text-align:center;}
.principle .pn{color:var(--yellow); font-weight:800; font-size:12px; margin-bottom:10px;}
.principle p{margin:0; font-size:14.5px; color:var(--ink);}

.method-cta{margin-top:56px; text-align:center; border-top:1px solid var(--line); padding-top:44px;}
.method-cta h3{font-size:24px; max-width:640px; margin:0 auto 12px;}
.method-cta .sub{color:var(--muted); font-size:14px; max-width:520px; margin:0 auto 24px;}

.punch{color:var(--ink); font-size:14.5px; font-weight:600; margin-top:2px;}
.depth-strip{margin-top:40px; padding:32px; border-radius:18px; background:linear-gradient(135deg, rgba(17,255,248,0.07), rgba(255,222,89,0.05)); border:1px solid rgba(17,255,248,0.2);}
.depth-strip h5{margin:0 0 20px 0; font-size:15px; color:var(--cyan); text-transform:uppercase; letter-spacing:0.5px;}
.depth-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.depth-grid .d{font-size:14.5px; color:var(--ink); padding-left:18px; position:relative;}
.depth-grid .d::before{content:"·"; position:absolute; left:0; color:var(--cyan);}
.depth-grid .d b{display:block; color:var(--yellow); font-size:12.5px; text-transform:uppercase; margin-bottom:3px; letter-spacing:0.3px;}
strong.mark{color:var(--yellow); font-weight:700;}

.ticker{text-align:center; color:var(--muted); font-size:13.5px; margin-top:36px; padding-top:28px; border-top:1px solid var(--line);}
.ticker span{margin:0 10px;}
.ticker b{color:var(--cyan); font-weight:600;}
.principle-line{text-align:center; font-size:16.5px; font-style:italic; color:var(--ink); max-width:640px; margin:26px auto 0;}
.sci-details{max-width:820px; margin:22px auto 0;}
.sci-details summary{display:block; text-align:center; font-size:13px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:10px 18px; background:var(--navy); max-width:320px; margin:0 auto;}
.sci-details summary:hover{color:var(--cyan); border-color:var(--cyan);}
.sci-details[open] summary{color:var(--cyan); border-color:var(--cyan);}
.sci-details .sd-body{margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.sci-details .sd-body div{background:var(--navy); border:1px solid var(--line); border-radius:12px; padding:16px 18px;}
.sci-details .sd-body .dt{color:var(--ink); font-weight:700; font-size:13.5px; margin-bottom:6px;}
.sci-details .sd-body p{margin:0; font-size:13px; color:var(--muted);}
@media(max-width:900px){.sci-details .sd-body{grid-template-columns:1fr;}}

.isnt-is{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.card{border-radius:18px; padding:30px; border:1px solid var(--line);}
.card.no{background:rgba(255,90,90,0.05);}
.card.yes{background:rgba(17,255,248,0.05); border-color:rgba(17,255,248,0.25);}
.card h3{margin-top:0; font-size:19px;}
.card ul{padding-left:20px; margin:0; color:var(--muted); font-size:14.5px;}
.card ul li{margin-bottom:12px;}

.about{display:grid; grid-template-columns:0.9fr 1.2fr; gap:56px; align-items:center;}
.about-photo{border-radius:20px; overflow:hidden; border:1px solid var(--line); position:relative;}
.about-photo img{width:100%; display:block;}
.about-photo .tag{position:absolute; bottom:16px; left:16px; background:rgba(0,0,0,0.6); padding:8px 14px; border-radius:999px; font-size:12px; color:var(--yellow);}
.story p{color:var(--muted); font-size:15.5px; margin-bottom:16px;}
details{margin-top:8px; border-top:1px solid var(--line); padding-top:16px;}
summary{cursor:pointer; color:var(--cyan); font-weight:700; font-size:14.5px; list-style:none;}
summary::-webkit-details-marker{display:none;}
summary::before{content:"+ ";}
details[open] summary::before{content:"\2212 ";}
details p{margin-top:16px;}

.quote-card{max-width:720px; margin:40px auto 0; text-align:center; border-top:1px solid var(--line); padding-top:40px;}
.quote-card p{font-size:19px; font-style:italic; color:var(--ink);}
.quote-card .who{color:var(--muted); margin-top:14px; font-size:14px;}

.results-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.results-grid .col{border:1px solid var(--line); border-radius:18px; padding:28px; background:var(--navy);}
.results-grid h4{margin-top:0; color:var(--cyan); font-size:15px; text-transform:uppercase; letter-spacing:0.5px;}
.results-grid ul{padding-left:20px; color:var(--muted); font-size:14.5px; margin:0;}
.results-grid li{margin-bottom:10px;}

.form-mock{max-width:640px; margin:0 auto; background:var(--navy); border:1px solid var(--line); border-radius:20px; padding:34px;}
.form-mock.compact{padding:26px;}
.form-mock .field{margin-bottom:15px;}
/* :not() aqui e essencial: sem isso esta regra (0,2,1) vence .opt e
   .quiz-q (0,1,0) e o cartao de opcao nunca vira flex. */
.form-mock label:not(.opt):not(.quiz-q){display:block; font-size:13px; color:var(--muted); margin-bottom:6px;}
.form-mock input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-mock select,
.form-mock textarea{
  width:100%; background:#0a1322; border:1px solid var(--line); border-radius:10px; padding:11px 14px;
  font-size:14px; color:var(--ink); font-family:inherit; appearance:none; -webkit-appearance:none;
}
.form-mock select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a9b6cc'><path d='M5.25 7.5L10 12.25L14.75 7.5H5.25Z'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:14px;
}
.form-mock select option{color:#111;}
.form-mock textarea{resize:none; height:56px;}
.form-mock summary{font-size:13px; color:var(--muted); border:1px solid var(--line); border-radius:10px; padding:11px 14px; background:#0a1322;}
.form-mock summary:hover{color:var(--cyan);}
.form-mock details{border:none; margin-top:0; padding-top:0;}
.form-mock details[open] summary{border-color:var(--cyan); color:var(--cyan);}
.check-list{margin-top:10px; padding:12px 4px 2px; display:grid; gap:8px;}
.check-list label{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); margin:0;}
.step-no{color:var(--cyan); font-weight:800; margin-right:6px;}
.form-title{font-size:20px; font-weight:800; margin-bottom:4px;}
.form-sub{font-size:13px; color:var(--muted); margin-bottom:22px;}

footer{padding:40px 5%; text-align:center; color:var(--muted); font-size:13px; border-top:1px solid var(--line);}
@media(max-width:900px){
  .isnt-is{grid-template-columns:1fr;} .about{grid-template-columns:1fr;} .numbers{grid-template-columns:repeat(2,1fr);}
  .pillars{grid-template-columns:1fr;} .results-grid{grid-template-columns:1fr;}
  .hero-grid{grid-template-columns:1fr;} .hero-form-col{position:static;}
  .eixo-block{grid-template-columns:1fr;} .principles{grid-template-columns:1fr;} .depth-grid{grid-template-columns:1fr;}
  h1{font-size:30px;} nav{display:none;}
}

/* =========================================================================
   PRODUCAO - estados reais que a maquete nao tinha
   ========================================================================= */

/* --- acessibilidade ---------------------------------------------------- */
.skip-link{position:absolute; left:-9999px; top:0; z-index:100; background:var(--yellow); color:#151200; padding:12px 20px; border-radius:0 0 10px 0; font-weight:700; font-size:14px; text-decoration:none;}
.skip-link:focus{left:0;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}

/* qualquer display de autor vence o [hidden] do navegador; isto reverte */
[hidden]{display:none !important;}
.form-mock input:focus-visible,
.form-mock select:focus-visible,
.form-mock textarea:focus-visible{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(17,255,248,0.18);}

html{scroll-behavior:smooth; scroll-padding-top:96px;}
/* height:auto e obrigatorio: os atributos width/height do <img> entram como
   presentational hints, e sem isto o height do atributo vence o aspecto. */
img{max-width:100%; height:auto;}

/* --- formulario: obrigatorio, erro, desabilitado ----------------------- */
.form-mock .req{color:var(--yellow); margin-left:3px;}
.form-mock .hint{display:block; font-size:12px; color:var(--muted); opacity:.75; margin-top:5px;}
.form-mock ::placeholder{color:var(--muted); opacity:.55;}

.field.error input:not([type="checkbox"]):not([type="radio"]),
.field.error select,
.field.error textarea,
.field.error summary{border-color:#ff6b6b; box-shadow:0 0 0 3px rgba(255,107,107,0.14);}
.field.error .opt{border-color:rgba(255,107,107,0.55);}
.field.error legend.quiz-q{color:#ff8f8f;}
.field .error-msg{display:none; font-size:12.5px; color:#ff8f8f; margin-top:6px;}
.field.error .error-msg{display:block;}
.field.error > label{color:#ff8f8f;}

.form-mock input:not([type="radio"]):not([type="checkbox"]):disabled,
.form-mock select:disabled,
.form-mock textarea:disabled{opacity:.55; cursor:not-allowed;}

.check-list input[type="checkbox"]{width:16px; height:16px; flex:0 0 auto; accent-color:#11fff8; cursor:pointer; margin:0;}
.check-list label.maxed{opacity:.45;}
.check-list label.maxed input:not(:checked){cursor:not-allowed;}

/* honeypot anti-bot: fora da tela e fora da ordem de tabulacao */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* --- botao: estado de envio ------------------------------------------- */
button.btn{font-family:inherit;}
.btn[disabled]{cursor:not-allowed; opacity:.7;}
.btn.loading{position:relative; color:transparent !important; animation:none;}
.btn.loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(21,18,0,0.25); border-top-color:#151200; animation:spin .7s linear infinite;
}
.btn-secondary.loading::after{border-color:rgba(238,243,251,0.25); border-top-color:var(--ink);}
@keyframes spin{to{transform:rotate(360deg);}}

/* --- mensagem pos-envio ----------------------------------------------- */
.form-status{display:none; margin-top:16px; padding:14px 16px; border-radius:12px; font-size:14px; line-height:1.5;}
.form-status.show{display:block;}
.form-status.ok{background:rgba(17,255,248,0.08); border:1px solid rgba(17,255,248,0.35); color:var(--ink);}
.form-status.err{background:rgba(255,107,107,0.08); border:1px solid rgba(255,107,107,0.35); color:#ffbdbd;}
.form-status b{color:var(--cyan);}
.form-status.err b{color:#ff8f8f;}

.form-legal{font-size:11.5px; color:var(--muted); opacity:.8; margin:14px 0 0; text-align:center; line-height:1.5;}
.form-legal a{color:var(--cyan); text-decoration:none;}
.form-legal a:hover{text-decoration:underline;}

/* --- header / nav / botoes -------------------------------------------- */
nav a{text-decoration:none; transition:color .2s;}
nav a:hover{color:var(--cyan);}
.btn{text-decoration:none; transition:transform .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}

/* --- footer de producao ----------------------------------------------- */
footer{text-align:left;}
footer .f-inner{max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:start;}
footer .f-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
footer .f-brand .logo-chip{background:#fff; border-radius:10px; padding:5px 10px; display:inline-flex;}
footer .f-brand img{height:24px; display:block;}
footer .f-brand span{font-weight:700; color:var(--ink); font-size:15px; letter-spacing:.5px;}
footer p{margin:0 0 10px; max-width:440px; line-height:1.6;}
footer .f-col-title{color:var(--ink); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px;}
footer .f-links{display:flex; flex-direction:column; gap:10px;}
footer .f-links a{color:var(--muted); text-decoration:none;}
footer .f-links a:hover{color:var(--cyan);}
footer .f-bottom{max-width:1000px; margin:32px auto 0; padding-top:22px; border-top:1px solid var(--line); font-size:12px; opacity:.75;}

/* --- 404 -------------------------------------------------------------- */
.page-404{min-height:72vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.page-404 .code{font-size:78px; font-weight:800; color:var(--cyan); line-height:1; text-shadow:0 0 32px rgba(17,255,248,0.35);}
.page-404 h1{font-size:28px; max-width:520px; margin:14px 0 10px;}
.page-404 p{color:var(--muted); max-width:460px; margin:0 0 26px;}

/* =========================================================================
   RESPONSIVO extra
   ========================================================================= */
@media(max-width:900px){
  header{padding:14px 5%; gap:12px;}
  header .btn{padding:10px 16px !important; font-size:12px !important;}
  section{padding:56px 5%;}
  .hero{padding-top:40px;}
  footer .f-inner{grid-template-columns:1fr;}
  .form-mock{padding:24px 20px;}
  .quote-card p{font-size:17px;}
}
/* O CTA do header tem dois rotulos: o longo no desktop, o curto no mobile. */
.cta-short{display:none;}
.logo{white-space:nowrap;}
header .btn{white-space:nowrap;}

@media(max-width:560px){
  .cta-full{display:none;}
  .cta-short{display:inline;}
  .logo{font-size:14px; gap:8px; letter-spacing:0;}
  .logo .logo-chip img{height:22px !important;}
  .numbers{grid-template-columns:1fr;}
  .numbers .num{border-right:none; border-bottom:1px solid var(--line);}
  h1{font-size:26px;}
  h2.section-title{font-size:23px;}
  .logo{font-size:16px;}
  .cta-row .btn{width:100%; text-align:center;}
  .page-404 .code{font-size:58px;}
}

/* =========================================================================
   Respeita quem pediu menos movimento: a maquete tem 3 animacoes infinitas
   (pulse, glowpulse, sweep) sem nenhuma valvula de escape.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  .btn:hover{transform:none;}
  .laser-sweep{display:none;}
  /* o spinner de envio e feedback funcional, nao decoracao */
  .btn.loading::after{animation:spin .7s linear infinite !important; animation-duration:.7s !important; animation-iteration-count:infinite !important;}
}

/* Impressao: sem fundo escuro nem decoracoes */
@media print{
  body{background:#fff; color:#000;}
  header, .laser-sweep, .glow-blob, .form-mock, footer .f-links{display:none !important;}
  section{padding:16px 0; page-break-inside:avoid;}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:11px; color:#555;}
}

/* =========================================================================
   QUIZ: uma pergunta por vez. Responder fecha a etapa e abre a seguinte.
   ========================================================================= */

/* --- topo: barra de progresso e contador ------------------------------- */
.quiz-top{margin-bottom:24px;}
.quiz-bar{height:5px; border-radius:999px; background:rgba(255,255,255,0.07); overflow:hidden;}
.quiz-bar > span{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), var(--yellow));
  box-shadow:0 0 12px rgba(17,255,248,0.45);
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.quiz-count{margin:11px 0 0; font-size:12px; color:var(--muted); letter-spacing:.4px;}
.quiz-count b{color:var(--cyan); font-weight:800;}

/* --- etapas ------------------------------------------------------------ */
.quiz-step{display:none;}
.quiz-step.active{display:block; animation:quizIn .28s ease both;}
@keyframes quizIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

.quiz-q{
  display:block; width:100%; float:none;
  font-size:17.5px; font-weight:700; color:var(--ink); line-height:1.42;
  margin:0 0 18px; padding:0;
}
.quiz-q .quiz-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:25px; height:25px; margin-right:11px; flex:0 0 auto;
  border-radius:50%; background:rgba(17,255,248,0.12); border:1px solid rgba(17,255,248,0.35);
  color:var(--cyan); font-size:11.5px; font-weight:800; letter-spacing:0;
  position:relative; top:2px;
}
.quiz-hint{font-size:12.5px; color:var(--muted); margin:-8px 0 16px; line-height:1.5;}
.quiz-step .field{margin-bottom:0;}

/* --- opcoes clicaveis (radio e checkbox como cartoes) ------------------ */
.opt-field{border:none; padding:0; margin:0; min-width:0;}
.opt-list{display:grid; gap:9px;}
.opt{
  display:flex; align-items:center; gap:12px; cursor:pointer; margin:0; position:relative;
  background:#0a1322; border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  font-size:14.5px; color:var(--ink); line-height:1.4;
  transition:border-color .18s ease, background .18s ease;
}
.opt:hover{border-color:rgba(17,255,248,0.45); background:#0c1729;}
.opt input{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;}
.opt .mark{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.22); position:relative; display:block;
  transition:border-color .18s ease;
}
.opt.is-check .mark{border-radius:6px;}
.opt.checked{border-color:var(--cyan); background:rgba(17,255,248,0.07);}
.opt.checked .mark{border-color:var(--cyan); box-shadow:0 0 10px rgba(17,255,248,0.35);}
.opt.checked .mark::after{content:""; position:absolute; inset:4px; border-radius:inherit; background:var(--cyan);}
/* foco usa outline, nao borda: com borda ciano a primeira opcao parecia
   ja escolhida ao abrir a pergunta */
.opt:focus-within{outline:2px solid var(--cyan); outline-offset:2px;}
.opt.maxed{opacity:.4;}
.opt.maxed:hover{border-color:var(--line); background:#0a1322;}

/* --- navegacao --------------------------------------------------------- */
.quiz-nav{display:flex; gap:10px; align-items:center; margin-top:22px;}
.quiz-nav .btn{flex:1 1 auto; text-align:center;}
.quiz-back{
  flex:0 0 auto; background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:13px 18px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:color .18s ease, border-color .18s ease;
}
.quiz-back:hover{color:var(--cyan); border-color:rgba(17,255,248,0.4);}

/* --- tela final -------------------------------------------------------- */
.quiz-done{display:none; text-align:center; padding:14px 0 4px;}
.quiz-done.show{display:block; animation:quizIn .3s ease both;}
.quiz-done .qd-mark{
  width:58px; height:58px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(17,255,248,0.10); border:1px solid rgba(17,255,248,0.4);
  color:var(--cyan); font-size:26px; font-weight:800;
  box-shadow:0 0 26px rgba(17,255,248,0.25);
}
.quiz-done h3{margin:0 0 10px; font-size:20px;}
.quiz-done p{margin:0 auto; color:var(--muted); font-size:14.5px; max-width:420px; line-height:1.6;}

/* --- variante compacta (formulario do hero) ---------------------------- */
.form-mock.compact .quiz-q{font-size:15.5px; margin-bottom:15px;}
.form-mock.compact .opt{padding:12px 14px; font-size:14px;}
.form-mock.compact .quiz-top{margin-bottom:20px;}
.form-mock.compact .quiz-done .qd-mark{width:48px; height:48px; font-size:22px;}
.form-mock.compact .quiz-done h3{font-size:17px;}

@media(max-width:560px){
  .quiz-q{font-size:16px;}
  .quiz-nav{flex-wrap:wrap;}
  .quiz-back{width:100%; order:2;}
  .quiz-nav .btn{order:1; width:100%; flex-basis:100%;}
}

/* o quiz troca de etapa com animacao; quem pediu menos movimento nao ve */
@media (prefers-reduced-motion: reduce){
  .quiz-step.active, .quiz-done.show{animation:none;}
  .quiz-bar > span{transition:none;}
}

/* =========================================================================
   QUIZ TRAVADO: depois da primeira resposta o quiz assume a tela inteira
   e o scroll da pagina fica bloqueado, para a pessoa terminar o que comecou.
   ========================================================================= */

.quiz-backdrop{
  position:fixed; inset:0; z-index:60; display:none;
  background:rgba(7,13,24,0.93);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.quiz-backdrop.show{display:block; animation:lockFade .25s ease both;}
@keyframes lockFade{from{opacity:0;} to{opacity:1;}}

/* trava o scroll; o position:fixed do body e o que segura o iOS Safari,
   onde overflow:hidden sozinho nao basta */
body.quiz-locked{overflow:hidden;}

.form-mock.quiz.locked{
  position:fixed; z-index:61;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(640px, calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow-y:auto; overscroll-behavior:contain;
  margin:0; padding:34px 34px 30px;
  box-shadow:0 24px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(17,255,248,0.18);
  animation:lockIn .3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes lockIn{
  from{opacity:0; transform:translate(-50%,-46%) scale(.97);}
  to{opacity:1; transform:translate(-50%,-50%) scale(1);}
}

/* o cartao do hero e compacto; travado, ele usa o tamanho cheio */
.form-mock.compact.locked{padding:34px 34px 30px;}
.form-mock.compact.locked .quiz-q{font-size:17.5px; margin-bottom:18px;}
.form-mock.compact.locked .opt{padding:14px 16px; font-size:14.5px;}
.form-mock.compact.locked .quiz-top{margin-bottom:24px;}
.form-mock.quiz.locked .form-title{font-size:19px;}
.form-mock.quiz.locked .form-sub{margin-bottom:20px;}

/* saida discreta: existe para ninguem ficar preso de verdade */
.quiz-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; padding:0;
  border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,0.04);
  color:var(--muted); font-size:18px; line-height:1; cursor:pointer; font-family:inherit;
  transition:color .18s ease, border-color .18s ease;
}
.quiz-close:hover{color:var(--cyan); border-color:rgba(17,255,248,0.4);}

.quiz-exit{
  margin-top:22px; background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:12px 22px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:color .18s ease, border-color .18s ease;
}
.quiz-exit:hover{color:var(--cyan); border-color:rgba(17,255,248,0.4);}

@media(max-width:640px){
  /* no celular vale a tela toda: sem borda, sem raio, sem margem */
  .form-mock.quiz.locked{
    top:0; left:0; transform:none;
    width:100%; height:100%; max-height:100%;
    border:none; border-radius:0;
    padding:56px 20px 34px;
    animation:lockUp .28s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes lockUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
  .form-mock.compact.locked{padding:56px 20px 34px;}
  .quiz-close{top:16px; right:16px;}
}

@media (prefers-reduced-motion: reduce){
  .quiz-backdrop.show, .form-mock.quiz.locked{animation:none;}
}