/*
 * page-7685.css — Personal ("La cuenta que te da más").
 * Capa 2 (por página). TODO scopeado bajo body.fc-page-7685 (único de esta página;
 * 7685 no colisiona con otros snapshots). Ver doc/web-public/estilos/ y /estilos-snapshot.
 *
 * Migrado desde snapshot-overrides.css (QA Notion 17.06.26 desktop + mobile). Se re-scopeó
 * body.page-id-7685 -> body.fc-page-7685. Las globales compartidas (suavizado,
 * .indicador-scroll li, .hero-heading, .footer .abretucuenta) quedan en common.css.
 */

/* =====================================================================
 * Página PERSONAL (y demás no-landing) — QA Notion 17.06.26 (Desktop)
 * ===================================================================== */

/* [01] Header — el indicador "©2026 · MX" en Inter Medium (500). Las opciones del
 * menú se centralizaron en common.css (look común a todas las páginas). */
body.fc-page-7685 .indicador-scroll li {
  font-weight: 500 !important;
}

/* [01] Cover — tagline: el texto en Inter V (la parte roman, p.ej. "La cuenta que
 * … y lo hace crecer.") estaba en weight 200 (ExtraLight, muy delgado), fijado por
 * `.page-id-7685 .hero .hero-heading { font-weight:200!important }`. Lo subimos a
 * 400 (consistente con el landing). La cursiva (Instrument Serif) no cambia. */
body.fc-page-7685 .hero .hero-heading {
  font-weight: 400 !important;
}

/* [02] Tu dinero imparable — "Haz crecer tu dinero… Genera hasta X%…" estaba en
 * weight 300 (muy delgado). Lo subimos a 400 (Regular). El <strong> del % se trata
 * aparte en [02].2. (#02.1) */
body.fc-page-7685 .paragraph-4 {
  font-weight: 400 !important;
}

/* [02].2 — "X% de rendimiento anual" (<strong>) estaba en 600 (muy grueso) → 500. */
body.fc-page-7685 .paragraph-4 strong {
  font-weight: 500 !important;
}

/* [02] Tu dinero imparable — ajuste fino 23.06: el bloque se percibía ligero
 * frente a la referencia. Subimos un escalón el headline y el copy del módulo. */
body.fc-page-7685 .featuresecciones.seccion-img-left._2 .section-heading,
body.fc-page-7685 .featuresecciones.seccion-img-left._2 .section-heading i {
  font-weight: 500 !important;
}

body.fc-page-7685 .featuresecciones.seccion-img-left._2 .paragraph-4,
body.fc-page-7685 .featuresecciones.seccion-img-left._2 .txt-small {
  font-weight: 500 !important;
}

body.fc-page-7685 .featuresecciones.seccion-img-left._2 .paragraph-4 strong,
body.fc-page-7685 .featuresecciones.seccion-img-left._2 .txt-small strong,
body.fc-page-7685 .featuresecciones.seccion-img-left._2 .link-3.cta {
  font-weight: 650 !important;
}

/* [02].3 — GATs (texto de apoyo / letra chica .txt-small): 300 quedó demasiado
 * ligero en desktop; lo regresamos a Regular para sostener legibilidad. */
body.fc-page-7685 .txt-small {
  font-weight: 400 !important;
}

/* [02].6 — Eliminar la sombra entre módulos al hacer scroll. Los .featuresecciones
 * tenían un box-shadow (glow gris suave) que se percibía entre módulos. */
body.fc-page-7685 .featuresecciones {
  box-shadow: none !important;
}

/* [03]/[04] — listas de los módulos: el texto REGULAR de las descripciones (<li>)
 * estaba en 300 (muy delgado) → 400. El <strong> (label semi-bold) ya está en 500
 * (mismo target que [02]), así que la sensación de "grueso" era por el contraste con
 * el 300; queda balanceado. Cubre los 6 <li> de ul.paragraph-4 ([03] y [04]). */
body.fc-page-7685 ul.paragraph-4 li {
  font-weight: 400 !important;
}

/* [04].2 — centrar verticalmente el bloque de texto en cada módulo. El
 * .section-heading tenía margin-top:40px (y 0 abajo del bloque), que empujaba el
 * contenido ~20px por debajo del centro del módulo. Quitándolo, el bloque queda
 * centrado (offset 0). Aplica a todos los .featuresecciones de la página. */
body.fc-page-7685 .featuresecciones .textseccion .section-heading {
  margin-top: 0 !important;
}

