/*
Theme Name: Hub Child
Theme URI: http://hub.liquid-themes.com/
Author: Liquid Themes
Author URI: https://themeforest.net/user/liquidthemes
Template: hub
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Text Domain: hub-child
Tags: responsive, retina, rtl-language-support, blog, portfolio, custom-colors, live-editor
*/

/* ============================================================
   OMEGA SUR — child theme styles
   Fuente única: Cairo (self-hosted) — Regular 400 / SemiBold 600 / Bold 700
   ============================================================ */
.grecaptcha-badge {
    visibility: hidden;
}

a {
  outline: none !important;
}

#seccion-espacio-libre {
  background: #F1F4F4;
}

#logo-icon-head>a>span>img {
  width: 211px;
  height: 67px;
}


.whatsapp-link-head {
  width: 173px;
  height: 34px;
  background: #F26178;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font: normal normal 600 18px/31px Cairo;
  letter-spacing: 0px;
  color: #FFFFFF;
}

.whatsapp-link-head:hover {
  color: #FFFFFF;
}

.whatsapp-icon-head {
  width: 21px;
  height: 21px;
}

.btn-wpp-head-content {
  display: flex;
  align-items: center;
}


#header-omega>div {
  justify-content: space-between;
}


@media only screen and (min-width: 900px) {

  #menu-head-content .menu-item>a {
    font: normal normal 600 18px/31px Cairo;
    letter-spacing: 0px;
  }

  .espacio-paso-num {
    width: 45px;
    height: 45px;
    font-size: 21px;
  }

  #seccion-soluciones .btn-primary.soluciones-boton {
    width: 325px;
    height: 50px;
    background: #F26178 0% 0% no-repeat padding-box;
    border-radius: 30px;
    padding: 0;
  }

  #seccion-soluciones .soluciones-card {
    padding-inline: 50px;
  }

  #seccion-soluciones>div>div>div>div>div>div>div>div>div>div>div:nth-child(2)>ul {
    margin-bottom: 68px;
  }

  #seccion-soluciones>div>div>div>div>div>div>div>div>div>div>div:nth-child(2)>p.soluciones-card-desc.descripcion-texto {
    margin-bottom: 40px;
  }

  #seccion-soluciones>div>div>div>div>div>div>div>div>div>div>div>p.soluciones-card-servicios.descripcion-texto {
    max-width: 20rem;
    margin-bottom: 20px;
  }

  #nuestro-contacto {
    bottom: 60rem;
  }

  #nuestros-servicios,
  #quienes-somos-y-porque {
    bottom: 8rem;
  }


  .rubros-card {
    width: 190px;
    height: 153px;
    padding-block: 16px;
    padding-inline: 20px;
  }

  #seccion-rubros>div.ld-container.container-fluid .rubros-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 52rem;
    margin-inline: auto;
  }

  #footer-principal .footer-inner{
padding-bottom: 7rem;
  }

  #footer-principal .footer-inner > div.footer-col.footer-col-nav{
gap: 1px !important;
  }

}

#seccion-servicios {
  background: #F1F4F4;
}

.soluciones-card-item {
  border-bottom: none !important;
}

#seccion-soluciones .soluciones-card-item {
  padding-bottom: 0;
}


/* ---------------------------- FOOTER RESPONSIVE --------------------- */

/* VISTA RESPONSIVE GENERAL */
@media only screen and (max-width: 900px) {
  .footer-inner {
    flex-wrap: wrap;
    justify-content: center;
    padding: 40px 20px;
    gap: 40px;
  }

  .footer-col-marca,
  .footer-col-contacto,
  .footer-col-nav {
    flex: 1 1 100%;
    align-items: center;
    text-align: center;
  }

  .footer-contacto-item {
    justify-content: center;
  }

  .footer-col-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }


  .footer-col.footer-col-marca {
    align-items: flex-start !important;
  }

  .footer-banderas {
    margin-left: 0 !important;
    width: 8rem;
  }

  .footer-col.footer-col-contacto {
    align-items: flex-start !important;
  }

  #footer-principal>div>div>div>div>div>div>div>div>div.footer-credito {
    font: normal normal normal 18px/25px Cairo !important;
  }

}

/* VISTA MOBILE (en caso que sea necesario adaptar elementos que no se vea bien general en 900px) */
@media only screen and (max-width: 700px) {
  .footer-inner {
    padding: 30px 20px;
    gap: 30px;
  }

  .footer-col-nav {
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    gap: 15px;
  }

  #seccion-soluciones .btn-primary.soluciones-boton {
    font-size: 14px;
    margin-top: 12px;
  }

  .btn-primary {
    width: 16rem !important;
    padding-inline: 0;
    padding-block: 12px;
  }

  .servicios-card-icono {
    margin-bottom: 12px !important;
  }

  .servicios-card-titulo {
    margin-bottom: 5px;
  }

  .servicios-card-desc.descripcion-texto {
    line-height: 21px;
  }

  .servicios-grid {
    gap: 25px 15px !important;
  }

  #seccion-espacio-libre .espacio-paso-texto {
    text-align: left;
  }

}

