/* ============================================================
   Formulário de Avaliação — Orquestra Voadora (13/10/2026)

   A cara nova da /avaliacoes. As cores saem do escudo: o azul
   royal do fundo, o dourado da borda e o verde do pássaro. O
   fundo deixou de ser um azul chapado: são camadas de luz sobre
   um marinho profundo, com grão fino por cima.

   Convivência com o theme.css (carregado ANTES desta folha):
   o tema claro dele pinta todo texto de marrom com
   `html[data-theme="light"] body :where(...)` (0,1,2) e força
   fundo/borda/cor de todo input com !important. Por isso:
   - o reset de cor abaixo empata em (0,1,2) e vence pela ordem;
   - as cores dos componentes ficam em `.av-app .x` (0,2,0);
   - os campos de texto do tema claro levam !important.
   ============================================================ */

/* ── Tokens (escuro, o padrão) ── */
.av-page {
    --av-fundo: #081631;
    --av-sup: rgba(16, 35, 78, 0.62);
    --av-sup-2: rgba(25, 51, 108, 0.42);
    --av-sup-hover: rgba(34, 66, 136, 0.55);
    --av-campo: rgba(4, 13, 33, 0.5);
    --av-campo-foco: rgba(4, 13, 33, 0.72);
    --av-borda: rgba(150, 182, 255, 0.13);
    --av-borda-2: rgba(150, 182, 255, 0.24);
    --av-borda-3: rgba(150, 182, 255, 0.4);
    --av-texto: #f2f5fc;
    --av-texto-2: rgba(222, 231, 248, 0.8);
    --av-texto-3: rgba(196, 211, 240, 0.58);
    --av-ouro: #F0B429;
    --av-ouro-claro: #FFD25E;
    --av-ouro-tinta: #1f1503;
    --av-ouro-suave: rgba(240, 180, 41, 0.13);
    --av-ouro-borda: rgba(240, 180, 41, 0.5);
    --av-verde: #9BCB3C;
    --av-azul: #4C86FF;
    /* a cor de "escolhido": dourado no escuro, azul do escudo no claro */
    --av-selec: #F0B429;
    --av-selec-tinta: #1f1503;
    --av-selec-suave: rgba(240, 180, 41, 0.13);
    --av-selec-meio: rgba(240, 180, 41, 0.32);
    --av-selec-brilho: rgba(240, 180, 41, 0.55);
    --av-trilho: rgba(150, 182, 255, 0.15);
    --av-progresso: linear-gradient(90deg, #F0B429, #FFD25E);
    --av-erro: #FFA197;
    --av-erro-borda: rgba(255, 128, 112, 0.6);
    --av-erro-suave: rgba(255, 110, 95, 0.09);
    --av-sombra: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 22px 46px -28px rgba(0, 0, 0, 0.75);
    --av-sombra-alta: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 30px 60px -26px rgba(0, 0, 0, 0.8);
    --av-foco: 0 0 0 3px rgba(240, 180, 41, 0.42);
    --av-barra: rgba(9, 22, 52, 0.94);
    --av-raio: 22px;
    --av-raio-m: 16px;
    --av-raio-p: 12px;
    --av-mola: cubic-bezier(0.22, 1, 0.36, 1);
    --av-pulo: cubic-bezier(0.34, 1.56, 0.64, 1);
    --av-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    --av-corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Quanto a pagina que chega desliza. Nunca mais que a margem lateral:
       no celular, 34px passavam da borda e a tela "alargava" no meio do
       deslize. */
    --av-desliza: 34px;
    color-scheme: dark;
}
@media (max-width: 820px) {
    .av-page { --av-desliza: 12px; }
}

/* ── Tokens (claro) ── */
html[data-theme="light"] .av-page {
    --av-fundo: #f5f1e7;
    --av-sup: rgba(255, 255, 255, 0.86);
    --av-sup-2: #fbfaf6;
    --av-sup-hover: #ffffff;
    --av-campo: #ffffff;
    --av-campo-foco: #ffffff;
    --av-borda: rgba(18, 40, 88, 0.11);
    --av-borda-2: rgba(18, 40, 88, 0.2);
    --av-borda-3: rgba(18, 40, 88, 0.34);
    --av-texto: #0d1b39;
    --av-texto-2: #3a4867;
    --av-texto-3: #67748f;
    --av-ouro-suave: rgba(214, 150, 10, 0.12);
    --av-selec: #1F4FB8;
    --av-selec-tinta: #ffffff;
    --av-selec-suave: rgba(31, 79, 184, 0.07);
    --av-selec-meio: rgba(31, 79, 184, 0.22);
    --av-selec-brilho: rgba(31, 79, 184, 0.35);
    --av-trilho: rgba(18, 40, 88, 0.1);
    --av-progresso: linear-gradient(90deg, #1F4FB8, #3F7BEA);
    --av-erro: #B42318;
    --av-erro-borda: rgba(196, 48, 48, 0.55);
    --av-erro-suave: rgba(196, 48, 48, 0.05);
    --av-sombra: 0 1px 2px rgba(18, 40, 88, 0.05), 0 18px 40px -26px rgba(18, 40, 88, 0.35);
    --av-sombra-alta: 0 2px 4px rgba(18, 40, 88, 0.06), 0 26px 52px -24px rgba(18, 40, 88, 0.42);
    --av-foco: 0 0 0 3px rgba(31, 79, 184, 0.3);
    --av-barra: rgba(248, 245, 238, 0.96);
    color-scheme: light;
}

/* ── Base ── */
.av-page *, .av-page *::before, .av-page *::after { box-sizing: border-box; }
.av-app :where(h1, h2, h3, p, ul, figure) { margin: 0; }
.av-app :where(ul) { padding: 0; }
[hidden] { display: none !important; }

/* O fundo e a cor do texto vencem os do theme.css (o escuro empata e
   vence pela ordem; o claro usa !important). */
html[data-theme] body.av-page,
html body.av-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--av-fundo) !important;
    color: var(--av-texto) !important;
    font-family: var(--av-corpo);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

/* Reset de cor: o catch-all do tema claro some daqui de dentro. */
html body .av-app :where(h1, h2, h3, h4, h5, h6, p, span, div, label, li, a, strong, em, small, b, button, legend) {
    color: inherit;
}

/* ── O fundo ── */
.av-fundo {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(1100px 620px at 8% -12%, rgba(47, 98, 214, 0.5), transparent 62%),
        radial-gradient(900px 520px at 104% 6%, rgba(240, 180, 41, 0.1), transparent 60%),
        radial-gradient(1000px 640px at 92% 112%, rgba(155, 203, 60, 0.1), transparent 62%),
        radial-gradient(800px 600px at -10% 100%, rgba(47, 98, 214, 0.22), transparent 60%),
        linear-gradient(180deg, #0c2049 0%, #081631 46%, #050d22 100%);
}
.av-fundo::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.av-luz {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
.av-luz-1 {
    width: 620px; height: 620px;
    top: 18%; right: -260px;
    background: radial-gradient(circle, rgba(76, 134, 255, 0.18), transparent 65%);
    animation: avDeriva 26s ease-in-out infinite alternate;
}
.av-luz-2 {
    width: 520px; height: 520px;
    bottom: -180px; left: -160px;
    background: radial-gradient(circle, rgba(240, 180, 41, 0.1), transparent 65%);
    animation: avDeriva 32s ease-in-out -9s infinite alternate-reverse;
}
html[data-theme="light"] .av-fundo {
    background:
        radial-gradient(1100px 620px at 8% -12%, rgba(47, 98, 214, 0.14), transparent 62%),
        radial-gradient(900px 520px at 104% 6%, rgba(240, 180, 41, 0.2), transparent 60%),
        radial-gradient(1000px 640px at 92% 112%, rgba(155, 203, 60, 0.16), transparent 62%),
        linear-gradient(180deg, #f8f5ee 0%, #f4efe3 100%);
}
html[data-theme="light"] .av-fundo::after { opacity: 0.035; }
html[data-theme="light"] .av-luz-1 { background: radial-gradient(circle, rgba(76, 134, 255, 0.1), transparent 65%); }
html[data-theme="light"] .av-luz-2 { background: radial-gradient(circle, rgba(240, 180, 41, 0.12), transparent 65%); }

/* ── Estrutura ── */
.av-app {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px 128px;
    color: var(--av-texto);
}
.av-app[data-etapa="temporada"] { max-width: 900px; }
.av-tela-entra { animation: avTela 0.55s var(--av-mola) both; }
/* Na volta pra tela da temporada a entrada e da tela inteira: as partes nao
   repetem a cascata da primeira vez. */
.av-app .av-ja-vista :is(.av-hero-logo, .av-eyebrow, .av-titulo, .av-lead, .av-tcard, .av-tela-acoes) { animation: none; }

.av-app .av-ico { display: block; flex: none; }

/* Pré-visualização do admin e a avaliação fechada (13/10/2026) */
.av-previa {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    font: 600 13px/1.35 var(--av-corpo);
    text-align: center;
    color: #1f1503;
    background: linear-gradient(90deg, #FFD566, #F0B429);
}
.av-previa .av-ico { flex: none; }
.av-app .av-fechada-link { margin-top: 28px; }

/* ── Botões ── */
.av-app .av-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    font: 700 15.5px/1 var(--av-corpo);
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.22s var(--av-mola), box-shadow 0.25s ease, background 0.2s ease,
                color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.av-app .av-btn:focus-visible { outline: none; box-shadow: var(--av-foco); }
.av-app .av-btn-primario {
    color: #1f1503;
    background: linear-gradient(135deg, #FFD566 0%, #F0B429 52%, #E29C10 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 12px 28px -12px rgba(240, 180, 41, 0.75);
}
.av-app .av-btn-primario:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 18px 36px -14px rgba(240, 180, 41, 0.85);
}
.av-app .av-btn-primario:active { transform: translateY(0) scale(0.98); }
.av-app .av-btn-primario:focus-visible { box-shadow: var(--av-foco), 0 12px 28px -12px rgba(240, 180, 41, 0.75); }
.av-app .av-btn-primario:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    transform: none;
    filter: saturate(0.5);
    box-shadow: none;
}
.av-app .av-btn-primario .av-ico { transition: transform 0.25s var(--av-mola); }
.av-app .av-btn-primario:not(:disabled):hover .av-ico { transform: translateX(3px); }
.av-app .av-btn-fantasma {
    color: var(--av-texto-2);
    background: transparent;
    border: 1.5px solid var(--av-borda-2);
}
.av-app .av-btn-fantasma:hover {
    color: var(--av-texto);
    border-color: var(--av-borda-3);
    background: var(--av-sup-2);
}
.av-app .av-btn-fantasma:hover .av-ico { transform: translateX(-3px); }
.av-app .av-btn-fantasma .av-ico { transition: transform 0.25s var(--av-mola); }
.av-app .av-btn-grande { min-height: 58px; padding: 0 34px; font-size: 16.5px; }
.av-app .av-btn-pequeno { min-height: 42px; padding: 0 20px; font-size: 14px; }

/* "Enviando…" — o rótulo troca e um anel gira no lugar da seta */
.av-app .av-btn.enviando { cursor: progress; opacity: 0.85; }
.av-app .av-btn.enviando .av-ico { display: none; }
.av-app .av-btn.enviando::after {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid rgba(31, 21, 3, 0.25);
    border-top-color: #1f1503;
    animation: avGira 0.7s linear infinite;
}

/* ============================================================
   1. A TEMPORADA
   ============================================================ */
.av-app .av-hero {
    text-align: center;
    padding: clamp(44px, 9vh, 84px) 0 0;
}
.av-app .av-hero-logo {
    display: block;
    width: 78px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 14px 30px rgba(47, 98, 214, 0.55));
    animation: avLogo 0.8s var(--av-pulo) both;
}
.av-app .av-eyebrow {
    margin-top: 24px;
    font: 700 12px/1.2 var(--av-corpo);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--av-ouro);
    animation: avSobe 0.6s var(--av-mola) 0.08s both;
}
html[data-theme="light"] .av-app .av-eyebrow { color: #A86F00; }
.av-app .av-titulo {
    max-width: 680px;
    margin: 14px auto 0;
    font: 800 clamp(31px, 5.6vw, 52px)/1.03 var(--av-display);
    letter-spacing: -0.028em;
    color: var(--av-texto);
    text-wrap: balance;
    animation: avSobe 0.65s var(--av-mola) 0.14s both;
}
.av-app .av-titulo em {
    font-style: normal;
    color: transparent;
    background: linear-gradient(95deg, #FFD566 0%, #F0B429 45%, #B8DD62 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
html[data-theme="light"] .av-app .av-titulo em {
    background-image: linear-gradient(95deg, #1F4FB8 0%, #2F6BE0 55%, #4E8A12 100%);
}
.av-app .av-lead {
    max-width: 580px;
    margin: 18px auto 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--av-texto-2);
    text-wrap: pretty;
    animation: avSobe 0.65s var(--av-mola) 0.2s both;
}
.av-app .av-lead strong { color: var(--av-texto); font-weight: 650; }

.av-app .av-temporadas {
    display: grid;
    /* Cada card ate 360px, centralizados: com uma temporada so, ele nao
       atravessa a tela inteira. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 360px));
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}
.av-app .av-tcard {
    position: relative;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: avSobe 0.6s var(--av-mola) both;
    animation-delay: calc(0.26s + var(--i, 0) * 0.07s);
}
.av-app .av-tcard > input,
.av-app .av-opcao > input,
.av-app .av-nota > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.av-app .av-tcard-corpo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 172px;
    padding: 20px 22px 22px;
    border-radius: 24px;
    overflow: hidden;
    color: var(--av-texto);
    background:
        radial-gradient(140% 120% at 100% 0%, rgba(76, 134, 255, 0.17), transparent 55%),
        var(--av-sup);
    border: 1.5px solid var(--av-borda);
    box-shadow: var(--av-sombra);
    transition: transform 0.3s var(--av-mola), border-color 0.25s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.av-app .av-tcard:hover .av-tcard-corpo {
    transform: translateY(-4px);
    border-color: var(--av-borda-3);
    box-shadow: var(--av-sombra-alta);
}
.av-app .av-tcard > input:focus-visible + .av-tcard-corpo { box-shadow: var(--av-foco), var(--av-sombra); }
.av-app .av-tcard > input:checked + .av-tcard-corpo {
    border-color: var(--av-selec);
    background:
        radial-gradient(140% 120% at 100% 0%, var(--av-selec-meio), transparent 58%),
        var(--av-sup);
    box-shadow: 0 0 0 1px var(--av-selec) inset, 0 26px 50px -26px var(--av-selec-brilho);
}
.av-app .av-tcard-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 26px;
}
.av-app .av-tcard-rotulo {
    font: 700 11px/1 var(--av-corpo);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--av-texto-3);
}
.av-app .av-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font: 700 11.5px/1 var(--av-corpo);
    white-space: nowrap;
    color: var(--av-texto-2);
    background: var(--av-sup-2);
    border: 1px solid var(--av-borda);
}
.av-app .av-selo-vivo {
    color: #D4EDA1;
    background: rgba(155, 203, 60, 0.12);
    border-color: rgba(155, 203, 60, 0.32);
}
html[data-theme="light"] .av-app .av-selo-vivo { color: #3D6A06; background: rgba(110, 160, 20, 0.1); border-color: rgba(110, 160, 20, 0.35); }
.av-app .av-selo-vivo i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--av-verde);
    animation: avPulso 2.2s ease-out infinite;
}
.av-app .av-tcard-titulo {
    margin-top: auto;
    padding-top: 16px;
    font: 800 clamp(34px, 6vw, 46px)/1 var(--av-display);
    letter-spacing: -0.03em;
    color: var(--av-texto);
    transition: color 0.25s ease;
    overflow-wrap: anywhere;
}
.av-app .av-tcard > input:checked + .av-tcard-corpo .av-tcard-titulo { color: var(--av-ouro-claro); }
html[data-theme="light"] .av-app .av-tcard > input:checked + .av-tcard-corpo .av-tcard-titulo { color: var(--av-selec); }
.av-app .av-tcard-periodo {
    padding-right: 44px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--av-texto-2);
}
.av-app .av-tcard-check {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--av-borda-2);
    color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.av-app .av-tcard > input:checked + .av-tcard-corpo .av-tcard-check {
    color: var(--av-selec-tinta);
    background: var(--av-selec);
    border-color: var(--av-selec);
}
.av-app .av-tcard.pulou > input:checked + .av-tcard-corpo .av-tcard-check { animation: avPop 0.45s var(--av-pulo); }

.av-app .av-tela-acoes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
    animation: avSobe 0.6s var(--av-mola) 0.34s both;
}
.av-app .av-dica {
    min-height: 1.5em;
    font-size: 14px;
    text-align: center;
    color: var(--av-texto-3);
}
.av-app .av-dica strong { color: var(--av-texto); font-weight: 650; }

/* ============================================================
   2. AS PERGUNTAS
   ============================================================ */
.av-app .av-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    /* o botão do tema (theme.js) mora no canto de cima, à direita */
    padding: 22px 64px 8px 0;
}
.av-app .av-topo-logo { width: 34px; height: auto; flex: none; }
.av-app .av-topo-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.av-app .av-topo-eyebrow {
    font: 700 10.5px/1.2 var(--av-corpo);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--av-texto-3);
}
.av-app .av-topo-nome { font: 700 15px/1.3 var(--av-display); color: var(--av-texto); }

.av-app .av-trocar { position: relative; max-width: 100%; }
.av-app .av-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    min-height: 32px;
    padding: 5px 10px 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--av-borda-2);
    background: var(--av-sup-2);
    color: var(--av-texto);
    font: 600 13.5px/1.2 var(--av-corpo);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.av-app .av-chip .av-ico { color: var(--av-ouro); }
html[data-theme="light"] .av-app .av-chip .av-ico { color: var(--av-selec); }
.av-app .av-chip-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-app button.av-chip:hover { border-color: var(--av-borda-3); background: var(--av-sup-hover); }
.av-app button.av-chip:focus-visible { outline: none; box-shadow: var(--av-foco); }
.av-app .av-chip--fixo { cursor: default; }
.av-app .av-chip[aria-expanded="true"] .av-ico:last-child { transform: rotate(180deg); }
.av-app .av-chip .av-ico:last-child { transition: transform 0.25s var(--av-mola); color: var(--av-texto-3); }

.av-app .av-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    width: min(320px, calc(100vw - 40px));
    padding: 8px;
    border-radius: 18px;
    background: #0e2150;
    border: 1px solid var(--av-borda-2);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
    animation: avMenu 0.22s var(--av-mola);
    transform-origin: top left;
}
html[data-theme="light"] .av-app .av-menu { background: #ffffff; box-shadow: 0 24px 50px -18px rgba(18, 40, 88, 0.35); }
.av-app .av-menu-titulo {
    padding: 8px 10px 6px;
    font: 700 10.5px/1.2 var(--av-corpo);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--av-texto-3);
}
.av-app .av-menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--av-texto);
    font: 600 14.5px/1.3 var(--av-corpo);
    text-align: left;
    cursor: pointer;
}
.av-app .av-menu-item:hover,
.av-app .av-menu-item:focus-visible { outline: none; background: var(--av-sup-hover); }
.av-app .av-menu-item-periodo { grid-column: 1; font-size: 12.5px; font-weight: 500; color: var(--av-texto-3); margin-top: 2px; }
.av-app .av-menu-item-check { grid-column: 2; grid-row: 1 / span 2; color: transparent; }
.av-app .av-menu-item[aria-checked="true"] .av-menu-item-check { color: var(--av-selec); }

