.elementor-1351 .elementor-element.elementor-element-ec3355b{--display:flex;}.elementor-1351 .elementor-element.elementor-element-fbd8e75{--display:flex;--gap:64px 64px;--row-gap:64px;--column-gap:64px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:128px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-1351 .elementor-element.elementor-element-fbd8e75:not(.elementor-motion-effects-element-type-background), .elementor-1351 .elementor-element.elementor-element-fbd8e75 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E9E1D6;}.elementor-1351 .elementor-element.elementor-element-f3ae453{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1351 .elementor-element.elementor-element-a9de89c{--display:flex;}.elementor-1351 .elementor-element.elementor-element-8a1cd10{--display:flex;--justify-content:center;}.elementor-1351 .elementor-element.elementor-element-d3a1df5{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:64px;--padding-bottom:64px;--padding-left:32px;--padding-right:32px;}.elementor-1351 .elementor-element.elementor-element-d3a1df5:not(.elementor-motion-effects-element-type-background), .elementor-1351 .elementor-element.elementor-element-d3a1df5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-1351 .elementor-element.elementor-element-2c3de2e{--display:flex;}.elementor-1351 .elementor-element.elementor-element-1da9c83 > .elementor-widget-container{border-style:solid;border-width:2px 2px 2px 2px;border-color:#2F4F3E45;border-radius:16px 16px 16px 16px;}.elementor-1351 .elementor-element.elementor-element-1da9c83 iframe{height:500px;}.elementor-1351 .elementor-element.elementor-element-8a2d44c{--display:flex;--gap:64px 64px;--row-gap:64px;--column-gap:64px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:96px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-1351 .elementor-element.elementor-element-8a2d44c:not(.elementor-motion-effects-element-type-background), .elementor-1351 .elementor-element.elementor-element-8a2d44c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-1351 .elementor-element.elementor-element-63c5517{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1351 .elementor-element.elementor-element-3cdbebb{--display:flex;}.elementor-1351 .elementor-element.elementor-element-8b7cefe{--display:flex;--justify-content:center;}.elementor-1351 .elementor-element.elementor-element-28ed3ea{--display:flex;--gap:00px 00px;--row-gap:00px;--column-gap:00px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1351 .elementor-element.elementor-element-1e3e71e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:96px 96px;--row-gap:96px;--column-gap:96px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:96px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-1351 .elementor-element.elementor-element-1e3e71e:not(.elementor-motion-effects-element-type-background), .elementor-1351 .elementor-element.elementor-element-1e3e71e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-1351 .elementor-element.elementor-element-3c9628a{--display:flex;--gap:00px 00px;--row-gap:00px;--column-gap:00px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1351 .elementor-element.elementor-element-2ce5748 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1351 .elementor-element.elementor-element-409e1d2{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1351 .elementor-element.elementor-element-5426d6d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1351 .elementor-element.elementor-element-953f0ce > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1351 .elementor-element.elementor-element-7f4635f{--display:flex;--gap:64px 64px;--row-gap:64px;--column-gap:64px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:96px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-1351 .elementor-element.elementor-element-7f4635f:not(.elementor-motion-effects-element-type-background), .elementor-1351 .elementor-element.elementor-element-7f4635f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-1351 .elementor-element.elementor-element-e566c00{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1351 .elementor-element.elementor-element-694425c{--display:flex;}.elementor-1351 .elementor-element.elementor-element-af06e6b{--display:flex;--justify-content:center;}.elementor-1351 .elementor-element.elementor-element-4e1b41d{--display:flex;--gap:00px 00px;--row-gap:00px;--column-gap:00px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1351 .elementor-element.elementor-element-8f24d80{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:96px 96px;--row-gap:96px;--column-gap:96px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:96px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-1351 .elementor-element.elementor-element-8f24d80:not(.elementor-motion-effects-element-type-background), .elementor-1351 .elementor-element.elementor-element-8f24d80 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-1351 .elementor-element.elementor-element-35d447a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1351 .elementor-element.elementor-element-a55c009 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1351 .elementor-element.elementor-element-a7b4e82 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1351 .elementor-element.elementor-element-afa2e1f{--display:flex;--justify-content:center;--gap:00px 00px;--row-gap:00px;--column-gap:00px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1351 .elementor-element.elementor-element-0f97832{--display:flex;}.elementor-1351 .elementor-element.elementor-element-0f97832:not(.elementor-motion-effects-element-type-background), .elementor-1351 .elementor-element.elementor-element-0f97832 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-d4887a5 );}.elementor-1351 .elementor-element.elementor-element-4a6316a{--display:flex;}@media(min-width:768px){.elementor-1351 .elementor-element.elementor-element-409e1d2{--width:54%;}.elementor-1351 .elementor-element.elementor-element-35d447a{--width:54%;}}@media(max-width:1024px){.elementor-1351 .elementor-element.elementor-element-fbd8e75{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-1351 .elementor-element.elementor-element-8a2d44c{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-1351 .elementor-element.elementor-element-1e3e71e{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-1351 .elementor-element.elementor-element-7f4635f{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-1351 .elementor-element.elementor-element-8f24d80{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}}@media(max-width:767px){.elementor-1351 .elementor-element.elementor-element-fbd8e75{--gap:32px 32px;--row-gap:32px;--column-gap:32px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-1351 .elementor-element.elementor-element-d3a1df5{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:32px;--padding-bottom:32px;--padding-left:20px;--padding-right:20px;}.elementor-1351 .elementor-element.elementor-element-8a2d44c{--gap:32px 32px;--row-gap:32px;--column-gap:32px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-1351 .elementor-element.elementor-element-1e3e71e{--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-1351 .elementor-element.elementor-element-2ce5748.elementor-element{--order:99999 /* order end hack */;}.elementor-1351 .elementor-element.elementor-element-7f4635f{--gap:32px 32px;--row-gap:32px;--column-gap:32px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-1351 .elementor-element.elementor-element-8f24d80{--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-1351 .elementor-element.elementor-element-35d447a.e-con{--order:-99999 /* order start hack */;}.elementor-1351 .elementor-element.elementor-element-afa2e1f.e-con{--order:-99999 /* order start hack */;}}/* Start custom CSS for html, class: .elementor-element-7a2360c *//* 282 · Informações · hero */

/* HERO DE PÁGINA INTERNA — é o kit que as outras páginas herdam.
   Um pouco mais baixo que o da home (85vh contra 100svh) e sem intro: a pessoa
   já está dentro do site, a abertura teatral é só da porta de entrada.
   NO PAINEL: seção em largura total, sem container, padding 0,
   Estouro: oculto. */
.pg-hero{
  position:relative;
  /* teto em 1400: com valores menores a altura deixava de ser 85vh
     em monitor alto — num 1440 de altura ela saía com 72vh. O teto
     existe só pra tela em pé, onde 85vh viraria uma faixa absurda. */
  height:clamp(520px, 85vh, 1400px);
  overflow:hidden;
  background-color:var(--mg-mata-fundo);
  display:flex;
  align-items:flex-end;
}
@supports (height:1svh){
  /* svh: no celular a barra de endereço some ao rolar e o vh cresce
     no meio do movimento */
  .pg-hero{height:clamp(520px, 85svh, 1400px)}
}

/* -20% em cima e embaixo: é a folga que o parallax usa. Sem ela a
   foto mostraria borda ao deslizar. A conta: a foto fica com 140% da
   altura da moldura, e o deslocamento máximo do JS (13% da altura
   PRÓPRIA dela) dá 18,2% da moldura — dentro dos 20% de folga. */
.pg-hero__bg{
  position:absolute;
  inset:-20% 0;
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}

/* véu igual ao do hero da home: degradê no topo (leitura do header),
   degradê na base (onde vive o texto) e vinheta fechando os cantos.
   Números copiados do arquivo 22 — se o hero da home mudar, este
   muda junto, na mão, porque são blocos independentes. */
.pg-hero__veu{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(6,16,10,.6) 0%, rgba(6,16,10,.28) 12%,
      rgba(6,16,10,.08) 22%, rgba(6,16,10,0) 30%),
    linear-gradient(0deg,
      rgba(6,16,10,.9) 0%, rgba(6,16,10,.7) 16%,
      rgba(6,16,10,.4) 34%, rgba(6,16,10,.12) 52%,
      rgba(6,16,10,0) 64%),
    radial-gradient(ellipse 110% 95% at 58% 42%,
      rgba(6,16,10,0) 40%, rgba(6,16,10,.28) 74%, rgba(6,16,10,.55) 100%);
}

.pg-hero__in{
  position:relative;
  z-index:2;
  width:100%;
  padding-bottom:clamp(40px, 5.4vw, 72px);
}
.pg-hero__grade{
  width:100%;
  max-width:calc(var(--mg-grid) + 2 * var(--mg-pad-x));
  margin:0 auto;
  padding:0 var(--mg-pad-x);
  box-sizing:border-box;
}

/* maior que os títulos de seção (29,6px), bem menor que o da home
   (72px a 1440). A hierarquia fica: home 72 · hero interno 51 ·
   seção 29,6. O divisor continua mandando nas telas estreitas. */
.pg-hero__titulo{--d3-max:3.2rem}

@media (max-width:900px){
  .pg-hero{height:clamp(440px, 70vh, 720px)}
  @supports (height:1svh){
    .pg-hero{height:clamp(440px, 70svh, 720px)}
  }
  .pg-hero__titulo{--d3-max:2rem}
}

/* estado antes da animação — segurado pelo script do arquivo 71.
   A foto entra levemente ampliada e assenta em 1: é o zoom de
   entrada, o mesmo gesto do hero da home, só que mais curto. */
html.mg-pg-pending .pg-hero__bg{transform:scale(1.08)}
html.mg-pg-pending .pg-hero .mg-d3-title__line > span{transform:translate3d(0,120%,0)}
html.mg-pg-pending .pg-hero .mg-eyebrow{opacity:0}
body.elementor-editor-active .pg-hero .mg-d3-title__line > span{transform:none !important}
body.elementor-editor-active .pg-hero .mg-eyebrow{opacity:1 !important}
body.elementor-editor-active .pg-hero__bg{transform:none !important}

/* ---------- FALTA A FOTO DE CELULAR ----------
   Enquanto não houver versão vertical, o celular usa a foto larga e
   o cover corta as laterais. Quando chegar, descomente:

   @media (max-width:767px){
     .pg-hero__bg{
       background-image:url('https://mangarito.com.br/wp-content/uploads/2026/09/URL-DA-VERSAO-VERTICAL') !important;
       background-size:cover;
       background-position:50% 50%;
     }
   }
   ---------- */

/* ---------- a headline ----------
   "O que saber" 5,76em · "antes de vir." 5,65 + 1,15 de recuo = 6,80.
   É a headline de hero mais curta do projeto, então cabe no tamanho
   cheio das outras páginas. */
.pg-hero .mg-d3-title{--d3-div:7.3}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-02994b9 *//* 286 · Informações · quilometragem */

/* Bloco de números grandes. Existe pra ser LIDO DE RELANCE: quem
   abre uma página de informações quer saber quanto tempo vai dirigir
   antes de ler qualquer parágrafo.

   O filete em cima de cada número, e não embaixo, é de propósito: ele
   amarra os quatro numa linha só e o olho lê a fileira como uma
   tabela, não como quatro blocos soltos. */
ul.mg-numeros{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px, 1.8vw, 28px);
  margin:clamp(30px, 4vw, 52px) 0 0;
  padding:0;
  list-style:none;
}

