/* ===========================================================
   RUTH VIANNA VISAGE — Landing page
   Direção visual fiel ao layout de referência aprovado:
   papel off-white, faixas verde-floresta, acento bronze,
   fios de 1px, tipografia editorial (Playfair Display + Jost)
   e fotografia com sangria nas laterais.
   =========================================================== */

/* ===========================================================
   FONTES — self-hosted
   Playfair Display e Jost em woff2 variável, subsets latin e
   latin-ext (latin já cobre todo o português; latin-ext entra
   para nomes estrangeiros). Servir daqui tira duas conexões
   externas do caminho crítico e elimina a dependência de CDN.
   =========================================================== */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/playfair-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  /* superfícies */
  --paper:        #FDFCFA;
  --paper-warm:   #F6F2EA;
  --white:        #FFFFFF;

  /* verdes */
  --green:        #163223;
  --green-deep:   #0E2A1B;
  --green-darker: #0A2115;
  --green-ink:    #14281C;

  /* bronze / tan */
  --tan:          #A17D46;
  --tan-deep:     #8A6936;
  --tan-soft:     #C9BE96;
  --tan-line:     rgba(161,125,70,.36);
  --gold:         #E3A537;

  /* texto */
  --text:         #3B423C;
  --text-mute:    #6D746B;
  --cream:        #F4F1E8;
  --cream-soft:   rgba(244,241,232,.82);
  --cream-mute:   rgba(244,241,232,.62);

  /* fios */
  --hairline:     rgba(20,40,28,.13);
  --hairline-on-green: rgba(244,241,232,.24);

  /* tipografia */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* layout */
  --maxw: 1280px;
  --gut: clamp(20px, 4.5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

html { -webkit-text-size-adjust: 100%; }

/* rolagem suave só para quem não pediu menos movimento */
.motion-on { scroll-behavior: smooth; }

/* seleção de texto nas cores da marca */
::selection { background: var(--tan-soft); color: var(--green-darker); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; }

/* ---------- tipografia base ---------- */
.eyebrow {
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.eyebrow--light { color: var(--tan-soft); }

.display {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--green-ink);
  line-height: 1.14;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: pretty;
}
.display--light { color: var(--cream); }

h2.display { font-size: clamp(27px, 3.3vw, 44px); }

.lede { margin: 0; font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.8; color: var(--text); }
.lede--light { color: var(--cream-soft); }

.hair { height: 1px; background: var(--hairline); border: 0; margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 10px; z-index: 99;
  background: var(--green-deep); color: var(--cream);
  padding: 14px 20px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.skip-link:focus { left: 10px; }

/* ---------- marca ---------- */
.wordmark { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.wordmark__mono {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--green-ink);
}
.wordmark__name {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--green-ink);
  white-space: nowrap;
}
.wordmark__sub {
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--tan);
  white-space: nowrap;
}
.wordmark--light .wordmark__mono,
.wordmark--light .wordmark__name { color: var(--cream); }
.wordmark--light .wordmark__sub { color: var(--tan-soft); }

/* ---------- botões ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 60px;
  padding: 16px 26px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .13em;
  line-height: 1.35;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn .arw { flex: none; width: 26px; height: 10px; color: var(--tan-soft); transition: transform .3s var(--ease); }
.btn:hover .arw { transform: translateX(5px); }

.btn--solid { background: var(--green-deep); color: var(--cream); }
.btn--solid:hover { background: #123522; transform: translateY(-1px); }

.btn--tan { background: var(--tan-soft); color: var(--green-ink); }
.btn--tan .arw { color: var(--green-deep); }
.btn--tan:hover { background: #D6CDA8; transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--cream); border: 1px solid var(--hairline-on-green); }
.btn--ghost:hover { background: rgba(244,241,232,.07); border-color: rgba(244,241,232,.5); }

.btn--sm { min-height: 52px; padding: 14px 22px; font-size: 11.5px; gap: 20px; }
.btn--block { width: 100%; }

/* ---------- seções ---------- */
.section { padding: clamp(64px, 8vw, 118px) 0; }
.shell { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* =========================================================
   1 · HERO — abertura cinematográfica
   A sequência de 80 frames é dirigida pelo scroll: o trilho
   alto (.hero-scroll) rola enquanto o palco fica preso no topo.
   Sem JS, o trilho continua com altura natural e o pôster
   (frame 000) segura a primeira dobra normalmente.
   ========================================================= */
.hero-scroll { position: relative; background: var(--green-darker); }
.hero-scroll.is-seq { height: 235vh; }

.hero {
  position: relative;
  min-height: 480px;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--green-darker);
  isolation: isolate;
}
/* preso no topo, o palco tem que medir exatamente a viewport: qualquer
   min-height maior que 100vh faz o sticky vazar e cortar o rodapé da cena */
