/* =========================================================
   TESTIMONIOS
   LedLab — landing. Editar SOLO lo de esta sección acá.
   ---------------------------------------------------------
   Carrusel de testimonios: panel oscuro con la cita a la izquierda y la
   foto a la derecha. Las mecánicas del carrusel están en
   css/base/carousel.css; acá va solo el aspecto de cada testimonio.
   ========================================================= */
.testimonios .section-label {
  color: var(--color-8);
}

/* ALTO DE LA SECCIÓN — decisión de fondo
   Antes esta sección tenía un alto EXACTO (100svh - header) y el
   testimonio se achicaba para entrar. Con el testimonio real (600
   caracteres) eso obligaba a bajar el cuerpo del texto a 15-16px y, en
   cuanto algo cambiaba —el zoom del navegador, la barra de marcadores,
   otro testimonio más largo—, el texto se recortaba arriba y abajo.
   Un texto recortado es peor que una sección un poco más alta, así que
   ahora manda el contenido: la sección arranca en una pantalla completa
   (el min-height de .section-full) y crece si el testimonio lo necesita.
   El texto vuelve a los 20px del resto del sitio y nunca se corta. */
@media (min-width: 1025px) {
  .testimonios.section-full {
    padding-bottom: var(--label-block);
  }
}

.testimonios__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.testimonios__title {
  font-size: clamp(1.8rem, 2.8vw, 3.2rem);
  line-height: 1.12;
}
.testimonios__title .is-purple { color: var(--color-8); }
.testimonios__title .is-dark { color: var(--color-text-dark); }
/* Una sola línea: así el testimonio gana el alto de la segunda. En
   pantallas angostas el texto se acomoda solo. */
.testimonios__title-line { display: inline; }

/* ---------------------------------------------------------
   CADA TESTIMONIO
   Alto fijo en vh para que la sección entre siempre en una pantalla:
   la foto se recorta con object-fit y el panel acompaña.
   --------------------------------------------------------- */
.testimonio {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  /* Una sola fila, de alto automático: la marca el panel del texto y la
     foto se estira para acompañarla (ver .testimonio__photo).
     El min-height es solo un piso, para que un testimonio corto no quede
     como una tira finita. */
  grid-template-rows: auto;
  min-height: clamp(300px, 42vh, 520px);
}

/* El carrusel y el slide miden lo que mide el testimonio. */
.testimonios .carousel__slide {
  align-items: stretch;
}

.testimonio__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  background: var(--color-panel);
  color: var(--color-text-light);
  /* Un solo valor para los cuatro lados. El % de un padding se calcula
     siempre contra el ANCHO del contenedor, también arriba y abajo, así
     que esto da la misma distancia en los cuatro lados. */
  padding: clamp(1.5rem, 6%, 4.5rem);
  /* La flecha del carrusel va centrada SOBRE el borde izquierdo del
     panel (mitad afuera, mitad adentro), asi que ese lado necesita mas
     aire que los otros para que no quede pegada al texto. */
  padding-left: clamp(2.75rem, 9%, 6rem);
  min-width: 0;
}

/* Comilla de apertura, con el degradado de marca recortado sobre el
   glifo (background-clip: text). */

/* 20px, el tamaño de texto que usamos en todo el sitio. */
/* La comilla gigante ocupaba demasiado alto: ahora el texto va entre
   comillas tipograficas, puestas desde el CSS para no ensuciar el HTML
   (asi el texto del testimonio se copia y pega limpio). */
.testimonio__quote p:first-child::before { content: "\201C"; }
.testimonio__quote p:last-child::after   { content: "\201D"; }

.testimonio__quote p + p {
  margin-top: 0.6em;
}
.testimonio__quote p {
  /* 20px, el mismo cuerpo que el resto del sitio. Ya no depende del alto
     de la pantalla: la sección crece si hace falta. */
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text-light);
}

.testimonio__author {
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 24px;
  color: var(--color-8);
}

/* La foto llena el alto completo del recuadro y se recorta centrada: las
   fotos son cuadradas y el recuadro es apaisado, así que sobra alto y se
   descarta por igual arriba y abajo. Si en alguna foto conviene
   privilegiar otra zona, se cambia object-position (por ejemplo
   "center top"). */
/* Las fotos van apiladas una sobre otra dentro de esta celda y se
   turnan con un fundido. La celda toma el alto de la fila (que lo define
   el panel del texto) y las fotos, en absoluto, la llenan. */
.testimonio__fotos {
  position: relative;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
}

.testimonio__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.testimonio__photo.is-active {
  opacity: 1;
}

/* ---------------------------------------------------------
   RESPONSIVE
   En mobile la foto va arriba y el panel abajo, y las flechas se meten
   para adentro: colgadas del borde se saldrían de la pantalla.
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .testimonios__inner { gap: var(--space-5); }

  .testimonio {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .testimonio__fotos {
    grid-row: 1;
    aspect-ratio: 4 / 3;
  }
  .testimonio__panel {
    grid-row: 2;
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .testimonios .carousel__nav--prev { transform: translate(0, -50%); }
  .testimonios .carousel__nav--next { transform: translate(0, -50%); }
  .testimonios .carousel__nav--prev:hover,
  .testimonios .carousel__nav--prev:focus-visible { transform: translate(0, -50%) scale(0.94); }
  .testimonios .carousel__nav--next:hover,
  .testimonios .carousel__nav--next:focus-visible { transform: translate(0, -50%) scale(0.94); }
}

/* ---------------------------------------------------------
   VENTANAS BAJAS (notebooks)
   El texto NO se toca: sigue en 20px. Lo que se recorta es el aire
   sobrante de la sección (el padding de abajo y la separación entre el
   título y el recuadro), que es lo que hacía que el recuadro terminara
   unos pixeles debajo del borde de la pantalla.
   --------------------------------------------------------- */
@media (min-width: 1025px) and (max-height: 780px) {
  .testimonios.section-full {
    padding-bottom: var(--label-offset);
  }
  .testimonios__inner {
    gap: var(--space-4);
  }
  .testimonio {
    min-height: 0;
  }
  /* Menos aire adentro del recuadro (el texto sigue en 20px). */
  .testimonio__panel {
    padding: clamp(1.25rem, 4.5%, 3rem);
    padding-left: clamp(2.5rem, 7%, 4.5rem);
    gap: var(--space-3);
  }
}