/* ==========================================================
   CETUR GO — Proposta 5 "clara e direta"
   Referência: portal de turismo do Acre (claro, intuitivo).
   Identidade CETUR mantida: azul, dourado e creme.
   Mundo visual fixo pela marca — todas as cores explícitas.
   ========================================================== */
:root{
  --w:#FFFFFF;
  --w2:#FBF8F2;
  --cream:#F5F0E5;
  --navy:#17396A;
  --navy-d:#0E2340;
  --navy-x:#0A1E3C;
  --gold:#B8842A;
  --gold-2:#D9A94A;
  --gold-soft:#FAF1DE;
  --ink:#16202F;
  --muted:#6E6A61;
  --line:#E9E1D2;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --gut:20px;
  --r:18px;
  --r-s:13px;
  --sh:0 1px 2px rgba(22,32,47,.05),0 8px 22px rgba(22,32,47,.07);
  --sh-lg:0 2px 6px rgba(22,32,47,.07),0 18px 44px rgba(22,32,47,.12);
}
*{box-sizing:border-box}
html{background:var(--w)}
body{
  margin:0;background:var(--w);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--gold-2);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gut)}
.ph{background-size:cover;background-position:center;background-repeat:no-repeat}

.eyebrow{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:750;color:var(--gold)}
.h2{font-weight:750;letter-spacing:-.025em;line-height:1.08;font-size:clamp(1.55rem,5.6vw,2.3rem);margin:8px 0 0;color:var(--navy-d)}
.h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold)}
/* variação para título em forma de frase longa: lê como abertura, não como grito */
.h2--lead{font-weight:500;letter-spacing:-.012em;line-height:1.34;font-size:clamp(1.14rem,3.8vw,1.62rem);max-width:36ch;color:var(--ink)}
.sub{margin:9px 0 0;color:var(--muted);font-size:.95rem;max-width:56ch}
.sec{padding:52px 0}
.sec--alt{background:var(--w2);border-block:1px solid var(--line)}
/* celular: cabeçalho de seção centralizado, com o botão embaixo */
.head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:17px;margin-bottom:24px;padding-inline:8px}
.head .sub{margin-inline:auto}
/* ação secundária: pílula com borda, não só texto — precisa parecer clicável */
.link{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  font-size:.85rem;font-weight:700;color:var(--navy);
  padding:11px 19px;border-radius:999px;
  background:var(--w);border:1px solid var(--line);box-shadow:var(--sh);
  transition:border-color .2s,color .2s,transform .2s,box-shadow .2s;
}
.link:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);box-shadow:var(--sh-lg)}
.link svg{transition:transform .22s}
.link:hover svg{transform:translateX(4px)}

/* ação principal */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 27px;border-radius:999px;font-size:.93rem;font-weight:750;
  letter-spacing:-.005em;background:var(--navy);color:#fff;
  box-shadow:0 4px 16px rgba(10,30,60,.20);
  transition:transform .2s,background .2s,box-shadow .2s;
}
.btn:hover{transform:translateY(-2px);background:var(--navy-d);box-shadow:0 10px 28px rgba(10,30,60,.28)}
.btn svg{transition:transform .22s}
.btn:hover svg{transform:translateX(4px)}
.btn--gold{
  background:linear-gradient(145deg,var(--gold-2),var(--gold));color:#241804;
  box-shadow:0 4px 16px rgba(184,132,42,.34);
}
.btn--gold:hover{background:linear-gradient(145deg,var(--gold-2),var(--gold));box-shadow:0 10px 30px rgba(184,132,42,.42)}
.btn--ghost{background:var(--w);color:var(--navy);border:1px solid var(--line);box-shadow:var(--sh)}
.btn--ghost:hover{background:var(--w);border-color:var(--gold-2);box-shadow:var(--sh-lg)}

/* ================= topo ================= */
/* barra opaca: a marca tem fundo branco chapado e apareceria como um
   retângulo sobre barra translúcida */
.bar{position:sticky;top:0;z-index:70;background:var(--w);
  border-bottom:1px solid transparent;transition:border-color .3s}
.bar.is-stuck{border-bottom-color:var(--line)}
.bar__in{display:flex;align-items:center;gap:12px;padding-block:11px}
.brand{display:flex;align-items:center;margin-right:auto;flex:none}
.brand__logo{height:40px;width:auto;display:block}
.nav{display:none;gap:24px;font-size:.89rem;font-weight:600;margin-right:16px;margin-left:auto}
.nav a{color:var(--navy-d);position:relative;padding-block:5px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.nav a:hover::after{transform:scaleX(1)}
.rbtn{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--w);color:var(--navy);box-shadow:var(--sh)}
/* seletor de idioma — o GTranslate já está instalado no site */
.lang{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  height:42px;padding:0 15px;border-radius:999px;
  background:var(--w);color:var(--navy);box-shadow:var(--sh);
  font-size:.86rem;font-weight:650;letter-spacing:.02em;
  transition:transform .18s,box-shadow .18s;
}
.lang:hover{transform:translateY(-1px);box-shadow:var(--sh-lg)}
.lang svg:first-child{color:var(--gold)}

/* ===== menu que abre no toque do hambúrguer ===== */
.burger__x{display:none}
.burger[aria-expanded="true"] .burger__b{display:none}
.burger[aria-expanded="true"] .burger__x{display:block}
.burger[aria-expanded="true"]{background:var(--navy);color:#fff}
.menu{
  overflow:hidden;max-height:0;
  border-top:1px solid transparent;
  transition:max-height .4s cubic-bezier(.4,.02,.15,1),border-color .3s;
}
.menu.is-open{max-height:400px;border-top-color:var(--line)}
.menu__in{display:flex;flex-direction:column;padding:6px var(--gut) 14px}
.menu__in a{
  padding:14px 4px;font-size:1.02rem;font-weight:650;color:var(--navy-d);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.menu__in a::after{content:"›";color:var(--gold);font-size:1.3rem;line-height:1}
.menu__in a:last-child{border-bottom:0}
.menu__in a:active{color:var(--gold)}

/* ================= herói ================= */
.hero{position:relative}
.hero__ph{height:52svh;min-height:320px;position:relative;}
.hero__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,30,60,.34),rgba(10,30,60,.10) 45%,rgba(255,255,255,.55) 100%)}
.hero__card{
  position:relative;z-index:3;margin-top:-72px;
  background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 20px 22px;box-shadow:var(--sh-lg);
}
.hero__card h1{
  font-weight:800;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(2rem,8.4vw,3.2rem);margin:10px 0 10px;color:var(--navy-d);text-wrap:balance;
}
.hero__card h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold)}
.hero__card>p{margin:0 0 18px;color:var(--muted);max-width:52ch}
.find{display:flex;align-items:center;gap:9px;background:var(--w2);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 17px;margin-bottom:13px}
/* 16px é obrigatório: abaixo disso o Safari do iPhone dá zoom ao focar o campo */
.find input{
  flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;
  font-size:16px;color:var(--ink);padding-block:11px;
  -webkit-appearance:none;appearance:none;border-radius:0;
}
.find input::-webkit-search-decoration,
.find input::-webkit-search-cancel-button{-webkit-appearance:none}
.find input::placeholder{color:var(--muted)}
.find__go{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--gold-2),var(--gold));transition:transform .18s}
.find__go:hover{transform:scale(1.07)}
.acts{display:flex;flex-wrap:wrap;gap:9px}
.stats{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.stat b{display:block;font-size:1.34rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:650}

/* ================= categorias ================= */
.g8{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ic{
  background:var(--w);border:1px solid var(--line);border-radius:var(--r-s);
  padding:14px 7px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.ic:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--gold-2)}
.ic__s{width:46px;height:46px}
.ic__s svg{width:100%;height:100%;display:block}
.ic b{font-size:.72rem;font-weight:650;line-height:1.22;color:var(--navy)}

/* ================= evento em destaque ================= */
.feat{
  background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh);display:grid;
}
.feat__ph{aspect-ratio:16/9;position:relative}
.feat__tag{position:absolute;left:13px;top:13px;background:var(--gold);color:#fff;font-size:.63rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
.feat__b{padding:20px}
.feat__b h3{font-weight:750;font-size:clamp(1.3rem,5.2vw,1.9rem);letter-spacing:-.02em;margin:10px 0 10px;line-height:1.14;color:var(--navy-d)}
.feat__b>p{margin:0 0 16px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.chipk{font-size:.72rem;font-weight:650;color:var(--navy);background:var(--gold-soft);border-radius:999px;padding:6px 11px}
.meta{display:flex;flex-wrap:wrap;gap:14px;font-size:.83rem;color:var(--muted);margin-bottom:18px}
.meta span{display:inline-flex;align-items:center;gap:6px}
.meta svg{color:var(--gold);flex:none}

/* ================= carrossel (agenda) ================= */
.car{position:relative}
.car__vp{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:0 0 6px}
.car__vp::-webkit-scrollbar{display:none}
.ec{
  flex:0 0 100%;scroll-snap-align:start;
  background:var(--w);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;
}
.ec:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.ec__ph{aspect-ratio:16/9;position:relative;flex:none;background-color:var(--cream)}
.ec__d{position:absolute;top:11px;left:11px;background:var(--w);border-radius:11px;padding:7px 11px;text-align:center;line-height:1;box-shadow:var(--sh)}
.ec__d b{display:block;font-size:1.3rem;font-weight:800;letter-spacing:-.03em;color:var(--navy-d)}
.ec__d i{display:block;font-style:normal;font-size:.57rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:3px;font-weight:750}
.ec__b{padding:13px 15px 16px}
.ec__b h3{font-weight:700;font-size:1rem;letter-spacing:-.01em;margin:6px 0 6px;line-height:1.25;color:var(--navy-d)}
.ec__b p{margin:0;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:5px}
.ec__b p svg{color:var(--gold);flex:none}
.car__nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.car__dots{display:flex;gap:7px}
.car__dots button{width:8px;height:8px;border-radius:999px;background:var(--line);transition:width .3s,background .3s}
.car__dots button[aria-selected="true"]{width:26px;background:var(--gold)}
.car__arrows{display:flex;gap:8px}
.car__a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--w);border:1px solid var(--line);color:var(--navy);transition:transform .18s,color .18s,border-color .18s}
.car__a:hover{transform:translateY(-2px);color:var(--gold);border-color:var(--gold-2)}
.car__a[disabled]{opacity:.38;cursor:default;transform:none}

/* ================= municípios ================= */
.cards3{display:grid;gap:15px}
.mun{background:var(--w);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s}
.mun:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.mun__ph{aspect-ratio:16/10;position:relative}
.mun__n{position:absolute;left:15px;bottom:12px;color:#fff;font-weight:750;font-size:1.24rem;letter-spacing:-.02em}
.mun__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,30,60,.72),transparent 58%)}
.mun__n{z-index:2}
.mun__b{padding:14px 16px 16px}
.mun__b>p{margin:0 0 12px;font-size:.87rem;color:var(--muted)}
.nums{display:flex;gap:16px;border-top:1px solid var(--line);padding-top:11px}
.num b{display:block;font-size:1.06rem;font-weight:750;color:var(--navy);font-variant-numeric:tabular-nums}
.num span{font-size:.68rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:650}

/* ================= roteiros ================= */
.rot{background:var(--w);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.rot:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.rot__ph{aspect-ratio:16/10;position:relative}
.rot__d{position:absolute;top:12px;left:12px;background:var(--w);color:var(--navy);font-size:.68rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px;box-shadow:var(--sh)}
.rot__b{padding:15px 16px 17px;display:flex;flex-direction:column;gap:9px;flex:1}
.rot__b h3{margin:0;font-weight:750;font-size:1.1rem;letter-spacing:-.015em;color:var(--navy-d)}
.rot__b p{margin:0;font-size:.86rem;color:var(--muted);flex:1}
.rot__m{display:flex;gap:14px;font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);padding-top:11px}
.rot__m span{display:inline-flex;align-items:center;gap:6px}
.rot__m svg{color:var(--gold);flex:none}

/* ================= publicidade ================= */
.ads__lab{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.ads__lab span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:750}
.ads__lab i{flex:1;height:1px;background:var(--line)}
.pub{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--w2);
  transition:height .45s cubic-bezier(.4,.02,.15,1)}
.pub__tr{display:flex;align-items:flex-start;transition:transform .6s cubic-bezier(.4,.02,.15,1)}
/* as três peças são 1200x387: proporção fixa, altura constante, sem recorte */
.pub__s{flex:0 0 100%;aspect-ratio:1200/387;background-size:cover;background-position:center;background-repeat:no-repeat;display:block}
.pub__dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:4}
.pub__dots button{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.62);box-shadow:0 0 0 1px rgba(10,30,60,.22);transition:width .3s,background .3s}
.pub__dots button[aria-selected="true"]{width:22px;background:var(--gold-2)}

