/* ═══════════════════════════════════════════════════════════════════════════
   Tribo da Trilha PE — visual do site
   Identidade: verdes de mata (mata, musgo, folha, broto) + terra/areia + um laranja
   de capacete/pôr do sol só nos botões de ação. Títulos em Big Shoulders Display
   (cara de placa de trilha), texto em Manrope.
   Animações: todas aqui no CSS (rolagem com animation-timeline: view(), sticky,
   @keyframes). O JavaScript só liga e desliga classes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cores e medidas (tema DIA) ─────────────────────────────────────────── */
:root {
  --mata: #1f3d2b;
  --mata-2: #2b5238;
  --musgo: #56763a;
  --folha: #8bb54e;
  --broto: #d6e8b6;
  --areia: #f4eee0;
  --areia-2: #e8dec6;
  --terra: #7a4f2e;
  --sol: #f0883a;
  --sol-2: #f6a160;
  --tinta-escura: #142019;

  --fundo: var(--areia);
  --fundo-2: #ebe2cc;
  --cartao: #fffcf4;
  --texto: #1d2b21;
  --texto-2: #4d5c50;
  --titulo: var(--mata);
  --enfase: var(--musgo);
  --linha: rgba(31, 61, 43, .16);
  --sombra: 0 18px 40px -22px rgba(20, 40, 25, .45);

  --f-titulo: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --f-texto: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --raio: 6px;
  --lado: max(1.6rem, (100% - 1320px) / 2);   /* respiro lateral; trava o conteúdo em 1320px */
  --topo-h: 7.2rem;

  /* SWCore (voltar ao topo, lightbox, campos) na cor da marca */
  --sw-pri: #56763a;
}

/* ── Tema NOITE: mata fechada, texto claro; o laranja continua como ação ── */
html[sw-theme="dark"] {
  --fundo: #0e1912;
  --fundo-2: #132219;
  --cartao: #182a1f;
  --texto: #e6eddc;
  --texto-2: #a7b7a3;
  --titulo: #eef5dd;
  --enfase: var(--folha);
  --linha: rgba(214, 232, 182, .14);
  --sombra: 0 18px 40px -20px rgba(0, 0, 0, .7);
  --sw-pri: #8bb54e;
}

/* O SWCore usa raiz de 10px (1rem = 10px): as medidas abaixo já estão nessa escala. */
/* ── Base ───────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; font-size: 62.5%; }   /* mesma raiz do SWCore (1rem = 10px), já na 1ª pintura */
*, *::before, *::after { box-sizing: border-box; }
body.tt {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 1.7rem;
  line-height: 1.65;
  overflow-x: clip;                       /* clip no body (não hidden): uma barra de rolagem só */
  transition: background-color .35s, color .35s;
}
.tt img { max-width: 100%; display: block; }
.tt a { color: inherit; }
/* links que são cartões sobre foto ficam sempre brancos */
.tt .modalidade, .tt .outras__item, .tt .contato__atalhos a { color: #fff; }
.tt h1, .tt h2, .tt h3 { font-family: var(--f-titulo); color: var(--titulo); line-height: 1; margin: 0; letter-spacing: .01em; }
.tt p { margin: 0 0 1.6rem; }
[id] { scroll-margin-top: calc(var(--topo-h) + 1.6rem); }
.tt :focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; }

.pular { position: absolute; left: -999px; top: 0.8rem; z-index: 100; background: var(--sol); color: var(--tinta-escura); padding: 0.96rem 1.6rem; border-radius: var(--raio); }
.pular:focus { left: 0.8rem; }

/* Rótulo pequeno acima dos títulos, com um traço verde */
.rotulo {
  display: inline-flex; align-items: center; gap: 0.96rem;
  font-size: 1.248rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--enfase); margin-bottom: 1.44rem;
}
.rotulo::before { content: ''; width: 3.52rem; height: 2px; background: currentColor; }

/* Títulos de seção: grandes, condensados; a palavra em <em> ganha o verde */
.secao__titulo { font-size: clamp(4.16rem, 6.5vw, 8rem); font-weight: 900; text-transform: uppercase; margin-bottom: 1.92rem; }
.tt h1 em, .tt h2 em { font-style: normal; color: var(--enfase); }
.secao__texto { max-width: 60.8rem; color: var(--texto-2); font-size: 1.76rem; }

