/* ==========================================================================
   FESTIVAL DA CACHACA DE GOIAS 2026
   Sistema de design — derivado da identidade visual oficial
   --------------------------------------------------------------------------
   1.  Tokens              6.  Cabecalho / navegacao
   2.  Reset e base        7.  Secoes
   3.  Tipografia          8.  Formulario
   4.  Utilitarios         9.  Rodape
   5.  Componentes        10.  Responsivo e movimento
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- Cor: verde alambique (extraido do logo oficial) --- */
  --verde-900: #04261C;
  --verde-800: #073E2E;   /* base institucional */
  --verde-700: #0B5140;
  --verde-600: #146A55;
  --verde-500: #2F8676;   /* verde da faixa lateral */
  --verde-200: #C3D8C4;
  --verde-100: #DCEADB;

  /* --- Cor: ouro cobre (barril / elementos do selo) --- */
  --ouro-300: #EBD3AC;
  --ouro-400: #E0BC85;
  --ouro-500: #C89C5F;    /* metal principal */
  --ouro-600: #A87E3E;
  --ouro-700: #856230;    /* uso em texto sobre fundo claro (5.0:1) */

  /* --- Cor: neutros --- */
  --creme:    #F6F3EC;
  --creme-2:  #EDE7DA;
  --branco:   #FFFFFF;
  --tinta:    #073E2E;

  /* --- Cor: papeis semanticos --- */
  --bg-escuro:   var(--verde-800);
  --bg-claro:    var(--creme);
  --texto-claro: rgba(255, 255, 255, .88);
  --texto-suave: rgba(255, 255, 255, .68);
  --texto-forte: var(--branco);
  --texto-escuro:#123A2D;
  --texto-escuro-suave: #3F5C51;
  --linha-ouro:  rgba(200, 156, 95, .38);
  --linha-clara: rgba(7, 62, 46, .14);

  /* --- Tipografia --- */
  --fonte-display: "Bodoni Moda", "Playfair Display", Georgia, "Times New Roman", serif;
  --fonte-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-xs:   clamp(.72rem, .7rem + .1vw, .78rem);
  --t-sm:   clamp(.86rem, .84rem + .12vw, .94rem);
  --t-base: clamp(1rem, .97rem + .17vw, 1.08rem);
  --t-md:   clamp(1.1rem, 1.04rem + .3vw, 1.3rem);
  --t-lg:   clamp(1.35rem, 1.2rem + .7vw, 1.85rem);
  --t-xl:   clamp(1.85rem, 1.5rem + 1.6vw, 3rem);
  --t-2xl:  clamp(2.4rem, 1.7rem + 3vw, 4.6rem);
  --t-3xl:  clamp(3rem, 1.8rem + 5.2vw, 7rem);

  /* --- Espaco --- */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;
  --e-9: 6rem;    --e-10: 8rem;

  --secao-y: clamp(4rem, 3rem + 6vw, 8.5rem);
  --largura: 1200px;
  --largura-texto: 62ch;
  --gutter: clamp(1.15rem, .6rem + 2.4vw, 3rem);

  /* --- Forma --- */
  --raio-sm: 4px;
  --raio:    8px;
  --raio-lg: 18px;
  --entalhe: 13px; /* tamanho do recorte de canto — ecoa a moldura do selo */
  --recorte: polygon(
    0 var(--entalhe), var(--entalhe) var(--entalhe), var(--entalhe) 0,
    calc(100% - var(--entalhe)) 0, calc(100% - var(--entalhe)) var(--entalhe), 100% var(--entalhe),
    100% calc(100% - var(--entalhe)), calc(100% - var(--entalhe)) calc(100% - var(--entalhe)), calc(100% - var(--entalhe)) 100%,
    var(--entalhe) 100%, var(--entalhe) calc(100% - var(--entalhe)), 0 calc(100% - var(--entalhe))
  );

  /* --- Movimento --- */
  --transicao: 220ms cubic-bezier(.2, .7, .3, 1);
  --transicao-lenta: 620ms cubic-bezier(.22, .68, .24, 1);

  --sombra-suave: 0 1px 2px rgba(4, 38, 28, .06), 0 8px 26px rgba(4, 38, 28, .07);
  --sombra-alta:  0 24px 60px rgba(4, 38, 28, .22);
}

/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--fonte-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--texto-claro);
  background: var(--bg-escuro);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { list-style: none; padding: 0; }

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

::selection { background: var(--ouro-500); color: var(--verde-900); }

/* Link de salto — acessibilidade por teclado */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ouro-500);
  color: var(--verde-900);
  padding: .8rem 1.2rem;
  font-weight: 600;
}
.pular:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--texto-forte);
}

p { text-wrap: pretty; }

