/* ============================================================
   Flore-ser · Guia de Campo do Cerrado Urbano
   Site de divulgação · Projeto de Extensão UFG · FAPEG 12/2025
   ============================================================ */

:root{
  /* ---- paleta (herbário comum) ---- */
  --papel-cerrado:#F4EDDD;   /* fundo primário */
  --creme-semente:#EADFC7;   /* fundo secundário, cartões, faixas */
  --tinta-terra:#2A2418;     /* texto principal */
  --verde-cerrado:#38512F;   /* acento primário, fundos escuros */
  --oliva-folha:#5C6A34;     /* acento secundário: texto/kickers/filetes (AA) */
  --terracota-ipe:#C0603A;   /* destaque quente GRANDE: hero, ilustração */
  --terracota-texto:#A64B29; /* terracota p/ texto pequeno (AA sobre papel) */
  --ocre-pequi:#D89B34;      /* realce não-textual, pinos, hover */
  --casca-escura:#4A3826;    /* terra profunda, rodapé, sombras */
  --magenta-riso:#E5286E;    /* pulso artístico, selos de festival */
  /* o selo do cartaz é o único ponto em que o magenta vira TEXTO, e a 9px:
     #E5286E dá 3.70:1 sobre o papel (e menos ainda com a opacidade que a
     regra aplicava). Este tom fecha 5.41:1 mantendo o mesmo matiz. */
  --magenta-selo:#B81C57;

  --papel-70:rgba(244,237,221,.72);
  --linha:rgba(74,56,38,.16);
  --linha-2:rgba(74,56,38,.28);
  --linha-clara:rgba(244,237,221,.18);

  /* ---- camada semantica de papeis ----
     Os dez pigmentos acima sao POLISSEMICOS (o mesmo hex pinta superficie e
     tinta). O tema escuro reancora SO os tokens desta camada; --papel-cerrado,
     --creme-semente e --linha-clara viram tinta clara INVARIANTE, porque este
     site tem duas superficies escuras (blocos verdes e rodape) ja no claro. */
  --fundo:var(--papel-cerrado);
  --fundo-2:var(--creme-semente);
  --superficie-1:var(--papel-cerrado);
  --superficie-2:var(--creme-semente);
  --superficie-3:#E7DCC2;
  --texto-1:var(--tinta-terra);
  --texto-2:#5A4B38;          /* 7.21:1 sobre papel, 6.17:1 sobre superficie-3 */
  --texto-3:#6B5C43;          /* 5.56:1 sobre papel, 4.76:1 sobre superficie-3 */
  --tinta-casca:var(--casca-escura);      /* o papel de TEXTO/filete da casca */
  --texto-sobre-acento:var(--papel-cerrado); /* rotulo sobre acento preenchido */
  --bloco-verde:var(--verde-cerrado);     /* superficie escura, nao acento */
  --bloco-rodape:var(--casca-escura);     /* superficie escura, nao acento */
  --cta-hover:var(--casca-escura);        /* preenchimento do .nav-cta em hover */
  --contorno-forte:var(--casca-escura);   /* borda que desenha o componente */
  --borda-portadora:#75664B;              /* 4.22:1 sobre creme: unico indicador */
  --sombra-dura-cor:var(--casca-escura);  /* bloco solido deslocado */
  --anel:#6E5A1C;                         /* anel de foco, camada interna */
  --anel-halo:#FBF7EC;                    /* 6.24:1 contra o anel: sobrevive a foto */
  --nav-veu:rgba(42,36,24,.42);

  /* tints, washes e sombras: acompanham o acento, logo tem par escuro */
  --selecao:rgba(192,96,58,.24);
  --tint-ocre:rgba(216,155,52,.16);
  --fita-ocre:rgba(216,155,52,.68);
  --fita-borda:rgba(74,56,38,.3);
  --wash-ocre:rgba(216,155,52,.14);
  --wash-oliva:rgba(92,106,52,.11);
  --wash-terra:rgba(192,96,58,.08);
  --halo-ocre:rgba(216,155,52,.38);
  --brilho-ocre:rgba(216,155,52,.3);
  --brilho-ocre-2:rgba(216,155,52,.4);
  --sombra-verde:rgba(56,81,47,.35);
  --sombra-verde-forte:rgba(56,81,47,.45);
  --sombra-verde-leve:rgba(56,81,47,.15);
  --sombra-casca:rgba(74,56,38,.16);
  --sombra-casca-2:rgba(74,56,38,.22);
  --sombra-cta:rgba(20,16,10,.4);
  --sombra-gaveta:rgba(42,36,24,.5);
  --banda:rgba(234,223,199,.55);
  --banda-0:rgba(234,223,199,0);
  --veu-creme:rgba(234,223,199,.4);
  --veu-creme-forte:rgba(234,223,199,.7);
  --radial-oliva:rgba(92,106,52,.5);
  --radial-sombra:rgba(42,36,24,.35);

  /* ---- tipografia ---- */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Source Serif 4',Georgia,serif;
  --mono:'Space Mono',ui-monospace,'Cascadia Code',monospace;

  /* ---- métrica ---- */
  --wrap:1120px;
  --radius:16px;
  --radius-sm:10px;
  --shadow-hard:6px 6px 0 var(--sombra-dura-cor);
  --shadow-soft:0 22px 44px -22px rgba(56,81,47,.35), 0 6px 18px -10px rgba(74,56,38,.28);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ---- cromo do navegador (barra de rolagem, controles nativos) ----
     color-scheme sozinho tira o clarao branco no escuro, mas entrega o cinza
     NEUTRO padrao do Chrome (#2C2C2C), que nao e desta paleta. Por isso os
     dois: color-scheme resolve o trilho e os controles nativos, e o par
     ::-webkit-scrollbar abaixo poe o polegar na terra quente do cerrado. */
  color-scheme:light;
  --polegar:#CDBD9A;
  --polegar-hover:#BDA986;
}

/* barra de rolagem na paleta (WebKit/Blink; no Firefox quem resolve e o color-scheme) */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:var(--polegar); border-radius:8px; border:2px solid var(--fundo)}
::-webkit-scrollbar-thumb:hover{background:var(--polegar-hover)}

/* ===== reset ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fundo);
  color:var(--texto-1);
  font-family:var(--body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:600; line-height:1.05; letter-spacing:-.015em; font-optical-sizing:auto}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--selecao)}

/* ===== textura de papel ===== */
body::before{
  content:""; position:fixed; inset:0; z-index:1; 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.04; mix-blend-mode:multiply;
}
main, .footer, .nav{position:relative; z-index:2}

/* ===== acessibilidade ===== */
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--verde-cerrado); color:var(--texto-sobre-acento);
  padding:10px 16px; border-radius:8px; font-family:var(--mono); font-size:13px;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:16px}
/* Anel de FOCO em duas camadas. O anel sozinho nao serve aqui: medi #6E5A1C
   contra as superficies deste site e sobre o bloco verde ele da 1.32:1. O halo
   de valor oposto (6.24:1 contra o anel no claro, 9.80:1 no escuro) garante o
   foco sobre QUALQUER substrato: papel, bloco verde, rodape, foto e scrim. */
:focus-visible{outline:2px solid var(--anel); outline-offset:2px; box-shadow:0 0 0 2px var(--anel-halo); border-radius:3px}
/* Excecoes: componentes cuja sombra propria e estrutural. REGRA DE HIGIENE:
   todo seletor que declare box-shadow proprio E possa receber foco precisa de
   par :focus-visible que reponha var(--anel-halo) NA FRENTE da sombra propria,
   senao a sombra do componente substitui o halo e sobra so o anel. Hoje a lista
   de quem tem sombra propria e e focavel e .btn-primary, .site-map, .btn-cta e
   .gal-chip.on. */
.btn-primary:focus-visible{box-shadow:0 0 0 2px var(--anel-halo), var(--shadow-hard)}
.site-map:focus-visible{box-shadow:0 0 0 2px var(--anel-halo), var(--shadow-hard)}
/* .btn-cta cai sobre o bloco verde solido, onde o anel sozinho da 1.32:1 */
.btn-cta:focus-visible{box-shadow:0 0 0 2px var(--anel-halo), 6px 6px 0 var(--sombra-cta)}
.gal-chip.on:focus-visible{box-shadow:0 0 0 2px var(--anel-halo), 0 8px 18px -8px var(--sombra-verde-forte)}
/* alvo do salto de conteudo: recebe foco por script, nao desenha anel de 1440px */
main#conteudo:focus{outline:none; box-shadow:none}

