/* =============  THEME STYLES (DEPURADO)  ============= */
/* Theme meta: Catalogo Albums - Material Design
   Reemplazar por completo el CSS conflictivo anterior.
*/

/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Playfair+Display:wght@700&display=swap');

:root{
  --primary:#6200ee;
  --on-primary:#ffffff;
  --surface:#ffffff;
  --on-surface:#212121;
  --shadow: rgba(0,0,0,0.12);
  --border-radius: 12px;
}

/* Reset mínimo y fondo papel */
*{box-sizing: border-box;}
html,body{
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
  font-family: 'Roboto', sans-serif;
  background: url(http://atelierdelrecuerdo.newstar.nat.cu/wp-content/uploads/2025/08/textura-papel.png) repeat;
}

header .site-header { position: relative; }

/* Header / Footer wrapper */
.site-header,
.site-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

.site-header {
  border-bottom: 1px solid var(--shadow);
}

.site-footer {
  border-top: 1px solid var(--shadow);
  text-align: center;
  font-size: .9rem;
}

/* Links */
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Contenido principal */
.content-area{
  max-width:1200px;
  margin:2rem auto;
  padding:0 1rem;
}

/* Grid Material */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem;
}

.album-card {
  background: var(--surface);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s;
}

.album-card:hover {
  box-shadow: 0 6px 12px var(--shadow);
}

.album-card__thumb img {
  width: 100%;
  display: block;
}

.album-card__body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.album-card__title {
  font-weight: 500;
  margin: 0 0 .5rem;
  color: var(--on-surface);
}

.album-card__price {
  font-weight: 700;
  color: var(--primary);
  margin-bottom: .5rem;
}

.card-album {
  position: relative;
  border: 10px solid transparent;
  background-clip: padding-box;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  border-image: url(http://atelierdelrecuerdo.newstar.nat.cu/wp-content/uploads/2025/08/marco-pinceladas-1.png) 30 stretch;
  transition: transform .3s, box-shadow .3s;
}

.card-album:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 24px rgba(0,0,0,0.15);
}

.button {
  background: var(--primary);
  color: var(--on-primary);
  padding: .5rem 1rem;
  border: none;
  border-radius: var(--border-radius);
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background .2s;
}

.button:hover {
  background: #3700b3;
}

/* Single Album */
.single-album__gallery img {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
}

.single-album__details {
  margin-top: 2rem;
}

.single-album__details h1 {
  font-weight: 700;
  margin-bottom: .5rem;
}

.single-album__details .price {
  font-size: 1.25rem;
  color: var(--primary);
  margin: .5rem 0;
}

.single-album__details .summary,
.single-album__details .details {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.single-album__video {
  margin: 2rem 0;
}

/* HERO (UNIFICADO y NO conflictivo) */
.hero-bienvenida {
  position: relative;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  overflow: hidden;  
}

.hero-bienvenida::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;  
  filter: blur(5px) brightness(0.4);
  z-index: -2;
  background: url(http://elibook.newstar.nat.cu/wp-content/uploads/2025/08/pb1.jpg) center/cover no-repeat;
}

.hero-catalogo {
  position: relative;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
  background: url(https://images.unsplash.com/photo-1723074832961-397744da2380?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) center/cover no-repeat;
}

.hero-catalogo::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;  
  filter: blur(5px) brightness(0.4);
  z-index: -2;
}

.hero-bienvenida .hero-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);  /* Un poco más ligero */
}

.hero-catalogo .hero-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);  /* Un poco más ligero */
}

.hero-bienvenida h1, 
.hero-bienvenida p {
  position: relative;
  z-index: 2;                    /* Asegura que el texto esté por encima del overlay */
  color: rgba(255,255,255,0.95); /* Blanco casi puro */
  text-shadow: 0 2px 6px rgba(0,0,0,0.6); /* Sutil resplandor oscuro */
}

