/* style.css — formulários de inscrição (retirante e equipe), linhagem "Fogueira" (VIS-01)
   Mesmo layout nos dois temas: só as cores mudam (data-tema="escuro" | "claro" no <html>).
   Fontes carregadas por <link> no HTML (o @import travava a renderização — PERF-05). */

/* ================= CORES ================= */
:root,
:root[data-tema="escuro"] {
    color-scheme: dark;
    --bg: #170E08;
    --card: #22160E;
    --card-2: #2A1C12;
    --line: rgba(247, 237, 224, 0.13);
    --line-strong: rgba(247, 237, 224, 0.26);
    --ink: #F7EDE0;
    --ink-2: #D9C8B4;
    --ink-3: #A8957F;
    --accent: #E89E27;
    --accent-hover: #F2AE45;
    --accent-ink: #F2B451;            /* dourado usado como TEXTO */
    --on-accent: #1F1309;
    --sel-bg: rgba(232, 158, 39, 0.13);
    --disabled-bg: #2E2118;
    --danger: #F59A90;
    --danger-bg: rgba(240, 122, 110, 0.10);
    --ok: #6FD39A;
    --ok-bg: rgba(111, 211, 154, 0.12);
    --sombra: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23D9C8B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-tema="claro"] {
    color-scheme: light;
    --bg: #F6EFE4;
    --card: #FFFCF7;
    --card-2: #FBF5EC;
    --line: #E6D8C4;
    --line-strong: #D3C0A6;
    --ink: #2A1A0F;
    --ink-2: #5E4B3C;
    --ink-3: #6E5A49;
    --accent: #E89E27;
    --accent-hover: #F2AE45;
    --accent-ink: #8E5506;
    --on-accent: #1F1309;
    --sel-bg: #FFF4DF;
    --disabled-bg: #E9DDCB;
    --danger: #B42318;
    --danger-bg: #FDECEA;
    --ok: #2F8A55;
    --ok-bg: #E7F5EC;
    --sombra: 0 18px 40px -24px rgba(64, 36, 19, 0.45);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235E4B3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

:root {
    --primary: #402413;
    --fonte-titulo: 'Bricolage Grotesque', 'Figtree', sans-serif;
    --fonte: 'Figtree', system-ui, sans-serif;
    --ease: cubic-bezier(.22, .9, .3, 1);
    --topo-h: 72px;
    --rodape-h: 84px;
    --aside: 0px;                     /* largura da coluna de fotos no computador */
    --coluna: 640px;                  /* largura máxima do conteúdo */
    /* nomes antigos ainda usados em estilos inline do JS */
    --text-main: var(--ink);
    --text-muted: var(--ink-2);
    --glass-border: var(--line);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html, body { height: 100%; }

body {
    font-family: var(--fonte);
    background: var(--bg);
    color: var(--ink);
    height: 100vh;
    height: 100dvh;   /* celular: desconta a barra do navegador (UX-01) */
    width: 100%;
    overflow: hidden; /* a rolagem é interna, no #content-area */
    position: relative;
    -webkit-font-smoothing: antialiased;
    transition: background-color .35s var(--ease), color .35s var(--ease);
}

button, input, select, textarea { font-family: inherit; }
svg { flex: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ================= FOTOS DA ÚLTIMA EDIÇÃO ================= */
.vitrine {
    position: fixed;
    z-index: 0;
    top: 0; left: 0; right: 0;
    height: 62vh;
    height: 62dvh;
    overflow: hidden;
    background: #170E08;
    transition: opacity .5s var(--ease);
}

.vitrine-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s var(--ease);
}

.vitrine-slide.ativo { opacity: 1; }

.vitrine-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.08);
    transition: transform 9s linear;
}

.vitrine-slide.ativo img { transform: scale(1); }

/* Foto se funde com o fundo da página (escuro ou claro) */
.vitrine::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(23, 14, 8, 0.55) 0%, rgba(23, 14, 8, 0) 26%),
        linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 30%, color-mix(in srgb, var(--bg) 40%, transparent) 55%, transparent 78%);
}

/* Nas etapas, no celular e tablet, a foto sai de cena: leitura em primeiro lugar */
body[data-modo="etapa"] .vitrine,
body[data-modo="final"] .vitrine { opacity: 0; pointer-events: none; }

/* ================= TOPO ================= */
.topo {
    position: fixed;
    z-index: 20;
    top: 0;
    left: var(--aside);
    right: 0;
    min-height: var(--topo-h);
    padding: 12px 20px 0;
    padding-top: max(12px, env(safe-area-inset-top));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
    transition: background-color .35s var(--ease);
}