.secao { padding: clamp(6.4rem, 9vw, 12.8rem) var(--lado); }
.secao__topo { margin-bottom: clamp(3.2rem, 4vw, 5.6rem); }
.secao__topo--centro { text-align: center; }
.secao__topo--centro .rotulo::before { display: none; }

/* ── Botões (laranja de ação, vidro sobre foto, contorno) ───────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.88rem;
  min-height: 4.64rem; padding: 1.12rem 2rem; border-radius: var(--raio);
  border: 2px solid transparent; font: 700 1.6rem/1 var(--f-texto); text-decoration: none; cursor: pointer;
  transition: transform .25s, background-color .25s, box-shadow .25s;
}
.botao:hover { transform: translateY(-2px); }
.botao--g { min-height: 5.44rem; padding: 1.44rem 2.56rem; font-size: 1.68rem; }
.botao--sol { background: var(--sol); color: var(--tinta-escura) !important; box-shadow: 0 10px 24px -12px rgba(240, 136, 58, .9); }
.botao--sol:hover { background: var(--sol-2); }
.botao--vidro { background: rgba(255, 255, 255, .12); color: #fff !important; border-color: rgba(255, 255, 255, .55); backdrop-filter: blur(6px); }
.botao--vidro:hover { background: rgba(255, 255, 255, .22); }
.botao--contorno { border-color: var(--enfase); color: var(--titulo) !important; background: transparent; }
.botao--contorno:hover { background: var(--enfase); color: #fff !important; }

/* ═══ CABEÇALHO ═════════════════════════════════════════════════════════ */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--topo-h);
  display: flex; align-items: center; gap: 1.6rem; padding: 0 var(--lado);
  color: #fff; transition: background-color .35s, color .35s, box-shadow .35s;
}
.topo::before {                         /* véu escuro só em cima da foto, para o menu ler bem */
  content: ''; position: absolute; inset: 0 0 -2rem; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .65), transparent); transition: opacity .35s;
}
/* Ao rolar (classe do JS) — ou em página sem foto no topo — o cabeçalho ganha fundo */
.topo--cheio, body:not(:has(.heroi, .pg-topo, .erro404)) .topo {
  background: color-mix(in srgb, var(--fundo) 90%, transparent); color: var(--texto);
  backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--linha);
}
.topo--cheio::before, body:not(:has(.heroi, .pg-topo, .erro404)) .topo::before { opacity: 0; }