/* ===== utilitários ===== */
.container{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,40px)}
.section{padding:clamp(64px,9vw,110px) 0; position:relative}

.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--oliva-folha); margin:0 0 18px; display:inline-flex; align-items:center; gap:10px;
}
.kicker.num span{
  color:var(--terracota-texto); font-weight:700;
  border:1.4px solid var(--terracota-texto); border-radius:50%;
  width:26px; height:26px; display:inline-grid; place-items:center; font-size:11px;
}
.kicker.on-dark{color:var(--creme-semente)}
.kicker.on-dark.num span{color:var(--creme-semente); border-color:var(--creme-semente)}

h2{font-size:clamp(1.8rem,4vw,2.9rem); max-width:20ch; text-wrap:balance}
h2.big{max-width:16ch}
h2.on-dark{color:var(--papel-cerrado)}
.section-lede{font-size:clamp(1.02rem,1.7vw,1.2rem); color:var(--texto-2); max-width:56ch; margin:16px 0 40px}

/* filete duplo */
.rule{height:0; border-top:3px solid var(--linha-2); position:relative; margin:34px 0}
.rule::after{content:""; position:absolute; left:0; right:0; top:4px; border-top:1px solid var(--linha)}

/* ===== etiqueta de herbário ===== */
.herb-tag{
  display:inline-flex; flex-direction:column; gap:1px;
  border:1.4px solid var(--contorno-forte); border-radius:5px;
  padding:8px 12px 8px 16px; background:var(--superficie-1); position:relative;
  font-family:var(--mono); line-height:1.3;
}
.herb-tag::before{ /* furo + barbante */
  content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; border:1.2px solid var(--contorno-forte);
}
.herb-tag b{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-1); font-weight:700}
.herb-tag i{font-size:11px; font-style:italic; color:var(--oliva-folha); font-family:var(--body)}
.herb-tag span{font-size:10px; letter-spacing:.08em; color:var(--tinta-casca); text-transform:uppercase; margin-top:2px}

/* ===== botões ===== */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:.02em;
  padding:14px 24px; border-radius:9px; border:2px solid transparent;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .18s, color .18s;
}
.btn-primary{background:var(--verde-cerrado); color:var(--texto-sobre-acento); box-shadow:var(--shadow-hard)}
.btn-primary:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--sombra-dura-cor)}
.btn-primary:active{transform:translate(6px,6px); box-shadow:0 0 0 var(--sombra-dura-cor)}
.btn-secondary{background:transparent; color:var(--terracota-texto); border-color:var(--terracota-texto)}
.btn-secondary:hover{background:var(--terracota-texto); color:var(--texto-sobre-acento)}
.btn-cta{background:var(--verde-cerrado); color:var(--texto-sobre-acento); box-shadow:6px 6px 0 var(--sombra-cta)}
.btn-cta:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--sombra-cta)}
.btn-cta:active{transform:translate(6px,6px); box-shadow:0 0 0}
/* Foco E ponteiro ao mesmo tempo: :hover e :focus-visible tem a MESMA
   especificidade (0,2,0) e o hover vem depois na folha, entao ele substituia a
   lista inteira de sombras e matava o halo, devolvendo o anel para 1,32:1 sobre
   o verde. Corrigido por especificidade (0,3,0), que vence os dois QUALQUER QUE
   SEJA A ORDEM: assim uma edicao futura no hover nao reintroduz o defeito.
   O par :active repoe o afundamento da sombra sem abrir mao do halo. */
.btn-cta:hover:focus-visible{box-shadow:0 0 0 2px var(--anel-halo), 8px 8px 0 var(--sombra-cta)}
.btn-primary:hover:focus-visible{box-shadow:0 0 0 2px var(--anel-halo), 8px 8px 0 var(--sombra-dura-cor)}
.btn-cta:active:focus-visible,
.btn-primary:active:focus-visible{box-shadow:0 0 0 2px var(--anel-halo)}
.btn-ghost{background:transparent; color:var(--creme-semente); border-color:var(--creme-semente)}
.btn-ghost:hover{background:var(--creme-semente); color:var(--bloco-verde)}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:padding .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease)}
.nav-inner{
  max-width:1280px; margin:0 auto; padding:18px clamp(20px,5vw,40px);
  display:flex; align-items:center; gap:20px; transition:padding .22s var(--ease);
}
.nav.scrolled{background:var(--papel-70); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--linha)}
.nav.scrolled .nav-inner{padding-top:11px; padding-bottom:11px}
.nav-brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:22px; color:var(--texto-1); margin-right:auto}
.brand-glyph{width:30px; height:30px; color:var(--verde-cerrado); flex:0 0 auto}
.brand-glyph svg{width:100%; height:100%; display:block}
.brand-glyph.big{width:52px; height:52px}

.nav-links{display:flex; align-items:center; gap:6px}
.nav-links a{
  font-family:var(--mono); font-size:13px; color:var(--tinta-casca);
  padding:8px 12px; border-radius:7px; position:relative; transition:color .16s, background .16s;
}
.nav-links a:not(.nav-cta):hover{color:var(--texto-1)}
.nav-links a.active:not(.nav-cta){color:var(--terracota-texto)}
.nav-links a.active:not(.nav-cta)::after{
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px;
  background:var(--terracota-ipe); border-radius:2px;
}
.nav-cta{background:var(--verde-cerrado); color:var(--texto-sobre-acento)!important; font-weight:700; padding:9px 16px!important; margin-left:8px}
.nav-cta:hover{background:var(--cta-hover)}

.nav-toggle{display:none; position:relative; z-index:60; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto}
.nav-toggle span{width:24px; height:2.4px; background:var(--texto-1); border-radius:2px; transition:transform .2s var(--ease), opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; padding:clamp(120px,16vh,170px) 0 0; overflow:hidden}
.hero-inner{
  max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,40px);
  display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;
}
.hero-text{max-width:54ch}
.hero h1{
  font-size:clamp(3.4rem,10vw,6.6rem); font-weight:600; letter-spacing:-.03em; line-height:.94;
  margin:14px 0 0; color:var(--texto-1); font-variation-settings:'SOFT' 30;
}
.hero-sub{font-size:clamp(1.5rem,3.6vw,2.6rem); font-family:var(--display); font-weight:400; margin:18px 0 0; line-height:1.2; color:var(--tinta-casca)}
.hero-sub em{font-style:italic}
.rexist{position:relative; white-space:nowrap; color:var(--terracota-ipe)}
.rexist .paren{color:var(--terracota-ipe); font-weight:600; font-size:1.15em}
.rexist-line{position:absolute; left:-2px; right:-2px; bottom:-.24em; width:calc(100% + 4px); height:.42em; color:var(--terracota-ipe); overflow:visible}
.lede{
  font-size:clamp(1.14rem,1.5vw,1.4rem); color:var(--texto-2); margin:24px 0 0;
  max-width:58ch; line-height:1.62;
}
/* justificado só onde a coluna é larga: no celular criaria rios de espaço */
@media (min-width:768px){
  .lede{text-align:justify; hyphens:auto}
}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}

.hero-art{position:relative; display:flex; justify-content:center; align-items:center; min-height:340px}
.ipe-plate{width:min(100%,360px); height:auto; overflow:visible; filter:drop-shadow(0 12px 24px var(--sombra-verde-leve))}
.hero-tag{position:absolute; right:6%; top:14%; transform:rotate(3deg); box-shadow:var(--shadow-soft)}

/* números-manchete do hero */
.hero-stats{
  max-width:var(--wrap); margin:clamp(48px,7vw,72px) auto 0; padding:28px clamp(20px,5vw,40px) 0;
  display:flex; align-items:center; justify-content:center; gap:clamp(20px,5vw,56px); flex-wrap:wrap;
  border-top:3px solid var(--linha-2);
}
.hstat{text-align:center}
.hstat b{display:block; font-family:var(--display); font-size:clamp(2rem,5vw,3.1rem); font-weight:600; color:var(--verde-cerrado); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.hstat span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--oliva-folha)}
.hstat-sep{width:1px; height:44px; background:var(--linha-2)}

/* ===== ondas divisoras ===== */
.wave{line-height:0; position:relative; z-index:2}
.wave svg{width:100%; height:clamp(40px,6vw,80px); display:block}
.wave-to-verde{margin-bottom:-1px}
.wave-from-verde{margin-top:-1px}