.rotulo {
  font-family: var(--fonte-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ouro-500);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.rotulo::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.titulo-secao {
  font-size: var(--t-xl);
  margin-top: var(--e-4);
}
.titulo-secao em {
  font-style: italic;
  color: var(--ouro-400);
}

.subtitulo {
  margin-top: var(--e-4);
  max-width: var(--largura-texto);
  font-size: var(--t-md);
  color: var(--texto-suave);
  line-height: 1.6;
}

/* Blocos sobre fundo claro */
.claro { background: var(--bg-claro); color: var(--texto-escuro-suave); }
.claro h1, .claro h2, .claro h3, .claro h4 { color: var(--tinta); }
.claro .rotulo { color: var(--ouro-700); }
.claro .subtitulo { color: var(--texto-escuro-suave); }
.claro .titulo-secao em { color: var(--ouro-700); }

/* ==========================================================================
   4. UTILITARIOS
   ========================================================================== */
.env {
  width: min(100% - var(--gutter) * 2, var(--largura));
  margin-inline: auto;
}
.env-estreito { --largura: 880px; }

.secao { padding-block: var(--secao-y); position: relative; }

.vsr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.cabeca-secao { max-width: 760px; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.cabeca-secao.centro { margin-inline: auto; text-align: center; }
.cabeca-secao.centro .rotulo::before { display: none; }
.cabeca-secao.centro .subtitulo { margin-inline: auto; }

/* Estrela de 4 pontas — ornamento retirado do lettering do selo */
.estrela {
  width: 14px; height: 14px;
  flex: none;
  color: var(--ouro-500);
}

/* Filete ornamental */
.filete {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--linha-ouro);
}
.filete::before, .filete::after {
  content: "";
  height: 1px;
  flex: 1;
  background: currentColor;
}

/* ==========================================================================
   5. COMPONENTES
   ========================================================================== */

/* --- 5.1 Botoes --- */
.btn {
  --btn-bg: var(--ouro-500);
  --btn-cor: var(--verde-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: .85rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-cor);
  font-family: var(--fonte-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  clip-path: var(--recorte);
  transition: background var(--transicao), transform var(--transicao), color var(--transicao);
}
.btn:hover { --btn-bg: var(--ouro-400); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* O recorte de canto corta qualquer borda; por isso o botao vazado
   usa borda real e dispensa o clip-path. */
.btn-vazado {
  --btn-bg: transparent;
  --btn-cor: var(--ouro-400);
  clip-path: none;
  border: 1px solid var(--ouro-600);
}
.btn-vazado:hover { --btn-bg: rgba(200, 156, 95, .14); --btn-cor: var(--ouro-300); border-color: var(--ouro-400); }

.claro .btn-vazado { --btn-cor: var(--verde-800); border-color: rgba(7, 62, 46, .35); }
.claro .btn-vazado:hover { --btn-bg: rgba(7, 62, 46, .07); --btn-cor: var(--verde-800); border-color: var(--verde-700); }

.btn-largo { width: 100%; }

/* --- 5.2 Cartao com cantos em esquadro (eco da moldura do selo) --- */
.cartao {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 95, .2);
  transition: background var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.cartao::before, .cartao::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--ouro-500);
  opacity: .85;
  transition: width var(--transicao), height var(--transicao);
}
.cartao::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.cartao::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.cartao:hover {
  background: rgba(255, 255, 255, .06);
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 95, .42);
}
.cartao:hover::before, .cartao:hover::after { width: 26px; height: 26px; }

.claro .cartao {
  background: var(--branco);
  box-shadow: inset 0 0 0 1px rgba(7, 62, 46, .1), var(--sombra-suave);
}
.claro .cartao:hover { background: var(--branco); box-shadow: inset 0 0 0 1px rgba(200, 156, 95, .55), var(--sombra-suave); }

/* --- 5.3 Faixa tipografica animada (asset LATERAL da identidade) --- */
.faixa {
  --altura: clamp(46px, 5vw, 74px);
  --duracao: 46s;
  position: relative;
  overflow: hidden;
  height: var(--altura);
  background: var(--verde-900);
  border-block: 1px solid rgba(200, 156, 95, .28);
}
.faixa--clara { background: var(--creme-2); }
.faixa__trilho {
  display: flex;
  width: 200%;
  height: 100%;
  animation: desliza var(--duracao) linear infinite;
  will-change: transform;
}
.faixa__peca {
  width: 50%;
  height: 100%;
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: left center;
  opacity: .55;
}
.faixa--ouro .faixa__peca { background-image: url("../img/faixa-ouro.webp"); }
.faixa--verde .faixa__peca { background-image: url("../img/faixa-verde.webp"); opacity: .6; }
@keyframes desliza {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --- 5.4 Aviso etario fixo no topo --- */
.aviso-18 {
  background: var(--verde-900);
  color: var(--texto-suave);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: .55rem var(--gutter);
  border-bottom: 1px solid rgba(200, 156, 95, .18);
}
.aviso-18 strong { color: var(--ouro-400); font-weight: 600; }

/* ==========================================================================
   6. CABECALHO / NAVEGACAO
   ========================================================================== */
.topo {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(7, 62, 46, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--transicao), border-color var(--transicao);
}
.topo.fixado {
  background: rgba(4, 38, 28, .95);
  border-bottom-color: rgba(200, 156, 95, .26);
}
.topo__int {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-height: 88px;
  padding-block: .6rem;
}
.topo__logo img { height: clamp(46px, 5.4vw, 66px); width: auto; }

.nav { margin-left: auto; }
.nav__lista { display: flex; align-items: center; gap: clamp(1rem, .3rem + 1.4vw, 2rem); }
.nav__lista a {
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--texto-suave);
  padding: .5rem 0;
  position: relative;
  transition: color var(--transicao);
}
.nav__lista a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--ouro-500);
  transition: width var(--transicao);
}
.nav__lista a:hover, .nav__lista a[aria-current="true"] { color: var(--branco); }
.nav__lista a:hover::after, .nav__lista a[aria-current="true"]::after { width: 100%; }

.topo .btn { min-height: 44px; padding: .6rem 1.2rem; font-size: var(--t-xs); }

