/* RESET Y BODY */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;transition:all 0.3s ease-in-out;}
body{background:#111;color:white;line-height:1.6;}

/* HEADER */
header{display:flex;justify-content:space-between;align-items:center;padding:15px 40px;background:black;position:sticky;top:0;z-index:1000;}
nav a{color:white;margin-left:20px;text-decoration:none;transition:0.3s;}
nav a:hover{color:#25D366;}

/* HERO */
.hero{height:100vh;background:url('images/carne-hero.jpg') center/cover no-repeat;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-attachment:fixed;}
.overlay{background:rgba(0,0,0,0.6);padding:50px 40px;border-radius:15px;text-align:center;max-width:700px;z-index:2;position:relative;}
.fade-in{opacity:0;transform:translateY(20px);animation:fadeIn 1s forwards;}
.delay-1{animation-delay:0.5s;}
.delay-2{animation-delay:1s;}
.delay-3{animation-delay:1.5s;}
@keyframes fadeIn{to{opacity:1;transform:translateY(0);}}
.hero h1{font-size:50px;margin-bottom:20px;}
.hero h2{font-size:35px;margin-bottom:15px;}
.hero p{font-size:18px;margin-bottom:25px;}
.hero .btn{display:inline-block;padding:15px 30px;font-size:18px;background:#25D366;color:white;text-decoration:none;border-radius:10px;transition:transform 0.3s,box-shadow 0.3s;}
.hero .btn:hover{transform:scale(1.05);box-shadow:0 5px 15px rgba(0,0,0,0.3);}
#particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;}

/* BANNER PROMOCIÓN */
.banner{background:#25D366;color:black;text-align:center;padding:15px;font-weight:bold;}

/* CARRUSEL DE PRODUCTOS */
.productos{padding:60px 20px;text-align:center;}
.carousel-container{max-width:800px;margin:0 auto;overflow:hidden;}
.carousel{display:flex;transition:transform 0.5s ease-in-out;}
.slide{min-width:250px;background:#222;border-radius:10px;overflow:hidden;margin-right:20px;opacity:0;transform:translateY(50px);transition:all 0.3s ease;}
.slide img{width:100%;display:block;}
.slide h3{text-align:center;padding:10px;}
.thumbnails{display:flex;justify-content:center;margin-top:15px;gap:10px;flex-wrap:wrap;}
.thumbnails img{width:80px;cursor:pointer;opacity:0.6;border-radius:5px;transition:0.3s;}
.thumbnails img.active{opacity:1;border:2px solid #25D366;}

/* TESTIMONIOS */
.testimonios{padding:50px;text-align:center;}
.testimonial-container{position:relative;max-width:600px;margin:0 auto;}
.testimonial{display:none;animation:fadeIn 1s;opacity:0;transform:translateY(30px);}
.testimonial.active{display:block;opacity:1;transform:translateY(0);}
.testimonial p{font-size:18px;margin-bottom:10px;}
.testimonial span{font-weight:bold;color:#25D366;}
.testimonial:hover{transform:scale(1.02);background:rgba(36,36,36,0.8);border-radius:10px;padding:15px;}

/* FORMULARIO */
.contacto{padding:50px;text-align:center;}
.contacto form{margin-top:20px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.contacto input{padding:10px;width:300px;border-radius:5px;border:none;font-size:16px;}
.contacto button{padding:10px 20px;background:#25D366;color:white;border:none;border-radius:5px;cursor:pointer;font-size:16px;transition:transform 0.3s;}
.contacto button:hover{transform:scale(1.05);}
.form-message{margin-top:15px;color:#25D366;font-weight:bold;}

/* BOTONES FLOTANTES */
.call-now, .whatsapp{position:fixed;bottom:20px;background:#25D366;color:white;font-size:25px;padding:15px;border-radius:50%;text-decoration:none;z-index:1000;transition:transform 0.3s, box-shadow 0.3s;}
.call-now{right:20px;display:none;}
.whatsapp{right:80px;}
.call-now:hover, .whatsapp:hover{transform:scale(1.1) translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,0.4);}

/* FOOTER */
footer{background:black;text-align:center;padding:20px;}

/* RESPONSIVE GENERAL */
@media(max-width:1024px){
  .hero h1{font-size:40px;}
  .hero h2{font-size:28px;}
}
@media(max-width:768px){
  .hero{height:70vh;background-position:center top;}
  .overlay{padding:30px 20px;border-radius:10px;}
  .hero h1{font-size:28px;}
  .hero h2{font-size:20px;}
  .hero p{font-size:16px;}
  .hero .btn{font-size:16px;padding:12px 20px;}
  .carousel{overflow-x:auto;flex-wrap:nowrap;}
  .slide{min-width:200px;margin-right:15px;}
  .thumbnails img{width:60px;}
  .call-now{display:block;}
}
@media(max-width:480px){
  .hero{height:60vh;}
  .overlay{padding:20px 15px;}
  .slide{min-width:180px;}
  .hero h1{font-size:24px;}
  .hero h2{font-size:18px;}
  .hero p{font-size:14px;}
  .hero .btn{font-size:14px;padding:10px 18px;}
}