/* [03] Descubre un mundo — ajuste fino 23.06: mismo grosor visual que
 * "Una tarjeta..." en headline, bullets y labels. */
body.fc-page-7685 .featuresecciones.seccion-img-right.last .section-heading,
body.fc-page-7685 .featuresecciones.seccion-img-right.last .section-heading i {
  font-weight: 500 !important;
}

body.fc-page-7685 .featuresecciones.seccion-img-right.last ul.paragraph-4 li {
  font-weight: 500 !important;
}

body.fc-page-7685 .featuresecciones.seccion-img-right.last ul.paragraph-4 li strong {
  font-weight: 650 !important;
}

/* [03] Una tarjeta sin datos — ajuste fino 23.06: igualamos el peso visual
 * del diseño en headline, bullets, labels y CTA. */
body.fc-page-7685 .featuresecciones.seccion-img-left.last .section-heading,
body.fc-page-7685 .featuresecciones.seccion-img-left.last .section-heading i {
  font-weight: 500 !important;
}

body.fc-page-7685 .featuresecciones.seccion-img-left.last ul.paragraph-4 li {
  font-weight: 500 !important;
}

body.fc-page-7685 .featuresecciones.seccion-img-left.last ul.paragraph-4 li strong,
body.fc-page-7685 .featuresecciones.seccion-img-left.last .link-3.cta {
  font-weight: 650 !important;
}

/* [05].1 — "Únete a Fondeadora" (módulo CTA pre-footer): "Únete a" (Inter V) estaba
 * en 500 (más grueso de lo propuesto) → 400. "Fondeadora" (Instrument Serif) no cambia. */
body.fc-page-7685 .footer h2.text-2xl {
  font-weight: 400 !important;
}

/* [05].2 — el device (teléfono) estaba muy grande (434px) y pegado a los CTAs de las
 * stores. Lo achicamos (max-width 310px) y le damos aire (margin-top) para que no choque. */
body.fc-page-7685 .footer .div-block-27 {
  margin-top: 48px !important;
}
body.fc-page-7685 .footer .div-block-27 img {
  max-width: 310px !important;
}

/* [06] Footer — el layout de columnas (alineación, gap, apilado móvil) se centralizó
 * en common.css (footer común a todas las páginas con footer estándar). */

/* [02]/[03] Desktop — los assets de "Tu dinero imparable" y "Una tarjeta..."
 * deben descansar en el borde inferior del módulo para evitar el corte blanco
 * antes del siguiente fondo. */
