/* ============================================================
   UNIVERSO TRÍA — folha de estilo do site
   O desenho é o mesmo do estático; o que mudou é o escopo:
   o reset agora vive dentro de .tria-sec para não atropelar
   os widgets que o Elementor injeta em volta.
   ============================================================ */

:root{
  --off:#FEFCF9;
  --sand:#F5F0E6;
  --terra:#B26848;
  --terra-deep:#96543A;
  /* a paleta é de duas cores só: o verde da marca e a terracota.
     os tons "noite"/"escuro" foram unificados no #5C5E0E. */
  --verde:#5C5E0E;
  --verde-noite:#5C5E0E;
  --verde-escuro:#5C5E0E;
  --ink:#27280F;
  --linha:rgba(92,94,14,.18);
  --linha-clara:rgba(254,252,249,.16);
  --font-display:'Cinzel Decorative', serif;
  --font-poet:'Cormorant Garamond', serif;
  --font-body:'Montserrat', sans-serif;
  --font-assinatura:'Parisienne', cursive;
}

/* Reset com escopo, mas SEM peso: o `:where()` vale zero na conta da
   especificidade, então estas regras continuam pesando o mesmo que os
   `*`, `a` e `img` soltos do site estático. Escrever `.tria-sec a` de
   verdade empataria com `.nav-cta` e apagaria a cor dos botões. */
:where(.tria-sec),:where(.tria-sec) *{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}
body{
  background:var(--off);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
:where(.tria-sec) img{max-width:100%;display:block}
:where(.tria-sec) a{color:inherit;text-decoration:none}
:where(.tria-sec) :is(h1,h2,h3){font-weight:400}

/* o Elementor embrulha cada widget; aqui esses invólucros não podem
   introduzir largura nem espaçamento próprios */
.elementor-widget-tria-hero,
.elementor-widget-tria-manifesto,
.elementor-widget-tria-triade,
.elementor-widget-tria-espacos,
.elementor-widget-tria-vivencilar,
.elementor-widget-tria-terapias,
.elementor-widget-tria-formacoes,
.elementor-widget-tria-eveline,
.elementor-widget-tria-frase,
.elementor-widget-tria-nav,
.elementor-widget-tria-footer,
.elementor-widget-tria-viv-hero,
.elementor-widget-tria-planos,
.elementor-widget-tria-incluso,
.elementor-widget-tria-fecho,
.elementor-widget-tria-viv-nav,
.elementor-widget-tria-viv-footer{width:100%}
.elementor-widget-tria-hero .elementor-widget-container,
.elementor-widget-tria-manifesto .elementor-widget-container,
.elementor-widget-tria-triade .elementor-widget-container,
.elementor-widget-tria-espacos .elementor-widget-container,
.elementor-widget-tria-vivencilar .elementor-widget-container,
.elementor-widget-tria-terapias .elementor-widget-container,
.elementor-widget-tria-formacoes .elementor-widget-container,
.elementor-widget-tria-eveline .elementor-widget-container,
.elementor-widget-tria-frase .elementor-widget-container,
.elementor-widget-tria-nav .elementor-widget-container,
.elementor-widget-tria-footer .elementor-widget-container,
.elementor-widget-tria-viv-hero .elementor-widget-container,
.elementor-widget-tria-planos .elementor-widget-container,
.elementor-widget-tria-incluso .elementor-widget-container,
.elementor-widget-tria-fecho .elementor-widget-container,
.elementor-widget-tria-viv-nav .elementor-widget-container,
.elementor-widget-tria-viv-footer .elementor-widget-container{margin:0;padding:0}

.wrap{width:min(1180px,90%);margin:0 auto}
.kicker{
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--terra);
  display:flex;
  align-items:center;
  gap:14px;
}
.kicker::before{content:"";width:34px;height:1px;background:var(--terra)}
.tri{display:inline-block;font-size:.55em;transform:translateY(-.15em);color:var(--terra)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s ease,transform 1s ease}
.rv.on{opacity:1;transform:none}
.rv-d1{transition-delay:.15s}
.rv-d2{transition-delay:.3s}
.rv-d3{transition-delay:.45s}
/* dentro do editor do Elementor nada pode ficar invisível */
body.elementor-editor-active .rv{opacity:1;transform:none;filter:none}

