/* ============================================================
   MAISON D'OR — experiência cinematográfica
   Paleta e tipografia herdadas da landing page atual da marca.
   ============================================================ */

:root{
  /* Cores oficiais Maison D'Or */
  --green:#003B29;
  --green-deep:#00281B;
  --green-soft:#0A4B35;
  --gold:#D4AF37;
  --gold-light:#E8C766;
  --champagne:#F0E0BC;
  --white:#FFFFFF;
  --offwhite:#F8F8F8;
  --ink:#1B2621;
  --ink-soft:#55605A;
  --void:#050A08;          /* preto fosco com base verde */
  --void-2:#08110D;

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;

  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

/* O retângulo azul translúcido que o Android/iOS pinta sobre link e botão
   ao tocar. Não existe no desktop, e num site desta paleta ele destoa.
   O foco por teclado continua marcado logo abaixo — acessibilidade
   preservada, só o realce de toque some. */
a,button,[role="button"],input,textarea,select{
  -webkit-tap-highlight-color:transparent;
}
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

html{
  scroll-behavior:auto;           /* o Lenis cuida da suavização */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--void);
  color:var(--offwhite);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* O Lenis exige que o body não trave a rolagem */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

::selection{background:var(--gold);color:var(--green-deep)}

/* ---------- Tipografia base ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  margin:0;
  letter-spacing:-.01em;
}

.eyebrow{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.4rem;
  display:flex;
  align-items:center;
  gap:.9rem;
}
.eyebrow::before{
  content:"";
  width:34px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
  flex:none;
}
.eyebrow.is-centered{justify-content:center}
.eyebrow.is-centered::after{
  content:"";width:34px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  flex:none;
}

.lede{
  font-size:clamp(1rem,1.35vw,1.15rem);
  color:rgba(248,248,248,.68);
  font-weight:300;
  max-width:56ch;
}

.gold{color:var(--gold)}
.italic{font-style:italic}

/* ---------- Layout ---------- */
.wrap{
  width:min(var(--maxw),calc(100% - 3rem));
  margin-inline:auto;
}
section{position:relative}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{
  position:fixed;inset:0;z-index:9999;
  background:var(--void);
  display:grid;place-items:center;
  transition:opacity .9s var(--ease),visibility .9s var(--ease);
}
#preloader.is-done{opacity:0;visibility:hidden}

.pre-inner{text-align:center;width:min(320px,72vw)}
.pre-logo{
  width:210px;margin:0 auto 2.2rem;
  opacity:0;
  animation:preIn 1.2s var(--ease-out) .15s forwards;
}
.pre-bar{
  height:1px;width:100%;
  background:rgba(212,175,55,.18);
  position:relative;overflow:hidden;
  opacity:0;
  animation:preIn .9s var(--ease-out) .5s forwards;
}
.pre-bar span{
  position:absolute;inset:0 auto 0 0;
  width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  transition:width .35s var(--ease);
}
.pre-label{
  margin:1.3rem 0 0;
  font-size:.62rem;letter-spacing:.36em;text-transform:uppercase;
  color:rgba(212,175,55,.55);
  opacity:0;
  animation:preIn .9s var(--ease-out) .7s forwards;
}
@keyframes preIn{to{opacity:1}}

/* ============================================================
   NAVEGAÇÃO
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding:1.15rem clamp(1.5rem,4vw,3rem);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),
             border-color .5s var(--ease),padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(5,10,8,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(212,175,55,.14);
  padding-block:.85rem;
}
.nav-logo img{width:118px;transition:width .5s var(--ease)}
.nav.is-solid .nav-logo img{width:100px}

.nav-links{
  display:none;gap:2.1rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(248,248,248,.66);
}
@media(min-width:960px){.nav-links{display:flex}}
.nav-links a{position:relative;padding-block:.3rem;transition:color .35s}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--gold);
  transition:width .45s var(--ease);
}
.nav-links a:hover{color:var(--gold-light)}
.nav-links a:hover::after{width:100%}

/* a loja é um destino externo: fica em dourado e leva a seta de saída */
.nav-links .nav-shop{
  color:var(--gold);
  display:inline-flex;align-items:center;gap:.4rem;
}
.nav-links .nav-shop svg{width:11px;height:11px;flex:none;opacity:.8}
.nav-links .nav-shop:hover{color:var(--gold-light)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:.95rem 1.9rem;
  font-family:var(--sans);
  font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .4s var(--ease),background .4s var(--ease),
             color .4s var(--ease),border-color .4s var(--ease),
             box-shadow .4s var(--ease);
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;flex:none}
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--green-deep);
  box-shadow:0 14px 38px -18px rgba(212,175,55,.85);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 20px 46px -18px rgba(212,175,55,.95)}
