/*
 * 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;
}

/* [01].3 — CTA de store del cover en MOBILE.
 * Se muestra el badge oficial correspondiente al SO dentro de un dock fijo e invisible.
 * El dock desaparece al terminar el cover para no tapar el contenido siguiente. */
body.fc-page-8761 .fc-metal-hero__mobile-store {
  display: none !important;
}

@media (max-width: 480px) {
  body.fc-page-8761 .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-8761 .hero .button-app a {
    display: block;
    flex: 0 0 auto;
  }

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

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

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

/* [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;
}

/* [02].2 — MOBILE: compactar los espacios del texto del módulo "Beneficios que redefinen…"
 * (QA diseño) para que el bloque de texto sea más corto y se vea más el asset de la tarjeta.
 * Se aprieta: interlineado del heading, gap heading→lista, gap entre bullets y gap lista→CTA.
 * Solo mobile y solo este módulo (.metal-benefit._2). */
@media (max-width: 480px) {
  /* [02].1 — La referencia actualizada de Figma elimina el corte gris en la parte
   * inferior del asset. La imagen pegada incluye también el texto del frame, por lo que
   * no puede usarse como background sin duplicar contenido. Conservamos el asset limpio
   * y fundimos su tercio inferior a negro para reproducir el acabado aprobado. */
  body.fc-page-8761 .metal-benefit._2 {
    background-image:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0.62) 46%,
        #000 57%
      ),
      url("/wp-content/uploads/2025/11/bg_img.webp") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, contain !important;
    background-position: top left, top left !important;
    background-color: #000 !important;
  }

  body.fc-page-8761 .metal-benefit._2 .section-heading {
    line-height: 34px !important;
    margin-bottom: 8px !important;
  }
  body.fc-page-8761 .metal-benefit._2 ul.list-metal,
  body.fc-page-8761 .metal-benefit._2 ul.paragraph-4 {
    margin-top: 8px !important;
    margin-bottom: 16px !important;
  }
  body.fc-page-8761 .metal-benefit._2 ul.list-metal li,
  body.fc-page-8761 .metal-benefit._2 ul.paragraph-4 li {
    margin-bottom: 6px !important;
  }

  /* [02].3 — "redefinen" SIEMPRE en el primer renglón (QA). La columna de texto estaba
   * ahogada por el padding de 32px (solo ~300px útiles), y a 34px "Beneficios que
   * redefinen" no cabía, así que "redefinen" caía al 2º renglón. Bajamos el padding a
   * 20px: recupera ancho y el heading queda "Beneficios que redefinen el / concepto de
   * estatus" (redefinen en línea 1) SIN achicar la fuente. Robusto en teléfonos ≥ ~320px. */
  body.fc-page-8761 .metal-benefit._2 .textseccion {
    padding-left: 20px !important;
    padding-right: 20px !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). El equipo de diseño pidió que
 * el TEXTO GENERAL del acordeón tenga el mismo grosor que los textos de Personal (que
 * miden 500 / Medium): el cuerpo estaba en 300 (Light) y se percibía muy delgado, lo
 * subimos a 500. Headline del item en Inter V 500; los <strong> internos en 500. */
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: 500 !important;
}
/* Los <strong> del acordeón (etiquetas, códigos, "Válido al…") deben REMARCARSE: el
 * cuerpo va gris/Medium y el diseño quiere los strong en negro y más bold (650, como los
 * <strong> de Personal). Antes estaban iguales al cuerpo (500 gris) y no resaltaban. */
body.fc-page-8761 .featuresecciones.seccion-img-right.last .paragraph-faq strong {
  font-weight: 650 !important;
  color: #000 !important;
}

/* [03].3b — Ícono del acordeón ABIERTO: el JS le pone transform:rotate(45deg) al "+", que
 * lo deja inclinado ("×"). El estado abierto debe ser un "−" horizontal. Anulamos la
 * rotación y ocultamos la línea VERTICAL del "+" (path d="M12 5V19"), dejando solo la
 * horizontal. El cerrado ("+") no se toca. */
