/* ============================================================
   ARARA HOSTING — Design System
   Editorial quiet-luxury: papel creme, hairlines, tipografia leve
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Cor */
  --paper:      #F6F1E6;
  --paper-2:    #EFE9DA;
  --paper-3:    #E7E0CE;
  --ink:        #1C1F17;
  --ink-2:      #262A1E;
  --olive:      #606D49;
  --olive-d:    #4B5639;
  --olive-l:    #8A9670;
  --sand:       #B9B4A8;
  --muted:      #6E6E64;
  --muted-l:    rgba(246,241,230,.62);
  --accent:     #A8503F;
  --line:       rgba(28,31,23,.13);
  --line-l:     rgba(246,241,230,.16);

  /* Tipografia */
  --sans: "Inter Tight","Segoe UI Variable Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif: "Playfair Display",Georgia,"Times New Roman",serif;

  --t-hero:  clamp(2.35rem, 5.1vw, 4.6rem);
  --t-h2:    clamp(2rem, 4.4vw, 3.9rem);
  --t-h3:    clamp(1.1rem, 1.5vw, 1.35rem);
  --t-body:  clamp(1rem, 1.05vw, 1.125rem);
  --t-micro: .688rem;

  /* Ritmo */
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --sec-y: clamp(5rem, 11vw, 10rem);
  --maxw: 1440px;
  --rail-h: 72px;

  /* Movimento */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  color-scheme:light;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:300;
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip (e não hidden): hidden força overflow-y:auto no body e quebra
     o position:sticky dos cards da Experiência. */
  overflow-x:clip;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:rgba(96,109,73,.15);
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,figcaption{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--olive);
  outline-offset:3px;
  border-radius:2px;
}
.sec--results :focus-visible,
.sec--xp :focus-visible,
.sec--cta :focus-visible,
.creed :focus-visible,
.hero :focus-visible{ outline-color:rgba(246,241,230,.85); }

::selection{ background:var(--olive); color:var(--paper); }

.skip-link{
  position:fixed; top:-100px; left:var(--gut); z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; border-radius:999px; font-size:.875rem;
  transition:top .25s var(--ease);
}
.skip-link:focus-visible{ top:1rem; }

.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

.grain{
  position:fixed; inset:0; z-index:150; pointer-events:none;
  opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.wrap{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:max(var(--gut), env(safe-area-inset-left));
}
.sec{ position:relative; padding-block:var(--sec-y); }
.sec + .sec{ border-top:1px solid var(--line); }
[id]{ scroll-margin-top:calc(var(--rail-h) + 1.5rem); }

/* ---------- Tipografia utilitária ---------- */
.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-size:var(--t-micro); font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--olive);
}
.eyebrow--light{ color:var(--muted-l); }
.eyebrow .dot{
  width:5px; height:5px; border-radius:50%;
  background:currentColor; flex:none;
  animation:pulse 3.2s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{opacity:.35;transform:scale(1)} 50%{opacity:1;transform:scale(1.35)} }

.sec__title{
  font-size:var(--t-h2); font-weight:200; line-height:1.06;
  letter-spacing:-.035em; text-wrap:balance;
  margin-top:1.25rem;
}
.sec__title i, .hero__title i, .creed i, .xp__close i, .testi--lead i{
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.01em;
}
.sec__title--light{ color:var(--paper); }
.sec__intro{
  max-width:min(46ch, 100%); color:var(--muted); text-wrap:pretty;
  margin-top:1.25rem;
}
.sec__intro--light{ color:var(--muted-l); }
.sec__head{ margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.sec__head--split{
  display:flex; flex-wrap:wrap; gap:2rem clamp(2rem,6vw,6rem);
  align-items:flex-end; justify-content:space-between;
}
.sec__foot{ margin-top:clamp(2.5rem,5vw,4rem); }

/* ---------- Botões ---------- */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:currentColor; --fill:var(--ink); --fg-hover:var(--paper);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding:1rem 1.9rem; border:1px solid var(--bd); border-radius:999px;
  color:var(--fg);
  background-color:var(--bg);
  background-image:linear-gradient(var(--fill),var(--fill));
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-size:100% 0%;
  font-size:.813rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; touch-action:manipulation;
  transition:background-size .55s var(--ease-out), color .4s var(--ease),
             border-color .45s var(--ease), transform .45s var(--ease);
}
.btn:hover,.btn:focus-visible{ background-size:100% 100%; color:var(--fg-hover); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--solid{ --bg:var(--ink); --fg:var(--paper); --bd:var(--ink); --fill:var(--olive); }
.btn--solid:hover,.btn--solid:focus-visible{ border-color:var(--olive); }
.btn--ghost{ --fg:var(--paper); --bd:rgba(246,241,230,.42); --fill:var(--paper); --fg-hover:var(--ink); }
.btn--ghost:hover,.btn--ghost:focus-visible{ border-color:var(--paper); }
.sec--challenges .btn--ghost,
.sec--method .btn--ghost{ --fg:var(--ink); --bd:var(--line); --fill:var(--ink); --fg-hover:var(--paper); }
.btn--block{ width:100%; }
.btn--pill{ padding:.7rem 1.35rem; font-size:.688rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.7rem;
  margin-top:2rem; padding-bottom:.35rem;
  font-size:.813rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--olive); border-bottom:1px solid rgba(96,109,73,.3);
  transition:color .35s var(--ease), border-color .35s var(--ease), gap .35s var(--ease);
}
.link-arrow::after{ content:"→"; }
.link-arrow:hover{ color:var(--ink); border-color:var(--ink); gap:1.1rem; }