body[data-modo="etapa"] .topo,
body[data-modo="final"] .topo {
    background: var(--bg);
    padding-bottom: 12px;
}

.logo {
    height: 44px;
    display: block;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

body[data-modo="etapa"] .logo,
body[data-modo="final"] .logo { height: 38px; filter: none; }

.topo-acoes { display: flex; gap: 8px; }

.icon-btn {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    color: var(--ink);
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color .2s, color .2s, background-color .2s, transform .3s var(--ease);
}

.icon-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.icon-btn svg { width: 20px; height: 20px; grid-area: 1 / 1; transition: opacity .25s, transform .4s var(--ease); }

/* Capa: botões brancos sobre a foto, nos dois temas */
body[data-modo="capa"] .icon-btn { color: #F7EDE0; border-color: rgba(247, 237, 224, 0.3); background: rgba(23, 14, 8, 0.4); }

/* Botão de vidro (liquid glass): "Login" da equipe no topo, só na capa (NAV-01) */
.btn-vidro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px 0 13px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #F7EDE0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 10px 26px -14px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    transition: transform .3s var(--ease), background .25s, border-color .25s;
}

.btn-vidro svg { width: 18px; height: 18px; }
.btn-vidro:hover { transform: translateY(-1px); border-color: rgba(232, 158, 39, 0.7); background: linear-gradient(135deg, rgba(232, 158, 39, 0.26), rgba(255, 255, 255, 0.06)); }
.btn-vidro:active { transform: scale(0.97); }
.btn-vidro:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body:not([data-modo="capa"]) .btn-login { display: none; } /* no meio do formulário, nada distraindo */

/* Tema: mostra o ícone do tema para o qual vai trocar */
.ico-sol { opacity: 1; }
.ico-lua { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-tema="claro"] .ico-sol { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-tema="claro"] .ico-lua { opacity: 1; transform: none; }

/* Música: nota quando toca, nota cortada quando parada */
.ico-som-on { opacity: 0; }
.audio-control.tocando .ico-som-on { opacity: 1; }
.audio-control.tocando .ico-som-off { opacity: 0; }

/* Botão de música solto (página que ainda não tem o topo novo) */
body > .audio-control { position: fixed; top: 16px; right: 16px; z-index: 30; }

/* Partes do formulário: Sua história → Seus dados → Confirmação */
.capitulos {
    display: none;
    flex-basis: 100%;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 12px;
}

body[data-modo="etapa"] .capitulos:not(:empty) { display: grid; }

.capitulo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.capitulo-barra { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; }
.capitulo-barra i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--accent); transition: width .5s var(--ease); }
.capitulo-nome { font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capitulo.atual .capitulo-nome { color: var(--ink); }
.capitulo.feito .capitulo-nome { color: var(--ink-2); }

/* ================= ÁREA DE CONTEÚDO ================= */
#app-container {
    position: fixed;
    inset: 0;
    z-index: 10;
    overflow: hidden;
}

#content-area {
    position: absolute;
    top: 0; bottom: 0;
    left: var(--aside);
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--topo-h) + 16px) 20px 0;
}

body[data-modo="etapa"] #content-area { padding-top: calc(var(--topo-h) + 52px); }

/* Espaço no fim para o conteúdo não ficar atrás do rodapé fixo */
#content-area::after {
    content: '';
    display: block;
    min-height: calc(var(--rodape-h) + 40px);
    width: 100%;
    flex-shrink: 0;
}

body[data-modo="capa"] #content-area::after,
body[data-modo="final"] #content-area::after { min-height: 40px; }

.center-content, .fade-in {
    width: 100%;
    max-width: var(--coluna);
    margin: 0 auto;
    flex-shrink: 0;
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fade-in { animation: fadeIn .45s var(--ease) both; }

/* ================= TIPOGRAFIA ================= */
h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--ink); letter-spacing: -0.02em; }

h2 {
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.12;
    margin-bottom: 14px;
    text-wrap: balance;
}

h3 { font-weight: 600; font-size: 1.1rem; line-height: 1.3; }

p { color: var(--ink-2); font-size: 1rem; line-height: 1.6; }

strong, b { color: var(--ink); }

/* ================= CAPA ================= */
.capa {
    width: 100%;
    max-width: 560px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
}

.capa-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-ink);
}

.capa-titulo {
    font-weight: 600;
    font-size: clamp(2.6rem, 11vw, 5.2rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.capa-titulo em { font-style: normal; color: var(--accent-ink); }

.capa-texto { font-size: 1.05rem; max-width: 34ch; }

.capa-info {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.capa-info li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3px 0;
    font-size: 0.95rem;
    color: var(--ink-2);
}

.capa-info svg { width: 20px; height: 20px; color: var(--accent-ink); }
.capa-info strong { font-weight: 600; }

.capa-aviso { font-size: 0.88rem; color: var(--ink-3); }

/* Edição ativa em destaque (número grande + "Edição · Carpintaria da Alma") */
.capa-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-ink);
}