.hero-scroll.is-seq .hero { position: sticky; top: 0; min-height: 0; }

.hero__stage { position: absolute; inset: 0; z-index: 0; }
.hero__stage picture {
  position: absolute; inset: 0;
  display: block;
}
.hero__poster,
.hero__canvas {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
}
.hero__poster { object-fit: cover; object-position: 50% 46%; }
.hero__canvas { z-index: 1; opacity: 0; transition: opacity .5s var(--ease); }
.hero__canvas.is-live { opacity: 1; }

/* scrim lateral: existe para a copy ser legível e sai de cena junto com ela */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  will-change: opacity;
  background: linear-gradient(97deg,
    rgba(8,28,18,.86) 0%,
    rgba(8,28,18,.70) 26%,
    rgba(8,28,18,.26) 52%,
    rgba(8,28,18,.04) 76%,
    rgba(8,28,18,.10) 100%);
}
/* véu de base: fica o tempo todo, segura a legenda e fecha as bordas */
.hero__veil {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(8,28,18,.56) 0%, rgba(8,28,18,.07) 34%, rgba(8,28,18,0) 52%),
    radial-gradient(130% 96% at 50% 42%, rgba(8,28,18,0) 54%, rgba(8,28,18,.26) 100%);
}

.hero__copy {
  position: relative; z-index: 3;
  height: 100%;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 3.4vw, 56px) clamp(92px, 9vw, 124px) var(--gut);
  color: var(--cream);
  will-change: opacity, transform;
}
.hero__brand { margin-bottom: clamp(24px, 3.2vw, 42px); align-self: flex-start; }
.hero h1 { margin: 0 0 24px; }
.hero h1 .l1 {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--cream);
  font-size: clamp(29px, 3.45vw, 48px);
  line-height: 1.12;
  letter-spacing: -.008em;
  text-shadow: 0 1px 24px rgba(8,28,18,.45);
}
.hero h1 .l2 {
  display: block;
  margin-top: .12em;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--tan-soft);
  font-size: clamp(33px, 4.05vw, 56px);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-shadow: 0 1px 24px rgba(8,28,18,.45);
}
.hero__sub {
  max-width: 34em;
  margin: 0 0 clamp(26px, 3vw, 38px);
  color: var(--cream-soft);
}
.hero .btn { align-self: flex-start; max-width: 420px; }

/* legenda que assume quando a câmera chega no olho */
.hero__caption {
  position: absolute; z-index: 3;
  left: var(--gut); bottom: clamp(74px, 8vw, 104px);
  margin: 0;
  max-width: 20em;
  font-family: var(--serif);
  font-size: clamp(21px, 2.3vw, 34px);
  line-height: 1.22;
  color: var(--cream);
  text-shadow: 0 1px 28px rgba(8,28,18,.6);
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  pointer-events: none;
  will-change: opacity, transform;
}
.hero__caption .l1,
.hero__caption .l2 { display: block; }
.hero__caption .l2 { color: var(--tan-soft); }

/* convite para rolar */
.hero__cue {
  position: absolute; z-index: 3;
  left: var(--gut); bottom: clamp(26px, 3vw, 42px);
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--cream-mute);
  will-change: opacity;
}
.hero__cue-line {
  display: block; position: relative;
  width: 58px; height: 1px;
  background: rgba(244,241,232,.24);
  overflow: hidden;
}
.hero__cue-line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--tan-soft);
  transform: translateX(-100%);
  animation: cue-sweep 2.6s var(--ease) infinite;
}
@keyframes cue-sweep {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

/* =========================================================
   2 · IDENTIFIQUE-SE + SOI
   ========================================================= */
.identify__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .72fr) minmax(0, 1.04fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: stretch;
}
.identify__col { display: flex; flex-direction: column; }

