:root {
    --cab-navy: #02233c;
    --cab-blue: #2d528e;
    --cab-blue-bright: #007bc2;
    --cab-ocean: #147299;
    --cab-turquoise: #5bb6b5;
    --cab-gold: #d6ac56;
    --cab-gold-light: #f1d67c;
    --cab-bronze: #9d6128;
    --cab-white: #ffffff;
    --cab-soft: #f6f8fa;
    --cab-ink: #122638;
    --cab-muted: #5c6d7e;
    --cab-line: rgba(18, 38, 56, .14);
    --cab-danger: #b42318;
    --cab-success: #1f8a70;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body.cab-page {
    margin: 0;
    min-height: 100vh;
    color: var(--cab-ink);
    background: var(--cab-navy);
    font-family: 'Inter', 'Source Sans 3', Arial, Helvetica, sans-serif;
}

.cab-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.cab-hero {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: var(--cab-navy);
}

.cab-hero__media,
.cab-hero__shade {
    position: absolute;
    inset: 0;
}

.cab-hero__media {
    background: url("../img/congresso-bg-masthead.webp") center center/cover no-repeat;
    filter: saturate(1.1) contrast(1.03) brightness(1.02);
    transform: scale(1.01);
}

.cab-hero__shade {
    background:
        linear-gradient(90deg, rgba(2, 35, 60, .74) 0%, rgba(2, 35, 60, .42) 45%, rgba(2, 35, 60, .08) 100%),
        linear-gradient(180deg, rgba(2, 35, 60, .06) 0%, rgba(2, 35, 60, .48) 100%);
}

.cab-hero__content {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 40px));
    min-height: 100%;
    margin: 0 auto;
    padding: 26px 0 48px;
    display: flex;
    flex-direction: column;
}

/* Na abertura o conteúdo fica centralizado verticalmente; no formulário ele
   sobe, para o painel começar perto do topo. */
.cab-shell.is-intro .cab-grid {
    flex: 1;
    align-content: center;
}

.cab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(24px, 5vh, 52px);
}

.cab-header__brand {
    display: block;
    line-height: 0;
}

.cab-header__saeb {
    display: block;
    line-height: 0;
    opacity: .9;
    transition: opacity .2s ease;
}

.cab-header__saeb:hover {
    opacity: 1;
}

.cab-header__saeb img {
    width: 190px;
    max-width: 34vw;
    height: auto;
    display: block;
}

.cab-header__logo {
    height: auto;
    display: none;
}

.cab-header__logo--horizontal {
    width: 300px;
    max-width: 58vw;
}

.cab-header__logo--vertical {
    width: 132px;
    max-width: 30vw;
}

@media (min-width: 641px) {
    .cab-header__logo--horizontal {
        display: block;
    }
}

@media (max-width: 640px) {
    .cab-header__logo--vertical {
        display: block;
    }
}

/* A página tem dois momentos:
   - is-intro: abertura curta, centrada, com o CTA "Iniciar inscrição".
   - is-form:  a partir do clique, a abertura sai de cena e o formulário passa
               a ocupar a maior parte da tela, que é a tarefa real do usuário. */
.cab-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    justify-items: center;
}

/* Sem isto os itens do grid usam min-content como largura mínima e podem
   estourar o container (o overflow:hidden do hero apenas esconderia o corte). */
.cab-intro,
.cab-panel {
    min-width: 0;
    width: 100%;
}

.cab-intro {
    max-width: 780px;
    text-align: center;
}

.cab-shell.is-form .cab-intro {
    display: none;
}

.cab-shell.is-intro .cab-panel {
    display: none;
}

/* No modo formulário o painel domina a tela. */
.cab-shell.is-form .cab-panel {
    max-width: 980px;
}

.cab-shell.is-form .cab-hero__content {
    padding-top: 20px;
}

.cab-shell.is-form .cab-header {
    margin-bottom: 22px;
}

.cab-shell.is-form .cab-header__logo--horizontal {
    width: 220px;
}

/* Identificação do evento dentro do painel, já que o hero some no formulário. */
.cab-panel__evento {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cab-line);
}

.cab-panel__evento strong {
    display: block;
    font-family: 'Montserrat', 'Manrope', Arial, sans-serif;
    font-size: 16px;
    color: var(--cab-navy);
}