/* ================= notícias ================= */
.news{display:grid;gap:16px}
.nfeat{background:var(--w);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s}
.nfeat:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.nfeat__ph{aspect-ratio:16/9;}
.nfeat__b{padding:16px 18px 19px}
.nfeat__b h3{font-weight:750;font-size:1.18rem;letter-spacing:-.015em;margin:9px 0 8px;line-height:1.26;color:var(--navy-d)}
.nfeat__b p{margin:0 0 11px;color:var(--muted);font-size:.89rem}
.nmeta{display:flex;align-items:center;gap:9px;font-size:.74rem;color:var(--muted);flex-wrap:wrap}
.src{font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--gold-soft);color:var(--gold)}
.nlist{display:flex;flex-direction:column;gap:10px}
.ni{display:flex;gap:12px;align-items:center;background:var(--w);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;transition:transform .18s,border-color .18s}
.ni:hover{transform:translateX(3px);border-color:var(--gold-2)}
.ni__ph{width:66px;height:56px;border-radius:9px;flex:none;background-color:var(--cream)}
.ni__b{min-width:0}
.ni__b h4{margin:0 0 4px;font-size:.9rem;font-weight:650;line-height:1.3;color:var(--navy-d)}
.ni__b p{margin:0;font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* ================= contribuição ================= */
.give{background:var(--navy);color:#fff;border-radius:var(--r);padding:28px 22px;text-align:center}
.give h2{font-weight:800;letter-spacing:-.03em;font-size:clamp(1.5rem,6vw,2.2rem);margin:10px 0 10px;line-height:1.1}
.give h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold-2)}
.give p{margin:0 auto 20px;color:#C6D3E6;max-width:46ch;font-size:.94rem}
.give .eyebrow{color:var(--gold-2)}

.foot{background:var(--navy-x);color:#A9BDD8;padding:30px 0 34px;font-size:.79rem}
.foot__g{display:grid;gap:18px;margin-bottom:20px}
.foot h4{margin:0 0 9px;color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.foot a{display:block;padding-block:3px;color:#A9BDD8}
.foot a:hover{color:var(--gold-2)}
.foot__b{border-top:1px solid rgba(255,255,255,.12);padding-top:15px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}

/* ================= revelação ================= */
.rv{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.16,.84,.28,1),transform .75s cubic-bezier(.16,.84,.28,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .pub__tr,.car__vp{transition:none;scroll-behavior:auto}
  *{scroll-behavior:auto!important}
}

/* ================= desktop ================= */
@media (min-width:900px){
  :root{--gut:40px}
  /* seis itens, dois deles longos: aperta um pouco para caber em 900px */
  .nav{display:flex;gap:15px;font-size:.8rem;margin-right:0}
  .brand__logo{height:46px}
  .bar .rbtn:last-child{display:none}
  .menu{display:none}
  /* desktop volta ao alinhamento à esquerda, com o botão na mesma linha */
  .head{flex-direction:row;align-items:flex-end;justify-content:space-between;text-align:left;gap:18px;padding-inline:0}
  .head .sub{margin-inline:0}
  /* atenção: os resets do herói NÃO ficam aqui — o bloco do herói é
     escrito no fim da folha, então precisam vir depois dele. */
  .sec{padding:80px 0}
  .hero__ph{height:64svh}
  .hero__card{margin-top:-104px;padding:34px 38px 30px;max-width:900px;margin-inline:auto}
  .hero__card h1{font-size:3.4rem}
  .find{max-width:620px}
  .g8{grid-template-columns:repeat(8,1fr);gap:13px}
  .ic{padding:20px 9px 16px}
  .ic b{font-size:.77rem}
  .feat{grid-template-columns:1.05fr .95fr;align-items:stretch}
  .feat__ph{aspect-ratio:auto;height:100%;min-height:320px}
  .feat__b{padding:34px 36px}
  .ec{flex:0 0 calc((100% - 28px) / 3)}
  .cards3{grid-template-columns:repeat(3,1fr);gap:20px}
  .news{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:start}
  .nfeat__b{padding:22px 24px 26px}
  .nfeat__b h3{font-size:1.45rem}
  .give{padding:52px 44px}
  .foot__g{grid-template-columns:repeat(4,1fr);gap:26px}
}

/* telas largas: o menu volta a respirar */
@media (min-width:1160px){
  .nav{gap:26px;font-size:.89rem}
}

/* ===== herói rotativo: imagem troca, texto e busca ficam ===== */
.hero{position:relative;height:76svh;min-height:500px;overflow:hidden;display:flex;align-items:center}
.hero__stage{position:absolute;inset:0;z-index:0}
.hero__l{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.07);transition:opacity 1.1s ease,transform 7s ease}
.hero__l.is-on{opacity:1;transform:scale(1)}
.hero__stage::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,30,60,.74),rgba(10,30,60,.28) 58%,rgba(10,30,60,.44)),
             linear-gradient(to top,rgba(10,30,60,.52),transparent 46%)}
.hero__in{position:relative;z-index:3;width:100%;text-align:center}
.hero__eyebrow{display:block;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.84);margin-bottom:15px}
/* frase de impacto: quatro linhas, peso leve, com o fecho em dourado */
.hero__t{
  font-weight:300;letter-spacing:-.018em;line-height:1.2;
  font-size:clamp(1.5rem,6vw,3rem);
  color:#fff;margin:0 auto 24px;max-width:26ch;
  text-shadow:0 2px 30px rgba(10,30,60,.45);
}
.hero__t b{
  display:inline-block;margin-top:.24em;
  font-weight:500;color:var(--gold-2);
}
.hero .find{background:rgba(255,255,255,.97);border-color:transparent;box-shadow:var(--sh-lg);max-width:560px;margin-inline:auto}
.hero__ind{position:absolute;right:var(--gut);bottom:22px;z-index:4;display:flex;align-items:center;gap:13px}
.hero__dashes{display:flex;gap:6px}
.hero__dashes button{width:20px;height:2px;background:rgba(255,255,255,.42);transition:background .3s,width .3s}
.hero__dashes button[aria-selected="true"]{background:var(--gold-2);width:32px}
.hero__count{font-size:.68rem;letter-spacing:.18em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.8)}
.hero__count b{font-weight:700;color:#fff}
.hero__count i{font-style:normal}

/* ===== 24 categorias ===== */
/* celular: 3 por linha para os ícones ganharem corpo */
.g24{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g24 .ic{padding:16px 7px 13px;gap:9px}
.g24 .ic__s{width:54px;height:54px}
.g24 .ic b{font-size:.75rem;line-height:1.24}
@media (min-width:620px){.g24{grid-template-columns:repeat(6,1fr);gap:11px}}
@media (min-width:900px){
  .hero{height:82svh}
  .hero__eyebrow{font-size:.68rem;margin-bottom:20px}
  .hero__ind{bottom:30px}
  .g24{grid-template-columns:repeat(8,1fr);gap:12px}
  .g24 .ic{padding:17px 8px 14px}
  .g24 .ic__s{width:46px;height:46px}
  .g24 .ic b{font-size:.72rem}
  /* no desktop o herói volta a alinhar à esquerda — precisa estar aqui,
     depois das regras base do herói, para vencer na cascata */
  .hero__in{text-align:left}
  .hero__t{margin-inline:0;max-width:22ch}
  .hero .find{margin-inline:0}
}
@media (prefers-reduced-motion:reduce){.hero__l{transition:opacity .01s;transform:none}}

/* ===== imagens do banner vindas do WordPress =====
   Cada camada recebe --d (desktop) e --m (celular) por style inline,
   porque o CPT `banner` guarda as duas versões separadamente. */
.hero__l{background-image:var(--d)}
@media (max-width:767px){
  .hero__l{background-image:var(--m)}
}

/* ============================================================
   BLINDAGEM DOS CONTROLES
   O tema e o Elementor aplicam padding, fundo e borda em <button>.
   Isso engordava os tracinhos do banner e os dots dos carrosséis.
   Aqui zeramos e reafirmamos as medidas do layout aprovado.
   ============================================================ */
.hero__dashes button,
.car__dots button,
.pub__dots button,
.car__a,
.lang,
.burger,
.find__go{
  -webkit-appearance:none;appearance:none;
  padding:0;margin:0;border:0;outline:0;
  box-shadow:none;text-shadow:none;
  min-width:0;min-height:0;line-height:1;
  font:inherit;letter-spacing:normal;text-transform:none;
}
.hero__dashes button{width:20px;height:2px;border-radius:0;background:rgba(255,255,255,.42)}
.hero__dashes button[aria-selected="true"]{width:32px;height:2px;background:var(--gold-2)}

.car__dots button{width:8px;height:8px;border-radius:999px;background:var(--line)}
.car__dots button[aria-selected="true"]{width:26px;background:var(--gold)}

.pub__dots button{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.62);box-shadow:0 0 0 1px rgba(10,30,60,.22)}
.pub__dots button[aria-selected="true"]{width:22px;background:var(--gold-2)}

.car__a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--w);border:1px solid var(--line);color:var(--navy)}
.lang{height:42px;padding:0 15px;border-radius:999px;background:var(--w);box-shadow:var(--sh);font-size:.86rem;font-weight:650}
.burger{width:42px;height:42px;border-radius:50%;background:var(--w);box-shadow:var(--sh);display:grid;place-items:center}
.find__go{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--gold-2),var(--gold))}

/* o Elementor embrulha cada bloco; garante que o embrulho não crie espaço */
.elementor-widget-shortcode,
.elementor-widget-shortcode .elementor-widget-container{margin:0;padding:0}

/* ============================================================
   BANNER EM MODO ARTE
   As artes do cliente já têm texto gravado, então a imagem aparece
   inteira, sem recorte: a proporção vem da própria arte.
   ============================================================ */
.hero--arte{height:auto;min-height:0;display:block}
.hero--arte .hero__stage{position:relative;aspect-ratio:var(--ar,16/6)}
.hero--arte .hero__l{background-size:contain;background-color:var(--navy)}
.hero--arte .hero__stage::after{content:none}
.hero--arte .hero__in{padding-block:0}
.hero--arte .hero__ind{bottom:14px}
/* a busca sai de cima da arte e ganha um cartão próprio, logo abaixo */
.hero--arte .hero__busca{background:var(--w);padding:18px 0 4px}
.hero--arte .find{max-width:640px;margin-inline:auto}
@media (max-width:767px){
  .hero--arte .hero__stage{aspect-ratio:var(--ar-m,var(--ar,4/5))}
}
@media (min-width:900px){
  .hero--arte .hero__busca{padding:26px 0 6px}
}

/* ===== selos institucionais no rodapé =====
   Os logos são coloridos e feitos para fundo claro, então ganham
   um cartão branco para lerem sobre o azul-marinho do rodapé. */
.foot__selos{
  display:flex;flex-wrap:wrap;gap:22px 34px;
  padding:22px 0 4px;margin-bottom:18px;
  border-top:1px solid rgba(255,255,255,.12);
}
.selo{display:flex;flex-direction:column;gap:9px}
.selo__r{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:750;color:var(--gold-2);
}
.selo__c{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:12px;padding:12px 16px;
  min-height:64px;
}
.selo__c img{display:block;height:38px;width:auto;max-width:220px;object-fit:contain}
@media (min-width:900px){
  .foot__selos{gap:26px 46px;padding-top:26px}
  .selo__c img{height:44px;max-width:260px}
}

/* ============================================================
   ESPECIFICIDADE CONTRA O ELEMENTOR
   O Elementor declara `.elementor img{height:auto;max-width:100%}`,
   que tem peso 0-1-1 e vence classes simples como `.brand__logo`.
   Aqui as medidas voltam com um seletor de dois níveis.
   ============================================================ */
.bar .brand__logo{height:40px;width:auto;max-width:none}
.ic .ic__s img{width:48px;height:48px;max-width:none}
.foot .selo__c img{height:38px;width:auto;max-width:220px}
.nfeat .nfeat__ph img,
.mun .mun__ph img,
.rot .rot__ph img,
.ec .ec__ph img{width:100%;height:100%;object-fit:cover}

/* o menu não pode quebrar item em várias linhas */
.bar .nav a{white-space:nowrap}

@media (min-width:900px){
  .bar .brand__logo{height:46px}
  .foot .selo__c img{height:44px;max-width:260px}
}
@media (min-width:1160px){
  .bar .brand__logo{height:50px}
}

/* ============================================================
   ESTADOS DOS CONTROLES
   A blindagem anterior cobria só o estado normal. O tema Hello Biz
   aplica a própria cor de destaque em button:hover/:focus, e ela
   reaparecia no seletor de idioma. Aqui os estados são fixados
   na paleta CETUR.
   ============================================================ */
