/* ============================================================ * tokens.css · Costuragi Franquia · Wave 1 (Mission 1000-anos) * ------------------------------------------------------------ * Single source of truth pra design tokens da landing franquia. * Evolução incremental dos tokens inline existentes (index.html). * * Princípios: * - CSS-first · Baseline Widely Available * - Variable fonts (Cormorant Light + Montserrat + Sacramento) * - Modular scale 1.333 perfect-fourth (8 steps) * - oklch() pra cor moderna · hex fallback @supports * - 6 easings canônicos · 3 durações * - 8pt spacing grid + clamp() fluid scale * - @property declarations pra animations interpolation * * Integração: Wave 2+ vai @import este arquivo no . * Ordem de cascade: tokens.css → reset → base → components. * ========================================================== */ /* ── @property declarations · CSS Houdini · enables interpolation ── */ @property --scroll-progress { syntax: ''; inherits: true; initial-value: 0%; } @property --reveal-y { syntax: ''; inherits: false; initial-value: 0px; } @property --counter-value { syntax: ''; inherits: false; initial-value: 0; } @property --magnetic-x { syntax: ''; inherits: false; initial-value: 0px; } @property --magnetic-y { syntax: ''; inherits: false; initial-value: 0px; } /* ── ROOT TOKENS ── */ :root { /* ─── COLOR · base canônica (hex fallback) ─── */ --c-midnight: #1E2D4E; --c-midnight-canvas: #15233D; --c-midnight-surface: #1E2D4E; --c-midnight-frosted: rgba(30, 45, 78, 0.72); --c-midnight-light: #243758; --c-midnight-dark: #1A253F; --c-ivory: #F5EDD6; --c-ivory-warm: #F8F1DE; --c-ivory-deep: #EFE6CB; --c-cobre: #C4956A; /* alias semântico (cobre = brand) */ --c-copper: #C4956A; /* alias retro-compat */ --c-copper-50: #F5EAD9; --c-copper-100: #E8D2B0; --c-copper-600: #B08554; --c-copper-700: #94703F; /* ─── COLOR · semantic states (Wave 8.W1 · A3 Polaris-pattern) ─── */ /* Estados derivam do brand color por delta de lightness · sistemática Polaris */ /* default (canon) · hovered (-1.5pt) · pressed (-3pt) · focused (ring + alpha) */ --c-cobre-hovered: color-mix(in oklab, var(--c-cobre) 92%, black 8%); --c-cobre-pressed: color-mix(in oklab, var(--c-cobre) 85%, black 15%); --c-midnight-hovered: color-mix(in oklab, var(--c-midnight) 92%, white 8%); --c-midnight-pressed: color-mix(in oklab, var(--c-midnight) 85%, white 15%); --c-sage: #7B8F7A; --c-sage-text: #5F7360; --c-terracotta: #B5563A; --c-white: #FFFFFF; --c-gray-light: #F0EDE8; --c-gray-medium: #8C8478; --c-gray-darker: #6B6459; --c-graphite: #3D3530; --c-warm-black: #1A1410; --c-whatsapp: #25D366; --c-whatsapp-hover: #1ebe5a; /* RGB triples pra rgba() composition */ --c-midnight-rgb: 30, 45, 78; --c-ivory-rgb: 245, 237, 214; --c-copper-rgb: 196, 149, 106; --c-terracotta-rgb: 181, 86, 58; /* ─── COLOR · oklch upgrade (modern browsers) ─── */ /* Mantém hex como fallback · oklch ativa em @supports */ /* ─── TYPOGRAPHY · families ─── */ --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif; --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-script: 'Sacramento', 'Brush Script MT', cursive; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace; /* aliases retro-compat */ --f-display: var(--font-display); --f-body: var(--font-sans); --f-accent: var(--font-script); /* ─── TYPOGRAPHY · modular scale 1.333 (perfect-fourth) ─── */ /* base = 1rem = 16px · ratio 1.333 · 8 steps */ --fs-0: 0.5625rem; /* 9.0px · micro */ --fs-1: 0.75rem; /* 12.0px · caption */ --fs-2: 1rem; /* 16.0px · body base */ --fs-3: 1.333rem; /* 21.3px · lead */ --fs-4: 1.777rem; /* 28.4px · h4 */ --fs-5: 2.369rem; /* 37.9px · h3 */ --fs-6: 3.157rem; /* 50.5px · h2 */ --fs-7: 4.209rem; /* 67.3px · h1 */ --fs-8: 5.61rem; /* 89.7px · display */ --fs-9: 7.478rem; /* 119.6px · hero-mega */ /* ─── TYPOGRAPHY · fluid clamp() scale ─── */ /* min em 320px · max em 1440px · interpola fluido */ --fs-fluid-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --fs-fluid-lead: clamp(1.125rem, 1rem + 0.625vw, 1.5rem); --fs-fluid-h4: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); --fs-fluid-h3: clamp(2rem, 1.5rem + 2.5vw, 2.75rem); --fs-fluid-h2: clamp(2.5rem, 2rem + 2.5vw, 3.5rem); --fs-fluid-h1: clamp(3rem, 2.25rem + 3.75vw, 4.75rem); --fs-fluid-hero: clamp(3.75rem, 2.5rem + 6.25vw, 6rem); /* ─── TYPOGRAPHY · line-height ─── */ --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.5; --lh-relaxed: 1.75; --lh-loose: 2; /* ─── TYPOGRAPHY · letter-spacing ─── */ --ls-tighter: -0.025em; --ls-tight: -0.015em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.18em; --ls-widest: 0.32em; /* ─── TYPOGRAPHY · weight ─── */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ─── SPACING · 8pt grid (em rem pra escalar com user font-size) ─── */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 12rem; /* 192px */ /* aliases retro-compat */ --s-xs: var(--space-1); --s-sm: var(--space-2); --s-md: var(--space-4); --s-lg: var(--space-5); --s-xl: var(--space-7); --s-2xl: var(--space-8); --s-3xl: var(--space-9); --s-4xl: var(--space-10); /* fluid section padding */ --section-padding-fluid: clamp(3rem, 2rem + 5vw, 8rem); /* ─── FLUID SPACING SYSTEM (Wave 8.W5 · C2 Porsche-pattern) ─── */ /* Tokens com clamp() interno · permite usar gap/margin/padding sem repetir clamp em cada uso * Source: porsche-design-system/.../scss/_text.scss · pds-spacing-fluid-* family * Convention: --space-fluid-{xs|sm|md|lg|xl} · escala intermediária ao 8pt grid */ --space-fluid-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem); /* 8 → 12px */ --space-fluid-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem); /* 12 → 18px */ --space-fluid-md: clamp(1rem, 0.85rem + 0.75vw, 1.5rem); /* 16 → 24px */ --space-fluid-lg: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem); /* 24 → 40px */ --space-fluid-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem); /* 32 → 64px */ --space-fluid-2xl: clamp(3rem, 2rem + 5vw, 6rem); /* 48 → 96px */ --space-fluid-3xl: clamp(4rem, 2.5rem + 7.5vw, 9rem); /* 64 → 144px */ /* ─── RADIUS ─── */ --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; --r-circle: 50%; /* ─── EASING · 7 canonical (Wave 8.W1 · A2 Primer-pattern · semântica de uso) ─── */ /* Cada easing tem propósito documentado · alinhado com Primer org.primer.llm convention */ --ease-linear: linear; /* USO: progress-bar · loader · constant motion */ --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1); /* USO: reveal entry · element appearing on screen (default) */ --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22); /* USO: exit · element leaving viewport (rare standalone) */ --ease-quart-io: cubic-bezier(0.77, 0, 0.175, 1); /* USO: bidirectional motion · drawer · modal */ --ease-soft: cubic-bezier(0.16, 1, 0.3, 1); /* USO: hover state changes · micro-interactions · button hover */ --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* USO: easter eggs · attention-grabbing · use sparingly */ --ease-spring: linear(0, 0.402, 0.79, 1.107, 1.246, 1.21, 1.085, 1, 0.972, 1); /* USO: physics-based · natural feel */ /* aliases retro-compat */ --ease-out: var(--ease-soft); --ease-in-out: var(--ease-quart-io); /* ─── DURATION · 5 canonical ─── */ --duration-instant: 80ms; --duration-fast: 180ms; --duration-base: 300ms; --duration-slow: 600ms; --duration-cinema: 2400ms; /* M13 counter · stitch-line */ /* aliases retro-compat */ --dur-fast: var(--duration-fast); --dur-base: var(--duration-base); --dur-slow: var(--duration-slow); /* ─── SHADOW · elevation system ─── */ --shadow-1: 0 1px 2px rgba(var(--c-midnight-rgb), 0.10); --shadow-2: 0 4px 14px rgba(var(--c-midnight-rgb), 0.14); --shadow-3: 0 12px 32px rgba(var(--c-midnight-rgb), 0.18); --shadow-4: 0 24px 56px rgba(var(--c-midnight-rgb), 0.22); --shadow-card: 0 4px 20px rgba(var(--c-midnight-rgb), 0.08); --shadow-card-hover: 0 12px 36px rgba(var(--c-midnight-rgb), 0.14); --shadow-hero: 0 32px 80px rgba(0, 0, 0, 0.4); --shadow-hero-mobile: 0 16px 40px rgba(0, 0, 0, 0.3); --shadow-cta: 0 8px 28px rgba(var(--c-copper-rgb), 0.35); --shadow-cta-hover: 0 12px 36px rgba(var(--c-copper-rgb), 0.5); --shadow-inset: inset 0 2px 4px rgba(var(--c-midnight-rgb), 0.06); /* ─── FOCUS RING (Wave 8.W1 · A6 Primer-pattern · WCAG 2.4.7 mandatory) ─── */ /* WCAG 2.4.7 (Focus Visible · AA): keyboard focus deve ser visualmente identificável. * WCAG 2.4.11 (Focus Appearance · AAA): contrast ≥3:1 com adjacent · area mínima 1px perimeter * Implementação: solid ring 3px + outline-offset 2px + box-shadow alpha layer (B2 shadcn-pattern) */ --ring: 3px solid var(--c-cobre); --ring-offset: 2px; --ring-color: var(--c-cobre); --ring-shadow-alpha: 0 0 0 6px rgba(196, 149, 106, 0.25); /* alpha 25% · duplo-ring effect */ /* ─── Z-INDEX scale ─── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-progress: 999; --z-overlay: 1000; --z-skip-link: 9999; } /* ── oklch upgrade · modern browsers ── */ @supports (color: oklch(0% 0 0)) { :root { /* tonalidades paramétricas · base canônica preservada visualmente */ --c-midnight-oklch: oklch(28% 0.04 256); --c-ivory-oklch: oklch(94% 0.03 90); --c-cobre-oklch: oklch(70% 0.07 65); --c-sage-oklch: oklch(58% 0.04 138); --c-terracotta-oklch: oklch(54% 0.13 35); } } /* ── @container query units · Baseline 2023 ── */ /* Componentes podem usar cqi/cqb/cqw/cqh · nada precisa registrar aqui · só lembrete */ /* ── REDUCED MOTION · system-wide ── */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 1ms; --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; --duration-cinema: 1ms; } } /* ── DARK MODE · futureproof scaffold (não-ativo Wave 1) ── */ /* Wave 12 · se decisão for ativar dark mode editorial */ @media (prefers-color-scheme: dark) { /* tokens redefinidos virão aqui se Rafael aprovar dark mode */ } /* ───────────────────────────────────────────────────────────────────── * Wave 8.W1 · Token Architecture Refactor (Fase VIII) * Patterns aplicados dos 39 DS do Alan Nicolas: * - A1 · 3-tier tokens (Primer Primitives) · base→functional→component * - A4 · Lightness scale (Polaris Tokens) · color-mix() systematic states * - A5 · Prose typescale (Porsche Design System) · semantic heading classes * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── FUNCTIONAL TIER · semantic tokens (A1 Primer-pattern) ─── */ /* base color tokens acima viram primitives · functional tokens abaixo viram semantic */ --color-text-primary: var(--c-graphite); /* body text · ratio 10.26:1 ivory bg AAA */ --color-text-secondary: var(--c-gray-darker); /* caption · ratio 5:1 ivory bg AA */ --color-text-on-dark: var(--c-ivory); /* text em fundo midnight · ratio 11.66:1 AAA */ --color-text-accent: var(--c-cobre); /* accent decorativo · brand */ --color-bg-canvas: var(--c-ivory); /* canvas main · landing default */ --color-bg-surface: var(--c-white); /* card · modal · elevated surface */ --color-bg-dark: var(--c-midnight); /* hero · oferta · virada · diferencial */ --color-bg-frosted: var(--c-midnight-frosted); /* nav scrolled · sticky bars */ --color-border-subtle: rgba(var(--c-copper-rgb), 0.18); --color-border-strong: rgba(var(--c-copper-rgb), 0.4); /* ─── PROSE HEADING TYPESCALE (A5 Porsche-pattern) ─── */ /* Encapsulação de heading semântica · 5 níveis editorial * Uso:

ou

· decoupling visual×semantic (B3 gestalt) * Cada nível encapsula font + weight + leading + letter-spacing como bloco coeso */ --prose-display-size: var(--fs-fluid-hero); /* clamp 3.75rem → 6rem · §Hero hero-mega */ --prose-display-weight: 300; /* Cormorant Light variable */ --prose-display-leading: 1.05; --prose-display-tracking: -0.025em; --prose-display-max-width: 16ch; --prose-h1-size: var(--fs-fluid-h1); /* clamp 3rem → 4.75rem */ --prose-h1-weight: 300; --prose-h1-leading: 1.1; --prose-h1-tracking: -0.02em; --prose-h1-max-width: 20ch; --prose-h2-size: var(--fs-fluid-h2); /* clamp 2.5rem → 3.5rem */ --prose-h2-weight: 400; --prose-h2-leading: 1.15; --prose-h2-tracking: -0.015em; --prose-h2-max-width: 24ch; --prose-h3-size: var(--fs-fluid-h3); /* clamp 2rem → 2.75rem */ --prose-h3-weight: 500; --prose-h3-leading: 1.2; --prose-h3-tracking: -0.01em; --prose-h3-max-width: 28ch; --prose-body-size: var(--fs-fluid-body); --prose-body-weight: 400; --prose-body-leading: 1.7; --prose-body-tracking: 0; --prose-body-max-width: 60ch; } /* ───────────────────────────────────────────────────────────────────── * JARDINEIRA VERSÁTIL V3 · Heritage Extensions (Lina Bo Bardi + Lygia Pape Tecelares · 2026-05-01) * Princípio: paleta canon V3 inalterada + 4 heritage tokens proprietários Jardineira * Diferenciação TRIPLA vs Aviador (cobre-aged · cream-cordel · blue-bulcao) * vs Safari V3 (jacarandá · papel-canva · verde-paineira · amarelo-ipê) * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── HERITAGE PALETA · Jardineira V3 proprietary (Lina Bo Bardi + Anita Malfatti + Lygia Pape) ─── */ --c-vermelho-masp: #A83333; /* vermelho-MASP icônico Lina Bo Bardi 1968 · accent §Virada · max 2x */ --c-concreto-bardi: #8C8478; /* concreto bruto · pull-quote bg · materialidade */ --c-amarelo-anita: #E5BB47; /* amarelo expressionismo Anita Malfatti 1917 · §Mostrar-peca highlight */ --c-azul-tecelar: #3F4D6B; /* azul Lygia Pape Tecelares 1953-58 · §Bio bg · §Selos */ /* RGB triples Jardineira V3 */ --c-vermelho-masp-rgb: 168, 51, 51; --c-concreto-bardi-rgb: 140, 132, 120; --c-amarelo-anita-rgb: 229, 187, 71; --c-azul-tecelar-rgb: 63, 77, 107; /* ─── HIERARQUIA SEMÂNTICA · Synergy R1 lock Jardineira V3 ─── */ /* --c-cobre = ação CTA · canon V3 LOCK */ /* --c-vermelho-masp = heritage (§Virada · §Threshold · max 2x) · NEW */ /* --c-amarelo-anita = accent (§Mostrar-peca highlight) · NEW */ /* --c-azul-tecelar = repouso (§Bio · §Selos bg) · NEW */ /* --c-concreto-bardi = pull-quote bg (materialidade) · NEW */ /* --c-terracotta = emoção (§Problema) · canon V3 LOCK */ /* ─── MODULAR-LINE TOKENS · Jardineira V3 W7 ─── */ --modular-color-primary: var(--c-vermelho-masp); --modular-color-secondary: var(--c-concreto-bardi); --modular-stroke-width: 1.6px; --modular-block-height: 32px; --modular-line-gap: 12px; } @supports (color: oklch(0% 0 0)) { :root { --c-vermelho-masp-oklch: oklch(48% 0.15 25); --c-concreto-bardi-oklch: oklch(58% 0.02 75); --c-amarelo-anita-oklch: oklch(80% 0.13 90); --c-azul-tecelar-oklch: oklch(38% 0.06 250); } } /* ─── PROSE HEADING CLASSES · ativa V3 typescale Jardineira (45+ classes alvo) ─── */ .prose-display { font-family: var(--font-display); font-size: var(--prose-display-size); font-weight: var(--prose-display-weight); font-style: italic; line-height: var(--prose-display-leading); letter-spacing: var(--prose-display-tracking); max-width: var(--prose-display-max-width); text-wrap: balance; } .prose-h2 { font-family: var(--font-display); font-size: var(--prose-h2-size); font-weight: var(--prose-h2-weight); line-height: var(--prose-h2-leading); letter-spacing: var(--prose-h2-tracking); max-width: var(--prose-h2-max-width); text-wrap: balance; } .prose-h3 { font-family: var(--font-display); font-size: var(--prose-h3-size); font-weight: var(--prose-h3-weight); font-style: italic; line-height: var(--prose-h3-leading); letter-spacing: var(--prose-h3-tracking); max-width: var(--prose-h3-max-width); text-wrap: balance; } .prose-body { font-family: var(--font-sans); font-size: var(--prose-body-size); font-weight: var(--prose-body-weight); line-height: var(--prose-body-leading); letter-spacing: var(--prose-body-tracking); max-width: var(--prose-body-max-width); } /* ─── SACRAMENTO ACCENT · canon ≤7 instâncias ─── */ .script-accent { font-family: var(--font-script); font-weight: 400; color: var(--c-cobre); font-size: 1.4em; line-height: 0.9; display: inline-block; vertical-align: baseline; } /* ─── PULL-QUOTE EDITORIAL CLASS · Jardineira V3 ─── */ .pull-quote-editorial { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; max-width: 680px; margin: var(--s-xl, 40px) auto; text-align: center; color: var(--c-graphite); padding: var(--s-lg, 24px) 0; position: relative; } .pull-quote-editorial::before, .pull-quote-editorial::after { content: ""; display: block; width: 40px; height: 1px; margin: var(--s-md, 16px) auto; background: var(--c-vermelho-masp); } .pull-quote-attribution { display: block; margin-top: var(--s-md, 16px); font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; color: var(--c-gray-darker); } /* ─── HERITAGE DIVIDER · Jardineira V3 (vermelho-MASP gradient) ─── */ .heritage-divider { display: block; width: 60px; height: 2px; margin: var(--s-lg, 24px) auto; background: linear-gradient(90deg, transparent, var(--c-vermelho-masp), transparent); } /* ───────────────────────────────────────────────────────────────────── * JARDINEIRA VERSÁTIL V4 · Heritage Extensions ENHANCEMENT (Cândido Portinari pintura BR · 2026-05-01) * 3º brand layer: Lina Bo Bardi (arquitetural V3) + Lygia Pape Tecelares (textil V3) + Portinari (pictórico V4) * NÃO substitui · ADICIONA * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── HERITAGE PALETA · Jardineira V4 Cândido Portinari pintura BR ─── */ --c-terra-portinari: #8B5A3C; /* terra "Os Retirantes" 1944 · brush-stroke base */ --c-ocre-cafe: #C49B5A; /* ocre série "Café" 1935 · accent §Threshold */ --c-azul-criancas: #4A6B7A; /* azul "Crianças Brincando" 1955 · SVG meninos */ /* RGB triples */ --c-terra-portinari-rgb: 139, 90, 60; --c-ocre-cafe-rgb: 196, 155, 90; --c-azul-criancas-rgb: 74, 107, 122; } @supports (color: oklch(0% 0 0)) { :root { --c-terra-portinari-oklch: oklch(45% 0.06 50); --c-ocre-cafe-oklch: oklch(68% 0.08 70); --c-azul-criancas-oklch: oklch(48% 0.04 235); } } /* ─── BRUSH-STROKE OVERLAY · Jardineira V4 §Mostrar-peca (Portinari textura pintura) ─── */ .brush-stroke-portinari { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.03 0.6' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.35 0 0 0 0 0.23 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23b)'/%3E%3C/svg%3E"); background-repeat: repeat; mix-blend-mode: multiply; opacity: 0.14; pointer-events: none; z-index: 2; } @media (forced-colors: active) { .brush-stroke-portinari { display: none; } } @media (prefers-reduced-motion: reduce) { .brush-stroke-portinari { opacity: 0.08; } } /* ─── LINA MASP VÃO LIVRE · Jardineira V4 §Bio Gi background materializado ─── */ .lina-masp-pattern { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cline x1='10' y1='40' x2='110' y2='40' stroke='%23A83333' stroke-width='1.4' opacity='0.10'/%3E%3Crect x='8' y='40' width='4' height='44' fill='%23A83333' opacity='0.10'/%3E%3Crect x='108' y='40' width='4' height='44' fill='%23A83333' opacity='0.10'/%3E%3C/svg%3E"); background-size: 120px 120px; pointer-events: none; z-index: 0; } /* ─── LYGIA PAPE TECELARES · Jardineira V4 §Macetes background materializado ─── */ .lygia-tecelares-pattern { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cline x1='0' y1='40' x2='80' y2='40' stroke='%231A1410' stroke-width='2.5' opacity='0.08'/%3E%3Cline x1='40' y1='0' x2='40' y2='80' stroke='%231A1410' stroke-width='2.5' opacity='0.08'/%3E%3Ccircle cx='20' cy='20' r='6' fill='%231A1410' opacity='0.08'/%3E%3Ccircle cx='60' cy='60' r='6' fill='%231A1410' opacity='0.08'/%3E%3C/svg%3E"); background-size: 80px 80px; pointer-events: none; z-index: 0; } @media (forced-colors: active) { .lina-masp-pattern, .lygia-tecelares-pattern { display: none; } } /* ─── PULL-QUOTE OCRE · Jardineira V4 §Threshold (Portinari) ─── */ .pull-quote-ocre-portinari { background: linear-gradient(180deg, transparent, rgba(196,155,90,0.08), transparent); border-left: 2px solid var(--c-ocre-cafe, #C49B5A); padding: var(--s-md, 16px) var(--s-lg, 24px); font-family: var(--font-display, 'Cormorant Garamond', serif); font-style: italic; font-weight: 300; font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--c-terra-portinari, #8B5A3C); max-width: 640px; margin: 0 auto; line-height: 1.45; } .pull-quote-ocre-portinari cite { display: block; margin-top: var(--s-xs, 4px); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; color: var(--c-gray-darker, #6B6459); }