/* ---------------------------------------------------------------
   VII Canta Caroba 2026
   Paleta tirada do logo e das luzes de palco do festival:
   azul da marca, noite profunda, roxo dos refletores e o ambar
   quente que aparece nas fotos das apresentacoes.
   --------------------------------------------------------------- */

:root {
    --azul:          #0D6DB1;
    --azul-claro:    #57A8E0;
    --azul-escuro:   #08487A;
    --noite:         #070D1B;
    --noite-suave:   #101A31;
    --roxo:          #6B36B5;
    --ambar:         #FFB020;
    --ambar-escuro:  #C97E00;
    --palco:         #E8407A;

    --texto:         #14203A;
    --texto-suave:   #55617A;
    --texto-claro:   #EAF1F9;
    --texto-claro-suave: rgba(234, 241, 249, .76);
    --fundo:         #FFFFFF;
    --fundo-alt:     #F4F7FB;
    --borda:         #DCE5F0;

    --fonte:         "Montserrat", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-titulo:  "Anton", "Arial Black", "Montserrat", sans-serif;

    --raio:          14px;
    --raio-pequeno:  8px;
    --sombra:        0 2px 14px rgba(20, 32, 58, .08);
    --sombra-alta:   0 12px 36px rgba(20, 32, 58, .18);
    --largura:       1180px;
    --transicao:     .22s ease;
    --altura-cabecalho: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 17px;
    line-height: 1.65;
    color: var(--texto);
    background: var(--fundo);
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

/* Paginas internas abrem abaixo do cabecalho fixo */
body:not(.tem-hero) { padding-top: var(--altura-cabecalho); }

h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 .5em; }

h1, h2 {
    font-family: var(--fonte-titulo);
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: uppercase;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.7rem); }
h3 { font-size: 1.2rem; font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--azul-escuro); }

img { max-width: 100%; height: auto; display: block; }

.container {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: 1.15rem;
}

.container--estreito { max-width: 820px; }

/* Acessibilidade -------------------------------------------------- */
.pular-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--azul);
    color: #fff;
    padding: .8rem 1.3rem;
    border-radius: 0 0 var(--raio-pequeno) 0;
}
.pular-conteudo:focus { left: 0; }

:focus-visible {
    outline: 3px solid var(--ambar);
    outline-offset: 2px;
    border-radius: 4px;
}

.so-leitor-tela {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Cabecalho ------------------------------------------------------- */
.cabecalho {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--altura-cabecalho);
    display: flex;
    align-items: center;

    /* A cor de fundo cresce junto com a rolagem, sem salto.
       Sem borda e sem desfoque, que deixavam um corte visível na base. */
    background-color: rgba(7, 13, 27, var(--cabecalho-opacidade, .96));
    box-shadow: 0 6px 24px rgba(0, 0, 0, calc(.3 * var(--cabecalho-sombra, 1)));
    transition: background-color .12s linear, box-shadow .12s linear;
}

/* Sobre o hero, um véu que se dissolve para baixo mantém o menu legível
   enquanto o fundo ainda está transparente. Ele some conforme a pessoa rola. */
.cabecalho--transparente { --cabecalho-opacidade: 0; --cabecalho-sombra: 0; }

.cabecalho--transparente::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(7, 13, 27, .72), rgba(7, 13, 27, 0));
    opacity: var(--cabecalho-veu, 1);
    pointer-events: none;
}

.cabecalho__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.cabecalho__logo { display: flex; align-items: center; }
.cabecalho__logo img { height: 46px; width: auto; }

/* Navegacao ------------------------------------------------------- */
.menu-botao {
    display: none;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    color: var(--texto-claro);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    padding: .5rem .9rem;
    border-radius: var(--raio-pequeno);
    cursor: pointer;
}
.menu-botao__barras {
    display: inline-block;
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
}
.menu-botao__barras::before,
.menu-botao__barras::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform var(--transicao);
}
.menu-botao__barras::before { top: -6px; }
.menu-botao__barras::after  { top: 6px; }
.menu-botao[aria-expanded="true"] .menu-botao__barras { background: transparent; }
.menu-botao[aria-expanded="true"] .menu-botao__barras::before { transform: translateY(6px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__barras::after  { transform: translateY(-6px) rotate(-45deg); }

.menu {
    display: flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu__link {
    display: block;
    padding: .5rem .8rem;
    color: var(--texto-claro-suave);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--raio-pequeno);
    transition: color var(--transicao), background var(--transicao);
}
.menu__link:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.menu__item--ativo .menu__link {
    color: #fff;
    background: rgba(13, 109, 177, .55);
}

.menu__link--destaque {
    background: var(--ambar);
    color: var(--noite);
    padding-inline: 1.1rem;
}
.menu__link--destaque:hover { background: #fff; color: var(--noite); }

/* Hero com video -------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--noite);
    color: var(--texto-claro);
}

.hero__midia {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__video,
.hero__capa {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__capa { position: absolute; inset: 0; }

.hero__video {
    position: relative;
    opacity: 0;
    transition: opacity .9s ease;
}
.hero__video.esta-tocando { opacity: 1; }

/* Camadas que escurecem o video para o texto ficar legivel */
.hero__veu {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(120% 90% at 20% 15%, rgba(13, 109, 177, .45), transparent 60%),
        radial-gradient(100% 80% at 85% 80%, rgba(107, 54, 181, .42), transparent 62%),
        linear-gradient(to bottom, rgba(7, 13, 27, .82) 0%, rgba(7, 13, 27, .55) 42%, rgba(7, 13, 27, .93) 100%);
}

.hero__conteudo {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: calc(var(--altura-cabecalho) + 2.5rem) 5.5rem;
    text-align: center;
}

.hero__logo {
    width: min(460px, 78vw);
    margin: 0 auto 1.4rem;
    filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .55));
}

.hero__datas {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem .9rem;
    font-family: var(--fonte-titulo);
    font-size: clamp(1.25rem, 3.6vw, 2rem);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: .7rem;
}
.hero__mes { white-space: nowrap; }

.hero__datas .ponto {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ambar);
    display: inline-block;
}

