@charset "utf-8";
/* =============================================================
   RÉVEILLON UBA 2027 · Barra Grande, Piauí
   sertao.css — DIREÇÃO VISUAL "SERTÃO · um estado de espírito"

   Segunda direção de front-end, traduzida do PDF "ESTRATEGIA UBA 27".
   Entra depois de theme.css e está inteiramente escopada em
   [data-tema] — no tema cordel este arquivo é inerte.

   A ESTRUTURA DO SITE NÃO MUDA: mesmas seções, mesma ordem, mesmo
   conteúdo, mesma funcionalidade (mapa, reservas, contagem, FAQ).
   O que muda é o sistema visual inteiro.

   O QUE O DECK É — e o que este arquivo persegue:

   1. SEM ORNAMENTO. O deck não tem um único grafismo de cordel. Os
      motivos saem de cena por completo; quem carrega a página é a
      foto do destino e a tipografia.
   2. SÓ RETÂNGULO. Canto reto em tudo. Nada de pílula, nada de
      sombra dura, nada de borda preta de 5px.
   3. DOIS CHÃOS. Preto-rede e creme, alternando em corte seco.
      Nenhum meio-tom decorativo entre eles.
   4. A MARCA É "SERTÃO". "Ser" vazado + "tão" sólido. O olho de
      cordel sai do herói.
   5. NUMERAL COMO ESTRUTURA. 01, 02, 03… em corpo grande e peso
      leve, marcando cada seção (slides 02 e 06). Gerados por
      contador CSS — nenhum número foi escrito no HTML.
   6. SPLIT-SCREEN. Metade foto, metade cor chapada, com aresta viva
      no meio (slide 04).
   7. RÓTULO MICRO. Versalete, tracking 0.22em, dourado, com o ponto
      médio que o deck usa entre as duas partes.
   8. RODAPÉ DE SEÇÃO. "UBA 2027 · NOME DA SEÇÃO" no pé de cada
      bloco, como o rodapé de cada slide.
   9. TÍTULO EM PESO MÉDIO. O deck não usa títulos pesados: o texto
      é regular em corpo grande, e quem carrega a ênfase é o itálico.

   ÍNDICE
   01 tokens · 02 base e tipografia · 03 a marca SERTÃO
   04 nav · 05 herói · 06 ritmo das seções · 07 numeral e rodapé
   08 split-screen · 09 cartões e listas · 10 formulários
   11 guia e mapa · 12 contraste
   ============================================================= */

/* ── 01 TOKENS ───────────────────────────────────────────────
   Paleta "cor do destino", hexadecimais do slide 13. Os nomes são
   herdados do tema cordel de propósito: assim as regras de theme.css
   — e os style="color:var(--limao)" que estão inline no HTML —
   resolvem para a cor do sertão sem tocar na marcação. */
[data-tema]{
  --areia:#EAD9B5;
  --azul-mar:#2E4A50;
  --vermelho-sol:#C6402A;
  --dourado:#E0A03A;
  --mangue:#5E6B45;
  --barro:#A8552F;
  --preto-rede:#221C16;
  --rosa-cordel:#E24C86;

  /* os dois chãos e seus degraus */
  --creme:#F2E8D5;
  --creme-2:#FAF4E8;
  --escuro-2:#2C251D;
  --areia-2:#E4D6BC;
  --areia-3:var(--creme);

  /* remapeamento dos papéis herdados */
  --roxo:var(--preto-rede);
  --roxo-esc:#1A1611;
  --roxo-2:#3C6068;
  --magenta:var(--vermelho-sol);
  --limao:var(--dourado);
  --verde:var(--mangue);
  --verde-esc:#3E4A2C;
  --vermelho:var(--vermelho-sol);
  --laranja:var(--barro);
  --ocre:var(--dourado);
  --azul:var(--azul-mar);
  --preto:var(--preto-rede);
  --branco:var(--creme-2);

  /* uma família só, geométrica, como no deck */
  --font-serif:"Poppins","Century Gothic",Futura,"Trebuchet MS",sans-serif;
  --font-sans:"Poppins","Century Gothic",Futura,"Trebuchet MS",sans-serif;
  --font-mono:"Poppins","Century Gothic",Futura,"Trebuchet MS",sans-serif;

  --fio:rgba(34,28,22,.18);
  --fio-claro:rgba(242,232,213,.22);
  --pad-y:clamp(4.5rem,11vh,9rem);   /* o deck respira muito mais */
  --maxw:1280px;

  accent-color:var(--dourado);
  color-scheme:light;
}

/* ── 02 BASE E TIPOGRAFIA ────────────────────────────────────── */
[data-tema] body{background:var(--creme);color:var(--preto-rede)}
[data-tema] .grain{opacity:.03}
[data-tema] .scrollbar{background:var(--dourado);height:2px}
[data-tema] ::selection{background:var(--dourado);color:var(--preto-rede)}
[data-tema] :focus-visible{outline:2px solid var(--dourado);outline-offset:3px}

/* títulos em peso médio e corpo grande — o oposto do cordel, que é
   pesado e compacto. A ênfase vem do itálico, não do peso. */
