/*
 * page-8761.css — Metal ("La primer tarjeta metálica de débito en México").
 * Capa 2 (por página). TODO scopeado bajo body.fc-page-8761 (único; sin colisión).
 * Ver doc/web-public/estilos/ y la skill /estilos-snapshot.
 *
 * Migrado desde snapshot-overrides.css (QA Notion 17.06.26 Desktop). Se re-scopeó
 * body.page-id-8761 -> body.fc-page-8761. Las globales compartidas (suavizado,
 * .indicador-scroll li, .hero-heading, etc.) quedan en common.css.
 */

/* =====================================================================
 * Página METAL (8761) — QA Notion 17.06.26 (Desktop / Chrome 1680x1050)
 * ===================================================================== */

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

/* [01].2 — Tagline: el H1 "La primer tarjeta metálica de débito en México."
 * estaba en 300 (Light) — se veía demasiado delgado sobre el fondo oscuro.
 * Subimos los textos roman (Inter V) a 400 (Regular). La parte cursiva
 * (Instrument Serif) hereda su propio peso. */
body.fc-page-8761 .hero .hero-heading {
  font-weight: 400 !important;
}

/* [02] Pesos de contenido — según QA del diseño (Metal Mobile 17.06): los bullets van
 * en "regular" y al igualarlos a Personal (500/650) se percibían demasiado gruesos sobre
 * el fondo oscuro. Volvemos a la escala propia de Metal (más ligera): bullets 400 (Regular)
 * y strong 500 (Medium). Es el efecto óptico del fondo negro: el mismo peso "pesa" más. */
body.fc-page-8761 .featuresecciones ul.paragraph-4 li {
  font-weight: 400 !important;
}
body.fc-page-8761 .featuresecciones ul.paragraph-4 li strong,
body.fc-page-8761 .featuresecciones .paragraph-4 strong {
  font-weight: 500 !important;
}

/* [03] Descubre todos los beneficios WEM de Fondeadora Metal
 * [03].1 — Alineación: el headline estaba centrado verticalmente en .textseccion
 * mientras que el acordeón (.faqs con padding-top:168px) arrancaba más arriba —
 * se veía desfasado. Webflow ponía `top:-168px` al .textseccion para compensar,
 * pero el resultado dejaba el heading más abajo que el primer item.
 * Fix: alineamos .textseccion al top (align-self:flex-start), anulamos su
 * top:-168px y le damos el MISMO padding-top:168px que tiene .faqs. Anulamos
 * también el margin-top:40px del heading. Resultado: heading top == primer item top. */
body.fc-page-8761 .featuresecciones.seccion-img-right.last .textseccion {
  align-self: flex-start !important;
  top: 0 !important;
  padding-top: 168px !important;
  box-sizing: border-box !important;
}
body.fc-page-8761 .featuresecciones.seccion-img-right.last .section-heading {
  margin-top: 0 !important;
}

/* [03].2 — Pesos del acordeón WEM (módulo propio de Metal). Según QA del diseño, el
 * contenido "semi-bold" se percibía demasiado grueso → volvemos a la escala original de
 * Metal: headline del item Inter V 500 (Medium), cuerpo .paragraph-faq 300 (Light) y los
 * <strong> internos 500 (Medium). */
body.fc-page-8761 .featuresecciones.seccion-img-right.last .faqs_headline,
body.fc-page-8761 .featuresecciones.seccion-img-right.last .benefits-heading {
  font-family: "Inter V", sans-serif !important;
  font-weight: 500 !important;
}
body.fc-page-8761 .featuresecciones.seccion-img-right.last .paragraph-faq,
body.fc-page-8761 .featuresecciones.seccion-img-right.last .paragraph-faq * {
  font-weight: 300 !important;
}
body.fc-page-8761 .featuresecciones.seccion-img-right.last .paragraph-faq strong {
  font-weight: 500 !important;
}

/* [03].3 — Cerrar [-] del acordeón no funcionaba.
 * El bug vivía en dos lugares y fue arreglado fuera del CSS:
 *   - assets/js/snapshot-forms.js (initFaqAccordions): ahora usa aria-expanded
 *     como fuente de verdad para el toggle y clona el trigger para neutralizar
 *     handlers previos de Webflow (data-w-id) que dejaban .open desincronizado.
 *   - snapshots/pages/8761-metal.html: se eliminó un script inline duplicado
 *     que delegaba clicks y toggleaba .open en paralelo, peleándose con el
 *     handler oficial.
 * Sin cambios CSS necesarios para este punto. */