.questions { margin: clamp(26px, 3vw, 40px) 0 clamp(30px, 3.4vw, 44px); }
.questions p {
  margin: 0;
  padding: 22px 0;
  font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--text);
  max-width: 26em;
}
.questions p + p { border-top: 1px solid var(--hairline); }
.identify__col .btn { margin-top: auto; }

.identify__photo { position: relative; overflow: hidden; min-height: clamp(300px, 34vw, 480px); }
.identify__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }

.soi-title {
  margin: 0 0 26px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 2.15vw, 30px);
  line-height: 1.22;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.identify__body { max-width: 30em; margin: 0 0 clamp(24px, 2.6vw, 34px); }

.soi-card {
  background: var(--green-darker);
  color: var(--cream);
  padding: clamp(22px, 2.4vw, 30px);
  margin-bottom: 18px;
}
.soi-card p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--cream-soft); }
.soi-card__row { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.soi-card__mark {
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 52px);
  line-height: .9;
  letter-spacing: .04em;
  color: var(--tan-soft);
}
.soi-card__label { font-size: 15px; line-height: 1.4; color: var(--cream); }

/* =========================================================
   3 · MÉTODO (faixa verde)
   ========================================================= */
.method { background: var(--green); color: var(--cream); }
.method__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, .62fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
  padding: clamp(56px, 7vw, 104px) 0;
}
.method__copy .display { margin-bottom: 24px; }
.method__copy .lede { max-width: 30em; }
.method__strong {
  margin: 20px 0 clamp(28px, 3vw, 38px);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--cream);
}
.method .btn { max-width: 380px; }

/* Registro da Ruth durante o mapeamento visual. */
.topo {
  position: relative;
  min-height: 300px;
  aspect-ratio: 1;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.topo__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.topo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 54%, rgba(8,27,17,.72) 100%);
  pointer-events: none;
}
.topo__caption {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 16px;
  margin: 0;
  max-width: 25ch;
  text-align: right;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--cream);
}

.method__list { position: relative; margin: 0; padding: 0 0 0 clamp(20px, 2.4vw, 34px); list-style: none; }
.method__list::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--hairline-on-green);
}
.method__list li {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--cream);
  padding: clamp(8px, 1vw, 13px) 0;
}

/* =========================================================
   4 · AUTORIDADE + PROVA
   ========================================================= */
.authority__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .74fr) minmax(0, 1fr);
  gap: clamp(30px, 3.6vw, 54px);
  align-items: start;
}
.authority__col--divided { padding-left: clamp(24px, 3vw, 46px); border-left: 1px solid var(--hairline); }

.creds { margin: clamp(26px, 3vw, 38px) 0 clamp(30px, 3.4vw, 42px); padding: 0; list-style: none; }
.creds li {
  font-family: var(--serif);
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.45;
  color: var(--green-ink);
  position: relative;
  padding: 0 0 0 20px;
  margin-bottom: 20px;
}
.creds li::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px;
  background: var(--tan-line);
}
.creds li:last-child { margin-bottom: 0; }

