/* ==========================================================================
   IBC — Página Avales
   Distintivos de confianza, carrusel de avales y banda de alianzas.
   La portada de sección y el bloque de presentación (.page-hero, .about)
   son compartidos entre subpáginas y viven en css/subpage.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Distintivos de confianza (bajo el texto de presentación)
   -------------------------------------------------------------------------- */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.trust-badge__icon {
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  color: var(--color-brass-600);
}

.trust-badge__icon svg { width: 100%; height: 100%; }

.trust-badge__label {
  max-width: 13ch;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Nuestros avales — banda oscura con carrusel
   -------------------------------------------------------------------------- */
.avales {
  padding-block: var(--space-xl);
  background-color: var(--color-navy-900);
  color: var(--color-on-dark);
}

.avales-head { text-align: center; }

.avales-head__eyebrow {
  color: var(--color-brass-300);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.avales-head__title {
  margin-top: var(--space-xs);
  color: var(--color-bone-50);
  font-size: var(--text-h2);
  font-weight: 400;
  letter-spacing: var(--tracking-title);
  text-transform: none;
}

.aval-carousel {
  position: relative;
  margin-top: var(--space-lg);
}

.aval-track {
  display: flex;
  gap: var(--space-sm);
  margin: 0;
  padding-bottom: var(--space-2xs);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-gutter);
  scrollbar-width: none;
}

.aval-track::-webkit-scrollbar { display: none; }

.aval-card {
  flex: 1 1 0;
  min-width: 9.5rem;
  max-width: 12.5rem;
  scroll-snap-align: start;
  text-align: center;
}

.aval-card__media {
  /* El <figure> trae un margen 1em 40px por hoja de estilos del navegador:
     sin resetearlo, la foto quedaba mucho más angosta que la tarjeta. */
  margin: 0;
  overflow: hidden;
  background-color: var(--color-navy-800);
}

.aval-card__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.15);
  transition: filter var(--duration-normal) var(--ease-standard),
              transform var(--duration-normal) var(--ease-out-expo);
  /* Disuasorio, no bloqueo real: evita el "fantasma" de arrastre nativo
     y la selección accidental sobre la foto (complementa avales.js). */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.aval-card:hover .aval-card__media img {
  filter: grayscale(0);
  transform: scale(1.035);
}

.aval-card__name {
  margin-top: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-bone-50);
}

.aval-card__role {
  margin-top: var(--space-2xs);
  color: var(--color-on-dark-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  /* Antes iba en mayúsculas: bien para roles cortos ("Empresario"), pero
     los cargos reales son frases más largas ("Asesor Bancario JP Morgan")
     y en mayúsculas se leen mal a este tamaño. */
  text-transform: none;
  line-height: 1.6;
}

.aval-card__flag {
  display: inline-block;
  width: 1.25rem;
  height: auto;
  margin-top: var(--space-2xs);
  border-radius: 2px;
  vertical-align: middle;
}

.aval-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 40%;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border-hairline-dark);
  border-radius: 50%;
  background-color: var(--color-navy-900);
  color: var(--color-bone-50);
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--ease-standard),
              color var(--duration-normal) var(--ease-standard);
}

.aval-nav:hover, .aval-nav:focus-visible { border-color: var(--color-brass-400); color: var(--color-brass-300); }

/* Desplazamiento atado a la canaleta del contenedor (no a --space-lg): así el
   botón nunca sale del viewport, sea cual sea el ancho (--space-gutter es el
   mismo valor que separa al contenedor del borde de la ventana). */
.aval-nav--prev { left: calc(-1 * var(--space-gutter)); }
.aval-nav--next { right: calc(-1 * var(--space-gutter)); }

.avales__cta { margin-top: var(--space-xl); text-align: center; }

/* --------------------------------------------------------------------------
   Alianzas que trascienden fronteras — banda partida a sangre
   -------------------------------------------------------------------------- */
.alliance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.alliance__media { position: relative; min-height: clamp(300px, 32vw, 460px); overflow: hidden; }

.alliance__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3);
}

.alliance__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-navy-950);
  text-align: center;
}

.alliance__inner { max-width: 26rem; }

/* .section-title es compartida con el resto del sitio (siempre en
   mayúsculas por defecto); aquí sólo se apaga para este titular. */
.alliance .section-title { text-transform: none; }

/* --------------------------------------------------------------------------
   Puntos de quiebre
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .aval-card { min-width: 7.75rem; }

  .alliance { grid-template-columns: minmax(0, 1fr); }
  .alliance__media { min-height: 260px; }
}

@media (max-width: 640px) {
  .trust-badges { gap: var(--space-md); }
  .trust-badge__label { max-width: none; }

  .aval-card { min-width: 40vw; }
}