/* ============ NAV ============ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  padding:22px 0;
  transition:background .45s ease,padding .45s ease,box-shadow .45s ease;
}
.nav .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
.nav-logo{position:relative;display:block;line-height:0}
.nav-logo img{height:34px;width:auto;transition:opacity .45s ease}
.nav-logo .lg-light{position:absolute;left:0;top:0;opacity:0}
.nav.scrolled .nav-logo .lg-dark{opacity:0}
.nav.scrolled .nav-logo .lg-light{opacity:1}
.nav-links{display:flex;align-items:center;justify-content:center;gap:34px;list-style:none}
.nav-links a{
  font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--off);transition:color .3s ease;position:relative;padding:4px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--terra);transition:width .35s ease;
}
.nav-links a:hover::after{width:100%}
.nav-cta{
  justify-self:end;
  font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--terra);color:var(--terra);
  padding:10px 22px;border-radius:2px;
  transition:background .35s ease,color .35s ease;
}
.nav-cta:hover{background:var(--terra);color:var(--off)}
.nav.scrolled{
  background:rgba(254,252,249,.9);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--linha);padding:14px 0;
}
.nav.scrolled .nav-links a{color:var(--ink)}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-burger span{display:block;width:26px;height:1.5px;background:var(--off);margin:6px 0;transition:.35s}
.nav.scrolled .nav-burger span{background:var(--ink)}
.nav.open .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav.open .nav-burger span:nth-child(2){opacity:0}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:108px 24px 104px;   /* respiro maior embaixo: a marca cresceu e o "Descer" precisa de folga */
  background:var(--verde-noite);
  color:var(--off);
  overflow:hidden;
  isolation:isolate;
}

/* --- camada de mídia: foto de base + vídeo por cima --- */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate}
.hero-media-el{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  filter:grayscale(1) contrast(1.12) brightness(.8);
  transform:scale(1.06);
  animation:heroDrift 26s ease-in-out infinite alternate;
}
/* o vídeo é um <video> local: object-fit funciona nele igual à foto.
   o poster é um quadro do próprio vídeo, então a espera não aparece como buraco. */
.hero-video{filter:grayscale(1) contrast(1.08) brightness(.95);background:#101206}
@keyframes heroDrift{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.13) translateY(-18px)}}
/* tinge o P&B com o verde da marca (duotone) */
.hero-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--verde-noite);
  mix-blend-mode:color;
  opacity:.62;
}
/* sem vinheta: sobra só o mínimo em cima (nav) e embaixo (Descer) */
.hero-media::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,
    rgba(30,31,5,.42) 0%, rgba(30,31,5,0) 26%,
    rgba(30,31,5,0) 70%, rgba(30,31,5,.55) 100%);
}

/* --- conteúdo --- */
.hero-inner{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  width:min(880px,100%);
}
.hero-wordmark{margin:0;line-height:0}
/* a marca do hero é recortada rente ao desenho (1,15:1), sem a moldura vazia da
   quadrada: por isso a largura pode ser menor e o triângulo ainda aparece maior */
.hero-wordmark img{
  width:clamp(240px,25vw,380px);
  /* o triângulo da marca nova é verde e o céu do vídeo também: a primeira
     sombra é um halo curto, que escurece só a beirada do traço e o descola
     do fundo sem mexer na cor do arquivo da cliente */
  filter:drop-shadow(0 0 12px rgba(11,12,3,.5)) drop-shadow(0 18px 46px rgba(11,12,3,.55));
  animation:wordmarkBreath 16s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes wordmarkBreath{
  0%,100%{opacity:.94;transform:scale(1)}
  50%{opacity:1;transform:scale(1.015)}
}
/* o fio terracota que separava a marca da frase saiu a pedido da cliente
   (17/08/2026) — o respiro agora é a margem da própria frase */
.hero-frase{
  margin-top:26px;
  font-family:var(--font-poet);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.85rem);
  line-height:1.45;color:var(--off);
  max-width:24ch;
}
.hero-cta{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:13px 34px;margin-top:26px;
  font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--off);
  border:1px solid rgba(178,104,72,.72);border-radius:2px;
  transition:background .45s ease,border-color .45s ease;
}
.hero-cta span{position:relative;z-index:2;padding-left:.24em}
.hero-cta::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(178,104,72,.5),transparent);
  transform:translateX(-160%) skewX(-18deg);
  animation:ctaShine 5.6s ease-in-out infinite;
}
@keyframes ctaShine{0%{transform:translateX(-160%) skewX(-18deg)}45%,100%{transform:translateX(320%) skewX(-18deg)}}
.hero-cta:hover{background:var(--terra);border-color:var(--terra)}

