/* ==========================================================================
   1. VARIABLES GLOBALES Y ESTILO BASE DEL CARRUSEL
   ========================================================================== */

:root {
  --color-primario: #960a0a;  /* Color de acento (ej. azul francés) */
  --color-texto-principal: #333333; /* Texto del testimonio */
  --color-texto-secundario: #757575; /* Nombre del autor, cargo */
  --color-fondo: #ffe4e4; /* Fondo de cada slide */
  --color-navegacion: #cccccc; /* Color base de flechas/puntos */
  --fuente-principal: 'Inter', 'Helvetica', sans-serif; /* Fuente limpia y moderna */
  --fuente-cita: 'Georgia', 'serif'; /* Fuente serif para la cita, añade un toque clásico */
}

/* Contenedor principal del carrusel */
.testimonial-carousel {
  width: 100%;
  max-width: 800px; /* Ancho máximo para legibilidad */
  padding: 0 25px; /* Espacio para las flechas de navegación en los lados */
  position: relative;
}

.container-testimonials {
  width: 100%;
  max-width: 1700px;
  margin: 1px auto;
  box-sizing: border-box;
  margin-bottom: 100px;
}

.line_property {
    width: 600px;
    height: 3px;
    background-color: darkred;
    margin: 15px auto;
    margin-top: 0;
}

/* ==========================================================================
   2. ESTILO DE CADA SLIDE (EL TESTIMONIO INDIVIDUAL)
   ========================================================================== */

.swiper-slide {
  background-color: var(--color-fondo);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); /* Sombra sutil para dar elevación */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Importante para transiciones suaves de opacidad */
  transition: opacity 0.4s ease-in-out; 
}

/* Opcional: Oculta los slides que no están activos para evitar flashes de contenido */
.swiper-slide:not(.swiper-slide-active) {
  opacity: 0;
}


/* ==========================================================================
   3. ESTILO DEL CONTENIDO (FOTO, TEXTO, AUTOR)
   ========================================================================== */

/* Imagen del autor */
.swiper-slide img {
  width: 80px;
  height: 80px;
  border-radius: 50%; /* Hace la imagen circular */
  object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
  margin-top: 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera en la foto */
}

/* Cita principal del testimonio */
.swiper-slide blockquote {
  font-family: var(--fuente-cita);
  font-size: 1.3rem; /* Tamaño de fuente destacado */
  font-style: Arial;
  line-height: 1.6;
  color: var(--color-texto-principal);
  max-width: 92%;
  margin-left: 40px;
}

/* Nombre del autor */
.swiper-slide .author {
  font-family: var(--fuente-principal);
  font-weight: 600; /* Semi-negrita */
  font-size: 1rem;
  color: var(--color-texto-principal);
}

/* ==========================================================================
   4. ESTILO DE LA NAVEGACIÓN (FLECHAS Y PUNTOS)
   ========================================================================== */

/* Estilo para las flechas de navegación (Prev/Next) */
.swiper-button-prev,
.swiper-button-next {
  color: var(--color-navegacion);
  transition: color 0.3s ease;
  --swiper-navigation-size: 28px; /* Controla el tamaño del ícono de la flecha */
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  color: var(--color-primario); /* Cambia al color primario al pasar el ratón */
}

/* Posicionamiento de las flechas fuera del contenido */
.swiper-button-prev { left: 0; }
.swiper-button-next { right: 0; }

/* ==========================================================================
   5. AJUSTES RESPONSIVOS (MEDIA QUERIES)
   ========================================================================== */

@media (max-width: 768px) {
  .testimonial-carousel {
    padding: 0; /* Sin padding lateral en móviles */
  }
  
  .swiper-slide blockquote {
    font-size: 1.1rem; /* Texto de la cita ligeramente más pequeño */
  }
  
  /* Oculta las flechas en pantallas pequeñas para un look más limpio */
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}