/* ==========================
   HERO / BANNER CÁPSULA - MEJORADO Y RESPONSIVO
========================== */
.hero-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
    height: auto;
    border-radius: 40px;
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
    background-color: #03346e; /* Color de respaldo por si una imagen no carga */
}

/* Efecto al pasar el mouse */
.hero-section:hover {
    transform: translateY(-5px);
}

/* ==========================================
   AJUSTE PARA MÓVILES (Celulares)
   ========================================== */
@media (max-width: 768px) {
    .hero-section {
        /* Reducimos la altura mínima para que no ocupe toda la pantalla del cel */
        min-height: 200px;

        /* Reducimos un poco el redondeado para que encaje mejor en pantallas angostas */
        border-radius: 20px;

        /* Centramos el contenido para que se vea mejor en vertical */
        justify-content: center;
        text-align: center;
        padding: 40px 20px;
    }

    /* Si tienes un H1 dentro del Hero, este ajuste es vital */
    .hero-section h1 {
        font-size: 1.8rem !important; /* Texto más pequeño en móvil */
        position: static !important; /* Quitamos posiciones absolutas */
        padding-left: 0 !important;
    }
}

.btn-light {
    background-color: #ffffff !important;
    color: #03346e !important;
    border: none;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem !important;
    padding: 12px 35px !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.btn-light:hover {
    background-color: #ffffff !important;
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    color: #007bff !important; /* Un ligero cambio de azul al hover */
}

/* Añadimos un brillo sutil que recorre el botón (opcional pero le da mucha vida) */
.btn-light {
    position: relative;
    overflow: hidden;
}

.btn-light::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(30deg);
    transition: all 0.5s;
    opacity: 0;
}

.btn-light:hover::after {
    left: 120%;
    opacity: 1;
}
/* ==========================
   TARJETAS DE PRECIOS - MEJORADO
========================== */
.pricing-card {
    padding: 2.5rem 1.5rem;
    border-radius: 20px !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    background: #fff;
    text-align: left;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra suave inicial */
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.12) !important;
}

.pricing-card .icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 88px;
    max-height: 100px;
    margin-bottom: 1.25rem !important;
    overflow: hidden;
}

.pricing-icon {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 88px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.pricing-card:hover .pricing-icon {
    transform: scale(1.05);
}

/* Tamaños por paquete (1 / 3 / 10 procesos) */
.pricing-card .pricing-icon--process-1 {
    max-width: 95px;
    max-height: 80px;
}
.pricing-card .pricing-icon--process-3 {
    max-width: 100px;
    max-height: 82px;
}
.pricing-card .pricing-icon--process-10 {
    max-width: 115px;
    max-height: 88px;
}

/* Legacy: clases usadas antes del loop dinámico */
.lupa-1 {
    width: 95px;
    max-width: 95px;
    max-height: 80px;
    margin-top: 0;
}
.lupa-3 {
    width: 100px;
    max-width: 100px;
    max-height: 82px;
    margin-top: -5px;
}
.lupa-10 {
    width: 115px;
    max-width: 115px;
    max-height: 88px;
    margin-top: 0;
}

/* Badges de ahorro */
.promo-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 20px;
    border-radius: 0 20px 0 15px;
    font-size: 0.8rem;
    font-weight: bold;
    font-style: italic;
    z-index: 2;
}

.pricing-table {
    border-top: 1px solid #f0f0f0;
    margin-top: 1.5rem;
}

.price-section .price-value {
    font-size: 3.8rem;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
}

.price-section .currency-symbol {
    font-size: 2.2rem;
    font-weight: 800;
    vertical-align: top;
}

/* BOTONES - COLOR SÓLIDO DESDE EL INICIO */
.btn-blue {
    background-color: #72c6e8 !important;
    color: white !important;
    border-radius: 50px;
    padding: 12px;
    border: none;
    width: 100%;
    transition: 0.3s ease;
    box-shadow: 0 4px 10px rgba(114, 198, 232, 0.3);
}

.btn-pink {
    background-color: #f5c2b1 !important;
    color: white !important;
    border-radius: 50px;
    padding: 12px;
    border: none;
    width: 100%;
    transition: 0.3s ease;
    box-shadow: 0 4px 10px rgba(245, 194, 177, 0.3);
}