/* --- entrada escalonada --- */
.hero-rise{opacity:0;transform:translateY(24px);animation:heroRise 1.5s cubic-bezier(.22,.61,.36,1) forwards}
.hero-inner .hero-rise:nth-child(1){animation-delay:.25s}
.hero-inner .hero-rise:nth-child(2){animation-delay:.5s}
.hero-inner .hero-rise:nth-child(3){animation-delay:.85s}
.hero-inner .hero-rise:nth-child(4){animation-delay:1.05s}
.hero-inner .hero-rise:nth-child(5){animation-delay:1.3s}
.hero-inner .hero-rise:nth-child(6){animation-delay:1.55s}
@keyframes heroRise{to{opacity:1;transform:none}}

/* centrado por margem, NÃO por translateX(-50%): o heroRise termina em
   transform:none e apagaria o -50%, jogando o bloco para a direita */
.hero-scroll{
  position:absolute;bottom:34px;left:0;right:0;margin-inline:auto;width:max-content;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(254,252,249,.6);font-size:.6rem;letter-spacing:.38em;text-transform:uppercase;
  opacity:0;animation:heroRise 1.5s cubic-bezier(.22,.61,.36,1) 2s forwards;
}
/* o letter-spacing sobra depois da última letra e desloca a palavra */
.hero-scroll span{padding-left:.38em}
.hero-scroll svg{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

@media(prefers-reduced-motion:reduce){
  .hero-media-el,.hero-wordmark img,.hero-cta::before,.hero-scroll svg{animation:none}
  .hero-media-el{transform:none}
  .hero-rise,.hero-scroll{animation-duration:.01s;animation-delay:0s}
}

/* ============ MANIFESTO ============ */
.manifesto{padding:140px 0 90px;position:relative}
/* o vão da grade é o único respiro em volta do poema (os outros dois blocos
   se encostam nele): 56px abriam um buraco entre o título e os versos */
.manifesto-grid{display:grid;grid-template-columns:1fr;gap:34px}
/* ⚠️ o `margin` do reset é `:where()`, que pesa zero: a regra `h2{margin-block}`
   do tema passava na frente e punha 16px embaixo do título. Somados ao vão da
   grade e à margem do poema davam 86px acima dele contra 66px abaixo — era o
   degrau que a cliente marcou. Zerando aqui e deixando o poema com margens
   iguais, os dois respiros fecham em 66px. */
.manifesto h2{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3.6vw,2.7rem);
  line-height:1.35;color:var(--verde);
  margin:26px 0 0;
  max-width:20ch;
}
.poema{
  font-family:var(--font-poet);font-style:italic;font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.65rem);
  line-height:1.7;color:var(--terra);
  border-left:1px solid var(--terra);
  padding-left:34px;margin:0;
}
.poema span{display:block}
.manifesto-txt{max-width:64ch;display:grid;gap:22px}
/* o último parágrafo (a frase de fecho) leva a margem de baixo do tema e ela
   se somava ao respiro da faixa de fotos */
.manifesto-txt>*:last-child{margin-bottom:0}
.manifesto-txt strong{font-weight:500;color:var(--verde)}
.manifesto-fecho{
  font-family:var(--font-poet);font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.8rem);
  color:var(--verde);
}
.foto-faixa{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin:48px auto 0;
}
.foto-faixa figure{overflow:hidden;position:relative}
.foto-faixa img{
  height:min(52vw,440px);width:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:transform 1.2s ease;
}
.foto-faixa figure:nth-child(2) img{height:min(58vw,500px)}
.foto-faixa figure:nth-child(2){margin-top:-40px}
.foto-faixa figure:hover img{transform:scale(1.05)}

