/* ═══════════════════════════════════════════════════
   GRUPO VIP · SENHORITA PINK
   Mobile-first · Claro, pink nos destaques
   Paleta espelhada do e-commerce senhoritapink.com.br
   ═══════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────── */
:root{
  /* Superfícies: bege pastel no lugar do branco. O branco ficou só no
     menu (topo, painel e dock), que é chrome flutuante. */
  /* Off-white quente, quase branco (não #FFF puro). O bege anterior
     (#FAF4EC/#F6EDE1) ficou escuro demais para a identidade dela. */
  --paper:      #FFFCF9;   /* base da página */
  --card:       #FFFEFC;   /* cards */
  --cream:      #FCF8F3;   /* seções alternadas: benefícios e FAQ */
  --sand:       #FAF4ED;   /* faixa do marquee */
  --blush:      #FCEAF1;   /* rosa pastel de seção */
  --blush-2:    #F9DCE7;   /* rosa pastel um passo mais cheio */

  --ink:        #3F3D38;
  --ink-2:      #6A6760;
  /* .68 e .46 davam 3,9:1 e 2,4:1 sobre o bege — abaixo do mínimo de 4,5.
     Subidos para passar no fundo mais escuro da página (--cream). */
  --ink-soft:   rgba(63,61,56,.80);
  --ink-faint:  rgba(63,61,56,.76);
  /* pink de marca não serve para texto pequeno sobre bege (3,9:1);
     este tom fechado dá 5,3:1 e é usado só nos eyebrows/rótulos. */
  --pink-texto: #A82C5C;
  --line:       rgba(63,61,56,.13);
  --line-pink:  rgba(210,62,119,.22);

  --pink:       #D23E77;
  --pink-lit:   #FB4C90;
  --pink-deep:  #A82C5C;
  --gold:       #B08A4E;

  /* Principal = Larken (títulos, itálicos, números). 'Larken' vem primeiro na
     pilha: quando os .woff2 licenciados entrarem em assets/fonts/ com o
     @font-face, ela assume sozinha. Até lá quem aparece é a Fraunces.
     (A 'Larken DEMO' instalada no PC não casa com o nome 'Larken' — de
     propósito: ela não tem acentos nem números.)
     Secundária = Poppins (texto corrido, menu, botões, rótulos). */
  --display:'Larken', 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: var(--display);

  --shell: 1180px;
  --pad: clamp(20px, 5.6vw, 40px);
  --sec: clamp(74px, 14vw, 142px);

  --r: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:76px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:300;line-height:1.03;letter-spacing:-.022em}
.hero__title,.h2,.final__title,.stat__value{
  font-family:var(--display);
  font-weight:350;
  letter-spacing:-.018em;
  font-optical-sizing:auto;
}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}

::selection{background:var(--pink);color:#fff}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--pink);color:#fff;padding:12px 20px;font-size:14px;
}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:2px}

/* ── Átomos tipográficos ──────────────────────────── */
.eyebrow{
  font-size:11px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--pink-texto);
  display:flex;
  align-items:center;
  gap:.75em;
}

.dot{
  display:inline-block;
  width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.55;
  vertical-align:middle;
  flex:none;
}

.h2{
  font-size:clamp(2.1rem, 9vw, 4.05rem);
  margin-top:.42em;
}
.h2 em, .hero__title em, .final__title em{
  /* destaque só pela cor: mesma fonte, mesmo peso, sem itálico */
  font-style:normal;
  font-weight:inherit;
  color:var(--pink);
}

.sec-head{margin-bottom:clamp(38px,7vw,64px)}

.prose p{
  color:var(--ink-soft);
  font-size:clamp(.98rem,3.4vw,1.075rem);
  line-height:1.78;
}
.prose p + p{margin-top:1.05em}

/* ── Botões ───────────────────────────────────────── */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:var(--line);
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  min-height:54px;
  padding:0 30px;
  border:1px solid var(--bd);
  border-radius:var(--r);
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s var(--ease), border-color .35s var(--ease),
             color .35s var(--ease), box-shadow .35s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .35s var(--ease)}
.btn__wa{width:19px;height:19px}

