/* =========================================================================
   DESAFIO EMAGRESIM — landing page
   Paleta: azul petróleo · creme · branco (+ sage e taupe extraídos da logo)
   Tipografia: The Seasons (títulos) + Balgin (texto)
   ========================================================================= */

/* -------------------------------------------------------------------------
   FONTES DA MARCA
   Coloque os arquivos em assets/fonts/ com exatamente estes nomes.
   Aceita .woff2 (ideal, mais leve) ou .otf/.ttf — o navegador usa o que achar.
   Enquanto os arquivos não estiverem lá, a página cai automaticamente em
   Fraunces + Karla (Google Fonts) e continua funcionando.
   ------------------------------------------------------------------------- */

/* ---- DESCOMENTAR QUANDO OS ARQUIVOS DAS FONTES CHEGAREM -------------
   Enquanto não existem em assets/fonts/, ficam comentados para o site
   no ar não sair pedindo arquivo que não existe (404 a cada visita).
   Para ligar: apague esta linha de abertura e a de fechamento abaixo.

@font-face{
  font-family:"The Seasons"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/TheSeasons-Regular.woff2") format("woff2"),
      url("assets/fonts/TheSeasons-Regular.otf")   format("opentype"),
      url("assets/fonts/TheSeasons-Regular.ttf")   format("truetype");
}
@font-face{
  font-family:"The Seasons"; font-style:italic; font-weight:400; font-display:swap;
  src:url("assets/fonts/TheSeasons-Italic.woff2") format("woff2"),
      url("assets/fonts/TheSeasons-Italic.otf")   format("opentype"),
      url("assets/fonts/TheSeasons-Italic.ttf")   format("truetype");
}
@font-face{
  font-family:"The Seasons"; font-style:normal; font-weight:300; font-display:swap;
  src:url("assets/fonts/TheSeasons-Light.woff2") format("woff2"),
      url("assets/fonts/TheSeasons-Light.otf")   format("opentype"),
      url("assets/fonts/TheSeasons-Light.ttf")   format("truetype");
}
@font-face{
  font-family:"The Seasons"; font-style:italic; font-weight:300; font-display:swap;
  src:url("assets/fonts/TheSeasons-LightItalic.woff2") format("woff2"),
      url("assets/fonts/TheSeasons-LightItalic.otf")   format("opentype"),
      url("assets/fonts/TheSeasons-LightItalic.ttf")   format("truetype");
}
@font-face{
  font-family:"The Seasons"; font-style:normal; font-weight:700; font-display:swap;
  src:url("assets/fonts/TheSeasons-Bold.woff2") format("woff2"),
      url("assets/fonts/TheSeasons-Bold.otf")   format("opentype"),
      url("assets/fonts/TheSeasons-Bold.ttf")   format("truetype");
}

@font-face{
  font-family:"Balgin"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/Balgin-Regular.woff2") format("woff2"),
      url("assets/fonts/Balgin-Regular.otf")   format("opentype"),
      url("assets/fonts/Balgin-Regular.ttf")   format("truetype");
}
@font-face{
  font-family:"Balgin"; font-style:normal; font-weight:500; font-display:swap;
  src:url("assets/fonts/Balgin-Medium.woff2") format("woff2"),
      url("assets/fonts/Balgin-Medium.otf")   format("opentype"),
      url("assets/fonts/Balgin-Medium.ttf")   format("truetype");
}
@font-face{
  font-family:"Balgin"; font-style:normal; font-weight:600; font-display:swap;
  src:url("assets/fonts/Balgin-SemiBold.woff2") format("woff2"),
      url("assets/fonts/Balgin-SemiBold.otf")   format("opentype"),
      url("assets/fonts/Balgin-SemiBold.ttf")   format("truetype");
}
@font-face{
  font-family:"Balgin"; font-style:normal; font-weight:700; font-display:swap;
  src:url("assets/fonts/Balgin-Bold.woff2") format("woff2"),
      url("assets/fonts/Balgin-Bold.otf")   format("opentype"),
      url("assets/fonts/Balgin-Bold.ttf")   format("truetype");
}
@font-face{
  font-family:"Balgin"; font-style:italic; font-weight:400; font-display:swap;
  src:url("assets/fonts/Balgin-Italic.woff2") format("woff2"),
      url("assets/fonts/Balgin-Italic.otf")   format("opentype"),
      url("assets/fonts/Balgin-Italic.ttf")   format("truetype");
}

---- fim do bloco de fontes ---------------------------------------- */

