/* ===== RESET ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Poppins', sans-serif; background: #f5f5f5; color: #333; }

/* ===== CABECERA ===== */
.cabecera {
    background: linear-gradient(90deg, #1f2a44, #283550);
    padding: 10px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.cabecera .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 0 20px; }
.logo { width: 180px; transition: transform 0.3s; }
.logo:hover { transform: scale(1.05); }

/* ===== BUSCADOR ===== */
.buscador { display: flex; align-items: center; background: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: transform 0.3s; }
.buscador:hover { transform: scale(1.03); }
.buscador input { border: none; padding: 8px 15px; font-size: 16px; outline: none; width: 200px; }
.buscador button { background: #cfa14b; border: none; color: #fff; padding: 8px 15px; cursor: pointer; font-size: 18px; transition: 0.3s; }
.buscador button:hover { background: #e0be6a; transform: scale(1.1); }

/* ===== MENÚ ===== */
.menu { display: flex; gap: 20px; font-weight: 600; }
.menu a { color: #fff; text-transform: uppercase; font-size: 18px; transition: color 0.3s, text-shadow 0.3s; }
.menu a:hover { color: #cfa14b; text-shadow: 0 0 6px #cfa14b; }
.menu-toggle { display: none; background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; }

/* ===== CARRUSEL ===== */
.carousel { 
  margin-top: 90px; /* Deja espacio desde la parte superior */
  position: relative;
  height: 500px; /* Mantiene la altura fija */
  width: 100%; /* El carrusel ocupa todo el ancho disponible */
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 4px 25px rgba(0,0,0,0.3);
}

.carousel-slide { 
  position: absolute;
  width: 100%; /* Las imágenes ocuparán todo el ancho del carrusel */
  height: 100%; /* Las imágenes ocuparán toda la altura del carrusel */
  opacity: 0; 
  transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
}

.carousel-slide.active {
  opacity: 1;
  transform: scale(1.02);
}

.carousel-slide img {
  width: 100%; /* Las imágenes se estiran para cubrir todo el ancho */
  height: 100%; /* Las imágenes se estiran para cubrir toda la altura */
  object-fit: cover; /* Asegura que las imágenes se ajusten sin deformarse */
}

/* ===== PRODUCTOS ===== */
.seccion { padding: 80px 20px; }
.seccion h2 { text-align: center; font-size: 36px; margin-bottom: 40px; color: #1f2a44; }
.productos-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 20px; }
.item { position: relative; border-radius: 25px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; height: 300px; background: #fff; }
.item:hover { transform: translateY(-10px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
.item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s, filter 0.5s; border-radius: 25px; }
.item:hover img { transform: scale(1.05); filter: brightness(1); }
.contenido-cuadrado { position: absolute; bottom: 0; width: 100%; text-align: center; background: rgba(31,42,68,0.85); padding: 15px 10px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; }
.contenido-cuadrado h3 { font-size: 20px; color: #fff; margin-bottom: 10px; }
.btn { padding: 10px 25px; border-radius: 30px; background: #cfa14b; color: #fff; font-weight: 600; transition: transform 0.3s, box-shadow 0.3s; display: inline-block; }
.btn:hover { transform: translateY(-5px); box-shadow: 0 0 15px #cfa14b, 0 0 25px #e0be6a; }

/* ===== PIE DE PÁGINA ===== */
.site-footer { background: #1f2a44; color: #fff; text-align: center; padding: 30px 20px; }
.site-footer p { margin-bottom: 15px; font-size: 14px; }
.socials { display: flex; justify-content: center; gap: 15px; }
.socials img { width: 32px; height: 32px; filter: invert(1); transition: transform 0.3s, filter 0.3s; }
.socials img:hover { transform: scale(1.2); filter: invert(0); }

/* ===== MEDIA QUERIES ===== */
@media (max-width: 768px) {
    .menu { display: none; flex-direction: column; background: rgba(31,42,68,0.95); position: absolute; top: 70px; left: 0; width: 100%; padding: 20px 0; }
    .menu.activo { display: flex; }
    .menu a { color: #fff; font-size: 20px; padding: 10px 0; text-align: center; }
    .menu-toggle { display: block; }
    .buscador input { width: 150px; }
    .carousel { height: 300px; }
}