:root {
  --ink: #060606;
  --cream: #f3efe6;
  --beige: #d1c7b8;
  --rose: #96446c;
  --rose-dark: #4f183a;
  --acid: #fff200;
  --mint: #99d4c0;
  --line: rgba(6, 6, 6, .18);
  --white-line: rgba(255, 255, 255, .22);
  --mono: 'DM Mono', monospace;
  --sans: 'DM Sans', Arial, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
::selection { color: var(--ink); background: var(--acid); }

.skip-link { background: var(--acid); color: var(--ink); font: 700 12px var(--mono); left: 16px; padding: 12px 16px; position: fixed; top: -60px; z-index: 999; }
.skip-link:focus { top: 16px; }

.site-header { align-items: flex-start; background: var(--ink); color: var(--cream); display: grid; gap: clamp(16px, 3vw, 40px); grid-template-columns: 110px minmax(0, 1fr) auto auto; min-height: 90px; padding: 18px 3.5vw; position: relative; z-index: 10; }
.memo-mark { display: block; position: relative; width: 58px; }
.brand-logo { display: block; height: auto; width: 100%; }
.header-kicker { color: var(--beige); font: 10px/1.35 var(--mono); letter-spacing: .05em; margin: 2px 0; }
.header-about { border-bottom: 1px solid var(--white-line); color: var(--cream); font: 10px var(--mono); letter-spacing: .03em; padding: 4px 0 7px; white-space: nowrap; }
.header-cta { align-items: center; border-bottom: 1px solid var(--acid); color: var(--acid); display: flex; font: 10px var(--mono); gap: 14px; letter-spacing: .03em; padding: 4px 0 7px; transition: gap .25s ease; }
.header-cta:hover { gap: 22px; }

.hero { background: var(--ink); color: var(--cream); display: grid; min-height: calc(100vh - 90px); overflow: hidden; padding: clamp(56px, 9vw, 128px) 8vw 34px; position: relative; }
.hero-grid { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 62px 62px; inset: 0; mask-image: linear-gradient(to bottom, black 0%, transparent 88%); opacity: .75; pointer-events: none; position: absolute; }
.hero-glow { border-radius: 50%; filter: blur(10px); opacity: .78; position: absolute; }
.hero-glow-one { background: var(--rose); height: 620px; right: -220px; top: -150px; width: 620px; }
.hero-glow-two { background: #1d4f47; bottom: -320px; height: 580px; left: 25%; width: 580px; }
.hero-orbit { border: 1px solid rgba(255,255,255,.42); border-radius: 50%; pointer-events: none; position: absolute; }
.orbit-a { height: 880px; right: -380px; top: -310px; width: 880px; }
.orbit-b { height: 630px; right: -230px; top: -190px; width: 630px; }
.hero-copy { align-self: center; max-width: 770px; position: relative; z-index: 6; }
.eyebrow { align-items: center; color: var(--acid); display: flex; font: 10px/1.4 var(--mono); gap: 9px; letter-spacing: .08em; margin: 0 0 26px; }
.eyebrow span { background: currentColor; display: inline-block; height: 7px; width: 7px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.3rem, 7.6vw, 8rem); font-weight: 500; letter-spacing: -.075em; line-height: .88; margin-bottom: 34px; }
h1 em, h2 em { color: var(--acid); font-family: var(--serif); font-weight: 600; letter-spacing: -.08em; }
.hero-lede { color: var(--beige); font-size: clamp(1rem, 1.65vw, 1.38rem); line-height: 1.35; max-width: 450px; }
.button { align-items: center; border: 0; cursor: pointer; display: inline-flex; font: 500 11px var(--mono); gap: 30px; letter-spacing: .035em; margin-top: 18px; padding: 16px 20px; transition: transform .2s ease, gap .2s ease; }
.button:hover { gap: 38px; transform: translateY(-3px); }
.button-acid { background: var(--acid); color: var(--ink); }
.button-whatsapp { background: transparent; border: 1px solid currentColor; color: var(--cream); }
.button-whatsapp:hover { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-visual { bottom: -30px; height: min(78vw, 790px); max-height: 88vh; min-height: 520px; pointer-events: none; position: absolute; right: 2.5vw; width: min(48vw, 660px); z-index: 3; }
.hero-fox { bottom: 0; filter: drop-shadow(0 25px 42px rgba(0,0,0,.45)); height: auto; max-height: 95%; object-fit: contain; object-position: bottom; position: absolute; right: 4%; width: 100%; z-index: 3; }
.wave-board { border: 1px solid rgba(255,255,255,.65); display: flex; font: 9px var(--mono); justify-content: space-between; letter-spacing: .1em; padding: 9px 12px; position: absolute; transform: rotate(-22deg); z-index: 1; }
.wave-board-back { background: var(--acid); color: var(--ink); right: 4%; top: 18%; width: 67%; }
.wave-board-front { background: var(--rose); bottom: 22%; color: var(--cream); left: -6%; transform: rotate(14deg); width: 58%; z-index: 4; }
.hero-badge { align-items: flex-start; background: var(--cream); bottom: 13%; color: var(--ink); display: grid; grid-template-columns: 23px 1fr; left: -3%; line-height: .9; padding: 13px; position: absolute; transform: rotate(-5deg); width: 152px; z-index: 5; }
.hero-badge span { color: var(--rose); font: 22px/1 var(--mono); grid-row: span 2; }
.hero-badge b { font-size: 14px; letter-spacing: -.06em; }
.hero-badge small { font: 9px var(--mono); margin-top: 7px; }
.hero-footer { align-items: flex-end; color: var(--beige); display: flex; font: 9px var(--mono); justify-content: space-between; letter-spacing: .07em; position: relative; z-index: 4; }
.hero-index { color: var(--acid); }

.noise-strip { background: var(--acid); color: var(--ink); overflow: hidden; padding: 13px 0; transform: rotate(-1.5deg) scale(1.04); position: relative; z-index: 5; }
.noise-track { animation: marquee 18s linear infinite; display: flex; font: 700 clamp(1.15rem, 2.2vw, 2rem)/1 var(--sans); gap: 26px; letter-spacing: -.05em; white-space: nowrap; width: max-content; }
.noise-track b { color: var(--rose); }
@keyframes marquee { to { transform: translateX(-50%); } }

.section-light { background: var(--cream); color: var(--ink); }
.problem { padding: clamp(90px, 12vw, 180px) 8vw 45px; }
.section-label { align-items: center; display: flex; font: 10px var(--mono); gap: 10px; letter-spacing: .09em; margin-bottom: clamp(46px, 8vw, 98px); }
.section-label span { align-items: center; background: var(--ink); border-radius: 50%; color: var(--cream); display: inline-flex; height: 25px; justify-content: center; width: 25px; }
.section-label-light { color: var(--cream); }
.section-label-light span { background: var(--acid); color: var(--ink); }
.problem-layout { display: grid; gap: 8vw; grid-template-columns: minmax(0, 1.1fr) minmax(270px, .72fr); }
h2 { font-size: clamp(3rem, 6vw, 7rem); font-weight: 500; letter-spacing: -.075em; line-height: .9; margin-bottom: 0; }
.section-light h2 em { color: var(--rose); }
.problem-body { padding-top: 16px; }
.problem-body > p { font-size: clamp(1.05rem, 1.55vw, 1.42rem); line-height: 1.38; }
.aba-note { border-left: 6px solid var(--acid); margin-top: 40px; padding: 12px 0 12px 18px; }
.aba-note strong { font-size: clamp(3.8rem, 7vw, 7rem); letter-spacing: -.11em; line-height: .75; }
.aba-note p { font-size: 14px; line-height: 1.28; margin: 12px 0 0; max-width: 310px; }
.source-note { border-top: 1px solid var(--line); font: 10px/1.4 var(--mono); margin: 80px 0 0; max-width: 600px; padding-top: 14px; }

.rhythm-section { background: var(--rose); color: var(--cream); overflow: hidden; padding: clamp(90px, 12vw, 170px) 8vw; position: relative; }
.rhythm-background { color: rgba(0,0,0,.12); font-size: min(18vw, 20rem); font-weight: 700; letter-spacing: -.13em; line-height: .72; pointer-events: none; position: absolute; right: -4vw; text-align: right; top: 11vw; }
.rhythm-background span { display: block; }
.rhythm-heading { display: grid; gap: 5vw; grid-template-columns: minmax(0, 1fr) minmax(250px, .52fr); max-width: 1080px; position: relative; }
.rhythm-heading h2 em { color: var(--acid); }
.rhythm-heading p { align-self: end; color: var(--cream); font-size: 1.2rem; line-height: 1.35; }
.steps { counter-reset: step; list-style: none; margin: clamp(90px, 14vw, 160px) 0 0; padding: 0; position: relative; }
.steps li { border-top: 1px solid var(--white-line); display: grid; gap: 30px; grid-template-columns: .22fr 1fr; padding: 22px 0 34px; position: relative; }
.steps li > span { color: var(--acid); font: 12px var(--mono); padding-top: 7px; }
.steps h3 { font-size: clamp(2rem, 4vw, 4.2rem); font-weight: 500; letter-spacing: -.07em; line-height: .86; margin-bottom: 11px; }
.steps p { color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.35; margin-bottom: 0; max-width: 390px; }
.volume-panel { background: var(--ink); color: var(--cream); display: grid; gap: 20px 6vw; grid-template-columns: .65fr 1fr; margin: clamp(65px, 9vw, 110px) 0 0 auto; max-width: 1050px; padding: clamp(28px, 5vw, 68px); position: relative; }
.volume-note { color: var(--acid); font-size: clamp(1.4rem, 2.8vw, 2.55rem); letter-spacing: -.065em; line-height: .94; }
.volume-bars { display: grid; gap: 20px; }
.bar-line { align-items: center; display: grid; gap: 12px; grid-template-columns: max-content 1fr max-content; }
.bar-line span, .bar-line b { font: 10px var(--mono); }
.bar-line i { background: var(--acid); display: block; height: 13px; }
.bar-small i { width: 20%; }
.bar-large i { background: var(--mint); width: 100%; }
.volume-panel > p { color: var(--beige); font-size: 14px; grid-column: 2; line-height: 1.4; margin-bottom: 0; }

.loreal-case { background: var(--ink); color: var(--cream); overflow: hidden; padding: clamp(90px, 12vw, 170px) 8vw; position: relative; }
.case-orbit { border: 1px solid rgba(255,255,255,.17); border-radius: 50%; pointer-events: none; position: absolute; }
.case-orbit-one { height: min(56vw, 800px); right: -22vw; top: -29vw; width: min(56vw, 800px); }
.case-orbit-two { border-color: rgba(255,242,0,.37); bottom: -34vw; height: min(72vw, 980px); left: -29vw; width: min(72vw, 980px); }
.loreal-case .section-label { position: relative; }
.case-heading { display: grid; gap: 8vw; grid-template-columns: minmax(0, 1.3fr) minmax(250px, .62fr); max-width: 1200px; position: relative; }
.case-heading h2 { font-size: clamp(3.25rem, 6.7vw, 7.7rem); }
.case-heading h2 em { color: var(--acid); }
.case-intro { align-self: end; border-left: 1px solid var(--white-line); padding: 4px 0 2px 26px; }
.case-intro .eyebrow { margin-bottom: 20px; }
.case-intro > p:not(.eyebrow) { color: var(--beige); font-size: 1.08rem; line-height: 1.42; margin-bottom: 16px; }
.case-intro > p:last-child { color: var(--cream); margin-bottom: 0; }
.case-metrics { display: grid; gap: 12px; grid-template-columns: repeat(6, 1fr); margin-top: clamp(62px, 9vw, 110px); position: relative; }
.case-metric { border: 1px solid var(--white-line); display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(180px, 18vw, 245px); padding: clamp(19px, 2.5vw, 31px); }
.case-metric-feature { background: var(--rose); border-color: var(--rose); }
.case-metric:nth-child(1), .case-metric:nth-child(2), .case-metric:nth-child(3) { grid-column: span 2; }
.case-metric:nth-child(4), .case-metric:nth-child(5) { grid-column: span 3; }
.case-metric strong { color: var(--acid); font-size: clamp(3rem, 6vw, 6.4rem); font-weight: 500; letter-spacing: -.1em; line-height: .78; white-space: nowrap; }
.case-metric:not(.case-metric-feature):nth-child(3) strong { color: var(--mint); }
.case-metric:last-child strong { letter-spacing: -.065em; }
.case-metric span { font: 10px/1.38 var(--mono); letter-spacing: .05em; margin-top: 25px; }
.case-footnote { border-top: 1px solid var(--white-line); color: var(--beige); font-size: 13px; line-height: 1.42; margin: 12px 0 0; max-width: 100%; padding: 18px 0 0; position: relative; }

.pricing { padding: clamp(90px, 12vw, 165px) 8vw; }
.pricing-intro { display: grid; gap: 7vw; grid-template-columns: minmax(0, 1fr) minmax(250px, .44fr); margin-bottom: clamp(60px, 8vw, 100px); max-width: 1120px; }
.pricing-intro h2 em { color: var(--rose); }
.pricing-intro p { align-self: end; font-size: 1.1rem; line-height: 1.42; margin: 0; max-width: 330px; }
.pricing-layout { align-items: stretch; display: grid; gap: 16px; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }
.simulator-card { background: var(--rose-dark); color: var(--cream); padding: clamp(25px, 4vw, 52px); }
.eyebrow-dark { color: var(--acid); }
.simulator-card label { display: block; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -.05em; line-height: 1.05; max-width: 440px; }
.quantity-control { align-items: end; border-bottom: 1px solid var(--white-line); display: flex; gap: 14px; margin-top: 34px; padding-bottom: 13px; }
.quantity-control input { appearance: textfield; background: transparent; border: 0; color: var(--acid); font: 500 clamp(3.5rem, 7vw, 6rem)/.85 var(--sans); letter-spacing: -.09em; min-width: 0; outline: none; width: min(180px, 45%); }
.quantity-control input::-webkit-inner-spin-button, .quantity-control input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.quantity-control span { color: var(--beige); font: 10px/1.25 var(--mono); letter-spacing: .07em; max-width: 85px; padding-bottom: 9px; }
.quantity-range { accent-color: var(--acid); cursor: pointer; margin: 24px 0 35px; width: 100%; }
.simulator-result { border-top: 1px solid var(--white-line); display: grid; gap: 18px; grid-template-columns: 1fr 1fr; padding-top: 22px; }
.simulator-result div { display: grid; gap: 7px; }
.simulator-result span { color: var(--beige); font: 9px var(--mono); letter-spacing: .06em; }
.simulator-result strong { color: var(--cream); font-size: clamp(1.25rem, 2.5vw, 2.2rem); letter-spacing: -.07em; line-height: 1; }
.simulator-note { color: var(--beige); font-size: 11px; line-height: 1.4; margin: 26px 0 0; max-width: 390px; }
.price-tiers { border-top: 1px solid var(--line); }
.price-tiers > div { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: 1fr auto; min-height: 20%; padding: 18px 20px; }
.price-tiers span, .price-tiers small { font: 10px var(--mono); letter-spacing: .05em; }
.price-tiers b { font-size: clamp(1.4rem, 2.5vw, 2.4rem); grid-row: span 2; letter-spacing: -.08em; text-align: right; }
.price-tiers small { color: rgba(6,6,6,.58); }
.price-tiers .tier-acid { background: var(--acid); border-bottom-color: var(--acid); }
.price-tiers .tier-acid small { color: var(--ink); }

.equivalences { background: var(--ink); color: var(--cream); display: grid; gap: 8vw; grid-template-columns: minmax(0, .8fr) minmax(330px, 1.2fr); padding: clamp(90px, 12vw, 165px) 8vw; }
.equivalences-heading h2 { margin-bottom: 28px; }
.equivalences-heading h2 em { color: var(--acid); }
.equivalences-heading > p { color: var(--beige); font-size: 1.1rem; line-height: 1.42; max-width: 360px; }
.equivalences-table { border-top: 1px solid var(--white-line); }
.equivalence-row { align-items: center; border-bottom: 1px solid var(--white-line); display: grid; gap: 20px; grid-template-columns: 1fr auto; min-height: 58px; padding: 11px 0; }
.equivalence-row > span { font-size: 1.05rem; letter-spacing: -.025em; }
.equivalence-row > span small { color: var(--beige); font-size: .8em; }
.equivalence-row b { align-items: center; background: var(--rose); color: var(--cream); display: grid; font-size: 1.25rem; height: 38px; justify-items: center; letter-spacing: -.06em; min-width: 52px; padding: 0 10px; }
.equivalence-head { color: var(--acid); font: 10px var(--mono); letter-spacing: .07em; min-height: 44px; }
.equivalence-head > span { font: inherit; }
.equivalence-head b { display: none; }
.equivalences-note { color: var(--beige); font-size: 11px; grid-column: 2; line-height: 1.45; margin: -3vw 0 0; max-width: 530px; }

.offerings { padding: clamp(90px, 11vw, 160px) 8vw; }
.offerings-intro { max-width: 1040px; }
.offering-list { display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); margin-top: clamp(70px, 10vw, 130px); }
.offering { display: flex; flex-direction: column; min-height: 360px; padding: 26px; position: relative; }
.offering-rose { background: var(--rose); color: var(--cream); }
.offering-acid { background: var(--acid); color: var(--ink); transform: translateY(50px); }
.offering-ink { background: var(--ink); color: var(--cream); }
.offering-num { border: 1px solid currentColor; border-radius: 50%; display: grid; font: 11px var(--mono); height: 30px; place-items: center; width: 30px; }
.offering h3 { font-size: clamp(2rem, 3.2vw, 3.5rem); letter-spacing: -.08em; line-height: .9; margin: auto 0 20px; }
.offering p { font-size: 14px; line-height: 1.34; max-width: 250px; }
.offering-arrow { font: 36px/1 var(--mono); position: absolute; right: 23px; top: 20px; }

.difference { background: var(--ink); color: var(--cream); padding: clamp(110px, 16vw, 210px) 8vw 90px; }
.difference-top { display: grid; grid-template-columns: 1fr .42fr; }
.difference-top .section-label { grid-column: 1 / -1; }
.difference-top h2 em { color: var(--mint); }
.difference-lede { align-self: end; color: var(--beige); font-size: 1.15rem; line-height: 1.4; max-width: 340px; }
.difference-grid { border-left: 1px solid var(--white-line); display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(80px, 11vw, 150px); }
.difference-card { border-right: 1px solid var(--white-line); min-height: 305px; padding: 20px; }
.difference-card span { color: var(--acid); font: 10px var(--mono); }
.difference-card h3 { font-size: clamp(1.4rem, 2.1vw, 2.2rem); letter-spacing: -.065em; line-height: .94; margin: 75px 0 18px; }
.difference-card p { color: var(--beige); font-size: 13px; line-height: 1.35; }
.difference-signature { align-items: center; border-top: 1px solid var(--white-line); border-bottom: 1px solid var(--white-line); display: flex; font: 10px var(--mono); gap: 22px; justify-content: center; letter-spacing: .08em; margin-top: 80px; padding: 19px; text-align: center; }
.difference-signature b { color: var(--acid); font: 27px/0 var(--serif); }

.rules { display: grid; grid-template-columns: 1fr 1fr; min-height: 670px; overflow: hidden; }
.rules-visual { background: var(--beige); min-height: 580px; overflow: hidden; position: relative; }
.rules-visual img { bottom: -6%; height: 94%; left: 50%; max-width: 90%; object-fit: contain; object-position: bottom; position: absolute; transform: translateX(-50%); z-index: 2; }
.rules-ring { border: 2px solid var(--rose); border-radius: 50%; position: absolute; }
.ring-one { height: 470px; left: -160px; top: -40px; width: 470px; }
.ring-two { border-color: var(--acid); bottom: -190px; height: 440px; right: -160px; width: 440px; }
.rules-sticker { background: var(--acid); font: 700 12px/.95 var(--mono); padding: 16px; position: absolute; right: 8%; text-align: center; top: 15%; transform: rotate(8deg); z-index: 3; }
.rules-content { align-self: center; padding: clamp(50px, 8vw, 120px); }
.rules-content .section-label { margin-bottom: 44px; }
.rules-content h2 { margin-bottom: 52px; }
.rules-content h2 em { color: var(--rose); }
dl { border-top: 1px solid var(--line); margin: 0; }
dl div { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: .8fr 1fr; padding: 17px 0; }
dt { font-size: clamp(1.5rem, 2.7vw, 2.6rem); letter-spacing: -.08em; }
dd { font-size: 13px; line-height: 1.3; margin: 0; }

.testimonial { background: var(--rose-dark); color: var(--cream); overflow: hidden; padding: clamp(90px, 13vw, 170px) 8vw; }
.testimonial-layout { align-items: start; display: grid; gap: 8vw; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.testimonial-intro h2 { font-size: clamp(3rem, 5.6vw, 6.2rem); margin: 0 0 28px; }
.testimonial-intro h2 em { color: var(--acid); }
.testimonial-intro > p:last-child { color: var(--beige); font-size: 1.05rem; line-height: 1.4; max-width: 300px; }
.testimonial-card { background: rgba(255,255,255,.06); border-top: 2px solid var(--acid); margin: 0; padding: clamp(25px, 4vw, 48px); }
.testimonial-card blockquote { margin: 0; }
.testimonial-pull { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 3rem); letter-spacing: -.045em; line-height: 1.08; margin: 0 0 32px; }
.testimonial-card figcaption { border-bottom: 1px solid var(--white-line); display: grid; font: 10px/1.5 var(--mono); gap: 4px; letter-spacing: .03em; padding-bottom: 24px; }
.testimonial-card figcaption strong { color: var(--acid); font-size: 12px; }
.testimonial-card figcaption span { color: var(--beige); }
.testimonial-details { margin-top: 20px; }
.testimonial-details summary { align-items: center; color: var(--acid); cursor: pointer; display: flex; font: 10px var(--mono); justify-content: space-between; letter-spacing: .06em; list-style: none; padding: 9px 0; }
.testimonial-details summary::-webkit-details-marker { display: none; }
.testimonial-details summary span { font: 20px/1 var(--mono); }
.testimonial-details[open] summary span { transform: rotate(45deg); }
.testimonial-full { padding-top: 12px; }
.testimonial-full p { color: rgba(255,255,255,.84); font-size: 14px; line-height: 1.55; margin: 16px 0 0; }

.contact { background: var(--rose); color: var(--cream); display: grid; gap: 8vw; grid-template-columns: .85fr 1.15fr; padding: clamp(90px, 12vw, 165px) 8vw; }
.contact-intro h2 { margin-bottom: 28px; }
.contact-intro h2 em { color: var(--acid); }
.contact-intro > p { font-size: 1.12rem; line-height: 1.42; max-width: 350px; }
.lead-form { background: var(--cream); color: var(--ink); padding: clamp(25px, 4vw, 52px); }
.form-status { background: var(--acid); font: 10px/1.35 var(--mono); margin-bottom: 28px; padding: 11px 13px; }
.form-status.is-error { background: #f4dce5; border-left: 4px solid var(--rose-dark); }
.form-honey { height: 1px; left: -10000px; opacity: 0; overflow: hidden; position: absolute; top: auto; width: 1px; }
.field-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.lead-form label { display: grid; font: 10px var(--mono); gap: 8px; letter-spacing: .03em; }
.lead-form input, .lead-form textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); outline-offset: 4px; padding: 9px 0; }
.lead-form textarea { resize: vertical; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: rgba(6,6,6,.43); }
.field-full { margin-top: 24px; }
.button-submit { margin-top: 32px; width: 100%; justify-content: space-between; }
.button-submit:disabled { cursor: wait; opacity: .72; transform: none; }
.form-hint { color: rgba(6,6,6,.58); font-size: 10px; line-height: 1.4; margin: 16px 0 0; }
.simulator-card .button-whatsapp { color: var(--cream); margin-top: 14px; }
.form-success { background: var(--cream); border-top: 3px solid var(--acid); color: var(--ink); grid-column: 2; padding: clamp(25px, 4vw, 52px); }
.form-success[hidden] { display: none !important; }
.form-success .eyebrow { color: var(--rose-dark); }
.form-success h3 { font-size: clamp(2.4rem, 4.2vw, 4.1rem); letter-spacing: -.075em; line-height: .92; margin-bottom: 24px; }
.form-success > p:not(.eyebrow) { font-size: 15px; line-height: 1.42; max-width: 480px; }
.form-success > p strong, .form-success > p a { color: var(--rose-dark); }
.form-success > p a { text-decoration: underline; text-underline-offset: 3px; }
.form-success .button { margin-top: 6px; }
.form-success .form-hint { color: rgba(6,6,6,.62); font-size: 10px; }

