/**
 * Estilo del placeholder de canvas. Ver la nota de `canvas.jsx`.
 *
 * Se ve deliberadamente como una herramienta de edición y no como contenido: borde
 * punteado, gris, sin la tipografía de la marca. Si alguien lo confunde con diseño,
 * está mal hecho.
 *
 * No usa los tokens de MX a propósito — no es parte del diseño del sitio.
 */
.wf-canvas-placeholder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  padding: 16px 20px;
  border: 1px dashed #9fada7;
  border-radius: 8px;
  background-color: #f1f3f2;
  color: #52605a;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 18px;
  text-align: left;
  box-sizing: border-box;
}

.wf-canvas-placeholder strong {
  color: #292929;
  font-size: 13px;
  font-weight: 600;
}

.wf-canvas-placeholder small {
  color: #9fada7;
  font-size: 11px;
  line-height: 16px;
}

/**
 * BigNumber.css — port de `mx-cms/src/components/HighlightText/styles.ts`
 * + el `ListItem` que lo envolvía en HighlightedNumbers/styles.ts.
 *
 * Tipografía (tema `standard`):
 *   body.xl     = 20px · ls sm 0.5 · lh xl 28px
 *   heading.lg  = 32px · ls sm 0.5 · lh 4xl 40px   (pisado abajo, ver .main)
 *   regular 400
 *
 * `media.up('6xl')` -> min-width: 1280px
 */

/* 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. Sin esto, Blink usa subpixel
 * smoothing y el mismo texto en 400 se ve más pesado que en el sitio actual. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * ListItem de la sección: era un `<li>` con `width: 100%`.
 *
 * **Adopta el contrato `--card-*`**: es la mitad del hijo. El padre lo setea en
 * `.numbers` y acá se lee. Después de que `::slotted(*)` aplana el wrapper de
 * Webflow, el flex item real es esta raíz — y una custom property heredada es lo
 * único que cruza el límite del shadow root.
 *
 * Los defaults son el comportamiento standalone (ancho completo).
 */
.big-number {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  box-sizing: border-box;

  flex-grow: var(--card-grow, 0);
  flex-shrink: var(--card-shrink, 1);
  flex-basis: var(--card-basis, 100%);
  max-width: var(--card-max, 100%);
  min-width: 0;

  /* HighlightText → Container */
  .box {
    max-width: 100%;
    height: 100%;
  }

  /* TypographyWrapper as="h3" variant="bodyLgRegular" */
  .stack {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;

    font-size: 18px; /* body.lg */
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;
  }

  /* PreTitle — bodyXlRegular, centrado, color fijo neutral[90] */
  .pre {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 28px;
    text-align: center;
    color: #292929; /* neutral[90] — fijo en el legacy, ignora textColor */
  }

  /* MainTitle — headingLgRegular (weight 400) con font-size, line-height y
     letter-spacing PISADOS por el styled: 38px / 32px / 0.3px. */
  .main {
    font-size: 38px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 32px;
    text-align: center;
    color: #292929; /* neutral[90] */
  }

  /* PostTitle — bodyXlRegular con tope de ancho */
  .post {
    max-width: 255px;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 28px;
    text-align: center;
    color: #292929; /* neutral[90] */
  }

  /* Dato SIN cifra: las dos líneas chicas suben a 24px.
     ────────────────────────────────────────────────────────────────────────
     Cuando el campo «Número» está lleno, el texto de arriba y el de abajo son
     el pie de la cifra y van a 20px. Cuando está vacío —el caso «estamos
     supervisados por CNBV y Condusef», sin número— esas dos líneas PASAN A SER
     el dato, y a 20px quedaban chicas al lado de los datos con cifra de 38px.

     Solo cambia el `font-size`, que es lo que se pidió. El `line-height` queda
     en los 28px de `body.xl`: con 24px da 1.17, apretado pero sano. Si el
     diseño lo quiere más aireado, es una línea acá.

     Va por atributo y no por custom property porque `.pre`, `.post` y la raíz
     que lleva el atributo viven en el MISMO shadow root: un selector normal
     alcanza, no hay límite que cruzar. */
  &[data-has-number='false'] {
    .pre,
    .post {
      font-size: 24px;
    }
  }
}

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