.btn-dark-custom {
    background-color: #645569 !important;
    color: white !important;
    border-radius: 50px;
    padding: 12px;
    border: none;
    width: 100%;
    transition: 0.3s ease;
    box-shadow: 0 4px 10px rgba(100, 85, 105, 0.3);
}

/* HOVER DE BOTONES: Solo oscurecen un poco para dar feedback */
.btn-blue:hover {
    background-color: #5bb3d6 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(114, 198, 232, 0.5);
}
.btn-pink:hover {
    background-color: #e59d88 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(245, 194, 177, 0.5);
}
.btn-dark-custom:hover {
    background-color: #4f4354 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(100, 85, 105, 0.5);
}

/* COLORES TEMÁTICOS PARA TEXTO */
.text-blue-custom {
    color: #72c6e8 !important;
}
.text-pink-custom {
    color: #f5c2b1 !important;
}
.text-dark-custom {
    color: #645569 !important;
}

/* Mantener colores en símbolos de moneda */
.pricing-card.blue-theme .price-value,
.pricing-card.blue-theme .currency-symbol {
    color: #72c6e8;
}
.pricing-card.pink-theme .price-value,
.pricing-card.pink-theme .currency-symbol {
    color: #f5c2b1;
}
.pricing-card.dark-theme .price-value,
.pricing-card.dark-theme .currency-symbol {
    color: #645569;
}

/* ==========================
   FLUJO DE PROCESO (FLECHAS BLANCAS CON BORDE NEGRO)
========================== */
.ai-banner-container {
    background: linear-gradient(90deg, #000 0%, #03346e 50%, #000 100%);
    background-size: 200% auto;
    animation: shine-banner 3s linear infinite;
    padding: 12px;
    border: 2px solid #4dabf7;
    border-radius: 8px;
    display: inline-block;
    width: 100%;
    box-shadow: 0 4px 15px rgba(77, 171, 247, 0.2);
}

@keyframes shine-banner {
    to {
        background-position: 200% center;
    }
}

.ai-banner-text {
    color: white;
    font-weight: bold;
    letter-spacing: 3px;
    font-size: 1.2rem;
    margin: 0;
    text-shadow: 0 0 10px rgba(77, 171, 247, 0.5);
}

.process-flow-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 40px 0;
}