.cab-panel__evento span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--cab-muted);
}

.cab-shell.is-intro .cab-panel__evento {
    display: none;
}

/* Com o painel largo, campos ocupando a linha inteira ficam desconfortáveis de
   ler e preencher. No desktop o formulário passa a duas colunas e os campos
   curtos ganham largura própria. */
@media (min-width: 901px) {
    .cab-shell.is-form .cab-input-row {
        max-width: 460px;
    }

    .cab-shell.is-form .cab-panel__copy,
    .cab-shell.is-form .cab-message {
        max-width: 720px;
    }

    .cab-shell.is-form #cabManualForm {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
        align-items: start;
    }

    /* Nome e e-mail ocupam a linha inteira; os demais dividem em duas colunas. */
    .cab-shell.is-form #cabManualForm > label[for="cabManualNome"],
    .cab-shell.is-form #cabManualForm > #cabManualNome,
    .cab-shell.is-form #cabManualForm > label[for="cabManualEmail"],
    .cab-shell.is-form #cabManualForm > #cabManualEmail,
    .cab-shell.is-form #cabManualForm > .cab-actions {
        grid-column: 1 / -1;
    }

    .cab-shell.is-form #cabManualForm > .cab-actions {
        justify-content: flex-start;
    }

    /* UF é sempre duas letras; não precisa da mesma largura do CRM. */
    .cab-shell.is-form #cabManualCrmGrid {
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    .cab-shell.is-form .cab-dados {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

.cab-kicker {
    margin: 0 0 14px;
    color: var(--cab-gold-light);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.cab-intro h1 {
    margin: 0;
    color: var(--cab-white);
    font-family: 'Montserrat', 'Manrope', Arial, sans-serif;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.1;
    font-weight: 800;
    text-shadow: 0 10px 34px rgba(0, 0, 0, .28);
}

.cab-lead {
    max-width: 620px;
    margin: 14px auto 0;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.45;
    font-weight: 500;
}

.cab-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 680px;
    margin: 26px auto 0;
}

.cab-facts div {
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
}

.cab-facts span {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--cab-gold-light);
}

.cab-facts strong {
    display: block;
    font-size: 13px;
    line-height: 1.25;
    color: var(--cab-white);
}

.cab-intro__cta {
    margin-top: 30px;
}

.cab-cta {
    border: none;
    border-radius: 10px;
    padding: 15px 40px;
    background: var(--cab-gold);
    color: var(--cab-navy);
    font-family: 'Montserrat', 'Manrope', Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(2, 35, 60, .3);
    transition: background .2s ease, transform .1s ease;
}

.cab-cta:hover {
    background: var(--cab-gold-light);
}

.cab-cta:active {
    transform: translateY(1px);
}

.cab-intro__nota {
    max-width: 460px;
    margin: 12px auto 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--cab-gold-light);
}

.cab-panel {
    width: 100%;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .32);
    backdrop-filter: blur(14px);
    padding: clamp(20px, 4vw, 34px);
}


.cab-rodape {
    background: var(--cab-white);
    color: var(--cab-muted);
    padding: 18px clamp(16px, 4vw, 40px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 12px;
}

.cab-rodape__saeb {
    margin: 0;
}

.cab-rodape a {
    color: var(--cab-muted);
    text-decoration: none;
}

.cab-rodape a:hover {
    color: var(--cab-blue);
    text-decoration: underline;
}

.cab-rodape__ad {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cab-rodape__ad span {
    font-size: 9px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8b97a3;
}

.cab-rodape__ad:hover span {
    color: var(--cab-muted);
}

.cab-rodape__ad img {
    width: 84px;
    height: auto;
    display: block;
}

.cab-steps {
    display: flex;
    gap: 6px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.cab-steps li {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.cab-steps button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 42px;
    border: none;
    background: var(--cab-soft);
    color: var(--cab-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

/* Número da etapa: ajuda a entender quantos passos faltam. */
.cab-steps__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(18, 38, 56, .1);
    font-size: 11px;
    font-weight: 800;
    flex: 0 0 auto;
}

.cab-steps button:disabled {
    cursor: default;
    opacity: .55;
}

.cab-steps button:not(:disabled):hover {
    background: #e8edf2;
}

.cab-steps button.is-active {
    background: var(--cab-blue);
    color: var(--cab-white);
}

.cab-steps button.is-active .cab-steps__n {
    background: rgba(255, 255, 255, .25);
}

.cab-steps button.is-done {
    background: var(--cab-gold-light);
    color: var(--cab-navy);
}

.cab-steps button.is-done .cab-steps__n {
    background: rgba(2, 35, 60, .16);
}

h2, h3, h4 {
    font-family: 'Montserrat', 'Manrope', Arial, sans-serif;
    color: var(--cab-navy);
    margin: 0 0 8px;
}

.cab-panel__copy {
    color: var(--cab-muted);
    line-height: 1.5;
    margin: 0 0 20px;
}

.cab-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cab-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cab-ink);
    margin-top: 10px;
    margin-bottom: 6px;
}

.cab-form input,
.cab-form select {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--cab-line);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--cab-ink);
    background: var(--cab-white);
}