.btn--primary{
  --bg:var(--pink); --fg:#fff; --bd:transparent;
  box-shadow:0 10px 26px -12px rgba(210,62,119,.7);
}
.btn--primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--pink-lit),var(--pink) 60%,var(--pink-deep));
  transform:translateX(-101%);
  transition:transform .5s var(--ease);
}
.btn--primary:hover::before{transform:translateX(0)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(210,62,119,.72)}
.btn--primary:hover svg{transform:translateX(4px)}
.btn--primary:active{transform:translateY(0) scale(.985)}

.btn--ghost{--bd:var(--line)}
.btn--ghost:hover{--bd:var(--pink);color:var(--pink)}

.btn--lg{min-height:62px;padding:0 38px;font-size:13px}
.btn--block{width:100%}

/* ═══════════════ HEADER ═══════════════ */
.site-header{
  position:fixed;inset:0 0 auto;z-index:60;
  padding-top:env(safe-area-inset-top);
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease),
             border-color .45s var(--ease), box-shadow .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px -20px rgba(63,61,56,.6);
}
/* com o painel aberto o topo precisa ser opaco */
.site-header.is-menu-open{
  background:#fff;
  border-bottom-color:transparent;
  box-shadow:none;
}

.header__inner{
  display:flex;align-items:center;gap:14px;
  height:66px;
}
.header__logo img{
  height:34px;width:auto;
  transition:height .45s var(--ease);
}
.site-header.is-stuck .header__logo img{height:28px}

.header__chip{
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pink);
  background:var(--blush-2);
  border-radius:99px;
  padding:5px 11px 4px;
  line-height:1;
  white-space:nowrap;
}
/* ── Navegação ────────────────────────────────────── */
.nav{display:flex;align-items:center}
.nav > a:not(.btn){
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);
  position:relative;
  transition:color .3s var(--ease);
}
.nav__cta{min-height:42px;padding:0 22px;font-size:11px}

/* ── Hambúrguer ───────────────────────────────────── */
.burger{
  position:relative;z-index:3;
  margin-left:auto;
  width:44px;height:44px;
  /* flex, não grid: com place-items as linhas implícitas esticavam e o
     espaçamento virava 24px em vez de 6px. */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:none;border:0;padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.burger span{
  display:block;width:22px;height:1.5px;
  background:var(--ink);
  transition:transform .45s var(--ease), background .3s var(--ease);
}
.burger span + span{margin-top:6px}
.burger[aria-expanded="true"] span{background:var(--pink)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.nav-veu{
  position:fixed;inset:0;z-index:55;
  background:rgba(63,61,56,.42);
  opacity:0;transition:opacity .45s var(--ease);
}
.nav-veu.is-on{opacity:1}

/* ── Menu em painel (até 859px) ───────────────────── */
@media (max-width:859.98px){
  .header__logo,.header__chip{position:relative;z-index:3}

  .nav{
    position:fixed;inset:0 0 auto;
    flex-direction:column;align-items:stretch;
    padding:calc(66px + env(safe-area-inset-top) + 22px) var(--pad)
            calc(30px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border-bottom:1px solid var(--line-pink);
    box-shadow:0 24px 60px -34px rgba(63,61,56,.5);
    transform:translateY(-101%);
    transition:transform .55s var(--ease);
  }
  .nav.is-open{transform:none}

  .nav > a:not(.btn){
    font-family:var(--sans);
    font-size:1.42rem;font-weight:300;
    letter-spacing:-.015em;text-transform:none;
    color:var(--ink);
    padding-block:17px;
    border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;
  }
  .nav > a:not(.btn)::after{
    content:"";
    width:6px;height:6px;flex:none;
    border-top:1px solid var(--pink);
    border-right:1px solid var(--pink);
    transform:rotate(45deg);
    opacity:.55;
  }
  .nav__cta{margin-top:28px;width:100%;min-height:54px;font-size:12px}
}

/* ── Menu em linha (860px+) ───────────────────────── */
@media (min-width:860px){
  .header__inner{height:82px}
  .site-header.is-stuck .header__inner{height:70px}
  html{scroll-padding-top:92px}

  .burger{display:none}
  .nav{
    margin-left:auto;
    gap:clamp(16px,2.1vw,32px);
  }
  .nav > a:not(.btn){padding-block:8px}
  .nav > a:not(.btn)::after{
    content:"";
    position:absolute;left:0;right:0;bottom:2px;height:1px;
    background:var(--pink);
    transform:scaleX(0);transform-origin:left;
    transition:transform .4s var(--ease);
  }
  .nav > a:not(.btn):hover{color:var(--pink)}
  .nav > a:not(.btn):hover::after{transform:scaleX(1)}
  .nav__cta{margin-left:clamp(6px,1vw,14px)}
}

/* ═══════════════ HERO ═══════════════ */
/* Mobile: pilha — conteúdo em cima, modelo num palco rosa embaixo.
   Desktop (≥1200px): a arte deitada vira o fundo do hero. */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  justify-content:space-between; /* folga vai para o meio, não para o palco */
  padding-top:104px;
  overflow:hidden;
  isolation:isolate;
  background:var(--paper);
}

.hero__bg{position:absolute;inset:0 0 auto;height:66%;z-index:-4}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:22% 30%;
}
.hero__glow{
  position:absolute;inset:0;
  background:radial-gradient(60% 44% at 82% 18%, rgba(253,240,245,.9), transparent 70%);
}

.hero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(to bottom, rgba(255,252,249,.68), rgba(255,252,249,.9) 46%, var(--paper) 66%);
}