/* ============================================================
   SOBRE
   ============================================================ */
.sobre-grid{display:grid; grid-template-columns:1fr 260px; gap:clamp(30px,5vw,64px); align-items:start}
.sobre-body p{margin-bottom:20px; font-size:1.12rem; line-height:1.68}
.sobre-body p:last-child{margin-bottom:0}
.dropcap::first-letter{
  font-family:var(--display); font-size:4.1em; line-height:.72; float:left;
  color:var(--terracota-ipe); font-weight:600; padding:8px 12px 0 0;
}
.pull{
  margin:30px 0 0; padding:22px 26px; background:var(--superficie-2);
  border-left:4px solid var(--oliva-folha); border-radius:0 10px 10px 0;
  font-family:var(--display); font-style:italic; font-size:1.25rem; line-height:1.4; color:var(--tinta-casca);
}
.sobre-margin{border:1.4px solid var(--linha-2); border-radius:12px; padding:20px 22px; background:var(--veu-creme)}
.margin-title{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--oliva-folha); margin-bottom:14px}
.sobre-margin ul{display:flex; flex-direction:column; gap:11px}
.sobre-margin li{display:flex; flex-direction:column; padding-bottom:11px; border-bottom:1px dashed var(--linha)}
.sobre-margin li:last-child{border:0; padding-bottom:0}
.sobre-margin li b{font-family:var(--display); font-size:1.05rem; color:var(--texto-1)}
.sobre-margin li span{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--oliva-folha)}
.margin-foot{margin-top:16px; font-size:.82rem; color:var(--tinta-casca); font-style:italic; line-height:1.4}

/* ============================================================
   NÚMEROS (fundo escuro)
   ============================================================ */
.numeros{background:var(--bloco-verde); overflow:hidden}
.contour{position:absolute; inset:0; z-index:0; pointer-events:none}
.contour svg{width:100%; height:100%}
.numeros .container{position:relative; z-index:1}
.numeros h2{margin-bottom:44px}
.num-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:22px}
.num-item{text-align:center; position:relative}
.num-ic{width:34px; height:34px; color:var(--ocre-pequi); margin:0 auto 12px; display:block}
.num-item b{display:block; font-family:var(--display); font-size:clamp(2.2rem,5vw,3.6rem); font-weight:600; color:var(--papel-cerrado); font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1}
.num-item span{display:block; margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--creme-semente); opacity:.82; line-height:1.4}
.num-foot{margin-top:46px; text-align:center; color:var(--creme-semente); font-size:1rem; opacity:.9}
.num-foot b{color:var(--creme-semente); font-weight:600}

/* ============================================================
   AÇÕES / ENTREGÁVEIS: fichas de herbário
   ============================================================ */
.herb-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.card-herb{
  position:relative; background:var(--superficie-1); border:1.6px solid var(--contorno-forte);
  border-radius:12px; padding:26px 26px 24px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card-herb:hover, .card-herb:focus-visible{transform:translateY(-5px) rotate(-.5deg); box-shadow:var(--shadow-soft); border-color:var(--ocre-pequi)}
.card-herb .cat-n{
  position:absolute; top:16px; right:18px; font-family:var(--mono); font-size:12px;
  color:var(--oliva-folha); letter-spacing:.08em;
}
.card-art{
  width:66px; height:66px; border-radius:12px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--superficie-2); border:1.4px solid var(--linha-2); color:var(--verde-cerrado);
  transition:background .2s, color .2s;
}
.card-art svg{width:36px; height:36px}
.card-herb:hover .card-art{background:var(--ocre-pequi); color:var(--casca-escura)}
.card-herb .herb-tag{margin-bottom:14px}
.card-herb p{font-size:1rem; line-height:1.55; color:var(--texto-2)}
.card-herb.small{padding:22px}
.card-herb.small h3{font-size:1.28rem; margin-bottom:8px; color:var(--texto-1)}
.card-herb.small p{font-size:.95rem}

.deliver-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}

/* ============================================================
   EVENTOS: parede de cartazes
   ============================================================ */
/* align-items:start deixa cada cartaz com a altura que ele pede. Sem isso a
   grade estica os quatro na altura do mais alto, e o Sarau (unico sem arte)
   ficaria com um vao enorme embaixo. Alturas desiguais, com a rotacao e a
   fita, e justamente o que faz parecer uma parede de cartazes de verdade. */
.poster-wall{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; padding-top:8px; align-items:start}
.poster{
  position:relative; background:var(--superficie-2); border:1.6px solid var(--contorno-forte);
  border-radius:6px; padding:26px 22px 24px; transform:rotate(var(--rot));
  box-shadow:4px 6px 0 var(--sombra-casca); transition:transform .22s var(--ease), box-shadow .22s var(--ease);
  overflow:hidden;
}
.poster::before{ /* faixa de cor superior */
  content:""; position:absolute; left:0; top:0; right:0; height:8px; background:var(--band);
}
.poster:hover{transform:rotate(0deg) translateY(-6px); box-shadow:8px 12px 0 var(--sombra-casca-2)}
.tape{
  position:absolute; top:0; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:74px; height:24px; background:var(--fita-ocre);
  border:1px dashed var(--fita-borda); backdrop-filter:blur(1px);
}
.poster-seal{
  position:absolute; bottom:14px; right:-16px; transform:rotate(-14deg);
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--magenta-selo);
  border:1.4px solid var(--magenta-selo); border-radius:50%; width:78px; height:78px;
  display:grid; place-items:center; text-align:center; padding:6px; line-height:1.2;
}
.poster-ic{width:40px; height:40px; color:var(--verde-cerrado); margin:12px 0 16px; display:block}

/* ---- arte real do cartaz ----------------------------------------------
   O cartaz e obra de ilustracao (a do Festival e assinada por Jurupia): nao
   leva filtro, nem inversao, nem mistura de camada em NENHUM tema. No escuro
   ele ganha um contorno claro para nao encostar no fundo, do mesmo modo que o
   emblema bordado ganhou assento. Proporcao reservada no atributo width e
   height de cada img, entao a parede nao pula enquanto a imagem carrega. */
.poster-arte{
  display:block; position:relative; margin:14px 0 16px; overflow:hidden;
  border:1.4px solid var(--contorno-forte); border-radius:4px;
  background:var(--superficie-1); line-height:0;
}
.poster-arte img{width:100%; height:auto; display:block; transition:transform .3s var(--ease)}
.poster-arte:hover img{transform:scale(1.03)}
.poster-lupa{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%) translateY(6px);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--casca-escura); color:var(--papel-cerrado);
  padding:5px 11px; border-radius:20px; line-height:1;
  opacity:0; transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.poster-arte:hover .poster-lupa,
.poster-arte:focus-visible .poster-lupa{opacity:1; transform:translateX(-50%) translateY(0)}
/* o cartao inteiro ja tem overflow:hidden e gira; o anel do link precisa
   aparecer por dentro, senao a rotacao o corta */
.poster-arte:focus-visible{outline:2px solid var(--anel); outline-offset:-3px}

@media (prefers-reduced-motion:reduce){
  .poster-arte img, .poster-lupa{transition:none}
  .poster-arte:hover img{transform:none}
}
.poster-date{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-casca); margin-bottom:8px}
.poster h3{font-family:var(--display); font-style:italic; font-size:1.5rem; font-weight:600; line-height:1.08; color:var(--texto-1); margin-bottom:10px}
.poster-desc{font-size:.92rem; line-height:1.5; color:var(--texto-2); max-width:26ch}

/* ============================================================
   ESPAÇOS
   ============================================================ */
.espacos-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:center}
.espacos-text h2{margin-bottom:0}
.place-list{display:flex; flex-direction:column; gap:16px; margin:8px 0 28px}
.place-list li{display:flex; align-items:center; gap:14px}
.pin{width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; background:var(--superficie-2); border:1.4px solid var(--linha-2); color:var(--terracota-ipe)}
.pin.muted{color:var(--oliva-folha)}
.pin svg{width:22px; height:22px}
.place-list b{display:block; font-family:var(--display); font-size:1.12rem; color:var(--texto-1)}
.place-list span{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--oliva-folha)}
.map-note{font-size:.95rem; color:var(--tinta-casca); display:flex; align-items:center; gap:10px}
.map-note b{color:var(--terracota-texto)}
.inline-ic{width:22px; height:22px; flex:0 0 auto; color:var(--oliva-folha)}
.espacos-map{position:relative}
.espacos-map > svg{width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow-soft)}
/* NÃO inflar os SVGs internos do Leaflet (marcadores, bandeira de atribuição) */
.site-map svg{width:auto; height:auto; max-width:none; border-radius:0; box-shadow:none}
.leaflet-attribution-flag{width:12px !important; height:8px !important}
.map-tag{position:absolute; left:16px; bottom:16px; box-shadow:var(--shadow-soft)}
.map-pin{animation:pinPulse 2.6s ease-in-out infinite}
@keyframes pinPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ============================================================
   GALERIA: exposição fotográfica
   ============================================================ */
