/* ---------------------------------- */
/* -----------LOGO ------------------ */
/* ---------------------------------- */


/* Contenedor principal */
.div-logo {
    display: flex;
    align-items: flex-start; /* Alinea los iconos de la derecha arriba */
    justify-content: flex-end; /* Empuja todo hacia la derecha inicialmente */
    height: 170px; /* Ajusta esta altura según tu diseño */
    padding: 10px;
    position: relative;
    background-color: #000000; /* Solo para visualización */
}



    /* El primer logo (Index) centrado y grande */
    .div-logo a:first-child {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 90%; /* Casi la altura total del contenedor */
    }

    /* Los demás logos (sociales) a la derecha y mitad de altura */
    .div-logo a:not(:first-child) {
        height: 80%; /* Mitad del alto del contenedor */
        margin-left: 10px;
        display: inline-block;
    }




.logo-switch img {
    height: 100%;
    width: auto;
    display: block;
}

/* --- Lógica del Switch (Hover) --- */

/* Escondemos el logo hover por defecto */
.icono-hover {
    display: none !important;
}

/* Cuando pasamos el mouse sobre el enlace:
   Escondemos el normal y mostramos el hover */
.logo-switch:hover .icono-normal {
    display: none !important;
}

.logo-switch:hover .icono-hover {
    display: block !important;
}


.logo-switch2:hover .icono-hover2 {
    display: block !important;
}
    /* ---------------------------------- */
    /* -----------FONDO TOP----------------- */
    /* ---------------------------------- */
    /* ============================================================
   1. CONTENEDOR PRINCIPAL RESPONSIVO
   ============================================================ */

    .contenedor-fondo {
    position: relative;
    width: 100%;
    height: clamp(150px, 17vw, 250px);
    overflow: hidden;
    background-color: #000;
}

.fondo-img {
    width: 100%;
    height: 160%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   2. CAPA DE LOGOS
   ============================================================ */
.capa-logos {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1px;
    padding-bottom: 1vw;
    box-sizing: border-box;
}

/* ============================================================
   3. AJUSTE INDIVIDUAL (Píxeles iniciales)
   ============================================================ */
.l-montacarga {
    --w-ini: 180px;
    --h-ini: 160px;
    --escala: 10vw;
}

.l-camion {
    --w-ini: 320px;
    --h-ini: 250px;
    --escala: 15vw;
}

.l-grua {
    --w-ini: 640px;
    --h-ini: 500px;
    --escala: 18vw;
}

.l-telescopico {
    --w-ini: 270px;
    --h-ini: 210px;
    --escala: 13vw;
}

.l-elevador {
    --w-ini: 120px;
    --h-ini: 200px;
    --escala: 10vw;
}

.l-gruaChica {
    --w-ini: 320px;
    --h-ini: 250px;
    --escala: 15vw;
}

/* ============================================================
   4. WRAPPERS (El secreto de la estabilidad)
   ============================================================ */
.logo-wrapper {
    position: relative;
    display: block; /* Cambiado a block para evitar conflictos de flex interno */
    flex-shrink: 0;
    /* Ancho y alto fijos/fluidos sincronizados */
    width: clamp(30px, var(--escala), var(--w-ini));
    height: var(--h-ini);
    /* Esta línea es clave: asegura que el alto también se encoja proporcionalmente */
    max-height: calc(clamp(30px, var(--escala), var(--w-ini)) * (var(--h-ini) / var(--w-ini)));
}

    .logo-wrapper img {
        position: absolute; /* Ambas imágenes flotan una sobre otra */
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
        object-fit: contain; /* Obliga a la imagen a caber sin estirarse */
        object-position: bottom;
        transition: opacity 0.3s ease-in-out;
    }

    /* ============================================================
   5. LÓGICA DE HOVER (Sin saltos de tamaño)
   ============================================================ */
    .logo-wrapper .icono2-hover {
        opacity: 0;
        z-index: 2;
    }

    .logo-wrapper .icono2-normal {
        opacity: 1;
        z-index: 1;
    }

    /* Al pasar el mouse, solo cambiamos opacidades, nunca tamaños */
    .logo-wrapper:hover .icono2-normal {
        opacity: 0;
    }

    .logo-wrapper:hover .icono2-hover {
        opacity: 1;
    }