.hero-catalogo h1, 
.hero-catalogo p {
  position: relative;
  z-index: 2;                    /* Asegura que el texto esté por encima del overlay */
  color: rgba(255,255,255,0.95); /* Blanco casi puro */
  text-shadow: 0 2px 6px rgba(0,0,0,0.6); /* Sutil resplandor oscuro */
}

.hero-catalogo h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  margin: 0 1rem;                /* Un pequeño padding horizontal */
}

.hero-catalogo p {
  margin: .5rem 1rem;
  font-style: italic;
  font-size: 1.2rem;
}

/* Borde decorativo */
.album-card.enhanced {
  position: relative;
  overflow: hidden;
}

.album-card.enhanced .card-border {
  position: absolute;
  top: 0; left: -5px; width: 5px; height: 100%;
  background: linear-gradient(to bottom, #6200ee, #3700b3);
  transition: left .3s;
}

.album-card.enhanced:hover .card-border {
  left: 0;
}

/* Fondo de la card */
.album-card.enhanced {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  transform: translateY(0);
  transition: transform .3s, box-shadow .3s;
}

.album-card.enhanced:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}

/* Thumb con máscara suavizada */
.album-card__thumb img {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  width: 100%;
  display: block;
  transition: transform 8s ease-out;
}

.album-card__thumb img:hover {
  transform: scale(1.1);
}

/* Cuerpo con espacio y líneas */
.album-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.album-card__title {
  font-weight: 500;
  font-size: 1.125rem;
  position: relative;
}

.album-card__title::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 40px; height: 2px;
  background: linear-gradient(to right, #6200ee, #3700b3);
}

.album-card__price {
  color: #6200ee;
  font-weight: 700;
}

h1, .hero-catalogo h1 {
  font-family: 'Playfair Display', serif;
}
body, p, .summary, .details {
  font-family: 'Roboto', sans-serif;
}

.callout {
  background: #f5f0ff;
  padding: 2rem 1rem;
  margin: 3rem 0;
  text-align: center;
  border-radius: 8px;
}

.callout blockquote {
  font-style: italic;
  font-size: 1.25rem;
  max-width: 800px;
  margin: 0 auto;
  color: #333;
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@300;400;500&display=swap');

/* Capa overlay para contraste */
.hero-bienvenida .hero-overlay{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  padding: 2rem;
  background: rgba(0,0,0,0.25); /* ligero fondo opcional */
  border-radius: 8px;
}

/* Contenido dentro del hero */
.hero-content{
  width:100%;
  max-width:700px;
  margin:0 auto;
  text-align:center;
  z-index:3;
  color: #fff;
}
.hero-content h1{ font-family:'Playfair Display', serif; font-size: clamp(1.8rem, 5.5vw, 3rem); margin:0 0 1rem; line-height:1.15; }
.hero-content p{ font-size: clamp(1rem, 3.2vw, 1.15rem); line-height:1.6; color: rgba(255,255,255,0.95); margin-bottom:1rem; }

/* Ajustes media queries */
@media (min-width:768px){
  .album-card__thumb img{ height:220px; object-fit:cover; }
  .hero-bienvenida{ padding:4rem 2rem; }
}

@media (min-width:1024px){
  .hero-content h1{ font-size:3.2rem; }
}

/* SWIPER (UN SOLO BLOQUE, SIN CONFLICTOS) */
/*.swiper-container{
  width:100%;
  max-width:1200px;
  margin: 2rem auto;
  aspect-ratio: 16/7; /* panorámico para que no ocupe demasiado vertical 
}
.swiper-wrapper{ height:100%; }
.swiper-slide img{
  width:100%;
  height:100%;
  object-fit:cover; /* para que se vea full y responsivo 
  display:block;
}*/

/* 1. Asegurar que el contenedor del slider ocupe espacio real */
.swiper-container{
  position: relative !important;   /* mantener posicion relativo para paginación absoluta */
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto;
  aspect-ratio: 16/7;              /* mantiene proporción */
  min-height: 220px;               /* reserva altura mínima por si las imágenes tardan */
  padding-bottom: 56px;            /* espacio extra para bullets / paginación */
  box-sizing: border-box;
}

/* 2. Slider internals */
.swiper-wrapper { height: 100% !important; }
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 220px;               /* evita colapso */
}