.gal-filtros{display:flex; flex-wrap:wrap; gap:9px; margin:0 0 26px}
.gal-chip{
  cursor:pointer; font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  padding:9px 16px; border-radius:999px; background:var(--superficie-2);
  border:1.4px solid var(--borda-portadora); color:var(--tinta-casca);
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.gal-chip:hover{transform:translateY(-1px); border-color:var(--verde-cerrado)}
.gal-chip.on{background:var(--verde-cerrado); border-color:var(--verde-cerrado); color:var(--texto-sobre-acento)}

.galeria-grid{columns:3; column-gap:16px}
.foto{margin:0 0 16px; break-inside:avoid; display:block}
.foto-btn{
  display:block; width:100%; padding:0; cursor:zoom-in; background:none; line-height:0;
  border:2px solid var(--contorno-forte); border-radius:10px; overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.foto-btn img{width:100%; height:auto; display:block; transition:transform .35s var(--ease)}
.foto-btn:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft)}
.foto-btn:hover img{transform:scale(1.03)}
.foto figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:.03em;
  color:var(--tinta-casca); padding:8px 2px 0; line-height:1.4;
}
.gal-vazio{font-family:var(--mono); font-size:12.5px; color:var(--oliva-folha); padding:6px 0}

/* ampliação (lightbox) */
.lightbox{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  /* DECISAO DE DESIGN: o scrim e escuro nos DOIS temas. A foto e o assunto,
     o entorno tem de desaparecer. Nao tokenizar, nao clarear no tema escuro. */
  background:rgba(20,16,10,.94); padding:clamp(16px,4vw,48px); backdrop-filter:blur(3px);
}
.lightbox[hidden]{display:none}
.lb-fig{margin:0; max-width:min(1100px,92vw); display:flex; flex-direction:column; gap:12px}
.lb-fig img{max-width:100%; max-height:78vh; object-fit:contain; border-radius:8px; border:2px solid var(--casca-escura)}
.lb-fig figcaption{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.03em;
  color:var(--creme-semente); text-align:center; line-height:1.4;
}
.lb-btn{
  position:absolute; cursor:pointer; background:rgba(244,237,221,.10); color:var(--papel-cerrado);
  border:1.4px solid var(--linha-clara); border-radius:50%; width:48px; height:48px;
  font-size:22px; line-height:1; display:grid; place-items:center;
  transition:background .18s, transform .18s;
}
.lb-btn:hover{background:var(--verde-cerrado); color:var(--texto-sobre-acento); transform:scale(1.06)}
.lb-fechar{top:18px; right:18px; font-size:17px}
.lb-prev{left:max(12px,2vw)}
.lb-next{right:max(12px,2vw)}

/* ============================================================
   EQUIPE
   ============================================================ */
.equipe-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:start}
.coord .herb-tag{margin-bottom:22px}
.coord-people{display:flex; flex-direction:column; gap:20px}
.person{padding-left:16px; border-left:3px solid var(--oliva-folha)}
.p-name{font-family:var(--display); font-size:1.35rem; font-weight:600; color:var(--texto-1)}
.p-role{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--terracota-texto); margin-top:2px}
.corpo-big{font-size:1.4rem; font-family:var(--display); color:var(--tinta-casca); margin-bottom:14px}
.corpo-big b{font-size:2.6rem; color:var(--verde-cerrado); font-variant-numeric:tabular-nums; margin-right:6px}
.corpo p{color:var(--texto-2); line-height:1.6}
.corpo-units{margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--oliva-folha)}

/* ============================================================
   PARCEIROS
   ============================================================ */
.partner-label{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--oliva-folha); margin-bottom:16px}
.partner-list{display:flex; flex-wrap:wrap; gap:12px}
.partner-list li{
  font-family:var(--display); font-size:1.05rem; color:var(--tinta-casca);
  border:1.4px solid var(--linha-2); border-radius:8px; padding:10px 18px; background:var(--superficie-2);
  transition:color .18s, border-color .18s, background .18s, transform .18s;
}
.partner-list li:hover{color:var(--verde-cerrado); border-color:var(--verde-cerrado); transform:translateY(-2px)}
.partner-list.units li{font-family:var(--mono); font-size:.95rem; letter-spacing:.06em}
.fund{margin-top:30px; font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--tinta-casca)}
.fund b{color:var(--terracota-texto)}

/* ============================================================
   PARTICIPAR: CTA
   ============================================================ */
.participar{background:var(--bloco-verde); overflow:hidden; text-align:center}
.participar .container{position:relative; z-index:2; max-width:760px}
.paren-mark{
  position:absolute; top:50%; transform:translateY(-50%); z-index:1;
  font-family:var(--display); font-size:clamp(16rem,40vw,34rem); line-height:.7;
  color:var(--oliva-folha); opacity:.16; pointer-events:none; font-weight:600;
}
.paren-mark.left{left:-2%} .paren-mark.right{right:-2%}
.participar .kicker{justify-content:center}
.participar-lede{color:var(--creme-semente); font-size:1.12rem; line-height:1.6; margin:18px auto 34px; max-width:48ch; opacity:.92}
.participar-actions{display:flex; flex-wrap:wrap; gap:16px; justify-content:center}
.participar-contact{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px}
.contact-chip{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px; color:var(--creme-semente); border:1.4px solid var(--linha-clara); border-radius:8px; padding:9px 15px}
.contact-chip b{color:var(--papel-cerrado)}
.contact-chip i{color:var(--creme-semente); font-style:italic; font-family:var(--body)}
.contact-chip .inline-ic{color:var(--ocre-pequi)}

/* ============================================================
   RODAPÉ
   ============================================================ */
.footer{background:var(--bloco-rodape); color:var(--creme-semente); position:relative; overflow:hidden; padding:clamp(56px,7vw,80px) 0 30px}
.foot-contour{height:220px; top:auto; bottom:0}
.foot-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.4fr 1fr 1.4fr; gap:40px; align-items:start}
.foot-brand .brand-glyph{color:var(--creme-semente); margin-bottom:10px}
.foot-title{font-family:var(--display); font-size:1.9rem; font-weight:600; color:var(--papel-cerrado)}
.foot-tag{font-family:var(--display); font-style:italic; font-size:1rem; color:var(--creme-semente); margin-top:4px; line-height:1.3}
.foot-nav{display:flex; flex-direction:column; gap:6px}
/* o alvo media 21px de altura; o padding leva a 24 sem mexer no desenho da
   coluna: o gap encolhe na mesma medida e o espacamento visual nao muda. */
.foot-nav a{font-family:var(--mono); font-size:13px; color:var(--creme-semente); opacity:.82; transition:opacity .16s, color .16s;
  display:block; padding:4px 0; min-height:24px}
.foot-nav a:hover{opacity:1; color:var(--ocre-pequi)}
.foot-meta p{font-size:.86rem; color:rgba(234,223,199,.7); line-height:1.7}
.foot-bottom{position:relative; z-index:1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:44px; padding-top:22px; border-top:1px solid var(--linha-clara); font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:rgba(234,223,199,.7)}

/* ============================================================
   REVEAL (scroll)
   ============================================================ */
/* O opacity:0 depende de html.js, que a IIFE do <head> escreve. Sem essa
   guarda, um script.js que falhasse deixaria a pagina INTEIRA invisivel.
   A cascata usa --i (posto pelo JS entre irmaos .rv), nao :nth-child, que
   contava qualquer irmao e nao o enesimo elemento revelado. */
.rv{transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i,0) * .05s)}
.js .rv{opacity:0; transform:translateY(22px)}
.rv.in{opacity:1; transform:none}