.btn-ghost{
  border-color:rgba(212,175,55,.42);
  color:var(--gold-light);
  background:rgba(212,175,55,.04);
}
.btn-ghost:hover{
  border-color:var(--gold);
  background:rgba(212,175,55,.12);
  transform:translateY(-2px);
}
.btn-sm{padding:.72rem 1.35rem;font-size:.66rem}

/* ============================================================
   HERO — sequência de quadros em canvas controlada pelo scroll
   ============================================================ */
#hero{height:520vh}                 /* trilho de rolagem do orbit */

/* No celular a rolagem é por polegar, não por roda: os mesmos 520vh
   viram uma travessia longa demais até a joia completar a volta.
   Trilho mais curto = mesma coreografia, bem mais rápida. */
@media(max-width:820px){
  #hero{height:300vh}
}

/* ------------------------------------------------------------
   MODO PARADO — aparelho que não decodifica o vídeo 2K
   ------------------------------------------------------------
   Sem rotação para acompanhar, manter 300vh de trilho só faria o
   visitante rolar três telas olhando a mesma imagem. A seção encolhe
   para uma tela e a rolagem volta a ser natural.

   Duas coisas precisam ser devolvidas à mão, porque a coreografia as
   escondia no início e o progresso nunca avança aqui: a joia (que só
   entrava a partir de 18% da rolagem) e o texto dos blocos de cinema
   (que só aparecia a partir de 4%).
   ------------------------------------------------------------ */
#hero[data-scrub="still"]{height:100svh}
#hero[data-scrub="still"] #orbit{opacity:.55!important}
#hero[data-scrub="still"] .orbit-readout{display:none}

.film[data-scrub="still"]{height:100svh}

/* Sobrescreve opacity/transform, não as variáveis: o JS escreve
   --film-op e --film-shift como estilo inline no próprio elemento, e
   inline vence folha de estilo. Mexer na variável aqui não teria efeito
   nenhum — o texto ficava invisível no modo parado. */
.film[data-scrub="still"] .film-copy{
  opacity:1!important;
  transform:none!important;
}

.hero-stage{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  background:var(--void);
}

#orbit{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}

/* vinheta + tonalização verde por cima do canvas */
.hero-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 45%,transparent 32%,rgba(5,10,8,.5) 72%,rgba(5,10,8,.92) 100%),
    linear-gradient(180deg,rgba(0,59,41,.28) 0%,transparent 30%,transparent 65%,rgba(5,10,8,.85) 100%);
}

.hero-copy{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:0 1.5rem;
  pointer-events:none;
  /* o scroll dirige a saída de cena do letreiro */
  opacity:var(--text-op,1);
  transform:translateY(var(--text-shift,0px));
  will-change:opacity,transform;
}
/* véu atrás do letreiro: o ouro da joia é claro demais para o texto
   branco cair direto por cima */
.hero-copy::before{
  content:"";position:absolute;left:50%;top:50%;
  width:min(1100px,92vw);height:min(430px,52vh);
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(5,10,8,.82) 0%,rgba(5,10,8,.6) 45%,transparent 72%);
  pointer-events:none;
}
.hero-copy > *{position:relative}