.proof { text-align: left; }
.proof__title {
  margin: 0 0 clamp(24px, 2.8vw, 34px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.32;
  color: var(--green-ink);
}
.gwordmark {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: -.01em;
  line-height: 1;
  margin: 0 0 12px;
}
.gwordmark i { font-style: normal; }
.gwordmark i:nth-child(1) { color: #4285F4; }
.gwordmark i:nth-child(2) { color: #EA4335; }
.gwordmark i:nth-child(3) { color: #FBBC05; }
.gwordmark i:nth-child(4) { color: #4285F4; }
.gwordmark i:nth-child(5) { color: #34A853; }
.gwordmark i:nth-child(6) { color: #EA4335; }

.stars { display: flex; gap: 6px; margin-bottom: 14px; }
.stars svg { width: 20px; height: 19px; fill: var(--gold); }

.score { display: flex; align-items: baseline; gap: 12px; }
.score strong {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;   /* largura fixa: a contagem não reflui a linha */
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  color: var(--green-ink);
}
.score span { font-size: 14px; color: var(--text); }
.proof__note {
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--tan-line);
  font-size: 13.5px;
  color: var(--text-mute);
}

.quotes { display: grid; gap: 16px; }
.quote {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--white);
  border: 1px solid rgba(20,40,28,.08);
  border-radius: 10px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(20,40,28,.03), 0 10px 26px rgba(20,40,28,.05);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quote:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,40,28,.04), 0 16px 34px rgba(20,40,28,.08); }
.quote img { flex: none; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.quote p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--green-ink); }
.quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--text-mute); }

/* =========================================================
   5 · TRANSFORMAÇÃO
   ========================================================= */
.feel {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.55fr) minmax(0, .78fr);
  align-items: stretch;
}
.feel__photo { position: relative; overflow: hidden; min-height: clamp(300px, 34vw, 470px); }
.feel__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.feel__copy {
  padding: clamp(48px, 6vw, 92px) clamp(28px, 4vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
}
.feel__copy .display { margin-bottom: clamp(30px, 3.4vw, 44px); }
.feel__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feel__items div {
  padding: 4px clamp(14px, 1.6vw, 24px);
  font-family: var(--serif);
  font-size: clamp(15.5px, 1.25vw, 18.5px);
  line-height: 1.35;
  color: var(--green-ink);
}
.feel__items div { position: relative; }
.feel__items div + div::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--tan-line);
}
.feel__items div:first-child { padding-left: 0; }

.feel__box {
  background: var(--paper-warm);
  padding: clamp(32px, 3.6vw, 48px) clamp(24px, 2.8vw, 38px);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 2.8vw, 34px);
}
.feel__box p {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--green-ink);
}
.feel__box .btn { width: 100%; }

/* =========================================================
   6 · EXCLUSIVE (faixa verde)
   ========================================================= */
.exclusive { background: var(--green); color: var(--cream); overflow: hidden; }
.exclusive__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .8fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
  padding: clamp(54px, 6.5vw, 96px) 0;
}
.exclusive__copy .display { margin: 0; }
.exclusive__mid { padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--hairline-on-green); }
.exclusive__mid .lede { max-width: 34em; margin-bottom: clamp(26px, 3vw, 34px); }
.exclusive__mid .btn { max-width: 340px; }

.exc-card {
  position: relative;
  width: min(100%, 330px);
  aspect-ratio: 1.62;
  margin-left: auto;
  padding: clamp(18px, 2vw, 26px);
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(145deg, #0A1E13 0%, #17321F 58%, #0B2115 100%);
  border: 1px solid rgba(201,190,150,.42);
  box-shadow: 0 30px 60px rgba(0,0,0,.42);
  transform: rotate(-3deg);
}
.exc-card::before {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid rgba(201,190,150,.18);
  pointer-events: none;
}
.exc-card__tag {
  align-self: flex-end;
  font-size: 9px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--tan-soft);
}
.exc-card .wordmark { align-items: flex-start; align-self: flex-start; }
.exc-card .wordmark__mono { font-size: 30px; color: var(--tan-soft); }
.exc-card .wordmark__name { font-size: 11px; letter-spacing: .3em; color: var(--cream); }
.exc-card .wordmark__sub { font-size: 8px; color: var(--tan-soft); }

/* Cartão Exclusive: volume real, superfície acetinada e gravação dourada. */
.card3d { position: relative; width: calc(100% + 36px); max-width: 476px; min-width: 0; margin: -10px -18px; }
.card3d__stage { position: relative; width: 100%; height: 280px; touch-action: pan-y; outline-offset: -8px; }
.card3d.is-ready .card3d__stage { cursor: grab; }
.card3d.is-ready .card3d__stage.is-dragging { cursor: grabbing; }
.card3d__stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.card3d__stage:focus-visible { outline: 2px solid var(--tan-soft); }
.card3d__fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.card3d__fallback .exc-card { width: 88%; margin: 0; border-radius: 8px; }
.card3d__fallback .exc-card::before { border-radius: 4px; }
.card3d.is-ready .card3d__fallback { visibility: hidden; }
.card3d__controls { display: none; position: absolute; right: 8px; bottom: -4px; }
.card3d.is-ready .card3d__controls { display: block; }
.card3d__pause { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--tan-soft); background: transparent; cursor: pointer; opacity: .6; transition: opacity .2s; }
.card3d__pause[hidden] { display: none; }
.card3d__pause:hover, .card3d__pause:focus-visible { opacity: 1; }
.card3d__pause:focus-visible { outline: 1px solid var(--tan-soft); outline-offset: -5px; }
.card3d__play-icon, .card3d__pause[aria-pressed="true"] .card3d__pause-icon { display: none; }
.card3d__pause[aria-pressed="true"] .card3d__play-icon { display: block; }
.card3d__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* =========================================================
   7 · CTA FINAL + RODAPÉ
   ========================================================= */