:root{
  --ink:        #142629;   /* petróleo profundo — fundos escuros            */
  --ink-2:      #1B3236;   /* petróleo profundo, um passo acima             */
  --petrol:     #2F4A4E;   /* cor de marca                                  */
  --petrol-lt:  #4C6E72;
  --sage:       #6C7C73;   /* verde do logotipo — usado em progresso/checks  */
  --taupe:      #C9BDB0;   /* fita métrica do logotipo                      */
  --cream:      #F2EDE4;
  --cream-2:    #FAF7F1;
  --white:      #FFFFFF;

  --txt-dark:   #1D3236;
  --txt-mid:    #4A605F;
  --txt-light:  #E8E2D6;
  --txt-light-2:#A9B8B6;

  /* Fraunces e Karla ficam como rede de segurança: se os arquivos de
     The Seasons / Balgin não estiverem em assets/fonts/, a página usa eles. */
  --serif: "The Seasons", "Fraunces", Didot, "Bodoni 72", Georgia, serif;
  --sans:  "Balgin", "Karla", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --pad:  clamp(1.25rem, 5vw, 3.5rem);
  --r:    18px;

  --ease: cubic-bezier(.2,.7,.25,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--cream);
  color:var(--txt-dark);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.62;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
/* peso 400 = The Seasons Regular. O font-variation-settings só tem efeito
   no fallback variável (Fraunces); fontes estáticas ignoram sem problema. */
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:400; line-height:1.08;
  font-variation-settings:"SOFT" 0,"WONK" 1; letter-spacing:-.01em;
  /* distribui as linhas por igual em vez de deixar uma palavra órfã no fim */
  text-wrap:balance }
p{ margin:0 0 1em }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit }
em{ font-style:italic }
::selection{ background:var(--petrol); color:var(--cream) }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }
.center{ text-align:center }

/* ---------- tipografia de sistema --------------------------------------- */
.h1{
  font-size:clamp(2.7rem,1.4rem + 5.6vw,5.1rem);
  letter-spacing:-.015em;
  line-height:.96;              /* linhas mais próximas no título do hero */
  margin-bottom:1.4rem;
}
.h1 em{ color:var(--taupe) }

.h2{
  font-size:clamp(1.95rem,1.15rem + 3.1vw,3.35rem);
  letter-spacing:-.012em;
  margin-bottom:.55em;
}
.h2 em{ color:var(--petrol-lt) }
.h2--light em{ color:var(--taupe) }
.h2--wide{ max-width:16ch }
.h2--compacto{
  font-size:clamp(1.7rem,1.05rem + 2.4vw,2.65rem);
  line-height:.98; margin-bottom:.6em;
}
.h2--compacto em.destaque{ font-size:1.2em }
/* segunda linha maior que a primeira, para dar ênfase */
.h1 em.destaque, .h2 em.destaque{ display:block; font-size:1.28em; line-height:1.02 }
/* quebra de linha só no desktop: no celular o texto flui sozinho */
.br-desk{ display:none }
@media (min-width:820px){ .br-desk{ display:inline } }

/* No celular a coluna é estreita: as quebras pensadas para o desktop
   deixavam palavras soltas. Aqui o texto se equilibra sozinho e a segunda
   parte do título (o trecho em destaque) começa sempre em linha nova. */
@media (max-width:819px){
  .h1 br, .h2 br{ display:none }
  .h1 em, .h2 em{ display:block }
}
/* headline que precisa caber em uma linha só */
.h2--uma-linha{
  font-size:clamp(1.7rem,.95rem + 2.2vw,2.7rem);
  max-width:none;
}
.h3{ font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem); margin-bottom:.5em }

.lead{
  font-size:clamp(1.05rem,1rem + .3vw,1.2rem);
  line-height:1.6; max-width:60ch; color:var(--txt-light);
}
.lead--sm{ font-size:1.08rem }
.sub{
  max-width:62ch; color:var(--txt-mid);
  font-size:clamp(1rem,.97rem + .25vw,1.15rem);
  margin-bottom:3rem;
}
.center.sub{ margin-inline:auto }
/* para frases cuja quebra é controlada por <br>, não pelo limite de largura */
.sub--larga{ max-width:none }
/* estende para fora do container, para caber em 2 linhas.
   O clamp impede que passe da tela — 100vw sozinho conta a barra de rolagem
   e criaria scroll lateral. */
