@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform:none;
    text-decoration: none;
}

/*// <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name*/

body {
	background-color: #aaaaaa;
    background-image: url(fondo2.png);
    background-repeat:repeat;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	display:flex;
	justify-content: center;
	}
 
header {
     width: 1270px;
     height:500px;
     margin-top: 80px;
     padding: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
    /*border: 2px solid black; /* Para visualizar el div */
    }    
/********CONTAINER PRINCIPAL********CONTAINER PRINCIPAL********CONTAINER PRINCIPAL********CONTAINER PRINCIPAL********CONTAINER PRINCIPAL*********/

.containerprincipal {
	background-color:rgb(200, 202, 202);
    background-image: url(fondo_industrial.png);
    /*background:no-repeat;*/ /*si se activa no muestra la imagen*/
    background-position: top;
    background-size:contain;
    background-repeat: no-repeat;
    width:1270px;
    height:auto; /* si se activa se desordenan verticalmente los items*/
	margin: 0 auto;
    align-items:flex-start;
    align-content: flex-start;
	display:flex;
    flex-direction: column;
   /* grid-template-rows:repeat(3,1fr);
    row-gap: 5px;*/
	/*flex-direction: column;*/
	justify-content:flex-start; /*agrupa los items desde el inicio hacia abajo*/
    place-items:center; /*esta propiedad es para grid, aqui puede haber conflicto*/
    align-items: center; /*hace que los elementos estén centrados horizontalmente pero pegados arriba*/
    z-index: 1;
	}

.containerprincipal_com {
	background-color:rgb(200, 202, 202);
    background-image: url(fondo_comercial.png);    
    background-position: top;
    background-size:contain;
    background-repeat: no-repeat;
    width:1270px;
    height:auto; /* si se activa se desordenan verticalmente los items*/
	margin: 0 auto;
    align-items:flex-start;
    align-content: flex-start;
	display:flex;
    flex-direction: column;
	justify-content:flex-start; /*agrupa los items desde el inicio hacia abajo*/
    place-items:center; /*esta propiedad es para grid, aqui puede haber conflicto*/
    align-items: center; /*hace que los elementos estén centrados horizontalmente pero pegados arriba*/
    z-index: 1;
	} 

.containerprincipal_vehicular {
	background-color:rgb(200, 202, 202);
    background-image: url(fondo_vehicular.png);    
    background-position: top;
    background-size:contain;
    background-repeat: no-repeat;
    width:1270px;
    height:auto; /* si se activa se desordenan verticalmente los items*/
	margin: 0 auto;
    align-items:flex-start;
    align-content: flex-start;
	display:flex;
    flex-direction: column;
	justify-content:flex-start; /*agrupa los items desde el inicio hacia abajo*/
    place-items:center; /*esta propiedad es para grid, aqui puede haber conflicto*/
    align-items: center; /*hace que los elementos estén centrados horizontalmente pero pegados arriba*/
    z-index: 1;
	}   
    
.containerprincipal_editorial {
	background-color:rgb(200, 202, 202);
    background-image: url(fondo_editorial.png);    
    background-position: top;
    background-size:contain;
    background-repeat: no-repeat;
    width:1270px;
    height:auto; /* si se activa se desordenan verticalmente los items*/
	margin: 0 auto;
    align-items:flex-start;
    align-content: flex-start;
	display:flex;
    flex-direction: column;
	justify-content:flex-start; /*agrupa los items desde el inicio hacia abajo*/
    place-items:center; /*esta propiedad es para grid, aqui puede haber conflicto*/
    align-items: center; /*hace que los elementos estén centrados horizontalmente pero pegados arriba*/
    z-index: 1;
	}    
    
.containerprincipal_logo {
	background-color:rgb(200, 202, 202);
    background-image: url(fondo_logo.png);    
    background-position: top;
    background-size:contain;
    background-repeat: no-repeat;
    width:1270px;
    height:auto; /* si se activa se desordenan verticalmente los items*/
	margin: 0 auto;
    align-items:flex-start;
    align-content: flex-start;
	display:flex;
    flex-direction: column;
	justify-content:flex-start; /*agrupa los items desde el inicio hacia abajo*/
    place-items:center; /*esta propiedad es para grid, aqui puede haber conflicto*/
    align-items: center; /*hace que los elementos estén centrados horizontalmente pero pegados arriba*/
    z-index: 1;
	}   
    