/* Progresso: fica preso no topo enquanto a página rola */
.av-app .av-sentinela { height: 1px; }
.av-app .av-progresso {
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 0 -20px;
    padding: 12px 20px 14px;
    isolation: isolate;
}
.av-app .av-progresso::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* A faixa vai de ponta a ponta da tela: a sombra espalhada preenche os
       lados e o recorte a limita a altura da barra (sombra nao cria rolagem
       lateral, um elemento de 100vw criaria). */
    background: var(--av-barra);
    box-shadow: 0 0 0 100vmax var(--av-barra), 0 1px 0 100vmax var(--av-borda);
    clip-path: inset(0 -100vmax -1px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.av-app .av-progresso.preso::before { opacity: 1; }
.av-app .av-progresso-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.av-app .av-progresso-secao {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 700 15px/1.3 var(--av-display);
    color: var(--av-texto);
}
.av-app .av-progresso-etapa {
    flex: none;
    font: 600 12.5px/1.3 var(--av-corpo);
    font-variant-numeric: tabular-nums;
    color: var(--av-texto-3);
}
.av-app .av-trilha { display: flex; gap: 6px; }
.av-app .av-seg {
    position: relative;
    flex: 1 1 0;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--av-trilho);
}
.av-app .av-seg::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--av-progresso);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s var(--av-mola), opacity 0.3s ease;
}
.av-app .av-seg.feito::after { transform: scaleX(1); opacity: 0.6; }
.av-app .av-seg.atual::after { transform: scaleX(1); }