.hero-mark{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.1rem,9.5vw,7.6rem);
  line-height:.95;
  color:var(--offwhite);
  margin:0;
  /* o espaçamento progressivo é dirigido pelo scroll via --track */
  letter-spacing:calc(-.02em + var(--track,0) * .30em);
  text-shadow:0 30px 80px rgba(0,0,0,.6);
  white-space:nowrap;
  opacity:0;
  animation:heroIn 1.6s var(--ease-out) .25s forwards;
}
.hero-mark .amp{
  color:var(--gold);
  font-style:italic;
  font-weight:500;
}

.hero-sub{
  margin:1.9rem 0 0;
  font-size:clamp(.62rem,1.5vw,.78rem);
  letter-spacing:.44em;
  text-transform:uppercase;
  color:rgba(240,224,188,.78);
  opacity:0;
  animation:heroIn 1.4s var(--ease-out) .75s forwards;
}
.hero-tag{
  margin:1.1rem 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(.95rem,2vw,1.3rem);
  color:rgba(248,248,248,.52);
  opacity:0;
  animation:heroIn 1.4s var(--ease-out) .95s forwards;
}

/* A entrada é CSS puro: rAF pausa em aba de fundo e deixaria o
   primeiro quadro vazio. Em CSS o estado final é sempre "visível". */
@keyframes heroIn{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}

.scroll-cue{
  position:absolute;left:50%;bottom:2.4rem;z-index:4;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(212,175,55,.62);
  opacity:0;
  animation:heroIn 1.2s var(--ease-out) 1.5s forwards;
  transition:opacity .5s var(--ease);
}
.scroll-cue.is-hidden{opacity:0!important}
.scroll-cue i{
  width:1px;height:52px;display:block;
  background:linear-gradient(180deg,var(--gold),transparent);
  position:relative;overflow:hidden;
}
.scroll-cue i::after{
  content:"";position:absolute;left:0;top:-52px;
  width:1px;height:52px;
  background:linear-gradient(180deg,transparent,var(--gold-light));
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{to{top:52px}}

/* rótulo de rotação */
.orbit-readout{
  position:absolute;right:clamp(1.5rem,4vw,3rem);bottom:2.6rem;z-index:4;
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(212,175,55,.5);
  font-variant-numeric:tabular-nums;
  display:none;
}
@media(min-width:960px){.orbit-readout{display:block}}

/* ============================================================
   REVELAÇÕES POR SCROLL
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out);
}
.reveal.is-in{opacity:1;transform:none}
.reveal.d1{transition-delay:.09s}
.reveal.d2{transition-delay:.18s}
.reveal.d3{transition-delay:.27s}
.reveal.d4{transition-delay:.36s}
.reveal.d5{transition-delay:.45s}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-mark,.hero-sub,.hero-tag,.scroll-cue,.pre-logo,.pre-bar,.pre-label{
    animation:none!important;opacity:1!important;transform:none!important;
  }
  .scroll-cue i::after{animation:none}
}

/* ============================================================
   MANIFESTO / HISTÓRIA
   ============================================================ */
.manifesto{
  background:linear-gradient(180deg,var(--void) 0%,var(--green-deep) 45%,var(--green) 100%);
  padding:clamp(7rem,16vw,13rem) 0;
  text-align:center;
}
.manifesto-quote{
  font-family:var(--serif);
  font-size:clamp(1.65rem,4.6vw,3.5rem);
  line-height:1.24;
  color:var(--offwhite);
  max-width:19ch;
  margin:0 auto;
}
.manifesto-quote em{color:var(--gold);font-style:italic}

.manifesto-body{
  margin:3.2rem auto 0;
  max-width:60ch;
  color:rgba(248,248,248,.6);
  font-size:clamp(.95rem,1.3vw,1.06rem);
}
.rule{
  width:1px;height:clamp(60px,10vw,110px);
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  margin:3.4rem auto 0;
}

/* ============================================================
   BLOCOS DE VÍDEO (macro + construção)
   ============================================================ */
/* Cada bloco é um trilho de rolagem próprio: o palco fica fixo e o
   scroll percorre os quadros do clipe, como no hero. */
.film{
  height:340vh;
  background:var(--void);
}
@media(max-width:820px){
  .film{height:200vh}
}
.film-stage{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  display:flex;align-items:center;
  background:var(--void);
  /* o topo reserva a faixa da navegação, senão o título passa por baixo */
  padding:6.5rem 0 3rem;
  box-sizing:border-box;
}
.film-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
/* véu que sustenta a leitura do texto sobre a imagem */
.film-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,10,8,.94) 0%,rgba(5,10,8,.74) 44%,rgba(5,10,8,.2) 100%),
    linear-gradient(180deg,rgba(5,10,8,.85) 0%,transparent 24%,transparent 74%,rgba(5,10,8,.9) 100%);
}
.film--right .film-veil{
  background:
    linear-gradient(270deg,rgba(5,10,8,.94) 0%,rgba(5,10,8,.74) 44%,rgba(5,10,8,.2) 100%),
    linear-gradient(180deg,rgba(5,10,8,.85) 0%,transparent 24%,transparent 74%,rgba(5,10,8,.9) 100%);
}
.film .wrap{position:relative;z-index:2;width:min(var(--maxw),calc(100% - 3rem))}
.film-copy{
  max-width:47ch;
  /* entrada e saída dirigidas pelo scroll do próprio bloco */
  opacity:var(--film-op,1);
  transform:translateY(var(--film-shift,0px));
  will-change:opacity,transform;
}
.film--right .film-copy{margin-left:auto;text-align:right}
.film--right .eyebrow{flex-direction:row-reverse}
.film--right .eyebrow::before{background:linear-gradient(270deg,transparent,var(--gold))}
.film--right .lede{margin-left:auto}

