/* ============================================================
   ENCONTROS UNIVERSITÁRIOS 2026 — UFC Campus Russas
   Folha de estilos do site institucional
   ------------------------------------------------------------
   Reescrita do zero a partir da identidade visual EU2026.
   Organizada por seções (veja o índice abaixo) e usando apenas
   classes que os templates realmente utilizam — sem o excesso
   de utilitários "mortos" que existia no app.css de 2025.

   ÍNDICE
   1. Fontes
   2. Tokens (cores, tipografia, espaçamento)
   3. Reset & base
   4. Layout & utilitários
   5. Botões e links
   6. Padrão listrado (identidade visual)
   7. Cabeçalho / navbar
   8. Contador regressivo
   9. Hero (página inicial)
   10. Seções de conteúdo (sobre, objetivos, missão, visão, valores)
   11. Programação (abas por dia)
   12. Cronograma (linha do tempo)
   13. Cards (editais, links úteis, apresentações, notícias)
   14. Certificados
   15. Formulário de inscrição
   16. Carrossel de fotos do evento
   17. Rodapé (apoiadores + contato)
   18. Botão voltar ao topo
   19. Responsividade fina
   ============================================================ */


/* ---------------------------------------------------------------
   1. FONTES
   Poppins para títulos (peso forte, mesma personalidade da marca
   "ENCONTROS UNIVERSITÁRIOS 2026") e Inter para o texto corrido.
   Substituem o par Fraunces + "DM" forçado via *{} do site 2025,
   que conflitavam entre si.
--------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap");


/* ---------------------------------------------------------------
   2. TOKENS — Identidade Visual EU2026
--------------------------------------------------------------- */
:root {
    /* Cores principais da marca */
    --roxo: #9038CF;
    --vermelho: #D70721;
    --verde: #025D31;

    /* Cores complementares */
    --azul: #1A5DC6;
    --rosa: #FE82CA;
    --lilas: #E9BCFF;

    /* Variações de apoio (contraste com texto branco/legibilidade) */
    --rosa-profundo: #C23E90;
    --roxo-escuro: #5C1F8A;
    --tinta: #1B1424;
    --papel: #FBF7FF;
    --branco: #FFFFFF;

    /* Cor de fundo padrão das páginas internas */
    --cor-fundo-pagina: var(--roxo);

    /* Tipografia */
    --fonte-titulo: "Poppins", sans-serif;
    --fonte-texto: "Inter", sans-serif;

    /* Escala de espaçamento */
    --espaco-1: 0.5rem;
    --espaco-2: 1rem;
    --espaco-3: 1.5rem;
    --espaco-4: 2.5rem;
    --espaco-5: 4rem;
    --espaco-6: 6rem;

    /* Formas */
    --raio-sm: 10px;
    --raio-md: 20px;
    --raio-full: 999px;
    --sombra-dura: 4px 4px 0 var(--tinta);
    --largura-container: 1200px;
}


/* ---------------------------------------------------------------
   3. RESET & BASE
--------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--fonte-texto);
    color: var(--tinta);
    background-color: var(--papel);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
}

p {
    margin: 0 0 1rem;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

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


/* ---------------------------------------------------------------
   4. LAYOUT & UTILITÁRIOS
--------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--largura-container);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.u-hidden { display: none !important; }

.u-text-center { text-align: center; }

.eyebrow {
    display: inline-block;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}


/* ---------------------------------------------------------------
   5. BOTÕES E LINKS
--------------------------------------------------------------- */
.btn {
    display: inline-block;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 2rem;
    border-radius: var(--raio-full);
    border: 2px solid var(--tinta);
    box-shadow: var(--sombra-dura);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--tinta);
}

.btn:active,
.btn:focus-visible {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 var(--tinta);
}

.btn--primaria {
    background-color: var(--branco);
    color: var(--roxo-escuro);
}

.btn--clara {
    background-color: var(--branco);
    color: var(--tinta);
    border-color: var(--tinta);
}