/* ============ TRÍADE ============ */
.triade{
  background:var(--verde-noite);color:var(--off);
  padding:130px 0 140px;position:relative;overflow:hidden;
}
.triade::before{
  content:"";position:absolute;right:-140px;top:80px;
  width:520px;height:520px;
  background:url("../img/submarca-agua-branco.png") center/contain no-repeat;
  opacity:.10;pointer-events:none;
}
/* sobre o verde da marca a terracota some: os rótulos miúdos vão de off-white */
.triade .kicker{color:rgba(254,252,249,.85)}
.triade .kicker::before{background:rgba(254,252,249,.85)}
.triade h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  color:var(--off);margin:26px 0 74px;max-width:26ch;line-height:1.4;
}
.triade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:54px}
.tricol{position:relative;padding-top:34px}
.tricol::before{
  content:"";position:absolute;top:0;left:0;
  width:0;height:0;
  border-left:9px solid transparent;border-right:9px solid transparent;
  border-bottom:15px solid rgba(254,252,249,.9);
}
.tricol .num{
  font-family:var(--font-poet);font-style:italic;
  color:rgba(254,252,249,.4);font-size:.95rem;letter-spacing:.2em;
  display:block;margin-bottom:14px;
}
.tricol h3{
  font-size:.8rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(254,252,249,.85);margin-bottom:18px;
}
.tricol .lema{
  font-family:var(--font-poet);font-style:italic;
  font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.45;
  color:var(--off);margin-bottom:20px;
}
.tricol p{color:rgba(254,252,249,.78);font-size:.95rem}

/* reveal com foco: o bloco emerge desfocado e assenta */
.rv.em{transition:opacity 1s ease,transform 1s ease,filter 1s ease;filter:blur(5px)}
.rv.em.on{filter:blur(0)}

/* ============ CATÁLOGO DO ESPAÇO ============ */
.espacos{padding:120px 0 130px;background:var(--off)}

/* --- cabeçalho: eyebrow numerada + nome grande --- */
.esp-head{margin-bottom:0}
.esp-eyebrow{
  font-size:.66rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:var(--terra);
  font-variant-numeric:tabular-nums;
}
.esp-eyebrow strong{font-weight:600}
.esp-eyebrow .tri{margin:0 .55em}
.esp-name{
  position:relative;display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3.3rem);
  line-height:1.12;color:var(--verde);
  margin-top:18px;
}
/* filete curto sob o nome, no acento da terra */
.esp-name::after{
  content:"";position:absolute;left:0;bottom:-15px;
  width:62px;height:2px;background:var(--terra);
}

/* --- fio-régua: triângulo + eixo + dados alinhados à direita --- */
.esp-rule{
  display:flex;align-items:center;gap:16px;
  margin:58px 0 48px;
  font-size:.62rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(39,40,15,.5);
  font-variant-numeric:tabular-nums;
}
.esp-rule-chip{
  flex:0 0 auto;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:9px solid var(--terra);
}
.esp-rule-axis{color:var(--terra)}
.esp-rule-spacer{flex:1;height:1px;background:var(--linha)}
.esp-rule-meta strong{font-weight:600;color:var(--verde)}
.esp-rule-meta .tri{margin:0 .45em}

/* --- acordeão horizontal: painéis, um aberto por vez --- */
.acc{
  --acc-h:clamp(400px,66vh,600px);
  --ar:.75;                       /* todas as fotos do acervo são 3:4 */
  display:flex;gap:4px;
  height:var(--acc-h);width:100%;
  overflow:hidden;
}
.panel{
  position:relative;flex:1 1 0;height:100%;min-width:56px;
  overflow:hidden;background-color:var(--sand);
  transition:flex 1.05s cubic-bezier(.16,1,.3,1);
}
/* aberto: a largura sai da proporção nativa da foto — a prancha não é cortada */
.panel.is-active{flex:0 0 min(calc(var(--ar) * var(--acc-h)),46%)}
/* a foto vive no ::before para o grayscale não alcançar o véu do ::after */
.panel::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--img);background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.06) brightness(.6);
  transition:filter .9s ease;
}
.panel::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,31,5,.34) 0%,rgba(30,31,5,.05) 40%,rgba(30,31,5,.8) 100%);
}
.panel:hover::before{filter:grayscale(1) contrast(1.06) brightness(.74)}
.panel.is-active::before{filter:grayscale(.9) contrast(1.04) brightness(.86)}

