@import url('./cadastro-reference-icons.css?v=20260912');

/* Visual aprovado em 12/09/2026. Escopo local vence os tokens !important do skin. */
body.edubase-cadastro #es .esreg-split {
    --esreg-brand: #f000cd !important;
    --esreg-brand-dark: #c000a8 !important;
    --esreg-aside: #170515 !important;
    --esreg-ink: #faf6fb !important;
    --esreg-ink-soft: #d4c6d8 !important;
    --esreg-muted: #b5a1b9 !important;
    --esreg-line: #513449 !important;
    --esreg-field: #1b0b1b !important;
    --esreg-radius: 14px;
    background: radial-gradient(ellipse at 0 0, #300c28 0, transparent 52%), #160c19 !important;
    color: var(--esreg-ink);
}
body.edubase-cadastro #es .esreg-split__form {
    flex: 0 0 52.27%;
    box-sizing: border-box;
    padding: clamp(28px, 3vw, 52px) clamp(24px, 4.8vw, 82px) 48px;
    overflow: visible;
    background: transparent !important;
}
body.edubase-cadastro #es .esreg-split__inner { max-width: 740px; }
body.edubase-cadastro #es .esreg-topbar { margin-bottom: clamp(34px, 3.4vw, 58px); gap: 20px; }
body.edubase-cadastro #es .esreg-topbar__logo img { height: clamp(36px, 3.1vw, 52px); max-width: 245px; }
body.edubase-cadastro #es a.esreg-topbar__back { font-size: clamp(12px, 1.15vw, 18px); font-weight: 400; white-space: normal; text-align: right; }
body.edubase-cadastro #es a.esreg-topbar__back::before { content: '\2190'; display: inline-block; margin-right: 10px; font-size: 24px; vertical-align: -1px; }
body.edubase-cadastro #es .esreg-wizbar { gap: 24px; margin-bottom: 34px; }
body.edubase-cadastro #es .esreg-wizbar__dots { gap: 9px; }
body.edubase-cadastro #es .esreg-wizbar__dot { width: clamp(30px, 3.7vw, 62px); height: 7px; border-radius: 9px; }
body.edubase-cadastro #es .esreg-wizbar__label { font-size: 12px; font-weight: 400; letter-spacing: .17em; white-space: nowrap; }
body.edubase-cadastro #es .esreg-head { margin-bottom: 30px; }
body.edubase-cadastro #es .esreg-head__title { color: var(--esreg-ink) !important; font-size: clamp(28px, 2.9vw, 48px); line-height: 1.13; letter-spacing: -.035em; font-weight: 800; }
body.edubase-cadastro #es .esreg-head__accent { color: var(--esreg-brand); }
body.edubase-cadastro #es [data-esreg-step="2"] .esreg-head__title { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(30px, 3.1vw, 52px); }
body.edubase-cadastro #es .esreg-split .esreg-head__sub { font-size: clamp(16px, 1.45vw, 23px); margin-top: 12px; line-height: 1.45; }
body.edubase-cadastro #es .esreg-split .o-control-label { font-size: clamp(16px, 1.3vw, 21px); padding-bottom: 12px; }
body.edubase-cadastro #es .esreg-split .o-control-label > span { color: var(--esreg-brand); }
body.edubase-cadastro #es .esreg-split [data-field-item] { margin-bottom: 26px; }