.closing { padding: clamp(60px, 7.5vw, 110px) 0 clamp(40px, 5vw, 64px); text-align: center; }
.closing .eyebrow { margin-bottom: 18px; }
.closing .display { margin: 0 auto clamp(32px, 3.6vw, 46px); max-width: 24ch; }
.closing__cta { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); justify-content: center; }
.closing__cta .hair-grow { flex: 1 1 0; height: 1px; background: var(--tan-line); max-width: 300px; }
.closing__status {
  display: inline-flex; align-items: center; gap: 9px;
  margin: clamp(26px, 3vw, 34px) 0 0;
  font-size: 13px; color: var(--text-mute);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tan); flex: none; animation: pulse 2.4s ease-in-out infinite; }
.dot.is-open { background: #3F7D4E; }

.foot { padding: 0 0 clamp(34px, 4vw, 54px); text-align: center; }
.foot__mark { margin-bottom: 22px; }
.foot__info { margin: 0 auto; max-width: 62ch; font-size: 12.5px; line-height: 2.1; color: var(--text-mute); letter-spacing: .04em; }
.foot__info a { border-bottom: 1px solid var(--tan-line); }
.foot__info a:hover { color: var(--green-ink); border-color: var(--tan); }
.foot__legal { margin: 20px 0 0; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #9A9F97; }

/* ---------- pílula flutuante do WhatsApp ---------- */
.pill {
  position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 60;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 54px; padding: 14px 22px;
  background: var(--green-deep); color: var(--cream);
  font-size: 11.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  box-shadow: 0 16px 38px rgba(10,33,21,.32);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), background .25s var(--ease);
}
.pill.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.pill:hover { background: #123522; }
.pill .arw { width: 22px; height: 10px; color: var(--tan-soft); }

/* =========================================================
   SISTEMA DE MOTION — "editorial"
   Cinco gestos, sempre de entrada, nunca em loop:
     rise   fade curto para texto e botões
     lines  linha de título subindo por trás de uma máscara
     rule   fio de 1px sendo traçado (a assinatura da marca)
     wipe   fotografia abrindo de baixo para cima
     count  número correndo até o valor final
   Todo estado escondido vive atrás de .motion-on, que só entra
   via JS: sem script, ou com "reduzir movimento" ligado, a página
   nasce inteira e visível.
   ========================================================= */
:root {
  --ease-mask: cubic-bezier(.16,.84,.44,1);
  --anim-slow: .82s;
  --anim-base: .52s;
}

/* will-change só onde o movimento é contínuo (parallax e hero). Promover
   os ~60 elementos de entrada de uma vez criaria camadas de composição
   demais e gastaria memória de GPU sem ganho: são transições de uma
   passada só, em transform/opacity, que o compositor já resolve bem. */

/* rise */
.motion-on [data-anim="rise"] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--anim-base) var(--ease), transform var(--anim-base) var(--ease);
  transition-delay: var(--d, 0ms);
}
.motion-on [data-anim="rise"].is-in { opacity: 1; transform: none; }

/* lines: cada linha do título sobe por trás da própria máscara */
.ln {
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
.ln > span { display: block; }
.motion-on [data-anim="lines"] .ln > span {
  transform: translate3d(0, 108%, 0);
  transition: transform .78s var(--ease-mask);
  transition-delay: var(--d, 0ms);
}
.motion-on [data-anim="lines"].is-in .ln > span { transform: none; }

/* rule: fio de 1px traçado a partir da origem */
.motion-on [data-anim="rule"] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .68s var(--ease-mask);
  transition-delay: var(--d, 0ms);
}
.motion-on [data-anim="rule"].is-in { transform: none; }
.motion-on [data-anim="rule-y"] {
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform .72s var(--ease-mask);
  transition-delay: var(--d, 0ms);
}
.motion-on [data-anim="rule-y"].is-in { transform: none; }

