/* Nav tablet/móvil: en babel-e9428a.webflow.css el breakpoint ya pone bg-primary en .nav_menu pero no
   reasigna color; .nav.is-inverse sigue forzando texto claro → mismo síntoma que si faltara la mitad
   de .background_primary (líneas ~721–724: bg-primary + text-primary). No podemos añadir esa clase al
   <nav> en HTML: en desktop el menú es transparente sobre barra oscura y text-primary sería ilegible.
   .nav_link.on-inverse es para superficie oscura; aquí hace falta el color “primary” solo con el panel claro. */
@media screen and (max-width: 991px) {
  .nav.is-inverse .nav_menu {
    color: var(--_colors---text-color--text-primary);
  }
}

/* CTA "Ready to trade smarter": la fila del grid iguala la altura del texto; cover + height 100%
   fuerza un escalado/recorte que remuestra mal los JPEG con UI. Natural height + align al inicio. */
.image-cta_tablet-wrap {
  align-self: start;
}

.image-cta_tablet {
  display: block;
  width: 100%;
  height: auto;
  object-fit: unset;
  object-position: unset;
  image-rendering: auto;
  image-rendering: high-quality;
}

/* Footer: el grid 1fr 1fr 1fr encoge la columna central (min-content de logo + iconos) y el ul con
   is-wrap parte los enlaces en varias filas pese a haber espacio visual; auto 1fr auto da el hueco al centro. */
@media screen and (min-width: 992px) {
  .footer .w-layout-grid.grid_3-col.tablet-1-col-1 {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .footer .w-layout-grid.grid_3-col > ul:not([aria-label]) {
    flex-wrap: nowrap;
  }

  .footer .w-layout-grid.grid_3-col.tablet-1-col-1 .footer_icon-group {
    justify-content: flex-end;
  }
}

/* Footer apilado (tablet/móvil): logo e iconos al centro; enlaces ya van centrados en el HTML. */
@media screen and (max-width: 991px) {
  .footer .w-layout-grid.grid_3-col.tablet-1-col-1 > div:first-of-type {
    display: flex;
    justify-content: center;
  }

  .footer .w-layout-grid.grid_3-col.tablet-1-col-1 .footer_icon-group {
    justify-content: center;
  }
}

/* Franja de partners: ancho completo + hueco fluido (reparto vía .is-space-between en HTML) */
.section.is-inverse .partner-logos {
  width: 100%;
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}

.section.is-inverse .partner-logos .logo {
  flex: 0 0 auto;
  height: clamp(3rem, 5vw, 4.5rem);
  justify-content: center;
}

.section.is-inverse .partner-logos .logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: min(20rem, 22vw);
  object-fit: contain;
}

@media (max-width: 991px) {
  .section.is-inverse .partner-logos {
    justify-content: center;
    column-gap: 2rem;
  }

  .section.is-inverse .partner-logos .logo {
    height: clamp(2.75rem, 8vw, 3.75rem);
  }

  .section.is-inverse .partner-logos .logo img {
    max-width: min(16rem, 42vw);
  }
}

/* About: el tema aplica text-wrap: balance a .subheading (útil en titulares); en párrafos largos
   el motor reparte líneas por “equilibrio” y deja huecos: palabras que caben saltan abajo. */
#about .subheading,
#about .subheading p {
  text-wrap: wrap;
}

/* About: más aire entre copy y tarjeta; la tarjeta usa 80% del ancho de la mitad derecha */
@media screen and (min-width: 992px) {
  #about .w-layout-grid.grid_2-col.gap-xxlarge {
    column-gap: clamp(var(--_sizes---gap--xxl-gap), 3vw + 2rem, 5.5rem);
  }

  #about .w-layout-grid > .grid-item-manual {
    justify-self: start;
    width: 100%;
    max-width: 80%;
    min-width: 0;
  }
}

/* Core capabilities: 5 tarjetas en 3+2; en desktop centrar la fila de 2 manteniendo ancho y gap de 3 columnas */
@media screen and (min-width: 992px) {
  #how-it-works .w-layout-grid.grid_3-col.gap-medium {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--_sizes---gap--md-gap);
    row-gap: var(--_sizes---gap--md-gap);
  }

  #how-it-works .w-layout-grid.grid_3-col.gap-medium > .grid-item-manual {
    flex: 0 1 calc((100% - 2 * var(--_sizes---gap--md-gap)) / 3);
    max-width: calc((100% - 2 * var(--_sizes---gap--md-gap)) / 3);
    min-width: 0;
  }
}

/* FAQ: en tablet/móvil el ítem de acordeones sigue con span 2 columnas del layout de escritorio,
   lo que abre una columna implícita y deja el encabezado a media anchura; ancho completo + copy centrado.
   Bento statement: en desktop heading_secondary en franja 2 cols; al apilar, mismo ritmo que heading_tertiary
   de la tarjeta con imagen. */
@media screen and (max-width: 991px) {
  /* Bento tarjetas 3–4, About (#about) y Core capabilities (#how-it-works): sin icono SVG arriba al apilar (layout tipo lista). */
  [data-wf="bento-full"] .bento-card-top-icon,
  #about .bento-card-top-icon,
  #how-it-works .bento-card-top-icon {
    display: none !important;
  }

  /* Evita que margin_top-auto deje el copy pegado al fondo cuando desaparece el icono. */
  [data-wf="bento-full"] .card_body_small:has(.bento-card-top-icon) .margin_top-auto {
    margin-top: 0 !important;
  }

  [data-wf="bento-full"] .card_bento-statement > .card_body_small > .heading_secondary {
    margin-bottom: var(--_typography---h3-heading--h3-margin-bottom);
    font-size: var(--_typography---h3-heading--h3-size);
    line-height: var(--_typography---h3-heading--h3-line-height);
    font-weight: var(--_typography---h3-heading--h3-weight);
    letter-spacing: var(--_typography---h3-heading--h3-letter-spacing);
  }

  #faq .w-layout-grid.grid_3-col.tablet-1-col-1-2 > .grid-item-manual {
    grid-column: 1 / -1;
  }

  #faq .header.margin-bottom_none {
    text-align: center;
    align-items: center;
    max-width: 100%;
  }

  #faq .header .button-group {
    justify-content: center;
  }
}