/**
 * Estilos personalizados para WPBakery Page Builder
 * Estilos específicos para elementos personalizados y ajustes de VC
 */

/* Ajustes generales para elementos de WPBakery */
.vc_row {
    margin-left: 0;
    margin-right: 0;
}

.vc_column_container {
    padding-left: 15px;
    padding-right: 15px;
}

/* Asegurar que las imágenes responsive funcionen */
.vc_single_image-wrapper img {
    max-width: 100%;
    height: auto;
}

/* Estilos para elementos personalizados de Vania Soza */
.vania-hero-section,
.vania-services-grid,
.vania-testimonials-section {
    position: relative;
}

/* Ajustes para botones en WPBakery */
.vc_btn3-container .vc_btn3 {
    transition: all 0.3s ease;
}

/* Ajustes para textos editables */
.vc_custom_heading {
    word-wrap: break-word;
}

/* Asegurar que los sliders funcionen correctamente */
.vc_row[data-vc-full-width] {
    overflow: visible;
}

/* Ajustes para columnas en móvil */
@media (max-width: 768px) {
    .vc_col-sm-12 {
        width: 100%;
    }
}

/* Estilos para overlays en secciones con imagen de fondo */
.has-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.has-overlay > * {
    position: relative;
    z-index: 2;
}

/* Ajustes para formularios de contacto */
.wpcf7-form {
    max-width: 100%;
}

.wpcf7-form-control {
    width: 100%;
}

/* Ajustes para animaciones WOW.js */
.wow {
    visibility: hidden;
}

/* Ajustes para elementos con parallax */
.vc_parallax {
    position: relative;
    overflow: hidden;
}

/* Asegurar que los iconos de FontAwesome se muestren correctamente */
/* Nota: FontAwesome 7 maneja automáticamente las fuentes con variables CSS */
/* No es necesario forzar font-family ya que el CSS de FontAwesome lo hace */

/* Estilos para Grid de Servicios - Asegurar que coincida con el HTML original */
/* Hacer que todas las cajas tengan la misma altura */
.ht-services-wrapper .row {
    display: flex;
    flex-wrap: wrap;
}

.ht-services-wrapper .col-lg-4,
.ht-services-wrapper .col-md-6,
.ht-services-wrapper .col-sm-12 {
    display: flex;
}

.ht-services-items {
    padding: 40px 30px !important;
    border-radius: 20px;
    background: var(--ht-theme-color-5);
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    .ht-services-items {
        padding: 15px !important;
    }
}

.ht-services-items .icon {
    background: var(--ht-theme-color-3) !important;
    width: 80px !important;
    height: 80px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.4s ease-in-out;
    margin-bottom: 0 !important;
}

.ht-services-items .icon img {
    width: auto !important;
    height: auto !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain;
}

/* Margen entre icono y título */
.ht-services-items .title {
    margin-top: 50px !important;
    margin-bottom: 0 !important;
    text-transform: uppercase !important;
    position: relative;
    overflow: hidden;
    z-index: 9;
}

/* Asegurar que el h3 dentro del título tenga los estilos correctos */
.ht-services-items a .title,
.ht-services-items .title,
.ht-services-items h3.title {
    margin-top: 50px !important;
    margin-bottom: 0 !important;
    text-transform: uppercase !important;
    position: relative;
    overflow: hidden;
    z-index: 9;
    font-size: 28px !important;
    line-height: 121% !important;
    letter-spacing: -0.56px !important;
    font-family: "Oswald", sans-serif !important;
    font-weight: 600 !important;
    color: var(--ht-heading-color) !important;
    padding: 0 !important;
}

/* Descripción con margen y flex-grow para empujar contenido hacia arriba */
.ht-services-items .desc {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    flex-grow: 1;
}

/* Asegurar que los enlaces dentro de servicios no modifiquen el estilo del título */
.ht-services-items a {
    text-decoration: none !important;
    color: inherit !important;
}

.ht-services-items a:hover {
    color: inherit !important;
}

@media (max-width: 575px) {
    .ht-services-items a .title,
    .ht-services-items .title,
    .ht-services-items h3.title {
        font-size: 25px !important;
    }
}