/* [04] ¿Aún no eres parte de Fondeadora?
 * [04].1 — Pesos: el .paragraph-4 "Abre tu cuenta en menos de 3 minutos."
 * estaba en 300 (Light, muy delgado). Lo subimos a 400 (Regular). El <strong>
 * "menos de 3 minutos." se queda en 500 (Medium, propuesto). */
body.fc-page-8761 .featuresecciones.seccion-img-left.last .paragraph-4 {
  font-weight: 400 !important;
}
body.fc-page-8761 .featuresecciones.seccion-img-left.last .paragraph-4 strong {
  font-weight: 500 !important;
}

/* [04].2 — Link "Costos y Legales": estaba en Open Sans 400 (Open Sans renderiza
 * más grueso que Inter V al mismo peso, por eso se percibía grueso). Lo pasamos
 * a Inter V 300 (Light) para que coincida con la propuesta. Desactivamos el
 * `transition:all` heredado de los <a> globales para que el peso aplique
 * directo (la transición animaba el font-weight y rendía sintetizado). */
body.fc-page-8761 .featuresecciones.seccion-img-left.last .ty,
body.fc-page-8761 .featuresecciones.seccion-img-left.last .tycos a {
  font-family: "Inter V", sans-serif !important;
  font-weight: 300 !important;
  transition: none !important;
}

/* [05] 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). */

/* [05].2 — Tasa de Bóveda y [05].3 — Fecha ©2026: cambios aplicados en el HTML
 * del snapshot (snapshots/pages/8761-metal.html), no en CSS. La Bóveda quedó
 * en (9%) por consistencia con /personal/ (mismo producto), y "© 2025" se
 * actualizó a "© 2026" en los 3 lugares del snapshot (menú indicador,
 * h4.aviso y p Copyright). */

/* [06] Header & Menú
 * [06].1 — Las opciones del menú se centralizaron en common.css (look común a todas
 * las páginas; base Personal). */

/* [06].3 — La alineación de "©2026 · MX" con la última opción del mega-menú se
 * centralizó en common.css (comportamiento común a todas las páginas). */

/* [06].4 — Bug del header al cerrar el menú: arreglado en JS
 * (assets/js/site.js → initMobileMenu). El selector `.hamburger` (a secas)
 * tomaba el primer hamburger del DOM (el `.desktop`) y le pegaba el toggle
 * pensado para mobile. En desktop el menú-overlay tiene display:none, así
 * que el click dejaba al body en `menu-open` y al hamburger en `is-open` sin
 * menú visible → el logo se volvía negro (por `.menu-open .logo path{fill:#000}`
 * pensado para el overlay blanco) y el hamburger se reducía a la línea del
 * medio (por `.is-open` que scaleX-0 las líneas top/bottom). Ahora el selector
 * apunta a `.hamburger.mobile` específicamente. Sin cambios CSS aquí. */

/* =====================================================================
 * Página METAL (8761) — MOBILE (≤480). Portado de Personal (7685) para los
 * elementos en común. El QA original de Metal fue solo desktop, por eso faltaban
 * reglas móviles. Ver doc/web-public/estilos/ y la skill /estilos-snapshot.
 * ===================================================================== */
@media (max-width: 480px) {
  /* [04]a — Módulo "¿Aún no eres parte?": reducir el espacio entre el párrafo
   * "Abre tu cuenta en menos de 3 minutos." y el CTA de la store. Venía ~48px
   * (24px de margen abajo del párrafo + 24px arriba del bloque de botones). */
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .textseccion .paragraph-4 {
    margin-bottom: 12px !important;
  }
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .textseccion .button-app {
    margin-top: 0 !important;
  }

  /* [04]c — Pegar el asset al fondo del módulo: la imagen (.image-22) tenía 32px de
   * margen inferior, que dejaba un hueco entre el asset y el fondo negro del footer.
   * Lo quitamos. (Si el PNG trae espacio transparente propio, calibrar con margen
   * negativo tras verlo en el celular.) */
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .img-container img {
    margin-bottom: 0 !important;
  }

  /* [03] El efecto "sticky stacking" se quitó de Metal a pedido: en la sección Beneficios
   * la foto de la tarjeta (fondo de toda la sección) se cortaba/encimaba con el texto al
   * fijar la altura. Se deja ESTÁTICA (position:relative, height:auto de la base asap), que
   * muestra el asset + el texto completos al hacer scroll. Las secciones .last conservan el
   * sticky del tema base (no las tocamos). */
}