/* ==========================================================================
   testimonios.css — Página «Testimonios» (GECOTEL web, 2026-10-20)
   --------------------------------------------------------------------------
   Todos los testimonios visibles, del más reciente al más antiguo, uno debajo
   de otro. La tarjeta es la del carrusel de la portada (includes/testimonios.php),
   aquí a lo ancho, con las estrellas y la fecha a la vista.
   Requiere bootstrap.min.css (retícula) y chrome.css (cabecera, pie, banner).
   ========================================================================== */
:root {
  --gc-gold: #ffc107;
  --gc-gold-hi: #e0a800;
  --gc-accent: #826111;
  --gc-gold-ink: #1f2431;
  --gc-ink: #171b26;
  --gc-ink-2: #2c3242;
  --gc-muted: #616876;
  --gc-surface: #ffffff;
  --gc-bg: #f6f5f2;
  --gc-border: #e9e7e2;
  --gc-radius: 20px;
  --gc-shadow: 0 12px 34px rgba(15, 23, 42, .06);
  --gc-shadow-lg: 0 22px 50px rgba(15, 23, 42, .13);
  --gc-ease: cubic-bezier(.4, 0, .2, 1);
}
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--gc-bg);
  color: var(--gc-ink-2);
}

.tst-section { padding: 0 0 clamp(3rem, 7vw, 6rem); }
.tst-section > .container { max-width: 820px; }

.tst-header { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); }
.tst-header__eyebrow {
  margin: 0 0 .6rem;
  color: var(--gc-accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  font-size: .78rem;
}
.tst-header h2 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 800;
  color: var(--gc-ink);
  margin: 0 0 .75rem;
}
.tst-header p { color: var(--gc-muted); margin: 0 auto; max-width: 560px; }
.tst-total { margin-top: .9rem !important; font-size: .9rem; font-weight: 600; }

.tst-lista { display: flex; flex-direction: column; gap: 1.25rem; }

/* La tarjeta del carrusel, a lo ancho. */
.tst-lista .testimonial-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "texto  texto"
    "persona estrellas"
    "fecha  fecha";
  gap: 0 1rem;
  background: var(--gc-surface);
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius);
  box-shadow: var(--gc-shadow);
  padding: 2.2rem 2rem 1.6rem;
  overflow: hidden;
  transition: transform .3s var(--gc-ease), box-shadow .3s var(--gc-ease), border-color .3s var(--gc-ease);
}
.tst-lista .testimonial-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gc-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--gc-ease);
}
.tst-lista .testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gc-shadow-lg);
  border-color: rgba(255, 193, 7, .3);
}
.tst-lista .testimonial-card:hover::before { transform: scaleX(1); }

.tst-lista .quote-icon {
  position: absolute;
  top: 1.1rem; right: 1.5rem;
  color: var(--gc-accent);
  opacity: .18;
  font-size: 2.4rem;
  line-height: 1;
}
.tst-lista .testimonial-text {
  grid-area: texto;
  color: var(--gc-ink);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1.4rem;
}
.tst-lista .testimonial-text::before { content: '“'; }
.tst-lista .testimonial-text::after  { content: '”'; }

.tst-lista .testimonial-person {
  grid-area: persona;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gc-border);
  min-width: 0;
}
.tst-lista .testimonial-img {
  width: 52px; height: 52px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gc-gold);
  padding: 2px;
}
.tst-lista .testimonial-img--iniciales {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff6db; color: var(--gc-gold-ink);
  font-weight: 800; font-size: 1rem;
}
.tst-lista .testimonial-meta { display: flex; flex-direction: column; min-width: 0; }
.tst-lista .testimonial-name {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  color: var(--gc-ink);
  line-height: 1.25;
}
.tst-lista .testimonial-position {
  color: var(--gc-accent);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tst-lista .rating {
  grid-area: estrellas;
  align-self: end;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gc-border);
  color: var(--gc-gold);
  font-size: .9rem;
  white-space: nowrap;
}
.tst-lista .testimonial-date {
  grid-area: fecha;
  margin-top: .75rem;
  color: var(--gc-muted);
  font-size: .8rem;
}

.tst-vacio {
  text-align: center;
  color: var(--gc-muted);
  padding: 3rem 1rem;
  background: var(--gc-surface);
  border: 1px dashed var(--gc-border);
  border-radius: var(--gc-radius);
}
.tst-vacio i { display: block; font-size: 2rem; margin-bottom: .75rem; color: var(--gc-accent); opacity: .5; }

.tst-volver { margin-top: 2rem; text-align: center; }
.tst-volver a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.5rem;
  border-radius: 10px;
  background: var(--gc-gold);
  color: var(--gc-gold-ink);
  font-weight: 700;
  text-decoration: none;
  transition: background .22s var(--gc-ease), transform .22s var(--gc-ease);
}
.tst-volver a:hover { background: var(--gc-gold-hi); color: var(--gc-gold-ink); transform: translateY(-2px); }

@media (max-width: 576px) {
  .tst-lista .testimonial-card {
    grid-template-columns: 1fr;
    grid-template-areas: "texto" "persona" "estrellas" "fecha";
    padding: 2rem 1.3rem 1.4rem;
  }
  .tst-lista .rating { border-top: 0; padding-top: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tst-lista .testimonial-card, .tst-lista .testimonial-card::before { transition: none; }
}