.topo__marca { display: flex; align-items: center; gap: 1.04rem; text-decoration: none; font: 800 2.32rem/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.topo__menu { display: none; }
.topo__acoes { margin-left: auto; display: flex; align-items: center; gap: 0.8rem; }
.topo__tema {
  width: 4.4rem; height: 4.4rem; display: grid; place-items: center; border-radius: 50%;
  background: transparent; border: 1px solid currentColor; color: inherit; cursor: pointer; font-size: 1.84rem;
}
.topo__zap span { display: none; }
.topo__zap { min-height: 4.4rem; width: 4.4rem; padding: 0; justify-content: center; }   /* 06/10: só o ícone */
.topo__zap i { font-size: 2.4rem; }
.topo__abrir { width: 4.4rem; height: 4.4rem; display: grid; align-content: center; gap: 5px; padding: 0 1.04rem; background: none; border: 0; color: inherit; cursor: pointer; }
.topo__abrir span { height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s, opacity .3s; }

/* Menu do celular: abre por cima de tudo (classe .menu-aberto pelo JS) */
.topo.menu-aberto { background: var(--mata); color: #fff; backdrop-filter: none; }   /* sem o desfoque: ele prenderia o menu fixo dentro do cabeçalho */
.topo.menu-aberto .topo__menu {
  display: flex; flex-direction: column; position: fixed; inset: var(--topo-h) 0 0; padding: 3.2rem var(--lado);
  background: var(--mata); gap: 0.32rem; animation: menu-entra .35s ease both;
}
.topo.menu-aberto .topo__menu a { font: 800 3.84rem/1.2 var(--f-titulo); text-transform: uppercase; text-decoration: none; color: #fff; padding: 0.56rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.topo.menu-aberto .topo__abrir span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo.menu-aberto .topo__abrir span:nth-child(2) { opacity: 0; }
.topo.menu-aberto .topo__abrir span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@keyframes menu-entra { from { opacity: 0; transform: translateY(-1rem); } }
@media (max-width: 420px) { .topo { gap: .8rem; } .topo__acoes { gap: .5rem; } }

@media (min-width: 640px) { .topo__zap span { display: inline; } }
@media (min-width: 1100px) {
  .topo__menu { display: flex; gap: 2.56rem; margin-left: 3.2rem; }
  .topo__menu a { text-decoration: none; font-weight: 700; font-size: 1.52rem; position: relative; padding: 0.64rem 0; }
  .topo__menu a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--folha); transition: right .3s; }
  .topo__menu a:hover::after { right: 0; }
  .topo__abrir { display: none; }
}

/* ═══ HERÓI ═════════════════════════════════════════════════════════════ */
.heroi {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: grid; align-items: end; color: #fff;
  padding: calc(var(--topo-h) + 3.2rem) var(--lado) clamp(11rem, 15vh, 15rem);   /* embaixo sobra lugar para o aviso de cookies não cobrir os botões */
}
.heroi__fotos, .heroi__fotos::after { position: absolute; inset: 0; z-index: -1; }
.heroi__fotos::after { z-index: 1; }   /* véu escuro por cima das fotos */
.heroi__fotos::after { content: ''; background: linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .3) 38%, transparent 62%), linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 55%); }
.heroi__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
/* foto 1 é a base (sempre visível, zoom lento); 2 e 3 entram e saem por cima dela */
.heroi__foto--1 { animation: zoom-lento 24s ease-in-out infinite alternate; }
.heroi__foto--2, .heroi__foto--3 { opacity: 0; animation: revezar 24s ease-in-out infinite; }
.heroi__foto--2 { animation-delay: 6s; }
.heroi__foto--3 { animation-delay: 14s; }
@keyframes zoom-lento { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes revezar {
  0% { opacity: 0; transform: scale(1.1); }
  5%, 31% { opacity: 1; }
  36%, 100% { opacity: 0; transform: scale(1); }
}

.heroi__conteudo { max-width: 96rem; }
.heroi__selo { display: inline-flex; align-items: center; gap: 0.72rem; padding: 0.64rem 1.36rem; border-radius: var(--raio); background: rgba(22, 52, 30, .88); border: 1px solid rgba(139, 181, 78, .55); color: #fff; backdrop-filter: blur(4px); /* 06/10 Sandro: verde escuro, não claro */ font-size: 1.36rem; font-weight: 700; letter-spacing: .06em; animation: sobe .8s .05s both; }
.heroi__titulo { color: #fff !important; font-size: clamp(4.4rem, min(9vw, 10.5vh), 9.6rem); font-weight: 900; text-transform: uppercase; line-height: .9; margin: 1.76rem 0 2.24rem; }
.heroi__titulo em { color: var(--broto) !important; }
/* Título que entra linha a linha: cada linha sobe de dentro da sua "janela" */
.linha { display: block; overflow: hidden; padding-bottom: .04em; }
.linha > span { display: inline-block; animation: linha-sobe 1s cubic-bezier(.2, .75, .2, 1) both; }
.linha:nth-child(2) > span { animation-delay: .15s; }
.linha:nth-child(3) > span { animation-delay: .3s; }
@keyframes linha-sobe { from { transform: translateY(105%); } }
@keyframes sobe { from { opacity: 0; transform: translateY(2.4rem); } }
.heroi__texto { max-width: 57.6rem; font-size: clamp(1.68rem, 2.2vw, 2.08rem); color: rgba(255, 255, 255, .9); animation: sobe .9s .45s both; }
.heroi__botoes { display: flex; flex-wrap: wrap; gap: 1.28rem; margin-top: 2.88rem; animation: sobe .9s .6s both; }
.heroi__rolar { position: absolute; left: 50%; bottom: 2.24rem; width: 2.56rem; height: 4.16rem; margin-left: -.8rem; border: 2px solid rgba(255, 255, 255, .7); border-radius: 1.6rem; }
.heroi__rolar span { position: absolute; left: 50%; top: 0.72rem; width: 4px; height: 0.88rem; margin-left: -2px; border-radius: 2px; background: #fff; animation: rolar 1.8s infinite; }
@keyframes rolar { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(1.44rem); } }
@media (max-width: 639px) { .heroi__botoes .botao { width: 100%; } .heroi__rolar { display: none; } }

/* ═══ NÚMEROS ═══════════════════════════════════════════════════════════ */
.numeros { background: var(--mata); color: var(--areia); padding: clamp(4rem, 6vw, 6.4rem) var(--lado); }
.numeros__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem 2.4rem; }
.numero { border-left: 2px solid rgba(214, 232, 182, .3); padding-left: 1.6rem; }
.numero b { display: block; font: 900 clamp(4.48rem, 7vw, 7.36rem)/1 var(--f-titulo); color: var(--broto); }
.numero span { display: block; margin-top: 0.64rem; font-size: 1.472rem; line-height: 1.35; color: rgba(244, 238, 224, .8); }
@media (min-width: 1024px) { .numeros__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ═══ MODALIDADES — cartões com foto ═══════════════════════════════════ */
.modalidades__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.12rem; }
/* celular: duas colunas de cartões mais altos; o primeiro ocupa a largura toda */
@media (max-width: 639px) {
  .modalidade { aspect-ratio: 3 / 4; }
  .modalidade--grande { grid-column: span 2; aspect-ratio: 4 / 3; }
  .modalidade:not(.modalidade--grande) .modalidade__chamada { display: none; }
  .modalidade:not(.modalidade--grande) .modalidade__nome { font-size: 2.4rem; }
  .modalidade__info { padding: 1.3rem; }
}
.modalidade {
  position: relative; display: block; overflow: hidden; border-radius: var(--raio);
  aspect-ratio: 4 / 3; color: #fff; text-decoration: none; background: var(--mata);
}
.modalidade__foto { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .5s; }
.modalidade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .9)); }
.modalidade:hover .modalidade__foto { transform: scale(1.08); filter: saturate(1.15); }
.modalidade__info { position: absolute; inset: auto 0 0; z-index: 1; padding: 1.76rem 1.92rem; display: grid; gap: 0.4rem; }
.modalidade__nome { font: 900 3.2rem/1 var(--f-titulo); text-transform: uppercase; }
.modalidade__chamada { font-size: 1.472rem; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.modalidade__ver { display: inline-flex; align-items: center; gap: 0.48rem; margin-top: 0.48rem; font-size: 1.36rem; font-weight: 700; color: var(--broto); }
.modalidade__ver i { transition: transform .3s; }
.modalidade:hover .modalidade__ver i { transform: translateX(4px); }
@media (min-width: 640px) {
  .modalidades__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modalidade { aspect-ratio: 4 / 5; }
}
@media (min-width: 1024px) {
  .modalidades__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .modalidade--grande { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .modalidade--grande .modalidade__nome { font-size: 5.44rem; }
  .modalidade--grande .modalidade__chamada { font-size: 1.76rem; max-width: 41.6rem; }
}

/* ═══ AGENDA — cartões com data grande ═════════════════════════════════ */
.agenda { background: var(--fundo-2); }
.agenda__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.92rem; }
@media (min-width: 640px) { .agenda__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .agenda__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evento { display: flex; flex-direction: column; background: var(--cartao); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); border: 1px solid var(--linha); }
.evento__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.evento__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.evento:hover .evento__foto img { transform: scale(1.06); }
.evento__data {
  position: absolute; top: 1.44rem; left: 1.44rem; display: grid; justify-items: center; min-width: 6.72rem;
  padding: 0.72rem 0.96rem 0.8rem; border-radius: var(--raio); background: var(--sol); color: var(--tinta-escura);
  font: 800 1.36rem/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .08em;
}
.evento__data b { font-size: 3.68rem; line-height: .95; }
.evento__corpo { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.92rem 2rem 2.16rem; flex: 1; }
.evento__quando { margin: 0; font-size: 1.28rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--enfase); }
.evento__titulo { font-size: 2.96rem; font-weight: 800; text-transform: uppercase; }
.evento__local { margin: 0; color: var(--texto-2); display: flex; gap: 0.56rem; align-items: center; }
.evento__selos { display: flex; flex-wrap: wrap; gap: 0.64rem; list-style: none; margin: 0.32rem 0; padding: 0; }
.evento__desc { margin: 0; font-size: 1.52rem; color: var(--texto-2); }
.evento__botao { margin-top: auto; align-self: flex-start; }
.selo { display: inline-block; padding: 0.352rem 0.96rem; border-radius: 3px; background: var(--broto); color: var(--mata); font-size: 1.248rem; font-weight: 700; }
.selo--moderado { background: #f2dc8e; color: #4a3608; }
.selo--intenso { background: #f4bfa3; color: #5a210a; }
.selo--vagas { background: transparent; border: 1px solid var(--linha); color: var(--texto-2); }
.agenda__vazia { display: grid; justify-items: start; gap: 1.6rem; max-width: 64rem; padding: 3.2rem; border: 2px dashed var(--linha); border-radius: var(--raio); }
.agenda__vazia > i { font-size: 4rem; color: var(--enfase); }

/* ═══ FAIXA — foto larga com parallax preso à rolagem ═════════════════ */
.faixa { position: relative; overflow: hidden; min-height: 70svh; display: grid; place-items: center; padding: 6.4rem var(--lado); isolation: isolate; color: #fff; text-align: center; }
.faixa__foto { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; z-index: -2; }
.faixa::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 55% 45% at center, rgba(0, 0, 0, .55), transparent 100%); }
.faixa__frase { margin: 0; max-width: 86.4rem; }
.faixa__frase p { font: 800 clamp(3.2rem, 5.5vw, 6.72rem)/1.02 var(--f-titulo); text-transform: uppercase; }
.faixa__frase footer { font-size: 1.36rem; letter-spacing: .2em; text-transform: uppercase; color: var(--broto); }

/* ═══ GALERIA — filtro + grade em colunas (alturas naturais das fotos) ═ */
.filtro { display: flex; gap: 0.8rem; overflow-x: auto; padding-bottom: 0.96rem; margin-bottom: 2.56rem; scrollbar-width: thin; }
.filtro__item {
  flex: none; display: inline-flex; align-items: center; gap: 0.72rem; min-height: 4.4rem; padding: 0.8rem 1.6rem;
  border-radius: var(--raio); border: 1px solid var(--linha); background: var(--cartao); color: var(--texto);
  font: 700 1.472rem/1 var(--f-texto); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
}
.filtro__item small { font-size: 1.152rem; opacity: .65; }
.filtro__item:hover { border-color: var(--enfase); }
.filtro__item.is-ativo { background: var(--mata); border-color: var(--mata); color: var(--areia); }
html[sw-theme="dark"] .filtro__item.is-ativo { background: var(--folha); border-color: var(--folha); color: var(--tinta-escura); }
@media (min-width: 1024px) { .filtro { flex-wrap: wrap; overflow: visible; } }

.galeria__grade { columns: 2; column-gap: 1.12rem; }
@media (min-width: 768px) { .galeria__grade { columns: 3; } }
@media (min-width: 1200px) { .galeria__grade { columns: 4; column-gap: 1.44rem; } }
.galeria__item {
  position: relative; display: block; break-inside: avoid; margin-bottom: 1.12rem;
  border-radius: 4px; overflow: hidden; background: var(--fundo-2); animation: aparece .55s ease both;
}
.galeria__item img { width: 100%; height: auto; transition: transform .7s, filter .4s; }
.galeria__item:hover img { transform: scale(1.05); filter: brightness(1.05) saturate(1.1); }
.galeria__esp { position: absolute; left: 0.8rem; bottom: 0.8rem; padding: 0.24rem 0.8rem; border-radius: 3px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 1.152rem; font-weight: 700; opacity: 0; transform: translateY(0.64rem); transition: opacity .3s, transform .3s; }
.galeria__item:hover .galeria__esp, .galeria__item:focus-visible .galeria__esp { opacity: 1; transform: none; }
/* estados trocados pelo JS: fora do filtro, recolhida (antes do "Ver mais") */
.galeria__item.is-fora { display: none; }
.galeria__grade:not(.galeria--aberta, .galeria--filtrada) .galeria__item.is-recolhida { display: none; }
.galeria__mais { display: flex; justify-content: center; margin-top: 2.4rem; }
.galeria__mais.is-escondido { display: none; }
@keyframes aparece { from { opacity: 0; transform: translateY(1.6rem) scale(.98); } }

/* ═══ SOBRE / CONTATO — "dupla": foto numa metade, texto na outra ═══════ */
.sobre, .contato { padding-inline: 0; }
.dupla { display: grid; grid-template-columns: minmax(0, 1fr); }
.dupla + .dupla { margin-top: clamp(4.8rem, 8vw, 9.6rem); }
.dupla__foto { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.dupla__foto img { width: 100%; height: 100%; object-fit: cover; }
.dupla__texto { padding: 4rem var(--lado) 0; }
.dupla__texto > p { color: var(--texto-2); max-width: 60.8rem; }
@media (min-width: 1024px) {
  .dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; min-height: 88svh; }
  .dupla__foto { height: 100%; aspect-ratio: auto; border-radius: 0 var(--raio) var(--raio) 0; }
  .dupla__texto { padding: 4.8rem max(2.4rem, (100vw - 1320px) / 2) 4.8rem clamp(4rem, 5vw, 8.8rem); }
  .dupla--invertida .dupla__foto { order: 2; border-radius: var(--raio) 0 0 var(--raio); }
  .dupla--invertida .dupla__texto { padding: 4.8rem clamp(4rem, 5vw, 8.8rem) 4.8rem max(2.4rem, (100vw - 1320px) / 2); }
}
.mvv { display: grid; gap: 1.28rem; margin-top: 2.56rem; }
.mvv__item { padding: 1.6rem 1.84rem; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--linha); }
.mvv__item h3 { display: flex; align-items: center; gap: 0.72rem; font-size: 2.32rem; text-transform: uppercase; margin-bottom: 0.56rem; color: var(--enfase); }
.mvv__item p { margin: 0; font-size: 1.52rem; color: var(--texto-2); }
.kelson__produtos-titulo { font-size: 2.56rem; text-transform: uppercase; margin: 2.88rem 0 1.28rem; }
.lista-selos { display: flex; flex-wrap: wrap; gap: 0.72rem; list-style: none; margin: 0; padding: 0; }
.lista-selos li { padding: 0.56rem 1.12rem; border-radius: 3px; background: var(--broto); color: var(--mata); font-size: 1.36rem; font-weight: 600; }
html[sw-theme="dark"] .lista-selos li { background: rgba(139, 181, 78, .16); color: var(--broto); }