/* Estilos para Sección About - "Lo que me define" */
.about-features {
    margin-top: 30px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.feature-item i {
    color: var(--ht-theme-color-2);
    font-size: 18px;
    margin-top: 3px;
    flex-shrink: 0;
}

.feature-item span {
    color: var(--ht-text-color);
    font-size: 16px;
    line-height: 1.6;
}

.ht-services-items .desc {
    margin-top: 10px !important;
    font-size: inherit !important;
}

.ht-services-items .desc p {
    margin-top: 10px !important;
    font-size: inherit !important;
}

/* Ajustes para elementos con hover effects */
.vc_element-hover-effect {
    transition: all 0.3s ease;
}

/* Ajustes para grids responsivos */
@media (max-width: 991px) {
    .vc_col-lg-4 {
        width: 50%;
    }
}

@media (max-width: 767px) {
    .vc_col-lg-4,
    .vc_col-md-6 {
        width: 100%;
    }
}

/* Ajustes para elementos con background video */
.vc_video-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Asegurar que los elementos personalizados tengan el z-index correcto */
.vania-custom-element {
    position: relative;
    z-index: 1;
}

/* Ajustes para elementos con gradientes */
.vc_custom_gradient {
    background-clip: padding-box;
}

/* Ajustes para elementos con sombras */
.vc_custom_shadow {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Ajustes para elementos con bordes redondeados */
.vc_custom_border_radius {
    border-radius: 10px;
    overflow: hidden;
}

/* Ajustes para elementos con efectos de hover */
.vc_element-hover-lift:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* Ajustes para elementos con efectos de escala */
.vc_element-hover-scale:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Ajustes para elementos con efectos de opacidad */
.vc_element-hover-fade:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Ajustes para elementos con efectos de rotación */
.vc_element-hover-rotate:hover {
    transform: rotate(5deg);
    transition: transform 0.3s ease;
}

/* Ajustes para elementos con efectos de brillo */
.vc_element-hover-glow:hover {
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.5);
    transition: box-shadow 0.3s ease;
}

/* Ajustes para elementos con efectos de desvanecimiento */
.vc_element-hover-blur:hover {
    filter: blur(2px);
    transition: filter 0.3s ease;
}

/* Ajustes para elementos con efectos de contraste */
.vc_element-hover-contrast:hover {
    filter: contrast(1.2);
    transition: filter 0.3s ease;
}

/* Ajustes para elementos con efectos de saturación */
.vc_element-hover-saturate:hover {
    filter: saturate(1.5);
    transition: filter 0.3s ease;
}

/* Ajustes para elementos con efectos de sepia */
.vc_element-hover-sepia:hover {
    filter: sepia(0.5);
    transition: filter 0.3s ease;
}

/* Ajustes para elementos con efectos de inversión */
.vc_element-hover-invert:hover {
    filter: invert(0.1);
    transition: filter 0.3s ease;
}

/* Ajustes para elementos con efectos de brillo */
.vc_element-hover-brightness:hover {
    filter: brightness(1.2);
    transition: filter 0.3s ease;
}

/* Ajustes para elementos con efectos de oscurecimiento */
.vc_element-hover-darken:hover {
    filter: brightness(0.8);
    transition: filter 0.3s ease;
}

/* Ajustes para elementos con efectos de enfoque */
.vc_element-hover-focus:hover {
    filter: blur(0px);
    transition: filter 0.3s ease;
}

/* Ajustes para elementos con efectos de desenfoque */
.vc_element-hover-unfocus:hover {
    filter: blur(3px);
    transition: filter 0.3s ease;
}

/* Ajustes para elementos con efectos de movimiento */
.vc_element-hover-move:hover {
    transform: translateX(10px);
    transition: transform 0.3s ease;
}

/* Ajustes para elementos con efectos de rebote */
.vc_element-hover-bounce:hover {
    animation: bounce 0.5s ease;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Ajustes para elementos con efectos de pulso */
.vc_element-hover-pulse:hover {
    animation: pulse 1s ease infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Ajustes para elementos con efectos de rotación continua */
.vc_element-hover-spin:hover {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Ajustes para elementos con efectos de temblor */
.vc_element-hover-shake:hover {
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

/* Ajustes para elementos con efectos de balanceo */
.vc_element-hover-swing:hover {
    animation: swing 1s ease;
}

@keyframes swing {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    75% {
        transform: rotate(-10deg);
    }
}

/* Ajustes para elementos con efectos de deslizamiento */
.vc_element-hover-slide:hover {
    transform: translateX(20px);
    transition: transform 0.3s ease;
}

/* Ajustes para elementos con efectos de deslizamiento vertical */
.vc_element-hover-slide-vertical:hover {
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

/* Ajustes para elementos con efectos de deslizamiento diagonal */
.vc_element-hover-slide-diagonal:hover {
    transform: translate(20px, 20px);
    transition: transform 0.3s ease;
}

/* Ajustes para elementos con efectos de deslizamiento inverso */
.vc_element-hover-slide-reverse:hover {
    transform: translateX(-20px);
    transition: transform 0.3s ease;
}

/* Ajustes para elementos con efectos de deslizamiento vertical inverso */
.vc_element-hover-slide-vertical-reverse:hover {
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

/* Ajustes para elementos con efectos de deslizamiento diagonal inverso */
.vc_element-hover-slide-diagonal-reverse:hover {
    transform: translate(-20px, -20px);
    transition: transform 0.3s ease;
}

/* Hero Banner - Orden en móvil: imagen de la persona antes del texto (desde que aparece el menú móvil) */

/* Ocultar imagen desktop en móvil */
@media (max-width: 991.98px) {
    .ht-hero-img-desktop {
        display: none !important;
    }
    
    /* Mostrar imagen móvil */
    .ht-hero-img-mobile-first {
        display: block !important;
        margin-bottom: 30px !important;
        margin-top: -250px !important;
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        top: auto !important;
        z-index: 1;
        width: 100% !important;
        text-align: center;
        max-width: 100% !important;
    }
    
    .ht-hero-img-mobile-first img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        object-fit: contain;
        position: relative !important;
    }
}

/* Ocultar imagen móvil en desktop */
@media (min-width: 992px) {
    .ht-hero-img-mobile-first {
        display: none !important;
    }
    
    .ht-hero-img-desktop {
        display: block !important;
    }
}

/* Ajustes adicionales para móvil pequeño */
@media (max-width: 575px) {
    .ht-hero-img-mobile-first {
        margin-bottom: 20px !important;
        margin-top: -80px !important;
    }
    
    .ht-hero-img-mobile-first img {
        max-width: 80% !important;
    }
}

/* Ajuste de margen para CTA de servicios (dentro de la sección de servicios)
   (el valor base ya se ajustó en custom.css, aquí solo se deja por si en el futuro
   se necesita un ajuste específico dentro de .ht-services-area) */
.ht-services-area .services-cta {
    /* margin-top: 30px !important; */
}