/* ===== RESET ===== */

body{
margin:0;
font-family:'Segoe UI',sans-serif;
background:#eef5f2;
color:#333;
}


/* ===== HEADER ===== */


header{
background:linear-gradient(#9fe0c3,#5ec4b5);
color:white;
text-align:center;
padding:100px 20px;
}

header h1{
margin:0;
font-size:2.5em;
}

header p{
font-size:1.1em;
}

/* ===== LOGO ===== */

.logo{
width:90px;
height:90px;
border-radius:50%;
object-fit:cover;
margin-bottom:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* ===== HERO ===== */

.hero{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;

  background: linear-gradient(180deg,#4f8a74,#7faf9c);
  animation: colorFondo 20s ease-in-out infinite alternate;
}

@keyframes colorFondo{
  0%{
    filter: brightness(100%);
  }
  100%{
    filter: brightness(115%);
  }
}

.titulo{
font-weight: 700px;
letter-spacing: 4px;
font-size: 40px;
margin-bottom:10px;
animation:aparecer 1.5s ease;
}

.bienvenida{
font-size:26px;
margin-bottom:10px;
color: rgba(255,255,255,0.85);
animation:aparecer 2s ease;
}

.eslogan{
font-size:18px;
opacity:0.9;
margin-bottom:40px;
color: rgba(255,255,255,0.85);
animation:aparecer 2.5s ease;
}

/* ===== BOTONES ===== */

.botones{
  display: flex;
 justify-content:center;
  gap: 20px;
  align-items: center;
animation:subir 3s ease;
}

.btn{
padding:15px 30px;
background:white;
color:#2f4f4f;
text-decoration:none;
border-radius:30px;
border: none;
font-weight:bold;
transition:0.3s;
box-shadow:0 8px 20px rgba(0,0,0,0.15);
}
.btn{
transition: all 0.3s ease;
}
.btn:hover{
transform:scale(1.1);
background:#5e93b3;
color:white;
}

/* ===== CONTENEDOR PRODUCTOS ===== */

.contenedor{
max-width:1100px;
margin:40px auto;
padding:30px 20px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}





/* TARJETA PRODUCTO */

.producto{
background: #dd1b1b;;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
padding:15px;
text-align:center;
transition:transform 0.2s;

opacity:0;
animation:aparecer 0.8s ease forwards;
}

.producto:nth-child(1){animation-delay:0.1s;}
.producto:nth-child(2){animation-delay:0.2s;}
.producto:nth-child(3){animation-delay:0.3s;}
.producto:nth-child(4){animation-delay:0.4s;}
.producto:nth-child(5){animation-delay:0.5s;}
.producto:nth-child(6){animation-delay:0.6s;}

.producto{
  transition:0.3s;
}

.producto:hover{
  transform:translateY(-8px);
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
}
.producto img{
  transition:0.4s;
}

.producto:hover img{
  transform:scale(1.05);
}
.producto img{
width:100%;
border-radius:8px;
margin-bottom:10px;
}

.producto h3{
font-size:16px;
margin-bottom:5px;
}

.precio{
  font-size:20px;
  font-weight:bold;
  color:#ff4d94;
}
.productos{
  background:linear-gradient(to bottom,#ff3131,#f8f8f8);
  padding:40px;
}

/* BOTON WHATSAPP */

.boton{
display:inline-block;
background:#25D366;
color:#fff;
padding:10px 15px;
border-radius:6px;
text-decoration:none;
font-size:14px;
transition:0.2s;
}

.boton:hover{
background:#1ebe5d;
}

/* FOOTER */

footer{
text-align:center;
padding:20px;
font-size:14px;
color:#666;
}

/* RESPONSIVE TABLET */

/* ===== RESPONSIVE TABLET ===== */

@media (max-width:900px){

.titulo{
font-size:50px;
}

.bienvenida{
font-size:20px;
}

}

/* ===== RESPONSIVE CELULAR ===== */

@media (max-width:600px){

@media (max-width:600px){

.hero{
padding:60px 20px;
}

.titulo{
font-size:40px;
}

.bienvenida{
font-size:18px;
}

.eslogan{
font-size:14px;
}

}

.contenedor{
grid-template-columns:1fr;
}

.botones{
flex-direction:column;
}

.btn{
width:80%;
text-align:center;
}

}
/* ANIMACION APARECER */

@keyframes aparecer{
0%{
opacity:0;
transform:translateY(20px);
}

100%{
opacity:1;
transform:translateY(0);
}
}

/* ANIMACION SUBIR */

@keyframes subir{
0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}
}

.galeria-producto{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.tarjeta{
  background: white;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.tarjeta img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 15px;
}