/* a área clicável é um botão sobreposto: assim o conteúdo continua HTML válido */
.panel-btn{
  position:absolute;inset:0;z-index:6;
  background:none;border:none;padding:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.panel-btn:focus-visible{outline:2px solid var(--terra);outline-offset:-4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* estado fechado: romano em cima, nome na vertical embaixo */
.panel-closed{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:20px 0;color:var(--off);
  transition:opacity .4s ease;
}
.panel-i{
  font-family:var(--font-poet);font-style:italic;
  font-size:.95rem;letter-spacing:.18em;color:rgba(254,252,249,.72);
}
.panel-nome{
  font-family:var(--font-display);font-size:.9rem;letter-spacing:.08em;
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
}
.panel.is-active .panel-closed{opacity:0;pointer-events:none}

/* estado aberto: tag no topo, nome no rodapé */
.panel-open{
  position:absolute;left:24px;right:24px;top:24px;bottom:24px;z-index:4;
  display:flex;flex-direction:column;justify-content:space-between;
  color:var(--off);opacity:0;pointer-events:none;
  transition:opacity .42s ease;
}
.panel.is-active .panel-open{opacity:1;transition-delay:.3s}
.panel-open-i{
  font-family:var(--font-poet);font-style:italic;
  font-size:.95rem;letter-spacing:.18em;color:rgba(254,252,249,.72);
}
.panel-open-nome{
  display:block;font-family:var(--font-display);
  font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.2;
}

/* ============ VIVENCI(LAR) ============ */
.vivencilar{padding:150px 0;background:var(--off)}
.viv-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:start}
.viv-txt h2{
  font-family:var(--font-display);
  font-size:clamp(2rem,4.4vw,3.2rem);
  color:var(--terra);margin:26px 0 34px;line-height:1.2;
}
.viv-txt .destaque{
  font-family:var(--font-poet);font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.5rem);
  color:var(--verde);line-height:1.6;margin-bottom:26px;
}
.viv-txt p{margin-bottom:20px;max-width:58ch}
.viv-quote{
  margin:38px 0;padding:30px 34px;
  border-left:2px solid var(--terra);
  background:var(--sand);
  font-family:var(--font-poet);font-style:italic;
  font-size:1.22rem;line-height:1.65;color:var(--verde-escuro);
}
.viv-foto{position:sticky;top:110px}
.viv-foto img{
  width:100%;height:min(120vw,680px);object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.viv-foto figcaption{
  margin-top:16px;
  font-family:var(--font-poet);font-style:italic;
  color:var(--terra);font-size:1.05rem;text-align:right;
}
.botoes{display:flex;flex-wrap:wrap;gap:18px;margin-top:36px}
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.75rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  padding:18px 36px;border-radius:2px;
  transition:all .35s ease;border:1px solid var(--terra);
}
.btn-solid{background:var(--terra);color:var(--off)}
.btn-solid:hover{background:var(--terra-deep);border-color:var(--terra-deep);transform:translateY(-2px)}
.btn-ghost{color:var(--terra)}
.btn-ghost:hover{background:var(--terra);color:var(--off)}
.btn-ghost-claro{border-color:rgba(254,252,249,.5);color:var(--off)}
.btn-ghost-claro:hover{background:var(--off);color:var(--verde);border-color:var(--off)}

