/* Selector + propiedad + valor

selector {
propiedad: valor
}

el punto (.) llama a las clases
el # es para los id unicos
:: (Pseudo-elementos)
Se usan para crear o estilizar partes de un elemento que no existen en el HTML.

Siempre es mejor usar las clases para el estetico y los id para la logica.

Las clases son reutilizables, los ID son unicos


REM toma el valor predefinido del navegador
EM toma el valor de su padre (valor de herencia)

Atajos si quiero hacer por ejemplo 3 divs que tenga la clase caja es:
div.caja*3

Flexbox:
La propiedad display: flex define un contenedor como un flex container y habilita el uso de todas las propiedades Flexbox en sus elementos hijos.
La propiedad flex-direction especifica la dirección en la que los elementos flexibles (flex items) se colocan dentro del contenedor.
    row (valor por defecto): Los elementos se colocan en una fila horizontal.
    row-reverse: Los elementos se colocan en una fila horizontal en orden inverso.
    column: Los elementos se colocan en una columna vertical.
    column-reverse: Los elementos se colocan en una columna vertical en orden inverso.
La propiedad flex-wrap especifica si los elementos flexibles deben ajustarse en una sola línea o pueden envolverse en múltiples líneas.
    nowrap (valor por defecto): Todos los elementos se colocan en una sola línea.
    wrap: Los elementos se envuelven en múltiples líneas según sea necesario.
    wrap-reverse: Los elementos se envuelven en múltiples líneas en orden inverso.

La propiedad flex-flow es una forma abreviada de establecer tanto flex-direction como flex-wrap.
La propiedad justify-content alinea los elementos flexibles a lo largo del eje principal del contenedor (horizontalmente en una fila, verticalmente en una columna).
    flex-start (valor por defecto): Los elementos se alinean al inicio del contenedor.
    flex-end: Los elementos se alinean al final del contenedor.
    center: Los elementos se centran en el contenedor.
    space-between: Los elementos se distribuyen uniformemente con el primer elemento al inicio y el último al final.
    space-around: Los elementos se distribuyen uniformemente con espacio igual alrededor de cada uno.
    space-evenly: Los elementos se distribuyen con espacio igual entre ellos.
La propiedad align-items alinea los elementos flexibles a lo largo del eje transversal (perpendicular al eje principal) del contenedor.
    stretch (valor por defecto): Los elementos se estiran para llenar el contenedor.
    flex-start: Los elementos se alinean al inicio del contenedor.
    flex-end: Los elementos se alinean al final del contenedor.
    center: Los elementos se centran en el contenedor.
    baseline: Los elementos se alinean a lo largo de su línea base.
La propiedad align-content alinea las líneas del contenedor flexible cuando hay espacio extra en el eje transversal.    
    stretch (valor por defecto): Las líneas se estiran para ocupar el espacio disponible.
    flex-start: Las líneas se alinean al inicio del contenedor.
    flex-end: Las líneas se alinean al final del contenedor.
    center: Las líneas se centran en el contenedor.
    space-between: Las líneas se distribuyen uniformemente con el primer línea al inicio y la última al final.
    space-around: Las líneas se distribuyen uniformemente con espacio igual alrededor de cada una.
    space-evenly: Las líneas se distribuyen con espacio igual entre ellas.
La propiedad order determina el orden en que se muestran los ítems flexibles dentro del contenedor flex. Por defecto, todos los ítems tienen un valor order de 0.
Se utiliza para cambiar el orden de los ítems sin alterar el orden en el HTML.
La propiedad flex-shrink determina la capacidad de un ítem flexible para reducir su tamaño si es necesario. El valor por defecto es 1 (puede encogerse).
La propiedad flex-grow define la capacidad de un ítem flexible para crecer en proporción a los demás ítems flexibles dentro del mismo contenedor. El valor por defecto es 0 (no crece).
    

flex-grow nos permite cambiar el ancho de las cajas de manera flexible
    display flex: activa flexbox
    justify-content trabaja horizontal mientras que align-items funciona vertical
    flex-direction 


Estilos para dispositivos móviles 
body {
    font-size: 16px;
    padding: 10px;
}
Media query para tabletas 
@media (min-width: 600px) {
    body {
        font-size: 18px;
        padding: 20px;
    }
}
Media query para computadoras de escritorio 
@media (min-width: 1024px) {
    body {
        font-size: 20px;
        padding: 30px;
    }
}
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Caprasimo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=check_circle');

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

nav {
    background-color: rgb(255, 231, 253);
    align-items: center;
    justify-content:center;
    width: 100%; 
    margin: 0px; 
    padding: 0px;
    border-style: solid;
    border-color: rgb(255, 174, 87);
    position: sticky;
}
.nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
}

nav .izquierda, nav .derecha {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 50px;
    font-size: 30px;
    font-family:"Bebas Neue", serif ;
    
}

/*ID*/
#logo {
    height: 200px;
    width: auto;
    clip-path: circle(40%);
    border-radius: 5px;
    transition: transform 0.3s ease;
}