/* ═══ FRENTES — painéis cheios que se empilham ao rolar (sticky) ═══════ */
.frente { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 9.6rem var(--lado) 4.8rem; color: #fff; overflow: hidden; isolation: isolate; background: var(--mata); }
.frente__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.frente::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 45%); }
.frente__caixa { max-width: 64rem; padding: 2.56rem; border-radius: var(--raio); background: rgba(20, 40, 26, .92); border: 1px solid rgba(214, 232, 182, .2); }
.frente__caixa .rotulo { color: var(--broto); }
.frente__titulo { color: #fff !important; font-size: clamp(4.16rem, 6vw, 7.36rem); font-weight: 900; text-transform: uppercase; margin-bottom: 1.6rem; }
.frente__caixa p { color: rgba(255, 255, 255, .88); }
.frente__lista { margin: 0; padding-left: 1.76rem; display: grid; gap: 0.56rem; font-size: 1.472rem; color: rgba(255, 255, 255, .85); }
.frente--2 .frente__caixa { margin-left: auto; }
@media (min-width: 768px) {
  .frente { position: sticky; top: 0; height: 100svh; }   /* cada painel cobre o anterior */
  .frente { box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .55); }
}

/* ═══ DICAS + PERGUNTAS — sanfona nativa (details) ═════════════════════ */
.dicas__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5.6rem; }
@media (min-width: 1024px) { .dicas__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8rem; } }
.sanfona { border-bottom: 1px solid var(--linha); }
.sanfona summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.6rem;
  padding: 1.68rem 0; font: 800 2.32rem/1.15 var(--f-titulo); text-transform: uppercase; color: var(--titulo);
}
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary::after { content: '+'; flex: none; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linha); font: 400 2.24rem/1 var(--f-texto); color: var(--enfase); transition: transform .3s, background-color .3s; }
.sanfona[open] summary::after { transform: rotate(45deg); background: var(--broto); color: var(--mata); }
.sanfona ul, .sanfona > p { margin: 0 0 1.92rem; color: var(--texto-2); font-size: 1.568rem; animation: sobe .4s both; }
.sanfona ul { padding-left: 1.76rem; display: grid; gap: 0.64rem; }

