/*
Theme Name: Efecto Impulso Child
Template: astra
Author: Efecto Impulso
Description: Sistema de diseño exacto a la captura de referencia.
Version: 1.6.0
*/

:root {
    --color-fondo-global: #0d0d11;
    --color-fondo-tarjeta: #131318;
    --color-borde-tarjeta: rgba(212, 175, 55, 0.15);
    --color-dorado-principal: #d4af37;
    --color-texto-blanco: #ffffff;
    --color-texto-gris: #a0a0a5;
    --color-rojo-youtube: #ff0000;
    --color-rosa-instagram: #c13584;
    --color-cian-tiktok: #00f2fe;
}

/* 1. BASE Y FONDO OSCURO UNIFORME */
html, body, #page, .site, .ast-container, .site-content, #content, .elementor {
    background-color: var(--color-fondo-global) !important;
    background: var(--color-fondo-global) !important;
    color: var(--color-texto-blanco) !important;
}


/* 2. CABECERA LIMPIA Y COMPACTA (55PX) */
body {
    padding-top: 25px !important;
}

.site-header, 
.ast-primary-header-bar, 
.elementor-location-header,
.cabecera-fija-impulso {
    position: fixed !important;
    top: 20 !important;
    left: 0 !important;
    width: 100% !important;
    height: 55px !important;
    max-height: 55px !important;
    z-index: 99999 !important;
    background-color: var(--color-fondo-global) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
	overflow: visible !important; /* Permite que el logo sobresalga con elegancia */
}

/* Forzar que los contenedores internos de la cabecera no añadan alto extra */
.cabecera-fija-impulso,
.cabecera-fija-impulso * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Logo ajustado al nuevo alto */
.site-branding img, .custom-logo, .ast-site-identity img, .cabecera-fija-impulso img {
    max-height: 64px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Menú hipercompacto */
.main-navigation a, .elementor-nav-menu a {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: transparent !important;
    padding: 4px 12px !important;
    line-height: 1 !important;
}

.main-navigation a:hover, .elementor-nav-menu a:hover {
    color: var(--color-dorado-principal) !important;
}

/* Botones de la cabecera alineados */
.ast-header-button-1 a, .btn-cabecera-unete, .grupo-botones-cabecera .elementor-button {
    padding: 5px 14px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* 3. HERO SIN BANNERS INCORRECTOS */
.seccion-hero-impulso .elementor-widget-image:not(.logo-hero),
.hero-imagen-background {
    display: none !important;
}

/* 4. TRES PILARES EN 3 COLUMNAS */
.contenedor-pilares-grid,
.elementor-element-pilares {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .contenedor-pilares-grid {
        grid-template-columns: 1fr !important;
    }
}

.tarjeta-pilar-impulso {
    background-color: var(--color-fondo-tarjeta) !important;
    border: 1px solid var(--color-borde-tarjeta) !important;
    border-radius: 8px !important;
    padding: 32px 28px !important;
}

/* 5. TARJETAS VÍDEOS CON BOTÓN PLAY Y BADGES */
.videos-grid-impulso, .recursos-grid-impulso {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    margin-top: 25px !important;
}

@media (max-width: 768px) {
    .videos-grid-impulso, .recursos-grid-impulso {
        grid-template-columns: 1fr !important;
    }
}

.tarjeta-video-impulso {
    background-color: var(--color-fondo-tarjeta) !important;
    border: 1px solid var(--color-borde-tarjeta) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.tarjeta-video-thumb {
    height: 140px !important;
    background-color: #08080a !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.boton-play-circulo {
    width: 44px !important;
    height: 44px !important;
    background-color: var(--color-dorado-principal) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icono-play {
    color: #0d0d11 !important;
    font-size: 14px !important;
    margin-left: 2px !important;
}

.badge-duracion {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: rgba(0,0,0,0.7) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
}

.badge-categoria {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    background: rgba(212, 175, 55, 0.2) !important;
    color: var(--color-dorado-principal) !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

.tarjeta-video-cuerpo {
    padding: 20px !important;
}

.titulo-tarjeta-video {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* 6. TARJETAS RECURSOS */
.tarjeta-recurso-impulso {
    background-color: var(--color-fondo-tarjeta) !important;
    border: 1px solid var(--color-borde-tarjeta) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    text-decoration: none !important;
}

.tarjeta-recurso-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

.badge-formato {
    color: var(--color-texto-gris) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.titulo-tarjeta {
    color: var(--color-dorado-principal) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
}

.descripcion-tarjeta {
    color: var(--color-texto-gris) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.meta-tarjeta {
    color: #63636b !important;
    font-size: 12px !important;
    margin-top: 16px !important;
}

/* 7. PIE DE PÁGINA Y SOCIAL */
.site-footer {
    background-color: var(--color-fondo-global) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 40px 0 20px 0 !important;
}

.enlaces-footer a[href*="youtube"] { color: var(--color-rojo-youtube) !important; }
.enlaces-footer a[href*="instagram"] { color: var(--color-rosa-instagram) !important; }
.enlaces-footer a[href*="tiktok"] { color: var(--color-cian-tiktok) !important; }

/* ==========================================================================
   BLINDAJE DE ENCABEZADOS (H1 - H6), TÍTULOS DINÁMICOS Y ELEMENTOR
   ========================================================================== */

/* 1. Forzar blanco puro en todos los títulos globales y widgets de Elementor */
h1, h2, h4, h5, h6,
.entry-title,
.entry-title a,
.entry-content h1,
.entry-content h2,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.elementor-heading-title,
.elementor-heading-title a,
.elementor-widget-theme-post-title,
.elementor-widget-theme-post-title *,
.ast-single-post-title {
    color: #ffffff !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* 2. Unificación absoluta de H3 en Dorado Corporativo (Gutenberg + Elementor) */
h3,
.entry-content h3,
.elementor-heading-title.elementor-size-default,
.elementor-widget-heading h3,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-theme-post-content h3 {
    color: var(--color-dorado-principal) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}

/* 3. Textos y párrafos en entradas nativas y de Elementor */
.entry-content p,
.entry-content li,
.entry-content span,
.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-content li,
.elementor-widget-text-editor {
    color: var(--color-texto-gris) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    font-family: 'Inter', sans-serif !important;
}

.entry-content strong,
.entry-content b,
.elementor-widget-theme-post-content strong,
.elementor-widget-theme-post-content b {
    color: #ffffff !important;
}
/* Corrección de color en Título de Entrada dinámico de Elementor */
.elementor-widget-theme-post-title,
.elementor-widget-theme-post-title *,
.elementor-widget-theme-post-title a {
    color: #ffffff !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    text-decoration: none !important;
}
/* ==========================================================================
   AJUSTES FINALES DE LECTURA Y TIPOGRAFÍA (SINGLE POST)
   ========================================================================== */

/* 1. Título más grande y con jerarquía fuerte */
.elementor-widget-theme-post-title h1,
.elementor-widget-theme-post-title .elementor-heading-title {
    font-size: 42px !important;
    line-height: 1.25 !important;
    margin-bottom: 25px !important;
}

/* 2. Mayor ancho de lectura para el contenedor del post */
.contenedor-post-single,
.elementor-widget-theme-post-content {
    max-width: 1000px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. Párrafos de texto totalmente justificados */
.entry-content p,
.elementor-widget-theme-post-content p,
.elementor-widget-text-editor p {
    text-align: justify !important;
    text-justify: inter-word !important;
}