/* VISTA TABLET (en caso que sea necesario adaptar elementos que no se ven bien del traspaso de mobile a tablet) */
@media (min-width: 715px) and (max-width: 1000px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-evenly;
  }

  .footer-col-marca,
  .footer-col-contacto {
    flex: 0 0 45%;
  }

  /* El nav hereda el 100% del query de 900px, acomodándose perfectamente debajo en fila */


}

/* y estas son para tablet horizontal: */
@media (min-width: 1180px) and (max-width: 1290px) and (orientation: landscape) {
  .footer-inner {
    padding: 50px 30px;
  }

  .footer-col-contacto {
    flex: 0 0 400px;
    /* Evita desbordes si el contenedor se achica un poco */
  }
}



.ocultar {
  display: none !important;
}


.ancla {
  visibility: hidden;
  position: relative;
}


.grecaptcha-badge {
  visibility: hidden;
}

html {
  scroll-behavior: smooth;
}

.footer-credito {
  font: normal normal normal 20px/37px Cairo !important;
  letter-spacing: 0px !important;
  color: #003595 !important;
  background: white !important;
}

.footer-credito a {
  color: #003595 !important;
  font-weight: 900 !important;
}

.btn-primary {
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 25px -8px var(--color-rosa) !important;
  filter: brightness(1.1) !important;
}

.btn-primary:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 4px 10px -5px var(--color-rosa) !important;
  filter: brightness(1) !important;
}

.footer-social {
  display: none;
}

/* ANIMACIONES RE COPADAS RE NECESARIAS PORQUE AL CLIENTE LE ENCANTA Y QUIERE ANIMACIONES  RE COPADAS Y RE NECESARIAS */

@media (min-width: 900px) {
  
    /* 1. Preparación de la tarjeta base */
    .servicios-card {
        position: relative; /* Necesario para el efecto de luz */
        overflow: hidden; /* Evita que el brillo se salga de la tarjeta */
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        z-index: 1;
        background-color: var(--color-blanco, #ffffff); /* Ajusta si tu fondo es otro */
    }

    /* 2. La magia en la Tarjeta al hacer Hover */
    .servicios-card:hover {
        /* Se levanta MUCHO y se agranda un poco */
        transform: translateY(-15px) scale(1.05); 
        
        /* Sombra profunda + un glow con tu color rosa */
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 
                    0 0 20px rgba(255, 105, 180, 0.3); /* Cambia el RGB del rosa si es necesario */
        z-index: 10;
        border-color: var(--color-rosa);
    }

    /* 3. El rayo de luz que cruza (Efecto Sweep) */
    .servicios-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-25deg);
        transition: all 0.6s ease;
        z-index: 2;
        pointer-events: none; /* Para que no interfiera con el click */
    }

    .servicios-card:hover::before {
        /* Animamos el rayo de luz de izquierda a derecha */
        left: 150%; 
        transition: all 0.8s ease;
    }

    /* 4. El Ícono se vuelve loco (Efecto rebote) */
    .servicios-card .servicios-card-icono {
        /* Usamos una curva de bezier con rebote (bounce) */
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
        position: relative;
        z-index: 3;
    }

    .servicios-card:hover .servicios-card-icono {
        /* Crece, se mueve hacia arriba y gira un poco */
        transform: scale(1.25) translateY(-10px) rotate(8deg);
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2));
    }

    /* 5. Efecto Parallax sutil en los textos */
    .servicios-card .servicios-card-titulo,
    .servicios-card .servicios-card-desc {
        transition: all 0.4s ease;
        position: relative;
        z-index: 3;
    }

    .servicios-card:hover .servicios-card-titulo {
        transform: translateY(-4px); /* Flota un poquito */
        color: var(--color-rosa); /* El título cambia al color principal */
    }

    .servicios-card:hover .servicios-card-desc {
        transform: translateY(-2px);
    }
}

