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

/**
 * MediaLogo.css — un logo de la fila de `Media Logos`.
 *
 * Port del `<Image>` dentro del `LogosWrapper` de
 * `mx-cms/src/sections/generic-sections/SimpleTitleTextListCTA`.
 *
 * ⚠️ **Va en su propio archivo, a diferencia de Brasil.** En
 * `apps/app/src/components/MediaLogos/` el padre y el hijo comparten un solo
 * `MediaLogos.css`. Acá no: la librería de MX tiene un CSS por componente en los
 * 38 componentes anteriores, y `audit-quirks` lo chequea. Además así el CSS del
 * hijo solo se carga con el hijo.
 */

/* Paridad de render de texto con el legacy: el sitio viejo setea
 * -webkit-font-smoothing: antialiased global. Los Code Components viven en
 * shadow roots aislados y la propiedad NO cruza el límite, así que va acá
 * también — este componente es su propio shadow root, no hereda el del padre. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ⚠️ `:host` NO declara `display`. Con el host en `display: contents` (el default
   de Webflow) el flex item de la fila es esta raíz. Con `display: block` el flex
   item pasaría a ser el host, y el `align-items: center` de la fila dejaría de
   alinear los logos entre sí — que es justo lo que los mantiene parejos cuando
   sus alturas no lo son. Ver components/QUIRKS_SWEEP.md, hallazgo 1. */
.media-logo {
  /* Este componente no muestra texto propio, pero la fuente igual hace falta:
     si la imagen no carga, el browser pinta el `alt`. Y el shadow root no hereda
     `font-family` del documento, así que sin esto saldría en la del sistema. */
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: inline-flex;
  align-items: center;

  .link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
  }

  /* El legacy usa su `<Image width="auto" height="auto">` con
     `sizes="(max-width: 768px) 45vw, 160px"`: el logo entra con su tamaño
     natural, sin altura fija.

     Medido en `/conocenos` #investors a 1710px: Kaszek 160×50, VEF 84×50,
     QED 160×65, Amadeus 150×67, SoftBank 160×50. O sea que las alturas NO son
     parejas en el sitio actual — forzar una altura fija (como hace Brasil, que
     usa 40/60/70px por breakpoint) les cambiaría el aspect ratio.

     ⚠️ Tampoco hay `filter` ni `opacity`: medido `filter: none`, `opacity: 1`.
     Brasil los pone en grayscale al 0.6 hasta el hover. Acá sería inventar
     diseño que el sitio no tiene. */
  .image {
    display: block;
    width: auto;
    height: auto;
    max-width: 160px;
    object-fit: contain;
  }
}