.menu-btn {
  display: none;
  width: 46px; height: 46px;
  background: none;
  border: 1px solid rgba(200, 156, 95, .4);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.menu-btn span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--ouro-400);
  position: relative;
  transition: background var(--transicao);
}
.menu-btn span::before, .menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 1.5px;
  background: var(--ouro-400);
  transition: transform var(--transicao);
}
.menu-btn span::before { top: -6px; }
.menu-btn span::after  { top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   7. SECOES
   ========================================================================== */

/* --- 7.1 Hero --- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem) clamp(3rem, 2rem + 5vw, 5.5rem);
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(47, 134, 118, .35) 0%, transparent 62%),
    radial-gradient(90% 70% at 50% 110%, rgba(200, 156, 95, .16) 0%, transparent 60%),
    var(--verde-800);
}
/* Textura sutil de grao — evita o "verde chapado" */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .35;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

.hero__marca {
  width: min(78vw, 520px);
  margin: 0 auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .34));
}

.hero__edicao {
  margin-top: var(--e-6);
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .5rem 1.2rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro-300);
  background: rgba(200, 156, 95, .18);
  clip-path: var(--recorte);
}

.hero__linha {
  margin-top: var(--e-5);
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  font-style: italic;
  color: var(--verde-100);
  max-width: 30ch;
  margin-inline: auto;
  line-height: 1.3;
}

.hero__dados {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  border-block: 1px solid rgba(200, 156, 95, .3);
}
.hero__dado {
  padding: 1.4rem clamp(1.2rem, .6rem + 2vw, 2.6rem);
  /* Larguras iguais: com min-width as três colunas ficavam desalinhadas
     assim que a do meio passou a exibir a placa da marca. */
  flex: 1 1 0;
  min-width: 190px;
  border-left: 1px solid rgba(200, 156, 95, .22);
}
.hero__dado:first-child { border-left: 0; }
.hero__dado dt {
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro-500);
  font-weight: 600;
}
.hero__dado dd {
  margin: .35rem 0 0;
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  color: var(--branco);
  line-height: 1.25;
}

.hero__acoes {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  justify-content: center;
}

/* Contagem regressiva */
.contagem {
  margin-top: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-4);
}
.contagem__rotulo {
  font-size: var(--t-xs);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.contagem__grade { display: flex; gap: clamp(.5rem, .2rem + 1.2vw, 1rem); }
.contagem__cel {
  min-width: clamp(64px, 14vw, 92px);
  padding: .9rem .5rem .7rem;
  background: rgba(255, 255, 255, .09);
  clip-path: var(--recorte);
  text-align: center;
}
.contagem__num {
  display: block;
  font-family: var(--fonte-display);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
}
.contagem__uni {
  display: block;
  margin-top: .45rem;
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ouro-500);
}

/* --- 7.2 Numeros --- */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--linha-clara);
  box-shadow: 0 0 0 1px var(--linha-clara);
}
.numero {
  background: var(--bg-claro);
  padding: clamp(1.8rem, 1.2rem + 2vw, 2.8rem) clamp(1.2rem, .8rem + 1.5vw, 2rem);
  text-align: center;
}
/* Números na sans geométrica em peso máximo, e não na serifa: é a mesma
   família do lettering "09à13SET" do material oficial e tem muito mais
   presença nesse tamanho do que a Bodoni. */
.numero__valor {
  font-family: var(--fonte-sans);
  font-size: clamp(3rem, 2rem + 4.2vw, 5rem);
  font-weight: 600;
  line-height: .95;
  color: var(--verde-700);
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.numero__rotulo {
  margin-top: .85rem;
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ouro-700);
}
.numero__apoio { margin-top: .3rem; font-size: var(--t-sm); color: var(--texto-escuro-suave); }

/* --- 7.3 Sobre --- */
.sobre__grade {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .sobre__grade { grid-template-columns: 1.15fr .85fr; }
}
.sobre__texto p + p { margin-top: var(--e-4); }
.sobre__texto p { color: var(--texto-escuro-suave); }
.sobre__texto strong { color: var(--tinta); font-weight: 600; }

.destaque-dado {
  padding: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  background: var(--verde-800);
  color: var(--texto-claro);
  position: relative;
}
.destaque-dado .destaque-dado__valor {
  font-family: var(--fonte-display);
  font-size: clamp(3rem, 2rem + 4vw, 4.6rem);
  line-height: 1;
  color: var(--ouro-400);
  font-weight: 600;
}
.destaque-dado p { margin-top: var(--e-3); color: var(--texto-suave); font-size: var(--t-sm); }
.destaque-dado__fonte {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid rgba(200, 156, 95, .3);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ouro-500);
}

.citacao {
  margin-top: var(--e-5);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.2rem);
  background: var(--creme-2);
  border-left: 3px solid var(--ouro-500);
}
.citacao blockquote {
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  font-style: italic;
  line-height: 1.5;
  color: var(--tinta);
}
.citacao figcaption {
  margin-top: var(--e-4);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro-700);
  font-weight: 600;
}

/* --- 7.4 Experiencias --- */
.exp-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(1rem, .6rem + 1.2vw, 1.6rem);
}
/* 6 itens de programacao fecham em 3 colunas (2 linhas cheias) */
@media (min-width: 960px) {
  .exp-grade { grid-template-columns: repeat(3, 1fr); }
}
.exp__icone {
  width: 44px; height: 44px;
  color: var(--ouro-500);
  margin-bottom: var(--e-4);
}
.exp h3 { font-size: var(--t-md); }
.exp p { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--texto-suave); }