.cab-form select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--cab-muted) 50%), linear-gradient(135deg, var(--cab-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.cab-form input:focus,
.cab-form select:focus {
    outline: 2px solid var(--cab-blue-bright);
    outline-offset: 1px;
}

.cab-input-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cab-input-row input {
    flex: 1 1 220px;
    width: auto;
}

/* Dica ao lado do rótulo: explica o campo sem exigir que a pessoa descubra
   sozinha o formato esperado. */
.cab-form__dica {
    font-weight: 400;
    font-size: 12px;
    color: var(--cab-muted);
}

.cab-form__ajuda {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--cab-muted);
}

.cab-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}

.cab-form-grid > div {
    min-width: 0;
}

.cab-form-grid label {
    margin-top: 10px;
}

.cab-apoio {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px dashed var(--cab-line);
    background: var(--cab-soft);
}

.cab-apoio p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--cab-muted);
}

.cab-apoio__link {
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
    color: var(--cab-blue);
    text-decoration: none;
    border-bottom: 2px solid var(--cab-gold);
    padding-bottom: 1px;
}

.cab-apoio__link:hover {
    color: var(--cab-navy);
}

/* Alternativa à esquerda, ação principal à direita, lado a lado. */
.cab-actions--split {
    justify-content: flex-start;
}

.cab-actions--split .cab-primary {
    order: 2;
}

.cab-actions--footer {
    margin-top: 10px;
}

button {
    font-family: inherit;
}

/* Botões com altura mínima de 48px e texto de 15px: o público vai de
   estudantes a médicos com mais idade, então alvo grande e rótulo legível
   valem mais do que economia de espaço. */
.cab-primary,
.cab-input-row button,
.cab-form button[type="submit"] {
    min-height: 48px;
    background: var(--cab-blue);
    color: var(--cab-white);
    border: 2px solid var(--cab-blue);
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .1s ease;
}

.cab-primary:hover,
.cab-input-row button:hover,
.cab-form button[type="submit"]:hover {
    background: var(--cab-navy);
    border-color: var(--cab-navy);
}

.cab-primary:active,
.cab-secondary:active {
    transform: translateY(1px);
}

.cab-secondary {
    min-height: 48px;
    background: var(--cab-white);
    color: var(--cab-blue);
    border: 2px solid var(--cab-line);
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .1s ease;
}

.cab-secondary:hover {
    background: var(--cab-soft);
    border-color: var(--cab-blue);
}

.cab-link-button {
    background: transparent;
    border: none;
    color: var(--cab-blue);
    text-decoration: underline;
    cursor: pointer;
    padding: 10px 2px;
    font-size: 14px;
}

/* Foco bem visível para quem navega por teclado ou tem baixa visão. */
.cab-primary:focus-visible,
.cab-secondary:focus-visible,
.cab-cta:focus-visible,
.cab-opcao:focus-visible,
.cab-link-button:focus-visible,
.cab-steps button:focus-visible,
.cab-input-row button:focus-visible,
.cab-form button[type="submit"]:focus-visible {
    outline: 3px solid var(--cab-blue-bright);
    outline-offset: 2px;
}

/* Ações agrupadas: manter os botões próximos deixa clara a relação entre
   eles (a alternativa e a ação principal), em vez de jogá-los nas pontas. */
.cab-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

