:root {
  --white: #fcfbf8;
  --cream: #f8f1e7;
  --gold: #b5843e;
  --gold-dark: #8e642e;
  --champagne: #d8bd86;
  --ink: #24201d;
  --muted: #655e56;
  --display: "Bodoni Moda", Georgia, serif;
  --body: Inter, Arial, sans-serif;
  --data: "IBM Plex Sans", Inter, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--white); scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--white); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
.page { width: 100%; overflow: hidden; }
.fold { position: relative; width: 100%; min-width: 0; overflow: hidden; background-size: cover; background-repeat: no-repeat; }
.fold h1, .fold h2, .fold h3, .fold p { margin: 0; }
.fold h1, .fold h2, .fold h3 { font-family: var(--display); font-weight: 400; }

.skip-link { position: fixed; left: 12px; top: -80px; z-index: 1000; padding: 10px 14px; border-radius: 4px; background: #fff; color: #111; font: 700 13px/1.2 var(--body); text-decoration: none; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid #c59d52; outline-offset: 3px; }

.button, .topbar-cta { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.36); border-radius: .7vw; background: linear-gradient(180deg, #c49a54, #9c6d2c); box-shadow: 0 .55vw 1.35vw rgba(93,62,26,.16), inset 0 1px rgba(255,255,255,.35); color: #fff; font: 600 .58vw/1 var(--data); letter-spacing: .015em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.button { min-height: 3.25vw; padding-inline: 1.7vw; }
.button-small { min-height: 2.05vw; padding-inline: 1.45vw; border-radius: .4vw; font-size: .5vw; }
.button:hover, .topbar-cta:hover { filter: brightness(1.06); }

/* Proporções exatas do mockup desktop de 724 × 2172. */
.fold-hero { aspect-ratio: 1301 / 721; background-image: url("assets/backgrounds/user-20260826/skincode-hero-greicy-lab.webp"); background-position: calc(50% + 1.54vw) calc(50% - .23vw); background-size: auto 100.42%; }
.fold-dimensions { aspect-ratio: 1686 / 933; background-image: url("assets/backgrounds/user-20260904/skincode-promise-desktop-v1.webp"); background-position: center; color: #f7efe3; }
.fold-science { aspect-ratio: 1672 / 941; background-image: url("assets/backgrounds/user-20260904/skincode-science-first-desktop-v2.webp"); background-position: center; }
.fold-ritual { aspect-ratio: 724 / 212; background-image: url("assets/backgrounds/user-20260824/bg-user-ritual.webp"); background-position: center; }
.fold-authority { aspect-ratio: 1672 / 941; background-image: url("assets/backgrounds/user-20260824/bg-user-autoridade.webp"); background-position: center; color: #fff; }
.fold-offers { height: auto; min-height: 75vw; padding: 5.3vw 6.2vw 4vw; background: radial-gradient(circle at 8% 12%, rgba(218,177,106,.18), transparent 26%), radial-gradient(circle at 92% 82%, rgba(191,133,51,.13), transparent 30%), linear-gradient(145deg, #fffdf9 0%, #f8efe2 58%, #f1dfc7 100%); color: #2f2923; }

/* Hero */
.fold-hero::before { position: absolute; left: 30%; top: 4%; bottom: 0; z-index: 1; width: 38%; background: radial-gradient(ellipse 50% 55% at 50% 48%, rgba(250,247,241,.96) 0%, rgba(250,247,241,.82) 48%, rgba(250,247,241,0) 100%); content: ""; pointer-events: none; }
.topbar { position: absolute; left: 4.2%; right: .8%; top: .55%; z-index: 5; display: flex; height: 11%; align-items: center; }
.brand { display: flex; width: 20%; height: 100%; flex: 0 0 auto; align-items: center; gap: .55vw; text-decoration: none; }
.brand img { width: 2.8vw; height: 2.8vw; object-fit: cover; mix-blend-mode: multiply; }
.brand span { font: 500 1.2vw/1 var(--data); letter-spacing: -.06em; text-transform: uppercase; white-space: nowrap; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 2.6vw; margin-left: 9.2vw; }
.main-nav a { color: #2e2a25; font: 500 .65vw/1 var(--body); text-decoration: none; white-space: nowrap; }
.topbar-cta { min-height: 1.75vw; margin-left: auto; padding-inline: 1.45vw; border-radius: .45vw; font-size: .5vw; }
.hero-copy { position: absolute; left: 35.9%; top: 25%; z-index: 3; width: 30%; }
.eyebrow { margin-bottom: .93vw !important; color: #9b6b2d; font: 600 .54vw/1.2 var(--data); letter-spacing: .09em; text-transform: uppercase; }
.hero-copy h1 { margin-bottom: 1vw; font-size: 2.9vw; letter-spacing: -.05em; line-height: .98; text-wrap: balance; }
.hero-lead { width: 93%; margin-bottom: 1.35vw !important; color: #4a433c; font: 400 .68vw/1.42 var(--body); }
.hero-copy .button { min-width: 15.9vw; min-height: 2.95vw; padding-inline: 1.7vw; border-radius: .62vw; font-size: .57vw; box-shadow: 0 .75vw 1.7vw rgba(93,62,26,.2), inset 0 1px rgba(255,255,255,.38); }
.hero-features { display: grid; gap: .5vw; margin: .8vw 0 0; padding: 0; color: #4f4740; font: 500 .45vw/1.25 var(--body); list-style: none; }
.hero-features li { position: relative; padding-left: 1.65vw; }
.hero-features li::before { position: absolute; left: 0; top: 50%; width: .82vw; height: .82vw; transform: translateY(-50%); border: 1px solid #b98b46; border-radius: 50%; color: #a5793b; content: "✦"; font-size: .5vw; line-height: .74vw; text-align: center; }

/* Promessa SkinCode */
.fold-dimensions::before { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(10,8,7,.2) 0%, rgba(10,8,7,0) 38%, rgba(10,8,7,0) 70%, rgba(10,8,7,.3) 100%); content: ""; pointer-events: none; }
.promise-copy { position: absolute; left: 5.8%; top: 10.5%; z-index: 2; width: 30.5%; }
.promise-eyebrow { margin-bottom: 1.2vw !important; color: #d6b273; font: 600 .61vw/1 var(--data); letter-spacing: .18em; text-transform: uppercase; }
.promise-copy h2 { color: #f8efe2; font-size: 3.55vw; letter-spacing: -.05em; line-height: .94; }
.promise-copy h2 em { color: #d6b273; font-style: normal; }
.promise-lead { width: 92%; margin-top: 1.45vw !important; color: rgba(247,239,227,.72); font: 400 .74vw/1.58 var(--body); }
.promise-statement { width: 91%; margin-top: 1.6vw !important; padding: 1.05vw 0 0 1.3vw; border-top: 1px solid rgba(214,178,115,.42); border-left: 2px solid #b8833e; color: #eedabd; font: 400 1.12vw/1.35 var(--display); }
.promise-product-visual { position: absolute; left: 39%; top: 5%; bottom: 5%; z-index: 1; width: 34%; pointer-events: none; }
.promise-signals { position: absolute; right: 5.2%; top: 11.5%; z-index: 2; width: 22.5%; margin: 0; padding: 0 0 0 1.4vw; background: linear-gradient(90deg, rgba(12,9,7,0), rgba(12,9,7,.28) 22%, rgba(12,9,7,.42)); list-style: none; }
.promise-signals li { display: grid; grid-template-columns: 2.8vw 1fr; gap: 1vw; align-items: start; padding: 1.25vw 0; border-top: 1px solid rgba(214,178,115,.27); }
.promise-signals li:last-child { border-bottom: 1px solid rgba(214,178,115,.27); }
.promise-signals span { color: #b8833e; font: 400 1.8vw/1 var(--display); }
.promise-signals h3 { margin-bottom: .4vw !important; color: #f3dfbf; font-size: 1.28vw; line-height: 1; }
.promise-signals p { color: rgba(247,239,227,.68); font: 400 .61vw/1.42 var(--body); }
.promise-disclaimer { position: absolute; right: 5.2%; bottom: 3.2%; z-index: 2; color: rgba(247,239,227,.45); font: 400 .47vw/1.4 var(--data); }

/* Ciência — a composição visual é fornecida em versões desktop e mobile; o conteúdo permanece disponível a leitores de tela. */
.science-mobile-content { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }

/* Ritual */
.fold-ritual > h2 { position: absolute; left: 0; right: 0; top: 5.3%; z-index: 2; font-size: 1.58vw; text-align: center; }
.ritual-grid { position: absolute; left: 7.2%; right: 7.2%; top: 18%; bottom: 6%; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2.3%; margin: 0; padding: 0; list-style: none; }
.ritual-grid li { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(126,91,45,.12); border-radius: .5vw; background: #fff; box-shadow: 0 .5vw 1.25vw rgba(55,39,23,.08); }
.ritual-grid li > span { position: absolute; left: .65vw; top: .9vw; z-index: 2; color: #b5843e; font: 400 2.8vw/.8 var(--display); text-shadow: 0 1px .55vw rgba(255,255,255,.98); }
.ritual-media { height: 63%; overflow: hidden; background: #ead6ba; }
.ritual-media img { width: 100%; height: 100%; object-fit: cover; }
.ritual-grid li:nth-child(1) .ritual-media img { object-position: 50% 42%; }
.ritual-grid li:nth-child(2) .ritual-media img { object-position: 50% 20%; }
.ritual-grid li:nth-child(3) .ritual-media img { object-position: 50% 8%; }
.ritual-grid li:nth-child(4) .ritual-media img { object-position: 50% 8%; }
.ritual-copy { height: 37%; padding: .72vw .8vw .55vw; background: rgba(255,255,255,.94); text-align: center; }
.ritual-copy h3 { margin-bottom: .35vw; font-size: .9vw; font-weight: 500; }
.ritual-copy p { color: #5d554d; font: 400 .56vw/1.32 var(--body); }

/* Autoridade */
.authority-person { display: none; }
.authority-copy { position: absolute; left: 35.7%; top: 11.5%; z-index: 2; width: 44.5%; }
.authority-copy h2 { margin-bottom: 1.25vw; color: #f0dfbf; font-size: 2.5vw; letter-spacing: -.035em; line-height: 1.04; }
.authority-copy > p { width: 100%; color: rgba(255,255,255,.8); font: 400 .82vw/1.5 var(--body); }
.authority-copy > p strong { color: #e6c888; font-weight: 600; text-transform: uppercase; }
.credential-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .5vw; margin: 1.35vw 0 0; }
.credential-grid div { padding: .85vw .4vw; border: 1px solid rgba(216,196,156,.42); background: rgba(31,25,21,.12); text-align: center; text-transform: uppercase; }
.credential-grid dt { color: #d0af73; font: 600 .54vw/1.08 var(--data); }
.credential-grid dd { margin: .42vw 0 0; color: #fff0d2; font: 500 .59vw/1.12 var(--data); }
.authority-pack { display: none; }

/* Kits */
.offers-eyebrow { color: #a97835; font: 600 .53vw/1 var(--data); letter-spacing: .17em; text-align: center; text-transform: uppercase; }
.fold-offers > h2 { margin-top: .7vw !important; font-size: 2.5vw; letter-spacing: -.045em; line-height: 1; text-align: center; }
.offers-subtitle { width: 38%; margin: .8vw auto 0 !important; color: #655d55; font: 400 .62vw/1.45 var(--body); text-align: center; }
.offer-grid { display: grid; width: 68%; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25vw; margin: 4.7vw auto 0; align-items: stretch; }
.offer-card { position: relative; display: flex; min-width: 0; min-height: 47vw; flex-direction: column; align-items: center; overflow: hidden; padding: 0 1.25vw 1.25vw; border: 1px solid rgba(166,115,45,.3); border-radius: .85vw; background: rgba(255,255,255,.9); box-shadow: 0 1.15vw 2.9vw rgba(83,57,28,.08); text-align: center; }
.offer-card-featured { transform: translateY(-.8vw); border-color: rgba(181,126,48,.8); box-shadow: 0 1.4vw 3.4vw rgba(130,88,31,.15); }
.offer-ribbon { width: calc(100% + 2.5vw); min-height: 2.4vw; margin: 0 -1.25vw 1.15vw !important; padding: .75vw .6vw; background: #2c2520; color: #f3dfb9; font: 600 .53vw/1 var(--data); letter-spacing: .09em; text-transform: uppercase; }
.offer-card-featured .offer-ribbon { background: linear-gradient(90deg, #b37c31, #d2a85f, #b37c31); color: #fff; }
.offer-card-advanced .offer-ribbon { background: #73502c; }
.offer-card h3 { font-family: var(--data); font-size: 1.05vw; font-weight: 600; letter-spacing: .035em; line-height: 1.05; text-transform: uppercase; }
.offer-tier { min-height: 2.1vw; margin-top: .45vw !important; color: #756b61; font: 500 .52vw/1.25 var(--body); letter-spacing: .035em; text-transform: uppercase; }
.offer-bottles { position: relative; display: flex; width: 100%; height: 13vw; align-items: center; justify-content: center; margin: .45vw 0 .25vw; overflow: hidden; background: #fffdfb; }
.offer-bottles img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; }
.offer-bottles.one img { width: 68%; }
.offer-split { position: absolute; right: .15vw; bottom: .25vw; z-index: 2; display: flex; align-items: center; gap: .18vw; font: 700 .36vw/1 var(--data); letter-spacing: .035em; text-transform: uppercase; }
.offer-split span { padding: .25vw .34vw; border: 1px solid rgba(177,123,45,.25); border-radius: 2vw; background: rgba(255,255,255,.94); color: #624b2d; box-shadow: 0 .18vw .45vw rgba(72,46,18,.08); }
.offer-split b { display: grid; width: .8vw; height: .8vw; place-items: center; border-radius: 50%; background: #c58d34; color: #fff; font-size: .47vw; }
.offer-gift { display: flex; width: calc(100% + 2.5vw); min-height: 2.2vw; align-items: center; justify-content: center; gap: .45vw; margin: 0 -1.25vw !important; padding: .55vw .7vw; background: #f7e8c6; color: #8b5f25; font: 700 .5vw/1.1 var(--data); letter-spacing: .055em; text-transform: uppercase; }
.offer-gift.is-quiet { background: #f2e4d0; }
.offer-gift i { position: relative; width: .75vw; height: .65vw; border-radius: .08vw; background: #bd842f; }
.offer-gift i::before { position: absolute; left: 45%; top: -.22vw; width: .12vw; height: .9vw; background: #f7e8c6; content: ""; transform: translateX(-50%); }
.offer-gift i::after { position: absolute; left: -.1vw; top: -.18vw; width: .95vw; height: .15vw; border-radius: .06vw; background: #bd842f; content: ""; }
.offer-price { display: flex; width: 100%; min-height: 8.7vw; flex-direction: column; align-items: center; justify-content: center; padding: .7vw 0 .55vw; }
.offer-price.no-discount { padding-top: 2.15vw; }
.offer-discount { display: inline-flex; min-height: 1.55vw; align-items: center; margin-bottom: .35vw; padding: .3vw .6vw; border: 1px solid rgba(212,160,72,.78); border-radius: .42vw; background: #3a251d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #fff; font: 700 .82vw/1 var(--data); letter-spacing: -.025em; }
.offer-list-price { color: #655a50; font: 600 .43vw/1.25 var(--data); letter-spacing: .035em; text-transform: uppercase; }
.offer-list-price s { color: #766a5f; text-decoration-thickness: 1px; }
.offer-price > strong { margin-top: .18vw; color: #2b2723; font: 700 2.55vw/.92 var(--data); letter-spacing: -.065em; }
.offer-price small { font-size: .72vw; letter-spacing: 0; }
.offer-cash { margin-top: .28vw !important; color: #655a50; font: 500 .43vw/1.2 var(--data); }
.offer-cash b { color: #9b6127; font-weight: 700; }
.offer-benefits { width: 100%; margin: 0 0 1vw; padding: 0; text-align: left; list-style: none; }
.offer-benefits li { position: relative; min-height: 2.9vw; padding: .85vw .2vw .7vw 1.4vw; border-top: 1px solid rgba(94,77,60,.17); color: #504840; font: 400 .51vw/1.35 var(--body); }
.offer-benefits li::before { position: absolute; left: .2vw; top: .92vw; color: #b47c2d; content: "✓"; font: 700 .66vw/1 var(--data); }
.offer-card .button { width: 100%; min-height: 3vw; margin-top: auto; border-radius: .45vw; font-size: .55vw; }
.commerce-notice { width: 78%; margin: 1.1vw auto 0 !important; color: #7f6137; font: 500 .43vw/1.35 var(--data); text-align: center; }

/* Rodapé */
.site-footer { min-height: 36vw; padding: 5.3vw 10.5vw 1.8vw; background: #050505; color: #f5f1e9; }
.footer-brand { display: flex; align-items: center; flex-direction: column; text-align: center; text-transform: uppercase; }
.footer-brand strong { color: #fff; font: 600 1.8vw/.95 var(--data); letter-spacing: .085em; }
.footer-brand span { margin-top: .38vw; color: #b7afa6; font: 600 .49vw/1 var(--data); letter-spacing: .38em; }
.footer-grid { display: grid; grid-template-columns: 1fr 1.2fr .95fr; gap: 6.5vw; margin-top: 4.2vw; }
.footer-column h2 { margin: 0 0 1.55vw; color: #f2dfba; font: 500 .68vw/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.footer-column ul { margin: 0; padding: 0; list-style: none; }
.footer-column li + li { margin-top: .85vw; }
.footer-column a,
.footer-column li > span { color: #e6e2dc; font: 500 .78vw/1.15 var(--body); text-decoration: none; }
.footer-column a { transition: color .2s ease; }
.footer-column a:hover { color: #d5ad69; }
.footer-legal li > span { display: flex; align-items: center; gap: .6vw; }
.footer-column em,
.footer-social em { display: inline-flex; min-height: 1.15vw; align-items: center; padding: .25vw .45vw; border: 1px solid rgba(255,255,255,.22); border-radius: 2vw; color: #a8a39d; font: 600 .38vw/1 var(--data); font-style: normal; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.footer-service p { margin: 0; color: #d8d3cc; font: 500 .76vw/1.45 var(--body); }
.footer-contact-line { display: flex; align-items: center; gap: .65vw; margin-top: .8vw !important; color: #fff !important; }
.footer-contact-line i { position: relative; width: 1.05vw; height: 1.05vw; flex: 0 0 auto; border: 1px solid #d6b370; border-radius: 50%; }
.footer-contact-line i::before { position: absolute; left: 50%; top: 50%; width: .4vw; height: .4vw; border-bottom: 1px solid #d6b370; border-left: 1px solid #d6b370; content: ""; transform: translate(-50%,-55%) rotate(-35deg); }
.footer-contact-line strong { font-weight: 650; }
.footer-service-note { margin-top: 1.2vw !important; color: #938e88 !important; font-size: .64vw !important; }
.footer-trust-row { display: grid; grid-template-columns: 1fr 1.2fr .95fr; gap: 6.5vw; align-items: center; margin-top: 2.9vw; padding: 1.55vw 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-social { display: flex; align-items: center; gap: .75vw; color: #e8e4de; font: 600 .7vw/1 var(--body); text-decoration: none; }
.footer-social > i { position: relative; width: 2.05vw; height: 2.05vw; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.3); border-radius: .55vw; }
.footer-social > i::before { position: absolute; left: 50%; top: 50%; width: .72vw; height: .72vw; border: .12vw solid #fff; border-radius: .22vw; content: ""; transform: translate(-50%,-50%); }
.footer-social > i::after { position: absolute; right: .47vw; top: .43vw; width: .18vw; height: .18vw; border-radius: 50%; background: #fff; content: ""; }
.footer-payment-badges,
.footer-security-badges { display: flex; align-items: center; gap: .55vw; margin: 0; padding: 0; list-style: none; }
.footer-payment-badges li,
.footer-security-badges li { display: inline-flex; min-width: 3.25vw; height: 1.75vw; align-items: center; justify-content: center; gap: .25vw; padding: 0 .55vw; border: 1px solid rgba(255,255,255,.22); border-radius: .35vw; background: #151515; color: #efefef; font: 700 .55vw/1 var(--data); text-transform: uppercase; }
.payment-mastercard i { position: relative; width: 1.2vw; height: .72vw; }
.payment-mastercard i::before,
.payment-mastercard i::after { position: absolute; top: 0; width: .72vw; height: .72vw; border-radius: 50%; content: ""; }
.payment-mastercard i::before { left: 0; background: #ea5441; }
.payment-mastercard i::after { right: 0; background: #f3b02c; opacity: .92; }
.payment-visa { font-style: italic !important; }
.payment-elo i { width: .55vw; height: .55vw; border-radius: 50%; background: conic-gradient(#ee394f 0 33%, #f4c333 33% 66%, #31b8a8 66%); }
.payment-pix i { width: .72vw; height: .72vw; border: .12vw solid #41cabb; transform: rotate(45deg); }
.footer-security-badges { justify-content: flex-end; }
.footer-security-badges li { min-width: auto; color: #d8d8d8; font-size: .48vw; text-transform: none; white-space: nowrap; }
.footer-security-badges i { display: grid; width: .85vw; height: .85vw; place-items: center; border-radius: 50%; background: #39bf79; color: #07140d; font-size: .55vw; font-style: normal; }
.footer-business { margin: 1.55vw auto 0; color: #9e9992; font: 500 .55vw/1.5 var(--body); text-align: center; }
.footer-business strong { color: #c5beb5; font-weight: 600; }
.footer-copyright { margin: .8vw 0 0; color: #77736f; font: 500 .58vw/1.2 var(--body); text-align: center; }

@media (max-width: 600px) {
  .button, .topbar-cta { border-radius: 1.8vw; font-size: 2.15vw; }
  .button { min-height: 10vw; padding-inline: 5vw; }
  .button-small { min-height: 8.5vw; padding-inline: 4.5vw; font-size: 1.95vw; }

  /* As composições mobile preservam as proporções originais enviadas. */
  .fold { aspect-ratio: 1080 / 1920; background-position: center; background-size: cover; }
  .fold-hero { height: auto; aspect-ratio: 1080 / 1920; background-color: #f7efe4; background-image: url("assets/backgrounds/mobile-user-20260827/skincode-hero-greicy-lab-mobile.webp"); background-position: center top; background-size: 100% auto; }
  .fold-dimensions { aspect-ratio: auto; background-image: none; background-color: #160f09; }
  .fold-science { height: auto; aspect-ratio: 941 / 1672; background-image: url("assets/backgrounds/mobile-user-20260904/skincode-science-first-mobile-v2.webp"); background-position: center; background-size: cover; }
  .fold-ritual { background-image: url("assets/backgrounds/mobile-user-20260824/05-ritual-mobile.webp"); }
  .fold-authority { background-image: url("assets/backgrounds/mobile-user-20260824/06-greicy-mobile.webp"); }
  .fold-offers { height: auto; min-height: 0; aspect-ratio: auto; padding: 10vw 6vw 9vw; background: radial-gradient(circle at 10% 5%, rgba(218,177,106,.2), transparent 24%), radial-gradient(circle at 90% 94%, rgba(191,133,51,.16), transparent 28%), linear-gradient(160deg, #fffdf9 0%, #f8efe2 58%, #efd8b9 100%); }

  .fold-hero::before { display: none; }
  .topbar { left: 5%; right: 5%; top: 1.2vw; height: 10vw; }
  .brand { width: 38%; }
  .brand img { width: 8vw; height: 8vw; }
  .brand span { font-size: 3vw; }
  .main-nav { display: none; }
  .topbar-cta { min-height: 7.5vw; margin-left: auto; padding-inline: 3.5vw; font-size: 1.85vw; }
  .hero-copy { left: 0; top: 0; width: 100%; height: 100%; }
  .eyebrow { position: absolute; right: 3.5%; top: 16vw; width: 54%; margin: 0 !important; color: #a97835; font-size: 2.15vw; letter-spacing: .075em; text-align: right; }
  .hero-copy h1 { position: absolute; right: 3.5%; top: 23.5vw; width: 53%; margin: 0; font-size: 6.1vw; letter-spacing: -.045em; line-height: 1.03; text-align: right; text-shadow: 0 1px rgba(255,255,255,.65); text-wrap: wrap; }
  .hero-lead { position: absolute; right: 3.5%; top: 48.5vw; width: 50%; margin: 0 !important; color: #514a43; font-size: 2.55vw; line-height: 1.42; text-align: right; }
  .hero-copy .button { position: absolute; left: 50%; top: 150.5vw; min-width: 0; min-height: 10vw; padding-inline: 5vw; transform: translateX(-50%); border-radius: 1.8vw; box-shadow: 0 .55vw 1.35vw rgba(93,62,26,.16), inset 0 1px rgba(255,255,255,.35); font-size: 2.15vw; }
  .hero-features { position: absolute; left: 5%; right: 5%; top: 162.5vw; justify-items: center; gap: 2.2vw; margin: 0; color: #3f352d; font-size: 2.2vw; font-weight: 600; line-height: 1.2; text-align: center; text-shadow: 0 1px 2px rgba(255,255,255,.92); }
  .hero-features li { width: max-content; max-width: 100%; padding-left: 4.5vw; }
  .hero-features li::before { width: 2.7vw; height: 2.7vw; font-size: 1.5vw; line-height: 2.35vw; }

  .fold-dimensions::before { background: linear-gradient(180deg, rgba(9,7,5,.24) 0%, rgba(9,7,5,0) 34%, rgba(9,7,5,0) 70%, rgba(9,7,5,.42) 100%); }
  .promise-copy { position: relative; left: auto; top: auto; width: 86%; margin: 0 auto; padding-top: 5.7vw; text-align: center; }
  .promise-eyebrow { margin-bottom: 2.6vw !important; font-size: 2.2vw; }
  .promise-copy h2 { font-size: 8.4vw; line-height: .94; }
  .promise-lead { width: 94%; margin: 3.2vw auto 0 !important; font-size: 2.55vw; line-height: 1.48; }
  .promise-statement { width: 94%; margin: 3.2vw auto 0 !important; padding: 2.3vw 0 0; border-left: 0; color: #f7efe3; font-size: clamp(16px, 3.9vw, 22px); line-height: 1.4; }
  /* A área vazia da foto acompanha a altura real da copy; o produto começa abaixo dela. */
  .promise-product-visual { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; height: 185.7vw; margin-top: -65vw; background-image: linear-gradient(180deg, rgba(9,7,5,.6), rgba(9,7,5,.2) 60vw, transparent 70vw, transparent 127vw, rgba(9,7,5,.5) 145vw), url("assets/backgrounds/mobile-user-20260904/skincode-promise-mobile-v1.webp"); background-position: center top; background-size: 100% 100%, 100% auto; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14vw, #000 165vw, transparent); mask-image: linear-gradient(180deg, transparent, #000 14vw, #000 165vw, transparent); }
  .promise-signals { left: 6.5%; right: 6.5%; top: auto; bottom: 10vw; width: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 5vw; row-gap: 0; padding: 0; background: linear-gradient(180deg, rgba(11,8,6,.02), rgba(11,8,6,.4)); }
  .promise-signals li { grid-template-columns: 7.5vw 1fr; gap: 2vw; min-width: 0; padding: 2.2vw 0; }
  .promise-signals li:nth-child(3) { border-bottom: 1px solid rgba(214,178,115,.27); }
  .promise-signals span { font-size: 5vw; }
  .promise-signals h3 { margin-bottom: .8vw !important; font-size: 3.25vw; }
  .promise-signals p { font-size: 2.05vw; line-height: 1.32; }
  .promise-disclaimer { left: 7%; right: 7%; bottom: 2vw; font-size: 1.7vw; line-height: 1.3; text-align: center; }

  .fold-ritual > h2 { top: 3.5%; padding-inline: 6%; font-size: 6vw; line-height: 1.05; }
  .ritual-grid { left: 7%; right: 7%; top: 13.5%; bottom: 4%; grid-template-columns: 1fr; grid-template-rows: repeat(4,minmax(0,1fr)); gap: 2.5vw; }
  .ritual-grid li { display: grid; grid-template-columns: 46% 1fr; overflow: hidden; border-radius: 1.5vw; background: rgba(255,255,255,.2); }
  .ritual-grid li > span { left: 2.3vw; top: 2.3vw; display: grid; width: 9vw; height: 9vw; place-items: center; transform: none; border: 1px solid rgba(181,132,62,.25); border-radius: 50%; background: rgba(255,250,242,.88); box-shadow: 0 1vw 2.5vw rgba(73,48,23,.12); font-size: 5.8vw; line-height: 1; text-shadow: none; }
  .ritual-media { height: 100%; }
  .ritual-copy { display: flex; height: 100%; flex-direction: column; justify-content: center; padding: 4vw; }
  .ritual-copy h3 { margin-bottom: 1.4vw; font-size: 3.9vw; }
  .ritual-copy p { font-size: 2.45vw; }

  .authority-copy { left: 6%; top: 6.5%; width: 88%; }
  .authority-person,
  .authority-pack { display: none; }
  .authority-copy h2 { margin-bottom: 4.2vw; font-size: 7vw; line-height: 1.03; }
  .authority-copy > p { width: 94%; font-size: 2.85vw; line-height: 1.48; }
  .credential-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.8vw; margin-top: 4.2vw; width: 94%; }
  .credential-grid div { padding: 2.8vw 1.2vw; background: rgba(31,25,21,.18); }
  .credential-grid dt { font-size: 2.05vw; }
  .credential-grid dd { margin-top: 1.1vw; font-size: 2.25vw; }

  .offers-eyebrow { font-size: 2.2vw; }
  .fold-offers > h2 { margin-top: 2.5vw !important; font-size: 8.2vw; line-height: 1.03; }
  .offers-subtitle { width: 86%; margin-top: 3vw !important; font-size: 3vw; }
  .offer-grid { width: 100%; grid-template-columns: 1fr; gap: 5vw; margin-top: 7vw; }
  .offer-card { min-height: 151vw; padding: 0 4.5vw 4.5vw; border-radius: 2.5vw; box-shadow: 0 3vw 8vw rgba(83,57,28,.1); }
  .offer-card-featured { transform: none; }
  .offer-ribbon { width: calc(100% + 9vw); min-height: 9vw; margin: 0 -4.5vw 4vw !important; padding: 3vw 2vw; font-size: 2.3vw; }
  .offer-card h3 { font-size: 4.5vw; }
  .offer-tier { min-height: 7vw; margin-top: 1.5vw !important; font-size: 2.25vw; }
  .offer-bottles { height: 44vw; margin: 1vw 0; }
  .offer-bottles img { width: 100%; height: 100%; margin: 0; }
  .offer-bottles.one img { width: 58%; }
  .offer-split { right: .5vw; bottom: .7vw; gap: .7vw; font-size: 1.55vw; }
  .offer-split span { padding: .9vw 1.2vw; border-radius: 8vw; box-shadow: 0 .5vw 1.5vw rgba(72,46,18,.1); }
  .offer-split b { width: 3.1vw; height: 3.1vw; font-size: 1.7vw; }
  .offer-gift { width: calc(100% + 9vw); min-height: 8.5vw; gap: 1.5vw; margin: 0 -4.5vw !important; padding: 2.4vw 2vw; font-size: 2.2vw; }
  .offer-gift i { width: 3vw; height: 2.6vw; border-radius: .3vw; }
  .offer-gift i::before { top: -.8vw; width: .45vw; height: 3.6vw; }
  .offer-gift i::after { left: -.4vw; top: -.7vw; width: 3.8vw; height: .6vw; border-radius: .2vw; }
  .offer-price { min-height: 30vw; padding: 2.5vw 0 2vw; }
  .offer-price.no-discount { padding-top: 7vw; }
  .offer-discount { min-height: 7vw; margin-bottom: 1.3vw; padding: 1vw 2.2vw; border-radius: 1.5vw; font-size: 3.5vw; }
  .offer-list-price { font-size: 2vw; }
  .offer-price > strong { margin-top: .8vw; font-size: 9vw; }
  .offer-price small { font-size: 3vw; }
  .offer-cash { margin-top: 1vw !important; font-size: 2vw; }
  .offer-benefits { margin-bottom: 3vw; }
  .offer-benefits li { min-height: 10vw; padding: 3vw 1vw 2.5vw 5.5vw; font-size: 2.55vw; }
  .offer-benefits li::before { left: 1vw; top: 3.2vw; font-size: 3vw; }
  .offer-card .button { min-height: 11vw; border-radius: 1.5vw; font-size: 2.4vw; }
  .commerce-notice { width: 94%; margin-top: 4vw !important; font-size: 2.05vw; }

  .site-footer { min-height: 0; padding: 12vw 7vw 7vw; }
  .footer-brand strong { font-size: 5.6vw; }
  .footer-brand span { margin-top: 1.3vw; font-size: 1.8vw; }
  .footer-grid { grid-template-columns: 1fr; gap: 0; margin-top: 10vw; }
  .footer-column { padding: 6vw 0; border-top: 1px solid rgba(255,255,255,.14); }
  .footer-column h2 { margin-bottom: 4.5vw; font-size: 3vw; }
  .footer-column li + li { margin-top: 3.2vw; }
  .footer-column a,
  .footer-column li > span { font-size: 3.45vw; }
  .footer-navigation ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3.2vw 5vw; }
  .footer-navigation li + li { margin-top: 0; }
  .footer-legal li > span { justify-content: space-between; gap: 3vw; }
  .footer-column em,
  .footer-social em { min-height: 5vw; padding: 1.3vw 2vw; border-radius: 8vw; font-size: 1.65vw; }
  .footer-service p { font-size: 3.35vw; }
  .footer-contact-line { gap: 2.6vw; margin-top: 3vw !important; }
  .footer-contact-line i { width: 4.3vw; height: 4.3vw; }
  .footer-contact-line i::before { width: 1.7vw; height: 1.7vw; }
  .footer-service-note { margin-top: 4vw !important; font-size: 2.8vw !important; }
  .footer-trust-row { grid-template-columns: 1fr; gap: 5vw; margin-top: 0; padding: 6vw 0; }
  .footer-social { gap: 3vw; font-size: 3.3vw; }
  .footer-social > i { width: 9vw; height: 9vw; border-radius: 2vw; }
  .footer-social > i::before { width: 3.2vw; height: 3.2vw; border-width: .45vw; border-radius: .8vw; }
  .footer-social > i::after { right: 2vw; top: 1.8vw; width: .8vw; height: .8vw; }
  .footer-payment-badges,
  .footer-security-badges { flex-wrap: wrap; justify-content: flex-start; gap: 2vw; }
  .footer-payment-badges li,
  .footer-security-badges li { min-width: 14vw; height: 7.5vw; gap: 1vw; padding: 0 2vw; border-radius: 1.3vw; font-size: 2.5vw; }
  .payment-mastercard i { width: 5vw; height: 3vw; }
  .payment-mastercard i::before,
  .payment-mastercard i::after { width: 3vw; height: 3vw; }
  .payment-elo i { width: 2.5vw; height: 2.5vw; }
  .payment-pix i { width: 3vw; height: 3vw; border-width: .45vw; }
  .footer-security-badges li { min-width: auto; font-size: 2.2vw; }
  .footer-security-badges i { width: 3.6vw; height: 3.6vw; font-size: 2.2vw; }
  .footer-business { margin-top: 5vw; font-size: 2.35vw; line-height: 1.55; }
  .footer-copyright { margin-top: 2.5vw; font-size: 2.55vw; }
}

/* Camada tipográfica de legibilidade — preserva a composição e eleva apenas a escala de leitura. */
@media (min-width: 601px) {
  .main-nav a { font-size: clamp(10px, .8vw, 13px); }
  .topbar-cta { font-size: clamp(9px, .64vw, 11px); }
  .eyebrow { font-size: clamp(9px, .64vw, 11px); }
  .hero-copy h1 { font-size: clamp(27px, 2.9vw, 46px); }
  .hero-lead { font-size: clamp(11px, .86vw, 14px); line-height: 1.45; }
  .hero-copy .button { font-size: clamp(9px, .7vw, 12px); }
  .hero-features { font-size: clamp(9px, .68vw, 11px); line-height: 1.3; }

  .promise-eyebrow { font-size: clamp(9px, .7vw, 11px); }
  .promise-lead { font-size: clamp(11px, .9vw, 15px); line-height: 1.55; }
  .promise-signals p { font-size: clamp(10px, .8vw, 13px); line-height: 1.42; }
  .promise-disclaimer { font-size: clamp(8px, .62vw, 10px); }

  .fold-ritual > h2 { font-size: clamp(22px, 1.8vw, 29px); }
  .ritual-copy h3 { font-size: clamp(14px, 1.1vw, 18px); line-height: 1.12; }
  .ritual-copy p { font-size: clamp(10px, .8vw, 13px); line-height: 1.38; }

  .authority-copy > p { font-size: clamp(10px, .95vw, 15px); line-height: 1.5; }
  .credential-grid dt { font-size: clamp(8px, .64vw, 10px); }
  .credential-grid dd { font-size: clamp(9px, .7vw, 11px); }

  .offers-eyebrow { font-size: clamp(9px, .68vw, 11px); }
  .offers-subtitle { font-size: clamp(11px, .88vw, 14px); }
  .offer-ribbon { font-size: clamp(9px, .7vw, 11px); }
  .offer-card h3 { font-size: clamp(14px, 1.1vw, 18px); }
  .offer-tier { font-size: clamp(9px, .7vw, 11px); }
  .offer-split { font-size: clamp(8px, .56vw, 10px); }
  .offer-split b { font-size: clamp(8px, .56vw, 10px); }
  .offer-gift { font-size: clamp(9px, .68vw, 11px); }
  .offer-discount { font-size: clamp(12px, .92vw, 15px); }
  .offer-list-price,
  .offer-cash { font-size: clamp(9px, .7vw, 11px); }
  .offer-price > strong { font-size: clamp(28px, 2.55vw, 41px); }
  .offer-price small { font-size: clamp(10px, .78vw, 13px); }
  .offer-benefits li { font-size: clamp(10px, .82vw, 13px); line-height: 1.4; }
  .offer-benefits li::before { font-size: clamp(10px, .75vw, 12px); }
  .offer-card .button { font-size: clamp(9px, .72vw, 12px); }
  .commerce-notice { font-size: clamp(8px, .62vw, 10px); line-height: 1.45; }

  .footer-column h2 { font-size: clamp(10px, .84vw, 13px); }
  .footer-column a,
  .footer-column li > span { font-size: clamp(11px, .95vw, 15px); }
  .footer-column em,
  .footer-social em { font-size: clamp(7px, .5vw, 9px); }
  .footer-service p { font-size: clamp(11px, .9vw, 14px); }
  .footer-service-note { font-size: clamp(9px, .72vw, 11px) !important; }
  .footer-social { font-size: clamp(10px, .84vw, 13px); }
  .footer-payment-badges li,
  .footer-security-badges li { font-size: clamp(8px, .64vw, 10px); }
  .footer-security-badges li { font-size: clamp(8px, .58vw, 10px); }
  .footer-business { font-size: clamp(9px, .7vw, 11px); }
  .footer-copyright { font-size: clamp(9px, .72vw, 11px); }
}

/* Hero desktop travada pela referência aprovada de 1301 × 721.
   Esta exceção mantém a melhoria de leitura nas demais seções sem alterar
   a hierarquia, o ritmo vertical ou a escala dos controles da primeira dobra. */
@media (min-width: 601px) {
  .fold-hero .main-nav a { font-size: .65vw; }
  .fold-hero .topbar-cta { font-size: .5vw; }
  .fold-hero .eyebrow { margin-bottom: .78vw !important; font-size: .54vw; }
  .fold-hero .hero-copy h1 { font-size: 3vw; }
  .fold-hero .hero-lead { margin-bottom: 1.05vw !important; font-size: .68vw; line-height: 1.42; }
  .fold-hero .hero-copy .button { min-height: 3vw; font-size: .57vw; }
  .fold-hero .hero-features { font-size: .45vw; line-height: 1.25; }
}

@media (max-width: 600px) {
  .topbar-cta { font-size: 2.3vw; }
  .eyebrow { font-size: 2.5vw; }
  .hero-lead { font-size: 3.05vw; line-height: 1.42; }
  .hero-copy .button { font-size: 2.8vw; }
  .hero-features { font-size: 2.75vw; line-height: 1.25; }

  .promise-eyebrow { font-size: 2.5vw; }
  .promise-lead { color: #f7efe3; font-size: clamp(14px, 3.2vw, 18px); line-height: 1.55; }
  .promise-signals p { font-size: 2.45vw; line-height: 1.32; }
  .promise-disclaimer { font-size: 2vw; }

  .ritual-copy h3 { font-size: 4.05vw; }
  .ritual-copy p { font-size: 2.55vw; line-height: 1.3; }

  .authority-copy > p { font-size: 3.1vw; line-height: 1.42; }
  .credential-grid dt { font-size: 2.3vw; }
  .credential-grid dd { font-size: 2.6vw; }

  .offers-eyebrow { font-size: 2.6vw; }
  .offers-subtitle { font-size: 3.4vw; }
  .offer-ribbon { font-size: 2.65vw; }
  .offer-tier { font-size: 2.65vw; }
  .offer-split { font-size: 1.9vw; }
  .offer-split b { font-size: 1.9vw; }
  .offer-gift { font-size: 2.6vw; }
  .offer-discount { font-size: 3.8vw; }
  .offer-list-price,
  .offer-cash { font-size: 2.45vw; }
  .offer-price small { font-size: 3.2vw; }
  .offer-benefits li { font-size: 3.05vw; line-height: 1.38; }
  .offer-card .button { font-size: 2.9vw; }
  .commerce-notice { font-size: 2.4vw; line-height: 1.4; }

  .footer-column h2 { font-size: 3.3vw; }
  .footer-column a,
  .footer-column li > span { font-size: 3.7vw; }
  .footer-column em,
  .footer-social em { font-size: 2vw; }
  .footer-service p { font-size: 3.65vw; }
  .footer-service-note { font-size: 3.05vw !important; }
  .footer-social { font-size: 3.6vw; }
  .footer-payment-badges li,
  .footer-security-badges li { font-size: 2.7vw; }
  .footer-security-badges li { font-size: 2.5vw; }
  .footer-business { font-size: 2.6vw; }
  .footer-copyright { font-size: 2.75vw; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .ritual-copy h3 { font-size: 1.1vw; line-height: 1.08; }
  .ritual-copy p { font-size: .88vw; line-height: 1.25; }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
  html { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}