body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-image: url('../Image/backgraund/back\ N_11zon.webp'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center; /* Centra la imagen de fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    width: 100%; /* Cambiar a 100% para evitar barras de scroll horizontales */
    height: 100%; /* Cambiar a 100% para evitar barras de scroll verticales */
    overflow: hidden; /* Eliminar cualquier barra de scroll */
}

/*eader___________________________________________________*/

header {
    background-color: #000000;
    box-shadow: 0px 4px 6px rgba(255, 255, 255, 0.651); 
    padding: 2px 0;
    text-align: center;
}

header .logo{
    max-width: 100px; /* Ajustar el tamaño de la imagen del logo */
    max-height: auto;
    margin: 0 auto; /* Centrar la imagen del logo */
    display: block; /* Asegura que la imagen esté en bloque para centrarla */
}

header .button-link{
    position: absolute;
    top: 12px; /* Ajustar la posición vertical del botón */
    right: 12px; /* Ajustar la posición horizontal del botón */
    font-size: 1rem;
    text-decoration: none;
    padding: 10px 10px;
    color: #000000;
    background-color: #ffffff; /* Color de fondo del botón */
    border-radius: 5px; /* Bordes redondeados del botón */
    filter: drop-shadow(0px 4px 6px rgba(224, 218, 218, 0.562)); /* Sombra del botón */
}

/*Swipper_____________________________________________________________________________________*/

.swiper-container {
    max-width: 100%;
    height: 100vh;
    padding: 0px 0px; /* Espacio a los lados */
    overflow: hidden; /* Evita que el contenido se pase a otra página */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
}

.swiper-slide {
    max-width: 100vw; /* Asegura que cada página ocupe el ancho completo de la ventana */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0.8rem, 2vw, 1rem);
    font-weight: bold;
    color: #ffffff;
}

.swiper-button-next,
.swiper-button-prev {
    color: #fff;
}

.swiper-pagination-bullet {
    background: #fff;
}

.custom-next,
.custom-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-size: cover;
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
}

.custom-next {
    right: 10px;
    background-image: url('../Image/Imagenes/mano-derecha.png'); /* Ruta de la imagen del botón "siguiente" */
    filter: drop-shadow(0px 4px 6px rgb(224, 218, 218)); /* Sombra del botón "anterior" */
}

.custom-prev {
    left: 10px;
    background-image: url('../Image/Imagenes/mano-izquierda.png'); /* Ruta de la imagen del botón "anterior" */
    filter: drop-shadow(0px 4px 6px rgb(224, 218, 218)); /* Sombra del botón "anterior" */
}

/* Estilos personalizados para la paginación */
.swiper-pagination {
    bottom: 10px !important; /* Ajusta la posición vertical */
    text-align: center !important; /* Centra la paginación */
}

.swiper-pagination-bullet {
    max-width: 12px !important; /* Ancho de los puntos */
    max-height: 12px !important; /* Altura de los puntos */
    background: #ffffff !important; /* Color de los puntos */
    opacity: 0.7 !important; /* Transparencia de los puntos */
    transition: opacity 0.3s, transform 0.3s !important; /* Animación al interactuar */
    filter: drop-shadow(0px 4px 6px rgb(224, 218, 218)) !important; /* Sombra del botón "anterior" */

}

.swiper-pagination-bullet-active {
    background: #000000 !important; /* Color del punto activo */
    opacity: 1 !important; /* Opacidad completa para el punto activo */
    transform: scale(1.5) !important; /* Aumenta el tamaño del punto activo */
}

/*Pagina-1________________________________________________________________________________*/

.pagina-1, .pagina-2, .pagina-3, .pagina-4{
    margin: 60px; /* Mantiene el margen horizontal */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: #0000008f;
    border-radius: 20px;
    filter: drop-shadow(0px 4px 6px rgba(37, 33, 33, 0.651)); /* Sombra de la página */
    max-height: calc(100vh - 120px); /* Asegura que no pase de 60px del top y bottom */
    margin-top: 60px; /* Espacio desde el borde superior */
    margin-bottom: 60px; /* Espacio desde el borde inferior */
    overflow: auto; /* Permite scroll si el contenido excede el espacio */
    padding: 20px; /* Espacio interno */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */ 
}