.capa-status i {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulso 2.2s ease-out infinite;
}

.capa-edicao {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 2px;
    text-shadow: 0 2px 18px color-mix(in srgb, var(--bg) 70%, transparent);
}

.capa-edicao-num {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 4rem;
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--accent-ink);
}

.capa-edicao-num sup { font-size: 0.42em; vertical-align: top; position: relative; top: 0.12em; margin-left: 2px; letter-spacing: 0; }

.capa-edicao-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 16px;
    border-left: 1px solid var(--line-strong);
}

.capa-edicao-num + .capa-edicao-txt { min-height: 52px; justify-content: center; }
.capa-edicao-txt:first-child { padding-left: 0; border-left: none; }
.capa-edicao-txt small { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink); }
.capa-edicao-txt b { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.35rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }

@keyframes pulso {
    0% { box-shadow: 0 0 0 0 rgba(232, 158, 39, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(232, 158, 39, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 158, 39, 0); }
}

.capa-regra {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--ink-2);
}

.capa-regra svg { width: 16px; height: 16px; color: var(--accent-ink); }
.capa-regra strong { color: var(--ink); }

.capa-cta { width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 4px; }
.capa-cta .nav-btn { width: 100%; margin-top: 0; }
.capa-tempo { font-size: 0.88rem; color: var(--ink-3); }

/* ================= ETAPAS ================= */
.etapa-topo { width: 100%; text-align: left; margin-bottom: 22px; }

.etapa-eyebrow,
.step-indicator {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 8px;
    text-align: left;
    width: 100%;
}

.etapa-titulo { font-size: 1.75rem; margin-bottom: 6px; text-align: left; }
.etapa-sub { font-size: 0.95rem; text-align: left; }

.question-lead { font-size: 0.98rem; color: var(--ink-2); text-align: left; width: 100%; margin-bottom: 8px; }

.question-text {
    text-align: left;
    width: 100%;
    font-size: 1.75rem;
    margin-bottom: 22px;
}

/* Escolhas (perguntas, transporte, termos, pagamento) */
.option-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.btn-option {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--card);
    border: 1.5px solid var(--line);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: border-color .2s, background-color .2s, box-shadow .2s, transform .15s;
}

.btn-option::before {
    content: '';
    flex: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.btn-option:hover { border-color: var(--line-strong); background: var(--card-2); }
.btn-option:active { transform: scale(0.99); }

.btn-option.selected {
    background: var(--sel-bg);
    border-color: var(--accent);
    font-weight: 600;
    box-shadow: var(--sombra);
}

.btn-option.selected::before {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 4px var(--card);
}

/* Aceite dos termos: caixa de marcar quadrada com "check" */
.btn-aceite::before { border-radius: 7px; }
.btn-aceite.selected::before {
    box-shadow: none;
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1309' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* ================= CAMPOS ================= */
.input-group {
    width: 100%;
    margin-bottom: 18px;
    text-align: left;
}

.input-group label,
.campo-rotulo {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 7px;
}

.campo-rotulo { margin: 6px 0 10px; text-align: left; width: 100%; }
.opcional { font-weight: 400; font-size: 0.82rem; color: var(--ink-3); }

input, select, textarea {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1.5px solid var(--line-strong);
    background: var(--card);
    color: var(--ink);
    font-size: 16px;   /* 16px: o iPhone não dá zoom ao focar */
    outline: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

textarea { height: auto; min-height: 96px; padding: 14px 16px; line-height: 1.5; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }

input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(232, 158, 39, 0.2);
}

input:disabled { opacity: .6; cursor: not-allowed; }

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: var(--chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

/* Preenchimento automático sem fundo azul/amarelo */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
    caret-color: var(--ink);
    transition: background-color 9999s;
}

.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.half { min-width: 0; }

/* Caixa de marcar (autorização médica, camisetas da equipe) */
.checkbox-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: 16px;
    background: var(--card);
    border: 1.5px solid var(--line);
    cursor: pointer;
    text-align: left;
    transition: border-color .2s, background-color .2s;
}

.checkbox-wrapper:hover { border-color: var(--line-strong); }
.checkbox-wrapper p, .checkbox-texto { color: var(--ink) !important; font-size: 0.95rem; line-height: 1.45; margin: 0 !important; }
.checkbox-wrapper:has(.custom-check.checked) { border-color: var(--accent); background: var(--sel-bg); }

.custom-check {
    width: 24px; height: 24px;
    flex-shrink: 0;
    border-radius: 7px;
    border: 2px solid var(--line-strong);
    display: grid;
    place-items: center;
    transition: background-color .2s, border-color .2s;
}

.custom-check.checked { background: var(--accent); border-color: var(--accent); }

.custom-check.checked::after {
    content: '';
    width: 6px; height: 11px;
    border: solid var(--on-accent);
    border-width: 0 2.5px 2.5px 0;
    transform: translateY(-1px) rotate(45deg);
}

/* Equipe: áreas em grade e versículo das boas-vindas */
.opcoes-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opcoes-grade .btn-option { min-height: 54px; font-size: 0.95rem; padding: 12px 14px; gap: 10px; }

.versiculo {
    margin: 0 0 20px;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    font-family: var(--fonte-titulo);
    font-size: 1.15rem;
    line-height: 1.45;
    color: var(--ink);
}

.versiculo em { font-style: normal; color: var(--accent-ink); }
.versiculo cite { display: block; margin-top: 10px; font-family: var(--fonte); font-style: normal; font-size: 0.88rem; color: var(--ink-3); }

/* Termos */
.term-box {
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    padding: 18px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    text-align: left;
    overscroll-behavior: contain;
}

.term-box h3 { font-size: 1rem; margin-bottom: 12px; }
.term-box p { font-size: 0.9rem; margin-bottom: 10px; }

/* ================= RODAPÉ (Voltar / Continuar) ================= */
.nav-footer {
    position: fixed;
    z-index: 30;
    bottom: 0;
    left: var(--aside);
    right: 0;
    min-height: var(--rodape-h);
    padding: 14px 20px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, var(--bg) 72%, color-mix(in srgb, var(--bg) 0%, transparent));
}

