:root{
  --roxo:#5F259F;--escuro:#2F1C50;--fundo:#F5EFED;--lilas:#A199FF;--bruma:#D2D2FF;--areia:#D1CCBD;
  --card:#fbf8f7;--linha:#e0dae5;--suave:#6b5c85;--erro:#9b2f38;
  --display:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --texto:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fundo);color:var(--escuro);font-family:var(--texto);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img{display:block;max-width:100%}
.pagina{position:relative;min-height:100dvh;display:flex;flex-direction:column}

/* Hero */
.hero-fundo{position:absolute;inset:0 0 auto 0;height:440px;overflow:hidden;z-index:0}
.hero-fundo img{width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.hero-veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(47,28,80,.72) 0%,rgba(47,28,80,.86) 60%,var(--fundo) 100%)}
.layout{position:relative;z-index:1;flex:1;width:100%;max-width:1240px;margin:0 auto;padding:24px 16px 8px}
.hero{color:#fff;padding:4px 4px 22px}
.logo{height:34px;width:auto;margin-bottom:22px}
.eyebrow{font:600 12px/1.2 var(--texto);letter-spacing:.16em;text-transform:uppercase;color:var(--bruma);margin:0 0 10px}
.hero-titulo{font:300 32px/1.05 var(--display);letter-spacing:-.02em;margin:0;max-width:16ch}
.beneficios{display:none;list-style:none;margin:28px 0 0;padding:0}
.beneficios li{display:flex;align-items:center;gap:14px;font:500 16px/1.35 var(--texto);margin-bottom:16px;color:#fff}
.ben-ico{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:var(--bruma)}
.ben-ico svg{width:22px;height:22px}

/* Cartão do formulário */
.cartao{position:relative;background:var(--card);border-radius:24px;padding:22px 18px 24px;box-shadow:0 24px 60px -28px rgba(47,28,80,.45);overflow:hidden}
.passo{display:flex;flex-direction:column;animation:entra .45s var(--ease) both}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.progresso{display:flex;justify-content:space-between;font:500 12px/1 var(--texto);color:var(--suave)}
.barra{height:4px;background:var(--linha);border-radius:4px;margin:8px 0 20px;overflow:hidden}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--roxo),var(--lilas));border-radius:4px;transition:width .6s var(--ease)}
.barra i.meio{width:50%}
.barra i.cheia{width:100%}
h1{font:600 24px/1.18 var(--display);letter-spacing:-.01em;color:var(--escuro);margin:0 0 18px}
form{display:flex;flex-direction:column}
fieldset{border:0;margin:0;padding:0;min-width:0}
.grupo{font:600 11px/1 var(--texto);letter-spacing:.16em;text-transform:uppercase;color:var(--suave);margin:4px 0 10px;padding:0}
.ramos{display:grid;gap:10px;margin-bottom:14px}
.ramos.grade{grid-template-columns:1fr 1fr}

/* Cards fotográficos */
.ramo{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:150px;padding:14px;border-radius:18px;overflow:hidden;cursor:pointer;color:#fff;background:var(--escuro);box-shadow:0 0 0 2px transparent;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.ramo.largo{min-height:112px}
.ramo input{position:absolute;opacity:0;pointer-events:none}
.ramo-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:blur(3px) saturate(.9);transform:scale(1.12);transition:filter .45s var(--ease),transform .6s var(--ease)}
.ramo-veu{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(95,37,159,.35) 0%,rgba(47,28,80,.78) 55%,rgba(47,28,80,.94) 100%)}
.ramo .ico{width:28px;height:28px;color:var(--bruma);margin-bottom:auto}
.txt{display:flex;flex-direction:column;gap:2px}
.txt b{font:600 16px/1.2 var(--display);letter-spacing:-.005em}
.txt small{font:400 12.5px/1.35 var(--texto);color:#f1ecf7}
.ramo-check{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--lilas);color:var(--escuro);display:grid;place-items:center;transform:scale(0);transition:transform .3s var(--ease)}
.ramo-check svg{width:15px;height:15px}
.ramo:hover .ramo-foto,.ramo:has(input:checked) .ramo-foto{filter:blur(0) saturate(1);transform:scale(1.04)}
.ramo:hover{transform:translateY(-2px)}
.ramo:has(input:checked){box-shadow:0 0 0 3px var(--lilas),0 14px 30px -14px rgba(95,37,159,.7)}
.ramo:has(input:checked) .ramo-check{transform:scale(1)}
.ramo:has(input:focus-visible){outline:3px solid var(--roxo);outline-offset:3px}

