/* ============================================
   RESET BÁSICO
   ============================================
   
   Cada navegador (Chrome, Firefox, Safari) aplica estilos
   padrão diferentes aos elementos. Um reset remove essas
   diferenças para partirmos de uma base limpa e consistente.

   ============================================ */

* {
    /* Remove margens padrão que o navegador coloca em tudo */
    margin: 0;
    
    /* Remove paddings padrão do navegador */
    padding: 0;
    
    /* 
       BOX-SIZING: BORDER-BOX
       
       Por padrão, quando definimos width: 100px e depois
       adicionamos padding: 10px, o elemento fica com 120px
       de largura total (100 + 10 + 10).
       
       Com border-box, o padding é "absorvido" dentro da
       largura definida. Então width: 100px com padding: 10px
       continua 100px no total (o conteúdo interno fica 80px).
       
       Isso facilita MUITO o controle de layouts.
    */
    box-sizing: border-box;
}

/* 
   :ROOT
   Define variáveis CSS globais.
   Qualquer elemento pode usar var(--nome).
*/
:root {
    /*
       --NAVBAR-HEIGHT: 70PX
       
       Variável com a altura do navbar.
       Se mudar a altura do navbar, muda aqui
       e TODOS os lugares que usam atualizam.
    */
    --navbar-height: 70px;

     /*
       --HERO-OVERLAP: 10PX
       
       Quanto o carrossel "sobe" por baixo do navbar.
       Como o navbar tem cantos arredondos inferiores,
       deixamos o carrossel entrar 10px por baixo
       para preencher o espaço branco dos arredondamentos.
       
       Cálculo: margin-top do hero = 70px - 10px = 60px
    */
    --hero-overlap: 10px;
    
    /*
       --HERO-MARGIN-TOP
       
       Altura do navbar menos a sobreposição.
       O carrossel começa 60px abaixo do topo,
       mas suas imagens sobem 10px por baixo do navbar.
    */
    --hero-margin-top: calc(var(--navbar-height) - var(--hero-overlap));
    
    /*
       --NAVBAR-SAFE-AREA
       
       Altura do navbar + respiro extra para
       não ficar colado no conteúdo.
    */
    --navbar-safe-area: 80px;

    /*
       ============================================
       PALETA DE CORES DA SEAFÍS
       ============================================

       Estas variáveis documentam a paleta oficial da
       Semana Acadêmica de Física (SEAFís). O CSS abaixo
       ainda usa os valores hexadecimais "soltos" nas
       propriedades (para não quebrar nada ao migrar do
       CAFís), mas as variáveis ficam aqui como referência
       rápida e para você já poder usar var(--nome) em
       qualquer nova regra que criar.

       DESTAQUE (cor de chamada, usar com moderação):
       --color-highlight: #EFBA7B (laranja do logo — usar em
       preenchimentos, bordas decorativas, ícones, hovers de
       fundo; é uma cor CLARA, então evite usá-la como cor de
       TEXTO sobre fundo branco, pois o contraste fica fraco)
       --color-highlight-text: #B3651F (o mesmo laranja, porém
       escurecido — este sim tem contraste suficiente para ser
       usado como cor de TEXTO em links, títulos, etc.)

       FUNDO (tons de azul/verde-água, do mais claro ao
       mais escuro — pensados para céu/água):
       --color-bg-light:  #B3DEFA
       --color-bg-medium: #66A2C1
       --color-bg-dark:   #558383

       NEUTRO (tons terrosos, remetendo às raízes do tema
       "Física: a ciência mãe"):
       --color-neutral-warm: #938463
       --color-neutral-dark: #3D2E22 (marrom quente bem escuro e
       saturado — trocado a partir do #574E47 original, que era
       um marrom-acinzentado apagado e destoava das outras cores
       vibrantes da paleta; o novo tom tem mais presença e ainda
       mantém a família "terrosa" do tema)

       Equivalente em RGB do --color-neutral-dark, usado nas
       sombras/fundos translúcidos com rgba(): 61, 46, 34

       --GRADIENT-READABLE

       O degradê "forte" da marca (visto nas molduras dos
       carrosséis e nos cards de eventos): marrom → laranja →
       verde-água, todo em tons escuros/saturados. Usamos
       --color-highlight-text (o laranja ESCURECIDO) no meio,
       em vez do --color-highlight claro, para texto BRANCO
       por cima continuar legível também na faixa do meio.
       Reservado para onde o gradiente É o próprio texto (ver
       --gradient-soft abaixo para fundos de card).

       --GRADIENT-SOFT

       O mesmo degradê CLARO já usado no fundo do navbar (azul
       claro → azul médio → laranja claro). Criado para a
       planilha de horários (programacao.html): o
       --gradient-readable acima, usado como FUNDO de um card
       inteiro, ficava "pesado" demais visualmente. Como este
       degradê é claro (não escuro), o texto por cima dele usa
       uma cor escura sólida (--color-neutral-dark), do mesmo
       jeito que o navbar já faz — não dá pra usar texto branco
       aqui (contraste fraco nas partes mais claras).
    */
    --color-highlight: #EFBA7B;
    --color-highlight-text: #B3651F;
    --color-bg-light: #B3DEFA;
    --color-bg-medium: #66A2C1;
    --color-bg-dark: #558383;
    --color-neutral-warm: #938463;
    --color-neutral-dark: #3D2E22;
    --gradient-readable: linear-gradient(135deg, #3D2E22 0%, #B3651F 50%, #558383 100%);
    --gradient-soft: linear-gradient(to right, #B3DEFA 0%, #66A2C1 55%, #EFBA7B 100%);
}


/* ============================================
   ESTILOS GLOBAIS
   ============================================
   
   Aqui definimos estilos que afetam toda a página.
   O seletor "body" pega o elemento <body> do HTML.
   ============================================ */

/*
   OVERFLOW-X: HIDDEN (HTML + BODY)

   Impede rolagem HORIZONTAL na página inteira. Definimos nos
   dois elementos (<html> e <body>) porque navegadores diferem
   em qual dos dois efetivamente controla a rolagem da janela —
   colocando nos dois, cobrimos ambos os casos.

   Por que isso era necessário: elementos posicionados com
   position: absolute + left/right em PORCENTAGEM (como os
   .content-circles — ver mais abaixo) podem, dependendo do
   tamanho aleatório que sorteiam, ultrapassar a borda direita
   ou esquerda da tela em janelas mais estreitas. Isso fazia o
   <body> inteiro ficar mais "largo" que o viewport, habilitando
   uma barra de rolagem horizontal na página toda — mesmo o
   conteúdo de texto normal cabendo direitinho.

   IMPORTANTE: isso NÃO afeta a rolagem horizontal PRÓPRIA da
   planilha de horários (.schedule-table-wrapper, em
   programacao.html) — aquela usa overflow-x: auto num elemento
   interno específico, que continua rolando normalmente por
   dentro de si mesmo, independente do que acontece aqui no
   <html>/<body>.
*/
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;

    /*
       FONT-FAMILY: lista de fontes em ordem de prioridade.
       O navegador tenta usar a primeira; se não estiver
       instalada no computador do usuário, tenta a segunda,
       e assim por diante.
       
       'Segoe UI' = fonte moderna do Windows
       Tahoma = fonte mais antiga, fallback seguro
       Geneva = fonte do Mac
       Verdana = outra fonte segura
       sans-serif = "qualquer fonte sem serifa" (último recurso)
    */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* 
       LINE-HEIGHT: altura da linha de texto.
       1.6 significa 1.6x o tamanho da fonte.
       Isso deixa o texto mais legível, com mais espaço
       entre as linhas.
    */
    line-height: 1.6;
    
    /* Cor padrão do texto em toda a página */
    color: #333;

    /*
       DISPLAY: FLEX + FLEX-DIRECTION: COLUMN
       MIN-HEIGHT: 100VH
       
       Isso cria um layout de "coluna flexível" que
       garante que o footer fique SEMPRE no final da
       página, mesmo que o conteúdo do <main> seja curto.
       
       O footer tem margin-top: auto, o que o empurra
       para o final do container flex.
    */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.page-interna main {
    /*
       MARGIN-TOP: VAR(--NAVBAR-SAFE-AREA)
       
       Páginas sem carrossel precisam de espaço
       completo abaixo do navbar, já que não há
       imagem subindo por baixo dos cantos arredondos.
    */
    margin-top: var(--navbar-safe-area);
}

/* ============================================
   NAVBAR FIXO
   ============================================
   
   O navbar fica "colado" no topo da página.
   Usamos position: fixed para isso.
   ============================================ */

.navbar {
    /*
       POSITION: FIXED
       
       Tira o navbar do fluxo normal da página e o
       fixa na posição definida (top: 0).
       
       Ele fica "flutuando" sobre o conteúdo e não
       se move ao rolar a página.

       IMPORTANTE: elementos fixed precisam de uma
       largura definida. Usamos width: 100%.
    */
    position: fixed;
    top: 0;
    left: 0;
    
    /* Ocupa toda a largura da tela */
    width: 100%;

    /* Arredondamento das bordas */
    border-radius: 0 0 10px 10px;
    
    /* 
       Z-INDEX: 1000
       
       Valor bem alto para garantir que o navbar fique
       por cima de TUDO (carrossel, overlays, etc.).

    */
    z-index: 1000;
    
    /*
       BACKGROUND: LINEAR-GRADIENT(...)
       
       Gradiente da esquerda para a direita, do azul mais claro
       da paleta (FUNDO) até o laranja de destaque (DESTAQUE),
       passando por um azul médio no meio para a transição
       ficar suave:
       #B3DEFA (azul claro) → #66A2C1 (azul médio) → #EFBA7B (laranja)

       IMPORTANTE: como o fundo agora é claro (principalmente
       à esquerda e no laranja da direita), o texto do menu
       precisou deixar de ser branco e virar escuro — veja
       .nav-link e .nav-item.active mais abaixo.
       
       O gradiente do navbar é diferente do hero:
       - Vai de esquerda para direita (to right)
       - Cores diferentes (mais vibrante)
    */
    background: linear-gradient(
        to right,
        #B3DEFA 0%,
        #66A2C1 55%,
        #EFBA7B 100%
    );

    /* 
       BOX-SHADOW
       
       Sombra sutil abaixo do navbar.
       Cria separação visual entre o menu e o conteúdo.
       
       0 2px = deslocamento X e Y
       10px = blur (desfoque)
       rgba(0,0,0,0.1) = preto com 10% opacidade
    */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    
    /* Transição suave para mudanças (ex: sombra no scroll) */
    transition: all 0.3s ease;
}

/*
   NAVBAR.SCROLLED
   Classe adicionada pelo JavaScript quando o usuário
   rola a página. Adiciona uma sombra mais forte.
*/
.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}


/* ============================================
   CONTAINER DO NAVBAR
   ============================================
   
   Centraliza o conteúdo e limita a largura máxima.
   Isso evita que o menu fique muito largo em telas grandes.
   ============================================ */

.nav-container {
    /*
       MAX-WIDTH: 1400PX
       
       Limita a largura do conteúdo do navbar.
       Em telas muito grandes, o menu não fica esticado.
    */
    max-width: 1400px;
    
    /* Centraliza o container horizontalmente */
    margin: 0 auto;
    
    /* Espaçamento interno nas laterais */
    padding: 0 40px;
    
    /* Flexbox para alinhar logo e menu */
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* Altura do navbar */
    height: 70px;
}

/* ============================================
   LOGO DO NAVBAR
   ============================================ */

.nav-logo {
    /*
       TEXT-DECORATION: NONE

       Remove o sublinhado padrão dos links <a>.
    */
    text-decoration: none;
    
    /* Cor escura para contrastar com o novo gradiente claro
       (usada apenas se a imagem do logo não carregar) */
    color: #3D2E22;
    
    /* Tamanho e peso da fonte (usado apenas se não houver imagem) */
    font-size: 1.5rem;
    font-weight: 700;
    
    /* Espaçamento entre letras */
    letter-spacing: 1px;

    /*
       DISPLAY: FLEX + ALIGN-ITEMS: CENTER

       <img> é um elemento "inline" por padrão, o que faz o
       navegador reservar um pequeno espaço extra embaixo dele
       (o espaço reservado para a "descida" de letras como
       "g" e "j"). Isso fazia o logo ficar levemente desalinhado
       verticalmente dentro do navbar.

       Transformando o .nav-logo (o link <a> que envolve a
       imagem) em flex container, a imagem passa a ser
       centralizada com precisão, sem esse espaço fantasma.
    */
    display: flex;
    align-items: center;
    height: 100%;
    
    /* Transição suave para hover */
    transition: all 0.3s ease;
}

.nav-logo-image {
    /*
       ALTURA FIXA + LARGURA AUTOMÁTICA

       height define o tamanho do logo dentro do navbar
       (que tem 70px de altura). Aumentamos de 46px para
       62px porque a logo (Titulo_SF_2.png) é um wordmark
       BEM largo e "baixo" (proporção ~2,34:1) — em 46px de
       altura o texto "SEAFÍS" ficava pequeno demais para
       ler. 62px deixa só 8px de folga entre a imagem e as
       bordas do navbar (70px), o máximo que dá pra crescer
       sem esbarrar nelas.

       width: auto garante que a largura seja calculada
       automaticamente a partir da altura, respeitando a
       proporção original da imagem (evita distorcer o logo).
       Como a proporção é fixa, aumentar a altura também
       aumenta a largura proporcionalmente — é assim que a
       logo "estica para a direita" e fica mais legível, sem
       espremer/esticar as letras de forma desigual.
    */
    height: 62px;
    width: auto;

    /* Remove o espaço fantasma extra que <img> tem por padrão */
    display: block;
}

/* Efeito hover no logo */
.nav-logo:hover {
    /* Aumenta levemente o tamanho */
    transform: scale(1.05);
}

/* ============================================
   LISTA DE NAVEGAÇÃO
   ============================================ */

.nav-list {
    /* Remove os bullets (marcadores) da lista */
    list-style: none;

    /* Flexbox para alinhar os itens horizontalmente */
    display: flex;

    /* Espaçamento entre os itens */
    gap: 15px;

    /* Remove o padding padrão da ul */
    padding: 0;
    margin: 0;
}

/* ============================================
   BOTÃO HAMBÚRGUER
   ============================================

   Escondido por padrão (display: none) — só aparece em telas
   estreitas, via media query (ver a seção "RESPONSIVIDADE", no
   final deste arquivo), onde troca de lugar com o .nav-list
   horizontal normal.
   ============================================ */

.nav-toggle {
    display: none;

    /* Remove estilos padrão de <button> (borda, fundo cinza) */
    background: none;
    border: none;
    cursor: pointer;

    /* Área de toque confortável (recomendação comum: pelo menos
       44x44px, para o dedo não errar o alvo em telas de toque) */
    width: 44px;
    height: 44px;
    padding: 8px;

    /* Cor escura, igual ao resto do texto do navbar */
    color: #3D2E22;
}

.nav-toggle svg {
    width: 100%;
    height: 100%;
}

/* ============================================
   LINKS DO MENU PRINCIPAL
   ============================================ */

.nav-link {
    /* Remove sublinhado */
    text-decoration: none;
    
    /*
       COR ESCURA (não mais branca)

       O navbar agora tem um gradiente CLARO (azul claro até
       laranja), então um texto branco ficaria quase invisível.
       Usamos o neutro escuro da paleta, que tem bom contraste
       tanto sobre o azul claro quanto sobre o laranja.
    */
    color: #3D2E22;
    
    /* Negrito */
    font-weight: 700;
    
    /* Tamanho da fonte */
    font-size: 0.95rem;


    /* Espaçamento interno (área clicável maior) */
    padding: 10px 16px;
    
    /* Display flex para alinhar texto e seta */
    display: flex;
    align-items: center;
    gap: 6px;
    
    /* Bordas arredondadas sutis */
    border-radius: 6px;
    
    /* Transição suave para TODAS as propriedades */
    transition: all 0.3s ease;
    
    /* Garante que o texto não quebre */
    white-space: nowrap;
}

/*
   HOVER NOS LINKS DO MENU
   
   Quando o mouse passa sobre o link:
   - Aumenta de tamanho (scale)
   - Muda o fundo para um tom escuro semi-transparente
     (antes era branco semi-transparente, mas isso quase não
     aparecia sobre o fundo claro do novo gradiente)
*/

.nav-link:hover {
    /*
       TRANSFORM: SCALE(1.1)
       
       Aumenta o link para 110% do tamanho original.
       Cria o efeito de "crescer" que você pediu.
    */
    transform: scale(1.1);
    
    /* Fundo escuro (neutro) com 12% de opacidade */
    background: rgba(61, 46, 34, 0.12);
}

/*
   ITEM ATIVO (página atual)
   
   O item que corresponde à página atual tem um
   destaque visual diferente.
*/
.nav-item.active .nav-link {
    /* Fundo escuro (neutro) com 15% de opacidade */
    background: rgba(61, 46, 34, 0.15);
    
    /* Borda de destaque embaixo, na cor laranja */
    border-bottom: 2px solid #B3651F;
}

/* ============================================
   HERO SECTION
   ============================================
   
   A "hero section" é a área visual principal no topo do site.
   É onde ficam o carrossel, o gradiente, o logo e as legendas.
   ============================================ */

.hero {
    /* 
       POSITION: RELATIVE
       
       Define que este elemento é o "ponto de referência"
       para elementos filhos que tiverem position: absolute.
       
       Sem isso, os elementos absolute dentro dele se
       posicionariam em relação à página inteira (body).
    */
    position: relative;

    /*
       MARGIN-TOP: VAR(--HERO-MARGIN-TOP)
       
       Usa a variável calculada (60px).
       O carrossel começa 60px do topo, mas como
       o navbar tem cantos arredondos, as imagens
       "entram" 10px por baixo dele, preenchendo
       o espaço visualmente.
    */
    margin-top: var(--hero-margin-top);
    
    /* 
       HEIGHT: 50VH
       
       VH = "Viewport Height" (altura da tela visível).
       50vh significa 50% da altura da tela do usuário.
       
       Se a tela tem 1000px de altura, a hero terá 500px.
       Isso cria um efeito visual impactante no topo.
    */
    height: 50vh;
    
    /* 
       OVERFLOW: HIDDEN
       
       Esconde qualquer conteúdo que "vaze" para fora
       dos limites deste elemento.
       
       Útil aqui porque as imagens do carrossel são maiores
       e precisam ser cortadas para caber.
    */
    overflow: hidden;
}

/* ============================================
   CARROSSEL
   ============================================
   
   O carrossel é o container das imagens que ficam
   passando automaticamente no fundo da hero section.
   ============================================ */

.carousel {
    /* 
       POSITION: ABSOLUTE
       
       Tira o elemento do fluxo normal da página e o
       posiciona em relação ao primeiro ancestral com
       position: relative (no caso, .hero).
       
       Com top: 0, left: 0, width: 100%, height: 100%,
       ele preenche TODA a área do .hero.
    */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   CADA SLIDE DO CARROSSEL
   ============================================ */

.carousel-slide {
    /* Mesmo posicionamento absoluto do .carousel */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 
       OPACITY: 0
       
       Todos os slides começam invisíveis.
       Apenas o slide com classe .active ficará visível.
       Isso cria o efeito de "fade" entre as imagens.
    */
    opacity: 0;
    
    /* 
       TRANSITION: OPACITY 1S EASE-IN-OUT
       
       Define uma animação suave quando a opacidade muda.
       
       opacity = propriedade que será animada
       1s = duração de 1 segundo
       ease-in-out = começa devagar, acelera no meio,
                     e desacelera no final (suave)
    */
    transition: opacity 1s ease-in-out;
}

/* 
   SLIDE ATIVO
   Apenas o slide que tiver a classe "active" fica visível.
   O JavaScript adiciona/remove essa classe.
*/
.carousel-slide.active {
    opacity: 1;
}

/* ============================================
   IMAGENS DENTRO DOS SLIDES
   ============================================ */

/*
   POR QUE DUAS IMAGENS POR SLIDE (BG + FG)?

   A faixa do carrossel é bem LARGA e BAIXA (quase a tela
   inteira de largura, só ~50% da altura) — uma proporção bem
   "esticada" (widescreen). Fotos QUADRADAS ou mais "altas"
   (como recepcao.jpg e IVseafis.jpg, ambas 1:1) não têm essa
   mesma proporção.

   Com object-fit: cover (usado antes) sozinho, o navegador é
   OBRIGADO a ampliar a imagem até ela cobrir a faixa larga
   inteira, cortando a maior parte dela para os lados — quanto
   mais diferente a proporção da imagem for da faixa, maior o
   zoom/corte. Para fotos quadradas nesta faixa bem larga, o
   resultado é uma imagem bem mais ampliada e cortada do que o
   pretendido.

   A técnica usada agora (comum em apps como Instagram/Spotify
   para preencher banners com fotos de qualquer proporção) usa
   DUAS cópias da MESMA imagem, uma atrás da outra dentro do
   slide:

   1) .carousel-slide-bg: preenche a faixa INTEIRA com
      object-fit: cover (pode cortar bastante, mas tudo bem —
      ela é só um fundo), bem desfocada e escurecida. Existe
      só para não deixar barras vazias/lisas nas laterais.

   2) .carousel-slide-fg: mostra a MESMA foto por cima, mas com
      object-fit: contain — a foto INTEIRA aparece, sem cortar
      nada, nem ampliar além do necessário, não importa a
      proporção dela. As laterais que sobrarem (quando a foto
      não preenche a faixa toda) mostram a versão desfocada de
      fundo por trás, em vez de barras vazias.

   No HTML, cada slide agora tem os dois <img> com o MESMO src
   — o de fundo com aria-hidden="true" e alt="" (é decorativo,
   puramente visual, uma cópia da mesma foto que já tem alt
   no primeiro plano).
*/
.carousel-slide img {
    /* As duas camadas (bg e fg) ocupam o slide inteiro e se
       sobrepõem — por isso position: absolute nas duas, em
       vez de simplesmente width/height: 100% como antes (que
       só funcionava bem com uma única imagem por slide) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* CAMADA DE FUNDO: desfocada, só para preencher espaço */
.carousel-slide-bg {
    object-fit: cover;
    object-position: center;

    /*
       FILTER: BLUR(30PX) BRIGHTNESS(0.55)

       Desfoca bastante (não precisa mostrar detalhe nenhum,
       é só uma "cor ambiente") e escurece mais que a camada
       da frente, para não competir visualmente com a foto
       nítida por cima nem com o texto do overlay.
    */
    filter: blur(30px) brightness(0.55);

    /*
       TRANSFORM: SCALE(1.15)

       O blur "puxa" um pouco da borda da imagem para dentro
       (fica meio transparente/esbranquiçada na borda do
       elemento). Aumentar a imagem 15% além do necessário
       empurra essa borda borrada para fora da área visível.
    */
    transform: scale(1.15);
}

/* CAMADA DA FRENTE: a foto de verdade, inteira, sem cortes */
.carousel-slide-fg {
    /*
       OBJECT-FIT: CONTAIN

       Mostra a imagem INTEIRA dentro do espaço disponível,
       mantendo a proporção original — o oposto do "cover" (que
       corta o que não cabe). Não importa se a foto é quadrada,
       vertical ou horizontal: ela nunca fica cortada nem
       ampliada além do tamanho real de exibição.
    */
    object-fit: contain;

    /*
       OBJECT-POSITION: 67.5% CENTER

       Por padrão, "contain" centraliza a imagem no espaço
       disponível (50% 50%). Em vez disso, alinhamos o centro da
       foto ao mesmo ponto horizontal das bolinhas indicadoras
       (.carousel-indicators usa left: 67.5% — ver mais abaixo
       neste arquivo), para a imagem ficar visualmente centrada
       COM elas, e não simplesmente colada na borda direita.
    */
    object-position: 67.5% center;

    /*
       FILTER: BRIGHTNESS(0.85)

       Um escurecimento mais leve que o da camada de fundo — só
       o suficiente para manter alguma consistência com o clima
       escuro do overlay, sem esconder o assunto da foto nítida.
    */
    filter: brightness(0.85);
}

/* ============================================
   OVERLAY COM GRADIENTE
   ============================================
   
   O overlay é a camada que fica POR CIMA das imagens
   do carrossel. Ele contém o gradiente azul, o logo
   e as legendas dos slides.
   ============================================ */

.hero-overlay {
    /* Posicionamento absoluto para cobrir toda a hero */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 
       Z-INDEX: 10
       
       Controla a "profundidade" do elemento.
       Quanto maior o z-index, mais "na frente" ele fica.
       
       O carrossel tem z-index implícito de 0 (padrão).
       Com z-index: 10, o overlay fica por cima das imagens.
    */
    z-index: 10;
    
    /* 
       BACKGROUND: LINEAR-GRADIENT(...)
       
       Cria um gradiente (degradê) de cor.
       
       to right = direção da esquerda para a direita
       
       #558383 0% = cor sólida no início (esquerda)
       rgba(85, 131, 131, 0.95) 15% = quase opaco aos 15%
       rgba(85, 131, 131, 0.6) 25% = 60% opaco aos 25%
       transparent 40% = totalmente transparente aos 40%
       
       O resultado é uma faixa azul/verde-água à esquerda
       que vai ficando transparente, revelando a imagem.
    */
    background: linear-gradient(
        to right,
        #558383 0%,
        rgba(85, 131, 131, 0.95) 15%,
        rgba(85, 131, 131, 0.6) 25%,
        transparent 40%
    );
    
    /* 
       DISPLAY: FLEX
       
       Ativa o Flexbox, um sistema moderno de layout.
       Flexbox alinha elementos em linhas ou colunas.
    */
    display: flex;
    
    /* Alinha os filhos verticalmente ao centro */
    align-items: center;
    
    /* 
       JUSTIFY-CONTENT: SPACE-BETWEEN
       
       Distribui os filhos com o máximo de espaço
       possível entre eles.
       
       Logo fica na extrema esquerda, legendas na direita.
    */
    justify-content: space-between;
}

/* ============================================
   LOGO (lado esquerdo do overlay)
   ============================================ */

.logo-container {
    /* Espaçamento interno nas laterais */
    padding: 0 100px;
    
    /* Largura máxima para não ficar muito largo */
    max-width: 400px;
    
    /* 
       FLEX-SHRINK: 0
       
       Impede que este elemento encolha quando o espaço
       for apertado (em telas menores, por exemplo).
       
       Sem isso, o logo poderia ficar esmagado.
    */
    flex-shrink: 0;
}

/*
   Ícone do logo (átomo com raízes) da SEAFís

   A imagem SemTextoSemFundo.png é desenhada em PRETO sobre
   fundo transparente. Sobre o gradiente do .hero-overlay, o
   preto ficaria quase invisível, então precisamos recolori-lo.

   Chegamos a testar uma técnica de MÁSCARA CSS (mask-image)
   para pintar o ícone de uma cor exata (laranja), mas ela
   exigia trocar o <img> por uma <div> vazia — o que causou
   um bug difícil de rastrear (o elemento não aparecia nem no
   DevTools em alguns testes). Voltamos para a abordagem mais
   simples: FILTER. Não dá pra "mirar" uma cor exata como o
   laranja só com filtro, mas para branco funciona perfeito
   e sem os problemas da máscara:

     filter: brightness(0) invert(1);

   brightness(0) = escurece a imagem inteira para preto puro
   (elimina qualquer variação de tom que já existisse).
   invert(1) = inverte as cores: preto vira branco.
*/
.logo-container-image {
    /*
       Altura fixa (o pai, .logo-container, não define altura
       própria — ela nasce do conteúdo, então é esta regra que
       decide o tamanho final do ícone).
       A largura foi calculada a partir da proporção real do
       ícone (aprox. 0,73 largura/altura).
    */
    height: 300px;
    width: 219px;

    /* Preenche o espaço mantendo a proporção da imagem,
       sem distorcer (mesmo espírito do object-fit: contain,
       útil aqui porque width/height são fixos) */
    object-fit: contain;

    /*
       FILTER: BRIGHTNESS(0) INVERT(1) + DROP-SHADOW

       Os dois primeiros valores recolorem o ícone (preto →
       branco, ver explicação acima). drop-shadow é como um
       box-shadow, mas segue o CONTORNO real da imagem (não
       o retângulo do elemento) — importante aqui porque o
       ícone tem um formato irregular, não um quadrado.
       Ajuda o ícone branco não "sumir" sobre partes claras
       da foto de fundo do carrossel.
    */
    filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* ============================================
   LEGENDAS DOS SLIDES (lado direito)
   ============================================ */

.captions-container {
    /* 
       FLEX: 1
       
       "Ocupa todo o espaço restante" dentro do flex container.
       Como o logo tem flex-shrink: 0 (tamanho fixo),
       este container pega o espaço que sobrou à direita.
    */
    flex: 1;
    
    /*
       PADDING: MAIS ESPAÇO À DIREITA E EMBAIXO

       O padding-right (140px, mais que o esquerdo) empurra a
       legenda para mais longe das bolinhas indicadoras (que
       ficam perto do canto inferior direito) — sem isso, um
       título mais longo tinha espaço para crescer até quase
       encostar nelas. O padding-bottom (70px) levanta a legenda
       para ela não ficar exatamente na mesma faixa vertical dos
       indicadores.
    */
    padding: 250px 140px 70px 80px;

    /* Flexbox para centralizar o conteúdo */
    display: flex;

    /*
       ALIGN-ITEMS: FLEX-END

       Alinha os itens na parte inferior do container. (Antes
       estava escrito "bottom", que não é um valor válido de
       align-items — o navegador ignora a declaração inválida
       e usa o padrão, então a legenda não ficava de fato
       "grudada" embaixo como o comentário original pretendia.)
    */
    align-items: flex-end;

    /* Centraliza horizontalmente */
    justify-content: center;
}

/* ============================================
   CADA LEGENDA INDIVIDUAL
   ============================================ */

.slide-caption {
    /* 
       POSITION: ABSOLUTE
       
       Tira a legenda do fluxo normal e a posiciona
       em relação ao .captions-container (se ele tiver
       position: relative) ou ao .hero.
       
       Isso faz as legendas se sobreporem umas às outras,
       ocupando o mesmo espaço.
    */
    position: absolute;
    
    /* Começa invisível (será mostrada pelo JS) */
    opacity: 0;
    
    /* 
       TRANSFORM: TRANSLATEY(20PX)
       
       Move o elemento 20px para baixo de sua posição normal.
       Quando ativa, volta para translateY(0), criando um
       efeito de "subida" suave.
    */
    transform: translateY(20px);
    
    /* Animação suave para opacity e transform */
    transition: all 0.6s ease;
    
    /* Alinha o texto à esquerda */
    text-align: left;

    /*
       MAX-WIDTH: 620PX

       Aumentado de 500px — títulos mais longos (como "VII
       Semana Acadêmica de Física") precisavam de mais espaço
       horizontal para não quebrar linha. O padding extra à
       direita do .captions-container (ver acima) garante que
       essa largura maior não empurre o texto até em cima das
       bolinhas indicadoras.
    */
    max-width: 620px;
}

/* Legenda do slide atualmente ativo */
.slide-caption.active {
    opacity: 1;
    transform: translateY(0); /* Posição final (sem deslocamento) */
}

/* Título da legenda (ex: "Semana Acadêmica 2026") */
.caption-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    
    /* Sombra mais forte para legibilidade sobre imagens */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    
    /* Espaço abaixo do título */
    margin-bottom: 12px;
    
    /* Altura da linha mais compacta para títulos */
    line-height: 1.2;
}

/* Subtítulo da legenda */
.caption-subtitle {
    font-size: 1.1rem;
    color: #f0f0f0;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    line-height: 1.5;
}

/* ============================================
   SETAS DE NAVEGAÇÃO
   ============================================ */

.carousel-arrow {
    /* Posicionamento absoluto dentro da .hero */
    position: absolute;
    
    /* 
       TOP: 65%
       
       Posiciona o topo do botão a 65% da altura da hero.
       (O centro do botão será um pouco mais abaixo por
       causa do transform: translateY(-50%))
    */
    top: 65%;
    
    /* 
       TRANSFORM: TRANSLATEY(-50%)
       
       Move o botão 50% de sua própria altura para cima.
       Isso centraliza verticalmente o botão no ponto
       definido por 'top'.
    */
    transform: translateY(-50%);
    
    /* Fica acima do overlay (z-index: 10) */
    z-index: 20;
    
    /* Dimensões do botão circular */
    width: 50px;
    height: 50px;
    
    /* Remove a borda padrão do botão */
    border: none;
    
    /* Bordas arredondadas: 50% = círculo perfeito */
    border-radius: 50%;
    
    /* 
       BACKGROUND: RGBA(255, 255, 255, 0.2)
       
       Fundo branco com 20% de opacidade (quase transparente).
       O efeito "vidro fosco" vem do backdrop-filter abaixo.
    */
    background: rgba(255, 255, 255, 0.2);
    
    /* 
       BACKDROP-FILTER: BLUR(4PX)
       
       Aplica um efeito de desfoque no que está ATRÁS do elemento.
       Cria aquele efeito "vidro fosco" moderno.
       
       Nota: pode não funcionar em navegadores muito antigos.
    */
    backdrop-filter: blur(4px);
    
    /* Muda o cursor para "mãozinha" ao passar o mouse */
    cursor: pointer;
    
    /* Flexbox para centralizar o ícone SVG dentro do botão */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Transição suave para todas as propriedades */
    transition: all 0.3s ease;
    
    /* Começa invisível (aparece no hover da hero) */
    opacity: 0;
}

/* 
   Quando o mouse está sobre a .hero, as setas ficam visíveis.
   
   .hero:hover .carousel-arrow = "quando .hero está com mouse
   em cima, aplique estes estilos nos .carousel-arrow dentro dela"
*/
.hero:hover .carousel-arrow {
    opacity: 1;
}

/* ============================================
   SETA "ANTERIOR" (←)
   ============================================ */

.carousel-arrow-prev {
    /* 
       LEFT: 35%
       
       Posiciona a seta a 35% da largura da hero, contando
       da esquerda. Como o gradiente vai até ~40%, a seta
       fica na área transparente, não sobre o azul escuro.
    */
    left: 35%;
}

/* ============================================
   SETA "PRÓXIMO" (→)
   ============================================ */

.carousel-arrow-next {
    /* Posiciona a 20px da borda direita */
    right: 20px;
}

/* ============================================
   EFEITO HOVER NAS SETAS
   ============================================ */

.carousel-arrow:hover {
    /* Fundo mais opaco ao passar o mouse */
    background: rgba(255, 255, 255, 0.4);
    
    /* 
       TRANSFORM: TRANSLATEY(-50%) SCALE(1.1)
       
       Mantém o alinhamento vertical (translateY) e aumenta
       o botão para 110% do tamanho (scale(1.1)).
    */
    transform: translateY(-50%) scale(1.1);
}

/* Ícone SVG dentro do botão */
.carousel-arrow svg {
    width: 24px;
    height: 24px;
    
    /* 
       COLOR: #FFFFFF
       
       Define a cor do traço do SVG (stroke="currentColor"
       no HTML faz o SVG herdar esta cor).
    */
    color: #ffffff;
}

/* ============================================
   INDICADORES DE SLIDE (bolinhas)
   ============================================ */

.carousel-indicators {
    position: absolute;
    
    /* Posiciona a 25px acima da borda inferior */
    bottom: 25px;
    
    /* 
       LEFT: 67.5%
       
       Posiciona o container das bolinhas a 67.5% da largura,
       contando da esquerda. Isso as coloca na área transparente,
       alinhadas com as legendas.
    */
    left: 67.5%;
    
    /* 
       TRANSFORM: TRANSLATEX(-50%)
       
       Move o container 50% de sua própria largura para a esquerda.
       Isso centraliza o container no ponto definido por 'left'.
    */
    transform: translateX(-50%);
    
    z-index: 20;
    
    /* Flexbox para alinhar as bolinhas em linha */
    display: flex;
    
    /* Espaçamento entre as bolinhas */
    gap: 12px;
}

/* Cada bolinha individual */
.indicator {
    /* Dimensões da bolinha */
    width: 12px;
    height: 12px;
    
    /* Círculo perfeito */
    border-radius: 50%;
    
    /* Borda branca semi-transparente */
    border: 2px solid rgba(255, 255, 255, 0.6);
    
    /* Fundo transparente (apenas a borda é visível) */
    background: transparent;
    
    /* Cursor de clique */
    cursor: pointer;
    
    /* Transição suave para todas as propriedades */
    transition: all 0.3s ease;
}

/* Bolinha do slide atualmente ativo */
.indicator.active {
    /* Fundo branco sólido */
    background: #ffffff;
    
    /* Borda branca sólida */
    border-color: #ffffff;
    
    /* 
       TRANSFORM: SCALE(1.3)
       
       Aumenta a bolinha para 130% do tamanho.
       Isso destaca visualmente qual slide está ativo.
    */
    transform: scale(1.3);
}

/* Efeito hover nas bolinhas INATIVAS */
.indicator:not(.active):hover {
    /* 
       :NOT(.ACTIVE) = "elementos que NÃO têm a classe .active"
       
       Isso evita que a bolinha ativa mude de cor no hover.
    */
    background: rgba(255, 255, 255, 0.4);
    border-color: #ffffff;
}

/* ============================================
   MAIN (conteúdo principal da página)
   ============================================ */

main {
    /* Espaçamento interno */
    padding: 40px 60px;

    /*
       POSITION: RELATIVE

       Ponto de referência para os círculos decorativos
       (.content-circles), que são posicionados de forma
       absoluta em relação a este <main>.
    */
    position: relative;

    /*
       FLEX: 1
       
       Faz o <main> crescer e ocupar todo o espaço
       disponível entre o navbar e o footer.
       
       Isso garante que o footer fique no rodapé
       mesmo com pouco conteúdo.
    */
    flex: 1;
}

/* ============================================
   CÍRCULOS DECORATIVOS DO CONTEÚDO
   ============================================

   Quantos grupos você quiser, puramente decorativos, inseridos
   dentro do <main> de cada página — cada um configurado
   INTEIRAMENTE via atributos data-* no próprio HTML (vazios de
   conteúdo — o <svg> de dentro é gerado por JavaScript, ver
   main.js, Seção 5):

     <div class="content-circles" aria-hidden="true"
          data-top="20px" data-right="2%"
          data-min-radius="45" data-max-radius="190"
          data-text="true" data-speed="0.05"></div>

   ATRIBUTOS DISPONÍVEIS (todos opcionais — main.js usa um
   valor padrão sensato para qualquer um que faltar):

     data-top / data-right / data-bottom / data-left
        Posição do grupo, exatamente como um valor CSS
        (aceita "20px", "38%", "auto"...). Só os lados que
        você definir são aplicados — pode misturar, por
        exemplo, "data-top" + "data-right" para ancorar num
        canto, ou só "data-bottom" para ancorar pelo fim do
        <main> (útil em páginas compridas, onde uma
        porcentagem de "top" pode acabar caindo em cima de um
        título — ver comentário em main.js).

     data-min-radius / data-max-radius
        Raio mínimo/máximo (em px) dos anéis deste grupo — o
        menor e o maior anel ficam dentro dessa faixa. Grupos
        com números menores ficam visualmente menores que
        grupos com números maiores.

     data-text="true"
        Se presente com o valor "true", este grupo ganha o
        texto curvo "VIII SEAFís" num dos seus anéis internos.
        Omitido (ou qualquer outro valor) = sem texto.

     data-speed
        Velocidade E sentido de rotação ao rolar a página.
        Números maiores giram mais rápido; negativo inverte o
        sentido. "0" (ou omitido) deixa o grupo parado.

   POR QUE VIA JAVASCRIPT (E NÃO CSS PURO)?

   Cada grupo precisa de um número de anéis DIFERENTE (que
   ainda por cima depende da altura da página — páginas mais
   compridas ganham mais anéis), cada anel com sua própria
   espessura e raio meio aleatórios, e (dependendo do
   data-text) um dos anéis carrega um texto curvado ("VIII
   SEAFís", seguindo a curvatura do anel). Nada disso é
   possível de calcular ou "sortear" só com CSS — main.js lê
   os atributos data-* de cada .content-circles, monta um
   <svg> com um <circle> por anel (raio e espessura calculados
   ali) mais um <text> com <textPath> para o texto curvo (se
   for o caso), e insere esse <svg> dentro do próprio elemento.

   .content-circles é só o "grupo": position: absolute é
   definido aqui (a regra genérica), mas top/right/bottom/left
   em si vêm dos atributos data-*, aplicados pelo JavaScript
   como estilo inline em cada elemento. Cada grupo gira como
   um bloco só (o <svg> inteiro, anéis + texto, sempre juntos).

   Ficam ATRÁS de todo o texto do conteúdo (graças ao
   z-index negativo), como uma "marca d'água" temática — os
   mesmos anéis concêntricos que aparecem atrás do "FÍS" na
   logo oficial (imagens/Titulo_SF_2.png).

   aria-hidden="true" no HTML avisa leitores de tela para
   ignorar estes elementos, já que não carregam informação
   nenhuma (são só decoração visual) — o <svg> gerado também
   sai com aria-hidden, por segurança.
   ============================================ */

.content-circles {
    /* Tira o elemento do fluxo normal — a posição exata de
       cada instância vem dos atributos data-top/right/bottom/
       left no HTML, aplicados via JavaScript (main.js). Como
       esta regra também tem position != static, ela vira o
       "ponto de referência" do <svg> gerado dentro dela. SEM
       width/height fixos aqui: o tamanho do quadro varia a
       cada carregamento (depende de quantos anéis main.js
       decidir criar), então quem manda no tamanho é o próprio
       <svg>, não este container. */
    position: absolute;

    /* 30% de opacidade — mantém os anéis como um detalhe bem
       sutil, sem competir com o texto */
    opacity: 0.3;

    /* Fica atrás de todo o conteúdo do <main> (que tem
       position: relative, então este z-index negativo é
       relativo a ele, não à página inteira) */
    z-index: -1;

    /* Puramente decorativo: não deve capturar cliques nem
       atrapalhar seleção de texto */
    pointer-events: none;

    /*
       TRANSITION suave caso o navegador precise reajustar
       o transform (o giro em si é feito via JavaScript, em
       main.js, a cada evento de scroll). Aplicado aqui no
       grupo inteiro: todos os anéis e o texto giram sempre
       JUNTOS, como uma peça rígida só.
    */
    transition: transform 0.05s linear;
}

/* O <svg> gerado por main.js. display: block remove aquele
   espaço fantasma que elementos "inline" (o padrão de <svg>)
   ganham por baixo, mesmo problema que <img> tem e que já
   resolvemos assim antes no .nav-logo-image */
.content-circles svg {
    display: block;
}

/*
   4º GRUPO DE CÍRCULOS: ESCONDIDO ENQUANTO OS CARDS ESTÃO FECHADOS

   Só se aplica ao grupo marcado com data-hide-if-collapsed no HTML
   (o de baixo, em programacao.html) — com os 3 cards de
   Palestras/Mesas Redondas/Minicursos fechados (o estado inicial
   da página), ela fica bem mais curta, e não sobra altura
   suficiente pra esse grupo sem ele ficar colado no grupo anterior.

   Escondido via opacity (não display: none) para poder fazer um
   fade suave em vez de sumir/aparecer de repente — display não dá
   para animar com transition. pointer-events: none já vem da regra
   base .content-circles, então não precisa de visibility aqui: o
   grupo nunca captura clique, escondido ou não.

   O JavaScript (main.js, Seção 9) adiciona a classe
   .content-circles--visible assim que qualquer card é aberto (a
   página cresce o bastante de novo) e remove quando todos voltam a
   fechar.
*/
.content-circles[data-hide-if-collapsed] {
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Volta à MESMA opacidade sutil (0.3) da regra base .content-circles
   — não para opacity:1, que destacaria demais este grupo em
   relação aos outros 3, sempre visíveis */
.content-circles[data-hide-if-collapsed].content-circles--visible {
    opacity: 0.3;
}

/* ============================================
   TIPOGRAFIA DO CONTEÚDO PRINCIPAL
   ============================================
   
   Estilos para textos dentro do <main>.
   Definem cores, fontes, pesos e alinhamentos
   para criar hierarquia visual e legibilidade.
   ============================================ */

/* ============================================
   TÍTULOS PRINCIPAIS (H1)
   ============================================ */

main h1 {
    /*
       SCROLL-MARGIN-TOP

       Relevante quando um h1 é o ALVO de um link âncora (ex:
       uma célula da planilha de horários linkando para o
       título da atração revelada — ver .schedule-cell--clickable,
       mais abaixo). Sem isso, o navegador rolaria a página até
       o h1 encostar EXATAMENTE no topo da tela — mas aí o
       navbar fixo (position: fixed, 70px de altura) ficaria
       por cima dele, escondendo o título. scroll-margin-top
       cria uma folga antes do alvo, mesmo princípio já usado em
       #planilha (ver a regra dela, na seção de Programação).
    */
    scroll-margin-top: var(--navbar-safe-area);

    /*
       COLOR: #3D2E22

       Neutro escuro (marrom quente e saturado) da identidade
       visual da SEAFís — a mesma cor do contorno do logo.
       Usado nos títulos principais para manter
       consistência com o navbar e o gradiente.
    */
    color: #eeb97c; /* Destaca em neutro escuro ao invés de preto */
    -webkit-text-stroke: 1.5px #564d46; /* Thickness and color of the outline */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);

    /*
       FONT-FAMILY
       
       Herda a fonte do body, mas podemos reforçar
       ou mudar se quisermos destaque tipográfico.
       Por enquanto, mantemos a mesma família.
    */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /*
       FONT-WEIGHT: 700
       
       Negrito forte para títulos principais.
       Cria contraste visual com o subtítulo e o corpo.
    */
    font-weight: 700;
    
    /*
       FONT-SIZE: 2.5REM
       
       Tamanho grande para destacar como título principal.
       2.5rem = 40px (se o font-size base for 16px).
    */
    font-size: 2rem;
    
    /*
       TEXT-ALIGN: LEFT
       
       Alinhado à esquerda, conforme solicitado.
    */
    text-align: left;
    
    /*
       PADDING-RIGHT: 30%
       
       "Leve espaçamento para a direita":
       adiciona 30% de padding vazio à direita,
       fazendo o texto ocupar apenas 70% da largura.
       
       Isso cria uma linha mais curta, mais confortável
       de ler e visualmente mais elegante.
    */
    padding-right: 40%;
    
    /*
       MARGIN-BOTTOM: 1.5REM
       
       Espaço abaixo do título antes do próximo elemento.
       Cria separação visual na hierarquia.
    */
    margin-bottom: 1.5rem;
    
    /*
       LINE-HEIGHT: 1.2
       
       Altura de linha compacta para títulos.
       Títulos não precisam de tanto espaçamento
       entre linhas quanto parágrafos.
    */
    line-height: 1.2;
}

/* ============================================
   SUBTÍTULOS (H2)
   ============================================ */

main h2 {
    /*
       COLOR: #B3651F
       
       Laranja escurecido (variante legível do DESTAQUE
       #EFBA7B da SEAFís — veja a explicação da variável
       --color-highlight-text no início do arquivo).
       Diferencia visualmente dos títulos principais
       criando hierarquia de cores, e agora "pisca" mais
       aos olhos do que o verde-água usado antes.
    */
    color: #3D2E22;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
    
    /* Mesma família de fonte */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /*
       FONT-WEIGHT: 600
       
       Semi-negrito: menos pesado que o h1,
       mas ainda com destaque suficiente.
       
       600 fica entre normal (400) e negrito (700).
    */
    font-weight: 600;
    
    /*
       FONT-SIZE: 1.8REM
       
       ~29px. Menor que o h1, mas ainda proeminente.
       Razão de aproximadamente 1.4x entre h1 e h2.
    */
    font-size: 1.3rem;
    
    /* Alinhado à esquerda */
    text-align: left;
    
    /*
       PADDING-RIGHT: 35%
       
       Espaçamento para a direita, ligeiramente
       menor que o h1 para manter hierarquia visual.
    */
    padding-right: 35%;
    
    /*
       MARGIN-TOP: 2.5REM
       
       Espaço acima do subtítulo para separar
       de seções anteriores.
    */
    margin-top: 2.5rem;
    
    /* Espaço abaixo do subtítulo */
    margin-bottom: 1rem;
    
    /* Altura de linha compacta */
    line-height: 1.3;
}

/* ============================================
   PARÁGRAFOS (P)
   ============================================ */

main p {
    /*
       COLOR: #333333
       
       Cinza escuro quase preto.
       Mais suave que #000000 puro, melhor para leitura
       prolongada (menos contraste agressivo).
    */
    color: #333;
    
    /* Mesma família de fonte */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /*
       FONT-WEIGHT: 400
       
       Peso normal (regular).
       Parágrafos longos em negrito cansam a leitura.
    */
    font-weight: 400;
    
    /*
       FONT-SIZE: 1REM
       
       Tamanho base: 16px na maioria dos navegadores.
       Padrão confortável para leitura em tela.
    */
    font-size: 1rem;
    
    /*
       TEXT-ALIGN: JUSTIFY
       
       Alinha o texto dos dois lados (esquerda E direita).
       Cria bordas retas em ambos os lados do parágrafo,
       similar a livros e jornais.
       
       Nota: em telas muito estreitas, justify pode criar
       espaçamentos estranhos entre palavras. Para mobile,
       podemos mudar para left mais tarde.
    */
    text-align: justify;
    
    /*
       MARGIN-BOTTOM: 1.2REM
       
       Espaço entre parágrafos.
       Cria "respiro" visual sem precisar de <br>.
    */
    margin-bottom: 1.2rem;
    
    /*
       LINE-HEIGHT: 1.7
       
       Altura de linha generosa para conforto de leitura.
       Recomendação de acessibilidade: mínimo 1.5.
       
       1.7 deixa o texto "arejado" e fácil de acompanhar.
    */
    line-height: 1.7;
}

/* ============================================
   OUTROS ELEMENTOS DE TEXTO
   ============================================ */

/*
   NEGRITO DENTRO DE PARÁGRAFOS (<STRONG> E <B>)
   
   Mantém a cor do parágrafo, apenas aumenta o peso.
*/
main p strong,
main p b {
    font-weight: 700;
    color: #B3651F;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

/*
   ITÁLICO DENTRO DE PARÁGRAFOS (<EM> E <I>)
   
   Adiciona ênfase sutil mantendo legibilidade.
*/
main p em,
main p i {
    font-style: italic;
    color: #555; /* Cinza ligeiramente mais claro */
}

/*
   LINKS DENTRO DO CONTEÚDO
*/
main a {
    /*
       COLOR: #B3651F
       
       Laranja escurecido (DESTAQUE legível — mesma cor usada
       no h2). Links precisam ser claramente identificáveis
       como clicáveis, então além da cor usamos um sublinhado
       sutil (veja text-decoration abaixo).
    */
    color: #B3651F;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    
    /* Sublinhado sutil: ajuda a diferenciar o link de texto
       em negrito comum, que também poderia "parecer" clicável
       se dependesse só da cor */
    text-decoration: none;
    text-decoration-color: rgba(179, 101, 31, 0.4);
    text-underline-offset: 3px;
    
    /* Transição suave para hover */
    transition: all 0.3s ease;
}

main a:hover {
    /*
       Troca para o verde-água escuro (FUNDO) no hover.
       A troca entre uma cor "quente" (laranja) e uma "fria"
       (verde-água) deixa a interação bem perceptível.
    */
    color: #558383;
    text-decoration-color: #558383;
}

/*
   LISTAS (UL E OL) DENTRO DO MAIN
*/
main ul,
main ol {
    /*
       PADDING-LEFT: 2REM
       
       Espaço para os bullets/números não ficarem
       colados na borda.
    */
    padding-left: 2rem;
    
    /* Espaço abaixo da lista */
    margin-bottom: 1.2rem;
}

main li {
    /* Espaço entre itens da lista */
    margin-bottom: 0.5rem;
    
    /* Mesma altura de linha dos parágrafos */
    line-height: 1.7;
    
    /* Cor igual aos parágrafos */
    color: #333;
}

/*
   CITAÇÕES (<BLOCKQUOTE>)
   
   Para depoimentos ou citações importantes.
*/
main blockquote.left {
    /*
       BORDER-LEFT
       
       Linha vertical colorida à esquerda.
    */
    /* Laranja de destaque (cor cheia, decorativa — não é texto) */
    border-left: 4px solid #EFBA7B;
    
    /* Espaçamento interno */
    padding: 1rem 1.5rem;
    
    /* Fundo cinza muito claro */
    background: #f8f9fa;
    
    /* Margens para destacar do texto normal */
    margin: 2rem 0;
    
    /* Fonte em itálico para diferenciar */
    font-style: italic;
    
    /* Cor ligeiramente diferente */
    color: #555;
}

main blockquote.right {
    /*
       BORDER-LEFT
       
       Linha vertical colorida à esquerda.
    */
    /* Laranja de destaque (cor cheia, decorativa — não é texto) */
    border-right: 4px solid #EFBA7B;
    
    /* Espaçamento interno */
    padding: 1rem 1.5rem;
    
    /* Fundo cinza muito claro */
    background: #f8f9fa;
    
    /* Margens para destacar do texto normal */
    margin: 2rem 0;
    
    /* Fonte em itálico para diferenciar */
    font-style: italic;
    
    /* Cor ligeiramente diferente */
    color: #555;
}


/*
   SEPARADORES (<HR>)
   
   Linhas horizontais entre seções.
*/
main hr {
    /* Remove bordas padrão */
    border: none;
    
    /* Altura da linha */
    height: 2px;
    
    /* Gradiente sutil como separador — laranja de destaque
       (cor cheia; funciona bem aqui porque é decorativo, não
       é texto que precisa de contraste para leitura) */
    background: linear-gradient(
        to right,
        transparent,
        #EFBA7B,
        transparent
    );
    
    /* Margens acima e abaixo */
    margin: 3rem 0;
}

/*
   IMAGENS DENTRO DO MAIN ENVELOPADAS POR TEXTO (WRAP)

   Estiliza imagens que aparecem no conteúdo principal.
*/

/*
   .CONTAINER — "CLEARFIX"

   .container envolve uma imagem flutuante (wrapped-image-*
   ou speaker-photo-*) junto com o texto que a rodeia — tanto
   na seção "História" quanto dentro dos blockquotes de
   palestrantes.

   O PROBLEMA (por que o blockquote não "abraçava" a foto
   inteira): elementos com float NÃO contam para a altura do
   elemento pai, por padrão. Se o texto ao lado da foto for
   mais curto que ela, o .container (e qualquer coisa que o
   envolva, como o blockquote) termina onde o TEXTO termina,
   e a foto simplesmente "vaza" para fora, por baixo.

   A SOLUÇÃO: display: flow-root cria um novo "contexto de
   formatação de bloco" para o .container — dentro desse
   contexto, elementos flutuantes VOLTAM a contar para a
   altura do pai. É a versão moderna do truque antigo
   "clearfix" (que usava overflow: hidden ou um ::after com
   clear: both); flow-root faz a mesma coisa sem o efeito
   colateral de esconder conteúdo que overflow: hidden teria.
*/
.container {
    display: flow-root;
}

.wrapped-image-left {
  float: left;        /* Can be 'left' or 'right' */
  margin: 0 20px 10px 0; /* Adds space around the image so text doesn't touch it (top right bottom left) */
  width: 300px;       /* Set a width so the text has room to wrap */
}

.wrapped-image-right {
  float: right;        /* Can be 'left' or 'right' */
  margin: 0 0 10px 20px; /* Adds space around the image so text doesn't touch it (top right bottom left) */
  width: 300px;       /* Set a width so the text has room to wrap */
}

/*
   FOTOS DE PALESTRANTES (programacao.html) — 200PX

   Mesma técnica das .wrapped-image-left/right acima (float +
   margem + largura fixa), só que em 200px em vez de 300px.
   São uma classe SEPARADA, e não um ajuste direto nas duas de
   cima, exatamente para poder ter um tamanho diferente sem
   afetar as imagens da seção "História" (página inicial), que
   usam wrapped-image-left/right e devem continuar em 300px.

   MOLDURA — EXPERIMENTO (2026-07-21)

   As fotos enviadas têm proporções bem diferentes entre si (uma
   quadrada, outra bem mais alta que larga, etc.) — sem nada
   além do width acima, cada uma aparecia com uma altura
   diferente. aspect-ratio + object-fit: cover resolvem isso:
   toda foto passa a ocupar a MESMA caixa (200×250px, proporção
   4:5 — a mesma de uma foto 3x4/retrato de documento), com o
   excesso recortado para fora dos lados.

   Por que 4:5 (retrato) e não um quadrado (1:1)? Olhando as
   fotos reais usadas: o rosto costuma ficar centralizado na
   horizontal, mas no terço SUPERIOR da foto (comum em selfie/
   foto de perfil), não bem no centro vertical. Uma moldura mais
   alta que larga precisa recortar menos na vertical pra caber a
   mesma largura de rosto, sobrando mais margem embaixo (ombros/
   peito) pra "absorver" o corte em vez do rosto.

   object-position: center 25% (em vez do padrão "center 50%")
   desloca o ENQUADRAMENTO pra cima, pelo mesmo motivo: com o
   rosto tipicamente no terço superior, um recorte customizado assim
   erra menos do que um recorte bem no meio da imagem.

   SEM nenhum detalhe decorativo aqui de propósito (nada de
   borda/sombra) — só a moldura em si, como pedido. Se não
   agradar, é só remover aspect-ratio/object-fit/object-position
   das duas classes abaixo pra voltar ao comportamento antigo
   (cada foto na sua altura natural).
*/
.speaker-photo-left {
  float: left;
  margin: 0 20px 10px 0;
  width: 200px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
}

.speaker-photo-right {
  float: right;
  margin: 0 0 10px 20px;
  width: 200px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
}

/* ============================================
   FOOTER (RODAPÉ)
   ============================================
   
   Fundo preto com duas seções: contato (esquerda)
   e apoio (direita).
   ============================================ */

.site-footer {
    /*
       BACKGROUND: #B3DEFA
       
       Fundo azul claro para contraste com os logos do DPF e da UFV.
       Pode usar #111111 para um preto "mais suave"
       se preferir.
    */
    background: #B3DEFA;
    
    /* Cor do texto padrão no footer */
    color: #323232;
    
    /* Espaçamento interno superior/inferior */
    padding: 50px 0 0 0;
    
    /* 
       MARGIN-TOP: AUTO
       
       Empurra o footer para o final da página,
       garantindo que ele fique no rodapé mesmo
       com pouco conteúdo no <main>.
    */
    margin-top: auto;
}

/* ============================================
   CONTAINER DO FOOTER
   ============================================ */

.footer-container {
    /*
       MAX-WIDTH: 1400PX
       
       Mesma largura máxima do navbar para alinhamento
       visual consistente.
    */
    max-width: 1400px;
    
    /* Centraliza horizontalmente */
    margin: 0 auto;
    
    /* Espaçamento interno nas laterais */
    padding: 0 40px;
    
    /*
       DISPLAY: GRID + GRID-TEMPLATE-COLUMNS: REPEAT(3, 1FR)

       As três seções (Contato, Realização e Apoio) viram TRÊS
       COLUNAS DE LARGURA IGUAL, sempre — diferente de flexbox
       (usado antes), onde cada seção só ocupava o espaço do
       seu próprio conteúdo, deixando tudo "encostado" à
       esquerda em vez de dividir o rodapé igualmente.
    */
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    /* Alinha os itens pelo topo */
    align-items: start;

    /*
       GAP: 40PX

       Espaço entre as colunas.
    */
    gap: 40px;
}

/* ============================================
   SEÇÕES DO FOOTER
   ============================================ */

.footer-section {
    /*
       TEXT-ALIGN: CENTER

       Centraliza o título (h3) e qualquer texto solto da
       seção. Listas e grades de logo (que são flex/grid, não
       texto) precisam da própria centralização — ver
       .contact-list e .support-logos mais abaixo.
    */
    text-align: center;
}

/* ============================================
   TÍTULO DAS SEÇÕES
   ============================================ */

.footer-title {
    /*
       FONT-SIZE: 1.2REM
       
       Tamanho ligeiramente maior que o texto normal.
    */
    font-size: 1.2rem;
    
    /* Peso da fonte: negrito */
    font-weight: 700;
    
    /* Cor branca */
    color: #343434;
    
    /* Espaço abaixo do título */
    margin-bottom: 20px;
    
    /* Espaçamento entre letras sutil */
    letter-spacing: 1px;
}

/* ============================================
   LISTA DE CONTATOS
   ============================================ */

.contact-list {
    /* Remove bullets da lista */
    list-style: none;

    /* Remove padding/margin padrão */
    padding: 0;
    margin: 0;

    /* Espaçamento entre os itens */
    display: flex;
    flex-direction: column;
    gap: 15px;

    /*
       ALIGN-ITEMS: CENTER

       Cada .contact-item é uma linha (ícone + texto). Por
       padrão, uma coluna flex estica seus itens para ocupar
       toda a largura disponível (align-items: stretch), o que
       fazia cada linha ficar "grudada" na borda esquerda desta
       coluna, mesmo com o pai centralizado. align-items: center
       faz cada linha encolher para o tamanho do seu próprio
       conteúdo e então centralizar essa linha inteira.
    */
    align-items: center;
}

/* ============================================
   CADA ITEM DE CONTATO
   ============================================ */

.contact-item {
    /*
       DISPLAY: FLEX
       
       Alinha ícone e texto horizontalmente,
       centralizados verticalmente.
    */
    display: flex;
    align-items: center;
    
    /* Espaço entre ícone e texto */
    gap: 12px;
}

/* ============================================
   ÍCONE DE CONTATO
   ============================================ */

.contact-icon {
    /* Tamanho do ícone SVG */
    width: 20px;
    height: 20px;
    
    /* Cor branca com 80% opacidade (mais suave) */
    color: rgba(52, 52, 52, 0.8);
    
    /* 
       FLEX-SHRINK: 0
       
       Impede que o ícone encolha se o texto for longo.
    */
    flex-shrink: 0;
}

/* ============================================
   LINKS DE CONTATO
   ============================================ */

.contact-link {
    /* Remove sublinhado */
    text-decoration: none;
    
    /* Cor branca com 80% opacidade */
    color: rgba(52, 52, 52, 0.8);
    
    /* Tamanho da fonte */
    font-size: 0.95rem;
    
    /* Transição suave para hover */
    transition: all 0.3s ease;
}

/* Hover nos links de contato */
.contact-link:hover {
    /* Cor branca total no hover */
    color: #000000;
    
    /* Sutil brilho */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* ============================================
   CONTAINER DOS LOGOS (REALIZAÇÃO)
   ============================================ */

.support-logos {
    /* Flexbox para alinhar logos lado a lado */
    display: flex;

    /* Centraliza os logos dentro da coluna (antes ficavam
       encostados à esquerda) */
    justify-content: center;

    /* Espaço entre os logos */
    gap: 30px;

    /* Alinha verticalmente ao centro */
    align-items: flex-start;

    /* Permite quebrar linha se não houver espaço suficiente
       (relevante sobretudo para --grid, logo abaixo) */
    flex-wrap: wrap;
}

/*
   CONTAINER DOS LOGOS (APOIO) — VÁRIAS FILEIRAS

   A seção de Apoio tem bem mais logos que a de Realização
   (7 contra 2), então precisa quebrar em mais de uma fileira.

   IMPORTANTE: aqui usamos FLEXBOX com flex-wrap, e não CSS
   Grid. Testamos Grid antes, mas Grid não resolve o pedido de
   "centralizar uma fileira incompleta em relação à de cima" —
   numa grade, cada item fica preso à SUA coluna (a 2ª fileira,
   com só 3 itens, ocupa as colunas 1-3, ficando à esquerda em
   vez de centralizada). Flexbox com wrap não tem esse
   problema: cada fileira "nova" que se forma ao quebrar linha
   é centralizada de forma INDEPENDENTE via justify-content,
   então uma fileira com menos itens naturalmente centraliza
   sozinha, sem ficar alinhada às colunas da fileira de cima.
*/
.support-logos--grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    /* A 2ª fileira mistura tamanhos (Thorlabs/Quantum Design
       maiores, Nova ND no tamanho padrão) — center alinha
       todos pelo meio da fileira, em vez de todos "grudados"
       no topo (que deixaria a Nova ND com um vão embaixo) */
    align-items: center;

    gap: 20px 24px;

    /*
       MAX-WIDTH: 575PX

       Esse valor não é arbitrário — precisa satisfazer DUAS
       contas ao mesmo tempo (recalculado em 2026-07-21, ao
       adicionar o FUNARBE como 8º logo):

       1) A 1ª fileira (UFV/CCB/CCE/PEC, 90px cada) soma
          4×90 + 3×24 = 432px. Pra ela SEMPRE quebrar depois do
          4º item, o max-width tem que ser MENOR que 432 + 24
          (gap) + 130 (Thorlabs, o 5º item) = 586px.
       2) A 2ª fileira (Thorlabs 130 + Quantum Design 146 + Nova
          ND 90 + FUNARBE 130, todas maiores que o padrão) soma
          130+146+90+130 + 3×24 (gaps) = 568px. Pra ela caber
          INTEIRA numa fileira só (sem "sobrar" o último item pra
          uma 3ª fileira), o max-width precisa ser MAIOR OU IGUAL
          a 568px.

       575px fica bem no meio dessas duas condições (568 ≤ 575 <
       586) — garante 4 logos na 1ª fileira e os 4 restantes
       inteiros na 2ª, sem uma 3ª fileira com um logo sozinho.

       Se um dia adicionar/remover/redimensionar algum logo desta
       lista, as DUAS contas acima precisam ser refeitas.
    */
    max-width: 575px;

    /*
       MARGIN: 0 AUTO

       Com max-width, esta caixa não ocupa mais 100% da coluna
       do rodapé — precisa se autocentralizar dentro dela para
       o título ("Apoio:") e os logos ficarem alinhados um
       embaixo do outro.
    */
    margin: 0 auto;
}

/* ============================================
   LINKS DOS LOGOS
   ============================================ */

.support-link {
    /*
       DISPLAY: BLOCK
       
       Garante que o link ocupe o espaço do logo
       inteiro, não apenas o texto.
    */
    display: block;
    
    /* Transição suave para hover */
    transition: all 0.3s ease;
}

/* Hover nos links dos logos */
.support-link:hover {
    /*
       TRANSFORM: SCALE(1.05)
       
       Aumenta levemente o logo no hover,
       similar ao efeito do navbar.
    */
    transform: scale(1.05);
}

/* ============================================
   LOGOS DE REALIZAÇÃO E APOIO
   ============================================ */

.support-logo {
    /*
       WIDTH / HEIGHT

       Dimensões do "quadro" de cada logo. Como agora temos
       vários logos de proporções bem diferentes entre si
       (retrato, paisagem, quadrado...), largura/altura fixas
       sozinhas distorceriam a maioria deles.
    */
    width: 90px;
    height: 70px;

    /*
       OBJECT-FIT: CONTAIN

       Faz a imagem inteira caber dentro do quadro acima,
       MANTENDO sua proporção original (sem esticar/espremer)
       — o oposto do "cover" já usado no carrossel da hero, que
       propositalmente CORTA a imagem para preencher o espaço.
       Aqui queremos o logo inteiro sempre visível.
    */
    object-fit: contain;

    /* Transição suave */
    transition: all 0.3s ease;
}

/*
   LOGOS MAIORES (Thorlabs, Quantum Design)

   Essas duas imagens têm mais espaço vazio ao redor do
   desenho/texto principal do que as outras, então no mesmo
   tamanho de quadro (90x70) ficavam menores/menos legíveis na
   prática. Usada JUNTO com .support-logo no HTML (as duas
   classes no mesmo <img>).
*/
.support-logo--large {
    width: 130px;
    height: 100px;
}

/*
   AINDA MAIOR (Quantum Design)

   Mesma ideia de .support-logo--large acima — Quantum Design
   ficou pedindo um pouco mais de destaque mesmo já usando
   --large. MESMA proporção (1,3:1), só ~12% maior. Também usada
   JUNTO com .support-logo no HTML (é ela quem dá object-fit:
   contain, evitando distorção).
*/
.support-logo--xl {
    width: 146px;
    height: 112px;
}


/* ============================================
   LINHA INFERIOR DO FOOTER
   ============================================ */

.footer-bottom {
    /*
       BORDER-TOP
       
       Linha sutil separando o conteúdo do copyright.
    */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    
    /* Espaçamento interno */
    padding: 20px 40px;
    
    /* Margem superior para separar das seções */
    margin-top: 40px;
    
    /* Centraliza o texto */
    text-align: center;
}

/* ============================================
   TEXTO DE COPYRIGHT
   ============================================ */

.copyright {
    /* Tamanho pequeno para texto secundário */
    font-size: 0.85rem;
    
    /* Cor cinza claro (menos destaque) */
    color: rgba(52, 52, 52, 0.7);
    
    /* Remove margin padrão do <p> */
    margin: 0;
}

/* ================================================================
   PÁGINA: PROGRAMAÇÃO (programacao.html)
   ================================================================

   Tudo abaixo é usado exclusivamente em programacao.html: a
   "planilha" de horários (duas tabelas, manhã e tarde/noite) e
   a seção de palestrantes/mesas já revelados.

   ESTADOS DE CADA CÉLULA DA PLANILHA

   Cada célula de evento pode estar em um de dois "estados"
   visuais:

   1) .schedule-cell--pending ("ainda será revelado"): Palestra,
      Mesa Redonda e Minicurso, por enquanto — fundo no degradê
      claro (--gradient-soft, o mesmo do navbar), texto escuro
      por cima.

   2) .schedule-cell--revealed ("já certo"): tanto os tipos de
      evento que não mudam mais (Coffee Break, Apresentação de
      Trabalho) quanto a logística fixa (Credenciamento,
      Cerimônia de Abertura, Encerramento) — fundo branco, texto
      no degradê escuro (--gradient-readable).

   (A planilha atual não tem mais horários vazios — todo slot tem
   algum evento —, então a classe .schedule-cell--empty que
   existia para esse caso foi removida. Se algum dia um horário
   ficar sem evento em algum dia específico, é só recriar essa
   classe: background: transparent + border tracejada.)
   ================================================================ */

/*
   ÂNCORA "VOLTAR PARA A PLANILHA"

   Este id fica no início da seção de programação (antes da
   primeira tabela). O botão flutuante no fim da página (ver
   .back-to-top-button, mais abaixo) rola suavemente até aqui
   quando clicado — veja main.js, Seção 10.
*/
#planilha {
    /*
       SCROLL-MARGIN-TOP

       Sem isso, ao pular para #planilha (por exemplo, um link
       com #planilha na URL), o navbar fixo (70px) ficaria SOBRE
       o início da seção, cobrindo o título. scroll-margin-top
       cria uma "folga" antes do alvo do scroll, exatamente como
       o --navbar-safe-area já faz para as páginas internas.
    */
    scroll-margin-top: var(--navbar-safe-area);
}

/*
   FAIXA DO INTERVALO DE ALMOÇO

   Não é uma linha dentro de nenhuma das tabelas — é o MESMO
   horário para os 3 dias, então faz mais sentido como uma
   faixa única entre a tabela da manhã e a da tarde/noite,
   marcando visualmente a pausa, em vez de repetir "ALMOÇO"
   em 3 colunas.

   Visualmente, é DE PROPÓSITO igual à .schedule-time (a
   coluna de horários): mesma cor de fundo, mesma borda — a
   ideia é que o Almoço pareça "mais um horário" da planilha,
   não um elemento novo com identidade própria.
*/
.schedule-break {
    text-align: center;
    color: #3D2E22;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;

    padding: 12px 20px;
    margin: 20px 0;
    border-radius: 10px;

    /* Mesmo verde-água claro de .schedule-time — ver comentário
       lá para o porquê de não ser uma variável do :root */
    background: #CBE6E2;

    /* Mesma técnica de "borda no degradê" usada nas células da
       planilha (ver .schedule-cell) — border-image aplica um
       gradiente real à borda, ao contrário de várias camadas de
       box-shadow (que criam discos cheios, não bordas/anéis). */
    border: 3px solid transparent;
    border-image: var(--gradient-soft) 1;
}

/*
   CONTAINER COM ROLAGEM HORIZONTAL

   Ainda que o foco do site seja desktop, uma tabela de 4
   colunas pode não caber em janelas mais estreitas. Este
   wrapper permite rolar SÓ a tabela horizontalmente nesses
   casos, em vez de quebrar o layout da página inteira.
*/
.schedule-table-wrapper {
    overflow-x: auto;
    margin-bottom: 20px;
}

/*
   LEGENDA DE CORES

   Explica rapidamente o que cada estado de célula significa,
   antes do usuário encontrar a primeira tabela.
*/
.schedule-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 10px 0 28px;
    font-size: 0.85rem;
    color: #3D2E22;
}

.schedule-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.schedule-legend-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid transparent;
    border-image: var(--gradient-soft) 1;
}

.schedule-legend-swatch--pending {
    background: var(--gradient-soft);
}

.schedule-legend-swatch--revealed {
    background: #ffffff;
}

/*
   A TABELA EM SI

   Usamos <table> de verdade (não uma grade de <div>s) porque
   isso É uma tabela de dados (horário × dia), e <table> dá de
   graça a navegação e leitura correta por leitores de tela
   (célula de cabeçalho associada à célula de dados). O visual
   de "cards coloridos" vem só do CSS nas células.
*/
.schedule-table {
    width: 100%;

    /*
       BORDER-COLLAPSE: SEPARATE + BORDER-SPACING

       Por padrão, tabelas "colam" as bordas das células
       vizinhas (collapse). Aqui queremos o oposto: um respiro
       entre as células, para cada uma parecer mesmo um "card"
       independente, como uma planilha de verdade.
    */
    border-collapse: separate;
    border-spacing: 8px;

    /* Centraliza o texto de todas as células por padrão */
    text-align: center;
}

/*
   LEGENDA DA TABELA ("Manhã" / "Tarde e Noite")

   <caption> é o título semanticamente correto para uma
   <table> — leitores de tela anunciam o texto ANTES de entrar
   na tabela, dizendo ao usuário o que ele está prestes a ouvir.
*/
.schedule-table caption {
    caption-side: top;
    text-align: left;
    font-size: 1.4rem;
    font-weight: 700;
    color: #3D2E22;
    margin-bottom: 14px;
}

/*
   CANTO SUPERIOR ESQUERDO ("Horário") E CABEÇALHO DE CADA DIA

   Compartilham o mesmo visual — um fundo sólido, sem degradê
   nenhum — de propósito BEM diferente das células de evento
   logo abaixo (que usam o degradê claro ou fundo branco). Isso
   faz a linha inteira de cabeçalho se destacar como uma
   "faixa" própria da planilha, em vez de parecer só mais uma
   célula de evento comum.

   Cor: --color-highlight-text, o laranja ESCURECIDO da
   paleta (o mesmo usado em h2/links no resto do site) — dá
   destaque sem repetir nem o degradê nem o azul-claro já
   usados em outras partes da planilha.
*/
.schedule-corner,
.schedule-day-header {
    background: var(--color-highlight-text);
    color: #ffffff;
    padding: 12px 8px;
    border-radius: 10px;
    font-weight: 700;
}

/* O canto ("Horário") é só um rótulo de coluna, sem data —
   menor e mais discreto que os cabeçalhos de dia */
.schedule-corner {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.85;
}

/* Nome do dia da semana (ex: "Quarta-feira") — menor e mais
   discreto que a data, só para dar contexto */
.schedule-day-weekday {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.9;
    margin-bottom: 2px;
}

/* Data (ex: "19/08/2026") — o dado principal do cabeçalho */
.schedule-day-date {
    display: block;
    font-size: 1.05rem;
}

/*
   COLUNA DE HORÁRIOS (célula <th scope="row"> de cada linha)

   Fica visualmente diferente das células de evento — é só um
   RÓTULO (o horário), não um evento em si.
*/
.schedule-time {
    /* Verde-água bem claro/dessaturado — não é uma das
       variáveis do :root (que são todas mais vivas/escuras),
       é uma versão bem clareada de --color-bg-dark (#558383)
       só para este fundo, precisando de um texto escuro por
       cima */
    background: #CBE6E2;
    color: #3D2E22;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 10px;
    border-radius: 10px;
    white-space: nowrap;

    /* Mesma borda no degradê usada nas células de evento — veja
       .schedule-cell para a explicação completa da técnica */
    border: 3px solid transparent;
    border-image: var(--gradient-soft) 1;
}

/*
   CÉLULA DE EVENTO — BASE COMPARTILHADA

   .schedule-cell--pending / --revealed / --empty (mais abaixo)
   mudam cor de fundo e de texto; esta regra aqui cuida do que
   é igual entre todas: tamanho, cantos arredondados,
   espaçamento e a borda no degradê.
*/
.schedule-cell {
    padding: 14px 10px;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.35;
    vertical-align: middle;

    /*
       BORDER-IMAGE: A "DIVISÓRIA NO DEGRADÊ"

       border-image aplica um gradiente DE VERDADE à borda de
       um elemento retangular (ao contrário de box-shadow
       empilhado, que cria discos cheios — mesmo problema que
       já tivemos com os círculos decorativos do <main>). O "1"
       no final é o "slice": divide a imagem/gradiente em fatias
       e usa uma fatia para cada lado da borda.
    */
    border: 3px solid transparent;
    border-image: var(--gradient-soft) 1;

    /* Transição suave para quando a célula virar interativa
       (ver .schedule-cell--clickable, mais abaixo) */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Categoria do evento (ex: "PALESTRA", "MESA REDONDA") */
.schedule-cell-category {
    display: block;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Linha secundária, menor — usada para um tema já definido
   (ex: "Comemoração 10 anos de CAFís") ou um sub-horário
   (ex: "19h00 – 19h30" dentro do Encerramento) */
.schedule-cell-theme {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.9;
}

/*
   ESTADO 1: "AINDA SERÁ REVELADO"
   Palestra, Mesa Redonda, Minicurso (por enquanto)

   Fundo no degradê CLARO (--gradient-soft, o mesmo do navbar)
   — por ser claro, o texto usa uma cor escura sólida por
   cima (o mesmo raciocínio já aplicado ao texto do navbar),
   em vez de branco (que teria contraste fraco nas partes
   mais claras do degradê).
*/
.schedule-cell--pending {
    background: var(--gradient-soft);
    color: #3D2E22;
}

/*
   ESTADO 2: "JÁ CERTO"
   Coffee Break, Apresentação de Trabalho e também a
   logística fixa (Credenciamento, Cerimônia de Abertura,
   Encerramento) — nada disso tem uma "revelação" pendente.

   Aqui o fundo é branco; é o TEXTO que usa o degradê ESCURO
   (--gradient-readable), via background-clip: text (o span
   .schedule-cell-label--gradient vira uma "janela" que só
   deixa aparecer a parte do gradiente por trás de onde há
   caracteres — precisa ser o degradê escuro aqui, e não o
   --gradient-soft, porque a parte clara dele quase não
   apareceria sobre o fundo branco).
*/
.schedule-cell--revealed {
    background: #ffffff;
}

.schedule-cell-label--gradient {
    background: var(--gradient-readable);

    /* -webkit-background-clip existe por compatibilidade;
       background-clip: text é o padrão atual */
    -webkit-background-clip: text;
    background-clip: text;

    /* Torna o texto em si transparente, revelando o gradiente
       "atrás" dele (que só aparece dentro do contorno das
       letras, graças ao background-clip: text acima) */
    -webkit-text-fill-color: transparent;
    color: transparent;

    font-weight: 700;
}

/*
   COMO TORNAR UMA CÉLULA DA PLANILHA CLICÁVEL

   Já em uso em várias células da planilha (ex: Pouya, 08h30–09h30
   quinta) — use como referência. Quando uma Palestra/Minicurso com
   UM palestrante identificado for confirmado, repita o padrão:

   1) Troque a <td> daquele evento para conter um <a> em vez de
      só texto solto — algo como:

        <td class="schedule-cell schedule-cell--revealed">
            <a href="#fulano-de-tal" class="schedule-cell-link schedule-cell--clickable">
                <span class="schedule-cell-category">Fulano Sobrenome</span>
                <span class="schedule-cell-theme">Tema da palestra</span>
            </a>
        </td>

      Repare que o texto MAIOR (.schedule-cell-category) passa a
      ser o NOME do palestrante — não mais a palavra "PALESTRA" —
      numa versão reduzida (primeiro nome + 1 ou 2 sobrenomes, não
      o nome completo). O texto menor (.schedule-cell-theme) fica
      só com o TEMA, sem repetir o nome. SEM
      .schedule-cell-label--gradient aqui: esse modificador é só
      para os rótulos fixos sem link (Credenciamento, Coffee Break
      etc., mais abaixo) — olhe .schedule-cell--revealed, logo
      abaixo, para o porquê.

      Exceção: uma Mesa Redonda com VÁRIOS palestrantes (sem UM
      nome específico pra liderar a célula) mantém a categoria
      "MESA REDONDA" e o tema no lugar do nome — ver a célula "10
      anos de CAFís" (11h–12h, quarta) para essa variante.

   2) Troque a classe de --pending para --revealed (a
      informação deixou de ser "a definir").

   3) Adicione id="fulano-de-tal" no <h1> da entrada correspondente
      do palestrante, lá embaixo (ver .speaker-entry) — NO H1,
      não na <div class="speaker-entry"> que o envolve. Isso
      garante que o clique role a página até o TÍTULO da
      atração (que tem scroll-margin-top, ver "main h1" — a
      folga certa para não ficar escondido atrás do navbar
      fixo), não até o topo da entrada inteira (que começaria
      no "selo" MESA REDONDA/PALESTRA, acima do título).

   Esta classe já deixa pronto o efeito de hover/foco — é só
   usar.
*/
.schedule-cell--clickable {
    cursor: pointer;
}

.schedule-cell--clickable:hover,
.schedule-cell--clickable:focus-visible {
    transform: translateY(-4px);
    text-shadow: 5px 5px 20px rgba(61, 46, 34, 0.5);
    outline: none;
}

/* Um link dentro de uma célula não deve parecer um link de
   texto comum (sem sublinhado, herdando a cor do pai) */
.schedule-cell-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ================================================================
   SEÇÃO: PALESTRANTES E MESAS REVELADOS
   ================================================================

   Cada palestrante/mesa revelado vira um ".speaker-entry": foto
   com wrapped-image-left/right (a mesma técnica já usada na
   seção "História" da página inicial, alternando lado a cada
   entrada), <h1> com o tema da palestra/mesa e <h2> com o(s)
   nome(s) do(s) palestrante(s), seguidos de uma breve bio.
   ================================================================ */

.speaker-entry {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
}

/* Última entrada não precisa de linha divisória embaixo */
.speaker-entry:last-of-type {
    border-bottom: none;
}

/* Rótulo pequeno acima do <h1>, indicando o tipo de sessão
   (ex: "MESA REDONDA", "PALESTRA") */
.speaker-kicker {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    background: var(--color-bg-dark);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 0.5rem;
}

/*
   LOCAL + VAGAS DE UM MINICURSO

   Fica entre o <h1> (tema) e o <blockquote> (resumo/currículo) de
   uma .speaker-entry de minicurso — informação prática (onde
   acontece, quantas vagas) que não faz parte do resumo em si, por
   isso ganha um destaque visual próprio em vez de virar só mais
   uma frase dentro do texto corrido.

   <ul> por semântica (é uma pequena LISTA de informações), mas
   visualmente vira duas "pílulas" lado a lado — mesmo raio de
   borda do .speaker-kicker (acima), só que com um fundo mais
   claro (o mesmo verde-água de .schedule-time, em main.css) para
   não competir com o selo "MINICURSO" logo acima.
*/
.minicurso-info {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 1.2rem;
}

.minicurso-info-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;

    color: #3D2E22;
    background: #CBE6E2;
}

/* Ícone pequeno antes do texto (local ou nº de vagas) — cor no
   laranja de destaque, o mesmo usado nos ícones de contato do
   rodapé, pra puxar um pouco de atenção sem gritar */
.minicurso-info-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--color-highlight-text);
}

/* ================================================================
   CARDS EXPANSÍVEIS (PALESTRAS / MESAS REDONDAS / MINICURSOS)
   ================================================================

   Agrupam as .speaker-entry acima em 3 blocos que abrem/fecham
   independentemente, para quem quiser ver só um tipo de sessão
   sem rolar a lista inteira. Cada card = um <button> (cabeçalho,
   sempre visível) + um <div class="program-card-content"> logo
   abaixo dele (o conteúdo, escondido por padrão).

   O JavaScript (main.js) alterna aria-expanded no botão e a
   classe "program-card-content--open" no conteúdo a cada clique
   — mesmo padrão já usado no menu hambúrguer (.nav-toggle/
   .nav-list--open, mais abaixo). Quando uma célula clicável da
   planilha aponta pra dentro de um card fechado, o mesmo
   JavaScript abre o card sozinho antes de rolar até o
   palestrante (ver .schedule-cell--clickable).
   ================================================================ */

.program-card {
    margin-bottom: 20px;
    border-radius: 10px;

    /*
       BORDA NO DEGRADÊ QUE ACOMPANHA O ARREDONDAMENTO

       border-image (a técnica usada em .schedule-cell e outros
       elementos do site) NÃO respeita border-radius — ele sempre
       desenha a borda como um retângulo reto, mesmo com cantos
       arredondados definidos. Isso não incomodava em nenhum outro
       lugar porque não havia um filho "colado" na borda ali, mas
       aqui o .program-card-toggle (o cabeçalho) encosta direto
       no topo do card, e o overflow:hidden abaixo arredonda ELE
       (não a borda), criando um vão visível entre os dois cantos.

       A técnica abaixo pinta o degradê como BACKGROUND do próprio
       .program-card (não como border-image), esticado até a borda
       via "border-box" — normalmente isso cobriria o card inteiro,
       mas o .program-card-toggle e o .program-card-content (os
       dois filhos, ambos opacos) cobrem exatamente o miolo por
       cima, sobrando visível só o anel de 3px da borda. Como esse
       background respeita border-radius de verdade (ao contrário
       de border-image), o anel acompanha certinho o arredondamento
       do topo do .program-card-toggle.
    */
    border: 3px solid transparent;
    background: var(--gradient-soft) border-box;

    /* overflow: hidden garante que o conteúdo recolhido (com
       max-height pequeno) não vaze por fora dos cantos
       arredondados do card, e que os cantos QUADRADOS do
       .program-card-toggle (abaixo) sejam recortados no formato
       arredondado do card */
    overflow: hidden;
}

.program-card-toggle {
    /* Reset de estilos padrão de <button> */
    width: 100%;
    border: none;
    font: inherit;
    cursor: pointer;
    text-align: left;

    /*
       SCROLL-MARGIN-TOP: FOLGA POR BAIXO DO NAVBAR FIXO

       Ao abrir um card, main.js rola até este cabeçalho
       (scrollIntoView) pra ele ficar no topo da tela — sem esse
       scroll-margin-top, o navbar fixo (position: fixed) cobriria
       este cabeçalho por cima. var(--navbar-safe-area) é a mesma
       folga já usada em #planilha e em "main h1", só que aqui com
       +16px extras: o pedido foi "uma pequena margem" abaixo do
       navbar, não encostado nele.
    */
    scroll-margin-top: calc(var(--navbar-safe-area) + 16px);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;

    background: var(--gradient-soft);
    color: #3D2E22;

    /*
       BACKGROUND-SIZE MAIOR QUE 100%: ESPAÇO PARA O DEGRADÊ "ANDAR"

       Em repouso, com background-position no padrão (0% 0%), só a
       primeira metade do degradê (esticado em dobro) aparece — o
       efeito de "andar" só acontece no :hover (ver a regra
       [aria-expanded="false"]:hover, abaixo), que anima
       background-position enquanto o card está fechado.
    */
    background-size: 200% 100%;
    transition: background-size 0.25s ease;
}

/*
   HOVER: DEGRADÊ "ANDANDO" — SÓ QUANDO O CARD ESTÁ FECHADO

   [aria-expanded="false"] é o próprio estado de acessibilidade que
   o JavaScript já mantém atualizado a cada clique — serve de
   gancho pra esse hover não acontecer quando o card já está
   aberto, sem precisar de nenhuma classe extra só pra isso.

   A animação desloca background-position da esquerda pra direita
   e de volta, em loop — como o degradê está "esticado" em 200% de
   largura (ver acima), isso dá a impressão de as cores circulando
   por dentro do cabeçalho, em vez de só deslizar uma vez.
*/
.program-card-toggle[aria-expanded="false"]:hover {
    animation: program-card-gradient-flow 3s ease-in-out infinite;
}

@keyframes program-card-gradient-flow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.program-card-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.program-card-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;

    /* cubic-bezier(0.4, 0, 0.2, 1) é a curva "standard" do Material
       Design — acelera suave no início e desacelera suave no fim,
       bem mais natural que "ease" para um giro de 180°. */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Girada (aponta pra cima) quando o card está aberto — o próprio
   aria-expanded do botão (que o JS já mantém atualizado para
   acessibilidade) serve de gancho para o CSS, sem precisar de
   uma classe extra só para isso */
.program-card-toggle[aria-expanded="true"] .program-card-chevron {
    transform: rotate(180deg);
}

.program-card-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: #ffffff;

    /* Mesma curva suave do chevron, acima, só que mais lenta (o
       conteúdo tem bem mais altura pra percorrer). O fade em
       opacity, junto do max-height, evita o texto "aparecer de
       repente" assim que a altura libera espaço pra ele. */
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
}

