/*
 * Theme — 14º Simpósio ACOCCV
 * Direção estética: "Autoridade Clínica Editorial" (ver css/variables.css).
 * Esta folha aplica aparência visual (cor, tipografia, sombra, hover,
 * micro-interação) sobre a base estrutural já pronta em css/layout.css.
 * Consome EXCLUSIVAMENTE tokens de css/variables.css — nenhum valor solto.
 * Carregada DEPOIS de variables.css e layout.css.
 */

/* ==========================================================================
   0. Tipografia aplicada
   ========================================================================== */

body {
  font-family: var(--font-body);
  color: var(--color-foreground);
  background-color: var(--color-background);
  font-size: var(--text-base);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  color: var(--color-foreground);
  line-height: 1.3;
  text-wrap: balance;
  margin: 0;
}

/* Escala genérica — cada seção com necessidade específica sobrescreve via
   seletor mais específico (ex.: #hero h1, section h2) mais abaixo. */
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-md); }
h5 { font-size: var(--text-base); }

p {
  line-height: 1.6;
  text-wrap: pretty;
  margin: 0;
  color: var(--color-foreground);
}

/* Todo bloco de texto dentro de uma section usa a autoridade de espaço do
   próprio container flex (ver regra 1. Container abaixo) — parágrafos e
   títulos nunca recebem margin própria, para não duplicar autoridade de
   espaçamento junto com o gap do container. */
section .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* Bloco eyebrow/título/descrição: autoridade de espaço PRÓPRIA (gap menor),
   deliberadamente mais apertada que o gap do .container acima — é isso que
   cria o agrupamento visual "título+descrição pertencem juntos" separado
   do conteúdo que vem depois (lista, grade, cronograma). Ainda é uma única
   autoridade por bloco (gap), só que em dois níveis de aninhamento
   diferentes — não há margin somada a gap em nenhum dos dois níveis. */
.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-heading-gap);
}

section .container > ul,
section .container > figure {
  margin: 0;
}

/* ==========================================================================
   1. Header
   ========================================================================== */

header {
  position: fixed; /* já definido em layout.css — reafirmado aqui só como
    contexto de leitura; nunca aplicar filter/backdrop-filter/transform
    diretamente nesta tag (ver header::before abaixo) */
  background: transparent;
  border-bottom: 1px solid transparent;
}

/* Glassmorphism discreto: o blur vive num pseudo-elemento absoluto, nunca
   na própria tag <header> — <header> é position:fixed e qualquer filter/
   backdrop-filter/transform nela vira containing block de descendentes
   position:fixed (ex.: um futuro menu mobile), quebrando o posicionamento
   deles silenciosamente. Regra não-negociável do design system. */
header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  z-index: 0;
}

.header-inner {
  position: relative;
  z-index: 1;
}

header nav ul li a {
  color: var(--color-foreground);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-base);
  text-decoration: none;
  padding-block: var(--space-3xs);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}

/* Menu mobile aberto: mesmo fundo com blur do header, para o nav em coluna
   não flutuar sobre o conteúdo sem contraste. Transição de entrada
   (fade + leve slide, Sessão 10): `header nav` é position:absolute (não
   fixed) aqui — seguro aplicar transform diretamente nele, sem risco de
   virar containing block de nada (ver regra não-negociável do projeto).
   A classe `.is-open` é adicionada/removida por js/main.js (initMobileNav)
   sem alterar a lógica de abrir/fechar/Escape/clique-fora já testada. */