[data-tema] h1,[data-tema] h2,
[data-tema] h3,[data-tema] h4{font-weight:500;letter-spacing:-.022em}
[data-tema] .h1{font-size:clamp(2.4rem,1.1rem + 5.6vw,5rem);line-height:1.02}
[data-tema] .h2{font-size:clamp(2rem,1.1rem + 3.4vw,3.8rem);line-height:1.06}
[data-tema] .h3{font-size:clamp(1.35rem,1rem + 1.4vw,2rem)}
[data-tema] .lede{font-size:clamp(1.05rem,.95rem + .6vw,1.4rem);line-height:1.6;
  font-weight:300;max-width:60ch}
[data-tema] .lede b,[data-tema] .lede strong{font-weight:600}
[data-tema] p{font-weight:300}

/* rótulo micro: versalete, tracking largo, com o ponto médio do deck */
[data-tema] .eyebrow{
  display:block;font-weight:500;letter-spacing:.24em;font-size:.64rem;
}

/* o deck usa o ponto médio como SEPARADOR entre as duas partes do
   rótulo, e o texto do HTML já traz o dele ("Barra Grande · Piauí").
   Um ::after aqui só acrescentaria um ponto solto no fim. */
[data-tema] .mono{letter-spacing:.2em;font-weight:400}
[data-tema] .contagem b,[data-tema] .rota-t{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}

/* o grifo neon vira sublinhado; a citação perde a serifada e ganha itálico */
[data-tema] .grifo{background:none;color:inherit;padding:0;
  box-shadow:inset 0 -.32em 0 rgba(224,160,58,.4)}
[data-tema] .citacao{
  border-left:0;padding-left:0;margin-top:2rem;max-width:30ch;
  font-weight:400;font-style:italic;line-height:1.28;
  font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem);
}
[data-tema] .nota-editorial{
  border-left:0;padding:1rem 0 0;border-top:1px solid var(--fio);font-weight:300;
}

/* ── 03 A MARCA "SERTÃO" ─────────────────────────────────────
   "Ser" vazado + "tão" sólido, como na capa e no slide 17. É ela que
   ocupa o herói; o olho de cordel sai de cena. */
.marca-sertao{display:none}
/* TAY Lennon — SOMENTE LOCAL, para avaliação na máquina do designer.
   O src usa apenas local(): nenhum arquivo de fonte é distribuído. Quem
   não tiver a fonte instalada cai no fallback (Poppins) sem quebrar nada.

   NÃO transforme isto em webfont sem licença comercial: o arquivo de
   preview declara "NOT LICENSED FOR USE" nos próprios metadados, e
   publicar uma webfont distribui o arquivo para cada visitante.
   Com a licença comprada em taylorpenton.com, troque este bloco por um
   @font-face apontando para assets/fonts/*.woff2. */
@font-face{
  font-family:"TAY Lennon";
  src:local("TAY Lennon"), local("TAYLennonRegular"), local("TAYLennon-Regular");
  font-weight:400;font-display:swap;
}
[data-tema] .marca-sertao{
  display:block;margin:0 auto;line-height:.92;text-transform:uppercase;
  font-family:"TAY Lennon","Poppins","Century Gothic",Futura,sans-serif;
  font-weight:400;letter-spacing:-.01em;
  font-size:clamp(3.2rem,1rem + 11vw,8.5rem);
}
[data-tema] .ms-a{
  color:transparent;-webkit-text-stroke:1.6px var(--creme);
}
/* onde -webkit-text-stroke não existe, o vazado viraria texto invisível */
@supports not (-webkit-text-stroke:1px red){
  [data-tema] .ms-a{color:var(--creme);opacity:.55;-webkit-text-stroke:0}
}
[data-tema] .ms-b{color:var(--creme)}
/* o olho de cordel sai do herói nesta direção */
[data-tema] .olho-marca{display:none}

/* ── 04 NAV ──────────────────────────────────────────────────
   Sem pílula, sem barra de cor: retângulo, fio de cabelo, versalete. */
[data-tema] .nav.scrolled{background:transparent}
[data-tema] .nav.scrolled::after{opacity:0}
[data-tema] .nav::after{background:var(--fio-claro);height:1px}
[data-tema] .nav-links .link{font-weight:400;letter-spacing:.16em;font-size:.68rem}
[data-tema] .nav-links .link::after{height:1px;background:var(--dourado)}
[data-tema] .pill{
  border-radius:0;border-width:1px;font-weight:400;letter-spacing:.18em;
  font-size:.64rem;padding:.62rem 1.1rem;
}
[data-tema] .pill:hover{background:var(--creme-2);color:var(--preto-rede)}
[data-tema] .pill.cta{background:var(--dourado);border-color:var(--dourado);color:var(--preto-rede)}
[data-tema] .pill.cta:hover{background:var(--creme-2);border-color:var(--creme-2)}
[data-tema] .pill.ic{border-radius:0;padding:.55rem}
[data-tema] .nav-toggle span{height:1px}
@media (max-width:900px){
  [data-tema] .nav-links{background:rgba(34,28,22,.97);border-bottom:1px solid var(--dourado)}
  [data-tema] .nav.open{background:rgba(34,28,22,.97)}
  [data-tema] .nav-links .link{border-bottom-color:var(--fio-claro)}
}

/* ── 05 HERÓI ────────────────────────────────────────────────
   Foto inteira, sem moldura e sem ornamento. O texto vive na faixa
   escura de baixo, como nos slides 01 e 03. */