.process-box {
    background-color: #4dabf7;
    color: white;
    padding: 12px 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.85rem;
    font-weight: 600;
    width: 14.5%;
    min-height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.process-box:hover {
    transform: translateY(-5px);
    background-color: #03346e;
    border-color: #4dabf7;
    box-shadow: 0 10px 20px rgba(3, 52, 110, 0.2);
}

.shadow-glow {
    box-shadow: 0 0 25px rgba(77, 171, 247, 0.6);
    border: 1px solid #fff;
    animation: glow-pulse 2s infinite alternate;
}

@keyframes glow-pulse {
    from {
        box-shadow: 0 0 15px rgba(77, 171, 247, 0.4);
    }
    to {
        box-shadow: 0 0 30px rgba(77, 171, 247, 0.8);
    }
}

/* --- FLECHAS: RELLENO BLANCO CON ORILLAS NEGRAS --- */
.arrow {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #fff; /* Relleno Blanco */

    /* El truco: múltiples drop-shadows en 1px para crear el borde negro sólido */
    filter: drop-shadow(1px 0px 0px #000) drop-shadow(-1px 0px 0px #000)
        drop-shadow(0px 1px 0px #000) drop-shadow(0px -1px 0px #000);

    animation: arrow-move 2s infinite;
}

@keyframes arrow-move {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

/* ==========================
   COMPARATIVA - MEJORADO SIN MOVER NADA
========================== */
.comparison-list {
    list-style: none;
    padding: 0;
}

.comparison-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    /* Transición suave solo para el color y escala del icono */
    transition: color 0.3s ease;
}

/* El texto cambia ligeramente de color al pasar el mouse sin moverse un solo píxel */
.comparison-list li:hover {
    color: #000;
}

.icon {
    min-width: 24px;
    text-align: center;
    transition: transform 0.3s ease; /* Solo animamos el icono */
    display: inline-block;
}

/* Al pasar el mouse, el emoji crece un poco pero el texto se queda en su sitio */
.comparison-list li:hover .icon {
    transform: scale(1.3);
}

.icon.success {
    color: #28a745;
    font-weight: bold;
    /* Un brillo sutil que no ocupa espacio físico */
    filter: drop-shadow(0 0 2px rgba(40, 167, 69, 0.4));
}

/* Estilo para los enlaces "ver" sin cambiar su tamaño */
.comparison-list li a {
    color: #03346e;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.comparison-list li a:hover {
    border-bottom-color: #03346e;
    color: #007bff;
}
/* ==========================
   MAPA SECCIÓN ANGOSTA - MEJORADO
========================== */
.map-section {
    background: #000; /* Negro puro para máximo contraste */
    padding: 50px 0;
    overflow: hidden;
    position: relative;
}

/* Un sutil resplandor azul de fondo para que la sección no sea un bloque negro plano */
.map-section::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        rgba(77, 171, 247, 0.1) 0%,
        rgba(0, 0, 0, 0) 70%
    );
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.overlap-left {
    margin-right: -80px;
    z-index: 10;
    position: relative;
}

.overlap-right {
    margin-left: -80px;
    z-index: 10;
    position: relative;
}

.map-img {
    max-height: 250px;
    width: auto;
    opacity: 0.6; /* Un poco más sutil al inicio */
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    filter: grayscale(100%) brightness(0.8); /* Inicia más integrado al negro */
    z-index: 1;
}

/* EFECTO "ENCENDIDO" AL PASAR EL MOUSE */
.map-img:hover {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%) brightness(1.1)
        drop-shadow(0 0 20px rgba(77, 171, 247, 0.4));
}

/* Mejoramos el texto "Ahora" para que resalte */
.text-info {
    color: #4dabf7 !important;
    text-shadow: 0 0 15px rgba(77, 171, 247, 0.5);
    transition: all 0.3s ease;
}

.map-section:hover .text-info {
    text-shadow: 0 0 25px rgba(77, 171, 247, 0.8);
}

/* ANIMACIONES ORIGINALES CON SUAVIDAD EXTRA */
.fade-in-left {
    animation: fadeInLeft 1.2s ease-out forwards;
}
.fade-in-right {
    animation: fadeInRight 1.2s ease-out forwards;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsivo impecable */
@media (max-width: 991px) {
    .map-section {
        padding: 40px 0;
    }
    .overlap-left,
    .overlap-right {
        margin: 0;
        padding: 15px;
        text-align: center !important;
    }
    .map-img {
        max-height: 180px;
    }
}

/* ==========================
   SECCIÓN DE CONTACTO - MEJORADO
========================== */
.contact-section {
    background-color: #ffffff;
    padding: 60px 0;
}

.contact-card {
    display: flex;
    align-items: center;
    padding: 30px 25px;
    border-radius: 25px;
    color: white;
    min-height: 150px;
    gap: 15px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    /* Sombra base para dar volumen */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.contact-card {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.contact-card:hover {
    transform: translateY(
        -5px
    ); /* Pequeño brinco hacia arriba al pasar el mouse */
}

/* Efecto al pasar el mouse: Elevación y Brillo */
.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Colores de las tarjetas con un ligero gradiente para que no se vean planas */
.card-blue {
    background: linear-gradient(135deg, #0061ed 0%, #0061ed 100%);
}
.card-pink {
    background: linear-gradient(135deg, #00aeef 0%, #4dabf7 100%);
}
.card-dark {
    background: linear-gradient(135deg, #58585a 0%, #4f4354 100%);
}

/* Brillo sutil en la esquina de la tarjeta al hover */
.contact-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 50%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.contact-card:hover::before {
    opacity: 1;
}

/* Control de tus imágenes de iconos (Mantengo tus 55px) */
.contact-img {
    width: 55px;
    height: auto;
    flex-shrink: 0;
    transition: transform 0.4s ease;
    z-index: 1; /* Para que esté por encima del brillo */
}

.contact-card:hover .contact-img {
    transform: scale(1.1) rotate(-5deg); /* El icono reacciona sutilmente */
}

.contact-text {
    z-index: 1;
}

.contact-text h5 {
    font-weight: 800; /* Un poco más de peso para resaltar */
    margin-bottom: 2px;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}

.contact-text p {
    margin-bottom: 0;
    font-size: 0.9rem;
    opacity: 0.95;
}

/* Ajuste para el texto largo de sugerencias */
.small-description {
    font-size: 0.78rem !important;
    line-height: 1.3;
    opacity: 0.85;
}

/* Responsivo */
@media (max-width: 767px) {
    .contact-card {
        min-height: auto;
        margin-bottom: 20px; /* Separación en móvil */
    }
}

/* ==========================================
   DISEÑO SECCIÓN CARACTERÍSTICAS - MEJORADO
   ========================================== */
.features-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.robot-banner {
    width: 100%;
    max-width: 1000px;
    border-radius: 25px; /* Un poco más redondeado */
    margin-bottom: 50px;
    box-shadow: 0 20px 40px rgba(3, 52, 110, 0.1); /* Sombra elegante */
    transition: transform 0.5s ease;
}

.robot-banner:hover {
    transform: scale(1.01); /* Efecto sutil de respiración */
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px; /* Un poco más de espacio entre items */
    padding-left: 20px;
    transition: all 0.3s ease;
}

.icon-wrapper img {
    width: 90px;
    height: auto;
    margin-right: 25px;
    flex-shrink: 0;
    /* Efecto de flotación para los iconos */
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.feature-item:hover .icon-wrapper img {
    transform: translateY(
        -5px
    ); /* El icono sube al pasar el mouse por el texto */
}

.feature-text h5 {
    color: #03346e;
    font-weight: 800; /* Más impacto en el título */
    font-size: 1.3rem;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.feature-text p {
    color: #555; /* Gris un poco más suave para lectura prolongada */
    font-size: 1rem;
    line-height: 1.6; /* Más aire entre líneas */
    margin-bottom: 0;
}

/* ==========================================
   CAJA DE SUGERENCIAS - ESTILO "FLOTANTE" (SIN CAJA VISIBLE)
   ========================================== */
.suggestions-box {
    margin-top: 40px;
    padding: 10px 0; /* Eliminamos padding excesivo para que no ocupe espacio visual */
    background-color: transparent; /* Caja invisible */
    border: none; /* Sin bordes */
    transition: all 0.3s ease;
}

/* El icono sigue reaccionando al pasar el mouse por el área */
.suggestions-box img {
    width: 65px;
    height: auto;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)); /* Sombra muy sutil */
}

/* El icono salta cuando pasas el mouse por el texto o la imagen */
.suggestions-box:hover img {
    transform: translateY(-8px) scale(1.1);
    filter: drop-shadow(0 10px 15px rgba(77, 171, 247, 0.2)) brightness(1.1);
}

.suggestions-title {
    font-weight: 700;
    color: #03346e;
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.4;
}

.suggestions-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #444;
    background: transparent; /* Aseguramos que no haya fondos */
    transition: transform 0.2s ease;
}

.suggestions-list li:hover {
    transform: translateX(8px);
    color: #000;
}

.suggestions-list li span {
    color: #28a745;
    margin-right: 12px;
    font-weight: bold;
    font-size: 1.1rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.suggestions-list li:hover span {
    transform: scale(1.2);
}

/* ==========================================
    DISEÑO SECCIÓN BENEFICIOS - HIRE4U PRO
   ========================================== */
.benefits-section {
    padding: 40px 0 !important;
    background-color: #ffffff;
}

.benefit-card {
    background: linear-gradient(135deg, #0061ed 0%, #00aeef 100%) !important;
    color: #ffffff !important;
    /* Padding reducido para que sea MENOS ALTA */
    padding: 25px 30px;
    border-radius: 30px !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Transición suave para todos los estados */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 97, 237, 0.1);
}

/* --- EFECTOS DE HOVER --- */

.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0, 97, 237, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.5);
}

/* El destello de luz diagonal (Pseudo-elemento) */
.benefit-card::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(30deg);
    transition: all 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.benefit-card:hover::after {
    left: 120%;
}

/* --- CONTENIDO INTERNO --- */

.benefit-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px; /* Espacio compacto */
    width: 100%;
    height: 75px; /* Altura optimizada para que sea menos alta */
    z-index: 2;
}

.benefit-img {
    max-width: 75px;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
    transition: transform 0.4s ease;
}

/* Animación de la imagen al hacer hover */
.benefit-card:hover .benefit-img {
    transform: scale(1.1) rotate(3deg);
}

.benefit-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.benefit-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 1 !important;
    margin-bottom: 20px;
    color: #ffffff !important;
    z-index: 2;
}

/* --- FOOTER --- */

.benefit-footer {
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

.benefit-footer i {
    margin-right: 6px;
    color: #ffffff !important;
}

/* ==========================
   FOOTER (AJUSTADO Y PULIDO)
========================== */
.footer {
    background-color: #151a1f !important;
    padding: 80px 0 30px 0;
    color: #ffffff;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer h6 {
    color: #ffffff;
    text-transform: uppercase; /* Look más corporativo */
    letter-spacing: 2px; /* Más aire entre letras */
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 14px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease; /* Transición completa */
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7); /* Texto un poco más tenue de base */
}

/* HOVER: El texto se ilumina y se mueve un poco a la derecha */
.footer-list li:hover {
    color: #ffffff;
    opacity: 1;
    transform: translateX(8px);
}

/* Iconos del footer */
.footer-list li i {
    font-size: 1.1rem;
    color: #67c5f7; /* Color de acento para los iconos */
    transition: transform 0.3s ease;
}

.footer-list li:hover i {
    transform: scale(1.2);
}

/* Derechos reservados y línea inferior */
.footer p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Línea divisoria suave mejorada */
hr.border-secondary {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    opacity: 1;
    margin: 40px 0 20px 0;
}

/* Enlaces de redes sociales o términos */
.footer-link-bottom {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-link-bottom:hover {
    color: #67c5f7;
}

/* ==========================
   ESTILOS NAVBAR - MEJORADO
========================== */
.navbar {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px); /* Efecto cristalino */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.navbar-nav .nav-link {
    padding: 0.5rem 1.2rem !important;
    font-weight: 500;
    color: #555 !important;
    position: relative;
    transition: all 0.3s ease;
}

/* Efecto de línea que aparece desde el centro al pasar el mouse */
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #03346e;
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.navbar-nav .nav-link:hover::after {
    width: 60%; /* La línea crece al hover */
}

.navbar-nav .nav-link:hover {
    color: #03346e !important;
    transform: translateY(-1px);
}

/* Estilo para la pestaña ACTIVA */
.navbar-nav .nav-link.active {
    color: #03346e !important;
    font-weight: 700;
}

.navbar-nav .nav-link.active::after {
    width: 60% !important; /* Mantiene la línea fija en el activo */
    background: linear-gradient(90deg, #03346e, #4dabf7);
}

.navbar-brand img {
    max-width: 150px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

/* CTA Ingresar + menú candidato / empresa */
.btn-landing-cta {
    background: linear-gradient(135deg, #00aeef 0%, #03346e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 0.55rem 1.35rem !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 16px rgba(3, 52, 110, 0.25);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
    letter-spacing: 0.3px;
}

.btn-landing-cta:hover,
.btn-landing-cta:focus,
.btn-landing-cta.show {
    color: #ffffff !important;
    background: linear-gradient(135deg, #00aeef 0%, #03346e 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(3, 52, 110, 0.35);
}

.btn-landing-cta::after {
    margin-left: 0.45rem;
}

.landing-login-menu {
    min-width: 280px;
    padding: 0.5rem;
    border-radius: 16px !important;
    margin-top: 0.65rem !important;
}

.landing-login-option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.85rem !important;
    border-radius: 12px;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.landing-login-option:hover,
.landing-login-option:focus {
    background-color: rgba(0, 174, 239, 0.08) !important;
    color: #03346e !important;
    transform: translateX(2px);
}

.landing-login-option-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 174, 239, 0.15);
    color: #03346e;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.landing-login-option-icon.enterprise {
    background: rgba(3, 52, 110, 0.12);
}

.landing-login-option-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.landing-login-option-text strong {
    color: #03346e;
    font-size: 0.95rem;
}

.landing-login-option-text small {
    color: #6c757d;
    font-size: 0.78rem;
}

@media (max-width: 991.98px) {
    .landing-login-dropdown {
        width: 100%;
    }

    .landing-login-menu {
        width: 100%;
    }
}

/* ==========================
   LISTA DE SUGERENCIAS - PULIDA
========================== */
.suggestions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.suggestions-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #444;
    padding: 4px 0;
    transition: transform 0.2s ease;
}

/* El ítem se desplaza un poco al leerlo */
.suggestions-list li:hover {
    transform: translateX(5px);
}

.suggestions-list li span {
    color: #28a745;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(40, 167, 69, 0.1); /* Fondo verde suave tras el check */
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.8rem;
}

/* ==========================================
   DISEÑO SECCIÓN BLOG (HIRE4U STYLE)
   ========================================== */

.blog-section {
    background-color: #fcfcfd;
}

/* Tarjeta Principal */
.blog-card {
    background: #ffffff;
    border-radius: 40px !important;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);

    /* Flexbox para mantener alturas iguales */
    display: flex;
    flex-direction: column;
    width: 100%;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(114, 198, 232, 0.2) !important;
}

/* Manejo de Imágenes */
.blog-image-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card:hover .blog-img {
    transform: scale(1.1);
}

/* Contenido de la Tarjeta */
.blog-content {
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Empuja el botón al fondo si la card crece */
}

.blog-content h4 {
    color: #03346e;
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.blog-card:hover h4 {
    color: #72c6e8;
}

/* Control de las 3 líneas de texto (Expansión) */
.blog-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.blog-description.expanded {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

/* BOTÓN "LEER MÁS" ESTILIZADO (DISEÑO PREMIUM) */
.btn-expand {
    background: linear-gradient(135px, #72c6e8 0%, #03346e 100%);
    color: white !important;
    border: none;
    border-radius: 50px;
    padding: 8px 24px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: auto; /* Alineación perfecta al fondo */
    box-shadow: 0 4px 15px rgba(114, 198, 232, 0.2);
    text-decoration: none;
}

.btn-expand i {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

.btn-expand:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(3, 52, 110, 0.3);
    background: linear-gradient(135px, #03346e 0%, #72c6e8 100%);
}

.btn-expand:active {
    transform: translateY(-1px);
}

/* Etiquetas (Badges) */
.blog-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    z-index: 2;
}

.badge-blue {
    background-color: #72c6e8;
}
.badge-pink {
    background-color: #f5c2b1;
}
.badge-dark {
    background-color: #645569;
}

/* ==========================
   ESTILOS PÁGINA CONTACTO
========================== */

/* Círculos de los iconos de contacto */
.icon-circle {
    width: 45px;
    height: 45px;
    background-color: #e9ecef;
    color: #03346e;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Botones de Redes Sociales (Cuadrados Azules) */
.social-btn {
    width: 40px;
    height: 40px;
    background-color: #006680; /* El tono azul de Celekta */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-btn:hover {
    background-color: #03346e;
    color: white;
    transform: translateY(-3px);
}

/* Inputs del formulario */
.form-control {
    border: 1px solid #dee2e6;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 0.9rem;
}

.form-control:focus {
    border-color: #72c6e8;
    box-shadow: 0 0 0 0.25rem rgba(114, 198, 232, 0.25);
}

/* Ajuste de la lista de sugerencias */
.suggestions-box-contact li span {
    color: #28a745;
    font-weight: bold;
    margin-right: 8px;
}

/* ==========================
   AJUSTES DE RESPONSIVIDAD GLOBAL
========================== */
@media (max-width: 768px) {
    /* 1. FLUJO DE PROCESO: De filas a columnas */
    .process-flow-wrapper {
        flex-direction: column; /* Apila los cuadros azul claro */
        gap: 15px;
        padding: 20px 0;
    }

    .process-box {
        width: 100% !important; /* Ocupan todo el ancho */
        min-height: 70px;
        margin-bottom: 5px;
    }

    /* 2. FLECHAS: Cambian de dirección (apuntan hacia abajo) */
    .arrow {
        transform: rotate(90deg); /* Giran la flecha para que apunte abajo */
        margin: 5px auto;
        animation: arrow-move-mobile 2s infinite;
    }

    @keyframes arrow-move-mobile {
        0%,
        100% {
            transform: rotate(90deg) translateY(0);
        }
        50% {
            transform: rotate(90deg) translateY(5px);
        }
    }

    /* 3. MAPA: Quitamos los márgenes negativos (overlaps) */
    .overlap-left,
    .overlap-right {
        margin: 0 !important;
        text-align: center !important;
    }

    .map-img {
        max-height: 200px;
        margin: 20px 0;
        opacity: 1; /* Forzamos visibilidad en móvil */
    }

    /* 4. TARJETAS DE CONTACTO */
    .contact-card {
        padding: 20px;
        min-height: auto;
    }

    /* 5. FUENTES: Ajuste de títulos grandes */
    h2.display-5 {
        font-size: 2rem !important;
    }
}