/* Vie Belle — design tokens */ :root { /* Brand colors — Manual de marca 2026 (Azul Profundo & Gris Arena) */ --vb-navy: #0D1B2A; /* Azul Profundo */ --vb-sand: #DCD2C4; /* Gris Arena */ --vb-ivory: #FAF7F2; /* Marfil */ --vb-graylight: #E6E6E6;/* Gris Claro */ --vb-graphite: #2B2B2B;/* Grafito */ --vb-white: #ffffff; --vb-black: #2B2B2B; /* --vb-gold kept as the warm accent token (now "arena tostada" taupe) */ --vb-gold: #A89272; /* Derived */ --vb-navy-90: #16273a; --vb-navy-12: rgba(13, 27, 42, 0.12); --vb-navy-06: rgba(13, 27, 42, 0.06); --vb-gold-12: rgba(168, 146, 114, 0.14); --vb-cream: #EFE8DC; /* arena suave para secciones alternas */ --vb-bone: #FAF7F2; /* marfil — fondo principal */ --vb-line: rgba(13, 27, 42, 0.14); /* Type — Manual de marca 2026: Playfair Display (títulos) + Montserrat/Lato (cuerpo) */ --ff-display: "Playfair Display", "Cormorant", "Times New Roman", serif; --ff-body: "Montserrat", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Scale */ --fs-hero: clamp(48px, 8.5vw, 132px); --fs-h1: clamp(36px, 5.2vw, 76px); --fs-h2: clamp(28px, 3.6vw, 52px); --fs-h3: clamp(20px, 2vw, 28px); --fs-eyebrow: 11px; --fs-body: 16px; --fs-sm: 13px; /* Spacing */ --pad-x: clamp(20px, 5vw, 96px); --section-y: clamp(72px, 10vw, 160px); /* Radii — borde redondeado consistente en todas las estructuras */ --r-card: 20px; --r-img: 20px; --r-sm: 14px; --r-pill: 999px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--ff-body); font-size: var(--fs-body); color: var(--vb-navy); background: var(--vb-bone); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.55; } img { max-width: 100%; display: block; } /* ── Textura de fondo satinada (capa fija sobre toda la página) ── Controlada por data-texture en y --vb-texture-opacity. soft-light sobre el champagne = variación tonal sutil, estilo seda. */ html::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background-image: url("../assets/texturas/texture-seda.jpg"); background-size: cover; background-position: center; mix-blend-mode: soft-light; opacity: var(--vb-texture-opacity, 0.5); } html[data-texture="velo"]::after { background-image: url("../assets/texturas/texture-velo.jpg"); } html[data-texture="none"]::after { opacity: 0; } button { font: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } .serif { font-family: var(--ff-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; } .eyebrow { font-size: var(--fs-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--vb-gold); } .container { padding-inline: var(--pad-x); } /* Dark mode overrides (applied via .vb-dark on root) */ .vb-dark { background: var(--vb-navy); color: var(--vb-bone); } .vb-dark .eyebrow { color: var(--vb-gold); } /* Reusable bits */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 1px solid currentColor; background: transparent; border-radius: var(--r-pill); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; transition: all .25s ease; } .btn:hover { background: var(--vb-navy); color: var(--vb-bone); border-color: var(--vb-navy); } .btn-gold { background: var(--vb-gold); color: var(--vb-bone); border-color: var(--vb-gold); } .btn-gold:hover { background: var(--vb-navy); border-color: var(--vb-navy); color: var(--vb-bone); } .btn-ghost-light { color: var(--vb-bone); border-color: rgba(245, 239, 231, 0.4); } .btn-ghost-light:hover { background: var(--vb-gold); border-color: var(--vb-gold); color: var(--vb-navy); } /* Image placeholder — warm gradient with soft texture (no longer gray) */ .imgph { position: relative; background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.4), transparent 60%), linear-gradient(135deg, #dfe3e6 0%, #9aa6b0 100%); color: var(--vb-navy); display: flex; align-items: end; justify-content: flex-start; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; text-align: left; padding: 14px 18px; overflow: hidden; } .imgph::after { content: none; } .imgph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 80%, rgba(13,27,42,0.18), transparent 55%); pointer-events: none; } .vb-dark .imgph { background: radial-gradient(ellipse at 30% 25%, rgba(13,27,42,0.18), transparent 60%), linear-gradient(135deg, #243456 0%, #0e1a32 100%); color: var(--vb-bone); } /* When imgph wraps an actual , hide the text */ .imgph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .imgph[data-has-img="true"] { color: transparent; } .imgph[data-has-img="true"]::before { content: none; } /* Section frame */ section { padding-block: var(--section-y); } .section-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: clamp(40px, 5vw, 80px); } @media (min-width: 900px) { .section-head { grid-template-columns: 1fr 1fr; gap: 48px; } } .section-head h2 { margin: 0; font-size: var(--fs-h2); } .section-head p { max-width: 52ch; opacity: 0.78; margin: 0; }