/* Páginas: só a ativa aparece; a que chega desliza do lado certo */
.av-app .form-page { display: none; counter-reset: av-q; }
.av-app .form-page.active { display: block; }
.av-app .form-page.av-entra-frente { animation: avEntraFrente 0.42s var(--av-mola) both; }
.av-app .form-page.av-entra-tras { animation: avEntraTras 0.42s var(--av-mola) both; }

.av-app .av-secao {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 18px 0 20px;
}
.av-app .av-secao-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    color: #1f1503;
    background: linear-gradient(140deg, #FFD566, #F0B429 60%, #E29C10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 12px 26px -12px rgba(240, 180, 41, 0.75);
}
.av-app .av-secao-titulo {
    font: 750 clamp(23px, 3.6vw, 31px)/1.12 var(--av-display);
    letter-spacing: -0.02em;
    color: var(--av-texto);
    text-wrap: balance;
}
.av-app .av-secao-titulo:focus { outline: none; }
.av-app .av-secao-sub { margin-top: 5px; font-size: 13px; color: var(--av-texto-3); }

/* Cartão de pergunta */
.av-app .av-q {
    position: relative;
    margin-bottom: 14px;
    padding: 24px 26px 24px;
    border-radius: var(--av-raio);
    background: var(--av-sup);
    border: 1px solid var(--av-borda);
    box-shadow: var(--av-sombra);
    color: var(--av-texto);
    transition: border-color 0.25s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.av-app .av-q:focus-within { border-color: var(--av-borda-2); }
.av-app .av-q-cabeca {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}
.av-app .av-q-num {
    flex: none;
    min-width: 34px;
    height: 26px;
    margin-top: -1px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font: 700 11.5px/1 var(--av-corpo);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--av-ouro);
    background: var(--av-ouro-suave);
    border: 1px solid rgba(240, 180, 41, 0.24);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
html[data-theme="light"] .av-app .av-q-num { color: #946200; border-color: rgba(214, 150, 10, 0.3); }
html[data-theme="light"] .av-app .av-q--respondida .av-q-num { color: var(--av-selec-tinta); border-color: var(--av-selec); }
.av-app .av-q-num::before { counter-increment: av-q; content: counter(av-q, decimal-leading-zero); }
.av-app .av-q--respondida .av-q-num {
    color: var(--av-selec-tinta);
    background: var(--av-selec);
    border-color: var(--av-selec);
}
.av-app .av-q-titulo {
    flex: 1;
    min-width: 0;
    font: 600 16px/1.5 var(--av-corpo);
    color: var(--av-texto);
    text-wrap: pretty;
}
.av-app .av-obg { color: var(--av-ouro); font-weight: 700; }
html[data-theme="light"] .av-app .av-obg { color: #B42318; }
.av-app .av-opcional { font-weight: 500; color: var(--av-texto-3); }
.av-app .av-grade-contador {
    flex: none;
    margin-top: 1px;
    padding: 4px 9px;
    border-radius: 999px;
    font: 700 11.5px/1.2 var(--av-corpo);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--av-texto-3);
    background: var(--av-sup-2);
    border: 1px solid var(--av-borda);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.av-app .av-grade-contador:empty { display: none; }
.av-app .av-grade-contador.completo { color: var(--av-selec-tinta); background: var(--av-selec); border-color: var(--av-selec); }

/* Erro */
.av-app .av-erro {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font: 600 13px/1.4 var(--av-corpo);
    color: var(--av-erro);
}
.av-app .av-erro::before {
    content: '!';
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: #E5483B;
}
.av-app .av-erro.visible { display: flex; }
.av-app .av-q.av-q--erro,
.av-app .av-q.av-q--erro:focus-within {
    border-color: var(--av-erro-borda);
    background: linear-gradient(var(--av-erro-suave), var(--av-erro-suave)), var(--av-sup);
    animation: avTreme 0.42s ease;
}

/* Opções (radio) */
.av-app .av-opcoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 10px;
}
.av-app .av-opcoes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.av-app .av-opcoes--instrumentos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); }
.av-app .av-opcao {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.av-app .av-opcao-caixa {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 54px;
    padding: 13px 14px 13px 16px;
    border-radius: var(--av-raio-m);
    background: var(--av-sup-2);
    border: 1.5px solid var(--av-borda);
    color: var(--av-texto-2);
    font: 600 15px/1.35 var(--av-corpo);
    transition: transform 0.22s var(--av-mola), background 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, box-shadow 0.25s ease;
}
.av-app .av-opcao-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.av-app .av-opcao-marca {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--av-borda-3);
    color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.av-app .av-opcao-marca .av-ico { transform: scale(0.3); opacity: 0; transition: transform 0.3s var(--av-pulo), opacity 0.15s ease; }
.av-app .av-opcao > input:focus-visible + .av-opcao-caixa { box-shadow: var(--av-foco); }
.av-app .av-opcao > input:checked + .av-opcao-caixa {
    color: var(--av-texto);
    border-color: var(--av-selec);
    background: linear-gradient(135deg, var(--av-selec-suave), transparent 130%), var(--av-sup-2);
    box-shadow: 0 0 0 1px var(--av-selec) inset, 0 12px 26px -16px var(--av-selec-brilho);
}
.av-app .av-opcao > input:checked + .av-opcao-caixa .av-opcao-marca {
    color: var(--av-selec-tinta);
    background: var(--av-selec);
    border-color: var(--av-selec);
}
.av-app .av-opcao > input:checked + .av-opcao-caixa .av-opcao-marca .av-ico { transform: scale(1); opacity: 1; }
.av-app .av-opcao:active .av-opcao-caixa { transform: scale(0.985); }

/* Categoria: cartões com ícone */
.av-app .av-opcoes--icones { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.av-app .av-opcao--icone .av-opcao-caixa {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-height: 120px;
    padding: 20px 10px 18px;
    text-align: center;
}
.av-app .av-opcao--icone .av-opcao-texto { flex: none; }
.av-app .av-opcao-ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    color: var(--av-texto-2);
    background: var(--av-sup-hover);
    border: 1px solid var(--av-borda);
    transition: transform 0.35s var(--av-pulo), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
html[data-theme="light"] .av-app .av-opcao-ico { background: rgba(18, 40, 88, 0.05); }
.av-app .av-opcao--icone .av-opcao-marca { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; }
.av-app .av-opcao--icone > input:checked + .av-opcao-caixa .av-opcao-ico {
    color: var(--av-selec-tinta);
    background: var(--av-selec);
    border-color: var(--av-selec);
    transform: rotate(-6deg) scale(1.06);
}

/* "Outro": o campo abre embaixo das opções */
.av-app .av-outro {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s var(--av-mola);
}
.av-app .av-outro > div { min-height: 0; overflow: hidden; }
.av-app .av-outro.aberto { grid-template-rows: 1fr; }
.av-app .av-outro.aberto > div { overflow: visible; }

/* Limpar seleção (perguntas opcionais) */
.av-app .av-limpar {
    display: none;
    margin-top: 12px;
    padding: 6px 2px;
    border: 0;
    background: none;
    font: 600 13px/1.2 var(--av-corpo);
    color: var(--av-texto-3);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.av-app .av-limpar.visible { display: inline-block; }
.av-app .av-limpar:hover { color: var(--av-texto); text-decoration-color: currentColor; }
.av-app .av-limpar:focus-visible { outline: none; box-shadow: var(--av-foco); border-radius: 6px; }

/* Notas de 0 a 5 */
.av-app .av-grade { display: grid; gap: 10px; }
.av-app .av-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 20px;
    padding: 14px 14px 14px 18px;
    border-radius: var(--av-raio-m);
    background: var(--av-sup-2);
    border: 1.5px solid var(--av-borda);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.av-app .av-linha.respondida { border-color: var(--av-selec-meio); }
.av-app .av-linha.av-linha--falta { border-color: var(--av-erro-borda); }
.av-app .av-linha-rotulo { font: 600 14.5px/1.45 var(--av-corpo); color: var(--av-texto); }
.av-app .av-notas {
    display: grid;
    grid-template-columns: repeat(6, 44px);
    gap: 6px;
}
.av-app .av-nota { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.av-app .av-nota-num {
    display: grid;
    place-items: center;
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid var(--av-borda-2);
    font: 700 16px/1 var(--av-display);
    font-variant-numeric: tabular-nums;
    color: var(--av-texto-2);
    background: transparent;
    transition: transform 0.22s var(--av-mola), background 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, box-shadow 0.25s ease;
}
.av-app .av-nota.antes .av-nota-num {
    color: var(--av-texto);
    background: var(--av-selec-suave);
    border-color: var(--av-selec-meio);
}
.av-app .av-nota > input:focus-visible + .av-nota-num { box-shadow: var(--av-foco); }
.av-app .av-nota > input:checked + .av-nota-num {
    color: var(--av-selec-tinta);
    background: var(--av-selec);
    border-color: var(--av-selec);
    box-shadow: 0 10px 22px -10px var(--av-selec-brilho);
}
/* O "pulo" so no clique (o JS poe .pulou): preso ao :checked, ele se
   repetiria em todas as notas marcadas sempre que a pagina reaparece. */
.av-app .av-nota.pulou > input:checked + .av-nota-num { animation: avPop 0.36s var(--av-pulo); }
.av-app .av-escala .av-notas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.av-app .av-escala .av-nota-num { height: 60px; border-radius: 16px; font-size: 22px; }

/* Campos de texto */
.av-app .av-input,
.av-app .av-textarea,
.av-app .av-outro-input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--av-raio-m);
    border: 1.5px solid var(--av-borda-2);
    background: var(--av-campo);
    color: var(--av-texto);
    font: 500 16px/1.5 var(--av-corpo);   /* >=16px: o iOS nao da zoom */
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.av-app .av-textarea { min-height: 112px; resize: vertical; }
.av-app .av-outro-input { margin-top: 2px; padding: 12px 14px; }
.av-app .av-input::placeholder,
.av-app .av-textarea::placeholder,
.av-app .av-outro-input::placeholder { color: var(--av-texto-3); opacity: 1; font-weight: 400; }
.av-app .av-input:focus,
.av-app .av-textarea:focus,
.av-app .av-outro-input:focus {
    border-color: var(--av-selec);
    background: var(--av-campo-foco);
    box-shadow: var(--av-foco);
}
/* O tema claro do theme.css forca fundo/borda/cor de todo input (!important) */
html[data-theme="light"] body .av-app .av-input,
html[data-theme="light"] body .av-app .av-textarea,
html[data-theme="light"] body .av-app .av-outro-input {
    background: var(--av-campo) !important;
    border-color: var(--av-borda-2) !important;
    color: var(--av-texto) !important;
}
html[data-theme="light"] body .av-app .av-input:focus,
html[data-theme="light"] body .av-app .av-textarea:focus,
html[data-theme="light"] body .av-app .av-outro-input:focus {
    border-color: var(--av-selec) !important;
}
html[data-theme="light"] body .av-app .av-input::placeholder,
html[data-theme="light"] body .av-app .av-textarea::placeholder,
html[data-theme="light"] body .av-app .av-outro-input::placeholder { color: var(--av-texto-3) !important; }

/* ── Quem responde: telefone (aluno) ou e-mail (quem não é aluno) ── */
.av-app .av-contato .av-so-email { display: none; }
.av-app .av-contato.av-modo-email .av-so-telefone { display: none; }
.av-app .av-contato.av-modo-email .av-so-email { display: inline; }
.av-app .av-input[type="tel"] { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.av-app .av-ajuda { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--av-texto-3); }

.av-app .av-identidade {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 14px;
    border-radius: var(--av-raio-p);
    font: 600 14px/1.45 var(--av-corpo);
    color: var(--av-texto-2);
    background: var(--av-sup-2);
    border: 1px solid var(--av-borda);
    animation: avSobe 0.35s var(--av-mola);
}
.av-app .av-identidade:empty { display: none; }
.av-app .av-identidade--ok {
    color: #D4EDA1;
    background: rgba(155, 203, 60, 0.1);
    border-color: rgba(155, 203, 60, 0.32);
}
html[data-theme="light"] .av-app .av-identidade--ok { color: #2f5208; background: rgba(110, 160, 20, 0.08); border-color: rgba(110, 160, 20, 0.35); }
.av-app .av-identidade-ico {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--av-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
    animation: avPop 0.4s var(--av-pulo);
}
.av-app .av-identidade--aviso {
    color: #FFD99A;
    background: rgba(240, 180, 41, 0.08);
    border-color: rgba(240, 180, 41, 0.3);
}
html[data-theme="light"] .av-app .av-identidade--aviso { color: #7a4f00; background: rgba(214, 150, 10, 0.08); border-color: rgba(214, 150, 10, 0.35); }
.av-app .av-identidade--buscando { color: var(--av-texto-3); font-weight: 500; }
.av-app .av-identidade--buscando::before {
    content: '';
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--av-borda-2);
    border-top-color: var(--av-selec);
    animation: avGira 0.7s linear infinite;
}
.av-app .av-quem { margin-top: 14px; animation: avSobe 0.35s var(--av-mola); }
.av-app .av-quem-titulo { margin-bottom: 10px; font: 600 14px/1.45 var(--av-corpo); color: var(--av-texto); }

/* "Não sou aluno(a)": um interruptor discreto embaixo do campo */
.av-app .av-alterna {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin-top: 14px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    border: 1.5px solid var(--av-borda-2);
    background: transparent;
    color: var(--av-texto-2);
    font: 600 14px/1.2 var(--av-corpo);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.av-app .av-alterna:hover { color: var(--av-texto); border-color: var(--av-borda-3); background: var(--av-sup-2); }
.av-app .av-alterna:focus-visible { outline: none; box-shadow: var(--av-foco); }
.av-app .av-alterna-caixa {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--av-borda-3);
    color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.av-app .av-alterna[aria-pressed="true"] { color: var(--av-texto); border-color: var(--av-selec); background: var(--av-selec-suave); }
.av-app .av-alterna[aria-pressed="true"] .av-alterna-caixa {
    color: var(--av-selec-tinta);
    background: var(--av-selec);
    border-color: var(--av-selec);
}

/* O "Para alunos" dentro da Identificação (era a página 2) */
.av-app .av-bloco { margin-top: 26px; }
.av-app .av-bloco-cabeca { display: flex; align-items: center; gap: 12px; margin: 0 0 14px 4px; }
.av-app .av-bloco-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: #1f1503;
    background: linear-gradient(140deg, #FFD566, #F0B429 60%, #E29C10);
}
.av-app .av-bloco-titulo {
    margin: 0;
    font: 750 clamp(19px, 3vw, 23px)/1.2 var(--av-display);
    letter-spacing: -0.015em;
    color: var(--av-texto);
}
.av-app .av-aparece { animation: avSobe 0.5s var(--av-mola) both; }
.av-app #av-comecar.av-aparece { animation: avAparece 0.45s var(--av-pulo) both; }

/* Lista das atividades e o aviso da LGPD */
.av-app .av-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 16px;
    list-style: none;
}
.av-app .av-lista li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--av-texto-2);
    background: var(--av-sup-2);
    border: 1px solid var(--av-borda);
}
.av-app .av-lista li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--av-ouro);
}
.av-app .av-aviso {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    padding: 16px 18px;
    border-radius: var(--av-raio-m);
    font-size: 14px;
    line-height: 1.65;
    color: var(--av-texto-2);
    background: rgba(76, 134, 255, 0.08);
    border: 1px solid rgba(76, 134, 255, 0.24);
}
html[data-theme="light"] .av-app .av-aviso { background: rgba(31, 79, 184, 0.05); border-color: rgba(31, 79, 184, 0.18); }
.av-app .av-aviso b { color: var(--av-texto); font-weight: 650; }
.av-app .av-aviso-ico { flex: none; margin-top: 2px; color: var(--av-azul); }
html[data-theme="light"] .av-app .av-aviso-ico { color: var(--av-selec); }

