/*

Theme Name: twiseplayed
Author: PHPPERU
Author URI: https://phpperu.com/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

:root {
      --color-primario: #FF69B4; /* Rosado anime */
      --color-secundario: #8A2BE2; /* Morado brillante */
      --color-acento: #00CED1; /* Celeste */
      --color-fondo: #fff;
      --fuente-anime: 'Poppins', sans-serif;
    }

    body {
      font-family: var(--fuente-anime);
      background-color: var(--color-fondo);
      color: #333;
    }

    .navbar {
      background: var(--color-primario);
    }

    .navbar-brand, .nav-link {
      color: white !important;
      font-weight: bold;
    }

    .hero {
      background: linear-gradient(120deg, var(--color-primario), var(--color-acento));
      color: white;
      padding: 100px 20px;
      text-align: center;
    }

    .btn-anime {
      background-color: var(--color-secundario);
      color: white;
      border: none;
    }

    .btn-anime:hover {
      background-color: var(--color-acento);
      color: white;
    }

    .categoria-card {
      border-radius: 20px;
      overflow: hidden;
      transition: transform 0.3s;
    }

    .categoria-card:hover {
      transform: scale(1.05);
    }


    /* ===== HERO SLIDER CON GRADIENTES ===== */
.hero-slider {
  position: relative;
  height: 55vh;
  overflow: hidden;
}

.hero-slider .slide {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: white;
  padding: 2rem;
  transition: opacity 1.5s ease;
  opacity: 0;
  z-index: 0;
}

.hero-slider .slide.active {
  opacity: 1;
  z-index: 1;
}

.hero-slider .contenido h1 {
  font-size: 2.8rem;
  font-weight: 800;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  animation: fadeIn 1.5s ease;
}

.hero-slider .contenido p {
  font-size: 1.2rem;
  margin-top: 10px;
  animation: fadeIn 2.5s ease;
}
/* ===== BOTÓN CTA HERO ===== */
.btn-cta {
  display: inline-block;
  margin-top: 20px;
  background-color: #ff6ec7;
  color: white;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-cta:hover {
  background-color: #ff3ea5;
  transform: translateY(-3px);
  color: white;
}

/* Animaciones suaves de entrada */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .hero-slider {
    height: 30vh;
  }
}


