/* ========================================================================= ADR PRIME — Estilos não-críticos (o crítico, da primeira tela, está inline no do index.html) ========================================================================= */ /* ---------- Tipografia de seção ---------- */ .sec-title{font-size:24px;line-height:1.25;font-weight:800;letter-spacing:-.4px;margin-bottom:14px} .sec-title.big{font-size:28px} .sec-title.center{text-align:center} .sec-text{color:var(--muted);font-size:16.5px;margin-bottom:14px} .sec-text.center{text-align:center} .sec-text:last-child{margin-bottom:0} .muted{color:var(--muted)} .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .eyebrow.center{text-align:center} .center{text-align:center} /* ---------- Lista de dor ---------- */ .pain-list{list-style:none;display:grid;gap:12px;margin:18px 0} .pain-list li{background:var(--surface);border:1px solid var(--border);border-left:3px solid #e06a6a; padding:14px 16px;border-radius:12px;font-size:16px} .pain-list b{color:var(--text)} /* ---------- Big idea ---------- */ .bigidea{background:linear-gradient(180deg,#0c1424,#0a0f1a)} .mech-grid{display:grid;gap:14px;margin-top:24px} .mech{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px} .mech-ico{font-size:26px;margin-bottom:8px} .mech h3{font-size:18px;margin-bottom:6px} .mech p{color:var(--muted);font-size:15.5px} .mech b{color:var(--text)} /* ---------- Case ---------- */ .case{background:var(--surface)} .case-figure{margin:18px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)} .case-figure img{width:100%;aspect-ratio:3/2;object-fit:cover} .case-figure figcaption{font-size:13px;color:var(--muted);padding:10px 14px;background:var(--surface-2);text-align:center} .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0} .stat{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:16px 8px;text-align:center} .stat-num{display:block;font-size:21px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .stat-lbl{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.3} /* ---------- Como funciona ---------- */ .how{list-style:none;display:grid;gap:14px;margin-top:8px} .how li{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);padding:16px;border-radius:12px} .how .num,.next-steps .num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--grad); color:#06223a;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px} .how b{color:var(--text)} .how div{color:var(--muted);font-size:15.5px} /* ---------- Para quem é / não é ---------- */ .fit-grid{display:grid;gap:14px;margin-top:8px} .fit-col{border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:var(--surface)} .fit-col h3{font-size:17px;margin-bottom:12px} .fit-col ul{list-style:none;display:grid;gap:9px} .fit-col li{font-size:15.5px;padding-left:26px;position:relative;color:var(--text)} .fit-col.yes{border-top:3px solid #4fbf86} .fit-col.no{border-top:3px solid #c98a3e} .fit-col.yes li::before{content:"✓";position:absolute;left:0;color:#4fbf86;font-weight:800} .fit-col.no li::before{content:"✕";position:absolute;left:0;color:#c98a3e;font-weight:800} /* ========================================================================= FORMULÁRIO / MOTOR DE FUNIL ========================================================================= */ .apply{background:linear-gradient(180deg,#0a0f1a,#0c1424)} #funnel-root{margin-top:22px;min-height:420px} /* min-height evita layout shift */ .funnel-card{background:var(--surface);border:1px solid var(--border);border-radius:20px; padding:24px 20px;box-shadow:0 20px 50px rgba(0,0,0,.35)} /* progresso */ .progress{height:7px;background:var(--surface-2);border-radius:99px;overflow:hidden} .progress>span{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .35s ease} .progress-text{font-size:12.5px;color:var(--muted);margin:8px 0 18px;font-weight:600;letter-spacing:.3px} .step-title{font-size:21px;line-height:1.3;font-weight:800;margin-bottom:8px} .step-subtitle{color:var(--muted);font-size:15.5px;margin-bottom:18px} .auto-hint{text-align:center;color:var(--muted);font-size:12.5px;margin-top:14px;opacity:.75} /* bloco de confiança */ .trust{display:flex;gap:10px;align-items:flex-start;background:rgba(95,198,242,.08); border:1px solid rgba(95,198,242,.25);border-radius:12px;padding:12px 14px;margin-bottom:18px; color:#bfe6fb;font-size:13.5px} .trust svg{flex:0 0 auto;margin-top:1px} /* campos */ .field{margin-bottom:18px;border:0} .field-label{display:block;font-weight:700;font-size:15.5px;margin-bottom:9px;color:var(--text)} .field-hint{font-size:13px;color:var(--muted);margin:-4px 0 9px} .req{color:#ff9c9c} .opt{color:var(--muted);font-weight:500;font-size:13px} .input{width:100%;font-family:inherit;font-size:16px;color:var(--text); background:var(--surface-2);border:1.5px solid var(--border);border-radius:12px;padding:14px 14px} .input::placeholder{color:#6f819b} .input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(95,198,242,.25)} .input[aria-invalid="true"]{border-color:#ff7b7b;box-shadow:0 0 0 3px rgba(255,123,123,.18)} select.input{appearance:none;-webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat} /* escolhas (radio em formato de cartão) */ .choices{display:grid;gap:10px} .choice{display:block;cursor:pointer;position:relative} .choice input{position:absolute;opacity:0;width:1px;height:1px} .choice-box{display:flex;align-items:center;gap:12px;background:var(--surface-2); border:1.5px solid var(--border);border-radius:12px;padding:15px 16px;transition:border-color .12s,background .12s} .choice-dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid #51688a;position:relative;transition:border-color .12s} .choice-label{font-size:15.5px;line-height:1.35} .choice input:checked + .choice-box{border-color:var(--brand);background:rgba(95,198,242,.1)} .choice input:checked + .choice-box .choice-dot{border-color:var(--brand)} .choice input:checked + .choice-box .choice-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--grad)} .choice input:focus-visible + .choice-box{outline:3px solid #bfe6fb;outline-offset:2px} .choice:hover .choice-box{border-color:#3a557d} /* erros */ .field-error{color:#ff9c9c;font-size:13.5px;margin-top:7px;min-height:0} .field-error:empty{margin:0} .error-summary{background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.4);border-radius:12px; padding:14px 16px;margin-bottom:18px;color:#ffc9c9;font-size:14.5px} .error-summary strong{display:block;margin-bottom:6px;color:#ff9c9c} .error-summary ul{margin:0;padding-left:18px} .error-summary a{color:#ffc9c9;text-decoration:underline} .error-summary:focus{outline:3px solid #ff9c9c;outline-offset:2px;border-radius:12px} /* ações */ .step-actions{display:flex;gap:12px;align-items:center;margin-top:24px} .step-actions .btn-primary{flex:1;text-align:center} .btn-back{background:transparent;border:1.5px solid var(--border);color:var(--muted); font-family:inherit;font-size:15px;font-weight:600;padding:15px 18px;border-radius:12px;cursor:pointer} .btn-back:hover{color:var(--text);border-color:#3a557d} .btn-back:focus-visible{outline:3px solid #bfe6fb;outline-offset:2px} .btn-back.center{display:block;margin:16px auto 0} .btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none} /* telas finais */ .end-card{text-align:center} .end-icon{font-size:46px;margin-bottom:8px} .end-body{color:var(--muted);font-size:16px;margin:6px 0 18px} .end-body p{margin-bottom:10px} .next-steps{list-style:none;text-align:left;display:grid;gap:12px;margin:18px 0} .next-steps li{display:flex;gap:12px;align-items:flex-start;background:var(--surface-2); border:1px solid var(--border);padding:14px;border-radius:12px;font-size:15px} .end-note{font-size:13.5px;color:var(--muted);background:rgba(255,210,122,.08); border:1px solid rgba(255,210,122,.25);border-radius:12px;padding:12px 14px;margin-top:6px} .success .end-icon{filter:drop-shadow(0 4px 12px rgba(79,191,134,.4))} .resume-card{text-align:center} /* ========================================================================= FAQ ========================================================================= */ .faq details{background:var(--surface);border:1px solid var(--border);border-radius:12px; margin-bottom:10px;overflow:hidden} .faq summary{cursor:pointer;font-weight:700;font-size:16px;padding:16px 18px;list-style:none; position:relative;padding-right:46px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%); font-size:22px;color:var(--brand);font-weight:400} .faq details[open] summary::after{content:"–"} .faq summary:focus-visible{outline:3px solid #bfe6fb;outline-offset:-3px;border-radius:12px} .faq details p{padding:0 18px 16px;color:var(--muted);font-size:15.5px} /* ========================================================================= CTA FINAL + FOOTER ========================================================================= */ /* Botão sticky fixo no rodapé da viewport */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60; padding:12px 0 14px;pointer-events:none; background:linear-gradient(180deg,rgba(10,15,26,0),rgba(10,15,26,.94) 38%); transform:translateY(130%);transition:transform .26s ease} .sticky-cta.show{transform:translateY(0);pointer-events:auto} .sticky-cta .btn-primary{box-shadow:0 6px 28px rgba(0,0,0,.55),0 8px 24px rgba(46,144,214,.45)} @supports (padding:max(0px)){ .sticky-cta{padding-bottom:max(14px,env(safe-area-inset-bottom))} } .final-cta{background:linear-gradient(180deg,#0c1424,#0a0f1a);text-align:center} .final-cta .btn-primary{margin-top:8px} .site-footer{padding:32px 0 40px;border-top:1px solid var(--border);text-align:center} .logo.small{height:31px;margin:0 auto 16px;opacity:.85} .disclaimer{font-size:12px;color:#6f819b;line-height:1.6;max-width:560px;margin:0 auto 14px} .copyright{font-size:12.5px;color:var(--muted)} /* ========================================================================= RESPONSIVO (acima de 600px o container já trava em 600px) ========================================================================= */ @media (min-width:560px){ h1{font-size:34px} .sec-title{font-size:26px} .sec-title.big{font-size:32px} .mech-grid{grid-template-columns:1fr} .fit-grid{grid-template-columns:1fr 1fr} } /* ========================================================================= ACESSIBILIDADE ========================================================================= */ .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} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* foco visível global para teclado */ a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{ outline:3px solid #bfe6fb;outline-offset:2px } /* Tema escuro fixo (premium). Não invertemos em modo claro para evitar texto escuro sobre as seções de fundo escuro fixo. */