.pagina-1 .imagen-presentacion{
    max-width: clamp(100px, 20vw, 200px);
    max-height: auto;
    margin: 20px auto; /* Centrar la imagen */
    display: block; /* Asegura que la imagen esté en bloque para centrarla */
    border-radius: 20px; /* Bordes redondeados de la imagen */
    filter: drop-shadow(0px 4px 6px rgba(221, 216, 216, 0.651)); /* Sombra de la imagen */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
}

/*pagina-2___________________________________________________________*/

.pagina-2 .proyectos-lista {
    list-style-type: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el padding por defecto */
    margin: 0; /* Elimina el margen por defecto */
    display: flex;
    flex-direction: column; /* Cambia a columna para apilar los elementos */
    gap: 20px; /* Espacio entre los elementos */
}

.pagina-2 .proyectos-lista li {
    display: flex; /* Alinea los elementos en fila */
    align-items: center; /* Centra verticalmente */
    gap: 20px; /* Espacio entre la imagen y el texto */
    padding: 10px; /* Espacio interno */
    
    border-radius: 10px; /* Bordes redondeados */
    filter: drop-shadow(0px 4px 6px rgba(221, 216, 216, 0.651)); /* Sombra de los elementos de la lista */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
}

.pagina-2 .proyecto-imagen {
    max-width: clamp(100px, 20vw, 250px); /* Tamaño máximo de la imagen con valores dinámicos */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 10px; /* Bordes redondeados */
}

.pagina-2 .proyecto-texto {
    flex: 1; /* Ocupa el espacio restante */
}

.pagina-2 .proyecto-texto h2 {
    margin: 0 0 10px 0; /* Espaciado inferior */

}

.pagina-2 .proyecto-texto p {
    margin: 0; /* Elimina el margen por defecto */
}

/*pagina-3*/

.pagina-3 {
    display: flex;
    align-items: center; /* Centra los elementos horizontalmente */
    text-align: center; /* Centra el texto */
    background-color: #0000008f; /* Fondo semitransparente */
    border-radius: 20px; /* Bordes redondeados */
    padding: 20px; /* Espacio interno */
    filter: drop-shadow(0px 4px 6px rgba(37, 33, 33, 0.651)); /* Sombra de la página */
    max-height: calc(100vh - 120px); /* Asegura que no pase de 60px del top y bottom */
    margin: 60px; /* Espaciado externo */
    overflow: auto; /* Permite scroll si el contenido excede el espacio */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
}

/* Habilidades Grid */

.habilidades-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 3 columnas por defecto */
    gap: 10px; /* Espacio entre las figuras */
    justify-items: center; /* Centra las figuras horizontalmente */
    align-items: center; /* Centra las figuras verticalmente */
    margin-top: 20px; /* Espaciado superior */
}

@media (max-width: 768px) {
    .habilidades-grid {
        grid-template-columns: repeat(3, 1fr); /* 2 columnas para pantallas pequeñas */
        gap: 15px; /* Aumenta el espacio entre elementos */
    }
}

@media (max-width: 350px) {
    .habilidades-grid {
        grid-template-columns: 2fr; /* 1 columna para pantallas muy pequeñas */
        gap: 10px; /* Más espacio entre elementos */
    }
}

.habilidades-grid figure {
    display: flex;
    flex-direction: column; /* Coloca la imagen y el texto en columna */
    align-items: center; /* Centra los elementos horizontalmente */
    text-align: center; /* Centra el texto del figcaption */
}

.habilidad-imagen {
    max-width: clamp(20px, 10vw, 50px); /* Tamaño máximo de las imágenes con valores dinámicos */
    height: auto; /* Mantiene la proporción de las imágenes */
    border-radius: 10px; /* Bordes redondeados */
    background-color: #fff;
    margin: 5px 0; /* Espaciado entre la imagen y el texto */
    padding: -10px !important; /* Espacio interno reducido */
    filter: drop-shadow(0px 4px 6px rgba(221, 216, 216, 0.651)); /* Sombra de las imágenes */
    transition: transform 0.3s ease; /* Animación al pasar el cursor */
}