/* Botão usado em editais / links úteis / inscrição */
.btn-documento {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--roxo);
    background-color: var(--branco);
    border: 2px solid var(--roxo);
    border-radius: var(--raio-sm);
    box-shadow: 3px 3px 0 var(--roxo);
    transition: all 0.15s ease;
}

.btn-documento:hover {
    color: var(--branco);
    background-color: var(--roxo);
}

/* Sublinhado animado usado nos links do menu */
.link-marcado {
    position: relative;
}

.link-marcado::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.25s ease;
}

.link-marcado:hover::after,
.link-marcado:focus-visible::after {
    width: 100%;
}


/* ---------------------------------------------------------------
   6. PADRÃO LISTRADO — elemento decorativo da identidade visual
   Reaproveita a paleta em pequenas faixas, como no manual de marca.
--------------------------------------------------------------- */
.faixa-padrao {
    display: flex;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.faixa-padrao span {
    flex: 1;
    height: 100%;
}

.faixa-padrao span:nth-child(6n + 1) {
    background: repeating-linear-gradient(to bottom, var(--rosa) 0 3px, transparent 3px 7px);
}
.faixa-padrao span:nth-child(6n + 2) {
    background: repeating-linear-gradient(to bottom, var(--azul) 0 3px, var(--verde) 3px 7px);
}
.faixa-padrao span:nth-child(6n + 3) {
    background: repeating-linear-gradient(to bottom, var(--vermelho) 0 3px, var(--rosa) 3px 7px);
}
.faixa-padrao span:nth-child(6n + 4) {
    background: repeating-linear-gradient(to bottom, var(--verde) 0 3px, transparent 3px 7px);
}
.faixa-padrao span:nth-child(6n + 5) {
    background: repeating-linear-gradient(to bottom, var(--lilas) 0 3px, var(--azul) 3px 7px);
}

.faixa-padrao--fina { height: 10px; }
.faixa-padrao--media { height: 18px; }


/* ---------------------------------------------------------------
   7. CABEÇALHO / NAVBAR
--------------------------------------------------------------- */
.site-header {
    background-color: var(--cor-fundo-pagina);
    padding: 1.25rem 0 0;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1rem;
}

.navbar__brand {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.navbar__brand img {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
}

.navbar__toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
}

.navbar__toggle span {
    width: 26px;
    height: 2px;
    background-color: var(--branco);
    display: block;
}

.navbar__links {
    display: none;
    align-items: center;
    gap: 1.75rem;
    font-family: var(--fonte-titulo);
}

.navbar__link {
    color: var(--branco);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
}

.navbar__dropdown {
    position: relative;
}

.navbar__dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--branco);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.navbar__dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100%);
    right: 0;
    min-width: 180px;
    background-color: var(--branco);
    border-radius: var(--raio-sm);
    box-shadow: 0 12px 24px rgba(27, 20, 36, 0.18);
    padding: 0.5rem;
    flex-direction: column;
    z-index: 40;
}

.navbar__dropdown:hover .navbar__dropdown-menu,
.navbar__dropdown:focus-within .navbar__dropdown-menu {
    display: flex;
}

.navbar__dropdown-menu a {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--tinta);
    font-weight: 600;
    font-size: 0.9rem;
}

.navbar__dropdown-menu a:hover {
    background-color: var(--papel);
    color: var(--roxo);
}

/* Menu mobile */
.navbar-mobile {
    display: block;
    background-color: var(--roxo-escuro);
    padding: 0.5rem 1.25rem 1.5rem;
}