[data-tema] .hero{background:var(--preto-rede);--limao:var(--creme)}
[data-tema] .hero-bg>img{transform:none}
[data-tema] .hero-content{max-width:min(94vw,1120px)}
[data-tema] .hero .eyebrow{color:var(--creme);letter-spacing:.3em}
/* o h1 recua: quem grita é a marca SERTÃO */
/* no slide 17 "VEM SER TAO VOCE!" e areia, nao dourado — e areia e
   tambem o que sustenta contraste sobre a foto. */
[data-tema] .hero .hero-sub{
  color:var(--creme);letter-spacing:.26em;font-weight:500;margin-top:.5rem;
}
[data-tema] .hero-datas{gap:0;margin-top:2.2rem;justify-content:center}
[data-tema] .hero-datas span{
  border:0;border-radius:0;border-left:1px solid var(--fio-claro);
  padding:.15rem 1.5rem;font-weight:300;letter-spacing:.1em;font-size:.8rem;
}
[data-tema] .hero-datas span:first-child{border-left:0}
[data-tema] .contagem{gap:0;margin-top:2rem}
[data-tema] .contagem div{
  background:none;border:0;border-left:1px solid var(--fio-claro);
  border-radius:0;padding:.2rem 1.35rem;min-width:0;
}
[data-tema] .contagem div:first-child{border-left:0}
[data-tema] .contagem b{font-weight:300;font-size:1.9rem;letter-spacing:-.02em}
[data-tema] .contagem span{letter-spacing:.22em;font-size:.54rem;opacity:.65}
[data-tema] .hero-scroll{color:var(--creme);letter-spacing:.3em;opacity:.6}
[data-tema] .hero-scroll i{width:1px}
/* nenhum ornamento e nenhuma régua sobre a foto */
[data-tema] .hero .orn,
[data-tema] .hero .rule{display:none}

/* botão: retângulo. */
[data-tema] .btn{
  border-radius:0;border-width:1px;font-weight:500;letter-spacing:.2em;
  font-size:.7rem;padding:1.05rem 2.2rem;
}
[data-tema] .btn-primary{background:var(--dourado);border-color:var(--dourado);color:var(--preto-rede)}
[data-tema] .btn-primary:hover{background:var(--creme-2);border-color:var(--creme-2);color:var(--preto-rede);transform:none}
[data-tema] .btn-ghost{border-color:currentColor}
[data-tema] .btn-ghost:hover{background:var(--creme-2);border-color:var(--creme-2);color:var(--preto-rede);transform:none}

/* ── 06 RITMO DAS SEÇÕES ─────────────────────────────────────
   Dois chãos alternando em corte seco, como o deck. Sem meio-tom. */
[data-tema] .painel-areia,
[data-tema] .painel-limao{background:var(--creme);color:var(--preto-rede);--limao:var(--barro);--cor:var(--barro)}
[data-tema] .painel-roxo,
[data-tema] .painel-preto{background:var(--preto-rede);color:var(--areia);--limao:var(--dourado);--cor:var(--dourado)}
[data-tema] .painel-verde,
[data-tema] .painel-magenta{background:var(--escuro-2);color:var(--areia);--limao:var(--dourado);--cor:var(--dourado)}
/* overflow-x:clip (e nao hidden) recorta a sangria da foto na borda da
   tela sem criar um contexto de rolagem — com hidden, o sticky da nav do
   guia deixaria de funcionar. Sem isto, o full-bleed abaixo alarga o body
   em ~316px e a pagina rola de lado. */
[data-tema] .painel{overflow-x:clip;overflow-y:visible}
[data-tema] .conceito h2{color:inherit}

/* todo o grafismo de cordel sai de cena */
[data-tema] .orn,
[data-tema] .rule,
[data-tema] .serrilhado::before,
[data-tema] .serrilhado::after{display:none}

/* a faixa marquee vira uma linha de versaletes entre dois fios */
[data-tema] .faixa{
  background:var(--creme);color:var(--preto-rede);
  border-block:1px solid var(--fio);padding-block:1.1rem;
}
[data-tema] .faixa span{
  font-weight:400;letter-spacing:.3em;font-size:.66rem;text-transform:uppercase;
}
[data-tema] .faixa span::after{
  width:3px;height:3px;background:var(--barro);clip-path:circle(50%);
}
[data-tema] .selo{display:none}

/* ── 07 RODAPÉ DE SEÇÃO ──────────────────────────────────────
   O deck numera as seções (01–07 nas linhas editoriais), e essa
   numeração chegou a existir aqui, gerada por contador CSS. Foi
   removida a pedido — o rodapé de cada bloco continua. */

/* rodapé de seção, como o pé de cada slide */
[data-tema] section.painel > .wrap::after{
  content:"UBA 2027";
  display:block;margin-top:clamp(2.6rem,6vh,4.5rem);
  padding-top:1.1rem;border-top:1px solid currentColor;
  font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
  opacity:.32;
}

/* ── 08 SPLIT-SCREEN ─────────────────────────────────────────
   Slide 04: metade foto, metade cor chapada, aresta viva no meio.
   As seções que já eram "texto + foto" viram esse corte. */