@media (max-width: 1023px) {
  header nav {
    /* Bug real encontrado na auditoria de responsividade (Sessão 16):
       rgba(255,255,255,0.96) parece "quase sólido" na teoria, mas os 4%
       de transparência restantes eram suficientes para o H1 grande e em
       negrito do Hero (texto branco sobre azul escuro) vazar de forma
       nitidamente legível atrás do menu aberto — confirmado isolando a
       causa (forçando um fundo 100% opaco fez o vazamento desaparecer
       por completo). Menu mobile é um painel sólido, não precisa do
       efeito glass do header fixo — fundo 100% opaco resolve. */
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--transition-base), transform var(--transition-base);
  }

  header nav.is-open {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-toggle {
  color: var(--color-foreground);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  color: var(--color-primary);
  background-color: var(--color-primary-subtle);
}

header nav ul li a:hover,
header nav ul li a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ==========================================================================
   2. Botões — uma única escala de estilo, reaproveitada por toda a página
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  max-width: 100%;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-base);
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-md);
  padding-block: var(--space-sm);
  padding-inline: var(--space-lg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base),
    border-color var(--transition-base), transform var(--transition-base),
    box-shadow var(--transition-base);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-secondary);
  color: var(--color-white);
  transform: translateY(-1px);
}

/* CTA do header: classe combinada com a base (.header-cta.btn-sm) desde a
   primeira regra — nunca sozinha — para não competir em especificidade com
   .btn/.btn-primary por ordem de carregamento (lição de produção). */
.header-cta.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-md);
  padding-block: var(--space-2xs);
  padding-inline: var(--space-md);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.header-cta.btn-sm:hover,
.header-cta.btn-sm:focus-visible {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* Botão de maior intenção de conversão da página inteira ("Quero me
   inscrever no 14º Simpósio ACOCCV") é o texto mais longo usado em .btn —
   reduzir fonte/padding em telas pequenas evita quebra de linha. */
@media (max-width: 480px) {
  .btn {
    font-size: var(--text-sm);
    padding-inline: var(--space-md);
  }
}

/* Abaixo de ~400px, mesmo com --text-sm, o CTA mais longo da página
   ("Quero me inscrever no 14º Simpósio ACOCCV") ainda não cabe em uma
   linha dentro do container de 360px — reduzir mais uma vez em vez de
   arriscar overflow horizontal ou truncar o texto do botão. */
@media (max-width: 400px) {
  .btn {
    font-size: var(--text-xs);
    padding-inline: var(--space-sm);
  }
}

/* ==========================================================================
   3. Hero
   ========================================================================== */

#hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-hover) 55%, var(--color-near-black) 100%);
  /* Mesma escala de padding-block das demais seções (ver css/layout.css,
     bloco 5) — o Hero não é mais um caso à parte com o dobro do respiro. */
}

#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 82% 12%, color-mix(in srgb, var(--color-primary) 38%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

#hero .container {
  position: relative;
  z-index: 1;
  gap: var(--space-lg);
  /* Sem max-width próprio: usa exatamente a mesma largura de container das
     demais seções (bug reportado — o Hero tinha um teto mais estreito que
     criava uma margem automática extra, desalinhando a borda esquerda do
     conteúdo em relação a todas as outras seções). O comprimento de linha
     do H1 é controlado à parte (ver #hero h1 abaixo), não pelo container. */
}

#hero h1 {
  color: var(--color-white);
  /* 48px é o teto (desktop/notebook) pedido — abaixo disso a fonte ainda
     precisa encolher de forma responsiva, senão o texto (com as 3 quebras
     manuais fixas abaixo) vira uma pilha enorme de linhas no mobile. */
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3rem); /* 28px → 48px */
  letter-spacing: 0.01em;
  /* Quebra de linha fixada manualmente no HTML (<br>) em vez de depender
     da largura do container — garante a mesma quebra em 3 blocos de texto
     em qualquer largura de tela (cada bloco ainda pode quebrar internamente
     em telas muito estreitas, mas nunca se junta em menos de 3 blocos). */
}

#hero p {
  color: var(--color-gray-200);
  font-size: var(--text-md);
  max-width: 62ch;
}

/* No desktop/notebook, alarga o parágrafo de apoio do Hero para caber em
   3 linhas (pedido do cliente) em vez das ~4-5 que o limite de 62ch dava —
   valor testado empiricamente (Playwright) contra o texto real do H1. */