.hero__inner{position:relative;z-index:2;padding-bottom:clamp(26px,6vw,40px)}

/* Palco travado em 3:2 — a arte de 1290×860 entra inteira, sem corte,
   em qualquer aparelho. A sobra vertical fica entre o CTA e o palco
   (ver justify-content:space-between no .hero). */
.hero__model{
  position:relative;
  margin:0;
  flex:none;
  width:100%;
  aspect-ratio:3 / 2;
  max-height:360px;      /* impede o bloco de inchar em tablet retrato */
  overflow:hidden;
  background:none;   /* sem palco: os selos correm sobre o bege da página */
  pointer-events:none;
}

.hero__model picture{display:block}

@media (max-width:1199.98px){

  /* Carrossel infinito: duas cópias do mesmo conjunto deslizando -50%. */
  /* A altura precisa descer em cadeia: .trilha -> set -> picture -> img.
     Com % no img direto não resolve, porque o <picture> não tem altura. */
  .trilha{
    position:absolute;inset:0;
    display:flex;align-items:stretch;
    width:max-content;
    padding-block:7%;
    animation:desliza 26s linear infinite;
  }
  .trilha__set{
    display:flex;align-items:stretch;
    gap:clamp(10px,3vw,20px);
    padding-right:clamp(10px,3vw,20px);
    height:100%;
  }
  .trilha__set picture{display:block;height:100%}
  .trilha .selo{
    position:static;translate:none;
    height:100%;width:auto;max-width:none;
    object-fit:contain;
    filter:none;
  }
  /* desencontro leve entre os selos, sem quebrar o stretch */
  .trilha__set picture:nth-child(odd) .selo{transform:translateY(-3%)}
  .trilha__set picture:nth-child(even) .selo{transform:translateY(3.5%)}
  @keyframes desliza{ to{ transform:translateX(-50%) } }
  /* RECORTE: PNG com alpha centralizado sobre o fundo rosa. */
  .hero__model:not(.hero__model--arte)::before{
    content:"";
    position:absolute;left:50%;bottom:0;translate:-50% 0;
    width:min(78%,300px);aspect-ratio:1;
    background:radial-gradient(circle at 50% 100%, rgba(255,255,255,.9), transparent 68%);
  }
  .hero__model:not(.hero__model--arte) img{
    position:absolute;left:50%;bottom:0;translate:-50% 0;
    height:100%;width:auto;max-width:none;
    filter:drop-shadow(0 18px 26px rgba(63,61,56,.16));
  }
}

.hero__title{
  margin-top:.55em;
  font-size:clamp(2.65rem, 12.4vw, 5.5rem);
  font-weight:350;   /* serifada: 200 fica frágil demais */
}

.hero__sub{
  margin-top:1.15em;
  max-width:29ch;
  color:var(--ink-soft);
  font-size:clamp(.97rem,3.9vw,1.14rem);
  line-height:1.66;
}