.lang,
.lang:hover,
.lang:focus,
.lang:focus-visible,
.lang:active,
.burger,
.burger:hover,
.burger:focus,
.burger:active,
.rbtn,
.rbtn:hover,
.rbtn:focus,
.rbtn:active,
.car__a,
.car__a:hover,
.car__a:focus,
.car__a:active{
  background:var(--w);
  color:var(--navy);
  border-color:var(--line);
}
.lang:hover{box-shadow:var(--sh-lg);transform:translateY(-1px)}
.lang:hover,
.lang:focus-visible{color:var(--gold)}
.lang svg:first-child{color:var(--gold)}
.burger:hover,
.rbtn:hover{color:var(--gold)}
.car__a:hover{color:var(--gold);border-color:var(--gold-2)}

/* quando o menu está aberto, o hambúrguer inverte — e continua na paleta */
.burger[aria-expanded="true"],
.burger[aria-expanded="true"]:hover,
.burger[aria-expanded="true"]:focus{background:var(--navy);color:#fff}

/* a seta da busca é o único controle dourado, e não muda no hover */
.find__go,
.find__go:hover,
.find__go:focus,
.find__go:active{
  background:linear-gradient(145deg,var(--gold-2),var(--gold));
  color:#fff;border-color:transparent;
}
.find__go:hover{transform:scale(1.07)}

/* os pontinhos dos carrosséis não podem herdar cor de tema */
.hero__dashes button:hover{background:rgba(255,255,255,.75)}
.hero__dashes button[aria-selected="true"],
.hero__dashes button[aria-selected="true"]:hover{background:var(--gold-2)}
.car__dots button:hover{background:var(--gold-2)}
.car__dots button[aria-selected="true"],
.car__dots button[aria-selected="true"]:hover{background:var(--gold)}
.pub__dots button[aria-selected="true"],
.pub__dots button[aria-selected="true"]:hover{background:var(--gold-2)}

/* ============================================================
   SELETOR DE IDIOMA — pílula + painel
   A pílula é nossa; os itens do painel são [gt-link] do GTranslate
   (<a data-gt-lang="xx">), capturados pelo base.js do plugin.
   Fica no fim da folha de propósito: precisa vencer o skin do
   plugin e os estados de botão do Hello Biz.
   ============================================================ */
.lang-wrap{position:relative;flex:none}
.lang[aria-expanded="true"]{box-shadow:var(--sh-lg)}
.lang[aria-expanded="true"] .lang__seta{transform:rotate(180deg)}
.lang__seta{transition:transform .2s}

.lang__menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:80;
  min-width:186px;padding:6px;
  background:var(--w);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-lg);
  display:flex;flex-direction:column;gap:2px;
}
.lang__menu[hidden]{display:none}

/* dois níveis: o Elementor declara .elementor a / .elementor img e vence classe simples */
.lang-wrap .lang__menu a{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:9px;
  font-size:.9rem;font-weight:600;color:var(--navy-d);
  text-decoration:none;line-height:1.2;
  transition:background .16s,color .16s;
}
.lang-wrap .lang__menu a:hover,
.lang-wrap .lang__menu a:focus-visible{background:#F6F1E6;color:var(--gold)}
.lang-wrap .lang__menu a.is-atual{color:var(--gold);background:#F6F1E6}
.lang-wrap .lang__menu a img{
  width:20px;height:20px;flex:none;display:block;
  border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(22,32,47,.12);
}

/* o widget solto do plugin não entra mais na página; se algum resíduo vier, some */
.gtranslate_wrapper:empty{display:none}

/* ============================================================
   GRID DE CATEGORIAS — quantidade livre
   O modelo aprovado tem 24 cartões (3 fileiras de 8), mas a curadoria
   é do cliente e pode vir com mais ou menos. Com grid de colunas fixas,
   uma fileira incompleta encosta à esquerda e o bloco fica torto.
   Flex com a mesma largura de coluna preserva o desenho quando a
   fileira fecha e centraliza quando sobra.
   ============================================================ */
.g24{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.g24 .ic{flex:0 0 calc((100% - 2 * 10px) / 3)}
@media (min-width:620px){
  .g24 .ic{flex-basis:calc((100% - 5 * 11px) / 6)}
}
@media (min-width:900px){
  .g24 .ic{flex-basis:calc((100% - 7 * 12px) / 8)}
}

/* ============================================================
   PÁGINA DE LISTAGEM DE LOCAIS
   Mesma gramática visual da home: cartão claro, foto no topo,
   dourado só no acento. Mobile primeiro, como o modelo aprovado.
   ============================================================ */

/* ----- abertura ----- */
.capa{background:var(--w2);border-bottom:1px solid var(--line);padding:22px 0 30px}
.capa__in{position:relative}
.crumbs{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);margin-bottom:14px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold)}
.crumbs b{color:var(--navy-d);font-weight:650}
.capa__t{
  font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.8rem,6.4vw,2.7rem);margin:8px 0 0;color:var(--navy-d);text-wrap:balance;
}
.capa__sub{margin-top:10px}
.capa__n{
  display:inline-flex;align-items:baseline;gap:6px;margin-top:16px;
  padding:7px 14px;border-radius:999px;background:var(--gold-soft);
  color:var(--gold);font-size:.8rem;font-weight:650;
}
.capa__n b{font-size:.95rem;font-weight:800}
.capa__logo{max-height:64px;width:auto;margin-top:18px}

/* ----- filtros ----- */
.filtros{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:14px;border-radius:var(--r);background:var(--w);
  border:1px solid var(--line);box-shadow:var(--sh);margin-bottom:16px;
}
.filtros__campo{
  display:flex;align-items:center;gap:9px;flex:1 1 100%;min-width:0;
  background:var(--w2);border:1px solid var(--line);border-radius:999px;
  padding:0 16px;color:var(--navy);
}
.filtros__campo svg{flex:none;color:var(--gold)}
/* 16px obrigatório: abaixo disso o Safari do iPhone dá zoom ao focar */
.filtros__campo input,
.filtros__campo select{
  flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;
  font-size:16px;color:var(--ink);padding-block:12px;
  -webkit-appearance:none;appearance:none;border-radius:0;
}
.filtros__campo--sel{position:relative}
.filtros__campo--sel::after{
  content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.filtros__campo--sel select{padding-right:22px}
.filtros__go{flex:1 1 auto;padding:13px 24px;font-size:.88rem}
.filtros__limpa{
  flex:none;font-size:.82rem;font-weight:650;color:var(--muted);
  padding:13px 10px;text-decoration:underline;text-underline-offset:3px;
}
.filtros__limpa:hover{color:var(--gold)}
.filtros__res{margin:0 0 20px;color:var(--muted);font-size:.88rem}
.filtros__res b{color:var(--navy-d);font-weight:750}
.filtros__res span{opacity:.8}

/* ----- grade de locais ----- */
.locs{display:grid;grid-template-columns:1fr;gap:14px}
.loc{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.loc:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--gold-2)}
.loc--dest{border-color:var(--gold-2)}
.loc__ph{
  position:relative;display:block;aspect-ratio:16/10;
  background-color:var(--cream);
}
.loc__ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,30,60,.42),transparent 52%);
}
.loc__flag,
.loc__tag{
  position:absolute;z-index:2;border-radius:999px;
  font-size:.68rem;font-weight:750;letter-spacing:.04em;padding:5px 11px;
}
.loc__flag{
  top:10px;left:10px;text-transform:uppercase;
  background:linear-gradient(145deg,var(--gold-2),var(--gold));color:#241804;
  box-shadow:0 3px 12px rgba(184,132,42,.4);
}
.loc__tag{
  bottom:10px;left:10px;
  background:rgba(255,255,255,.94);color:var(--navy);backdrop-filter:blur(4px);
}
.loc__b{display:flex;flex-direction:column;gap:8px;padding:15px 16px 16px;flex:1}
.loc__t{margin:0;font-size:1.02rem;font-weight:750;line-height:1.25;letter-spacing:-.015em;color:var(--navy-d)}
.loc__t a:hover{color:var(--gold)}
.loc__loc{display:flex;align-items:center;gap:7px;margin:0;color:var(--muted);font-size:.85rem}
.loc__loc svg{flex:none;color:var(--gold)}
.loc__acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
.loc__a{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:999px;
  background:var(--w2);border:1px solid var(--line);
  font-size:.78rem;font-weight:650;color:var(--navy);
  transition:border-color .18s,color .18s,background .18s;
}
.loc__a:hover{border-color:var(--gold-2);color:var(--gold);background:var(--gold-soft)}
.loc__a svg{flex:none}

/* ----- paginação ----- */
.pag{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;margin-top:30px}
.pag__n,
.pag__b,
.pag__gap{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 13px;border-radius:999px;
  font-size:.85rem;font-weight:650;color:var(--navy);
}
.pag__n,
.pag__b{background:var(--w);border:1px solid var(--line);box-shadow:var(--sh);transition:border-color .18s,color .18s,transform .18s}
.pag__n:hover,
.pag__b:hover{border-color:var(--gold-2);color:var(--gold);transform:translateY(-1px)}
.pag__n.is-atual{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 4px 14px rgba(10,30,60,.24)}
.pag__gap{color:var(--muted);min-width:26px;padding:0}

@media (min-width:620px){
  .capa{padding:26px 0 34px}
  .filtros__campo{flex:1 1 240px}
  .filtros__go{flex:0 0 auto}
  .locs{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media (min-width:900px){
  .capa{padding:32px 0 40px}
  .capa__logo{position:absolute;top:0;right:0;margin-top:0}
  .locs{grid-template-columns:repeat(3,1fr);gap:18px}
  .loc__b{padding:16px 18px 18px}
}
@media (min-width:1160px){
  .locs{grid-template-columns:repeat(4,1fr)}
}

/* bloco de conteúdo do termo: vídeo, HTML personalizado, PDF */
.conteudo__video{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg);margin-bottom:22px}
.conteudo__video video{display:block;width:100%;height:auto}
.conteudo__html,
.conteudo__pdf{max-width:100%;overflow-x:auto}

/* ============================================================
   AJUSTES DA LISTAGEM — abertura enxuta, rodapé de cartão e
   blindagem do botão. Ficam no fim para vencer as regras acima.
   ============================================================ */

/* ----- abertura mais baixa: prioridade é caber locais na 1ª dobra ----- */
.capa{padding:14px 0 18px}
.capa__topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.capa__topo .crumbs{margin-bottom:0}
.capa__topo .eyebrow{position:relative;padding-left:12px}
.capa__topo .eyebrow::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--gold-2);
}
.capa__t{font-size:clamp(1.5rem,4.6vw,2rem);margin:0}
.capa__sub{margin-top:6px;font-size:.9rem}
.capa__logo{max-height:48px;margin-top:12px}
@media (min-width:900px){
  .capa{padding:18px 0 22px}
  .capa__logo{margin-top:0}
}

/* ----- rodapé do cartão: links discretos, não pílulas ----- */
.loc__pe{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;
  margin-top:auto;padding-top:11px;border-top:1px solid var(--line);
}
.loc__a{
  display:inline-flex;align-items:center;gap:6px;
  padding:0;border:0;background:none;border-radius:0;
  font-size:.8rem;font-weight:600;color:var(--muted);
  transition:color .18s;
}
.loc__a svg{flex:none;color:var(--gold);transition:transform .18s}
.loc__a:hover,
.loc__a:focus-visible{color:var(--navy-d);background:none}
.loc__a--rota{color:var(--navy);font-weight:700;margin-left:auto}
.loc__a--rota:hover svg{transform:translateX(2px)}

/* ----- blindagem do botão: o Hello Biz pinta button:hover de rosa ----- */
.btn,
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active{background:var(--navy);color:#fff;border:0}
.btn:hover,
.btn:focus-visible{background:var(--navy-d)}
.btn--gold,
.btn--gold:hover,
.btn--gold:focus,
.btn--gold:focus-visible,
.btn--gold:active{background:linear-gradient(145deg,var(--gold-2),var(--gold));color:#241804}
.btn--ghost,
.btn--ghost:hover,
.btn--ghost:focus,
.btn--ghost:focus-visible,
.btn--ghost:active{background:var(--w);color:var(--navy);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--gold-2)}
.filtros__go:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(10,30,60,.26)}

/* ============================================================
   Tipografia de leitura, mapa e aviso de cópia da ficha do local
   ============================================================ */
.h3{font-weight:750;letter-spacing:-.02em;font-size:1.2rem;color:var(--navy-d);margin:0 0 12px}
.prosa{color:var(--ink);line-height:1.72}
.prosa p{margin:0 0 1rem}
.prosa h2,.prosa h3{color:var(--navy-d);letter-spacing:-.02em;margin:1.6rem 0 .6rem}
.prosa a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.prosa img{border-radius:var(--r-s);margin-block:1rem}
.prosa ul,.prosa ol{padding-left:1.2rem}
.mapa{margin-top:30px}
.mapa__q{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh)}
.mapa__q iframe{display:block;width:100%;height:320px;border:0}
.copiou{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  z-index:200;padding:11px 20px;border-radius:999px;
  background:var(--navy-d);color:#fff;font-size:.85rem;font-weight:650;
  box-shadow:var(--sh-lg);opacity:0;transition:opacity .22s,transform .22s;
}
.copiou.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:900px){ .mapa__q iframe{height:380px} }