.navbar-mobile a,
.navbar-mobile button {
    display: block;
    width: 100%;
    text-align: left;
    color: var(--branco);
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.65rem 0;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.navbar-mobile__dropdown-menu {
    display: none;
    flex-direction: column;
    padding-left: 1rem;
}

.navbar-mobile__dropdown-menu.is-open {
    display: flex;
}

@media (min-width: 768px) {
    .navbar__toggle,
    .navbar-mobile {
        display: none;
    }

    .navbar__links {
        display: flex;
    }
}


/* ---------------------------------------------------------------
   8. CONTADOR REGRESSIVO
--------------------------------------------------------------- */
.contador {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    background-color: var(--tinta);
    color: var(--branco);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    text-align: center;
    visibility: hidden;
}

.contador strong {
    font-family: var(--fonte-titulo);
    color: var(--rosa);
}

@media (max-width: 639px) {
    .contador { font-size: 0.8rem; }
}


/* ---------------------------------------------------------------
   9. HERO — página inicial
--------------------------------------------------------------- */
.hero {
    background-color: var(--cor-fundo-pagina);
    color: var(--branco);
    padding: var(--espaco-5) 0 var(--espaco-6);
    position: relative;
    overflow: hidden;
}

.hero__container {
    max-width: var(--largura-container);
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: var(--espaco-4);
    justify-content: space-between;
}

.hero__visual {
    display: flex;
    justify-content: center;
}

.hero__todas-img {
    width: 100%;
    max-width: 320px;
    height: auto;
}

.hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    text-align: center;
}

.hero__lockup {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hero__kicker {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: clamp(1.1rem, 2.6vw, 1.6rem);
    letter-spacing: 0.04em;
    color: var(--lilas);
    text-transform: uppercase;
}

.hero__title {
    font-size: clamp(3.5rem, 14vw, 6.5rem);
    line-height: 0.9;
}

.hero__subtitle {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    color: var(--lilas);
}

.hero__cta {
    margin-top: var(--espaco-2);
}

@media (min-width: 768px) {
    .hero__container {
        flex-direction: row;
        align-items: center;
        gap: var(--espaco-5);
    }

    .hero__visual {
        flex: 0 0 auto;
        width: 34%;
    }

    .hero__todas-img {
        max-width: 100%;
    }

    .hero__text {
        text-align: left;
        align-items: flex-start;
    }
}


/* ---------------------------------------------------------------
   10. SEÇÕES DE CONTEÚDO (sobre / objetivos / missão / visão / valores)
--------------------------------------------------------------- */
.secao {
    padding: var(--espaco-5) 0;
}

.secao__titulo {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--espaco-3);
}

.secao__texto {
    font-size: 1.05rem;
    max-width: 70ch;
}

.secao--roxo { background-color: var(--roxo); color: var(--branco); }
.secao--vermelho { background-color: var(--vermelho); color: var(--branco); }
.secao--verde { background-color: var(--verde); color: var(--branco); }
.secao--azul { background-color: var(--azul); color: var(--branco); }
.secao--rosa { background-color: var(--rosa-profundo); color: var(--branco); }
.secao--lilas { background-color: var(--lilas); color: var(--tinta); }
.secao--clara { background-color: var(--papel); color: var(--tinta); }


/* ---------------------------------------------------------------
   11. PROGRAMAÇÃO — abas por dia
--------------------------------------------------------------- */
.programacao {
    padding: var(--espaco-5) 0;
    background-color: var(--rosa-profundo);
    color: var(--branco);
}

.programacao__abas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: var(--espaco-3) 0;
}

.programacao__aba {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    padding: 0.6rem 1.5rem;
    border-radius: var(--raio-full);
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--branco);
    transition: background-color 0.2s ease;
}

.programacao__aba:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.programacao__aba.active {
    background-color: var(--branco);
    color: var(--rosa-profundo);
}

.programacao__dia {
    display: none;
}

.programacao__tabela {
    background-color: var(--branco);
    color: var(--tinta);
    border-radius: var(--raio-md);
    overflow: hidden;
}

.programacao__tabela th,
.programacao__tabela td {
    padding: 0.85rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--papel);
}

.programacao__tabela th {
    font-family: var(--fonte-titulo);
    background-color: var(--roxo);
    color: var(--branco);
}