.film h2{
  font-size:clamp(1.9rem,5vw,3.6rem);
  margin-bottom:1.5rem;
}

.spec-list{
  list-style:none;margin:2.6rem 0 0;padding:0;
  display:grid;gap:1rem;
}
.spec-list li{
  display:flex;align-items:flex-start;gap:.85rem;
  font-size:.9rem;color:rgba(248,248,248,.72);
}
.film--right .spec-list li{flex-direction:row-reverse;text-align:right}
.spec-list li::before{
  content:"";flex:none;margin-top:.62rem;
  width:5px;height:5px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px rgba(212,175,55,.8);
}

/* ============================================================
   A PEÇA — galeria
   ============================================================ */
.piece{
  background:linear-gradient(180deg,var(--void) 0%,var(--green-deep) 100%);
  padding:clamp(6rem,13vw,11rem) 0;
}
.piece-head{text-align:center;max-width:64ch;margin:0 auto clamp(3.5rem,7vw,5.5rem)}
.piece-head h2{font-size:clamp(2rem,5.4vw,3.8rem);margin-bottom:1.4rem}
.piece-head .lede{margin-inline:auto;text-align:center}

.piece-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.1rem;
}
@media(min-width:760px){
  .piece-grid{grid-template-columns:repeat(6,1fr)}
  .piece-grid figure:nth-child(1){grid-column:span 4}
  .piece-grid figure:nth-child(2){grid-column:span 2}
  .piece-grid figure:nth-child(3){grid-column:span 2}
  .piece-grid figure:nth-child(4){grid-column:span 2}
  .piece-grid figure:nth-child(5){grid-column:span 2}
}
.piece-grid figure{
  position:relative;margin:0;overflow:hidden;
  border:1px solid rgba(212,175,55,.14);
  background:var(--void-2);
}
.piece-grid img{
  width:100%;height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform 1.2s var(--ease-out),filter 1.2s var(--ease-out);
}
.piece-grid figure:hover img{transform:scale(1.045);filter:brightness(1.08)}
.piece-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.6rem 1.4rem .95rem;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(240,224,188,.9);
  background:linear-gradient(180deg,transparent,rgba(5,10,8,.9));
}