/*
   CLASSE ADICIONADA PELO JS AO ABRIR

   20000px é só um teto bem mais alto do que o conteúdo jamais
   deve precisar (mesmo com uma lista grande de palestrantes) —
   é a mesma técnica (e o mesmo motivo) do .nav-list--open, no
   menu hambúrguer: max-height não pode ser "none"/"auto" numa
   transição CSS, então usamos um valor fixo alto o bastante.
*/
.program-card-content--open {
    max-height: 20000px;
    opacity: 1;
}

.program-card-content-inner {
    padding: 20px 24px 4px;

    /* Mesma folga por baixo do navbar fixo já usada em outros
       alvos de link âncora (main h1, #planilha) — necessária aqui
       porque uma célula da planilha pode linkar direto pro id
       deste elemento (ex: #minicursos), quando o link aponta pro
       card inteiro, não pra um palestrante específico dentro dele. */
    scroll-margin-top: var(--navbar-safe-area);
}


/* ================================================================
   BOTÃO "VOLTAR AO TOPO"
   ================================================================

   Botão circular flutuante, fixo no canto inferior direito da
   tela, presente em TODAS as páginas do site. Fica invisível até
   o usuário rolar a página um pouco (ver main.js, Seção 10) — não
   faz sentido oferecer "voltar para cima" quando já se está no
   topo.
   ================================================================ */