body.fc-page-8761 .faqs-item-trigger[aria-expanded="true"] svg {
  transform: none !important;
}
body.fc-page-8761 .faqs-item-trigger[aria-expanded="true"] svg path:nth-of-type(1) {
  display: none !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. */

/* [03].4 — Sombra al hacer scroll (QA diseño): "eliminar la sombra que se percibe
 * entre este módulo y el siguiente al realizar scroll". Origen: la base Webflow
 * (Capa 0, uploads/webflow-assets/css/f-n.webflow.css) aplica a TODA .featuresecciones
 * un glow `box-shadow: 0 0 70px 100px #6266660d` (Gray-3 al 5%, blur 70 / spread 100).
 * Como las .featuresecciones son position:sticky y se apilan, ese halo se derrama en el
 * seam entre módulos al hacer scroll. En Figma (node 154:710) el fondo es blanco puro,
 * sin sombra en ninguna sección — por eso lo anulamos en TODAS las .featuresecciones de
 * Metal (no solo en "Descubre todos los beneficios"), para dejar el sitio consistente con
 * el diseño. Prioridad de la base es normal, pero usamos !important por consistencia. */
body.fc-page-8761 .featuresecciones {
  box-shadow: none !important;
}

/* [03].5 — MOBILE: alinear el heading con el acordeón (QA diseño). El .textseccion del
 * heading traía margin-left:20px + padding-left:~37px (≈57px de sangría), mientras el
 * acordeón arranca a ~22px, por eso el heading se percibía con más margen izquierdo.
 * Anulamos ese padding-left en mobile para que el heading arranque a 20px, alineado con el
 * acordeón. (El heading ya es width:90vw, así que no se desborda a la derecha: 20+337<375.) */
/* Los saltos forzados del heading (fc-h-br) SOLO existen en mobile. En desktop no rompen. */
body.fc-page-8761 .featuresecciones.seccion-img-right.last .section-heading .fc-h-br {
  display: none;
}
@media (max-width: 480px) {
  body.fc-page-8761 .featuresecciones.seccion-img-right.last .textseccion {
    padding-left: 0 !important;
    /* [03].6 — subir el heading: la base pone padding-top:168px (para alinear con el
     * acordeón en DESKTOP, lado a lado). En mobile eso deja un hueco enorme sobre el
     * heading; lo bajamos a 24px. */
    padding-top: 24px !important;
  }
  /* [03].6 — wrap del heading "como el diseño". Font 32px (era 34) para que
   * "Mastercard de Fondeadora®" (336px @34) quepa en la línea 3 en teléfonos ~360px, y los
   * <br class="fc-h-br"> fuerzan los 4 renglones exactos: "Descubre todos los" /
   * "beneficios World Elite" / "Mastercard de Fondeadora®" / "Metal". */
  body.fc-page-8761 .featuresecciones.seccion-img-right.last .section-heading {
    font-size: 32px !important;
    line-height: 1.06 !important;
  }
  body.fc-page-8761 .featuresecciones.seccion-img-right.last .section-heading .fc-h-br {
    display: inline !important;
  }
}

/* [04] Bóveda Metal — nuevo módulo de rendimiento 15%. */
body.fc-page-8761 .metal-boveda {
  position: relative;
  z-index: 700;
  min-height: 900px;
  overflow: hidden;
  color: #fff;
  background: #050505 url("/wp-content/uploads/2026/06/metal-boveda-bg.webp") center / cover no-repeat;
}

body.fc-page-8761 .metal-boveda__inner {
  position: relative;
  width: 100%;
  min-height: inherit;
}

body.fc-page-8761 .metal-boveda__copy {
  position: absolute;
  top: 33.5%;
  left: clamp(96px, 12.25vw, 180px);
  width: min(34vw, 660px);
  transform: translateY(-10%);
}

body.fc-page-8761 .metal-boveda__title {
  margin: 0 0 30px;
  color: #fff;
  font-family: "Instrument Serif", serif !important;
  font-size: clamp(46px, 3.8vw, 72px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0;
}

body.fc-page-8761 .metal-boveda__title i {
  font-family: "Instrument Serif", serif !important;
  font-style: italic;
}

body.fc-page-8761 .metal-boveda__title::before,
body.fc-page-8761 .metal-boveda__title span::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
  margin: 0 !important;
}

body.fc-page-8761 .metal-boveda__description {
  margin: 0;
  color: #fff;
  font-family: "Inter V", sans-serif;
  font-size: clamp(20px, 1.45vw, 28px);
  font-weight: 430;
  line-height: 1.32;
  letter-spacing: 0;
}

body.fc-page-8761 .metal-boveda__description strong {
  font-weight: 700;
}

body.fc-page-8761 .metal-boveda__legal {
  margin: clamp(38px, 3vw, 52px) 0 0;
  color: rgba(255, 255, 255, 0.34);
  font-family: "Inter V", sans-serif;
  font-size: clamp(13px, 0.98vw, 18px);
  font-weight: 430;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

body.fc-page-8761 .metal-boveda__legal strong {
  font-weight: 700;
}

body.fc-page-8761 .metal-boveda__rate {
  position: absolute;
  top: 31.5%;
  left: 51.8%;
  width: min(39vw, 600px);
  height: auto;
  transform: none;
}

/* [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 — Links legales: Inter V 300 se percibe demasiado ligero frente a la
 * referencia actual de Figma. Subimos ambos enlaces a Regular (400), igualando
 * el peso del separador "/" sin volver a la fuga de Open Sans. Desactivamos el
 * `transition:all` heredado para evitar un font-weight 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: 400 !important;
  /* La base agrega padding al final de cada link: visualmente deja más aire antes
   * del "/" aunque sus márgenes sean simétricos. Al quitarlo, el separador queda
   * centrado entre ambos textos en desktop; mobile ya aplicaba este mismo valor. */
  padding-right: 0 !important;
  transition: none !important;
}

/* [04].2b — Separador "/" entre "Términos y Condiciones" y "Costos y Legales" (span, no
 * link → sin subrayado). Mismo negro Inter V que los enlaces, con aire a los lados. */
body.fc-page-8761 .featuresecciones.seccion-img-left.last .tycos-sep {
  color: #000;
  font-family: "Inter V", sans-serif;
  margin: 0 8px;
}

/* [04].3 — Imagen (mano con tarjeta) pegada al borde inferior del módulo (QA diseño:
 * "ubicar la imagen al borde inferior para evitar el espacio entre ésta y el bg del
 * módulo siguiente"). Causa: la base ancla la imagen ARRIBA (fluye desde el tope con
 * margin vertical 32px), así que su borde inferior cae en top+32+altura-imagen. En
 * viewports altos el módulo (sticky) crece y aparece un HUECO entre la mano y el fondo
 * negro del footer — por eso se ve bien en pantallas cortas y "separada" en altas.
 * Fix independiente del viewport: anclar la imagen al FONDO del contenedor (que mide lo
 * mismo que el módulo) y quitar los márgenes verticales, para que su borde inferior
 * coincida siempre con el del módulo (medido: hueco = 0). La imagen (799px) es más alta
 * que el módulo, así que el excedente crece hacia ARRIBA (inofensivo). No hay corrimiento
 * horizontal: ya estaba centrada. Solo desktop; mobile tiene su tratamiento en [04]c. */
@media (min-width: 481px) {
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .img-container {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .img-container img {
    margin-top: 0 !important;
    margin-bottom: 0 !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) {
  body.fc-page-8761 .metal-boveda {
    min-height: 980px;
    background-position: center top;
  }

  body.fc-page-8761 .metal-boveda__copy {
    top: 135px;
    right: 20px;
    left: 20px;
    width: auto;
    transform: none;
  }

  body.fc-page-8761 .metal-boveda__title {
    margin: 0 0 26px !important;
    font-size: clamp(42px, 11.2vw, 52px);
    line-height: 0.96;
  }

  body.fc-page-8761 .metal-boveda__description {
    max-width: none;
    font-size: clamp(18px, 4.8vw, 22px);
    line-height: 1.38;
  }

  body.fc-page-8761 .metal-boveda__legal {
    max-width: none;
    margin-top: 48px;
    font-size: clamp(12.5px, 3.45vw, 15px);
    line-height: 1.45;
  }

  body.fc-page-8761 .metal-boveda__legal strong {
    color: inherit;
  }

  body.fc-page-8761 .metal-boveda__rate {
    top: 590px;
    right: auto;
    left: 5vw;
    bottom: auto;
    width: 88vw;
    transform: none;
  }

  /* [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]d — "Abre tu cuenta en menos de 3 minutos." centrado y en UN SOLO renglón (QA).
   * Centrado: el párrafo tenía un width fijo (~299px) más angosto que su columna y, al ser
   * block, se apoyaba a la izquierda → margin auto lo centra (el text-align:center ya venía
   * de base). Una línea: en pantallas ~360px la columna se hacía más angosta que el texto
   * (299px @16) y wrappeaba → nowrap lo fija en una línea y width:auto ajusta la caja al
   * texto (no se desborda: 299px caben centrados en pantallas ≥ ~305px). */
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .textseccion .paragraph-4 {
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
    width: auto !important;
  }
  /* [04]e — "menos de 3 minutos" más en negritas (QA): el strong sube de 500 a 700. */
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .textseccion .paragraph-4 strong {
    font-weight: 700 !important;
  }

  /* [04]f — "Términos y Condiciones / Costos y Legales" en UNA sola línea, centrado (QA:
   * como el diseño). A 16px la frase (353px) no cabía y wrappeaba. Flex centrado la agrupa,
   * `white-space:nowrap` en CADA enlace evita que "Términos y Condiciones" se parta en dos
   * renglones (era lo que pasaba en teléfonos angostos), y 12px + separador pegado hacen que
   * los dos enlaces quepan en una línea hasta ~334px de ancho. */
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .tycos {
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
  }
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .tycos a.ty,
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .tycos .tycos-sep {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  /* Los enlaces traen padding-right:12px (aire de subrayado). En "Términos y Condiciones"
   * ese padding queda ENTRE el texto y el "/", así que el "/" se veía pegado a "Costos y
   * Legales" (gap 18 vs 6). Lo anulamos y el "/" se separa con márgenes SIMÉTRICOS (9px),
   * quedando exactamente en medio de los dos textos. */
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .tycos a.ty {
    padding-right: 0 !important;
  }
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .tycos .tycos-sep {
    margin: 0 9px !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;
  }

  /* [04]g — Subir un poco la imagen de la mano (QA): venía con ~40px de aire entre los
   * enlaces legales y el asset. Reducimos ese aire ~24px (margin-top negativo del
   * contenedor) para que la mano suba. Valor afinable (subir/bajar N). */
  body.fc-page-8761 .featuresecciones.seccion-img-left.last .img-container {
    margin-top: -24px !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). */
}

/* [03] Acordeon unificado jul-2026 — misma caja, ritmo e icono en iOS y Android. */
body.fc-page-8761 .featuresecciones.seccion-img-right.last .faqs-wrapper { gap: 0 !important; }

body.fc-page-8761 .featuresecciones.seccion-img-right.last .faqs-item {
  gap: 0 !important;
  margin: 0 !important;
  padding: 20px 0 !important;
  border-color: #d3d3d3 !important;
  border-bottom: 1px solid #d3d3d3 !important;
}

body.fc-page-8761 .featuresecciones.seccion-img-right.last .faqs-item.open {
  gap: 20px !important;
}

body.fc-page-8761 .featuresecciones.seccion-img-right.last .faqs-item:first-child {
  border-top: 1px solid #d3d3d3 !important;
}

body.fc-page-8761 .featuresecciones.seccion-img-right.last .faqs-item-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
}

body.fc-page-8761 .featuresecciones.seccion-img-right.last .faqs-item-container {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.fc-page-8761 .featuresecciones.seccion-img-right.last .faqs-item-trigger > p {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

body.fc-page-8761 .featuresecciones.seccion-img-right.last .faqs-item-trigger svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

body.fc-page-8761 .featuresecciones.seccion-img-right.last .benefits-heading,
body.fc-page-8761 .featuresecciones.seccion-img-right.last .faqs_headline {
  font-family: 'Inter V', 'Inter', sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 26px !important;
  letter-spacing: 0 !important;
}

body.fc-page-8761 .featuresecciones.seccion-img-right.last .accordion-item-content {
  margin: 0 !important;
  padding: 0 48px 0 0 !important;
}

@media (max-width: 480px) {
  body.fc-page-8761 .featuresecciones.seccion-img-right.last .benefits-heading,
  body.fc-page-8761 .featuresecciones.seccion-img-right.last .faqs_headline {
    font-size: 16px !important;
    line-height: 22px !important;
  }

  body.fc-page-8761 .featuresecciones.seccion-img-right.last .paragraph-faq,
  body.fc-page-8761 .featuresecciones.seccion-img-right.last .paragraph-faq * {
    font-family: 'Inter V', 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
  }

  body.fc-page-8761 .featuresecciones.seccion-img-right.last .paragraph-faq strong {
    font-weight: 650 !important;
  }
}