.containerprincipal_web {
	background-color:rgb(200, 202, 202);
    background-image: url(fondo_web.png);    
    background-position: top;
    background-size:contain;
    background-repeat: no-repeat;
    width:1270px;
    height:auto; /* si se activa se desordenan verticalmente los items*/
	margin: 0 auto;
    align-items:flex-start;
    align-content: flex-start;
	display:flex;
    flex-direction: column;
	justify-content:flex-start; /*agrupa los items desde el inicio hacia abajo*/
    place-items:center; /*esta propiedad es para grid, aqui puede haber conflicto*/
    align-items: center; /*hace que los elementos estén centrados horizontalmente pero pegados arriba*/
    z-index: 1;
	}  
    
.containerprincipal_email {
	background-color:rgb(200, 202, 202);
    background-image: url(fondo_email.png);    
    background-position: top;
    background-size:contain;
    background-repeat: no-repeat;
    width:1270px;
    height:auto; /* si se activa se desordenan verticalmente los items*/
	margin: 0 auto;
    align-items:flex-start;
    align-content: flex-start;
	display:flex;
    flex-direction: column;
	justify-content:flex-start; /*agrupa los items desde el inicio hacia abajo*/
    place-items:center; /*esta propiedad es para grid, aqui puede haber conflicto*/
    align-items: center; /*hace que los elementos estén centrados horizontalmente pero pegados arriba*/
    z-index: 1;
	}    
/********CONTAINER PRINCIPAL********CONTAINER PRINCIPAL********CONTAINER PRINCIPAL********CONTAINER PRINCIPAL********CONTAINER PRINCIPAL*********/    

.container {
    max-width: 1270px;
    margin: 0 auto;
    /*background-color: #FD5D47;*/
}

.menu {
    background-color: rgb(0, 0, 0);
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}

.menu .logo {
    font-weight: 300;
    font-size: 16px;
    color: #ff9900;
    padding-left: 20px;    
}

.menu .navbar ul {
    list-style: none;
}

.menu .navbar ul li {
    background-color: rgb(0, 0, 0);
    position: relative;
    float: left;
}

.menu .navbar ul li a {
    font-size: 20px;
    font-weight: 400;
    padding: 20px;
    color: #ffffff;
    display: block;
}

.menu .navbar ul li a:hover {
    color: #ffffff;
    background-color: #3d3d3d;
    font-size: 20px;
    font-weight: 400;
}

#menu {
    display: none;
}

.menu-icono {
    width: 25px;
}

.menu label {
    cursor: pointer;
    display: none;
}

nav ul li a.active {
    border-bottom: 3px solid #ff9900; /* Grosor y color de la línea */
}


.btn-1 {
    display: inline-block;
    background-color: #ff9900;
    margin-top: 35px;
    padding: 15px 25px;
    border-radius: 25px;
    color: #FFFFFF;
}

.btn-1:hover {
    background-color: #ff9900;
}

/****************************header*****************************************/

.header-text {
    width: 1270px;
    height:500px; /* O cualquier altura necesaria */
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;    
    /*border: 2px solid black; /* Para visualizar el div */
}

.header-text h1 {
    color: #00158d;
    font-size: 28px;
    text-align:center;
    font-weight:500;
}

.header-text p {
    color: #00158d;
    text-transform:none;
    font-size: 22px;
    text-align:justify;
}

/*************************** galeria ***************************************/

.gallery {
    margin-top: 15px;
    width: 1400px;
    /*background-color: blueviolet;*/
    display: grid;   
    grid-template-columns: repeat(auto-fit, 250px); /* 1. Columnas de tamaño fijo (250px) */ 
    grid-auto-rows: minmax(auto, 250px);   /* 2. Filas con un alto máximo de 250px */ 
    gap: 5px;  /* 3. Espaciado entre imágenes */
    justify-content: center;  /* Centrar la tabla si sobra espacio en la pantalla */
    z-index: 1;
}


.gallery img {
    width: 100%;         /* Que ocupe todo el ancho de la columna */
    height: 100%;
    /*max-height: 250px;   /* Tu límite de largo máximo */
    object-fit:contain;   /* Crucial: ajusta la imagen para que llene el espacio sin deformarse */
    background-color: #00000080; /* 80 al final es 50% de transparencia */
}

/************************** footer *************************************/
footer {
    width: 1270px;
    height: auto;
    margin-top: 20px;
    padding-top: 10px;
    background-color: #000000;
    color: #FFFFFF;
    font-size: medium;
    padding: 0;
    display:flex;
    flex-direction: column;   
}

.form_y_enlaces {
    width: 1270px;
    height:auto;
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 5px;
    background-color: rgb(0, 0, 0);
    padding-top:15px;
}


.form {
  display:block;
  width:50%;;
  text-align: left;
  height: auto;
  background-color: rgb(0, 0, 0);
  margin-bottom:15px;
  float: left;
}

