/* ========================================================= TEMAS — Paletas de color y presets tipográficos (FUENTE ÚNICA) Compartido por TODAS las invitaciones (boda, xv, …) vía assets/invitacion/temas.css. Se aplica con [data-tema] y [data-fuente] en . Roles de color: --color-primario = acento decorativo (dividers, líneas, números) — color de marca. --color-acento = SIEMPRE oscuro. Superficies sólidas con texto claro (botones, pie). Garantiza contraste WCAG AA. --color-secundario = fondo claro de la página. Capa HERO (la que diferencia de verdad a las paletas en la 1ª pantalla): --hero-fondo = color sólido del hero cuando NO hay foto. --hero-texto = color del texto del hero. --hero-overlay = velo sobre la foto (oscuro, claro o de color según arquetipo). --hero-deco = acento decorativo dentro del hero (intro/flecha). Arquetipos de hero: A = oscuro dramático · B = claro etéreo · C = color saturado. ========================================================= */ /* ---- Defaults (= paleta marfil-oro + fuente serif-sans) ---- */ :root { --color-primario: #b08d57; --color-secundario: #f7f3ec; --color-acento: #2f4734; --color-texto: #3a3530; --color-texto-suave: #6b635a; --fuente-titulos: "Cormorant Garamond", Georgia, serif; --fuente-texto: "Inter", system-ui, -apple-system, sans-serif; --fuente-nombres: "Cormorant Garamond", Georgia, serif; } /* ========================================================= PALETAS (10) ========================================================= */ /* ---- 1. marfil-oro · "Marfil & Oro" — A oscuro ---- Boda clásica/elegante. Atemporal, formal. */ [data-tema="marfil-oro"] { --color-primario: #b08d57; --color-secundario: #f7f3ec; --color-acento: #2f4734; --color-texto: #3a3530; --color-texto-suave: #6b635a; --hero-fondo: #2f4734; --hero-texto: #ffffff; --hero-overlay: linear-gradient(180deg, rgba(20,30,22,.30), rgba(20,30,22,.60)); --hero-deco: #d8b878; } /* ---- 2. eucalipto · "Eucalipto" — B claro ---- Boda botánica de día, jardín. Aireado, natural. */ [data-tema="eucalipto"] { --color-primario: #6f8c7e; --color-secundario: #f3f6f2; --color-acento: #2c3a32; --color-texto: #34403a; --color-texto-suave: #66726b; --hero-fondo: #eef3ee; --hero-texto: #2c3a32; --hero-overlay: linear-gradient(180deg, rgba(243,246,242,.60), rgba(238,243,238,.88)); --hero-deco: #5f7d6c; } /* ---- 3. rosa-dorado · "Rosa & Oro" — B claro ---- Boda romántica, XV suave. Delicado, femenino. */ [data-tema="rosa-dorado"] { --color-primario: #c08a7d; --color-secundario: #fbf4f1; --color-acento: #5b4742; --color-texto: #4a3b38; --color-texto-suave: #7d6b67; --hero-fondo: #fbeee9; --hero-texto: #5b4742; --hero-overlay: linear-gradient(180deg, rgba(251,238,233,.62), rgba(248,231,225,.90)); --hero-deco: #b07c70; } /* ---- 4. borgona-oro · "Borgoña & Oro" — A oscuro ---- Boda/XV de noche, otoño-invierno. Suntuoso, cálido. */ [data-tema="borgona-oro"] { --color-primario: #c5a253; --color-secundario: #f6f0ea; --color-acento: #5e2330; --color-texto: #3a2a2d; --color-texto-suave: #6d5a5d; --hero-fondo: #5e2330; --hero-texto: #f6ead8; --hero-overlay: linear-gradient(180deg, rgba(45,12,18,.32), rgba(45,12,18,.62)); --hero-deco: #d8b34f; } /* ---- 5. azul-noche · "Azul Noche" — C saturado oscuro ---- Boda de gala, XV nocturno elegante. Sofisticado, estelar. */ [data-tema="azul-noche"] { --color-primario: #c2a878; --color-secundario: #f4f5f8; --color-acento: #1d2a44; --color-texto: #2a3142; --color-texto-suave: #5b6479; --hero-fondo: #1d2a44; --hero-texto: #f3ecdc; --hero-overlay: linear-gradient(180deg, rgba(15,22,40,.32), rgba(15,22,40,.66)); --hero-deco: #cbb486; } /* ---- 6. terracota-arena · "Terracota & Arena" — C saturado cálido ---- Boda boho, destino playa/desierto. Cálido, tierra, relajado. */ [data-tema="terracota-arena"] { --color-primario: #c2734a; --color-secundario: #faf3ea; --color-acento: #7c3b22; --color-texto: #4b3528; --color-texto-suave: #82675a; --hero-fondo: #b85f38; --hero-texto: #fbf1e6; --hero-overlay: linear-gradient(180deg, rgba(108,46,24,.28), rgba(108,46,24,.58)); --hero-deco: #f0c9a6; } /* ---- 7. lavanda-bruma · "Lavanda Bruma" — B claro pastel ---- XV soñador, baby shower niña, primera comunión. Dulce, etéreo. */ [data-tema="lavanda-bruma"] { --color-primario: #8d7bb0; --color-secundario: #f6f4fb; --color-acento: #443a5e; --color-texto: #463f57; --color-texto-suave: #756d8a; --hero-fondo: #efeafa; --hero-texto: #443a5e; --hero-overlay: linear-gradient(180deg, rgba(239,234,250,.62), rgba(235,229,248,.90)); --hero-deco: #9b89c0; } /* ---- 8. cielo-durazno · "Cielo & Durazno" — B claro pastel ---- Baby shower, cumpleaños niños, XV fresco de día. Tierno, luminoso. */ [data-tema="cielo-durazno"] { --color-primario: #e39a72; --color-secundario: #f3f8fb; --color-acento: #2d5468; --color-texto: #344b57; --color-texto-suave: #5f7682; --hero-fondo: #e7f1f6; --hero-texto: #2d5468; --hero-overlay: linear-gradient(180deg, rgba(231,241,246,.60), rgba(226,238,244,.88)); --hero-deco: #d98a5f; } /* ---- 9. esmeralda-joya · "Esmeralda Joya" — C saturado joya ---- XV moderno, boda statement, evento de noche. Audaz, lujoso. */ [data-tema="esmeralda-joya"] { --color-primario: #cba45c; --color-secundario: #eef4f0; --color-acento: #0f3d32; --color-texto: #1f3a33; --color-texto-suave: #4f6a62; --hero-fondo: #0f5040; --hero-texto: #f1ecd9; --hero-overlay: linear-gradient(180deg, rgba(8,42,34,.30), rgba(8,42,34,.62)); --hero-deco: #d6b760; } /* ---- 10. tinta-coral · "Tinta & Coral" — C saturado moderno ---- XV moderno/atrevido, cumpleaños adulto. Contemporáneo, vibrante. */ [data-tema="tinta-coral"] { --color-primario: #e2674f; --color-secundario: #f6f2ef; --color-acento: #24202c; --color-texto: #2c2733; --color-texto-suave: #5e5867; --hero-fondo: #24202c; --hero-texto: #f4ece6; --hero-overlay: linear-gradient(180deg, rgba(20,17,26,.34), rgba(20,17,26,.64)); --hero-deco: #f08a72; } /* ========================================================= TIPOGRAFÍAS (5 presets) La fuente "extra" (Great Vibes / Marcellus / Playfair) se carga condicionalmente desde motor.js solo cuando el preset la usa. ========================================================= */ [data-fuente="serif-sans"] { --fuente-titulos: "Cormorant Garamond", Georgia, serif; --fuente-texto: "Inter", system-ui, sans-serif; --fuente-nombres: "Cormorant Garamond", Georgia, serif; } [data-fuente="script-serif"] { --fuente-titulos: "Cormorant Garamond", Georgia, serif; --fuente-texto: "Cormorant Garamond", Georgia, serif; --fuente-nombres: "Great Vibes", cursive; } [data-fuente="serif"] { --fuente-titulos: "Cormorant Garamond", Georgia, serif; --fuente-texto: "Cormorant Garamond", Georgia, serif; --fuente-nombres: "Cormorant Garamond", Georgia, serif; } /* ---- NUEVO: sans elegante (editorial, limpio) — bodas minimalistas, adulto ---- */ [data-fuente="sans-elegante"] { --fuente-titulos: "Marcellus", Georgia, serif; --fuente-texto: "Hanken Grotesk", system-ui, sans-serif; --fuente-nombres: "Marcellus", Georgia, serif; } /* ---- NUEVO: display moderno (XV / fiesta contemporánea) ---- */ [data-fuente="display-moderno"] { --fuente-titulos: "Playfair Display", Georgia, serif; --fuente-texto: "Hanken Grotesk", system-ui, sans-serif; --fuente-nombres: "Playfair Display", Georgia, serif; }