/* ============ TERAPIAS ============ */
.terapias{background:var(--sand);padding:140px 0}
.terapias h2{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3.6vw,2.6rem);
  color:var(--verde);margin:26px 0 20px;
}
.terapias .abre{max-width:60ch;margin-bottom:70px}
/* pranchas verticais: foto ao fundo, nome embaixo, texto que sobe ao abrir */
.ter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ter-card{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;
  background:var(--verde-noite);
  border:none;padding:0;margin:0;
  text-align:left;color:var(--off);
  cursor:pointer;font:inherit;
  transition:transform .44s cubic-bezier(.65,0,.35,1),box-shadow .44s cubic-bezier(.65,0,.35,1);
}
.ter-card::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--img);background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.12) brightness(.46);
  transform:scale(1.02);transition:transform 1.2s ease,filter .6s ease;
}
/* degradê de leitura para o nome nunca cair sobre área clara */
.ter-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,31,5,.55) 0%,rgba(30,31,5,.05) 38%,rgba(30,31,5,.82) 100%);
}
.ter-card:hover{transform:translateY(-6px);box-shadow:0 16px 38px rgba(30,31,5,.22)}
.ter-card:hover::before{transform:scale(1.08);filter:grayscale(1) contrast(1.12) brightness(.54)}
.ter-card:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.ter-card .ter-topo,.ter-card .ter-pe{position:relative;z-index:2}
.ter-card .ter-topo{position:absolute;top:22px;left:22px}
.ter-num{
  font-family:var(--font-poet);font-style:italic;
  font-size:.9rem;letter-spacing:.2em;color:rgba(254,252,249,.72);
}
/* o rodapé fica acima do painel aberto: é por ele que se fecha o card */
.ter-card .ter-pe{position:absolute;left:22px;right:22px;bottom:22px;z-index:4}
.ter-card h3{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,1.3vw,1.3rem);line-height:1.25;
  color:var(--off);margin-bottom:10px;
  /* "Constelação" é mais larga que a coluna nas telas estreitas e o
     overflow:hidden do card cortava a palavra pela metade */
  overflow-wrap:break-word;
}
.ter-abrir{
  background:none;border:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:.62rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terra);display:inline-flex;align-items:center;gap:8px;
}
.ter-abrir:hover{color:var(--off)}
.ter-abrir::after{content:"+";font-size:1.1em;line-height:1;transition:transform .35s ease}
.ter-card.aberto .ter-abrir::after{transform:rotate(45deg)}
/* painel do texto: sobe por cima da foto, sem mexer na altura da grade */
.ter-desc{
  position:absolute;inset:0;z-index:3;
  background:var(--verde-noite);
  padding:26px 24px 104px;   /* reserva o rodapé com o nome e o Fechar */
  display:flex;align-items:center;overflow-y:auto;
  font-size:.88rem;line-height:1.7;color:rgba(254,252,249,.92);
  transform:translateY(101%);opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
.ter-card.aberto .ter-desc{transform:none;opacity:1}
.ter-card.aberto{transform:translateY(-6px);box-shadow:0 16px 38px rgba(30,31,5,.22)}
.terapias .botoes{justify-content:center;margin-top:60px}

/* ============ FORMAÇÕES ============ */
.formacoes{
  background:var(--terra);color:var(--off);
  padding:140px 0;position:relative;overflow:hidden;
}
.formacoes::before{
  content:"";position:absolute;left:-120px;bottom:-140px;
  width:480px;height:480px;
  background:url("../img/submarca-agua-branco.png") center/contain no-repeat;
  opacity:.14;pointer-events:none;
}
.formacoes .kicker{color:var(--off)}
.formacoes .kicker::before{background:var(--off)}
.formacoes h2{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3.6vw,2.6rem);
  color:var(--off);margin:26px 0 70px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.form-card{
  border:1px solid rgba(254,252,249,.35);
  padding:52px 46px;border-radius:2px;
  background:rgba(150,84,58,.25);
  backdrop-filter:blur(2px);
  transition:transform .4s ease,background .4s ease;
}
.form-card:hover{transform:translateY(-6px);background:rgba(150,84,58,.45)}
.form-card .rotulo{
  font-size:.68rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(254,252,249,.75);display:block;margin-bottom:18px;
}
.form-card h3{
  font-family:var(--font-poet);font-weight:500;
  font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.35;margin-bottom:20px;
}
.form-card p{color:rgba(254,252,249,.88);font-size:.95rem}
.formacoes .botoes{margin-top:64px}

/* ============ EVELINE ============ */
.eveline{padding:150px 0;background:var(--off)}
.ev-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}
.ev-foto{position:relative}
.ev-foto img{
  width:100%;height:min(110vw,620px);object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.ev-foto::after{
  content:"";position:absolute;top:22px;left:22px;right:-22px;bottom:-22px;
  border:1px solid var(--terra);z-index:-1;
}
/* o nome é assinatura: fonte cursiva e corpo menor que o dos outros títulos */
.ev-txt h2{
  font-family:var(--font-assinatura);
  font-size:clamp(2rem,3.2vw,2.5rem);
  line-height:1.3;letter-spacing:.01em;
  color:var(--verde);margin:22px 0 30px;
}
.ev-txt p{margin-bottom:20px;max-width:62ch}
.ev-txt .ev-abre{
  font-family:var(--font-poet);font-style:italic;
  font-size:1.35rem;color:var(--terra);line-height:1.6;
}

/* ============ FRASE FINAL ============ */
.frase-final{
  position:relative;min-height:42vh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--verde);overflow:hidden;
}
.frase-final .conteudo{position:relative;z-index:2;width:min(820px,90%);padding:64px 0}
.frase-final p{
  font-family:var(--font-poet);font-style:italic;
  font-size:clamp(1.7rem,4vw,2.8rem);
  color:var(--off);line-height:1.5;
}
.frase-final .assina{
  margin-top:30px;font-family:var(--font-body);
  font-size:.7rem;letter-spacing:.44em;text-transform:uppercase;
  color:rgba(254,252,249,.65);
}