.sub.sub--extra{
  max-width:none;
  margin-inline:calc(-1 * clamp(0px, (100vw - 100%) / 2 - 24px, 165px));
}
.sub--light{ color:var(--txt-light-2) }

.eyebrow{
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--taupe); margin-bottom:1.4rem;
}
.eyebrow--dark{ color:var(--petrol-lt) }
.eyebrow.center{ text-align:center }

/* ---------- fita métrica (motivo gráfico da marca) ---------------------- */
.tape{
  height:16px; width:100%;
  background:
    repeating-linear-gradient(90deg,
      rgba(201,189,176,.55) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg,
      rgba(201,189,176,.28) 0 1px, transparent 1px 7px);
  background-size:100% 10px, 100% 5px;
  background-position:bottom left, bottom left;
  background-repeat:repeat-x;
}
.tape--bottom{ position:absolute; left:0; right:0; bottom:0; opacity:.5 }

/* ---------- régua de progresso lateral ---------------------------------- */
.ruler{
  position:fixed; left:14px; top:18vh; bottom:18vh; width:12px; z-index:40;
  background:repeating-linear-gradient(180deg,
      rgba(47,74,78,.28) 0 1px, transparent 1px 9px);
  pointer-events:none; display:none;
}
.ruler__fill{
  position:absolute; left:-4px; top:0; width:3px; border-radius:3px;
  background:var(--petrol); height:0;
  box-shadow:0 0 0 4px rgba(47,74,78,.09);
  transition:height .12s linear;
}
@media (min-width:1240px){ .ruler{ display:block } }

/* ---------- botões ------------------------------------------------------ */
.btn{
  --bg:var(--petrol); --fg:var(--cream-2);
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-weight:600; font-size:1rem;
  letter-spacing:.005em; text-decoration:none;
  padding:1.05em 1.9em; border:0; border-radius:14px; cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(20,38,41,.55) }
.btn:active{ transform:translateY(0) }
.btn__i{ width:1.15em; height:1.15em; flex:none; transition:transform .35s var(--ease) }
.btn:hover .btn__i{ transform:translateX(4px) }
.btn--cream{ --bg:var(--cream-2); --fg:var(--ink) }
.btn--petrol{ --bg:var(--petrol); --fg:var(--cream-2) }
.btn--lg{ font-size:1.05rem; padding:1.15em 2.15em }
.btn--sm{ padding:.72em 1.25em; font-size:.9rem }
.btn--block{ display:flex; width:100%; text-align:center }
@media (max-width:420px){
  .btn--lg{ font-size:.98rem; padding:1.05em 1.4em }
  .btn--block .btn__i{ display:none }
}

.link{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; color:var(--petrol); text-decoration:none;
  border-bottom:1px solid rgba(47,74,78,.3); padding-bottom:2px;
  transition:border-color .3s, gap .3s var(--ease);
}
.link svg{ width:1.05em; height:1.05em }
.link:hover{ border-color:var(--petrol); gap:.75em }

.dot{
  width:7px; height:7px; border-radius:50%; background:var(--taupe);
  display:inline-block; position:relative;
}
.dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--taupe); opacity:.6;
  animation:pulse 2.4s var(--ease) infinite;
}
.dot--dark{ background:var(--petrol) }
.dot--dark::after{ border-color:var(--petrol) }
@keyframes pulse{ 0%{transform:scale(.6);opacity:.7} 70%,100%{transform:scale(1.5);opacity:0} }

/* ---------- header ------------------------------------------------------ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(20,38,41,0); backdrop-filter:blur(0px);
  transition:background .4s var(--ease), backdrop-filter .4s, box-shadow .4s;
}
.nav.is-stuck{
  background:rgba(20,38,41,.88); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(201,189,176,.14);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:1rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__logo img{ width:auto; height:44px }
@media (max-width:560px){ .nav__logo img{ height:34px } .nav .btn{ display:none } }

/* ---------- seções ------------------------------------------------------ */
.sec{ padding:clamp(4.5rem,3rem + 7vw,8.5rem) 0; position:relative }
.sec--tight{ padding-top:clamp(2rem,1rem + 3vw,3.5rem) }
.sec--cream{ background:var(--cream) }
.sec--cream + .sec--cream{ padding-top:0 }
.sec--dark{ background:var(--ink); color:var(--txt-light) }
.sec--dark p{ color:var(--txt-light-2) }

