/* ==========================================================================
   Thinkhub — /exitos
   Sólo lo propio de esta página. Navbar, footer, dots, botones y captions
   vienen de main.css, que es común a todas.
   Valores del frame 273:9163 (Desktop 1440 / Tablet 800 / Mobile 375).
   ========================================================================== */

/* La paleta de /exitos es la INVERSA de la home: el frame va en oscuro
   (#212224) y es el FOOTER el que va en claro (#E8E9DD). Además el título usa
   salmón (#FFAD82) y la frase de cierre lavanda (#E4D1FF), dos colores que en
   la home no aparecen como texto. */
.page-exitos { background: var(--c-dark); color: var(--c-white); }

.page-exitos .dots,
.page-exitos .quotes,
.page-exitos .cases-title,
.page-exitos .case-list,
.page-exitos .closing-quote { background: var(--c-dark); }

/* El footer va con la variante clara: ver `.footer--light` en main.css. */

/* --- Quotes de clientes ---------------------------------------------------
   Apertura: párrafo + caption, y debajo la tira de 7 cards. */
.quotes { padding-block: var(--quotes-pt) var(--sp-100); }

.quotes__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-64);
  margin-bottom: var(--sp-72);
}

/* Sobre fondo oscuro: el párrafo va en blanco. */
.quotes__lead {
  max-width: 823px;
  font-size: var(--fs-paragraph-l);
  line-height: var(--lh-paragraph-l);
  color: var(--c-white);
}

/* La tira no entra: 7 cards de 410 + gaps dan 2966px en un frame de 1440
   (2.06×), y en mobile 2392 en 375 (6.38×). Corre igual que la de logos de la
   home, con la misma velocidad de 60px/s. */
.quotes__viewport {
  overflow: hidden;
  display: flex;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.quotes__track {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: var(--sp-16);
  padding-inline-end: var(--sp-16);
  animation: quotes-marquee var(--quotes-dur) linear infinite;
}

.quotes__viewport:hover .quotes__track { animation-play-state: paused; }

@keyframes quotes-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* La card NO es blanca: es blanco al 5% sobre el fondo oscuro, o sea casi
   transparente. El texto va en blanco, no en oscuro. */
.quote {
  flex: none;
  width: var(--quote-w);
  min-height: var(--quote-h);
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  padding: var(--sp-24);
  background: rgba(255, 255, 255, 0.05);
  color: var(--c-white);
  border-radius: var(--r-card);
}

/* Los logos son blancos al 30%, no monocromos en el color del texto: así
   quedan apagados sobre la card y no compiten con la cita. */
.quote__logo { height: 40px; display: flex; align-items: center; }
.quote__logo img { max-height: 100%; width: auto; opacity: 0.3; }

.quote__text {
  margin: 0;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  font-weight: var(--fw-medium);
}

.quote__meta { margin-top: auto; opacity: 0.5; }

/* --- Título «Casos destacados» -------------------------------------------- */
.cases-title { padding-block: var(--title-pt) var(--sp-36); }

/* Salmón, no blanco ni oscuro. */
.cases-title__h {
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  color: var(--c-border-hi);
}

/* --- Lista de casos -------------------------------------------------------
   Cada caso es número arriba, y debajo imagen + datos en dos columnas.
   A diferencia de la home, acá NO se apilan: van uno tras otro con gap. */
.case-list { padding-block: 0 var(--sp-100); }

.case-list .container {
  display: flex;
  flex-direction: column;
  gap: var(--case-row-gap);
}

.case-row { display: flex; flex-direction: column; gap: var(--sp-24); }

.case-row__num {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--c-orange);
}

.case-row__body {
  display: grid;
  grid-template-columns: 669fr 623fr;
  gap: var(--sp-36);
  align-items: start;
}

.case-row__media {
  width: 100%;
  aspect-ratio: 669 / 416;
  object-fit: cover;
  border-radius: var(--r-card);
}

/* Los 4 campos van en UNA columna, apilados con gap 24 (`Frame 90` es
   VERTICAL en el componente), no en una grilla de 2×2. */
.case-row__data {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}

/* Dentro de cada campo, etiqueta y valor con gap 16. */
.case-row__data .case-field { gap: var(--sp-16); }

/* --- Cierre ---------------------------------------------------------------
   Bloque centrado: 3 puntos, frase grande y botón. */
/* El bloque de cierre va alineado a la izquierda, con un gran espacio libre
   a la izquierda donde el diseño ubica la ilustración. */
.closing-quote {
  padding: var(--closing-pt) var(--gutter);
  text-align: left;
}

.closing-quote__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-56);
  padding-left: var(--closing-indent);
}

.closing-quote__dots { display: flex; gap: var(--sp-24); }

.closing-quote__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-orange);
}

.closing-quote__text {
  margin: 0;
  max-width: 826px;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--c-lavender);
}

/* CTA de dos piezas pegadas: círculo con la flecha + pastilla con el texto.
   El círculo lleva borde naranja y la pastilla borde violeta, tal cual el
   diseño. La flecha va como mask para que tome el color del borde. */
.closing-quote__cta {
  display: inline-flex;
  align-items: center;
  color: var(--c-white);
}

.closing-quote__cta-icon,
.closing-quote__cta-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: var(--r-button);
  transition: transform var(--dur) var(--ease);
}

.closing-quote__cta-icon {
  width: 42px;
  border: 1px solid var(--c-orange);
}

.closing-quote__cta-icon::before {
  content: '';
  width: 14px;
  height: 14px;
  background: var(--c-orange);
  -webkit-mask: url('../img/icons/arrow-outward.svg') center / contain no-repeat;
  mask: url('../img/icons/arrow-outward.svg') center / contain no-repeat;
}

.closing-quote__cta-label {
  padding-inline: var(--sp-24);
  border: 1px solid var(--c-violet);
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-medium);
}

.closing-quote__cta:hover .closing-quote__cta-icon,
.closing-quote__cta:hover .closing-quote__cta-label { transform: scale(var(--hover-scale)); }

/* ==========================================================================
   Responsive — valores de los frames Tablet (800) y Mobile (375)
   ========================================================================== */

@media (max-width: 1100px) {
  .case-row__body { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .quotes__intro { gap: var(--sp-36); margin-bottom: var(--sp-56); }
  .closing-quote__inner { gap: var(--sp-36); }
}

/* La tira se detiene y queda scrolleable a mano. */
@media (prefers-reduced-motion: reduce) {
  .quotes__track { animation: none; }
  .quotes__viewport { overflow-x: auto; }
}