/* Quatro colunas no desktop, duas no celular; valores nativos preservados. */
body.edubase-cadastro #es .esreg-split [data-field-gender],
body.edubase-cadastro #es .esreg-split [data-esreg-step="3"] [data-field-checkbox] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.edubase-cadastro #es .esreg-split [data-field-gender] .o-radio label,
body.edubase-cadastro #es .esreg-split [data-esreg-step="3"] [data-field-checkbox] .o-checkbox label {
    position: relative;
    justify-content: center;
    box-sizing: border-box;
    min-height: clamp(110px, 7.7vw, 132px);
    padding: 20px 6px 14px;
    gap: 12px;
    border: 1px solid #513b4d;
    border-radius: 14px;
    background: linear-gradient(145deg, #20101e, #170c1a) !important;
    color: #faf6fb !important;
    font-size: clamp(12px, .95vw, 16px);
    line-height: 1.3;
    box-shadow: inset 0 0 0 1px #ffffff06;
}
body.edubase-cadastro #es .esreg-split [data-field-gender] input[type="radio"] + label::before,
body.edubase-cadastro #es .esreg-split [data-esreg-step="3"] [data-field-checkbox] input[type="checkbox"] + label::before {
    content: '';
    position: static;
    display: block;
    flex: 0 0 42px;
    width: 46px;
    height: 42px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--esreg-gicon) center / contain no-repeat !important;
    -webkit-mask: none;
    mask: none;
    transform: none;
}
body.edubase-cadastro #es .esreg-split [data-field-gender] input[type="radio"] + label::after,
body.edubase-cadastro #es .esreg-split [data-esreg-step="3"] [data-field-checkbox] input[type="checkbox"] + label::after {
    content: '';
    position: absolute;
    display: block;
    top: 9px;
    right: 9px;
    left: auto;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid #ffffff45;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    transform: none;
}
body.edubase-cadastro #es .esreg-split [data-field-gender] input[type="radio"]:checked + label,
body.edubase-cadastro #es .esreg-split [data-esreg-step="3"] [data-field-checkbox] input[type="checkbox"]:checked + label {
    border-color: #ff2de0;
    background: linear-gradient(145deg, #550b40, #2b0b30) !important;
    box-shadow: inset 0 0 0 1px #ff2de0, 0 6px 24px #eb00b21a;
}
body.edubase-cadastro #es .esreg-split [data-field-gender] input[type="radio"]:checked + label::after,
body.edubase-cadastro #es .esreg-split [data-esreg-step="3"] [data-field-checkbox] input[type="checkbox"]:checked + label::after {
    background: #f000bd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
    border-color: #ff55d9;
}
body.edubase-cadastro #es .esreg-split [data-esreg-step="3"] .o-control-label { display: none; }
body.edubase-cadastro #es .esreg-split [data-esreg-step="2"] [data-field-item] { margin-bottom: 30px; }
body.edubase-cadastro #es .esreg-split [data-esreg-step="2"] .o-checkbox { position: relative; padding: 0; border-color: #713466; background: #160918 !important; }
body.edubase-cadastro #es .esreg-split [data-esreg-step="2"] .o-checkbox input[type="checkbox"] { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
body.edubase-cadastro #es .esreg-split [data-esreg-step="2"] .o-checkbox label.option { display: flex; align-items: center; gap: 20px; width: 100%; min-height: 76px; box-sizing: border-box; padding: 16px 22px; font-size: clamp(16px, 1.3vw, 21px); font-weight: 400; }
body.edubase-cadastro #es .esreg-split [data-esreg-step="2"] .o-checkbox input[type="checkbox"] + label::before { content: ''; position: static; display: block; flex: 0 0 30px; box-sizing: border-box; width: 30px; height: 30px; margin: 0; border: 1px solid #b5a1b9; border-radius: 6px; background: #ffffff09; }
body.edubase-cadastro #es .esreg-split [data-esreg-step="2"] .o-checkbox input[type="checkbox"] + label::after { content: none; }
body.edubase-cadastro #es .esreg-split [data-esreg-step="2"] .o-checkbox input[type="checkbox"]:checked + label::before { border-color: #ff2de0; background: #d900bb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center / 23px no-repeat; }
body.edubase-cadastro #es .esreg-split input:focus-visible + label { outline: 2px solid #fff; outline-offset: 4px; }
body.edubase-cadastro #es .esreg-split .esreg-nav { flex-wrap: nowrap; gap: 18px; }
/* O clearfix do tema virava dois itens vazios no flex e recuava os botoes. */
body.edubase-cadastro #es .esreg-split .esreg-nav::before,
body.edubase-cadastro #es .esreg-split .esreg-nav::after { content: none; }
body.edubase-cadastro #es .esreg-split .es-forms__actions { padding-top: 20px; }
body.edubase-cadastro #es .esreg-split .esreg-nav__next,
body.edubase-cadastro #es .esreg-split #btn-register-submit { position: relative; min-width: 0; height: 66px; padding: 0 42px; border: 1px solid #ff88e6 !important; border-radius: 15px; background: linear-gradient(110deg, #e600b5, #cc00c2 50%, #f00dcd) !important; color: #fff !important; font-size: 20px; font-weight: 700; box-shadow: 0 8px 36px #eb00bd25; }
body.edubase-cadastro #es .esreg-split .esreg-nav__next::after { content: '\2192'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: 400; }
body.edubase-cadastro #es .esreg-split .esreg-nav__prev { flex: 0 0 24%; height: 66px; border-color: #857280; border-radius: 14px; background: #ffffff06 !important; color: #faf6fb !important; font-size: 18px; }
body.edubase-cadastro #es .esreg-split .esreg-signin { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 40px; font-size: 16px; color: #efe5f1; }
body.edubase-cadastro #es .esreg-signin::before,
body.edubase-cadastro #es .esreg-signin::after { content: ''; flex: 1; height: 1px; max-width: 130px; background: #604659; margin: 0 20px; }
body.edubase-cadastro #es .esreg-split .o-form-control { height: 52px; font-size: 16px; }
body.edubase-cadastro #es .esreg-split .o-form-control:focus { background: #241023 !important; box-shadow: 0 0 0 3px #f000cd22; }
body.edubase-cadastro #es .esreg-split .has-error .o-form-control { background: #321322 !important; }