.piece-note{
  margin:3rem auto 0;
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  color:rgba(212,175,55,.72);
  font-size:clamp(1rem,2vw,1.25rem);
}

/* ============================================================
   NÚMEROS
   ============================================================ */
.stats{
  background:var(--green);
  padding:clamp(4.5rem,9vw,7rem) 0;
  border-block:1px solid rgba(212,175,55,.16);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(2.2rem,5vw,3rem);
  text-align:center;
}
@media(min-width:820px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-num{
  font-family:var(--serif);
  font-size:clamp(2.4rem,6vw,4rem);
  color:var(--gold);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat-lbl{
  margin-top:.9rem;
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(248,248,248,.62);
}

/* ============================================================
   DIFERENCIAIS
   ============================================================ */
.pillars{
  background:var(--green-deep);
  padding:clamp(6rem,12vw,10rem) 0;
}
.pillars-head{max-width:62ch;margin-bottom:clamp(3rem,6vw,4.5rem)}
.pillars-head h2{font-size:clamp(1.9rem,5vw,3.4rem);margin-bottom:1.3rem}

.pillar-grid{
  display:grid;grid-template-columns:1fr;gap:1px;
  /* Fundo ESCURO, não dourado. Os cartões entram com opacity:0, e um
     fundo claro atrás deles aparecia como uma faixa verde clara até a
     animação terminar — parecia carregamento travado. As linhas de 1px
     agora vêm do próprio cartão (box-shadow abaixo), então elas entram
     junto com ele em vez de ficarem esperando sozinhas na tela. */
  background:var(--green-deep);
  border:1px solid rgba(212,175,55,.14);
}
@media(min-width:700px){.pillar-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.pillar-grid{grid-template-columns:repeat(3,1fr)}}

/* Nenhuma célula vazia em nenhuma largura: o fundo dourado do container
   aparece por baixo das lacunas e destoa. Quando a última linha fica
   incompleta, o cartão final ocupa o espaço que sobrou. */
@media(min-width:700px) and (max-width:1039px){
  .pillar:last-child:nth-child(odd){grid-column:span 2}
}
@media(min-width:1040px){
  .pillar:last-child:nth-child(3n+1){grid-column:span 3}
  .pillar:last-child:nth-child(3n+2){grid-column:span 2}
}

.pillar{
  background:var(--green-deep);
  box-shadow:0 0 0 1px rgba(212,175,55,.14);   /* preenche o gap de 1px */
  padding:clamp(2rem,3.6vw,2.8rem);
  transition:background .55s var(--ease);
}
.pillar:hover{background:var(--green)}
.pillar-ico{
  width:34px;height:34px;
  color:var(--gold);
  margin-bottom:1.5rem;
}
.pillar-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.1}
.pillar h3{
  font-size:1.16rem;margin-bottom:.75rem;color:var(--offwhite);
}
.pillar p{
  margin:0;font-size:.87rem;color:rgba(248,248,248,.6);line-height:1.72;
}

/* O cartão da loja ocupa a linha inteira (regra de última linha acima),
   então o conteúdo se abre em duas colunas com o botão à direita. */
.pillar--shop{background:linear-gradient(120deg,var(--green) 0%,var(--green-deep) 70%)}
.pillar--shop:hover{background:linear-gradient(120deg,var(--green-soft) 0%,var(--green) 70%)}
.pillar-shop-body{
  display:flex;flex-direction:column;gap:1.6rem;
  align-items:flex-start;
}
.pillar-shop-body p{max-width:62ch}
@media(min-width:900px){
  .pillar-shop-body{flex-direction:row;align-items:center;justify-content:space-between;gap:2.5rem}
  .pillar-shop-body .btn{flex:none}
}

/* ============================================================
   ATENDIMENTO (videochamada)
   ============================================================ */
.service{
  background:var(--void);
  padding:clamp(6rem,12vw,10rem) 0;
}
.service-grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2.5rem,6vw,4.5rem);
  align-items:center;
}
@media(min-width:900px){.service-grid{grid-template-columns:1.05fr .95fr}}
.service h2{font-size:clamp(1.9rem,4.6vw,3.2rem);margin-bottom:1.4rem}
.service-shot{
  position:relative;
  border:1px solid rgba(212,175,55,.2);
  overflow:hidden;
}
.service-shot img{width:100%;aspect-ratio:16/10;object-fit:cover}
.service-shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,40,27,.55));
}