/* ═══ PARCEIROS — faixa de logos rolando sem parar ═════════════════════ */
.parceiros { padding: clamp(6.4rem, 8vw, 9.6rem) 0; overflow: hidden; }
.parceiros .secao__topo { padding: 0 var(--lado); }
.parceiros__trilho {
  display: flex; width: max-content; animation: rolar-logos 80s linear infinite;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.parceiros:hover .parceiros__trilho { animation-play-state: paused; }
.parceiros__lista { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0 0.8rem; }
.parceiros__lista li { flex: none; }
.parceiros__lista img { max-width: none; width: 12rem; height: 12rem; object-fit: contain; padding: 0.96rem; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); filter: grayscale(1); opacity: .85; transition: filter .3s, opacity .3s, transform .3s; }
.parceiros__lista li:hover img { filter: none; opacity: 1; transform: translateY(-3px); }
@keyframes rolar-logos { to { transform: translateX(-50%); } }
.parceiros__rede { text-align: center; margin: 3.2rem var(--lado) 0; color: var(--texto-2); font-size: 1.52rem; }
.parceiros__rede a { color: var(--enfase); font-weight: 700; }

/* ═══ CONTATO ═══════════════════════════════════════════════════════════ */
.contato { background: var(--fundo-2); }
.contato__foto { aspect-ratio: 4 / 5; }
.contato__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .85)); }
.contato__atalhos { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: 0.8rem; padding: 1.92rem; }
.contato__atalhos a { display: flex; align-items: center; gap: 1.28rem; color: #fff; text-decoration: none; padding: 0.88rem 1.28rem; border-radius: var(--raio); background: rgba(255, 255, 255, .1); backdrop-filter: blur(6px); transition: background-color .25s; overflow-wrap: anywhere; }
.contato__atalhos a:hover { background: rgba(255, 255, 255, .22); }
.contato__atalhos i { font-size: 2.56rem; color: var(--broto); }
.contato__atalhos small { display: block; font-size: 1.12rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.contato .dupla__texto { padding-bottom: 4.8rem; }
.form-contato { display: grid; gap: 1.6rem; max-width: 57.6rem; margin-top: 2.24rem; }
.form-contato [sw-fld] { margin: 0; }
.form-contato__dupla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
@media (min-width: 640px) { .form-contato__dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-contato .botao { justify-self: start; }
.form-contato .botao[disabled] { opacity: .6; pointer-events: none; }
.form-contato__nota { font-size: 1.312rem; color: var(--texto-2); margin: 0; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { display: flex; gap: 0.8rem; align-items: center; padding: 1.28rem 1.6rem; border-radius: var(--raio); font-weight: 700; }
.aviso--ok { background: var(--broto); color: var(--mata); }

/* ═══ PÁGINA DE MODALIDADE ══════════════════════════════════════════════ */
.pg-topo { position: relative; isolation: isolate; overflow: hidden; min-height: 78svh; display: grid; align-items: end; color: #fff; padding: calc(var(--topo-h) + 4.8rem) var(--lado) 5.6rem; }
.pg-topo__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: zoom-lento 20s ease-in-out infinite alternate; }
.pg-topo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent 55%); }
.pg-topo__titulo { color: #fff !important; font-size: clamp(5.44rem, 12vw, 13.6rem); font-weight: 900; text-transform: uppercase; margin: 1.6rem 0; overflow-wrap: anywhere; }
.pg-topo__texto { max-width: 57.6rem; font-size: 1.92rem; color: rgba(255, 255, 255, .9); animation: sobe .9s .35s both; }
.trilha-nav { font-size: 1.36rem; color: rgba(255, 255, 255, .8); display: flex; flex-wrap: wrap; gap: 0.64rem; }
.trilha-nav a { color: inherit; }
.trilha-nav--escura { color: var(--texto-2); margin-bottom: 2.4rem; }
.pg-texto__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; }
@media (min-width: 1024px) {
  .pg-texto__grade { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8rem; align-items: start; }
  .pg-texto__lado { position: sticky; top: calc(var(--topo-h) + 2.4rem); }
}
.pg-texto__corpo > p { font-size: 1.792rem; max-width: 73.6rem; }
.abnt { margin: 0 0 3.2rem; padding: 0.48rem 0 0.48rem 2.24rem; border-left: 4px solid var(--folha); }
.abnt p { font: 800 clamp(2.72rem, 3.6vw, 4rem)/1.1 var(--f-titulo); text-transform: uppercase; color: var(--titulo); margin-bottom: 0.96rem; }
.abnt footer { font-size: 1.28rem; letter-spacing: .16em; text-transform: uppercase; color: var(--enfase); }
.riscos { margin-top: 3.2rem; padding: 2.24rem 2.4rem; border-radius: var(--raio); background: var(--fundo-2); border: 1px solid var(--linha); }
.riscos h2 { display: flex; gap: 0.8rem; align-items: center; font-size: 2.56rem; text-transform: uppercase; margin-bottom: 1.28rem; }
.riscos ul { margin: 0; padding-left: 1.76rem; color: var(--texto-2); }
.pg-texto__lado { display: grid; gap: 1.28rem; justify-items: start; padding: 2.56rem; border-radius: var(--raio); background: var(--mata); color: var(--areia); }
.pg-texto__lado .rotulo { color: var(--broto); }
.pg-texto__lado .botao--contorno { border-color: var(--broto); color: var(--areia) !important; }
.outras__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.12rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .outras__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .outras__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.outras__item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--raio); color: #fff; text-decoration: none; }
.outras__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.outras__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .85)); }
.outras__item span { position: absolute; inset: auto 1.12rem 0.96rem; z-index: 1; font: 800 2rem/1 var(--f-titulo); text-transform: uppercase; }
.outras__item:hover img { transform: scale(1.08); }