.star{ color:var(--olive); }
.stars{ color:var(--paper); letter-spacing:.18em; font-size:.75rem; }


/* ============================================================
   HEADER / RAIL
   ============================================================ */
.rail{
  position:fixed; inset:0 0 auto; z-index:100;
  padding-top:env(safe-area-inset-top);
  transition:background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
  border-bottom:1px solid transparent;
  color:var(--paper);
}
.rail.is-stuck{
  background-color:rgba(246,241,230,.82);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  backdrop-filter:saturate(1.6) blur(16px);
  border-bottom-color:var(--line);
  color:var(--ink);
}
.rail__inner{
  height:var(--rail-h);
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:max(var(--gut), env(safe-area-inset-left));
}
/* Logotipo oficial: dois SVGs empilhados (claro/escuro) que se cruzam em
   opacidade conforme o header fica sticky — sem filter a fingir cor. */
.rail__logo{ position:relative; display:block; width:86px; height:30px; flex:none; }
.rail__mark{
  position:absolute; inset:0; width:100%; height:100%;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.rail__mark--light{ opacity:1; }
.rail__mark--dark{ opacity:0; }
.rail.is-stuck .rail__mark--light{ opacity:0; }
.rail.is-stuck .rail__mark--dark{ opacity:1; }
.rail__logo:hover .rail__mark{ transform:translateY(-2px); }


/* margin-inline:auto centraliza o menu e empurra o CTA para a direita —
   antes quem fazia esse trabalho era o rótulo "Hospitalidade Premium"
   (flex:1), que foi removido do header. */
.rail__nav{ display:flex; gap:clamp(1rem,2vw,2rem); flex:none; margin-inline:auto; }
.rail__nav a{
  position:relative; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  opacity:.78; transition:opacity .3s var(--ease);
}
.rail__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.rail__nav a:hover{ opacity:1; }
.rail__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.rail__nav a.is-active{ opacity:1; }
.rail__nav a.is-active::after{ transform:scaleX(1); }

.rail__cta{ flex:none; --bd:currentColor; --fg:currentColor; --fill:var(--paper); --fg-hover:var(--ink); }
.rail.is-stuck .rail__cta{ --fill:var(--ink); --fg-hover:var(--paper); }

.rail__burger{
  display:none; flex:none; width:44px; height:44px; padding:0;
  margin-left:auto; /* sem o rótulo, é o burger que precisa ir para a direita */
  background:none; border:0; cursor:pointer; touch-action:manipulation;
  place-items:center; align-content:center; gap:6px;
}
.rail__burger span{
  display:block; width:20px; height:1px; background:currentColor; margin-inline:auto;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.rail__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.rail__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.rail__progress{ height:1px; max-width:var(--maxw); margin-inline:auto; }
.rail__progress i{ display:block; height:100%; width:0; background:var(--olive); }

.drawer{
  position:fixed; inset:var(--rail-h) 0 0; z-index:99;
  background:var(--paper); overscroll-behavior:contain;
  padding:clamp(2rem,8vw,4rem) var(--gut) calc(2rem + env(safe-area-inset-bottom));
  display:flex; align-items:center;
  animation:drawerIn .5s var(--ease-out) both;
}
.drawer[hidden]{ display:none; }
@keyframes drawerIn{ from{ opacity:0; transform:translateY(-12px);} to{opacity:1;transform:none;} }
.drawer__nav{ display:flex; flex-direction:column; gap:.35rem; width:100%; }
.drawer__nav a{
  display:flex; align-items:baseline; gap:1rem;
  padding:.9rem 0; border-bottom:1px solid var(--line);
  font-size:clamp(1.5rem,7vw,2.25rem); font-weight:200; letter-spacing:-.03em;
  transition:color .3s var(--ease), padding-left .35s var(--ease);
}
.drawer__nav a span{ font-size:.625rem; letter-spacing:.2em; color:var(--olive); }
.drawer__nav a:hover{ color:var(--olive); padding-left:.5rem; }
.drawer__cta{ margin-top:1.5rem; color:var(--olive); border-bottom:0 !important; }

/* ============================================================
   1. HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-block:calc(var(--rail-h) + 4rem) clamp(3rem,7vw,5rem);
  color:var(--paper); overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 60%;
  animation:heroZoom 2.4s var(--ease-out) both;
}
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
/* Legibilidade em duas camadas, para a foto continuar vívida:

   1) .hero__glass — desfoque PROGRESSIVO ancorado na base. O backdrop-filter
      é revelado por uma máscara que vai de opaco (embaixo) a transparente
      (no meio), então a imagem chega nítida no miolo e vai "derretendo" só
      atrás do texto. É o que dá legibilidade sem escurecer a cena.
   2) .hero__veil — scrim direcional bem mais leve que antes, agora só nos
      cantos onde há texto (topo p/ o nav, base-esquerda p/ o título).
      Cada gradiente termina em transparent, então o centro-direita da foto
      (villa, piscina, céu do entardecer) fica sem nenhum véu por cima. */
.hero__glass{
  position:absolute; left:0; right:0; bottom:0; height:62%;
  z-index:1; pointer-events:none;
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-mask-image:linear-gradient(to top, #000 0%, #000 26%, rgba(0,0,0,.55) 55%, transparent 100%);
  mask-image:linear-gradient(to top, #000 0%, #000 26%, rgba(0,0,0,.55) 55%, transparent 100%);
}
/* Segunda camada de vidro, agora vinda da ESQUERDA: cobre a altura toda do
   título (que fica acima da faixa inferior) e some antes da metade da tela,
   então a villa e o céu à direita continuam nítidos. Empilhada sobre a
   anterior, o canto inferior-esquerdo — onde o texto é mais denso — recebe
   as duas e fica com o vidro mais fechado. */
.hero__glass--left{
  position:absolute; left:0; top:0; bottom:0; width:58%;
  z-index:1; pointer-events:none;
  -webkit-backdrop-filter:blur(13px) saturate(1.06);
  backdrop-filter:blur(13px) saturate(1.06);
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 30%, rgba(0,0,0,.5) 62%, transparent 100%);
  mask-image:linear-gradient(to right, #000 0%, #000 30%, rgba(0,0,0,.5) 62%, transparent 100%);
}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    /* elipse ancorada na esquerda, na altura exata do título: derruba os
       pontos quentes (janelas acesas) que faziam o contraste medido cair
       para 2,5:1 em trechos da 1ª e 3ª linha. Fecha antes de 80% da largura,
       então a villa e a piscina à direita continuam sem véu. */
    radial-gradient(78% 44% at 2% 52%, rgba(18,21,14,.46) 0%, rgba(18,21,14,.27) 50%, transparent 100%),
    linear-gradient(to bottom, rgba(18,21,14,.5) 0%, rgba(18,21,14,.16) 16%, transparent 32%),
    linear-gradient(to top, rgba(18,21,14,.82) 0%, rgba(18,21,14,.46) 24%, rgba(18,21,14,.1) 48%, transparent 62%),
    linear-gradient(100deg, rgba(18,21,14,.68) 0%, rgba(18,21,14,.3) 42%, transparent 66%);
}
.hero__content{
  position:relative; z-index:2; width:100%;
  /* Sombra ampla e suave (não um contorno duro): é a rede de segurança
     caso a foto do hero um dia seja trocada por uma mais clara. */
  text-shadow:0 1px 28px rgba(18,21,14,.55);
}
@media (min-width:961px){ .hero__content > *{ max-width:min(52rem, 60%); } }
.hero__title{
  font-size:var(--t-hero); font-weight:200; line-height:1.02;
  letter-spacing:-.042em; margin-top:1.75rem; text-wrap:balance;
}
.hero__title .line{ display:block; }
.hero__sub{
  max-width:min(44ch, 100%); margin-top:1.75rem;
  color:rgba(246,241,230,.78); text-wrap:pretty;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.5rem; }
.hero__actions .btn--solid{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); --fill:var(--olive); --fg-hover:var(--paper); }
.hero__proof{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin-top:2.25rem; font-size:.813rem; color:rgba(246,241,230,.62);
}
.hero__card{
  position:absolute; z-index:2; right:var(--gut); bottom:0;
  width:min(19rem, 34%);
  padding:1.5rem 1.6rem;
  background:rgba(20,23,16,.42);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(246,241,230,.16); border-radius:4px;
  transition:transform .6s var(--ease-out), background-color .6s var(--ease);
}
.hero__card:hover{ transform:translateY(-6px); background-color:rgba(20,23,16,.55); }
.hero__card-name{ font-size:1.25rem; font-weight:300; letter-spacing:-.02em; }

.hero__scroll{
  position:absolute; z-index:2; left:50%; translate:-50% 0; bottom:1.5rem;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.563rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(246,241,230,.5);
}
.hero__scroll i{ display:block; width:1px; height:38px; background:rgba(246,241,230,.3); position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--paper);
  animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }
.hero__scroll:hover{ color:var(--paper); }

/* ============================================================
   2. PORTFÓLIO — carrossel infinito
   ============================================================ */
.sec--marquee{ background:var(--paper); }
.sec--marquee .sec__head{ margin-bottom:clamp(2rem,4vw,3.25rem); }

.tag{
  padding:.25rem .6rem; border:1px solid rgba(246,241,230,.3); border-radius:999px;
  font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper);
  white-space:nowrap;
}