@media (min-width: 1025px) { /* --breakpoint-notebook (1024px) */
  #hero .section-heading p {
    max-width: 52.5rem; /* 840px */
  }
}

/* Data e local do evento como itens com ícone (substituiu o parágrafo
   único de texto corrido) — cada item é ícone + texto lado a lado. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-meta li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  opacity: 0.9;
}

.hero-meta svg {
  flex-shrink: 0;
  color: var(--color-white);
  opacity: 0.85;
}

#hero .btn-primary {
  align-self: flex-start;
}

/* ==========================================================================
   4. Ritmo de seções — fundo alternado
   ========================================================================== */

#sobre-evento,
#local,
#como-chegar {
  background-color: var(--color-background);
}

#cirurgia-cardiovascular,
#programacao,
#galeria,
#patrocinadores {
  background-color: var(--color-background-alt);
}

/* Público-alvo sai do ritmo branco/cinza — mesmo degradê azul institucional
   do Hero, para dar peso visual a esta seção no meio da rolagem. */
#publico-alvo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-hover) 55%, var(--color-near-black) 100%);
}

#publico-alvo .section-heading h2 {
  color: var(--color-white);
}

#publico-alvo .section-heading p {
  color: var(--color-gray-200);
  font-size: 18px; /* antes 16px */
}

/* Espaço entre a descrição e a grade de cards — o gap genérico da section
   (--space-2xl) ficava grande demais aqui, com só 2 blocos no container. */
#publico-alvo .container {
  gap: var(--space-xl);
}

/* Título e descrição centralizados, mesma lógica de #cirurgia-cardiovascular:
   coluna de leitura mais estreita que a seção, centralizada. */
#publico-alvo .section-heading {
  text-align: center;
  align-items: center;
  max-width: 60rem;
  margin-inline: auto;
}

/* Inscrição quebra intencionalmente o padrão de alternância — é a seção de
   Ação da jornada e precisa se distinguir das seções de suporte ao redor.
   Mesmo degradê azul institucional do Hero e do Público-alvo. */
#inscricao {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-hover) 55%, var(--color-near-black) 100%);
}

#inscricao .section-heading h2 {
  color: var(--color-white);
}

#inscricao .section-heading p {
  color: var(--color-gray-200);
  font-size: 20px;
}

#inscricao .inscricao-note {
  color: var(--color-gray-200);
}

/* Sem align-items próprio aqui — usa o align-items:center padrão de
   .two-col. Como a imagem (proporção original do pôster) é mais alta que
   a coluna de texto, center reparte a sobra de espaço igualmente em cima
   e embaixo do texto, em vez de tudo embaixo (start) ou tudo em cima. */

/* Cards de Data / Horário / Localização — Data e Horário lado a lado,
   Localização ocupando a linha toda abaixo (mesmo padrão da referência
   enviada pelo cliente). */
.info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.info-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg); /* antes --space-sm/--space-md — cards mais altos */
}

.info-card svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.info-card-full {
  grid-column: 1 / -1;
}

.info-card-label {
  display: block;
  margin-bottom: var(--space-3xs); /* mais distância do rótulo (ex.: "Data") para o valor abaixo */
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-foreground-muted);
}

.info-card strong {
  display: block;
  font-family: var(--font-body);
  color: var(--color-foreground);
}

.inscricao-note {
  font-size: var(--text-md); /* antes --text-sm */
  color: var(--color-foreground-muted);
}

@media (max-width: 480px) {
  .info-cards {
    grid-template-columns: 1fr;
  }
}

/* O banner é um pôster em pé (920x1119px) — usar a proporção real da
   imagem em vez do aspect-ratio 4:3 genérico de .two-col-media, senão o
   corte (object-fit:cover) apara texto importante do topo/rodapé do pôster. */
#inscricao .two-col-media {
  aspect-ratio: 920 / 1119;
}

