/**
 * MediaLogos.css — el layout NO viene de Brasil, viene de medir
 * `creditas.mx/conocenos` `#investors` a 1710px el 2026-08-24.
 *
 * La sección en el legacy de MX es `SimpleTitleTextListCTA` con `iconLink[]`
 * lleno, así que la estructura es la misma que `TextListCta.css`:
 *   `Container` (section) + `BorderContainer` = GeneralContainerMd + `LogosWrapper`
 *
 * Breakpoints del legacy: 3xl 768 · 4xl 880 · 5xl 1024 · 8xl 1440
 *   media.up('5xl')            -> min-width: 1024px
 *   media.down('4xl')          -> max-width: 1023.98px
 *   media.between('3xl','8xl') -> min-width: 768px and max-width: 1439.98px
 *
 * Solo lo importa `MediaLogos`. El hijo tiene su propio `MediaLogo.css` —
 * Brasil comparte un archivo entre los dos, acá no (ver ese archivo).
 */

/* Paridad de render de texto con el legacy: el sitio viejo setea
 * -webkit-font-smoothing: antialiased global, que en macOS renderiza la
 * tipografía más liviana. Los Code Components viven en shadow roots aislados,
 * así que hay que declararlo por componente en :host para que herede al shadow
 * tree — la propiedad NO cruza el límite. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.media-logos,
.media-logos *,
.media-logos *::before,
.media-logos *::after {
  box-sizing: border-box;
}

.media-logos {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;
  width: 100%;

  /* Defaults del legacy: backgroundColorGeneric ?? neutral[0],
     textColor ?? neutral[90] */
  background-color: #ffffff; /* neutral[0] */
  color: #292929; /* neutral[90] */

  &[data-bg='gray'] {
    background-color: #f1f3f2; /* neutral[10] */
  }

  &[data-bg='beige'] {
    background-color: #e9e9e1; /* other[10] */
  }

  &[data-bg='dark'] {
    background-color: #292929; /* neutral[100] */
    color: #ffffff; /* neutral[0] */
  }

  /* media.up('5xl') — del Container. ⚠️ Por debajo de 1024 la sección NO tiene
     padding: el espaciado lo pone el wrapper. Está así en el legacy. */
  @media (min-width: 1024px) {
    padding: 80px 24px;
  }

  /* BorderContainer = styled(GeneralContainerMd) + column + gap 20px, con
     align-items: center desde 1024px.
     Medido a 1710px: x=255, w=1200 — o sea centrado y sin padding horizontal. */
  .wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;

    /* media.down('4xl') */
    @media (max-width: 1023.98px) {
      padding: 40px 20px;
    }

    /* media.between('3xl', '8xl') */
    @media (min-width: 768px) and (max-width: 1439.98px) {
      padding-left: 40px;
      padding-right: 40px;
    }

    /* media.up('5xl') — del BorderContainer. Esto es lo que centra la fila de
       logos como bloque: la encoge al contenido. */
    @media (min-width: 1024px) {
      align-items: center;
    }
  }

  /* TitleH2 → headingLgMedium.
     heading.lg = 32px · ls sm 0.5 · lh 4xl 40px · medium 500

     ⚠️ `text-align: left` aunque el bloque esté centrado por el `align-items`
     del wrapper. Es el default de `TitleH2` en el legacy y se ve así en el sitio:
     el título de "Nuestros inversionistas" queda centrado como caja, no como
     texto. Con una sola línea no se nota; con dos, sí. */
  .title {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 40px;
    text-align: left;
  }

  /* Typography variant="bodyLgRegular"
     body.lg = 18px · ls xs 0.3 · lh lg 26px · regular 400 */
  .subtitle {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;
  }

  /* LogosWrapper del legacy, copiado tal cual:
       flex-direction: column  →  row desde 1024px
       gap: 24px · flex-wrap: wrap · align-items: center
     Medido a 1710px: w=810, h=69, gap 24, wrap, align center.

     @slot-layout: intrinsic — cada logo trae su propio tamaño. Medido en el
     sitio: 160×50, 84×50, 160×65, 150×67, 160×50. Las alturas NO son parejas, y
     `align-items: center` es lo único que los alinea. Forzar una altura fija
     (como hace Brasil) les cambiaría el aspect ratio. */
  .logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;

    /* La fila SIEMPRE ocupa el ancho del wrapper, y esto es la corrección de un
       bug real, no una preferencia. Sin esto, el `align-items: center` del
       wrapper (desde 1024px) la encoge al contenido — y un flex container
       encogido no tiene espacio libre que repartir, así que `justify-content` no
       tiene nada que alinear. Las tres alineaciones eran un no-op literal con
       los logos en una sola línea, que es el caso real de `/conocenos`.

       ⚠️ Con esto se deja de reproducir un detalle de lo MEDIDO en el sitio: ahí
       la fila NO tiene ancho propio y `justify-content` es `normal`. En una sola
       línea el render es idéntico al de `center` (la caja encogida la centraba
       el wrapper). La diferencia aparece solo al bajar de línea: en el sitio la
       segunda línea arranca a la izquierda debajo de una caja centrada. Eso es
       un artefacto del sizing, no un diseño, y no se conserva. */
    align-self: stretch;

    /* media.down('4xl') — en columna el eje horizontal lo gobierna
       `align-items`: `justify-content` ahí es el eje vertical y no haría nada. */
    @media (max-width: 1023.98px) {
      &[data-align='start'] {
        align-items: flex-start;
      }

      &[data-align='end'] {
        align-items: flex-end;
      }
    }

    @media (min-width: 1024px) {
      flex-direction: row;

      &[data-align='start'] {
        justify-content: flex-start;
      }

      &[data-align='center'] {
        justify-content: center;
      }

      &[data-align='end'] {
        justify-content: flex-end;
      }
    }

    /* ⚠️ EL QUIRK. Webflow envuelve TODOS los hijos del slot en un único
       `<div slot="...">`. Sin aplanarlo, ese wrapper es el único flex item y los
       logos se apilan adentro en cualquier viewport. */
    ::slotted(*) {
      display: contents;
    }
  }
}

/* El hijo `MediaLogo` tiene su CSS en `MediaLogo.css` — un archivo por
   componente, como los otros 38 de la librería. Brasil los comparte en un solo
   archivo; acá no, y `audit-quirks` lo chequea. */