/* Pista dupla: a 2ª cópia (aria-hidden) emenda exatamente onde a 1ª termina,
   então ao deslizar -50% do container (= -100% de uma pista) o corte é
   invisível e o loop reinicia sem soluço. */
.marquee-stack{ display:flex; flex-direction:column; gap:clamp(1rem,2.5vw,1.75rem); }
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 min(var(--gut),6rem), #000 calc(100% - min(var(--gut),6rem)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 min(var(--gut),6rem), #000 calc(100% - min(var(--gut),6rem)), transparent 100%);
}
.marquee__group{ display:flex; width:max-content; animation:marquee-scroll 42s linear infinite; }
/* Segunda fileira: mesma animação tocada de trás pra frente — reaproveita
   a matemática do loop (ainda -50%↔0%) só que a pista entra pela direita. */
.marquee--reverse .marquee__group{ animation-direction:reverse; }
.marquee__track{
  display:flex; flex:none; gap:clamp(1.25rem,2.5vw,2rem);
  padding-inline:clamp(.625rem,1.25vw,1rem);
}
/* .marquee__group carrega DUAS pistas idênticas lado a lado (largura 2W);
   deslizar -50% do grupo = -1W = exatamente uma pista, então o quadro final
   é pixel-a-pixel igual ao inicial e o corte do loop não aparece. */
