/**
 * LegalContent.css — port 1:1 de
 * `mx-cms/src/sections/generic-sections/LegalContent/styles.ts`
 * (`Container` + `ContentContainer`).
 *
 * Breakpoints: 3xl 768 · 5xl 1024
 *   media.up('3xl') -> min-width: 768px
 *   media.up('5xl') -> min-width: 1024px
 *
 * ⚠️ Ojo: `ContentContainer` NO usa `GeneralContainer*`. Tiene su propio
 * `max-width: 808px` y su propio padding. No lo unifiques con el resto.
 *
 * La tipografía del contenido de cada bloque no está acá ni en LegalBlock.css:
 * es rich text slotteado al light DOM. Ver `./richText.js`.
 */

/* 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;
}

/* @slot-layout: stack — los bloques legales se apilan a ancho completo, uno
   debajo del otro. No hay fila, así que no hay contrato --card-*. */
.legal-content {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff; /* neutral[0] */

  /* ContentContainer.

     ⚠️ Es `flex` en columna con `gap`. Antes era `display: block` sin gap, y eso
     era **el quirk aplicado a medias**: tenía el `::slotted(*) { display:
     contents }` de abajo pero nada que aprovecharlo.

     El aplanado existe justamente PARA que el `gap` del contenedor funcione —
     está escrito así en el comentario de `Faq .list` y de `IconList .bullets`:
     "sin aplanar ese wrapper el gap y los bordes entre hermanos no maquetan".
     Sin `gap`, aplanar no hace nada.

     La consecuencia era un bug real: el espacio entre bloques salía del
     `margin-bottom: 24px` de los `<p>` del rich text, o sea de la hoja a nivel
     documento de `./richText.js`, que solo aplica si el atributo del host se
     estampó. Si eso falla —o si un bloque tiene el cuerpo vacío, o termina en una
     tabla en vez de un párrafo— los bloques quedan pegados.

     Con `gap` el espaciado es del contenedor: no depende del contenido de los
     hijos ni de que cargue una hoja externa. 24px es el valor del Figma, y es
     uniforme — título→fecha, fecha→intro y entre secciones, todos 24px
     (verificado contra las coordenadas de los nodos 8677:41114 en adelante).

     El `margin-bottom` del último `<p>` de cada cuerpo no duplica el gap: lo
     anula `shared/richTextStyles.js` con `.w-richtext>:last-child`. */
  .wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* El padding-top grande es por el navbar fijo del sitio actual. */
    padding: 94px 24px 48px;
    margin: 0 auto;
    text-align: justify;
    box-sizing: border-box;

    /* media.up('3xl') */
    @media (min-width: 768px) {
      padding-top: 54px;
    }

    /* media.up('5xl') */
    @media (min-width: 1024px) {
      max-width: 808px;
    }

    /* Encabezado de página. Valores del Figma del Aviso de Privacidad
       (nodo 8677:41114 y 8677:41115), que coinciden con la escala del tema:
       headingLgLight = 32px · 300 · ls sm 0.5 · lh 4xl 40px · neutral[80]

       ⚠️ Va alineado a la IZQUIERDA aunque el cuerpo del documento esté
       justificado: el `text-align: justify` del wrapper lo heredaría. */
    .title {
      /* Sin margen: el espaciado lo da el `gap` del wrapper. */
      margin: 0;
      font-size: 32px;
      font-weight: 300;
      letter-spacing: 0.5px;
      line-height: 40px;
      color: #3b4540; /* neutral[80] */
      text-align: left;
    }

    /* bodySmRegular = 14px · ls xs 0.3 · lh sm 20px · neutral[60] */
    .last-updated {
      margin: 0;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.3px;
      line-height: 20px;
      color: #52605a; /* neutral[60] */
      text-align: left;
    }

    /* ⚠️ EL QUIRK. Webflow envuelve TODOS los hijos del slot en un único
       `<div slot="...">`. Sin aplanarlo, el contenedor ve un solo hijo y el
       espaciado entre bloques no maqueta. Se aplica también en contenedores
       apilados — es el mismo caso que el `.list` del Faq. */
    ::slotted(*) {
      display: contents;
    }
  }
}

/* Reset de box-sizing scopeado al componente. El reset de Webflow no llega
   adentro del shadow root, así que cada componente declara el suyo. */
.legal-content,
.legal-content *,
.legal-content *::before,
.legal-content *::after {
  box-sizing: border-box;
}