/**
 * Grilla de testimonios ([carrusel_testimonios] — ver
 * inc/testimonios/class-testimonios-grid.php). Reutiliza las variables
 * globales de style.css (--color-azul-digital, --color-azul-oscuro,
 * --color-azul-cielo, --font-universo) con un valor de respaldo literal por
 * si este archivo se llega a cargar antes de que esas variables existan.
 */
.tg {
  --tg-ink: var(--color-azul-oscuro, #0a1444);
  --tg-coral: var(--color-azul-digital, #2c3fcd);
  --tg-cielo: var(--color-azul-cielo, #378de2);
  --tg-muted: rgba(10, 20, 68, 0.62);
  --tg-line: rgba(10, 20, 68, 0.08);
  --tg-bg-soft: #f4f8fb;
  --tg-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  /* El botón "Ver resultados" del hero (dr-res-hero-v3) enlaza a
     #testimoniosGrid como ancla interna — el header fijo del sitio
     (#dtTopbar + #dtNav, ver css/ciudades/ciudad-single.css) mide ~117px
     desktop, así que se compensa igual que ahí. */
  scroll-margin-top: 120px;
  background-color: var(--tg-bg-soft);
  padding: 60px 20px 80px;
  font-family: var(--font-universo, sans-serif);
  overflow: hidden;
}

/* ---- Encabezado ---- */
.tg__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 34px;
  padding: 0 10px;
}
.tg__headerText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}
.tg__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  /* Auditoría a11y: #8892a0 sobre #fff daba 3.15:1 — a 11px/700 no
     califica como "texto grande" WCAG, así que necesita 4.5:1 y fallaba.
     #667080 da 5.0:1, mismo tono de gris. */
  color: #667080;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid #eaeef2;
}
.tg__tag .dot {
  width: 8px;
  height: 8px;
  background-color: var(--tg-coral);
  border-radius: 50%;
}
.tg__title {
  font-family: 'Literata', serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--tg-ink);
  margin: 0;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .tg__header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .tg__title { font-size: 32px; }
}

/* ---- Grilla (6 por tanda: 3x2 en desktop, 2x3 en tablet, 1 columna en mobile) ---- */
.tg__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  .tg__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tg__grid { grid-template-columns: 1fr; }
}

/* ---- Tarjeta ---- */
.tg-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 10px 30px rgba(10, 20, 68, 0.04);
  transition: transform 0.3s var(--tg-ease), box-shadow 0.3s var(--tg-ease), opacity 0.6s var(--tg-ease), transform 0.6s var(--tg-ease);
  display: flex;
  flex-direction: column;
  /* Estado inicial de la animación de entrada — .is-visible lo revierte.
     Nace SIEMPRE en el DOM (SSR o insertado por AJAX): esto solo controla
     opacidad/posición, nunca display/visibility, así que jamás depende de
     JS para que el texto exista o sea legible por un buscador. */
  opacity: 0;
  transform: translateY(24px);
}
.tg-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.tg-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(10, 20, 68, 0.08);
}
.tg-card.is-visible:hover {
  transform: translateY(-5px);
}

.tg-card__head {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.tg-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid #fff;
  box-shadow: 0 4px 15px rgba(10, 20, 68, 0.1);
  background: var(--tg-bg-soft);
  display: grid;
  place-items: center;
}
.tg-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-card__avatar-fallback { font-weight: 800; font-size: 20px; color: var(--tg-ink); }

.tg-card__info { display: flex; flex-direction: column; min-width: 0; }
.tg-card__nombre {
  font-family: 'Literata', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--tg-ink);
  margin: 0 0 3px;
  line-height: 1.25;
}
.tg-card__meta { font-size: 12.5px; color: var(--tg-muted); margin: 0; }

.tg-card__rating { display: flex; gap: 3px; margin-bottom: 12px; font-size: 13px; }
.tg-star { color: #e2c68a; }
.tg-star.is-filled { color: #f59e0b; }

.tg-card__quote {
  margin: 0 0 14px;
  padding: 0;
  border: none;
  flex-grow: 1;
}
.tg-card__quote p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #334155;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tg-card__quote p::before { content: '\201C'; color: var(--tg-coral); font-weight: 800; }
.tg-card__quote p::after { content: '\201D'; color: var(--tg-coral); font-weight: 800; }

.tg-card__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tg-coral);
  text-decoration: none;
  transition: gap 0.2s var(--tg-ease);
}
.tg-card__link:hover { gap: 9px; }

/* ---- Botón "Cargar más" ----
   Nace deshabilitado y en un estado visualmente apagado (opacity/escala
   reducidas) — sigue en el DOM y en el árbol de accesibilidad desde el
   primer render, solo cambia de estado cuando el usuario llega a él
   haciendo scroll (ver testimonios-grid.js). Nunca display:none: no hay
   contenido de SEO detrás de este botón que ocultar. */
.tg__masWrap {
  display: flex;
  justify-content: center;
  margin-top: 44px;
  opacity: 0.55;
  transform: scale(0.96);
  transition: opacity 0.4s var(--tg-ease), transform 0.4s var(--tg-ease);
}
.tg__masWrap.is-revealed {
  opacity: 1;
  transform: scale(1);
}
.tg__masBtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--tg-ink);
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s var(--tg-ease), transform 0.2s var(--tg-ease);
}
.tg__masBtn svg { transition: transform 0.3s var(--tg-ease); }
.tg__masWrap.is-revealed .tg__masBtn:hover {
  background: var(--tg-coral);
  transform: translateY(-2px);
}
.tg__masBtn:disabled {
  cursor: default;
  background: #b7bfd1;
}
.tg__masBtn.is-loading svg {
  animation: tgSpin 0.8s linear infinite;
}
@keyframes tgSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tg-card,
  .tg__masWrap,
  .tg__masBtn svg {
    transition: none !important;
    animation: none !important;
  }
  .tg-card {
    opacity: 1;
    transform: none;
  }
}