@keyframes marquee-scroll{ to{ transform:translateX(-50%); } }

.mcard{
  position:relative; flex:none; width:clamp(24rem,44vw,38rem);
  border-radius:4px; overflow:hidden;
  transition:transform .5s var(--ease-out);
}
.mcard:hover{ transform:translateY(-6px); }
.mcard__fig{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--paper-3);
}
.mcard__fig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(18,21,14,.85) 0%, rgba(18,21,14,.15) 45%, transparent 70%);
}
.mcard__fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.mcard:hover .mcard__fig img{ transform:scale(1.05); }
.mcard__info{
  position:absolute; z-index:1; left:1.5rem; right:1.5rem; bottom:1.35rem;
  color:var(--paper);
}
.mcard__loc{ font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:rgba(246,241,230,.7); }
.mcard__name{
  margin-top:.4rem; font-size:clamp(1.25rem,2.2vw,1.75rem);
  font-weight:300; letter-spacing:-.03em;
}
.mcard__rate{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  margin-top:.75rem; font-size:.813rem; color:rgba(246,241,230,.8);
}
.mcard__rate .star{ color:var(--paper); }

/* ============================================================
   3. QUEM SOMOS
   ============================================================ */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.about__body p + p{ margin-top:1.25rem; }
.about__body p{ color:var(--muted); max-width:min(52ch, 100%); text-wrap:pretty; }