/* ===== SLIDER HOME Mejorado ===== */
.slider-home {
  background: linear-gradient(135deg, #ffe3f3, #e0f7fa);
  padding: 60px 0;
}

.slider-home .carousel-item {
  transition: transform 0.6s ease-in-out;
}

.slider-home .card {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.slider-home .card-img-top {
  height: 320px; /* ajusta para relación 3:4 */
  object-fit: cover;
  object-position: center;
}

.slider-home h2 {
  color: var(--color-primario);
  font-weight: bold;
}

.slider-home .btn-anime {
  background-color: var(--color-secundario);
  color: white;
  font-weight: 500;
}

.slider-home .btn-anime:hover {
  background-color: var(--color-acento);
}
/* ================================= */

/* ===== SECCIÓN DE PRENDAS: Grilla de 6 productos ===== */
.seccion-prendas {
  background-color: #fdf9ff; /* Suave fondo anime */
}

.seccion-prendas h2 {
  color: var(--color-secundario);
  font-weight: bold;
}

.producto-card {
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.producto-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.producto-card img {
  height: 220px;
  object-fit: cover;
  object-position: center;
}

.producto-card .btn-anime {
  margin-top: 10px;
}
/* ================================================ */

/* ===== SECCIÓN DE CATEGORÍAS: Botones biselados anime ===== */
.seccion-categorias {
  background-color: #fff0fa;
}

.seccion-categorias h2 {
  color: var(--color-primario);
  font-weight: bold;
}

.btn-categoria-anime {
  background: linear-gradient(145deg, var(--color-secundario), var(--color-acento));
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: bold;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-categoria-anime:hover {
  transform: translateY(-3px);
  background: linear-gradient(145deg, var(--color-acento), var(--color-secundario));
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  text-decoration: none;
  color: #fff;
}
/* ================================================ */

/* ===== EXPLORA POR CATEGORÍAS STICKY ===== */
.sticky-categorias {
  position: sticky;
  top: 70px; /* Ajusta si tienes navbar fija */
  z-index: 1030; /* Por encima del contenido */
  background-color: #fff0fa;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
/* ========================================== */


/* ===== ANIME GLOW EN BOTONES ===== */
.btn-categoria-anime {
  position: relative;
  z-index: 1;
}

.btn-categoria-anime::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: radial-gradient(circle, #fff 0%, transparent 80%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.btn-categoria-anime:hover::after {
  opacity: 0.3;
}

/* ===== SECCIÓN PELUCHES: Cards con botón Comprar ===== */
.seccion-peluches {
  background-color: #fff7ff;
}

.seccion-peluches h2 {
  color: var(--color-secundario);
  font-weight: bold;
}

.producto-card {
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

.producto-card:hover {
  transform: scale(1.03);
}

.producto-card img {
  height: 250px;
  object-fit: cover;
  object-position: center;
}

.btn-comprar {
  background-color: var(--color-primario);
  color: white;
  border: none;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 30px;
  transition: background 0.3s;
}

.btn-comprar:hover {
  background-color: var(--color-acento);
  color: #fff;
}
/* ========================================== */
/* ===== SECCIÓN FIGURAS COLECCIONABLES ===== */
.seccion-figuras {
  background-color: #fffefa;
}

.seccion-figuras h2 {
  color: var(--color-primario);
  font-weight: bold;
}

.producto-card img {
  height: 250px;
  object-fit: cover;
  object-position: center;
}

.btn-comprar {
  background-color: var(--color-primario);
  color: white;
  border: none;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 30px;
  transition: background 0.3s;
}

.btn-comprar:hover {
  background-color: var(--color-acento);
  color: white;
}
/* ========================================== */

/* ===== SECCIÓN ALMOHADAS ANIME ===== */
.seccion-almohadas {
  background-color: #f0f9ff;
}

.seccion-almohadas h2 {
  color: var(--color-secundario);
  font-weight: bold;
}

.producto-card img {
  height: 250px;
  object-fit: cover;
  object-position: center;
}
/* El botón .btn-comprar ya lo definimos antes */
/* ===== SECCIÓN ACCESORIOS ANIME ===== */
.seccion-accesorios {
  background-color: #fef6ff;
}

.seccion-accesorios h2 {
  color: var(--color-acento);
  font-weight: bold;
}
/* reutiliza .producto-card y .btn-comprar que ya definimos */
/* ===== FOOTER ANIME ===== */
.footer-anime {
  background: linear-gradient(145deg, #2a002a, #1b001b);
  color: white;
  font-size: 15px;
}

.footer-anime h5 {
  font-weight: bold;
  margin-bottom: 15px;
  color: #fbb0ff;
}

.footer-anime ul li {
  margin-bottom: 8px;
}

.btn-red-social {
  display: inline-block;
  color: white;
  font-size: 20px;
  margin-right: 10px;
  transition: color 0.3s ease;
}

.btn-red-social:hover {
  color: #fbb0ff;
}

.footer-copy {
  background-color: #120012;
  font-size: 13px;
  color: #aaa;
}

.footer-copy a {
  color: #fbb0ff;
  text-decoration: none;
}

.logo-footer {
  height: 20px;
  vertical-align: middle;
}
/* ========================================== */

/* ===== PÁGINA INTERNA PRODUCTOS ===== */
.productos-page {
  background-color: #fffdfc;
}

.titulo-categoria h1 {
  color: var(--color-primario);
  font-size: 2.4rem;
}

.titulo-categoria p {
  font-size: 1rem;
  color: #777;
}

.barra-filtros {
  background-color: #f8f9fa;
  padding: 1rem 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.producto-card img {
  height: 240px;
  object-fit: cover;
  object-position: center;
}

.btn-comprar {
  background-color: var(--color-primario);
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 30px;
  padding: 8px 18px;
  transition: background 0.3s ease;
}

.btn-comprar:hover {
  background-color: var(--color-acento);
  color: white;
}
/* ==================================== */

/* ===== ETIQUETAS PRODUCTO ===== */
.etiqueta-producto {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.75rem;
  font-weight: bold;
  color: white;
  padding: 4px 8px;
  border-radius: 5px;
  z-index: 10;
}

.bg-danger { background-color: #e74c3c !important; }
.bg-success { background-color: #2ecc71 !important; }
.bg-warning { background-color: #f1c40f !important; }
/* ================================== */
.logo-header {
  height: 50px;
  max-width: 100%;
}

/* ===== CONTACTO ===== */
.seccion-contacto {
  background: linear-gradient(135deg, #ffe0f7, #fdf4ff);
  border-top: 2px dashed #ff92d0;
  border-bottom: 2px dashed #ff92d0;
}

.img-anime-contacto {
  max-width: 100%;
  height: auto;
  animation: flotando 3s ease-in-out infinite;
}

@keyframes flotando {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.btn-enviar {
  background-color: #ff6ec7;
  color: white;
  border: none;
  font-weight: bold;
  border-radius: 30px;
  padding: 10px 20px;
  transition: background 0.3s ease;
}

.btn-enviar:hover {
  background-color: #e74caa;
}

.redes-contacto i {
  font-size: 24px;
  color: #555;
  transition: color 0.3s ease;
}

.redes-contacto i:hover {
  color: #ff6ec7;
}
/* ================================= */