[data-tema] .conceito-grid,
[data-tema] .wellness-grid{
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
[data-tema] .conceito-foto,
[data-tema] .wellness-foto,
[data-tema] .esportes-foto{
  border:0;border-radius:0;box-shadow:none;
}
/* a foto sangra até a borda da tela, em vez de virar um cartão */
@media (min-width:861px){
  [data-tema] .conceito-foto{margin-right:calc(50% - 50vw);width:auto}
  [data-tema] .wellness-foto{margin-left:calc(50% - 50vw);width:auto}
}

/* pilares: sem cartão. Fio no topo e texto, como as linhas editoriais
   numeradas do slide 06. */
[data-tema] .pilares{gap:clamp(1.6rem,3vw,3rem);margin-top:3rem;counter-reset:pil}
[data-tema] .pilar{
  background:none;border:0;border-top:1px solid var(--fio);border-radius:0;
  box-shadow:none;padding:1.1rem 0 0;counter-increment:pil;
}
[data-tema] .pilar:hover{transform:none;box-shadow:none}
[data-tema] .pilar::before{
  content:counter(pil,decimal-leading-zero);
  display:block;font-size:1.9rem;font-weight:200;line-height:1;
  color:var(--barro);margin-bottom:.7rem;letter-spacing:-.02em;
}
[data-tema] .pilar h4{
  color:inherit;font-weight:600;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:.5rem;
}
[data-tema] .pilar p{font-size:.9rem;line-height:1.55;opacity:.78}

/* ── 09 CARTÕES E LISTAS ─────────────────────────────────────
   Slide 08: retângulo de fio fino com uma barra de cor no topo. */
[data-tema] .festa{
  background:var(--creme-2);color:var(--preto-rede);
  border:1px solid var(--fio);border-radius:3px;box-shadow:none;overflow:hidden;
}
[data-tema] .festa::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:5;
  background:var(--f-ac,var(--dourado));
}
[data-tema] .festa:hover{transform:none;box-shadow:0 18px 50px -30px rgba(34,28,22,.6)}
[data-tema] .festa-foto::after{display:none}
[data-tema] .festa-data{
  color:var(--creme-2);font-weight:500;letter-spacing:-.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.75);
}
[data-tema] .festa-nome{font-weight:500;letter-spacing:-.025em}
[data-tema] .festa-tag{
  color:var(--f-ac,var(--barro));letter-spacing:.22em;font-weight:600;font-size:.62rem;
}
[data-tema] .festa-desc{opacity:.8;font-weight:300}
[data-tema] .festa-meta span{
  border:0;border-radius:0;padding:.2rem 0;margin-right:1.4rem;
  color:inherit;opacity:.55;font-weight:400;letter-spacing:.16em;font-size:.6rem;
}
[data-tema] .festa .orn{display:none}

/* destino: cartões viram foto sangrada com legenda embaixo */
[data-tema] .dcard{
  border:0;border-radius:0;min-height:300px;
}
[data-tema] .dcard:hover{transform:none}
[data-tema] .dcard::after{
  background:linear-gradient(180deg,rgba(34,28,22,0) 35%,rgba(34,28,22,.82) 100%);
}
[data-tema] .dcard h4{font-weight:500;font-size:1.15rem}
[data-tema] .dcard p{font-weight:300;opacity:.82}

/* passes */
[data-tema] .passe{
  background:var(--creme-2);border:1px solid var(--fio);border-radius:3px;box-shadow:none;
}
[data-tema] .passe:hover{transform:none;box-shadow:0 18px 50px -30px rgba(34,28,22,.6)}
[data-tema] .passe-topo{background:none;color:inherit;padding-bottom:.6rem;
  border-bottom:0}
[data-tema] .passe-topo::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--p,var(--dourado));
}
[data-tema] .passe-topo h3{font-weight:500;font-size:1.5rem}
[data-tema] .passe-selo{
  background:none;color:var(--barro);border:0;border-radius:0;padding:0;
  font-weight:600;letter-spacing:.18em;font-size:.56rem;top:1.2rem;
}
[data-tema] .passe-picote{display:none}
[data-tema] .passe-linha{border-bottom:1px solid var(--fio)}
[data-tema] .passe-linha dt{letter-spacing:.2em;font-weight:400}
[data-tema] .passe-linha dd{font-weight:500}
[data-tema] .passe-cta .btn{
  background:var(--preto-rede);border-color:var(--preto-rede);color:var(--areia);
}
[data-tema] .passe-cta .btn:hover{background:var(--barro);border-color:var(--barro)}

/* rotas e FAQ: só fios */
[data-tema] .rota{
  background:none;border:0;border-bottom:1px solid var(--fio);border-radius:0;
  padding:1.15rem 0;
}
[data-tema] .rota:hover{background:none;transform:none;opacity:.7}
[data-tema] .rota-ic{color:var(--barro)}
[data-tema] .rota-nome{font-weight:500}
[data-tema] .rota-t{color:var(--barro);font-weight:500}
[data-tema] .faq-lista{border-top:1px solid var(--fio)}
[data-tema] .faq-item{border-bottom:1px solid var(--fio)}
[data-tema] .faq-q{font-weight:400;font-size:1.05rem;padding-block:1.35rem}
[data-tema] .faq-q:hover,
[data-tema] .faq-q[aria-expanded="true"]{color:var(--barro)}
[data-tema] .faq-q .mark::before,
[data-tema] .faq-q .mark::after{height:1px}
[data-tema] .faq-a p{font-weight:300}