/* 3. Imágenes responsivas que llenen el contenedor sin colapsar */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 4. Paginación y flechas (dentro del contenedor) */
.swiper-pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  z-index: 15;
}

@media (max-width: 768px) {
  .swiper-pagination {
    display: none !important;
  }
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

/* 5. Forzar separación con el siguiente bloque (por si hay reglas conflictivas) */
.swiper-container + * ,
.elibook-swiper + * {
  margin-top: 1rem !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 6. Depuración visual (opcional — quítala cuando todo esté ok) */
/*.swiper-container { outline: 2px dashed rgba(0,200,100,0.12); }*/

/* MEDIA GALLERY y VIDEO (asegurar visibles) */
.media-gallery, .media-video{ width:100%; margin-bottom:1.25rem; display:block; }

/* Ligeros acabados */
.callout{ background:#f5f0ff; padding:2rem 1rem; margin:2.5rem 0; border-radius:8px; text-align:center; }

/* fin del CSS depurado */

.back-link-wrapper { 
  width: 100%; 
  text-align: right; 
  margin: 1rem 0 2rem 0; 
} 

.back-button { 
  display: inline-block; 
  background: var(--primary); /* tu color de acento Material */ 
  color: var(--on-primary); /* blanco */ padding: 0.5rem 1rem; 
  border-radius: var(--border-radius); font-weight: 500; 
  text-decoration: none; transition: background .3s, transform .2s; 
} 
  
.back-button:hover { 
  background: #3700b3; /* tono más oscuro al hover */ 
  transform: translateX(-2px); 
}

.hero-content .wp-block-button__link { 
  background-color: #6b00e6; 
  padding: 0.8rem 1.5rem; 
  border-radius: 30px; 
  color: white; 
  text-transform: uppercase; 
  transition: background 0.3s ease; 
} 

.hero-content .wp-block-button__link:hover { 
  background-color: #6b00e6; 
}

/* Banner responsivo en header */
.header-banner {
  max-width: 100%;   /* nunca excede el ancho del contenedor */
  height: auto;      /* mantiene proporción */
  display: block;
  margin: 0 auto;    /* centrado */
}

/* Ajuste extra para móviles */
@media (max-width: 768px) {
  .header-banner {
    max-width: 90%;  /* un poco de margen en móvil */
  }
}

.site-header {
  display: flex;
  flex-direction: column;  /* apila banner y menú en móviles */
  align-items: center;
  text-align: center;
}

/* Botón flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background: #25d366;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

.whatsapp-float img {
  width: 50px;
  height: 50px;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.hero-catalogo .h1 {
  font-family: 'DonGraffiti', serif;
  font-weight: 700;
}

/* Contenedor de paginación */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 3rem 0;
  font-family: 'Roboto', sans-serif; /* fuente moderna */
}

/* Botones de página */
.pagination .page-numbers {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: 50px;
  background: #f0f0f0;
  color: #6200ee;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Hover */
.pagination .page-numbers:hover {
  background: #6200ee;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Página activa */
.pagination .current {
  background: #3700b3;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}

.pagination .prev::before {
  content: "« ";
}

.pagination .next::after {
  content: " »";
}

/* Contenedor principal estilo Amazon */
.single-album__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
  align-items: flex-start;
}

/* Galería + video */
.single-album__media {
  /*background: #fff;*/
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.single-album__media video {
  width: 100%;
  border-radius: 10px;
  margin-top: 1rem;
}

/* Detalles del producto */
.single-album__details {
  /*background: #fff;*/
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.single-album__details .album-title {
  font-family: 'DonGraffiti', cursive; /* tu tipografía artística */
  font-size: 2rem;
  margin-bottom: 1rem;
}

.single-album__details .price {
  font-size: 1.5rem;
  font-weight: bold;
  color: #c0392b;
  margin-bottom: 1rem;
}

.single-album__details .buy-button {
  display: inline-block;
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  color: rgb(7, 7, 7);
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.single-album__details .buy-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Secciones extra */
.single-album__extra {
  margin-top: 3rem;
  /*background: #fafafa;*/
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.single-album__extra h2 {
  margin-bottom: 1rem;
  border-bottom: 2px solid #000000;
  padding-bottom: 0.5rem;
  font-family: 'DonGraffiti', cursive;
}

/* Responsive */
@media (max-width: 768px) {
  .single-album__wrapper {
    grid-template-columns: 1fr;
  }
}

.album-rating {
  margin-top: 20px;
  padding: 15px;
  /*background: #fff8f2;*/
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.album-rating h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #333;
}

.stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.stars input {
  display: none;
}

.stars label {
  font-size: 28px;
  color: #000000;
  cursor: pointer;
  transition: color 0.2s;
}

.stars input:checked ~ label,
.stars label:hover,
.stars label:hover ~ label {
  color: #f7b731; /* amarillo artístico */
}

.rating-submit {
  margin-top: 10px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: #f7b731;
  color: rgb(0, 0, 0);
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.rating-submit:hover {
  background: #e0a500;
}

.rating-section {
  margin-top: 20px;
  padding: 15px;
  background: #00000000;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.rating-section h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-family: 'DonGraffiti', cursive; /* tu fuente personalizada */
}

.star-rating {
  direction: rtl;
  display: inline-flex;
  font-size: 2rem;
}

.star-rating input {
  display: none;
}

.star-rating label {
  cursor: pointer;
  color: rgb(255, 255, 255);
  transition: color 0.2s;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #f39c12;
}

/* 🎨 Grid de álbumes */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 25px;
  padding: 20px;
}

/* 📦 Tarjeta del álbum */
.album-card {
  background: #ffffffb9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  padding: 15px;
  position: relative;
}

.album-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

/* 📸 Imagen del álbum */
.album-card .album-thumb img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}

.album-card:hover .album-thumb img {
  transform: scale(1.05);
}

/* 📝 Título del álbum */
.album-card .album-title {
  font-size: 1.2rem;
  margin: 10px 0;
  font-weight: bold;
  color: #333;
}

.album-card .album-title a {
  text-decoration: none;
  color: inherit;
}

.album-card .album-title a:hover {
  color: #7a19d4; /* tono artesanal */
}

/* ⭐ Valoración */
.album-rating {
  margin-top: 8px;
  font-size: 0.95rem;
  color: #555;
}

.album-rating .stars {
  display: flex;
  justify-content: center;
  gap: 3px;
  font-size: 1.3rem;
  cursor: pointer;
  margin-bottom: 4px;
}

.album-rating .star {
  color: #ccc; /* vacía */
  transition: color 0.2s ease;
}

.album-rating .star.filled {
  color: #f39c12; /* amarilla */
}

.album-rating .star:hover {
  color: #f1c40f;
}

.album-rating small {
  font-size: 0.8rem;
  color: #777;
}

/* 🔢 Paginación */
.pagination-wrapper {
  text-align: center;
  margin: 40px 0;
}

.pagination-wrapper .page-numbers {
  display: inline-block;
  margin: 0 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #f4f4f400;
  color: #333;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.pagination-wrapper .page-numbers.current {
  background: #6200d3;
  color: #fff;
  font-weight: bold;
}

.pagination-wrapper .page-numbers:hover {
  background: #6200d3;
  color: #fff;
}

.album-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
}

.album-rating .star {
  font-size: 1.4rem;
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s ease;
}

.album-rating .star.filled {
  color: #f39c12; /* fijo (valoración guardada) */
}

.album-rating .star.hovered {
  color: #f1c40f; /* al pasar el mouse */
}

.album-rating .rating-average {
  font-size: 0.9rem;
  color: #555;
}

/* ⭐ Forzar izquierda→derecha SOLO en la portada */
.album-rating .stars {
  direction: ltr !important;
  display: flex;
  flex-direction: row !important;
}
.album-rating .star {
  unicode-bidi: normal;
}