/* Variables y configuración base */
:root {
   --card-width: 240px;
   --card-height: 320px;
   --primary-color: #0d6efd;
   --success-color: #10b981;
   --card-radius: 12px;
   --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Layout Grid */
  .books-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
   gap: 1.5rem;
   padding: 1.5rem;
   perspective: 1000px;
  }
  
  /* Tarjeta de Libro */
  .book-card {
   background: #fff;
   border-radius: var(--card-radius);
   box-shadow: 
     0 4px 6px rgba(0,0,0,0.1),
     0 5px 15px rgba(0,0,0,0.05);
   transition: var(--transition-smooth);
   transform-style: preserve-3d;
   position: relative;
   isolation: isolate;
  }
  
  .book-card:hover {
   transform: translateY(-5px) rotateX(2deg);
   box-shadow: 
     0 8px 20px rgba(0,0,0,0.12),
     0 15px 35px rgba(0,0,0,0.08);
  }
  
  /* Contenedor de Portada */
  .book-cover {
   height: var(--card-height);
   position: relative;
   overflow: hidden;
   border-radius: var(--card-radius) var(--card-radius) 0 0;
   background: linear-gradient(45deg, #f8f9fa 0%, #e9ecef 100%);
  }
  
  .book-cover img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   transform-origin: center;
   transition: var(--transition-smooth);
   padding: 0.5rem;
  }
  
  .book-card:hover .book-cover img {
   transform: scale(1.03);
  }
  
  /* Overlay con Efecto Glassmorphism */
  .book-cover::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
     to bottom,
     transparent 0%,
     rgba(255,255,255,0.1) 50%,
     rgba(255,255,255,0.2) 100%
   );
   opacity: 0;
   backdrop-filter: blur(4px);
   transition: var(--transition-smooth);
  }
  
  .book-card:hover .book-cover::after {
   opacity: 1;
  }
  
  /* Etiquetas de Precio */
  .price-tag {
   position: absolute;
   top: 1rem;
   right: 1rem;
   padding: 0.5rem 1rem;
   border-radius: 20px;
   font-weight: 600;
   font-size: 0.9rem;
   z-index: 1;
   backdrop-filter: blur(8px);
   transform: translateZ(20px);
   transition: var(--transition-smooth);
  }
  
  .price-free {
   background: linear-gradient(135deg, var(--success-color), #059669);
   color: white;
   box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
  }
  
  .price-paid {
   background: linear-gradient(135deg, var(--primary-color), #0099ff);
   color: white;
   box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
  }
  
  /* Contenedor de Botones */
  .book-actions {
   padding: 1rem;
   background: rgba(255,255,255,0.9);
   backdrop-filter: blur(10px);
   border-radius: 0 0 var(--card-radius) var(--card-radius);
   transform: translateZ(10px);
  }
  
  /* Botones de Acción */
  .btn-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   padding: 0.8rem;
   border-radius: 8px;
   font-weight: 600;
   gap: 0.5rem;
   text-decoration: none;
   transition: var(--transition-smooth);
  }
  
  .btn-download {
   background: linear-gradient(135deg, var(--success-color), #059669);
   color: white;
  }
  
  .btn-download:hover {
   background: linear-gradient(135deg, #059669, #047857);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }
  
  .btn-purchase {
   background: linear-gradient(135deg, var(--primary-color), #0099ff);
   color: white;
  }
  
  .btn-purchase:hover {
   background: linear-gradient(135deg, #0b5ed7, #0077cc);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
  }
  
  /* Efectos de Animación */
  @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(20px) scale(0.95);
   }
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
  }
  
  .book-card {
   animation: fadeIn 0.5s ease-out forwards;
  }
  
  /* Efectos de Hover Avanzados */
  .book-card::before {
   content: '';
   position: absolute;
   inset: -1px;
   background: linear-gradient(45deg, 
     transparent 0%, 
     rgba(255,255,255,0.1) 100%
   );
   border-radius: calc(var(--card-radius) + 1px);
   z-index: -1;
   transition: var(--transition-smooth);
   opacity: 0;
  }
  
  .book-card:hover::before {
   opacity: 1;
  }
  
  /* Media Queries */
  @media (max-width: 768px) {
   :root {
     --card-width: 180px;
     --card-height: 260px;
   }
   
   .books-grid {
     gap: 1rem;
     padding: 1rem;
   }
   
   .btn-action {
     padding: 0.6rem;
     font-size: 0.9rem;
   }
  }
  
  @media (min-width: 1400px) {
   :root {
     --card-width: 280px;
     --card-height: 380px;
   }
  }
  
  /* Optimizaciones de Rendimiento */
  @media (prefers-reduced-motion: reduce) {
   * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
  }

/* 🎨 Configuración de Variables */
:root {
   --primary-color: #007bff;
   --secondary-color: #ffcc00;
   --background-light: #f8f9fa;
   --shadow-color: rgba(0, 0, 0, 0.2);
   --border-radius: 16px;
   --transition-effect: all 0.3s ease-in-out;
   --font-family: 'Poppins', sans-serif;
}

/* 📚 Contenedor General */
.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 2rem;
   font-family: var(--font-family);
   background-color: var(--background-light);
}

/* Título de las Áreas */
.areas-title {
   font-size: 2.5rem;
   font-weight: 600;
   text-align: center;
   margin-bottom: 2rem;
   color: var(--primary-color);
   text-transform: uppercase;
}

/* Grid de Áreas */
.areas-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* Organiza en 3 columnas */
   gap: 2rem; /* Espacio entre tarjetas */
}

/* 📦 Tarjetas de Áreas */
.area-card {
   background: white;
   color: #333;
   padding: 25px;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px var(--shadow-color);
   transition: var(--transition-effect);
   text-align: center;
}

/* 🎭 Efecto Hover en las Tarjetas */
.area-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 25px rgba(0, 123, 255, 0.3);
}

/* Icono de la Tarjeta */
.area-icon {
   font-size: 2.5rem;
   margin-bottom: 15px;
   display: block;
   color: var(--primary-color);
}

/* Título de la Tarjeta */
.area-title {
   font-size: 1.8rem;
   font-weight: 600;
   margin-bottom: 20px;
   color: var(--primary-color);
   text-transform: uppercase;
}

/* Lista de Subáreas */
.subarea-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.subarea-list li {
   margin: 10px 0;
}

.subarea-list li a {
   color: #333;
   font-weight: 500;
   text-decoration: none;
   transition: var(--transition-effect);
}

.subarea-list li a:hover {
   color: var(--primary-color);
   text-decoration: underline;
}

/* Botón "VER TODO" */
.btn-ver-todo {
   display: inline-block;
   margin-top: 20px;
   padding: 12px 24px;
   font-size: 1rem;
   font-weight: 600;
   text-transform: uppercase;
   background: var(--secondary-color);
   color: #000;
   border-radius: 8px;
   box-shadow: 0 0 15px rgba(255, 204, 0, 0.6);
   transition: var(--transition-effect);
   text-decoration: none;
}

.btn-ver-todo:hover {
   transform: scale(1.1);
   box-shadow: 0 0 25px rgba(255, 204, 0, 0.8);
}

/* 📱 Diseño Responsivo */
@media (max-width: 768px) {
   .areas-grid {
       grid-template-columns: 1fr; /* Una sola columna en móviles */
   }

   .area-title {
       font-size: 1.5rem;
   }

   .area-icon {
       font-size: 2rem;
   }
}