.form h2 {
  margin-top: 10px;
  width: 100%;
  height: 25px;
  background-color: #000000;
  text-align: center;
  font-size:20px;
  color:#ff9900;
  font-weight: 400;
}

form p {
  margin-top: 10px;
  margin-left: 8%;
  }

/*form p label {
  text-align: left;
  color: #eb7100;
}*/

.enviar {
    background-color:#ff9900;
    padding: 10px 10px;
    width: 90px;
    height: 50px;
    border: 0px;
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    
}

.enviar:hover {
    background-color:#9c9c9c;   
}

.textfield {
    width: 90%;       /* Ancho completo del contenedor */
    max-width: 90%;  /* Ancho máximo */
    padding: 1px;     /* Alto interior */
    font-size: medium;
    font-weight: 400;
}

.textfieldcomentario {
    width: 90%;       /* Ancho completo del contenedor */
    max-width: 90%;  /* Ancho máximo */
    padding: 1px;     /* Alto interior */
    font-size: medium;
    font-weight: 400;
}

/*.enlaces {
  display:flex;
  width: 100%;
  height: 200px;
  flex-direction: column;
  align-content:center;
  align-items: center;
  background-color: rgb(0, 0, 0);
}*/

.botones_enlaces {
   width:100;
   height: 100%;
   display: flex;
   justify-content: space-around;
   align-content: flex-end;
   align-items: flex-end;
   margin:5px;
   padding-left:5%;
   padding-right:5%;
  }


/****HOY****HOY****HOY****HOY****HOY****HOY****HOY****HOY****HOY****HOY****HOY******/

.enlaces {
  display:flex;
  text-align: center;  
  justify-content:center ;
  align-items: center;
  width:50%;
  height: auto;
  padding: 10px;
  background-color: rgb(0, 0, 0);
  float: right;
}

.profile {
    background-image:url(perfil.png);
    background-repeat: no-repeat;
    background-size:contain;
    width: 80px;
    height: 80px;
    background-color: #000000;
}

.botones_enlaces {
   width:90px;
   height: 380px;
   display: flex;
   justify-content:center;
   align-content:flex-start;
   align-items:center;
   flex-direction: column;
   margin-left: 20px;
   border-left-color: #ff9900;
   border-right-color:#000000;
   border-top-color: #000000;
   border-bottom-color: #000000;
   border-style:solid;
   border-width: 1px;
   background-color: #000000;
  }

  /****HOY****HOY****HOY****HOY****HOY****HOY****HOY****HOY****HOY****HOY****HOY****/

.boton_enlace {
    width: 50px;
    height: 50px;
    margin: 15px;
    align-items: center; /* Centrado vertical */
    z-index:4 ;
    background-color: rgb(0, 0, 0);
}

.firma {
    width: 100%;
    height: auto;
    text-align: center;
    font-size:large;
    font-weight: 400;
    color:#ff9900;
    margin-bottom: 20px;

}




/****** @media****** @media****** @media****** @media****** @media****** @media****** @media****** @media****** @media****** @media****** @media****** @media****** @media*******/

@media(max-width:1440px) {

    .containerprincipal {
	/*background-color: #00FF00;*/
	margin: 0 auto;
	display: flex;
	width: 100%;
    background-position-y: 20px;
	justify-content: center;
    align-items: center;
	}

    header {
     width: 95%;
     height:auto;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
     /*border: 2px solid rgb(0, 255, 234); /* Para visualizar el div */
    }  

    .menu {
        padding: 20px;
    }

    .menu label {
        display: initial;
    }

    .menu .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #2D2F3A;
        display: none;
    }

    .menu .navbar ul li {
        width: 100%;
    }

    .menu .navbar ul li a {
    font-size: 20px;
    font-weight: 400;
    }

    .menu .navbar ul li a:hover {
    color: #ffffff;
    background-color: #3d3d3d;
    font-size: 20px;
    font-weight: 400;
    }

    #menu:checked ~ .navbar {
        display: initial;
    }

    .menu-icono.close { /* Ocultamos la X por defecto */
    display: none;
    }

    /* Cuando el checkbox esté marcado... */
    #menu:checked ~ label .burger {
    display: none; /* Esconde la hamburguesa */
    }

    #menu:checked ~ label .close {
    display: initial; /* Muestra la X */
    }

    /********************** Container principal*********************************/

    .containerprincipal_logo {
	background-image: url(fondo_logo.png);    
    background-position: top;
    background-position-y: 20px; /*baja la imagen*/
	}    

    .containerprincipal_email {
	background-image: url(fondo_email.png);    
    background-position: top;
    background-position-y: 15px; /*baja la imagen*/
	}  


    /****************************header*****************************************/