.nav-inner {
    width: 100%;
    max-width: var(--coluna);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Barra antiga (fica escondida; as partes no topo mostram o progresso) */
.progress-wrapper { display: none; }
.progress-fill { height: 100%; width: 0; background: var(--accent); }

/* ================= BOTÕES ================= */
.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 14px;
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s;
}

.nav-btn svg { width: 19px; height: 19px; }
.nav-btn:active:not(:disabled) { transform: scale(0.98); }

.nav-btn.primary {
    background: var(--accent);
    color: var(--on-accent);
}

.nav-btn.primary:hover:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: 0 12px 26px -14px rgba(232, 158, 39, 0.8);
}

.nav-btn.primary:disabled {
    background: var(--disabled-bg);
    color: var(--ink-3);
    cursor: not-allowed;
}

.nav-btn.outline { border-color: var(--line-strong); }
.nav-btn.outline:hover { border-color: var(--accent); color: var(--accent-ink); }
.nav-btn.ghost { color: var(--ink-2); }
.nav-btn.ghost:hover { color: var(--ink); }

.big-btn { min-height: 58px; padding: 0 30px; font-size: 1.06rem; margin-top: 24px; }

#btn-back { padding: 0 14px 0 8px; color: var(--ink-2); }
#btn-back:hover { color: var(--ink); }
#btn-next { flex: 1; max-width: 380px; margin-left: auto; }

/* ================= AVISOS ================= */
.toast {
    position: fixed;
    z-index: 100;
    bottom: calc(var(--rodape-h) + max(12px, env(safe-area-inset-bottom)));
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--ink);
    color: var(--bg);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--ease);
}

/* Telas sem rodapé (capa e finais): aviso rápido perto da borda de baixo */
body[data-modo="capa"] .toast,
body[data-modo="final"] .toast { bottom: max(16px, env(safe-area-inset-bottom)); }
body[data-modo="capa"] .toast { bottom: calc(110px + env(safe-area-inset-bottom)); }

/* Aviso no próprio campo (INSC-03) */
.input-group.has-error input,
.input-group.has-error select { border-color: var(--danger); background: var(--danger-bg); }
.input-group.has-error label { color: var(--danger); }
.field-msg { display: block; margin-top: 7px; font-size: 0.85rem; color: var(--danger); animation: fadeIn .25s var(--ease); }
.field-hint { display: block; margin-top: 7px; font-size: 0.88rem; color: var(--ink-2); }
.field-hint button {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--accent-ink); font: inherit; font-weight: 700; text-decoration: underline;
}

/* ================= CARREGANDO / ERRO ================= */
.loader-spinner {
    width: 48px; height: 48px;
    margin: 20px auto;
    border-radius: 50%;
    border: 4px solid var(--line);
    border-left-color: var(--accent);
    animation: spin 0.9s linear infinite;
}

.loading-titulo { margin-top: 12px; }