.programacao__tabela tr.highlight {
    background-color: var(--papel);
}


/* ---------------------------------------------------------------
   12. CRONOGRAMA — linha do tempo
--------------------------------------------------------------- */
.cronograma {
    background-color: var(--verde);
    color: var(--branco);
    padding: var(--espaco-5) 0;
}

.linha-tempo {
    max-width: 800px;
    margin: var(--espaco-4) auto 0;
    position: relative;
    padding-left: 2rem;
}

.linha-tempo::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.35);
}

.linha-tempo__item {
    position: relative;
    padding-bottom: var(--espaco-4);
}

.linha-tempo__marcador {
    position: absolute;
    left: -2rem;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--rosa);
    border: 3px solid var(--verde);
}

.linha-tempo__marcador.disabled {
    background-color: rgb(85, 78, 78);
}

.linha-tempo__data {
    font-family: var(--fonte-titulo);
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
}

.linha-tempo__link {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ---------------------------------------------------------------
   13. CARDS — editais / links úteis / apresentações / notícias
--------------------------------------------------------------- */
.pagina-interna {
    background-color: var(--cor-fundo-pagina);
    min-height: 60vh;
    padding: var(--espaco-5) 0;
}

.painel {
    background-color: var(--branco);
    border-radius: var(--raio-md);
    padding: var(--espaco-4);
}

.painel__titulo {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--roxo);
    margin-bottom: var(--espaco-3);
}

.lista-documentos {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
}

.item-documento {
    padding: var(--espaco-2) 0;
    border-bottom: 1px solid var(--papel);
}

.item-documento__titulo {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.05rem;
    margin-bottom: 0.85rem;
}

.grupo-links h2 {
    color: var(--roxo);
    font-size: 1.5rem;
    margin: var(--espaco-3) 0 var(--espaco-2);
}

/* Apresentações */
.card-apresentacao {
    display: flex;
    gap: var(--espaco-3);
    align-items: flex-start;
    background-color: var(--branco);
    border-radius: var(--raio-md);
    padding: var(--espaco-3);
    margin-bottom: var(--espaco-3);
    box-shadow: 0 10px 30px rgba(27, 20, 36, 0.08);
}

.card-apresentacao img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.card-apresentacao h3 {
    color: var(--roxo);
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}

/* Notícia */
/* Notícia — página individual, sobre fundo roxo (.pagina-interna) */
.artigo {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-4);
    color: var(--branco);
}

.artigo__corpo h1 {
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    color: var(--branco);
}

.artigo__data {
    color: var(--rosa);
    font-weight: 700;
    margin: 0.5rem 0 1.5rem;
}

.artigo__conteudo {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--branco);
}

.artigo__lateral h2 {
    font-size: 1.25rem;
    color: var(--branco);
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--rosa);
    margin-bottom: var(--espaco-2);
}

/* Cartão de notícia usado na barra lateral: sem fundo próprio,
   então o texto precisa contrastar com o roxo da página. */
.card-noticia {
    display: block;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--raio-sm);
    overflow: hidden;
    margin-bottom: var(--espaco-2);
}

.lateral-noticias {
    display: flex;
    flex-direction: column;
}

/* Em telas menores que 1024px, o JS transforma #lateral-noticias
   num Owl Carousel (classe "owl-carousel" adicionada dinamicamente).
   Os estilos abaixo só valem enquanto o carrossel está ativo. */
/* Em telas menores que 1024px, o JS transforma #lateral-noticias
   num Owl Carousel (classe "owl-carousel" adicionada dinamicamente).
   Nesse estado, o cartão usa o mesmo visual do carrossel da home
   (cartão branco opaco + imagem em proporção fixa), em vez do
   cartão transparente com altura fixa usado na lista da tela grande. */
.lateral-noticias.owl-carousel .card-noticia {
    margin-bottom: 0;
    background-color: var(--branco);
    border: none;
    box-shadow: 0 10px 30px rgba(27, 20, 36, 0.1);
}

