/* General */
body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #008dd2, #f49911, #b1c73b);
    background-size: 300% 300%;
    -webkit-animation: gradientAnimation 10s ease infinite;
    -moz-animation: gradientAnimation 10s ease infinite;
    animation: gradientAnimation 10s ease infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    color: #fff;
    overflow-x: hidden; /* Evitar desplazamiento horizontal */
    position: relative; /* Necesario para el posicionamiento absoluto del slider */
    padding-bottom: 250px; /* Espacio suficiente para el slider al final */
    overflow-y: auto; /* Asegura que el scroll se maneje en todo el body */
}

/* Animación del fondo */
@-webkit-keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@-moz-keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Navbar */
.navbar {
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 10px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.navbar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.navbar-logo img {
    height: 50px;
    display: block;
    margin: 0 auto; /* Centrar la imagen */
}

/* Contenedor principal */
.container {
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    margin-top: 80px; /* Espacio para el navbar */
    z-index: 1; /* Asegura que el slider no se superponga al contenido */
    overflow: visible; /* Asegura que no haya scroll interno en el contenedor */
}

/* Contenedor para la imagen de fondo */
/* Contenedor para la imagen de fondo */
.profile {
    position: relative;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el logo y el contenido debajo de él */
}

.profile-background {
    position: absolute;
    bottom: -80px; /* Ajusta esta posición para que la imagen quede detrás del texto */
    left: 50%;
    transform: translateX(-50%);
    width: 150%; /* Hace la imagen más grande que el contenedor para asegurar que cubra todo el espacio */
    height: 200px; /* Ajusta la altura según tus necesidades */
    overflow: hidden;
    z-index: -1; /* Asegura que esté detrás del título y de la imagen de perfil */
    border-radius: 0 0 50% 50% / 0 0 100% 100%; /* Crea un semicírculo hacia arriba */
}

.profile-background img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el contenedor */
}

/* Asegura que la imagen de perfil y el texto estén sobre el fondo */
.profile-pic, h1, p {
    position: relative;
    z-index: 1; /* Coloca la imagen de perfil y el texto sobre el fondo */
}

.profile-pic {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 5px solid #fff;
    object-fit: cover;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 15px;
    display: block;
    margin: 0 auto; /* Asegura que la imagen esté centrada */
}


/* Textos principales */
h1 {
    font-size: 24px;
    margin: 15px 0 10px;
}

p {
    font-size: 16px;
    color: #ddd;
    margin-bottom: 10px;
}

/* Iconos sociales */
.social-icons {
    margin-bottom: 30px;
}

.social-icons a {
    color: #fff;
    font-size: 24px;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #f49911;
}

/* Enlaces */
.links {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar los enlaces */
}

.link-button {
    background-color: #fff;
    color: #008dd2;
    text-decoration: none;
    padding: 15px;
    margin: 10px 0;
    border-radius: 30px;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Asegura que todos los botones tengan el mismo ancho */
    max-width: 300px; /* Define un ancho máximo para los botones */
}

.link-button i {
    margin-right: 10px;
}

.link-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 100%;
    background: linear-gradient(120deg, #008dd2, #f49911, #b1c73b);
    transition: all 0.5s ease;
    z-index: -1;
    transform: translateX(-100%);
}

.link-button:hover:before {
    transform: translateX(0);
}

.link-button:hover {
    color: #fff;
}

.link-button:active {
    transform: scale(0.95);
}

/* Contenedor principal */
.container {
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    margin-top: 80px; /* Espacio para el navbar */
    margin-bottom: 30px; /* Asegura que haya espacio debajo del contenedor para el slider */
    overflow-x: hidden; /* Evitar desbordamiento del contenedor */
    z-index: 1; /* Asegura que el slider no se superponga al contenido */
}

/* Estilos para el slider */
.slider-container {
    position: relative; /* Asegura que el slider esté en flujo normal y debajo de los botones */
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 2;
    height: 200px; /* Define una altura fija para el slider */
    margin-top: 20px; /* Espacio entre los botones y el slider */
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Ajuste adicional para dispositivos iPhone */
@media (max-width: 480px) {
    .slider-container {
        margin-top: 20px; /* Asegura que haya espacio entre los botones y el slider */
        max-width: 100%; /* Permite que el slider ocupe todo el ancho del dispositivo */
    }
}

.slider-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.slider-nav button {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
    pointer-events: all;
    transition: background-color 0.3s;
}

.slider-nav button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Media query para pantallas grandes (escritorio) */
@media (min-width: 768px) {
    .responsive-image {
        max-width: 50%; /* Reduce el tamaño al 50% del contenedor */
    }
}

/* Asegurarse de que todas las imágenes sean completamente responsivas */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Incluir padding y border en el width/height */
* {
    box-sizing: border-box;
}

/* Media query para pantallas pequeñas (móviles) */
@media (max-width: 480px) {
    /* Ajustes generales */
    body {
        padding-bottom: 200px; /* Ajusta el padding para asegurar espacio para el slider */
    }

    .navbar {
        padding: 8px 0; /* Reduce el padding de la barra de navegación */
    }

    .navbar-logo img {
        height: 40px; /* Reduce el tamaño del logo en la barra de navegación */
    }

    .container {
        padding: 20px; /* Reduce el padding del contenedor principal */
        margin-top: 70px; /* Ajusta el margen superior para el navbar */
        width: 95%; /* Ajusta el ancho para pantallas pequeñas */
    }

    .profile-pic {
        width: 100px;
        height: 100px; /* Reduce el tamaño de la imagen de perfil */
    }

    h1 {
        font-size: 20px; /* Reduce el tamaño de la fuente del título */
    }

    p {
        font-size: 14px; /* Reduce el tamaño de la fuente del párrafo */
    }

    .social-icons a {
        font-size: 20px; /* Reduce el tamaño de los iconos sociales */
        margin: 0 5px; /* Reduce el espacio entre los iconos sociales */
    }

    .link-button {
        padding: 12px;
        max-width: 280px; /* Ajusta el ancho máximo de los botones */
    }

    /* Ajustes específicos para el slider */
    .slider-container {
        max-width: 100%; /* Asegura que el slider ocupe todo el ancho disponible */
        height: 250px; /* Ajusta la altura del slider para móviles */
    }

    .slider-nav button {
        font-size: 18px; /* Reduce el tamaño de los botones de navegación del slider */
        padding: 8px; /* Ajusta el padding de los botones de navegación */
    }
}