.elementor-1249 .elementor-element.elementor-element-ec3355b{--display:flex;}.elementor-1249 .elementor-element.elementor-element-c863b2d{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:160px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-1249 .elementor-element.elementor-element-c863b2d:not(.elementor-motion-effects-element-type-background), .elementor-1249 .elementor-element.elementor-element-c863b2d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-1249 .elementor-element.elementor-element-d3a1df5{--display:flex;}.elementor-1249 .elementor-element.elementor-element-d3a1df5:not(.elementor-motion-effects-element-type-background), .elementor-1249 .elementor-element.elementor-element-d3a1df5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-1249 .elementor-element.elementor-element-3d593d4{--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-1249 .elementor-element.elementor-element-3d593d4:not(.elementor-motion-effects-element-type-background), .elementor-1249 .elementor-element.elementor-element-3d593d4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-1249 .elementor-element.elementor-element-00d767c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1249 .elementor-element.elementor-element-1c7f365 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1249 .elementor-element.elementor-element-015d0db > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1249 .elementor-element.elementor-element-b83bd36{--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-1249 .elementor-element.elementor-element-ecf5f01 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1249 .elementor-element.elementor-element-1d8b7d7{--display:flex;}.elementor-1249 .elementor-element.elementor-element-ddceb37{--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-1249 .elementor-element.elementor-element-ddceb37:not(.elementor-motion-effects-element-type-background), .elementor-1249 .elementor-element.elementor-element-ddceb37 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-1249 .elementor-element.elementor-element-b581bb9{--display:flex;--gap:00px 00px;--row-gap:00px;--column-gap:00px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1249 .elementor-element.elementor-element-de1810c > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1249 .elementor-element.elementor-element-8113962{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1249 .elementor-element.elementor-element-5e2f343 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1249 .elementor-element.elementor-element-c715b66 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1249 .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-1249 .elementor-element.elementor-element-8a2d44c:not(.elementor-motion-effects-element-type-background), .elementor-1249 .elementor-element.elementor-element-8a2d44c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-1249 .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-1249 .elementor-element.elementor-element-3cdbebb{--display:flex;}.elementor-1249 .elementor-element.elementor-element-8b7cefe{--display:flex;--justify-content:center;}.elementor-1249 .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-1249 .elementor-element.elementor-element-6d844ce{--display:flex;--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-1249 .elementor-element.elementor-element-6d844ce:not(.elementor-motion-effects-element-type-background), .elementor-1249 .elementor-element.elementor-element-6d844ce > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-1249 .elementor-element.elementor-element-e34d1ff{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1249 .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-1249 .elementor-element.elementor-element-8f24d80:not(.elementor-motion-effects-element-type-background), .elementor-1249 .elementor-element.elementor-element-8f24d80 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-1249 .elementor-element.elementor-element-35d447a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1249 .elementor-element.elementor-element-a55c009 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1249 .elementor-element.elementor-element-a7b4e82 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1249 .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-1249 .elementor-element.elementor-element-196e886 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1249 .elementor-element.elementor-element-40817c9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1249 .elementor-element.elementor-element-0f97832{--display:flex;}.elementor-1249 .elementor-element.elementor-element-0f97832:not(.elementor-motion-effects-element-type-background), .elementor-1249 .elementor-element.elementor-element-0f97832 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-d4887a5 );}.elementor-1249 .elementor-element.elementor-element-4a6316a{--display:flex;}@media(min-width:768px){.elementor-1249 .elementor-element.elementor-element-8113962{--width:54%;}}@media(max-width:1024px){.elementor-1249 .elementor-element.elementor-element-3d593d4{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-1249 .elementor-element.elementor-element-ddceb37{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-1249 .elementor-element.elementor-element-8a2d44c{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-1249 .elementor-element.elementor-element-8f24d80{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}}@media(max-width:767px){.elementor-1249 .elementor-element.elementor-element-c863b2d{--padding-top:64px;--padding-bottom:32px;--padding-left:20px;--padding-right:20px;}.elementor-1249 .elementor-element.elementor-element-d3a1df5{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1249 .elementor-element.elementor-element-3d593d4{--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-1249 .elementor-element.elementor-element-00d767c.e-con{--order:-99999 /* order start hack */;}.elementor-1249 .elementor-element.elementor-element-b83bd36.e-con{--order:-99999 /* order start hack */;}.elementor-1249 .elementor-element.elementor-element-ddceb37{--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-1249 .elementor-element.elementor-element-de1810c.elementor-element{--order:99999 /* order end hack */;}.elementor-1249 .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-1249 .elementor-element.elementor-element-6d844ce{--padding-top:32px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-1249 .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-1249 .elementor-element.elementor-element-35d447a.e-con{--order:-99999 /* order start hack */;}.elementor-1249 .elementor-element.elementor-element-afa2e1f.e-con{--order:-99999 /* order start hack */;}}/* Start custom CSS for html, class: .elementor-element-7a2360c *//* 242 · Experiências · 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}

/* ---------- foto própria pra tela em pé ----------
   No celular a moldura é alta e o cover cortaria as laterais da foto
   larga, sobrando um pedaço sem contexto.
   !important porque a URL do desktop vem no estilo INLINE do arquivo
   241, e inline ganha de classe — só o !important passa na frente. */
@media (max-width:767px){
  .pg-hero__bg{
    background-image:url('https://mangarito.com.br/wp-content/uploads/2026/09/bg-experiencias-mobile.webp') !important;
    background-size:cover;
    background-position:50% 50%;
  }
}

/* ---------- a headline é longa ----------
   "de um parque estadual." tem 11,14em — é a maior linha de hero do
   projeto. O --d3-max aqui está menor que nas outras páginas pra ela
   caber numa linha só; se crescer mais, ela quebra. */

/* ═══ O DIVISOR PRECISA DE ESCOPO ═══
   Auditoria: os arquivos de headline das seções definem
   `.mg-d3-title{--d3-div}` SEM escopo, então o último carregado
   vencia pra página inteira — inclusive pro hero. Resultado medido:
   a linha longa do hero vazava a 390px, a largura de celular mais
   comum, porque ele acabava usando o divisor de outra seção.

   `.pg-hero .mg-d3-title` tem duas classes e vence qualquer regra de
   uma só, independente da ordem de carregamento.
   "de um parque estadual." tem 11,14em + 1,15 de recuo = 12,29. */
.pg-hero .mg-d3-title{--d3-max:2.9rem;--d3-div:12.8}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f0e0e73 *//* 245 · Experiências · manifesto */

/* QUINTA cópia idêntica deste componente: home (32), Glamping (77),
   Gastronomia (115), Spa (155) e agora Experiências.
   Um ajuste no manifesto hoje custa CINCO edições. Isto devia ter
   subido pro CSS global há três páginas — quando sobrar dez minutos,
   mova pro arquivo 02 e apague as cinco cópias. */
.mg-manifesto{
  container-type:inline-size;
  width:100%;
}

.mg-manifesto__p{
  --mf-fs:clamp(1.25rem, calc(100cqw / 42), 1.875rem);
  margin:0 auto;
  max-width:46ch;
  text-align:center;
  font-family:var(--mg-font) !important;
  font-size:var(--mf-fs);
  font-weight:400 !important;
  line-height:1.6;
  letter-spacing:-.015em;
  text-transform:none;
  color:var(--c-head, #2F4F3E);
  text-wrap:pretty;   /* evita linha órfã curta no fim */
  opacity:1;
}

/* as linhas são criadas pelo JS: ele mede onde o texto quebra e
   envolve cada uma, pra poder acender uma a uma no scroll */
.mg-manifesto__line{display:block}
.mg-manifesto__line > span{display:block;opacity:.16}

body.elementor-editor-active .mg-manifesto__line > span{opacity:1 !important}

@media (max-width:767px){
  .mg-manifesto__p{
    --mf-fs:clamp(1.125rem, calc(100cqw / 21), 1.5rem);
    max-width:none;
    line-height:1.62;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f33617e *//* 253 · Experiências · vídeo */

/* O bloco vive dentro da grade de 1280 e ESTOURA pros dois lados até
   32px da borda da tela — nem preso na grade, nem largura total.
   Quem escreve o --vid-out é o JS, MEDINDO: 100vw conta a barra de
   rolagem e uma conta fixa com 1280 não serve abaixo dessa largura.
   0px aqui é o estado seguro: sem JS, fica na grade.
   NO PAINEL: seção normal, na grade, com Estouro: oculto. */
.mg-video{
  position:relative;
  --vid-out:0px;
  margin:0 calc(var(--vid-out) * -1);
}

/* RESET DE TODOS OS ESTADOS — não só o de repouso.
   O Elementor pinta button:hover/:focus/:active com a cor de acento
   do kit (o rosa). Sem cobrir os quatro estados, ele reaparece só na
   interação, que é justamente quando ninguém testa. */
.mg-video__quadro,
.mg-video__quadro:hover,
.mg-video__quadro:focus,
.mg-video__quadro:active{
  background:var(--mg-mata-fundo) !important;
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
  color:inherit !important;
  text-decoration:none !important;
}

.mg-video__quadro{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:82vh;
  overflow:hidden;
  margin:0;
  padding:0;
  border:0;
  cursor:none;                /* quem manda é o cursor personalizado */
  /* estado seguro: sem JS, o quadro aparece inteiro. Quem anima o
     recorte é o arquivo 70, preso ao scroll. */
  clip-path:inset(0% 0%);
  will-change:clip-path;
  -webkit-appearance:none;
  appearance:none;
}
@supports (height:1svh){ .mg-video__quadro{max-height:82svh} }

.mg-video__el{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;        /* o clique é do botão, não do vídeo */
}

/* véu leve: o vídeo é ilustração aqui, não o conteúdo principal.
   No hover ele clareia, sinalizando que dá pra entrar. */
.mg-video__quadro::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(6,16,10,.18);
  transition:background .6s var(--mg-ease);
  pointer-events:none;
}
.mg-video__quadro:hover::after,
.mg-video__quadro:focus-visible::after{background:rgba(6,16,10,.06)}

/* rótulo de reserva: aparece só quando NÃO há cursor personalizado
   (toque e teclado). Sem isso, em celular ninguém saberia que clica. */
.mg-video__rotulo{
  position:absolute;
  left:50%; bottom:clamp(20px, 3vw, 34px);
  transform:translateX(-50%);
  padding:11px 22px;
  border:1px solid rgba(253,228,218,.4);
  border-radius:999px;
  font-family:var(--mg-font);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mg-aurora);
  white-space:nowrap;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .mg-video__rotulo{display:none}
}

/* o foco por teclado continua visível — o que sai é só o estilo do
   Elementor, não a acessibilidade */
.mg-video__quadro:focus-visible{outline:2px solid var(--mg-mata) !important;outline-offset:4px}
.mg-video__fechar:focus-visible{outline:1px solid currentColor !important;outline-offset:3px}

/* ── cursor personalizado ── */
.mg-video__cursor{
  position:fixed;
  top:0; left:0;
  z-index:60;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%) scale(.7);
  transition:opacity .3s ease, scale .45s var(--mg-ease);
  will-change:transform;
}
.mg-video__cursor.is-on{opacity:1}
.mg-video__cursor > span{
  display:block;
  padding:13px 20px;
  border-radius:999px;
  background:var(--mg-aurora);
  color:var(--mg-mata);
  font-family:var(--mg-font);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* ── lightbox ── */
.mg-video__caixa{
  position:fixed;
  inset:0;
  z-index:10001;             /* acima do painel do menu (1000) */
  display:grid;
  place-items:center;
  padding:clamp(20px, 4vw, 64px);
  background:rgba(6,16,10,.92);
  opacity:0;
  transition:opacity .45s var(--mg-ease);
}
.mg-video__caixa[hidden]{display:none}
.mg-video__caixa.is-on{opacity:1}

.mg-video__palco{
  width:100%;
  max-width:1280px;
  aspect-ratio:16/9;
  background:#000;
  transform:scale(.97);
  transition:transform .5s var(--mg-ease);
}
.mg-video__caixa.is-on .mg-video__palco{transform:none}
.mg-video__cheio{width:100%;height:100%;display:block}

.mg-video__fechar,
.mg-video__fechar:hover,
.mg-video__fechar:focus,
.mg-video__fechar:active{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
  text-decoration:none !important;
  color:var(--mg-aurora) !important;
}

.mg-video__fechar{
  position:absolute;
  top:clamp(14px, 2.4vw, 28px);
  right:clamp(14px, 2.4vw, 28px);
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:999px;
  cursor:pointer;
  opacity:.8;
  transition:opacity .3s ease;
}
.mg-video__fechar:hover,
.mg-video__fechar:focus-visible{opacity:1}
.mg-video__fechar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

@media (max-width:767px){
  .mg-video__quadro{aspect-ratio:4/3;max-height:none}
}

body.elementor-editor-active .mg-video__quadro{clip-path:none !important}

@media (prefers-reduced-motion:reduce){
  .mg-video__quadro{clip-path:none}
  .mg-video__cursor,
  .mg-video__caixa,
  .mg-video__palco,
  .mg-video__quadro::after{transition:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-015d0db *//* 248 · Experiências · núcleos · headline */

/* "Quatro núcleos" 7,40em · "pro mesmo parque." 9,34 + 1,15 de
   recuo = 10,49. Vale a segunda, mais folga.
   Remedido na revisão de setembro: era "Quatro portas". */
.mg-d3-title{--d3-div:11.0}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9645cef *//* 251 · Experiências · a descida   [v: vence-o-reset-do-elementor]
   ═══════════════════════════════════════════════════════════════
   ESCRITO CELULAR PRIMEIRO, e isso é proposital.

   Na versão anterior o empilhado era a EXCEÇÃO: dependia de uma
   media query, mais a classe .mg-desc--solta, mais o seletor do
   editor. Bastava um dos três não pegar pra a etapa continuar em
   `display:contents` dentro de um contêiner já em bloco — e aí a
   foto e o texto empilhavam SEM MARGEM NENHUMA, com o título colado
   na foto.

   Agora o empilhado com espaçamento é o PADRÃO e a grade de duas
   colunas é que é condicional. Não existe mais estado sem espaço:
   se a regra do desktop não pegar, cai no empilhado certo.
   ═══════════════════════════════════════════════════════════════

   SEÇÃO INTEIRA: traz o próprio fundo, container e respiro. No
   Elementor é seção em largura total, sem container, padding 0. */

section.mg-desc{
  position:relative;
  display:block;
  background:var(--mg-creme);
}

/* ---------- padrão: empilhado ---------- */
.mg-desc__fixo{
  display:block;
  /* padrão do site no celular: 64px em cima e embaixo */
  padding:64px 0;
  background:var(--mg-creme);
}

.mg-desc__in{
  display:block;
  width:100%;
  max-width:1344px;
  margin:0 auto;
  padding:0 var(--mg-pad-x);   /* 20px abaixo de 900 */
  box-sizing:border-box;
}

p.mg-desc__eyebrow{
  margin:0;
  font-family:var(--mg-font);
  font-size:11px;
  font-weight:400;
  font-style:normal;
  letter-spacing:.16em;
  line-height:1;
  text-transform:uppercase;
  color:var(--c-label);
}

.mg-desc__cab{margin-bottom:clamp(24px, 7vw, 34px)}

/* o número e os traços só existem quando a seção trava na tela */
p.mg-desc__num,
.mg-desc__passos{display:none}

/* ---------- RITMO ----------
   CUIDADO COM O CLAMP: escrito errado, ele nunca sai do piso e o
   valor do meio vira enfeite. `clamp(18px, 4.5vw, 26px)` a 390px
   resolve 4,5vw = 17,6 — abaixo do mínimo — e dá 18 em QUALQUER
   celular. Os valores abaixo foram escolhidos pra que o vw caia
   DENTRO da faixa a 390px: 9vw = 35, 18vw = 70.

   Três níveis, cada um cerca do dobro do anterior — é a proporção
   que o olho usa pra agrupar:
     8px   entre título e texto     (mesma ideia)
     35px  entre foto e título      (mesma etapa)
     70px  entre uma etapa e outra  (blocos diferentes) */
.mg-desc__etapa{
  position:relative;
  display:block;
  margin-top:clamp(56px, 18vw, 88px);
}
.mg-desc__etapa:first-of-type{margin-top:0}

/* ═══ O !important AQUI É OBRIGATÓRIO ═══
   O Elementor tem este reset no custom-frontend.min.css:

     .elementor .elementor-widget:not(.elementor-widget-text-editor)
     :not(.elementor-widget-theme-post-content) figure { margin: 0 }

   Ele zera a margem de TODA <figure> dentro de qualquer widget, e
   ganha por peso: quatro classes mais um elemento contra a nossa uma
   classe. Não é questão de ordem no arquivo — nenhum valor que a
   gente escrevesse ia aparecer.

   Diagnosticado no site real: margem da foto em 0 e a do h3 em 8px,
   as duas regras no mesmo bloco. A do h3 passava porque o Elementor
   não reseta h3; a da figure não.

   Subir a especificidade em vez do !important exigiria cinco classes
   encadeadas, e quebraria de novo se o Elementor mudar o reset. */
.mg-desc__cam{
  position:relative;
  display:block;
  margin:0 0 clamp(28px, 9vw, 40px) !important;
  padding:0;
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  background:rgba(47,79,62,.06);
  opacity:1;
}

.mg-desc__img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}

/* véu leve, igual ao resto das fotos do site */
.mg-desc__cam::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(47,79,62,.10);
  pointer-events:none;
}

/* ---------- a medalha da profundidade ----------
   No celular não existe o número grande da coluna, então a
   profundidade precisa ter presença própria: círculo verde cheio com
   a fonte em creme, no canto de cima da foto.

   O tamanho é FIXO e a fonte também. Um círculo que muda de diâmetro
   com a tela deixa de parecer uma medalha e passa a parecer um
   elemento mal resolvido — e em 320px ele já é pequeno o bastante.

   display:grid + place-items:center centraliza o texto nos dois
   eixos sem depender de line-height, que é o que costuma deixar
   número dentro de círculo um pixel acima do meio. */
.mg-desc__etapa::before{
  content:attr(data-m) "m";
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:50%;
  box-sizing:border-box;
  font-family:var(--mg-font);
  font-size:15px;
  font-weight:400;
  font-style:normal;
  letter-spacing:-.01em;
  line-height:1;
  color:var(--mg-creme);
  background:var(--mg-mata);
  font-variant-numeric:tabular-nums;
  /* a foto atrás pode ser clara ou escura; a sombra curta garante que
     o círculo não se dilua num fundo de mata verde */
  box-shadow:0 2px 14px rgba(6,16,10,.28);
}

.mg-desc__t{opacity:1}
.mg-desc__t h3{
  margin:0 0 8px;
  font-family:var(--mg-font);
  font-size:clamp(1.25rem, 2.2vw, 1.875rem);
  font-weight:400;
  font-style:normal;
  letter-spacing:-.025em;
  line-height:1.15;
  color:var(--c-head);
}
.mg-desc__t p{
  margin:0;
  font-family:var(--mg-font);
  font-size:.9375rem;
  font-weight:400;
  font-style:normal;
  line-height:1.6;
  color:var(--c-text);
  max-width:40ch;
}

/* ═══════════════════════════════════════════════
   DESKTOP: a seção trava na tela e vira duas colunas

   A ALTURA DA ROLAGEM não vem daqui — quem cria o percurso é o pin
   do ScrollTrigger (arquivo 240), que insere um espaçador.

   ATENÇÃO: nenhum ancestral pode ter transform, filter ou
   backdrop-filter. Isso cria bloco de contenção e o position:fixed
   do pin passa a se posicionar contra o ancestral, não contra a
   tela. É o mesmo bug do menu.

   768, e o JS decide por (min-width: 768px). MEXEU AQUI, MEXA NO
   SO_DESKTOP DO ARQUIVO 240.

   A classe .mg-desc--solta (posta pelo JS quando NÃO prende) e o
   editor do Elementor desligam tudo isto e caem no empilhado do
   topo do arquivo — que já tem o espaçamento certo. */
@media (min-width:768px){
  .mg-desc:not(.mg-desc--solta) .mg-desc__fixo{
    display:flex;
    align-items:center;
    height:100vh;
    box-sizing:border-box;
    /* O HEADER É FIXO e cobre os primeiros 96px. Sem descontar, o
       conteúdo fica centrado em 100vh mas aparece baixo: o centro
       óptico está no meio do que SOBRA, não da tela inteira. */
    padding:var(--mg-header-h) 0 0;
  }
  @supports (height:1svh){
    .mg-desc:not(.mg-desc--solta) .mg-desc__fixo{height:100svh}
  }

  /* Duas colunas e três linhas: cabeçalho, textos e traços na
     esquerda; a foto ocupa a direita inteira. */
  .mg-desc:not(.mg-desc--solta) .mg-desc__in{
    display:grid;
    grid-template-columns:1fr minmax(0, 40%);
    grid-template-rows:auto minmax(clamp(120px, 15vh, 170px), auto) auto;
    gap:clamp(18px, 2vw, 30px) clamp(40px, 6vw, 96px);
    align-items:center;
  }

  /* Cada etapa vem da marcação com foto E texto juntos — é o que faz
     o celular ficar certo. display:contents DISSOLVE o bloco: a foto
     e o texto viram itens diretos da grade e vão cada um pra sua
     coluna, como se não houvesse contêiner. */
  .mg-desc:not(.mg-desc--solta) .mg-desc__etapa{
    display:contents;
    margin:0;
  }
  .mg-desc:not(.mg-desc--solta) .mg-desc__etapa::before{content:none}

  .mg-desc:not(.mg-desc--solta) .mg-desc__cab{
    grid-column:1;grid-row:1;align-self:end;margin:0;
  }
  .mg-desc:not(.mg-desc--solta) p.mg-desc__eyebrow{
    margin:0 0 clamp(16px, 2vw, 26px);
  }

  /* O NÚMERO NÃO VIAJA: fica num lugar só e troca de valor. Na
     primeira versão ele corria por uma régua e passava por cima dos
     rótulos — nas pontas, ilegível. */
  .mg-desc:not(.mg-desc--solta) p.mg-desc__num{
    display:block;
    margin:0;
    font-family:var(--mg-font);
    font-size:clamp(3.5rem, 9vw, 8rem);
    font-weight:300;
    font-style:normal;
    letter-spacing:-.05em;
    line-height:.9;
    color:var(--c-head);
    font-variant-numeric:tabular-nums;   /* o número não dança ao contar */
  }
  .mg-desc:not(.mg-desc--solta) p.mg-desc__num > i{
    font-style:normal;
    font-size:.2em;
    font-weight:400;
    letter-spacing:.08em;
    color:var(--c-label);
    margin-left:.28em;
    vertical-align:.9em;
  }

  /* os quatro textos ocupam a MESMA célula: a troca não empurra nada
     e a altura da coluna não pula */
  .mg-desc:not(.mg-desc--solta) .mg-desc__t{
    grid-column:1;
    grid-row:2;
    align-self:start;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .55s var(--mg-ease), transform .7s var(--mg-ease);
    pointer-events:none;
  }
  .mg-desc:not(.mg-desc--solta) .mg-desc__etapa.is-on .mg-desc__t{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .mg-desc:not(.mg-desc--solta) .mg-desc__t h3{margin-bottom:10px}

  /* quatro traços: o percorrido em cheio, o resto em filete */
  .mg-desc:not(.mg-desc--solta) .mg-desc__passos{
    grid-column:1;
    grid-row:3;
    align-self:start;
    display:flex;
    gap:10px;
  }
  .mg-desc:not(.mg-desc--solta) .mg-desc__passos > i{
    display:block;
    width:clamp(28px, 4vw, 54px);
    height:1px;
    background:var(--c-line);
    transition:background-color .5s var(--mg-ease), height .5s var(--mg-ease);
  }
  .mg-desc:not(.mg-desc--solta) .mg-desc__passos > i.is-on{
    background:var(--c-head);
    height:2px;
  }

  /* a foto: VERTICAL, e as quatro na mesma célula, sobrepostas */
  .mg-desc:not(.mg-desc--solta) .mg-desc__cam{
    grid-column:2;
    grid-row:1 / 4;
    /* !important pelo mesmo motivo do bloco lá em cima: aqui ele
       precisa vencer a NOSSA regra do empilhado, que também é
       !important. */
    margin:0 !important;
    /* o teto desconta o header e o respiro, senão a foto vaza pra
       baixo da tela em telas de pouca altura */
    max-height:min(78vh, calc(100vh - var(--mg-header-h) - 72px));
    opacity:0;
    transition:opacity .9s var(--mg-ease);
  }
  @supports (height:1svh){
    .mg-desc:not(.mg-desc--solta) .mg-desc__cam{
      max-height:min(78svh, calc(100svh - var(--mg-header-h) - 72px));
    }
  }
  .mg-desc:not(.mg-desc--solta) .mg-desc__etapa.is-on .mg-desc__cam{opacity:1}

  /* a foto ativa assenta de 1,06 pra 1: o movimento é o que dá a
     sensação de estar descendo por dentro dela */
  .mg-desc:not(.mg-desc--solta) .mg-desc__img{
    transform:scale(1.06);
    transition:transform 1.6s var(--mg-ease);
  }
  .mg-desc:not(.mg-desc--solta) .mg-desc__etapa.is-on .mg-desc__img{transform:scale(1)}

  /* no editor, o empilhado do topo do arquivo é o que vale */
  body.elementor-editor-active .mg-desc .mg-desc__fixo{display:block;height:auto;padding:64px 0}
  body.elementor-editor-active .mg-desc .mg-desc__in{display:block}
  body.elementor-editor-active .mg-desc .mg-desc__etapa{display:block;margin-top:clamp(56px,18vw,88px)}
  body.elementor-editor-active .mg-desc .mg-desc__etapa:first-of-type{margin-top:0}
  body.elementor-editor-active .mg-desc .mg-desc__etapa::before{content:attr(data-m) " m"}
  body.elementor-editor-active .mg-desc .mg-desc__cam{
    grid-column:auto;grid-row:auto;opacity:1;max-height:none;
    margin:0 0 clamp(28px, 9vw, 40px) !important;
  }
  body.elementor-editor-active .mg-desc .mg-desc__img{transform:none}
  body.elementor-editor-active .mg-desc .mg-desc__t{
    grid-column:auto;grid-row:auto;opacity:1;transform:none;pointer-events:auto;
  }
  body.elementor-editor-active .mg-desc p.mg-desc__num,
  body.elementor-editor-active .mg-desc .mg-desc__passos{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mg-desc__cam,
  .mg-desc__img,
  .mg-desc__t{transition:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-de1810c *//* 255 · Experiências · além das cavernas · 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-c715b66 *//* 37 · Home · gastronomia · headline */
.mg-d3-title{--d3-div:10.5}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-457e4d8 *//* 324 · Experiências · o tamanho do parque · headline */

/* "Mais de trezentas cavernas." 13,03em · "Doze abertas à visita."
   10,02 + 1,15 de recuo = 11,17. Vale a primeira, mais folga.
   Trocou o texto, meça de novo. */
.mg-d3-title{--d3-div:13.5}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8f58f3a *//* 327 · Experiências · o tamanho do parque · os pontos */

/* Grade de 24 colunas. O número de colunas é FIXO por faixa, não
   automático: com auto-fill, a última fileira fica incompleta em
   quase toda largura e o bloco perde a cara de mapa. */
.mg-cavernas{
  display:grid;
  gap:clamp(4px, .5vw, 8px);
  /* respiro curto: o texto acima já termina num parágrafo, e o
     conjunto de pontos lê melhor colado nele do que solto */
  margin:clamp(20px, 2.4vw, 32px) 0 0;
  width:100%;

  /* ══ AS COLUNAS SÃO DIVISORES EXATOS DE 312 ══
     312 = 39×8 = 26×12 = 13×24. Usar divisor exato é o que evita a
     última fileira incompleta, que estraga a leitura de "conjunto"
     e faz o bloco parecer cortado.

     O número de colunas muda com a largura pra o PONTO ficar sempre
     entre 20 e 30px. Ocupando os 1280px da grade com 24 colunas,
     cada ponto teria 44px e viraria bolinha de jogo. */
  grid-template-columns:repeat(39, 1fr);   /* 8 fileiras */
}

/* ---------- telas médias ----------
   26 × 12. As faixas foram escolhidas MEDINDO o tamanho do ponto,
   não por breakpoint redondo: o objetivo é ele ficar entre 12 e
   30px em qualquer largura. Com o corte em 1100, o ponto pulava
   pra 34px logo abaixo dele. */
@media (max-width:899px){
  .mg-cavernas{grid-template-columns:repeat(26, 1fr);gap:clamp(4px, .8vw, 6px)}
}

/* ---------- celular ----------
   13 × 24: o bloco fica alto e estreito. É proposital — em tela de
   celular, altura é o que comunica quantidade, e o polegar já está
   rolando mesmo. Com 26 colunas aqui, o ponto cairia pra 6px e o
   conjunto viraria textura cinza. */
@media (max-width:479px){
  .mg-cavernas{grid-template-columns:repeat(13, 1fr);gap:clamp(4px, 1.4vw, 7px)}
}

.mg-cavernas > i{
  display:block;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(47,79,62,.16);

  /* estado seguro: sem JS os pontos aparecem parados. A entrada é
     ligada pela classe que o motor põe. */
  opacity:1;
  transform:none;
}

/* ---------- as doze ---------- */
.mg-cavernas > i.is-aberta{
  background:var(--mg-laranja);
  /* o anel dá presença sem aumentar o ponto: crescer o diâmetro
     quebraria o alinhamento da grade inteira */
  box-shadow:0 0 0 clamp(2px, .38vw, 4px) rgba(242,101,56,.2);
}

/* ---------- entrada ----------
   Os pontos acendem em cascata, na ordem em que estão. O atraso sai
   do --i que a marcação carrega: 312 regras de delay no CSS seriam
   ilegíveis, e no JS seria um laço mexendo em 312 elementos.
   Assim o cálculo é uma conta só, feita pelo próprio navegador. */
.mg-cavernas.is-pronto > i{
  opacity:0;
  transform:scale(.35);
  animation:mg-cav-entra .55s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(var(--i) * 3.2ms);
}
@keyframes mg-cav-entra{
  to{opacity:1;transform:none}
}

/* as abertas chegam DEPOIS de todas as outras: é o gesto da seção —
   primeiro o tamanho do parque, depois o que se pode ver dele */
.mg-cavernas.is-pronto > i.is-aberta{
  animation-delay:calc(1120ms + var(--i) * 1.4ms);
}

/* ---------- legenda ---------- */
ul.mg-cavernas__legenda{
  display:flex;
  flex-wrap:wrap;
  gap:10px clamp(20px, 3vw, 38px);
  margin:clamp(22px, 2.6vw, 32px) 0 0;
  padding:0;
  list-style:none;
}
.mg-cavernas__legenda li{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--mg-font);
  font-size:.75rem;
  font-weight:400;
  font-style:normal;
  letter-spacing:.02em;
  color:var(--c-label);
}
.mg-cavernas__legenda i{
  flex:0 0 auto;
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(47,79,62,.16);
}
.mg-cavernas__legenda i.is-aberta{
  background:var(--mg-laranja);
  box-shadow:0 0 0 2px rgba(242,101,56,.2);
}


@media (prefers-reduced-motion:reduce){
  .mg-cavernas.is-pronto > i{animation:none;opacity:1;transform:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fca6732 *//* 264 · Experiências · tira de fotos */

/* Faixa de fotos que anda sozinha, vazada dos dois lados até a borda.
   Sem texto, sem link: é ambiente, não catálogo.
   Mesmo componente do Glamping (93), da Gastronomia (131) e do Spa
   (179), em arquivo próprio pra cada página poder ajustar largura e
   velocidade sem mexer nas outras.
   Quem escreve o --tira-out é o JS, MEDINDO a distância do bloco até
   a borda — 100vw conta a barra de rolagem e uma conta fixa com 1280
   não serve abaixo dessa largura.
   NO PAINEL: seção normal, na grade, com Estouro: oculto. */
.mg-tira{
  --tira-out:0px;
  margin:0 calc(var(--tira-out) * -1);
}
.mg-tira__faixa{width:100%;overflow:hidden}

/* flex-start é o ponto todo: as fotos têm alturas diferentes e ficam
   COLADAS AO TOPO, com a base irregular. É isso que dá o ar de tira
   de contato em vez de grade. */
.mg-tira__trilho{
  display:flex;
  align-items:flex-start;
  gap:clamp(12px, 1.4vw, 22px);
  width:max-content;
  will-change:transform;
}

/* largura fixa, altura pela proporção de cada foto (--tira-ar no
   HTML). Mesma largura pra todas = alturas diferentes = base solta. */
/* ~4 fotos por tela em qualquer largura: 23vw mais o vão fecha em
   quatro a 1440, 1920 e 2560. A altura vem da proporção de cada foto,
   então largura maior = foto maior nos dois sentidos. */
.mg-tira__item{
  flex:0 0 auto;
  width:clamp(240px, 23vw, 540px);
  margin:0;
  aspect-ratio:var(--tira-ar, 3/2);
  overflow:hidden;
  background:rgba(47,79,62,.06);   /* enquanto a foto carrega */
}
.mg-tira__item > i{
  display:block;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}

/* mesma assinatura das outras fotos do site */
.mg-tira__item{position:relative}
.mg-tira__item::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(28,66,48,.10);
  pointer-events:none;
}

@media (max-width:767px){
  .mg-tira__item{width:clamp(190px, 55vw, 280px)}
  .mg-tira__trilho{gap:10px}
}

@media (prefers-reduced-motion:reduce){
  .mg-tira__trilho{transform:none !important}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a7b4e82 *//* 267 · Experiências · como funciona · headline */

/* "A gente ajuda" 6,60em · "a montar o dia." 7,05 + 1,15 de recuo
   = 8,20. Vale a maior, mais folga.
   Trocou o texto, meça de novo. */
.mg-d3-title{--d3-div:8.7}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d39b3f4 *//* 271 · Experiências · break final */

/* Fechamento da página, mesmo bloco do break final da home (65), do
   Glamping (102), da Gastronomia (142), do Spa (186) e de
   Acomodações (232). 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 */