/* ==========================================================================
   5. Cabeçalhos de seção
   ========================================================================== */

section h2 {
  font-size: var(--text-3xl);
  color: var(--color-secondary);
}

/* Título e corpo de texto são os únicos dois filhos do .container aqui —
   o gap genérico da section (--space-2xl, pensado para separar bloco de
   título de um conteúdo bem diferente, tipo lista/grade) ficava grande
   demais entre o título e o texto logo abaixo. Reduz só nesta seção para
   a mesma escala usada entre título e descrição em outras seções. */
#cirurgia-cardiovascular .container {
  gap: var(--space-heading-gap);
}

/* Texto centralizado nesta seção — bloco único de contexto (sem lista,
   card ou mídia ao lado), então centralizar em uma coluna de leitura mais
   estreita funciona melhor que o texto corrido de ponta a ponta. */
#cirurgia-cardiovascular .section-heading {
  text-align: center;
  align-items: center;
  max-width: 70rem; /* antes 55rem — deixava ~200px de vão vazio de cada lado dentro da seção */
  margin-inline: auto;
}

/* Corpo de texto separado da descrição curta do heading — usa um gap
   maior entre parágrafos (a descrição usa --space-heading-gap, mais
   apertado de propósito; aqui o texto é mais denso e precisa de mais
   respiro para não parecer espremido) e uma altura de linha um pouco
   mais generosa. */
#cirurgia-cardiovascular .section-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
  max-width: 70rem; /* antes 55rem — deixava ~200px de vão vazio de cada lado dentro da seção */
  margin-inline: auto;
}

#cirurgia-cardiovascular .section-body p {
  font-size: 18px; /* antes 16px */
  line-height: 1.75;
  /* text-wrap:pretty (padrão global) só evita palavra órfã sozinha na
     última linha — não nivela o comprimento das linhas. balance nivela de
     verdade; funciona bem aqui por serem parágrafos curtos (2-3 linhas). */
  text-wrap: balance;
}

section h3 {
  font-size: var(--text-xl);
  color: var(--color-foreground);
  /* Sem margin própria: o espaçamento antes/depois vem do gap do
     container flex pai (autoridade única, ver docs/arquitetura.md D8). */
}

/* ==========================================================================
   5b. Layout de 2 colunas (texto + imagem) — reutilizável
   Usado por enquanto em #sobre-evento: texto à esquerda (~40%), imagem à
   direita (~60%). Empilha em 1 coluna abaixo do breakpoint notebook.
   ========================================================================== */

.two-col {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--space-xl);
  align-items: center;
}

.two-col-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-heading-gap);
}

.two-col-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

/* Eyebrow em vermelho acima do título, complemento do nome do evento. */
.sobre-evento-eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}

#sobre-evento .section-heading p {
  font-size: 18px; /* antes 16px (var(--text-base)) */
}

/* Coluna de texto ficou mais alta (eyebrow + fonte maior da descrição) —
   imagem cresce na mesma proporção em vez do 4:3 padrão do .two-col-media. */
#sobre-evento .two-col-media {
  aspect-ratio: 1 / 1; /* calibrado para bater ~ com a altura real da coluna de texto (462px vs 474px de largura) */
}

.two-col-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) { /* abaixo de --breakpoint-notebook (1024px) */
  .two-col {
    grid-template-columns: 1fr;
  }

  .two-col-media {
    order: -1; /* imagem antes do texto no empilhamento mobile/tablet */
  }
}

/* ==========================================================================
   6. Cards — Público-alvo
   ========================================================================== */

#publico-alvo ul {
  align-items: stretch;
}

/* 3 cards por linha no desktop/notebook — sobrescreve o auto-fit genérico
   de css/layout.css. Precisa do media query aqui, senão esta regra (sem
   media query) ganha por ordem de carga de css/theme.css sobre os
   fallbacks de 2/1 coluna de tablet/mobile já definidos em layout.css,
   quebrando a responsividade (bug real: cards espremidos em 3 colunas
   até no mobile). */