/* --- 7.5 Programacao --- */
.prog__abas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--e-6);
}
.prog__aba {
  flex: 1 1 140px;
  min-height: 76px;
  padding: .8rem 1rem;
  background: transparent;
  border: 1px solid rgba(200, 156, 95, .28);
  color: var(--texto-suave);
  cursor: pointer;
  text-align: left;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.prog__aba:hover { background: rgba(200, 156, 95, .1); color: var(--branco); }
.prog__aba[aria-selected="true"] {
  background: var(--ouro-500);
  border-color: var(--ouro-500);
  color: var(--verde-900);
}
.prog__aba-dia {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1;
}
.prog__aba-sem {
  display: block;
  margin-top: .3rem;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.prog__painel { padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); }
.prog__painel[hidden] { display: none; }
.prog__chamada { font-size: var(--t-lg); }
.prog__data {
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro-500);
  font-weight: 600;
  margin-bottom: .6rem;
  display: block;
}
.prog__itens { margin-top: var(--e-5); display: grid; gap: .9rem; }
.prog__itens li {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(200, 156, 95, .16);
  color: var(--texto-claro);
}
.prog__itens li:last-child { border-bottom: 0; padding-bottom: 0; }
.prog__itens .estrela { margin-top: .45rem; }

.aviso-brando {
  margin-top: var(--e-5);
  padding: .9rem 1.1rem;
  font-size: var(--t-sm);
  color: var(--texto-suave);
  background: rgba(200, 156, 95, .09);
  border-left: 2px solid var(--ouro-600);
}

/* --- 7.6 Expositores / cadeia produtiva --- */
.cadeia {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: var(--e-5);
}
.cadeia li {
  padding: .55rem 1rem;
  font-size: var(--t-sm);
  color: var(--texto-claro);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 95, .24);
}

.b2b {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .b2b { grid-template-columns: 1fr 1fr; } }

/* --- 7.7 Local --- */
.local { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .local { grid-template-columns: .85fr 1.15fr; } }
.local__lista { display: grid; gap: var(--e-5); margin-top: var(--e-5); }
.local__lista dt {
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro-700);
  font-weight: 600;
}
.local__lista dd { margin: .3rem 0 0; color: var(--texto-escuro-suave); }
.mapa {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--creme-2);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(7, 62, 46, .14);
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.8); }

/* --- 7.8 Apoio --- */
.apoio-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  /* 9 apoiadores: 3 colunas fecham a grade sem sobrar celula vazia */
  gap: 1px;
  background: rgba(200, 156, 95, .22);
  box-shadow: 0 0 0 1px rgba(200, 156, 95, .22);
  margin-top: var(--e-6);
}
.apoio-lista li {
  background: var(--verde-800);
  padding: 1.4rem 1.2rem;
  font-size: var(--t-sm);
  color: var(--texto-claro);
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 88px;
}
@media (min-width: 760px) {
  .apoio-lista { grid-template-columns: repeat(3, 1fr); }
}

/* --- 7.9 FAQ --- */
.faq { display: grid; gap: .6rem; }
.faq__item { background: var(--branco); box-shadow: inset 0 0 0 1px rgba(7, 62, 46, .1); }
.faq__botao {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, .7rem + 1vw, 1.6rem);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  color: var(--tinta);
  transition: color var(--transicao);
}
.faq__botao:hover { color: var(--ouro-700); }
.faq__sinal {
  flex: none;
  width: 26px; height: 26px;
  position: relative;
  border: 1px solid var(--ouro-600);
  transition: transform var(--transicao);
}
.faq__sinal::before, .faq__sinal::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  background: var(--ouro-700);
}
.faq__sinal::before { width: 11px; height: 1.5px; }
.faq__sinal::after  { width: 1.5px; height: 11px; transition: opacity var(--transicao); }
.faq__botao[aria-expanded="true"] .faq__sinal { transform: rotate(180deg); }
.faq__botao[aria-expanded="true"] .faq__sinal::after { opacity: 0; }
.faq__resp {
  padding: 0 clamp(1rem, .7rem + 1vw, 1.6rem) 1.4rem;
  color: var(--texto-escuro-suave);
  max-width: 70ch;
}
.faq__resp[hidden] { display: none; }

/* ==========================================================================
   8. SECAO DE CONTATO
   ========================================================================== */
.inscricao { position: relative; isolation: isolate; }
.inscricao::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(75% 60% at 20% 0%, rgba(47, 134, 118, .3), transparent 60%),
    var(--verde-900);
}

