/*
 * common.css — Capa 1 (común) de la arquitectura de estilos por capas.
 *
 * SOLO va aquí lo genuinamente compartido por TODAS las páginas (footer, header,
 * suavizado de fuente, tokens). Se carga en todas las páginas, antes del CSS por
 * página. Si dudas si algo es común, NO es común: va en pages/page-<id>.css.
 *
 * Guía completa: doc/web-public/estilos/  ·  Skill: /estilos-snapshot
 *
 * Guía completa: doc/web-public/estilos/  ·  Skill: /estilos-snapshot
 */

/* =====================================================================
 * MENÚ / Header — COMÚN a todas las páginas. Base: Personal (7685).
 * Centralizado aquí para que el menú se vea IDÉNTICO en todas las pantallas y se
 * edite en UN SOLO lugar. Antes vivía duplicado/divergente por página (p.ej. las
 * opciones del overlay estaban en 400 en Personal y 500 en Metal).
 * (El indicador "©2026 · MX" y sus posiciones del mega-menú siguen por página: son
 *  comportamientos específicos, no el "look" del menú.)
 * ===================================================================== */

/* Opciones del header (estado normal y activo) — Inter Medium. */
.site-header .menu-item > a,
.site-header .menu-item.menu-active > a {
  font-weight: 500 !important;
}

/* Mega-menú abierto: alinear la base de "©2026 · MX" con la base de la última opción
 * del panel ("FAQs y Ayuda"). El .indicador-scroll vive dentro del .mega-container; al
 * hacer hover, Webflow pone display:block al panel correspondiente (lo detectamos con
 * :has) y entonces anclamos el indicador al bottom. El .mega-container ajusta su altura
 * para que el último item de cualquiera de los 3 paneles quede en la misma línea, así
 * que un solo offset sirve para todos. (Antes estaba por página y divergente: Personal
 * 23px vs Metal 36px.) */
body.mega-open .indicador-scroll,
.site-header:has(.mega-panel[style*="display: block"]) .indicador-scroll {
  position: absolute !important;
  top: auto !important;
  bottom: 23px !important;
  right: 2.6em !important;
  transition: none !important;
}

@media (max-width: 480px) {
  /* Menú overlay (móvil): opciones en estado default a 400 (Regular). La opción
   * activa conserva su peso (500) del tema padre. */
  .menu__main li:not(.menu-active) a {
    font-weight: 400 !important;
  }

  /* Fila de categorías "Personal, Profesional, Empresarial.": escala con el ancho
   * para que "Empresarial." no se corte en teléfonos angostos (~360px). */
  .menu__category li a {
    font-size: min(20px, 5.1vw) !important;
  }
}

/* =====================================================================
 * FOOTER — COMÚN a las páginas con el footer estándar (footer > .content-some).
 * Base: Personal (7685). Centralizado para editar en UN SOLO lugar y que todas se vean
 * idénticas. EXCLUIMOS la variante .enlaces-home (landing/credito), que tiene su propio
 * footer en su page-<id>.css. El "Únete a Fondeadora" (pre-footer / módulo CTA) sigue
 * por página: es distinto en cada una (en Metal es "¿Aún no eres parte?").
 * ===================================================================== */

/* Columnas alineadas arriba (el base venía con align-items:center → se desfasaban
 * verticalmente) y con el gap de la referencia. Las 3 primeras al ancho del contenido;
 * las 2 espaciadoras (4ª/5ª) absorben el sobrante y anclan "Compañía" a la derecha. */
footer:not(.enlaces-home) .content-some {
  align-items: flex-start !important;
  column-gap: clamp(72px, 7.6vw, 132px) !important;
}
footer:not(.enlaces-home) .content-some > .wp-block-column:nth-child(-n+3) {
  flex: 0 1 auto !important;
}
footer:not(.enlaces-home) .content-some > .wp-block-column:nth-child(4),
footer:not(.enlaces-home) .content-some > .wp-block-column:nth-child(5) {
  flex-grow: 1 !important;
}

@media (max-width: 480px) {
  /* Móvil: apilar los grupos FONDEA en UNA sola columna a la izquierda; ocultar las 2
   * columnas espaciadoras vacías (4ª/5ª) que en dirección columna metían huecos. */
  footer:not(.enlaces-home) .content-some {
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
  }
  footer:not(.enlaces-home) .content-some > .wp-block-column {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  footer:not(.enlaces-home) .content-some > .wp-block-column:nth-child(4),
  footer:not(.enlaces-home) .content-some > .wp-block-column:nth-child(5) {
    display: none !important;
  }
}

/* =====================================================================
 * GLOBALES — aplican a TODAS las páginas a propósito (antes vivían en el monolito
 * snapshot-overrides.css, ya retirado). Cada página puede afinar lo suyo en su
 * page-<id>.css (carga después y gana).
 * ===================================================================== */

/* Suavizado de texto: igualar macOS (subpixel) a Figma (grayscale). Solo cambia el
 * render, NO el layout. */
html, body, body * {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* "©2026 · MX" (indicador de scroll) en Inter. Cada página afina su peso en su archivo. */
.indicador-scroll li {
  font-family: 'Inter V', 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

/* Suavizado del tagline (.hero-heading), compartido por las páginas de producto. */
.hero-heading,
.hero-heading i,
.hero-heading * {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Transición del header (habilita ocultarlo en el tríptico de la landing y otras
 * animaciones de header). Inocua donde no se togglea. */
.site-header,
.header.mobile {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
}

/* Pre-footer "Únete" — separación del device. Solo afecta páginas con .footer
 * .abretucuenta (productos: profesional, empresarial, plataforma, rendimiento…); no
 * aparece en landing/metal. Es un componente compartido, por eso va en común. */
.footer .abretucuenta + .div-block-27 {
  margin-top: clamp(72px, 5vw, 96px);
}
@media (max-width: 991px) {
  .footer .abretucuenta + .div-block-27 {
    margin-top: 56px;
  }
}
@media (max-width: 767px) {
  .footer .abretucuenta + .div-block-27 {
    margin-top: 40px;
  }
}