@media (min-width: 1025px) { /* --breakpoint-notebook (1024px) */
  #publico-alvo ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

#publico-alvo ul li {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: var(--space-sm);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md) var(--space-md) var(--space-sm); /* menos padding embaixo (antes --space-md nos 4 lados) */
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

#publico-alvo ul li:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Reserva altura de 2 linhas sempre, quebrando ou não — garante que todos
   os 6 cards fiquem com a mesma altura total (a foto já é uniforme por
   causa do aspect-ratio; só a legenda variava entre 1 e 2 linhas). Linha
   e padding mais enxutos que antes para reduzir o vão embaixo do texto
   nos cards de legenda única. */
#publico-alvo ul li span {
  display: block;
  min-height: calc(1.3em * 2);
  line-height: 1.3;
}

/* Foto real de cada perfil (assets/Fotos Público-alvo/) — sangra até a
   borda do card via margin negativo (cancela o padding do <li>), por isso
   .persona-photo precisa de overflow:hidden para a imagem respeitar o
   arredondamento do canto. */
.persona-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) 0;
  background: linear-gradient(135deg, var(--color-secondary-subtle) 0%, var(--color-primary-subtle) 100%);
}

.persona-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   7. Programação — abas por dia + carrossel horizontal de horários
   ========================================================================== */

.schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Abas (dia 16 / dia 17) */
.schedule-tabs {
  display: flex;
  gap: var(--space-2xs);
}

.schedule-tab {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  color: var(--color-foreground-muted);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.schedule-tab.is-active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

/* Um dia por vez — controlado via JS (adiciona/remove [hidden]) */
.schedule-day[hidden] {
  display: none;
}

.schedule-day-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-secondary);
  color: var(--color-white);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--space-md) var(--space-lg);
}

.schedule-day-banner strong {
  display: block;
  font-size: var(--text-md);
}

.schedule-day-banner span {
  font-size: var(--text-sm);
  color: var(--color-gray-200);
}

/* Carrossel: trilho com scroll horizontal + setas para navegar */
.schedule-carousel {
  position: relative;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-lg);
}

.schedule-track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.schedule-track::-webkit-scrollbar {
  display: none;
}

.schedule-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.schedule-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.schedule-card-break {
  background-color: var(--color-background-alt);
}

.schedule-card-time {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.schedule-card-module {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-secondary);
}

.schedule-card h3 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-md);
  color: var(--color-foreground);
}

.schedule-card-desc {
  color: var(--color-foreground-muted);
  font-size: var(--text-sm);
}

/* Setas de navegação — sobrepostas ao carrossel, uma de cada lado */
.schedule-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-secondary);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.schedule-arrow:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.schedule-arrow-prev {
  left: calc(var(--space-lg) * -1 + var(--space-sm));
}

.schedule-arrow-next {
  right: calc(var(--space-lg) * -1 + var(--space-sm));
}

@media (max-width: 767px) { /* abaixo de --breakpoint-tablet (768px) */
  .schedule-arrow {
    display: none; /* mobile já rola por toque/swipe nativo */
  }
}

/* ==========================================================================
   8. Galeria
   ========================================================================== */

#galeria figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

#galeria figure:hover {
  box-shadow: var(--shadow-md);
}

#galeria figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

#galeria figure:hover img {
  transform: scale(1.04);
}

#galeria figcaption {
  padding: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-foreground-muted);
}

/* ==========================================================================
   9. Patrocinadores — normaliza proporções muito diferentes entre logos
   ========================================================================== */

/* justify-content:flex-start (não center) — a logo fica colada à
   esquerda do card em vez de centralizada no meio de uma caixa larga. */
#patrocinadores ul li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 96px;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-background);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

#patrocinadores ul li:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