.contato-caixa {
  text-align: center;
  padding: clamp(2rem, 1.4rem + 2.6vw, 3.4rem) clamp(1.4rem, 1rem + 2vw, 3rem);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 95, .3);
}
.contato-caixa__icone {
  width: 52px; height: 52px;
  margin: 0 auto;
  color: var(--ouro-500);
}
.contato-caixa__titulo {
  margin-top: var(--e-4);
  font-size: var(--t-lg);
  color: var(--branco);
}
.contato-caixa__texto {
  margin: var(--e-4) auto 0;
  max-width: 52ch;
  color: var(--texto-suave);
}
.contato-caixa .btn-grande {
  margin-top: var(--e-6);
  min-height: 60px;
  font-size: var(--t-base);
  padding-inline: clamp(1.5rem, 1rem + 2vw, 2.6rem);
}
.contato-caixa__extra {
  margin-top: var(--e-5);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.contato-caixa__extra a {
  color: var(--ouro-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contato-caixa__extra a:hover { color: var(--ouro-300); }

.alerta {
  padding: 1rem 1.2rem;
  margin-bottom: var(--e-5);
  font-size: var(--t-sm);
  border-left: 3px solid;
}
.alerta--ok  { background: rgba(47, 134, 118, .18); border-color: var(--verde-500); color: var(--verde-100); }
.alerta--erro{ background: rgba(232, 149, 107, .12); border-color: #E8956B; color: #FFD9C6; }

/* ==========================================================================
   9. RODAPE
   ========================================================================== */
.rodape { background: var(--verde-900); padding-block: var(--e-8) var(--e-6); }
.rodape__grade {
  display: grid;
  gap: var(--e-7);
  align-items: start;
}
@media (min-width: 800px) { .rodape__grade { grid-template-columns: 1.2fr 1fr 1fr; } }
.rodape__marca img { width: min(240px, 60vw); }
.rodape h3 {
  font-family: var(--fonte-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro-500);
  margin-bottom: var(--e-4);
}
.rodape__links { display: grid; gap: .6rem; }
.rodape__links a { color: var(--texto-suave); font-size: var(--t-sm); transition: color var(--transicao); }
.rodape__links a:hover { color: var(--ouro-400); }

.social { display: flex; gap: .7rem; margin-top: var(--e-4); }
.social a {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  color: var(--ouro-400);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 95, .35);
  transition: background var(--transicao), color var(--transicao);
}
.social a:hover { background: var(--ouro-500); color: var(--verde-900); }
.social svg { width: 20px; height: 20px; }

.rodape__base {
  margin-top: var(--e-8);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(200, 156, 95, .2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .5);
}
.rodape__legal { max-width: 62ch; line-height: 1.7; }
.rodape__legal strong { color: var(--ouro-400); }

/* ==========================================================================
   10. RESPONSIVO E MOVIMENTO
   ========================================================================== */

/* Revelacao ao rolar */
.revela {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--transicao-lenta), transform var(--transicao-lenta);
}
.revela.visivel { opacity: 1; transform: none; }

@media (max-width: 900px) {
  /* IMPORTANTE: backdrop-filter cria um contexto de empilhamento e faz do
     .topo o bloco-contentor dos filhos position:fixed — o que prendia o
     menu lateral dentro da altura do cabecalho. Em telas pequenas o blur
     e dispensavel, entao usamos fundo solido. */
  .topo {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(4, 38, 28);
  }
  .topo.fixado { background: rgb(4, 38, 28); }

  .menu-btn { display: flex; }
  .topo__int { gap: var(--e-3); }
  /* Fechado, o painel fica DENTRO da viewport (invisivel e sem eventos).
     Posicionar em translateX(100%) esticava o documento e criava
     rolagem horizontal no celular. */
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(84vw, 340px);
    background: var(--verde-900);
    border-left: 1px solid rgba(200, 156, 95, .28);
    padding: 6rem var(--e-5) var(--e-6);
    transform: translateX(28px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transicao), opacity var(--transicao), visibility 0s linear .22s;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 95;
  }
  .nav.aberto {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--transicao), opacity var(--transicao), visibility 0s;
  }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lista li { border-bottom: 1px solid rgba(200, 156, 95, .16); }
  .nav__lista a { display: block; padding: 1rem 0; font-size: var(--t-md); }
  .nav__lista a::after { display: none; }
  /* ".nav__lista a" tem especificidade maior que ".btn" e virava display:block,
     jogando o rotulo para a esquerda. Reforcamos o botao aqui. */
  .nav .btn {
    display: inline-flex;
    justify-content: center;
    margin-top: var(--e-5);
    width: 100%;
    padding: .95rem 1.4rem;
  }
  .menu-btn { z-index: 96; }
  body.menu-aberto { overflow: hidden; }
  .cortina {
    position: fixed;
    inset: 0;
    background: rgba(4, 38, 28, .6);
    backdrop-filter: blur(2px);
    z-index: 94;
  }
  /* O .topo tem z-index proprio e cria um contexto de empilhamento: sem esta
     regra a cortina (irma do body) ficaria por cima do menu, esmaecendo-o e
     bloqueando os cliques. */
  body.menu-aberto .topo { z-index: 96; }
}

@media (max-width: 640px) {
  /* Em coluna, o align-items usado no desktop encostava tudo à esquerda;
     aqui o eixo cruzado é horizontal e precisa voltar a esticar. */
  .hero__dados { flex-direction: column; align-items: stretch; }
  .hero__dado { border-left: 0; border-top: 1px solid rgba(200, 156, 95, .22); min-width: 0; }
  .hero__dado:first-child { border-top: 0; }
  .hero__acoes .btn { width: 100%; }
  .prog__aba { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .revela { opacity: 1; transform: none; }
  .faixa__trilho { animation: none; }
}

@media print {
  .topo, .faixa, .menu-btn, .hero::after, .inscricao { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   11. BLOCOS COM FOTOGRAFIA (material oficial do festival)
   ========================================================================== */

/* Bloco de texto + imagem, alternando o lado */
.duo {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3.5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--inverso .duo__foto { order: -1; }
  .duo--texto-maior { grid-template-columns: 1.1fr .9fr; }
}

.duo__texto > p { margin-top: var(--e-4); }
.duo__texto .abertura {
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--tinta);
}
.claro .duo__texto > p { color: var(--texto-escuro-suave); }
.duo__texto strong { font-weight: 600; }
.claro .duo__texto strong { color: var(--tinta); }

/* Moldura de foto com o esquadro da marca */
.figura {
  position: relative;
  margin: 0;
}
.figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.figura::before, .figura::after {
  content: "";
  position: absolute;
  width: 34px; height: 34px;
  border: 1px solid var(--ouro-500);
  pointer-events: none;
}
.figura::before { top: -10px; left: -10px; border-right: 0; border-bottom: 0; }
.figura::after  { bottom: -10px; right: -10px; border-left: 0; border-top: 0; }
.figura--alta img { aspect-ratio: 3 / 4; }
.figura--larga img { aspect-ratio: 16 / 9; }
.figura--panoramica img { aspect-ratio: 21 / 8; }

.figura figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ouro-700);
}