/* desenho das ilustrações */
.draw{stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); transition:stroke-dashoffset 1.4s var(--ease)}
.hero-art.in .draw, .in .draw{stroke-dashoffset:0}
.rexist-line path{stroke-dasharray:340; stroke-dashoffset:340; transition:stroke-dashoffset 1s var(--ease) .4s}
.rexist-line.in path{stroke-dashoffset:0}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media(max-width:1000px){
  .num-grid{grid-template-columns:repeat(3,1fr); gap:30px 22px}
  .deliver-grid{grid-template-columns:repeat(2,1fr)}
  .poster-wall{grid-template-columns:repeat(2,1fr)}
}
/* nav vira off-canvas antes (a barra horizontal só cabe até ~960px) */
@media(max-width:960px){
  .nav-toggle{display:flex}
  .nav-brand{margin-right:0}
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column; align-items:stretch;
    background:var(--superficie-1); padding:88px 24px 32px; gap:4px;
    transform:translateX(100%); visibility:hidden; pointer-events:none;
    transition:transform .28s var(--ease), visibility .28s; box-shadow:-12px 0 40px -20px var(--sombra-gaveta);
  }
  .nav-links.open{transform:none; visibility:visible; pointer-events:auto}
  .nav-links a{padding:14px 12px; font-size:15px; border-bottom:1px solid var(--linha)}
  .nav-links a.active:not(.nav-cta)::after{display:none}
  .nav-cta{margin:14px 0 0; text-align:center; justify-content:center; padding:14px!important}
  .nav.scrolled{background:var(--papel-70)}
}
@media(max-width:820px){
  .hero-inner{grid-template-columns:1fr; gap:10px}
  .hero-text{max-width:none; order:1}
  .hero-art{order:2; min-height:280px; margin-top:10px}
  .ipe-plate{width:min(72%,300px)}
  .hero-tag{right:14%}

  .sobre-grid{grid-template-columns:1fr; gap:30px}
  .sobre-margin{order:-1}
  .espacos-grid, .equipe-grid{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr; gap:30px}
  .galeria-grid{columns:2}
}
@media(max-width:620px){
  body{font-size:17px}
  .herb-grid{grid-template-columns:1fr}
  .num-grid{grid-template-columns:repeat(2,1fr)}
  .num-item:last-child{grid-column:1 / -1}
  .deliver-grid, .poster-wall{grid-template-columns:1fr}
  .galeria-grid{columns:1}
  .lb-btn{width:42px; height:42px}
  .hero-stats{gap:18px}
  .hstat-sep{display:none}
  .hstat{flex:1 1 26%}
  .foot-bottom{flex-direction:column}
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important}
  .js .rv{opacity:1; transform:none; transition:none}
  .draw, .rexist-line path{stroke-dasharray:none; stroke-dashoffset:0; transition:none}
  .btn:hover, .card-herb:hover, .poster:hover{transform:none}
  .map-pin{animation:none}
}

/* chips de contato clicáveis */
a.contact-chip{transition:background .18s, border-color .18s, transform .18s}
a.contact-chip:hover{background:rgba(244,237,221,.10); border-color:var(--creme-semente); transform:translateY(-1px)}

/* ===== emblema dos pássaros (logo animada) ===== */
.brand-glyph{width:42px; height:42px}
.brand-glyph.big{width:60px; height:60px}
.brand-birds{width:100%; height:100%; display:block; overflow:visible}
.birds-plate{width:min(100%,340px); height:auto; overflow:visible; filter:drop-shadow(0 14px 26px var(--sombra-verde-leve))}
.hero-art{min-height:300px}
.hero-art .birds-plate{animation:birdsLand 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes birdsLand{from{opacity:0; transform:translateY(16px) scale(.92)}to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.hero-art .birds-plate,.brand-birds *{animation:none !important}}

/* ===== mapa Leaflet dos espaços ===== */
.espacos-map{position:relative}
.site-map{height:360px; width:100%; border-radius:16px; overflow:hidden; border:1.6px solid var(--contorno-forte); box-shadow:var(--shadow-hard)}
.espacos-map .map-tag{position:absolute; right:12px; bottom:12px; z-index:600; box-shadow:var(--shadow-soft)}
.leaflet-container{font-family:var(--mono); background:var(--superficie-2)}
.leaflet-popup-content{font-family:var(--body)}
@media(max-width:760px){.site-map{height:300px}}

/* ===== objetivos (metas do projeto + razões para participar) ===== */
.objetivos{padding-top:clamp(56px,7vw,84px)}
.obj-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(28px,4vw,64px); align-items:start; margin-top:8px}
.obj-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; counter-reset:obj}
.obj-item{display:flex; gap:18px; align-items:center; background:var(--superficie-2); border:1px solid var(--linha-2); border-radius:var(--radius-sm); padding:16px 20px; transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease)}
.obj-item:hover{transform:translateX(6px); box-shadow:var(--shadow-soft); border-color:var(--ocre-pequi)}
.obj-item p{margin:0; font-size:1.02rem; line-height:1.5}
.obj-num{flex:0 0 auto; width:52px; height:52px; display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:1.7rem; color:var(--texto-1); background:var(--superficie-1); border:1.5px solid var(--contorno-forte); border-radius:8px; box-shadow:4px 4px 0 var(--ocre-pequi)}
.obj-item:nth-child(even) .obj-num{box-shadow:4px 4px 0 var(--magenta-riso)}
.razoes{background:var(--bloco-verde); color:var(--papel-cerrado); border-radius:var(--radius); padding:clamp(24px,3vw,36px); box-shadow:var(--shadow-soft)}
.razoes-title{font-family:var(--display); font-size:clamp(1.35rem,2vw,1.7rem); margin:0 0 18px; line-height:1.15}
.razoes-title em{display:block; font-style:italic; font-weight:400; color:var(--creme-semente); font-size:.68em; letter-spacing:.05em}
.razoes-title strong{font-weight:600}
.razoes-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.razoes-list li{display:flex; gap:12px; align-items:baseline; font-size:1.02rem}
.ast{font-size:1.05rem; line-height:1; transition:transform .3s var(--ease)}
.razoes-list li:hover .ast{transform:rotate(90deg)}
.ast.m{color:var(--magenta-riso)}
.ast.o{color:var(--ocre-pequi)}
.razoes-cta{display:inline-block; margin-top:22px; font-family:var(--mono); font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; color:var(--papel-cerrado); text-decoration:none; border:1.5px solid var(--creme-semente); border-radius:999px; padding:10px 18px; transition:background .3s var(--ease), color .3s var(--ease)}
.razoes-cta:hover{background:var(--papel-cerrado); color:var(--bloco-verde)}
@media(max-width:960px){.obj-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.obj-item,.ast,.razoes-cta{transition:none}}

/* ===== emblema bordado integrado ao fundo (hero) ===== */
.hero-emblema{position:relative; display:grid; place-items:center}
.emblema-img{display:block; width:min(430px,36vw); height:auto; mix-blend-mode:multiply; filter:saturate(1.06) contrast(1.02);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 52%, transparent 71%);
          mask-image:radial-gradient(circle at 50% 50%, #000 52%, transparent 71%)}
.hero-emblema .birds-plate{display:none}
.hero-emblema.sem-img .emblema-img{display:none}
.hero-emblema.sem-img .birds-plate{display:block}
@media(max-width:820px){.emblema-img{width:min(320px,72vw)}}

/* ============================================================
   Herbário vivo: vibração e delicadeza na mesma paleta
   (síntese do painel de direções de arte · só cores do :root,
   alphas e gradientes entre elas)
   ============================================================ */

/* laterais abertas no desktop: todos os containers herdam --wrap */
@media(min-width:1440px){
  :root{--wrap:1320px}
  .nav-inner{max-width:1480px}
  .hero-text{max-width:60ch}
  .lede{max-width:62ch}
  .section-lede{max-width:62ch}
  .galeria-grid{columns:4}
}
@media(min-width:1800px){
  :root{--wrap:1460px}
  .nav-inner{max-width:1600px}
}

/* washes de aquarela no hero (ocre, oliva, terracota) */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(46% 40% at 78% 24%,var(--wash-ocre),transparent 70%),radial-gradient(40% 36% at 8% 78%,var(--wash-oliva),transparent 68%),radial-gradient(30% 26% at 56% 6%,var(--wash-terra),transparent 72%)}