#patrocinadores ul li img {
  max-height: 72px;
  width: auto;
  object-fit: contain;
}

/* Grupo "Apoiadores" — logo centralizada no retângulo (diferente dos
   Patrocinadores, que ficam colados à esquerda). Precisa do #patrocinadores
   no seletor: a regra base "#patrocinadores ul li" usa ID e vencia esta
   aqui mesmo com a ordem certa no arquivo (especificidade, não ordem). */
#patrocinadores .sponsors-grid-featured li {
  justify-content: center;
}

#patrocinadores h3 {
  font-size: var(--text-lg);
  color: var(--color-secondary);
}

/* Duas autoridades de espaço separadas por nível de aninhamento:
   .container (section-heading ↔ cada .sponsor-group) fica mais espaçoso;
   .sponsor-group (subtítulo ↔ grade de logos dele) fica bem mais apertado.
   Não soma — cada nível usa só o próprio gap. */
#patrocinadores .container {
  gap: var(--space-xl);
}

.sponsor-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

#patrocinadores .section-heading p {
  font-size: 18px; /* antes 16px */
}

/* ==========================================================================
   10. Botão flutuante do WhatsApp
   ========================================================================== */

.whatsapp-float a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: #25d366; /* cor oficial do serviço WhatsApp — exceção
    documentada à paleta da marca (ver docs/arquitetura.md) */
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.whatsapp-float a:hover,
.whatsapp-float a:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow-lg);
}

.whatsapp-float a span {
  position: absolute;
  right: calc(100% + var(--space-sm));
  top: 50%;
  transform: translate(8px, -50%);
  background-color: var(--color-near-black);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  padding-block: var(--space-2xs);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.whatsapp-float a:hover span,
.whatsapp-float a:focus-within span,
.whatsapp-float a:focus-visible span {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

/* ==========================================================================
   11. Rodapé
   ========================================================================== */

footer {
  background-color: var(--color-secondary);
  color: var(--color-gray-200);
  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* antes --space-lg — reduz a distância entre a tagline e o copyright */
}

footer p {
  color: var(--color-gray-200);
  font-size: var(--text-sm);
}

/* Bloco superior: contatos à esquerda, logo à direita. */
.footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 769px) { /* --breakpoint-tablet (768px) */
  .footer-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer-contact-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.footer-contact-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-gray-200);
}

.footer-contact-list svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.footer-brand img {
  height: 64px; /* antes 48px */
  width: auto;
}

/* Linha divisória entre o bloco de contato/logo e o restante do rodapé. */
.footer-divider {
  height: 1px;
  background-color: color-mix(in srgb, var(--color-white) 15%, transparent);
}

.footer-tagline {
  text-align: left;
  color: var(--color-gray-200);
  font-size: var(--text-sm);
}

/* Tagline + copyright: bloco único com gap PRÓPRIO, bem mais apertado que
   o gap geral do <footer> (que separa footer-top/divider/este bloco) —
   autoridade única, não soma com o gap do footer, é um nível de
   aninhamento à parte. */
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

/* Assinatura do desenvolvedor — seção própria, fundo branco (fora do
   <footer> azul), negrito, centralizada. */
.footer-credit {
  background-color: var(--color-background);
  padding-block: var(--space-sm); /* antes --space-md — seção mais compacta */
  text-align: center;
}

.footer-credit p {
  font-size: var(--text-sm);
  color: var(--color-foreground-muted);
}

.footer-credit a {
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ==========================================================================
   12. Programação e Galeria herdam o layout estrutural de #programacao/
   #galeria (definido em layout.css), mas agora aplicado ao .container
   interno em vez da <section>, pois a section passou a ter um único filho
   direto (.container) para permitir fundo de seção full-bleed + conteúdo
   centralizado — sem essa camada extra, background alternado (ver bloco 4)
   ficaria limitado à largura do container, quebrando o efeito de faixa.
   ========================================================================== */

#programacao .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl); /* antes --space-md — pedido para dar mais respiro entre a descrição e as abas */
}

