/* ═══════════════════════════════════════════════════════════════
   HIERRO FACH UY — testimonios-movil.css
   Carrusel de testimonios debajo de la franja de empresas.
   SOLO CELULAR: oculto por defecto, visible hasta 768px.
   Loop infinito: testimonios-movil.js clona la primera y la última
   tarjeta; al llegar a un clon salta sin animación a la real.
   Requiere: header.css (variables :root)
═══════════════════════════════════════════════════════════════ */

.tm {
  --tm-text:   #111c18;
  --tm-muted:  #6b7478;
  --tm-line:   rgba(11, 53, 87, 0.12);
  --tm-star:   #fbbc04;
  --tm-pad:    20px;   /* margen lateral del carrusel */
  --tm-peek:   36px;   /* cuánto asoma la tarjeta siguiente */
  --tm-gap:    14px;
  display: none;
}

@media (max-width: 768px) {
  .tm {
    display: block;
    background: #fff;
    padding: 8px 0 28px;
  }

  .tm__track {
    display: flex;
    gap: var(--tm-gap);
    padding: 0 var(--tm-pad);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--tm-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tm__track::-webkit-scrollbar { display: none; }
  /* Espaciador final: permite que el clon final alinee igual que el resto */
  .tm__track::after {
    content: "";
    flex: 0 0 calc(var(--tm-peek) - var(--tm-gap));
  }

  .tm__card {
    flex: 0 0 calc(100% - var(--tm-peek)); /* una por pantalla + asoma la siguiente */
    scroll-snap-align: start;
    scroll-snap-stop: always;              /* avanza de a una, sin saltear */
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 18px 22px 20px;
    background: #fff;
    border: 1px solid var(--tm-line);
    border-radius: 12px;
  }

  .tm__stars {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 12px;
    color: var(--tm-star);
  }
  .tm__stars svg { fill: currentColor; }

  .tm__text { margin: 0; flex: 1; }
  .tm__text p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--tm-text);
  }
  .tm__text p::before { content: '\201C'; }
  .tm__text p::after  { content: '\201D'; }

  .tm__meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 18px;
  }
  .tm__name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--clr-accent);
  }
  .tm__zone {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--tm-muted);
  }
  .tm__zone::before {
    content: '·';
    margin-right: 8px;
    color: var(--tm-line);
  }
}