@media (min-width: 769px) {
  body.fc-page-7685 .featuresecciones.seccion-img-left._2 .img-container,
  body.fc-page-7685 .featuresecciones.seccion-img-left.last .img-container {
    align-self: stretch !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  body.fc-page-7685 .featuresecciones.seccion-img-left._2 .img-container img,
  body.fc-page-7685 .featuresecciones.seccion-img-left.last .img-container img {
    display: block !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }
}

/* =====================================================================
 * Página PERSONAL (7685) — QA Notion 17.06.26 (Mobile / Safari 393x852)
 * Solo aplica en el breakpoint de teléfono (≤480) del sitio.
 * ===================================================================== */
@media (max-width: 480px) {
  /* [01].2 — CTA de stores del cover: dock fijo canónico de Metal. El contenedor
   * es invisible; site.js muestra únicamente el badge oficial de la tienda del SO. */
  body.fc-page-7685 .hero .button-app {
    display: flex !important;
    position: fixed !important;
    left: 50% !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    transform: translateX(-50%);
    z-index: 90;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    max-width: calc(100vw - 32px);
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition:
      opacity 180ms ease,
      visibility 180ms ease,
      transform 180ms ease;
  }

  body.fc-page-7685 .hero .button-app a {
    display: block;
    flex: 0 0 auto;
  }

  body.fc-page-7685 .hero .button-app img {
    display: block;
    width: auto;
    height: auto;
    max-width: 140px !important;
  }

  body.fc-page-7685 .hero .button-app a.is-store-hidden {
    display: none !important;
  }

  body.fc-page-7685 .hero .button-app.is-cover-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px);
  }

  /* [01].1 — tagline: la parte roman (Inter V) estaba en 400 y se percibía muy
   * delgada en móvil. La subimos a 500 (Medium). La cursiva (Instrument Serif)
   * se mantiene en 400. */
  body.fc-page-7685 .hero .hero-heading {
    font-weight: 500 !important;
  }
  body.fc-page-7685 .hero .hero-heading i {
    font-weight: 400 !important;
  }

  /* [02].3 — el texto de apoyo (GATs / .txt-small) se percibía más grande que el
   * diseño en móvil. Bajamos de 14px a 12px (fine print). El peso 300 ya viene del
   * ajuste desktop. (NOTA: [02].1 "Haz crecer…" 300→400 y [02].2 "8%…" 600→500 ya
   * quedaron resueltos con los cambios globales del desktop.) */
  body.fc-page-7685 .txt-small {
    font-size: 12px !important;
  }

  /* [02].2 (ajuste móvil) — "8% de rendimiento anual." se percibía ligero en móvil
   * (Safari renderiza distinto). El usuario lo quiere más marcado/oscuro: 500→600
   * SOLO en móvil. En desktop se queda en 500 (ya validado). */
  body.fc-page-7685 .paragraph-4 strong {
    font-weight: 600 !important;
  }

  /* [02].6 / [03].2 — los assets (mockups de los módulos) se veían chicos en móvil.
   * El diseño los quiere un poco más grandes: subimos el tope de 80% a 90% del ancho. */
  body.fc-page-7685 .featuresecciones .img-container img {
    max-width: 90% !important;
  }

  /* [04].2 — módulo "Una tarjeta…" (.seccion-img-left.last): la imagen tenía
   * margin-top:50px y, sumado al espacio en blanco propio del PNG (la tarjeta vive
   * en la parte baja del asset), dejaba demasiado aire entre "Descubre cómo →" y la
   * tarjeta. Tiramos la imagen hacia arriba (margin-top negativo) para pegarla al
   * contenido como en el diseño. El espacio transparente del asset no pisa el texto. */
  body.fc-page-7685 .featuresecciones.seccion-img-left.last .img-container img {
    margin-top: -40px !important;
  }

  /* [05] — "Únete a Fondeadora": el device se veía más pequeño que la referencia.
   * El PNG real mide 816px de ancho, así que puede mostrarse mayor sin perder nitidez. */
  body.fc-page-7685 .footer .div-block-27 {
    margin-top: 36px !important;
    margin-bottom: -36px !important;
  }

  body.fc-page-7685 .footer .div-block-27 img {
    max-width: min(260px, 78vw) !important;
  }

  /* [02] (revisión) — Conservamos el efecto sticky/overlap original (cada sección
   * se fija y la siguiente "sube" encima al hacer scroll). El problema era que la
   * imagen de "Tu dinero imparable" estaba anclada al fondo de la sección, así que
   * el brazo quedaba recortado por el borde inferior / la siguiente tarjeta antes
   * de verse completo. Solución: la hacemos más grande (375px, el usuario lo pidió)
   * y la SUBIMOS con translateY para que, cuando la sección está fija, el brazo se
   * vea COMPLETO; al seguir scrolleando la siguiente tarjeta lo cubre (efecto OK).
   * Como la imagen está anclada abajo, el translate la deja completa en cualquier
   * alto de viewport (sirve también en Android con la barra del navegador). */
  body.fc-page-7685 .featuresecciones._2 .img-container img {
    width: 375px !important;
    max-width: 100% !important;
    transform: translateY(-70px) !important;
  }

  /* [03] (móvil) — Franja blanca arriba de la tarjeta gris "Descubre un mundo sin
   * complicaciones". En móvil las secciones se fijan (sticky) con top:~34px (4vh),
   * dejando un hueco arriba que muestra el fondo blanco de .secciones / la sección
   * anterior. En las tarjetas blancas no se nota (blanco sobre blanco), pero en esta
   * (#f8f8f8) se ve la franja. La pegamos a top:0 para que el fondo gris llegue hasta
   * arriba. Solo esta tarjeta (las demás ya están validadas en su posición), y el
   * efecto sticky/overlap se conserva (la siguiente sube encima al scrollear). */
  body.fc-page-7685 .featuresecciones.seccion-img-right.last {
    top: 0 !important;
  }

  /* [05].3 — FONDEADORA® se partia en 2–3 lineas antes de que initFooterLogoFit()
   * pudiera medirlo. Una caja no-wrap permite calcular el ancho real y escalarlo igual
   * que en Empresarial, sin solaparse con el device ni desbordar el viewport. */
  body.fc-page-7685 .footer .div-block-28 {
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 20px 32px !important;
    overflow: hidden !important;
  }

  body.fc-page-7685 .footer .fondlogo {
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 12vw !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

}