/* Selo de destaque (Indicação Geográfica) */
.selo-destaque {
  margin-top: var(--e-6);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  background: var(--verde-800);
  color: var(--texto-claro);
  position: relative;
}
.selo-destaque__chapeu {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro-400);
}
.selo-destaque h3 { margin-top: var(--e-3); font-size: var(--t-md); color: var(--branco); }
.selo-destaque p  { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--texto-suave); }

/* Lista de checagem do resumo */
.checklist {
  display: grid;
  gap: .8rem;
  margin-top: var(--e-5);
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(200, 156, 95, .2);
  font-size: var(--t-md);
  font-family: var(--fonte-display);
  color: var(--branco);
}
.checklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.checklist .estrela { margin-top: .5rem; }

/* Etiquetas de perfil de expositor */
.etiquetas { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: var(--e-5); }
.etiquetas li {
  padding: .5rem 1rem;
  font-size: var(--t-sm);
  background: var(--branco);
  color: var(--texto-escuro);
  box-shadow: inset 0 0 0 1px rgba(7, 62, 46, .14);
}

/* Chamada de encerramento — o mote da campanha */
.mote {
  text-align: center;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.mote p {
  max-width: 58ch;
  margin-inline: auto;
  color: var(--texto-suave);
}
.mote__frase {
  margin-top: var(--e-5);
  font-family: var(--fonte-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--ouro-400);
}

/* Faixa fotográfica de largura total */
/* Altura fixa em vez de aspect-ratio: combinar aspect-ratio com max-height
   faz o navegador encolher a LARGURA para respeitar a proporção, e a faixa
   deixa de ocupar a tela inteira. */
.faixa-foto {
  position: relative;
  overflow: hidden;
  margin: 0;
  width: 100%;
  height: clamp(230px, 26vw, 420px);
}
.faixa-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

@media (max-width: 700px) {
  .faixa-foto { height: 250px; }
}

/* ==========================================================================
   13. WHATSAPP
   ========================================================================== */

/* --- 13.1 Botao flutuante fixo --- */
.zap-fixo {
  position: fixed;
  right: clamp(.9rem, .4rem + 1.4vw, 1.75rem);
  bottom: clamp(.9rem, .4rem + 1.4vw, 1.75rem);
  z-index: 80;                 /* abaixo do menu lateral (95) e da cortina (94) */

  display: inline-flex;
  align-items: center;
  gap: .65rem;

  min-height: 56px;
  padding: 0 1.15rem;
  border-radius: 999px;

  background: #1FA855;         /* verde institucional do WhatsApp */
  color: #fff;
  font-family: var(--fonte-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .02em;

  box-shadow: 0 6px 22px rgba(4, 38, 28, .34), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  transition: transform var(--transicao), background var(--transicao), box-shadow var(--transicao);
}
.zap-fixo svg { width: 26px; height: 26px; flex: none; }
.zap-fixo:hover {
  background: #17924A;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(4, 38, 28, .4);
}
.zap-fixo:active { transform: translateY(0); }
.zap-fixo:focus-visible { outline: 3px solid var(--ouro-400); outline-offset: 3px; }

/* Aparece só depois que o visitante começa a rolar, para não cobrir o hero */
.zap-fixo {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
}
.zap-fixo.visivel { opacity: 1; visibility: visible; transform: none; }

/* No celular vira botão circular, para não roubar largura da tela */
@media (max-width: 640px) {
  .zap-fixo { min-width: 56px; padding: 0; justify-content: center; }
  .zap-fixo__texto { display: none; }
}

/* Enquanto o menu lateral estiver aberto, some */
body.menu-aberto .zap-fixo { opacity: 0; visibility: hidden; }

/* --- 13.2 Botoes de WhatsApp no conteudo --- */
.acoes-duplas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  align-items: center;
}

.atalho-zap {
  margin-top: var(--e-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
}
.atalho-zap__num {
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  color: var(--ouro-400);
  letter-spacing: .02em;
}
.atalho-zap__ou {
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ==========================================================================
   14. MESA REDONDA
   ========================================================================== */

/* --- 14.1 Cartaz do tema --- */
.mesa-cartaz {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  padding: clamp(1.8rem, 1.2rem + 2.4vw, 3rem) clamp(1.2rem, .8rem + 2vw, 2.5rem);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 95, .3);
}
.mesa-cartaz__selo {
  display: inline-block;
  padding: .55rem 1.6rem;
  background: var(--ouro-500);
  color: var(--verde-900);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  clip-path: var(--recorte);
}
/* Especificidade reforçada: o cartaz fica dentro de uma seção .claro, e
   ".claro h3" venceria ".mesa-cartaz__tema", pintando o texto de verde
   escuro sobre fundo verde escuro. */
.mesa-cartaz .mesa-cartaz__tema {
  margin-top: var(--e-5);
  font-size: var(--t-xl);
  line-height: 1.18;
  color: var(--branco);
  text-wrap: balance;
}

.mesa-quando {
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, .6rem + 1.5vw, 2rem);
  padding: .9rem clamp(1.2rem, .8rem + 1.5vw, 2rem);
  background: rgba(200, 156, 95, .12);
  clip-path: var(--recorte);
}
.mesa-quando__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fonte-display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
  color: var(--branco);
  line-height: 1;
}
.mesa-quando__item svg { width: 26px; height: 26px; color: var(--ouro-400); flex: none; }
.mesa-quando__risco { width: 1px; align-self: stretch; background: rgba(200, 156, 95, .45); }