.habilidad-imagen:hover {
    transform: scale(1.1); /* Aumenta el tamaño al pasar el cursor */
}

.habilidades-grid figcaption {
    margin-top: 10px; /* Espaciado entre la imagen y el texto */
}

/* Carrusel de imágenes */

.carousel {
    position: relative;
    width: 100%;
    max-width: 600px; /* Reduce el ancho máximo del carrusel */
    margin: 0 auto;
    overflow: hidden; /* Oculta las imágenes fuera del contenedor */
    border-radius: 15px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
}

.carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; /* Asegura que el contenedor no se desborde */
}

.carousel-images {
    display: flex;
    justify-content: center; /* Centra las imágenes horizontalmente */
    align-items: center; /* Centra las imágenes verticalmente */
    gap: 10px; /* Espacio entre las imágenes */
}

.carousel-images figure {
    flex-shrink: 0;
    width: 150px; /* Tamaño reducido de las imágenes */
    text-align: center;
    margin: 0;
}

.carousel-images img {
    width: 100%; /* La imagen ocupa el 100% del ancho disponible */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: contain; /* Asegura que la imagen mantenga su proporción */
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgb(0, 0, 0);
    cursor: pointer; /* Indica que la imagen es clicable */
    transition: transform 0.3s ease-in-out;
}

/* Botones de navegación */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

/*pagina 4*/

.pagina-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #0000008f; /* Fondo semitransparente */
    border-radius: 20px;
    padding: 20px;
    filter: drop-shadow(0px 4px 6px rgba(255, 250, 250, 0.651));
    max-height: calc(100vh - 120px);
    margin: 60px;
    overflow: auto;
    box-sizing: border-box;
}

.pagina-4 h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
}

.carousel {
    position: relative;
    width: 100%;
    max-width: 800px; /* Aumenta el ancho máximo */
    margin: 0 auto;
    overflow: hidden;
    border-radius: 15px; /* Bordes más redondeados */
    box-shadow: 0px 6px 10px rgba(255, 255, 255, 0.5); /* Sombra más pronunciada */
    background-color: #000000; /* Fondo blanco para mayor contraste */
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-images figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 10px; /* Espaciado interno */
}

.carousel-images img {
    width: 100%;
    flex-shrink: 0;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* Sombra para las imágenes */
    transition: transform 0.3s ease-in-out;
}

.carousel-images img:hover {
    transform: scale(1.05); /* Efecto de zoom al pasar el cursor */
}

.carousel-images figcaption {
    margin-top: 10px;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(56, 19, 19, 0.7);
    border: none;
    padding: 15px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

@media (max-width: 768px) {
    .carousel {
        max-width: 90%; /* Reduce el ancho máximo en pantallas pequeñas */
    }

    .carousel-prev,
    .carousel-next {
        padding: 10px; /* Reduce el tamaño de los botones */
    }
}

@media (max-width: 480px) {
    .pagina-4 h1 {
        font-size: 1.5rem; /* Reduce el tamaño del título */
    }

    .carousel-images figcaption {
        font-size: 0.8rem; /* Reduce el tamaño del texto */
    }
}

/* Estilos para el modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo semitransparente */
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.918);
    animation: zoomIn 0.3s ease-in-out;
    position: absolute; /* Asegura que la imagen se pueda centrar */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta la posición al centro */
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.modal-close:hover,
.modal-close:focus {
    color: #ff5722;
}

#modal-caption {
    margin: 15px auto;
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
} 

.pagina-4 ul li{
    list-style-type: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el padding por defecto */
    margin: 0; /* Elimina el margen por defecto */
    display: flex;
    flex-direction: column; /* Cambia a columna para apilar los elementos */
    gap: 20px; /* Espacio entre los elementos */
}

/* Estilos para la tarjeta interactiva */
.card-container {
    perspective: 1000px; /* Añade perspectiva para el efecto 3D */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    margin-top: 20px;
    margin-bottom: 30px; /* Espacio inferior */
}

.card {
    width: 400px; /* Aumenta el ancho para hacerlo horizontal */
    height: 200px; /* Reduce la altura */
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
    
}