/* ============================================================
   FICHA DO LOCAL — cartão horizontal

   O desenho é ditado pelo acervo: a mediana das fotos de local tem
   408px de largura e 94% ficam abaixo de 800px. Quadro contido de
   ~380px exibe a maioria perto do nativo; faixa de largura total
   esticava até 6× e borrava. Ganha também a primeira dobra, que
   agora cabe na tela sem rolagem.
   ============================================================ */
.fic{background:var(--w2);border-bottom:1px solid var(--line);padding-bottom:26px}
.fic__crumbs{padding-block:12px;margin-bottom:12px}
.fic__card{
  display:grid;gap:0;overflow:hidden;
  background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-lg);
}
.fic__ph{position:relative;background:var(--cream);aspect-ratio:4/3;overflow:hidden}
.fic__ph img{width:100%;height:100%;object-fit:cover;display:block}
.fic__ph--vazia{
  position:absolute;inset:0;
  background:linear-gradient(140deg,var(--navy),var(--navy-x));
}
.fic__dados{display:flex;flex-direction:column;padding:18px 20px 20px}

.fic__tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
/* etiqueta, não campo de formulário: sem borda dura, fundo dourado suave */
.fic__card .chip{
  background:var(--gold-soft);border:0;color:var(--gold);
  font-weight:700;padding:6px 13px;
}
.fic__card .chip:hover{background:var(--gold-2);color:#241804}
.fic__card .chip--off{background:var(--w2);color:var(--muted)}
.fic__card .chip--off:hover{background:var(--w2);color:var(--muted)}
.fic__dest{
  display:inline-flex;align-items:center;padding:6px 13px;border-radius:999px;
  font-size:.68rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(145deg,var(--gold-2),var(--gold));color:#241804;
  box-shadow:0 3px 12px rgba(184,132,42,.34);
}
.fic__t{
  margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.45rem,5vw,2.1rem);color:var(--navy-d);text-wrap:balance;
}
.fic__linhas{display:grid;gap:6px;margin-top:11px}
.fic__l{display:flex;align-items:flex-start;gap:9px;margin:0;font-size:.9rem;color:var(--muted);line-height:1.5}
.fic__l svg{flex:none;margin-top:4px;color:var(--gold)}
.fic__l a{color:var(--navy);font-weight:650}
.fic__l a:hover{color:var(--gold)}
.fic__acoes{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:18px}
.fic__acoes .btn{padding:12px 20px;font-size:.86rem}

/* corpo em coluna única: largura de leitura confortável */
.ficha__corpo{padding-top:32px}
.ficha__conteudo{max-width:68ch}

/* barra de compartilhar: ícones redondos, sem moldura de caixa */
.share{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;
  margin-top:28px;padding-top:18px;border-top:1px solid var(--line);
}
.share__l{
  font-size:.72rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-right:4px;
}
.share__b{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--w);border:1px solid var(--line);color:var(--navy);
  box-shadow:var(--sh);
  transition:color .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.share__b:hover,
.share__b:focus-visible{color:var(--gold);border-color:var(--gold-2);transform:translateY(-2px);box-shadow:var(--sh-lg)}

@media (min-width:760px){
  /* duas colunas: a foto ocupa uma faixa fixa e os dados preenchem o resto,
     acabando com o bloco encostado à esquerda num cartão largo e vazio */
  .fic__card{grid-template-columns:380px minmax(0,1fr);align-items:stretch}
  .fic__ph{aspect-ratio:auto;height:100%;min-height:290px}
  .fic__dados{padding:26px 30px}
  /* ação principal ganha a direita da linha, previsível e fora do texto */
  .fic__acoes{align-items:center}
  .fic__acoes .btn:first-child{margin-right:auto}
}
/* fotos abaixo de 320px: exibe inteira e centrada, sem ampliar até pixelizar */

/* ============================================================
   AJUSTES DO CARTÃO DA FICHA

   A regra base de .chip caiu junto na limpeza do herói anterior —
   sem ela o border-radius sumiu e a etiqueta virou retângulo.
   Reposta aqui, com o resto dos ajustes.
   ============================================================ */
.chip{
  display:inline-flex;align-items:center;border-radius:999px;
  padding:6px 13px;font-size:.74rem;font-weight:700;line-height:1.2;
  white-space:nowrap;transition:background .18s,color .18s;
}

/* bloco de dados centrado na altura do cartão: antes o texto grudava no
   topo e os botões no rodapé, deixando um vazio no meio que lia como
   layout quebrado */
.fic__dados{justify-content:center}
.fic__acoes{margin-top:18px;padding-top:0}
/* os dois botões andam juntos; separá-los nas pontas desligava um do outro */
.fic__acoes .btn:first-child{margin-right:0}

/* compartilhar dentro do cartão: mais discreto que na versão avulsa */
.fic__dados .share{margin-top:16px;padding-top:14px;gap:7px}
.fic__dados .share__b{width:34px;height:34px}
.fic__dados .share__l{font-size:.68rem;letter-spacing:.12em}

/* coluna de leitura centrada: encostada à esquerda num container largo,
   o texto ficava desalinhado do cartão acima */
.ficha__conteudo{margin-inline:auto}
.ficha__corpo .mapa{max-width:68ch;margin-inline:auto}


/* ============================================================
   CARTÃO DA FICHA — altura fixa e coluna de leitura mais larga

   Antes a coluna da foto esticava conforme o conteúdo ao lado, então
   um local de nome curto e outro de nome longo produziam cartões de
   alturas bem diferentes. Agora a altura é a mesma em toda ficha, e o
   que pode variar (nome e endereço) é limitado a duas linhas.
   ============================================================ */
