:root {
    --green: #adff2f;
    --dark-bg: #121212;
    --gray-card: #1e1e1e;
    --text-white: #f5f5f5;
    --green: #2fff32;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-white);
    line-height: 1.6;
}

.highlight { color: var(--green); }

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background: rgba(0,0,0,0.9);
    position: sticky;
    top: 0; z-index: 1000;
}


.logo { font-size: 1.8rem; font-weight: 800; color: white; }
.logo span { color: var(--green); }

.nav-links { display: flex; list-style: none; gap: 25px; }
.nav-links a { text-decoration: none; color: white; font-weight: 500; font-size: 0.9rem; transition: 0.3s; }
.nav-links a:hover { color: var(--green); }

.btn-login { background: var(--green); color: black !important; padding: 8px 20px; border-radius: 5px; }

/* Hero */
.hero {
    height: 30vh;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url('../imagen/logo360_.png');
    background-size: 17%;
    background-repeat: no-repeat;    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero h1 { font-size: 4rem; margin-bottom: 10px; }



.mySwiper {
            width: 100%; /* ancho de los div*/
            height: 500px; /* Incrementamos la altura para acomodar el escalado */
            margin-top: 20px;
        }
        
        /* 2. Todos los slides (Estado base/lateral) */
        .swiper-slide {
            /* Definimos el tamaño base que se verá en los laterales */
            width: 10%; 
            height: auto;
            
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            background: rgba(0, 150, 255, 0.7); /* Transparencia al 70% */
            color: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(65, 40, 40, 0.3);
            
            /* Iniciamos todos los slides a su tamaño base */
            transform: scale(1); 
            transition: transform 0.6s ease, opacity 0.6s ease, z-index 0s;
            opacity: 0.3;
            z-index: 1; /* Z-index base */
        }

        /* 3. El slide ACTIVO (central) se agranda y pasa al frente */
        .swiper-slide-active {
            /* ¡Escalado al 150% (50% más grande)! */
            transform: scale(1); 
            opacity: 1;
            z-index: 10; /* Pasa al primer plano */
            /*border: 1px solid #770707;  borde del chance*/
            /*border-style:outset;*/
            border-left: 5px solid rgb(51, 153, 56);
            border-bottom: 3px solid rgb(51, 153, 56);
            padding: 0px;
            /*width: 200px;
            height: 100px;*/
        }

        .swiper-slide img {
            width: 95%;
            height: 95%;
        }

        .swiper-slide strong{
            text-align: center;
            align-items: center;
        }
        /* Colores para diferenciar */
        .slide-1 { background-color: rgba(255, 87, 51, 0.7); }  /* Rojo */
        .slide-2 { background-color: rgba(51, 153, 56, 0.7); }  /* Verde */
        .slide-3 { background-color: rgba(51, 87, 255, 0.7); }  /* Azul */
        .slide-4 { background-color: rgba(255, 255, 0, 0.7); color: #333; } /* Amarillo */
        .slide-5 { background-color: rgba(255, 0, 13, 0.7); color: #333; } /* Amarillo */
        .slide-6 { background-color: rgba(238, 255, 0, 0.7); color: #333; } /* Amarillo */

/*

        .diag{
            margin-top: 20px;
           font-size: 2rem;
           width: 500px;
           height: 220px;
           text-align: center;
           border: 2px solid #2fff32;
           border-radius: 15px;
           padding: 10px;
           color: var(--green);
        }
        .diag p{
            text-align: justify;
            font-size: 1.3rem;
            color: white;
        }
        
*/

        .diag {
            display: flex;
            flex-direction: column;
            justify-content: center; /* Esto centrará el texto verticalmente si sobra espacio */
            align-items: center;
            margin-top: 20px;
           font-size: 2rem;
           width: 500px;
           height: 320px;
           text-align: center;
           border: 2px solid #2fff32;
           border-radius: 15px;
           padding: 10px;
           color: var(--green);
        }

    .diag p {
        line-height: 1.6; /* Mejora la legibilidad del texto justificado */
        font-size: 1.1rem;
        color: #444;
    }

    .diag img{
        width: auto;
        height: 100%;
    }

    #nosotros {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 0;
        width: 100%;
    }

    /* Centrar el contenido dentro de cada slide */
    .swipers {
        display: flex;
        justify-content: center; /* Centrado horizontal */
        align-items: center;     /* Centrado vertical */
        padding: 20px;
    }

    /* Asegurar que el swiper no se desborde */
    .Swiperx {
        width: 100%;
        max-width: 1200px; /* O el ancho de tu contenedor principal */
    }
    
    /* --- AJUSTES PARA MÓVIL (Pantallas menores a 768px) --- */
@media (max-width: 768px) {
    
    /* 1. Navbar: Ocultar links o apilarlos */
    .navbar {
        padding: 15px 5%;
        flex-direction: column;
        gap: 15px;
    }

    .nav-links {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-links a {
        font-size: 0.8rem;
    }

    /* 2. Hero: Agrandar logo para que se vea en pantallas pequeñas */
    .hero {
        height: 20vh;
        background-size: 50%; /* El logo ocupa más ancho en el cel */
        background-position: center;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    /* 3. Swiper: Ajustar altura para que no desaparezca el contenido */
    .mySwiper {
        height: 450px;
    }

    /* 4. Tarjetas Diag: ¡FUNDAMENTAL quitar el ancho fijo de 500px! */
    .diag {
        width: 90%;      /* Ocupa casi todo el ancho del cel */
        height: auto;    /* Deja que el contenido dicte la altura */
        min-height: 280px;
        padding: 15px;
        font-size: 1.5rem; /* Títulos un poco más pequeños */
    }

    .diag p {
        font-size: 1rem;  /* Texto legible en móvil */
        color: var(--text-white); /* Mejor contraste en fondo oscuro */
    }

    /* 5. Ajuste de escala Swiper */
    .swiper-slide-active {
        transform: scale(1.1); /* Reducimos el escalado para que no se salga de la pantalla */
    }
}

/* Ajuste extra para celulares muy pequeños */
@media (max-width: 480px) {
    .hero { background-size: 70%; }
    .diag { width: 95%; }
}