/* ============================ HERO ====================================== */
.hero{
  position:relative; background:var(--ink); color:var(--txt-light);
  padding:clamp(6rem,4.5rem + 5vw,8.5rem) 0 clamp(3rem,2.5rem + 4vw,5rem);
  overflow:hidden;
}
.hero__glow{
  position:absolute; inset:-30% -10% auto -30%; height:120%;
  background:
    radial-gradient(60% 55% at 18% 30%, rgba(76,110,114,.55), transparent 70%),
    radial-gradient(45% 45% at 85% 12%, rgba(108,124,115,.35), transparent 70%);
  filter:blur(10px); pointer-events:none;
}
.hero__in{
  position:relative; display:grid; gap:clamp(2.5rem,2rem + 4vw,4rem);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:940px){ .hero__in{ grid-template-columns:1.04fr .96fr } }

.vagas{
  margin:0; display:inline-flex; align-items:center; gap:.55em;
  font-size:.92rem; letter-spacing:.04em; color:var(--taupe);
}
.hero__chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.hero__chips li{
  font-size:.83rem; letter-spacing:.03em; padding:.5em 1em;
  border:1px solid rgba(201,189,176,.28); border-radius:100px; color:var(--txt-light-2);
}

.hero__media{ position:relative }
.portrait{
  margin:0; border-radius:var(--r) var(--r) 140px 140px; overflow:hidden;
  background:linear-gradient(175deg,var(--white),var(--cream));
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6);
}
.portrait img{ width:100%; height:auto; mix-blend-mode:multiply }

/* a partir do desktop a foto sangra até a borda direita da tela:
   max() garante que em telas menores que o container ela sangre só o padding */
@media (min-width:940px){
  .hero__media{
    margin-right:calc(-1 * max(var(--pad), (100vw - var(--wrap))/2 + var(--pad)));
  }
  .portrait{ border-radius:var(--r) 0 0 160px }
  /* grande, mas sem empurrar o botão para fora da primeira tela:
     a base é aparada e o rosto continua enquadrado */
  .portrait{ max-height:74vh }
  .portrait img{ height:74vh; object-fit:cover; object-position:center 12% }
}

/* ============================ PROBLEMA ================================== */
.know{ margin:2.5rem 0 3.5rem; text-align:center }
.know__intro{ color:var(--txt-mid); margin-bottom:1.3rem }
.know__list{
  display:grid; gap:.8rem; text-align:left;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.know__list li{
  display:flex; align-items:center; gap:.75em;
  padding:1.3rem 1.4rem; border-radius:14px;
  background:var(--cream-2); border:1px solid rgba(47,74,78,.1);
  font-size:.97rem; color:var(--txt-mid);
}
.know__list svg{ width:19px; height:19px; color:var(--sage); flex:none }

.turn{
  border-top:1px solid rgba(47,74,78,.14); padding-top:2.6rem;
  display:grid; gap:1.5rem 3.5rem; grid-template-columns:1fr;
}
@media (min-width:860px){ .turn{ grid-template-columns:1.1fr .9fr; align-items:start } }
.turn__big{
  font-family:var(--serif); font-size:clamp(1.4rem,1.1rem + 1.4vw,2.15rem);
  line-height:1.24; letter-spacing:-.012em; margin:0;
}
.turn__big em{ color:var(--petrol-lt) }
.turn__small{ color:var(--txt-mid); margin:0 }

/* ============================ CARDS ===================================== */
.grid{ display:grid; gap:1.1rem }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) }
.card{
  background:var(--cream-2); border:1px solid rgba(47,74,78,.1);
  border-radius:var(--r); padding:1.8rem 1.6rem;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.card:hover{
  transform:translateY(-4px); border-color:rgba(47,74,78,.22);
  box-shadow:0 24px 40px -30px rgba(20,38,41,.5);
}
.card__ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(108,124,115,.14); color:var(--petrol); margin-bottom:1.1rem;
}
.card__ico svg{ width:21px; height:21px }
.card h3{ font-size:1.15rem; margin-bottom:.5rem; letter-spacing:-.01em }
.card p{ margin:0; font-size:.95rem; color:var(--txt-mid) }

