/* ============================================================ assets/css/temas.css Sistema de tema claro / oscuro — Our God Se aplica añadiendo la clase .tema-claro al . ============================================================ */ /* ── VARIABLES DEL TEMA CLARO ────────────────────────────────── */ html.tema-claro { /* Fondos */ --dark: #F2EDE6; --surface: rgba(140,123,98,0.10); --surface-hover: rgba(140,123,98,0.18); --border: rgba(92,84,72,0.15); --border-hover: rgba(92,84,72,0.32); /* Texto */ --blanco: #1A1610; /* casi negro cálido — máximo contraste */ --gris-medio: #4A4035; --gris-oscuro: #2E2820; /* Acento — más profundo para leer sobre fondo claro */ --beige: #7A6B52; --beige-light: #C8BBAA; --beige-dark: #5C4F3A; /* Sombras cálidas */ --shadow-sm: 0 2px 12px rgba(92,84,72,0.10); --shadow-md: 0 6px 28px rgba(92,84,72,0.16); --shadow-lg: 0 16px 48px rgba(92,84,72,0.22); } /* ── BASE ────────────────────────────────────────────────────── */ html.tema-claro body { background: var(--dark); color: var(--blanco); } /* ── TOPBAR ──────────────────────────────────────────────────── */ html.tema-claro .topbar { background: rgba(242,237,230,0.97); border-bottom-color: rgba(92,84,72,0.14); } html.tema-claro .topbar.scrolled { box-shadow: 0 2px 16px rgba(92,84,72,0.14); } html.tema-claro .topbar-logo { color: var(--beige); } html.tema-claro .logo-circle { border-color: var(--beige); } html.tema-claro .topbar-socials a { color: rgba(92,84,72,0.5); } html.tema-claro .topbar-socials a:hover { background: rgba(140,123,98,0.12); color: var(--gris-oscuro); } /* Navegación */ html.tema-claro .nav-item { color: rgba(74,64,53,0.65); } html.tema-claro .nav-item:hover { background: rgba(140,123,98,0.10); color: var(--gris-oscuro); } html.tema-claro .nav-item.active { background: rgba(140,123,98,0.12); color: var(--beige); } /* Menú móvil */ html.tema-claro .mobile-nav { background: rgba(242,237,230,0.98); border-bottom-color: rgba(92,84,72,0.12); } /* ── USUARIO / LOGIN ─────────────────────────────────────────── */ html.tema-claro .btn-login-google { border-color: rgba(92,84,72,0.28); color: var(--beige); } html.tema-claro .btn-login-google:hover { background: rgba(140,123,98,0.10); border-color: var(--beige); color: var(--gris-oscuro); } html.tema-claro .user-chip { border-color: rgba(92,84,72,0.16); background: rgba(140,123,98,0.10); } html.tema-claro .user-name { color: var(--beige); } html.tema-claro .user-avatar-placeholder { background: var(--beige-light); color: var(--beige-dark); } html.tema-claro .user-badge { background: rgba(140,123,98,0.12); color: var(--beige); } html.tema-claro .user-logout { color: rgba(92,84,72,0.45); } html.tema-claro .user-logout:hover { color: var(--beige); } /* ── FOOTER ──────────────────────────────────────────────────── */ html.tema-claro .site-footer { background: rgba(228,222,213,0.97); border-top-color: rgba(92,84,72,0.12); } html.tema-claro .footer-name { color: var(--beige); } html.tema-claro .footer-tagline { color: rgba(74,64,53,0.52); } html.tema-claro .footer-links a { color: rgba(74,64,53,0.62); } html.tema-claro .footer-links a:hover { color: var(--beige); } html.tema-claro .footer-socials a { color: rgba(74,64,53,0.45); } html.tema-claro .footer-socials a:hover { color: var(--beige); background: rgba(140,123,98,0.10); } html.tema-claro .footer-bottom { border-top-color: rgba(92,84,72,0.10); } html.tema-claro .footer-bottom p { color: rgba(74,64,53,0.42); } /* ── SECCIÓN HERO (section-hero genérico de páginas interiores) ─*/ html.tema-claro .section-hero { background: linear-gradient(180deg, rgba(242,237,230,0) 0%, rgba(242,237,230,1) 100%); border-bottom-color: rgba(92,84,72,0.12); } html.tema-claro .section-main-title { color: var(--blanco); } html.tema-claro .section-main-title span { color: var(--beige); } html.tema-claro .section-main-desc { color: rgba(74,64,53,0.68); } html.tema-claro .section-eyebrow { color: var(--beige); } html.tema-claro .section-eyebrow::before { background: var(--beige); } /* ── COMPONENTES GLOBALES ────────────────────────────────────── */ /* Badges */ html.tema-claro .badge-beige { background: rgba(140,123,98,0.12); color: var(--beige); } html.tema-claro .badge-dark { background: rgba(92,84,72,0.10); color: rgba(74,64,53,0.75); } /* Skeleton loader */ html.tema-claro .skeleton { background: linear-gradient(90deg, rgba(140,123,98,0.10) 25%, rgba(140,123,98,0.20) 50%, rgba(140,123,98,0.10) 75%); background-size: 200% 100%; } /* Empty state */ html.tema-claro .empty-state { color: rgba(92,84,72,0.42); } html.tema-claro .empty-state i { color: rgba(92,84,72,0.32); } /* Botones globales */ html.tema-claro .btn-filled { background: var(--beige); color: #fff; border-color: var(--beige); } html.tema-claro .btn-filled:hover { background: transparent; color: var(--beige); } html.tema-claro .btn-outline { color: var(--beige); border-color: rgba(140,123,98,0.40); } html.tema-claro .btn-outline:hover { border-color: var(--beige); color: var(--gris-oscuro); background: rgba(140,123,98,0.08); } html.tema-claro .btn-ghost { color: rgba(74,64,53,0.58); } html.tema-claro .btn-ghost:hover { color: var(--beige); background: rgba(140,123,98,0.10); } /* Scrollbar */ html.tema-claro ::-webkit-scrollbar-track { background: var(--dark); } html.tema-claro ::-webkit-scrollbar-thumb { background: rgba(140,123,98,0.35); } /* ── NOTIFICACIONES ──────────────────────────────────────────── */ html.tema-claro .notif-panel { background: rgba(242,237,230,0.99); border-color: rgba(92,84,72,0.14); box-shadow: 0 8px 32px rgba(92,84,72,0.18); } html.tema-claro .notif-panel-header { color: rgba(74,64,53,0.52); border-bottom-color: rgba(92,84,72,0.10); } html.tema-claro .notif-mark-all { color: rgba(74,64,53,0.45); } html.tema-claro .notif-mark-all:hover { color: var(--beige); } html.tema-claro .notif-item { border-bottom-color: rgba(92,84,72,0.07); } html.tema-claro .notif-item:hover { background: rgba(140,123,98,0.07); } html.tema-claro .notif-item.no-leida{ background: rgba(140,123,98,0.06); } html.tema-claro .notif-item.no-leida::before { background: var(--beige); } html.tema-claro .notif-titulo { color: var(--blanco); } html.tema-claro .notif-desc { color: rgba(74,64,53,0.58); } html.tema-claro .notif-fecha { color: rgba(74,64,53,0.42); } html.tema-claro .notif-dot { background: #c0392b; } html.tema-claro .notif-icon.noticia { background: rgba(70,130,180,0.12); color: #3a7bb5; } html.tema-claro .notif-icon.evento { background: rgba(180,120,50,0.12); color: #a0722a; } html.tema-claro .notif-icon.merch { background: rgba(140,123,98,0.12); color: var(--beige); } html.tema-claro .notif-icon.discografia { background: rgba(60,150,100,0.12); color: #3a8a5a; } html.tema-claro .notif-icon.material { background: rgba(180,60,60,0.12); color: #a03030; } html.tema-claro .notif-icon.compra { background: rgba(140,123,98,0.12); color: var(--beige); } html.tema-claro .notif-empty { color: rgba(92,84,72,0.38); } /* ── HERO INICIO ─────────────────────────────────────────────── */ html.tema-claro .carousel-overlay { background: linear-gradient( 90deg, rgba(242,237,230,0.90) 0%, rgba(242,237,230,0.58) 50%, rgba(242,237,230,0.22) 100% ); } html.tema-claro .hero-title { color: var(--blanco); } html.tema-claro .hero-title span { color: var(--beige); } html.tema-claro .hero-subtitle { color: rgba(74,64,53,0.72); } html.tema-claro .hero-eyebrow { color: var(--beige); } html.tema-claro .hero-eyebrow::before { background: var(--beige); } html.tema-claro .hero-logo-circle { background: rgba(242,237,230,0.55); border-color: rgba(140,123,98,0.30); } html.tema-claro .hero-logo-inner { color: var(--beige); } html.tema-claro .hero-social-link { color: rgba(74,64,53,0.55); } html.tema-claro .hero-social-link:hover { color: var(--beige); background: rgba(140,123,98,0.10); } /* Sección explorar */ html.tema-claro .section-welcome { background: var(--dark); } html.tema-claro .section-label { color: var(--beige); } html.tema-claro .section-title { color: var(--blanco); } html.tema-claro .section-desc { color: rgba(74,64,53,0.65); } html.tema-claro .section-card { background: rgba(255,252,248,0.75); border-color: rgba(92,84,72,0.12); } html.tema-claro .section-card:hover { background: rgba(255,252,248,0.95); border-color: rgba(140,123,98,0.30); box-shadow: var(--shadow-sm); } html.tema-claro .section-card-icon { color: var(--beige); } html.tema-claro .section-card-title { color: var(--blanco); } html.tema-claro .section-card-desc { color: rgba(74,64,53,0.60); } html.tema-claro .section-card-arrow { color: var(--beige); } /* Noticias en inicio */ html.tema-claro .inicio-noticias { background: rgba(228,222,213,0.55); } html.tema-claro .inicio-noticia-card { background: rgba(255,252,248,0.85); border-color: rgba(92,84,72,0.12); } html.tema-claro .inicio-noticia-card:hover { border-color: rgba(140,123,98,0.28); } html.tema-claro .inicio-noticia-titulo a { color: var(--blanco); } html.tema-claro .inicio-noticia-titulo a:hover { color: var(--beige); } html.tema-claro .inicio-noticia-resumen { color: rgba(74,64,53,0.65); } html.tema-claro .inicio-noticia-fecha { color: rgba(74,64,53,0.48); } html.tema-claro .inicio-noticia-link { color: var(--beige); } /* Evento banner */ html.tema-claro .evento-banner { background: rgba(228,222,213,0.75); border-color: rgba(92,84,72,0.12); } html.tema-claro .evento-banner-inner { border-color: rgba(92,84,72,0.10); } html.tema-claro .evento-banner-titulo { color: var(--blanco); } html.tema-claro .evento-banner-meta { color: rgba(74,64,53,0.60); } /* ── CARDS GENÉRICAS ─────────────────────────────────────────── */ html.tema-claro .noticia-card, html.tema-claro .album-card, html.tema-claro .merch-card, html.tema-claro .material-card, html.tema-claro .integrante-card, html.tema-claro .lugar-card, html.tema-claro .evento-card, html.tema-claro .pasado-item, html.tema-claro .sidebar-card, html.tema-claro .stat-card { background: rgba(255,252,248,0.88); border-color: rgba(92,84,72,0.13); } html.tema-claro .noticia-card:hover, html.tema-claro .album-card:hover, html.tema-claro .merch-card:hover, html.tema-claro .material-card:hover, html.tema-claro .integrante-card:hover { border-color: rgba(140,123,98,0.32); box-shadow: var(--shadow-md); } /* Títulos de cards */ html.tema-claro .noticia-titulo a, html.tema-claro .album-titulo, html.tema-claro .merch-nombre, html.tema-claro .material-titulo, html.tema-claro .integrante-nombre, html.tema-claro .lugar-titulo, html.tema-claro .evento-titulo { color: var(--blanco); } /* Textos secundarios */ html.tema-claro .noticia-resumen, html.tema-claro .merch-desc, html.tema-claro .material-desc, html.tema-claro .lugar-desc, html.tema-claro .integrante-rol, html.tema-claro .album-anio, html.tema-claro .evento-lugar, html.tema-claro .evento-fecha-txt { color: rgba(74,64,53,0.62); } /* Precio merch */ html.tema-claro .merch-precio { color: var(--beige); } html.tema-claro .merch-stock-txt { color: rgba(74,64,53,0.48); } html.tema-claro .merch-rating-count { color: rgba(74,64,53,0.45); } /* ── FILTROS Y BUSCADORES ────────────────────────────────────── */ html.tema-claro .filtro-tag { border-color: rgba(92,84,72,0.18); color: rgba(74,64,53,0.62); background: rgba(255,252,248,0.7); } html.tema-claro .filtro-tag:hover { border-color: rgba(140,123,98,0.35); color: var(--beige); } html.tema-claro .filtro-tag.active { background: rgba(140,123,98,0.12); border-color: var(--beige); color: var(--beige); } html.tema-claro .filtro-search input, html.tema-claro .merch-search-wrap input, html.tema-claro #ps { background: rgba(255,252,248,0.90); border-color: rgba(92,84,72,0.18); color: var(--blanco); } html.tema-claro .filtro-search input::placeholder, html.tema-claro .merch-search-wrap input::placeholder, html.tema-claro #ps::placeholder { color: rgba(74,64,53,0.40); } html.tema-claro .filtro-search input:focus, html.tema-claro .merch-search-wrap input:focus, html.tema-claro #ps:focus { border-color: rgba(140,123,98,0.45); background: #fff; } html.tema-claro .merch-resultados-info { color: rgba(74,64,53,0.55); } html.tema-claro .merch-filtro-label { color: rgba(74,64,53,0.50); } /* ── MERCH — BOTONES ─────────────────────────────────────────── */ html.tema-claro .btn-whatsapp { background: #25d366; color: #fff; } html.tema-claro .btn-whatsapp.disabled { background: rgba(140,123,98,0.12); color: rgba(74,64,53,0.42); border-color: rgba(92,84,72,0.15); } html.tema-claro .btn-deseo { background: rgba(255,252,248,0.85); border-color: rgba(92,84,72,0.16); color: rgba(74,64,53,0.50); } html.tema-claro .btn-deseo:hover { background: rgba(255,252,248,0.98); color: var(--beige); } html.tema-claro .btn-deseo.active { color: #c0392b; } html.tema-claro .btn-resenas { color: rgba(74,64,53,0.52); } html.tema-claro .btn-resenas:hover { color: var(--beige); } /* Merch badges */ html.tema-claro .merch-cat-badge { background: rgba(242,237,230,0.92); border-color: rgba(92,84,72,0.16); color: var(--beige); } html.tema-claro .poco-badge { background: var(--beige); color: #fff; } html.tema-claro .agotado-badge { background: rgba(242,237,230,0.90); border-color: rgba(92,84,72,0.15); color: rgba(74,64,53,0.55); } /* Panel de lista de deseos */ html.tema-claro .deseos-panel { background: rgba(242,237,230,0.99); border-left-color: rgba(92,84,72,0.12); } html.tema-claro .deseos-header { border-bottom-color: rgba(92,84,72,0.10); } html.tema-claro .deseos-header h2 { color: var(--blanco); } html.tema-claro .deseo-item { background: rgba(255,252,248,0.85); border-color: rgba(92,84,72,0.12); } html.tema-claro .deseo-nombre { color: var(--blanco); } html.tema-claro .deseo-precio { color: var(--beige); } html.tema-claro .panel-close { background: rgba(140,123,98,0.10); border-color: rgba(92,84,72,0.14); color: var(--beige); } /* Panel de reseñas */ html.tema-claro .resenas-panel { background: rgba(242,237,230,0.99); border-left-color: rgba(92,84,72,0.12); } html.tema-claro .resenas-header { border-bottom-color: rgba(92,84,72,0.10); } html.tema-claro .resenas-panel-titulo { color: var(--blanco); } html.tema-claro .resena-form-wrap { border-bottom-color: rgba(92,84,72,0.10); background: rgba(255,252,248,0.6); } html.tema-claro .resena-form-tit { color: rgba(74,64,53,0.52); } html.tema-claro .resena-textarea { background: rgba(255,252,248,0.90); border-color: rgba(92,84,72,0.18); color: var(--blanco); } html.tema-claro .resena-textarea::placeholder { color: rgba(74,64,53,0.40); } html.tema-claro .resena-textarea:focus { border-color: rgba(140,123,98,0.42); } html.tema-claro .star-btn { color: rgba(92,84,72,0.28); } html.tema-claro .star-btn:hover, html.tema-claro .star-btn.activa { color: #c9922a; } html.tema-claro .resena-item { border-bottom-color: rgba(92,84,72,0.08); } html.tema-claro .resena-autor { color: var(--blanco); } html.tema-claro .resena-fecha { color: rgba(74,64,53,0.42); } html.tema-claro .resena-comentario { color: rgba(74,64,53,0.68); } html.tema-claro .resenas-vacio { color: rgba(92,84,72,0.40); } html.tema-claro .resena-avatar-txt { background: rgba(140,123,98,0.12); color: var(--beige); } html.tema-claro .btn-resena-eliminar { color: rgba(180,60,60,0.75); border-color: rgba(180,60,60,0.22); } html.tema-claro .resena-msg.ok { color: #3a7a4a; } html.tema-claro .resena-msg.err { color: #b03030; } /* ── PAGINACIÓN ──────────────────────────────────────────────── */ html.tema-claro .pag-btn { background: rgba(255,252,248,0.85); border-color: rgba(92,84,72,0.15); color: rgba(74,64,53,0.62); } html.tema-claro .pag-btn:hover, html.tema-claro .pag-btn.active { background: rgba(140,123,98,0.10); border-color: rgba(140,123,98,0.35); color: var(--beige); } /* ── DISCOGRAFÍA ─────────────────────────────────────────────── */ html.tema-claro .reproductor { background: rgba(228,222,213,0.97) !important; border-top-color: rgba(92,84,72,0.12); } html.tema-claro .repro-titulo { color: var(--blanco); } html.tema-claro .repro-album { color: rgba(74,64,53,0.58); } html.tema-claro .repro-ctrl { color: rgba(74,64,53,0.60); } html.tema-claro .repro-ctrl:hover{ color: var(--gris-oscuro); background: rgba(140,123,98,0.10); } html.tema-claro .repro-play { background: var(--beige); color: #fff; } html.tema-claro .repro-progress-bar { background: rgba(92,84,72,0.14); } html.tema-claro .repro-time { color: rgba(74,64,53,0.48); } html.tema-claro .album-panel { background: rgba(238,232,224,0.99); border-left-color: rgba(92,84,72,0.12); } html.tema-claro .panel-titulo { color: var(--blanco); } html.tema-claro .pista-titulo { color: var(--blanco); } html.tema-claro .pista-duracion { color: rgba(74,64,53,0.50); } html.tema-claro .pista-item:hover { background: rgba(140,123,98,0.08); } html.tema-claro .pista-item.active { background: rgba(140,123,98,0.14); } html.tema-claro .pista-play-btn { color: rgba(74,64,53,0.52); } html.tema-claro .pista-play-btn:hover { color: var(--beige); } html.tema-claro .pista-num { color: rgba(74,64,53,0.40); } /* Panel de letra */ html.tema-claro .letra-panel { background: rgba(238,232,224,0.99); border-left-color: rgba(92,84,72,0.12); } html.tema-claro .letra-linea { color: rgba(74,64,53,0.70); } html.tema-claro .letra-linea.activa { color: var(--blanco); } /* ── NOTICIAS / ARTÍCULO ─────────────────────────────────────── */ html.tema-claro .noticia-meta { color: rgba(74,64,53,0.52); } html.tema-claro .noticia-tag { background: rgba(140,123,98,0.10); color: var(--beige); } html.tema-claro .noticia-cuerpo { color: rgba(30,22,10,0.82); } html.tema-claro .noticia-cuerpo h2, html.tema-claro .noticia-cuerpo h3 { color: var(--blanco); } html.tema-claro .comentario-bubble { background: rgba(255,252,248,0.88); border-color: rgba(92,84,72,0.12); } html.tema-claro .comentario-bubble p { color: rgba(74,64,53,0.75); } html.tema-claro .comentario-autor { color: var(--blanco); } html.tema-claro .comentario-fecha { color: rgba(74,64,53,0.45); } html.tema-claro .comentario-textarea { background: rgba(255,252,248,0.92); border-color: rgba(92,84,72,0.18); color: var(--blanco); } html.tema-claro .comentario-textarea:focus { border-color: rgba(140,123,98,0.42); } /* ── CONÓCENOS ───────────────────────────────────────────────── */ html.tema-claro .historia-texto { color: rgba(74,64,53,0.75); } html.tema-claro .integrante-body { background: transparent; } html.tema-claro .integrante-tab { color: rgba(74,64,53,0.52); } html.tema-claro .integrante-tab.active { color: var(--beige); background: rgba(140,123,98,0.10); border-bottom-color: var(--beige); } html.tema-claro .tab-panel p { color: rgba(74,64,53,0.70); } html.tema-claro .lugar-card .lugar-desc { color: rgba(74,64,53,0.65); } /* ── EVENTOS ─────────────────────────────────────────────────── */ html.tema-claro .evento-card .evento-desc { color: rgba(74,64,53,0.65); } html.tema-claro .asistencia-btn { background: rgba(255,252,248,0.85); border-color: rgba(92,84,72,0.16); color: rgba(74,64,53,0.60); } html.tema-claro .asistencia-btn.confirmado { background: rgba(140,123,98,0.12); color: var(--beige); } html.tema-claro .contador-asistentes { color: rgba(74,64,53,0.52); } /* ── MATERIAL ────────────────────────────────────────────────── */ html.tema-claro .material-card .material-desc { color: rgba(74,64,53,0.65); } html.tema-claro .btn-descargar { background: var(--beige); color: #fff; } html.tema-claro .btn-descargar:hover { opacity: .88; } /* ── TEMPLO SINAÍ ────────────────────────────────────────────── */ html.tema-claro .contacto-card { background: rgba(255,252,248,0.88); border-color: rgba(92,84,72,0.12); } html.tema-claro .contacto-titulo { color: var(--blanco); } html.tema-claro .contacto-tabla td { color: rgba(74,64,53,0.75); } html.tema-claro .contacto-tabla td i { color: var(--beige); } html.tema-claro .horarios-lista li { color: rgba(74,64,53,0.72); background: rgba(140,123,98,0.08); border-left-color: rgba(140,123,98,0.28); } /* ── TOGGLE TEMA ─────────────────────────────────────────────── */ .tema-toggle-wrap { display: flex; align-items: center; gap: 8px; } .tema-toggle-label { font-size: .72rem; font-family: var(--font-title); letter-spacing: .1em; text-transform: uppercase; color: rgba(191,182,165,.45); display: flex; align-items: center; gap: 5px; } html.tema-claro .tema-toggle-label { color: rgba(74,64,53,0.50); } .tema-toggle { display: flex; align-items: center; gap: 8px; background: transparent; border: none; cursor: pointer; padding: 0; } .tema-toggle-track { position: relative; width: 36px; height: 20px; background: rgba(191,182,165,0.18); border-radius: 999px; border: 1px solid rgba(191,182,165,0.25); display: block; transition: background .3s, border-color .3s; } html.tema-claro .tema-toggle-track { background: var(--beige); border-color: var(--beige); } .tema-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--beige); transition: transform .3s, background .3s; } html.tema-claro .tema-toggle-thumb { transform: translateX(16px); background: #fff; } .tema-toggle-txt { font-size: .72rem; font-family: var(--font-title); letter-spacing: .1em; text-transform: uppercase; color: rgba(191,182,165,0.50); min-width: 44px; transition: color .3s; } html.tema-claro .tema-toggle-txt { color: var(--beige); } /* ── DISCOGRAFÍA — Panel de letra tema claro ─────────────────── */ html.tema-claro .letra-panel { background: #F2EDE6 !important; border-left-color: rgba(92,84,72,0.15) !important; } html.tema-claro .letra-header { background: rgba(238,232,224,0.98) !important; border-bottom-color: rgba(92,84,72,0.12) !important; } html.tema-claro .letra-cancion-nombre { color: #1A1610 !important; } html.tema-claro .letra-cancion-album { color: rgba(74,64,53,0.65) !important; } html.tema-claro .letra-tab { color: rgba(74,64,53,0.65) !important; background: transparent !important; } html.tema-claro .letra-tab:hover { color: var(--beige) !important; background: rgba(122,107,82,0.08) !important; } html.tema-claro .letra-tab.active { color: var(--beige) !important; background: rgba(122,107,82,0.12) !important; } html.tema-claro .letra-body { background: #F2EDE6 !important; } html.tema-claro .letra-sync-view, html.tema-claro .letra-estatica-view { background: #F2EDE6 !important; } html.tema-claro .letra-linea { color: rgba(74,64,53,0.60) !important; } html.tema-claro .letra-linea.pasada { color: rgba(74,64,53,0.30) !important; } html.tema-claro .letra-linea.activa { color: #1A1610 !important; text-shadow: none !important; } html.tema-claro .letra-linea:hover { color: var(--beige) !important; background: rgba(122,107,82,0.06) !important; } html.tema-claro .letra-estatica-text { color: rgba(74,64,53,0.80) !important; } html.tema-claro .letra-no-disponible { color: rgba(74,64,53,0.45) !important; } html.tema-claro .letra-loading { color: rgba(74,64,53,0.50) !important; } html.tema-claro .letra-tabs { border-bottom-color: rgba(92,84,72,0.12) !important; background: rgba(238,232,224,0.98) !important; } /* ── REDES SOCIALES — Hover con color de cada red ───────────── */ /* Transición base para todos los íconos de redes */ .topbar-socials a i, .hero-socials a i, .footer-socials a i { transition: color .25s, filter .25s; } /* Instagram — gradient */ .topbar-socials a[href*="instagram"] i, .hero-socials a[href*="instagram"] i, .footer-socials a[href*="instagram"] i { transition: filter .25s; } .topbar-socials a[href*="instagram"]:hover i, .hero-socials a[href*="instagram"]:hover i, .footer-socials a[href*="instagram"]:hover i { filter: drop-shadow(0 0 4px #d6249f); color: #d6249f; } /* Facebook */ .topbar-socials a[href*="facebook"]:hover i, .hero-socials a[href*="facebook"]:hover i, .footer-socials a[href*="facebook"]:hover i { color: #1877F2; } /* YouTube */ .topbar-socials a[href*="youtube"]:hover i, .hero-socials a[href*="youtube"]:hover i, .footer-socials a[href*="youtube"]:hover i { color: #FF0000; } /* Spotify */ .topbar-socials a[href*="spotify"]:hover i, .hero-socials a[href*="spotify"]:hover i, .footer-socials a[href*="spotify"]:hover i { color: #1DB954; } /* TikTok */ .topbar-socials a[href*="tiktok"]:hover i, .hero-socials a[href*="tiktok"]:hover i, .footer-socials a[href*="tiktok"]:hover i { color: #EE1D52; } /* X / Twitter */ .topbar-socials a[href*="x.com"]:hover i, .hero-socials a[href*="x.com"]:hover i, .footer-socials a[href*="x.com"]:hover i { color: #e7e7e7; } /* SoundCloud */ .topbar-socials a[href*="soundcloud"]:hover i, .hero-socials a[href*="soundcloud"]:hover i, .footer-socials a[href*="soundcloud"]:hover i { color: #FF5500; }