@media (min-width: 900px) {

    /* 1. Preparamos el contenedor para el 3D */
    .espacio-col-imagen {
        perspective: 1000px; /* Da la profundidad para que el giro se note */
        transform-style: preserve-3d;
    }

    /* 2. Aplicamos la animación infinita a la imagen */
    .espacio-col-imagen .espacio-imagen-foto {
        transform-origin: center center;
        /* La animación dura 6 segundos, entra y sale suavemente, y se repite para siempre */
        animation: levitacion3D 6s ease-in-out infinite; 
    }

    /* 3. Creamos los fotogramas clave (Keyframes) de la levitación */
    @keyframes levitacion3D {
        0% {
            /* Estado inicial: Abajo, ligera rotación hacia un lado */
            transform: translateY(0px) rotateY(-2deg) rotateX(1deg);
            filter: drop-shadow(10px 15px 15px rgba(0, 0, 0, 0.08));
        }
        50% {
            /* Mitad del tiempo: Flota hacia arriba, cambia el ángulo de rotación */
            transform: translateY(-18px) rotateY(4deg) rotateX(-2deg);
            /* La sombra se hace más grande y difusa porque está "más lejos" del fondo */
            filter: drop-shadow(20px 30px 25px rgba(0, 0, 0, 0.18));
        }
        100% {
            /* Vuelve exactamente al estado inicial para que el bucle sea perfecto */
            transform: translateY(0px) rotateY(-2deg) rotateX(1deg);
            filter: drop-shadow(10px 15px 15px rgba(0, 0, 0, 0.08));
        }
    }
    
    /* (Opcional) Dejamos solo el detalle sutil de la flechita del botón de WhatsApp */
    .espacio-boton img {
        transition: transform 0.3s ease;
    }
    .espacio-boton:hover img {
        transform: translateX(5px);
    }
}


@media (min-width: 900px) {

    /* --- 1. La Tarjeta Base --- */
    .porque-card {
        position: relative;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow: hidden; /* Fundamental para que la línea inferior no se escape */
        border-radius: 12px; /* Curvatura moderna por si no la tenías */
        padding-bottom: 5px; /* Pequeño espacio para la línea que va a aparecer */
    }

    /* --- 2. Levite y Sombra (Hover) --- */
    .porque-card:hover {
        /* Se levanta con elegancia */
        transform: translateY(-12px);
        /* Sombra amplia pero muy suave (opacity 0.08) */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    }

    /* --- 3. La Línea Mágica Inferior --- */
    .porque-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0%; /* Arranca invisible (ancho 0) */
        height: 4px;
        background-color: var(--color-rosa);
        transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .porque-card:hover::after {
        /* Al hacer hover, se despliega hacia los costados ocupando el 100% */
        width: 100%;
    }

    /* --- 4. El Ícono que resalta --- */
    .porque-card-icono {
        /* Nuestro viejo y confiable rebote */
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    }

    .porque-card:hover .porque-card-icono {
        /* Crece un 15% y flota hacia arriba */
        transform: scale(1.15) translateY(-8px);
        /* Emite un brillo suave (ajustá el RGBA si tu rosa es más oscuro/claro) */
        filter: drop-shadow(0 10px 15px rgba(255, 105, 180, 0.3)); 
    }

    /* --- 5. Micro-interacción en el Texto --- */
    .porque-card-titulo {
        transition: all 0.3s ease;
    }

    .porque-card:hover .porque-card-titulo {
        color: var(--color-rosa);
        /* Se desliza un poquito a la derecha, un truco UI para guiar el ojo del lector */
        transform: translateX(6px); 
    }
}

@media (min-width: 900px) {

    /* --- 1. Preparando la Tarjeta --- */
    .rubros-card {
        /* Transición súper fluida para todos los cambios */
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        cursor: pointer; /* Invita al usuario a interactuar */
        position: relative;
        overflow: hidden;
    }

    /* --- 2. Efecto Neón y Elevación (Hover) --- */
    .rubros-card:hover {
        /* La tarjeta flota hacia arriba */
        transform: translateY(-10px);
        
        /* El borde se enciende con tu color de marca */
        border-color: var(--color-rosa);
        
        /* Efecto Glassmorphism: Un fondo blanquecino súper sutil para dar volumen */
        background-color: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(4px); /* Difumina ligeramente lo que haya detrás */
        
        /* Magia pura: Sombra oscura hacia afuera (profundidad) y sombra rosa hacia adentro (brillo) */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 
                    inset 0 0 20px rgba(255, 105, 180, 0.15); /* Cambiar el RGB si tu rosa es distinto */
    }

    /* --- 3. El Ícono Iluminado --- */
    .rubros-card .rubros-card-icono {
        /* Mantenemos el efecto rebote que es nuestra firma de calidad */
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .rubros-card:hover .rubros-card-icono {
        /* Crece y salta hacia arriba */
        transform: scale(1.2) translateY(-6px);
        
        /* El ícono proyecta luz hacia abajo */
        filter: drop-shadow(0 8px 12px rgba(255, 105, 180, 0.6));
    }

    /* --- 4. El Texto (Efecto Elástico) --- */
    .rubros-card .rubros-card-label {
        transition: transform 0.4s ease, color 0.3s ease;
    }

    .rubros-card:hover .rubros-card-label {
        /* Mientras el ícono sube, el texto baja un poquito creando un efecto elástico genial */
        transform: translateY(4px);
        /* Opcional: Dale un brillo extra al texto para que resalte más sobre el fondo oscuro */
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }
}