.back-to-top-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 900;

    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;

    background: var(--gradient-readable);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(61, 46, 34, 0.35);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    /*
       ESCONDIDO POR PADRÃO

       opacity + visibility (não só opacity) para que o botão,
       quando invisível, também não capture cliques nem fique
       "no caminho" do teclado (Tab).
    */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);

    transition: opacity 0.3s ease, visibility 0.3s ease,
                transform 0.3s ease, box-shadow 0.3s ease;
}

/* Classe adicionada pelo JavaScript depois de rolar a página */
.back-to-top-button.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-button:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 8px 22px rgba(61, 46, 34, 0.45);
}

.back-to-top-button svg {
    width: 22px;
    height: 22px;
    color: #ffffff;
}

/* ================================================================
   PÁGINA: INSCRIÇÃO (inscricao.html)
   ================================================================

   Tudo abaixo é usado exclusivamente em inscricao.html: a
   "planilha" de valores de inscrição e o espaço para o link do
   formulário.
   ================================================================ */

/*
   CONTAINER COM ROLAGEM HORIZONTAL

   Mesmo motivo do .schedule-table-wrapper em programacao.html:
   uma tabela mais larga pode não caber em janelas mais estreitas.
*/
.pricing-table-wrapper {
    overflow-x: auto;
    margin-bottom: 20px;
}