/* ── 10 FORMULÁRIOS ──────────────────────────────────────────── */
[data-tema] .news-form input,
[data-tema] .campo input{
  border:0;border-bottom:1px solid var(--fio);border-radius:0;background:none;
  font-weight:300;letter-spacing:0;padding-inline:0;
}
[data-tema] .news-form input{color:inherit}
[data-tema] .campo input:focus{outline:0;border-bottom-color:var(--dourado)}
[data-tema] .campo label{color:var(--barro);letter-spacing:.2em;font-weight:500}
[data-tema] .news-nota{letter-spacing:.2em;opacity:.55}
[data-tema] .news-ok{color:var(--dourado)}

/* ── 11 RODAPÉ · GUIA · MAPA ─────────────────────────────────── */
[data-tema] .foot{background:var(--preto-rede);color:var(--areia);--limao:var(--dourado)}
[data-tema] .foot h4{color:var(--dourado);letter-spacing:.24em;font-weight:500}
[data-tema] .foot a{font-weight:300}
[data-tema] .foot a:hover{color:var(--dourado)}
[data-tema] .foot-bottom{border-top:1px solid var(--fio-claro);letter-spacing:.18em}
[data-tema] .foot-tag{font-weight:300}

[data-tema] .guia-hero{background:var(--preto-rede);--limao:var(--creme)}
[data-tema] .guia-hero .hero-bg::after{
  background:linear-gradient(180deg,rgba(34,28,22,.66),rgba(34,28,22,.9));
}
[data-tema] .guia-hero .marca-sertao{font-size:clamp(2.6rem,1rem + 8vw,6rem)}
/* o til do TÃO sobe acima da caixa da marca e encosta no rótulo acima.
   O respiro vale para as duas direções — sem isto elas divergiriam em
   altura, e a colisão existe em ambas. */
[data-tema] .guia-hero .eyebrow{margin-bottom:1.1rem}
[data-tema] .guia-nav{
  background:var(--preto-rede);border-block:0;border-bottom:1px solid var(--fio-claro);
}
[data-tema] .guia-nav a{
  font-weight:400;letter-spacing:.2em;border-right:0;color:var(--areia);
  font-size:.64rem;padding:1rem 1.3rem;
}
[data-tema] .guia-nav a:hover,
[data-tema] .guia-nav a.on{background:none;color:var(--dourado)}

[data-tema] .lista{gap:0;border-top:1px solid var(--fio)}
[data-tema] .lista-item{
  background:none;color:inherit;border:0;border-bottom:1px solid var(--fio);
  border-radius:0;padding:1.05rem 0;
}
[data-tema] .lista-item:hover{background:none;transform:none;opacity:.75}
[data-tema] .lista-item.is-on{background:rgba(224,160,58,.1)}
[data-tema] .lista-nome{font-weight:500}
[data-tema] .lista-at{color:var(--barro);font-weight:400}
[data-tema] .tag{
  border:0;border-radius:0;font-weight:500;letter-spacing:.16em;padding:.2rem 0;
  margin-right:1rem;opacity:.6;
}
[data-tema] .contato{
  background:none;border:0;border-top:1px solid var(--fio);border-radius:0;
  box-shadow:none;padding:1.15rem 0 0;
}
[data-tema] .contato h4{color:inherit;font-weight:600;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase}
[data-tema] .contato a{color:var(--barro);font-weight:500}
[data-tema] .contato p{font-weight:300}
[data-tema] .aviso{
  border:0;border-left:2px solid var(--vermelho-sol);background:none;
  border-radius:0;padding:.3rem 0 .3rem 1.3rem;
}
[data-tema] .aviso .o-estrela{display:none}

