/* =========================================
   MENÚ CIRCULAR
   ========================================= */


/* =========================================
   CONTENEDOR PRINCIPAL
   ========================================= */

.contenedor {
    width: 100%;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 40px;
}


/* =========================================
   FONDO
   ========================================= */

/*body {
    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #e9e9e9 45%,
            #cfcfcf 100%
        );
}*/


/* =========================================
   MENÚ CIRCULAR
   ========================================= */

.menu-circular {
    position: relative;

    width: 650px;
    height: 650px;
}


/* =========================================
   CÍRCULO CENTRAL
   ========================================= */

.centro {
    position: absolute;

    width: 180px;
    height: 180px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: black;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.25);

    border: 6px solid white;

    z-index: 5;
}

.centro span {
    color: white;

    font-size: 22px;
    font-weight: bold;

    letter-spacing: 2px;
}


/* =========================================
   ELEMENTOS / ENLACES (7 ELEMENTOS)
   ========================================= */

.item {
    position: absolute;

    width: 125px;
    height: 125px;

    /* Centramos el punto de origen en la caja */
    top: calc(50% - 62.5px);
    left: calc(50% - 62.5px);

    display: block;

    text-decoration: none;

    border-radius: 50%;

    background: white;
    border: 5px solid white;

    overflow: visible;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.25);

    /* Distribución automática en 360º para 7 elementos */
    transform: rotate(calc(360deg / 7 * var(--i))) 
               translateY(-235px) 
               rotate(calc(-360deg / 7 * var(--i)));

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

    z-index: 2;
}


/* =========================================
   ASIGNACIÓN DE ÍNDICES (ÁNGULOS DE LOS 7 ELEMENTOS)
   ========================================= */

.item1 { --i: 0; }
.item2 { --i: 1; }
.item3 { --i: 2; }
.item4 { --i: 3; }
.item5 { --i: 4; }
.item6 { --i: 5; }
.item7 { --i: 6; }


/* =========================================
   CONTENEDOR DE LAS IMÁGENES
   ========================================= */

.logo {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}


/* =========================================
   IMÁGENES
   ========================================= */

.logo img {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 85%;
    height: 85%;

    transform: translate(-50%, -50%);

    object-fit: contain;
    object-position: center center;

    display: block;
}


/* =========================================
   IMAGEN NORMAL Y HOVER
   ========================================= */

.vehiculo-normal {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.vehiculo-hover {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.item:hover .vehiculo-normal {
    opacity: 0;
}

.item:hover .vehiculo-hover {
    opacity: 1;
}


/* =========================================
   TAMAÑO DE LAS SIETE IMÁGENES
   ========================================= */

.item1 .logo img { width: 90%; }
.item2 .logo img { width: 85%; }
.item3 .logo img { width: 80%; }
.item4 .logo img { width: 90%; }
.item5 .logo img { width: 80%; }
.item6 .logo img { width: 85%; }
.item7 .logo img { width: 85%; }


/* =========================================
   TEXTO
   ========================================= */

.item span {
    position: absolute;

    left: 50%;
    bottom: -35px;

    transform: translateX(-50%);

    white-space: nowrap;

    color: #222;

    font-size: 15px;
    font-weight: bold;

    background: rgba(255, 255, 255, 0.9);

    padding: 6px 12px;

    border-radius: 20px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15);
}


/* =========================================
   EFECTO AL PASAR EL RATÓN UNIFICADO
   ========================================= */

.item:hover {
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.4);

    z-index: 20;

    transform: rotate(calc(360deg / 7 * var(--i))) 
               translateY(-235px) 
               rotate(calc(-360deg / 7 * var(--i))) 
               scale(1.18);
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 800px) {

    .contenedor {
        padding: 20px;
    }

    .menu-circular {
        width: 550px;
        height: 550px;
    }

    .item {
        width: 105px;
        height: 105px;

        top: calc(50% - 52.5px);
        left: calc(50% - 52.5px);

        transform: rotate(calc(360deg / 7 * var(--i))) 
                   translateY(-195px) 
                   rotate(calc(-360deg / 7 * var(--i)));
    }

    .item:hover {
        transform: rotate(calc(360deg / 7 * var(--i))) 
                   translateY(-195px) 
                   rotate(calc(-360deg / 7 * var(--i))) 
                   scale(1.18);
    }

    .centro {
        width: 150px;
        height: 150px;
    }

    .centro span {
        font-size: 18px;
    }
}


/* =========================================
   MÓVIL
   ========================================= */

@media (max-width: 600px) {

    .contenedor {
        padding: 20px;
    }

    .menu-circular {
        width: 90vw;
        height: 90vw;

        max-width: 420px;
        max-height: 420px;
    }

    .item {
        width: 85px;
        height: 85px;

        top: calc(50% - 42.5px);
        left: calc(50% - 42.5px);

        border-width: 3px;

        transform: rotate(calc(360deg / 7 * var(--i))) 
                   translateY(-145px) 
                   rotate(calc(-360deg / 7 * var(--i)));
    }

    .item:hover {
        transform: rotate(calc(360deg / 7 * var(--i))) 
                   translateY(-145px) 
                   rotate(calc(-360deg / 7 * var(--i))) 
                   scale(1.18);
    }

    .centro {
        width: 25vw;
        height: 25vw;

        max-width: 120px;
        max-height: 120px;

        border-width: 4px;
    }

    .centro span {
        font-size: 14px;
    }

    .item span {
        font-size: 11px;

        bottom: -28px;

        padding: 4px 8px;
    }
}