.hero__local {
    font-size: 1.02rem;
    color: var(--texto-claro-suave);
    margin-bottom: .4rem;
}

.hero__chamada {
    font-size: clamp(1.05rem, 2.4vw, 1.3rem);
    color: var(--texto-claro-suave);
    max-width: 30ch;
    margin: 0 auto 2rem;
}

.hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    justify-content: center;
}

/* Contagem regressiva --------------------------------------------- */
.contagem {
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin: 0 0 1.8rem;
    list-style: none;
    padding: 0;
}
.contagem__item {
    min-width: 74px;
    padding: .6rem .4rem .5rem;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--raio-pequeno);
    backdrop-filter: blur(4px);
}
.contagem__numero {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 1.8rem;
    line-height: 1;
    color: #fff;
}
.contagem__rotulo {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--texto-claro-suave);
    margin-top: .25rem;
}

/* A mesma contagem, quando aparece sobre fundo claro */
.estagio .contagem__item {
    background: var(--fundo);
    border-color: var(--borda);
}
.estagio .contagem__numero { color: var(--azul); }
.estagio .contagem__rotulo { color: var(--texto-suave); }

/* Equalizador, a assinatura musical do site ----------------------- */
.equalizador {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 54px;
    padding-bottom: 10px;
    pointer-events: none;
}
.equalizador span {
    display: block;
    width: 5px;
    height: 12px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, var(--azul-claro), var(--ambar));
    opacity: .75;
    animation: pulsar 1.4s ease-in-out infinite;
}
.equalizador span:nth-child(3n)   { animation-duration: 1.05s; }
.equalizador span:nth-child(4n)   { animation-duration: 1.8s; }
.equalizador span:nth-child(5n)   { animation-duration: .85s; }
.equalizador span:nth-child(odd)  { animation-delay: .2s; }
.equalizador span:nth-child(7n)   { animation-delay: .45s; }

@keyframes pulsar {
    0%, 100% { height: 10px; }
    50%      { height: 34px; }
}

/* Botoes ----------------------------------------------------------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.7rem;
    font-family: var(--fonte);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: transform var(--transicao), background var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
.botao:hover { transform: translateY(-2px); }

.botao--principal {
    background: var(--ambar);
    color: var(--noite);
    box-shadow: 0 8px 24px rgba(255, 176, 32, .32);
}
.botao--principal:hover { background: #FFC352; color: var(--noite); }

.botao--contorno {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
    background: transparent;
}
.botao--contorno:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.botao--azul {
    background: var(--azul);
    color: #fff;
    box-shadow: 0 8px 24px rgba(13, 109, 177, .3);
}
.botao--azul:hover { background: var(--azul-escuro); color: #fff; }

.botao--bloco { width: 100%; }
.botao[disabled], .botao--inativo {
    opacity: .55;
    pointer-events: none;
}

/* Secoes ----------------------------------------------------------- */
.secao { padding-block: clamp(3rem, 7vw, 5.5rem); }
.secao--alt { background: var(--fundo-alt); }

.secao--escura {
    background:
        radial-gradient(90% 70% at 15% 10%, rgba(13, 109, 177, .3), transparent 60%),
        radial-gradient(80% 70% at 90% 90%, rgba(107, 54, 181, .3), transparent 60%),
        var(--noite);
    color: var(--texto-claro);
}
.secao--escura h2 { color: #fff; }
.secao--escura p  { color: var(--texto-claro-suave); }

.secao__cabecalho { text-align: center; margin-bottom: 2.6rem; }
.secao__cabecalho p { max-width: 62ch; margin-inline: auto; color: var(--texto-suave); }
.secao--escura .secao__cabecalho p { color: var(--texto-claro-suave); }

.etiqueta {
    display: inline-block;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--azul);
    margin-bottom: .6rem;
}
.secao--escura .etiqueta { color: var(--ambar); }

/* Numeros do festival ---------------------------------------------- */
.numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    text-align: center;
}
.numeros__item {
    padding: 1.4rem 1rem;
    border-radius: var(--raio);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}
.numeros__valor {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    color: var(--ambar);
    line-height: 1;
}
.numeros__rotulo {
    display: block;
    margin-top: .45rem;
    font-size: .88rem;
    color: var(--texto-claro-suave);
}

/* Cartoes ---------------------------------------------------------- */
.cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.4rem;
}

