/* ============================================================ themes.css — Temas visuales intercambiables Aplicar via: ============================================================ Temas disponibles: · editorial → Blog profesional / General (default, rojo) · personal → Desarrollo personal / Coaching (naranja cálido) · familia → Guía infantil / Padres (violeta suave) · noticias → Portal de noticias / Actualidad (rojo periódico) · naturaleza → Salud / Bienestar / Sustentabilidad (verde) ============================================================ */ /* ══════════════════════════════════════════════════════════ TEMA 1 — EDITORIAL (default) Profesional, clean, rojo intenso ══════════════════════════════════════════════════════════ */ [data-site-theme="editorial"] { --color-accent: #e94560; --color-accent-rgb: 233, 69, 96; --color-accent-2: #3b82f6; --color-bg-dark: #0f172a; --theme-header-bg: #ffffff; --theme-hero-from: #0f172a; --theme-hero-to: #1e293b; --theme-radius-card: 14px; --theme-font-weight-logo: 900; --theme-header-border: 3px solid #e94560; } [data-site-theme="editorial"] .site-header { background: var(--theme-header-bg); } /* Dark mode editorial */ [data-site-theme="editorial"][data-theme="dark"] { --color-bg: #0f172a; --color-bg-alt: #1e293b; --color-surface: #1e293b; --color-border: #2d3f57; --color-text: #e2e8f0; --color-primary: #f1f5f9; --color-muted: #94a3b8; } /* ══════════════════════════════════════════════════════════ TEMA 2 — PERSONAL (Desarrollo Personal / Coaching) Naranja cálido, inspirador, energético ══════════════════════════════════════════════════════════ */ [data-site-theme="personal"] { --color-accent: #f97316; --color-accent-rgb: 249, 115, 22; --color-accent-2: #fbbf24; --color-primary: #1c0a00; --color-text: #292524; --color-muted: #78716c; --color-border: #e7e5e4; --color-bg: #fffbf7; --color-bg-alt: #fff7ed; --color-bg-dark: #1c0a00; --color-surface: #ffffff; --color-card-hover: #fff7ed; --theme-header-bg: #ffffff; --theme-hero-from: #431407; --theme-hero-to: #7c2d12; --theme-radius-card: 16px; --theme-font-weight-logo: 900; --theme-header-border: 4px solid #f97316; --radius: 12px; } [data-site-theme="personal"] .site-header { background: #fff; border-bottom: var(--theme-header-border) !important; } [data-site-theme="personal"] .site-logo { color: #1c0a00; } [data-site-theme="personal"] .hero-post { background: linear-gradient(135deg, #431407 0%, #9a3412 50%, #431407 100%) !important; border-color: rgba(249,115,22,0.3) !important; } [data-site-theme="personal"] .hero-post::before { background: linear-gradient(45deg, rgba(249,115,22,0.12) 0%, transparent 60%) !important; } [data-site-theme="personal"] .hero-post__btn { background: #f97316 !important; box-shadow: 0 4px 14px rgba(249,115,22,0.4) !important; } [data-site-theme="personal"] .hero-post__btn:hover { background: #ea6c0a !important; } [data-site-theme="personal"] .section-header__title { border-left-color: #f97316 !important; } [data-site-theme="personal"] .popular-card::after { background: #f97316 !important; } [data-site-theme="personal"] .popular-card:hover { border-color: #f97316 !important; } [data-site-theme="personal"] .tag-badge:hover { background: #f97316 !important; border-color: #f97316 !important; } /* Dark mode personal */ [data-site-theme="personal"][data-theme="dark"] { --color-bg: #1c0a00; --color-bg-alt: #2c1500; --color-surface: #2c1500; --color-border: #451a00; --color-text: #fed7aa; --color-primary: #ffedd5; --color-muted: #c2a27e; } /* ══════════════════════════════════════════════════════════ TEMA 3 — FAMILIA (Guía Infantil / Padres) Violeta suave, amigable, redondeado, cálido ══════════════════════════════════════════════════════════ */ [data-site-theme="familia"] { --color-accent: #7c3aed; --color-accent-rgb: 124, 58, 237; --color-accent-2: #ec4899; --color-primary: #1e0a3c; --color-text: #2e1065; --color-muted: #7c3aed; --color-border: #e9d5ff; --color-bg: #faf5ff; --color-bg-alt: #f5f0ff; --color-bg-dark: #1e0a3c; --color-surface: #ffffff; --color-card-hover: #f0e6ff; --theme-header-bg: #ffffff; --theme-hero-from: #2e1065; --theme-hero-to: #4c1d95; --theme-radius-card: 20px; --theme-font-weight-logo: 800; --theme-header-border: 4px solid #7c3aed; --radius: 14px; --radius-sm: 8px; } [data-site-theme="familia"] .site-header { background: #fff; border-bottom: var(--theme-header-border) !important; } [data-site-theme="familia"] .site-logo { color: #4c1d95; font-size: 1.3rem !important; } [data-site-theme="familia"] .hero-post { background: linear-gradient(135deg, #2e1065 0%, #5b21b6 50%, #2e1065 100%) !important; border-color: rgba(124,58,237,0.3) !important; border-radius: 20px !important; } [data-site-theme="familia"] .hero-post::before { background: linear-gradient(45deg, rgba(124,58,237,0.12) 0%, transparent 60%) !important; } [data-site-theme="familia"] .hero-post__cat { background: #ec4899 !important; } [data-site-theme="familia"] .hero-post__btn { background: #7c3aed !important; border-radius: 50px !important; box-shadow: 0 4px 14px rgba(124,58,237,0.4) !important; } [data-site-theme="familia"] .hero-post__btn:hover { background: #6d28d9 !important; } [data-site-theme="familia"] .section-header__title { border-left-color: #ec4899 !important; } [data-site-theme="familia"] .popular-card { border-radius: 16px !important; } [data-site-theme="familia"] .popular-card::after { background: #7c3aed !important; } [data-site-theme="familia"] .popular-card:hover { border-color: #c4b5fd !important; } [data-site-theme="familia"] .post-card { border-radius: 20px !important; } [data-site-theme="familia"] .post-card__cat { color: #7c3aed !important; } [data-site-theme="familia"] .post-card__title a:hover { color: #7c3aed !important; } [data-site-theme="familia"] .sidebar-widget__title { border-bottom-color: #ec4899 !important; } [data-site-theme="familia"] .tag-badge:hover { background: #7c3aed !important; border-color: #7c3aed !important; } /* Dark mode familia */ [data-site-theme="familia"][data-theme="dark"] { --color-bg: #0f0520; --color-bg-alt: #1a0835; --color-surface: #1a0835; --color-border: #3b1f6b; --color-text: #e9d5ff; --color-primary: #f5f3ff; --color-muted: #a78bfa; } /* ══════════════════════════════════════════════════════════ TEMA 4 — NOTICIAS (Portal / Actualidad) Rojo periódico, header oscuro, tipografía bold, serio ══════════════════════════════════════════════════════════ */ [data-site-theme="noticias"] { --color-accent: #dc2626; --color-accent-rgb: 220, 38, 38; --color-accent-2: #1d4ed8; --color-primary: #0a0a0a; --color-text: #111111; --color-muted: #6b7280; --color-border: #d1d5db; --color-bg: #f9fafb; --color-bg-alt: #f3f4f6; --color-bg-dark: #0a0a0a; --color-surface: #ffffff; --color-card-hover: #f1f5f9; --theme-header-bg: #0a0a0a; --theme-hero-from: #0a0a0a; --theme-hero-to: #1f2937; --theme-radius-card: 4px; --theme-font-weight-logo: 900; --theme-header-border: 4px solid #dc2626; --radius: 4px; --radius-sm: 2px; } [data-site-theme="noticias"] .site-header { background: #0a0a0a !important; border-bottom: var(--theme-header-border) !important; } [data-site-theme="noticias"] .site-logo { color: #ffffff !important; font-size: 1.35rem !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: -0.03em; } [data-site-theme="noticias"] .site-nav a { color: rgba(255,255,255,0.7) !important; } [data-site-theme="noticias"] .site-nav a:hover, [data-site-theme="noticias"] .site-nav a.active { color: #fff !important; background: rgba(220,38,38,0.2) !important; } [data-site-theme="noticias"] .search-form input { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.2) !important; color: #fff !important; } [data-site-theme="noticias"] .search-form input::placeholder { color: rgba(255,255,255,0.5) !important; } [data-site-theme="noticias"] .search-form button { color: rgba(255,255,255,0.7) !important; } [data-site-theme="noticias"] .theme-toggle { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.2) !important; color: rgba(255,255,255,0.7) !important; } [data-site-theme="noticias"] .hero-post { background: linear-gradient(135deg, #0a0a0a 0%, #1f2937 100%) !important; border-radius: 4px !important; border-color: rgba(220,38,38,0.3) !important; border-left: 4px solid #dc2626 !important; } [data-site-theme="noticias"] .hero-post__cat { background: #dc2626 !important; border-radius: 2px !important; } [data-site-theme="noticias"] .hero-post__btn { background: #dc2626 !important; border-radius: 2px !important; box-shadow: none !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0.05em; } [data-site-theme="noticias"] .hero-post__btn:hover { background: #b91c1c !important; } [data-site-theme="noticias"] .post-card { border-radius: 4px !important; border-color: #e5e7eb !important; } [data-site-theme="noticias"] .post-card:hover { border-left: 3px solid #dc2626 !important; transform: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; } [data-site-theme="noticias"] .post-card__cat { font-size: 0.68rem !important; } [data-site-theme="noticias"] .post-card__title { font-size: 1rem !important; font-weight: 900 !important; } [data-site-theme="noticias"] .popular-card { border-radius: 4px !important; } [data-site-theme="noticias"] .section-header__title { border-left-color: #dc2626 !important; text-transform: uppercase !important; font-size: 0.9rem !important; letter-spacing: 0.08em !important; } [data-site-theme="noticias"] .sidebar-widget { border-radius: 2px !important; } [data-site-theme="noticias"] .tag-badge { border-radius: 2px !important; } [data-site-theme="noticias"] .tag-badge:hover { background: #dc2626 !important; border-color: #dc2626 !important; } [data-site-theme="noticias"] .site-footer { background: #0a0a0a !important; } /* Dark mode noticias */ [data-site-theme="noticias"][data-theme="dark"] { --color-bg: #111111; --color-bg-alt: #1a1a1a; --color-surface: #1a1a1a; --color-border: #2d2d2d; --color-text: #e5e7eb; --color-primary: #f9fafb; --color-muted: #9ca3af; } /* ══════════════════════════════════════════════════════════ TEMA 5 — NATURALEZA (Salud / Bienestar / Sustentabilidad) Verde orgánico, calmo, fresco, natural ══════════════════════════════════════════════════════════ */ [data-site-theme="naturaleza"] { --color-accent: #16a34a; --color-accent-rgb: 22, 163, 74; --color-accent-2: #0891b2; --color-primary: #052e16; --color-text: #14532d; --color-muted: #4b7c5a; --color-border: #bbf7d0; --color-bg: #f0fdf4; --color-bg-alt: #dcfce7; --color-bg-dark: #052e16; --color-surface: #ffffff; --color-card-hover: #dcfce7; --theme-header-bg: #ffffff; --theme-hero-from: #052e16; --theme-hero-to: #166534; --theme-radius-card: 12px; --theme-font-weight-logo: 800; --theme-header-border: 4px solid #16a34a; --radius: 10px; --radius-sm: 6px; } [data-site-theme="naturaleza"] .site-header { background: #fff; border-bottom: var(--theme-header-border) !important; } [data-site-theme="naturaleza"] .site-logo { color: #052e16 !important; } [data-site-theme="naturaleza"] .hero-post { background: linear-gradient(135deg, #052e16 0%, #15803d 50%, #052e16 100%) !important; border-color: rgba(22,163,74,0.3) !important; } [data-site-theme="naturaleza"] .hero-post::before { background: linear-gradient(45deg, rgba(22,163,74,0.1) 0%, transparent 60%) !important; } [data-site-theme="naturaleza"] .hero-post__cat { background: #16a34a !important; } [data-site-theme="naturaleza"] .hero-post__btn { background: #16a34a !important; box-shadow: 0 4px 14px rgba(22,163,74,0.4) !important; } [data-site-theme="naturaleza"] .hero-post__btn:hover { background: #15803d !important; } [data-site-theme="naturaleza"] .section-header__title { border-left-color: #16a34a !important; } [data-site-theme="naturaleza"] .popular-card::after { background: #16a34a !important; } [data-site-theme="naturaleza"] .popular-card:hover { border-color: #86efac !important; } [data-site-theme="naturaleza"] .post-card__cat { color: #15803d !important; } [data-site-theme="naturaleza"] .post-card__title a:hover { color: #16a34a !important; } [data-site-theme="naturaleza"] .sidebar-widget__title { border-bottom-color: #16a34a !important; } [data-site-theme="naturaleza"] .tag-badge:hover { background: #16a34a !important; border-color: #16a34a !important; } [data-site-theme="naturaleza"] .post-card { border-color: #bbf7d0 !important; } /* Dark mode naturaleza */ [data-site-theme="naturaleza"][data-theme="dark"] { --color-bg: #071a0e; --color-bg-alt: #0f2d1a; --color-surface: #0f2d1a; --color-border: #1a4a2a; --color-text: #bbf7d0; --color-primary: #dcfce7; --color-muted: #6ee7a0; } /* ══════════════════════════════════════════════════════════ TEMA 6 — GUÍA INFANTIL (Embarazo / Crianza / Salud) Azul marino + naranja cálido + verde esmeralda Genera confianza, cercanía y bienestar ══════════════════════════════════════════════════════════ */ [data-site-theme="guia-infantil"] { --color-accent: #f97316; --color-accent-rgb: 249, 115, 22; --color-accent-2: #10b981; --color-primary: #1a3c5e; --color-text: #334155; --color-muted: #64748b; --color-border: #e2e8f0; --color-bg: #fafaf9; --color-bg-alt: #f0f7f4; --color-bg-dark: #0f2d40; --color-surface: #ffffff; --color-card-hover: #f0f7f4; --theme-header-bg: rgba(250,250,249,0.96); --theme-hero-from: #0f2d40; --theme-hero-to: #1a3c5e; --theme-radius-card: 16px; --theme-font-weight-logo: 900; --theme-header-border: 3px solid #f97316; --radius: 12px; --radius-sm: 8px; } [data-site-theme="guia-infantil"] .site-header { background: var(--theme-header-bg) !important; border-bottom: var(--theme-header-border) !important; } [data-site-theme="guia-infantil"] .site-logo { color: #1a3c5e !important; } [data-site-theme="guia-infantil"] .hero-post { background: linear-gradient(135deg, #0f2d40 0%, #1a3c5e 50%, #0f2d40 100%) !important; border-color: rgba(249,115,22,0.25) !important; border-radius: 18px !important; } [data-site-theme="guia-infantil"] .hero-post::before { background: linear-gradient(45deg, rgba(249,115,22,0.08) 0%, transparent 60%) !important; } [data-site-theme="guia-infantil"] .hero-post__btn { background: #f97316 !important; box-shadow: 0 4px 14px rgba(249,115,22,0.4) !important; } [data-site-theme="guia-infantil"] .hero-post__btn:hover { background: #ea6a0a !important; box-shadow: 0 6px 20px rgba(249,115,22,0.5) !important; } [data-site-theme="guia-infantil"] .hero-slider__content { background: linear-gradient(135deg, #0f2d40 0%, #1a3c5e 100%) !important; } [data-site-theme="guia-infantil"] .hero-slider__btn { background: #f97316 !important; box-shadow: 0 4px 12px rgba(249,115,22,0.35) !important; } [data-site-theme="guia-infantil"] .hero-slider__btn:hover { background: #ea6a0a !important; } [data-site-theme="guia-infantil"] .section-header__title { border-left-color: #f97316 !important; } [data-site-theme="guia-infantil"] .popular-card::after { background: #f97316 !important; } [data-site-theme="guia-infantil"] .popular-card:hover { border-color: #f97316 !important; } [data-site-theme="guia-infantil"] .post-card { border-radius: 16px !important; } [data-site-theme="guia-infantil"] .tag-badge:hover { background: #f97316 !important; border-color: #f97316 !important; } [data-site-theme="guia-infantil"] .sidebar-widget__title { border-bottom-color: #f97316 !important; } [data-site-theme="guia-infantil"] .pagination__btn--active { background: #f97316 !important; border-color: #f97316 !important; } [data-site-theme="guia-infantil"] .btn-search:hover { background: #ea6a0a !important; } [data-site-theme="guia-infantil"] .btn--primary { background: #f97316 !important; } [data-site-theme="guia-infantil"] .btn--primary:hover { background: #ea6a0a !important; } /* Dark mode guia-infantil */ [data-site-theme="guia-infantil"][data-theme="dark"] { --color-bg: #0d2233; --color-bg-alt: #122a3d; --color-surface: #122a3d; --color-border: #1e3a52; --color-text: #cbd5e1; --color-primary: #e2f0fb; --color-muted: #8ba9c4; } [data-site-theme="guia-infantil"][data-theme="dark"] .site-header { background: rgba(13,34,51,0.96) !important; } /* ══════════════════════════════════════════════════════════ ESTILOS COMUNES A TODOS LOS TEMAS ══════════════════════════════════════════════════════════ */ /* Transición suave al cambiar tema */ body, .site-header, .site-footer, .post-card, .hero-post, .popular-card, .sidebar-widget, .post-content { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important; }