/* ============================================================ VERSIÓN FABLE — Sobria · Editorial · Confiable Hoja compartida por TODAS las páginas del sitio para garantizar navbar/footer/estilos idénticos (sin brincos). Paleta tomada de los azules reales de formatoselectronicos.mx. ============================================================ */ :root { --fx-accent: #0ea6e9; --fx-accent-dark: #0b84bd; --fx-accent-light: #49c6e5; --fx-navy: #1a3365; --fx-ink: #1a3365; --fx-text: #2c3b52; --fx-muted: #5b7089; --fx-faint: #8a9bb0; --fx-bg: #ffffff; --fx-bg-alt: #f2f8fc; /* tinte azul muy sutil */ --fx-bg-featured: #eef8fd; --fx-border: #d8e3ee; --fx-border-soft: #e9f1f7; --fx-wa: #1fab55; --fx-step: #dd5111; /* naranja de los pasos (mismo del recuadro de planes) */ --fx-step-soft: #fdf0ea; --fx-error: #d64545; /* solo validación de formularios */ --fx-r-sm: 6px; --fx-r: 8px; --fx-r-lg: 10px; --fx-shadow-card: 0 1px 2px rgba(20, 44, 80, .06); --fx-sans: 'Public Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* Nada debe poder arrastrar la página en horizontal en el celular. `clip` y no `hidden`: hidden convertiría a en contenedor de scroll y rompería los elementos con position:sticky (el índice de la guía CFDI 4.0). */ html { overflow-x: clip; } /* scroll-behavior suave + reserva de barra de scroll para que el ancho del contenido no "brinque" entre páginas con y sin scroll */ html { scroll-behavior: smooth; scrollbar-gutter: stable; } body { font-family: var(--fx-sans); color: var(--fx-text); background: var(--fx-bg); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--fx-accent); text-decoration: none; } a:hover { color: var(--fx-accent-dark); } img { max-width: 100%; height: auto; } ::selection { background: #d8e6f5; color: var(--fx-ink); } h1, h2, h3 { font-family: var(--fx-sans); color: var(--fx-ink); font-weight: 700; } /* Transición suave de entrada — evita el "flash"/brinco al cambiar de página */ @media (prefers-reduced-motion: no-preference) { body.fx-fade { animation: fx-fade-in .28s ease both; } @keyframes fx-fade-in { from { opacity: 0; } to { opacity: 1; } } } /* ===== Botones ===== */ .fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--fx-r); padding: 12px 22px; font-weight: 600; font-size: .95rem; line-height: 1.2; border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease, color .15s ease; cursor: pointer; } .fx-btn-primary { background: var(--fx-accent); border-color: var(--fx-accent); color: #fff; } .fx-btn-primary:hover, .fx-btn-primary:focus { background: var(--fx-accent-dark); border-color: var(--fx-accent-dark); color: #fff; } .fx-btn-secondary { background: #fff; border-color: var(--fx-border); color: var(--fx-ink); } .fx-btn-secondary:hover, .fx-btn-secondary:focus { border-color: var(--fx-ink); color: var(--fx-ink); background: #fff; } /* ===== Navbar ===== */ .fx-navbar { background: #fff; border-bottom: 1px solid var(--fx-border); padding: .6rem 0; } .fx-navbar .navbar-brand img { display: block; height: 44px; width: auto; } @media (max-width: 575.98px) { .fx-navbar .navbar-brand img { height: 34px; } } .fx-navbar .navbar-toggler { border: 1px solid var(--fx-border); border-radius: var(--fx-r-sm); padding: 5px 10px; font-size: 1.25rem; color: var(--fx-ink); box-shadow: none; } .fx-nav { gap: clamp(6px, 1.6vw, 26px); } .fx-nav .nav-link { display: inline-flex; align-items: center; gap: 7px; color: var(--fx-muted); font-weight: 500; font-size: .93rem; padding: .5rem .25rem; white-space: nowrap; } .fx-nav .nav-link i { color: var(--fx-accent); font-size: .95rem; } .fx-nav .nav-link:hover { color: var(--fx-ink); } .fx-nav .nav-link.active { color: var(--fx-ink); } .fx-nav-actions { display: flex; align-items: center; gap: 18px; margin-left: clamp(8px, 2vw, 30px); } .fx-nav-login { display: inline-flex; align-items: center; gap: 7px; color: var(--fx-ink); font-weight: 600; font-size: .93rem; white-space: nowrap; } .fx-nav-login i { color: var(--fx-accent); font-size: 1rem; } .fx-nav-login:hover { color: var(--fx-accent); } .fx-nav-cta { padding: 9px 18px; font-size: .9rem; } @media (max-width: 991.98px) { .fx-navbar .navbar-collapse { padding: 12px 0 8px; } .fx-nav { flex-direction: column; gap: 2px; } .fx-nav .nav-link { padding: .55rem 0; border-bottom: 1px solid var(--fx-border-soft); } .fx-nav-actions { margin: 14px 0 6px; flex-direction: column; align-items: stretch; gap: 10px; } .fx-nav-login { justify-content: center; padding: 10px 0; border: 1px solid var(--fx-border); border-radius: var(--fx-r); } .fx-nav-cta { justify-content: center; } /* El menú desplegado flota sobre la página (la barra es fija). Sin una sombra que lo despegue, el contenido de abajo asoma justo en el borde y parece cortado. Y si el menú no cupiera en pantalla, se desplaza dentro de sí mismo en vez de quedar inalcanzable. */ .fx-navbar .navbar-collapse.show, .fx-navbar .navbar-collapse.collapsing { max-height: calc(100vh - 78px); overflow-y: auto; overscroll-behavior: contain; } .fx-navbar:has(.navbar-collapse.show), .fx-navbar:has(.navbar-collapse.collapsing) { box-shadow: 0 14px 22px -14px rgba(20, 44, 80, .22); } /* Velo sobre el resto de la página mientras el menú está abierto. Sin él, lo que queda justo debajo del menú (el botón azul del hero) asoma a media altura y parece un elemento cortado, no contenido de la página. z-index 1020: por encima del contenido, por debajo de la barra (1030). */ body:has(.navbar-collapse.show)::before, body:has(.navbar-collapse.collapsing)::before { content: ""; position: fixed; inset: 0; background: rgba(20, 44, 80, .38); z-index: 1020; pointer-events: none; } } /* Desfase de anclas: evita que una sección con id quede oculta bajo el navbar fijo al llegar por enlace (#pricing, #contact, etc.) */ :target, section[id], .fx-hero[id], .fx-section[id] { scroll-margin-top: 76px; } /* ===== Hero (index) ===== */ .fx-hero { padding: 140px 0 72px; background: var(--fx-bg); } /* La fila del hero usa g-5: un canalón de 3rem, o sea margen negativo de 24px por lado, contra los 12px de relleno que aporta el .container. Se salía 12px y en el celular la página se podía arrastrar de lado. Por debajo de 992px las columnas se apilan, así que ese canalón horizontal no pinta nada. */ @media (max-width: 991.98px) { .fx-hero .row.g-5 { --bs-gutter-x: 1.5rem; } } .fx-eyebrow { display: block; color: var(--fx-accent); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; } .fx-hero-title { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.12; letter-spacing: -.01em; margin-bottom: 20px; } .fx-hero-title .fx-brand { color: var(--fx-accent); } .fx-hero-sub { font-size: 1.12rem; color: var(--fx-muted); max-width: 500px; margin-bottom: 30px; } .fx-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .fx-hero-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--fx-muted); font-size: .92rem; } .fx-hero-trust li { display: inline-flex; align-items: center; gap: 7px; } .fx-hero-trust i { color: var(--fx-accent); font-size: 1rem; } .fx-hero-trust a { color: inherit; text-decoration: none; transition: color .15s ease; } .fx-hero-trust a:hover { color: var(--fx-accent); } .fx-hero-figure img { display: block; width: 100%; } .fx-hero-figure figcaption { text-align: center; color: var(--fx-faint); font-size: .8rem; padding-top: 14px; } /* Strip de módulos */ .fx-modules { margin-top: 72px; } .fx-modules-title { color: var(--fx-faint); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; } .fx-modules-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--fx-border); border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); overflow: hidden; } .fx-module { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 10px; background: #fff; color: var(--fx-ink); font-weight: 600; font-size: .92rem; } .fx-module i { color: var(--fx-accent); font-size: 1.05rem; } @media (max-width: 991.98px) { .fx-modules-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575.98px) { .fx-modules-grid { grid-template-columns: repeat(2, 1fr); } } /* ===== Secciones ===== */ .fx-section { padding: 96px 0; } .fx-section--alt { background: var(--fx-bg-alt); border-top: 1px solid var(--fx-border-soft); border-bottom: 1px solid var(--fx-border-soft); } .fx-head { max-width: 720px; margin-bottom: 56px; } .fx-head--center { margin-left: auto; margin-right: auto; text-align: center; } .fx-kicker { display: block; color: var(--fx-accent); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; } .fx-title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.18; margin-bottom: 14px; } .fx-sub { color: var(--fx-muted); font-size: 1.04rem; margin: 0; overflow-wrap: break-word; text-wrap: balance; } .fx-sub a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ===== Ventajas (lista editorial, sin cajas) ===== */ .fx-feature { border-top: 1px solid var(--fx-border); padding-top: 22px; height: 100%; } .fx-feature-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .fx-feature-head i { color: var(--fx-accent); font-size: 1.2rem; } .fx-feature-title { font-family: var(--fx-sans); font-size: 1.06rem; font-weight: 700; color: var(--fx-ink); margin: 0; } .fx-feature-text { color: var(--fx-muted); font-size: .96rem; margin: 0; } /* ===== About ===== */ .fx-about-block { margin-bottom: 56px; } .fx-about-block:last-child { margin-bottom: 0; } .fx-about-block--reverse > [class*="col-"]:first-child { order: 2; } .fx-about-block--reverse > [class*="col-"]:last-child { order: 1; } @media (max-width: 991.98px) { .fx-about-block { margin-bottom: 64px; } .fx-about-block--reverse > [class*="col-"]:first-child, .fx-about-block--reverse > [class*="col-"]:last-child { order: initial; } } .fx-about-frame { display: flex; align-items: center; justify-content: center; } .fx-about-frame img { max-width: 100%; max-height: 380px; width: auto; height: auto; object-fit: contain; } .fx-about-frame--phone img { max-width: 300px; } .fx-about-frame--compact img { max-height: 260px; max-width: 430px; } @media (max-width: 575.98px) { .fx-about-frame--phone img { max-width: 230px; } } .fx-about-title { font-size: clamp(1.4rem, 2.2vw, 1.7rem); line-height: 1.22; margin-bottom: 14px; } .fx-about-text { color: var(--fx-muted); font-size: 1.02rem; margin-bottom: 18px; } .fx-link { font-weight: 600; font-size: .96rem; text-decoration: underline; text-underline-offset: 4px; } /* ===== Precios ===== */ .fx-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1140px; margin: 0 auto 26px; } .fx-price-card { background: #fff; border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--fx-shadow-card); } .fx-price-card--featured { border: 2px solid var(--fx-accent); background: var(--fx-bg-featured); } .fx-price-badge { display: inline-block; align-self: flex-start; background: var(--fx-accent); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; margin-bottom: -6px; } .fx-price-name { display: block; color: var(--fx-muted); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; } .fx-price-amount { font-family: var(--fx-sans); font-size: 2.15rem; font-weight: 700; color: var(--fx-ink); line-height: 1; } .fx-price-amount small { font-family: var(--fx-sans); color: var(--fx-faint); font-size: .8rem; font-weight: 500; margin-left: 4px; } .fx-price-meta { color: var(--fx-muted); font-size: .9rem; margin-top: 8px; } .fx-price-tag { display: inline-block; margin-top: 12px; color: var(--fx-ink); border: 1px solid var(--fx-border); background: var(--fx-bg-alt); padding: 3px 10px; border-radius: 4px; font-size: .76rem; font-weight: 700; } .fx-price-list { list-style: none; padding: 0; margin: 0; flex: 1; } .fx-price-list li { display: flex; align-items: center; gap: 10px; color: var(--fx-text); font-size: .94rem; padding: 9px 0; border-bottom: 1px solid var(--fx-border-soft); } .fx-price-list li:last-child { border-bottom: 0; } .fx-price-list i { color: var(--fx-accent); font-size: 1.05rem; flex-shrink: 0; } .fx-pricing-note { text-align: center; color: var(--fx-muted); font-size: .92rem; max-width: 680px; margin: 28px auto 0; } /* Sello de garantía bajo el título de precios */ .fx-guarantee { display: flex; align-items: flex-start; gap: 12px; text-align: left; max-width: 660px; margin: 20px auto 0; padding: 15px 19px; background: var(--fx-bg); border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); color: var(--fx-text); font-size: .98rem; line-height: 1.6; } .fx-guarantee > i { flex: 0 0 auto; color: var(--fx-accent); font-size: 1.35rem; line-height: 1.25; } .fx-guarantee strong { color: var(--fx-ink); font-weight: 700; } @media (max-width: 1199.98px) { .fx-pricing-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .fx-pricing-grid { grid-template-columns: 1fr; } } /* ===== Testimonios ===== */ .fx-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .fx-testimonial { background: #fff; border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--fx-shadow-card); } .fx-stars { color: #d99a00; font-size: .92rem; letter-spacing: 2px; } .fx-testimonial-text { color: var(--fx-text); font-size: .98rem; line-height: 1.7; margin: 0; flex: 1; } .fx-testimonial-foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--fx-border-soft); padding-top: 16px; } .fx-testimonial-foot img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .fx-testimonial-foot strong { display: block; color: var(--fx-ink); font-weight: 600; font-size: .93rem; } .fx-testimonial-foot span { color: var(--fx-muted); font-size: .82rem; } @media (max-width: 991.98px) { .fx-testimonials-grid { grid-template-columns: 1fr; } } /* ===== Contacto ===== */ .fx-label { display: block; font-size: .86rem; font-weight: 600; color: var(--fx-ink); margin-bottom: 6px; } .fx-form .form-control { border: 1px solid var(--fx-border); border-radius: var(--fx-r); padding: 11px 14px; font-size: .96rem; color: var(--fx-ink); background: #fff; box-shadow: none; } .fx-form .form-control::placeholder { color: var(--fx-faint); } .fx-form .form-control:focus { border-color: var(--fx-accent); box-shadow: 0 0 0 3px rgba(14, 166, 233, .18); } /* Error bajo un campo concreto del formulario */ .fx-field-error { display: block; margin: 6px 0 0; color: var(--fx-error); font-size: .85rem; font-weight: 600; line-height: 1.4; } .fx-field-error[hidden] { display: none; } .fx-form .form-control.fx-invalid { border-color: var(--fx-error); } .fx-form .form-control.fx-invalid:focus { border-color: var(--fx-error); box-shadow: 0 0 0 3px rgba(214, 69, 69, .16); } .fx-turnstile:not([hidden]) { margin-bottom: 2px; min-height: 65px; } .fx-form-feedback { display: none; margin-top: 14px; padding: 12px 16px; border-radius: var(--fx-r); font-size: .92rem; font-weight: 500; } .fx-form-feedback.is-ok { display: block; background: #e8f7ee; border: 1px solid #bfe6cd; color: #167a3c; } .fx-form-feedback.is-err { display: block; background: #fdecec; border: 1px solid #f4c4c4; color: #b02a2a; } .fx-contact-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); background: #fff; overflow: hidden; } .fx-contact-list li { border-bottom: 1px solid var(--fx-border-soft); } .fx-contact-list li:last-child { border-bottom: 0; } .fx-contact-list a { display: flex; align-items: center; gap: 14px; padding: 15px 18px; color: var(--fx-ink); font-weight: 500; font-size: .94rem; } .fx-contact-list a:hover { background: var(--fx-bg-alt); color: var(--fx-ink); } .fx-contact-list i { color: var(--fx-accent); font-size: 1.15rem; flex-shrink: 0; } .fx-contact-list .fx-wa i { color: var(--fx-wa); } /* ===== Footer ===== */ .fx-footer { background: var(--fx-navy); padding: 64px 0 24px; color: #b7c4d6; } .fx-footer-brand img { height: 26px; width: auto; max-width: 190px; filter: brightness(0) invert(1); } .fx-footer-tagline { color: #8fa2ba; font-size: .88rem; margin: 14px 0 0; max-width: 240px; } .fx-footer-title { text-transform: uppercase; font-size: .74rem; font-weight: 700; letter-spacing: .13em; color: #ffffff; margin-bottom: 16px; } .fx-footer-title a { color: #ffffff; } .fx-footer-title a:hover { color: var(--fx-accent-light); } .fx-footer-links { list-style: none; padding: 0; margin: 0; } .fx-footer-links li { margin-bottom: 9px; } .fx-footer-links a { color: #8fa2ba; font-size: .9rem; } .fx-footer-links a:hover { color: #ffffff; } .fx-footer-text { font-size: .9rem; } .fx-footer-text a { color: #ffffff; font-weight: 500; } .fx-footer-text a:hover { color: var(--fx-accent-light); } /* «soporte@formatoselectronicos.mx» es una sola palabra de 231px. En una columna col-6 de un móvil de 360px no cabe, y al no poder partirse empujaba el ancho de TODA la página: por eso el pie navy no llegaba al borde derecho. `anywhere` y no `break-word`: solo `anywhere` reduce además el ancho mínimo del elemento, que es justo lo que evita el desborde. */ .fx-footer-text, .fx-footer-links a, .fx-footer-text a { overflow-wrap: anywhere; } /* Por debajo de 576px las cuatro columnas del pie pasan a dos filas de una columna: con 180px por columna los correos y los títulos quedan apretados. */ @media (max-width: 575.98px) { .fx-footer .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; } .fx-footer .row { --bs-gutter-y: 1.75rem; } } .fx-footer-wa { color: #4ee08a !important; font-weight: 600; } .fx-footer-bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); color: #7488a1; font-size: .84rem; } .fx-footer-bottom a { color: #8fa2ba; } .fx-footer-bottom a:hover { color: #ffffff; } /* ===== WhatsApp flotante ===== */ #wa-float { position: fixed; right: 20px; bottom: 20px; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background: var(--fx-wa); color: #fff; border-radius: 50%; font-size: 1.6rem; box-shadow: 0 4px 14px rgba(20, 24, 31, .22); z-index: 1040; } #wa-float:hover { background: #178a44; color: #fff; } /* Con el menú abierto el flotante debe quedar bajo el velo: si no, es lo único encendido sobre una página atenuada y se lleva toda la atención. */ @media (max-width: 991.98px) { body:has(.navbar-collapse.show) #wa-float, body:has(.navbar-collapse.collapsing) #wa-float { z-index: 1010; } } /* ============================================================ COMPONENTES DE PÁGINAS INTERIORES (mismo lenguaje visual) ============================================================ */ /* Banner de encabezado de página interior — sustituye a los parallax con foto; fondo claro, editorial, sin marco. */ .fx-page-hero { padding: 132px 0 56px; background: var(--fx-bg-alt); border-bottom: 1px solid var(--fx-border-soft); } .fx-page-hero .fx-kicker { margin-bottom: 12px; } .fx-page-hero h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.14; letter-spacing: -.01em; margin-bottom: 14px; } .fx-page-hero p { color: var(--fx-muted); font-size: 1.08rem; max-width: 640px; margin: 0; } @media (max-width: 991.98px) { .fx-page-hero { padding: 112px 0 48px; } } /* Pasos (instrucciones) — tarjetas base del sistema */ .fx-step { background: #fff; border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); padding: 26px 24px; height: 100%; display: flex; flex-direction: column; box-shadow: var(--fx-shadow-card); } .fx-step-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--fx-step-soft); border: 1px solid var(--fx-step); color: var(--fx-step); font-weight: 700; font-size: 1.02rem; margin-bottom: 16px; } /* Enlace de WhatsApp dentro de un párrafo (texto en azul de enlace, glifo en verde de marca) */ .fx-wa-inline { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--fx-accent-dark); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; } .fx-wa-inline i { color: var(--fx-wa); font-size: 1.1rem; } .fx-wa-inline:hover, .fx-wa-inline:focus { color: var(--fx-accent); } @media (max-width: 420px) { .fx-wa-inline { white-space: normal; } } .fx-step-where { display: block; color: var(--fx-faint); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; } .fx-step-title { font-size: 1.08rem; font-weight: 700; color: var(--fx-ink); margin: 0 0 10px; } .fx-step-text { color: var(--fx-muted); font-size: .95rem; margin: 0 0 16px; } .fx-step-links { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .fx-step-links a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .96rem; color: var(--fx-accent-dark); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .fx-step-links a:hover, .fx-step-links a:focus { color: var(--fx-accent); } .fx-step-links a i { color: var(--fx-accent); font-size: 1.1rem; } /* Acordeón FAQ / herramientas en estilo Fable */ .fx-accordion { max-width: 860px; margin: 0 auto; } .fx-accordion .accordion-item { background: #fff; border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg) !important; margin-bottom: 12px; overflow: hidden; } .fx-accordion .accordion-button { font-family: var(--fx-sans); font-weight: 600; font-size: 1rem; color: var(--fx-ink); background: #fff; padding: 18px 20px; box-shadow: none; gap: 10px; } .fx-accordion .accordion-button:not(.collapsed) { color: var(--fx-accent-dark); background: var(--fx-bg-featured); box-shadow: none; } .fx-accordion .accordion-button:focus { box-shadow: 0 0 0 3px rgba(14, 166, 233, .18); border-color: var(--fx-accent); } .fx-accordion .accordion-button i { color: var(--fx-accent); font-size: 1.05rem; flex-shrink: 0; } .fx-accordion .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%230ea6e9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-size: 1rem; } .fx-accordion .accordion-body { padding: 4px 20px 20px; color: var(--fx-text); font-size: .96rem; } .fx-accordion .accordion-body a { font-weight: 600; } .fx-accordion .accordion-body img { border: 1px solid var(--fx-border); border-radius: var(--fx-r); margin: 6px 0; } /* Texto legal / prosa larga (términos) */ .fx-prose { max-width: 820px; margin: 0 auto; color: var(--fx-text); font-size: .98rem; line-height: 1.75; } .fx-prose h2 { font-size: 1.25rem; margin: 34px 0 12px; padding-top: 6px; } .fx-prose h3 { font-size: 1.08rem; margin: 24px 0 10px; } .fx-prose p { margin: 0 0 14px; } .fx-prose ul { margin: 0 0 14px; padding-left: 20px; } .fx-prose li { margin-bottom: 6px; } .fx-prose .fx-legal-meta { color: var(--fx-muted); font-size: .9rem; border-left: 3px solid var(--fx-accent); padding-left: 14px; margin-bottom: 28px; } /* Bloque de cierre "¿Dudas?" reutilizable */ .fx-help-note { text-align: center; color: var(--fx-muted); font-size: 1.02rem; max-width: 620px; margin: 0 auto; } .fx-help-note a { font-weight: 600; } .fx-help-note .fx-wa-ic { color: var(--fx-wa); } /* ===== Responsive general ===== */ @media (max-width: 991.98px) { .fx-hero { padding: 116px 0 56px; } .fx-section { padding: 72px 0; } .fx-head { margin-bottom: 40px; } .fx-modules { margin-top: 52px; } } @media (max-width: 575.98px) { .fx-hero { padding: 104px 0 48px; } .fx-hero-ctas { flex-direction: column; align-items: stretch; } .fx-section { padding: 60px 0; } }