.site-footer { align-items: end; background: var(--ink); color: var(--cream); display: grid; gap: 30px; grid-template-columns: 1fr 1.3fr 1fr; padding: 30px 3.5vw; }
.memo-mark-footer { align-self: start; width: 52px; }
.site-footer p { font: 10px/1.45 var(--mono); letter-spacing: .04em; margin: 0; }
.footer-note { color: var(--beige); text-align: right; }
.footer-site-link { color: var(--acid); display: inline-block; margin-bottom: 8px; }
.footer-whatsapp-link { color: var(--cream); display: inline-block; margin-top: 5px; }
.footer-site-link:hover, .header-about:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-whatsapp-link:hover { color: var(--mint); text-decoration: underline; text-underline-offset: 4px; }
.footer-note strong { color: var(--acid); font-weight: 500; }

.reveal { opacity: 1; transform: translateY(0); }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.25,1); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

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

@media (max-width: 840px) {
  .site-header { grid-template-columns: 72px 1fr auto; min-height: 75px; padding: 16px 5vw; }
  .header-about { display: none; }
  .header-cta { display: none; }
  .hero { min-height: 800px; padding: 70px 6vw 28px; }
  .hero-copy { align-self: start; max-width: 88%; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-visual { height: 480px; max-height: none; min-height: 0; opacity: .85; right: -12%; width: 82%; }
  .hero-lede { max-width: 330px; }
  .hero-badge { bottom: 16%; left: -11%; }
  .problem, .rhythm-section, .loreal-case, .pricing, .equivalences, .offerings, .difference, .contact { padding-left: 6vw; padding-right: 6vw; }
  .problem-layout, .rhythm-heading, .case-heading, .pricing-intro, .pricing-layout, .equivalences, .contact { grid-template-columns: 1fr; }
  .problem-body { max-width: 520px; }
  .volume-panel { grid-template-columns: 1fr; }
  .volume-panel > p { grid-column: auto; }
  .case-heading { gap: 38px; }
  .case-intro { max-width: 480px; }
  .case-metrics { grid-template-columns: repeat(2, 1fr); }
  .case-metric:nth-child(n) { grid-column: auto; }
  .case-metric-feature { grid-column: span 2 !important; }
  .offering-list { grid-template-columns: 1fr; margin-top: 52px; }
  .offering { min-height: 250px; }
  .offering-acid { transform: none; }
  .difference-top { grid-template-columns: 1fr; gap: 26px; }
  .difference-grid { grid-template-columns: 1fr 1fr; }
  .difference-card { min-height: 240px; }
  .testimonial-layout { gap: 44px; grid-template-columns: 1fr; }
  .testimonial { padding-left: 6vw; padding-right: 6vw; }
  .form-success { grid-column: auto; }
  .rules { grid-template-columns: 1fr; }
  .rules-visual { min-height: 500px; }
  .rules-content { padding: 72px 6vw; }
  .equivalences-note { grid-column: auto; margin: 0; }
  .site-footer { grid-template-columns: .5fr 1fr; padding: 28px 6vw; }
  .footer-note { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 520px) {
  .header-kicker { font-size: 8px; }
  .hero { min-height: 740px; }
  h1 { font-size: clamp(3.1rem, 15vw, 4.6rem); }
  .hero-copy { max-width: 100%; }
  .hero-visual { bottom: 5px; height: 400px; right: -27%; width: 104%; }
  .hero-fox { right: 5%; }
  .wave-board-back { right: 6%; top: 14%; }
  .wave-board-front { bottom: 15%; left: -8%; }
  .hero-badge { display: none; }
  .hero-lede { font-size: .98rem; max-width: 245px; }
  .hero-footer { font-size: 8px; }
  .problem-layout h2, .rhythm-heading h2, .case-heading h2, .offerings-intro h2, .difference-top h2, .rules-content h2, .contact h2 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .steps li { grid-template-columns: 52px 1fr; }
  .case-intro { border-left: 0; border-top: 1px solid var(--white-line); padding: 20px 0 0; }
  .case-metrics { gap: 8px; margin-top: 48px; }
  .case-metric { min-height: 164px; padding: 17px; }
  .case-metric strong { font-size: clamp(2.55rem, 13.5vw, 4.35rem); }
  .case-metric span { font-size: 8px; margin-top: 17px; }
  .case-footnote { font-size: 12px; padding-top: 15px; }
  .difference-grid { grid-template-columns: 1fr; }
  .difference-card { min-height: auto; padding: 24px 0; }
  .difference-card h3 { margin-top: 35px; }
  .difference-card { border-right: 0; border-bottom: 1px solid var(--white-line); }
  .field-grid { grid-template-columns: 1fr; }
  .simulator-result { grid-template-columns: 1fr; }
  .price-tiers > div { padding-left: 0; padding-right: 0; }
  .site-footer { grid-template-columns: .4fr 1fr; }
}