/*
   A TABELA DE VALORES

   Mesma técnica de "planilha" da página de Programação: table de
   verdade + border-spacing (em vez de border normal) para cada
   célula parecer um "card" próprio, com um respiro entre elas.
*/
.pricing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px;
    text-align: center;
}

.pricing-table caption {
    caption-side: top;
    text-align: left;
    font-size: 1.4rem;
    font-weight: 700;
    color: #3D2E22;
    margin-bottom: 14px;
}

/*
   CABEÇALHO ("Categoria" / "Valor")

   Mesmo tratamento visual do cabeçalho de dia da planilha de
   horários (--color-highlight-text sólido, sem degradê) — pela
   mesma razão: destacar a linha de cabeçalho como uma "faixa"
   própria, diferente das células de dado logo abaixo.
*/
.pricing-header {
    background: var(--color-highlight-text);
    color: #ffffff;
    padding: 12px 10px;
    border-radius: 10px;
    font-weight: 700;
}

/*
   CÉLULAS DE DADO (nome da categoria)
*/
.pricing-cell {
    background: #ffffff;
    color: #3D2E22;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 1rem;
    text-align: left;
    vertical-align: middle;

    /* Mesma "borda no degradê" (border-image) usada na planilha
       de horários — ver .schedule-cell, em main.css, para a
       explicação completa de por que border-image e não
       box-shadow */
    border: 3px solid transparent;
    border-image: var(--gradient-soft) 1;
}

