/* ===================================================================== 00 · TOKENS — ÚNICO sitio donde van colores, fuentes y medidas del proyecto --------------------------------------------------------------------- El núcleo NO trae paleta. Cada proyecto rellena sus valores (los da el usuario en el brief). Abajo: la plantilla vacía + tres marcas de ejemplo activables con . Regla: ningún color escrito a mano fuera de este archivo. Tampoco sus rgba() derivados: se definen aquí (ej. --c-linea, --sombra). ===================================================================== */ :root{ /* ---- Color (ROLES, no nombres de color) ---- */ --c-fondo: #FFFFFF; /* fondo principal claro */ --c-fondo-alt: #F5F5F3; /* fondo claro alternativo (ritmo) */ --c-oscuro: #141414; /* secciones oscuras. Nunca derivar a café si la marca no lo pide */ --c-oscuro-alt: #1E1E1E; --c-texto: #161616; --c-texto-suave: #4B4A47; --c-sobre-oscuro: #F4F2EE; /* texto sobre fondo oscuro */ --c-sobre-oscuro-suave: rgba(244,242,238,.72); --c-acento: #8A6D3B; /* CTA / botones */ --c-acento-hover: #6F5730; --c-sobre-acento: #FFFFFF; /* texto sobre el acento */ --c-acento-2: #6B4A0E; /* detalles, enlaces */ --c-linea: rgba(20,20,20,.14); --c-linea-oscuro: rgba(255,255,255,.16); --c-linea-acento: rgba(138,109,59,.55); /* marcos, costuras */ --c-whatsapp: #25D366; /* color del canal: este sí es fijo */ --c-falta: #C0392B; /* marcar datos pendientes durante el desarrollo */ /* ---- Tipografía ---- */ --f-display: "Cormorant Garamond", "Times New Roman", serif; /* titulares */ --f-texto: "Inter", "Helvetica Neue", Arial, sans-serif; /* cuerpo e interfaz */ --fs-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem); --fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); --fs-h3: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); --fs-cuerpo: clamp(1rem, .96rem + .2vw, 1.0625rem); --fs-peq: .875rem; --fs-eyebrow: .75rem; --lh-titulo: 1.05; --lh-cuerpo: 1.65; --tracking-eyebrow: .22em; /* ---- Espacio y forma ---- */ --ancho: 1200px; --ancho-texto: 62ch; --gutter: clamp(20px, 4vw, 48px); --sec-y: clamp(80px, 10vw, 150px); /* padding vertical de sección */ --radio: 4px; --radio-grande: 120px; /* esquina asimétrica de fotos (escritorio) */ --radio-grande-movil: 60px; --radio-pill: 999px; --sombra: 0 30px 60px -30px rgba(20,20,20,.28); --sombra-flotante: 0 12px 30px -8px rgba(0,0,0,.35); /* ---- Movimiento ---- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-salida: cubic-bezier(.16,1,.3,1); --t-rapida: .25s; --t-media: .6s; --t-lenta: 1s; /* ---- Componentes ---- */ --cab-h: 84px; --cab-h-movil: 64px; --logo-h: 38px; /* núcleo: ≈38px escritorio */ --logo-h-movil: 29px; /* núcleo: ≈29px móvil */ --ola-h: clamp(70px, 10vw, 150px); /* núcleo: ≈70 móvil / ≈150 escritorio */ --wa-h: 56px; } /* --------------------------------------------------------------------- MARCA 1 · MN Beauty Studio (capa Belleza) Blanco + dorado dominan. Oscuro = negro NEUTRO (#22190F café fue rechazado) --------------------------------------------------------------------- */ [data-marca="mn"]{ --c-fondo:#FFFFFF; --c-fondo-alt:#F8F5EF; --c-oscuro:#141414; --c-oscuro-alt:#1C1C1C; --c-texto:#141414; --c-texto-suave:#4B4A47; --c-sobre-oscuro:#F6F3EE; --c-sobre-oscuro-suave:rgba(246,243,238,.7); --c-acento:#B4832A; --c-acento-hover:#9A6F22; --c-sobre-acento:#141414; --c-acento-2:#6B4A0E; --c-linea:rgba(20,20,20,.14); --c-linea-oscuro:rgba(255,255,255,.14); --c-linea-acento:rgba(180,131,42,.6); --f-display:"Cormorant Garamond", "Times New Roman", serif; --f-texto:"Jost", "Helvetica Neue", Arial, sans-serif; --sombra:0 30px 60px -30px rgba(20,20,20,.28); } /* --------------------------------------------------------------------- MARCA 2 · Charo Coromoto (paleta del formulario de logo y color 11/09/2026) pergamino #F5EFE4 · tinta #2B2620 · oliva #5E6B45 · oliva profundo #414A30 arcilla #A85338 (CTA) · rosa empolvado #D3A79C (detalles) --------------------------------------------------------------------- */ [data-marca="charo"]{ --c-fondo:#F5EFE4; --c-fondo-alt:#EDE4D5; --c-oscuro:#414A30; --c-oscuro-alt:#4B5538; --c-texto:#2B2620; --c-texto-suave:#5A5148; --c-sobre-oscuro:#F5EFE4; --c-sobre-oscuro-suave:rgba(245,239,228,.74); --c-acento:#A85338; --c-acento-hover:#8F4530; --c-sobre-acento:#F5EFE4; --c-acento-2:#5E6B45; --c-linea:rgba(43,38,32,.16); --c-linea-oscuro:rgba(245,239,228,.18); --c-linea-acento:rgba(211,167,156,.9); /* rosa empolvado */ --f-display:"Fraunces", Georgia, serif; --f-texto:"DM Sans", "Helvetica Neue", Arial, sans-serif; /* Su firma son los ARCOS (.retrato--arco), no la esquina asimétrica de MN */ --sombra:0 30px 60px -30px rgba(43,38,32,.3); } /* --------------------------------------------------------------------- MARCA 3 · Event Master (capa Formación y ventas) Morado profundo + lavanda + verde de canal. Sans en todo (Montserrat). --------------------------------------------------------------------- */ [data-marca="em"]{ --c-fondo:#120A22; --c-fondo-alt:#1A1030; --c-oscuro:#0C0618; --c-oscuro-alt:#1D1133; --c-texto:#F3EEFF; --c-texto-suave:rgba(223,211,255,.78); --c-sobre-oscuro:#F3EEFF; --c-sobre-oscuro-suave:rgba(223,211,255,.72); --c-acento:#8B5CF6; --c-acento-hover:#7C3AED; --c-sobre-acento:#FFFFFF; --c-acento-2:#C4B5FD; /* lavanda (antes --purple-lav) */ --c-linea:rgba(196,181,253,.18); --c-linea-oscuro:rgba(196,181,253,.18); --c-linea-acento:rgba(139,92,246,.6); --f-display:"Montserrat", "Helvetica Neue", Arial, sans-serif; --f-texto:"Montserrat", "Helvetica Neue", Arial, sans-serif; --lh-titulo:1.08; --radio:14px; --sombra:0 30px 60px -30px rgba(0,0,0,.6); }