/* --- ESTILOS GENERALES Y DE DISEÑO --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #F8F9FA;
    color: #1F3B73; /* Azul principal */
}
/* Se usa una regla más específica para sobreescribir los estilos de Kadence */
.font-title {
    font-family: 'Poppins', sans-serif;
    color: #1F3B73 !important;
}
.hero-bg {
    background-color: #E5E9EF;
}
.cta-button {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cta-button:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 20px rgba(245, 157, 19, 0.3);
}
.feature-card:hover .feature-icon-bg {
    transform: scale(1.1);
}
/* ESTE ES EL CÓDIGO NUEVO Y CORREGIDO */
.testimonial-card {
    background-color: white;
    border: 1px solid #E5E9EF;
    border-radius: 16px; /* <-- AÑADE ESTA LÍNEA */
}

/* Efecto de gradiente para la marca */
.brand-gradient {
    background: linear-gradient(90deg, #1F3B73, #4a90e2, #F59D13);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: subtle-glow 8s ease-in-out infinite;
    display: inline-block; /* Necesario para que el transform funcione */
}

@keyframes subtle-glow {
    0%, 100% {
    background-position: 0% 50%;
    transform: scale(1);
    }
    50% {
    background-position: 100% 50%;
    transform: scale(1.03); /* Aumento sutil de tamaño */
    }
}

/* --- ANIMACIÓN (NOMBRE CORREGIDO) --- */
/* ESTE ES EL CÓDIGO NUEVO Y CORREGIDO */
.psl-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition-property: opacity, transform; /* Define qué animar */
    transition-duration: 0.6s; /* Define la duración */
    transition-timing-function: ease-out; /* Define la curva de velocidad */
}
.psl-fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ESTILOS ESPECÍFICOS PARA BLOQUES --- */
/* Color y tamaño para texto de la lista de iconos */
.wp-block-kadence-iconlist .kt-svg-icon-list-item-wrap .kt-svg-icon-list-text {
    color: #1F3B73;
    font-size: 1.1em;
}
/* --- CLASES DE RETRASO PARA ANIMACIÓN ESCALONADA --- */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
/* --- EFECTO HOVER PARA BLOQUES INTERACTIVOS (CORREGIDO) --- */
.interactive-infobox {
    /* Añadimos 'box-shadow' a la transición para que sea suave */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.interactive-infobox:hover {
    transform: translateY(-4px); /* Se desplaza 4px hacia arriba */
    /* Añadimos la sombra que faltaba */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* El icono dentro del bloque (esto ya lo tenías) */
.interactive-infobox .kt-blocks-info-box-media-container {
    transition: transform 0.3s ease-in-out;
}

.interactive-infobox:hover .kt-blocks-info-box-media-container {
    transform: scale(1.1); /* El icono crece un 10% */
}
/* --- ESTILOS PARA EL FOOTER (VERSIÓN CORREGIDA) --- */
/* Asignar la fuente y el color a los párrafos y enlaces del footer */
#colophon p, #colophon a {
    font-family: 'Inter', sans-serif !important;
    color: #C6D9F4 !important;
}
/* --- AÑADIR SOMBRA AL HEADER (CORREGIDO) --- */
header#masthead .site-header-inner-wrap {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* --- Estilos para el Menú del Dashboard de PsicoLat (Versión Corregida) --- */

/* Contenedor principal del menú */
.dashboard-menu {
    /* Puedes añadir estilos generales aquí si es necesario */
}

/* Estilo para cada elemento (fila) del menú */
.dashboard-menu .kt-svg-icon-list-item-wrap {
    margin-bottom: 4px !important; /* Espacio entre los botones del menú (más reducido) */
    border-radius: 8px !important; /* Bordes redondeados para cada botón */
    transition: background-color 0.2s ease-in-out; /* Transición suave para el hover */
    padding: 12px !important; /* Relleno interno para hacer los botones más grandes */
}

/* Estilo para el enlace dentro de cada elemento */
.dashboard-menu .kt-svg-icon-list-item-wrap a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important; /* Quitar el subrayado de los enlaces */
    color: #718096 !important; /* Color del texto por defecto (gris secundario) */
    font-weight: 500 !important; /* Grosor de la fuente */
    width: 100%; /* Asegura que el enlace ocupe todo el espacio */
}

/* Estilo específico para el texto del menú */
.dashboard-menu .kt-svg-icon-list-item-wrap .kt-svg-icon-list-text {
    color: #718096 !important; /* Asegura que el texto tenga el color correcto */
    font-size: 14px !important; /* Ajusta el tamaño del texto del menú */
}

/* Estilo específico para el ícono del menú */
.dashboard-menu .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single svg {
    color: #718096 !important; /* Asegura que el ícono tenga el color correcto */
    width: 20px; /* Tamaño del ícono */
    height: 20px;
}

/* --- Estilos para el estado HOVER (cuando el ratón está encima) --- */

.dashboard-menu .kt-svg-icon-list-item-wrap:hover {
    background-color: #F0F0F8 !important; /* Color de fondo gris claro al pasar el ratón */
}

.dashboard-menu .kt-svg-icon-list-item-wrap:hover a,
.dashboard-menu .kt-svg-icon-list-item-wrap:hover .kt-svg-icon-list-text,
.dashboard-menu .kt-svg-icon-list-item-wrap:hover .kt-svg-icon-list-single svg {
    color: #5A55E0 !important; /* Cambia el color del texto e ícono al color primario */
}


/* --- Estilos para el elemento ACTIVO (página actual) --- */
/* Para que esto funcione, añade la clase "active-link" al bloque del ítem de lista específico */

.dashboard-menu .kt-svg-icon-list-item-wrap.active-link {
    background-color: #5A55E0 !important; /* Color de fondo primario */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* Sombra sutil */
}

.dashboard-menu .kt-svg-icon-list-item-wrap.active-link a,
.dashboard-menu .kt-svg-icon-list-item-wrap.active-link .kt-svg-icon-list-text,
.dashboard-menu .kt-svg-icon-list-item-wrap.active-link .kt-svg-icon-list-single svg {
    color: #FFFFFF !important; /* Color del texto e ícono en blanco */
    font-weight: 600 !important;
}