button:disabled {
    opacity: .6;
    cursor: default;
}

/* Avisos no padrão de alert do Bootstrap: fundo suave, borda da mesma
   família de cor, texto escuro legível e ícone indicando o tipo. */
.cab-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
    background: #cff4fc;
    border-color: #b6effb;
    color: #055160;
}

.cab-message.is-success {
    background: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

.cab-message.is-warning {
    background: #fff3cd;
    border-color: #ffecb5;
    color: #664d03;
}

.cab-message.is-error {
    background: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

.cab-message a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.cab-message__icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    fill: currentColor;
}

.cab-dados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin: 0 0 8px;
}

.cab-dados dt {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cab-muted);
}

.cab-dados dd {
    margin: 1px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cab-ink);
}

.cab-produto {
    border: 1px solid var(--cab-line);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(45, 82, 142, .06), rgba(214, 172, 86, .06));
}

.cab-produto__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.cab-produto h3 {
    margin: 0;
}

.cab-produto__valor {
    font-size: 22px;
    font-weight: 800;
    color: var(--cab-navy);
}

.cab-produto__lote {
    display: inline-block;
    background: var(--cab-gold);
    color: var(--cab-navy);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 8px;
}

.cab-produto__status {
    font-size: 13px;
    color: var(--cab-muted);
    margin-top: 6px;
}

/* Títulos de bloco: dão a mesma hierarquia ao congresso e aos cursos. */
.cab-bloco-titulo {
    margin: 22px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--cab-gold);
    font-size: 15px;
    color: var(--cab-navy);
}

.cab-bloco-titulo__nota {
    font-family: 'Inter', 'Source Sans 3', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--cab-muted);
}

/* Aviso de escopo (o que está e o que não está incluído). */
.cab-nota-destaque {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--cab-muted);
}

.cab-nota-destaque strong,
.cab-destaque {
    color: #b3261e;
    font-weight: 700;
}

/* Card selecionável: a escolha fica só na tela até a confirmação. */
.cab-escolha {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 2px solid var(--cab-line);
    border-radius: 12px;
    background: var(--cab-white);
    padding: 13px 15px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.cab-escolha:hover:not(:disabled) {
    border-color: var(--cab-blue-bright);
}

.cab-escolha.is-selected {
    border-color: var(--cab-blue);
    background: rgba(45, 82, 142, .06);
}

.cab-escolha:disabled {
    opacity: .5;
    cursor: default;
}

.cab-escolha__marca {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 2px solid var(--cab-line);
    border-radius: 6px;
    background: var(--cab-white);
    position: relative;
}

.cab-escolha.is-selected .cab-escolha__marca {
    border-color: var(--cab-blue);
    background: var(--cab-blue);
}

.cab-escolha.is-selected .cab-escolha__marca::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 2px;
    width: 5px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.cab-escolha__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.cab-escolha__texto strong {
    display: block;
    font-size: 15px;
    color: var(--cab-navy);
}

.cab-escolha__texto small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--cab-muted);
}

.cab-escolha__valor {
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 800;
    color: var(--cab-navy);
}

/* Resumo com o total, logo antes do botão de confirmar. */
.cab-resumo {
    margin-top: 24px;
    border: 2px solid var(--cab-blue);
    border-radius: 14px;
    padding: 16px 18px;
    background: var(--cab-soft);
}

.cab-resumo__titulo {
    margin: 0 0 12px;
    font-size: 15px;
}

.cab-resumo__itens {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cab-resumo__itens li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--cab-line);
}

.cab-resumo__itens strong {
    display: block;
    font-size: 14px;
    color: var(--cab-ink);
}

.cab-resumo__itens small {
    display: block;
    font-size: 12px;
    color: var(--cab-muted);
}

.cab-resumo__valor {
    font-size: 15px;
    font-weight: 700;
    color: var(--cab-navy);
    white-space: nowrap;
}

.cab-resumo__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 16px;
    font-size: 15px;
    color: var(--cab-ink);
}

.cab-resumo__total strong {
    font-size: 26px;
    font-weight: 800;
    color: var(--cab-navy);
}

.cab-resumo__botao {
    width: 100%;
}

.cab-resumo__nota {
    margin: 10px 0 0;
    font-size: 12px;
    text-align: center;
    color: var(--cab-muted);
}