.error-box {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 20px;
    padding: 26px 22px;
    border-radius: 20px;
    background: var(--card);
    border: 1.5px solid var(--danger);
    text-align: center;
}

.error-icon {
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--danger-bg);
    color: var(--danger);
}

.error-icon svg { width: 28px; height: 28px; }
.error-title { color: var(--danger); font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 600; margin-bottom: 10px; }
.error-msg { color: var(--ink); font-size: 1.02rem; font-weight: 600; margin-bottom: 18px; }

.error-dados {
    text-align: left;
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--card-2);
    border: 1px solid var(--line);
}

.error-dados p { margin: 3px 0; font-size: 0.9rem; }
.error-dados .rotulo { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--danger); margin-bottom: 6px; }
.error-ajuda { font-size: 0.9rem; margin-bottom: 14px; }

.btn-retry {
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    border-radius: 14px;
    border: 1.5px solid var(--line-strong);
    background: transparent;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.btn-retry:hover { border-color: var(--accent); color: var(--accent-ink); }

.error-box { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }

/* ================= PAGAMENTO E RESUMO (INSC-02/INSC-03) ================= */
.btn-option.pay-option { gap: 14px; }
.pay-option > span { flex: 1; display: flex; flex-direction: column; text-align: left; }
.pay-option small { font-size: 0.82rem; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.pay-option b { font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 600; white-space: nowrap; }
.pay-hint { font-size: 0.85rem; margin-top: 12px; text-align: left; width: 100%; color: var(--ink-3); }

.review-card {
    width: 100%;
    margin-top: 24px;
    padding: 6px 16px;
    text-align: left;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--line);
}

.review-title { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.05rem; color: var(--ink); padding: 12px 0 6px; }

.review-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
}

.review-row span { color: var(--ink-3); font-size: 0.82rem; }
.review-row b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.review-row button {
    background: none; border: none; cursor: pointer;
    min-height: 36px; padding: 0 4px;
    color: var(--accent-ink); font-size: 0.85rem; font-weight: 700;
}

/* ================= TELAS FINAIS: já inscrito e pagamento ================= */
.ok-badge {
    width: 68px; height: 68px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ok);
    color: var(--bg);
    box-shadow: 0 0 0 8px var(--ok-bg);
    animation: popIn .55s cubic-bezier(.2, 1.4, .4, 1) both;
}

.ok-badge svg { width: 32px; height: 32px; }
.ok-badge.is-info { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 8px var(--sel-bg); }

.final-titulo { font-size: 2rem; margin-bottom: 10px; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.status-pill svg { width: 15px; height: 15px; }
.status-pill.is-pendente { background: var(--sel-bg); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.status-pill.is-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.status-pill.is-off { background: var(--card-2); color: var(--ink-3); border: 1px solid var(--line-strong); }

.dup-text { margin-bottom: 20px; }
.dup-card {
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 10px;
    text-align: left;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--line);
}
.dup-card div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; flex-wrap: wrap; }
.dup-card div + div { border-top: 1px solid var(--line); }
.dup-card span { color: var(--ink-3); font-size: 0.88rem; }
.dup-pergunta { margin: 18px 0 12px; color: var(--ink); font-weight: 600; }
.dup-acoes { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.dup-acoes .nav-btn { width: 100%; }

.pay-sub { margin-bottom: 14px; max-width: 44ch; }

.pay-card {
    width: 100%;
    margin: 22px 0 16px;
    padding: 18px;
    text-align: left;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--line);
}

.pay-card-title { font-weight: 700; font-size: 0.95rem; color: var(--ink); margin-bottom: 12px; }

.pay-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--card-2);
    border: 1px solid var(--line);
}

.pay-tab {
    min-height: 44px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-2);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.pay-tab:hover { color: var(--ink); }
.pay-tab.active { background: var(--accent); color: var(--on-accent); }

.pay-panel { animation: fadeIn .3s var(--ease); }
.pay-label { color: var(--ink-3); font-weight: 600; font-size: 0.85rem; margin-bottom: 2px; }
.pay-valor { font-family: var(--fonte-titulo); font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; margin-bottom: 14px; }
.pay-valor small { font-family: var(--fonte); font-size: 1rem; color: var(--ink-3); font-weight: 600; letter-spacing: 0; }
.pay-info { font-size: 0.94rem; margin-bottom: 12px; }

.pix-key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 14px;
    border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent);
    background: var(--sel-bg);
}

.pix-key div { display: flex; flex-direction: column; min-width: 0; }
.pix-key small { color: var(--ink-3); font-size: 0.8rem; }
.pix-key strong { color: var(--ink); font-size: 1.12rem; overflow-wrap: anywhere; }

.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.copy-btn svg { width: 17px; height: 17px; }
.copy-btn:active { transform: scale(0.97); }