/* ============================================================
   COMO FUNCIONA
   ============================================================ */
.steps{
  background:var(--green);
  padding:clamp(6rem,12vw,10rem) 0;
}
.steps-head{text-align:center;margin-bottom:clamp(3rem,6vw,4.5rem)}
.steps-head h2{font-size:clamp(1.9rem,5vw,3.4rem)}
.step-grid{
  display:grid;grid-template-columns:1fr;gap:1.6rem;
}
@media(min-width:660px){.step-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.step-grid{grid-template-columns:repeat(3,1fr)}}
.step{
  position:relative;
  padding:2rem 1.8rem 1.8rem;
  border:1px solid rgba(212,175,55,.18);
  background:rgba(0,40,27,.42);
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.step:hover{border-color:rgba(212,175,55,.45);transform:translateY(-4px)}
.step-n{
  font-family:var(--serif);
  font-size:2.3rem;color:rgba(212,175,55,.32);
  line-height:1;margin-bottom:1rem;
}
.step h3{font-size:1.05rem;margin-bottom:.55rem}
.step p{margin:0;font-size:.85rem;color:rgba(248,248,248,.6)}

/* ============================================================
   ESSÊNCIA / PORTFÓLIO DA FUNDADORA
   ============================================================ */
.essence{
  background:linear-gradient(180deg,var(--green) 0%,var(--void) 100%);
  padding:clamp(6rem,13vw,11rem) 0;
}
.essence-head{text-align:center;max-width:60ch;margin:0 auto clamp(3.2rem,6vw,4.8rem)}
.essence-head h2{font-size:clamp(2rem,5.2vw,3.6rem);margin-bottom:1.3rem}
.essence-head .lede{margin-inline:auto;text-align:center}

.portfolio{
  display:grid;grid-template-columns:1fr;gap:1.1rem;
  margin-bottom:clamp(3rem,6vw,4.5rem);
}
@media(min-width:780px){
  .portfolio{grid-template-columns:repeat(4,1fr)}
  .portfolio figure:nth-child(1){grid-column:span 1}
  .portfolio figure:nth-child(2){grid-column:span 1}
  .portfolio figure:nth-child(3){grid-column:span 2}
}
.portfolio figure{
  margin:0;position:relative;overflow:hidden;
  border:1px solid rgba(212,175,55,.16);
  background:var(--void-2);
}
.portfolio img{
  width:100%;height:100%;object-fit:cover;
  aspect-ratio:4/5;
  transition:transform 1.2s var(--ease-out);
}
.portfolio figure:nth-child(3) img{aspect-ratio:16/10}
.portfolio figure:hover img{transform:scale(1.04)}

.founder{
  display:grid;grid-template-columns:1fr;gap:2.4rem;
  align-items:start;
  max-width:960px;margin-inline:auto;
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(212,175,55,.16);
}
@media(min-width:820px){.founder{grid-template-columns:.85fr 1.15fr;gap:3.5rem}}
.founder-role{
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.9rem;
}
.founder h3{
  font-size:clamp(1.5rem,3.2vw,2.2rem);
  margin-bottom:0;
}
.founder p{margin:0;color:rgba(248,248,248,.66);font-size:.95rem}
.founder p+p{margin-top:1.1rem}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.voices{
  background:var(--void);
  padding:clamp(5.5rem,11vw,9rem) 0;
  border-top:1px solid rgba(212,175,55,.12);
}
.voices-head{text-align:center;margin-bottom:clamp(3rem,6vw,4.2rem)}
.voices-head h2{font-size:clamp(1.8rem,4.6vw,3rem)}
.voice-grid{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media(min-width:860px){.voice-grid{grid-template-columns:repeat(3,1fr)}}
.voice{
  padding:2.3rem 2rem;
  border:1px solid rgba(212,175,55,.16);
  background:rgba(0,40,27,.28);
  display:flex;flex-direction:column;
}
.voice-mark{
  font-family:var(--serif);font-size:3rem;line-height:.6;
  color:rgba(212,175,55,.35);margin-bottom:1.2rem;
}
.voice p{
  margin:0 0 1.8rem;
  font-family:var(--serif);font-style:italic;
  font-size:1.02rem;line-height:1.6;
  color:rgba(248,248,248,.82);
  flex:1;
}
.voice-who{font-size:.78rem;color:var(--gold-light)}
.voice-where{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,248,248,.42);margin-top:.3rem}

/* ============================================================
   CTA FINAL
   ============================================================ */
.finale{
  position:relative;
  padding:clamp(7rem,15vw,12rem) 0;
  text-align:center;
  overflow:hidden;
  background:var(--green-deep);
}
.finale-bg{position:absolute;inset:0;z-index:0}
.finale-bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.finale::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(90% 70% at 50% 50%,rgba(0,40,27,.55),rgba(5,10,8,.95));
}
.finale .wrap{position:relative;z-index:2}
.finale h2{
  font-size:clamp(2.1rem,6vw,4.4rem);
  max-width:17ch;margin:0 auto 1.6rem;
}
.finale .lede{margin-inline:auto;text-align:center;margin-bottom:2.8rem}
.finale-actions{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;
}