.hero__actions{margin-top:clamp(28px,6vw,40px)}
.hero__actions .btn{width:100%;max-width:340px}


.hero__scroll{
  position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:3;
  width:1px;height:44px;
  background:linear-gradient(to bottom, transparent, var(--line));
  display:none;
}
.hero__scroll span{
  position:absolute;inset:auto 0 0;height:12px;
  background:var(--pink);
  animation:trickle 2.4s var(--ease) infinite;
}
@keyframes trickle{
  0%{transform:translateY(-44px);opacity:0}
  35%{opacity:1}
  100%{transform:translateY(2px);opacity:0}
}

.hero__banner{display:none}

/* <600px: banner vertical (hero-mobile.webp, 813x2000). O hero assume a
   proporção da arte em vez de 100svh — a imagem aparece inteira, sem corte, e
   fica um pouco mais alta que a tela: texto + rosto na primeira dobra. */
@media (max-width:599.98px){
  /* A arte desce 92px dentro do hero: sem isso o botão encostava no topo do
     cabelo nos celulares mais estreitos (com a Poppins o subtítulo ganhou
     uma linha e a sobreposição chegou a 12px em 360px).
     O vão de cima leva a mesma cor do topo da arte, então a emenda some. */
  .hero{
    min-height:0;
    height:calc(100vw * 2000 / 813 + 92px);
    justify-content:flex-start;
    background:#FFF2F2;
  }
  .hero__bg,
  .hero__scrim,
  .hero__model{display:none}
  .hero__banner{display:block;position:absolute;inset:92px 0 0 0;z-index:-4}
  .hero__banner img{
    width:100%;height:100%;max-width:none;
    object-fit:cover;object-position:center bottom;
  }
}

/* ≥1200px: banner (hero-desktop.webp, 2000x1000) cobrindo o hero, ancorado à
   direita. Telas 16:10 cortam da esquerda — o lado livre para o texto —, telas
   mais largas cortam em cima e embaixo. Os selos somem. */
@media (min-width:1200px){
  .hero{
    justify-content:center;
    padding-top:120px;
    padding-bottom:0;
    background:var(--paper);
  }
  .hero__bg,
  .hero__scrim,
  .hero__scroll,
  .hero__model{display:none}

  .hero__banner{display:block;position:absolute;inset:0;z-index:-4}
  .hero__banner img{
    width:100%;height:100%;max-width:none;
    object-fit:cover;object-position:right center;
  }

  .hero__inner{padding-bottom:0;z-index:2}

  .hero__title{font-size:5.05rem}
  .hero__sub{max-width:32ch}
  .hero__actions .btn{width:auto}
}

/* ═══════════════ STATS ═══════════════ */
.stats{
  position:relative;
  padding-block:clamp(44px,9vw,70px);
  border-block:1px solid var(--line);
  background:var(--paper);
}
/* Três colunas desde o celular — empilhado esticava demais a página. */
.stats__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,3vw,36px);
}
/* subgrid: os três valores dividem a mesma linha e alinham pela base, e os
   rótulos ficam todos na mesma altura mesmo quando 'Todo o Brasil' quebra. */
.stats__grid{grid-template-rows:auto auto}
.stat{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:7px;
  padding-left:clamp(10px,2.6vw,26px);
  border-left:1px solid var(--line);
}
.stat:first-child{padding-left:0;border-left:0}
.stat__value{
  font-size:clamp(1.3rem,5.5vw,2.9rem);
  align-self:end;
  font-weight:350;   /* serifada: 200 fica frágil demais */
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--ink);
  display:flex;align-items:baseline;gap:.2em;flex-wrap:wrap;
}
.stat__value i{
  font-style:normal;font-weight:inherit;
  font-size:.68em;color:var(--pink);
}
.stat__label{
  font-size:clamp(9px,2.45vw,11px);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);line-height:1.6;max-width:24ch;
}
@media (min-width:760px){
  .stats__grid{gap:36px}
  .stat{row-gap:9px}
  .stat__label{letter-spacing:.2em;line-height:1.7}
}