.cab-cursos {
    display: grid;
    gap: 14px;
    margin-bottom: 6px;
}

.cab-curso {
    border: 1px solid var(--cab-line);
    border-radius: 14px;
    padding: 16px;
}

.cab-curso__cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.cab-curso__vagas {
    font-size: 13px;
    color: var(--cab-muted);
}

.cab-curso__vagas.is-esgotado {
    font-weight: 700;
    color: #b3261e;
}

.cab-curso__opcoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.cab-opcao {
    flex: 1 1 200px;
    text-align: left;
    border: 1px solid var(--cab-line);
    border-radius: 12px;
    background: var(--cab-white);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.cab-opcao:hover:not(:disabled) {
    border-color: var(--cab-blue-bright);
    box-shadow: 0 6px 18px rgba(0, 123, 194, .15);
}

.cab-opcao span {
    display: block;
    font-size: 13px;
    color: var(--cab-muted);
}

.cab-opcao strong {
    display: block;
    font-size: 17px;
    color: var(--cab-navy);
    margin: 2px 0;
}

.cab-opcao small {
    display: block;
    font-size: 12px;
    color: var(--cab-muted);
}

.cab-opcao.is-unavailable {
    opacity: .55;
}

.cab-produto.is-disabled,
.cab-curso.is-disabled {
    opacity: .6;
}

.cab-badge {
    display: inline-block;
    background: var(--cab-turquoise);
    color: var(--cab-white);
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Mobile: texto e espaçamentos mais compactos para reduzir rolagem, mantendo
   os inputs com 16px (abaixo disso o Safari do iOS dá zoom ao focar o campo)
   e área de toque confortável. */
@media (max-width: 560px) {
    .cab-hero__content {
        width: calc(100% - 24px);
        padding: 18px 0 32px;
    }

    .cab-header {
        margin-bottom: 20px;
        gap: 12px;
    }

    .cab-header__logo--vertical {
        width: 104px;
    }

    .cab-header__saeb img {
        width: 130px;
    }

    .cab-kicker {
        margin-bottom: 8px;
        font-size: 11px;
        letter-spacing: .02em;
    }

    .cab-intro h1 {
        font-size: 26px;
        line-height: 1.12;
    }

    .cab-lead {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.4;
    }

    .cab-facts {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 18px;
    }

    .cab-facts div {
        min-height: 0;
        padding: 9px 10px;
        border-radius: 8px;
    }

    .cab-facts span {
        margin-bottom: 2px;
        font-size: 9px;
    }

    .cab-facts strong {
        font-size: 12px;
        line-height: 1.2;
    }

    .cab-panel {
        border-radius: 14px;
        padding: 16px 14px;
    }

    .cab-intro__cta {
        margin-top: 20px;
    }

    .cab-cta {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
    }

    .cab-intro__nota {
        margin-top: 10px;
        font-size: 12px;
    }

    .cab-panel__evento {
        margin-bottom: 14px;
        padding-bottom: 11px;
    }

    .cab-panel__evento strong {
        font-size: 14px;
    }

    .cab-panel__evento span {
        font-size: 11px;
    }

    .cab-steps {
        gap: 4px;
        margin-bottom: 16px;
    }

    /* Sem espaço para número + rótulo lado a lado: o número vai para cima. */
    .cab-steps button {
        flex-direction: column;
        gap: 3px;
        min-height: 48px;
        min-width: 0;
        padding: 6px 2px;
        font-size: 10px;
        line-height: 1.15;
        border-radius: 12px;
    }

    .cab-steps__n {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    h2 {
        font-size: 19px;
    }

    h3 {
        font-size: 17px;
    }

    h4 {
        font-size: 15px;
    }

    .cab-panel__copy {
        margin-bottom: 14px;
        font-size: 13px;
        line-height: 1.4;
    }

    .cab-message {
        padding: 10px 12px;
        margin-bottom: 14px;
        font-size: 13px;
        line-height: 1.4;
    }

    .cab-form label {
        margin-top: 8px;
        margin-bottom: 4px;
        font-size: 12px;
    }

    /* 16px é o mínimo para o iOS não dar zoom; compacta-se pela altura. */
    .cab-form input,
    .cab-form select {
        min-height: 42px;
        padding: 9px 12px;
        font-size: 16px;
        border-radius: 8px;
    }

    .cab-form select {
        background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px;
    }

    .cab-input-row {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .cab-input-row input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cab-input-row button {
        flex: 0 0 auto;
        padding: 10px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    .cab-form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .cab-dados {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .cab-dados dt {
        font-size: 9px;
    }

    .cab-dados dd {
        font-size: 13px;
    }

    /* Voltar e avançar sempre lado a lado, mesmo com rótulos longos. */
    .cab-actions {
        gap: 8px;
        margin-top: 14px;
    }

    .cab-actions--split,
    #cabEtapaEstudante .cab-actions {
        flex-wrap: nowrap;
    }

    .cab-actions--split .cab-primary,
    .cab-actions--split .cab-secondary,
    #cabEtapaEstudante .cab-actions .cab-primary,
    #cabEtapaEstudante .cab-actions .cab-secondary {
        flex: 1 1 0;
        min-width: 0;
        padding: 11px 8px;
        font-size: 13px;
        line-height: 1.2;
    }

    .cab-actions--footer {
        margin-top: 4px;
    }

    .cab-link-button {
        font-size: 13px;
    }

    .cab-apoio {
        margin-top: 14px;
        padding: 11px 12px;
    }

    .cab-apoio p {
        font-size: 13px;
        line-height: 1.4;
    }

    .cab-apoio__link {
        font-size: 13px;
    }

    .cab-produto,
    .cab-curso {
        padding: 13px;
        margin-bottom: 12px;
        border-radius: 12px;
    }

    .cab-produto__valor {
        font-size: 19px;
    }

    .cab-produto__status {
        font-size: 12px;
    }

    .cab-curso__vagas {
        font-size: 12px;
    }

    .cab-curso__opcoes {
        gap: 8px;
        margin-top: 10px;
    }

    .cab-opcao {
        flex: 1 1 100%;
        padding: 10px 12px;
    }

    .cab-opcao span,
    .cab-opcao small {
        font-size: 12px;
    }

    .cab-opcao strong {
        font-size: 16px;
    }

    .cab-cursos {
        gap: 10px;
    }

    .cab-rodape {
        justify-content: center;
        text-align: center;
        gap: 10px;
        padding: 14px 16px;
        font-size: 11px;
    }
}

/* ---------------------------------------------------------------
 * Histórico de tentativas de pagamento
 *
 * Aparece no topo da etapa de inscrição para quem já tentou pagar,
 * com o status de cada tentativa e o caminho de volta.
 * ------------------------------------------------------------- */

.cab-tentativas {
    margin: 0 0 24px;
    border: 1px solid var(--cab-line);
    border-radius: 14px;
    padding: 16px 18px;
    background: var(--cab-soft);
}

.cab-tentativas .cab-bloco-titulo {
    margin-top: 0;
}

.cab-tentativas__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.cab-tentativa {
    border: 1px solid var(--cab-line);
    border-left-width: 4px;
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--cab-white);
}

/* Cada situação tem um par: fundo claro para o selo e um tom forte do mesmo
   matiz para o texto e para a faixa lateral do cartão. */
.cab-tentativa.is-ok {
    --cab-estado-forte: #12694f;
    --cab-estado-fraco: #e3f5ee;
    --cab-estado-borda: #bfe5d6;
    border-left-color: var(--cab-estado-forte);
}

.cab-tentativa.is-aguardando {
    --cab-estado-forte: #8a5b00;
    --cab-estado-fraco: #fdf1d4;
    --cab-estado-borda: #f0dca6;
    border-left-color: var(--cab-estado-forte);
}

.cab-tentativa.is-expirado {
    --cab-estado-forte: #a1160c;
    --cab-estado-fraco: #fdeae8;
    --cab-estado-borda: #f4c4bf;
    border-left-color: var(--cab-estado-forte);
}

.cab-tentativa.is-encerrado {
    --cab-estado-forte: #a1160c;
    --cab-estado-fraco: #fdeae8;
    --cab-estado-borda: #f4c4bf;
    border-left-color: var(--cab-estado-forte);
}

.cab-tentativa__topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.cab-tentativa__evento {
    color: var(--cab-navy);
    font-size: 14px;
}

.cab-tentativa__valor {
    white-space: nowrap;
    font-weight: 700;
    color: var(--cab-navy);
}

.cab-tentativa__meta {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 13px;
    color: var(--cab-muted);
}

/* Selo do status: o estado da tentativa é a informação mais consultada do
   bloco, então ele ganha peso próprio em vez de ficar como texto corrido. */
.cab-tentativa__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--cab-estado-borda, #d7dde3);
    border-radius: 999px;
    background: var(--cab-estado-fraco, #eef1f4);
    color: var(--cab-estado-forte, var(--cab-ink));
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
}

/* Ponto colorido antes do texto, para o estado ser reconhecível mesmo por
   quem não distingue bem as cores. */
.cab-tentativa__status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.cab-tentativa__quando {
    color: var(--cab-muted);
}

.cab-tentativa__link {
    display: inline-block;
    margin-top: 8px;
    font-weight: 600;
    color: var(--cab-blue-bright);
}

.cab-tentativas__rodape {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cab-line);
}

.cab-tentativas__nota {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--cab-muted);
}

@media (max-width: 600px) {
    .cab-tentativa__topo {
        flex-direction: column;
        gap: 2px;
    }

    .cab-tentativas__rodape .cab-secondary {
        width: 100%;
    }
}

/* PIX em aberto dentro do histórico de tentativas */

.cab-pix {
    margin-top: 10px;
    padding: 12px;
    border: 1px dashed var(--cab-line);
    border-radius: 10px;
    background: var(--cab-soft);
}

.cab-pix__titulo {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cab-navy);
}

