/* ================================================ CRITICAL CSS — Sovereign Concierge Design System Inlined in — above-the-fold only ================================================ */ /* 1. Design Tokens */ :root { /* ── Color Palette ── */ --navy: #0d1c32; /* primary_container — authority */ --amber: #f8a825; /* secondary — high-value interactions */ --amber-container: #fed65b; /* secondary_container */ --cta: #10b981; /* action green — WhatsApp/bookings */ --cta-shadow: rgba(16, 185, 129, 0.25); /* Surfaces — tonal hierarchy (no borders, use bg shifts) */ --surface: #f8f9fa; /* global canvas */ --surface-lowest: #ffffff; /* primary content cards */ --surface-low: #f3f4f5; /* subtle sections */ --surface-container: #edeeef; /* inset areas */ --surface-high: #e7e8e9; /* nested utility */ --surface-highest: #e1e3e4; /* darkest surface */ /* Text */ --on-surface: #191c1d; --on-surface-var: #44474d; --on-navy: #ffffff; --on-amber: #241a00; --outline: #75777e; --outline-var: #c5c6cd; /* ── Typography ── */ --font-headline: 'Manrope', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* ── Spacing scale ── */ --sp-xs: 0.5rem; --sp-sm: 1rem; --sp-md: 2rem; --sp-lg: 4rem; --sp-xl: 6rem; /* ── Layout ── */ --container: 1280px; --container-pad: clamp(1.25rem, 5vw, 2.5rem); --nav-h: 4.5rem; --radius: 0.5rem; --radius-lg: 0.75rem; --radius-full: 9999px; /* ── Shadows — Navy-tinted (not grey) ── */ --shadow-ambient: 0 20px 40px rgba(13, 28, 50, 0.06); --shadow-float: 0 8px 24px rgba(13, 28, 50, 0.12); --shadow-cta: 0 12px 32px var(--cta-shadow); /* ── Transitions ── */ --ease: 0.28s cubic-bezier(0.4, 0, 0.2, 1); /* ── Material Symbols ── */ --icon-fill: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* 2. Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; hanging-punctuation: first last; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--on-surface); background-color: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; /* previene scroll horizontal por elementos animados fuera de flujo */ } :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-headline); line-height: 1.15; color: var(--navy); letter-spacing: -0.02em; overflow-wrap: break-word; } h2 { max-width: 800px; margin-left: auto; margin-right: auto; } a { color: inherit; text-decoration: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } ul, ol { list-style: none; } /* Material Symbols baseline */ .material-symbols-outlined { font-variation-settings: var(--icon-fill); vertical-align: middle; line-height: 1; font-size: 1.25em; user-select: none; } .icon-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* 3. Layout helpers */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); } main { padding-top: var(--nav-h); } /* 4. Navigation (above fold — always rendered) */ .site-nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; height: var(--nav-h); background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(197, 198, 205, 0.35); transition: box-shadow var(--ease); } .site-nav.scrolled { box-shadow: var(--shadow-float); } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .site-nav__logo { font-family: var(--font-headline); font-size: 1.15rem; font-weight: 800; color: var(--navy); letter-spacing: -0.03em; white-space: nowrap; } .site-nav__logo span { color: var(--amber); }