[data-tema] .barra-datas{
  background:none;border:0;border-bottom:1px solid var(--fio);border-radius:0;
  box-shadow:none;padding:0 0 1.3rem;
}
[data-tema] .mapa-wrap{border:0;border-radius:0;box-shadow:none}
[data-tema] .leaflet-tile-pane{filter:saturate(.55) sepia(.34) brightness(1.03)}
[data-tema] .leaflet-container{font-family:var(--font-sans)}
[data-tema] .leaflet-control-attribution{background:rgba(242,232,213,.9)}
[data-tema] .leaflet-control-attribution a{color:#00618A}
[data-tema] .leaflet-bar a:hover{background:var(--dourado)}
[data-tema] .pino .pino-corpo{
  background:var(--barro);border:2px solid var(--creme-2);
  box-shadow:0 3px 10px -3px rgba(34,28,22,.7);
}
[data-tema] .pino.pino-praia .pino-corpo{background:var(--azul-mar)}
[data-tema] .pino:hover .pino-corpo,
[data-tema] .pino.pino-hover .pino-corpo{background:var(--dourado)}
[data-tema] .popup-uba .leaflet-popup-content-wrapper{
  background:var(--creme-2);border:1px solid var(--fio);border-radius:0;
  box-shadow:0 18px 50px -30px rgba(34,28,22,.7);
}
[data-tema] .popup-uba .leaflet-popup-tip{background:var(--creme-2)}
[data-tema] .popup-nome{font-weight:500}
[data-tema] .popup-ig{color:var(--barro)}
[data-tema] .popup-btn{border-radius:0;border-width:1px;font-weight:500;letter-spacing:.14em}
[data-tema] .mini{border-radius:0;border-width:1px;font-weight:500;letter-spacing:.14em}
[data-tema] .mini.pin{color:var(--barro);border-color:var(--barro)}
[data-tema] .mini.pin:hover{background:var(--barro);color:var(--creme-2)}
/* O botão "Reservar" tem verde próprio, fora da paleta do tema: é a
   única ação de conversão da seção e precisa se destacar do resto. */

/* ── 12 CONTRASTE ────────────────────────────────────────────
   Medido elemento a elemento: o dourado só sustenta AA sobre o
   preto-rede. Sobre os fundos claros, o rótulo é barro escurecido. */
[data-tema] .painel-areia,
[data-tema] .painel-limao{--cor:#8E4626;--limao:#8E4626}
[data-tema] .faixa{--limao:#8E4626}

/* ── 13 COMPOSIÇÃO DO HERÓI ──────────────────────────────────
   O deck não centraliza: na capa e no slide 03 a marca está ancorada
   à esquerda, com o rótulo do destino no alto. É esse eixo que dá o
   ar editorial — centralizado, a página volta a parecer cartaz. */
/* O herói é uma pilha centrada: logo, nome, data, local, botão.
   Foi assim que o cliente pediu — sem contador, sem a marca SERTÃO e
   sem a logo no canto superior esquerdo. */
[data-tema] .hero-content{
  text-align:center;width:100%;max-width:min(92vw,900px);
}
[data-tema] .hero-ctas{justify-content:center;margin-top:2.4rem}

/* A logo tem 263x45 de origem e agora é exibida a 264px — ou seja, 1,00x
   de densidade. Em tela Retina isso significa que o navegador estica o
   arquivo ao dobro e ela sai levemente macia. Não há como resolver com
   CSS: só um SVG (ou um PNG de ~530px) devolveria a nitidez. */
[data-tema] .hero-logo{
  width:min(264px,62vw);height:auto;margin:0 auto clamp(1.6rem,4vh,2.6rem);
}

/* o nome do evento é o título de fato agora */
[data-tema] .hero h1{
  font-size:clamp(2.34rem,1.26rem + 4.68vw,4.68rem);
  font-weight:400;letter-spacing:-.022em;text-transform:none;
  color:var(--creme);margin-top:0;opacity:1;
}

[data-tema] .hero-data{
  margin-top:1.4rem;color:var(--creme);
  font-size:clamp(.9rem,.8rem + .5vw,1.15rem);
  font-weight:300;letter-spacing:.16em;text-transform:uppercase;
}
[data-tema] .hero-local{
  margin-top:.5rem;color:var(--areia);
  font-size:clamp(.68rem,.62rem + .3vw,.8rem);
  font-weight:400;letter-spacing:.28em;text-transform:uppercase;opacity:.85;
}

/* A foto estava leitosa: o degradê clareava demais o miolo e a imagem
   perdia corpo. Este escurece o topo e o pé com força e deixa a faixa
   central quase limpa — filme, não névoa. */
/* Camada de escurecimento leve e uniforme sobre a foto, como pedido.
   Uma cor chapada cobre o quadro inteiro por igual, e um degradê suave
   reforça só as duas pontas — o topo para a nav e o pé para o indicador
   de rolagem. Nada de poça central: o herói é simétrico. */
[data-tema] .hero-bg::after{
  background:
    linear-gradient(180deg, rgba(34,28,22,.30) 0%, rgba(34,28,22,0) 18%,
                            rgba(34,28,22,0) 82%, rgba(34,28,22,.34) 100%),
    rgba(34,28,22,.26);
}

/* ── 14 CONTEXTO DE COR ──────────────────────────────────────
   Ao inverter painéis para escuro, os acentos herdados de theme.css
   ficaram calibrados para o chão errado. A auditoria pegou dois casos
   de texto literalmente invisível (cor igual ao fundo) e dezenas de
   acentos abaixo de AA.

   A correção é um token único, --ac ("acento de texto pequeno"), que
   cada contexto redefine. Barro sobre creme, dourado sobre escuro. */
[data-tema]{--ac:#8E4626}
[data-tema] .painel-roxo,
[data-tema] .painel-preto,
[data-tema] .painel-verde,
[data-tema] .painel-magenta,
[data-tema] .foot{--ac:var(--dourado)}
/* cartões claros vivem dentro de painéis escuros: o chão deles é creme,
   então voltam para o barro */
[data-tema] .festa,
[data-tema] .passe,
[data-tema] .popup-uba .leaflet-popup-content-wrapper{--ac:#8E4626}

[data-tema] .lista-at,
[data-tema] .rota-t,
[data-tema] .contato a,
[data-tema] .campo label,
[data-tema] .popup-ig,
[data-tema] .festa-tag{color:var(--ac)}
[data-tema] .mini.pin{color:var(--ac);border-color:var(--ac)}
[data-tema] .mini.pin:hover{background:var(--ac);color:var(--creme-2)}

/* .contato e o resumo de datas traziam color:var(--preto) de theme.css.
   Com o painel agora escuro, isso é preto sobre preto — o texto sumia. */
[data-tema] .contato,
[data-tema] .contato h4,
[data-tema] #datas-resumo{color:inherit}

/* as tags eram coloridas por tipo (praia/restaurante/delivery/bar), o que
   só funcionava sobre o cartão claro do cordel. O deck não codifica por
   cor: usa rótulo miúdo e uniforme. Fica mais legível e mais fiel. */
[data-tema] .tag,
[data-tema] .tag.mar,
[data-tema] .tag.rest,
[data-tema] .tag.deli,
[data-tema] .tag.bar{color:inherit;opacity:.62}

/* ── 15 FIOS E CAMPOS POR CONTEXTO ───────────────────────────
   Duas coisas que a auditoria de contraste NÃO pega, porque olha só
   elementos com nó de texto:

   1. o valor de um <input> não é nó de texto. Os campos de data traziam
      color:var(--preto) de theme.css e, com o painel agora escuro,
      viraram preto sobre preto — invisíveis;
   2. --fio é um cinza escuro a 18%, pensado para chão claro. Sobre os
      painéis escuros os traços de 1px simplesmente não apareciam.

   Ambos viram token de contexto, como --ac. */
[data-tema] .painel-roxo,
[data-tema] .painel-preto,
[data-tema] .painel-verde,
[data-tema] .painel-magenta,
[data-tema] .foot{--fio:rgba(242,232,213,.22)}

[data-tema] .campo input,
[data-tema] .news-form input{
  color:inherit;border-bottom-color:var(--fio);
}
[data-tema] .campo input::placeholder,
[data-tema] .news-form input::placeholder{color:inherit;opacity:.45}
/* o seletor nativo de data desenha o ícone com a cor do texto */
[data-tema] .campo input::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.55);
}
[data-tema] .painel-areia .campo input::-webkit-calendar-picker-indicator,
[data-tema] .painel-limao .campo input::-webkit-calendar-picker-indicator{
  filter:none;opacity:.55;
}

/* Com a logo fora do canto, o space-between da nav perdeu o primeiro
   item e os links encostaram na borda. Centralizados, a barra volta a
   ter eixo — e o par WhatsApp/Ingressos segue à direita. */
[data-tema] .nav-links{
  position:absolute;left:50%;transform:translateX(-50%);
}
/* sem a logo, o par WhatsApp/Ingressos virou o primeiro item em fluxo e
   o space-between o jogou para a esquerda. margin-left:auto devolve ele
   à direita. */
[data-tema] .nav-actions{margin-left:auto}
/* logo do canto: só o recorte da marca (canto.png), sem o "2027" */
[data-tema] .nav-logo{display:inline-flex;align-items:center}
[data-tema] .nav-logo img{width:auto;height:26px;display:block}
[data-tema] .nav.scrolled .nav-logo img{height:22px;transition:height var(--d-quick) var(--ease)}
@media (max-width:900px){
  /* no mobile a nav vira menu sanfonado: o posicionamento absoluto
     acima quebraria o painel que desce, então volta ao fluxo */
  [data-tema] .nav-links{position:fixed;left:0;transform:none}
  [data-tema] .nav.open .nav-links{transform:none}
}

/* ── VÉU DA NAV ──────────────────────────────────────────────
   Sobre o herói a barra é um degradê suave — a foto continua à mostra.
   Passada a primeira imagem ela vira sólida, com transição suave.

   A troca é um crossfade, e não uma mudança de background: gradiente e
   cor chapada não interpolam bem, e a passagem sairia aos saltos. O
   degradê fica na .nav e a cor chapada num ::before que só ganha
   opacidade.

   O conteúdo sobe com z-index para não ficar sob o véu. */
[data-tema] .nav-inner{position:relative;z-index:1}
[data-tema] .nav{
  background:linear-gradient(180deg, rgba(34,28,22,0.88) 0%, rgba(34,28,22,0.66) 55%,
                                     rgba(34,28,22,.12) 85%, rgba(34,28,22,0) 100%);
}
[data-tema] .nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--preto-rede);
  opacity:0;transition:opacity .45s var(--ease);
}
[data-tema] .nav.scrolled::before{opacity:1}

/* ── GRID DE CARDS SEM BURACO ────────────────────────────────
   auto-fit não sabe dos spans: com 5 cards (2 largos + 3 normais = 7
   unidades) em 5 colunas, sobravam 3 células vazias na segunda fileira;
   no Rolês, 4 buracos. Grade fixa de 6 resolve porque os spans passam a
   fechar as fileiras: 3+3 em cima, 2+2+2 embaixo. */
@media (min-width:861px){
  [data-tema] .destino-grid{grid-template-columns:repeat(6,1fr)}
  [data-tema] .dcard{grid-column:span 2}
  [data-tema] .dcard.wide{grid-column:span 3}
  /* Rolês tem 4 cards: dois a dois, em duas fileiras cheias */
  [data-tema] #roles .dcard{grid-column:span 3}
}
@media (min-width:661px) and (max-width:860px){
  [data-tema] .destino-grid{grid-template-columns:repeat(2,1fr)}
  [data-tema] .dcard,
  [data-tema] .dcard.wide,
  [data-tema] #roles .dcard{grid-column:span 1}
}
@media (max-width:660px){
  [data-tema] .destino-grid{grid-template-columns:1fr}
  [data-tema] .dcard,
  [data-tema] .dcard.wide,
  [data-tema] #roles .dcard{grid-column:span 1}
}

/* ── REVEZAMENTO DE FOTOS NO CONCEITO ────────────────────────
   As 5 fotos ficam empilhadas no mesmo espaço e só a opacidade muda:
   2s de transição, 12s de exposição (o intervalo vive em main.js).
   Empilhar com position:absolute exige altura no pai — daí o
   aspect-ratio no .conceito-foto. */
[data-tema] .conceito-foto,
[data-tema] .esportes-foto{position:relative;aspect-ratio:9/16;background:var(--areia-2)}
[data-tema] .wellness-foto{position:relative;aspect-ratio:.877;background:transparent}
[data-tema] .carrossel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 2s var(--ease);
}
[data-tema] .carrossel img.on{opacity:1}
/* As quatro fotos do wellness foram padronizadas em 720x821, e a janela
   tem exatamente essa proporção (.877). Com os formatos batendo, cada
   foto aparece INTEIRA e todas ocupam a janela por igual — some o
   trade-off entre "cortar" e "sobrar espaço" que existia enquanto os
   formatos eram diferentes.

   Fica cover, e não contain: se um dia entrar uma foto fora do padrão,
   cover corta um pouco, enquanto contain abriria uma fresta no layout. */
