/* BODY */
body {
  font-family: Arial, Helvetica, sans-serif;/*estilo de la letra*/
  background: #f5f5f5;
}

/* HEADER */
header {
  width: 100%;
  height: 130px;  /* Altura del encabezado */
  background: #111; /* Fondo negro */
  display: flex; /*pr*/
  justify-content: space-between; /* Separa los elementos */
  align-items: center; /* Centra verticalmente */

}

/* LOGO */
.logo img {
  width: 140px; /*ancho de la img*/
  box-shadow: 30px 9px 44px -3px rgba(0,0,0,6.1); /*sobra de la img*/
}

/* NAV */
nav {
  display: flex;
  gap: 10px; /*separacion de los enlaces*/
padding: 15px; /*espacio interno*/
}

/* LINKS */
nav a {
  color: white; /*color de la letra*/
  text-decoration: none; /*quita el subrayado del enlace*/
  font-size: 18px; /*tamaño de la letra*/
  transition: 0.3s; 
}

nav a:hover {
  color: gray; /*el mause pasa por el enlace cambia de color*/
}

/* MAIN */
main {
  margin-top: 120px;/*deja espacio en la marte de arriba*/
  display: flex;
  flex-direction: row; /*coloca los elementos en fila*/
  align-items: center;/*centra los elementos*/
  justify-content: center;/*los centra pero horizontal mente*/
}

/* HERO */
.hero {
  display: flex;
  flex-direction: column;/*coloca el titulo y el texto uno debajo del otro*/
  align-items: center;
}

.hero h1 {
  font-size: 50px;/*tamaño de la letra del titulo*/
}

.hero p {
  font-size: 20px;/*tamaño de el texto*/
}
main img {
  width: 300px;/*tamaño de las img*/
  background: rgb(247, 247, 247);/*fondo da las img*/
  border-radius: 20px;/*redondiado de los bordes de las img*/
  padding-left: 30px;
  padding-right: 30px;
}


/* PRODUCTOS */
.productos {
  padding: 40px;/*espacio entre los elementos*/
}

.card {
  width: 300px;/*ancho*/
  background: white;/*color de fondo*/
  padding: 20px;
  border-radius: 10px;/*redondea las esquinas del boton*/
}

.card img {
  width: 100%;/*ancho de la img*/
  border-radius: 10px;/*bordes redondiados*/
}

/* FOOTER */
footer {
  background: #111;/*color de fondo*/
  color: white;/*color de las letras*/
  text-align: center;/*centra el texto*/
  padding: 20px;
  margin-top: 50px;/**/
}

footer img {
  height: 50px;
}


/* todos los archivos */
.tablaboto {
  margin-top: 20px;/*espacio en la parte de ariba*/
  display: flex;
  flex-direction: column;/*los elemento se colocan uno debajo del otro*/
  align-items: center;/*alinea los elementos en el centro*/
}
/*diseño del la tabla*/
table td {
  padding: 8px;
  text-align: center;/*los elementos se centran*/
  border: solid 2px;/*los elementos se cuadran*/
}

button {
  display: flex;
  background-color: rgb(0, 0, 0);/*color de fondo*/
}


.adepro{
  text-decoration: none;
  color: #f5f5f5;
   transition: 0.4s;/*efecto del boton*/
}
.adepro :hover {
  transform: scale(1.1);/*mouse pasa por arriba ase un efecto de transicion*/
}
/*diseño del section*/
.lol {
  display: flex;
  flex-direction: row;/*elementos ordenados en fila*/
  align-items: center;/*los elementos se centran*/
}
/*formulario diseño*/


/*main fromulario*/
.main-from {
  flex: 1;/*centra los elementos horizontal y vertical*/
  display: flex;/*sirve para mover los elementos*/
  justify-content: center;/*sirve para certra los elementos y dejar espacios entre ellos*/
  align-items: center;/*centra los items*/
  padding: 20px;/*espacio entre los elemenos*/
  background: #f5f5f5;
}

/*fromulario*/
form {
  background: white;
  padding: 30px;/*espacio entre los elemntoss*/
  border-radius: 10px;/*redondea las esquinas*/
  width: 350px;/*ancho del foemulario*/
}

input {
  width: 100%;/*el ancho del input*/
  padding: 10px;/*espacio etre los items*/
  margin-top: 5px;/*espacio de arriba*/
}

/*boton de fromulario*/
.boton-formula{
  width: 100%;/*ancho del boton*/
  padding: 12px;/*esapacio entre los elementos*/
  margin-top: 20px;/*espacio de arriba*/
  background: black;
  color: white;
}
.antor{
  width: 100;/*tamaño del voton*/
  padding: 12px;/*epacio entre los contenido*/
  margin-top: 20px;/*espacio ariba*/
  background: black;
  color: white;
  display: flex;
  text-decoration: none;/*savar el subrayado de enlace*/
}