/* Título e descrição centralizados, mesma lógica das outras seções. */
#programacao .section-heading {
  text-align: center;
  align-items: center;
  max-width: 70rem;
  margin-inline: auto;
}

#programacao .section-heading p {
  font-size: 18px; /* antes 16px */
}

/* Abas centralizadas dentro da seção (a linha de abas ocupa a largura toda
   do container por herdar align-items:stretch do .schedule, então precisa
   de justify-content para centralizar os dois botões dentro dela). */
.schedule-tabs {
  justify-content: center;
}

/* Galeria = só as 4 fotos lado a lado + botão sobreposto no centro, 100%
   sangrada (full-bleed) — sem título, sem descrição, sem legenda, sem
   padding da seção e sem largura de container limitada, diferente de
   todas as outras seções do site (é a única imagem "pura" da página). */
#galeria {
  padding-block: 0;
}

#galeria .galeria-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.galeria-strip img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* Cada foto virou um <button> clicável (lightbox) — reset mínimo para o
   botão ocupar exatamente a célula do grid como o <img> ocupava antes,
   sem herdar aparência nativa de <button> (borda, padding, background). */
.galeria-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Feedback de hover/foco da miniatura clicável — reaproveita o mesmo zoom
   de imagem já usado no hover do <figure> da galeria estrutural (bloco 8),
   só que agora disparado pelo próprio <button>, que é o elemento realmente
   clicável aqui. */
.galeria-thumb img {
  transition: transform var(--transition-slow);
}

.galeria-thumb:hover img,
.galeria-thumb:focus-visible img {
  transform: scale(1.04);
}

/* Botão sólido vermelho (padrão .btn-primary) perto da parte de baixo da
   tira, em vez de centralizado. Combina translateX (centralização
   horizontal) + translateY (hover) num só valor — se cada regra
   declarasse seu próprio transform isolado, a última a "vencer" (no caso,
   o :hover) substituiria a outra inteira em vez de somar (foi exatamente
   o bug do pulo horizontal reportado antes). */
.galeria-cta {
  position: absolute;
  left: 50%;
  bottom: var(--space-xl);
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1;
}

.galeria-cta:hover,
.galeria-cta:focus-visible {
  transform: translateX(-50%) translateY(-1px);
}

/* Bug real encontrado na auditoria de responsividade (Sessão 16): .galeria-cta
   também recebe a classe .reveal (bloco 14 mais abaixo), e as regras genéricas
   `.js-reveal-ready .reveal` / `.reveal.is-visible` escrevem um `transform`
   próprio (translateY de entrada / none) que SUBSTITUI por completo o
   translateX(-50%) usado aqui para centralizar o botão — não soma, apaga.
   Resultado: o botão ficava permanentemente fora do centro (colado à direita)
   depois de revelado, não só durante a transição. Mesma causa raiz do bug de
   hover já documentado acima, agora entre dois sistemas diferentes (posição +
   scroll-reveal). Correção: reafirmar o translateX(-50%) combinado com cada
   estado do reveal, com especificidade maior que as regras genéricas. */
.js-reveal-ready .galeria-cta.reveal {
  transform: translateX(-50%) translateY(24px);
}

.js-reveal-ready .galeria-cta.reveal.is-visible {
  transform: translateX(-50%);
}

@media (max-width: 767px) { /* abaixo de --breakpoint-tablet (768px) */
  #galeria .galeria-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .galeria-strip img {
    aspect-ratio: 1 / 1;
  }
}

/* ==========================================================================
   12a. Como Chegar — layout de referência (ícone + título + mapa embutido)
   ========================================================================== */

.como-chegar-heading-block {
  text-align: center;
  align-items: center;
  max-width: 42rem;
  margin-inline: auto;
}

.como-chegar-heading-block p {
  font-size: 18px; /* antes 16px */
}