#logo:hover {
    transform: scale(1.1); 

}

nav a {
    text-decoration: none;
    color: inherit;
    padding: 10px 15px;
    transition: background-color 0.3s ease;
}

nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}
.mobile-menu {
            position: fixed;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100vh;
            background-color: rgb(255, 231, 253);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 30px;
            font-family: "Bebas Neue", serif;
            font-size: 28px;
            z-index: 1000;
            transition: left 0.3s ease;
            border-right: solid rgb(255, 174, 87);
        }

        .mobile-menu.active {
            left: 0;
        }

        .mobile-menu a {
            text-decoration: none;
            color: inherit;
            padding: 15px 30px;
            border-radius: 10px;
            transition: all 0.3s ease;
            text-align: center;
            width: 80%;
            max-width: 300px;
        }

        .mobile-menu a:hover {
            background-color: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }

@media (max-width: 480px) {
     .hamburger {
                display: block;
            }
            .nav-container {
                padding: 10px 15px;
            }

            #logo {
                height: 70px;
            }

            .mobile-menu {
                font-size: 24px;
                gap: 25px;
            }

            .main-content h1 {
                font-size: 28px;
            }

            .main-content h2 {
                font-size: 22px;
            }

            .main-content p {
                font-size: 16px;
            }

            .footer {
                padding: 30px 15px 15px;
            }

            .footer-section h3 {
                font-size: 20px;
            }

            .social-links a {
                padding: 8px 12px;
                font-size: 14px;
            }
        }

p{
    text-align: center;
    font-size: 25px;
}

/*CLASE*/
.segundo-p
{
    color: rgb(14, 0, 11);
    font-size: 25px;
    font-family: serif;
}

h1{
    font-family: "Bebas Neue", serif;
    color: rgb(255, 177, 235);
    text-align:  center;
    font-size: 35px;
}
body h2 {
    margin-top: 15px;
    font-family: "Bebas Neue", serif;
    color: blueviolet;
    font-size: 30px;
    letter-spacing: 2px;
    text-align: center;
}
body h3 {
    font-family: "Bebas Neue", serif;
    color: rgb(34, 152, 57);
    font-size: 25px;
    letter-spacing: 2px;
    text-align: center;
}
/* Listas */

ul {
    list-style-type: none;
    margin-left: 20px;
    font-weight: bold;
    font-size: 1.2em;

}

ul li {
    font-size: 1em;
    margin-bottom: 8px;
    font-weight: 400;
    text-align: center;
    font-size: 25px;
}

section ul li::before {
    font-family: 'Material Symbols Outlined';
    list-style: none;
    color: rgb(255, 148, 25);
    font-weight: bold;
    margin-right: 8px;
    font-size: 15px;
    vertical-align: middle;
}


section{
    border-radius: 10px;
    border-style: solid;
    border-color: rgb(255, 231, 253);
    background-color: rgb(239, 255, 255);
}

#presentacion {
margin-top: 10px;
}
/*SERVICIOS*/
.roles-png {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border: 2px solid rgb(19, 109, 37);
    border-radius: 8px;
    margin: 0 auto 20px auto; 
    display: block;
    margin-top: 30px;;
}

.columnas {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;

}
.columnas div p {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    margin-left: 20px;
}

