/* =============================================================
LERANISHE — DESIGN TOKENS
Sistema de variables CSS oficial para el sitio.
Regla 90/8/2: 90% base limpia · 8% navy/dorado · 2% rosa.
No agregar colores fuera de esta paleta sin actualizar este archivo.
============================================================= */
/* ---------- Google Fonts ----------
Cargar en antes de cualquier hoja:
------------------------------------- */
:root {
/* =========================================================
90% — BASE LIMPIA (Dior + Chanel)
========================================================= */
--color-white: #FFFFFF;
--color-cream: #FBF8F3; /* fondo principal cálido */
--color-cream-warm: #F5EFE5; /* feature bands suaves */
--color-bone: #EDE6D9; /* divisores y bordes */
--color-black: #0E0E0E; /* texto principal */
--color-text-soft: #5C5C5C; /* texto secundario */
--color-whisper: #8A8A8A; /* captions, helper text */
/* =========================================================
8% — ACENTOS LERANISHE
========================================================= */
--color-navy: #0A1F44; /* logo, h1, h2, names de casas */
--color-gold: #C9A96E; /* eyebrows, divisores, llave */
--color-gold-deep: #A88947; /* text accents, ornamentos */
/* =========================================================
2% — CAPA ROMÁNTICA (sello Chanel adaptado)
========================================================= */
--color-rose-dust: #C8989A;
--color-rose-deep: #A87375; /* cursivas en titulares */
--color-blush: #F2DCDA; /* fondos feature bands */
--color-petal: #FAEEEC; /* gradientes hero */
/* =========================================================
UTILITARIOS DE INTERACCIÓN (derivan de la paleta)
========================================================= */
--color-whatsapp: #25D366; /* solo botón WhatsApp */
--color-success: #2E7D32;
--color-error: #B00020;
--color-overlay: rgba(14, 14, 14, 0.42);
--color-overlay-soft: rgba(14, 14, 14, 0.06);
/* =========================================================
TIPOGRAFÍA — FAMILIES
========================================================= */
--font-display: 'Cinzel', 'Times New Roman', serif; /* logo, eyebrows */
--font-serif: 'Cormorant Garamond', 'Georgia', serif; /* h1, h2, nombres */
--font-script: 'Italianno', 'Brush Script MT', cursive; /* acentos románticos */
--font-sans: 'Outfit', -apple-system, 'Segoe UI', sans-serif; /* UI, body */
/* =========================================================
TIPOGRAFÍA — ESCALA (mobile-first; usar clamp en H1)
========================================================= */
--fs-eyebrow: 0.72rem; /* 11.5px — UPPERCASE, letter-spacing */
--fs-caption: 0.78rem; /* 12.5px — captions, helper */
--fs-body-sm: 0.88rem; /* 14px */
--fs-body: 1rem; /* 16px */
--fs-body-lg: 1.13rem; /* 18px */
--fs-h4: 1.25rem; /* 20px */
--fs-h3: 1.5rem; /* 24px */
--fs-h2: 2rem; /* 32px */
--fs-h2-lg: 2.5rem; /* 40px */
--fs-h1: clamp(2.25rem, 5vw + 1rem, 4.25rem);
--fs-script: clamp(2.5rem, 5vw + 1rem, 4.5rem);
--fs-script-sm: clamp(1.75rem, 3vw + 0.75rem, 2.75rem);
/* =========================================================
TIPOGRAFÍA — PESOS, INTERLINEADO, TRACKING
========================================================= */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-normal: 1.5;
--lh-relaxed: 1.7;
--ls-tight: -0.01em;
--ls-normal: 0;
--ls-wide: 0.08em;
--ls-wider: 0.18em;
--ls-widest: 0.42em; /* logo + eyebrows Cinzel */
/* =========================================================
ESPACIADO (escala 4-8)
========================================================= */
--space-3xs: 2px;
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
--space-5xl: 128px;
/* =========================================================
LAYOUT
========================================================= */
--container-narrow: 720px;
--container-default: 1180px;
--container-wide: 1320px;
--container-full: 1440px;
--grid-gap-tight: 0px; /* grid sin gaps estilo Dior */
--grid-gap-default: 24px;
--grid-gap-wide: 40px;
/* =========================================================
BORDES
========================================================= */
--border-hair: 1px solid var(--color-bone);
--border-soft: 1px solid var(--color-cream-warm);
--border-strong: 1px solid var(--color-black);
--border-gold: 1px solid var(--color-gold);
--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-pill: 999px;
--radius-circle: 50%;
/* =========================================================
SOMBRAS
========================================================= */
--shadow-none: none;
--shadow-soft: 0 1px 2px rgba(14,14,14,0.04), 0 4px 12px rgba(14,14,14,0.04);
--shadow-card: 0 2px 8px rgba(14,14,14,0.06), 0 12px 32px rgba(14,14,14,0.06);
--shadow-modal: 0 12px 48px rgba(14,14,14,0.18);
--shadow-wa: 0 6px 16px rgba(37,211,102,0.32);
/* =========================================================
TRANSICIONES
========================================================= */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--t-fast: 140ms var(--ease-out);
--t-base: 240ms var(--ease-out);
--t-slow: 420ms var(--ease-out);
/* =========================================================
Z-INDEX
========================================================= */
--z-base: 1;
--z-sticky: 100;
--z-header: 200;
--z-overlay: 800;
--z-modal: 900;
--z-toast: 950;
--z-whatsapp: 980;
--z-cookie: 1000;
}
/* =============================================================
RESET LIGERO — base tipográfica del sitio
============================================================= */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
font-family: var(--font-sans);
font-weight: var(--fw-light);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
color: var(--color-black);
background: var(--color-white);
}
img, svg, video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--t-fast);
}
a:hover { color: var(--color-gold-deep); }
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
/* =============================================================
UTILIDADES TIPOGRÁFICAS REUTILIZABLES
(usar como clases sueltas en HTML/PHP)
============================================================= */
/* Logo y bloques de letras espaciadas */
.t-display {
font-family: var(--font-display);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
}
/* Eyebrow dorado encima de cada section title */
.t-eyebrow {
font-family: var(--font-display);
font-weight: var(--fw-medium);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
display: inline-block;
}
/* Serif protagonista */
.t-serif {
font-family: var(--font-serif);
font-weight: var(--fw-regular);
letter-spacing: var(--ls-tight);
line-height: var(--lh-snug);
color: var(--color-black);
}
/* Cursiva románica dentro de un h1 serif */
.t-serif-italic {
font-family: var(--font-serif);
font-style: italic;
font-weight: var(--fw-regular);
color: var(--color-rose-deep);
}
/* Acentos románticos: "la selección", "para ella", "los más amados" */
.t-script {
font-family: var(--font-script);
font-weight: var(--fw-regular);
font-size: var(--fs-script);
line-height: 1;
color: var(--color-rose-deep);
}
.t-script--sm {
font-family: var(--font-script);
font-size: var(--fs-script-sm);
line-height: 1;
color: var(--color-rose-deep);
}
/* Texto suave para descripciones secundarias */
.t-muted { color: var(--color-text-soft); }
.t-whisper { color: var(--color-whisper); }
/* Captions en cursiva sans (notas, descripciones cortas) */
.t-caption {
font-size: var(--fs-caption);
color: var(--color-whisper);
letter-spacing: var(--ls-wide);
}
/* =============================================================
ACCESIBILIDAD — focus visible elegante
============================================================= */
:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
/* skip link */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}