.TECNMLOGO img{
    max-width: 20%; /*Tamaño de imagen*/
    height: auto;
    border-radius: 10px;
}

body { /*Estilos generales*/
    font-family: Arial, sans-serif; /*Define fuente del texto*/
    background-color: #f4f4f4; /*Color de fondo*/
    color: #333; /*Color del texto*/
    text-align: center; /*Centra el texto*/
    margin: 0;
    padding: 0;
}

h1 { /*Estilo del titulo*/
    color: #1B396A;
}

p {  /*Estilo del parrafo*/
    font-size: 18px;/*Aumenta el tamaño del texto en los parrafos*/
}

header {
    background-color: #1B396A; /*Fondo azul*/
    padding: 10px 0;  /*Agrega espacio arriba y abajo del header*/
}

nav ul {
    list-style: none; /*Quita los puntos(por defecto) de la lista*/
    padding: 0;
    margin: 0; /*Eliminan los espacios preterminados de la lista*/
    display: flex; /*Convierte la lista en un contenedor flexibles*/
    justify-content: center; /*Centra los elementos*/
}

nav ul li {
    margin: 0 15px; /*Agrega un espaciado de 15px entre 
    cada elemento de la lista*/
}

nav ul li a {
    color: white;
    text-decoration: none; /*Quita el subrayado (Por defecto) de
    los enlaces*/
    font-size: 18px;
    font-weight: bold; /*Texto en negrita*/
}

nav ul li a:hover { /*Es un pseudoelemento que aplica estilos cuando
    el usuario pasa el mouse sobre el enlace*/


    text-decoration: underline;/*Funcion que se realiza cuando la anterior
    condicion se cumple(Pasar el mouse), en este caso, se subraya*/
}
                                  /*SECCION DE LA CLASS HERO*/
.hero {
    text-align: center; /*Alineamos todo el contenido hero al centro*/
    padding: 50px 20px;
    background-color: #ffffff;
}

.hero img {
    max-width: 20%; /*Tamaño de imagen*/
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /*Sombra*/
}

.hero h2 {
    font-size: 28px;
    margin-top: 20px;
    color: #333;
}

.hero p {
    font-size: 18px;
    color: #666;
}
                                     /*BOTON*/
.button {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 24px;
    background-color: #1B396A;
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

                             /*SECCION DE PEOPLE*/
.people {
    text-align: center;
    padding: 50px 20px;
    background-color: #f4f4f4;
}

.people h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
}

.people-container {
    display: flex;
    justify-content: center;
    gap: 20px; /*Espaciado entre los elementos(tarjetas)*/
    flex-wrap: wrap; /*Indica que los elementos dentro de un display
    flex deben ajustarse a una nueva linea cuando no caben en la pantalla*/
}

.ppl {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 300px; /*Define el ancho maximo de las tarjetas, en este 
    caso 300px, si es mas pequeño se ajusta, si es mas grande no crece,
    evita que sean demasiado grandes, pero permite que se reduzcan en
    pantallas pequeñas*/
    text-align: center;
}

.ppl img {
    max-width: 100%;
    border-radius: 5px;
}

.ppl h3 {
    font-size: 22px;
    margin-top: 15px;/*Define el margen en la parte superior de un
    elemento*/
}

.service p {
    font-size: 16px;
    color: #666;
}

                    /*PAGINA RESPONSIVA A MOVILES*/
/*Agregamos Media Queries*/
/*Tablets o moviles*/
@media screen and (max-width: 768px) {
    .hero{
        padding: 30px 15px;
    }
    .hero h2{
        font-size: 24px;
    }
    .hero p{
        font-size: 16px;
    }
    .people-container{
        flex-direction: column;/*Cambia a una sola columna*/
        align-items: center;/*Centra los elementos*/
    }
    .people{
        max-width: 90%;
    }
}
/*Celulares pequeños*/
@media screen and (max-width: 480px) {
    .hero h2{
        font-size: 20px;
    }
    .hero p{
        font-size: 14px;
    }
    .button{
        font-size: 16px;
        padding: 10px 20px; 
    }
    .people h3{
        font-size: 20px;
    }
    .people p{
        font-size: 14px;
    }   
}

/*SECCION DE LA CALCULADORA*/
.calculator {
    
    max-width: 1000px;
    text-align: center;
    padding: 40px 20px;
    background-color: #e3f2fd;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    
}
.calculator h2{
    font-size: 24px;
    margin-bottom: 15px;
}
.calculator label{
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
}
.calculator input{
    text-align: center;
    width: 99%;
    padding: 10px;
    border:  1px solid #ccc; /*Pone el contorno interior del input*/
    border-radius: 5px;
    font-size: 16px;
}
.calculator button{
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #1B396A;
    color: white;
    border: none;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.calculator button:hover{
    background-color: #0056b3;
}
.calculator h3{
    margin-top: 20px;
    font-size: 22px;
}

/*BOTON DE HOME*/
#floating-button{ /*Agregamos # porque estamos modificando un id*/
    position: fixed;
    bottom: 20px;/*Lo coloca 20pc de la parte inferior*/
    right: 20px;/*Lo coloca 20px de la parte derecha*/
    background-color: #0056b3;
    color: white;
    border: none;/*sin borde*/
    border-radius: 40%; /*Hacemos boton redondo*/
    padding: 15px;/*Espaciado interno*/
    font-size: 16px;/*Tamaño del texto*/
    cursor: pointer;/*Manita al pasar el cursor encima*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3 ease;
}
#floating-button a{
    color: inherit;
}
.calculator-container {
    display: flex;
    justify-content: center;
    gap: 10px; /*Espaciado entre los elementos(tarjetas)*/
    flex-wrap: wrap; /*Indica que los elementos dentro de un display
    flex deben ajustarse a una nueva linea cuando no caben en la pantalla*/
}

.graphic-space canvas{
    border-radius: 10px;
    border: 1px solid #ccc;
    max-width: 600px;
    max-height: 600px;
}

.mets ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #1B396A;
    display: flex;
}

.mets li {
    position: relative; /* Necesario para el submenú */
}

.mets a {
    color: white;
    padding: 14px 20px;
    display: block;
    text-decoration: none;
}

.mets a:hover {
    background-color: #0056b3;
    transition: background-color 0.3s ease;
}

/* Submenú */
.dropdown {
    position: relative; /* Se añade para que el submenú se posicione correctamente */
}

.dropdown-content {
    display: none; /* Ocultar el submenú por defecto */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1B396A;
    min-width: 160px;
    z-index: 999; /* Para que aparezca por encima de otros elementos */
}

/* Mostrar el submenú con mouse */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Ajustes para los enlaces del submenú */
.dropdown-content li {
    width: 100%;
}

.dropdown-content a {
    width: 100%;
    padding: 12px 16px;
    white-space: nowrap; /* Evita que los textos se dividan en varias líneas */
}