/*css externo de productos*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

@font-face {
  font-family: 'TT Fors Trial Regular';
  src: url("../fuentes/TT Fors Trial Regular.ttf");
}

h1,h2, h3, h4{
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
}

@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* TÍTULOS  */
#sal{
    text-align: center;
}

#dul{
    text-align: center;
}
/* TÍTULO ESPECIALES */
#ed{
    text-align: center;
}
/* GENERAL */
body{
    background-color: #80739e;
}
img{
    border-radius: 3%;
}
p, h5{
    font-family: 'TT Fors Trial Regular';
}

/* CAJAS SALADAS */
.salado{
    background-color: rgb(196, 218, 250);
    border: 2px solid #ccc;
    border-radius: 8px;
}

.PSalado{
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    margin:15px 0;
    background-color: rgb(77,130,188);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    opacity: 0.9;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.PSalado:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  opacity: 1;
}

.contenedor-salado {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
gap:20px;
}

/* CAJAS DULCES */
.Dulce{
    background-color: rgb(245, 215, 223);
    border: 2px solid #ccc;
    border-radius: 8px;
}

.Pdulce{
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    margin:15px 0;
    background-color: rgb(245,149,151);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 90%;  
}
.Pdulce:hover{
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  opacity: 100%;  
}

.TartasFrutales:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  opacity: 100%;
}

.TartasFrutales{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border: 2px solid #33001f;
    border-radius: 8px;
    padding: 15px;
    margin:15px auto;
    background-color: rgb(252, 105, 152);
    box-shadow: 0 4px 6px rgba(252, 105, 152);
    opacity: 90%;
    width: 350px;
    text-align: center;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contenedor-tartas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
gap:20px;
}

/* CAJAS ESPECIALES */
.Edicion{
    background-color: rgb(246, 246, 197);
    border: 2px solid #ccc;
    border-radius: 8px;
}
.PEsp {
  border: 3px solid transparent;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
  background: linear-gradient(135deg, rgb(254, 235, 231), rgb(228, 193, 128));
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: bordes 4s linear infinite;
   opacity: 90%;
}

@keyframes bordes {
  0%   { border-color: #ff8c8c; }
  25%  { border-color: #f6c56c; }
  50%  { border-color: #90ee90; }
  75%  { border-color: #8ecae6; }
  100% { border-color: #ff8c8c; }
}

.PEsp:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
   opacity: 100%;
}

.PEsp img{
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.contenedor-edicion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
gap:20px;
}

/*El responsive es para que los productos se vean bien en cualquier dispositivo -Dani*/


/* Tablets (pantallas medianas) */
@media (max-width: 992px) {
  .PSalado, .Pdulce, .PEsp, .TartasFrutales {
    width: 45%; /* dos productos por fila */
  }

  h1, h2 {
    font-size: 1.8rem;
  }
}

/* Celulares (pantallas pequeñas) */
@media (max-width: 600px) {
  .PSalado, .Pdulce, .PEsp, .TartasFrutales {
    width: 90%; /* un producto por fila */
  }

  .contenedor-salado,
  .contenedor-tartas,
  .contenedor-edicion {
    flex-direction: column;
    align-items: center;
  }

  img {
    width: 100%;
    height: auto;
  }

  h1, h2 {
    font-size: 1.5rem;
  }

  p, h5 {
    font-size:0.9rem;
  }
}