.lateral-noticias.owl-carousel .card-noticia__imagem {
    height: auto;
    aspect-ratio: 4 / 3;
}

.lateral-noticias.owl-carousel .card-noticia__titulo {
    color: var(--tinta);
}

.lateral-noticias.owl-carousel .card-noticia:hover .card-noticia__titulo {
    color: var(--roxo);
}

.lateral-noticias .owl-dots {
    text-align: center;
    margin-top: 0.75rem;
}

.lateral-noticias .owl-dot span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
}

.lateral-noticias .owl-dot.active span {
    background-color: var(--rosa);
}

.card-noticia__imagem {
    height: 140px;
    background-size: cover;
    background-position: center;
}

.card-noticia__titulo {
    display: block;
    padding: 0.85rem 1rem;
    font-weight: 600;
    color: var(--branco);
    transition: color 0.2s ease;
}

.card-noticia:hover .card-noticia__titulo {
    color: var(--rosa);
}

@media (min-width: 1024px) {
    .artigo { flex-direction: row; }
    .artigo__corpo { flex: 3; }
    .artigo__lateral { flex: 1; }
}

/* Carrossel de notícias — página inicial (cartão branco sobre
   fundo claro, por isso usa o esquema de cores oposto ao cartão
   da barra lateral acima) */
.noticias-carousel {
    margin-top: var(--espaco-3);
}

.noticias-carousel__slide {
    padding: 0.5rem 0 1.5rem;
}

.card-noticia--carousel {
    background-color: var(--branco);
    border: none;
    border-radius: var(--raio-md);
    box-shadow: 0 10px 30px rgba(27, 20, 36, 0.1);
}

.card-noticia--carousel .card-noticia__imagem {
    height: auto;
    aspect-ratio: 4 / 3;
}

.card-noticia--carousel .card-noticia__titulo {
    color: var(--tinta);
}

.card-noticia--carousel:hover .card-noticia__titulo {
    color: var(--roxo);
}

.noticias-carousel .owl-dots {
    text-align: center;
    margin-top: 0.5rem;
}

.noticias-carousel .owl-dot span {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 0 4px;
    border-radius: 50%;
    background-color: var(--lilas);
}

.noticias-carousel .owl-dot.active span {
    background-color: var(--roxo);
}


/* ---------------------------------------------------------------
   14. CERTIFICADOS
--------------------------------------------------------------- */
.certificados__abas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: var(--espaco-3);
}

.aba-pilula {
    padding: 0.7rem 1.75rem;
    border-radius: var(--raio-full);
    font-weight: 700;
    font-family: var(--fonte-titulo);
    background-color: var(--papel);
    color: var(--roxo);
    box-shadow: 0 4px 10px rgba(27, 20, 36, 0.08);
    transition: all 0.2s ease;
}

.aba-pilula:hover {
    transform: translateY(-2px);
}

.aba-pilula.aba-ativa {
    background-color: var(--roxo);
    color: var(--branco);
}

.campo-busca {
    width: 100%;
    max-width: 480px;
    margin: 0 auto var(--espaco-3);
    display: block;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--papel);
    border-radius: var(--raio-full);
}

.campo-busca:focus {
    border-color: var(--roxo);
    outline: none;
}