.facts{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  margin-top:clamp(3rem,7vw,6rem); padding-top:2rem;
  border-top:1px solid var(--line);
}
.facts > div{ display:flex; flex-direction:column-reverse; gap:.5rem; }
.facts dt{ font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.facts dd{
  font-size:clamp(1.75rem,3.4vw,2.75rem); font-weight:200;
  letter-spacing:-.04em; line-height:1;
}
.facts .star{ font-size:.55em; margin-left:.12em; }

/* Credo — faixa escura full-bleed */
.creed{
  position:relative; overflow:hidden;
  margin-block:clamp(4rem,9vw,8rem);
  padding-block:clamp(4rem,8vw,7rem);
  background:
    radial-gradient(80% 120% at 85% 50%, rgba(96,109,73,.3), transparent 62%),
    var(--ink);
  color:var(--paper);
}
.creed__mark{
  position:absolute; right:-2%; top:50%; translate:0 -50%;
  width:clamp(16rem,34vw,32rem); height:auto;
  filter:brightness(0) invert(1); opacity:.06; pointer-events:none;
}
.creed blockquote{ position:relative; }
.creed p{
  font-size:clamp(1.6rem,3.6vw,3.1rem); font-weight:200;
  line-height:1.14; letter-spacing:-.038em; text-wrap:balance;
  max-width:min(24ch, 100%);
}

.where__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  margin-top:2.5rem; border-block:1px solid var(--line);
}
.where__grid li{
  background:var(--paper); padding:clamp(1.75rem,3vw,2.75rem) clamp(1.25rem,2vw,2rem);
  transition:background-color .5s var(--ease);
}
/* Desktop: faixa fina — padding vertical mínimo e nome colado no número. */
@media (min-width:961px){
  .where__grid li{ padding-block:12px; }
  .where__grid li h3{ margin-top:2px; }
}
.where__grid li:hover{ background-color:var(--paper-2); }
.where__grid .num{ font-size:.625rem; letter-spacing:.2em; color:var(--sand); }
.where__grid h3{
  margin-top:1.25rem; font-size:clamp(1.25rem,2.2vw,1.75rem);
  font-weight:200; letter-spacing:-.03em;
}

/* ============================================================
   4. RESULTADOS — linhas com números gigantes
   ============================================================ */
.sec--results{ background:var(--ink); color:var(--paper); border-top-color:transparent; }
.sec--results + .sec{ border-top-color:transparent; }
/* .btn--solid por padrão é escuro-sobre-claro; nesta seção o fundo já é
   escuro, então usa o mesmo swap para creme que o hero e o formulário usam. */
.sec--results .btn--solid{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); --fill:var(--olive); --fg-hover:var(--paper); }
/* No mobile o botão desce pro fim da seção (regra em @media 960px). */
.results__foot{ display:none; }
.metrics{ border-top:1px solid var(--line-l); }
.metric{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:minmax(9rem,26%) 1fr auto;
  gap:clamp(1rem,4vw,4rem); align-items:baseline;
  padding-block:clamp(2rem,4vw,3.25rem);
  border-bottom:1px solid var(--line-l);
}
.metric::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(96,109,73,.16);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .8s var(--ease-out);
}
.metric:hover::before{ transform:scaleX(1); }
.metric__num{
  font-size:clamp(2.5rem,6vw,5.25rem); font-weight:200;
  letter-spacing:-.05em; line-height:.92;
  transition:transform .6s var(--ease-out);
}
.metric:hover .metric__num{ transform:translateX(clamp(.5rem,1.5vw,1.25rem)); }
.metric__num .star{ color:var(--paper); font-size:.5em; margin-left:.08em; }
.metric__txt dt{
  font-size:clamp(1rem,1.6vw,1.375rem); font-weight:300; letter-spacing:-.022em;
  color:var(--paper);
}
.metric__txt p{ margin-top:.6rem; font-size:.938rem; color:var(--muted-l); max-width:min(52ch, 100%); text-wrap:pretty; }
.metric__i{ font-size:.688rem; letter-spacing:.2em; color:var(--olive-l); }

/* ============================================================
   5. DESAFIOS — escada diagonal
   ============================================================ */
