/* --- Estilos para la sección About Me --- */

#home {
    position: relative;
    overflow: hidden;
    height: calc(100vh - var(--navbar-height)); /* Altura de la ventana menos la barra de navegación */
    display: flex;
    align-items: center;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);

    /* Colores por defecto para el modo claro */
    background-color: var(--light-background);
    color: var(--light-text-color);
}

/* Anulación para el modo oscuro */
body.dark-mode #home {
    background-color: var(--dark-background);
    color: var(--dark-text-color);
}

/* Contenedor de las partículas de fondo */
#particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Detrás de todo */
    filter: blur(2px); /* Añadimos un pequeño desenfoque */
}

/* Hacemos el blur más sutil en modo oscuro */
body.dark-mode #particles-container {
    filter: blur(1px);
}

/* Contenedor del texto flotante */
#code-text-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Encima de las partículas pero debajo del contenido */
    filter: blur(1px); /* Un desenfoque aún más sutil para el texto */
}

/* Y también para el texto flotante */
body.dark-mode #code-text-container {
    filter: blur(0.5px);
}

/* Contenido principal (texto, imagen, etc.) */
#home .container {
    position: relative;
    z-index: 2; /* Encima de los efectos de fondo */
}

/* --- Botones de la sección About Me --- */
.about-me-btn {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.about-me-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

body.dark-mode .about-me-btn:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}


/* Contenedor de la imagen de perfil para el efecto 3D */
.profile-image-container {
    perspective: 1000px; /* Crea la "profundidad" para el efecto 3D */
}

/* Imagen de perfil */
.profile-image {
    width: var(--profile-image-size);
    height: var(--profile-image-size);
    border-radius: var(--profile-image-border-radius);
    object-fit: cover;
    cursor: pointer;
    box-shadow: var(--light-profile-image-shadow);
    transition: transform 0.1s linear, box-shadow 0.3s ease; /* Transición suave para el giro y la sombra */
}

body.dark-mode .profile-image {
    box-shadow: var(--dark-profile-image-shadow);
}

/* === Ajustes responsive para HOME (solo mobile) === */
@media (max-width: 768px) {

    /* 1️⃣ Ajusta el alto para que no se superponga con el navbar */
    #home {
        height: auto; /* deja que crezca según contenido */
        padding-top: 90px; /* da espacio bajo el navbar fijo */
    }

    /* 2️⃣ Centra los botones y los deja alineados */
    #home .d-flex {
        justify-content: center;
    }

    #home .about-me-btn {
        flex: 1 1 auto;
        min-width: 140px;
        text-align: center;
    }

    /* 3️⃣ Oculta la foto de perfil */
    .profile-image-container {
        display: none;
    }

    /* 4️⃣ Corrige el ícono hamburguesa en modo claro */
    .navbar-light .navbar-toggler-icon {
        /* Eliminadas las reglas de background-image de aquí */
    }

    /* 5️⃣ Y en modo oscuro, que siga siendo blanca */
    body.dark-mode .navbar-toggler-icon {
        /* Eliminadas las reglas de background-image de aquí */
    }
}