.header-text {
    width: 100%;
    height: auto; /* O cualquier altura necesaria */
    margin-top: 28%;
    display: flex;
    flex-direction: column;
    align-items:end;
    /*border: 2px solid black; /* Para visualizar el div */
}

.header-text h1 {
    color: #eb7100;
    font-size: 22px;
    text-align:center;
    font-weight:400;
}

.header-text p {
    width:100%;
    height:auto;
    color: #00158d;
    text-transform:none;
    font-size:medium;
    text-align:justify;
}

/****************************************************************************/
    .gallery {
    margin-top: 15px;
    width: 95%;
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* Define 3 columnas de igual tamaño */
    grid-template-rows:subgrid; /*permite que un elemento hijo adopte la misma estructura de filas (o columnas) que su contenedor padre*/
    gap: 8px;  /* Espaciado entre imágenes, se hereda alos hijos */
    justify-content: center;  /* Centrar la tabla si sobra espacio en la pantalla */
    }

    .gallery a {
    aspect-ratio: 1 / 1;   /* La altura se basa en el ancho y mantiene la proporcion*/
    }

    .gallery img {
    width: 100%;          /* Que ocupe todo el ancho de la columna */
    height: 100%;
    object-fit:contain;   /* Crucial: ajusta la imagen para que llene el espacio sin deformarse */
    background-color: #00000080; /* 80 al final es 50% de transparencia */
    display: block; /*ignora el espaciado heredado del padre*/
    }

/************************************************************************************/    

    footer {
    width: 95%;
    height: auto;
    margin-top: 20px;
    padding-top: 10px;
    background-color: #000000;
    color: #FFFFFF;
    font-size: medium;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-items: center;
    }

    .form_y_enlaces {
    width: 95%;
    height:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-content: center;
    align-items: center ;
    justify-items: center;
    gap: 5px;
    background-color: rgb(0, 0, 0);
}

    .form {
    display:block;
    width: 95%;
    text-align: left;
    height: auto;
    background-color: rgb(0, 0, 0);
    justify-content: center;
    margin-bottom: 15px;
    }

    .form h2 {
    margin-top: 10px;
    width: 100%;
    height: 25px;
    background-color: #000000;
    text-align: center;
    font-size:20px;
    color:#ff9900;
    font-weight: 400;
    }

    form p {
    margin-top: 10px;
    /* margin-left: 8%;*/
     }

    /*form p label {
    text-align: left;
    color: #eb7100;
    }*/

    .enviar {
    background-color:#ff9900;
    padding: 10px 10px;
    width: 90px;
    height: 50px;
    border: 0px;
    font-size: 18px;
    font-weight: 400;
    color: #000000;    
    }

    .textfield {
    width: 90%;       /* Ancho completo del contenedor */
    max-width: 90%;  /* Ancho máximo */
    padding: 1px;     /* Alto interior */
    font-size: medium;
    font-weight: 400;
    }

    .textfieldcomentario {
    width: 90%;       /* Ancho completo del contenedor */
    max-width: 90%;  /* Ancho máximo */
    padding: 1px;     /* Alto interior */
    font-size: medium;
    font-weight: 400;
    }

    .enlaces {
    display:flex;
    text-align: center;
    flex-direction:column;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    width: 100%;
    height: auto;
    background-color: rgb(0, 0, 0);
    padding:0px;
    float: none;
    }

    .profile {
    background-image:url(perfil.png);
    background-repeat: no-repeat;
    background-size:contain;
    width: 80px;
    height: 80px;
    margin-top: 25px;
    background-color: #000000;
    display:flex;
}

   .botones_enlaces {
   width:85%;
   height:70px;
   display: flex;
   flex-direction: row;
   justify-content:space-evenly;
   align-content:center;
   align-items:center;
   margin-top: 20px;
   margin-left: 0px;
   border-left-color: #000000;
   border-right-color:#000000;
   border-top-color: #ff9900;
   border-bottom-color: #000000;
   border-style:solid;
   border-width: 1px;
   background-color: rgb(0, 0, 0);
   position:relative;
  }

  .boton_enlace {
    width: 50px;
    height: 50px;
    margin: 1px;
    align-items: center; /* Centrado vertical */
    z-index:4 ;
    background-color: rgb(0, 0, 0);
}

  .firma {
    width: 100%;
    height: auto;
    text-align: center;
    font-size:large;
    font-weight: 400;
    color:#ff9900;
    margin-bottom: 15px;
    margin-top: 15px;

}



 
  
    
}