.challenges{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
}
.chal{
  /* Espaço reservado pro numeral inteiro — ele nunca precisa ultrapassar
     essa área, então não depende de overflow:hidden/clip pra não vazar. */
  --pad: clamp(4.5rem,9vw,7.5rem);
  position:relative; isolation:isolate; overflow:hidden;
  margin-top:calc(var(--o) * clamp(1.5rem, 4vw, 4.5rem));
  padding-top:var(--pad);
  transition:transform .6s var(--ease-out);
}
.chal:hover{ transform:translateY(-6px); }
/* O fio cruza a base do numeral — não o meio — pra ele nunca ser cortado. */
.chal::before{
  content:""; position:absolute; left:0; right:0;
  top:calc(var(--pad) - .55rem);
  height:1px; background:var(--ink);
}
.chal__n{
  display:block; position:absolute; z-index:-1; right:0;
  top:calc(var(--pad) - 1em - .35rem);
  max-width:100%;
  font-size:clamp(2.75rem,6vw,5rem); font-weight:200; line-height:1;
  letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px rgba(168,80,63,.45);
  pointer-events:none; user-select:none;
  transition:color .6s var(--ease);
}
.chal:hover .chal__n{ color:rgba(168,80,63,.1); }
.chal__body{ position:relative; }
.chal h3{ font-size:clamp(1.15rem,1.9vw,1.5rem); font-weight:300; letter-spacing:-.026em; }
.chal p{ margin-top:.85rem; color:var(--muted); font-size:.938rem; text-wrap:pretty; }

/* ============================================================
   6. METODOLOGIA — 5 colunas com letra monumental
   ============================================================ */
.pillars{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:1px; background:var(--line);
  border-block:1px solid var(--line);
}
.pillar{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--paper);
  padding:clamp(1.5rem,2.4vw,2.25rem) clamp(1rem,1.6vw,1.5rem) clamp(2rem,3vw,3rem);
  display:flex; flex-direction:column;
  transition:background-color .55s var(--ease);
}
.pillar:hover{ background-color:var(--paper-2); }
.pillar__letter{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(4rem,7vw,7rem); line-height:.78; color:var(--olive);
  opacity:.28;
  transition:opacity .6s var(--ease), transform .8s var(--ease-out);
}
.pillar:hover .pillar__letter{ opacity:.85; transform:translateY(-6px); }
.pillar__i{
  position:absolute; top:clamp(1.5rem,2.4vw,2.25rem); right:clamp(1rem,1.6vw,1.5rem);
  font-size:.625rem; letter-spacing:.2em; color:var(--sand);
}
.pillar h3{
  margin-top:clamp(1.5rem,3vw,2.5rem);
  font-size:clamp(1.05rem,1.35vw,1.25rem); font-weight:300; letter-spacing:-.024em;
  text-wrap:balance;
}
.pillar p{ margin-top:.75rem; font-size:.875rem; color:var(--muted); text-wrap:pretty; }

/* ============================================================
   7. EXPERIÊNCIA — cards empilhando (sticky)
   ============================================================ */
.sec--xp{
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(96,109,73,.22), transparent 60%),
    var(--ink-2);
  color:var(--paper); border-top-color:transparent;
}
.sec--xp + .sec{ border-top-color:transparent; }
.xp{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem); align-items:start;
}
.xp__aside{
  position:sticky; top:calc(var(--rail-h) + clamp(2rem,5vw,4rem));
  align-self:start;
}
.xp__counter{
  display:flex; align-items:center; gap:.75rem;
  margin-top:clamp(2rem,4vw,3rem);
  font-size:.75rem; letter-spacing:.2em; color:var(--olive-l);
}
.xp__counter i{ display:block; width:36px; height:1px; background:var(--line-l); }
.xp__counter .num:first-child{ color:var(--paper); font-size:1rem; }
.xp__close{
  margin-top:clamp(2rem,4vw,3rem); padding-top:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--line-l);
  font-size:clamp(1rem,1.5vw,1.25rem); font-weight:300;
  letter-spacing:-.02em; line-height:1.45; color:rgba(246,241,230,.82);
  max-width:min(38ch, 100%); text-wrap:pretty;
}