/* ============================ JORNADA =================================== */
.journey .h2{ margin-bottom:3.5rem }
.steps{ display:grid; gap:0; border-top:1px solid rgba(201,189,176,.16) }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:1.5rem clamp(1.5rem,4vw,4rem);
  padding:2.1rem 0; border-bottom:1px solid rgba(201,189,176,.16);
  align-items:baseline; transition:background .4s;
}
.step:hover{ background:rgba(201,189,176,.04) }
.step__n{
  font-family:var(--serif); font-size:clamp(2.2rem,1.5rem + 2.4vw,3.6rem);
  line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(201,189,176,.55);
  transition:color .5s var(--ease), -webkit-text-stroke-color .5s;
}
.step:hover .step__n{ color:rgba(201,189,176,.9); -webkit-text-stroke-color:transparent }
.step h3{ color:var(--cream-2); font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem); margin-bottom:.45rem }
.step p{ margin:0; max-width:60ch }
@media (min-width:760px){ .step{ grid-template-columns:120px 1fr } }

/* ============================ PILARES =================================== */
.pillars{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-bottom:3rem;
}
.pillar{ text-align:center; position:relative }
.pillar__ring{ width:min(112px,60%); height:auto; transform:rotate(-90deg) }
.ring__bg{ fill:none; stroke:rgba(47,74,78,.1); stroke-width:7 }
.ring__fg{
  fill:none; stroke:var(--petrol); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:270; stroke-dashoffset:270;
  transition:stroke-dashoffset 1.4s var(--ease);
}
.is-in .ring__fg{ stroke-dashoffset:calc(270 - (270 * var(--dash) / 100)) }
.pillar__ico{
  position:absolute; top:0; left:50%; transform:translate(-50%,0);
  width:min(112px,60%); aspect-ratio:1; display:grid; place-items:center;
  color:var(--petrol);
}
.pillar__ico svg{ width:28px; height:28px }
.pillar p{
  margin:.9rem 0 0; font-size:.95rem; font-weight:600;
  letter-spacing:.02em; color:var(--petrol);
}
.pillars__note{
  max-width:60ch; margin-inline:auto; text-align:center; color:var(--txt-mid);
  padding-top:2rem; border-top:1px solid rgba(47,74,78,.13);
}
.pillars__note strong{ color:var(--petrol) }

/* ============================ O QUE VOCÊ RECEBE ========================= */
.recebe{
  display:grid; gap:clamp(2rem,1.5rem + 3vw,3.5rem); margin-top:1rem;
  align-items:center;
}
@media (min-width:900px){ .recebe{ grid-template-columns:1fr 1fr } }

.recebe__tit{
  display:flex; align-items:center; gap:.6em;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--petrol); margin:0 0 1.4rem; padding-bottom:1rem;
  border-bottom:1px solid rgba(47,74,78,.16);
}
.recebe__tit svg{ width:20px; height:20px; color:var(--sage); flex:none }

.recebe__lista{ display:grid; gap:.1rem }
.recebe__lista li{
  display:grid; grid-template-columns:auto 1fr; gap:.85em; align-items:start;
  padding:.95rem 0; border-bottom:1px solid rgba(47,74,78,.09);
  font-size:.98rem; color:var(--txt-mid);
}
.recebe__lista svg{ width:18px; height:18px; color:var(--sage); margin-top:.3em; flex:none }

.receitas{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem }
.receita{
  background:var(--cream-2); border:1px solid rgba(47,74,78,.11);
  border-radius:var(--r); padding:1.4rem 1.3rem;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s var(--ease);
}
.receita:hover{
  transform:translateY(-3px); border-color:rgba(47,74,78,.24);
  box-shadow:0 22px 38px -28px rgba(20,38,41,.5);
}
.receita__n{
  display:block; font-family:var(--serif); font-size:clamp(2rem,1.5rem + 1.6vw,2.8rem);
  line-height:1; color:var(--petrol); letter-spacing:-.02em; margin-bottom:.45rem;
}
.receita p{ margin:0; font-size:.9rem; line-height:1.45; color:var(--txt-mid) }
.receitas__total{
  margin:1.1rem 0 0; text-align:center; font-size:.9rem; color:var(--txt-mid);
  padding-top:1rem; border-top:1px solid rgba(47,74,78,.11);
}
.receitas__total strong{ color:var(--petrol) }

/* ============================ APP ======================================= */
.app__in{ display:grid; gap:clamp(3rem,2rem + 5vw,5rem); align-items:center }
@media (min-width:960px){ .app__in{ grid-template-columns:1.05fr .95fr } }
.app__list{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:1.8rem 0 2rem;
}
.app__list li{
  font-size:.87rem; padding:.5em 1em; border-radius:100px;
  background:rgba(201,189,176,.1); border:1px solid rgba(201,189,176,.2);
  color:var(--txt-light);
}
.rankbox{
  padding:1.2rem 1.5rem; border-radius:var(--r); margin-bottom:2.2rem;
  background:rgba(201,189,176,.07); border:1px solid rgba(201,189,176,.18);
}
.rankbox p{ margin:0; font-size:.98rem }
.rankbox strong{ color:var(--cream-2) }