.cab-pix__codigo {
    display: block;
    max-height: 96px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--cab-line);
    border-radius: 8px;
    background: var(--cab-white);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-all;
    color: var(--cab-ink);
}

.cab-pix__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

@media (max-width: 600px) {
    .cab-pix__acoes .cab-pix__copiar {
        width: 100%;
    }
}

/* Itens inclusos, prazo da reserva e histórico dentro do cartão da inscrição */

.cab-tentativa__inclusos {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--cab-muted);
}

.cab-tentativa__inclusos li {
    margin: 2px 0;
}

.cab-tentativa__prazo {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--cab-muted);
}

.cab-tentativa.is-expirado .cab-tentativa__prazo {
    color: var(--cab-estado-forte);
    font-weight: 600;
}

.cab-tentativa__historico {
    margin-top: 10px;
    font-size: 13px;
    color: var(--cab-muted);
}

.cab-tentativa__historico summary {
    cursor: pointer;
    color: var(--cab-blue-bright);
}

.cab-tentativa__historico ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.cab-tentativa__historico li {
    margin: 3px 0;
}

.cab-tentativa .cab-tentativas__rodape {
    margin-top: 12px;
    padding-top: 12px;
}

@media (max-width: 600px) {
    .cab-tentativa .cab-tentativas__rodape .cab-primary {
        width: 100%;
    }
}

