.cadastro-page {
  background: #f3f5f8;
  min-height: 100vh;
}

.cadastro-shell {
  display: grid;
  grid-template-columns: minmax(350px, 0.82fr) minmax(640px, 1.18fr);
  min-height: 100vh;
}

.cadastro-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 5vw, 72px);
  color: #fff;
  background:
    radial-gradient(circle at 15% 15%, rgba(240, 100, 59, .28), transparent 34%),
    radial-gradient(circle at 90% 80%, rgba(240, 100, 59, .12), transparent 32%),
    #172033;
}

.cadastro-hero::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: -180px;
  bottom: -180px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018);
}

.cadastro-marca {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  color: #fff;
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 750;
}

.cadastro-marca img { width: 42px; height: 42px; border-radius: 11px; }
.cadastro-hero-conteudo { position: relative; z-index: 1; margin: auto 0; max-width: 570px; }
.cadastro-etiqueta { color: #ffb198; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cadastro-hero h1 { margin: 20px 0; color: #fff; font-size: clamp(2.35rem, 4.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.05em; }
.cadastro-hero-conteudo > p { max-width: 520px; color: #c5cedd; font-size: 1.05rem; line-height: 1.65; }
.cadastro-beneficios { display: grid; gap: 18px; margin: 34px 0 0; padding: 0; list-style: none; }
.cadastro-beneficios li { display: flex; align-items: center; gap: 14px; }
.cadastro-beneficios li > span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; color: #fff; background: #ef673f; border-radius: 50%; font-weight: 800; }
.cadastro-beneficios strong, .cadastro-beneficios small { display: block; }
.cadastro-beneficios strong { color: #fff; font-size: .95rem; }
.cadastro-beneficios small { margin-top: 3px; color: #9faabd; font-size: .82rem; }
.cadastro-seguranca { position: relative; z-index: 1; margin: 0; color: #8995a8; font-size: .78rem; }

.cadastro-painel { display: flex; justify-content: center; padding: 46px clamp(28px, 5vw, 76px); background: #f5f6f8; }
.cadastro-card { width: min(760px, 100%); }
.cadastro-cabecalho { margin-bottom: 30px; }
.cadastro-passos { color: #d85a30; font-size: .72rem; font-weight: 800; letter-spacing: .11em; }
.cadastro-cabecalho h2 { margin: 8px 0 7px; color: #20283a; font-size: 2rem; letter-spacing: -.035em; }
.cadastro-cabecalho p { margin: 0; color: #687386; font-size: .92rem; }

#form-cadastro { display: grid; gap: 18px; }
#form-cadastro fieldset { min-width: 0; margin: 0; padding: 23px 25px 25px; border: 1px solid #e2e6ec; border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(22,32,51,.045); }
#form-cadastro legend { display: flex; align-items: center; gap: 9px; padding: 0 8px 0 0; color: #263047; font-size: .96rem; font-weight: 750; }
#form-cadastro legend span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #d85a30; background: #fff0eb; font-size: .76rem; }
.fieldset-ajuda { margin: -2px 0 16px; color: #7b8595; font-size: .79rem; }
.cadastro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo-largo { grid-column: 1 / -1; }
.campo label { margin: 0 0 7px; color: #434e61; font-size: .79rem; font-weight: 650; }
.campo label b { color: #d85a30; }
.campo label em { color: #929baa; font-size: .71rem; font-style: normal; font-weight: 500; }
.campo input { min-height: 46px; padding: 11px 13px; border-color: #dfe4eb; background: #fafbfc; color: #20283a; }
.campo input::placeholder { color: #a2aab7; }
.campo input:focus { outline: none; border-color: #e57250; box-shadow: 0 0 0 3px rgba(216,90,48,.12); background: #fff; }
.dados-opcionais { margin-top: 15px; padding-top: 15px; border-top: 1px solid #edf0f4; }
.dados-opcionais summary { cursor: pointer; width: fit-content; color: #5d6879; font-size: .78rem; font-weight: 700; }
.dados-opcionais summary span { margin-left: 5px; color: #929baa; font-size: .68rem; font-weight: 500; }
.dados-opcionais>p { margin: 9px 0 14px; color: #8a94a3; font-size: .72rem; }
.email-sugestao { margin: 7px 0 0; color: #5d6879; font-size: .78rem; line-height: 1.4; }
.email-sugestao[hidden] { display: none; }
.email-sugestao button { display: inline; width: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: #a8441f; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; transition: color .15s; }
.email-sugestao button:hover { color: #8a3518; }
.email-sugestao button:focus-visible { outline: 2px solid #e57250; outline-offset: 2px; border-radius: 3px; }
.cadastro-google { margin: 0; text-align: center; }
.cadastro-google[hidden], .cadastro-google-conta[hidden] { display: none; }
.cadastro-google-botao { display: flex; justify-content: center; min-height: 44px; }
.cadastro-google > p { margin: 10px 0 0; color: #6b7585; font-size: .78rem; }
.cadastro-ou { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; color: #8a94a3; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.cadastro-ou::before, .cadastro-ou::after { content: ""; height: 1px; flex: 1; background: #e0e4ea; }
.cadastro-google-conta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 14px 16px; border: 1px solid #e2e6ec; border-radius: 12px; background: #fff; color: #434e61; font-size: .84rem; }
.cadastro-google-conta strong { color: #172033; overflow-wrap: anywhere; }
.cadastro-google-conta .ic { color: #1f8a4c; }
.cadastro-google-conta button { display: inline; width: auto; min-height: 0; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 0; background: none; color: #a8441f; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 45px; }
.campo-senha #btn-mostrar-senha { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 8px; background: transparent; }
.campo-senha #btn-mostrar-senha:hover { background: #eef1f5; }

.planos-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plano-cartao { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 128px; margin: 0; padding: 17px 15px; overflow: visible; border: 1px solid #dfe4eb; border-radius: 13px; background: #fafbfc; color: #263047; text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; }
.plano-cartao:hover { border-color: #ef896a; background: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,32,51,.08); }
.plano-cartao.selecionado { border: 2px solid #e6633c; padding: 16px 14px; background: #fff8f5; box-shadow: 0 0 0 3px rgba(216,90,48,.09); }
.plano-cartao strong { padding-right: 23px; font-size: .86rem; }
.plano-check { position: absolute; right: 13px; top: 13px; display: none; place-items: center; width: 20px; height: 20px; color: #fff; background: #e6633c; border-radius: 50%; font-size: .7rem; }
.plano-cartao.selecionado .plano-check { display: grid; }
.plano-preco { margin-top: 15px; color: #172033; font-size: 1.16rem; font-weight: 800; letter-spacing: -.025em; }
.plano-preco small { color: #7d8797; font-size: .68rem; font-weight: 500; }
.plano-limite { margin-top: 6px; color: #778192; font-size: .7rem; font-weight: 500; }
.plano-destaque { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 20px; color: #fff; background: #263047; white-space: nowrap; font-size: .57rem; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; }
.campo-isca { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.estado-planos { grid-column: 1 / -1; margin: 0; padding: 18px; border-radius: 10px; color: #687386; background: #f3f5f8; font-size: .85rem; text-align: center; }

#btn-cadastrar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 51px; margin: 2px 0 0; border-radius: 12px; background: linear-gradient(135deg, #e96740, #d8522d); box-shadow: 0 8px 20px rgba(216,90,48,.2); }
#btn-cadastrar:hover { background: linear-gradient(135deg, #f1744e, #c94925); }
#btn-cadastrar span { font-size: 1.15rem; }
.cadastro-termos { order: 2; margin: -8px 0 0; color: #7b8595; font-size: .7rem; line-height: 1.5; text-align: center; }
.cadastro-termos a, .cadastro-login a { color: #cf512d; font-weight: 650; }
.cadastro-login { margin: 24px 0 0; color: #697486; font-size: .83rem; text-align: center; }
.erro:not(:empty) { margin: 0; padding: 11px 13px; border: 1px solid #fecaca; border-radius: 10px; color: #b42318; background: #fef2f2; font-size: .82rem; }

@media (max-width: 1050px) {
  .cadastro-shell { grid-template-columns: 330px minmax(0, 1fr); }
  .cadastro-hero { padding: 38px 30px; }
  .cadastro-hero h1 { font-size: 2.55rem; }
  .cadastro-painel { padding: 40px 28px; }
}

@media (max-width: 780px) {
  .cadastro-shell { display: block; }
  .cadastro-hero { position: relative; height: auto; min-height: 0; padding: 20px 20px 24px; }
  .cadastro-marca img { width: 36px; height: 36px; }
  .cadastro-hero-conteudo { margin: 26px 0 0; }
  .cadastro-hero h1 { margin: 10px 0 0; font-size: 1.9rem; line-height: 1.04; }
  .cadastro-hero-conteudo > p { display: none; }
  .cadastro-beneficios, .cadastro-seguranca { display: none; }
  .cadastro-painel { padding: 24px 16px 42px; }
  .cadastro-cabecalho h2 { font-size: 1.7rem; }
  #form-cadastro fieldset { padding: 20px 17px; }
  .cadastro-grid, .planos-lista { grid-template-columns: 1fr; }
  .campo-largo { grid-column: auto; }
  .plano-cartao { min-height: 98px; }
  .plano-preco { margin-top: 11px; }
}

:root.tema-escuro .cadastro-page { background: #111418; }
:root.tema-escuro .cadastro-painel { background: #111418; }
:root.tema-escuro .cadastro-cabecalho h2, :root.tema-escuro .campo input, :root.tema-escuro .plano-cartao, :root.tema-escuro .plano-preco { color: #f2f4f7; }
:root.tema-escuro .cadastro-cabecalho p, :root.tema-escuro .fieldset-ajuda, :root.tema-escuro .cadastro-login, :root.tema-escuro .cadastro-termos { color: #99a3b2; }
:root.tema-escuro #form-cadastro fieldset { border-color: #2c323c; background: #191d23; box-shadow: none; }
:root.tema-escuro #form-cadastro legend { color: #eef1f5; }
:root.tema-escuro #form-cadastro legend span { background: #38241e; }
:root.tema-escuro .campo label { color: #bec5d0; }
:root.tema-escuro .email-sugestao { color: #99a3b2; }
:root.tema-escuro .cadastro-google > p, :root.tema-escuro .cadastro-ou { color: #99a3b2; }
:root.tema-escuro .cadastro-ou::before, :root.tema-escuro .cadastro-ou::after { background: #2c323c; }
:root.tema-escuro .cadastro-google-conta { border-color: #2c323c; background: #191d23; color: #bec5d0; }
:root.tema-escuro .cadastro-google-conta strong { color: #f2f4f7; }
:root.tema-escuro .cadastro-google-conta button { color: #f08a64; }
:root.tema-escuro .email-sugestao button { color: #f08a64; }
:root.tema-escuro .email-sugestao button:hover { color: #f5a582; }
:root.tema-escuro .campo input, :root.tema-escuro .plano-cartao { border-color: #343b46; background: #20252c; }
:root.tema-escuro .dados-opcionais { border-top-color: #2c323c; }
:root.tema-escuro .dados-opcionais summary { color: #bec5d0; }
:root.tema-escuro .campo input:focus, :root.tema-escuro .plano-cartao:hover { background: #232930; }
:root.tema-escuro .plano-cartao.selecionado { border-color: #ec704b; background: #2c211e; }
:root.tema-escuro .plano-limite, :root.tema-escuro .plano-preco small { color: #9ea7b4; }
:root.tema-escuro .campo-senha #btn-mostrar-senha:hover, :root.tema-escuro .estado-planos { background: #282e37; }