/* Nota pequena dentro da célula "Inscrição Social", explicando
   quem se qualifica — mais discreta que o nome da categoria */
.pricing-cell-note {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    font-weight: 400;
    color: #555;
}

/*
   CÉLULA DE VALOR (ex: "R$ 40")

   O valor em si é a informação que mais importa nesta tabela —
   destacamos com texto no degradê (mesma técnica de
   .schedule-cell-label--gradient, na planilha de horários):
   background-clip: text usa o degradê como "tinta" só dentro do
   contorno das letras, deixando o resto do texto transparente.
*/
.pricing-cell--price {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;

    background: var(--gradient-readable);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ================================================================
   CHAMADA PARA O FORMULÁRIO DE INSCRIÇÃO
   ================================================================ */

.inscricao-cta {
    text-align: center;
    padding: 20px 0 40px;
}

.inscricao-cta p {
    /* Sobrescreve o text-align: justify padrão dos parágrafos do
       <main> — aqui é só uma frase curta e centralizada, não um
       texto corrido */
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/*
   BOTÃO DE INSCRIÇÃO

   Um link estilizado como botão — mesmo princípio de "elevação
   no hover" já usado em .back-to-top-button e
   .schedule-cell--clickable (translateY + sombra mais forte).
*/
.inscricao-cta-button {
    display: inline-block;
    background: var(--color-highlight-text);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    padding: 16px 40px;
    border-radius: 30px;
    box-shadow: 0 4px 14px rgba(61, 46, 34, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inscricao-cta-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(61, 46, 34, 0.4);
}

/* ================================================================
   PÁGINA: COMISSÃO ORGANIZADORA (comissao.html)
   ================================================================

   Grade de "cards" com foto, nome e subcomissão de cada membro —
   layout simples de propósito (a lista de nomes ainda vai ser
   preenchida aos poucos), pensado pra crescer bem com qualquer
   quantidade de pessoas: a grade quebra linha sozinha, sem
   depender de um número fixo de membros.
   ================================================================ */

.committee-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin: 2rem 0 3rem;
}

/*
   <hr> DENTRO DA GRADE = SEPARADOR ENTRE SUBCOMISSÕES

   O visual da linha em si (degradê, altura, cor) já vem de "main
   hr", lá em cima — não precisa repetir aqui. O único problema é
   que, dentro de um flex container, um <hr> sozinho não ocupa a
   LARGURA TODA da linha por padrão (ele só teria a largura do seu
   conteúdo, que é nenhum). flex-basis: 100% resolve isso: força o
   <hr> a tomar a linha inteira sozinho, empurrando os próximos
   .committee-card para a linha de baixo — é só escrever um <hr>
   no HTML, entre um grupo de pessoas e outro, pra "quebrar" a
   grade ali.
*/
.committee-grid hr {
    flex-basis: 100%;
    width: 100%;
}

/*
   CARD DE UM MEMBRO

   Mesma técnica de "borda no degradê que acompanha o
   arredondamento" usada em .program-card (ver o comentário
   completo lá, perto de .speaker-kicker) — mas aqui com as DUAS
   camadas explícitas (branca + degradê), porque, diferente do
   card expansível, nada dentro deste card é opaco o bastante pra
   cobrir o miolo sozinho.
*/
.committee-card {
    /*
       220px → 280px: aumentado a pedido do usuário, junto com a
       foto logo abaixo — nem toda foto enviada tem a pessoa
       perfeitamente centralizada, e um círculo maior sobra mais
       chance do rosto aparecer inteiro mesmo assim (menos corte
       nas bordas). Como a grade é flex-wrap, cards mais largos já
       resolvem sozinhos o "menos cards por linha" — não precisa
       de nenhum ajuste separado pra isso.
    */
    width: 280px;
    text-align: center;
    padding: 32px 20px 26px;

    border: 3px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        var(--gradient-soft) border-box;

    /* Mesma "elevação no hover" já usada em vários lugares do site
       (.back-to-top-button, .schedule-cell--clickable, os cards de
       palestrantes) — um pequeno respiro visual ao passar o mouse */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.committee-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(61, 46, 34, 0.18);
}

.committee-photo {
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 auto 18px;

    /* Foto REDONDA — diferente das speaker-photo-left/right
       (retangulares) do resto do site, de propósito: dá a esta
       página uma identidade visual própria de "galeria de perfis",
       em vez de parecer mais uma lista de palestrantes. */
    border-radius: 50%;
    object-fit: cover;

    /* Anel branco entre a foto e o fundo do card — evita a foto
       "grudar" visualmente na borda em degradê ao redor do card */
    border: 4px solid #ffffff;
    box-shadow: 0 2px 10px rgba(61, 46, 34, 0.25);
}

.committee-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #3D2E22;
    margin-bottom: 8px;
}

/* Mesmo visual de "pílula" do .speaker-kicker (planilha de
   programação) — reaproveitado aqui pra identificar a subcomissão
   de cada membro, mesma lógica de cor (fundo sólido, texto branco) */
.committee-subcommittee {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
    background: var(--color-bg-dark);
    padding: 4px 14px;
    border-radius: 20px;
}

/* ================================================================
   PÁGINA: ERRO 404 (404.html)
   ================================================================

   Mensagem curta e centralizada — bem diferente do resto do
   <main>, que é otimizado pra texto corrido longo (por isso as
   sobrescritas de text-align/padding-right abaixo).
   ================================================================ */

.error-404 {
    text-align: center;
    max-width: 500px;
    margin: 4rem auto;
    padding: 20px;
}

/* "404" gigante — sobrescreve o padding-right de 40% de "main h1"
   (pensado pra título de texto corrido, não faz sentido aqui) */
.error-404 h1 {
    font-size: 6rem;
    text-align: center;
    padding-right: 0;
}

/* Sobrescreve o text-align: justify de "main p" — um parágrafo
   desse tamanho fica melhor centralizado do que justificado */
.error-404 p {
    text-align: center;
    margin-bottom: 2rem;
}

/* ================================================================
   RESPONSIVIDADE
   ================================================================

   Tudo daqui pra baixo é MEDIA QUERY — regras que só valem
   dentro de uma faixa de largura de tela. Até agora, todo o
   resto deste arquivo foi escrito "desktop-first": as regras
   normais (sem media query) valem para telas largas, e as
   media queries abaixo vão progressivamente AJUSTANDO/
   SOBRESCREVENDO essas regras para telas mais estreitas.

   TRÊS FAIXAS (breakpoints):

   1) até 1024px — TABLETS (e notebooks pequenos): reduz espaços
      e tamanhos, mas mantém a mesma estrutura de layout do
      desktop (menu horizontal, hero com logo ao lado das
      legendas, imagens flutuantes ao lado do texto).

   2) até 768px — CELULARES E TABLETS EM PÉ: aqui a estrutura
      muda de verdade — o menu horizontal vira um menu
      hambúrguer, a hero empilha o logo sobre as legendas em vez
      de lado a lado, imagens que antes flutuavam ao lado do
      texto passam a ficar centralizadas ACIMA dele, e o rodapé
      empilha as 3 colunas em vez de dividir em três.

   3) até 480px — CELULARES PEQUENOS: últimos ajustes finos de
      tamanho de fonte e espaçamento para telas bem estreitas.

   Por que "max-width" (não "min-width")? Como o CSS acima foi
   escrito pensando em desktop primeiro, faz mais sentido group
   ir "vou aplicar isso quando a tela for MENOR que X" do que
   reescrever tudo do zero no sentido contrário.
   ================================================================ */

/* ================================================================
   NÍVEL 1: TABLETS (até 1024px)
   ================================================================ */

@media (max-width: 1024px) {

    /* ----- NAVBAR ----- */

    .nav-container {
        padding: 0 24px;
    }

    .nav-logo-image {
        height: 50px;
    }

    .nav-list {
        gap: 6px;
    }

    .nav-link {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    /* ----- HERO ----- */

    .logo-container {
        padding: 0 40px;
        max-width: 280px;
    }

    .logo-container-image {
        height: 200px;
        width: 146px;
    }

    .captions-container {
        padding: 140px 60px 50px 40px;
    }

    .slide-caption {
        max-width: 440px;
    }

    .caption-title {
        font-size: 1.8rem;
    }

    .caption-subtitle {
        font-size: 1rem;
    }

    /* ----- TIPOGRAFIA DO CONTEÚDO PRINCIPAL -----
       O padding-right grande (40%/35%) existe para criar uma
       linha de leitura mais curta em telas BEM largas — em
       telas de tablet, isso só espremeria o texto numa coluna
       estreita demais. Reduzido bastante aqui. */

    main {
        padding: 32px 40px;
    }

    main h1 {
        font-size: 1.8rem;
        padding-right: 15%;
    }

    main h2 {
        padding-right: 12%;
    }

    /* ----- IMAGENS FLUTUANTES (História / palestrantes) ----- */

    .wrapped-image-left,
    .wrapped-image-right {
        width: 220px;
    }

    .speaker-photo-left,
    .speaker-photo-right {
        width: 160px;
    }

    /* ----- RODAPÉ -----
       Ainda em 3 colunas (cabe), só com menos espaço entre elas. */

    .footer-container {
        padding: 0 24px;
        gap: 20px;
    }
}

/* ================================================================
   NÍVEL 2: CELULARES E TABLETS EM PÉ (até 768px)
   ================================================================

   A partir daqui a ESTRUTURA muda, não só o tamanho.
   ================================================================ */

@media (max-width: 768px) {

    /* ----- NAVBAR: MENU HAMBÚRGUER -----

       .nav-list deixa de ser uma linha horizontal e vira um
       painel que fica ESCONDIDO por padrão (display: none),
       abrindo como um menu solto abaixo do navbar quando o
       usuário toca no hambúrguer (.nav-toggle, que troca de
       "escondido" para visível aqui). A classe
       .nav-list--open é adicionada/removida pelo JavaScript
       (main.js, Seção 11) a cada clique no hambúrguer.
    */

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-list {
        /* Tira o menu do fluxo normal e o transforma num painel
           solto, ancorado embaixo do navbar */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;

        /* Empilha os itens verticalmente em vez de lado a lado */
        flex-direction: column;
        gap: 0;

        /* Mesmo degradê do navbar, para o painel parecer uma
           "extensão" dele, não um elemento à parte */
        background: linear-gradient(to bottom, #B3DEFA 0%, #66A2C1 100%);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);

        /* Escondido por padrão */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    /* Classe adicionada pelo JS ao clicar no hambúrguer — abre
       o painel. max-height (em vez de display) permite a
       transição suave definida acima; 400px é só um teto alto
       o bastante para caber os itens do menu, mesmo que cresça
       um pouco no futuro. */
    .nav-list.nav-list--open {
        max-height: 400px;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        /* Preenche a largura toda do painel — área de toque
           maior, mais fácil de acertar num celular */
        width: 100%;
        border-radius: 0;
        padding: 14px 24px;
    }

    /* O hover com scale() não faz sentido em telas de toque
       (não existe "passar o mouse" — o dedo já toca direto) */
    .nav-link:hover {
        transform: none;
    }

    /* ----- HERO: SÓ IMAGEM + LEGENDA, TUDO CENTRALIZADO -----

       Sem o logo nem o degradê "revelador" (os dois pensados
       para a composição larga do desktop, com o logo à
       esquerda e a foto "aparecendo" à direita) — numa tela
       estreita isso não sobra espaço para funcionar bem. Aqui
       o carrossel fica só com a foto de fundo e a legenda,
       centralizada por cima dela; a legibilidade do texto vem
       do text-shadow que .caption-title/.caption-subtitle já
       têm, mais o brightness() reduzido já aplicado nas fotos
       do carrossel (.carousel-slide-bg/-fg).
    */

    .hero {
        height: 60vh;
    }

    .hero-overlay {
        /* Remove o degradê — só a foto do carrossel aparece
           por trás da legenda agora */
        background: none;

        /* Com o logo escondido (ver .logo-container abaixo),
           .captions-container passa a ser o ÚNICO filho do
           overlay — center/center o centraliza tanto na
           horizontal quanto na vertical dentro da hero inteira */
        justify-content: center;
        padding: 20px;
    }

    /* Esconde o logo (a div inteira, não só a imagem) — o
       nome/marca da SEAFís já aparece no navbar logo acima,
       não precisa se repetir aqui também */
    .logo-container {
        display: none;
    }

    .captions-container {
        flex: none;
        width: 100%;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    /*
       LEGENDA CENTRALIZADA NOS DOIS EIXOS

       A legenda ativa/inativa continua usando position: absolute
       (ver .slide-caption no CSS "de desktop") para o efeito de
       fade entre elas continuar funcionando. Diferente da versão
       de desktop (que só define a posição horizontal e deixa a
       vertical "flutuar" conforme o flex do container pai — o
       que fazia sentido ao lado do logo, não aqui), aqui
       fixamos os DOIS eixos (top: 50% + left: 50%), garantindo
       que a legenda fique sempre no centro exato do carrossel,
       não importa o tamanho do texto.
    */
    .slide-caption {
        top: 50%;
        left: 50%;
        max-width: 90vw;
        text-align: center;
        transform: translate(-50%, calc(-50% + 20px));
    }

    .slide-caption.active {
        transform: translate(-50%, -50%);
    }

    .caption-title {
        font-size: 1.4rem;
    }

    .caption-subtitle {
        font-size: 0.85rem;
    }

    /*
       SETAS: VOLTAM A FICAR CENTRALIZADAS NA VERTICAL

       No desktop, as setas só aparecem no :hover da .hero — mas
       telas de toque não têm "hover" de verdade, então
       ficariam PERMANENTEMENTE invisíveis num celular; por
       isso opacity: 1 fixo aqui. Também as reposicionamos:
       top: 50% + translateY(-50%) as centraliza na ALTURA do
       carrossel (a mesma técnica clássica de setas
       anterior/próximo), uma de cada lado — em vez de ficarem
       espremidas embaixo, junto com as bolinhas indicadoras.
    */
    .carousel-arrow {
        opacity: 1;
        width: 40px;
        height: 40px;
        top: 50%;
        transform: translateY(-50%);
    }

    .carousel-arrow-prev {
        left: 12px;
    }

    .carousel-arrow-next {
        right: 12px;
    }

    /* Indicadores: centralizados na horizontal, perto da borda
       inferior — já não competem mais por espaço com as setas,
       que agora ficam no meio da altura do carrossel */
    .carousel-indicators {
        left: 50%;
        bottom: 16px;
    }

    /* ----- CÍRCULOS DECORATIVOS: ESCONDIDOS -----

       São só um detalhe de fundo — em telas estreitas, onde o
       espaço já é apertado, eles atrapalhariam mais do que
       ajudariam. main.js continua rodando e montando o <svg>
       normalmente (não vale a pena complicar o JS só para não
       gerar algo que o CSS já esconde de qualquer forma) — só
       não aparece na tela.
    */
    .content-circles {
        display: none;
    }

    /* ----- TIPOGRAFIA DO CONTEÚDO PRINCIPAL ----- */

    main {
        padding: 24px 20px;
    }

    main h1 {
        font-size: 1.5rem;
        padding-right: 0;
    }

    main h2 {
        font-size: 1.15rem;
        padding-right: 0;
    }

    /* Texto justificado cria "rios" feios de espaço em branco
       em colunas estreitas — em telas largas isso quase não
       aparece, mas num celular fica bem visível */
    main p {
        text-align: left;
    }

    /* ----- IMAGENS FLUTUANTES: EMPILHADAS, NÃO MAIS FLUTUANDO -----

       Numa tela estreita, uma imagem de 200-300px flutuando ao
       lado do texto deixaria pouquíssimo espaço pro texto
       "abraçar" — em vez disso, a imagem fica centralizada
       ACIMA do parágrafo, ocupando a largura toda (até um
       teto), e o texto flui normalmente embaixo.
    */
    .wrapped-image-left,
    .wrapped-image-right,
    .speaker-photo-left,
    .speaker-photo-right {
        float: none;
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 16px;
    }

    main blockquote.left,
    main blockquote.right {
        padding: 0.8rem 1rem;
    }

    /* ----- RODAPÉ: 3 COLUNAS VIRAM 1 ----- */

    .footer-container {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0 24px;
    }

    /* ----- PLANILHAS (horários e valores) -----
       overflow-x: auto (já definido no CSS de desktop) permite
       rolar a tabela horizontalmente se ela não couber — aqui
       só reduzimos um pouco o "peso" de cada célula, pra
       precisar rolar menos. */

    .schedule-cell,
    .pricing-cell,
    .schedule-time,
    .pricing-header,
    .schedule-day-header,
    .schedule-corner {
        padding: 8px 6px;
        font-size: 0.8rem;
    }

    .schedule-table caption,
    .pricing-table caption {
        font-size: 1.15rem;
    }

    /* ----- BOTÃO "VOLTAR AO TOPO" ----- */

    .back-to-top-button {
        width: 44px;
        height: 44px;
        bottom: 16px;
        right: 16px;
    }
}

/* ================================================================
   NÍVEL 3: CELULARES PEQUENOS (até 480px)
   ================================================================

   Ajustes finos por cima do que o nível 2 já definiu — a
   estrutura já está toda "empilhada", aqui só encolhemos um
   pouco mais fontes e espaçamentos para caber em telas bem
   estreitas (ex: 360-400px de largura, comuns em celulares).
   ================================================================ */

@media (max-width: 480px) {

    .nav-logo-image {
        height: 42px;
    }

    .hero {
        height: 55vh;
    }

    .logo-container-image {
        height: 70px;
    }

    .caption-title {
        font-size: 1.2rem;
    }

    main h1 {
        font-size: 1.3rem;
    }

    main h2 {
        font-size: 1.05rem;
    }

    .wrapped-image-left,
    .wrapped-image-right,
    .speaker-photo-left,
    .speaker-photo-right {
        max-width: 100%;
    }

    .pricing-cell--price {
        font-size: 1.1rem;
    }
}