/* ═══════════════ MARQUEE ═══════════════ */
.marquee{
  overflow:hidden;
  padding-block:17px;
  background:var(--sand);
  border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee__set{display:flex;align-items:center;gap:26px;padding-right:26px}
.marquee__set span{
  font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;
}
.marquee__set b{color:var(--pink);font-size:9px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── Dica dos carrosséis ──────────────────────────── */
.rail-dica{
  margin-top:14px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);
}
@media (min-width:860px){ .rail-dica{display:none} }

/* ═══════════════ BENEFÍCIOS ═══════════════ */
.benefits{
  padding-block:var(--sec);
  background:var(--cream);
  border-top:1px solid var(--line);
}
.benefits__list{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.bcard{
  background:var(--card);
  padding:clamp(26px,6vw,38px) clamp(22px,5vw,34px);
  position:relative;
  transition:background .45s var(--ease);
}
.bcard::after{
  content:"";position:absolute;inset:auto 0 0;height:2px;
  background:linear-gradient(90deg,var(--pink),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.bcard:hover{background:var(--paper)}
.bcard:hover::after{transform:scaleX(1)}

.bcard__num{
  font-family:var(--display);font-style:normal;font-weight:350;
  font-size:2.1rem;line-height:1;color:var(--pink);
  display:block;margin-bottom:16px;
}
.bcard h3{
  font-size:clamp(1.16rem,4.6vw,1.34rem);
  font-weight:400;letter-spacing:-.012em;line-height:1.25;
  margin-bottom:.6em;
}
.bcard p{
  color:var(--ink-soft);font-size:.95rem;line-height:1.72;
}
/* Carrossel até 859px — encurta muito a página no celular.
   A partir de 860px volta a ser grade. */
@media (max-width:859.98px){
  .benefits__list{
    display:flex;
    gap:12px;
    background:none;border:0;border-radius:0;overflow:visible;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* sangra até a borda da tela, mas o primeiro card alinha com o texto */
    margin-inline:calc(var(--pad) * -1);
    padding:4px var(--pad) 6px;
  }
  .benefits__list::-webkit-scrollbar{display:none}
  .bcard{
    flex:0 0 auto;
    width:min(76vw,320px);
    scroll-snap-align:center;
    border:1px solid var(--line);
    border-radius:var(--r);
  }
}

@media (min-width:860px){ .benefits__list{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .benefits__list{grid-template-columns:repeat(3,1fr)} }

/* ═══════════════ DEPOIMENTOS ═══════════════ */
/* Só bege: o rosa clarinho não conversava com o bege da página.
   Alternância: benefícios (cream) → depoimentos (paper) → FAQ (cream) → CTA (paper). */
.quotes{padding-block:var(--sec);background:var(--paper);border-top:1px solid var(--line)}
.quotes__grid{display:grid;gap:14px}

@media (max-width:859.98px){
  .quotes__grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);
    padding:4px var(--pad) 6px;
  }
  .quotes__grid::-webkit-scrollbar{display:none}
  .quote{
    flex:0 0 auto;
    width:min(80vw,340px);
    scroll-snap-align:center;
  }
}
.quote{
  margin:0;
  padding:clamp(26px,5.5vw,34px);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
  position:relative;
}
.quote::before{
  content:"”";
  position:absolute;top:2px;right:20px;
  font-family:var(--serif);font-size:5rem;line-height:1;color:var(--pink);opacity:.24;
}
.quote blockquote{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.14rem,4.4vw,1.3rem);
  line-height:1.5;
  color:var(--ink);
}
.quote figcaption{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.avatar{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--pink-lit),var(--pink));
  font-size:14px;font-weight:500;color:#fff;
}
.quote figcaption > span:last-child{display:flex;flex-direction:column;line-height:1.35}
.quote b{font-weight:500;font-size:.94rem}
.quote i{font-style:normal;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}
@media (min-width:860px){ .quotes__grid{grid-template-columns:repeat(3,1fr)} }

/* ═══════════════ FAQ ═══════════════ */
.faq{padding-block:var(--sec);background:var(--cream);border-top:1px solid var(--line)}
.faq__list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:clamp(20px,4.4vw,26px);
  font-size:clamp(1.02rem,4.1vw,1.16rem);
  font-weight:400;letter-spacing:-.01em;line-height:1.35;
  transition:color .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--pink)}