.pay-passos { padding-left: 20px; color: var(--ink-2); font-size: 0.94rem; line-height: 1.85; }
.pay-cta { width: 100%; text-align: center; }

/* Pagamento online pela Cora (PAG-02): QR Code, copia e cola, aguardando e confirmado */
.pix-qr { width: min(232px, 72vw); margin: 4px auto 16px; padding: 10px; border-radius: 14px; background: #fff; line-height: 0; }
.pix-qr svg { width: 100%; height: auto; display: block; }
.pix-copia { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-bottom: 16px; border-radius: 14px;
    border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent); background: var(--sel-bg); text-align: left; }
.pix-copia small { color: var(--ink-3); font-size: 0.8rem; font-weight: 600; }
.pix-copia code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.78rem; color: var(--ink); overflow-wrap: anywhere;
    max-height: 4.6em; overflow: hidden; user-select: all; }
.pix-copia .copy-btn { align-self: stretch; }
.pay-aguardando { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 0.88rem; color: var(--ink-3); text-align: left; }
.pay-ponto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: pulsoPag 1.6s ease-in-out infinite; }
.pay-carregando { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 0; color: var(--ink-3); }
.pay-erro { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--danger-bg); color: var(--danger); font-size: 0.9rem; text-align: left; }
.pay-erro p { margin-bottom: 8px; }
.pay-confirmado { border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: var(--ok-bg); animation: popIn .4s var(--ease); }
.pay-confirmado .pay-card-title { color: var(--ok); font-size: 1.15rem; }
@keyframes pulsoPag { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pay-ponto, .pay-confirmado { animation: none; } }

.redirect-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--card-2);
    font-size: 0.92rem;
    color: var(--ink);
}

.redirect-box[hidden] { display: none; }
.redirect-box button { background: none; border: none; color: var(--accent-ink); cursor: pointer; text-decoration: underline; font: inherit; font-weight: 600; }

.aviso-card {
    width: 100%;
    padding: 16px;
    border-radius: 18px;
    background: var(--sel-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    text-align: left;
    font-size: 0.94rem;
    color: var(--ink-2);
}

.aviso-card strong { display: block; color: var(--ink); margin-bottom: 4px; }

.zap-btn {
    width: 100%;
    margin-top: 12px;
    background: #25A35A;
    color: #FFFFFF !important;
}

.zap-btn:hover { background: #1F8F4E; }

.final-info {
    width: 100%;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.final-info p { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; }
.final-info svg { width: 18px; height: 18px; color: var(--accent-ink); }

.btn-inicio { width: 100%; margin-top: 22px; }

.saved-link {
    margin-top: 6px;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-2);
    font-size: 0.94rem;
}

.saved-link u { color: var(--accent-ink); font-weight: 700; text-decoration: none; }

/* ================= SÓ VALE DEPOIS DO PAGAMENTO (VIS-06) ================= */
.regra-pagamento {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--sel-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--ink-2);
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: left;
}

.regra-pagamento svg { width: 20px; height: 20px; color: var(--accent-ink); margin-top: 1px; }
.regra-pagamento strong { display: block; color: var(--ink); font-size: 0.95rem; }
.regra-pagamento.is-forte { margin-bottom: 18px; padding: 14px 16px; border-width: 1.5px; }

.tag-auto {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ok-bg);
    color: var(--ok);
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 2px;
}

.pay-nome { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; font-weight: inherit; }
.pay-nome .tag-auto { margin-left: 8px; }

/* Etapa de pagamento: dados recolhidos (menos leitura); abre ao tocar */
.review-details { width: 100%; margin-top: 16px; text-align: left; }
.review-details summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 4px;
    list-style: none;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent-ink);
}
.review-details summary::-webkit-details-marker { display: none; }
.review-details summary svg { width: 16px; height: 16px; }
.review-details summary::after { content: '▾'; margin-left: auto; transition: transform .2s; }
.review-details[open] summary::after { transform: rotate(180deg); }
.review-details .review-card { margin-top: 6px; }

/* Tela de pagamento: título grande diz o principal; ajuda numa linha só */
.pay-screen .final-titulo { font-size: 2.2rem; text-wrap: balance; }
.final-ajuda { margin-top: 18px; font-size: 0.9rem; color: var(--ink-3); }
.final-ajuda a, .final-ajuda button { color: var(--accent-ink); font-weight: 600; text-decoration: none; background: none; border: none; padding: 6px 2px; font: inherit; font-weight: 600; cursor: pointer; }
.aviso-card { display: flex; flex-direction: column; gap: 4px; }
.aviso-card .zap-btn { margin-top: 8px; }
.pay-carregando { display: grid; place-items: center; min-height: 160px; }