.xp__stack{ display:flex; flex-direction:column; gap:clamp(1rem,2vw,1.5rem); }
.xpc{
  position:sticky;
  top:calc(var(--rail-h) + clamp(1.5rem,4vw,3rem) + var(--i) * 12px);
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(1rem,2vw,1.75rem);
  padding:clamp(1rem,1.6vw,1.25rem);
  background:var(--ink);
  border:1px solid var(--line-l); border-radius:4px;
  box-shadow:0 -18px 40px -24px rgba(0,0,0,.85);
  transition:border-color .5s var(--ease);
}
.xpc:hover{ border-color:rgba(246,241,230,.32); }
.xpc__media{ overflow:hidden; border-radius:3px; }
.xpc__media img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.xpc__body{ display:flex; flex-direction:column; justify-content:center; padding-block:.5rem; padding-right:.5rem; }
.xpc__i{ font-size:.625rem; letter-spacing:.2em; color:var(--olive-l); }
.xpc h3{
  margin-top:.85rem; font-size:clamp(1.15rem,1.8vw,1.6rem);
  font-weight:300; letter-spacing:-.028em; text-wrap:balance;
}
.xpc p{ margin-top:.85rem; font-size:.938rem; color:var(--muted-l); text-wrap:pretty; }

/* ============================================================
   8. DEPOIMENTOS — assimétrico
   ============================================================ */
.testis{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:start;
}
.testi--lead{
  padding:clamp(2rem,4vw,3.5rem);
  background:var(--ink); color:var(--paper); border-radius:3px;
}
.testi--lead .testi__stars{ color:var(--paper); }
.testi--lead blockquote p{
  font-size:clamp(1.35rem,2.6vw,2.2rem); font-weight:200;
  line-height:1.24; letter-spacing:-.032em; text-wrap:pretty;
}
.testi--lead .testi__who{ border-top-color:var(--line-l); }
.testi--lead .testi__who span{ color:var(--muted-l); }

.testi__rest{ display:grid; gap:clamp(1.5rem,2.5vw,2rem); }
.testi__rest .testi{
  padding:clamp(1.5rem,2.5vw,2.25rem);
  background:var(--paper-2); border:1px solid var(--line); border-radius:3px;
  transition:transform .6s var(--ease-out), background-color .6s var(--ease);
}
.testi__rest .testi:hover{ transform:translateY(-6px); background-color:var(--paper-3); }
.testi__rest blockquote p{ font-size:1rem; font-weight:300; line-height:1.55; letter-spacing:-.018em; text-wrap:pretty; }

.testi{ display:flex; flex-direction:column; }
.testi__stars{ color:var(--olive); letter-spacing:.2em; font-size:.75rem; }
.testi blockquote{ margin-top:1.35rem; flex:1; }
.testi__who{
  display:flex; flex-direction:column; gap:.25rem;
  margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--line);
}
.testi__who strong{ font-weight:400; font-size:.875rem; letter-spacing:.06em; }
.testi__who span{ font-size:.688rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   9. CTA / FORM
   ============================================================ */
.sec--cta{
  background:
    radial-gradient(70% 60% at 15% 15%, rgba(96,109,73,.28), transparent 62%),
    var(--ink);
  color:var(--paper); border-top-color:transparent;
}
.cta{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.cta__sub{ margin-top:1.5rem; color:var(--muted-l); max-width:min(38ch, 100%); }
.cta__list{ margin-top:2.5rem; display:grid; gap:0; }
.cta__list li{
  display:flex; align-items:baseline; gap:1rem;
  padding-block:1rem; border-bottom:1px solid var(--line-l);
  font-size:.938rem; color:rgba(246,241,230,.82);
}
.cta__list .num{ font-size:.625rem; letter-spacing:.2em; color:var(--olive-l); flex:none; }

.form{ display:grid; gap:1.35rem; }
.field{ display:grid; gap:.5rem; }
.field label{ font-size:.688rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-l); }
.field label span{ color:var(--olive-l); margin-left:.2em; }
.field input,
.field select{
  width:100%; padding:.9rem 0; border:0; border-bottom:1px solid var(--line-l);
  background:transparent; color:var(--paper);
  font-family:inherit; font-size:1rem; font-weight:300;
  border-radius:0;
  transition:border-color .4s var(--ease);
}
.field select{
  background-color:var(--ink); color:var(--paper);
  padding-inline:0; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23B9B4A8' stroke-width='1.2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .25rem center;
}
.field select option{ background:var(--ink); color:var(--paper); }
.field input::placeholder{ color:rgba(246,241,230,.32); }
.field input:hover,.field select:hover{ border-bottom-color:rgba(246,241,230,.4); }
.field input:focus-visible,.field select:focus-visible{ outline:0; border-bottom-color:var(--paper); box-shadow:0 1px 0 0 var(--paper); }
.field--check{ grid-template-columns:auto 1fr; align-items:start; gap:.75rem; margin-top:.5rem; }
.field--check input{ width:18px; height:18px; margin-top:.15rem; padding:0; accent-color:var(--olive-l); border-bottom:0; cursor:pointer; }
.field--check label{ letter-spacing:0; text-transform:none; font-size:.813rem; line-height:1.5; cursor:pointer; color:rgba(246,241,230,.7); }
.field--check .field__err{ grid-column:1 / -1; }
.field__err{ font-size:.75rem; color:#E0A79A; }
.form .btn--solid{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); --fill:var(--olive); --fg-hover:var(--paper); margin-top:.75rem; }
.form .btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }
.form__status{ font-size:.875rem; color:var(--olive-l); min-height:1.25rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--ink); color:var(--paper);
  padding-block:clamp(3rem,6vw,5rem);
  padding-bottom:calc(clamp(3rem,6vw,5rem) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-l);
}
.foot__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; }
.foot__brand{ display:block; transition:transform .5s var(--ease-out); }
.foot__brand:hover{ transform:translateY(-2px); }
.foot__brand img{ height:40px; width:auto; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.25rem 2rem; }
.foot__nav a{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-l); transition:color .3s var(--ease); }
.foot__nav a:hover{ color:var(--paper); }
.foot__legal{ font-size:.75rem; color:rgba(246,241,230,.4); }

