/* ═══════════════════════════════════════════════════════════════════
   GA LEGACY · folha própria
   Carregada DEPOIS de ga-interna.css. Esta é a única página do site
   com linguagem própria — escura nas pontas, clara no meio, e um fio
   contínuo que atravessa tudo.
   ═══════════════════════════════════════════════════════════════════ */

/* ── o documento inteiro é o palco do fio ── */
.lg-doc{position:relative;overflow-x:hidden}
.lg-doc>section,.lg-doc>header,.lg-doc>div{position:relative}
.lg-doc .wrap{position:relative;z-index:3}

/* ── textura de filme para os atos escuros ── */
.lg-escuro{background:var(--ga-escuro-900);color:#fff;isolation:isolate}
.lg-escuro::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;
  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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}
/* brilho difuso que nasce do fio */
.lg-escuro .aura{position:absolute;left:50%;top:50%;width:min(120vw,1400px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(209,164,97,.14),rgba(0,147,221,.1) 40%,rgba(41,22,111,0) 66%)}

/* ═══════════ ATO 0 · HERO ═══════════ */
.lg-hero{min-height:100svh;display:grid;align-items:center;padding:150px 0 90px;text-align:center}
.lg-hero .selo{font-size:.68rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ga-amarelo);margin-bottom:52px;display:block;opacity:.85}
.lg-hero h1{font-size:clamp(3.4rem,12vw,10rem);font-weight:800;line-height:.9;letter-spacing:-.045em;
  color:#fff;margin:0 0 8px}
.lg-hero h1 .lg{display:block;font-size:clamp(.62rem,1vw,.76rem);font-weight:800;letter-spacing:.26em;
  color:rgba(255,255,255,.4);text-transform:uppercase;margin-bottom:2.4em;line-height:1.4}
.lg-hero .prop{max-width:23ch;margin:clamp(34px,5vh,58px) auto 0;font-size:clamp(1.1rem,2.1vw,1.5rem);
  line-height:1.5;font-weight:500;color:rgba(255,255,255,.78);font-style:italic}
.lg-hero .prop em{font-style:italic;color:#fff;
  background:linear-gradient(100deg,#fff 6%,var(--lgc-ouro) 30%,var(--lgc-ouro-claro) 50%,var(--lgc-ouro) 70%,#fff 94%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;padding-right:.07em;animation:lgBrilho 8s linear infinite alternate}
@keyframes lgBrilho{to{background-position:100% 0}}
.lg-hero .desce{margin-top:clamp(40px,7vh,80px);font-size:.7rem;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.38)}

/* ═══════════ ATO 1 · A FRASE ═══════════ */
.lg-frase{padding:clamp(110px,15vw,190px) 0}
.lg-frase .grande{font-size:clamp(1.9rem,4.6vw,3.7rem);font-weight:700;line-height:1.16;
  letter-spacing:-.03em;color:var(--ga-azul-escuro);max-width:22ch}
.lg-frase .grande em{font-style:italic;
  background:linear-gradient(100deg,var(--ga-azul-escuro) 10%,var(--ga-azul) 38%,var(--ga-amarelo) 62%,var(--ga-azul) 88%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;padding-right:.07em;animation:lgBrilho 7s linear infinite alternate}
.lg-frase .apoio{margin-top:44px;margin-left:auto;max-width:44ch;font-size:1.06rem;line-height:1.75;
  color:var(--ga-texto)}

/* ═══════════ ATO 2 · OS CINCO EIXOS ═══════════ */
.lg-eixos{padding:clamp(70px,9vw,120px) 0}
.eixos{display:flex;flex-direction:column;margin-top:12px}
.eixo{display:grid;grid-template-columns:clamp(66px,7vw,96px) 1fr;gap:12px 30px;align-items:baseline;
  padding:34px 0;border-top:1px solid var(--ga-linha);opacity:.34;
  transition:opacity .7s var(--ga-ease-suave)}
.eixo:last-child{border-bottom:1px solid var(--ga-linha)}
.eixo.aceso{opacity:1}
.eixo .num{font-size:.74rem;font-weight:800;letter-spacing:.12em;color:var(--ga-azul);
  font-variant-numeric:tabular-nums;transition:color .5s}
.eixo.aceso .num{color:var(--ga-amarelo-escuro,#b8860b)}
.eixo h3{font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:700;letter-spacing:-.024em;
  color:var(--ga-azul-escuro);line-height:1.2}
.eixo p{margin-top:10px;font-size:1rem;line-height:1.68;color:var(--ga-muted);max-width:56ch}
.no-motion .eixo{opacity:1}

/* ═══════════ ATO 3 · FOTO COM REVELAÇÃO ═══════════ */
.lg-revela{position:relative;height:min(88svh,760px);overflow:hidden;margin:clamp(50px,7vw,90px) 0}
.lg-revela img{position:absolute;inset:0;width:100%;height:118%;object-fit:cover;
  clip-path:inset(0 0 100% 0)}
.no-motion .lg-revela img{clip-path:none}
.lg-revela .legenda{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(30px,5vw,60px) 0;
  background:linear-gradient(transparent,rgba(16,9,42,.72) 55%)}
.lg-revela .legenda p{color:#fff;font-size:clamp(1.15rem,2.4vw,1.75rem);font-weight:600;
  line-height:1.35;letter-spacing:-.02em;max-width:30ch}
.lg-revela .legenda span{display:block;margin-top:14px;font-size:.72rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ga-amarelo)}

/* ═══════════ ATO 4 · CAMPANHAS ═══════════ */
.lg-campanhas{padding:clamp(70px,9vw,120px) 0}
.campanhas{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2px;margin-top:14px}
.camp{position:relative;padding:36px 34px 34px;border:1px solid var(--ga-linha);
  transition:background .4s var(--ga-ease-suave)}
.camp:hover{background:var(--ga-neutro-2,#f7f9fc)}
.camp .et{font-size:.68rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ga-azul);display:block;margin-bottom:14px}
.camp h3{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:var(--ga-azul-escuro)}
.camp p{margin-top:12px;font-size:.98rem;line-height:1.66;color:var(--ga-muted)}
.camp::before{content:"";position:absolute;left:0;top:0;width:34px;height:2px;background:var(--ga-amarelo);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ga-ease-suave)}
.camp:hover::before,.camp.aceso::before{transform:scaleX(1)}

/* ═══════════ ATO 5 · TRANSPARÊNCIA ═══════════ */
.lg-transp{padding:clamp(70px,9vw,110px) 0}
.tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px;margin-top:16px}
.tres>div{padding-top:24px;border-top:2px solid var(--ga-azul-escuro)}
.tres h3{font-size:1.06rem;font-weight:800;letter-spacing:.02em;color:var(--ga-azul-escuro)}
.tres p{margin-top:10px;font-size:.96rem;line-height:1.66;color:var(--ga-muted)}

/* ═══════════ ATO 6 · O TERRITÓRIO ═══════════
   O mapa do Vale do Taquari, vetorizado do PDF do GA Legacy. Antes havia
   aqui um vazio de 400px reservado para o leque de linhas que foi removido
   — o mapa ocupa esse espaço com conteúdo de verdade. */
.lg-ramifica{padding:clamp(76px,10vw,132px) 0 clamp(70px,9vh,110px)}
.lg-mapa .mp-et{display:block;font-size:.68rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ga-azul);margin-bottom:18px;text-align:center}
.lg-mapa .mp-tit{font-size:clamp(1.7rem,3.9vw,3.1rem);font-weight:700;line-height:1.16;
  letter-spacing:-.028em;color:var(--ga-azul-escuro);max-width:24ch;margin:0 auto;text-align:center}
.lg-mapa .mp-tit em{font-style:italic;
  background:linear-gradient(100deg,var(--ga-azul-escuro) 8%,var(--ga-azul) 40%,var(--ga-amarelo) 64%,var(--ga-azul) 90%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;padding-right:.07em;animation:lgBrilho 7s linear infinite alternate}
.lg-mapa .mp-lead{margin:26px auto 0;max-width:52ch;text-align:center;font-size:1.04rem;
  line-height:1.7;color:var(--ga-muted)}

/* ── o palco do mapa ──
   Geometria: malha municipal oficial do IBGE + Rio Taquari do OpenStreetMap.
   Cada município é um <path data-mun> com data-ordem = distância até Lajeado,
   que é onde o GA fica — daí a animação irradia. */
.mp-palco{margin:clamp(34px,5vw,62px) auto 0;max-width:min(880px,94vw);padding:0}
.mp-svg{display:block;width:100%;height:auto;overflow:visible}

/* A região ganha volume só pela sombra — sem contorno desenhado.
   --mp-k vai de 0 a 1 conforme a rolagem, e a sombra cresce com ele:
   o mapa parece se descolar do papel enquanto se forma. */
@property --mp-k{syntax:'<number>';initial-value:0;inherits:false}
.mp-base{fill:#fffdfa;stroke:none;--mp-k:0;
  filter:drop-shadow(0 calc(3px + var(--mp-k)*20px)
                       calc(8px + var(--mp-k)*30px)
                       rgba(41,22,111, calc(.04 + var(--mp-k)*.13)))
         drop-shadow(0 calc(1px + var(--mp-k)*3px)
                       calc(3px + var(--mp-k)*7px)
                       rgba(41,22,111, calc(.03 + var(--mp-k)*.05)))}

/* o fill de cada município vem do atributo (mais quente perto de Lajeado);
   aqui só a linha e o comportamento */
.mp-mun{stroke:#d7ab63;stroke-width:1.15;stroke-linejoin:round;cursor:pointer;
  transition:fill .35s var(--ga-ease-suave),stroke .35s var(--ga-ease-suave),
             filter .35s var(--ga-ease-suave)}
/* Hover = elevação, não cor. Cor forte em área grande lê como roxo.
   O JS aplica o mesmo inline (o cache do file:// ignora esta folha). */
.mp-mun{transition:fill .3s var(--ga-ease-suave),stroke .3s var(--ga-ease-suave),
                   filter .3s var(--ga-ease-suave),transform .3s var(--ga-ease-suave)}
/* o destaque vive num path próprio (.mp-destaque, criado pelo JS), sempre
   no topo da pilha. O município em si não muda de forma nem de lugar. */
.mp-destaque{pointer-events:none}
.mp-mun:focus-visible{outline:none}

/* o rio é o eixo: mais grosso que tudo, com um halo suave */
.mp-rio{fill:none;stroke:var(--ga-azul,#0093dd);stroke-width:5.2;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 7px rgba(0,147,221,.42))}

.mp-sedes{pointer-events:none}
.mp-sede circle{fill:#cf9a2c;transition:fill .3s}
.mp-sede text{font-family:inherit;font-size:15.5px;font-weight:600;text-anchor:middle;
  fill:#46536e;paint-order:stroke;stroke:#fffdf8;stroke-width:3.6px;stroke-linejoin:round;
  transition:fill .3s}
.mp-sede.forte text{font-weight:800;fill:var(--ga-azul-escuro)}
.mp-sede.forte circle{fill:var(--lgc-ouro,#b8801f)}

/* Lajeado: a sede do GA. Anel que respira, para o olho começar aqui. */
.mp-sede.ga text{font-weight:800;font-size:17px;fill:var(--ga-azul-escuro)}
.mp-sede.ga>circle{fill:var(--ga-azul,#0093dd)}
.mp-anel{fill:none;stroke:var(--ga-azul,#0093dd);stroke-width:2;opacity:.5;
  transform-box:fill-box;transform-origin:50% 50%;animation:mpPulso 3.4s ease-out infinite}
@keyframes mpPulso{
  0%{transform:scale(.55);opacity:.6}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}}

/* município sob o cursor: o nome inverte para branco, legível sobre o azul */
.mp-sede.aceso text{fill:#1c2b52;font-weight:800}
.mp-sede.aceso circle{fill:#c08a28}

@media (prefers-reduced-motion:reduce){ .mp-anel{animation:none;opacity:.35} }
@media (max-width:760px){
  .mp-sede text{font-size:20px;stroke-width:4.2px}
  .mp-sede.ga text{font-size:23px}
  .mp-sede circle{r:7}
  .mp-rio{stroke-width:7}
  .mp-mun{stroke-width:1.5}
  .mp-borda{stroke-width:3}
}

/* ── as três frases fecham o ato, logo abaixo do mapa ── */
.lg-ramifica .lista{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;
  margin-top:clamp(44px,6vw,76px)}
/* Visíveis por padrão. Antes tinham opacity:0 esperando um JS que revelasse,
   e quando aquele JS saiu da página o texto simplesmente desapareceu — só
   voltava ao trocar o idioma, porque o i18n reaplica opacity ao repor o
   conteúdo. Conteúdo não pode depender de animação para existir:
   quem anima é o .lg-entra abaixo, e se ele falhar o texto continua lá. */
.lg-ramifica .lista span{font-size:.98rem;color:var(--ga-azul-escuro);font-weight:600;
  padding-top:16px;border-top:2px solid var(--ga-amarelo)}
.no-motion .lg-ramifica .lista span{opacity:1;transform:none}

/* ═══════════ ATO 7 · O FINALE ═══════════ */
.lg-final{min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden}
.lg-final .tres-frases{display:flex;flex-direction:column;gap:.14em}
.lg-final .fr{display:block;overflow:hidden}
.lg-final .fr b{display:block;font-size:clamp(2.1rem,7.6vw,6.4rem);font-weight:800;line-height:1.02;
  letter-spacing:-.045em;color:rgba(255,255,255,.3);transform:translateY(105%);
  transition:color .6s var(--ga-ease-suave)}
.lg-final .fr.on b{color:#fff}
.lg-final .fr:last-child b{
  background:linear-gradient(100deg,#fff 6%,var(--lgc-ouro) 30%,var(--lgc-ouro-claro) 52%,var(--lgc-ouro) 74%,#fff 96%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;padding-right:.06em}
.lg-final .fr:last-child.on b{animation:lgBrilho 6s linear infinite alternate}
.no-motion .lg-final .fr b{transform:none;color:#fff}
.lg-final .arremate{margin-top:56px;font-size:clamp(1rem,1.9vw,1.24rem);color:rgba(255,255,255,.7);
  max-width:34ch;margin-left:auto;margin-right:auto;line-height:1.6}

/* ═══════════ ATO 8 · O CONVITE (formulário) ═══════════ */
.lg-convite{padding:clamp(90px,11vw,140px) 0}
.lg-convite .ficha{max-width:none}
.caixas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 26px}
.caixa{position:relative;display:flex;align-items:flex-start;gap:12px;padding:15px 0;
  border-bottom:1px solid rgba(26,20,66,.1);cursor:pointer;transition:border-color .25s}
.caixa:hover{border-bottom-color:var(--ga-azul)}
.caixa input{position:absolute;opacity:0;width:0;height:0}
.caixa .marca{flex-shrink:0;width:19px;height:19px;border:1.5px solid rgba(26,20,66,.26);
  border-radius:2px;margin-top:2px;display:grid;place-items:center;
  transition:.25s var(--ga-ease-suave)}
.caixa .marca svg{opacity:0;transform:scale(.5);transition:.25s var(--ga-ease-suave);color:#fff}
.caixa input:checked+.marca{background:var(--ga-azul-escuro);border-color:var(--ga-azul-escuro)}
.caixa input:checked+.marca svg{opacity:1;transform:scale(1)}
.caixa input:focus-visible+.marca{box-shadow:0 0 0 4px rgba(0,147,221,.18)}
.caixa .rot{font-size:.98rem;line-height:1.45;color:var(--ga-azul-escuro);font-weight:500}
.caixa .rot small{display:block;font-size:.84rem;font-weight:400;color:var(--ga-muted);margin-top:3px}

/* ── responsivo ── */
@media(max-width:760px){
  .lg-hero{min-height:92svh;padding:120px 0 70px}
  .lg-frase .apoio{margin-left:0}
  .eixo{grid-template-columns:1fr;gap:6px}
  .lg-revela{height:70svh}
  .lg-ramifica{min-height:auto}
  .lg-final{min-height:92svh}
}

/* ═══════════════════════════════════════════════════════════════════
   A MARCA · logo oficial do GA + LEGACY
   O logotipo já traz a onda contínua terminando no ponto dourado —
   a linha da proposta do GA Legacy é a continuação dele. Então o
   wordmark aqui é o logo real, não uma reconstrução.
   ═══════════════════════════════════════════════════════════════════ */
:root{--lgc-ouro:#d1a461;--lgc-ouro-claro:#e6c896}

.lg-marca-bloco{display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,2.6vw,32px)}
/* Logo em prata COM AS TRÊS CAMADAS preservadas: cada cor do original
   (azul-claro, azul-escuro, amarelo) virou um tom próprio de prata, com
   os pesos calculados por proximidade para não serrilhar as bordas.
   ⚠️ A versão achatada em branco (logo-ga-branco.png) funde as camadas
   e mata a onda que atravessa o A — não usar em tamanho grande. */
.lg-marca-logo{width:clamp(112px,15vw,206px);height:auto;display:block;
  filter:drop-shadow(0 16px 46px rgba(0,0,0,.66))
         drop-shadow(0 0 26px rgba(255,255,255,.2))}
.lg-marca-nome{display:flex;justify-content:center;
  font-size:clamp(1.15rem,3.4vw,2.6rem);font-weight:600;letter-spacing:.42em;
  color:#fff;line-height:1;padding-left:.42em;text-shadow:0 2px 26px rgba(0,0,0,.6)}
.lg-marca-nome span{display:inline-block}
.lg-marca-risco{width:clamp(120px,18vw,260px);height:1px;
  background:linear-gradient(90deg,transparent,var(--lgc-ouro),transparent)}

/* ═══════════ HERO com imagem ═══════════ */
.lg-hero{position:relative;min-height:100svh;display:grid;align-items:start;
  padding:clamp(130px,17vh,190px) 0 96px;text-align:center;overflow:hidden}
.lg-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.lg-hero-bg img,
.lg-hero-bg video{position:absolute;inset:0;width:100%;height:112%;
  object-fit:cover;object-position:center 64%}
/* o vídeo nasce invisível e faz crossfade quando estiver pronto para tocar */
.lg-hero-bg video{opacity:0;transition:opacity 1.1s var(--ga-ease-suave)}
.lg-hero-bg video.tocando{opacity:1}
.lg-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,7,26,.92) 0%,rgba(11,7,26,.62) 30%,rgba(11,7,26,.34) 58%,rgba(11,7,26,.86) 100%)}

/* ═══════════ PAR · imagem ao lado de texto ═══════════ */
.lg-par{padding:clamp(80px,10vw,140px) 0}
.lg-par .dupla{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(34px,5vw,80px);align-items:center}
.lg-par .foto{position:relative;overflow:hidden;aspect-ratio:3/4}
.lg-par .foto img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover}
.lg-par .texto h2{font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:700;line-height:1.15;
  letter-spacing:-.03em;color:var(--ga-azul-escuro);max-width:20ch}
.lg-par .texto h2 em{font-style:italic;color:var(--ga-azul)}
.lg-par .texto p{margin-top:24px;font-size:1.08rem;line-height:1.75;color:var(--ga-texto);max-width:44ch}
.lg-par .texto .selo-x{display:block;margin-bottom:22px;font-size:.7rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ga-azul)}
@media(max-width:860px){
  .lg-par .dupla{grid-template-columns:1fr}
  .lg-par .foto{aspect-ratio:4/3}
}

/* ═══════════ FINALE com imagem ao fundo ═══════════ */
.lg-final{position:relative;min-height:100svh;display:grid;place-items:center;
  text-align:center;overflow:hidden}
.lg-final-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.lg-final-bg img{width:100%;height:100%;object-fit:cover;opacity:.22}
.lg-final-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(11,7,26,.5),rgba(11,7,26,.94) 72%)}