/* ============================================================
   Beatriz Nogueira — home
   Transcrição da v5 do Paper (06 · Home v5 — Desktop).
   Arquivo próprio da home: /adddress e /vestidapelabia usam
   adddress/styles.css e não dependem de nada daqui.
   ============================================================ */

/* ---------- fontes ---------- */
@font-face {
  font-family: "OT Weird Serif";
  src: url("assets/fonts/OTWeirdSerif-Thin.woff2") format("woff2");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OT Weird Serif";
  src: url("assets/fonts/OTWeirdSerif-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OT Weird Serif";
  src: url("assets/fonts/OTWeirdSerif-LightItalic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "OT Weird Serif";
  src: url("assets/fonts/OTWeirdSerif-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OT Weird Serif";
  src: url("assets/fonts/OTWeirdSerif-RegularItalic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "OT Weird Serif";
  src: url("assets/fonts/OTWeirdSerif-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* variável: cobre wght 300–900 e wdth 75–150 num arquivo só,
   que é o que permite reproduzir o font-stretch 80% dos títulos */
@font-face {
  font-family: "TikTok Sans";
  src: url("assets/fonts/TikTokSans-Variable.woff2") format("woff2-variations");
  font-weight: 300 900; font-stretch: 75% 150%;
  font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --noir: #070d0d;
  --maroon: #7f2e45;
  --pink: #d3a1ab;
  --moca: #9d7967;
  --derby: #44290c;
  --peach: #f4eee9;
  --cotton: #c4bab3;

  --font-display: "OT Weird Serif", serif;
  --font-sans: "TikTok Sans", system-ui, sans-serif;

  /* a v5 é desenhada em 1440 com 72px de respiro lateral */
  --gutter: clamp(20px, 5vw, 72px);
  --content: 1296px;

  /* escala tipográfica: o segundo valor acompanha a viewport,
     o terceiro é exatamente o tamanho da v5 no desktop */
  --t-hero: clamp(48px, 6.7vw, 96px);
  --t-section: clamp(40px, 7.8vw, 112px);
  --t-numeral: clamp(56px, 8.3vw, 120px);
  --t-statement: clamp(40px, 7.2vw, 104px);
  --t-statement-lg: clamp(44px, 8.2vw, 118px);
  --t-lead: clamp(15px, 1.25vw, 18px);
}

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

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

body {
  background: var(--peach);
  color: var(--noir);
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--maroon); color: var(--peach); }

.section { padding: 48px 0 110px; position: relative; overflow: hidden; }
.wrap { width: 100%; max-width: calc(var(--content) + var(--gutter) * 2);
        margin-inline: auto; padding-inline: var(--gutter); }

/* anéis decorativos — puro enfeite, somem do fluxo e do leitor de tela */
.ring {
  position: absolute; border-radius: 999px; border: 1px solid currentColor;
  pointer-events: none;
}

/* revelação no scroll */
[data-reveal] { opacity: 0; transform: translateY(26px); }
.is-in [data-reveal], [data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px var(--gutter);
  background: rgba(244, 238, 233, 0.95);
  backdrop-filter: blur(14px);
  transition: box-shadow .3s ease;
}
.nav.is-stuck { box-shadow: 0 1px 0 rgba(7, 13, 13, .08); }
.nav__logo { font-family: var(--font-display); font-size: clamp(19px, 2vw, 26px);
             font-weight: 300; line-height: 1; display: flex; gap: 8px; align-items: baseline; }
.nav__logo em { font-style: italic; color: var(--maroon); }
.nav__cta {
  background: var(--maroon); color: var(--peach);
  font-size: 14px; font-weight: 600; line-height: 1.28;
  padding: 13px 26px; border-radius: 999px; white-space: nowrap;
  transition: transform .25s ease, background .25s ease;
}
.nav__cta:hover { transform: translateY(-2px); background: #6b263a; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: min(860px, 100svh); display: flex; align-items: center;
  padding: 140px 0 60px; position: relative; overflow: hidden;
}
.hero__wrap { display: flex; align-items: center; gap: clamp(32px, 6vw, 88px); }
.hero__ring { color: var(--pink); opacity: .45; width: 640px; height: 640px;
              right: -80px; top: 96px; }
.hero__copy { flex: 1 1 auto; max-width: 620px; position: relative; }
.hero__title {
  font-family: var(--font-display); font-size: var(--t-hero);
  line-height: 92%; letter-spacing: -.04em; font-weight: 200;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__title em { font-style: italic; font-weight: 300; color: var(--maroon);
                  letter-spacing: -.02em; }
.hero__sub { max-width: 510px; margin-top: 34px; color: var(--derby);
             font-size: clamp(15px, 1.2vw, 17px); line-height: 158%; }

.hero__media { position: relative; flex: 0 0 auto; width: min(440px, 34vw); }
.hero__mask {
  position: relative; aspect-ratio: 440 / 600; width: 100%;
  background: var(--cotton); overflow: hidden;
  border-radius: 50% 50% 6.4% 6.4% / 36.7% 36.7% 4.7% 4.7%;
}
.hero__floor { position: absolute; left: 0; bottom: 4%; width: 100%; }
/* a foto encosta na borda esquerda da máscara de propósito: o recorte
   tem um corte reto ali (que fatia o pé) e, coincidindo com a borda,
   ele deixa de aparecer e a leitura vira "ela sai do quadro" */
.hero__cutout {
  position: absolute; left: 0; top: 6%; width: 100%; height: 84%;
  object-fit: contain; object-position: 0 100%;
}
.hero__sparkle { position: absolute; right: -14px; top: -18px; width: 34px; }
.hero__sparkle--sm { right: auto; left: 4%; top: auto; bottom: 8%; width: 20px; }
.hero__handle {
  position: absolute; right: 6%; bottom: 6%;
  background: var(--maroon); color: var(--peach);
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 15px; padding: 10px 18px; border-radius: 999px;
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker { background: var(--noir); overflow: hidden; padding: 16px 0; display: flex; }
.ticker__track { display: flex; align-items: center; gap: 34px; flex: 0 0 auto;
                 padding-right: 34px; animation: slide 44s linear infinite; }
.ticker svg { width: 14px; flex: 0 0 auto; }
.ticker__serif { font-family: var(--font-display); font-style: italic; font-weight: 300;
                 color: var(--peach); font-size: clamp(18px, 1.8vw, 24px); white-space: nowrap; }
.ticker__caps { font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
                color: var(--peach); font-size: clamp(16px, 1.6vw, 22px); white-space: nowrap; }
@keyframes slide { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ============================================================
   STATS
   ============================================================ */
.stats { background: var(--noir); padding: 52px 0 58px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat__num { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 52px);
             line-height: 96%; letter-spacing: -.02em; color: var(--peach); }
.stat__num--serif { font-style: italic; font-weight: 300; color: var(--pink);
                    font-size: clamp(26px, 2.6vw, 38px); line-height: 110%; }
.stat__label { font-family: var(--font-display); font-style: italic; font-weight: 300;
               color: var(--moca); font-size: 15px; margin-top: 8px; }

/* ============================================================
   cabeçalho numerado das seções
   ============================================================ */
.head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 56px; position: relative; }
.head svg { width: 22px; flex: 0 0 auto; }
.head__num { font-family: var(--font-display); font-size: var(--t-numeral);
             line-height: 78%; letter-spacing: -.05em; flex: 0 0 auto; }
.head__title {
  font-family: var(--font-sans); font-size: var(--t-section);
  font-weight: 800; font-stretch: 80%; text-transform: uppercase;
  letter-spacing: .12em; line-height: 1;
}
.head__sub { font-family: var(--font-display); font-style: italic; font-weight: 300;
             font-size: clamp(15px, 1.5vw, 22px); margin-top: 4px; }

/* frases-manchete */
.statement { font-family: var(--font-display); font-weight: 200;
             font-size: var(--t-statement); line-height: 88%; letter-spacing: -.045em; }
.statement em { font-style: italic; font-weight: 300; letter-spacing: -.02em; }
.statement strong { font-family: var(--font-sans); font-weight: 900;
                    font-size: var(--t-statement-lg); letter-spacing: -.05em;
                    text-transform: uppercase; }
/* utilitário global: serve tanto para .row dentro de .statement quanto
   para os casos em que as duas classes vivem no mesmo elemento */
.row { display: flex; align-items: baseline; gap: clamp(10px, 1.2vw, 20px); flex-wrap: wrap; }

.lead { font-size: var(--t-lead); line-height: 158%; max-width: 62ch; }

/* pílulas */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { font-family: var(--font-display); font-style: italic; font-weight: 300;
        font-size: clamp(14px, 1.2vw, 17px); padding: 11px 20px; border-radius: 999px;
        border: 1px solid var(--moca); color: var(--derby); }
.pill--on { background: var(--maroon); border-color: var(--maroon); color: var(--peach); }
.pill--light { border-color: var(--pink); color: var(--peach); }
.pill--light.pill--on { background: var(--peach); color: var(--maroon); border-color: var(--peach); }

.caption { font-family: var(--font-display); font-style: italic; font-weight: 300;
           color: var(--moca); font-size: clamp(14px, 1.2vw, 17px); }
.caption--pink { color: var(--pink); }
.caption--rule { display: flex; align-items: center; gap: 10px; }
.caption--rule::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: 0 0 auto; }

/* ------------------------------------------------------------
   máscaras — os cantos vêm da v5, em % para não deformar
   ao reescalar. Toda foto usa object-fit: cover.
   ------------------------------------------------------------ */
.shot { overflow: hidden; position: relative; background: var(--cotton); }
.shot > img { width: 100%; height: 100%; object-fit: cover; }
.shot--arch      { border-radius: 50% 50% 6.4% 6.4% / 36.7% 36.7% 4.7% 4.7%; }
.shot--arch-soft { border-radius: 27.7% 27.7% 5% 5% / 22.1% 22.1% 4% 4%; }
.shot--arch-inv  { border-radius: 5% 5% 27.7% 27.7% / 4% 4% 22.1% 22.1%; }
.shot--soft      { border-radius: clamp(24px, 4vw, 56px); }
.shot--softer    { border-radius: clamp(28px, 5vw, 88px); }
.shot--strip     { border-radius: clamp(28px, 5vw, 72px); }
.shot--card      { border-radius: clamp(28px, 5.8vw, 84px) clamp(28px, 5.8vw, 84px) 8px 8px; }

/* ============================================================
   01 · QUEM SOU
   ============================================================ */
.quem { background: var(--cotton); }
.quem .head__num { color: var(--noir); opacity: .4; font-weight: 200; }
.quem .head__title { color: var(--noir); }
.quem .head__sub { color: var(--maroon); }
.quem__ring { color: #a79b94; opacity: .7; width: 380px; height: 380px; right: 0; top: 60px; }
.quem__body { display: flex; align-items: center; gap: clamp(28px, 5vw, 76px); }
.quem__figure { position: relative; flex: 0 0 auto; width: min(440px, 34vw); }
.quem__figure .shot { aspect-ratio: 440 / 600; }
.quem__handle {
  position: absolute; left: 50%; bottom: -22px; translate: -50% 0;
  background: var(--peach); color: var(--maroon); white-space: nowrap;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 15px; padding: 10px 18px; border-radius: 999px;
}
.quem__text { flex: 1 1 auto; }
.quem__hi { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
            font-family: var(--font-display); font-weight: 300;
            font-size: clamp(34px, 4vw, 58px); line-height: 1; letter-spacing: -.025em; }
.quem__hi em { font-style: italic; color: var(--maroon); letter-spacing: -.02em; }
.quem__p { margin-top: 24px; font-size: 16px; line-height: 162%; font-style: italic;
           color: var(--derby); }
.quem__medidas { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px;
                 margin-top: 34px; padding-top: 26px; border-top: 1px solid #9a8f88; }
.quem__medidas svg { width: 14px; flex: 0 0 auto; }
.quem__medidas b { font-family: var(--font-display); font-style: italic; font-weight: 300;
                   font-size: clamp(28px, 2.7vw, 38px); color: var(--maroon); }
.quem__medidas span { font-size: 13px; color: var(--derby); }
.quem__medidas i { font-family: var(--font-display); font-style: italic; font-weight: 300;
                   color: var(--moca); font-size: 17px; }

/* ============================================================
   02 · DIFERENCIAIS
   ============================================================ */
.dif { background: var(--noir); color: var(--peach); }
.dif .head__num { color: var(--maroon); font-weight: 800; }
.dif .head__title { color: var(--peach); }
.dif .head__sub { color: var(--pink); }
.dif__ring1 { color: var(--maroon); opacity: .65; width: 380px; height: 380px; right: 20px; top: 40px; }
.dif__ring2 { color: #4a3038; width: 240px; height: 240px; right: 90px; top: 110px; }
.dif__claim { margin-bottom: 64px; position: relative; }
.dif__claim .big { font-family: var(--font-sans); font-weight: 900;
                   font-size: clamp(42px, 7.2vw, 104px); line-height: 90%; letter-spacing: -.045em; }
.dif__claim .serif { font-family: var(--font-display); font-weight: 200;
                     font-size: clamp(40px, 6.7vw, 96px); line-height: 90%; letter-spacing: -.035em; }
.dif__claim em { font-style: italic; font-weight: 300; color: var(--pink); letter-spacing: -.02em; }

.dif__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 80px;
              position: relative; }
.card { border: 1px solid #3a3030; border-radius: clamp(24px, 3vw, 40px); padding: 36px 34px 40px; }
.card--fill { background: var(--maroon); border-color: var(--maroon); }
.card__title { font-family: var(--font-display); font-weight: 300;
               font-size: clamp(28px, 2.8vw, 40px); line-height: 1; letter-spacing: -.025em; }
.card__title em { display: block; font-style: italic; color: var(--pink); letter-spacing: -.02em; }
.card--fill .card__title em { color: var(--peach); }
.card__p { margin-top: 22px; font-size: 15px; line-height: 164%; color: var(--cotton); }
.card--fill .card__p { color: var(--peach); opacity: .92; }
.card__list { margin-top: 26px; padding-top: 24px; border-top: 1px solid #3a3030;
              display: flex; flex-direction: column; gap: 14px; }
.card--fill .card__list { border-top-color: #9e5e70; }
.card__list li { display: flex; gap: 12px; align-items: flex-start; list-style: none;
                 font-size: 14px; line-height: 150%; color: var(--peach); }
.card__list svg { width: 10px; flex: 0 0 auto; margin-top: 5px; }

.dif__turn { margin-bottom: 44px; position: relative; }
.dif__turn .serif { font-family: var(--font-display); font-weight: 200;
                    font-size: clamp(36px, 5.5vw, 80px); line-height: 96%; letter-spacing: -.035em; }
.dif__turn em { font-style: italic; font-weight: 300; color: var(--pink); letter-spacing: -.02em; }
.dif__turn strong { font-family: var(--font-sans); font-weight: 900; text-transform: uppercase;
                    font-size: clamp(32px, 5vw, 72px); letter-spacing: -.04em; }
.dif__lead { max-width: 820px; margin-bottom: 56px; color: var(--cotton);
             font-size: var(--t-lead); line-height: 160%; position: relative; }
.dif__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
             position: relative; }
.dif__pair > div:last-child { padding-top: 64px; }
.dif__pair .shot { aspect-ratio: 636 / 795; }
.dif__cap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.dif__cap .lbl { font-family: var(--font-display); font-style: italic; font-weight: 300;
                 color: var(--pink); font-size: clamp(24px, 2.4vw, 34px); }
.dif__cap .lbl--caps { font-family: var(--font-sans); font-style: normal; font-weight: 900;
                       color: var(--peach); font-size: clamp(20px, 1.9vw, 28px); letter-spacing: -.02em; }

/* ============================================================
   03 · SKINCARE
   ============================================================ */
.skin { background: var(--peach); }
.skin .head__num { color: var(--pink); font-weight: 200; }
.skin .head__title { color: var(--maroon); }
.skin .head__sub { color: var(--moca); }
.skin__ring1 { color: var(--pink); opacity: .75; width: 420px; height: 420px; right: 10px; top: 90px; }
.skin__ring2 { color: var(--moca); opacity: .45; width: 280px; height: 280px; right: 80px; top: 160px; }
.skin__body { display: flex; align-items: flex-start; gap: clamp(28px, 4vw, 60px); }
.skin__copy { flex: 1 1 46%; padding-top: 20px; }
.skin__copy .statement { color: var(--noir); }
.skin__copy .statement em { color: var(--maroon); }
.skin__copy .lead { margin-top: 34px; color: var(--derby); }
.skin__copy .lead + .lead { margin-top: 22px; }
.skin__copy .pills { margin-top: 36px; }
.skin__stack { flex: 1 1 50%; position: relative; aspect-ratio: 648 / 720; }
.skin__stack .a { position: absolute; right: 0; top: 0; width: 72%; aspect-ratio: 468 / 585; }
.skin__stack .b { position: absolute; left: 0; bottom: 8%; width: 46%; aspect-ratio: 300 / 375;
                  box-shadow: 0 24px 60px rgba(7, 13, 13, .14); }

/* ============================================================
   04 · MODA
   ============================================================ */
.moda { background: var(--noir); color: var(--peach); }
.moda .head__num { color: var(--maroon); font-weight: 800; }
.moda .head__title { color: var(--peach); }
.moda .head__sub { color: var(--pink); }
.moda__ring { color: var(--maroon); opacity: .7; width: 360px; height: 360px; right: 40px; top: 60px; }
.moda__claim { margin-bottom: 34px; }
.moda__claim strong { color: var(--peach); }
.moda__claim .thin { font-family: var(--font-display); font-weight: 200; font-style: italic;
                     color: var(--cotton); font-size: var(--t-statement); letter-spacing: -.02em; }
.moda__claim .thin--pink { color: var(--pink); font-weight: 300; letter-spacing: -.03em; }
.moda__lead { max-width: 470px; margin-bottom: 76px; color: var(--cotton); }
.moda__mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.moda__col { display: flex; flex-direction: column; gap: 24px; }
.moda__col:nth-child(2) { padding-top: 96px; }
.moda__col:nth-child(3) { padding-top: 32px; }
.moda__col .r54 { aspect-ratio: 416 / 520; }
.moda__col .r11 { aspect-ratio: 1; }
.moda__col .r43 { aspect-ratio: 416 / 312; }
.moda__col .r23 { aspect-ratio: 416 / 624; }

/* ============================================================
   05 · FITNESS
   ============================================================ */
.fit { background: var(--peach); }
.fit .head__num { color: var(--cotton); font-weight: 200; }
.fit .head__title { color: var(--noir); }
.fit .head__sub { color: var(--moca); }
.fit__ring1 { color: var(--pink); opacity: .7; width: 360px; height: 360px; right: 40px; top: 70px; }
.fit__ring2 { color: var(--moca); opacity: .4; width: 220px; height: 220px; right: 110px; top: 140px; }
.fit__claim { margin-bottom: 34px; }
.fit__claim strong { color: var(--noir); }
.fit__claim em { color: var(--maroon); }
.fit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px);
             margin-bottom: 56px; }
.fit__cols p { color: var(--derby); font-size: var(--t-lead); line-height: 158%; }
.fit__strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.fit__strip .shot { border-radius: 0; aspect-ratio: 432 / 576; }
.fit__foot { display: flex; align-items: center; justify-content: flex-end;
             flex-wrap: wrap; gap: 20px; margin-top: 24px; }

/* ============================================================
   06 · PUBLIS
   ============================================================ */
.publi { background: var(--maroon); color: var(--peach); }
.publi .head__num { color: var(--pink); font-weight: 800; }
.publi .head__title { color: var(--peach); }
.publi .head__sub { color: var(--pink); }
.publi__ring { color: var(--pink); opacity: .55; width: 380px; height: 380px; right: 20px; top: 60px; }
.publi__claim { margin-bottom: 34px; }
.publi__claim strong { font-size: clamp(40px, 6.7vw, 96px); }
.publi__claim .serif { font-family: var(--font-display); font-weight: 200;
                       font-size: clamp(38px, 6.1vw, 88px); line-height: 92%; letter-spacing: -.035em; }
.publi__claim em { font-style: italic; font-weight: 300; color: var(--pink); letter-spacing: -.02em; }
.publi__meta { display: flex; align-items: flex-end; justify-content: space-between;
               gap: 32px; flex-wrap: wrap; margin-bottom: 56px; }
.publi__meta .lead { max-width: 560px; opacity: .9; }
.publi__rail {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--gutter); scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  /* sem isto o snap obrigatório encosta o primeiro item no zero
     e come o respiro lateral */
  scroll-padding-left: var(--gutter);
}
.publi__rail::-webkit-scrollbar { display: none; }
.publi__item { flex: 0 0 auto; width: min(300px, 62vw); scroll-snap-align: start;
               display: flex; flex-direction: column; gap: 14px; }
.publi__item .shot { aspect-ratio: 300 / 533; }
.publi__hint { display: flex; align-items: center; gap: 12px; margin-top: 34px; }
.publi__hint .bar { height: 2px; background: var(--peach); width: 120px; flex: 0 0 auto;
                    transition: width .2s ease; }
.publi__hint .rest { height: 2px; background: var(--pink); opacity: .4; flex: 1 1 auto;
                     max-width: 220px; }

/* ============================================================
   MARCAS
   ============================================================ */
.marcas { background: var(--peach); padding: 96px 0 110px; text-align: center; position: relative;
          overflow: hidden; }
.marcas__ring { color: var(--pink); opacity: .5; width: 420px; height: 420px;
                left: -120px; top: 120px; }
.marcas__head { display: flex; flex-direction: column; align-items: center; gap: 10px;
                margin-bottom: 52px; position: relative; }
.marcas__head svg { width: 20px; }
.marcas__head .t { font-family: var(--font-display); font-weight: 200;
                   font-size: clamp(30px, 3.6vw, 52px); line-height: 1; letter-spacing: -.03em; }
.marcas__head .t em { font-style: italic; font-weight: 300; color: var(--maroon); letter-spacing: -.02em; }
/* flex em vez de grid: as fileiras incompletas ficam centradas
   em vez de encostadas à esquerda */
.marcas__grid { display: flex; flex-wrap: wrap; justify-content: center;
                gap: 24px; position: relative; }
.marca {
  width: calc((100% - 72px) / 4); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 306 / 132; border-radius: clamp(20px, 2.5vw, 32px);
  background: #fbf8f5; border: 1px solid #e0d3cc;
}
/* caixa óptica fixa: todo logo ocupa a mesma largura, o que alinha
   marcas de proporções muito diferentes */
.marca img { width: 168px; height: 56px; object-fit: contain; filter: brightness(0); }
.marca--tall img { height: 76px; }
.marca__word { font-family: var(--font-display); font-weight: 300; font-size: 34px;
               letter-spacing: .06em; line-height: 1; }
.marcas__note { margin-top: 30px; position: relative; }

/* ---- segundo bloco: marcas parceiras, todas em tipografia ---- */
.marcas__head--sec { margin-top: 84px; padding-top: 60px; }
.marcas__head--sec::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: 120px; height: 1px; background: #d8cbc4;
}
/* flex em vez de grid: com dez marcas a última fileira fica incompleta,
   e assim ela centraliza em vez de ficar encostada à esquerda */
.marcas__grid--words .marca { padding: 0 18px; text-align: center; }
.marcas__grid--words .marca__word {
  font-size: clamp(19px, 1.95vw, 28px); line-height: 118%;
  text-wrap: balance; display: block;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--maroon); color: var(--peach); text-align: center;
          padding: 76px 0 64px; position: relative; overflow: hidden; }
.footer__ring { color: #a0616f; opacity: .6; width: 460px; height: 460px; right: 0; top: -80px; }
.selo { width: 150px; height: 150px; margin: 0 auto 34px; position: relative; }
.selo__out { position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid var(--pink); }
.selo__in { position: absolute; inset: 9px; border-radius: 999px;
            border: 1px dashed #b0808c; opacity: .55; }
.selo__mid { position: absolute; inset: 37px; display: flex; flex-direction: column;
             align-items: center; justify-content: center; gap: 5px; }
.selo__mid svg { width: 15px; }
.selo__mid span { font-family: var(--font-display); font-style: italic; font-weight: 300;
                  color: var(--pink); font-size: 12px; line-height: 1; }
.footer__t { font-family: var(--font-display); font-weight: 200; letter-spacing: -.03em;
             font-size: clamp(30px, 4.3vw, 62px); line-height: 102%; max-width: 1000px;
             margin-inline: auto; position: relative; }
.footer__t em { display: block; font-style: italic; font-weight: 300; color: var(--pink);
                letter-spacing: -.02em; }
.footer__sub { margin-top: 26px; font-size: 15px; opacity: .86; position: relative; }
.footer__actions { display: flex; align-items: center; justify-content: center; gap: 16px;
                   flex-wrap: wrap; margin-top: 30px; position: relative; }
.btn { display: inline-flex; align-items: center; gap: 11px; background: var(--peach);
       color: var(--maroon); border-radius: 999px; padding: 16px 28px;
       font-size: 14px; font-weight: 600; transition: transform .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; flex: 0 0 auto; }
.footer__social { display: flex; align-items: center; justify-content: center; gap: 20px;
                  margin-top: 32px; position: relative; }
.footer__social a { display: inline-flex; transition: transform .25s ease; }
.footer__social a:hover { transform: translateY(-2px); }
.footer__kiss { width: 42px; margin: 34px auto 0; position: relative; }

/* ============================================================
   MOBILE
   A v5 não tem artboard mobile, então a adaptação segue as regras
   do projeto: nenhuma foto muda de proporção (todas continuam em
   aspect-ratio + object-fit: cover), grades viram coluna única ou
   trilho com swipe, e as máscaras perdem só um pouco de curvatura.
   ============================================================ */
@media (max-width: 1080px) {
  .dif__cards { grid-template-columns: 1fr 1fr; }
  .dif__cards .card:last-child { grid-column: 1 / -1; }
  .moda__col:nth-child(2) { padding-top: 48px; }
  .moda__col:nth-child(3) { padding-top: 16px; }
}

@media (max-width: 860px) {
  .section { padding: 40px 0 72px; }
  .head { margin-bottom: 36px; gap: 12px; flex-wrap: wrap; }
  .head svg { width: 16px; }

  /* HERO: empilha, foto abaixo do texto e centrada */
  .hero { min-height: 0; padding: 120px 0 48px; }
  .hero__wrap { flex-direction: column; align-items: flex-start; gap: 44px; }
  .hero__media { width: min(360px, 78vw); align-self: center; }
  .hero__ring { width: 320px; height: 320px; right: -110px; top: 40px; }
  .hero__cue { display: none; }
  .hero__sub { margin-top: 26px; }

  .stats__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }

  .quem__body { flex-direction: column; align-items: stretch; gap: 56px; }
  .quem__figure { width: min(360px, 76vw); align-self: center; }
  .quem__ring { width: 240px; height: 240px; right: -70px; }

  .dif__cards { grid-template-columns: 1fr; gap: 16px; margin-bottom: 56px; }
  .dif__cards .card:last-child { grid-column: auto; }
  .card { padding: 30px 26px 32px; }
  .dif__pair { grid-template-columns: 1fr; gap: 40px; }
  .dif__pair > div:last-child { padding-top: 0; }
  .dif__ring1 { width: 240px; height: 240px; right: -80px; }
  .dif__ring2 { display: none; }

  .skin__body { flex-direction: column; gap: 48px; }
  .skin__copy { padding-top: 0; }
  /* a pilha sobreposta não funciona em tela estreita:
     vira duas fotos lado a lado, sem sobreposição */
  .skin__stack { aspect-ratio: auto; display: grid; grid-template-columns: 1.35fr 1fr;
                 gap: 14px; align-items: end; }
  .skin__stack .a, .skin__stack .b { position: static; width: 100%; }
  .skin__ring1 { width: 260px; height: 260px; right: -90px; }
  .skin__ring2 { display: none; }

  /* MODA: mosaico de 3 colunas vira trilho horizontal com swipe,
     preservando o ritmo de alturas diferentes */
  .moda__lead { margin-bottom: 44px; max-width: none; }
  .moda__mosaic {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    scroll-padding-left: var(--gutter);
  }
  .moda__mosaic::-webkit-scrollbar { display: none; }
  .moda__col { flex: 0 0 auto; width: min(240px, 62vw); scroll-snap-align: start;
               gap: 16px; padding-top: 0 !important; }
  .moda__ring { width: 220px; height: 220px; right: -70px; }

  .fit__cols { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .fit__strip { grid-template-columns: 1fr; }
  .fit__strip .shot { aspect-ratio: 3 / 2; }
  .fit__foot { flex-direction: column; align-items: flex-start; }
  .fit__ring1 { width: 220px; height: 220px; right: -70px; }
  .fit__ring2 { display: none; }

  .publi__meta { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 36px; }
  .publi__ring { width: 240px; height: 240px; right: -80px; }

  .marcas { padding: 64px 0 76px; }
  .marcas__grid { gap: 14px; }
  .marca { width: calc((100% - 14px) / 2); }
  .marca img { width: 118px; height: 40px; }
  .marca--tall img { height: 54px; }
  .marca__word { font-size: 24px; }
  .marcas__ring { display: none; }
  .marcas__head--sec { margin-top: 56px; padding-top: 44px; }
  .marcas__grid--words .marca { padding: 0 12px; }

  .footer { padding: 60px 0 52px; }
  .footer__ring { width: 300px; height: 300px; right: -110px; }
  .footer__actions { flex-direction: column; gap: 12px; }
  .btn { width: 100%; justify-content: center; }
  .selo { width: 120px; height: 120px; }
  .selo__mid { inset: 28px; }
}

@media (max-width: 520px) {
  .nav { padding: 14px var(--gutter); }
  .nav__cta { padding: 11px 18px; font-size: 13px; }
  /* nas telas mais estreitas o arco fecha um pouco,
     senão o topo da foto come o rosto */
  .shot--arch { border-radius: 42% 42% 6% 6% / 30% 30% 4.5% 4.5%; }
  .stats__grid { grid-template-columns: 1fr; gap: 22px; }
  .quem__medidas { gap: 10px; }
}