/* =========================
   THEME / BRAND COLORS
   Altere estas variáveis para
   personalizar o modelo.
   ========================= */
:root, [data-theme="wine"] { --color-bg: oklch(16% .012 35); --color-surface: oklch(22% .012 35); --color-text: oklch(94% .008 80); --color-muted: oklch(70% .012 70); --color-primary: oklch(50% .11 22); --color-primary-hover: oklch(58% .12 22); --color-border: oklch(94% .008 80 / .18); --image-filter: grayscale(.25) contrast(1.05); }
[data-theme="copper"] { --color-bg: oklch(13% .008 65); --color-surface: oklch(20% .012 65); --color-text: oklch(94% .008 75); --color-muted: oklch(69% .014 70); --color-primary: oklch(62% .105 55); --color-primary-hover: oklch(70% .11 55); --color-border: oklch(94% .008 75 / .18); --image-filter: grayscale(.35) sepia(.12) contrast(1.08); }
[data-theme="cream"] { --color-bg: oklch(94% .016 80); --color-surface: oklch(88% .018 75); --color-text: oklch(22% .025 55); --color-muted: oklch(45% .02 55); --color-primary: oklch(38% .065 45); --color-primary-hover: oklch(30% .06 45); --color-border: oklch(22% .025 55 / .2); --image-filter: grayscale(.35) sepia(.16) contrast(1.04); }
[data-theme="olive"] { --color-bg: oklch(21% .016 130); --color-surface: oklch(27% .02 130); --color-text: oklch(93% .014 100); --color-muted: oklch(70% .018 110); --color-primary: oklch(59% .085 125); --color-primary-hover: oklch(68% .09 125); --color-border: oklch(93% .014 100 / .18); --image-filter: grayscale(.4) sepia(.12) contrast(1.08); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-bg); }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 16px/1.55 "DM Sans", sans-serif; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 20; top: -60px; left: 16px; padding: 10px 15px; background: var(--color-text); color: var(--color-bg); transition: top .2s; }
.skip-link:focus { top: 16px; }
.topbar { position: absolute; z-index: 5; top: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 25px clamp(20px, 4vw, 70px); color: oklch(98% .002 95); }
.brand { font: 500 15px/1 "DM Mono", monospace; letter-spacing: .07em; }.brand span { color: var(--color-primary); }
nav { display: flex; gap: 27px; font-size: 13px; } nav a { border-bottom: 1px solid transparent; } nav a:hover { border-color: currentColor; }
.menu-toggle { display: none; border: 0; background: transparent; cursor: pointer; font: 500 12px "DM Mono", monospace; text-transform: uppercase; }
.hero { position: relative; display: flex; align-items: end; min-height: 96vh; padding: 130px clamp(20px, 8vw, 150px) clamp(52px, 9vh, 100px); color: oklch(98% .002 95); overflow: hidden; }
.hero-image, .hero-wash { position: absolute; inset: 0; width: 100%; height: 100%; }.hero-image { object-fit: cover; object-position: 52% center; filter: grayscale(.25) contrast(1.12); }.hero-wash { background: linear-gradient(90deg, oklch(10% .01 35 / .8), oklch(10% .01 35 / .18) 68%), linear-gradient(0deg, oklch(10% .01 35 / .65), transparent 42%); }
.hero-content { position: relative; max-width: 715px; }.eyebrow, .section-index { margin: 0 0 17px; color: var(--color-primary); font: 500 11px/1.3 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 600; line-height: .91; letter-spacing: -.055em; } h1 { font-size: clamp(55px, 8.5vw, 132px); } h2 { font-size: clamp(45px, 6.2vw, 94px); } em { font-weight: 600; }
.hero-intro { max-width: 420px; margin: 29px 0 28px; color: oklch(98% .002 95 / .86); font-size: 16px; }.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 18px; padding: 12px 18px; border: 1px solid transparent; font-size: 13px; font-weight: 700; transition: background .2s, color .2s, transform .2s; }.button-primary { background: var(--color-primary); color: oklch(98% .002 95); }.button-primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); }.button-quiet { color: oklch(98% .002 95); border-color: oklch(98% .002 95 / .55); }.button-quiet:hover { background: oklch(98% .002 95); color: oklch(15% .01 35); }.hero-mark, .hero-caption { position: absolute; margin: 0; font: 400 10px "DM Mono", monospace; letter-spacing: .07em; }.hero-mark { top: 50%; left: clamp(20px, 4vw, 70px); writing-mode: vertical-rl; transform: rotate(180deg); }.hero-caption { right: clamp(20px, 4vw, 70px); bottom: 30px; color: oklch(98% .002 95 / .7); }
.manifesto { padding: clamp(90px, 13vw, 190px) clamp(20px, 8vw, 150px); }.display-statement { max-width: 1180px; font-size: clamp(50px, 7.8vw, 125px); }.manifesto-note { display: flex; justify-content: space-between; gap: 40px; max-width: 580px; margin: 64px 0 0 auto; color: var(--color-muted); }.manifesto-note p { margin: 0; }.manifesto-note span { white-space: nowrap; font: 11px "DM Mono", monospace; }
.experience { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(240px, 1.25fr) minmax(160px, .7fr); align-items: start; gap: clamp(20px, 4vw, 75px); padding: 30px clamp(20px, 8vw, 150px) clamp(110px, 15vw, 210px); }.experience-copy { padding-top: 15%; }.experience-copy h2 { margin-bottom: 28px; }.experience-copy > p:last-child { color: var(--color-muted); }.experience figure { margin: 0; }.experience-main { margin-top: 0; }.experience-side { align-self: end; margin-bottom: -70px!important; }.experience img, .house img, .visit img { width: 100%; filter: var(--image-filter); }.experience-main img { aspect-ratio: 3 / 4; object-fit: cover; }.experience-side img { aspect-ratio: 4 / 3; object-fit: cover; } figcaption, .caption, .visit-note { margin-top: 11px; color: var(--color-muted); font: 10px/1.5 "DM Mono", monospace; letter-spacing: .03em; }.experience-words { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 15px; margin-top: 38px; font: 500 clamp(13px, 1.6vw, 20px) "DM Mono", monospace; text-transform: uppercase; }.experience-words span:nth-child(even) { color: var(--color-primary); }
.marquee { padding: 25px 0; overflow: hidden; background: var(--color-primary); color: oklch(98% .002 95); white-space: nowrap; }.marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; font: 500 clamp(22px, 3vw, 43px) "DM Mono", monospace; letter-spacing: -.05em; }.marquee-track span { flex: 0 0 auto; }.marquee i { padding: 0 18px; font-style: normal; }
.house { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 700px; background: var(--color-surface); }.house-photo img { width: 100%; height: 100%; object-fit: cover; }.house-copy { align-self: center; max-width: 510px; padding: 70px clamp(30px, 7vw, 130px); }.house-copy h2 { margin-bottom: 33px; }.house-copy > p:not(.caption) { color: var(--color-muted); }.house-copy .caption { margin-top: 74px; }
.catalog { padding: clamp(90px, 13vw, 180px) clamp(20px, 8vw, 150px); }.catalog-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 60px; align-items: end; }.catalog-grid h2 { font-size: clamp(60px, 9vw, 145px); }.catalog-grid div { max-width: 360px; }.catalog-grid p { margin: 0 0 25px; color: var(--color-muted); }
.review { position: relative; padding: clamp(95px, 14vw, 190px) clamp(20px, 15vw, 250px); background: var(--color-surface); }.quote-mark { position: absolute; top: 70px; right: 12vw; color: var(--color-primary); font: 700 clamp(130px, 20vw, 270px)/.6 "Playfair Display", Georgia, serif; }.review-slide { position: relative; min-height: 265px; }.review-slide h2 { max-width: 940px; font-size: clamp(37px, 5.4vw, 82px); line-height: 1; }.review-slide p { margin-top: 30px; font: 11px "DM Mono", monospace; letter-spacing: .06em; }.review-slide p span { color: var(--color-muted); }.review-controls { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 25px; font: 11px "DM Mono", monospace; }.review-controls button { width: 44px; height: 44px; border: 1px solid var(--color-border); background: transparent; cursor: pointer; }.review-controls button:hover { background: var(--color-text); color: var(--color-bg); }
.visit { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 730px; }.visit-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }.visit-info { align-self: center; padding: 60px clamp(30px, 10vw, 180px); }.visit-info h2 { margin-bottom: 45px; }.visit-info address { font-style: normal; font-size: 17px; }.visit-info address p { margin: 0 0 24px; }.visit-info address a { border-bottom: 1px solid var(--color-primary); }.visit-info address a:hover { color: var(--color-primary); }.visit-note { max-width: 340px; margin-top: 55px; }
.final-cta { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 90px clamp(20px, 15vw, 250px); background: var(--color-primary); color: oklch(98% .002 95); }.final-cta .section-index { color: inherit; }.final-cta h2 { margin-bottom: 37px; font-size: clamp(62px, 9vw, 142px); }.final-cta .button-primary { background: var(--color-bg); }.final-cta .button-primary:hover { background: var(--color-surface); }
footer { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 28px clamp(20px, 4vw, 70px); font-size: 11px; } footer p { margin: 0; color: var(--color-muted); } .neoeffex-link { color: var(--color-text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-primary); text-underline-offset: 3px; } footer > a:last-child { border-bottom: 1px solid var(--color-primary); }
.theme-wrap { position: fixed; z-index: 7; right: 20px; bottom: 20px; }.theme-trigger { min-height: 42px; padding: 0 14px; border: 1px solid var(--color-border); background: var(--color-bg); cursor: pointer; font: 11px "DM Mono", monospace; }.theme-trigger span { color: var(--color-primary); }.theme-panel { position: absolute; right: 0; bottom: 52px; width: min(275px, calc(100vw - 40px)); padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); }.theme-panel > div { display: flex; justify-content: space-between; }.theme-panel .eyebrow { margin-bottom: 12px; }.theme-panel > p { margin: 0 0 16px; color: var(--color-muted); font-size: 12px; }.theme-close { border: 0; background: transparent; cursor: pointer; font-size: 25px; line-height: .5; }.theme-option { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 0; border: 0; border-top: 1px solid var(--color-border); background: transparent; text-align: left; cursor: pointer; font-size: 12px; }.theme-option i { width: 17px; height: 17px; border-radius: 50%; background: var(--color-primary); box-shadow: 8px 0 0 var(--color-bg); }.theme-option[aria-pressed="true"] { color: var(--color-primary); font-weight: 700; }
.reveal, .image-reveal { opacity: 1; transform: none; transition: transform .45s ease; }.reveal.visible, .image-reveal.visible { transform: translateY(-3px); }.hero .reveal { transform: none; }
body.motion-ready .reveal-region { opacity: 0; transform: translateY(34px); transition: opacity .72s ease, transform .72s cubic-bezier(.22, .61, .36, 1); } body.motion-ready .reveal-region.visible { opacity: 1; transform: none; } body.motion-ready .hero.reveal-region { transform: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 760px) { .topbar { padding: 20px; }.menu-toggle { display: block; } nav { position: absolute; top: 100%; right: 20px; display: none; flex-direction: column; gap: 12px; padding: 18px; background: var(--color-bg); border: 1px solid var(--color-border); } .menu-open nav { display: flex; }.hero { min-height: 92svh; padding: 120px 20px 42px; }.hero-image { object-position: 58% center; }.hero-mark { display: none; }.hero-caption { right: 20px; bottom: 16px; font-size: 8px; }.hero-intro { font-size: 15px; }.hero-actions { gap: 12px; }.button { width: 100%; }.hero-actions .button-quiet { width: auto; border: 0; padding: 10px 0; }.manifesto { padding: 100px 20px; }.manifesto-note { display: block; margin-top: 45px; }.manifesto-note span { display: block; margin-top: 18px; }.experience { grid-template-columns: 1fr 1fr; gap: 16px; padding: 35px 20px 100px; }.experience-copy { grid-column: 1 / -1; padding: 0 0 18px; }.experience-main { grid-column: 1 / 2; }.experience-side { align-self: center; margin: 60px 0 0!important; }.experience-words { grid-column: 1 / -1; flex-wrap: wrap; margin-top: 25px; }.experience-words span { width: calc(50% - 10px); }.house, .visit { grid-template-columns: 1fr; }.house { min-height: 0; }.house-photo { height: 70vw; }.house-copy { padding: 80px 20px; }.house-copy .caption { margin-top: 42px; }.catalog { padding: 100px 20px; }.catalog-grid { grid-template-columns: 1fr; gap: 40px; }.quote-mark { top: 58px; right: 20px; }.review { padding: 100px 20px; }.review-slide { min-height: 345px; }.visit-photo { height: 100vw; }.visit-info { padding: 75px 20px; }.final-cta { min-height: 70svh; padding: 90px 20px; } footer { align-items: flex-start; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal, .image-reveal, body.motion-ready .reveal-region { opacity: 1; transform: none; transition: none; }.marquee div { animation: none; }.button { transition: none; } }