/* sublinhado-gesto nos títulos de seção */
.section h2::after{content:"";display:block;width:58px;height:4px;border-radius:99px;margin-top:16px;background:linear-gradient(90deg,var(--terracota-ipe),var(--ocre-pequi) 62%,var(--magenta-riso))}
.section h2.on-dark::after{background:linear-gradient(90deg,var(--ocre-pequi),var(--creme-semente))}
.participar h2::after{margin-inline:auto}

/* fichas de herbário com fita e degradê */
.card-herb{background:linear-gradient(175deg,var(--superficie-1) 55%,var(--veu-creme-forte) 100%)}
.card-herb::before{content:"";position:absolute;top:-1.6px;left:22px;width:46px;height:6px;border-radius:0 0 5px 5px;background:linear-gradient(90deg,var(--terracota-ipe),var(--ocre-pequi));opacity:.9}
.card-art svg{transition:transform .3s var(--ease)}
.card-herb:hover .card-art svg{transform:rotate(-6deg) scale(1.06)}

/* banda creme na agenda + pôsteres vivos */
.eventos{background:linear-gradient(180deg,var(--banda-0) 0%,var(--banda) 14%,var(--banda) 86%,var(--banda-0) 100%)}
.poster{background:var(--superficie-1)}
.tape{background:var(--fita-ocre)}
.poster:hover{box-shadow:8px 12px 0 var(--sombra-casca-2),0 24px 44px -20px var(--halo-ocre)}

/* faixas verdes com profundidade radial */
/* DECISAO DE DESIGN: estes dois blocos sao escuros NOS DOIS temas (assim como
   o rodape). O que muda no escuro e a profundidade da terra verde, nao o papel. */
.numeros,.participar{background:radial-gradient(90% 70% at 78% 0%,var(--radial-oliva),transparent 58%),radial-gradient(70% 60% at 6% 100%,var(--radial-sombra),transparent 60%),var(--bloco-verde)}

/* números-manchete com brilho */
.hstat b{background:linear-gradient(180deg,var(--verde-cerrado),var(--oliva-folha));-webkit-background-clip:text;background-clip:text;color:transparent}
.num-item b{text-shadow:0 2px 22px var(--brilho-ocre)}
.num-ic{filter:drop-shadow(0 3px 10px var(--brilho-ocre-2))}

/* filtros da galeria */
.gal-chip:hover{transform:translateY(-2px);border-color:var(--ocre-pequi);background:var(--tint-ocre);box-shadow:0 8px 16px -9px var(--sombra-verde)}
.gal-chip.on{background:linear-gradient(120deg,var(--verde-cerrado),var(--oliva-folha));border-color:var(--verde-cerrado);color:var(--texto-sobre-acento);box-shadow:0 8px 18px -8px var(--sombra-verde-forte)}

/* kicker com fio que se dissolve */
.kicker::after{content:"";flex:0 0 44px;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.55}

/* nav: sublinhado que cresce */
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--terracota-ipe);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active:not(.nav-cta)::after{transform:scaleX(1)}

@media(max-width:960px){.nav-links a:not(.nav-cta)::after{content:none}}

@media (prefers-reduced-motion:reduce){
  .gal-chip:hover,.partner-list li:hover{transform:none;box-shadow:none}
  .nav-links a:not(.nav-cta)::after{transition:none}
  .card-art svg{transition:none}
  .card-herb:hover .card-art svg{transform:none}
}

/* ===== emblema bordado no cabeçalho e no rodapé (no lugar do SVG chapado) ===== */
.brand-glyph .brand-birds{display:none}
.brand-glyph.sem-img .brand-birds{display:block}
.brand-glyph.sem-img .brand-emblema{display:none}
.brand-glyph:not(.sem-img){width:auto; height:auto}
.brand-emblema{display:block; width:66px; height:42px; object-fit:cover; object-position:center 47%;
  mix-blend-mode:multiply; filter:saturate(1.05);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 80%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 80%)}
/* rodapé: medalhão suave sobreposto ao fundo escuro (sem multiply, senão escurece) */
.foot-brand .brand-emblema{width:170px; height:112px; mix-blend-mode:normal; margin:0 0 6px -34px;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 46%, transparent 74%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 46%, transparent 74%)}

/* ============================================================
   ===== TEMA, GAVETA E MICROINTERACOES (fundacao de front-end)
   ============================================================ */

/* ---------- veu da gaveta (mobile) ----------
   Fica FORA do <header class="nav"> (z-index 50) de proposito: com z-index 45
   ele cobre o conteudo (z-index 2) e deixa a barra e o hamburguer clicaveis. */