/* ============ FOOTER ============ */
/* respiro reduzido a pedido da cliente (17/08/2026): era 100/70/34/46 */
.footer{background:var(--verde-noite);color:var(--off);padding:64px 0 34px;border-top:1px solid var(--linha-clara)}
.foot-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:44px;
  padding-bottom:44px;border-bottom:1px solid var(--linha-clara);
}
/* a marca do rodapé é a quadrada, com o triângulo — a moldura vazia dela é
   grande, então a caixa fica menor que a do hero para não abrir vão */
.foot-logo img{width:200px;margin-bottom:0}
.foot-grid p{color:rgba(254,252,249,.66);font-size:.9rem;max-width:34ch}
.foot-tit{
  font-size:.68rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(254,252,249,.85);margin-bottom:24px;
}
.foot-list{list-style:none;display:grid;gap:14px}
.foot-list a{
  color:rgba(254,252,249,.78);font-size:.92rem;
  transition:color .3s ease;display:inline-flex;gap:10px;align-items:baseline;
}
.foot-list a:hover{color:var(--off)}
/* item sem link (o endereço) segue a mesma pauta dos demais */
.foot-end{color:rgba(254,252,249,.78);font-size:.92rem;display:inline-flex;gap:10px;align-items:baseline}
.foot-list .tri{color:rgba(254,252,249,.6)}
.foot-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  padding-top:24px;
  font-size:.72rem;letter-spacing:.14em;color:rgba(254,252,249,.45);
}
.foot-bottom a{color:rgba(254,252,249,.6)}
.foot-bottom a:hover{color:var(--off)}

/* ============ RESPONSIVO ============ */

/* Quatro colunas só enquanto cada uma tiver largura para a descrição.
   Entre 1021px e 1180px o card cai para ~200px, e o painel — que reserva
   104px embaixo para o nome e o "Fechar" — passava do fundo da prancha 3/4
   e ganhava rolagem própria (57px de estouro a 1060px). É o mesmo defeito
   que quebrava o celular, só que numa faixa de largura de notebook.
   Acima de 1180px nada muda: 1280, 1366, 1440 e 1920 seguem com quatro. */
@media(max-width:1180px){
  .ter-grid{grid-template-columns:1fr 1fr;gap:18px;align-items:start}
}