/* mockup */
.phone{
  justify-self:center; width:min(320px,88%);
  border-radius:38px; padding:11px;
  background:linear-gradient(160deg,rgba(201,189,176,.4),rgba(201,189,176,.08));
  box-shadow:0 50px 90px -45px rgba(0,0,0,.85);
}
.phone__screen{
  background:var(--cream-2); border-radius:28px; padding:1.3rem 1.15rem 1.15rem;
  color:var(--txt-dark);
}
.phone__top{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--txt-mid); margin-bottom:1rem;
}
.phone__pts{
  background:var(--petrol); color:var(--cream-2); border-radius:100px;
  padding:.3em .8em; letter-spacing:.04em; font-weight:600;
}
.phone__hero{ position:relative; display:grid; place-items:center; margin-bottom:1.2rem }
.bigring{ width:150px; height:150px; transform:rotate(-90deg) }
.bigring .ring__bg{ stroke-width:7 }
.bigring .ring__fg{ stroke-width:7; stroke-dasharray:327; stroke-dashoffset:327; stroke:var(--petrol) }
.is-in .bigring .ring__fg{ stroke-dashoffset:calc(327 - (327 * var(--dash) / 100)) }
.bigring__txt{ position:absolute; text-align:center; line-height:1.15 }
.bigring__txt strong{ display:block; font-family:var(--serif); font-size:1.9rem; color:var(--petrol) }
.bigring__txt span{ font-size:.7rem; letter-spacing:.06em; color:var(--txt-mid) }
.phone__rows{ display:grid; gap:.6rem; margin-bottom:1.2rem }
.prow{ display:grid; grid-template-columns:1fr 90px; gap:.7rem; align-items:center; font-size:.82rem }
.prow span{ display:inline-flex; align-items:center; gap:.45em; color:var(--txt-mid) }
.prow svg{ width:15px; height:15px; color:var(--sage) }
.prow__bar{ display:block; height:6px; border-radius:6px; background:rgba(47,74,78,.12); overflow:hidden }
.prow__bar b{
  display:block; height:100%; width:0; border-radius:6px; background:var(--sage);
  transition:width 1.2s var(--ease) .2s;
}
.is-in .prow__bar b{ width:var(--p) }
.phone__rank{ border-top:1px solid rgba(47,74,78,.12); padding-top:.9rem }
.phone__rank p{
  margin:0 0 .55rem; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-mid);
}
.phone__rank li{
  display:grid; grid-template-columns:20px 1fr auto; gap:.6rem; align-items:center;
  font-size:.85rem; padding:.3rem 0; color:var(--txt-mid);
}
.phone__rank li span{
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:rgba(47,74,78,.1); font-size:.7rem; font-weight:600;
}
.phone__rank li b{ color:var(--petrol) }
.phone__rank .me{ color:var(--petrol); font-weight:600 }
.phone__rank .me span{ background:var(--petrol); color:var(--cream-2) }

/* ============================ PONTUAÇÃO ================================= */
.points{ display:grid; gap:.8rem; grid-template-columns:1fr }
@media (min-width:700px){ .points{ grid-template-columns:1fr 1fr } }
.point{
  display:flex; align-items:center; justify-content:space-between; gap:1.1rem;
  padding:1.3rem 1.5rem; border-radius:14px;
  background:var(--cream-2); border:1px solid rgba(47,74,78,.1);
  font-size:.95rem; color:var(--txt-mid);
}
.point b{
  font-family:var(--sans); font-size:.82rem; letter-spacing:.05em; font-weight:700;
  color:var(--cream-2); background:var(--sage); border-radius:100px;
  padding:.35em .85em; white-space:nowrap;
}
.points__note{
  max-width:62ch; margin:2.6rem auto 0; text-align:center; color:var(--txt-mid);
}
.points__note em{ color:var(--petrol); font-weight:500 }
.palavra-forte{
  display:block; margin-top:.35em;
  font-family:var(--serif); font-style:italic;
  font-size:1.9em; line-height:1.1; color:var(--petrol);
}

