/* ========================================
   SECCIÓN TESTIMONIOS
======================================== */

.section-testimonios {
  width: 100%;

  position: relative;
  overflow: hidden;

  background-color: var(--color7);
}


/* ========================================
   FONDO ILUSTRADO
======================================== */

.section-testimonios::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image: url("../img/fondo\ section\ opiniones.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.50;
  pointer-events: none;
}


/* ========================================
   CONTENEDOR EXTERIOR
======================================== */

.fondo-contenido {
  position: relative;
  z-index: 1;

  width: 100%;

  padding:
    4rem
    var(--page-padding-mobile);
}


/* ========================================
   BLOQUE DE COLOR SOBRE EL FONDO
======================================== */

.contenido {
  width: 100%;
  max-width: var(--max-width);

  margin: 0 auto;

  padding: 2.5rem 1.5rem;

  background-color: var(--color1);

  border-radius: 14px;
}


/* ========================================
   ENCABEZADO
======================================== */

.section-testimonios h5 {
  margin-bottom: 1rem;

  color: var(--color4);

  font-size: 0.9rem;
  font-weight: 700;

  text-align: center;
}


.section-testimonios h1 {
  max-width: 340px;

  margin: 0 auto 2.5rem;

  color: var(--color5);

  font-size: clamp(2rem, 8vw, 2.6rem);
  font-weight: 400;
  line-height: 1.05;

  text-align: center;
}


/* ========================================
   CONTENEDOR DE TARJETAS
======================================== */

.ctn-cards-testimonios {
  width: 100%;

  display: grid;
  grid-template-columns: 1fr;

  gap: 1.2rem;
}


/* ========================================
   TARJETA
======================================== */

.card-testimonio {
  width: 100%;

  padding: 1.4rem;

  background-color: var(--color8);

  border-radius: 12px;

  box-shadow: 0 4px 14px rgba(65, 42, 29, 0.08);
}


/* ========================================
   FOTO + NOMBRE
======================================== */

.foto-nombre {
  display: flex;
  align-items: center;

  gap: 0.8rem;

  margin-bottom: 0.8rem;
}


.foto-nombre img {
  width: 42px;
  height: 42px;

  object-fit: cover;

  border-radius: 50%;
}


.foto-nombre h3 {
  margin: 0;

  color: var(--color5);

  font-family: "Poppins", sans-serif;

  font-size: 0.95rem;
  font-weight: 600;
}


/* ========================================
   ESTRELLAS
======================================== */

.estrellas {
  display: flex;

  gap: 0.15rem;

  margin-bottom: 0.8rem;
}


.estrella {
  color: var(--color2);

  font-size: 1rem;
  line-height: 1;
}


.estrella.gris {
  color: var(--color12);
}


/* ========================================
   TEXTO DEL TESTIMONIO
======================================== */

.card-testimonio p {
  margin: 0;

  color: var(--color5);

  font-size: 0.9rem;
  line-height: 1.6;

  text-align: left;
}


/* ========================================
   TABLET
======================================== */

@media screen and (min-width: 768px) {

  .fondo-contenido {
    padding:
      5rem
      var(--page-padding-tablet);
  }


  .contenido {
    padding: 3rem 2.5rem;
  }


  .section-testimonios h5 {
    font-size: 1rem;
  }


  .section-testimonios h1 {
    max-width: 620px;

    margin-bottom: 3rem;

    font-size: 2.8rem;
  }


  .ctn-cards-testimonios {
    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;
  }


  .card-testimonio {
    padding: 1.6rem;
  }

}


/* ========================================
   DESKTOP
======================================== */

@media screen and (min-width: 1024px) {

  .section-testimonios {
    min-height: 100svh;

    display: flex;
    align-items: center;
  }


  .fondo-contenido {
    width: 100%;

    padding:
      6rem
      var(--page-padding-desktop);
  }


  .contenido {
    padding: 3.5rem 3rem;
  }


  .section-testimonios h1 {
    max-width: 760px;

    font-size: clamp(2.8rem, 3.6vw, 3.6rem);
  }


  .ctn-cards-testimonios {
    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;
  }


  .card-testimonio {
    min-height: 220px;

    padding: 1.8rem;

    display: flex;
    flex-direction: column;
  }


  .card-testimonio p {
    font-size: 0.95rem;
  }

}