/* A imagem e um elemento Image NATIVO do Builder 190. O enquadramento exibe
   exatamente x=874..1672 da referencia, sem recriar ou alterar a arte anexada. */
body.edubase-cadastro #es .esreg-split__aside { flex: 1 1 47.73%; align-items: flex-start; padding: 0; border-left: 1px solid #662051; background: #170515 !important; }
body.edubase-cadastro #es .esreg-split__aside-inner { position: sticky; top: 0; max-width: none; }
body.edubase-cadastro #es .esreg-reference { position: relative; overflow: hidden; width: 100%; aspect-ratio: 798 / 941; margin: 0 !important; }
body.edubase-cadastro #es .esreg-reference img { position: absolute; top: 0; right: 0; width: 209.52381%; max-width: none; height: 100%; object-fit: fill; }
body.edubase-cadastro #es .esreg-reference picture { display: contents; }

@media (min-width: 901px) and (max-width: 1200px) {
    body.edubase-cadastro #es .esreg-split__form { padding-left: 28px; padding-right: 28px; }
    body.edubase-cadastro #es .esreg-topbar__logo img { max-width: 165px; }
    body.edubase-cadastro #es .esreg-signin::before,
    body.edubase-cadastro #es .esreg-signin::after { margin: 0 8px; }
}
@media (max-width: 900px) {
    body.edubase-cadastro #es .esreg-split__form { flex: 1 1 auto; padding: 28px 24px 40px; }
    body.edubase-cadastro #es .esreg-split__inner { max-width: 680px; }
    body.edubase-cadastro #es .esreg-topbar { margin-bottom: 38px; }
    body.edubase-cadastro #es .esreg-topbar__logo img { height: 36px; max-width: 175px; }
    body.edubase-cadastro #es a.esreg-topbar__back { max-width: 150px; font-size: 12px; }
    body.edubase-cadastro #es .esreg-wizbar { gap: 16px; margin-bottom: 28px; }
    body.edubase-cadastro #es .esreg-wizbar__dot { width: 32px; height: 6px; }
    body.edubase-cadastro #es .esreg-wizbar__label { font-size: 10px; letter-spacing: .12em; }
    body.edubase-cadastro #es .esreg-head__title { font-size: 34px; }
    body.edubase-cadastro #es .esreg-split__aside { flex: 0 0 auto; width: 100%; border: 0; }
    body.edubase-cadastro #es .esreg-split__aside-inner { position: static; max-width: 680px; }
    body.edubase-cadastro #es .esreg-split .esreg-signin { font-size: 15px; }
}
@media (max-width: 540px) {
    body.edubase-cadastro #es .esreg-split__form { padding: 24px 20px 36px; }
    body.edubase-cadastro #es .esreg-split [data-field-gender],
    body.edubase-cadastro #es .esreg-split [data-esreg-step="3"] [data-field-checkbox] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    body.edubase-cadastro #es .esreg-split [data-field-gender] .o-radio label,
    body.edubase-cadastro #es .esreg-split [data-esreg-step="3"] [data-field-checkbox] .o-checkbox label { min-height: 108px; font-size: 13px; }
    body.edubase-cadastro #es .esreg-split .esreg-nav { gap: 12px; }
    body.edubase-cadastro #es .esreg-split .esreg-nav__next,
    body.edubase-cadastro #es .esreg-split #btn-register-submit,
    body.edubase-cadastro #es .esreg-split .esreg-nav__prev { height: 58px; font-size: 16px; }
    body.edubase-cadastro #es .esreg-split .esreg-nav__prev { flex-basis: 27%; padding: 0 10px; }
    body.edubase-cadastro #es .esreg-split .esreg-nav__next::after { right: 17px; font-size: 25px; }
    body.edubase-cadastro #es .esreg-split .esreg-signin { margin-top: 30px; }
    body.edubase-cadastro #es .esreg-signin::before,
    body.edubase-cadastro #es .esreg-signin::after { margin: 0 4px; }
    body.edubase-cadastro #es .esreg-split [data-esreg-step="2"] .o-checkbox label.option { padding: 18px 14px; gap: 14px; }
}
@media (max-width: 360px) {
    body.edubase-cadastro #es .esreg-topbar__logo img { max-width: 145px; }
    body.edubase-cadastro #es .esreg-topbar { gap: 12px; }
    body.edubase-cadastro #es a.esreg-topbar__back::before { margin-right: 4px; }
    body.edubase-cadastro #es .esreg-wizbar__dot { width: 25px; }
    body.edubase-cadastro #es .esreg-signin::before,
    body.edubase-cadastro #es .esreg-signin::after { content: none; }
}
/* ---------------------------------------------------------------------------
   BARRA DE ACOES FIXA NO RODAPE (celular / tablet estreito) — 22/09/2026
   ---------------------------------------------------------------------------
   No painel 1 os oito cards de genero empurram o "Continuar" para fora da
   tela: a pessoa escolhe e nao ve como avancar. De 900px para baixo a linha de
   acoes vira uma barra colada no fundo da janela.

   ⚠️ E' a MESMA `.es-forms__actions` nos quatro paineis — nao ha uma barra por
   painel. Entao esta regra vale de uma vez para "Continuar", "Voltar" e
   "Criar minha conta", e um painel novo nasce com a barra pronta.

   ☠️ `fixed`, e nao `sticky`. MEDIDO a 390x800 em 22/09/2026: com
   `position:sticky;bottom:0` o bloco de contencao e' o proprio `<form>`, e a
   barra e' o ULTIMO filho dele — ou seja, ela descola depois de ~90px de
   rolagem, quando o fim do formulario chega a' tela, e a pessoa volta a nao
   ver o botao exatamente enquanto olha os ultimos cards. Sticky aqui parece
   funcionar (ela gruda no primeiro quadro) e falha logo depois: nao trocar de
   volta sem remedir.

   ☠️ QUEM USA `fixed` PAGA O ESPACO: sem o `padding-bottom` do `.esreg-split`
   a barra cobriria em definitivo os ~86px finais da pagina — no painel 4 isso
   e' o ultimo campo, e no fim da pagina e' a arte. Os dois valores saem do
   MESMO `--esreg-barh`, para nao poderem divergir: 1px de borda + 14px de
   respiro + a altura do botao (66px aqui, 58px abaixo de 540px) + 14px.
   ⚠️ A borda ENTRA na conta: `box-sizing:border-box` faz o `min-height` incluir
   os 1px, e esquece-los deixava a barra 1px mais alta que o espaco reservado.
   ⚠️ Mexeu na altura do `.esreg-nav__next`/`#btn-register-submit`? Mexer no
   `--esreg-barh` junto.

   ⚠️ `overflow:clip` do `<body>` NAO clipa elemento `fixed` (o bloco de
   contencao dele e' a viewport) — conferido: a barra fica em 0..375px, colada
   no fundo, em todas as posicoes de rolagem.

   ⚠️ `z-index: 40` e' de proposito BAIXO: precisa passar por cima do conteudo
   do formulario (que nao usa z-index) e ficar por BAIXO de tudo que se
   sobrepoe a pagina — o `#es.es-dialog` do EasySocial, que e' o modal
   "Existem erros no formulario" desta mesma tela, esta' em 1051.

   O `max-width` do `.esreg-nav` repete o do `.esreg-split__inner` (680px) e o
   padding lateral repete o do `.esreg-split__form`: assim os botoes da barra
   ficam alinhados com os cards, em vez de esparramar na largura da tela.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    body.edubase-cadastro #es .esreg-split {
        --esreg-barh: 95px;
        padding-bottom: calc(var(--esreg-barh) + env(safe-area-inset-bottom, 0px));
    }

    body.edubase-cadastro #es .esreg-split .es-forms__actions {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        box-sizing: border-box;
        min-height: calc(var(--esreg-barh) + env(safe-area-inset-bottom, 0px));
        margin: 0;
        padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #3f2039;
        /* Mesma base do `.esreg-split` (o radial ja se apagou nesta altura da
           tela), para a barra nao virar um retangulo mais claro. */
        background: #160c19;
        box-shadow: 0 -14px 26px -8px #0d0710;
    }

    body.edubase-cadastro #es .esreg-split .es-forms__actions .esreg-nav {
        max-width: 680px;
        margin: 0 auto;
    }
}

@media (max-width: 540px) {
    body.edubase-cadastro #es .esreg-split {
        --esreg-barh: 87px;
    }

    body.edubase-cadastro #es .esreg-split .es-forms__actions {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.edubase-cadastro #es .esreg-split * { transition: none !important; scroll-behavior: auto !important; }
}