/* sem JS a primeira permanece visível, e quem prefere menos movimento
   não vê o revezamento */
@media (prefers-reduced-motion:reduce){
  [data-tema] .carrossel img{transition:none}
}

/* ── ELEMENTO: o totem como acento ──────────────────────────
   elemento.png e o cordel destilado num sinal vertical (sol, ondas,
   carnauba). Usado como marca-dagua nos paineis escuros: grande,
   sangrando pela borda, em opacidade baixa. Da profundidade sem virar
   ornamento — que e justamente o que a direcao Sertao evita.

   So nos paineis escuros: a arte e areia clara e sobre o creme ela
   praticamente desaparece.

   Para tirar, basta apagar este bloco — nenhuma marcacao depende dele. */
[data-tema] .painel-preto,
[data-tema] .painel-roxo,
[data-tema] .painel-verde,
[data-tema] .painel-magenta{position:relative;overflow-x:clip}
[data-tema] .painel-preto::after,
[data-tema] .painel-roxo::after,
[data-tema] .painel-verde::after,
[data-tema] .painel-magenta::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-4%;top:8%;width:min(230px,22vw);aspect-ratio:296/720;
  background:url("../assets/img/elemento.png") no-repeat center/contain;
  opacity:.07;
}
/* alterna o lado a cada painel escuro, para nao virar um carimbo repetido */
[data-tema] .painel-verde::after,
[data-tema] .painel-magenta::after{right:auto;left:-4%;top:auto;bottom:8%;transform:scaleX(-1)}
[data-tema] .painel > .wrap{position:relative;z-index:1}
@media (max-width:860px){
  [data-tema] .painel-preto::after,
  [data-tema] .painel-roxo::after,
  [data-tema] .painel-verde::after,
  [data-tema] .painel-magenta::after{opacity:.05;width:34vw}
}