/* Páginas de texto (privacidade) e 404 */
.texto-simples { max-width: 83.2rem; margin: 0 auto; padding-top: calc(var(--topo-h) + 4.8rem); padding-inline: 1.6rem; }
.texto-simples h2 { font-size: 2.88rem; text-transform: uppercase; margin: 3.2rem 0 0.96rem; }
.erro404 { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--topo-h) + 3.2rem) var(--lado) 4.8rem; color: #fff; overflow: hidden; }
.erro404__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.erro404::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .65), transparent 70%); }
.erro404 .secao__titulo { color: #fff; }
.erro404 .rotulo { color: var(--broto); }
.erro404__caixa { max-width: 64rem; }

/* Lightbox do SWCore sempre por cima do cabeçalho fixo */
.sw-lightbox-ovl { z-index: 1000 !important; }

/* Kelson: espaço elegante enquanto a foto não chega (iniciais + legenda, sem ilustração) */
.kelson__sem-foto { min-width: 0; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 1.6rem; min-height: 40rem; color: var(--broto);
  background: radial-gradient(circle at 30% 20%, rgba(139, 181, 78, .25), transparent 55%), linear-gradient(160deg, var(--mata-2), var(--mata)); }
.kelson__iniciais { font: 900 clamp(9rem, 26vw, 22rem)/.85 var(--f-titulo); letter-spacing: -.02em; color: rgba(214, 232, 182, .9); }
.kelson__legenda { font-size: 1.3rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 238, 224, .75); }

/* ═══ RODAPÉ ════════════════════════════════════════════════════════════ */
.rodape { background: var(--tinta-escura); color: rgba(244, 238, 224, .85); padding: 6.4rem var(--lado) 3.2rem; }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; }
@media (min-width: 768px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.rodape h2 { color: var(--broto); font-size: 2.08rem; text-transform: uppercase; margin-bottom: 1.28rem; }
.rodape__logo { width: 16rem; height: auto; margin-bottom: 1.6rem; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.rodape__links, .rodape__contato { display: grid; gap: 0.72rem; align-content: start; }
.rodape a { text-decoration: none; overflow-wrap: anywhere; }
.rodape a:hover { color: var(--broto); }
.rodape__contato a { display: flex; gap: 0.8rem; align-items: center; }
.rodape__base { display: flex; flex-wrap: wrap; gap: 0.8rem 2.24rem; margin-top: 4.8rem; padding-top: 2.24rem; border-top: 1px solid rgba(244, 238, 224, .12); font-size: 1.36rem; }

/* As animações do site (entrada, rolagem, herói, botão do WhatsApp, tradutor) ficam em animacoes.css */