.pay-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.pay-tab small { font-size: 0.66rem; font-weight: 600; opacity: 0.8; letter-spacing: 0.02em; }

.ok-badge.is-pendente { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 8px var(--sel-bg); }

/* Capa: "sua inscrição ainda não está paga" (só aparece depois de o servidor conferir) */
.inscricao-salva:empty { display: none; }
.inscricao-salva { width: 100%; }
.saved-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 2px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: var(--sel-bg);
    color: var(--ink-2);
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.4;
    animation: fadeIn .4s var(--ease);
}

.saved-link svg { width: 18px; height: 18px; color: var(--accent-ink); }
.saved-link u { white-space: nowrap; }

/* Inscrição confirmada */
.confirmada-card .final-info { margin-top: 0; }
.confirmada-card .zap-btn { margin-top: 16px; }

/* Comemoração quando o pagamento cai */
.festa {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    overflow-y: auto;
    padding: 70px 20px 20px; /* espaço para o selo que sobe acima do cartão */
    background: color-mix(in srgb, #0d0805 72%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fadeIn .3s var(--ease);
    overflow: hidden;
}

.festa.saindo { opacity: 0; transition: opacity .3s; }

.festa-confete { position: fixed; inset: 0; pointer-events: none; }
.festa-confete i {
    position: absolute;
    top: -20px;
    width: 9px; height: 14px;
    border-radius: 3px;
    opacity: 0;
    animation-name: confete;
    animation-timing-function: cubic-bezier(.3, .6, .5, 1);
    animation-iteration-count: 2;
    animation-fill-mode: forwards;
}

.festa-card {
    position: relative;
    margin: auto; /* centraliza; em tela baixa a janela rola em vez de cortar */
    width: min(440px, 100%);
    padding: 34px 26px 26px;
    border-radius: 26px;
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    text-align: center;
    animation: festaEntra .6s cubic-bezier(.2, 1.3, .4, 1) both;
}

.festa-selo {
    width: 84px; height: 84px;
    margin: -76px auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ok);
    color: var(--bg);
    box-shadow: 0 0 0 8px var(--card), 0 0 0 14px var(--ok-bg), 0 14px 40px -10px var(--ok);
    animation: popIn .6s .15s cubic-bezier(.2, 1.4, .4, 1) both;
}

.festa-selo svg { width: 40px; height: 40px; }

.festa-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 8px;
}

.festa-card h2 { font-size: 2rem; line-height: 1.08; margin-bottom: 12px; }
.festa-card p { font-size: 1rem; margin-bottom: 20px; }
.festa-acoes { display: flex; flex-direction: column; gap: 10px; }
.festa-acoes .nav-btn { width: 100%; margin-top: 0; }

@keyframes confete {
    0% { opacity: 1; transform: translate3d(0, -20px, 0) rotate(0deg); }
    100% { opacity: 0; transform: translate3d(30px, 105vh, 0) rotate(540deg); }
}

@keyframes festaEntra {
    from { opacity: 0; transform: translateY(30px) scale(.92); }
    to { opacity: 1; transform: none; }
}

/* ================= ANIMAÇÕES ================= */
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= CELULAR ================= */
@media (max-width: 600px) {
    .row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .question-text { font-size: 1.55rem; }
    .etapa-titulo { font-size: 1.55rem; }
    .review-row { grid-template-columns: 88px minmax(0, 1fr) auto; font-size: 0.88rem; }
    .pay-card { padding: 16px 14px; }
    .pay-valor { font-size: 2.2rem; }
    .copy-btn { width: 100%; }
    .final-titulo { font-size: 1.7rem; }
    .pay-screen .final-titulo { font-size: 1.9rem; }
    .festa-card { padding: 30px 20px 20px; }
    .festa-card h2 { font-size: 1.75rem; }
}

@media (max-width: 380px) {
    .logo { height: 38px; }
    .btn-login { width: 44px; padding: 0; }
    .btn-login span { display: none; }
    .capa-titulo { font-size: 2.35rem; }
    .capa-edicao-num { font-size: 3.3rem; }
    .pay-screen .final-titulo { font-size: 1.65rem; }
    .capa-edicao-txt b { font-size: 1.15rem; }
    .question-text { font-size: 1.4rem; }
    #content-area { padding-left: 16px; padding-right: 16px; }
    .nav-footer { padding-left: 16px; padding-right: 16px; }
}

/* Celular com pouca altura: foto da capa menor */
@media (max-width: 1023px) and (max-height: 700px) {
    .vitrine { height: 52vh; height: 52dvh; }
}