/* Botões */
.btn{margin-top:8px;width:100%;min-height:56px;border:0;border-radius:16px;background:var(--roxo);color:#fff;font:600 16px/1 var(--texto);cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s;box-shadow:0 12px 24px -12px rgba(95,37,159,.8)}
.btn:hover:not(:disabled){background:var(--escuro)}
.btn:active:not(:disabled){transform:scale(.99)}
.btn:disabled{background:#d8d2df;color:#6b5c85;box-shadow:none;cursor:not-allowed}
.btn:focus-visible,.link:focus-visible{outline:3px solid var(--lilas);outline-offset:3px}
.btn.vazado{background:transparent;color:var(--roxo);border:1.5px solid var(--roxo);box-shadow:none}
.btn.vazado:hover{background:var(--roxo);color:#fff}

/* Etapa 2 */
.ramo-escolhido{display:flex;align-items:center;gap:12px;background:#efeaf6;border-radius:14px;padding:8px 12px 8px 8px;font-size:14px;color:var(--escuro);margin-bottom:20px}
.ramo-escolhido img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.ramo-escolhido span{flex:1}
.link{background:none;border:0;color:var(--roxo);text-decoration:underline;text-underline-offset:3px;font:600 14px var(--texto);cursor:pointer;padding:8px 4px;border-radius:6px}
.campo{display:flex;flex-direction:column;gap:7px;font:500 13px var(--texto);color:var(--escuro);margin-bottom:16px}
.campo input{height:54px;border:1.5px solid var(--linha);border-radius:14px;padding:0 16px;font:400 16px var(--texto);background:#fff;color:var(--escuro);transition:border-color .2s,box-shadow .2s}
.campo input::placeholder{color:#a49bb4}
.campo input:focus{outline:none;border-color:var(--roxo);box-shadow:0 0 0 4px rgba(161,153,255,.4)}
.campo input[aria-invalid=true]{border-color:var(--erro)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso{font:400 12.5px/1.5 var(--texto);color:var(--suave);margin:0 0 14px}
.erro{color:var(--erro);font:500 13.5px/1.4 var(--texto);margin:0 0 10px}

/* Confirmação */
.ok{align-items:center;text-align:center;padding-top:10px}
#confete{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.check{width:88px;height:88px;margin:8px 0 18px}
.check svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.check circle{stroke:var(--roxo);stroke-width:3;fill:#efeaf6;stroke-dasharray:151;stroke-dashoffset:151;animation:traco .6s var(--ease) forwards}
.check path{stroke:var(--roxo);stroke-width:4;stroke-dasharray:40;stroke-dashoffset:40;animation:traco .4s .5s var(--ease) forwards}
@keyframes traco{to{stroke-dashoffset:0}}
.ok h1{margin-bottom:8px}
.ok h1:focus{outline:none}
.sub{color:var(--suave);font:400 15px/1.5 var(--texto);margin:0 0 22px}
.resumo{position:relative;isolation:isolate;width:100%;height:150px;border-radius:18px;overflow:hidden;margin-bottom:18px;text-align:left}
.resumo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.resumo-veu{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(47,28,80,.92) 0%,rgba(47,28,80,.55) 100%)}
.resumo-txt{position:absolute;left:20px;bottom:18px;display:flex;flex-direction:column;gap:4px;color:#fff}
.resumo-txt small{font:600 11px/1 var(--texto);letter-spacing:.16em;text-transform:uppercase;color:var(--bruma)}
.resumo-txt b{font:600 24px/1.1 var(--display)}

footer{position:relative;z-index:1;text-align:center;font:400 12px var(--texto);color:var(--suave);padding:20px 16px 28px}

@media (min-width:600px){
  .layout{padding:40px 28px 12px}
  .cartao{max-width:560px;margin:0 auto;padding:30px 30px 32px}
  .hero{max-width:560px;margin:0 auto}
}

@media (min-width:960px){
  .hero-fundo{position:fixed;inset:0;height:auto}
  .hero-veu{background:linear-gradient(100deg,rgba(47,28,80,.92) 0%,rgba(47,28,80,.78) 45%,rgba(95,37,159,.45) 100%)}
  .layout{display:grid;grid-template-columns:1fr 520px;gap:64px;align-items:center;padding:56px 40px 24px;min-height:calc(100dvh - 60px)}
  .hero{max-width:none;margin:0;padding:0}
  .logo{height:46px;margin-bottom:56px}
  .hero-titulo{font-size:56px;max-width:13ch}
  .beneficios{display:block}
  .cartao{max-width:none;margin:0;background:rgba(251,248,247,.84);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.55);box-shadow:0 40px 80px -30px rgba(18,8,36,.6)}
  footer{color:var(--bruma)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .ramo:hover{transform:none}
}

/* Desktop: a página inteira cabe na janela (de ~700 a ~1100px de altura), sem scroll. */
@media (min-width:960px) and (min-height:650px){
  .pagina{height:100dvh;overflow:hidden}
  .layout{flex:1;min-height:0;padding:clamp(16px,3.5vh,48px) 40px clamp(6px,1vh,12px);gap:clamp(40px,5vw,72px);grid-template-columns:1fr clamp(440px,36vw,520px)}
  .logo{height:clamp(32px,4.4vh,46px);margin-bottom:clamp(20px,5vh,56px)}
  .eyebrow{margin-bottom:clamp(6px,1.2vh,12px)}
  .hero-titulo{font-size:clamp(38px,5.6vh,60px)}
  .beneficios{margin-top:clamp(16px,3vh,32px)}
  .beneficios li{margin-bottom:clamp(8px,1.6vh,16px);font-size:clamp(14px,1.7vh,16px)}
  .ben-ico{width:clamp(36px,4.6vh,44px);height:clamp(36px,4.6vh,44px)}
  .cartao{max-height:100%;padding:clamp(16px,3vh,32px) clamp(22px,2.4vw,32px)}
  .barra{margin:clamp(6px,1vh,8px) 0 clamp(10px,2vh,20px)}
  h1{font-size:clamp(19px,2.8vh,26px);margin-bottom:clamp(10px,1.8vh,18px)}
  .grupo{margin:2px 0 clamp(6px,1vh,10px)}
  .ramos{gap:clamp(6px,1vh,10px);margin-bottom:clamp(6px,1.2vh,14px)}
  .ramo{min-height:0;height:clamp(84px,14.5vh,150px);padding:clamp(10px,1.5vh,14px) 14px;gap:4px}
  .ramo.largo{height:clamp(66px,10.5vh,112px)}
  .ramo .ico{width:clamp(22px,3vh,28px);height:clamp(22px,3vh,28px)}
  .txt small{font-size:clamp(11.5px,1.5vh,12.5px)}
  .btn{min-height:clamp(46px,6.2vh,56px);margin-top:clamp(4px,.8vh,8px)}
  .ramo-escolhido{margin-bottom:clamp(10px,2vh,20px)}
  .campo{margin-bottom:clamp(8px,1.6vh,16px)}
  .campo input{height:clamp(44px,5.8vh,54px)}
  .aviso{margin-bottom:clamp(8px,1.4vh,14px)}
  .check{width:clamp(60px,9vh,88px);height:clamp(60px,9vh,88px);margin:clamp(2px,.8vh,8px) 0 clamp(8px,1.8vh,18px)}
  .sub{margin-bottom:clamp(10px,2.2vh,22px)}
  .resumo{height:clamp(96px,15vh,150px);margin-bottom:clamp(10px,1.8vh,18px)}
  footer{padding:clamp(6px,1.2vh,14px) 16px clamp(8px,1.6vh,18px)}
}