.nav-veu{
  position:fixed; inset:0; z-index:45; background:var(--nav-veu);
  opacity:0; transition:opacity .24s var(--ease);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.nav-veu[hidden]{display:none}
.nav-veu.open{opacity:1}
@media(min-width:961px){.nav-veu{display:none}}

/* ---------- botao de tema ----------
   Irmao do .nav-toggle, nunca dentro da .nav-links: no mobile ficaria preso
   dentro da gaveta fechada. */
.theme-toggle{
  display:inline-grid; place-items:center; flex:0 0 auto;
  /* mesmo z-index do hamburguer: com a gaveta aberta o botao de tema nao pode
     ficar por baixo dela, senao some justamente quando o menu esta em uso */
  position:relative; z-index:60;
  width:40px; height:40px; padding:0; margin-left:4px; cursor:pointer;
  background:transparent; border:1.4px solid var(--borda-portadora);
  border-radius:10px; color:var(--tinta-casca);
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .18s var(--ease);
}
.theme-toggle svg{width:19px; height:19px; display:block}
.theme-toggle .ic-sol{display:none}
[data-theme="dark"] .theme-toggle .ic-sol{display:block}
[data-theme="dark"] .theme-toggle .ic-lua{display:none}
.theme-toggle:hover{background:var(--tint-ocre); border-color:var(--ocre-pequi); color:var(--terracota-texto); transform:translateY(-1px)}
.theme-toggle:active{transform:translateY(0) scale(.95)}

/* no mobile o botao de tema empurra o hamburguer para a direita */
@media(max-width:960px){
  .theme-toggle{margin-left:auto}
  .nav-toggle{margin-left:0}
}

/* ---------- transicao suave ao trocar de tema (<= 0,3s) ---------- */
html.trocando-tema body,
html.trocando-tema .nav-links,
html.trocando-tema .card-herb,
html.trocando-tema .poster,
html.trocando-tema .obj-item,
html.trocando-tema .partner-list li,
html.trocando-tema .gal-chip,
html.trocando-tema .theme-toggle,
html.trocando-tema .footer{
  transition:background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}

/* ============================================================
   TEMA ESCURO
   Reancora SO a camada semantica e os acentos. Os pigmentos
   --papel-cerrado, --creme-semente e --linha-clara ficam intactos:
   viraram tinta clara invariante dos blocos verdes e do rodape.
   As cinco superficies ficam no hue 30-40deg (terra de cerradao),
   nao no cinza-azulado de dashboard.
   ============================================================ */
[data-theme="dark"]{
  --fundo:#171209;
  --fundo-2:#120E07;
  --superficie-1:#1F1810;
  --superficie-2:#272016;
  --superficie-3:#31281B;
  --texto-1:#F3EAD8;            /* 15.59:1 sobre o fundo, 12.12:1 no pior caso */
  --texto-2:#CDBB98;            /* 7.70:1 no pior caso (superficie-3) */
  --texto-3:#A2916F;            /* 4.70:1 no pior caso */
  --tinta-casca:#CDBB98;
  --texto-sobre-acento:#171209; /* tinta escura sobre acento: acento clareado
                                   com texto claro nunca fecha 4.5:1 */
  --bloco-verde:#26361F;        /* 11.05:1 com o papel, 6.77:1 com o ocre */
  --bloco-rodape:#120E07;
  --cta-hover:#A7BE63;
  --contorno-forte:rgba(240,226,196,.40);  /* 3.25:1 compositado */
  --borda-portadora:rgba(240,226,196,.40);
  --sombra-dura-cor:#4E4433;    /* no escuro o bloco deslocado tem de ser MAIS
                                   claro que o fundo, senao some (preto sobre
                                   terra profunda muda a luminancia em ~0.004) */
  --anel:#E7B44F;               /* 9.80:1 sobre o fundo, 6.77:1 sobre o verde */
  --anel-halo:#171209;
  --nav-veu:rgba(9,7,4,.62);

  /* acentos clareados; hue e identidade preservados */
  --verde-cerrado:#7FB463;
  --oliva-folha:#A7BE63;
  --terracota-ipe:#E08B5A;
  --terracota-texto:#EC9A72;
  --ocre-pequi:#E7B44F;
  --magenta-riso:#F2749F;
  --magenta-selo:#F2749F;   /* no escuro o magenta claro já é tinta legítima */

  --papel-70:rgba(23,18,9,.78);
  --linha:rgba(240,226,196,.14);
  --linha-2:rgba(240,226,196,.26);

  --selecao:rgba(167,190,99,.26);
  --tint-ocre:rgba(231,180,79,.14);
  --fita-ocre:rgba(231,180,79,.42);
  --fita-borda:rgba(240,226,196,.26);
  --wash-ocre:rgba(231,180,79,.10);
  --wash-oliva:rgba(167,190,99,.08);
  --wash-terra:rgba(224,139,90,.07);
  --halo-ocre:rgba(231,180,79,.26);
  --brilho-ocre:rgba(231,180,79,.22);
  --brilho-ocre-2:rgba(231,180,79,.30);
  --sombra-verde:rgba(0,0,0,.60);
  --sombra-verde-forte:rgba(0,0,0,.70);
  --sombra-verde-leve:rgba(0,0,0,.50);
  --sombra-casca:rgba(0,0,0,.55);
  --sombra-casca-2:rgba(0,0,0,.70);
  --sombra-cta:rgba(0,0,0,.70);
  --sombra-gaveta:rgba(0,0,0,.75);
  --banda:rgba(39,32,22,.85);
  --banda-0:rgba(39,32,22,0);
  --veu-creme:rgba(49,40,27,.50);
  --veu-creme-forte:rgba(39,32,22,.85);
  --radial-oliva:rgba(63,84,45,.50);
  --radial-sombra:rgba(0,0,0,.45);

  /* no escuro a elevacao deixa de vir da sombra e passa a vir da superficie
     mais clara mais um anel luminoso de 1px */
  --shadow-soft:0 22px 44px -22px rgba(0,0,0,.7), 0 6px 18px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(240,226,196,.07);

  /* cromo nativo: sem isto a barra de rolagem sai branca sobre a pagina quase
     preta. O polegar continua terra quente, nunca o cinza neutro do navegador. */
  color-scheme:dark;
  --polegar:#4E4433;
  --polegar-hover:#5E533F;
}

/* textura de papel: multiply so enegrece sobre terra profunda */
[data-theme="dark"] body::before{mix-blend-mode:screen; opacity:.03}

/* Emblema bordado: raster de bordado FISICO. Proibido recolorir, inverter ou
   filtrar os pixels. No escuro trocamos apenas o modo de mistura (multiply
   apagaria a imagem) e fechamos a mascara, exatamente como o rodape ja fazia. */
[data-theme="dark"] .emblema-img{
  mix-blend-mode:normal; filter:saturate(1.04);
  /* elipse deitada, do tamanho do assunto (os dois passaros e a flor). No claro
     o multiply dissolvia o fundo rosa do bordado no papel; no escuro ele vira
     um disco luminoso, e a correcao e SO a mascara, nunca os pixels. */
  -webkit-mask-image:radial-gradient(ellipse 40% 29% at 50% 50%, #000 42%, transparent 100%);
          mask-image:radial-gradient(ellipse 40% 29% at 50% 50%, #000 42%, transparent 100%);
}
[data-theme="dark"] .nav-brand .brand-emblema{
  mix-blend-mode:normal;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 46%, transparent 74%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 46%, transparent 74%);
}

/* No escuro o contorno legivel de um cartao e a BORDA, nunca a sombra:
   componentes que hoje so se separam do fundo por box-shadow ganham borda. */
[data-theme="dark"] .razoes{border:1px solid var(--linha-2)}
[data-theme="dark"] .sobre-margin{border-color:var(--linha-2)}
[data-theme="dark"] .espacos-map > svg{border:1px solid var(--linha-2)}

/* o filete do topo do cartao e decorativo; no escuro ele some no marrom */
[data-theme="dark"] .card-herb::before{opacity:1}

/* ============================================================
   IMPRESSAO
   Sem isto, imprimir com data-theme=dark sai em pagina preta.
   Reancora os tokens escuros nos valores CLAROS.
   ============================================================ */
@media print{
  [data-theme="dark"]{
    --fundo:var(--papel-cerrado); --fundo-2:var(--creme-semente);
    --superficie-1:var(--papel-cerrado); --superficie-2:var(--creme-semente);
    --superficie-3:#E7DCC2;
    --texto-1:var(--tinta-terra); --texto-2:#5A4B38; --texto-3:#6B5C43;
    --tinta-casca:var(--casca-escura); --texto-sobre-acento:var(--papel-cerrado);
    --bloco-verde:var(--verde-cerrado); --bloco-rodape:var(--casca-escura);
    --cta-hover:var(--casca-escura); --contorno-forte:var(--casca-escura);
    --borda-portadora:#75664B; --sombra-dura-cor:var(--casca-escura);
    --anel:#6E5A1C; --anel-halo:#FBF7EC; --nav-veu:rgba(42,36,24,.42);
    --verde-cerrado:#38512F; --oliva-folha:#5C6A34; --terracota-ipe:#C0603A;
    --terracota-texto:#A64B29; --ocre-pequi:#D89B34; --magenta-riso:#E5286E;
    --magenta-selo:#B81C57;
    --papel-70:rgba(244,237,221,.72);
    --linha:rgba(74,56,38,.16); --linha-2:rgba(74,56,38,.28);
    --selecao:rgba(192,96,58,.24); --tint-ocre:rgba(216,155,52,.16);
    --fita-ocre:rgba(216,155,52,.68); --fita-borda:rgba(74,56,38,.3);
    --wash-ocre:rgba(216,155,52,.14); --wash-oliva:rgba(92,106,52,.11);
    --wash-terra:rgba(192,96,58,.08); --halo-ocre:rgba(216,155,52,.38);
    --brilho-ocre:rgba(216,155,52,.3); --brilho-ocre-2:rgba(216,155,52,.4);
    --sombra-verde:rgba(56,81,47,.35); --sombra-verde-forte:rgba(56,81,47,.45);
    --sombra-verde-leve:rgba(56,81,47,.15); --sombra-casca:rgba(74,56,38,.16);
    --sombra-casca-2:rgba(74,56,38,.22); --sombra-cta:rgba(20,16,10,.4);
    --sombra-gaveta:rgba(42,36,24,.5);
    --banda:rgba(234,223,199,.55); --banda-0:rgba(234,223,199,0);
    --veu-creme:rgba(234,223,199,.4); --veu-creme-forte:rgba(234,223,199,.7);
    --radial-oliva:rgba(92,106,52,.5); --radial-sombra:rgba(42,36,24,.35);
    --shadow-soft:0 22px 44px -22px rgba(56,81,47,.35), 0 6px 18px -10px rgba(74,56,38,.28);
    color-scheme:light;
    --polegar:#CDBD9A; --polegar-hover:#BDA986;
  }
  [data-theme="dark"] body::before{mix-blend-mode:multiply; opacity:.04}
  [data-theme="dark"] .emblema-img,
  [data-theme="dark"] .nav-brand .brand-emblema{mix-blend-mode:multiply}
  .nav, .nav-veu, .theme-toggle, .lightbox, .skip-link{display:none !important}
  .js .rv{opacity:1 !important; transform:none !important}
  .section{padding:24px 0}
}

/* ============================================================
   MOVIMENTO REDUZIDO (complemento dos blocos ja existentes)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .nav-veu{transition:none}
  .theme-toggle{transition:none}
  .theme-toggle:hover, .theme-toggle:active{transform:none}
  html.trocando-tema *{transition:none !important}
  .card-herb, .obj-item{transition:none}
}

/* ============================================================
   ÚLTIMA AÇÃO · destaque do registro mais recente de campo
   (só tokens da camada de papéis: o tema escuro reancora sozinho)
   ============================================================ */
.ultima-acao{padding-top:clamp(30px,4vw,46px); padding-bottom:clamp(40px,6vw,64px)}
.ua-card{
  position:relative; display:grid; grid-template-columns:1.25fr 1fr;
  gap:clamp(24px,4vw,48px); align-items:start;
  background:var(--superficie-2); border:1px solid var(--linha-2);
  border-radius:var(--radius); padding:clamp(26px,4vw,44px);
  box-shadow:var(--shadow-soft);
}
.ua-selo{
  position:absolute; top:-14px; left:clamp(18px,4vw,40px);
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-sobre-acento); background:var(--terracota-ipe);
  padding:6px 12px; border-radius:6px; transform:rotate(-2deg);
  box-shadow:3px 3px 0 var(--sombra-dura-cor);
}
.ua-corpo h2{margin:10px 0 14px}
.ua-texto{max-width:58ch; color:var(--texto-2)}
.ua-acoes{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}
.ua-proxima{
  margin-top:20px; padding-top:14px; border-top:1px dashed var(--linha-2);
  font-family:var(--mono); font-size:13px; line-height:1.55; color:var(--texto-3);
}
.ua-proxima b{color:var(--texto-1)}
.ua-proxima a{color:var(--terracota-texto)}
.ua-visual{display:flex; flex-direction:column; gap:12px; min-width:0}
.ua-cartaz{
  display:block; border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--linha-2); box-shadow:var(--shadow-soft);
}
.ua-cartaz img{display:block; width:100%; height:auto}
.ua-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; list-style:none; margin:0; padding:0}
.ua-strip li{border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--linha)}
.ua-strip img{display:block; width:100%; height:100%; aspect-ratio:3/4; object-fit:cover}
.ua-nota{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--texto-3)}
@media (max-width:860px){
  .ua-card{grid-template-columns:1fr}
  .ua-texto{max-width:none}
}

