/* ── TESTIMONIOS (fondo claro) ────────────────────────────────
   Todo escopado dentro de .test-section: no toca :root ni body,
   así no choca con las variables/tipografía de otras secciones. */

.test-section {
  --t-gold: #C9A84A;
  --t-gold-soft: rgba(201, 168, 74, .28);
  --t-bg: #FBF8F2;
  --t-bg-alt: #F3EDE1;
  --t-ink: #1B2233;
  --t-gray: #6B6458;
  --t-line: #E4DCC9;
  --t-font-display: 'Cormorant SC', serif;
  --t-font-body: 'Cormorant Garamond', serif;
  background: var(--t-bg);
  color: var(--t-ink);
  font-family: var(--t-font-body);
  padding: 80px 24px;
}

.test-section .test-inner {
  max-width: 760px;
  margin: 0 auto;
}

.test-section .section-eyebrow {
  font-family: var(--t-font-display);
  font-size: .8rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--t-gold);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.test-section .section-eyebrow::before,
.test-section .section-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--t-gold);
}

.test-section .section-title {
  font-family: var(--t-font-display);
  font-weight: 600;
  font-size: 2.6rem;
  text-align: center;
  margin: 0 0 48px;
  color: var(--t-ink);
}
.test-section .section-title em {
  font-style: italic;
  color: var(--t-gold);
}

/* ── PROGRESS ── */
.test-section .test-progress {
  height: 1px;
  background: var(--t-line);
  margin-bottom: 44px;
  overflow: hidden;
}
.test-section .test-progress-bar {
  height: 100%;
  background: var(--t-gold);
  transition: width .55s ease;
}

.test-section .test-track-wrap { overflow: hidden; }
.test-section .test-track {
  display: flex;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

.test-section .test-card {
  min-width: 100%;
  background: var(--t-bg-alt);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid var(--t-line);
  border-radius: 4px;
  padding: 52px 48px 44px;
  animation: testCardIn .5s ease both;
  transition: border-color .3s ease;
}
@keyframes testCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.test-section .test-quote {
  font-family: var(--t-font-body);
  font-style: italic;
  font-size: 1.28rem;
  line-height: 1.72;
  color: var(--t-ink);
  margin: 0 0 36px;
  padding-left: 8px;
}
.test-section .test-quote::before {
  content: '"';
  display: block;
  font-family: var(--t-font-display);
  font-style: normal;
  font-size: 3.4rem;
  color: var(--t-gold);
  line-height: .6;
  margin-bottom: 14px;
}

.test-section .test-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--t-line);
  padding-top: 26px;
}
.test-section .test-logo {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--t-gold-soft);
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.test-section .test-logo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .4s ease;
}
.test-section .test-logo img.loaded { opacity: 1; }

.test-section .test-name {
  font-family: var(--t-font-display);
  font-size: 1.05rem;
  letter-spacing: .03em;
  color: var(--t-ink);
}
.test-section .test-company {
  font-family: var(--t-font-body);
  font-style: italic;
  font-size: .85rem;
  color: var(--t-gray);
  margin-top: 2px;
}

.test-section .test-norms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.test-section .test-norm-chip {
  font-family: var(--t-font-display);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--t-gold);
  border: 1px solid var(--t-gold-soft);
  border-radius: 100px;
  padding: 5px 14px;
  white-space: nowrap;
}

.test-section .test-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}
.test-section .test-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--t-gold-soft);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .25s ease, transform .25s ease;
}
.test-section .test-btn:hover {
  border-color: var(--t-gold);
  transform: translateY(-2px);
}
.test-section .test-btn svg {
  width: 16px; height: 16px;
  stroke: var(--t-gold);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.test-section .test-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.test-section .test-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--t-line);
  transition: all .3s;
  cursor: pointer;
  border: none;
  padding: 0;
}
.test-section .test-dot.active {
  background: var(--t-gold);
  width: 20px;
  border-radius: 3px;
}

/* ── Variante con imagen de fondo ── */
.test-section .test-card.has-bg {
  border-color: rgba(255, 255, 255, .18);
}
.test-section .test-card.has-bg .test-quote {
  color: rgba(255, 255, 255, .92);
}
.test-section .test-card.has-bg .test-name {
  color: #ffffff;
}
.test-section .test-card.has-bg .test-company {
  color: rgba(255, 255, 255, .7);
}
.test-section .test-card.has-bg .test-meta {
  border-top-color: rgba(255, 255, 255, .18);
}

@media (max-width: 560px) {
  .test-section .test-card { padding: 36px 26px 32px; }
  .test-section .test-quote { font-size: 1.1rem; }
}