/* Reset */
* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: 'Arial', sans-serif; background: #fffafc; color: #333;}

/* Header */
.header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 40px;
  background: rgba(255, 182, 193, 0.8);
  backdrop-filter: blur(10px);
  z-index: 1000;
}
.header .logo {font-size: 1.5em; font-weight: bold; color: #fff;}
.header ul {list-style: none; display: flex; gap: 20px;}
.header a {color: #fff; text-decoration: none; font-weight: bold;}

/* Carrusel */
.carousel {
  position: relative;
  margin-top: 80px;
  overflow: hidden;
  height: 600px;
}
.slides {display: flex; transition: transform 0.5s ease-in-out;}
.slide {min-width: 100%; transition: opacity 1s;}
.slide img {width: 100%; height: 600px; object-fit: cover;}
.prev, .next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,182,193,0.8); border: none; padding: 10px 15px;
  cursor: pointer; font-size: 2em; color: white; border-radius: 50%;
}
.prev {left: 20px;}
.next {right: 20px;}
.indicators {
  position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px;
}
.dot {
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  cursor: pointer; opacity: 0.6; transition: 0.3s;
}
.dot.active, .dot:hover {opacity: 1; background: #ff7aa8;}

/* Productos */
.productos {padding: 80px 20px; text-align: center;}
.productos h2 {color: #d63384; margin-bottom: 40px;}
.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; padding: 0 20px;
}
.card {
  background: #fff; padding: 20px; border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.card:hover {transform: translateY(-10px);}
.card img {width: 100%; border-radius: 15px; margin-bottom: 15px;}

/* Marcas */
.marcas {padding: 60px 20px; text-align: center; background: #fff0f6;}
.marcas h2 {color: #d63384; margin-bottom: 30px;}
.logos {display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;}
.logos img {background: #fff; padding: 10px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);}

/* Contacto */
.contacto {padding: 80px 20px; text-align: center;}
.contacto h2 {color: #d63384; margin-bottom: 20px;}
.contacto form {display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;}
.contacto input {
  padding: 10px; border: 2px solid #ff7aa8; border-radius: 25px; outline: none;
}
.contacto button {
  background: #ff7aa8; color: #fff; padding: 10px 20px; border: none;
  border-radius: 25px; cursor: pointer; transition: 0.3s;
}
.contacto button:hover {background: #d63384;}

/* Footer */
footer {background: #d63384; color: #fff; text-align: center; padding: 15px;}