/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Century Gothic', sans-serif; color: #4B0082; background-color: #fff; line-height: 1.6; }
a { text-decoration: none; color: inherit; }

/* CABECERA */
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background-color: #fff; border-bottom: 2px solid #FFD700; position: sticky; top: 0; z-index: 100; }
header h1 { font-size: 2.5rem; }
nav ul { display: flex; gap: 1.5rem; list-style: none; }
nav a { font-weight: bold; padding: 0.5rem 1rem; transition: all 0.3s ease; }
nav a.active, nav a:hover { color: #FFD700; }

/* BOTONES */
.boton, .boton-tienda { border-radius: 5px; font-family: 'Britannic Bold', sans-serif; transition: all 0.3s ease; margin: 0.5rem; }
.boton { display: inline-block; padding: 0.6rem 1.5rem; background-color: #4B0082; color: #FFD700; border: 2px solid #4B0082; }
.boton:hover { background-color: #FFD700; color: #4B0082; cursor: pointer; }
.boton-tienda { background-color: #FFD700; color: #4B0082; border: 2px solid #4B0082; }
.boton-tienda:hover { background-color: #4B0082; color: #FFD700; }

/* HERO */
.hero { display: flex; align-items: center; justify-content: space-between; padding: 3rem 2rem; min-height: 80vh; background: linear-gradient(135deg, #fceabb, #f8b500); gap: 2rem; }
.hero-text { flex: 1; font-size: 1.5rem; max-width: 50%; }
.hero-text h2 { font-size: 2rem; color: #4B0082; line-height: 1.4; }

/* SLIDER DE IMÁGENES */
.hero-images { flex: 1; position: relative; width: 100%; height: 400px; max-width: 600px; overflow: hidden; border-radius: 20px; }
.hero-images img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease-in-out; }
.hero-images img.active { opacity: 1; }

/* GALERÍA DE OBRAS */
.serie { padding: 3rem 2rem; max-width: 1200px; margin: auto; }
.serie h2 { margin-bottom: 1.5rem; font-size: 2rem; color: #4B0082; text-align: center; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.gallery-grid img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 5px;
  cursor: zoom-in;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0.9;
}

.gallery-grid img:hover {
  transform: scale(1.02);
  opacity: 1;
}

/* FOOTER */
footer { text-align: center; padding: 2rem; background-color: #fff; border-top: 2px solid #FFD700; }

/* FADE IN */
.fade-in { opacity: 0; transform: translateY(20px); animation: fadeIn 1s forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
/* Ajuste para libros: mantener proporción de la imagen */
.libros-grid img {
  width: 100%;
  height: auto; /* altura automática para no deformar */
  max-width: 400px; /* opcional, limita el tamaño de la imagen */
  object-fit: contain; /* se asegura de que se vea completa */
  margin: 0 auto; /* centra horizontalmente */
  display: block;
}

/* Adaptación móvil para la tienda */
@media (max-width: 768px) {
  .tienda {
    padding: 0 1rem;
    margin: 2rem auto;
  }

  .productos {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
  }

  .producto h3 {
    font-size: 1rem;
  }

  .producto p {
    font-size: 0.9rem;
  }

  .precio-hover {
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
  }

  header nav ul {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }

  .lang-toggle {
    margin-bottom: 0.5rem;
  }

  footer p, footer a {
    display: block;
    margin: 0.5rem 0;
  }
}

/* Para pantallas muy pequeñas (celulares) */
@media (max-width: 480px) {
  .productos {
    grid-template-columns: 1fr;
  }

  .producto .img-container {
    aspect-ratio: 1/1;
  }

  .producto h3 {
    font-size: 0.95rem;
  }

  .producto p {
    font-size: 0.85rem;
  }
}