.cartao {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1.6rem;
    box-shadow: var(--sombra);
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.cartao h3 { margin-bottom: .4rem; }
.cartao p:last-child { margin-bottom: 0; }

.cartao__icone {
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(13, 109, 177, .12);
    color: var(--azul);
    margin-bottom: 1rem;
}
.cartao__icone svg { width: 24px; height: 24px; }

/* Cartao de categoria ---------------------------------------------- */
.categoria {
    position: relative;
    overflow: hidden;
    border-radius: var(--raio);
    padding: 1.8rem;
    color: var(--texto-claro);
    background: linear-gradient(140deg, var(--azul-escuro), var(--azul));
    border: 1px solid rgba(255, 255, 255, .14);
}
.categoria--regional { background: linear-gradient(140deg, #4A1C86, var(--roxo)); }
.categoria h3 {
    font-family: var(--fonte-titulo);
    font-size: 1.6rem;
    text-transform: uppercase;
    font-weight: 400;
    color: #fff;
    margin-bottom: .2rem;
}
.categoria__linha {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    font-size: .95rem;
}
.categoria__linha:last-child { border-bottom: 0; }
.categoria__linha dt { color: rgba(255, 255, 255, .72); margin: 0; }
.categoria__linha dd { margin: 0; font-weight: 700; text-align: right; }
.categoria dl { margin: 1.1rem 0 0; }

/* Quatro categorias lado a lado no desktop, duas por linha no tablet */
.cartoes--categorias { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cartoes--categorias .categoria h3 { font-size: 1.4rem; }
.cartoes--categorias .categoria p { font-size: .93rem; }

/* Destaque do voto popular */
.voto-popular {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    margin-top: 1.6rem;
    padding: 1.3rem 1.5rem;
    border-radius: var(--raio);
    background: linear-gradient(120deg, rgba(255, 176, 32, .16), rgba(232, 64, 122, .1));
    border: 1px solid rgba(255, 176, 32, .45);
}
.voto-popular__icone {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ambar);
    color: var(--noite);
}
.voto-popular h3 { margin-bottom: .2rem; }
.voto-popular p { margin: 0; color: var(--texto-suave); }

/* Passos ----------------------------------------------------------- */
.passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.4rem;
    counter-reset: passo;
}
.passo {
    position: relative;
    padding: 1.6rem 1.4rem 1.4rem;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.passo::before {
    counter-increment: passo;
    content: counter(passo);
    position: absolute;
    top: -18px; left: 1.4rem;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: 1.15rem;
}
.passo h3 { margin-top: .6rem; }

/* Avisos e caixas de estado ---------------------------------------- */
.aviso {
    display: flex;
    gap: .9rem;
    padding: 1.1rem 1.3rem;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    background: var(--fundo-alt);
    margin-bottom: 1.6rem;
}
.aviso__icone { flex: 0 0 auto; margin-top: .15rem; }
.aviso p:last-child { margin-bottom: 0; }
.aviso--sucesso { background: #ECFAF1; border-color: #B8E6CA; }
.aviso--alerta  { background: #FFF6E5; border-color: #FFD98A; }
.aviso--erro    { background: #FDEDED; border-color: #F5BDBD; }

/* Estagios da inscricao -------------------------------------------- */
.estagio {
    text-align: center;
    padding: clamp(2.2rem, 6vw, 3.6rem) 1.4rem;
    border-radius: var(--raio);
    background: var(--fundo-alt);
    border: 1px solid var(--borda);
}
.estagio__selo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.estagio__selo--espera   { background: rgba(255, 176, 32, .18); color: var(--ambar-escuro); }
.estagio__selo--aberta   { background: rgba(28, 160, 90, .16);  color: #17794A; }
.estagio__selo--encerrada { background: rgba(200, 60, 60, .14); color: #A93636; }
.estagio__data {
    font-family: var(--fonte-titulo);
    font-size: clamp(2rem, 6vw, 3.2rem);
    color: var(--azul);
    line-height: 1.05;
    margin: .3rem 0 .6rem;
}
.estagio p { max-width: 58ch; margin-inline: auto; color: var(--texto-suave); }

/* Ficha em etapas ---------------------------------------------------- */
.ficha-passos {
    display: flex;
    gap: .3rem;
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    overflow-x: auto;
}
.ficha-passos__item {
    flex: 1 1 0;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    color: var(--texto-suave);
    text-align: center;
    position: relative;
}
.ficha-passos__item::before {
    content: "";
    position: absolute;
    top: 15px; left: -50%; right: 50%;
    height: 2px;
    background: var(--borda);
    z-index: 0;
}
.ficha-passos__item:first-child::before { display: none; }
.ficha-passos__numero {
    position: relative;
    z-index: 1;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fundo);
    border: 2px solid var(--borda);
    font-weight: 800;
}
.ficha-passos__item--feito .ficha-passos__numero { background: var(--azul); border-color: var(--azul); color: #fff; }
.ficha-passos__item--feito::before, .ficha-passos__item--atual::before { background: var(--azul); }
.ficha-passos__item--atual .ficha-passos__numero { border-color: var(--ambar); background: var(--ambar); color: var(--noite); }
.ficha-passos__item--atual { color: var(--texto); font-weight: 700; }

.ficha__titulo {
    font-family: var(--fonte-titulo);
    font-size: 1.3rem !important;
    text-transform: uppercase;
    color: var(--azul);
}
.ficha__acoes-secundarias { display: flex; gap: .6rem; flex-wrap: wrap; margin: -.4rem 0 1.4rem; }
.ficha__acoes-secundarias form { margin: 0; }
.ficha__rodape-botoes { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.ficha__recomecar { margin-top: 2rem; text-align: center; }

.campo-codigo {
    font-size: 1.8rem !important;
    letter-spacing: .5em;
    text-align: center;
    font-weight: 800;
    max-width: 260px;
}

/* Dado lido do documento: aparece, mas não se edita */
.campo-travado {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .72rem .85rem;
    border-radius: var(--raio-pequeno);
    background: rgba(28, 160, 90, .08);
    border: 1.5px solid rgba(28, 160, 90, .35);
    color: var(--texto);
    font-weight: 600;
    cursor: default;
}
.campo-travado svg { color: #17794A; flex: 0 0 auto; }

/* Espera do documento pelo WhatsApp */
.ficha-espera ul { padding-left: 1.2rem; }
.ficha-status {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1.2rem;
    padding: .9rem 1rem;
    border-radius: var(--raio-pequeno);
    background: var(--fundo-alt);
    border: 1px solid var(--borda);
    font-weight: 600;
}
.ficha-status__sinal {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--azul-claro);
    flex: 0 0 auto;
    animation: pulsa-sinal 1.2s ease-in-out infinite;
}
@keyframes pulsa-sinal { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.ficha-status--ilegivel, .ficha-status--incompleto { background: #FFF6E5; border-color: #FFD98A; }
.ficha-status--ilegivel .ficha-status__sinal, .ficha-status--incompleto .ficha-status__sinal { background: var(--ambar); }

.ficha-de-para {
    padding: .8rem 1rem;
    border-radius: var(--raio-pequeno);
    background: rgba(13, 109, 177, .07);
    border: 1px solid rgba(13, 109, 177, .25);
    font-size: .95rem;
}
.ficha-dica {
    margin: .8rem 0 0;
    padding: .8rem 1rem;
    border-radius: var(--raio-pequeno);
    background: #FFF6E5;
    border: 1px solid #FFD98A;
    font-size: .94rem;
}

/* Busca de música no catálogo */
.busca-catalogo { display: flex; gap: .6rem; margin-bottom: .6rem; }
.busca-catalogo input {
    flex: 1 1 auto;
    padding: .72rem .85rem;
    font: inherit;
    font-size: 1rem;
    color: var(--texto);
    background: var(--fundo);
    border: 1.5px solid var(--borda);
    border-radius: var(--raio-pequeno);
}
.busca-catalogo input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(13, 109, 177, .16); }
.busca-resultados { display: grid; gap: .5rem; margin-bottom: 1rem; }
.busca-resultados:empty { display: none; }
.resultado-musica {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: .55rem .7rem;
    border: 1.5px solid var(--borda);
    border-radius: var(--raio-pequeno);
    background: var(--fundo);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.resultado-musica:hover, .resultado-musica[aria-pressed="true"] { border-color: var(--azul); background: rgba(13, 109, 177, .06); }
.resultado-musica img { width: 44px; height: 44px; border-radius: 6px; flex: 0 0 auto; }
.resultado-musica strong { display: block; }
.resultado-musica span { font-size: .85rem; color: var(--texto-suave); }
.resultado-musica--nenhum { justify-content: center; color: var(--texto-suave); }
.musica-escolhida { color: #17794A; font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: .4rem; }

@media (max-width: 560px) {
    .ficha-passos__rotulo { display: none; }
    .ficha-passos__item { min-width: 34px; }
    .busca-catalogo { flex-direction: column; }
}

/* Formulario -------------------------------------------------------- */
.formulario { margin-top: 2rem; }

.bloco-campos {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1.5rem 1.4rem 1.2rem;
    margin-bottom: 1.4rem;
    background: var(--fundo);
}
.bloco-campos > legend {
    font-family: var(--fonte-titulo);
    font-size: 1.15rem;
    text-transform: uppercase;
    color: var(--azul);
    padding-inline: .6rem;
    margin-left: -.6rem;
}
.bloco-campos__ajuda {
    font-size: .92rem;
    color: var(--texto-suave);
    margin: -.3rem 0 1.2rem;
}

.linha-campos {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .9rem 1rem;
    margin-bottom: .9rem;
}
.campo { grid-column: span 12; }
.campo--2  { grid-column: span 2; }
.campo--3  { grid-column: span 3; }
.campo--4  { grid-column: span 4; }
.campo--5  { grid-column: span 5; }
.campo--6  { grid-column: span 6; }
.campo--7  { grid-column: span 7; }
.campo--8  { grid-column: span 8; }
.campo--9  { grid-column: span 9; }
.campo--10 { grid-column: span 10; }

.campo > label,
.campo__rotulo {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--texto);
    margin-bottom: .3rem;
}
.campo__obrigatorio { color: var(--palco); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="date"],
.campo input[type="number"],
.campo input[type="password"],
.campo input[type="search"],
.campo select,
.campo textarea {
    width: 100%;
    padding: .72rem .85rem;
    font: inherit;
    font-size: 1rem;
    color: var(--texto);
    background: var(--fundo);
    border: 1.5px solid var(--borda);
    border-radius: var(--raio-pequeno);
    transition: border-color var(--transicao), box-shadow var(--transicao);
    -webkit-appearance: none;
    appearance: none;
}
.campo select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2355617A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    padding-right: 2.4rem;
}
.campo textarea { min-height: 110px; resize: vertical; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(13, 109, 177, .16);
}

.campo__ajuda { font-size: .82rem; color: var(--texto-suave); margin-top: .3rem; }
.campo__erro  { font-size: .85rem; color: #B32626; font-weight: 600; margin-top: .3rem; }
.campo--com-erro input,
.campo--com-erro select,
.campo--com-erro textarea { border-color: #D45050; background: #FFF8F8; }

/* Opcoes em cartao, mais confortaveis no celular */
.opcoes { display: grid; gap: .7rem; }
.opcoes--duas { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.opcao {
    position: relative;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .9rem 1rem;
    border: 1.5px solid var(--borda);
    border-radius: var(--raio-pequeno);
    cursor: pointer;
    background: var(--fundo);
    transition: border-color var(--transicao), background var(--transicao);
}
.opcao:hover { border-color: var(--azul-claro); }
.opcao input { margin-top: .25rem; accent-color: var(--azul); width: 19px; height: 19px; flex: 0 0 auto; }
.opcao__texto { font-size: .96rem; }
.opcao__texto strong { display: block; }
.opcao__texto span { color: var(--texto-suave); font-size: .86rem; }
.opcao:has(input:checked) { border-color: var(--azul); background: rgba(13, 109, 177, .06); }
/* Uma opção dentro de um campo continua lado a lado, sem herdar o rótulo em negrito */
.campo > label.opcao { display: flex; font-size: inherit; font-weight: 400; margin-bottom: 0; }

/* Envio de arquivos */
.arquivo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    border: 1.5px dashed var(--borda);
    border-radius: var(--raio-pequeno);
    background: var(--fundo-alt);
}
.arquivo input[type="file"] { font-size: .9rem; max-width: 100%; }
.arquivo__nome { font-size: .86rem; color: var(--texto-suave); }

/* Musica repetida no formulario */
.musica-bloco {
    border: 1px solid var(--borda);
    border-left: 4px solid var(--azul);
    border-radius: var(--raio-pequeno);
    padding: 1.1rem 1.1rem .4rem;
    margin-bottom: 1rem;
    background: var(--fundo-alt);
}
.musica-bloco__titulo {
    font-weight: 800;
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--azul);
    margin-bottom: .9rem;
}

/* Tabelas ----------------------------------------------------------- */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}
.tabela th, .tabela td {
    padding: .7rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--borda);
    vertical-align: top;
}
.tabela th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--texto-suave);
    background: var(--fundo-alt);
    white-space: nowrap;
}
.tabela tbody tr:hover { background: rgba(13, 109, 177, .04); }

/* Galeria ----------------------------------------------------------- */
.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .8rem;
}
.galeria__foto {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--raio-pequeno);
    background: var(--noite-suave);
    border: 0;
    padding: 0;
    cursor: zoom-in;
}
.galeria__foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.galeria__foto:hover img { transform: scale(1.06); }

/* Visualizador de foto em tela cheia */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    place-items: center;
    background: rgba(5, 9, 18, .94);
    padding: 1rem;
}
.lightbox[open] { display: grid; }
.lightbox img { max-width: 96vw; max-height: 86vh; border-radius: var(--raio-pequeno); }
.lightbox__fechar {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}
.lightbox__navegar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
}
.lightbox__navegar--anterior { left: 1rem; }
.lightbox__navegar--proxima  { right: 1rem; }

/* Modal de confirmacao ----------------------------------------------
   Regra da casa: nada de alert nem confirm do navegador, sempre uma
   janela nossa, que aceita teclado e leitor de tela.
   ------------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    place-items: center;
    padding: 1.2rem;
    background: rgba(7, 13, 27, .72);
}
.modal[open] { display: grid; }

/* Antes de o JavaScript assumir, o conteúdo do modal aparece como uma
   seção comum da página. Assim nada fica inacessível sem script. */
.modal[data-modal]:not([data-modal-pronto]) {
    position: static;
    display: block;
    background: none;
    padding: 0;
}
.modal[data-modal]:not([data-modal-pronto]) .modal__caixa {
    max-width: 620px;
    border: 1px solid var(--borda);
    box-shadow: none;
    margin-bottom: 1.4rem;
}
.modal[data-modal-pronto]:not([open]) { display: none; }

.modal__caixa {
    width: 100%;
    max-width: 440px;
    background: var(--fundo);
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    padding: 1.6rem;
}

.modal__titulo {
    font-family: var(--fonte);
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 .5rem;
    color: var(--texto);
}

.modal__texto { color: var(--texto-suave); margin: 0 0 1.4rem; }

.modal__caixa--larga { max-width: 560px; }
.modal__caixa .campo { margin-bottom: 1rem; }
.modal__fechar {
    float: right;
    width: 34px; height: 34px;
    margin: -.4rem -.4rem 0 0;
    border: 0;
    border-radius: 50%;
    background: var(--fundo-alt);
    color: var(--texto-suave);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.modal__fechar:hover { background: var(--borda); color: var(--texto); }
.modal__caixa form { max-height: 74vh; overflow-y: auto; }

.modal__acoes {
    display: flex;
    gap: .7rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.modal__acoes .botao { flex: 0 1 auto; }

@media (max-width: 480px) {
    .modal__acoes { flex-direction: column-reverse; }
    .modal__acoes .botao { width: 100%; }
}

/* Visualizador de documentos ---------------------------------------- */
#modal-documento:not([data-modal-pronto]) { display: none; }
.modal__caixa--documento {
    max-width: 920px;
    max-height: calc(100vh - 2.4rem);
    display: flex;
    flex-direction: column;
}
.visualizador {
    flex: 1 1 auto;
    min-height: 200px;
    overflow: auto;
    margin: .4rem 0 1.2rem;
    padding: .6rem;
    background: var(--fundo-alt);
    border-radius: calc(var(--raio) / 2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
}
.visualizador__imagem { max-width: 100%; height: auto; cursor: zoom-in; background: #fff; }
.visualizador--ampliado { align-items: flex-start; }
.visualizador--ampliado .visualizador__imagem { max-width: none; cursor: zoom-out; }
.visualizador__pagina { display: block; max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.visualizador__mensagem { margin: auto; padding: 2rem 1rem; color: var(--texto-suave); text-align: center; }
@media (max-width: 600px) {
    .modal:has(.modal__caixa--documento) { padding: .5rem; }
    .modal__caixa--documento { padding: 1rem; max-height: calc(100vh - 1rem); }
}

/* Documentos da inscricao, na area do participante e no painel ------- */
.lista-docs { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .8rem; }
.lista-docs__item {
    border: 1px solid var(--borda);
    border-radius: calc(var(--raio) / 2);
    padding: .9rem 1rem;
    display: grid;
    gap: .5rem;
    justify-items: start;
}
.lista-docs__cabeca { display: flex; gap: .6rem; align-items: center; justify-content: space-between; width: 100%; }
.lista-docs__cabeca .marcador { flex: none; }
.lista-docs__item .campo__ajuda { margin: 0; }
.lista-docs__arquivo {
    display: flex;
    gap: .6rem;
    align-items: center;
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--borda);
    border-radius: calc(var(--raio) / 2);
    background: var(--fundo);
    color: var(--azul-escuro);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.lista-docs__arquivo:hover { border-color: var(--azul); background: var(--fundo-alt); }
.lista-docs__arquivo span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.lista-docs__arquivo small { color: var(--texto-suave); font-size: .82rem; }
.lista-docs__arquivo svg { flex: none; }

.lista-inscricoes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lista-inscricoes a {
    display: grid;
    gap: .2rem;
    justify-items: start;
    padding: .9rem 1rem;
    border: 1px solid var(--borda);
    border-radius: calc(var(--raio) / 2);
    color: var(--texto);
    text-decoration: none;
}
.lista-inscricoes a:hover { border-color: var(--azul); }

/* Faixa de chamada -------------------------------------------------- */
.chamada-final {
    text-align: center;
    padding: clamp(3rem, 8vw, 5rem) 1.2rem;
    background:
        linear-gradient(rgba(7, 13, 27, .82), rgba(7, 13, 27, .9)),
        url('/assets/img/galeria/palco-25.jpg') center / cover no-repeat;
    color: var(--texto-claro);
}
.chamada-final h2 { color: #fff; }
.chamada-final p { color: var(--texto-claro-suave); max-width: 52ch; margin: 0 auto 1.6rem; }

/* Rodape ------------------------------------------------------------ */
.rodape {
    background: var(--noite);
    color: var(--texto-claro-suave);
    padding-block: 3rem 1.6rem;
    font-size: .94rem;
}
.rodape__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.rodape h3 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #fff;
    margin-bottom: .9rem;
}
.rodape a { color: var(--texto-claro-suave); text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: .45rem; }
.rodape__logo { width: 190px; margin-bottom: 1rem; }
.rodape__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .8rem;
    padding-top: 1.4rem;
    font-size: .85rem;
}
.rodape__redes { display: flex; gap: .6rem; margin-top: 1rem; }
.rodape__redes a {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.rodape__redes a:hover { background: var(--azul); }
.rodape__redes svg { width: 20px; height: 20px; }

/* Pagina interna ----------------------------------------------------- */
.topo-pagina {
    padding-block: 2.6rem 2.2rem;
    background:
        radial-gradient(80% 120% at 10% 0%, rgba(13, 109, 177, .35), transparent 60%),
        radial-gradient(70% 100% at 95% 100%, rgba(107, 54, 181, .32), transparent 60%),
        var(--noite);
    color: var(--texto-claro);
}
.topo-pagina h1 { color: #fff; margin-bottom: .3rem; }
.topo-pagina p { color: var(--texto-claro-suave); margin: 0; }

.caminho {
    font-size: .85rem;
    color: var(--texto-claro-suave);
    margin-bottom: .8rem;
}
.caminho a { color: var(--texto-claro-suave); }

/* Texto longo, como o regulamento */
.texto-longo { font-size: 1.02rem; }
.texto-longo h2 {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    margin-top: 2.4rem;
    padding-top: 1.2rem;
    border-top: 2px solid var(--borda);
    color: var(--azul);
}
.texto-longo h3 { margin-top: 1.6rem; color: var(--texto); }
.texto-longo ul, .texto-longo ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.texto-longo li { margin-bottom: .5rem; }
.texto-longo table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; }
.texto-longo th, .texto-longo td { padding: .6rem .7rem; border: 1px solid var(--borda); }
.texto-longo th { background: var(--fundo-alt); text-align: left; }

/* Estrutura do regulamento: capítulos, artigos e incisos */
.texto-longo h2 .capitulo {
    display: block;
    font-family: var(--fonte);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--texto-suave);
    margin-bottom: .25rem;
}
.texto-longo h3 {
    font-size: 1.02rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--azul-escuro);
}
.artigo { margin-bottom: .9rem; }
.artigo strong { color: var(--azul-escuro); white-space: nowrap; }
.artigo:target { background: rgba(255, 176, 32, .16); border-radius: 6px; box-shadow: 0 0 0 .4rem rgba(255, 176, 32, .16); }
.incisos {
    list-style: none;
    padding-left: 1.4rem !important;
    margin: -.2rem 0 1.2rem;
}
.incisos li { position: relative; padding-left: 2.6rem; }
.inciso {
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--texto-suave);
}
.paragrafo { padding-left: 1.4rem; }
.assinatura {
    margin-top: 2.4rem;
    padding-top: 1.2rem;
    border-top: 2px solid var(--borda);
    text-align: center;
}

/* Lista de anexos no fim do regulamento */
.lista-anexos { list-style: none; padding: 0 !important; display: grid; gap: .7rem; }
.lista-anexos a {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    background: var(--fundo-alt);
    text-decoration: none;
    color: var(--texto);
}
.lista-anexos a:hover { border-color: var(--azul-claro); background: rgba(13, 109, 177, .05); }
.lista-anexos__icone { color: var(--azul); display: grid; place-items: center; }
.lista-anexos a span span { display: block; font-size: .9rem; color: var(--texto-suave); }

/* Página do anexo, pensada para imprimir */
.anexo__acoes { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.anexo {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: clamp(1.4rem, 5vw, 2.6rem);
    box-shadow: var(--sombra);
}
.anexo__cabecalho {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding-bottom: 1.2rem;
    margin-bottom: 1.6rem;
    border-bottom: 2px solid var(--borda);
}
.anexo__cabecalho img { width: 150px; flex: 0 0 auto; }
.anexo__cabecalho h2 {
    font-size: clamp(1.1rem, 3vw, 1.45rem);
    margin: .1rem 0 .2rem;
    color: var(--texto);
}
.anexo__rotulo { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); margin: 0; }
.anexo__evento { font-size: .86rem; color: var(--texto-suave); margin: 0; }
.anexo__corpo p { line-height: 2.1; overflow-wrap: anywhere; }
.anexo__campo { display: flex; gap: .5rem; }
.anexo__campo span { white-space: nowrap; }
.anexo__campo::after { content: ""; flex: 1; border-bottom: 1px solid var(--texto-suave); margin-bottom: .55rem; }

@media (max-width: 560px) {
    .anexo__cabecalho { flex-direction: column; align-items: flex-start; }
}

/* Botão neutro, usado no site e no painel */
.botao--neutro {
    background: var(--fundo-alt);
    color: var(--texto);
    border: 1px solid var(--borda);
}
.botao--neutro:hover { background: var(--borda); color: var(--texto); }

/* Indice lateral do regulamento */
.com-indice {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2.6rem;
    align-items: start;
}
.indice {
    position: sticky;
    top: calc(var(--altura-cabecalho) + 1.2rem);
    padding: 1.2rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--fundo-alt);
    font-size: .9rem;
}
.indice h2 {
    font-size: .78rem;
    letter-spacing: .12em;
    color: var(--texto-suave);
    margin-bottom: .8rem;
}
.indice ol { list-style: none; margin: 0; padding: 0; counter-reset: item; }
.indice li { margin-bottom: .35rem; }
.indice a { text-decoration: none; color: var(--texto); }
.indice a:hover { color: var(--azul); text-decoration: underline; }

/* Seção que está sendo lida no momento */
.indice a[aria-current="location"] {
    color: var(--azul);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--azul);
    padding-left: .6rem;
    margin-left: -.6rem;
}

/* O título da seção não fica escondido atrás do cabeçalho fixo */
.texto-longo h2[id] { scroll-margin-top: calc(var(--altura-cabecalho) + 1rem); }

/* Aba e gaveta do índice, usadas só em tela estreita */
.indice-botao,
.indice-fundo,
.indice__fechar { display: none; }

/* Lista de musicas inscritas ------------------------------------------ */
.busca-musicas {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-bottom: 1.4rem;
}
.busca-musicas input[type="search"] { flex: 1 1 260px; }
.busca-musicas select { flex: 0 1 220px; }

.marcador {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.marcador--municipal { background: rgba(13, 109, 177, .14); color: var(--azul-escuro); }
.marcador--regional  { background: rgba(107, 54, 181, .14); color: #52249A; }
.marcador--municipal_infantil, .marcador--municipal_adulto { background: rgba(13, 109, 177, .14); color: var(--azul-escuro); }
.marcador--regional_popular, .marcador--regional_sertanejo { background: rgba(107, 54, 181, .14); color: #52249A; }
.marcador--pendente  { background: rgba(255, 176, 32, .2);  color: var(--ambar-escuro); }
.marcador--homologada { background: rgba(28, 160, 90, .16); color: #17794A; }
.marcador--recusada  { background: rgba(200, 60, 60, .14);  color: #A93636; }
.marcador--lista_espera { background: rgba(85, 97, 122, .16); color: var(--texto-suave); }
.marcador--cancelada { background: rgba(85, 97, 122, .16); color: var(--texto-suave); }

/* Vazio --------------------------------------------------------------- */
.vazio {
    text-align: center;
    padding: 3rem 1.4rem;
    color: var(--texto-suave);
    border: 1px dashed var(--borda);
    border-radius: var(--raio);
}

/* Responsivo ---------------------------------------------------------- */
@media (max-width: 900px) {
    .com-indice { grid-template-columns: 1fr; }
    .indice { position: static; }

    /* Aba fixa na lateral esquerda, espelhando a de acessibilidade */
    .indice-botao:not([hidden]) {
        position: fixed;
        left: 0;
        top: 38%;
        transform: translateY(-50%);
        z-index: 900;
        display: grid;
        place-items: center;
        padding: .9rem .7rem;
        border: 0;
        border-radius: 0 var(--raio) var(--raio) 0;
        background: var(--azul);
        color: #fff;
        box-shadow: var(--sombra-alta);
        cursor: pointer;
        line-height: 0;
    }
    .indice-botao:hover { background: var(--azul-escuro); }
    .indice-botao--entrando { animation: aba-entra .28s ease-out; }
    @keyframes aba-entra {
        from { transform: translate(-100%, -50%); }
        to   { transform: translate(0, -50%); }
    }
    .indice-botao svg { width: 26px; height: 26px; fill: currentColor; }

    /* A gaveta é uma cópia do índice; o original continua no topo do texto */
    .indice[data-flutuante] {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 960;
        width: min(320px, 86vw);
        margin: 0;
        padding: 1.4rem 1.3rem 2rem;
        border: 0;
        border-radius: 0 var(--raio) var(--raio) 0;
        background: var(--fundo);
        box-shadow: var(--sombra-alta);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform var(--transicao), visibility var(--transicao);
        font-size: .98rem;
    }
    .indice[data-flutuante][data-aberto="true"] {
        transform: none;
        visibility: visible;
    }
    .indice[data-flutuante] li { margin-bottom: 0; }
    .indice[data-flutuante] a {
        display: block;
        padding: .6rem 0;
        border-bottom: 1px solid var(--borda);
    }
    .indice[data-flutuante] a[aria-current="location"] { padding-left: .6rem; margin-left: 0; }

    .indice[data-flutuante] .indice__fechar:not([hidden]) {
        display: grid;
        place-items: center;
        float: right;
        width: 36px; height: 36px;
        margin: -.3rem -.3rem 0 0;
        border: 0;
        border-radius: 50%;
        background: var(--fundo-alt);
        color: var(--texto-suave);
        font-size: 1.3rem;
        line-height: 1;
        cursor: pointer;
    }

    .indice-fundo:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 955;
        background: rgba(7, 13, 27, .55);
    }
}

@media (max-width: 820px) {
    .menu-botao { display: inline-flex; }

    .menu {
        position: fixed;
        inset: var(--altura-cabecalho) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .6rem 1.15rem 1.4rem;
        background: rgba(7, 13, 27, .99);
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        max-height: calc(100svh - var(--altura-cabecalho));
        overflow-y: auto;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
    }
    .menu[data-aberto="true"] {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .menu__link {
        padding: .9rem .4rem;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        border-radius: 0;
    }
    .menu__link--destaque {
        margin-top: .9rem;
        border-radius: 999px;
        text-align: center;
        border-bottom: 0;
    }

    .campo--2, .campo--3, .campo--4, .campo--5 { grid-column: span 6; }
    .campo--7, .campo--8, .campo--9, .campo--10 { grid-column: span 12; }
    .campo--6 { grid-column: span 12; }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .hero__conteudo { padding-block: calc(var(--altura-cabecalho) + 1.6rem) 4.5rem; }
    /* Em tela estreita o mes desce para a linha de baixo, senao estoura */
    .hero__mes { flex-basis: 100%; }
    .contagem { gap: .4rem; }
    .contagem__item { min-width: 62px; padding: .5rem .3rem .4rem; }
    .contagem__numero { font-size: 1.45rem; }
    .botao { width: 100%; }
    .hero__acoes { flex-direction: column; }
    .campo--2, .campo--3, .campo--4, .campo--5 { grid-column: span 12; }
    .bloco-campos { padding: 1.2rem 1rem .9rem; }
    .galeria { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Quem pediu menos animacao recebe menos animacao */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .hero__video { display: none; }
    .equalizador { display: none; }
}

/* Impressao, util para o regulamento e para o comprovante */
@media print {
    .cabecalho, .rodape, .equalizador, .hero__midia, .botao, .indice,
    .indice-botao, .indice-fundo { display: none !important; }
    body { padding-top: 0; font-size: 12pt; color: #000; }
    .acessibilidade, .anexo__acoes, .topo-pagina { display: none !important; }
    .anexo { border: 0; box-shadow: none; padding: 0; }
    .secao { padding-block: 0; }
    .topo-pagina { background: none; color: #000; padding-block: 0 1rem; }
    .topo-pagina h1, .topo-pagina p { color: #000; }
    a { color: #000; text-decoration: none; }
}
.ja-inscrito { text-align: center; margin: 2rem 0 0; color: var(--texto-suave); }
@media (max-width: 600px) {
    .tabela--ficha, .tabela--ficha tbody, .tabela--ficha tr, .tabela--ficha th, .tabela--ficha td { display: block; width: 100%; }
    .tabela--ficha th { padding-bottom: .1rem; border-bottom: 0; }
    .tabela--ficha td { padding-top: .2rem; }
}
.ficha-quem { margin: 0 0 .8rem; color: var(--texto-suave); }
.ficha-quem svg { vertical-align: -3px; color: #17794A; }
.ficha-integrante { background: var(--fundo-alt); border-radius: calc(var(--raio) / 2); padding: .8rem 1rem; }

/* Galeria: um card por edicao ---------------------------------------- */
.edicoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; }
.edicao {
    position: relative;
    display: block;
    border-radius: var(--raio);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    color: #fff;
    text-decoration: none;
    box-shadow: var(--sombra-alta);
    background: #0b1224;
}
.edicao__capa, .edicao__capa img { position: absolute; inset: 0; width: 100%; height: 100%; }
.edicao__capa img { object-fit: cover; transition: transform .5s ease; }
.edicao:hover .edicao__capa img, .edicao:focus-visible .edicao__capa img { transform: scale(1.05); }
.edicao::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7, 13, 27, .9) 0%, rgba(7, 13, 27, .35) 45%, rgba(7, 13, 27, 0) 70%);
}
.edicao__texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.4rem 1.5rem; display: grid; gap: .15rem; }
.edicao__ano { font-family: var(--fonte-titulo, inherit); font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1; font-weight: 800; }
.edicao__nome { font-size: 1.15rem; }
.edicao__total { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .85); font-size: .95rem; }
.galeria-outras { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2.4rem; }
.opcao__reserva { display: block; margin-top: .3rem; font-style: normal; font-weight: 700; color: var(--ambar-escuro); }

/* Vencedores: fotos agrupadas por categoria, com legenda */
.vencedores { margin-bottom: 3rem; }
.vencedores__titulo { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 1.2rem; }
.galeria--legendas { align-items: start; }
.galeria__item { margin: 0; }
.galeria__item .galeria__foto { width: 100%; }
.galeria__item figcaption { margin-top: .55rem; font-weight: 700; line-height: 1.35; }
.lightbox__figura { margin: 0; display: grid; justify-items: center; gap: .7rem; }
.lightbox__legenda { color: #fff; font-weight: 700; text-align: center; padding: 0 1rem; }
.edicao__ano svg { vertical-align: -2px; color: #FFD166; }
.lightbox__figura img { max-height: 80vh; }
.galeria-secao { margin-bottom: 3.4rem; }