/* ============================================================
   RODAPÉ
   ============================================================ */
.foot{
  background:var(--void);
  padding:clamp(3.5rem,7vw,5rem) 0 2.5rem;
  border-top:1px solid rgba(212,175,55,.14);
}
.foot-top{
  display:grid;grid-template-columns:1fr;gap:2.5rem;
  align-items:start;
  padding-bottom:2.8rem;
  border-bottom:1px solid rgba(212,175,55,.1);
}
@media(min-width:820px){.foot-top{grid-template-columns:1.2fr .8fr;gap:4rem}}
.foot-logo{width:150px;margin-bottom:1.4rem}
.foot p{margin:0;font-size:.85rem;color:rgba(248,248,248,.55);max-width:44ch}
.foot-links{
  display:flex;flex-direction:column;gap:.75rem;
  font-size:.78rem;color:rgba(248,248,248,.62);
}
.foot-links a{display:inline-flex;align-items:center;gap:.6rem;transition:color .35s}
.foot-links a:hover{color:var(--gold-light)}
.foot-links svg{width:15px;height:15px;flex:none;color:var(--gold)}
.foot-quote{
  margin:2.8rem 0 0;
  text-align:center;
  font-family:var(--serif);font-style:italic;
  color:rgba(212,175,55,.7);
  font-size:clamp(.95rem,2vw,1.15rem);
}
.foot-legal{
  margin:1.6rem 0 0;text-align:center;
  font-size:.66rem;letter-spacing:.12em;
  color:rgba(248,248,248,.35);
}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{
  position:fixed;right:1.3rem;bottom:1.3rem;z-index:800;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--green-deep);
  box-shadow:0 16px 40px -14px rgba(212,175,55,.9);
  opacity:0;visibility:hidden;
  transform:translateY(14px) scale(.9);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
}
.wa-float.is-in{opacity:1;visibility:visible;transform:none}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:26px;height:26px}