/* ============================ CARROSSEL ================================= */
.results .h2{ margin-bottom:2.6rem }
.carousel{ position:relative; margin-bottom:2.2rem }
.car__track{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.4rem var(--pad) 1.2rem; scrollbar-width:none; outline:none;
}
.car__track::-webkit-scrollbar{ display:none }
.slide{
  margin:0; flex:0 0 auto; scroll-snap-align:center;
  width:min(560px,86vw);
  background:var(--ink); border-radius:var(--r); overflow:hidden;
  box-shadow:0 24px 46px -32px rgba(20,38,41,.65);
}
/* todas as fotos foram recortadas em 4:3, então preenchem o card por igual */
.slide img{ width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; display:block }
.car__nav{
  position:absolute; top:calc(50% - 2rem); transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(47,74,78,.16);
  background:rgba(250,247,241,.94); color:var(--petrol); cursor:pointer;
  display:none; place-items:center; transition:transform .3s var(--ease), background .3s;
  box-shadow:0 10px 24px -14px rgba(20,38,41,.6);
}
.car__nav svg{ width:20px; height:20px }
.car__nav:hover{ background:var(--petrol); color:var(--cream-2); transform:translateY(-50%) scale(1.06) }
.car__nav--prev{ left:calc(var(--pad) - 12px) } .car__nav--prev svg{ transform:rotate(180deg) }
.car__nav--next{ right:calc(var(--pad) - 12px) }
@media (min-width:820px){ .car__nav{ display:grid } }
.car__dots{ display:flex; gap:.45rem; justify-content:center; margin-top:.2rem }
.car__dots button{
  width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(47,74,78,.22); transition:width .35s var(--ease), background .35s;
}
.car__dots button[aria-selected="true"]{ width:24px; border-radius:7px; background:var(--petrol) }
.disclaimer{
  max-width:none; margin-inline:auto; text-align:center;
  font-size:.79rem; line-height:1.65; color:var(--txt-mid); opacity:.85;
}

/* ============================ PARA QUEM É =============================== */
.quem{ display:grid; gap:clamp(2rem,1.5rem + 3vw,3rem); align-items:center; margin-top:1rem }
@media (min-width:960px){ .quem{ grid-template-columns:.8fr 1.2fr } }

.quem__foto{
  margin:0; border-radius:var(--r) var(--r) 130px 130px; overflow:hidden;
  background:var(--cream); align-self:center;
}
/* a foto tem fundo cinza-lilás de estúdio: o multiply sobre creme
   neutraliza o tom frio e integra a imagem à seção */
.quem__foto img{ width:100%; mix-blend-mode:multiply; filter:saturate(.92) contrast(1.02) }

.quem__cards{ display:grid; gap:.8rem }
@media (min-width:620px){ .quem__cards{ grid-template-columns:1fr 1fr } }
.quem__cards li{
  background:var(--cream-2); border:1px solid rgba(47,74,78,.11);
  border-radius:var(--r); padding:1.5rem 1.5rem 1.6rem;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.12rem,1rem + .5vw,1.3rem); line-height:1.32;
  letter-spacing:-.005em; color:var(--txt-dark);
  position:relative; padding-top:2.4rem;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s var(--ease);
}
/* aspa decorativa: são falas dela, não itens de checklist */
.quem__cards li::before{
  content:"“"; position:absolute; top:.35rem; left:1.4rem;
  font-family:var(--serif); font-size:2.6rem; line-height:1;
  color:var(--taupe);
}
.quem__cards li:hover{
  transform:translateY(-3px); border-color:rgba(47,74,78,.24);
  box-shadow:0 22px 38px -28px rgba(20,38,41,.45);
}
.quem__cards em{ color:var(--petrol-lt); font-style:italic }

/* ============================ VISÃO ===================================== */
.vision{ text-align:center }
.vision__big{
  font-family:var(--serif); color:var(--cream-2)!important;
  font-size:clamp(1.7rem,1.1rem + 2.6vw,3rem); line-height:1.2; letter-spacing:-.012em;
  max-width:22ch; margin:0 auto 3rem;
}
.vision__big em{ color:var(--taupe) }
.vision__grid{
  display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  max-width:900px; margin:0 auto 3rem; text-align:left;
}
.vision__grid p{
  margin:0; padding:1.4rem 1.5rem; border-radius:14px;
  border:1px solid rgba(201,189,176,.16); background:rgba(201,189,176,.05);
  font-size:.98rem;
}
.vision__close{
  font-family:var(--serif); font-size:clamp(1.15rem,1rem + .9vw,1.6rem);
  line-height:1.35; color:var(--txt-light)!important; margin:0;
}
.vision__close em{ color:var(--taupe) }

