/* ============================================================
   Auditas — Trayectoria
   ============================================================ */
.trayectoria {
  position: relative;
  background: var(--gray10);
  overflow: hidden;
  isolation: isolate;
}

/* ---- Triángulo amarillo (sangra por la izquierda) ---- */
/* Triángulo dibujado 100% con CSS (sin <img>): jamás se desalinea del borde.
   Geometría del diseño: vértices (0,0) → (427,0) → (154,616) → (0,616). */
.tray__triangle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(427px, 31vw);
  z-index: 3; /* por encima del carrusel: los logos se "tapan" al pasar por aquí */
  pointer-events: none;
  /* La sombra va en el padre para que el clip-path del hijo no la recorte */
  filter: drop-shadow(8px 8px 8px rgba(160, 165, 163, 0.25));
}
.tray__triangle::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Degradado del diseño: Seyedit (brillante, derecha) → Yelludit (ámbar, izquierda) */
  background: linear-gradient(265deg, var(--seyedit) 0%, var(--yelludit) 90%);
  clip-path: polygon(0 0, 100% 0, 36.07% 100%, 0 100%);
}
/* ---- Contenido ---- */
.tray__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
  /* Abajo mínimo: el caption cierra la sección sin banda vacía */
  padding-block: clamp(32px, 4vw, 52px) clamp(12px, 1.6vw, 20px);
}
/* El texto y el caption (dentro de .container) arrancan a la derecha del triángulo.
   El carrusel NO está en .container, así que cruza por debajo del triángulo. */
.tray__content > .container { padding-left: clamp(140px, 33vw, 470px); }

.tray__text {
  margin-left: auto;
  width: min(631px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: var(--sp-12);
}
.tray__title {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--blackf);
  line-height: 1.12;
}
.tray__paragraph {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--blackdit);
  line-height: 1.4;
}

/* ---- Carrusel de logos (marquee derecha → izquierda) ---- */
.tray__carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Desvanecer ambos bordes. El lado derecho termina alineado con el borde
     derecho del bloque de texto (gutter del .container + centrado a 1280px). */
  --tray-gutter: calc(max((100vw - 1280px) / 2, 0px) + var(--container-pad));
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 7%,
    #000 calc(100% - var(--tray-gutter) - 150px),
    transparent calc(100% - var(--tray-gutter)));
  mask-image: linear-gradient(90deg,
    transparent 0, #000 7%,
    #000 calc(100% - var(--tray-gutter) - 150px),
    transparent calc(100% - var(--tray-gutter)));
}
.tray__track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  width: max-content;
  will-change: transform;
  animation: tray-marquee 45s linear infinite;
}
.tray__carousel:hover .tray__track { animation-play-state: paused; }
@keyframes tray-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.tray-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.tray-logo img {
  height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  /* Tono unificado y discreto (escala de grises); color al pasar el mouse */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.tray-logo:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.06); }

/* ---- Caption ---- */
.tray__caption {
  margin-left: auto;
  width: min(631px, 100%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
  text-align: right;
  font-family: var(--font-body);
  font-size: var(--fs-mini);
  color: var(--blackf);
  line-height: 1.35;
}
.tray__caption-icon { width: 16px; height: 16px; flex: none; }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  /* El triángulo permanece opaco (no deja ver los logos detrás).
     El texto sigue a la derecha y despejado del triángulo (padding-left en .container).
     Se volvió al padding original (clamp 96px/26vw/200px, mismo que antes del
     2026-07-11) por preferencia del cliente — no le gustaba el contenedor de
     texto más angosto que resultaba de agrandar el padding. En su lugar, se
     achica un poco la franja amarilla (ver .tray__triangle abajo) para que
     quepa sin montarse sobre el texto. */
  .tray__content > .container { padding-left: clamp(96px, 26vw, 200px); }

  /* Triángulo un poco más angosto que en desktop (24vw en vez de 31vw) —
     "apeñuscado" a pedido del cliente, lo justo para no montarse sobre el
     texto con el padding de arriba (bug visto en móvil real, 2026-07-11). */
  .tray__triangle { width: min(360px, 24vw); }
}
@media (prefers-reduced-motion: reduce) {
  .tray__track { animation: none; flex-wrap: wrap; justify-content: center; }
}