.elementor-18 .elementor-element.elementor-element-ec3355b{--display:flex;}.elementor-18 .elementor-element.elementor-element-7d62133{--display:flex;}.elementor-18 .elementor-element.elementor-element-c01f25f{--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-18 .elementor-element.elementor-element-c01f25f:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-c01f25f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-18 .elementor-element.elementor-element-2887770{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-18 .elementor-element.elementor-element-6db898e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-5a47b3c > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-d50717c{--display:flex;--gap:00px 00px;--row-gap:00px;--column-gap:00px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-18 .elementor-element.elementor-element-493d145 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-b51f92d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-06abb91 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-9c8bfad{--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-18 .elementor-element.elementor-element-9c8bfad:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-9c8bfad > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E9E1D6;}.elementor-18 .elementor-element.elementor-element-6071c12{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:96px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;}.elementor-18 .elementor-element.elementor-element-6071c12:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-6071c12 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-18 .elementor-element.elementor-element-86a145f{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-18 .elementor-element.elementor-element-ab85b8c{--display:flex;}.elementor-18 .elementor-element.elementor-element-ab85b8c:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-ab85b8c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-18 .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:128px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;}.elementor-18 .elementor-element.elementor-element-ddceb37:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-ddceb37 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-18 .elementor-element.elementor-element-8113962{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-18 .elementor-element.elementor-element-5e2f343 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-c715b66 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-18 .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-18 .elementor-element.elementor-element-de1810c > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-0f329c4{--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:128px;--padding-left:32px;--padding-right:32px;}.elementor-18 .elementor-element.elementor-element-0f329c4:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-0f329c4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-837f911 );}.elementor-18 .elementor-element.elementor-element-aa32295{--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-18 .elementor-element.elementor-element-5e03751{--display:flex;}.elementor-18 .elementor-element.elementor-element-cb3b60e{--display:flex;--justify-content:center;}.elementor-18 .elementor-element.elementor-element-2f77ac4{--display:flex;--gap:00px 00px;--row-gap:00px;--column-gap:00px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-18 .elementor-element.elementor-element-4fe6915{--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:128px;--padding-bottom:160px;--padding-left:32px;--padding-right:32px;}.elementor-18 .elementor-element.elementor-element-4fe6915:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-4fe6915 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-18 .elementor-element.elementor-element-e04bd12{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-18 .elementor-element.elementor-element-2fc0ef6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-140178c{--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-18 .elementor-element.elementor-element-4dc52f9 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-cccf35f > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-dcedddb > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-5b251a3 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-7918ce9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-9f4506d{--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-18 .elementor-element.elementor-element-9f4506d:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-9f4506d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-18 .elementor-element.elementor-element-59deaa1{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:96px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;}.elementor-18 .elementor-element.elementor-element-59deaa1:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-59deaa1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-aba32a1 );}.elementor-18 .elementor-element.elementor-element-0811158{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-18 .elementor-element.elementor-element-44ab4a6{--display:flex;}.elementor-18 .elementor-element.elementor-element-0f97832{--display:flex;}.elementor-18 .elementor-element.elementor-element-0f97832:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-0f97832 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-d4887a5 );}.elementor-18 .elementor-element.elementor-element-4a6316a{--display:flex;}@media(min-width:768px){.elementor-18 .elementor-element.elementor-element-8113962{--width:54%;}.elementor-18 .elementor-element.elementor-element-140178c{--width:54%;}}@media(max-width:1024px){.elementor-18 .elementor-element.elementor-element-c01f25f{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-18 .elementor-element.elementor-element-ddceb37{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-18 .elementor-element.elementor-element-0f329c4{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-18 .elementor-element.elementor-element-4fe6915{--gap:64px 64px;--row-gap:64px;--column-gap:64px;}}@media(max-width:767px){.elementor-18 .elementor-element.elementor-element-c01f25f{--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:64px;--padding-bottom:32px;--padding-left:20px;--padding-right:20px;}.elementor-18 .elementor-element.elementor-element-493d145.elementor-element{--order:99999 /* order end hack */;}.elementor-18 .elementor-element.elementor-element-9c8bfad{--padding-top:32px;--padding-bottom:32px;--padding-left:20px;--padding-right:20px;}.elementor-18 .elementor-element.elementor-element-6071c12{--padding-top:32px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-18 .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-18 .elementor-element.elementor-element-de1810c.elementor-element{--order:99999 /* order end hack */;}.elementor-18 .elementor-element.elementor-element-0f329c4{--gap:32px 32px;--row-gap:32px;--column-gap:32px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-18 .elementor-element.elementor-element-4fe6915{--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-18 .elementor-element.elementor-element-140178c.e-con{--order:-99999 /* order start hack */;}.elementor-18 .elementor-element.elementor-element-9f4506d{--padding-top:32px;--padding-bottom:32px;--padding-left:20px;--padding-right:20px;}.elementor-18 .elementor-element.elementor-element-59deaa1{--padding-top:32px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for html, class: .elementor-element-7a2360c *//* 22 · Home · hero */
/* container do Elementor que segura o widget: sem respiro nenhum */
.elementor-widget-html:has(.mg-hero){width:100%}

.mg-hero{
  
  --hero-scale:.93;
  /* menor entre a escala do título e o que cabe na grade com recuo */
  --hero-fs:calc(min(clamp(2.25rem, 5.4vw, 5.5rem), calc((min(100vw, var(--mg-grid) + 2 * var(--mg-pad-x)) - 2 * var(--mg-pad-x)) / 13.0)) * var(--hero-scale));
  --hero-indent:calc(var(--hero-fs) * 1.15);
  /* ══ DIVISORES REMEDIDOS (revisão de setembro) ══
     "A mata lá fora" virou "A floresta lá fora", e a primeira linha
     cresceu de 6,86em pra 7,98.
     · desktop: linha 2 = 11,30 + 1,15 de recuo = 12,45 → 13.0
     · celular: o recuo é .75em, então 11,30 + 0,75 = 12,05 → 13.5
       (o 12,05 teórico não bastava: a caixa da linha no celular é
       mais estreita que (100vw - 2·pad), por causa do respiro do
       próprio hero. Cheguei no 13.5 medindo, não calculando.)
     Os dois valores aparecem DUAS vezes cada no arquivo: na regra
     base e na media query. Mudou o texto, mude os quatro. */
  --hero-grain:.14;   /* grão: 0 desliga · .14 sutil · .3 aparente */
  /* Tinta UNIFORME sobre a foto — é ela que segura a leitura agora,
     não uma vinheta. Os dois valores quase iguais de propósito:
     diferença grande entre meio e canto vira mancha visível. */
  --hero-shade-center:.3;    /* tinta no meio da foto */
  --hero-shade-edge:.36;     /* tinta nos cantos — só um respiro */
  position:relative;
  background-color:var(--mg-mata-fundo);
  color:var(--mg-aurora);
}

/* palco — exatamente a altura da tela */
.mg-hero__stage{
  position:relative;
  height:100svh;
  min-height:640px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}

/* ---------- foto ---------- */
.mg-hero__media{
  position:absolute;
  top:-8%;
  bottom:-8%;
  left:0;
  right:0;
  z-index:0;
  will-change:transform;
}
.mg-hero__bg{
  position:absolute;
  inset:0;
  /* A FOTO SOBE. Por que não basta mexer no background-position:
     nesta proporção o `cover` corta pela LARGURA, não pela altura —
     a imagem já cabe inteira na vertical e não há folga pra deslocar.
     Ampliando a altura pra 114% da caixa cria-se a folga, e o
     `100%` embaixo encosta a imagem no pé: entra mais chão e tapete
     na faixa onde o título vive, que é área calma.
     --hero-sobe é o número pra mexer: 100% não sobe nada, 120% sobe
     bastante. Passar muito disso começa a comer as laterais. */
  --hero-sobe:118%;
  background-size:auto var(--hero-sobe);
  background-position:50% 100%;
  background-repeat:no-repeat;
  transform-origin:62% 46%;     /* o zoom de entrada fecha na porta com a mata */
}

/* Véu do hero — UNIFORME.
   A vinheta saiu: ela lia como mancha e, nesta foto, era a parte
   mais visível do véu.
   O trabalho pesado agora é da tinta chapada (o ::before, logo
   abaixo), que escurece tudo por igual. Os degradês só reforçam o
   topo e a base, e são suaves o bastante pra não virarem faixa.

   MEDIDO nesta foto: sem véu, a área onde o título vive tem p90 de
   171 — a cama clara está bem ali — o que dava 1,9:1. */
.mg-hero__veil{
  position:absolute;
  top:-8%;
  bottom:-8%;
  left:0;
  right:0;
  z-index:1;
  pointer-events:none;
  will-change:transform;
  background:
    /* topo — reforço leve pro header */
    linear-gradient(180deg,
      rgba(6,16,10,.42) 0%,
      rgba(6,16,10,.2) 10%,
      rgba(6,16,10,.06) 20%,
      rgba(6,16,10,0) 32%),
    /* base — curva longa, sem degrau. Sobe um pouco mais que o
       normal porque o kicker é texto de 14px e cai sobre o tapete
       claro do quarto, que é a região mais clara da metade de baixo. */
    linear-gradient(0deg,
      rgba(6,16,10,.62) 0%,
      rgba(6,16,10,.44) 14%,
      rgba(6,16,10,.24) 28%,
      rgba(6,16,10,.08) 42%,
      rgba(6,16,10,0) 58%);
}

/* tinta escura — leve no meio, fechada nos cantos */
.mg-hero__veil::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 100% 90% at 58% 42%,
    rgba(8,19,13,var(--hero-shade-center)) 30%,
    rgba(8,19,13,calc((var(--hero-shade-center) + var(--hero-shade-edge)) / 2)) 65%,
    rgba(8,19,13,var(--hero-shade-edge)) 100%);
}

.mg-hero__veil::after{
  content:'';
  position:absolute;
  inset:0;
  opacity:var(--hero-grain);
  mix-blend-mode:soft-light;
  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;
}

/* ---------- grade interna ---------- */
.mg-hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--mg-grid);
  margin:0 auto;
  min-height:100%;
  box-sizing:border-box;
  
  /* o 140 do piso NÃO é estético: é o que garante 160px entre a
     base do TÍTULO e o fim do hero em telas baixas. A conta não é
     direta porque o H1 vive entre os dois e come uns 22 a 27px —
     com 128 o título ficava a 150 numa tela de 700px de altura. */
  padding:calc(var(--mg-header-h) + 24px) 0 clamp(140px, 14vh, 168px);
  display:flex;
  align-items:flex-end;
}
.mg-hero__content{width:100%}

/* ---------- título visual ---------- */
.mg-hero__title{
  margin:0;
  font-family:var(--mg-font) !important;
  font-weight:400 !important;
  font-size:var(--hero-fs);
  line-height:1.02;
  letter-spacing:-.035em;
  color:var(--mg-aurora);
  /* sombra larga e fraca: ajuda a leitura sem contorno visível */
  text-shadow:0 2px 28px rgba(6,16,10,.3);
}
.mg-hero__title .mg-hero__line > span{white-space:nowrap}
.mg-hero__line--indent{padding-left:var(--hero-indent)}

/* ---------- linha pequena (H1) ---------- */
.mg-hero__kicker{
  margin:clamp(12px, 1.8vh, 22px) 0 0;   /* perto do título, lido como parte do bloco */
  padding-left:var(--hero-indent);
  font-family:var(--mg-font) !important;
  font-weight:400 !important;
  font-size:var(--mg-fs-small);
  line-height:1.45;
  letter-spacing:-.005em;
  text-transform:none;
  color:var(--mg-aurora);
}
.mg-hero__kicker > .mg-hero__line > span{opacity:.9;text-shadow:0 1px 16px rgba(6,16,10,.45)}

.mg-hero__line{
  display:block;
  overflow:hidden;
  padding-top:.16em;
  margin-top:-.16em;
  padding-bottom:.2em;
  margin-bottom:-.2em;
  padding-right:.12em;
  margin-right:-.12em;
}
.mg-hero__line > span{display:block}

html.mg-hero-pending .mg-hero__line > span{transform:translate3d(0,130%,0)}
html.mg-hero-pending .mg-hero__bg{transform:scale(1.12)}
html.mg-intro-on .mg-hero__bg{transform:scale(1.22)}

html.mg-intro-on .mg-header{opacity:0}

/* ---------- intro da folha ---------- */
.mg-intro{display:none}
html.mg-intro-on .mg-intro{
  display:grid;
  place-items:center;
  position:fixed;
  inset:0;
  z-index:10000;
  /* VERDE: a intro é a inversão da página, não a mesma superfície.
     Usa o token, não o hex — se a paleta mudar, ela acompanha. */
  background-color:var(--mg-mata);
  pointer-events:none;
}
.mg-intro svg{width:clamp(120px, 15vw, 210px);height:auto;overflow:visible}

/* A cortina sai INTEIRA pra cima — por isso o will-change. Sem
   contador, sem filete e sem zoom: a folha aparece, espera o
   carregamento, e a cortina sobe. */
html.mg-intro-on .mg-intro{will-change:transform}
/* folha em AREIA sobre o verde: a intro é a inversão da página.
   Continua sendo SVG de propósito — é o que permite a montagem peça
   por peça; num arquivo de imagem a folha só apareceria inteira. */
.mg-intro path{fill:var(--mg-creme)}
html.mg-intro-on .mg-intro path{opacity:0}

@media (max-width:1280px){
  .mg-hero__inner{padding-left:var(--mg-pad-x);padding-right:var(--mg-pad-x)}
}

@media (max-width:768px){
  /* recorte vertical próprio pro celular */
  .mg-hero__bg{
    background-image:url('https://mangarito.com.br/wp-content/uploads/2026/09/bg-hero-mobile-1080x1920-versao2.webp') !important;
    /* volta ao cover: a foto de celular é vertical e já preenche a
       moldura na altura. O --hero-sobe do desktop só faria ela perder
       as laterais sem subir nada. */
    background-size:cover;
    background-position:50% 50%;
  }
  
  .mg-hero{
    --hero-indent:calc(var(--hero-fs) * .75);
    --hero-fs:calc(min(2.25rem, calc((100vw - 2 * var(--mg-pad-x)) / 13.5)) * var(--hero-scale));
  }
  
  .mg-hero__kicker{
    padding-left:0;
    font-size:13px !important;
  }
  .mg-hero__kicker .mg-hero__line > span{white-space:nowrap;opacity:.82}
  /* bloco de texto mais pra cima, fora do rodapé da tela */
  .mg-hero__inner{padding-top:calc(var(--mg-header-h) + 16px);padding-bottom:clamp(112px, 19svh, 190px)}
  /* celular: mesma lógica, com a base um pouco mais alta — a tela é
     estreita e o bloco de texto ocupa uma fatia maior dela */
  .mg-hero__veil{
    background:
      linear-gradient(180deg,
        rgba(6,16,10,.44) 0%,
        rgba(6,16,10,.2) 10%,
        rgba(6,16,10,0) 28%),
      linear-gradient(0deg,
        rgba(6,16,10,.58) 0%,
        rgba(6,16,10,.38) 16%,
        rgba(6,16,10,.18) 32%,
        rgba(6,16,10,.05) 46%,
        rgba(6,16,10,0) 60%);
  }
  .mg-hero__veil::after{background-size:180px 180px}
}

/* celulares estreitos: linha pequena ainda numa linha só */
@media (max-width:359px){
  .mg-hero__kicker{font-size:12px !important}
}

/* telas baixas: 100svh fica apertado */
@media (max-height:680px) and (min-width:769px){
  .mg-hero__stage{height:auto;min-height:620px}
  .mg-hero{--hero-fs:calc(min(clamp(2.25rem, 4.6vw, 4.5rem), calc((100vw - 2 * var(--mg-pad-x)) / 13.0)) * var(--hero-scale))}
}

body.elementor-editor-active .mg-intro{display:none !important}
body.elementor-editor-active .mg-hero__line > span,
body.elementor-editor-active .mg-hero__bg{transform:none !important}

@media (prefers-reduced-motion:reduce){
  .mg-hero__line > span,
  .mg-hero__bg,
  .mg-hero__media{transform:none !important;transition:none !important}
}

/* ═══════════════════════════════════════════════
   DEIXAR QUEBRAR ABAIXO DE 360

   Medido: abaixo de 360px nem o divisor resolve. O título ainda
   passa 9px em 320, e o KICKER passa 27 — ele tem tamanho próprio,
   não acompanha o divisor do título, e "Glamping no PETAR, em
   Iporanga (SP)" simplesmente não cabe numa linha nessa largura.

   Baixar mais o tamanho deixaria o hero minúsculo em toda a faixa
   de celular por causa de uma tela que quase ninguém usa. Então, só
   abaixo de 360, as duas linhas passam a poder quebrar.

   Isto NÃO é novo desta revisão: o hero já vazava a 390 antes de o
   texto mudar. A auditoria não pegou porque testava só os títulos de
   seção, que usam .mg-d3-title — o hero usa .mg-hero__line.
   ═══════════════════════════════════════════════ */
/* O KICKER quebra antes do título: ele tem tamanho próprio, não
   acompanha o divisor, e "Glamping no PETAR, em Iporanga (SP)" já
   passa da linha em 361px. Medido: some a partir de 380. */
@media (max-width:380px){
  .mg-hero__kicker .mg-hero__line > span{white-space:normal}
}

/* O TÍTULO só abaixo de 360, onde nem o divisor resolve. O recuo da
   segunda linha sai junto: com o texto quebrando sozinho, um recuo
   fixo desalinharia o bloco. */
@media (max-width:360px){
  .mg-hero__title .mg-hero__line > span{white-space:normal}
  .mg-hero__title .mg-hero__line--indent{padding-left:0}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-127dad7 *//* 72 · Home · seção do manifesto (fundo areia) */

/* Bloco de cor cheia entre o hero e o conceito. O que faz ele
   funcionar depois de um hero escuro não é o contraste de claro e
   escuro — é TEXTURA contra SUPERFÍCIE LISA: a foto do hero tem
   grão, degradê e ruído, e aqui não tem nada.
   NO PAINEL: seção em largura total, sem container, padding 0,
   Estouro: oculto. */
/* FUNDO AREIA. Esta seção já foi verde e voltou: quatro momentos
   escuros seguidos pesavam demais na home. O que ela tem de bom não
   era a cor — era o texto grande com os pilares destacados e a foto
   que aparece no hover. Isso tudo continua; só o tom mudou. */
.mg-verde{
  position:relative;
  /* ══ ALTURA LIVRE, NÃO 100vh ══
     Revisão do cliente: sobrava espaço embaixo. A causa é que a
     seção nasceu VERDE e ocupando a tela inteira — quando o fundo
     era escuro, a altura cheia era o próprio efeito.
     Virando areia, ela passou a ser uma seção como as outras, e
     100vh só deixava um vazio que não diz nada. Agora a altura vem
     do conteúdo. */
  background:var(--mg-creme);
  display:grid;
  place-items:center;
  /* ASSIMÉTRICO de propósito: 160 em cima e 96 embaixo.
     Esta seção fica entre o hero, que é uma massa escura de tela
     cheia, e a seção seguinte, que traz o próprio respiro. Com
     padding igual dos dois lados, ela lia colada no hero e solta
     embaixo — o olho mede o vão contra o que está em volta, não
     contra a própria caixa. */
  /* LATERAL ZERO de propósito: o respiro dos lados vem do
     container interno, não daqui. Com os 32px na seção, o texto
     ganhava 64px de largura e a frase caía de QUATRO linhas pra
     três — mudava a composição que estava aprovada.
     O vertical é o novo: 160 em cima, 96 embaixo. */
  padding:160px 0 96px;
  overflow:hidden;
  box-sizing:border-box;
}
/* o @supports que dava 100svh saiu junto: ele existia só pra
   corrigir a barra do navegador no celular quando a seção ocupava a
   tela inteira. Sem altura fixa, não há o que corrigir. */

.mg-verde__in{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:0 var(--mg-pad-x);   /* é daqui que vem o respiro lateral */
  box-sizing:border-box;
  text-align:center;
}

.mg-verde__eyebrow{
  margin:0 0 clamp(26px, 3vw, 44px);
  font-family:var(--mg-font);
  font-size:11px;
  font-weight:400;
  letter-spacing:.18em;
  line-height:1;
  text-transform:uppercase;
  color:var(--mg-terra);
  opacity:1;
}

.mg-verde__p{
  margin:0;
  font-family:var(--mg-font);
  font-size:clamp(1.75rem, 4.4vw, 4rem);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.032em;
  color:var(--c-head);
  text-wrap:balance;
}

/* ---- palavras destacadas ----
   Em repouso são só peso. Quando o ponteiro entra na frase, TUDO
   apaga e só a palavra sob o cursor acende com filete — é a
   interação que revela, não o estado parado. */
/* cada destaque é LINK pra página do pilar. O reset cobre os quatro
   estados: o Elementor pinta button e link com a cor de acento do
   kit no hover, focus e active, e aí o rosa aparece só na interação. */
a.mg-verde__hl,
a.mg-verde__hl:link,
a.mg-verde__hl:visited,
a.mg-verde__hl:active,
a.mg-verde__hl:hover{
  color:inherit !important;
  background:transparent !important;
  text-decoration:none !important;
  border:0 !important;
  box-shadow:none !important;
}

.mg-verde__hl{
  font-weight:600;
  position:relative;
  cursor:pointer;
  transition:opacity .45s var(--mg-ease);
}
.mg-verde__hl:focus{outline:none}
.mg-verde__hl:focus-visible{outline:1px solid currentColor;outline-offset:6px}
.mg-verde__hl::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-.08em;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .5s var(--mg-ease);
}
.mg-verde__p.is-ativo{color:rgba(47,79,62,.3)}
.mg-verde__p.is-ativo .mg-verde__hl{opacity:.34}

/* !important aqui NÃO é força bruta: o reset do rosa do Elementor,
   logo acima, precisa de color:inherit !important pra vencer o kit —
   e isso também venceria este realce. Os dois são !important, e
   ganha o mais específico, que é este. */
.mg-verde__p.is-ativo .mg-verde__hl.is-on{
  opacity:1;
  color:var(--c-head) !important;
}
.mg-verde__p.is-ativo .mg-verde__hl.is-on::after{transform:scaleX(1)}
.mg-verde__p{transition:color .45s var(--mg-ease)}

/* ---- foto que segue o cursor (desktop) ---- */
.mg-verde__flut{
  position:fixed;          /* fixed, não absolute: o quadro segue o
                              ponteiro na tela, não dentro da seção */
  top:0; left:0;
  width:clamp(200px, 19vw, 300px);
  aspect-ratio:3/4;
  /* z-index 1: a foto fica POR BAIXO do texto. A palavra acesa passa
     na frente dela — é ela que tem que ser lida, não a imagem. */
  z-index:1;
  pointer-events:none;
  /* opacidade e escala são escritas pelo JS quadro a quadro, não por
     transition: as duas precisam andar junto com a posição, senão o
     quadro chega no lugar antes de aparecer e o movimento lê como
     dois eventos. */
  opacity:0;
  transform:translate3d(-9999px,-9999px,0);
  will-change:transform, opacity;
}
.mg-verde__flut > i{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:50% 50%;
  opacity:0;
  /* troca entre fotos: longa de propósito. Em .35s a substituição
     aparecia como corte. */
  transition:opacity .7s var(--mg-ease);
}
.mg-verde__flut > i.is-on{opacity:1}

/* ---- fotos espalhadas (celular) ---- */
.mg-verde__espalha{display:none}

@media (max-width:900px){
  .mg-verde__flut{display:none}

  /* ══ FOTOS NOS CANTOS, SEM INVADIR O TEXTO ══
     As fotos voltaram pros cantos, mas agora com zonas reservadas:
     duas em CIMA do texto e duas EMBAIXO do CTA. Nenhuma encosta na
     frase.

     Antes elas ficavam soltas nos cantos da seção inteira, por baixo
     do texto. Isso só funcionava com a seção em 100vh, quando sobrava
     canto livre. Com a altura vindo do conteúdo, a frase ocupava a
     seção toda e as fotos caíam em cima das palavras.

     ══ POR QUE TUDO EM vw ══
     As fotos têm largura em vw, e a altura delas sai do aspect-ratio
     — logo, também é proporcional à largura da tela. As zonas de
     cima e de baixo precisam crescer NA MESMA PROPORÇÃO, senão numa
     tela mais larga a foto fica maior que a zona e invade o texto.
     Padding em vw acompanha exatamente.

     A conta de cada zona está ao lado da regra. */
  .mg-verde__espalha{
    display:block;
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
  }
  .mg-verde__espalha > i{
    position:absolute;
    background-size:cover;
    background-position:50% 50%;
    display:block;
    /* estado de chegada. Quem esconde é a classe .is-armada, posta
       pelo JS — assim, sem JS ou com menos-movimento, as quatro
       aparecem normalmente em vez de ficarem invisíveis. */
    opacity:1;
    transform:none;
  }
  .mg-verde__espalha.is-armada > i{
    opacity:0;
    transform:translateY(22px) scale(.94);
  }
  .mg-verde__espalha.is-armada > i.is-on{
    opacity:1;
    transform:none;
    transition:opacity .9s var(--mg-ease), transform 1.1s var(--mg-ease);
  }

  /* ---- zona de CIMA ----
     1 · 26vw de largura, 3/4 → 34,7vw de altura, a partir de 4vw
     2 · 21vw de largura, 4/3 → 15,8vw de altura, a partir de 13vw
     Mais baixa das duas termina em 38,7vw. */
  .mg-verde__espalha > i:nth-child(1){left:5%;  top:4vw;  width:26vw; aspect-ratio:3/4}
  .mg-verde__espalha > i:nth-child(2){right:6%; top:13vw; width:21vw; aspect-ratio:4/3}

  /* ---- zona de BAIXO ----
     3 · 22vw, 4/3 → 16,5vw de altura, a partir de 13vw da base
     4 · 26vw, 3/4 → 34,7vw de altura, a partir de 4vw da base
     Mais alta das duas termina em 38,7vw da base. */
  .mg-verde__espalha > i:nth-child(3){left:6%;  bottom:13vw; width:22vw; aspect-ratio:4/3}
  .mg-verde__espalha > i:nth-child(4){right:5%; bottom:4vw;  width:26vw; aspect-ratio:3/4}

  .mg-verde__hl{font-weight:600}
}

.mg-verde__cta{margin:clamp(40px, 4.6vw, 66px) 0 0}

/* no claro o .mg-link do global já serve: verde-mata sobre areia.
   A regra que forçava aurora aqui saiu junto com o fundo verde. */

@media (max-width:767px){
  /* ══ AS ZONAS DAS FOTOS ══
     38,7vw é onde termina a foto mais funda de cada zona. Mais 6vw
     de folga até o texto começar (em cima) ou depois do CTA terminar
     (embaixo) = 44,7vw. É esse o padding.

     Em 390px isso dá cerca de 175px em cima e embaixo. A seção fica
     mais alta que a versão sem fotos — é o custo de ter as quatro
     espalhadas sem encostar em nada. */
  .mg-verde{padding:44.7vw 0 44.7vw}
  .mg-verde__eyebrow{letter-spacing:.16em}
}

body.elementor-editor-active .mg-verde__p{color:var(--c-head) !important}
body.elementor-editor-active .mg-verde__hl{opacity:1 !important}

@media (prefers-reduced-motion:reduce){
  .mg-verde__flut{display:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6db898e *//* 24 · Home · conceito · título */
.mg-d2-title{
  --d2-air-top:160px;
  --d2-air:160px;
  container-type:inline-size;
  width:100%;
  box-sizing:border-box;
  padding-top:var(--d2-air-top);
  padding-bottom:var(--d2-air);
}
@media (max-width:1024px){
  .mg-d2-title{--d2-air-top:120px;--d2-air:120px}
}

.mg-d2-title__h{
  /* --d2-scale: 1 = maior tamanho que cabe na coluna · .78 = atual */
  --d2-scale:.78;
  --d2-fs:calc(min(2.75rem, calc(100cqw / 15.6)) * var(--d2-scale));
  
  margin:.14em 0 .16em;
  font-family:'Sora',sans-serif !important;
  font-weight:400 !important;
  font-size:var(--d2-fs);
  line-height:1.12;
  letter-spacing:-.03em;
  text-transform:none;
  color:var(--c-head, #2F4F3E);
}

.mg-d2-title__line > span{
  display:block;
  white-space:nowrap;
}
.mg-d2-title__line--indent{padding-left:calc(var(--d2-fs) * 1.15)}

/* editor: nada escondido */
body.elementor-editor-active .mg-d2-title__line > span{transform:none !important}

@media (max-width:767px){
  .mg-d2-title{--d2-air-top:0px;--d2-air:40px}
  
  .mg-d2-title__h{--d2-fs:min(1.625rem, calc(100cqw / 15.6))}
  .mg-d2-title__line--indent{padding-left:calc(var(--d2-fs) * .75)}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b51f92d *//* 28 · Home · conceito · texto */
.mg-d2-support{
  --d2-air:160px;
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:var(--d2-air) 0 0;
}
@media (max-width:1024px){
  .mg-d2-support{--d2-air:120px}
}

.mg-d2-support__p{
  margin:0;
  padding:0;
  max-width:36ch;
  font-family:'Sora',sans-serif !important;
  font-size:17px;
  font-weight:400;
  line-height:1.7;
  color:var(--c-text, #3D3D3D);
}

@media (max-width:767px){
  .mg-d2-support{--d2-air:40px}
  .mg-d2-support__p{
    max-width:none;
    font-size:16px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e9ee24c *//* 32 · Home · acomodações · manifesto */
.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:'Sora',sans-serif !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;
}

.mg-manifesto__line{display:block}
.mg-manifesto__line > span{display:block;opacity:.16}

/* editor: tudo aceso */
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-9c3f51e *//* 34 · Home · acomodações · carrossel */
.mg-rail{
  --rail-vw:100vw;                                   /* reserva; o JS mede */
  --rail-out:max(0px, calc((var(--rail-vw) - 1280px) / 2));
  --rail-card:min(56vw, 760px);                      /* largura do ativo */
  --rail-gap:clamp(16px, 2vw, 32px);
  --rail-side:calc((var(--rail-vw) - var(--rail-card)) / 2);   /* centraliza o ativo */
  width:auto;
  margin:0 calc(var(--rail-out) * -1);
  overflow:hidden;   /* a janela é aqui; a pista é que anda */
}

.mg-rail__track{
  display:flex;
  align-items:center;
  gap:var(--rail-gap);
  padding:0 var(--rail-side);
  
  width:max-content;
  will-change:transform;
  cursor:grab;
  -webkit-user-select:none;
  user-select:none;
}
.mg-rail__track{scrollbar-width:none}
.mg-rail__track::-webkit-scrollbar{display:none}
.mg-rail__track:focus{outline:none}
.mg-rail__track:focus-visible{outline:1px solid var(--c-head, #2F4F3E);outline-offset:8px}
.mg-rail__track.is-dragging,
.mg-rail__track.is-dragging *{cursor:grabbing !important}

.mg-rail__track .mg-rail__item,
.mg-rail__track .mg-rail__item *{cursor:grab}

/* menos o CTA: ali é link, e link tem que parecer link */
.mg-rail__track a.mg-rail__more{cursor:pointer}
.mg-rail__track.is-dragging a.mg-rail__more{cursor:grabbing}

/* ---------- item ---------- */
.mg-rail__item{
  -webkit-user-drag:none;
  user-drag:none;
  flex:0 0 auto;
  width:var(--rail-card);
  display:block;
  color:inherit !important;
  text-decoration:none !important;
  background:transparent !important;
}

.mg-rail__shot{
  position:relative;
  display:block;
  aspect-ratio:3 / 2;
  overflow:hidden;
  background:rgba(47,79,62,.08);   /* enquanto a foto carrega */
  transform:scale(.9);
  
  transform-origin:50% 100%;
  transition:transform .7s cubic-bezier(.22,1,.36,1), filter .7s cubic-bezier(.22,1,.36,1);
  filter:brightness(.82) saturate(.92);
}
.mg-rail__item.is-active .mg-rail__shot{
  transform:scale(1);
  filter:none;
}

.mg-rail__img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
  /* 1.26 e não 1.12: a folga é (escala-1)/2 da altura, e a 1.12 dava
     30px numa moldura de 507 — o parallax desloca 60 e sobrava buraco
     embaixo. A 1.26 a folga vai a 66px. A foto tem 1600px de largura
     pra um cartão de 760, então a ampliação extra não custa nitidez. */
  transform:scale(1.26);
  will-change:transform;
  pointer-events:none;
}

/* clones do loop: invisíveis pra leitor de tela, iguais na tela */
.mg-rail__item.is-clone{pointer-events:auto}

/* texto só pra leitor de tela (a legenda visível é única, abaixo) */
.mg-rail__sr{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

/* ---------- texto do cartão ---------- */
.mg-rail__cap{
  display:block;
  max-width:46ch;
  margin-top:22px;
  font-family:'Sora',sans-serif;
  
  opacity:.22;
  
  font-size:.9em;
  padding-left:5%;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),
             font-size .7s cubic-bezier(.22,1,.36,1),
             padding-left .7s cubic-bezier(.22,1,.36,1);
}
.mg-rail__item.is-active .mg-rail__cap{opacity:1;font-size:1em;padding-left:0}

.mg-rail__desc,
.mg-rail__more{transition:opacity .45s cubic-bezier(.22,1,.36,1)}
.mg-rail__item:not(.is-active) .mg-rail__desc,
.mg-rail__item:not(.is-active) .mg-rail__more{opacity:0}

.mg-rail__head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 14px;
}
.mg-rail__name{
  font-size:18px;
  font-weight:400;
  line-height:1.35;
  color:var(--c-head, #2F4F3E);
}
.mg-rail__meta{
  font-size:13px;
  line-height:1.5;
  color:var(--c-label, #824837);
}
.mg-rail__desc{
  display:block;
  margin-top:10px;
  font-size:15px;
  font-weight:400;
  line-height:1.65;
  color:var(--c-text, #3D3D3D);
}
a.mg-rail__more,
a.mg-rail__more:link,
a.mg-rail__more:visited,
a.mg-rail__more:active{
  color:inherit !important;
  text-decoration:none !important;
}
.mg-rail__more{
  display:inline-block;
  margin-top:14px;
  padding-bottom:4px;
  font-size:14px;
  font-weight:500;
  color:var(--c-head, #2F4F3E);
  /* a linha nasce da esquerda no hover */
  background:linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition:background-size .55s cubic-bezier(.22,1,.36,1);
}

/* ---------- hover: só no cartão ativo ---------- */
.mg-rail__item.is-active:hover .mg-rail__img,
.mg-rail__item.is-active:focus-visible .mg-rail__img{
  transform:scale(1.34);  /* parte de 1.26 — mesmo respiro de antes */
}
.mg-rail__img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.mg-rail__item.is-active:hover .mg-rail__more,
.mg-rail__item.is-active:focus-visible .mg-rail__more{background-size:100% 1px}
/* cartão que não está ativo não responde ao hover */
.mg-rail__item:not(.is-active){pointer-events:none}

/* ---------- dica de arraste ---------- */
/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .mg-rail{--rail-card:min(72vw, 640px)}
}
@media (max-width:767px){
  
  
  /* fatia lateral = (76 − gap) / 2 … aqui: (108 − 14) / 2 ≈ 40px */
  .mg-rail{--rail-card:calc(var(--rail-vw, 100vw) - 108px);--rail-gap:14px}
  
  .mg-rail__cap{margin-top:16px;max-width:none}
  .mg-rail__item:not(.is-active) .mg-rail__cap{opacity:0}
  .mg-rail__name{font-size:16px}
  .mg-rail__desc{font-size:14px;margin-top:8px}
  /* no celular não existe hover: o cartão ativo é clicável direto */
  .mg-rail__item:not(.is-active){pointer-events:auto}
}

@media (prefers-reduced-motion:reduce){
  .mg-rail__img{transform:none}
  .mg-rail__shot{transition:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1176f75 *//* 63 · Home · break (o do meio) */

/* duas classes no seletor de propósito: o componente .mg-break vive
   no CSS global, que o Elementor imprime DEPOIS do CSS dos widgets.
   Com uma classe só, a altura padrão dele ganharia desta aqui. */
.mg-photo.mg-break--meio{height:clamp(560px, 105vh, 1600px)}

/* svh: no celular a barra de endereço some ao rolar e o vh cresce no
   meio do movimento, o que faz a abertura da foto tremer */
@supports (height:1svh){
  .mg-photo.mg-break--meio{height:clamp(560px, 105svh, 1600px)}
}

@media (max-width:767px){
  .mg-photo.mg-break--meio{height:92vh;min-height:460px}
  @supports (height:1svh){
    .mg-photo.mg-break--meio{height:92svh}
  }
}

/* ── texto: canto direito, na altura da piscina ──
   O foco da foto está nos vasos, embaixo no centro. Ali o texto
   disputa com a parte mais nítida do quadro; deslocado pra direita e
   pra altura da água, ele cai numa zona mais calma. */
.mg-break--meio .mg-break__cap{
  position:absolute;
  inset:0;
  display:block;
  padding:0;
}
.mg-break--meio .mg-break__bloco{
  position:absolute;
  top:calc(56% + 80px);
  left:0; right:0;
  width:100%;
  max-width:calc(1280px + 64px);
  margin:0 auto;
  padding:0 32px;
  box-sizing:border-box;
  display:flex;
  justify-content:flex-end;   /* metade direita da grade */
  will-change:filter;         /* o blur é animado pelo JS */
}
@media (min-width:1345px){ .mg-break--meio .mg-break__bloco{padding:0} }

.mg-break--meio .mg-break__line{
  width:auto;                 /* o global manda 100%, e aí ela ocupa o bloco
                                 inteiro e o justify-content não empurra nada */
  max-width:none;             /* uma linha só: sem largura que force quebra */
  margin:0 30px 0 0;          /* afasta da margem direita da grade */
  padding:.14em .1em .18em 0;
  text-align:left;
}
/* pequeno de propósito — é legenda, não manchete */
.mg-break--meio .mg-break__line > span{
  font-size:clamp(1rem, 1.3vw, 1.25rem);
  line-height:1.2;
  letter-spacing:-.02em;
  white-space:nowrap;
}

@media (max-width:767px){
  .mg-break--meio .mg-break__line{margin:0}
  .mg-break--meio .mg-break__bloco{
    top:auto; bottom:32px;
    justify-content:flex-start;   /* na tela estreita não há "metade" */
    padding:0 20px;
  }
  .mg-break--meio .mg-break__line > span{font-size:1rem}
}/* 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-de1810c *//* 41 · Home · gastronomia · mosaico */
.mg-mosaico{
  --gap:clamp(16px, 2vw, 28px);
  --desce:clamp(28px, 4.4vw, 64px);   /* quanto a 2ª cai */
  --sobe:clamp(16px, 2.6vw, 40px);    /* quanto a 3ª sobe */
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:var(--gap);
}

/* posição e proporção de cada uma */
.mg-mosaico__f1{--photo-ar:3/4;grid-column:1 / span 4;grid-row:1}
.mg-mosaico__f2{--photo-ar:3/4;grid-column:5 / span 2;grid-row:1;margin-top:var(--desce)}
.mg-mosaico__f3{--photo-ar:1/1;grid-column:1 / span 2;grid-row:2;margin-top:calc(var(--sobe) * -1)}
.mg-mosaico__f4{--photo-ar:3/2;grid-column:3 / span 4;grid-row:2}

@media (max-width:1024px){
  .mg-mosaico{--desce:32px;--sobe:20px}
}

@media (max-width:767px){
  .mg-mosaico{
    grid-template-columns:repeat(2, minmax(0,1fr));
    --desce:0px; --sobe:0px;
  }
  .mg-mosaico__f1{--photo-ar:3/2;grid-column:1 / span 2;grid-row:1;margin-top:0}
  .mg-mosaico__f2{--photo-ar:3/4;grid-column:1;grid-row:2;margin-top:0}
  .mg-mosaico__f3{--photo-ar:3/4;grid-column:2;grid-row:2;margin-top:0}
  .mg-mosaico__f4{--photo-ar:3/2;grid-column:1 / span 2;grid-row:3;margin-top:0}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ebe0dbc *//* 54 · Home · PETAR · lista */

.mg-lista__ul{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--c-line);
}
.mg-lista__ul li{border-bottom:1px solid var(--c-line)}

/* LAYOUT numa regra SEM pseudo-classe, de propósito.
   Agrupar com :link/:visited/:active aumenta a especificidade da
   regra inteira, e aí o @media do mobile (que não tem pseudo-classe)
   perde e o layout do desktop continua valendo em qualquer largura.
   Cor e sublinhado ficam no grupo abaixo, onde precisam mesmo estar. */
.mg-lista__ul a{
  display:grid;
  /* número · nome · descrição. O número tem largura fixa pra que os
     quatro nomes comecem na mesma margem, com 01 ou 04. */
  grid-template-columns:2.75rem minmax(0,7fr) minmax(0,5fr);
  align-items:center;
  column-gap:clamp(20px, 3vw, 64px);
  padding:clamp(20px, 2.6vw, 34px) 0;
  transition:transform .8s var(--mg-ease), opacity .5s ease;
}
/* todos os estados: senão o tema injeta a cor dele em algum deles */
.mg-lista__ul a,
.mg-lista__ul a:link,
.mg-lista__ul a:visited,
.mg-lista__ul a:active{
  text-decoration:none !important;
  color:var(--c-head) !important;
}

.mg-lista__n{
  font-family:var(--mg-font);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--c-label);
  opacity:.55;
  align-self:start;
  padding-top:.5em;          /* acompanha a primeira linha do nome */
  transition:opacity .5s ease;
}
.mg-lista__nm{
  font-family:var(--mg-font);
  font-weight:400;
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  line-height:1;
  letter-spacing:-.04em;
}
.mg-lista__de{
  font-family:var(--mg-font);
  font-size:var(--mg-fs-small, .9375rem);
  line-height:1.6;
  max-width:34ch;
  color:var(--c-text);
  transition:opacity .5s ease;
}

/* ao entrar na lista, só o item sob o cursor fica aceso */
.mg-lista__ul:hover a{opacity:.3}
.mg-lista__ul a:hover,
.mg-lista__ul a:focus-visible{opacity:1;transform:translateX(clamp(12px, 2vw, 32px))}
.mg-lista__ul a:hover .mg-lista__n,
.mg-lista__ul a:focus-visible .mg-lista__n{opacity:1}
.mg-lista__ul a:focus{outline:none}
.mg-lista__ul a:focus-visible{outline:1px solid currentColor;outline-offset:8px}

/* a foto que segue o cursor. position:fixed de propósito: ela é
   posicionada contra a tela, não contra a seção — por isso o JS usa
   clientX/clientY direto, sem descontar rolagem. */
.mg-lista__flut{
  position:fixed;
  left:0; top:0;
  z-index:40;                /* abaixo do header */
  pointer-events:none;
  width:clamp(220px, 20vw, 300px);
  aspect-ratio:4/5;
  overflow:hidden;
  opacity:0;
  clip-path:inset(100% 0 0 0);
  transition:opacity .35s ease, clip-path .8s var(--mg-ease);
}
.mg-lista__flut.is-on{opacity:1;clip-path:inset(0 0 0 0)}
.mg-lista__flut i{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.12);
  transition:opacity .45s ease, transform 1.2s var(--mg-ease);
}
.mg-lista__flut i.is-on{opacity:1;transform:scale(1)}

.mg-lista__mini,
.mg-lista__flut i{
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
  /* placa de espera, enquanto a foto não pintou. No claro é verde a
     8%; sobre fundo verde ela inverte — ver o bloco mg-on-dark no
     fim deste arquivo. */
  background-color:rgba(47,79,62,.08);
}
.mg-lista__mini{display:none}

/* mobile: sem hover. A miniatura entra na linha e tudo fica aceso. */
@media (max-width:900px){
  .mg-lista__n{display:none}   /* na linha estreita, número e miniatura brigam */
  .mg-lista__ul a{
    grid-template-columns:88px minmax(0,1fr);
    grid-template-areas:"mini nome" "mini desc";
    column-gap:18px;
    row-gap:6px;
    transform:none !important;
    opacity:1 !important;
  }
  /* position:relative NÃO é opcional: o véu do global é um ::after
     com position:absolute, e sem ancoragem aqui ele sobe até o
     primeiro ancestral posicionado e pinta o bloco inteiro de verde.
     Só aparecia no celular porque no desktop a miniatura é none. */
  .mg-lista__mini{
    display:block;
    position:relative;
    grid-area:mini;
    width:88px;
    aspect-ratio:1;
    overflow:hidden;
  }
  .mg-lista__nm{grid-area:nome;font-size:clamp(1.5rem, 7vw, 2rem)}
  .mg-lista__de{grid-area:desc;max-width:none;font-size:.8125rem}
  .mg-lista__flut{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mg-lista__ul a,
  .mg-lista__de,
  .mg-lista__flut,
  .mg-lista__flut i{transition:none}
}

/* ---------- sobre fundo verde ----------
   O que o mg-on-dark do global já resolve sozinho: cor do texto, do
   número, do nome do item e dos filetes.
   O que sobra é o que tem COR FIXA no arquivo — a placa de espera da
   foto flutuante, que estava em verde 8% e sumiria sobre verde. */
.mg-lista.mg-on-dark .mg-lista__flut{
  background-color:rgba(253,228,218,.07);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2fc0ef6 *//* 44 · Home · spa · fotos */

/* os seletores levam .mg-spa__media na frente de propósito: sem isso
   empatam em força com a .mg-photo do global e quem ganha passa a ser
   a ordem em que o Elementor imprime os CSS, que muda de página */
.mg-spa__media{
  position:relative;
  width:100%;
}

.mg-spa__media .mg-spa__f1{--photo-ar:4/3}

.mg-spa__media .mg-spa__f2{
  --photo-ar:3/4;
  position:absolute;
  right:clamp(-56px, -3.4vw, -28px);
  bottom:clamp(-72px, -5vw, -40px);
  width:clamp(180px, 28%, 300px);
  z-index:2;
}

@media (max-width:1024px){
  .mg-spa__media .mg-spa__f2{
    width:clamp(150px, 30%, 220px);
    right:-20px;
    bottom:-32px;
  }
}

@media (max-width:767px){
  .mg-spa__media .mg-spa__f1{--photo-ar:3/2}
  .mg-spa__media .mg-spa__f2{display:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cccf35f *//* 46 · Home · spa · headline */
.mg-d3-title{--d3-div:10.6;--d3-div-m:10.2}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-336f8f2 *//* 60 · Home · depoimentos · manifesto */

/* menor que o de acomodações de propósito: dois manifestos do mesmo
   tamanho na mesma página leem como o mesmo bloco repetido. O divisor
   maior (52 contra 42) é o que encolhe. */
.mg-manifesto--curto .mg-manifesto__p{
  --mf-fs:clamp(1.125rem, calc(100cqw / 52), 1.5rem);
  max-width:38ch;
}

@media (max-width:767px){
  .mg-manifesto--curto .mg-manifesto__p{
    --mf-fs:clamp(1rem, calc(100cqw / 24), 1.25rem);
    max-width:none;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a1d1cc4 *//* 62 · Home · depoimentos · carrossel */

/* O bloco vive DENTRO do container de 1280 e estoura pros dois lados
   até a borda da tela. Quem escreve o --dep-out é o JS, MEDINDO a
   distância do bloco até a borda: 100vw conta a barra de rolagem e
   passaria uns 7px, e uma conta fixa com 1280 não serve abaixo dessa
   largura. O 0px aqui é o estado seguro: sem JS, fica na grade.
   NO PAINEL: seção normal, na grade, com Estouro: oculto. */
.mg-dep{
  --dep-out:0px;
  margin:0 calc(var(--dep-out) * -1);
}
.mg-dep__faixa{width:100%;overflow:hidden}

.mg-dep__trilho{
  display:flex;
  align-items:stretch;
  gap:clamp(32px, 4vw, 72px);
  width:max-content;
  will-change:transform;
}

/* SEM CAIXA. O separador é um filete, como nas listas do spa e do
   PETAR — é a linguagem de separação que o site já usa. Cartão de cor
   chapada pesava demais ao lado da foto de fechamento, e o problema
   não era o tom: era existir um bloco. */
.mg-dep__card{
  flex:0 0 auto;
  width:clamp(240px, 24vw, 320px);
  display:flex;
  flex-direction:column;
  padding:4px 0 4px clamp(24px, 2.4vw, 40px);
  border-left:1px solid var(--c-line);
  background:none;
}

.mg-dep__estrelas{
  font-size:11px;
  letter-spacing:.32em;
  line-height:1;
  color:var(--c-label);
}
.mg-dep__txt{
  margin:clamp(20px, 2.4vw, 32px) 0 0;
  font-family:var(--mg-font);
  font-size:1rem;
  font-weight:400;
  line-height:1.7;
  color:var(--c-text);
}
.mg-dep__nome{
  margin-top:auto;           /* cola no pé, alinhando todos */
  padding-top:clamp(24px, 3vw, 40px);
  font-family:var(--mg-font);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-label);
}

@media (max-width:767px){
  .mg-dep__trilho{gap:28px}
  .mg-dep__card{
    width:clamp(230px, 72vw, 290px);
    padding-left:20px;
  }
  .mg-dep__txt{font-size:.9375rem;margin-top:18px}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ae13b2c *//* 74 · Home · acomodações · avaliações no Google */

.mg-google{
  display:flex;
  justify-content:center;
  margin-top:clamp(32px, 4vw, 56px);
}

/* o link é o .mg-link do global — herda a linha que recolhe no hover.
   Aqui ele só ganha o alinhamento entre a nota e o texto. */
a.mg-google__link,
a.mg-google__link:link,
a.mg-google__link:visited,
a.mg-google__link:active{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
}

.mg-google__nota{
  font-family:var(--mg-font);
  font-size:clamp(1.5rem, 2.2vw, 1.875rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--c-head);
}
.mg-google__txt{
  font-family:var(--mg-font);
  font-size:.8125rem;
  letter-spacing:.02em;
  color:var(--c-label);
}

@media (max-width:767px){
  .mg-google{margin-top:32px}
  .mg-google__txt{font-size:.75rem}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d39b3f4 *//* 65 · Home · break final */

/* duas classes no seletor: o .mg-break do CSS global é impresso DEPOIS
   do CSS dos widgets e ganharia de uma classe só */
/* 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 */