.grade-certificados {
    display: grid;
    gap: var(--espaco-2);
    max-height: 600px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.certificado-item {
    background-color: var(--papel);
    border-radius: var(--raio-md);
    padding: var(--espaco-3);
    transition: box-shadow 0.2s ease;
}

.certificado-item:hover {
    box-shadow: 0 10px 24px rgba(27, 20, 36, 0.1);
}

.certificado-item h2 {
    font-size: 1.15rem;
    color: var(--roxo-escuro);
    margin-bottom: 0.5rem;
}

.certificado-item a {
    color: var(--roxo);
    font-weight: 700;
    text-decoration: underline;
}

@media (min-width: 768px) {
    .grade-certificados { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
    .grade-certificados { grid-template-columns: repeat(3, 1fr); }
}


/* ---------------------------------------------------------------
   15. FORMULÁRIO DE INSCRIÇÃO
--------------------------------------------------------------- */
.inscricao__prazo {
    background-color: var(--papel);
    border-left: 6px solid var(--roxo);
    border-radius: var(--raio-sm);
    padding: var(--espaco-3);
    margin: var(--espaco-3) 0;
}


/* ---------------------------------------------------------------
   16. CARROSSEL DE FOTOS DO EVENTO
   Mantido desativado por padrão (assim como estava em produção
   no site 2025). Para ativar, remova a classe "u-hidden" do
   elemento #carousel-fs no template.
--------------------------------------------------------------- */
.carousel-fs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    height: 60vh;
}

.carousel-fs .carousel-cell {
    flex: 0 0 100%;
    scroll-snap-align: start;
    background-position: center;
    background-size: cover;
}


/* ---------------------------------------------------------------
   17. RODAPÉ
--------------------------------------------------------------- */
.site-footer {
    font-family: var(--fonte-texto);
}

.apoiadores {
    background-color: var(--branco);
    padding: var(--espaco-4) 1.25rem;
    text-align: center;
}

.apoiadores__titulo {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--tinta);
    margin-bottom: var(--espaco-2);
}

.apoiadores__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-4);
}

/* O owl-carousel aplica "width: 100%" nas imagens por padrão, o que
   distorcia as logos dos apoiadores. Travamos uma área fixa por item
   e usamos object-fit para manter a proporção original. */
.apoiadores__logos .panel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
}

.apoiadores__logos img,
.apoiadores__logos.owl-carousel img {
    width: auto !important;
    height: auto;
    max-height: 110px;
    max-width: 100%;
    object-fit: contain;
}

.rodape-contato {
    display: flex;
    flex-direction: column;
}

.rodape-contato__endereco {
    background-color: var(--azul);
    color: var(--branco);
    padding: var(--espaco-3) var(--espaco-3);
    font-size: 0.95rem;
    line-height: 1.7;
}

.rodape-contato__endereco a {
    color: var(--branco);
    text-decoration: underline;
}

.rodape-contato__creditos {
    background-color: var(--branco);
    display: flex;
    justify-content: center;
    gap: var(--espaco-4);
    padding: var(--espaco-2);
    flex-wrap: wrap;
}

.rodape-contato__creditos figure {
    margin: 0;
    text-align: center;
    font-size: 0.75rem;
}

.rodape-contato__creditos img {
    margin-top: 0.4rem;
}

.rodape-marca {
    background-color: var(--rosa-profundo);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-4);
    padding: var(--espaco-3);
}

.rodape-marca img {
    width: 12rem;
    max-width: 80%;
}

@media (min-width: 1024px) {
    .rodape-marca img {
        width: 15rem;
    }
}

@media (min-width: 1024px) {
    .site-footer__grid {
        display: flex;
        flex-direction: row-reverse;
    }

    .rodape-contato { flex: 8; }
    .rodape-marca { flex: 4; flex-direction: column; padding: var(--espaco-4); }
}


/* ---------------------------------------------------------------
   18. BOTÃO VOLTAR AO TOPO
--------------------------------------------------------------- */
#scroll-to-top {
    position: fixed;
    display: none;
    bottom: 1.25rem;
    right: 1.25rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--roxo);
    color: var(--branco);
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(27, 20, 36, 0.25);
    z-index: 50;
}

#scroll-to-top:hover {
    background-color: var(--roxo-escuro);
}


/* ---------------------------------------------------------------
   19. RESPONSIVIDADE FINA
--------------------------------------------------------------- */
@media (max-width: 767px) {
    .secao,
    .programacao,
    .cronograma,
    .pagina-interna {
        padding: var(--espaco-4) 0;
    }

    .painel {
        padding: var(--espaco-3);
    }

    .card-apresentacao {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}