.cab-pix__alternativa {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cab-muted);
}

/* Popup do PIX (SweetAlert2) */

.cab-pix-modal__qr {
    display: block;
    margin: 0 auto 14px;
    width: 230px;
    height: 230px;
    max-width: 100%;
    border: 1px solid var(--cab-line);
    border-radius: 10px;
    padding: 8px;
    background: var(--cab-white);
}

.cab-pix-modal__passos {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--cab-muted);
}

.cab-pix-modal__codigo {
    display: block;
    max-height: 92px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--cab-line);
    border-radius: 8px;
    background: var(--cab-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    word-break: break-all;
    text-align: left;
    color: var(--cab-ink);
}

.cab-pix-modal__copiar {
    margin-top: 12px;
    width: 100%;
}

.cab-pix-modal__prazo {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cab-muted);
}

/* Contagem regressiva do PIX: discreta, mas com o vermelho claro dando o
   sentido de urgência sem gritar. */

.cab-pix-modal__contador {
    display: block;
    width: fit-content;
    margin: 8px auto 12px;
    padding: 4px 12px;
    border: 1px solid #f4c4bf;
    border-radius: 999px;
    background: #fdeae8;
    color: #a1160c;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.cab-pix-modal__contador.is-expirado {
    border-color: var(--cab-line);
    background: var(--cab-soft);
    color: var(--cab-muted);
}