/* ---- vídeo do encontro: no destaque e na galeria ---- */
.ua-videos{display:flex; flex-wrap:wrap; gap:16px; margin:20px 0 0; align-items:flex-start}
.ua-video{margin:0; flex:1 1 190px; max-width:240px}
.ua-video video{
  width:100%; height:auto; display:block;
  border-radius:var(--radius-sm); border:1px solid var(--linha-2);
  background:var(--superficie-3); box-shadow:var(--shadow-soft);
}
.ua-video figcaption{margin-top:8px}
.foto-video video{
  width:100%; height:auto; display:block;
  border-radius:var(--radius-sm); border:1px solid var(--linha-2);
  background:var(--superficie-3);
}

/* ---- destaque: imagens viram botões que abrem o carrossel do encontro ---- */
button.ua-cartaz{padding:0; background:none; cursor:pointer; font:inherit; text-align:inherit; width:100%}
button.ua-cartaz:hover img{transform:scale(1.015)}
button.ua-cartaz img{transition:transform .3s var(--ease)}
.ua-strip-btn{
  display:block; width:100%; height:100%; padding:0; border:0;
  background:none; cursor:pointer;
}
.ua-strip-btn:hover img{transform:scale(1.04)}
.ua-strip-btn img{transition:transform .3s var(--ease)}
@media (prefers-reduced-motion: reduce){
  button.ua-cartaz img, .ua-strip-btn img{transition:none}
  button.ua-cartaz:hover img, .ua-strip-btn:hover img{transform:none}
}

/* ============================================================
   FESTIVAL · faixa fixa no topo + seção de programação
   ============================================================ */
/* billboard: o cartaz do festival em composição paisagem, primeira dobra */
.festival-billboard{padding:clamp(92px,13vh,124px) 0 0}
.fbb-card{
  display:grid; grid-template-columns:minmax(230px,330px) 1fr; align-items:stretch;
  background:#B81C57; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--linha-2); box-shadow:var(--shadow-soft);
}
.fbb-arte{position:relative; display:block; min-height:100%}
.fbb-arte img{display:block; width:100%; height:100%; object-fit:cover; object-position:center top}
.fbb-lupa{
  position:absolute; left:12px; bottom:12px; font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; background:rgba(42,36,24,.72); color:#FFF8F2;
  padding:4px 10px; border-radius:999px; opacity:0; transition:opacity .18s;
}
.fbb-arte:hover .fbb-lupa, .fbb-arte:focus-visible .fbb-lupa{opacity:1}
.fbb-info{
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:clamp(26px,4vw,48px); color:#FFF8F2;
}
.fbb-kicker{font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#FFD9E6; margin:0}
.fbb-tema{font-family:var(--display); font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08; font-weight:600; margin:0}
.fbb-datas{font-family:var(--mono); font-size:clamp(.95rem,1.4vw,1.15rem); font-weight:700; margin:6px 0 0}
.fbb-extra{font-family:var(--mono); font-size:13px; opacity:.88; margin:0}
.fbb-cta{
  align-self:flex-start; margin-top:14px; font-family:var(--mono); font-size:14px; font-weight:700;
  color:#B81C57; background:#FFF8F2; padding:12px 22px; border-radius:999px; text-decoration:none;
  box-shadow:4px 4px 0 rgba(42,36,24,.35); transition:transform .16s, box-shadow .16s;
}
.fbb-cta:hover{transform:translateY(-2px); box-shadow:5px 6px 0 rgba(42,36,24,.35)}
main section[id]{scroll-margin-top:96px}
.hero{padding-top:clamp(48px,7vh,84px)}
@media (max-width:760px){
  .festival-billboard{padding-top:88px}
  .fbb-card{grid-template-columns:1fr}
  .fbb-arte img{aspect-ratio:16/10; height:auto; object-position:center 18%}
  .fbb-info{padding:24px 22px 28px}
}
@media (prefers-reduced-motion: reduce){
  .fbb-cta{transition:none}
  .fbb-cta:hover{transform:none}
  .fbb-lupa{transition:none}
}

/* bloco das atividades que atravessam os dois dias */
.fest-continuas{
  background:var(--superficie-2); border:1px solid var(--linha-2);
  border-radius:var(--radius); padding:22px 24px; margin-top:28px;
}
.fest-continuas > h3{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--magenta-selo); margin:0 0 16px;
}
.fest-continuas ul{
  list-style:none; margin:0; padding:0; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
}
.fest-continuas li{border-left:2px solid var(--linha-2); padding-left:14px}
.fest-continuas h4{
  margin:0 0 3px; font-family:var(--ff); font-size:1rem; line-height:1.35;
  font-weight:600; color:var(--texto-1);
}
.fest-continuas p{margin:0; font-size:.9rem; line-height:1.5; color:var(--texto-2)}
.fest-continuas .fest-quando{
  font-family:var(--mono); font-size:12px; font-weight:700; line-height:1.45;
  color:var(--terracota-texto); margin:0 0 5px;
}

/* os dois dias, lado a lado, cada um como linha do tempo */
.fest-dias{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:18px; align-items:start}
.fest-conta{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--texto-3); margin:-10px 0 14px;
}
.fest-prog{list-style:none; margin:0; padding:0}
.fest-item{
  display:grid; grid-template-columns:66px 1fr; gap:14px;
  padding:13px 0; border-top:1px solid var(--linha-2);
}
.fest-prog > .fest-item:first-child{border-top:0; padding-top:0}
.fest-hora{
  font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--magenta-selo); margin:0; padding-top:1px;
}
.fest-corpo h4{
  margin:0 0 3px; font-family:var(--ff); font-size:1rem; line-height:1.35;
  font-weight:600; color:var(--texto-1);
}
.fest-corpo p{margin:0; font-size:.9rem; line-height:1.5; color:var(--texto-2)}
.fest-prog .fest-item{padding-left:0}
.fest-prog .fest-item::before{content:none}
.fest-dia{
  background:var(--superficie-2); border:1px solid var(--linha-2);
  border-radius:var(--radius); padding:22px 24px;
}
.fest-dia h3{
  font-family:var(--mono); font-size:16px; letter-spacing:.03em;
  margin:0 0 14px; color:var(--texto-1);
}
.fest-dia h3 span{
  display:block; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--magenta-selo); margin-bottom:2px;
}
.fest-dia ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.fest-dia li{
  font-size:.95rem; line-height:1.55; color:var(--texto-2);
  padding-left:16px; position:relative;
}
.fest-dia li::before{
  content:'✳'; position:absolute; left:0; top:.35em;
  font-size:9px; color:var(--magenta-selo);
}
.fest-dia li b{color:var(--texto-1)}
.fest-dia a{color:var(--terracota-texto); font-weight:700}
.fest-nota{margin-top:20px; font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--texto-3)}
.fest-nota a{color:var(--terracota-texto)}
@media (max-width:900px){
  .fest-dias{grid-template-columns:1fr}
}
@media (max-width:520px){
  .fest-item{grid-template-columns:52px 1fr; gap:10px}
  .fest-continuas{padding:20px 18px}
}