/* ========================================================= SEVILLA HOME DESIGN · Design Tokens & Base ========================================================= */ :root{ /* Brand colors */ --color-bg: #14140F; --color-bg-elevated: #1B1B14; --color-bg-elevated-2: #21211A; --color-surface: #1E1E17; --color-border: rgba(212,175,106,0.16); --color-border-strong: rgba(212,175,106,0.32); --gold-100: #F1E2C0; --gold-300: #E3C58A; --gold-500: #D4AF6A; --gold-700: #A6813C; --gold-900: #8A6A1F; --gold-gradient: linear-gradient(135deg, #D4AF6A 0%, #C4A05C 45%, #8A6A1F 100%); --gold-gradient-soft: linear-gradient(135deg, rgba(212,175,106,0.16), rgba(138,106,31,0.06)); --color-text: #F4F1E9; --color-text-dim: #C9C4B6; --color-text-mute: #8C887C; --color-success: #7FA678; --color-danger: #C4746A; /* Typography */ --font-display: 'Montserrat', sans-serif; --font-body: 'Inter', sans-serif; /* Spacing scale (marketing site: spacious) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Radius */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-base: 300ms; --dur-slow: 600ms; /* Layout */ --container-max: 1240px; --header-h: 104px; --header-h-scrolled: 76px; --z-header: 100; --z-mobile-nav: 200; --z-modal: 300; --z-toast: 400; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* When Lenis (smooth-scroll library) is active it adds this class to and drives scrolling itself, so native CSS smooth-scroll must step aside to avoid the two fighting over the same scroll animation. */ html.lenis, html.lenis-smooth{ scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body{ margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100dvh; } /* Decorative architectural blueprint layer: fixed behind everything so it never scrolls out of view and always covers the full viewport, including the side margins outside .container. Sits at z-index 0 (site header, mobile nav, WhatsApp fab, etc. all sit above it via their own higher z-index tokens); main/footer are lifted to z-index 1 below so ordinary page content reliably paints on top of it. */ .architectural-bg{ position: fixed; inset: 0; z-index: 0; background-image: url('../assets/bg/architectural-blueprint.svg'); /* Must tile on BOTH axes (not just repeat-y) so the pattern reaches the left/right edges of the viewport at any width, not just a single centered instance of the tile. The tile is deliberately kept well below typical viewport widths (rather than ~1500px) so at least two full repetitions are always visible horizontally: at exactly one tile per viewport, a viewport even slightly narrower than the tile clips it to a centered slice, which reads as "only visible in the middle". */ background-repeat: repeat; background-position: center top; background-size: 640px auto; opacity: 0.24; pointer-events: none; } @media (min-width: 1100px){ .architectural-bg{ background-size: 760px auto; } } main, .site-footer{ position: relative; z-index: 1; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } button{ font-family: inherit; } ul{ list-style: none; margin: 0; padding: 0; } .container{ max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); } @media (min-width: 768px){ .container{ padding: 0 var(--space-7); } } /* Typography */ h1, h2, h3, h4, .heading{ font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.25; margin: 0; color: var(--color-text); } .eyebrow{ font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.24em; font-size: 12px; color: var(--gold-500); display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .eyebrow::before{ content: ''; width: 24px; height: 1px; background: var(--gold-gradient); } h1{ font-size: clamp(2rem, 5vw + 1rem, 3.6rem); letter-spacing: 0.04em; } h2{ font-size: clamp(1.6rem, 3vw + 1rem, 2.6rem); } h3{ font-size: clamp(1.1rem, 1.4vw + 0.8rem, 1.4rem); } p{ margin: 0; color: var(--color-text-dim); } .section-intro{ max-width: 640px; margin-bottom: var(--space-8); } .section-intro p{ margin-top: var(--space-4); font-size: 1.05rem; } /* Shared top spacer + intro for pages without a full hero (Cómo trabajamos, Servicios y materiales, Contacto): clears the fixed header, then reads like a compact page title band above the first content section. */ .page-head{ padding-top: calc(var(--header-h) + var(--space-8)); padding-bottom: var(--space-2); } .page-head .eyebrow{ margin-bottom: var(--space-4); } .page-head h1{ margin-bottom: var(--space-4); font-size: clamp(1.9rem, 3.4vw + 1rem, 2.8rem); } .page-head p{ max-width: 640px; font-size: 1.05rem; color: var(--color-text-dim); } .gold-text{ background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } section{ position: relative; padding: var(--space-9) 0; } @media (max-width: 767px){ section{ padding: var(--space-8) 0; } } .visually-hidden{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* Buttons */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-6); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; cursor: pointer; border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); touch-action: manipulation; white-space: nowrap; } .btn:active{ transform: scale(0.97); } .btn-primary{ background: var(--gold-gradient); color: #14140F; box-shadow: 0 8px 24px -8px rgba(212,175,106,0.45); } .btn-primary:hover{ box-shadow: 0 10px 30px -6px rgba(212,175,106,0.6); transform: translateY(-1px); } .btn-secondary{ background: transparent; border-color: var(--color-border-strong); color: var(--color-text); } .btn-secondary:hover{ border-color: var(--gold-500); color: var(--gold-300); background: rgba(212,175,106,0.06); } .btn-whatsapp{ background: #1E1E17; border-color: rgba(127,166,120,0.4); color: #EAF3E8; } .btn-whatsapp:hover{ border-color: #7FA678; background: rgba(127,166,120,0.1); transform: translateY(-1px); } .btn svg{ width: 18px; height: 18px; flex-shrink: 0; } .btn-block{ width: 100%; } .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible{ outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: var(--radius-sm); } /* Scroll reveal */ [data-reveal]{ opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); will-change: opacity, transform; } [data-reveal].is-visible{ opacity: 1; transform: translateY(0); } [data-reveal-stagger] > *{ opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } [data-reveal-stagger].is-visible > *{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ [data-reveal], [data-reveal-stagger] > *{ opacity: 1 !important; transform: none !important; } } /* Divider */ .divider{ width: 64px; height: 1px; background: var(--gold-gradient); margin: var(--space-6) 0; }