/* =========================================================================
   Páginas internas: Programação (programacao.html) e História (historia.html)
   Usa os mesmos tokens, escala (--u), cabeçalho, menu, busca, redes e rodapé
   de style.css. Coordenadas em px do design de cada página:
     Programação: artboard 1986 px, centro x=1025 → palco x = design − 250
     História:    artboard 1978 px, coluna de texto x 379–1669 (1290 px)
   ========================================================================= */
@font-face { font-family: "Gill Sans"; src: url("../fonts/gill-sans-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Gillune"; src: url("../fonts/gillune-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --f-body: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  --pin-a: #fbb326;
  --pin-b: #fec907;
  --pin-orange: #f06d22;
}

/* Decorações vetoriais com a opacidade do design */
.palm-circ, .palm-hist { opacity: .06; }
.pins-hist { opacity: .49; }

/* =========================================================================
   PROGRAMAÇÃO — título da página
   ========================================================================= */
.page-top .stage { --h: 219.3; }
.page-h {
  position: absolute; left: 0; right: 0; z-index: 3;
  top: calc(13.1 * var(--u));
  text-align: center;
  font-size: calc(134.98 * var(--u));
}
.g-alt { font-family: var(--f-cond); }

/* =========================================================================
   PROGRAMAÇÃO — Circuitos alternativos
   ========================================================================= */
.circuitos .stage { --h: 893.2; } /* termina na base da foto (689.2 + 204) */
.circ-h {
  position: absolute; left: 0; right: 0; z-index: 3;
  top: calc(87 * var(--u));
  text-align: center;
  font-size: calc(132.05 * var(--u));
  line-height: calc(109 * var(--u));
}
.circ-cols {
  position: absolute; left: calc(125 * var(--u)); top: calc(393.3 * var(--u));
  display: grid; grid-template-columns: repeat(3, calc(420 * var(--u)));
}
.circ-nome { text-align: center; font-family: var(--f-title); line-height: 1; }
.circ-nome span { position: relative; display: inline-block; font-size: calc(33.7 * var(--u)); }
.circ-nome strong { display: block; margin-top: calc(9 * var(--u)); font-weight: normal; font-size: calc(40.9 * var(--u)); white-space: nowrap; }
.circ-pin {
  display: inline-block; vertical-align: bottom;
  width: calc(27.8 * var(--u)); height: calc(41.5 * var(--u));
  margin: 0 calc(1 * var(--u)) calc(-6 * var(--u)) 0;
  color: var(--pin-a);
}
.circ-local {
  min-height: calc(42 * var(--u));
  margin-top: calc(8 * var(--u));
  text-align: center;
  font: 700 calc(19.4 * var(--u)) / calc(21 * var(--u)) var(--f-list);
}
.circ-lista {
  margin-top: calc(20 * var(--u)); padding-left: calc(86 * var(--u));
  font: 800 calc(24.5 * var(--u)) / calc(29.85 * var(--u)) var(--f-list);
}
.circ-lista li { display: flex; align-items: center; gap: calc(7 * var(--u)); white-space: nowrap; }
.circ-lista li::before {
  content: ""; flex: none; width: calc(13 * var(--u)); aspect-ratio: 16 / 24;
  background: var(--pin-a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M8 0a8 8 0 0 0-8 8c0 5.6 6.6 14.4 7.2 15.3a1 1 0 0 0 1.6 0C9.4 22.4 16 13.6 16 8a8 8 0 0 0-8-8Zm0 11.5A3.5 3.5 0 1 1 8 4.5a3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M8 0a8 8 0 0 0-8 8c0 5.6 6.6 14.4 7.2 15.3a1 1 0 0 0 1.6 0C9.4 22.4 16 13.6 16 8a8 8 0 0 0-8-8Zm0 11.5A3.5 3.5 0 1 1 8 4.5a3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.circ-lista li:nth-child(even)::before { background: var(--pin-b); }
.circ.is-orange .circ-pin { color: var(--pin-orange); }
.circ.is-orange .circ-lista li::before { background: var(--pin-orange); }
.circ-foto {
  position: absolute; z-index: 2;
  left: calc(807.7 * var(--u)); bottom: 0;
  width: calc(624.5 * var(--u));
}
/* Foto rente à seção azul de baixo: entra só com fade, sem deslizar por cima dela */
.js .circ-foto.reveal { transform: none; }

/* Redes sem título (design da Programação) */
.redes.sem-titulo .stage { --h: 251; }
.redes.sem-titulo .redes-txt { top: calc(46 * var(--u)); }
.redes.sem-titulo .redes-icons { top: calc(40 * var(--u)); }

/* =========================================================================
   HISTÓRIA
   ========================================================================= */
.hist-sec { --bg-color: var(--blue); }
.hist-col {
  position: relative; z-index: 2;
  width: calc(1290 * var(--u));
  margin-inline: auto;
}
.hist-h { font-size: calc(93.71 * var(--u)); margin-left: calc(53.4 * var(--u)); }
.hist-h2 { margin-left: calc(36.8 * var(--u)); }
.hist-txt {
  font: 600 calc(44 * var(--u)) / calc(52.8 * var(--u)) var(--f-body);
  text-align: justify;
  hyphens: manual;
}
.hist-txt p + p { margin-top: calc(52.8 * var(--u)); }
.hist-fig { margin: 0; }
.hist-fig img { width: 100%; }
.hist-fig figcaption {
  margin-top: calc(4 * var(--u));
  text-align: center;
  font: 600 calc(38 * var(--u)) / 1.2 var(--f-body);
}

/* Respiro entre a linha do cabeçalho e o título (pedido 2026-10-29) */
.hist-abertura { padding: max(32px, calc(80 * var(--u))) 0 calc(14 * var(--u)); }
.hist-abertura .hist-txt { margin-top: calc(84 * var(--u)); }
.fig-praca { margin: calc(-12 * var(--u)) 0 0 calc(91 * var(--u)); width: calc(1130.5 * var(--u)); }

#um-pouco-de-historia { padding: calc(43 * var(--u)) 0 calc(33 * var(--u)); }
/* A última linha de pixels de historia-2.jpg é clara e aparecia como uma
   linha branca antes da Eunira: a imagem fica 4px mais alta que a seção,
   presa no topo, e essa borda sai da área visível. */
#um-pouco-de-historia { background-size: auto calc(100% + 4px); background-position: center top; }
@media (min-width: 2600px) { #um-pouco-de-historia { background-size: cover; } }

/* Palmeira da última seção fica por trás do rodapé */
.pg-historia .site-footer, .pg-programacao .site-footer { z-index: 2; }
#um-pouco-de-historia .hist-txt { margin-top: calc(47.4 * var(--u)); }

.hist-destaque { display: grid; align-items: center; }
.dest-h { font-size: calc(114.44 * var(--u)); line-height: calc(94.32 * var(--u)); }
.dest-sub { margin-top: calc(40 * var(--u)); font: 600 calc(46.95 * var(--u)) / calc(56.33 * var(--u)) var(--f-body); }

#eunira-boaventura { padding: calc(38.5 * var(--u)) 0 calc(14 * var(--u)); }
.dest-eunira { grid-template-columns: calc(738 * var(--u)) calc(425.5 * var(--u)); }
.dest-eunira .dest-sub { margin-top: calc(48 * var(--u)); }
.fig-eunira figcaption, .fig-trio figcaption { white-space: nowrap; }

#trio-patury { padding: calc(53.8 * var(--u)) 0 calc(20 * var(--u)); }
.dest-trio {
  margin-top: calc(100 * var(--u)); padding-left: calc(7 * var(--u));
  grid-template-columns: calc(732 * var(--u)) 1fr; column-gap: calc(57 * var(--u));
  align-items: end;
}
.dest-trio .dest-sub { margin-top: calc(48 * var(--u)); text-align: justify; }

#circuitos-da-festa { padding: calc(175 * var(--u)) 0 calc(10 * var(--u)); }

/* Fotos de acervo: entram girando de leve */
.js .hist-fig.reveal { transform: translateY(40px) rotate(-2deg); }
.js .hist-fig.reveal.is-in { transform: none; }
.js .circ.reveal { transition-delay: calc(var(--i) * 120ms); }

/* =========================================================================
   Celular e tablet (< 960px)
   ========================================================================= */
@media (max-width: 959.98px) {
  /* Título da Programação */
  .page-top .stage { height: auto; padding-block: 26px 8px; }
  .page-h { position: static; font-size: clamp(38px, 11vw, 92px); }

  /* Circuitos: fluxo normal */
  .circuitos .stage { width: auto; height: auto; margin-inline: var(--gutter); padding-block: 34px 0; }
  .circ-h, .circ-cols, .circ-foto { position: static; }
  .circ-h { font-size: clamp(34px, 10vw, 80px); line-height: .86; }
  .circ-cols { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
  .circ-nome span { font-size: 18px; }
  .circ-nome strong { font-size: 24px; margin-top: 4px; }
  .circ-nome .circ-pin { width: 18px; height: 27px; margin: 0 4px -4px 0; }
  .circ-local { min-height: 0; margin-top: 6px; font-size: 13px; line-height: 1.3; }
  .circ-lista {
    margin-top: 14px; padding-left: 0;
    columns: 2; column-gap: 14px;
    font-size: 14px; line-height: 1.6;
  }
  .circ-lista li { break-inside: avoid; white-space: normal; gap: 6px; }
  .circ-lista li::before { width: 10px; }
  .circ-foto { width: min(100%, 560px); margin: 30px auto 0; }
  .palm-circ { width: 70%; }

  /* Redes sem título */
  .redes.sem-titulo .stage { height: auto; }
}
@media (min-width: 600px) and (max-width: 959.98px) {
  .circ-cols { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .circ-lista { columns: 1; padding-left: 10%; font-size: 14px; }
}

/* História no celular (< 600px): coluna única, sem medidas do design */
@media (max-width: 599.98px) {
  .hist-col { width: auto; margin-inline: var(--gutter); }
  .hist-h, .hist-h2 { margin-left: 0; font-size: clamp(26px, 8.6vw, 44px); white-space: normal; line-height: 1.02; }
  .hist-txt { font-size: 17px; line-height: 1.5; text-align: left; }
  .hist-txt p + p { margin-top: 1em; }
  .hist-fig figcaption { margin-top: 6px; font-size: 14px; }

  .hist-abertura { padding: 40px 0 20px; }
  .hist-abertura .hist-txt { margin-top: 20px; }
  .fig-praca { width: 100%; margin: 26px 0 0; }
  #um-pouco-de-historia { padding: 30px 0 24px; }
  #um-pouco-de-historia .hist-txt { margin-top: 20px; }

  .hist-destaque { gap: 22px; }
  .dest-h { font-size: clamp(34px, 11vw, 56px); line-height: .9; }
  .dest-sub { margin-top: 12px; font-size: 19px; line-height: 1.3; }
  #eunira-boaventura { padding: 24px 0 26px; }
  .dest-eunira { grid-template-columns: 1fr; }
  .dest-eunira .dest-sub { margin-top: 12px; }
  .fig-eunira { width: min(78%, 320px); margin-inline: auto; }
  .fig-eunira figcaption { white-space: normal; }

  #trio-patury { padding: 26px 0 30px; }
  .dest-trio { grid-template-columns: 1fr; margin-top: 30px; padding-left: 0; }
  .dest-trio .dest-sub { margin-top: 12px; text-align: left; }
  #circuitos-da-festa { padding: 30px 0 34px; }
}

/* Tablet (600–959px): mantém as proporções do design, com tamanhos mínimos legíveis */
@media (min-width: 600px) and (max-width: 959.98px) {
  .hist-txt { font-size: max(17px, calc(44 * var(--u))); line-height: 1.32; }
  .hist-txt p + p { margin-top: 1em; }
  .hist-fig figcaption { font-size: max(13px, calc(38 * var(--u))); }
  .dest-sub { font-size: max(16px, calc(46.95 * var(--u))); line-height: 1.25; }
}