/* wipe: a foto abre de baixo para cima e a imagem assenta de 1.06 para 1 */
.motion-on [data-anim="wipe"] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--anim-slow) var(--ease-mask);
  transition-delay: var(--d, 0ms);
}
.motion-on [data-anim="wipe"].is-in { clip-path: inset(0 0 0 0); }
.motion-on [data-anim="wipe"] > img:not([data-parallax]) {
  transform: scale(1.06);
  transition: transform 1.5s var(--ease);
  transition-delay: var(--d, 0ms);
}
.motion-on [data-anim="wipe"].is-in > img:not([data-parallax]) { transform: none; }

/* a folga de 8% existe para o deslocamento do parallax não descobrir a borda */
[data-parallax] { will-change: transform; }
.motion-on img[data-parallax] { transform: translate3d(0, 0, 0) scale(1.08); }

/* fios que nascem junto com o próprio item */
.motion-on [data-rule="y"]::before,
.motion-on .creds li::before,
.motion-on .feel__items div + div::before {
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform .72s var(--ease-mask);
  transition-delay: var(--d, 0ms);
}
.motion-on [data-rule="y"].is-in::before,
.motion-on .creds li.is-in::before,
.motion-on .feel__items div.is-in + div::before { transform: none; }

/* o fio horizontal do CTA final cresce para fora, a partir do botão */
.motion-on [data-anim="rule-r"] {
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .68s var(--ease-mask);
  transition-delay: var(--d, 0ms);
}
.motion-on [data-anim="rule-r"].is-in { transform: none; }

/* count: o número só aparece quando começa a correr */
.motion-on [data-anim="count"] { opacity: 0; transition: opacity .3s var(--ease); }
.motion-on [data-anim="count"].is-in { opacity: 1; }