/* Capa no celular/tablet: o texto começa sobre o fim da foto */
@media (max-width: 1023px) {
    body[data-modo="capa"] #content-area { padding-top: 30vh; padding-top: 30dvh; }
    .capa-eyebrow { text-shadow: 0 1px 12px var(--bg); }
    .capa-regra { justify-content: center; text-align: center; }
    /* Botão de inscrição sempre à vista, mesmo em celular pequeno */
    .capa-cta {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding: 14px 0 max(14px, env(safe-area-inset-bottom));
        background: linear-gradient(0deg, var(--bg) 70%, color-mix(in srgb, var(--bg) 0%, transparent));
    }
}

/* Celular deitado / telas baixas: topo e rodapé mais finos */
@media (max-height: 500px) and (orientation: landscape) {
    :root { --topo-h: 56px; --rodape-h: 68px; }
    .topo { padding-top: max(8px, env(safe-area-inset-top)); }
    body[data-modo="etapa"] .topo, body[data-modo="final"] .topo { padding-bottom: 8px; }
    .logo, body[data-modo="etapa"] .logo { height: 32px; }
    .icon-btn { width: 40px; height: 40px; }
    .capitulo-nome { display: none; }
    .capitulos { margin-top: 8px; }
    body[data-modo="etapa"] #content-area { padding-top: calc(var(--topo-h) + 28px); }
    .nav-footer { padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    .nav-btn { min-height: 46px; }
    .capa-titulo { font-size: 2.6rem; }
    .capa-edicao-num { font-size: 2.6rem; }
    .capa-edicao-num + .capa-edicao-txt { min-height: 36px; }
}

/* ================= COMPUTADOR ================= */
@media (min-width: 1024px) {
    :root { --topo-h: 84px; }
    .topo { padding-left: 40px; padding-right: 40px; }
    .logo { height: 52px; }

    /* Capa: foto grande à direita, texto à esquerda */
    body[data-modo="capa"] .vitrine { left: auto; width: 60%; height: 100%; }
    body[data-modo="capa"] .vitrine::after {
        background:
            linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 22%, transparent 55%),
            linear-gradient(0deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 35%);
    }
    body[data-modo="capa"] #content-area { align-items: flex-start; padding: calc(var(--topo-h) + 24px) 64px 0; }
    body[data-modo="capa"] .capa { margin: auto 0; max-width: min(540px, 40vw); }
    .capa-titulo { font-size: clamp(3.2rem, 4.8vw, 4.8rem); }
    body[data-modo="capa"] .capa { gap: 13px; }
    .capa-cta { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 12px 20px; }
    .capa-cta .nav-btn { width: auto; white-space: nowrap; }
    .capa-tempo { white-space: nowrap; }
    .capa-cta .inscricao-salva, .capa-cta .capa-regra { flex-basis: 100%; max-width: 520px; }
    .capa-edicao { gap: 20px; }
    .capa-edicao-num { font-size: 6.2rem; }
    .capa-edicao-txt { padding-left: 20px; }
    .capa-edicao-txt small { font-size: 13px; }
    .capa-edicao-txt b { font-size: 2rem; }
    .capa-edicao-num + .capa-edicao-txt { min-height: 76px; }

    /* Aviso rápido centralizado na coluna do formulário */
    .toast { left: calc(var(--aside) + (100% - var(--aside)) / 2); }

    /* Etapas e telas finais: coluna de fotos à esquerda */
    body[data-modo="etapa"], body[data-modo="final"] { --aside: min(38vw, 560px); }
    body[data-modo="etapa"] .vitrine,
    body[data-modo="final"] .vitrine {
        opacity: 1;
        top: 20px; left: 20px; bottom: 20px;
        width: calc(var(--aside) - 40px);
        height: auto;
        border-radius: 28px;
    }
    body[data-modo="etapa"] .vitrine::after,
    body[data-modo="final"] .vitrine::after {
        background: linear-gradient(0deg, rgba(23, 14, 8, 0.55), transparent 40%);
    }
    body[data-modo="etapa"] .topo { padding-left: 64px; padding-right: 48px; }
    body[data-modo="etapa"] #content-area,
    body[data-modo="final"] #content-area { padding-left: 64px; padding-right: 48px; padding-top: calc(var(--topo-h) + 64px); }
    body[data-modo="etapa"] .capitulos { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 40%); margin: 0; }
    .question-text { font-size: 2.2rem; }
    .etapa-titulo { font-size: 2.1rem; }
    .nav-footer { padding-left: 64px; padding-right: 48px; }
}

/* Quem pede menos movimento no sistema */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .vitrine-slide img { transform: none !important; }
    .vitrine-slide { transition: opacity 1.4s ease !important; } /* fotos trocam com esmaecer suave, sem zoom */
}