    /*fuentes externas*/
    
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Poetsen+One&display=swap');


   /*estilo de titulo*/

h1{
    font-size: 500% ;
    text-align: center;
    color: red;
    font-family: "Poetsen One", sans-serif;
    font-weight: bold;
}

    /*estilo de subtitulo*/

h2{
    font-size: 200%;
    color: red;
    font-size: 300%;
}
h3{
    color: red;
}

    /*estilo de cuerpo*/

body{
    background-color: #ca791c;
}

    /*estilo de navegacion*/

nav{
    color: aliceblue;
}

   /*estilo de parrafo*/

p{
    font-size: 200%;
    color:rgb(107, 48, 0);
    font-family:'playfair';
}

    /*estilo de seccion*/

section{
   color:rgb(107, 48, 0)
}
     /*color del link*/
a:hover {
  color: #27f364;
  text-decoration: underline;
}
     /*fuente interna*/
@font-face {
    src: url(../static/PlayfairDisplay-VariableFont_wght.ttf);
    font-family:"Playfair" ;
}
.contenedor{
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  margin: 30px;
  padding: 30px;
  size: 100% 100vh;
}
.caja {
      background: #4CAF50;
      color: rgb(255, 0, 0);
      padding: 20px;
      margin: 10px;
}
/* Sección de galería */
.galeria-productos {
  padding: 20px;
  background-color: #ca791c;
}

.galeria-productos h2 {
  margin-bottom: 20px;
  font-size: 24px;
}

/* FLEXBOX aplicado aquí */
.contenedor-productos {
  display: flex;
  flex-wrap: wrap;       /* Permite que los productos bajen si no caben */
  gap: 100px;              /* Espacio entre productos */
  justify-content: flex-start; /* Alineación horizontal al inicio */
}

/* Cada producto */
.producto {
  background-color: #ca791c;
  border: 1px solid #ff0000;
  border-radius: 8px;
  padding: 10px;
  width: 200px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.producto:hover {
  transform: scale(1.05);
}

.producto img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.producto p {
  margin-top: 10px;
  font-weight: bold;
}