/* as estrelas do Google entram uma a uma, bem de leve */
.motion-on .stars svg {
  opacity: 0;
  transform: scale(.72);
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.motion-on .stars.is-in svg { opacity: 1; transform: none; }

/* a marca do Google monta letra a letra */
.motion-on .gwordmark i {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.motion-on .gwordmark.is-in i { opacity: 1; transform: none; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Quem pediu menos movimento recebe a página parada. A classe .motion-on
   só entra via ?motion=1, para conferir a abertura numa máquina com
   "reduzir movimento" ligado no sistema. */
@media (prefers-reduced-motion: reduce) {
  :root:not(.motion-on) .dot { animation: none; }
  :root:not(.motion-on) .hero-scroll.is-seq { height: auto; }
  :root:not(.motion-on) .hero-scroll.is-seq .hero { position: relative; }
  :root:not(.motion-on) .hero__cue-line::after { animation: none; transform: none; }
  :root:not(.motion-on) .hero__copy { opacity: 1 !important; transform: none !important; }
  :root:not(.motion-on) .hero__caption { display: none; }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1080px) {
  .hero__copy { max-width: 36rem; }
  .hero__caption { max-width: 16em; }
  .method__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .method__list { grid-column: 1 / -1; padding-left: 0; border-top: 1px solid var(--hairline-on-green); padding-top: 12px; columns: 2; column-gap: 40px; }
  .method__list::before { display: none; }
  .authority__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .authority__col--quotes { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--hairline); }
  .quotes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .feel { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); }
  .feel__box { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .feel__box p { max-width: 30ch; }
  .feel__box .btn { width: auto; min-width: 300px; }
  .exclusive__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .exc-card { grid-column: 1 / -1; margin: 8px auto 0; transform: rotate(-2deg); }
  .card3d { grid-column: 1 / -1; width: 100%; margin: -12px auto; }
  .card3d__stage { height: 290px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero-scroll.is-seq { height: 195vh; }
  .hero__scrim {
    background: linear-gradient(0deg,
      rgba(8,28,18,.95) 0%,
      rgba(8,28,18,.78) 30%,
      rgba(8,28,18,.30) 58%,
      rgba(8,28,18,0) 82%);
  }
  .hero__veil {
    background:
      linear-gradient(0deg, rgba(8,28,18,.62) 0%, rgba(8,28,18,.08) 38%, rgba(8,28,18,0) 56%),
      radial-gradient(150% 84% at 50% 44%, rgba(8,28,18,0) 56%, rgba(8,28,18,.3) 100%);
  }
  .hero__copy {
    max-width: none;
    justify-content: flex-end;
    padding: clamp(28px, 7vw, 44px) var(--gut) clamp(98px, 23vw, 132px);
  }
  .hero__brand { margin-bottom: 22px; }
  .hero__sub { margin-bottom: 26px; max-width: none; }
  .hero .btn { align-self: stretch; max-width: none; }
  .hero__caption {
    right: var(--gut);
    bottom: clamp(98px, 23vw, 132px);
    max-width: none;
    font-size: clamp(23px, 7vw, 32px);
  }
  .hero__cue { bottom: clamp(22px, 5vw, 32px); }

  .identify__grid { grid-template-columns: 1fr; gap: 34px; }
  .identify__photo { min-height: 78vw; }
  .identify__col .btn { margin-top: 0; }

  .method__grid { grid-template-columns: 1fr; }
  .method__list { columns: 1; border-top: 1px solid var(--hairline-on-green); padding-top: 8px; }
  .topo { order: 3; }

  .authority__grid { grid-template-columns: 1fr; }
  .authority__col--divided { padding-left: 0; border-left: 0; padding-top: 32px; border-top: 1px solid var(--hairline); }

  .feel { grid-template-columns: 1fr; }
  .feel__photo { min-height: 78vw; }
  .feel__copy { padding: clamp(36px, 9vw, 52px) var(--gut); }
  .feel__items { grid-template-columns: 1fr; }
  .feel__items div { padding: 14px 0; }
  .feel__items div + div { border-top: 1px solid var(--tan-line); }
  .feel__items div + div::before { display: none; }
  .feel__box { padding: clamp(28px, 8vw, 40px) var(--gut); }
  .feel__box .btn { width: 100%; min-width: 0; }

  .exclusive__grid { grid-template-columns: 1fr; }
  .exclusive__mid { padding-left: 0; border-left: 0; padding-top: 26px; border-top: 1px solid var(--hairline-on-green); }

  .closing__cta .hair-grow { display: none; }
  .closing__cta .btn { width: 100%; }
  .pill { left: clamp(16px, 4vw, 24px); right: clamp(16px, 4vw, 24px); justify-content: center; }
}

/* =========================================================
   PASSE DE FIDELIDADE — referência editorial aprovada
   Proporções mais compactas, fotografia protagonista e
   ritmo vertical equivalente ao layout enviado pela cliente.
   ========================================================= */
@media (min-width: 1081px) {
  :root { --maxw: 1440px; --gut: clamp(54px, 6.7vw, 104px); }
  body { font-size: 15px; line-height: 1.58; }
  .section { padding: 54px 0; }
  .eyebrow { margin-bottom: 10px; font-size: 10.5px; }
  h2.display { font-size: clamp(31px, 2.65vw, 40px); }
  .lede { font-size: 15px; line-height: 1.55; }
  .btn { min-height: 50px; padding: 12px 22px; font-size: 10.5px; gap: 22px; }
  .btn--sm { min-height: 44px; padding: 10px 18px; font-size: 10px; }

  .hero__copy { max-width: 42rem; padding: 40px 56px clamp(96px, 8vw, 120px) var(--gut); }
  .hero__brand { margin-bottom: 26px; }
  .hero h1 { margin-bottom: 18px; }
  .hero h1 .l1 { font-size: clamp(38px, 3.15vw, 47px); line-height: 1.04; }
  .hero h1 .l2 { font-size: clamp(43px, 3.6vw, 54px); line-height: 1.01; }
  .hero__sub { margin-bottom: 24px; max-width: 36em; font-size: 14.5px; }

  .identify__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, .68fr) minmax(0, 1fr);
    gap: clamp(30px, 3.1vw, 48px);
  }
  .identify__photo { min-height: 490px; }
  .identify__photo img { object-position: 50% 31%; transform: scale(1.04); }
  .questions { margin: 18px 0 22px; }
  .questions p { padding: 15px 0; font-size: 14px; line-height: 1.48; }
  .soi-title { margin-bottom: 16px; font-size: clamp(23px, 2vw, 29px); }
  .identify__body { margin-bottom: 18px; }
  .soi-card { padding: 18px 20px; margin-bottom: 12px; }
  .soi-card p { font-size: 13px; line-height: 1.45; }
  .soi-card__row { margin-top: 10px; }
  .soi-card__mark { font-size: 44px; }
  .soi-card__label { font-size: 13px; }

  .method__grid {
    grid-template-columns: minmax(0, 1.03fr) minmax(0, 1.12fr) minmax(180px, .48fr);
    gap: clamp(28px, 3.2vw, 48px);
    padding: 48px 0;
  }
  .method__copy .display { margin-bottom: 14px; }
  .method__strong { margin: 10px 0 20px; font-size: 15px; }
  .topo {
    height: 326px;
    min-height: 0;
    aspect-ratio: auto;
  }
  .topo__photo { object-position: 50% 48%; }
  .topo__caption {
    right: 16px;
    bottom: 14px;
    max-width: 26ch;
    font-size: 8px;
  }
  .method__list { padding-left: 24px; }
  .method__list li { padding: 7px 0; font-size: 14px; }

  .authority__grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .72fr) minmax(0, 1fr);
    gap: clamp(26px, 3vw, 44px);
  }
  .authority__col--divided { padding-left: 28px; }
  .creds { margin: 18px 0 22px; }
  .creds li { margin-bottom: 11px; font-size: 14px; line-height: 1.35; }
  .proof__title { margin-bottom: 18px; font-size: 20px; }
  .gwordmark { margin-bottom: 8px; font-size: 30px; }
  .stars { margin-bottom: 8px; }
  .stars svg { width: 18px; height: 17px; }
  .score { margin: 10px 0; }
  .score strong { font-size: 29px; }
  .score span { font-size: 12px; }
  .proof__note { margin-top: 16px; padding-top: 14px; font-size: 11.5px; }
  .quotes { gap: 9px; }
  .quote { gap: 13px; padding: 12px 14px; border-radius: 8px; }
  .quote img { width: 48px; height: 48px; }
  .quote p { font-size: 12px; line-height: 1.38; }
  .quote cite { margin-top: 5px; font-size: 10.5px; }

  .feel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.55fr) minmax(0, .76fr); }
  .feel__photo { min-height: 372px; }
  .feel__photo img { object-position: 28% 50%; transform: none; }
  .feel__copy { padding: 38px 42px; }
  .feel__copy .display { margin-bottom: 24px; }
  .feel__items div { font-size: 15px; padding-inline: 18px; }
  .feel__box { padding: 28px 30px; gap: 20px; }
  .feel__box p { font-size: 15px; }

  .exclusive__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.12fr) minmax(300px, 1fr);
    gap: 30px; padding: 34px 0;
  }
  .exclusive__mid { padding-left: 30px; }
  .exclusive__mid .lede { margin-bottom: 18px; font-size: 13px; }
  .exc-card { width: 275px; }

  .closing { padding: 42px 0 20px; }
  .closing .eyebrow { margin-bottom: 8px; }
  .closing .display { margin-bottom: 22px; }
  .closing__status { margin-top: 16px; font-size: 10.5px; }
  .foot { padding-bottom: 22px; }
  .foot__mark { margin-bottom: 9px; }
  .foot__info { font-size: 10.5px; line-height: 1.55; }
  .foot__legal { margin-top: 9px; font-size: 8.5px; }
}

@media (max-width: 760px) {
  .identify__photo img { object-position: 50% 30%; }

  /* Alvos de toque: os três links do rodapé tinham 19px de altura. O padding
     leva a área tocável a 45px sem mexer no tamanho da letra. */
  .foot__info a {
    display: inline-block;
    padding: 13px 6px;
    margin: -13px 0;
  }

  /* Micro-tipografia: 8px e 9px são pequenos demais numa tela na mão. */
  .wordmark__sub { font-size: 9.5px; }
  .topo__caption { font-size: 10.5px; letter-spacing: .13em; }
  .feel__photo img { object-position: 28% 50%; }
  .closing { padding-bottom: 28px; }
  .foot { padding-inline: 20px; }
}