.columnas div {
    padding-right: 20px;
    margin-bottom: 10px;
    border-style:double;
    border-color: rgb(19, 109, 37);

}

.destacadas {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.funcionalidades-destacadas {
    padding: 20px;
    border-style:double;
    border-color: rgb(19, 109, 37);
    border-width: 3px;
    align-items: center;
    margin-bottom: 10px;

}
.accordion {
    margin: 30px 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(19, 109, 37, 0.1);
}
.accordion-item {
    border: none ;
    border-bottom: 1px solid rgba(19, 109, 37, 0.2) ;
    background-color: rgb(255, 231, 253);
}
.accordion-item:last-child {
    border-bottom: none ;
}
.accordion-button {
    font-family: "Bebas Neue", serif ;
    font-size: 1.2rem ;
    font-weight: 400 ;
    letter-spacing: 1px ;
    padding: 20px 25px ;
    border: none ;
    transition: all 0.3s ease ;
    position: relative;
}
.accordion-button.collapsed:hover {
    background-color: rgb(255, 231, 253);
    color: rgb(19, 109, 37);
}

.accordion-collapse {
    transition: all 0.35s ease ;
}

.accordion-button:not(.collapsed) {
    color:  rgb(19, 109, 37); ;
}

.versiones-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin: 40px auto;
    padding: 20px;
    max-width: 1400px;
}
.versiones-container .card {
    width: 500px;
    height: 500px;
    border: 3px solid rgb(19, 109, 37);
    border-radius: 10px;
    padding: 30px;
    background-color: white;
    box-shadow: 0 8px 25px;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
.versiones-container .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border-color: #8B5CF6;
}

.versiones-container .card h3 {
    font-size: 1.6rem;
    color: rgb(19, 109, 37);
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
    text-transform: uppercase;
}
.versiones-container .card-body {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: center;
}
.versiones-container .card-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #4B5563;
    font-weight: 500;
    margin: 0;
}

#contacta {
    border-width: 3px;
    padding: 30px;
    text-align: center;
}

#contacta a {
    background-color: rgb(34, 152, 57);
    color: white;
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-family: "Bebas Neue", serif;
    font-size: 20px;
    letter-spacing: 1px;
    margin: 10px;
    display: inline-block;
    transition: all 0.3s ease;
    border: 2px solid rgb(19, 109, 37);
    
}

#contacta a:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(19, 109, 37, 0.3);
    background-color: rgb(19, 109, 37);
}
/*CONTACTO*/
#introduccion {
    text-align: center;
    padding: 5%;
    margin: 20px auto;
    max-width: 100%;
}

#introduccion p {
    font-size: 24px;
    line-height: 1.6;
    color: rgb(14, 0, 11);
    max-width: 800px;
    margin: 0 auto;
}
#informacion {
    max-width: 100%;
    margin: 40px auto;
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

#informacion h2 {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 20px;
}


#informacion h3 {
    margin-bottom: 15px;
    color: rgb(34, 152, 57);
}

#informacion p {
    font-size: 18px;
    margin-bottom: 8px;
    color: rgb(14, 0, 11);
}

#informacion a {
    color: rgb(19, 109, 37);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

#mapa {
    max-width: 100%;
    margin: 40px auto;
    padding: 40px;
    text-align: center;
}
#redes {
    max-width: 100%;
    margin: 40px auto;
    padding: 40px;
    text-align: center;
}

#redes ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}

#redes li {
    list-style: none;
}

#redes a {
    display: inline-block;
    background-color: rgb(255, 177, 235);
    color: rgb(14, 0, 11);
    padding: 12px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-family: "Bebas Neue", serif;
    font-size: 18px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 2px solid rgb(255, 174, 87);
}

#redes a:hover {
    background-color: rgb(19, 109, 37);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(19, 109, 37, 0.3);
}
.formulario-container{
border: 2px solid rgb(19, 109, 37);
padding: 20px;
}



@media (max-width: 768px) {
    .columnas {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    
    #administrador, #operador {
        max-width: 100%;
        min-width: auto;
    }
    
    .roles-png {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 480px) {
    .roles-png {
        width: 180px;
        height: 180px;
    }
    
    #administrador, #operador {
        padding: 15px;
    }
}