/* Navegação */
.av-app .av-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
}
.av-app .av-nav .av-btn-primario { margin-left: auto; min-width: 184px; }
.av-app .av-erro-envio {
    margin-top: 16px;
    padding: 13px 16px;
    border-radius: var(--av-raio-p);
    font: 600 14px/1.45 var(--av-corpo);
    color: var(--av-erro);
    background: var(--av-erro-suave);
    border: 1px solid var(--av-erro-borda);
    animation: avSobe 0.35s var(--av-mola);
}

/* ============================================================
   3. ENVIADA
   ============================================================ */
.av-app .av-sucesso {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(56px, 12vh, 112px) 0 24px;
    text-align: center;
}
.av-app .av-sucesso-selo {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto 30px;
    color: var(--av-verde);
}
.av-app .av-sucesso-selo svg { display: block; overflow: visible; filter: drop-shadow(0 12px 28px rgba(155, 203, 60, 0.35)); }
html[data-theme="light"] .av-app .av-sucesso-selo { color: #4E8A12; }
.av-app .av-sucesso-selo circle { stroke-dasharray: 302; stroke-dashoffset: 302; animation: avTraco 0.75s var(--av-mola) 0.1s forwards; }
.av-app .av-sucesso-selo path { stroke-dasharray: 64; stroke-dashoffset: 64; animation: avTraco 0.45s var(--av-mola) 0.62s forwards; }
.av-app .av-confete { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.av-app .av-confete i {
    position: absolute;
    left: -4px;
    top: -6px;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    opacity: 0;
    background: #F0B429;
    animation: avConfete 1.15s var(--av-mola) 0.6s forwards;
}
.av-app .av-confete i:nth-child(3n + 2) { background: #9BCB3C; width: 7px; height: 7px; border-radius: 50%; }
.av-app .av-confete i:nth-child(3n) { background: #4C86FF; }
.av-app .av-sucesso-titulo {
    font: 800 clamp(32px, 5.4vw, 46px)/1.04 var(--av-display);
    letter-spacing: -0.028em;
    color: var(--av-texto);
    animation: avSobe 0.6s var(--av-mola) 0.25s both;
}
.av-app .av-sucesso-titulo:focus { outline: none; }
.av-app .av-sucesso-sub {
    max-width: 440px;
    margin: 14px auto 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--av-texto-2);
    animation: avSobe 0.6s var(--av-mola) 0.32s both;
}
.av-app .av-sucesso-temporada {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    padding: 7px 14px;
    border-radius: 999px;
    font: 600 13.5px/1.2 var(--av-corpo);
    color: var(--av-texto);
    background: var(--av-sup-2);
    border: 1px solid var(--av-borda-2);
    animation: avSobe 0.6s var(--av-mola) 0.38s both;
}
.av-app .av-sucesso-temporada .av-ico { color: var(--av-ouro); }
html[data-theme="light"] .av-app .av-sucesso-temporada .av-ico { color: var(--av-selec); }
.av-app .av-sucesso-cartao {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 34px auto 0;
    padding: 18px 18px 18px 20px;
    border-radius: var(--av-raio);
    text-align: left;
    background: var(--av-sup);
    border: 1px solid var(--av-borda);
    box-shadow: var(--av-sombra);
    animation: avSobe 0.6s var(--av-mola) 0.46s both;
}
.av-app .av-sucesso-cartao-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #9EC0FF;
    background: rgba(76, 134, 255, 0.16);
    border: 1px solid rgba(76, 134, 255, 0.28);
}
html[data-theme="light"] .av-app .av-sucesso-cartao-ico { color: var(--av-selec); background: rgba(31, 79, 184, 0.08); }
.av-app .av-sucesso-cartao-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.av-app .av-sucesso-cartao-txt strong { font: 700 15.5px/1.3 var(--av-corpo); color: var(--av-texto); }
.av-app .av-sucesso-cartao-txt span { font-size: 13px; line-height: 1.45; color: var(--av-texto-3); }
.av-app .av-sucesso-rodape {
    margin-top: 32px;
    font: 700 17px/1.4 var(--av-display);
    color: var(--av-ouro);
    animation: avSobe 0.6s var(--av-mola) 0.54s both;
}
html[data-theme="light"] .av-app .av-sucesso-rodape { color: #946200; }
.av-app .av-sucesso-outra {
    display: inline-block;
    margin-top: 16px;
    padding: 8px 4px;
    font: 600 14px/1.2 var(--av-corpo);
    color: var(--av-texto-3);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.av-app .av-sucesso-outra:hover { color: var(--av-texto); text-decoration-color: currentColor; }

/* ============================================================
   Telas menores
   ============================================================ */
@media (max-width: 720px) {
    .av-app .av-opcoes--icones { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
    .av-app .av-opcao--icone .av-opcao-caixa {
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        min-height: 62px;
        padding: 10px 14px 10px 10px;
        text-align: left;
    }
    .av-app .av-opcao--icone .av-opcao-texto { flex: 1; }
    .av-app .av-opcao--icone .av-opcao-ico { width: 40px; height: 40px; border-radius: 12px; }
    .av-app .av-opcao--icone .av-opcao-marca { position: static; width: 22px; height: 22px; }
}

@media (max-width: 640px) {
    .av-app { padding: 0 16px 140px; }
    .av-app .av-temporadas { grid-template-columns: 1fr; }
    .av-app .av-progresso { margin: 0 -16px; padding: 10px 16px 12px; }
    .av-app .av-q { padding: 20px 18px; border-radius: 20px; }
    .av-app .av-q-cabeca { gap: 10px; margin-bottom: 16px; }
    .av-app .av-q-titulo { font-size: 15.5px; }
    .av-app .av-linha { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
    .av-app .av-notas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .av-app .av-nota-num { height: 46px; }
    .av-app .av-secao { gap: 14px; margin: 14px 0 18px; }
    .av-app .av-secao-ico { width: 44px; height: 44px; border-radius: 14px; }
    .av-app .av-tcard-corpo { min-height: 150px; }
    .av-app .av-sucesso-cartao { flex-wrap: wrap; }
    .av-app .av-sucesso-cartao .av-btn { flex: 1 0 100%; }
}

@media (max-width: 520px) {
    .av-app .av-nav { gap: 10px; }
    .av-app .av-nav .av-btn { flex: 1; min-width: 0; padding: 0 16px; }
    .av-app .av-nav .av-btn-fantasma { flex: 0 1 auto; }
    .av-app .av-btn-grande { width: 100%; }
    .av-app .av-lead { font-size: 15px; }
    .av-app .av-opcoes { grid-template-columns: 1fr; }
    .av-app .av-opcoes--2,
    .av-app .av-opcoes--instrumentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .av-app .av-opcoes--icones { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
    .av-app { padding: 0 12px 140px; }
    .av-app .av-progresso { margin: 0 -12px; padding: 10px 12px 12px; }
    .av-app .av-q { padding: 18px 14px; }
    .av-app .av-notas { gap: 5px; }
    .av-app .av-nota-num { height: 42px; border-radius: 10px; font-size: 15px; }
    .av-app .av-escala .av-nota-num { height: 52px; font-size: 19px; }
    .av-app .av-opcao-caixa { padding: 12px 12px 12px 14px; font-size: 14.5px; }
    .av-app .av-tcard-corpo { padding: 18px 18px 20px; }
    .av-app .av-topo { padding-right: 56px; }
}

/* Toque: sem "hover preso" depois do toque */
@media (hover: none) {
    .av-app .av-tcard:hover .av-tcard-corpo,
    .av-app .av-btn-primario:hover { transform: none; }
    .av-app .av-opcao:hover .av-opcao-caixa { transform: none; }
}
@media (hover: hover) {
    .av-app .av-opcao:hover .av-opcao-caixa {
        color: var(--av-texto);
        border-color: var(--av-borda-3);
        background: var(--av-sup-hover);
        transform: translateY(-1px);
    }
    .av-app .av-opcao:hover > input:checked + .av-opcao-caixa { border-color: var(--av-selec); }
    .av-app .av-nota:hover .av-nota-num { color: var(--av-texto); border-color: var(--av-selec); transform: translateY(-2px); }
    .av-app .av-nota:hover > input:checked + .av-nota-num { color: var(--av-selec-tinta); }
}

/* ============================================================
   Movimento
   ============================================================ */
@keyframes avSobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes avTela { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes avEntraFrente { from { opacity: 0; transform: translateX(var(--av-desliza)); } to { opacity: 1; transform: none; } }
@keyframes avEntraTras { from { opacity: 0; transform: translateX(calc(var(--av-desliza) * -1)); } to { opacity: 1; transform: none; } }
@keyframes avLogo { from { opacity: 0; transform: translateY(-10px) scale(0.88); } to { opacity: 1; transform: none; } }
@keyframes avPop { 0% { transform: scale(0.82); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes avTreme {
    0%, 100% { transform: none; }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}
@keyframes avPulso {
    0% { box-shadow: 0 0 0 0 rgba(155, 203, 60, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(155, 203, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(155, 203, 60, 0); }
}
@keyframes avTraco { to { stroke-dashoffset: 0; } }
@keyframes avGira { to { transform: rotate(360deg); } }
@keyframes avAparece { from { opacity: 0; transform: translateY(10px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes avMenu { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes avDeriva { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-80px, 60px, 0); } }
@keyframes avConfete {
    0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0deg); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(320deg); }
}

/* Quem pediu menos movimento ao sistema: nada desliza, pula ou treme. */
@media (prefers-reduced-motion: reduce) {
    .av-page *,
    .av-page *::before,
    .av-page *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .av-app .av-confete,
    .av-luz { display: none; }
}