.como-chegar-pin {
  color: var(--color-primary);
}

.como-chegar-venue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}

.como-chegar-venue svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.como-chegar-map {
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.como-chegar-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 767px) { /* abaixo de --breakpoint-tablet (768px) */
  .como-chegar-map {
    aspect-ratio: 4 / 5;
  }
}

/* ==========================================================================
   12b. Sobre o Local — layout de referência (colagem de fotos + texto)
   ========================================================================== */

#local .container {
  gap: var(--space-lg);
}

.local-layout {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.local-collage {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-sm);
}

.local-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.local-collage img:first-child {
  grid-row: 1 / 3;
  /* Calibrado para a coluna de imagens bater com a altura real da coluna
     de texto (antes 3/4 deixava a colagem mais baixa que o texto). */
  aspect-ratio: 5 / 8;
}

.local-collage img:not(:first-child) {
  aspect-ratio: 71 / 60; /* antes 4/3 — ajustado junto com a imagem grande */
}

/* Sem overrides de cor/tamanho aqui — o texto "Aqui, a cirurgia..." deve
   ter a mesma formatação dos outros parágrafos da descrição (herda de p). */

.local-tagline strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-secondary);
}

.local-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-heading-gap);
}

.local-text p {
  font-size: 18px; /* antes 16px */
}

.local-text h2 strong {
  color: var(--color-primary);
}

@media (max-width: 1024px) { /* abaixo de --breakpoint-notebook (1024px) */
  .local-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   12c. Modal / lightbox — CSS estrutural mínimo, SEM transição/animação
   (fica para a sessão futura de polimento visual). Só o necessário para o
   modal não ficar visualmente quebrado enquanto isso.
   ========================================================================== */

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  /* Transição de entrada (Sessão 10) — SEM transform/filter/backdrop-filter
     no próprio .modal: ele é position:fixed, então qualquer uma dessas
     propriedades viraria containing block dos descendentes (nenhum aqui é
     fixed, mas é a regra do projeto — mais seguro nunca aplicar). Só
     opacity aqui; o leve scale/slide fica no .modal-content abaixo, que
     não tem descendente fixed nenhum. A classe `.is-open` é adicionada/
     removida por js/main.js (initModals) só como gatilho visual — a
     lógica de abrir/fechar/Escape/foco não foi alterada. */
  opacity: 0;
  transition: opacity var(--transition-base);
}

.modal.is-open {
  opacity: 1;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.85);
}

.modal-content {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  transform: scale(0.96) translateY(8px);
  transition: transform var(--transition-base);
}

.modal.is-open .modal-content {
  transform: scale(1) translateY(0);
}

.modal-content img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
}

.modal-close {
  position: absolute;
  top: calc(var(--space-lg) * -1);
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-foreground);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.modal-close:hover,
.modal-close:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.06);
}

/* ==========================================================================
   13. Foco visível — acessibilidade (WCAG 2.1 AA)
   ========================================================================== */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   14. Scroll-reveal — entrada de elementos ao rolar (Sessão 10)
   Lógica de observação em js/main.js (initScrollReveal / initScrollReveal-
   Stagger). Nenhum GSAP neste projeto — CSS puro + IntersectionObserver
   nativo (ver docs/arquitetura.md).

   Decisão de robustez (documentada também em js/main.js): o estado oculto
   só existe quando `js-reveal-ready` está presente em <html>, classe que
   só o próprio JS adiciona depois de confirmar que existe `.reveal` no
   DOM. Sem essa classe (JS não rodou / falhou), `.reveal` não recebe
   nenhuma regra de opacidade/transform aqui embaixo e o elemento fica
   com a aparência normal — visível por padrão, nunca preso em opacity:0.
   ========================================================================== */

.reveal {
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
}

.js-reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Usuários com prefers-reduced-motion nunca veem o translateY/fade — o
   conteúdo já nasce no estado final, sem transição nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}