/*
 Theme Name: Tema Hijo Astra
 Theme URI:   
 Description:  
 Author:      
 Author URI:  
 Template: astra
 Version:      
 License:      
 License URI: 
 Tags:
 Text Domain: 
*/

/* Contenedor principal que oculta lo que se desborda */
.esoteric-reviews-wrapper {
  width: 100%;
  overflow: hidden; /* Esconde las tarjetas que salen de la pantalla */
  background-color: transparent; /* Fondo transparente para integrarse */
  padding: 40px 0; /* Espacio arriba y abajo para que se vea la sombra */
  position: relative;
}

/* El riel que contiene todas las tarjetas */
.esoteric-reviews-track {
  display: flex;
  gap: 20px; /* Espacio entre tarjetas */
  width: max-content; /* El ancho se ajusta al contenido */
  /* La animación se controla via JS para mayor fluidez, 
     pero aquí definimos el estado base */
}

/* Diseño de la Tarjeta Individual */
.review-card {
  width: 180px; /* Ancho fijo para mantener uniformidad */
  min-height: 250px; /* Altura mínima para parecer carta de tarot */
  background-color: #ffffff;
  border-radius: 15px; /* Bordes redondeados */
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra ligera y elegante */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(0,0,0,0.03); /* Borde sutil */
  transition: transform 0.3s ease;
  flex-shrink: 0; /* Evita que se aplasten */
}

/* Efecto al pasar el mouse (opcional) */
.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Estilos de Texto */
.review-stars {
  color: #D4AF37; /* Color Dorado para las estrellas */
  font-size: 18px;
  margin-bottom: 15px;
  letter-spacing: 2px;
}

.review-text {
  font-family: inherit; /* Hereda la fuente de tu tema */
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 20px;
}

.review-author {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.author-name {
  display: block;
  font-weight: 700;
  color: #333;
  font-size: 14px;
}

.verified-badge {
  display: block;
  font-size: 10px;
  color: #999;
  margin-top: 2px;
  text-transform: uppercase;
}

/* Animación Keyframes */
@keyframes scrollReviews {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Clase activa para la animación */
.animate-scroll {
  animation: scrollReviews 40s linear infinite;
}

/* Pausar animación si el usuario pone el mouse encima */
.esoteric-reviews-track:hover {
  animation-play-state: paused;
}