/**
 * Dalton Hover Image Element - CSS Ajustado
 * Con textos visibles por defecto y mejor gestión de crecimiento proporcional
 */

.dalton-hover-image {
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
    width: 100%; /* Asegurar ancho completo */
    display: block; /* Importante para que ocupe todo el ancho disponible */
}

/* Quitar aspect-ratio fijo y usar auto-altura cuando no hay altura personalizada */
.dalton-hover-image:not(.dalton-custom-height) {
    height: auto;
    min-height: 250px; /* Altura mínima para evitar que sea demasiado pequeño */
}

/* Solo aplicar aspect-ratio cuando NO tiene altura personalizada */
.dalton-hover-image:not(.dalton-custom-height) {
    aspect-ratio: 16/9;
}

.dalton-hover-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block; /* Asegurar que ocupe todo el ancho disponible */
}

.dalton-hover-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translateZ(0); /* Mejora rendimiento de animaciones */
    display: block; /* Asegurar que ocupe todo el ancho disponible */
}

.dalton-hover-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* Valor por defecto, se sobrescribirá con el valor personalizado */
    display: block;
    transition: transform 0.4s ease;
    backface-visibility: hidden; /* Evita parpadeos en la transición */
    min-width: 100%; /* Asegurar que la imagen como mínimo ocupe todo el ancho */
    min-height: 100%; /* Asegurar que la imagen como mínimo ocupe toda la altura */
}

.dalton-hover-image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #ffffff;
}

.dalton-hover-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Cambiado a 0 para que sea invisible inicialmente */
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.4s ease;
}

.dalton-hover-image-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    z-index: 2;
    box-sizing: border-box;
}

/* Estilos de texto */
.dalton-hover-image-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.dalton-hover-image-subtitle {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Animaciones - Modificadas para mostrar texto por defecto */

/* Efecto Fade - Visible inicialmente */
.dalton-hover-image-fade .dalton-hover-image-title,
.dalton-hover-image-fade .dalton-hover-image-subtitle {
    opacity: 1; /* Cambiado a 1 para ser visible inicialmente */
    transition: opacity 0.4s ease;
}

/* Efecto Slide Up - Visible inicialmente */
.dalton-hover-image-slide-up .dalton-hover-image-title,
.dalton-hover-image-slide-up .dalton-hover-image-subtitle {
    opacity: 1; /* Cambiado a 1 para ser visible inicialmente */
    transform: translateY(0); /* Cambiado a 0 para estar en posición inicial */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Efecto Zoom - Visible inicialmente */
.dalton-hover-image-zoom .dalton-hover-image-title,
.dalton-hover-image-zoom .dalton-hover-image-subtitle {
    opacity: 1; /* Cambiado a 1 para ser visible inicialmente */
    transform: scale(1); /* Cambiado a 1 para estar en tamaño normal inicial */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Estados Hover - Mantienen animaciones al hacer hover */
.dalton-hover-image:hover .dalton-hover-image-overlay {
    opacity: 1;
}

.dalton-hover-image:hover .dalton-hover-image-img {
    transform: scale(1.05);
}

/* Animación Fade en Hover - Mantiene opacidad */
.dalton-hover-image:hover .dalton-hover-image-fade .dalton-hover-image-title,
.dalton-hover-image:hover .dalton-hover-image-fade .dalton-hover-image-subtitle,
.dalton-hover-image-fade:hover .dalton-hover-image-title,
.dalton-hover-image-fade:hover .dalton-hover-image-subtitle {
    opacity: 1;
}

/* Animación Slide Up en Hover - Mantiene transformación */
.dalton-hover-image:hover .dalton-hover-image-slide-up .dalton-hover-image-title,
.dalton-hover-image:hover .dalton-hover-image-slide-up .dalton-hover-image-subtitle,
.dalton-hover-image-slide-up:hover .dalton-hover-image-title,
.dalton-hover-image-slide-up:hover .dalton-hover-image-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* Animación Zoom en Hover - Mantiene escala */
.dalton-hover-image:hover .dalton-hover-image-zoom .dalton-hover-image-title,
.dalton-hover-image:hover .dalton-hover-image-zoom .dalton-hover-image-subtitle,
.dalton-hover-image-zoom:hover .dalton-hover-image-title,
.dalton-hover-image-zoom:hover .dalton-hover-image-subtitle {
    opacity: 1;
    transform: scale(1);
}

/* Asegurar que siempre se expande al tamaño completo en todos los contenedores */
.wpb_wrapper .dalton-hover-image,
.vc_column-inner .dalton-hover-image,
.vc_column .dalton-hover-image,
.vc_row .dalton-hover-image {
    display: block;
    width: 100%;
}

/* Forzar la imagen a expandirse junto con su contenedor */
.dalton-custom-height .dalton-hover-image-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ajustes Responsive */
@media (max-width: 767px) {
    /* Solo aplicar relación de aspecto cuando NO tiene altura personalizada */
    .dalton-hover-image:not(.dalton-custom-height) {
        /* Modificar la relación de aspecto para tablets - más cuadrado */
        aspect-ratio: 4/3;
    }
    
    .dalton-hover-image-title {
        font-size: 20px;
    }
    
    .dalton-hover-image-subtitle {
        font-size: 14px;
    }
    
    .dalton-hover-image-content {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    /* Solo aplicar relación de aspecto cuando NO tiene altura personalizada */
    .dalton-hover-image:not(.dalton-custom-height) {
        /* Relación de aspecto casi cuadrada para móviles */
        aspect-ratio: 1/1;
        margin-bottom: 20px; /* Reducir el margen inferior para móviles */
    }
    
    /* La altura personalizada para móviles se aplicará mediante el estilo inline */
    
    .dalton-hover-image-title {
        font-size: 18px;
    }
    
    .dalton-hover-image-subtitle {
        font-size: 13px;
    }
    
    .dalton-hover-image-content {
        padding: 10px;
    }
}