/* ============================ GARANTIA ================================== */
.guarantee{
  display:grid; gap:1.6rem; align-items:start;
  background:var(--cream-2); border:1px solid rgba(47,74,78,.13);
  border-radius:var(--r); padding:clamp(1.8rem,1.3rem + 2vw,3rem);
}
@media (min-width:720px){ .guarantee{ grid-template-columns:auto 1fr; gap:2.2rem } }
.guarantee__seal{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:var(--petrol); color:var(--cream-2); flex:none;
}
.guarantee__seal svg{ width:30px; height:30px }
.guarantee p{ color:var(--txt-mid); max-width:64ch }
.guarantee .h3{ max-width:22ch }

/* ============================ OFERTA ==================================== */
.offer .sub{ margin-bottom:3.2rem }
.offer__card{
  max-width:560px; margin-inline:auto;
  background:var(--cream-2); color:var(--txt-dark);
  border-radius:24px; padding:clamp(1.8rem,1.3rem + 2vw,2.8rem);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9);
}
.offer__head{ text-align:center; padding-bottom:1.5rem; border-bottom:1px solid rgba(47,74,78,.13) }
.offer__head img{
  height:34px; width:auto; margin:0 auto .9rem;
  filter:brightness(0) saturate(100%) invert(24%) sepia(9%) saturate(1180%) hue-rotate(139deg) brightness(94%) contrast(88%);
}
.offer__days{
  margin:0; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--petrol-lt); font-weight:600;
}
.offer__list{ display:grid; gap:.1rem; padding:1.4rem 0 }
.offer__list li{
  display:grid; grid-template-columns:auto 1fr; gap:.8em; align-items:center;
  padding:.6rem 0; font-size:.97rem; color:var(--txt-mid);
}
.offer__list svg{ width:18px; height:18px; color:var(--sage) }
.offer__price{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.3rem 0 1.6rem; border-top:1px solid rgba(47,74,78,.13);
}
.offer__price span{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-mid) }
.offer__price strong{ font-family:var(--serif); font-size:clamp(2rem,1.5rem + 2vw,2.9rem); color:var(--petrol) }
.offer__note{
  margin:1rem 0 0; text-align:center; font-size:.85rem; color:var(--txt-mid)!important;
  display:flex; align-items:center; justify-content:center; gap:.5em;
}

/* ============================ FECHAMENTO ================================ */
.close__row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem;
  margin:0 auto 2.5rem; max-width:760px;
}
.close__row li{
  padding:.6em 1.15em; border-radius:100px; font-size:.92rem;
  border:1px solid rgba(47,74,78,.18); color:var(--petrol);
}
.close__final{
  text-align:center; font-family:var(--serif);
  font-size:clamp(1.3rem,1.1rem + 1.1vw,1.9rem); color:var(--petrol); margin-bottom:2rem;
}

/* ============================ RODAPÉ ==================================== */
.foot{ background:var(--ink); color:var(--txt-light-2); padding:4rem 0 5rem }
/* o aviso legal do rodapé precisa de mais largura para caber em uma linha */
.foot .wrap{ max-width:1360px }
.foot__in{ display:grid; gap:1.6rem; justify-items:center; text-align:center }
.foot__logo{ height:32px; width:auto; opacity:.85 }
.foot__legal{ max-width:none; font-size:.74rem; line-height:1.7; margin:0 }
.foot__links{ display:flex; gap:1.6rem; flex-wrap:wrap; justify-content:center }
.foot__links a{
  font-size:.85rem; text-decoration:none; color:var(--taupe);
  border-bottom:1px solid rgba(201,189,176,.28); padding-bottom:2px;
}
.foot__links a:hover{ border-color:var(--taupe) }

/* ============================ WHATSAPP FLUTUANTE ======================== */
.zap{
  position:fixed; right:20px; bottom:20px; z-index:45;
  display:grid; place-items:center;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.45);
  transform:translateY(120%); opacity:0;
  transition:transform .45s var(--ease), opacity .35s, box-shadow .3s;
}
.zap.is-on{ transform:translateY(0); opacity:1 }
.zap:hover{ box-shadow:0 18px 38px -10px rgba(0,0,0,.55) }
.zap svg{ width:30px; height:30px }
@media (max-width:560px){ .zap{ right:16px; bottom:16px } }

/* ============================ REVEAL ==================================== */
[data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
[data-reveal].is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important }
  [data-reveal]{ opacity:1; transform:none }
}