@media (min-width:760px){
  /* min-height, e não height: com altura fixa e overflow:hidden o cartão
     CORTA o que passar — foi o que comeu a barra de compartilhar na ficha do
     passeio em 768px, onde a coluna estreita empilha os botões. O piso de
     380px continua garantindo a primeira dobra sem rolagem; o teto sai. */
  .fic__card{grid-template-columns:400px minmax(0,1fr);min-height:380px}
  .fic__ph{aspect-ratio:auto;height:100%;min-height:0}
  .fic__dados{padding:24px 30px}
  .fic__t{
    font-size:clamp(1.35rem,2.3vw,1.85rem);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  /* endereço longo não empurra o cartão: corta na segunda linha */
  .fic__l span{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .fic__acoes{margin-top:16px}
  .fic__dados .share{margin-top:14px;padding-top:12px}
}

/* Coluna de leitura mais larga: 68ch deixava sobra grande dos dois lados
   numa tela de 1200px. 820px é o limite em que a linha ainda se lê bem. */
.ficha__conteudo,
.ficha__corpo .mapa,
.ficha__corpo .emb{max-width:min(100%,820px);margin-inline:auto}

/* ============================================================
   BLINDAGEM DO BOTÃO DE COMPARTILHAR

   Quatro dos cinco itens da barra são <a>; o de copiar link é <button>,
   e só ele recebia `button:hover{background-color:#c36}` do Hello Biz —
   virava um círculo rosa. As regras anteriores fixavam cor e borda, mas
   não o fundo, que era justamente o que vazava.
   ============================================================ */
.share__b,
.share__b:link,
.share__b:visited,
.share__b:hover,
.share__b:focus,
.share__b:focus-visible,
.share__b:active{
  -webkit-appearance:none;appearance:none;
  background:var(--w);border:1px solid var(--line);color:var(--navy);
  padding:0;margin:0;text-decoration:none;
}
.share__b:hover,
.share__b:focus-visible{border-color:var(--gold-2);color:var(--gold)}

/* ============================================================
   CARROSSEL DE CATEGORIAS NA FICHA
   Reusa .car da agenda: setas, pontos e rolagem por página, em vez
   da barra de rolagem crua que aparecia antes.
   ============================================================ */
.cats__car .car__vp{gap:10px;scroll-snap-type:x proximity}
.cats__i{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  flex:0 0 132px;min-height:112px;padding:15px 10px 13px;
  border-radius:var(--r-s);scroll-snap-align:start;
  background:var(--w);border:1px solid var(--line);box-shadow:var(--sh);
  text-align:center;transition:border-color .18s,transform .18s,box-shadow .18s;
}
.cats__i b{font-size:.74rem;font-weight:700;line-height:1.24;color:var(--navy-d)}
.cats__i img{width:38px;height:38px}
a.cats__i:hover{border-color:var(--gold-2);transform:translateY(-3px);box-shadow:var(--sh-lg)}
.cats__i.is-atual{background:var(--gold-soft);border-color:var(--gold-2);cursor:default}
.cats__i.is-atual b{color:var(--gold)}
/* A navegação do carrossel nasce escondida: quem a liga é o JS, e só
   quando há mais de uma página. Antes ela vinha visível e o JS a
   escondia depois — as setas piscavam a cada carregamento. */
.car__nav{display:none}
.car.is-multi .car__nav{display:flex}

/* ============================================================
   AJUSTES DE CELULAR — auditoria final

   1. Alvo de toque: os ícones de compartilhar tinham 34px, abaixo do
      mínimo de 44px recomendado. O tamanho menor passa a valer só do
      desktop para cima, onde há ponteiro preciso.
   2. Palavra longa: endereço, nome de estabelecimento e URL colada no
      texto podiam estourar a largura numa tela de 360px. O
      overflow-x:hidden do body escondia o estouro cortando conteúdo.
   ============================================================ */
.fic__dados .share__b{width:44px;height:44px}
@media (min-width:760px){
  .fic__dados .share__b{width:34px;height:34px}
}

.fic__t,
.fic__l,
.fic__l span,
.capa__t,
.loc__t,
.cats__i b,
.prosa{overflow-wrap:anywhere}

/* conteúdo largo vindo do editor não empurra a página */
.prosa table,
.prosa pre{display:block;max-width:100%;overflow-x:auto}
.prosa iframe{max-width:100%}


/* ============================================================
   EVENTOS EM DESTAQUE — carrossel
   Um evento por página, para o cartão manter o peso que tem hoje.
   Com um só marcado, a navegação nem chega a aparecer.
   ============================================================ */
.feats .car__vp{gap:16px;scroll-snap-type:x mandatory}
.feats .feat{flex:0 0 100%;scroll-snap-align:start}

/* Carrossel de eventos — guardas de celular.

   O cartão é grid dentro de um item flex: sem min-width:0 o conteúdo
   define a largura mínima e pode estourar a página em tela estreita.
   Título e etiquetas ganham quebra, porque nome de evento e nome de
   local costumam ser longos. */
.feats .feat{min-width:0}
.feat__b h3,
.feat__b>p,
.chipk,
.meta span{overflow-wrap:anywhere}
.feat__b{min-width:0}

/* selo de evento que já aconteceu — a URL segue acessível depois da data */
.fic__passou{
  display:inline-flex;align-items:center;padding:6px 13px;border-radius:999px;
  font-size:.68rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  background:#F3EFE7;color:var(--muted);
}

/* ============================================================
   Área de toque dos pontinhos — por camada invisível

   A tentativa anterior aumentava padding com background-clip:content-box.
   O recorte funcionava, mas o border-radius continuava calculado sobre a
   caixa com padding: o ponto de 8px virava um disco grande e o traço
   alongado do estado ativo sumia. Aqui o desenho fica intacto e o alvo
   cresce numa camada por cima, que não pinta nada.
   ============================================================ */
.car__dots button,
.pub__dots button,
.hero__dashes button{position:relative}
.car__dots button::after,
.pub__dots button::after,
.hero__dashes button::after{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:calc(100% + 7px);height:34px;
}


/* A foto do cartão preenche o quadro inteiro, sempre, e o quadro tem o
   mesmo tamanho em toda ficha — de local e de evento.

   A foto sai do fluxo (`position:absolute`). Sem isso ela é quem manda na
   altura da linha do grid: o WordPress escreve width/height no `<img>`, o
   navegador transforma isso em `aspect-ratio`, e como `.fic__ph` fica com
   `height:100%` contra uma linha de altura automática a referência é
   circular — sobra a proporção nativa. Era por isso que o Festival de
   Pirenópolis (foto 281/499, em pé) esticava o cartão para 710px enquanto o
   Buteco (400/400) parava em 400px. Fora do fluxo, quem dita a altura são os
   dados e o piso de 380px, e a foto preenche o que sobrar. */
.fic__ph{background:var(--cream);overflow:hidden}
.fic__ph img{
  position:absolute;inset:0;
  width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:center;display:block;
  border-radius:0;box-shadow:none;max-width:none;max-height:none;
}

/* ============================================================
   LISTAGEM DE EVENTOS
   Reusa .filtros, .pag e o cartão .ec; acrescenta as abas de período
   e a grade própria.
   ============================================================ */
.abas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.abas__i{
  display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;
  font-size:.85rem;font-weight:650;color:var(--navy);
  background:var(--w);border:1px solid var(--line);box-shadow:var(--sh);
  transition:border-color .18s,color .18s,transform .18s;
}
a.abas__i:hover{border-color:var(--gold-2);color:var(--gold);transform:translateY(-1px)}
.abas__i.is-atual{background:var(--navy);border-color:var(--navy);color:#fff;cursor:default}

.evs{display:grid;grid-template-columns:1fr;gap:14px}
.evs .ec{flex:none;width:auto}
/* evento encerrado: presente, mas visivelmente fora de cartaz */
.ec--passou .ec__ph{filter:saturate(.45)}
.ec--passou .ec__b h3{color:var(--muted)}
.ec__passou{
  position:absolute;right:11px;top:11px;z-index:2;
  padding:5px 11px;border-radius:999px;
  font-size:.64rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(22,32,47,.78);color:#fff;backdrop-filter:blur(3px);
}
@media (min-width:620px){ .evs{grid-template-columns:repeat(2,1fr);gap:16px} }
@media (min-width:900px){ .evs{grid-template-columns:repeat(3,1fr);gap:18px} }
@media (min-width:1160px){ .evs{grid-template-columns:repeat(4,1fr)} }

/* ============================================================
   PROPORÇÃO DO CARTÃO DE EVENTO

   O quadro era 16/9 (1,78) enquanto a mediana das 90 fotos de evento
   é 1,31 — e 40% delas são retrato ou quadradas, formato natural de
   cartaz de show. Resultado: o corte central descartava a metade de
   cima e de baixo, cortando justamente o nome do artista.

   4/3 (1,33) é a proporção que mais se aproxima do acervo: mostra
   cerca de 33% mais de altura e mantém o cartão compacto.
   ============================================================ */
.ec__ph{aspect-ratio:4/3}

/* ============================================================
   PÁGINA DO MUNICÍPIO

   A capa funciona com e sem foto: 10 dos 23 municípios ainda não têm
   imagem cadastrada, e buraco branco seria pior que degradê.
   ============================================================ */
.mun-capa{position:relative;background:linear-gradient(140deg,var(--navy),var(--navy-x));color:#fff;overflow:hidden}
.mun-capa--foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,30,60,.92),rgba(10,30,60,.55) 55%,rgba(10,30,60,.35));
}
.mun-capa__in{position:relative;z-index:2;padding-block:26px 30px}
.mun-capa .crumbs{color:rgba(255,255,255,.66);margin-bottom:14px}
.mun-capa .crumbs a{color:rgba(255,255,255,.66)}
.mun-capa .crumbs a:hover{color:var(--gold-2)}
.mun-capa .crumbs b{color:#fff}
.mun-capa .eyebrow{color:var(--gold-2)}
.mun-capa__t{
  margin:6px 0 0;font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.8rem,6.4vw,3rem);color:#fff;text-wrap:balance;overflow-wrap:anywhere;
}
.mun-capa__sub{margin:10px 0 0;color:rgba(255,255,255,.84);font-size:.95rem;max-width:60ch;line-height:1.6}
.mun-capa__nums{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.mun-capa__nums .num{
  display:flex;align-items:baseline;gap:6px;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  font-size:.78rem;color:rgba(255,255,255,.86);
}
.mun-capa__nums .num b{font-size:1.05rem;font-weight:800;color:#fff}

/* filtro curto: só o select e a contagem, sem campo de busca */

/* notícias do município */
.nmun .nlist{margin-bottom:4px}
.nmun[aria-busy="true"] .nlist,
.nmun .nlist[aria-busy="true"]{opacity:.45;transition:opacity .18s}
.nmun .pag{margin-top:22px}

@media (min-width:760px){
  .mun-capa__in{padding:34px 0 40px}
  .mun-capa--foto{min-height:320px;display:flex;align-items:flex-end}
  .nmun .nlist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
}
@media (min-width:1100px){
  .nmun .nlist{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   CAPA DO MUNICÍPIO — foto em tela cheia

   A foto ladrilhava porque `.mun-capa` declarava o atalho `background`
   com o degradê, e o atalho ZERA background-size e background-repeat que
   a classe .ph tinha definido antes na folha. Aqui as propriedades vão
   separadas, e o degradê usa background-image junto da foto.

   A altura acompanha o herói da home: a foto do município é o argumento
   de venda da cidade e merece a tela inteira, com o texto por cima.
   ============================================================ */
.mun-capa{
  background:none;background-color:var(--navy-x);
  display:flex;align-items:flex-end;
  min-height:58svh;
}
.mun-capa--foto{
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}
/* véu escuro para o texto ler sobre qualquer foto */
.mun-capa::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(8,20,38,.94),rgba(8,20,38,.62) 46%,rgba(8,20,38,.30));
}
.mun-capa--foto::after{content:none}
/* sem foto: degradê da paleta em vez de bloco chapado */
.mun-capa:not(.mun-capa--foto)::before{
  background:linear-gradient(140deg,var(--navy) 0%,var(--navy-x) 70%);
}
.mun-capa__in{width:100%;padding-block:38px 34px}
.mun-capa__sub{
  max-width:66ch;font-size:1rem;line-height:1.68;
  color:rgba(255,255,255,.9);margin-top:12px;
}
.mun-capa__nums .num{backdrop-filter:blur(6px)}

@media (min-width:760px){
  .mun-capa{min-height:64svh}
  .mun-capa__in{padding:56px 0 46px}
  .mun-capa__sub{font-size:1.06rem;margin-top:16px}
}
@media (min-width:1100px){
  .mun-capa{min-height:68svh}
}

/* Contraste dos contadores da capa.

   `.num span{color:var(--muted)}` é do cartão de município da home, onde o
   fundo é branco. Sobre a foto escura da capa, o mesmo cinza quente some.
   O rótulo passa a branco com opacidade alta, e o número fica pleno. */
.mun-capa__nums .num span{color:rgba(255,255,255,.88)}
.mun-capa__nums .num b{color:#fff}
.mun-capa__nums .num{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.28);
}

/* ============================================================
   BLINDAGEM DA CLASSE .ph

   Já quebrou duas vezes: quem usa `.ph` para a foto de fundo perde
   `cover` e `no-repeat` se a própria classe do elemento declarar o
   ATALHO `background`, porque o atalho zera as propriedades que não
   cita. Reafirmar aqui, no fim da folha, impede que volte a acontecer
   quando alguém acrescentar um `background:` num cartão.
   ============================================================ */
.ph{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ============================================================
   PAGINAÇÃO — blindagem e retorno visual

   Com o AJAX, os números viraram <button> em vez de <a>. As regras
   anteriores fixavam borda e cor no hover, mas não o FUNDO — e o
   `button:hover{background-color:#c36}` do Hello Biz voltava a vazar,
   pela quarta vez neste projeto. Regra: todo <button> nosso precisa de
   `background` declarado em todos os estados.
   ============================================================ */
.pag__n,
.pag__n:hover,
.pag__n:focus,
.pag__n:focus-visible,
.pag__n:active,
.pag__b,
.pag__b:hover,
.pag__b:focus,
.pag__b:focus-visible,
.pag__b:active{
  -webkit-appearance:none;appearance:none;
  background:var(--w);border:1px solid var(--line);color:var(--navy);
  text-decoration:none;
}
.pag__n:hover,
.pag__n:focus-visible,
.pag__b:hover,
.pag__b:focus-visible{border-color:var(--gold-2);color:var(--gold)}
.pag__n.is-atual,
.pag__n.is-atual:hover{background:var(--navy);border-color:var(--navy);color:#fff}

/* enquanto a resposta não chega, a grade esmaece — sem isso o clique
   parece não ter surtido efeito em conexão lenta */
.locs[aria-busy="true"],
.nlist[aria-busy="true"]{opacity:.45;transition:opacity .18s}

/* Explorar municípios — estado sem resultado */
.explorar__vazio{margin:6px 0 0;padding:26px 0;text-align:center;color:var(--muted);font-size:.95rem}
.explorar__vazio[hidden]{display:none}
.mun[hidden]{display:none}

/* Numa grade de 23, uma coluna só vale até o celular: entre 620 e 900 o
   cartão ficava largo demais. A home continua com o passo dela. */
@media (min-width:620px){
  .cards3--todos{grid-template-columns:repeat(2,1fr);gap:18px}
}
/* Precisa repetir as 3 colunas aqui: a regra de `.cards3` mora lá em cima,
   e esta, por vir depois no arquivo, venceria por ordem de origem. */
@media (min-width:900px){
  .cards3--todos{grid-template-columns:repeat(3,1fr);gap:20px}
}

/* Com o filtro rodando na digitação, o botão Filtrar não acrescenta nada —
   e no celular ele come uma linha inteira. Some só onde o espaço é curto;
   sem JS a classe não é aplicada e ele continua sendo a única saída. */
@media (max-width:619px){
  .filtros--vivo .filtros__go{display:none}
}
.filtros__limpa[hidden]{display:none}

/* ================= página de notícias ================= */

/* Abas de origem. Rolam no celular em vez de quebrar em três linhas. */
.abas{
  /* nowrap explicito: existe um `.abas{flex-wrap:wrap}` mais acima no
     arquivo (bloco orfao, nenhum PHP o usa) que vencia por vir antes com a
     mesma especificidade — e as abas quebravam em 3 linhas no celular. */
  display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;margin:0 0 16px;
  padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.abas::-webkit-scrollbar{display:none}
.abas__i,
.abas__i:hover,
.abas__i:focus,
.abas__i:focus-visible,
.abas__i:active{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:999px;text-decoration:none;
  background:var(--w);border:1px solid var(--line);color:var(--navy);
  font-size:.85rem;font-weight:650;white-space:nowrap;
}
.abas__i:hover,
.abas__i:focus-visible{border-color:var(--gold-2);color:var(--gold)}
.abas__i span{
  font-size:.72rem;font-weight:750;color:var(--muted);
  background:var(--w2);border-radius:999px;padding:1px 7px;
}
.abas__i.is-atual,
.abas__i.is-atual:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.abas__i.is-atual span{background:rgba(255,255,255,.16);color:#fff}

/* Manchete: empilha no celular, vira duas colunas no desktop. */
.nlead{
  display:grid;gap:0;margin:0 0 18px;overflow:hidden;
  background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);transition:transform .2s,box-shadow .2s;
}
.nlead:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.nlead__ph{aspect-ratio:16/9}
.nlead__b{padding:18px 20px 20px}
.nlead__b h2{
  margin:8px 0 10px;font-weight:750;font-size:1.5rem;line-height:1.2;
  letter-spacing:-.02em;color:var(--navy-d);
}
.nlead__b p{margin:0 0 12px;color:var(--muted);font-size:.93rem;line-height:1.6}

/* Grade de notícias. Mesmos passos da grade de eventos, para as duas
   listagens do site lerem como a mesma página. */
.ngrade{display:grid;grid-template-columns:1fr;gap:15px}
.ng{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.ng:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--gold-2)}
.ng__ph{aspect-ratio:16/10}
.ng__b{padding:13px 15px 15px;display:flex;flex-direction:column;flex:1}
.ng__b h3{
  margin:7px 0 7px;font-size:1rem;font-weight:700;line-height:1.3;
  letter-spacing:-.01em;color:var(--navy-d);
}
.ng__b p{margin:0 0 11px;font-size:.84rem;color:var(--muted);line-height:1.5}
.ng__d{
  margin-top:auto;font-size:.72rem;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;font-weight:650;
}
/* Sem foto o cartão não finge ter uma: o texto ocupa o espaço todo. */
.ng--sem-foto .ng__b{padding-top:16px}

/* A lista de município ganha duas colunas onde couber — são cartões baixos. */
.nlist--larga{display:grid;grid-template-columns:1fr;gap:10px}

@media (min-width:620px){
  .ngrade{grid-template-columns:repeat(2,1fr);gap:18px}
  .nlist--larga{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .ngrade{grid-template-columns:repeat(3,1fr);gap:20px}
  .nlead{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch}
  .nlead__ph{aspect-ratio:auto;height:100%;min-height:300px}
  .nlead__b{padding:30px 32px;display:flex;flex-direction:column;justify-content:center}
  .nlead__b h2{font-size:1.85rem}
}
@media (min-width:1160px){
  .ngrade{grid-template-columns:repeat(4,1fr)}
  .nlist--larga{grid-template-columns:repeat(3,1fr)}
}

/* ----- notícias de município ----- */
.nmgrade{display:grid;grid-template-columns:1fr;gap:14px}
.nmgrade[aria-busy="true"]{opacity:.45;transition:opacity .18s}
.nm{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.nm:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--gold-2)}
.nm__ph{aspect-ratio:16/10;position:relative}
/* A foto é do município, não do fato noticiado. O nome da cidade em cima
   deixa isso explícito, em vez de sugerir que a imagem ilustra a matéria. */
.nm__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,30,60,.7),transparent 55%)}
.nm__c{
  position:absolute;left:12px;bottom:10px;z-index:2;color:#fff;
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.nm__b{padding:12px 14px 14px}
.nm__b h4{margin:0 0 6px;font-size:.95rem;font-weight:700;line-height:1.32;color:var(--navy-d)}
.nm__b p{margin:0;font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.nm--sem-foto .nm__b{padding-top:15px}

/* Botão de paginação: o AJAX usa <button>, e todo button nosso precisa de
   background declarado em todos os estados, senão o rosa do Hello Biz vaza. */
.pag button.pag__n,
.pag button.pag__n:hover,
.pag button.pag__n:focus,
.pag button.pag__n:focus-visible,
.pag button.pag__n:active,
.pag button.pag__b,
.pag button.pag__b:hover,
.pag button.pag__b:focus,
.pag button.pag__b:focus-visible,
.pag button.pag__b:active{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background:var(--w);border:1px solid var(--line);color:var(--navy);
}
.pag button.pag__n:hover,
.pag button.pag__b:hover,
.pag button.pag__n:focus-visible,
.pag button.pag__b:focus-visible{border-color:var(--gold-2);color:var(--gold)}

@media (min-width:620px){
  .nmgrade{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media (min-width:900px){
  .nmgrade{grid-template-columns:repeat(3,1fr);gap:18px}
}
@media (min-width:1160px){
  .nmgrade{grid-template-columns:repeat(4,1fr)}
}

/* ================= notícia aberta ================= */

/* Coluna de leitura estreita: linha longa demais cansa. ~68 caracteres. */
.wrap--leitura{max-width:760px}

/* Nada de padding-bottom zero aqui: era o que encostava a faixa da ficha
   na foto de abertura, a ponto de a linha aparecer cortada. */
.capa--noticia{padding-bottom:26px}
.eyebrow--link,
.eyebrow--link:hover,
.eyebrow--link:focus,
.eyebrow--link:focus-visible,
.eyebrow--link:active{
  background:var(--gold-soft);color:var(--gold);text-decoration:none;
  padding:5px 12px;border-radius:999px;
}
.eyebrow--link:hover{background:var(--gold);color:#fff}

/* Titulo de noticia: largura de manchete, nao de coluna de leitura.
   Com 26ch o titulo desta materia quebrava em quatro linhas e disputava
   espaco com a ficha logo abaixo. */
.nsingle__t{max-width:22ch}

/* Ficha da matéria: fonte, data e tempo de leitura. */
.nficha{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted);
}
.nficha__i{display:inline-flex;align-items:center;gap:6px}
.nficha__i+.nficha__i::before{content:"·";margin-right:10px;opacity:.5}
.nficha__i b{color:var(--navy-d);font-weight:700}

/* Foto de abertura, sangrando para fora da coluna de texto. */
/* padding, nao margin: o Elementor aplica
   `.elementor .elementor-widget:not(...):not(...) figure{margin:0}`, com
   especificidade (0,4,1) contra (0,1,0) da nossa classe. Qualquer margem em
   <figure> dentro de widget e zerada, sem aviso. */
.nhero{margin:0;padding-top:28px}
.nhero__ph{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden}
.nhero__c{margin:8px 0 0;font-size:.76rem;color:var(--muted);text-align:right}
@media (min-width:760px){ .nhero__ph{aspect-ratio:21/9} }

/* Corpo do texto. */
.nsingle{padding-top:26px}
.nsingle__c{font-size:1.03rem;line-height:1.75;color:var(--ink)}
.nsingle__c p{margin:0 0 18px}
.nsingle__c h2,
.nsingle__c h3{
  margin:30px 0 12px;font-weight:750;letter-spacing:-.015em;
  color:var(--navy-d);line-height:1.28;
}
.nsingle__c h2{font-size:1.4rem}
.nsingle__c h3{font-size:1.16rem}
.nsingle__c ul,
.nsingle__c ol{margin:0 0 18px;padding-left:22px}
.nsingle__c li{margin:0 0 8px}
.nsingle__c a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.nsingle__c blockquote{
  margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--gold-2);
  color:var(--navy-d);font-size:1.08rem;
}

/* Galeria: as fotos saem do meio do texto e vêm para cá, num grid uniforme.
   Foto em pé e foto deitada convivem porque o corte é do container. */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:26px 0 6px}
.gal__i{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-s);
  background:var(--w2);border:1px solid var(--line);
  aspect-ratio:4/3;transition:transform .2s,box-shadow .2s;
}
.gal__i:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.gal__i img{width:100%;height:100%;object-fit:cover;display:block}
.gal__c{
  position:absolute;left:0;right:0;bottom:0;padding:16px 12px 9px;
  background:linear-gradient(to top,rgba(10,30,60,.82),transparent);
  color:#fff;font-size:.74rem;line-height:1.35;
}
/* Uma foto só não vira grid: ocupa a largura toda, como abertura de matéria. */
.gal:has(.gal__i:only-child){grid-template-columns:1fr}
.gal .gal__i:only-child{aspect-ratio:16/9}
.gal__d{margin:0 0 4px;font-size:.76rem;color:var(--muted);text-align:right}

@media (min-width:620px){
  .gal{grid-template-columns:repeat(3,1fr);gap:12px}
}

.nfonte{
  margin:26px 0 0;padding:14px 16px;border-radius:var(--r-s);
  background:var(--w2);border:1px solid var(--line);
  font-size:.85rem;color:var(--muted);
}
.nfonte a{color:var(--gold);font-weight:650}

.nvoltar{display:inline-flex;align-items:center;gap:8px;margin-top:26px}

/* A abertura da notícia é centrada — só ela. As outras capas (agenda,
   notícias, explorar) seguem alinhadas à esquerda, porque ali o título divide
   a linha com filtros e botão. */
.capa--noticia .capa__topo{justify-content:center}
.capa--noticia .crumbs{justify-content:center}
.capa--noticia .nsingle__t{margin-inline:auto;text-align:center;text-wrap:balance}
.capa--noticia .nficha{justify-content:center}
.capa--noticia .nhero__c{text-align:center}

/* ----- ficha da matéria, repaginada -----
   Antes era uma tira cinza fina espremida entre o título e a foto. Agora a
   fonte tem peso, o tempo de leitura vira etiqueta (é a informação que o
   leitor mais usa para decidir se abre) e a linha respira. */
.nficha{
  gap:10px 14px;margin-top:20px;padding-top:16px;
  font-size:.85rem;
}
.nficha__i+.nficha__i::before{content:none}
.nficha__i{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--muted);
}
.nficha__i b{color:var(--navy-d);font-weight:750;letter-spacing:-.01em}
.nficha__sep{width:4px;height:4px;border-radius:50%;background:var(--line);flex:none}
.nficha__t{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  background:var(--gold-soft);color:var(--gold);
  font-size:.78rem;font-weight:700;
}

/* ----- compartilhar da notícia -----
   Prefixo `nshare` de propósito: `share__b` já existe na ficha do local, e lá
   é o BOTÃO (44px), não o container. Reusar o nome fazia meu container herdar
   44px de largura e empilhar os ícones um sobre o outro. */
.nshare{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:30px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
}
.nshare__l{font-size:.8rem;font-weight:700;color:var(--navy-d);letter-spacing:.02em}
.nshare__lista{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* button e <a> lado a lado: os dois precisam de background em todos os
   estados, senão o rosa #c36 do Hello Biz aparece no hover do button. */
.nshare__i,
.nshare__i:link,
.nshare__i:visited,
.nshare__i:hover,
.nshare__i:focus,
.nshare__i:focus-visible,
.nshare__i:active{
  -webkit-appearance:none;appearance:none;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:50%;padding:0;margin:0;
  background:var(--w);border:1px solid var(--line);color:var(--navy);
  text-decoration:none;transition:transform .18s,border-color .18s,color .18s;
}
.nshare__i:hover,
.nshare__i:focus-visible{transform:translateY(-2px);border-color:var(--gold-2);color:var(--gold)}
.nshare__ok{
  position:absolute;left:50%;top:-30px;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-size:.7rem;font-weight:650;
  padding:4px 9px;border-radius:6px;white-space:nowrap;pointer-events:none;
}
.nshare__ok[hidden]{display:none}

/* No topo: menor e mais discreto, para não competir com o título. */
.nshare--topo{
  justify-content:center;margin:14px 0 0;padding:0;border-top:0;gap:8px 10px;
}
.nshare--topo .nshare__l{
  font-size:.72rem;font-weight:650;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;
}
.nshare--topo .nshare__i{width:34px;height:34px}
.nshare--topo .nshare__i svg{width:15px;height:15px}

/* Duas linhas no desktop: mais largura e um corpo maior, que é o que faz o
   título parecer manchete em vez de parágrafo em negrito. */
@media (min-width:760px){
  .capa--noticia .nsingle__t{max-width:34ch;font-size:2.5rem;line-height:1.14}
}
@media (min-width:1100px){
  .capa--noticia .nsingle__t{max-width:40ch;font-size:2.9rem}
}

/* Faixa única: quem assina, quando, quanto tempo leva e como repassar.
   Empilha no celular, onde as duas não cabem lado a lado. */
.nbarra{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 20px;margin-top:16px;
}
/* Dentro da faixa, a ficha perde margem, preenchimento e borda.
   A borda era uma linha que cobria so a metade esquerda — sobra de quando a
   ficha era um bloco solto. E o padding-top desalinhava o texto em relacao ao
   compartilhar, porque o flex centra as CAIXAS, nao o conteudo delas. */
.nbarra .nficha{margin:0;padding:0;border-top:0}
.nbarra .nshare--topo{margin:0;padding-top:0}
/* Um traço separa as duas metades quando elas dividem a linha. */
@media (min-width:760px){
  .nbarra .nshare--topo{
    position:relative;padding-left:20px;
  }
  .nbarra .nshare--topo::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:1px;height:22px;background:var(--line);
  }
}


/* ----- respiro da abertura da notícia -----
   Três blocos distintos: título, faixa de serviço (quem/quando/quanto/como
   compartilhar) e foto. Colados, leem-se como uma coisa só e a faixa parecia
   legenda da imagem. As folgas abaixo são deliberadamente generosas. */
.capa--noticia .nsingle__t{margin-top:4px}
.nbarra{margin-top:24px}
.capa--noticia{padding-bottom:32px}
.nhero{margin:0;padding-top:32px}
.nsingle{padding-top:30px}

@media (min-width:760px){
  .capa--noticia .nsingle__t{margin-top:10px}
  .nbarra{margin-top:32px}
  .capa--noticia{padding-bottom:44px}
  .nhero{margin:0;padding-top:48px}
  .nsingle{padding-top:40px}
}

/* ----- celular: alvo de toque -----
   Medido em 375px: os botões de compartilhar do topo saíam com 34px, abaixo
   do que o dedo acerta com folga. No desktop 34px está bom, porque lá o alvo
   é o ponteiro. A faixa passa a empilhar centrada, já que as duas metades não
   cabem lado a lado nessa largura. */
@media (max-width:619px){
  .nshare--topo .nshare__i{width:42px;height:42px}
  .nshare--topo .nshare__i svg{width:17px;height:17px}
  .nbarra{gap:14px}
  .nshare--topo{width:100%;justify-content:center}
  /* Migalha com mais altura de toque, sem mudar o desenho. */
  .capa--noticia .crumbs a{padding-block:4px}
}

/* No celular o limite de 22ch é mais estreito que a própria tela e forçava
   uma quinta linha no título. Abaixo de 760px vale a largura disponível. */
@media (max-width:759px){
  .capa--noticia .nsingle__t{max-width:none}
}

/* ================= cadastrar meu local ================= */

/* Os três passos. Numerados de verdade (<ol>), porque a ordem importa. */
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px;counter-reset:passo}
.passo{
  position:relative;background:var(--w);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 20px 22px;
}
.passo__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;margin-bottom:12px;
  background:var(--gold-soft);color:var(--gold);
  font-size:.95rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.passo h3{margin:0 0 7px;font-size:1.05rem;font-weight:750;color:var(--navy-d);letter-spacing:-.01em}
.passo p{margin:0;font-size:.88rem;line-height:1.6;color:var(--muted)}

/* ----- a dobra do formulário -----
   O alvo aqui são os IDs do Elementor (`cdfaixa`, `cdcard`), e não uma classe
   nossa: classe personalizada gravada por código não é aplicada pelo Elementor,
   mas o ID do container é, e nós é que o definimos.

   Duas páginas usam esta dobra: cadastrar-meu-local (prefixo `cd`) e ajuda
   (prefixo `aj`). Daí o `:is()` em cada seletor — os dois IDs valem o mesmo, e
   `:is()` com dois seletores de classe não altera a especificidade. */
:is(.elementor-element-cdfaixa,.elementor-element-ajfaixa){
  background:var(--w2);border-top:1px solid var(--line);
  padding:34px var(--gut) 40px !important;
  align-items:center;
}
:is(.elementor-element-cdcard,.elementor-element-ajcard){
  /* margin e border-radius com !important porque o Elementor gera CSS proprio
     para o container, com especificidade (0,3,0) que a nossa classe nao alcanca */
  width:100%;max-width:760px;margin-inline:auto !important;
  background:var(--w);border:1px solid var(--line);
  border-radius:var(--r) !important;
  box-shadow:var(--sh);
  padding:22px 20px 26px !important;
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-button{
  width:100%;border-radius:999px;padding:15px 26px;
  font-size:.92rem;font-weight:700;letter-spacing:.01em;
}
.fintro{margin-bottom:18px}
.fcard__t{margin:8px 0 8px;font-size:1.35rem;font-weight:750;color:var(--navy-d);letter-spacing:-.015em}
.fcard__s{margin:0;font-size:.87rem;line-height:1.6;color:var(--muted)}
.fnota{margin:18px auto 0;font-size:.84rem;color:var(--muted);text-align:center;max-width:760px}
.fnota a{color:var(--gold);font-weight:650;text-decoration:underline;text-underline-offset:3px}

/* ----- o formulário do Elementor vestido com a cara do guia ----- */
/* O Elementor usa padding lateral nos grupos como calha das colunas de 50%.
   Mexer nisso com margem negativa desalinhava os campos dentro do cartao;
   melhor zerar a calha e usar gap, que nao entra na conta da largura. */
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-form-fields-wrapper{
  margin:0;display:flex;flex-wrap:wrap;gap:0 14px;
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group{padding:0}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group.elementor-col-50{
  width:calc(50% - 7px);flex:0 0 calc(50% - 7px);
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group.elementor-col-100{width:100%;flex:0 0 100%}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group{margin-bottom:14px}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group > label{
  font-size:.8rem;font-weight:700;color:var(--navy-d);
  margin-bottom:6px;letter-spacing:.01em;
}
/* :not() nos seletores de caixa: o checkbox do aceite tambem carrega a
   classe `elementor-field`, e sem essa excecao ele era esticado para 100% com
   fundo e borda — virava uma pilula vazia embaixo do texto. */
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group .elementor-field:not([type="checkbox"]):not([type="radio"]){
  width:100%;background:var(--w2);
  border:1px solid var(--line);border-radius:var(--r-s);
  padding:12px 14px;color:var(--ink);
  /* 16px obrigatório: abaixo disso o Safari do iPhone dá zoom ao focar */
  font-size:16px;line-height:1.4;
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group .elementor-field:focus{
  outline:none;border-color:var(--gold-2);
  box-shadow:0 0 0 3px var(--gold-soft);
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-type-textarea .elementor-field{min-height:120px;resize:vertical}
/* O aceite usa o texto inline do próprio Elementor (`acceptance_text`), que
   já sai ao lado da caixa dentro de `.elementor-field-option`. A primeira
   tentativa punha o texto no rótulo e remontava tudo com flex e `order` — e
   perdia para o CSS que o Elementor gera por página, com especificidade
   (0,4,1). Quando o componente tem a estrutura certa, não há o que vencer. */
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-type-acceptance{margin-top:6px !important}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-type-acceptance .elementor-field-option{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.84rem;line-height:1.5;color:var(--muted);
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-type-acceptance .elementor-field-option label{
  margin:0;cursor:pointer;
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-acceptance-field{
  width:18px !important;height:18px !important;min-height:0 !important;
  padding:0 !important;margin:2px 0 0 !important;flex:none;
  accent-color:var(--navy);
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-type-submit{margin-top:6px}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-message{
  margin-top:12px;padding:11px 14px;border-radius:var(--r-s);font-size:.87rem;
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-message-success{background:var(--gold-soft);color:var(--gold)}

@media (min-width:620px){
  .passos{grid-template-columns:repeat(3,1fr);gap:18px}
  :is(.elementor-element-cdcard,.elementor-element-ajcard){padding:30px 30px 34px !important}
  :is(.elementor-element-cdfaixa,.elementor-element-ajfaixa){padding:46px var(--gut) 54px !important}
}

/* ============================================================
 * Roteiros — passeio com data (SESC) e destaque manual
 * Fica no fim da folha de propósito: precisa vencer as regras de `.rot`
 * declaradas lá em cima sem subir a especificidade.
 * ========================================================== */
.rot__ins{font-weight:750;color:var(--muted);letter-spacing:.01em}
.rot__ins--on{color:#1a7f37}
.rot--dest{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.rot__flag{position:absolute;top:12px;right:12px;background:var(--gold);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
/* Card de passeio tem três itens na régua (duração, transporte, inscrição);
   sem wrap eles estouram a largura no celular. */
.rot__m{flex-wrap:wrap;row-gap:6px}

/* Rótulo e botão do formulário: o Elementor tem regra própria para os dois,
   então aqui o seletor precisa ser o dele (`elementor-field-label`,
   `elementor-button`) e não o genérico. */
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-label{
  font-size:.8rem !important;font-weight:700 !important;
  color:var(--navy-d) !important;margin-bottom:6px;letter-spacing:.01em;
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group .elementor-field:not([type="checkbox"]):not([type="radio"]){
  background:var(--w2) !important;
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-button{
  min-height:54px;padding:15px 26px !important;
  font-size:.92rem;font-weight:700;letter-spacing:.01em;
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-button:hover{
  background-color:var(--navy-d) !important;
}

/* ============================================================
 * Ficha do roteiro/passeio — reaproveita `.fic` do evento e acrescenta
 * o que é próprio do passeio: situação da inscrição e pontos de embarque.
 * ========================================================== */
.chip--on{background:#e8f5ec;color:#1a7f37;border-color:#bfe3ca}
.chip--dest{background:var(--gold);color:#fff;border-color:var(--gold)}
.fic__mais{color:var(--muted);font-size:.82em;margin-left:6px}
.emb{margin-top:26px}
.emb__l{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;max-width:520px}
.emb__l li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;background:var(--w);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.emb__p{font-weight:700;color:var(--navy-d);font-size:.92rem}
.emb__h{font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.emb__n{margin:12px 0 0;font-size:.78rem;color:var(--muted)}


/* `safe` porque o cartão tem overflow:hidden: sem ele, conteúdo mais alto
   que o espaço disponível é cortado em cima E embaixo, em vez de só
   transbordar para baixo. Foi o que comeu a barra de compartilhar. */
.fic__dados{justify-content:safe center}

/* O widget do formulário precisa ocupar a largura toda do cartão, e as calhas
   internas do Elementor precisam ceder — as regras dele são geradas por
   página, com especificidade que a nossa não alcança sem !important. */
:is(.elementor-element-cdform,.elementor-element-ajform){width:100% !important;max-width:100% !important;align-self:stretch}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-form{width:100%}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-form-fields-wrapper{margin:0 !important}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group{padding:0 !important;margin-bottom:14px !important}

/* No celular todo campo ocupa a linha inteira: meia largura dá ~140px, e
   "Seu telefone ou WhatsApp" não cabe nem no rótulo. */
@media (max-width:619px){
  :is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group.elementor-col-50{
    width:100%;flex:0 0 100%;
  }
}

/* No celular a trilha gastava 3 linhas repetindo o título do passeio, que o
   <h1> logo abaixo já diz — 92px de tela antes do conteúdo, medidos em 320px.
   Uma linha com reticências mantém o rastro sem comer a primeira dobra.
   Escopo no `roteiro` de propósito: o evento tem títulos curtos e não sofre
   do problema, e mexer nele seria mudança sem motivo. */
@media (max-width:619px){
  .single-roteiro .fic__crumbs{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;white-space:nowrap}
  /* só o título encolhe; os links da trilha continuam legíveis e clicáveis */
  .single-roteiro .fic__crumbs a,
  .single-roteiro .fic__crumbs span{flex:none}
  .single-roteiro .fic__crumbs b{overflow:hidden;text-overflow:ellipsis;min-width:0}
}

/* Cartão de categoria na página Explorar categorias: o mesmo `.ic` da home,
   com a contagem de locais abaixo do nome. */
.ic[hidden]{display:none}
.ic__n{
  display:block;margin-top:3px;font-size:.68rem;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;font-weight:650;
}

/* ----- grade de categorias na Explore Goiás -----
   Reusa o `.ic` da home. A diferença é que aqui o cartão filtra a lista da
   própria página, então precisa de estado ativo — e de uma saída para as 43
   categorias que ainda não têm ícone cadastrado. */
.ic.is-atual{
  background:var(--navy);border-color:var(--navy);
}
.ic.is-atual b,
.ic.is-atual .ic__n{color:#fff}
.ic.is-atual .ic__s{background:rgba(255,255,255,.14);color:#fff}
.ic.is-atual .ic__s img{filter:brightness(0) invert(1)}

/* Inicial no lugar do ícone: mantém a grade regular em vez de deixar buraco. */
.ic__s--letra{
  display:grid;place-items:center;
  font-size:1.25rem;font-weight:800;color:var(--gold);
  background:var(--gold-soft);border-radius:50%;
}
.ic__s--todas{display:grid;place-items:center;color:var(--gold)}

/* Capa do arquivo de categoria: ícone e nome na mesma linha. */
.capa__cat{display:flex;align-items:center;gap:14px}
.capa__ic{
  flex:none;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;background:var(--gold-soft);
}
.capa__ic img{width:32px;height:32px}
@media (max-width:619px){
  .capa__ic{width:42px;height:42px}
  .capa__ic img{width:26px;height:26px}
}

/* ================= palavra do presidente / do governo ================= */
/* Colunas iguais: auto-fit resolve os dois casos sozinho — 2 pessoas na
   Palavra do Presidente, 3 na do Governo. */
.palavras{display:grid;grid-template-columns:1fr;gap:18px}
.palavra{
  background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:22px 20px 24px;
  display:flex;flex-direction:column;
}
.palavra__quem{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.palavra__ph{
  flex:none;width:84px;height:84px;border-radius:50%;
  border:3px solid var(--gold-soft);box-shadow:var(--sh);
}
.palavra__nome{margin:0;font-size:1.2rem;font-weight:750;letter-spacing:-.015em;color:var(--navy-d)}
.palavra__cargo{
  margin:3px 0 0;font-size:.8rem;font-weight:650;color:var(--gold);
  letter-spacing:.05em;text-transform:uppercase;
}
.palavra__txt{font-size:1.02rem;line-height:1.75;color:var(--ink)}
.palavra__txt p{margin:0 0 16px}
.palavra__txt p:last-child{margin-bottom:0}
.palavra__txt strong{color:var(--navy-d)}

@media (min-width:760px){
  /* repeat(var(--colunas),1fr): duas pessoas = 6/6 da largura, nao dois
     tercos com uma coluna sobrando, que era o que o auto-fit fazia. */
  .palavras{grid-template-columns:repeat(var(--colunas,2),1fr);gap:26px}
  .palavra{padding:28px 26px 30px}
  .palavra__ph{width:92px;height:92px}
}

/* A palavra de linha própria ocupa a largura toda, abaixo das outras.
   No desktop ela se divide: identificação à esquerda, texto à direita —
   assim a linha de leitura não fica larga demais. */
.palavra--larga{grid-column:1 / -1}
@media (min-width:760px){
  .palavra--larga{
    display:grid;grid-template-columns:minmax(200px,260px) 1fr;
    gap:30px;align-items:start;
  }
  .palavra--larga .palavra__quem{
    margin-bottom:0;flex-direction:column;align-items:flex-start;gap:12px;
  }
}

/* ============================================================
   PÁGINAS DE DOCUMENTO (termos de uso, política de privacidade)

   Nas fichas de município/evento/roteiro o `margin-inline:auto` existe
   para o texto acompanhar o cartão de foto que vem acima. Estas páginas
   não têm cartão nenhum: só o H1, que fica encostado na esquerda do
   `.wrap`. Centrar o texto abria um vão morto de 150px à esquerda e
   fazia o parágrafo começar 150px depois do título.

   O teto de 820px continua — é o limite de linha legível. Só o vão sai.
   ============================================================ */
.ficha__corpo--doc .ficha__conteudo{margin-inline:0 auto}

/* ============================================================
   CAPA CENTRALIZADA — páginas de formulário

   A capa acompanha o alinhamento do corpo logo abaixo. Nas páginas de
   formulário (ajuda, cadastrar meu local) o corpo é um cartão de 760px
   centralizado, e a capa encostada à esquerda deixava um vão morto grande
   à direita do título. Nas páginas de documento (termos, política) o corpo
   é uma coluna à esquerda — lá a capa continua à esquerda, senão o título
   ficaria centralizado sobre um texto que não está.

   Mesma receita já usada em `.capa--noticia`.
   ============================================================ */
.capa--centro .capa__topo{justify-content:center}
.capa--centro .crumbs{justify-content:center}
.capa--centro .capa__t{text-align:center;text-wrap:balance}
/* o .sub tem max-width:56ch; sem o auto ele encosta à esquerda do bloco */
.capa--centro .capa__sub{text-align:center;margin-inline:auto}

/* ----- cabeçalho de bloco centralizado -----
   O `.head` já nasce centralizado; é o @media (min-width:900px) que o vira em
   linha alinhada à esquerda, para o botão "ver todos" ficar na outra ponta.
   Nos blocos sem botão isso deixa o título sozinho encostado na esquerda.
   Dois nomes de classe (0,2,0) para vencer o `.head` do media query, que vem
   antes na folha. */
.head.head--centro{
  flex-direction:column;align-items:center;text-align:center;padding-inline:8px;
}
.head.head--centro .sub{margin-inline:auto}

/* ============================================================
   PÁGINA 404

   Tudo centrado numa coluna estreita: quem cai aqui não veio ler, veio
   procurar saída. A busca reaproveita o `.filtros` da página de resultados
   — mesmo campo, mesmo botão, mesmo destino.
   ============================================================ */
.e404 .wrap{max-width:min(100%,680px)}
.e404__busca{margin-bottom:22px}
.e404__ou{
  margin:0 0 12px;text-align:center;
  font-size:.78rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.e404__atalhos{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
}
.e404__atalhos .btn{padding:11px 20px;font-size:.86rem}
.e404__casa{margin:26px 0 0;text-align:center}

@media (min-width:760px){
  /* acima de 760px o campo divide a linha com o botão, como na busca */
  .e404__busca .filtros__campo{flex:1 1 auto}
  .e404__busca .filtros__go{flex:0 0 auto}
}

/* ============================================================
   PÁGINA DO MOTOGP  (/motogp-goiania/)

   A capa repete a gramática da capa de município — foto sangrada, véu
   escuro, texto por baixo — mas com o véu mais fechado: a foto de largada
   é clara e cheia de patrocínio, e o texto branco sumia em cima dela.
   Classes próprias em vez de reaproveitar `.mun-capa` porque aqui entram
   os selos e o crédito da foto, que a de município não tem.
   ============================================================ */
.gp-capa{
  position:relative;color:#fff;overflow:hidden;
  display:flex;align-items:flex-end;min-height:58svh;
  background-color:var(--navy-x);
  background-image:linear-gradient(140deg,var(--navy),var(--navy-x));
}
/* `background-image` separado do atalho: o inline style da foto entra
   nesta propriedade e, se o gradiente viesse pelo atalho `background`,
   a foto ladrilharia — mesmo defeito já corrigido em `.mun-capa`. */
.gp-capa--foto{
  background-size:cover;background-position:center 38%;background-repeat:no-repeat;
  background-image:none;
}
.gp-capa::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,30,60,.80) 0%,rgba(10,30,60,.52) 42%,rgba(10,30,60,.88) 100%);
}
.gp-capa__in{position:relative;z-index:2;width:100%;padding-block:34px 32px}
.gp-capa .crumbs{color:rgba(255,255,255,.66);margin-bottom:14px}
.gp-capa .crumbs a{color:rgba(255,255,255,.66)}
.gp-capa .crumbs a:hover{color:var(--gold-2)}
.gp-capa .crumbs b{color:#fff}
.gp-capa .eyebrow{color:var(--gold-2)}
.gp-capa__t{
  margin:6px 0 0;color:#fff;font-weight:800;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(1.9rem,8vw,3.6rem);text-wrap:balance;
}
.gp-capa__t em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold-2)}
.gp-capa__sub{
  margin:12px 0 0;color:rgba(255,255,255,.86);font-size:.98rem;
  line-height:1.62;max-width:56ch;
}

/* selos: os três dados que a pessoa veio conferir, antes de qualquer rolagem */
.gp-selos{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.gp-selos li{
  font-size:.76rem;font-weight:650;letter-spacing:.01em;color:#fff;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px);
}
/* o último selo é a data — o dado mais procurado, e por isso o único dourado */
.gp-selos li:last-child{
  background:rgba(217,169,74,.18);border-color:rgba(217,169,74,.55);color:var(--gold-2);
}

.gp-capa__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.gp-capa__link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:700;color:#fff;
  padding:14px 22px;border-radius:999px;
  border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.07);
  transition:border-color .2s,background .2s,transform .2s;
}
.gp-capa__link:hover{border-color:var(--gold-2);color:var(--gold-2);transform:translateY(-2px)}

.gp-capa__cred{
  position:absolute;right:12px;bottom:8px;z-index:3;
  font-size:.62rem;letter-spacing:.04em;color:rgba(255,255,255,.55);
}

/* ----- ficha do evento ----- */
.gp-ficha{display:grid;grid-template-columns:1fr;gap:12px;margin:0}
.gp-ficha__c{
  background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 20px 22px;box-shadow:var(--sh);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.gp-ficha__c:hover{border-color:var(--gold-2);transform:translateY(-2px);box-shadow:var(--sh-lg)}
.gp-ficha__c dt{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:750;color:var(--gold);
}
.gp-ficha__c dd{margin:0}
.gp-ficha__c dd b{
  display:block;margin:7px 0 8px;
  font-size:1.12rem;font-weight:750;letter-spacing:-.02em;line-height:1.2;color:var(--navy-d);
}
.gp-ficha__c dd span{display:block;font-size:.87rem;line-height:1.62;color:var(--muted)}

/* ----- números de 2026 ----- */
.gp-nums{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.gp-num{
  background:var(--w);border:1px solid var(--line);border-radius:var(--r-s);
  padding:18px 18px 20px;
}
.gp-num b{
  display:block;font-size:clamp(1.6rem,7vw,2.1rem);font-weight:800;letter-spacing:-.035em;
  line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;
}
.gp-num__r{
  display:block;margin-top:7px;
  font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--gold);
}
.gp-num__d{display:block;margin-top:9px;font-size:.83rem;line-height:1.6;color:var(--muted)}

/* crédito de fonte: obrigatório onde há número, e deliberadamente discreto */
.gp-fonte{margin:20px 0 0;font-size:.76rem;line-height:1.6;color:var(--muted);text-align:center}
.gp-fonte a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

@media (min-width:620px){
  .gp-ficha{grid-template-columns:repeat(2,1fr)}
  .gp-nums{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .gp-capa{min-height:66svh}
  .gp-capa__in{padding:56px 0 48px}
  .gp-capa__sub{font-size:1.06rem;margin-top:16px}
  .gp-ficha{grid-template-columns:repeat(3,1fr);gap:16px}
  .gp-nums{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media (min-width:1100px){
  .gp-capa{min-height:72svh}
}

/* ============================================================
   FORMULÁRIOS DO ELEMENTOR — select e reCAPTCHA
   Duas correções de 25/08, nas páginas Cadastrar meu local e Ajuda.
   ============================================================ */

/* 1. O <select> ficava fora do desenho. O Elementor marca o input de texto
   com DUAS classes (`elementor-field elementor-field-textual`) e o select
   com UMA só (`elementor-field-textual`) — sem `elementor-field`. Como a
   regra da pílula mira `.elementor-field`, o select escapava dela: sobrava a
   caixa branca do Elementor com a setinha nativa do sistema colada na borda,
   ao lado de campos creme e arredondados. Aqui ele entra no mesmo desenho e
   ganha o chevron do site, o mesmo de `.filtros__campo--sel`, desenhado em
   `background-image` porque um `::after` precisaria de um invólucro que o
   formulário não dá. */
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group select.elementor-field-textual{
  width:100%;background-color:var(--w2) !important;
  border:1px solid var(--line) !important;border-radius:var(--r-s) !important;
  padding:12px 38px 12px 14px !important;color:var(--ink);
  /* 16px obrigatório: abaixo disso o Safari do iPhone dá zoom ao focar */
  font-size:16px;line-height:1.4;font-family:inherit;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2317396A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px 8px;
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group select.elementor-field-textual:focus{
  outline:none;border-color:var(--gold-2);
  box-shadow:0 0 0 3px var(--gold-soft);
}

/* 2. A pílula vazia acima do botão era o reCAPTCHA v3. O Elementor imprime
   `<div class="elementor-field" id="form-field-rc">` para hospedar o widget,
   e a nossa regra da pílula pinta qualquer `.elementor-field` — resultado:
   uma caixa creme arredondada sem nada dentro, com cara de campo que o
   visitante deveria preencher. O v3 é invisível e o selo dele flutua no
   canto (`data-badge="bottomright"`), então a caixa não precisa aparecer.
   Tiramos a pintura e a altura, mas NÃO usamos `display:none`: o widget
   ainda precisa ser renderizado para executar e devolver o token. */
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-type-recaptcha_v3,
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-type-recaptcha_v3 .elementor-field{
  background:none !important;border:0 !important;padding:0 !important;
  min-height:0;margin:0 !important;
}

/* O Elementor não entrega o <select> puro: ele embrulha em
   `<div class="elementor-field elementor-select-wrapper">` e injeta um caret
   próprio em SVG (`.select-caret-down-wrapper`, o triângulo cheio do eicon).
   Duas consequências, as duas visíveis na tela:

   1. O invólucro carrega `elementor-field`, então recebia a pílula da nossa
      regra — pílula creme por fora, caixa do select por dentro. Caixa dupla.
   2. Com o chevron do site somado ao caret do Elementor, o campo ficava com
      DUAS setas, uma ao lado da outra.

   O invólucro volta a ser só um invólucro, e o caret do Elementor sai para o
   chevron do site ficar sozinho — o mesmo desenho de `.filtros__campo--sel`. */
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group .elementor-select-wrapper{
  background:none !important;border:0 !important;
  padding:0 !important;border-radius:0 !important;box-shadow:none !important;
}
:is(.elementor-element-cdform,.elementor-element-ajform) .elementor-field-group .select-caret-down-wrapper{
  display:none !important;
}

/* As abas de origem das notícias já rolavam na horizontal, mas a faixa
   terminava na calha do `.wrap` — a terceira aba aparecia fatiada 20px antes
   da borda da tela, o que lê como defeito, não como "arraste para o lado".
   Medido em 393px: 5 abas, 710px de conteúdo em 353px de vista; três ficam
   fora. Sangrando a faixa até a borda, o corte acontece no fim da tela, que
   é o gesto que todo mundo reconhece.

   Ocultar as abas no celular foi considerado e descartado: elas filtram por
   PORTAL de origem (Guia CETUR 68, Fecomércio 16, Senac 5, Sesc 10) e o
   select ao lado filtra por ASSUNTO — eixos diferentes. Escondê-las tira do
   celular um filtro que não tem substituto. */
@media (max-width:759px){
  .abas{
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scroll-padding-inline:var(--gut);
  }
}

/* ============================================================
   O container do Elementor não pode QUEBRAR a dobra
   ============================================================
   Todo bloco do site é um shortcode dentro de um container do Elementor, e
   esses containers nascem com `--flex-direction:column` e `--flex-wrap:wrap`.
   Coluna + wrap é uma combinação traiçoeira: quando o conteúdo passa da
   altura que o container resolve, o flex não deixa o container crescer — ele
   tenta abrir uma SEGUNDA COLUNA. O container fica mais baixo que o próprio
   conteúdo e o que sobra é pintado por cima da dobra seguinte.

   Medido na ficha do local em 375px: o bloco "Mais em Academias" pedia
   1560px, o container parou em 1370px, e os 190px restantes cobriam o título
   "Explore por categoria" e os cartões abaixo dele. No desktop não aparecia
   porque a grade de relacionados vira várias colunas e o bloco não chega
   perto dessa altura — é defeito só de tela estreita, e só quando a dobra
   cresce.

   `nowrap` devolve o comportamento esperado: o container acompanha o
   conteúdo. O `:has()` limita a regra aos containers que seguram uma dobra
   nossa, sem tocar nos containers de layout do Elementor, onde quebrar
   linha pode ser intencional. */
.elementor .e-con.e-flex:has(> .elementor-widget-shortcode){
  flex-wrap:nowrap;
}

/* Item de flex nasce com `min-width:auto`, e isso significa "nunca mais
   estreito que a palavra mais longa de dentro". Os rótulos das categorias
   têm palavras compridas — Hospedagem, Combustíveis, Gastronomia — e esses
   cartões cresciam acima da base de 1/3, empurrando o terceiro para a linha
   seguinte. Medido em 320px: cinco larguras diferentes convivendo (86,7 a
   91,4px) e seis fileiras com dois cartões em vez de três.

   `min-width:0` faz todo cartão valer exatamente a base, e a palavra longa
   quebra dentro dele — que é onde ela deve quebrar. O `overflow-wrap` é a
   rede para um nome futuro maior que o cartão inteiro.

   Conferido de 320 a 1440px: sempre 3, 6 ou 8 por fileira conforme o
   degrau, uma única largura, sem transbordo. */
.g24 .ic{min-width:0}
.g24 .ic b{overflow-wrap:anywhere}