/* INDEX*/
.columnas {
    display: grid;
    grid-template-areas:
        "centralizacion automatizacion"
        "counicacicon geolocalizacion";
        
}

/* TESTIMONIOS*/
.testimonios-grid {
    display: grid;
    gap: 20px;
}
.testimonios-grid-3 {
    grid-template-columns: repeat(3, 1fr);

}

.testimonios-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: auto;
    gap: 20px;
}
.testimonio {
    padding: 20px;
    border-style: double;
    border-color: rgb(19, 109, 37);
    border-width: 3px;
    background-color: rgb(239, 255, 255);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}


.testimonio blockquote p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: left;
    grid-template-columns: repeat(2, 1fr);
}

.testimonio cite {
    display: block;
    font-family: "Bebas Neue", serif;
    color: rgb(34, 152, 57);
    font-size: 18px;
    font-style: normal;
    text-align: right;
    border-top: 2px solid rgb(255, 174, 87);
    padding-top: 10px;
    margin-top: 15px;
}
  /* Mobile Carousel */
.testimonios-carousel {
    display: none;
}

.carousel-item {
    padding: 10px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgb(255, 177, 235);
    border-radius: 50%;
    padding: 15px;
}

.carousel-indicators button {
    background-color: blueviolet;
}

.carousel-indicators button.active {
    background-color: rgb(255, 177, 235);
}


#contactanos {
    border-width: 3px;
    padding: 30px;
    text-align: center;
}

#contactanos h2 {
    color: blueviolet;
    margin-bottom: 20px;
}

#contactanos p {
    font-size: 22px;
    margin-bottom: 20px;
}

#contactanos a {
    background-color: rgb(34, 152, 57);
    color: white;
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-family: "Bebas Neue", serif;
    font-size: 20px;
    letter-spacing: 1px;
    margin: 10px;
    display: inline-block;
    transition: all 0.3s ease;
    border: 2px solid rgb(19, 109, 37);
}

#contactanos a:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(19, 109, 37, 0.3);
    background-color: rgb(19, 109, 37);
}
        
/* Responsive */
@media (max-width: 768px) {

.testimonios-grid {
    display: none;
}
            
.testimonios-carousel {
    display: block;
}

nav {
padding: 10px 15px;
    justify-content: center;
}

nav .izquierda, nav .derecha {
    gap: 15px;
    font-size: 18px;
}

#logo {
    height: 80px;
    margin: 0 20px;
}

h1 {
    font-size: 28px;
}

body h2 {
    font-size: 24px;
}

p {
    font-size: 18px;
}

#contactanos a {
    display: block;
    margin: 10px 0;
}
}

@media (max-width: 1024px) and (min-width: 769px) {

.testimonios-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 30px auto;
    }
}

@media (max-width: 480px) {
    nav {
    flex-direction: column;
    padding: 10px;
}

nav .izquierda, nav .derecha {
    gap: 15px;
    font-size: 18px;
}

#logo {
    height: 100px;
    margin: 10px 0;
}

h1 {
    font-size: 24px;
}

body h2 {
    font-size: 20px
}

section {
    padding: 15px;
    margin-bottom: 15px;
}

.testimonio blockquote p {
    
}

.testimonio cite {
    font-size: 14px;
}
}



/*Nosotros*/

.equipo-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.equipo {
    width: 300px;
    margin-bottom: 30px;
}
.foto-container {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
}

.foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid rgb(19, 109, 37);
    border-radius: 8px;
}
.overlay {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background-color: rgba(19, 109, 37, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 5px;
    padding: 20px;
}

.equipo:hover .overlay {
    opacity: 1;
}
.text {
    color: white;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    word-wrap: break-word;
}


.footer {
    background-color: rgb(255, 231, 253);
    text-align: center;
    font-size: 15px;
    box-sizing: border-box; 
    padding: 5px;
    margin: 0px; 
    width: 100%; 
    align-items: center;
    border-style: solid;
    border-color: rgb(255, 174, 87);

}

.footer p {
    
    text-align: center;
    font-size: 15px;
    
}