/* Reset de css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Sin congiguracion el rem vale: */
  /* 1rem = 16px */

  /* Para que 1 rem = 10px */
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

/* fr — fracciones del espacio disponible
Es la unidad más característica de Grid.
Representa una fracción del espacio libre disponible.
 💡 Ideal para hacer layouts flexibles y proporcionados. */

/* px, em, rem — unidades fijas
Usan un tamaño exacto, no se adaptan al espacio disponible. 
💡 Útiles para cosas que no deben achicarse, como un sidebar.*/

/* % — porcentaje del contenedor
El tamaño se calcula en función del ancho total del contenedor. 
💡 Menos usado que fr, pero fácil de entender si ya conocen porcentajes.*/

/* auto — se adapta al contenido
La celda toma el tamaño del contenido más grande de esa columna o fila. */

/* Podés mezclar distintas unidades en una misma grilla: 
grid-template-columns: 200px 1fr 2fr auto;

Primera columna fija en 200 px.
Segunda y tercera comparten el espacio libre (1 y 2 partes).
Cuarta se adapta al contenido.

fr reparte lo que sobra después de asignar los tamaños fijos (px, auto, etc.).
*/

/* Contenedor principal con Grid */

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
  grid-template-columns: 3fr 1fr; /* main más ancho que aside */
  grid-template-rows: 150px 1fr 60px;
  gap: 10px;
  min-height: 100vh;
  padding: 10px;
}

/* Áreas nombradas */
header {
  grid-area: header;
  background: #4caf50;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10 20px;
}


/* Áreas nombradas */
main {
  grid-area: main;
  background: #ddd;
  padding: 20px;
}

/* Áreas nombradas */
aside {
  grid-area: aside;
  background:white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Áreas nombradas */
footer {
  grid-area: footer;
  background: #333;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* -------------------------------------------------------------------------- */
/*                                Header                           */   
/* -------------------------------------------------------------------------- */


header h2 {
  font-size: 4rem;
  margin-top: 1 ;
  letter-spacing: 10px;
}

header p {
  font-size: 2rem;
  margin: 0.5rem;
}

/* nav dentro del header */
header nav ul {
  list-style: none;
  padding:1px;
  margin: 5px 0 0;
  display: flex;
  gap: 15px;
}

header nav a {
  color: white;
  font-size: 1.8rem;
  text-decoration: none;
  font-weight: bold;
  padding: 1px ;  
}

header nav a:hover {
  color: #151514;
}

/* -------------------------------------------------------------------------- */
/*                                Galeria Productos                            */   
/* -------------------------------------------------------------------------- */


main h1{
  font-size:5rem;
  text-align: center;
  margin: 2rem 0;
}

main h2 {
  font-size:3rem;
  background-color: #f0db21;
  text-align: center;
  margin: 2rem 0;
  padding: 0.8rem;
}

main h3 {
font-size: 2rem;
text-align: center;
margin-bottom: 2rem;
padding: 1rem;
background-color: #f0db21;
}

.contenedor-tarjetas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.tarjeta-producto {
  background-color: #f0db21;
  padding: 1rem;
  border-radius: 3rem;
  width: 20rem;
  height: auto;
  border: #1d1a20 3px solid;
  /* hacemos flexibles los elementos del article */
  /* los colocamos en columna y centrados */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* separacion */
  gap: 1rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.tarjeta-producto:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
   cursor: pointer;
}


.tarjeta-producto h3 {
  font-size: 3rem;
  color: #1d1a20;
  text-align: center;
}

.tarjeta-producto p {
  font-size: 2rem;
  font-weight: bold;
  color: black;
  text-align:center ;
}

.tarjeta-producto img {
  width: 100%;
  height: 80%;
  border-radius: 3rem;
}


.aside{
  display: flex;
}

.aside-home {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  text-align: center;
}



.aside-parrafo {
  font-size: 1.5rem;
  text-align: justify;
  line-height: 1.5;  
}


/* -------------------------------------------------------------------------- */
/*                                  Contacto                                  */
/* -------------------------------------------------------------------------- */

.grid-contacto {
  display: grid;
  grid-template-areas:
    "header header"
    "main   main"
    "footer footer";
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 150px 1fr 60px;
  gap: 10px;
  min-height: 100vh;
  padding: 10px;
}

.seccion-contacto {
  width: 100%;
  margin: 2rem auto;
}

.titulo-contacto {
  font-size: 4rem;
  text-align: center;
  margin: 2rem 0;
}

.form {
  background: #4caf50;
  padding: 5rem;
  border-radius: 1rem;
  width: 30%;          /* ✅ en escritorio se ve más angosto */
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.campo-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.campo-form label {
  font-size: 2rem;
}

.campo-form input,
.campo-form textarea {
  padding: 1rem;
  font-size: 1.6rem;
  border-radius: 0.5rem;
  border: none;
}

.form button {
  background-color: #d21f3c;
  color: #e5e6e8;
  border: none;
  padding: 1rem;
  font-size: 2rem;
  font-weight: bold;
  border-radius: 0.5rem;
  cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/*                           📱 Media Queries                                 */
/* -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 768px) {
  .grid-contacto {
    grid-template-columns: 1fr;   /* ✅ todo a una sola columna */
    grid-template-rows: auto auto auto;
  }

  .form {
    width: 70%;      /* ✅ formulario más ancho */
    padding: 3rem;
  }

  .titulo-contacto {
    font-size: 3rem;
  }

  .campo-form label {
    font-size: 1.6rem;
  }
}

/* Celular */
@media (max-width: 480px) {
  .form {
    width: 95%;      /* ✅ ocupa casi toda la pantalla */
    padding: 2rem;
  }

  .titulo-contacto {
    font-size: 2.2rem;
    margin: 1.5rem 0;
  }

  .campo-form label {
    font-size: 1.4rem;
  }

  .campo-form input,
  .campo-form textarea {
    font-size: 1.2rem;
    padding: 0.8rem;
  }

  .form button {
    font-size: 1.4rem;
    padding: 0.8rem;
  }
}