.mesa-parceria {
  margin-top: var(--e-5);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  max-width: 58ch;
  margin-inline: auto;
}

/* --- 14.2 Participantes --- */
.participantes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, .6rem + 1.4vw, 1.8rem);
  margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem);
}

.participante {
  display: flex;
  gap: clamp(.9rem, .6rem + 1vw, 1.3rem);
  align-items: flex-start;
  padding: clamp(1.2rem, .9rem + 1vw, 1.7rem);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 95, .2);
  transition: background var(--transicao), box-shadow var(--transicao);
}
.participante:hover {
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 95, .42);
}

.participante__foto {
  flex: none;
  width: clamp(72px, 8vw, 92px);
  height: clamp(72px, 8vw, 92px);
  border-radius: 50%;
  object-fit: cover;
  background: var(--verde-700);
  box-shadow: 0 0 0 2px var(--ouro-500), 0 0 0 5px rgba(200, 156, 95, .18);
}

.participante__papel {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro-500);
  margin-bottom: .25rem;
}
.participante__nome {
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  color: var(--branco);
  line-height: 1.2;
}
.participante__bio {
  margin-top: .55rem;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--texto-suave);
}

/* --- 14.3 Publico alvo --- */
.publico-alvo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: .9rem;
  margin-top: var(--e-6);
}
.publico-alvo li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 95, .18);
  font-size: var(--t-sm);
  color: var(--texto-claro);
}
.publico-alvo .estrela { margin-top: .35rem; }
.publico-alvo strong {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ouro-400);
  line-height: 1.2;
  margin-bottom: .15rem;
}

/* ==========================================================================
   15. LOGOMARCAS DE APOIO
   ========================================================================== */
/* São 8 marcas: 4 colunas fecham duas linhas cheias, sem célula órfã.
   Com auto-fit a grade quebrava em 7 + 1. */
.logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(200, 156, 95, .2);
  box-shadow: 0 0 0 1px rgba(200, 156, 95, .2);
}
@media (min-width: 640px)  { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .logos { grid-template-columns: repeat(4, 1fr); } }

.logos__item {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem) clamp(1rem, .8rem + 1.2vw, 1.8rem);
  background: var(--verde-800);
  min-height: 132px;
}

/* Tag opcional (ex.: "Produção"), no canto superior da célula */
.logos__tag {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: .25rem .55rem;
  font-family: var(--fonte-sans);
  font-size: clamp(.62rem, .58rem + .12vw, .7rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ouro-300);
  background: rgba(200, 156, 95, .16);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 95, .45);
}

.logos__marca {
  width: auto;
  max-width: 100%;
  /* Normaliza pela ALTURA, e não pela largura: mantém o peso visual parelho
     entre marcas horizontais (Sesc) e verticais (AGOPCAL). */
  height: clamp(40px, 4.4vw, 58px);
  object-fit: contain;
  opacity: .92;
  transition: opacity var(--transicao), transform var(--transicao);
}
.logos__item:hover .logos__marca { opacity: 1; transform: scale(1.04); }

/* O selo da AGOPCAL é quase quadrado e encolhe demais ao lado dos outros */
.logos__item:nth-child(3) .logos__marca { height: clamp(58px, 6.2vw, 82px); }

@media (max-width: 520px) {
  .logos__item { min-height: 108px; }
}

/* ==========================================================================
   16. SOBRE O LOCAL — MARCA DO FLAMBOYANT HALL
   --------------------------------------------------------------------------
   O vermelho da marca (#C01420) tem contraste 1.94:1 sobre o verde
   institucional — ilegível. Em vez de recolorir a marca de terceiro, ela fica
   isolada num cartão claro, onde chega a 6.25:1 e mantém as cores originais.
   O vermelho aparece só como filete no topo do cartão, para o contato com a
   paleta do festival ser intencional e não acidental.
   ========================================================================== */
:root { --vermelho-local: #C01420; }

.local-topo {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
}
@media (min-width: 760px) {
  .local-topo { grid-template-columns: auto 1fr; }
}

/* Marca em versão branca sobre o próprio fundo, sem cartão. */
.marca-local {
  margin: 0;
  justify-self: start;
  display: grid;
  place-items: center;
}
.marca-local img {
  width: clamp(180px, 21vw, 260px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .28));
}

.local-topo__texto .titulo-secao { margin-top: var(--e-3); }
.local-topo__texto .titulo-secao em {
  font-style: italic;
  color: var(--ouro-400);
}

.local-topo__endereco {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.local-topo__endereco svg {
  width: 18px; height: 18px;
  flex: none;
  color: var(--ouro-500);
}

@media (max-width: 759px) {
  .marca-local { justify-self: center; }
  .local-topo { text-align: center; }
  .local-topo .rotulo::before { display: none; }

  /* Como bloco flex o ícone ficava sozinho na margem quando o endereço
     quebrava em duas linhas. Em bloco, ele flui junto com o texto. */
  .local-topo__endereco { display: block; }
  .local-topo__endereco svg {
    display: inline-block;
    vertical-align: -4px;
    margin-right: .35rem;
  }
}

/* ==========================================================================
   17. MARCA DO LOCAL NO HERO
   --------------------------------------------------------------------------
   Versão monocromática branca, aplicada direto sobre o verde. Dispensa o
   cartão claro que era necessário enquanto a marca estava nas cores originais
   (o vermelho tinha só 1,94:1 de contraste sobre o fundo).
   ========================================================================== */
.hero__marca-local {
  display: block;
  width: clamp(128px, 13vw, 172px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .3));
}

