/** * Blog (índice y artículos): correcciones responsive. * Cargar al final del . Ámbito: body.fx-blog */ .fx-blog { overflow-x: hidden !important; } .fx-blog main { overflow-x: hidden !important; max-width: 100% !important; } /* Banner (solo índice / páginas que incluyan .banner) */ @media (max-width: 991px) { .fx-blog .banner { position: relative !important; max-width: 100% !important; padding-bottom: 16px !important; } .fx-blog .banner.container { padding-left: 0 !important; padding-right: 0 !important; } .fx-blog .banner #banner-figure { overflow: hidden !important; max-width: 100% !important; height:auto; } .fx-blog .banner #banner-figure img { width: 100% !important; max-height: min(52vh, 440px) !important; height: auto !important; object-fit: cover !important; object-position: center center !important; display: block !important; } .fx-blog .banner .text-banner { left: 50% !important; right: auto !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 96% !important; max-width: min(96vw, 48rem) !important; text-align: center !important; padding: 0 16px !important; box-sizing: border-box !important; } .fx-blog .banner .text-banner h1 { font-size: clamp(2.5rem, 12vw, 4.5rem) !important; line-height: 1.1 !important; margin: 0 !important; } .fx-blog .banner .text-banner p { line-clamp: unset !important; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important; overflow: visible !important; padding: 8px 12px 0 !important; } } /* Orden en móvil: índice = migas → buscar → lista → sidebar | artículo = contenido → sidebar */ @media (max-width: 991px) { .fx-blog .content > .row { display: flex !important; flex-direction: column !important; } .fx-blog .content > .row > .menu-breadcrumb:not(.sidebar) { order: 1 !important; width: 100% !important; float: none !important; padding: 8px 12px 0 !important; } .fx-blog .content > .row > .col-lg-9:first-child:not(.content-blog) { order: 2 !important; width: 100% !important; float: none !important; padding-left: 12px !important; padding-right: 12px !important; } .fx-blog .content > .row > .col-lg-9.content-blog { order: 3 !important; width: 100% !important; float: none !important; padding-left: 14px !important; padding-right: 14px !important; } .fx-blog .content > .row > .col-lg-9.content-blog:first-child { order: 1 !important; } .fx-blog .content > .row > .sidebar:not(.menu-breadcrumb) { order: 4 !important; width: 100% !important; float: none !important; clear: both !important; padding: 16px 12px 24px !important; } .fx-blog .content > .row > .sidebar.menu-breadcrumb { order: 2 !important; width: 100% !important; float: none !important; padding: 16px 12px 24px !important; } .fx-blog .content > .row > .mobile-sidebar { order: 5 !important; width: 100% !important; text-align: center !important; padding: 8px 0 !important; } .fx-blog .content .form-group { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .fx-blog .content .form-group .input-lg { flex: 1 1 220px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .fx-blog .content .form-group button { flex: 0 0 auto !important; } } /* Tarjetas índice: texto legible */ @media (max-width: 991px) { .fx-blog .content-blog .product-blog, .fx-blog .content-blog .title-blog { width: 100% !important; float: none !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important; } .fx-blog .content-blog .title-blog { padding-bottom: 36px !important; } .fx-blog .content-blog .title-blog h2, .fx-blog .content-blog .title-blog h2 a { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; font-size: clamp(1.1rem, 4vw, 1.5rem) !important; line-height: 1.3 !important; } .fx-blog .content-blog .title-blog p { font-size: clamp(14px, 3.2vw, 17px) !important; line-height: 1.55 !important; padding: 0 6px 12px !important; } .fx-blog .content-blog .title-blog .time-blog { padding-top: 12px !important; padding-bottom: 12px !important; flex-wrap: wrap !important; } .fx-blog .content-blog .product-blog img { max-height: 220px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; margin-left: auto !important; margin-right: auto !important; } } /* Sidebar listados */ @media (max-width: 991px) { .fx-blog .sidebar .title-post h1, .fx-blog .sidebar .list-2 .title-post a h1 { font-size: clamp(0.95rem, 3.2vw, 1.1rem) !important; line-height: 1.35 !important; white-space: normal !important; } .fx-blog .sidebar .list-item-2 .col-lg-5, .fx-blog .sidebar .list-item-2 .col-lg-7 { width: 100% !important; float: none !important; text-align: center !important; margin-bottom: 8px !important; } } /* Artículo: tipografía del cuerpo */ @media (max-width: 991px) { .fx-blog .content .title-blog h2, .fx-blog .content .title-blog h2 a { font-size: clamp(1.2rem, 4.5vw, 1.75rem) !important; line-height: 1.25 !important; white-space: normal !important; } .fx-blog .content .title-blog p.p1 { font-size: clamp(15px, 3.4vw, 18px) !important; line-height: 1.6 !important; padding-left: 4px !important; padding-right: 4px !important; word-break: break-word !important; } .fx-blog .content .product-blog img { max-width: 100% !important; height: auto !important; } .fx-blog .content .posted, .fx-blog .content .social { padding-left: 4px !important; padding-right: 4px !important; flex-wrap: wrap !important; } .fx-blog .content .social { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px !important; padding-bottom: 48px !important; } .fx-blog .content .social span { top: 0 !important; padding-right: 12px !important; } } /* Paginación índice */ @media (max-width: 991px) { .fx-blog .content .pagi { padding: 12px 8px 24px !important; overflow-x: auto !important; } } /* Footer */ @media (max-width: 991px) { .fx-blog footer { height: auto !important; min-height: 0 !important; max-width: 100% !important; background-size: cover !important; background-position: center top !important; } .fx-blog footer .info-footer { padding-top: 40px !important; padding-bottom: 16px !important; } .fx-blog footer .row > .info-footer, .fx-blog footer .row > .new-letter { width: 100% !important; float: none !important; padding: 12px 18px !important; } .fx-blog footer .info-footer .col-xs-6 { width: 100% !important; float: none !important; margin-bottom: 16px !important; } .fx-blog footer .new-letter { padding-bottom: 32px !important; } .fx-blog footer .new-letter .form-new { margin-top: 0 !important; height: auto !important; min-height: min(220px, 50vw) !important; max-width: 100% !important; box-sizing: border-box !important; padding: 20px 16px 28px !important; background-size: cover !important; background-position: center center !important; } .fx-blog footer .new-letter .form-new h1 { padding: 8px 18px 12px !important; margin: 0 !important; text-align: center !important; font-size: clamp(1.2rem, 4vw, 1.65rem) !important; } .fx-blog footer .new-letter .form-new p { padding: 0 18px 16px !important; margin: 0 auto !important; max-width: 28rem !important; text-align: center !important; line-height: 1.55 !important; } .fx-blog footer .new-letter .form-new input { display: block !important; width: 100% !important; max-width: 22rem !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } .fx-blog footer .new-letter .form-new button { display: block !important; width: fit-content !important; max-width: calc(100% - 24px) !important; margin: 16px auto 0 !important; } .fx-blog footer .footer-logo .footer-row .col-lg-4 .logo-bot { margin-left: 0 !important; } }