@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --accent-green: #22c55e;
    --nav-bg: rgba(255, 255, 255, 0.1);
    --nav-border: rgba(255, 255, 255, 0.2);
    --bg-dark: #1a1a1a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    background: url('img/barca.jpg') no-repeat center center fixed;
    background-size: cover;
    background-color: rgba(0,0,0,0.4);
    background-blend-mode: overlay;
}

/* --- MENÚ SOBRE EL BALÓN --- */
.ball-menu {
    position: absolute;
    top: 10%; 
    left: 50%; 
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu .toggle {
    width: 92px;
    height: 92px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    transition: 0.5s;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.menu:hover .toggle {
    transform: rotate(360deg);
    background: var(--accent-green);
    color: #fff;
    box-shadow: 0 0 30px var(--accent-green);
}

.menu li {
    position: absolute;
    list-style: none;
    transform-origin: 150px;
    transition: 0.5s;
    transition-delay: calc(0.1s * var(--i));
    transform: rotate(0deg) translateX(100px);
    opacity: 0;
}

.menu:hover li {
    opacity: 1;
    transform: rotate(calc(360deg / 8 * var(--i))) translateX(0px);
}

.menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    transform: rotate(calc(360deg / -8 * var(--i)));
    color: var(--clr);
    transition: 0.3s;
}

/* --- NAVEGACIÓN CON INDICADOR MÓVIL --- */
.navigation {
    position: fixed;
    bottom: 30px;
    width: 400px;
    height: 75px;
    background: var(--nav-bg);
    backdrop-filter: blur(15px);
    border: 1px solid var(--nav-border);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navigation ul {
    display: flex;
    width: 350px; /* 70px * 5 items */
    position: relative;
}

.navigation ul li {
    position: relative;
    list-style: none;
    width: 70px;
    height: 70px;
    z-index: 1;
}

.navigation ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: #fff;
    text-decoration: none;
}

.navigation ul li a .icon {
    font-size: 1.5rem;
    transition: 0.5s;
    line-height: 75px;
}

/* El icono sube cuando la clase active está presente O cuando hay hover (vía JS) */
.navigation ul li.active a .icon,
.navigation ul li.hover-active a .icon {
    transform: translateY(-35px);
}

.navigation ul li a .text {
    position: absolute;
    font-size: 0.75rem;
    transition: 0.5s;
    opacity: 0;
    transform: translateY(20px);
}

.navigation ul li.active a .text,
.navigation ul li.hover-active a .text {
    opacity: 1;
    transform: translateY(45px);
}

.indicator {
    position: absolute;
    top: -50%;
    width: 70px;
    height: 70px;
    background: var(--accent-green);
    border-radius: 50%;
    border: 6px solid var(--bg-dark);
    /* Transición suave para seguir al mouse */
    transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}