/* A coluna "Onde" fica mais alta que as vizinhas; o alinhamento pelo topo
   mantém os rótulos QUANDO / ONDE / QUANTO na mesma linha.
   Escopado ao layout em linha: este bloco fica no fim do arquivo e, sem a
   media query, venceria por ordem de cascata a regra do modo empilhado. */
@media (min-width: 641px) {
  .hero__dados { align-items: flex-start; }
}
.hero__dado--local dd { margin-top: .6rem; }

.hero__cidade {
  display: block;
  margin-top: .6rem;
  font-family: var(--fonte-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro-400);
}

/* ==========================================================================
   18. AGENDA COMPLETA
   --------------------------------------------------------------------------
   Linha do tempo por dia. Sem JavaScript nada fica escondido: os filtros só
   aparecem quando o script assume o controle, então a agenda inteira continua
   legível e indexável.
   ========================================================================== */

/* --- 18.1 Barra: contador + download --- */
.agc__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid rgba(200, 156, 95, .22);
}
.agc__contador { display: flex; align-items: baseline; gap: .6rem; }
.agc__contador strong {
  font-family: var(--fonte-sans);
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ouro-400);
  font-variant-numeric: tabular-nums;
}
.agc__contador span { font-size: var(--t-sm); color: var(--texto-suave); }

/* --- 18.2 Filtros --- */
.agc__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, .6rem + 1.4vw, 2.2rem);
  padding-block: var(--e-5);
}
.agc__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.agc__grupo-rot {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro-500);
  margin-right: .3rem;
}
.agc__chip {
  min-height: 44px;
  padding: .55rem 1.05rem;
  font-family: var(--fonte-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto-claro);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(200, 156, 95, .28);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.agc__chip:hover { background: rgba(200, 156, 95, .16); }
.agc__chip[aria-pressed="true"] {
  background: var(--ouro-500);
  border-color: var(--ouro-500);
  color: var(--verde-900);
  font-weight: 600;
}

.agc__vazio {
  margin-top: var(--e-6);
  padding: 1.1rem 1.3rem;
  font-size: var(--t-sm);
  color: var(--texto-suave);
  background: rgba(200, 156, 95, .09);
  border-left: 2px solid var(--ouro-600);
}
.agc__limpar {
  background: none;
  border: 0;
  padding: 0 0 1px;
  color: var(--ouro-400);
  font: inherit;
  cursor: pointer;
  border-bottom: 1px solid currentColor;
}

/* --- 18.3 Blocos de dia --- */
.agc__lista { margin-top: var(--e-6); }
.agc__dia + .agc__dia { margin-top: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); }
.agc__dia[hidden] { display: none; }

.agc__dia-cab {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(200, 156, 95, .3);
  /* Fica preso ao topo enquanto o dia rola — ajuda a não perder a referência
     numa lista longa. */
  position: sticky;
  top: 88px;
  z-index: 5;
  background: var(--verde-900);
}
.agc__dia-num {
  font-family: var(--fonte-sans);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--branco);
}
.agc__dia-mes { color: var(--ouro-500); }
.agc__dia-sem {
  font-family: var(--fonte-display);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--verde-100);
}
.agc__dia-qtd {
  margin-left: auto;
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* --- 18.4 Linha do tempo --- */
.agc__linha { margin-top: var(--e-5); display: grid; gap: 1px; }

.agc__item {
  display: grid;
  gap: .55rem;
  padding: clamp(1.1rem, .9rem + .8vw, 1.5rem) 0;
  border-bottom: 1px solid rgba(200, 156, 95, .14);
}
.agc__item:last-child { border-bottom: 0; }
.agc__item[hidden] { display: none; }

@media (min-width: 780px) {
  .agc__item {
    grid-template-columns: 168px 1fr;
    gap: clamp(1.2rem, .8rem + 1.6vw, 2.4rem);
    align-items: start;
  }
}

.agc__hora {
  font-family: var(--fonte-sans);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ouro-400);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agc__cartao { min-width: 0; }

.agc__tipo {
  display: inline-block;
  padding: .22rem .6rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--verde-900);
  background: var(--verde-200);
}
/* Uma cor por tipo, para a lista ser varrida de relance */
.agc__tipo--abertura     { background: var(--ouro-500); }
.agc__tipo--seminario    { background: var(--verde-100); }
.agc__tipo--palestra     { background: var(--ouro-300); }
.agc__tipo--cozinha-show { background: var(--verde-200); }

.agc__nome {
  margin-top: .5rem;
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  line-height: 1.3;
  color: var(--branco);
  text-wrap: pretty;
}

.agc__meta {
  margin-top: .7rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.3rem;
}
.agc__meta li {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.agc__meta svg { width: 15px; height: 15px; flex: none; color: var(--ouro-600); }

.agc__nota {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  text-align: center;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

@media (max-width: 779px) {
  .agc__dia-cab { top: 76px; }
  .agc__dia-qtd { margin-left: 0; width: 100%; }
}

/* Horários gerais de funcionamento, dentro da seção de programação */
.agc__funcionamento {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: var(--e-4);
  padding: .55rem 1.1rem;
  font-size: var(--t-sm);
  color: var(--verde-100);
  background: rgba(200, 156, 95, .12);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 95, .3);
}
.agc__funcionamento svg { width: 17px; height: 17px; flex: none; color: var(--ouro-400); }

/* Dia em andamento — marcado pelo JS durante o festival */
.agc__dia--hoje .agc__dia-num { color: var(--ouro-400); }
.agc__marca-hoje {
  display: inline-block;
  margin-left: .6rem;
  padding: .18rem .55rem;
  font-family: var(--fonte-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde-900);
  background: var(--ouro-500);
  vertical-align: middle;
}