/* ============================================================
   REVEAL
   ============================================================ */
/* `animation` (não `transition`) de propósito: `.rv` é aplicado em botões,
   cards etc. que já têm sua própria `transition` de hover. Como shorthand
   `transition` de especificidade igual sobrescreve por completo (não soma),
   `.rv` acabava apagando a transição de hover de tudo que revelava — o
   botão "esfriava" o hover sem nenhum aviso. `animation` é independente de
   `transition`, então nunca compete com o hover de ninguém. */
@keyframes rv-in{ to{ opacity:1; translate:none; } }
.rv{ opacity:0; translate:0 24px; }
.rv.is-in{
  animation:rv-in .9s var(--ease-out) both;
  animation-delay:var(--d, 0ms);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1180px){
  .rail__nav{ display:none; }
  .rail__burger{ display:grid; }
  .rail__cta{ display:none; }
  .pillars{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:960px){
  .about{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:repeat(2,1fr); }
  .where__grid{ grid-template-columns:1fr; }
  .metric{ grid-template-columns:1fr; gap:1rem; align-items:start; }
  .metric__i{ display:none; }
  .sec--results .sec__head--split > .btn{ display:none; }
  .results__foot{ display:block; }
  .challenges{ grid-template-columns:1fr; }
  .chal{ margin-top:0; }
  .chal__n{ right:auto; left:0; }
  .testis{ grid-template-columns:1fr; }
  .cta{ grid-template-columns:1fr; }
  .hero__card{ position:static; width:100%; max-width:none; margin-top:2.5rem; }
  .hero__scroll{ display:none; }

  /* Experiência: uma coluna, texto no topo, cards ainda empilham */
  .xp{ grid-template-columns:1fr; }
  .xp__aside{ position:static; }
  .xp__close{ display:none; }
  .xpc{ top:calc(var(--rail-h) + 1rem + var(--i) * 8px); }
}
@media (max-width:640px){
  :root{ --rail-h:64px; }
  .hero__actions .btn{ flex:1 1 100%; }
  .pillars{ grid-template-columns:1fr; }
  .pillar__letter{ font-size:3.5rem; }
  .xpc{ grid-template-columns:1fr; }
  .xpc__media img{ aspect-ratio:16/10; }
  .foot__inner{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rv{ opacity:1; translate:none; }
  /* A regra genérica acima só encurta a animação pra .01ms — no carrossel
     isso travaria o quadro na metade do loop. Aqui ela é desligada de vez
     e a pista vira uma faixa comum, navegável por scroll/arraste. */
  .marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .marquee__group{ animation:none !important; }
  .marquee__track[aria-hidden="true"]{ display:none; }
}

@media print{
  .rail,.drawer,.grain,.hero__scroll{ display:none !important; }
  .rv{ opacity:1; translate:none; }
  .xpc,.xp__aside{ position:static; }
}