/* Seta: para baixo fechada, para cima aberta. `.is-fechando` vira a seta
   já no início do fechamento — o Motion só tira o [open] no fim da animação. */
.qa__ico{position:relative;width:16px;height:16px;flex:none}
.qa__ico::before{
  content:"";position:absolute;left:50%;top:50%;
  width:8px;height:8px;
  border-right:1.5px solid var(--pink);
  border-bottom:1.5px solid var(--pink);
  transform:translate(-50%,-70%) rotate(45deg);
  transition:transform .4s var(--ease);
}
.qa[open]:not(.is-fechando) .qa__ico::before{transform:translate(-50%,-25%) rotate(-135deg)}
.qa__body{overflow:hidden;padding-bottom:clamp(20px,4.4vw,26px)}
.qa__body p{
  color:var(--ink-soft);font-size:.96rem;line-height:1.78;max-width:62ch;
  padding-right:36px;
}
.qa[open] .qa__body{animation:reveal-qa .5s var(--ease)}
@keyframes reveal-qa{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ═══════════════ CTA FINAL ═══════════════ */
.final{
  position:relative;
  padding-block:clamp(90px,18vw,168px);
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.final__inner{display:flex;flex-direction:column;align-items:center}
.final .eyebrow{justify-content:center}
.final__title{
  margin-top:.5em;
  font-size:clamp(2.5rem,11.4vw,4.9rem);
  font-weight:350;   /* serifada: 200 fica frágil demais */
}
.final__sub{
  margin-top:1.3em;max-width:34ch;
  color:var(--ink-soft);font-size:clamp(.97rem,3.7vw,1.1rem);line-height:1.68;
}
.final .btn{margin-top:clamp(32px,6vw,44px);width:100%;max-width:360px}
.final__micro{
  margin-top:18px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  display:flex;align-items:center;gap:.7em;flex-wrap:wrap;justify-content:center;
}
@media (min-width:760px){ .final .btn{width:auto} }

/* ═══════════════ FOOTER ═══════════════ */
/* Rodapé em pink cheio — fecha a página e tira o branco do fim. */
.site-footer{
  position:relative;
  padding-top:clamp(54px,9vw,78px);
  padding-bottom:calc(clamp(54px,9vw,78px) + var(--dock-h,0px));
  /* #D23E77 da marca, por decisao da cliente. Branco puro sobre ele da 4,47:1 —
     tangenciando os 4,5:1 de AA. Por isso todo texto aqui e branco cheio, e os
     corpos pequenos ganharam 1px e peso 400 para compensar na leitura. */
  background:var(--pink);
  color:#fff;
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;inset:-40% -20% auto auto;
  width:min(70vw,560px);aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 66%);
  pointer-events:none;
}
.footer__inner{
  position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;
}
/* logo pink -> branco */
.footer__logo img{height:44px;width:auto;filter:brightness(0) invert(1)}
.footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px}
.footer__nav a{
  font-size:11.5px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.footer__nav a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.footer__addr{
  font-size:12.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;line-height:2;
}
.footer__copy{font-size:11.5px;font-weight:400;letter-spacing:.14em;color:rgba(255,255,255,.88)}

/* ═══════════════ DOCK (CTA fixo mobile) ═══════════════ */
.dock{
  position:fixed;inset:auto 0 0;z-index:70;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 28px -22px rgba(63,61,56,.8);
  transform:translateY(120%);
  transition:transform .5s var(--ease);
}
.dock.is-on{transform:none}
.dock .btn{min-height:56px;font-size:12px}
@media (min-width:860px){ .dock{display:none} }

/* ═══════════════ REVEAL ═══════════════ */
/* Por padrão tudo é visível — se o JS falhar, a página aparece inteira.
   O `motion-on` (script inline no <head>) esconde os blocos e o Motion
   assume a entrada; um watchdog de 2,2s remove a classe se o Motion
   não carregar. Ver assets/js/motion.js. */
html.motion-on .reveal{opacity:0}
html.motion-on .hero__model{opacity:0}
.reveal.is-in{opacity:1;transform:none}

/* O Motion anima a altura do FAQ; sem ele, cai no keyframe do CSS. */
html.motion-on .qa[open] .qa__body{animation:none}

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