/* A logo no rodapé, no lugar do lockup em texto. Ela é branca, e o
   rodapé é preto-rede — funciona direto. */
[data-tema] .foot-logo{width:170px;height:auto;display:block}

/* ── BUSCA DE VOOS ───────────────────────────────────────────
   Mesma estrutura da barra de datas do guia. Os campos alinham com a
   coluna dos aeroportos abaixo: mesma margem, mesma largura, mesmo fio
   fechando o bloco. */
[data-tema] .barra-voos{
  display:flex;flex-wrap:wrap;gap:1rem 2.2rem;align-items:flex-end;
  margin-bottom:1.8rem;padding-bottom:1.2rem;
  border-bottom:1px solid var(--fio);
}
[data-tema] .barra-voos .campo{flex:0 1 190px;min-width:0}
[data-tema] .barra-voos .campo-origem{flex:0 1 230px}
[data-tema] .barra-voos select{
  font:inherit;font-size:.95rem;font-weight:500;color:inherit;
  background:none;border:0;border-bottom:1px solid var(--fio);
  padding:.55rem 1.4rem .55rem 0;width:100%;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 6px center,right 1px center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
[data-tema] .barra-voos select:focus{outline:0;border-bottom-color:var(--dourado)}
[data-tema] #voos-resumo{
  flex:1 1 100%;margin:0;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.55;
}
/* o botão herda o .mini do guia; só ganha a cor do acento da seção */
[data-tema] .mini.voo{
  color:var(--barro);border-color:var(--barro);flex:0 0 auto;
}
[data-tema] .mini.voo:hover{background:var(--barro);color:var(--creme-2)}
[data-tema] .mini.voo[hidden]{display:none}
/* a .rota nasceu com quatro colunas (ícone, nome, tempo, km); o botão
   de voos é a quinta e sem isto ele quebra para a linha de baixo */
[data-tema] .rota{grid-template-columns:auto 1fr auto auto auto}
@media (max-width:640px){
  [data-tema] .barra-voos{gap:.9rem 1.4rem}
  [data-tema] .barra-voos .campo,
  [data-tema] .barra-voos .campo-origem{flex:1 1 140px}
  [data-tema] .rota .mini.voo{grid-column:2;justify-self:start;margin-top:.3rem}
}