@media(max-width:1020px){
  /* nav vira menu de gaveta: 5 itens + CTA não cabem abaixo disto */
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .nav-links{
    position:fixed;inset:0 0 auto 0;top:0;padding:110px 8% 46px;
    background:rgba(92,94,14,.98);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:26px;
    transform:translateY(-105%);transition:transform .5s ease;
  }
  .nav.open .nav-links{transform:none}
  .nav.open .nav-links a,.nav.scrolled.open .nav-links a{color:var(--off)}
  .nav-cta{margin-left:auto;padding:9px 18px;font-size:.64rem;letter-spacing:.18em}
  /* logo e CTA ficam acima da gaveta */
  .nav-logo,.nav-cta{z-index:60}
  .nav-cta{position:relative}
  .nav.open .nav-logo .lg-dark{opacity:1}
  .nav.open .nav-logo .lg-light{opacity:0}
  .nav.scrolled.open .nav-cta{color:var(--terra)}
  .nav-burger{display:block;position:relative;z-index:60}
  .nav.open .nav-burger span{background:var(--off)}
  .triade-grid{grid-template-columns:1fr;gap:60px}
  /* align-items:start para o card aberto poder crescer sem esticar o vizinho */
  .ter-grid{grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .viv-grid{grid-template-columns:1fr;gap:60px}
  .viv-foto{position:static}
  .viv-foto img{height:min(80vw,480px)}
  .ev-grid{grid-template-columns:1fr;gap:70px}
  .ev-foto{max-width:420px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:760px){
  .nav-cta{padding:9px 15px;font-size:.6rem;letter-spacing:.14em}

  .hero{padding:112px 22px 92px}
  .hero-wordmark img{width:min(300px,78vw)}
  .hero-frase{max-width:20ch;margin-top:24px}
  .hero-cta{margin-top:24px;padding:12px 26px;font-size:.64rem;letter-spacing:.18em}
  .hero-media-el{object-position:center 40%}
  .form-grid{grid-template-columns:1fr}
  .foto-faixa{grid-template-columns:1fr 1fr;gap:12px}
  .foto-faixa figure:nth-child(3){display:none}
  .foto-faixa img{height:56vw}
  .foto-faixa figure:nth-child(2){margin-top:26px}
  .foto-faixa figure:nth-child(2) img{height:56vw}
  .foot-grid{grid-template-columns:1fr}
  .manifesto{padding-top:110px}
}
/* o acordeão vira vertical antes do resto: 7 painéis lado a lado não cabem */
@media(max-width:900px){
  .espacos{padding:86px 0 92px}
  .esp-rule{margin:44px 0 34px;gap:12px;font-size:.57rem;letter-spacing:.24em}
  .esp-rule-meta{text-align:right}
  .acc{flex-direction:column;height:auto;gap:6px}
  .panel{flex:0 0 auto;height:64px;min-width:0;transition:height 1.05s cubic-bezier(.16,1,.3,1)}
  .panel.is-active{flex:0 0 auto;height:min(116vw,440px)}
  .panel-closed{flex-direction:row;align-items:center;justify-content:flex-start;gap:18px;padding:0 22px}
  .panel-nome{writing-mode:horizontal-tb;transform:none;font-size:1rem}
  .panel-open{left:20px;right:20px;top:18px;bottom:18px}
  .panel-open-nome{margin-bottom:12px}
}

/* ============ CELULAR: 767px, o corte do Elementor ============
   Daqui para baixo o breakpoint é 767px, e não 760px, porque é o do celular
   no Elementor: as medidas que a cliente ajusta pelo painel entram nesse
   corte e as duas coisas têm de virar na mesma largura.
   ================================================================ */
@media(max-width:767px){
  .terapias .abre{margin-bottom:34px}
  .foto-faixa{margin-top:30px}

  /* a moldura terracota do retrato sai 22px para fora do quadro. Com a seção
     sem espaço lateral próprio ela passava da tela e abria rolagem horizontal
     (6px a 320px, 3px a 375px): o retrato encolhe o tanto que ela ocupa. */
  .ev-foto{max-width:calc(100% - 24px)}

  /* ---- ATENDIMENTOS ----
     O card abre igual ao desktop: a descrição sobe por cima da foto, dentro da
     prancha 3/4. O que quebrava não era a sobreposição, era a largura — em
     duas colunas o card tinha ~130px e o texto não cabia entre o topo e os
     104px reservados ao nome e ao "Fechar". Em UMA coluna o card fica com a
     largura da página (351px a 390, 288px a 320) e, pela proporção 3/4, 468px
     e 384px de altura: sobram mais de 200px de área livre para o texto. */
  .ter-grid{grid-template-columns:1fr;gap:16px}
}

/* ============ HOVER: desfazendo o reset do Hello Elementor ============
   O `reset.css` do tema traz duas regras que pesam 0,1,1 e por isso vencem
   uma classe sozinha (0,1,0):

     a:hover, a:active            { color:#333366 }
     button:hover, button:focus   { background-color:#cc3366; color:#fff }

   Sem o contrapeso abaixo, o botão cheio troca a cor do texto ao passar o
   mouse, o "Descer" escurece e — o mais visível — o botão invisível que cobre
   cada painel do catálogo pinta a foto inteira de rosa. Cada regra daqui
   apenas repõe o valor que o modelo já tinha. */

.hero-cta:hover{color:var(--off)}
.hero-scroll:hover{color:rgba(254,252,249,.6)}
.btn-solid:hover{color:var(--off)}

.panel-btn:hover,.panel-btn:focus{background:none;color:inherit}
.ter-abrir:focus{background:none;color:var(--terra)}
.ter-abrir:hover{background:none;color:var(--off)}
.nav-burger:hover,.nav-burger:focus{background:none}

/* ============ ASSINATURA NO RODAPÉ ============ */
.foot-assina{display:inline-flex;align-items:center;gap:9px}
.foot-assina img{
  width:112px;height:auto;
  opacity:.72;transition:opacity .35s ease;
}
.foot-assina a:hover img{opacity:1}
@media(max-width:760px){.foot-assina img{width:96px}}

/* a admin bar empurra a página e cobre a .nav fixa */
body.admin-bar .nav{top:32px}
@media(max-width:782px){body.admin-bar .nav{top:46px}}