/*
 * page-8541.css — Landing ("La plataforma financiera de México…").
 * Capa 2 (por página). TODO va scopeado bajo body.fc-page-8541 (único de esta
 * página). Ver doc/web-public/estilos/ y la skill /estilos-snapshot.
 *
 * Migrado desde snapshot-overrides.css (QA Notion 17.06.26 y 23.06.26).
 * NOTA: las reglas GLOBALES de las que la landing depende pero que comparten otras
 * páginas (suavizado de fuente, .indicador-scroll li en Inter, suavizado de
 * .hero-heading) NO se movieron: siguen en common.css.
 *
 * Re-scopeo page-id-8541 -> fc-page-8541: además de aislar, corrige que estas reglas
 * se filtraran al clon 5644-credito (que comparte la clase capturada page-id-8541).
 */

/* ── Desktop / base ─────────────────────────────────────────────────────────── */

/* [01] Cover — menú en Inter (no Open Sans). El peso se afina a 500 más abajo (QA 23.06). */
body.fc-page-8541 .menu-link,
body.fc-page-8541 .menu-link span {
  font-family: 'Inter V', 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

/* [02] Tríptico — peso de la palabra "FONDEA" (#6). Inter Medium con grayscale. */
body.fc-page-8541 .featuresecciones .fondea-word {
  font-family: 'Inter V', 'Inter', sans-serif !important;
  font-weight: 500 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* [02] Tríptico — peso del símbolo "→" en "Descubre más →" (#7). Se afina a 600 abajo. */
body.fc-page-8541 .featuresecciones .cta-arrow {
  font-weight: 700 !important;
}

/* [03] Footer — títulos bold en Inter (#8). */
body.fc-page-8541 .enlaces-home .regularh4,
body.fc-page-8541 .enlaces-home .regularh4 strong {
  font-family: 'Inter V', 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

/* [03] Footer — cuerpo, listas y links delgados (regular) (#9). */
body.fc-page-8541 .enlaces-home .wp-block-page-list__item,
body.fc-page-8541 .enlaces-home .wp-block-page-list__item a,
body.fc-page-8541 .enlaces-home p,
body.fc-page-8541 .enlaces-home li,
body.fc-page-8541 .enlaces-home a {
  font-family: 'Inter V', 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

/* [01] Cover — el tagline va en 5 líneas en mobile/tablet y 3 en desktop.
 * Los <br class="br-mobile"> solo rompen en ≤1050px. */
body.fc-page-8541 .hero-heading .br-mobile {
  display: none;
}
@media (max-width: 1050px) {
  body.fc-page-8541 .hero-heading .br-mobile {
    display: inline;
  }
}

/* [02] Tríptico — ocultar el header mientras se ve el tríptico (#5). La clase
 * hide-header-triptico la pone site.js. La transición base de .site-header/.header.mobile
 * queda en common.css (global e inocua). */
body.fc-page-8541.hide-header-triptico .site-header,
body.fc-page-8541.hide-header-triptico .header.mobile {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* [01] Cover (QA 23.06 Desktop) — header e indicador a 500 (en vez de 600). */
body.fc-page-8541 .menu-link,
body.fc-page-8541 .menu-link span,
body.fc-page-8541 .menu-link::before,
body.fc-page-8541 .menu-link::after,
body.fc-page-8541 .indicador-scroll li {
  font-weight: 500 !important;
}

/* [02] Tríptico — la flecha del CTA baja de 700 a 600. */
body.fc-page-8541 .featuresecciones .cta-arrow {
  font-weight: 600 !important;
}

@media (min-width: 481px) {
  /* [02] Tríptico — reduce el aire superior del módulo (solo desktop/tablet). */
  body.fc-page-8541 .hero-sticky .featuresecciones .textseccion {
    top: 0 !important;
    padding-top: 0 !important;
  }
}

/* [03] Footer — separación de columnas (contacto/redes a la izquierda; legal a la derecha). */
body.fc-page-8541 footer.enlaces-home .content-some {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: clamp(240px, 22vw, 420px) !important;
}
body.fc-page-8541 footer.enlaces-home .content-some > .wp-block-column:first-child {
  flex: 0 0 300px !important;
  max-width: 300px !important;
}
body.fc-page-8541 footer.enlaces-home .content-some > p {
  display: none !important;
}
body.fc-page-8541 footer.enlaces-home .last-column-footer-home {
  flex: 0 1 512px !important;
  max-width: 512px !important;
  margin-left: auto !important;
}

/* [03] Footer — más aire entre iconos de redes. */
body.fc-page-8541 footer.enlaces-home .redes-sociales .wp-block-column {
  justify-content: flex-start !important;
  gap: 20px !important;
  max-width: none !important;
}
body.fc-page-8541 footer.enlaces-home .redes-sociales figure {
  margin-right: 0 !important;
}

/* ── Mobile (≤480) ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* [01] Cover MOBILE — mostrar un poco más la 2da imagen (Profesional = .card.left). */
  body.fc-page-8541 .hero-sticky .card.left {
    --x: -3.8em !important;
  }

  /* [01] Cover MOBILE — alinear "©2026 · MX" con la base del [▾]. */
  body.fc-page-8541 .indicador-scroll {
    bottom: -14px !important;
  }

  /* [02] Tríptico MOBILE — peso/posición del CTA y su flecha. */
  body.fc-page-8541 .featuresecciones .textseccion .link-3.cta {
    font-size: 17px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
  }
  body.fc-page-8541 .featuresecciones .textseccion .cta-arrow {
    font-size: 17px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
  }

  /* [04] Tríptico MOBILE — la imagen de fondo cubre todo (top:0, sin franja blanca). */
  body.fc-page-8541 .hero-sticky .featuresecciones {
    top: 0 !important;
  }

  /* [02] Tríptico MOBILE — respiro superior del texto. */
  body.fc-page-8541 .hero-sticky .featuresecciones .textseccion {
    top: 36px !important;
  }

  /* [03] Footer MOBILE — títulos de bold a semibold. */
  body.fc-page-8541 footer.enlaces-home .regularh4,
  body.fc-page-8541 footer.enlaces-home .regularh4 strong {
    font-weight: 600 !important;
  }

  /* [03] Footer MOBILE — ritmo entre redes sociales. */
  body.fc-page-8541 footer.enlaces-home .redes-sociales .wp-block-column {
    gap: 48px !important;
    justify-content: flex-start !important;
    max-width: none !important;
  }

  /* [01] Cover MOBILE — override posterior al ajuste desktop 23.06 (indicador a 400). */
  body.fc-page-8541 .indicador-scroll li {
    font-weight: 400 !important;
  }

  /* [03] Footer MOBILE — override posterior al ajuste desktop 23.06 (redes). */
  body.fc-page-8541 footer.enlaces-home .redes-sociales .wp-block-column {
    gap: 48px !important;
  }
  body.fc-page-8541 footer.enlaces-home .redes-sociales figure,
  body.fc-page-8541 footer.enlaces-home .redes-sociales img {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
  }
}