.mg-numeros > li{
  border-top:2px solid var(--c-head);
  padding-top:clamp(12px, 1.2vw, 18px);
  min-width:0;
}

.mg-numeros strong{
  display:block;
  font-family:var(--mg-font);
  font-size:clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight:300;
  font-style:normal;
  letter-spacing:-.035em;
  line-height:1;
  color:var(--c-head);
  font-variant-numeric:tabular-nums;   /* os quatro alinham na vertical */
}
.mg-numeros strong > i{
  font-style:normal;
  font-size:.34em;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--c-label);
  margin-left:.28em;
}

.mg-numeros span{
  display:block;
  margin-top:clamp(8px, .9vw, 12px);
  font-family:var(--mg-font);
  font-size:.75rem;
  font-weight:400;
  font-style:normal;
  letter-spacing:.03em;
  line-height:1.45;
  color:var(--c-label);
}

/* ---------- celular ----------
   Quatro colunas em 390px dariam 82px por número, e "de São Paulo ·
   cerca de 4h30" quebraria em quatro linhas. Duas por fileira. */
@media (max-width:767px){
  ul.mg-numeros{
    grid-template-columns:repeat(2, 1fr);
    gap:clamp(24px, 6vw, 34px) clamp(14px, 4vw, 20px);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-10340c8 *//* "A caverna mais perto" 10,06em · "fica a cinco minutos." 9,82 +
   1,15 de recuo = 10,97. Vale a segunda, mais folga.
   Remedido na revisão de setembro: era "três minutos". */

/* "A caverna mais perto" 10,06em · "fica a três minutos." 8,98 +
   1,15 de recuo = 10,13. Vale a maior, mais folga.
   Trocou o texto, meça de novo. */
.mg-d3-title{--d3-div:11.5}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8f58f3a *//* 262 · Experiências · quando vir · barras de chuva */

.mg-chuva{width:100%}

/* ---------- a área do gráfico ----------
   SEM TRILHO atrás das barras. A versão anterior tinha um retângulo
   claro de altura cheia por trás de cada mês, e o olho lia duas
   barras empilhadas em vez de uma. O que marca a base agora é um
   filete só, atravessando os doze. */
.mg-chuva__grafico{
  position:relative;
  padding-bottom:clamp(26px, 3vw, 38px);   /* espaço dos nomes dos meses */
}

/* linha de referência dos 100 mm: 100 ÷ 270 = 37% da altura.
   É ela que explica a divisão de cor sem precisar da legenda. */
.mg-chuva__corte{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(clamp(26px, 3vw, 38px) + (clamp(140px, 22vw, 280px) * .37));
  height:0;
  border-top:1px dashed var(--c-line);
  pointer-events:none;
}
.mg-chuva__corte > b{
  position:absolute;
  right:0;
  top:-1.5em;
  font-family:var(--mg-font);
  font-size:.625rem;
  font-weight:400;
  font-style:normal;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--c-label);
  opacity:.75;
}

ul.mg-chuva__ano{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(5px, .7vw, 12px);
  align-items:end;
  height:clamp(140px, 22vw, 280px);
  margin:0;
  padding:0;
  list-style:none;
  /* o filete da base atravessa os doze meses: é o zero do gráfico */
  border-bottom:1px solid var(--c-line);
}

.mg-chuva__m{
  /* relative é OBRIGATÓRIO: o nome do mês é absolute, e sem isto ele
     se posiciona contra a GRADE inteira em vez da própria coluna.
     No desktop, com uma fileira só, o erro não aparecia; no celular,
     com duas fileiras, os doze nomes empilhavam no mesmo ponto. */
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;   /* tudo assenta na base */
  align-items:center;
  height:100%;
  min-width:0;
}

/* o número flutua NO TOPO da barra e sobe junto com ela — some do
   pé, onde disputava espaço com o nome do mês */
.mg-chuva__mm{
  margin-bottom:7px;
  font-family:var(--mg-font);
  font-size:.6875rem;
  font-weight:400;
  font-style:normal;
  line-height:1;
  color:var(--c-label);
  font-variant-numeric:tabular-nums;
  opacity:0;
  transition:opacity .6s var(--mg-ease);
}
.mg-chuva.is-on .mg-chuva__mm{opacity:1}

.mg-chuva__barra{
  display:block;
  width:100%;
  height:0;                      /* o JS escreve a altura com o --h */
  background:var(--c-line);
  transition:height 1.1s cubic-bezier(.22,1,.36,1);
}

/* os meses secos são o assunto da seção: cor cheia. O corte vem do
   dado (mm <= 100), não da estética — ver arquivo 261. */
.mg-chuva__m.is-seco .mg-chuva__barra{background:var(--c-head)}
.mg-chuva__m.is-seco .mg-chuva__mm{color:var(--c-head)}

/* o nome do mês vive ABAIXO do filete da base, fora do gráfico */
.mg-chuva__nome{
  position:absolute;
  bottom:calc(clamp(26px, 3vw, 38px) * -1);
  font-family:var(--mg-font);
  font-size:.625rem;
  font-weight:400;
  font-style:normal;
  letter-spacing:.1em;
  line-height:1;
  text-transform:uppercase;
  color:var(--c-label);
  white-space:nowrap;
}
.mg-chuva__m.is-seco .mg-chuva__nome{color:var(--c-head)}
.mg-chuva__nome abbr{text-decoration:none;border:0;cursor:help}

/* ---------- legenda ---------- */
p.mg-chuva__legenda{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(16px, 2.4vw, 34px);
  margin:clamp(28px, 3.2vw, 44px) 0 0;
  font-family:var(--mg-font);
  font-size:.75rem;
  font-weight:400;
  font-style:normal;
  line-height:1.4;
  color:var(--c-label);
}
.mg-chuva__chave{display:inline-flex;align-items:center;gap:8px}
.mg-chuva__ponto{
  display:block;
  width:18px;
  height:3px;
  background:var(--c-line);
  flex:0 0 auto;
}
.mg-chuva__ponto--seco{background:var(--c-head)}
.mg-chuva__fonte{opacity:.7}

/* ---------- celular ----------
   Doze colunas em 390px dão 28px por barra: o número de mm não cabe.
   Vira seis por linha, em duas fileiras — e aí a linha de referência
   perde sentido, porque são dois gráficos, não um. */
@media (max-width:767px){
  ul.mg-chuva__ano{
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:clamp(100px, 30vw, 150px);
    height:auto;
    gap:clamp(30px, 8vw, 44px) 8px;
    border-bottom:0;
  }
  .mg-chuva__m{border-bottom:1px solid var(--c-line)}
  .mg-chuva__corte{display:none}
  .mg-chuva__mm{font-size:.625rem;margin-bottom:6px}
  .mg-chuva__nome{bottom:-22px}
  .mg-chuva__grafico{padding-bottom:26px}
}

@media (prefers-reduced-motion:reduce){
  .mg-chuva__barra,
  .mg-chuva__mm{transition:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2ce5748 *//* 293 · Informações · o que a gente é · foto */

/* 4:5 — o padrão do componente é 3:4. Só a proporção muda aqui;
   moldura, folga do parallax e véu vêm do global. */
.mg-photo{--photo-ar:4/5}

@media (max-width:900px){
  .mg-photo{--photo-ar:3/2}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-953f0ce *//* 37 · Home · gastronomia · headline */
.mg-d3-title{--d3-div:10.5}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3a87fe7 *//* 298 · Informações · antes de vir · headline */

/* "A cidade é pequena." 9,69em · "Vale se preparar." 7,84 + 1,15 de
   recuo = 8,99. Vale a maior, mais folga.
   Trocou o texto, meça de novo. */
.mg-d3-title{--d3-div:10.2}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ebfa0ed *//* 300 · Informações · antes de vir · cartões */

/* Grade de seis cartões. O fundo de 1px entre eles é o que faz os
   filetes: cada cartão pinta o próprio fundo e o vão entre eles
   deixa a cor da grade aparecer. É mais limpo que dar borda em cada
   um, que sempre dobra nas junções. */
ul.mg-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--c-line);
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
  /* SEM margem própria. O respiro acima vem do widget de cima, no
     painel — assim quem ajusta o espaçamento é quem monta a página,
     e não fica um valor escondido aqui brigando com o de lá. */
  margin:0;
  padding:0;
  list-style:none;
}

.mg-cards > li{
  background:var(--mg-creme);
  padding:clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
  min-width:0;
}

/* a medalha numerada — mesma da descida nas Experiências, pra não
   inventar vocabulário novo no meio do site */
.mg-cards i{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  margin-bottom:clamp(16px, 1.8vw, 22px);
  background:var(--mg-mata);
  color:var(--mg-creme);
  font-family:var(--mg-font);
  font-size:12px;
  font-weight:400;
  font-style:normal;
  letter-spacing:.02em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.mg-cards b{
  display:block;
  margin-bottom:clamp(8px, .9vw, 11px);
  font-family:var(--mg-font);
  font-size:clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight:400;
  font-style:normal;
  letter-spacing:-.015em;
  line-height:1.25;
  color:var(--c-head);
}

.mg-cards p{
  margin:0;
  font-family:var(--mg-font);
  font-size:.875rem;
  font-weight:400;
  font-style:normal;
  line-height:1.6;
  color:var(--c-text);
}

/* ---------- telas médias ----------
   Três colunas abaixo de 1100px deixam a linha com menos de 30
   caracteres, e aí o texto vira uma coluna de palavras soltas. */
@media (max-width:1100px){
  ul.mg-cards{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width:640px){
  ul.mg-cards{grid-template-columns:1fr}
  .mg-cards > li{padding:clamp(24px, 6vw, 32px) 0}
  /* numa coluna só, o fundo da grade já não desenha nada útil nas
     laterais: o filete vira borda de cada item */
  ul.mg-cards{background:none;border-bottom:0;gap:0}
  .mg-cards > li + li{border-top:1px solid var(--c-line)}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a7b4e82 *//* 303 · Informações · FAQ · headline */

/* "Tudo o que" 5,31em · "costumam perguntar." 10,34 + 1,15 de recuo
   = 11,49. Aqui vale a SEGUNDA linha, que é bem maior que a
   primeira — é o caso oposto ao das outras headlines do site.
   Trocou o texto, meça de novo. */
.mg-d3-title{--d3-div:12.0}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-986a0af *//* 305 · Informações · FAQ (sanfona em código)

   Este CSS é da versão ESCRITA À MÃO, o arquivo 304.
   Se um dia trocar pelo widget nativo do Elementor, este arquivo não
   serve — o widget tem outra marcação e precisa de outro CSS.

   Acordeão sem caixa: só filetes horizontais e um sinal de mais que
   vira menos. O site inteiro é feito de filete e espaço — dar borda,
   sombra ou fundo aqui criaria um componente que não pertence a
   lugar nenhum. */
ul.mg-faq{
  margin:clamp(6px, 1vw, 14px) 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--c-line);
}

.mg-faq__item{border-bottom:1px solid var(--c-line)}

/* o h3 existe pra estrutura e pra leitores de tela; quem carrega o
   estilo é o botão dentro dele */
h3.mg-faq__p{margin:0;font-weight:400;font-size:inherit;line-height:inherit}

/* reset dos quatro estados: o kit do Elementor pinta botão de rosa e
   dá fundo cinza, e sem isto o acordeão inteiro fica estranho */
.mg-faq__botao,
.mg-faq__botao:link,
.mg-faq__botao:visited,
.mg-faq__botao:hover,
.mg-faq__botao:active{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(18px, 2.6vw, 40px);
  width:100%;
  min-width:0;
  margin:0;
  padding:clamp(20px, 2.2vw, 30px) 0;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  text-align:left;
  cursor:pointer;
  font-family:var(--mg-font);
  font-size:clamp(1rem, 1.5vw, 1.25rem);
  font-weight:400;
  font-style:normal;
  letter-spacing:-.015em;
  line-height:1.35;
  color:var(--c-head) !important;
  transition:opacity .3s var(--mg-ease);
}
.mg-faq__botao:hover{opacity:.62}
.mg-faq__botao:focus{outline:none}
.mg-faq__botao:focus-visible{outline:1px solid var(--c-head);outline-offset:4px}

/* ═══ A PERGUNTA PRECISA PODER QUEBRAR ═══
   Diagnosticado no site real: perguntas longas saíam numa linha só,
   passando POR CIMA do sinal de mais. O sintoma é de white-space
   nowrap herdado — o tema ou o kit do Elementor põe isso em button,
   e a regra vence a nossa por vir de folha carregada depois.

   Os quatro juntos garantem a quebra em qualquer cenário:
   · min-width:0 deixa o item de flex encolher abaixo do conteúdo,
     que é o que o navegador NÃO faz por padrão;
   · white-space:normal desfaz o nowrap herdado;
   · overflow-wrap quebra palavra gigante, se aparecer;
   · o !important porque a regra de fora carrega depois desta. */
.mg-faq__botao > span{
  flex:1 1 auto;
  min-width:0;
  white-space:normal !important;
  overflow-wrap:break-word;
  word-break:normal;
  text-wrap:pretty;   /* evita a segunda linha com uma palavra só */
}

/* ---------- o sinal ----------
   Duas barras de 1px: a horizontal fica, a vertical encolhe pra zero
   quando abre. Vira um menos sem trocar de elemento, e a transição
   acontece no mesmo tempo da altura do corpo. */
.mg-faq__sinal{
  position:relative;
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin-top:.28em;
  opacity:.5;
  transition:opacity .3s var(--mg-ease);
}
.mg-faq__sinal::before,
.mg-faq__sinal::after{
  content:"";
  position:absolute;
  background:currentColor;
  transition:transform .5s var(--mg-ease);
}
.mg-faq__sinal::before{left:0;top:7.5px;width:16px;height:1px}
.mg-faq__sinal::after{left:7.5px;top:0;width:1px;height:16px}

.mg-faq__botao:hover .mg-faq__sinal{opacity:1}
.mg-faq__item.is-on .mg-faq__sinal{opacity:1}
.mg-faq__item.is-on .mg-faq__sinal::after{transform:scaleY(0)}

/* ---------- o corpo ----------
   A altura é escrita pelo JS em pixels: height:auto não anima. O
   overflow:hidden é o que faz o recorte durante o movimento. */
.mg-faq__corpo{
  overflow:hidden;
  height:0;
  transition:height .5s var(--mg-ease);
}
.mg-faq__corpo > p{
  margin:0 0 clamp(20px, 2.2vw, 30px);
  /* alinhado com a pergunta, não com o sinal */
  padding-right:calc(16px + clamp(18px, 2.6vw, 40px));
  font-family:var(--mg-font);
  font-size:.9375rem;
  font-weight:400;
  font-style:normal;
  line-height:1.65;
  color:var(--c-text);
  max-width:66ch;
}

@media (max-width:700px){
  .mg-faq__corpo > p{padding-right:0}
}

/* sem JS, ou com menos movimento, tudo fica aberto: FAQ escondido e
   sem script é conteúdo que ninguém lê, nem o Google */
@media (prefers-reduced-motion:reduce){
  .mg-faq__corpo{transition:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d39b3f4 *//* 307 · Informações · break final */

/* Fechamento da página, mesmo bloco do break final da home (65), do
   Glamping (102), da Gastronomia (142), do Spa (186), de
   Acomodações (232) e de Experiências (271). Em arquivo próprio pra
   cada página poder trocar a foto e a altura sem mexer nas outras.

   Duas classes no seletor: o .mg-break do CSS global é impresso DEPOIS
   do CSS dos widgets e ganharia de uma classe só.

   NO PAINEL: seção em largura total, sem container, padding 0,
   Estouro: oculto. */
/* 100vh, e o teto em 1600.
   A altura aqui não é só estética: a foto é 3:2 e a moldura é mais
   larga que isso, então o cover corta ALTURA. Quanto mais baixa a
   moldura, mais ela corta. Medido com o zoom de 1,34 junto, numa tela
   de 1440x900: a 90vh sobram 64% da altura da foto, a 100vh sobram
   71%. O teto só existe pra tela em pé, onde 100vh viraria uma faixa
   absurda. */
.mg-photo.mg-break--final{
  height:clamp(560px, 100vh, 1600px);
  clip-path:none;             /* este break NÃO abre: entra em largura cheia */
}
@supports (height:1svh){
  .mg-photo.mg-break--final{height:clamp(560px, 100svh, 1600px)}
}

/* ZOOM 1,34 — é ele que permite o parallax agressivo.
   A foto só desliza até a folga que o zoom dá: metade do excedente
   pra cada lado. A 1,34 sobram 17% de altura de cada lado, e a
   amplitude do parallax é 14 (o teto do JS). Com o zoom padrão de
   1,3 a folga seria 15% e ficaria no limite.
   Custo: 1,34 amplia mais o arquivo. Num monitor de 2560 a moldura
   pede ~3410px de largura a partir de um arquivo de 2560. */
.mg-photo.mg-break--final .mg-photo__img{
  transform:scale(1.34);
  background-position:50% 50%;
}

/* ── véu: o mesmo do hero ──
   Seção de fechamento, responde ao hero: degradê no topo, degradê na
   base, vinheta fechando os cantos, tinta radial e grão em soft-light.
   Números copiados do arquivo 22 — se o hero mudar, este muda junto,
   na mão, porque são blocos independentes. */
.mg-photo.mg-break--final::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(6,16,10,.6) 0%, rgba(6,16,10,.28) 12%,
      rgba(6,16,10,.08) 22%, rgba(6,16,10,0) 30%),
    linear-gradient(0deg,
      rgba(6,16,10,.9) 0%, rgba(6,16,10,.72) 14%,
      rgba(6,16,10,.46) 30%, rgba(6,16,10,.2) 46%,
      rgba(6,16,10,.05) 56%, rgba(6,16,10,0) 62%),
    radial-gradient(ellipse 110% 95% at 58% 42%,
      rgba(6,16,10,0) 40%, rgba(6,16,10,.3) 72%, rgba(6,16,10,.62) 100%),
    radial-gradient(ellipse 100% 90% at 58% 42%,
      rgba(8,19,13,.16) 30%, rgba(8,19,13,.25) 65%, rgba(8,19,13,.34) 100%);
}

/* grão em soft-light — o mesmo ruído do hero */
.mg-photo.mg-break--final::after{
  content:"";
  position:absolute;
  inset:0;
  height:auto;
  opacity:.14;
  mix-blend-mode:soft-light;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.9' intercept='-.45'/%3E%3CfeFuncG type='linear' slope='1.9' intercept='-.45'/%3E%3CfeFuncB type='linear' slope='1.9' intercept='-.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

@media (max-width:767px){
  .mg-photo.mg-break--final{height:90vh;min-height:500px}
  @supports (height:1svh){
    .mg-photo.mg-break--final{height:90svh}
  }
}/* End custom CSS */