.card:hover {
    transform: rotateY(180deg); /* Gira la tarjeta al pasar el cursor */
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Oculta la cara trasera cuando no está visible */
    display: flex; /* Asegura que el contenido esté centrado */
    justify-content: center;
    align-items: center;
}

.card-front img {
    width: 100%; /* La imagen ocupa todo el ancho de card-front */
    height: 100%; /* La imagen ocupa toda la altura de card-front */
    object-fit: cover; /* Asegura que la imagen se ajuste sin deformarse */
}

.card-back {
    width: clamp(250px, 50vw, 400px); /* Ancho responsivo similar a card-front */
    height: clamp(100px, 30vh, 300px); /* Altura responsiva similar a card-front */
    background-color: #000000;
    color: #ffffff;
    transform: rotateY(180deg); /* Gira la cara trasera */
    display: flex;
    justify-content: space-between; /* Divide en dos secciones */
    align-items: center;
    flex-direction: row; /* Alinea en fila */
    padding: 15px; /* Ajusta el padding para mantener proporción */
    gap: 15px; /* Ajusta el espacio entre elementos */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
    left: clamp(10px, 2vw, 20px); /* Posición responsiva hacia la izquierda */
}

.card-back .left-section {
    position: relative; /* Habilita posicionamiento relativo para las imágenes */
    display: flex; /* Asegura que los elementos se alineen con flexbox */
    justify-content: center; /* Centra horizontalmente las imágenes */
    align-items: center; /* Centra verticalmente */
    flex-direction: column; /* Alinea las imágenes en columna */
    justify-content: center; /* Centra las imágenes verticalmente */
    align-items: center; /* Centra las imágenes horizontalmente */
    height: 100%; /* Ocupa toda la altura de la sección */
}

.card-back .left-section img {
    width: clamp(70px, 10vw, 90px); /* Ancho responsivo de las imágenes */
    height: auto; /* Mantiene la proporción */
}

.card-back .left-section img:first-child {
    width: clamp(60px, 8vw, 80px); /* Ancho responsivo de la primera imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover;
}

.card-back .left-section img:last-child {
    width: clamp(60px, 150px, 80px); /* Ancho responsivo de la última imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover;
}

.card-back .right-section {
    display: flex;
    flex-direction: column; /* Asegura que los elementos se apilen verticalmente */
    align-items: flex-start; /* Alinea los elementos hijos hacia la izquierda */
}

.card-back .right-section p {
    margin: 5px 0; /* Espaciado entre textos */
    text-align: center;
}

.card-back .right-section .links {
    display: flex;
    flex-direction: column; /* Cambia a columna para apilar los enlaces */
    gap: 10px; /* Espaciado entre enlaces */
    margin-top: 10px;
    align-items: flex-start; /* Asegura que los enlaces se alineen a la izquierda */
}

.card-back .right-section .links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.5rem; /* Reduce el tamaño del texto */
    transition: color 0.3s ease;
}

.card-back .right-section .links a:hover {
    color: #ff5722; /* Cambia de color al pasar el cursor */
}

.card-back .divider {
    width: clamp(2px, 0.5vw, 4px); /* Ancho responsivo de la línea divisoria */
    height: clamp(80%, 90%, 90%); /* Altura responsiva */
    background-color: #ffffff;
    opacity: 0.5; /* Línea divisoria */
    position: relative;
    left: 0px; /* Mueve la línea 20px hacia la izquierda */
}

.card-links {
    display: flex;
    gap: 15px;
}

.card-links a img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}

.card-links a img:hover {
    transform: scale(1.2); /* Aumenta el tamaño al pasar el cursor */
}

h1 {
    position: static; /* Asegura que los h1 sean estáticos en su posición */
}

.pagina-5 {
    margin: 60px; /* Mantiene el margen horizontal */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: 20px;
    filter: drop-shadow(0px 4px 6px rgb(124, 120, 120)); /* Sombra de la página */
    max-height: calc(100vh - 120px); /* Asegura que no pase de 60px del top y bottom */
    margin-top: 60px; /* Espacio desde el borde superior */
    margin-bottom: 60px; /* Espacio desde el borde inferior */
    overflow: auto; /* Permite scroll si el contenido excede el espacio */
    padding: 20px; /* Espacio interno */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */ 
}