/* ========================================================== EL RINCÓN ATLÉTICO CSS GLOBAL UNIFICADO - NEWS RIFT / NEWSUP IMPORTANTE: BORRAR TODO EL CSS ADICIONAL ACTUAL Y DEJAR ÚNICAMENTE ESTE CÓDIGO ========================================================== */ /* ========================================================== 1. PALETA ========================================================== */ :root { --era-navy: #061a33; --era-navy-2: #0b2748; --era-red: #e51b23; --era-red-dark: #bd141b; --era-white: #ffffff; --era-bg: #f7f8fa; --era-text: #172033; --era-muted: #74808d; --era-border: #e3e7eb; } /* ========================================================== 2. BASE GENERAL ========================================================== */ html { background: var(--era-bg); } body { background: var(--era-bg) !important; color: var(--era-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--era-red); color: var(--era-white); } img { max-width: 100%; height: auto; } /* ========================================================== 3. BARRA SUPERIOR DEL TEMA Quitamos la franja superior innecesaria ========================================================== */ .mg-headwidget .mg-head-detail { display: none !important; } /* ========================================================== 4. CABECERA / ZONA DEL LOGO ========================================================== */ .mg-headwidget, .mg-headwidget .mg-nav-widget-area-back, .mg-headwidget .mg-nav-widget-area-back .overlay, .mg-headwidget .mg-nav-widget-area-back .inner { background: var(--era-navy) !important; background-image: none !important; } .mg-headwidget .mg-nav-widget-area { padding-top: 8px !important; padding-bottom: 8px !important; } .mg-headwidget .mg-nav-widget-area .row { align-items: center !important; } .mg-headwidget .navbar-header { min-height: 0 !important; padding: 0 !important; margin: 0 !important; } /* ========================================================== 5. LOGO PRINCIPAL ========================================================== */ .custom-logo, .site-logo-container img, .navbar-header .custom-logo, .custom-logo-link img { width: auto !important; height: auto !important; max-height: 48px !important; max-width: 245px !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } .custom-logo-link, .navbar-brand { display: inline-flex !important; align-items: center !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== 6. TÍTULO / DESCRIPCIÓN Por si aparecen junto al logo ========================================================== */ .site-branding-text .site-title, .site-branding-text .site-title a { color: var(--era-white) !important; } .site-branding-text .site-description { color: rgba(255,255,255,.72) !important; } /* ========================================================== 7. MENÚ PRINCIPAL ========================================================== */ .mg-menu-full, .navbar-wp, #navbar-wp { background: var(--era-navy) !important; border: 0 !important; } .navbar-wp { box-shadow: 0 3px 12px rgba(3,15,30,.10) !important; } /* LINKS */ .navbar-wp .navbar-nav > li > a, .navbar-wp .nav > li > a, #navbar-wp .navbar-nav > li > a { position: relative !important; background: transparent !important; color: var(--era-white) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .1px !important; transition: background .18s ease, color .18s ease !important; } /* HOVER */ .navbar-wp .navbar-nav > li > a:hover, .navbar-wp .nav > li > a:hover { background: rgba(255,255,255,.055) !important; color: var(--era-white) !important; } /* ACTIVO */ .navbar-wp .navbar-nav > .current-menu-item > a, .navbar-wp .navbar-nav > .current_page_item > a, .navbar-wp .navbar-nav > .active > a { background: transparent !important; color: var(--era-white) !important; } /* ========================================================== 8. MENÚ ESCRITORIO ========================================================== */ @media (min-width: 992px) { .navbar-wp .navbar-nav > li > a, .navbar-wp .nav > li > a { padding-top: 27px !important; padding-bottom: 27px !important; } /* Línea roja debajo de la sección activa */ .navbar-wp .navbar-nav > .current-menu-item > a::after, .navbar-wp .navbar-nav > .current_page_item > a::after, .navbar-wp .navbar-nav > .active > a::after { content: ""; position: absolute; left: 50%; bottom: 15px; width: 30px; height: 3px; transform: translateX(-50%); border-radius: 99px; background: var(--era-red); } } /* ========================================================== 9. DROPDOWN ========================================================== */ .navbar-wp .dropdown-menu { background: var(--era-white) !important; border: 0 !important; border-radius: 0 0 8px 8px !important; box-shadow: 0 12px 30px rgba(6,26,51,.14) !important; } .navbar-wp .dropdown-menu a { background: var(--era-white) !important; color: var(--era-navy) !important; font-weight: 700 !important; } .navbar-wp .dropdown-menu a:hover, .navbar-wp .dropdown-menu a:focus { background: #f3f5f7 !important; color: var(--era-red) !important; } /* ========================================================== 10. HOME / BOTONES / CAMPANA ========================================================== */ .mobilehomebtn, .btn-theme, .btn-bell { background: var(--era-red) !important; border-color: var(--era-red) !important; color: var(--era-white) !important; border-radius: 6px !important; } .mobilehomebtn:hover, .btn-theme:hover, .btn-bell:hover { background: var(--era-red-dark) !important; border-color: var(--era-red-dark) !important; color: var(--era-white) !important; } /* ========================================================== 11. BUSCADOR ========================================================== */ .mg-search-box .msearch, .mg-search-box .msearch i { color: var(--era-white) !important; } /* ========================================================== 12. HAMBURGUESA ========================================================== */ .navbar-wp .navbar-toggler, .navbar-wp .navbar-toggle { border-color: rgba(255,255,255,.30) !important; color: var(--era-white) !important; background: transparent !important; border-radius: 6px !important; } .navbar-wp .navbar-toggler .burger-line, .navbar-wp .navbar-toggle .icon-bar { background: var(--era-white) !important; } /* ========================================================== 13. TICKER "ÚLTIMA ENTRADA" IMPORTANTE: No modificamos el funcionamiento interno del marquee. Solo diseño y límites para evitar la doble fila. ========================================================== */ .mg-latest-news-sec { background: var(--era-white) !important; border-top: 0 !important; border-bottom: 1px solid var(--era-border) !important; overflow: hidden !important; } .mg-latest-news-sec .container-fluid { padding-left: 0 !important; padding-right: 0 !important; } .mg-latest-news { background: var(--era-white) !important; overflow: hidden !important; } /* BLOQUE ROJO */ .mg-latest-news .bn_title { background: var(--era-red) !important; } .mg-latest-news .bn_title h2, .mg-latest-news .bn_title .title { color: var(--era-white) !important; font-weight: 900 !important; margin: 0 !important; white-space: nowrap !important; } .mg-latest-news .bn_title h2::before, .mg-latest-news .bn_title .title::before { color: var(--era-white) !important; } .mg-latest-news .bn_title span { border-left-color: var(--era-red) !important; border-right-color: var(--era-red) !important; } /* ZONA DE NOTICIAS */ .mg-latest-news-slider, .mg-latest-news .marquee { background: var(--era-white) !important; overflow: hidden !important; } .mg-latest-news-slider a, .mg-latest-news .marquee a { color: #2b69c9 !important; font-weight: 700 !important; text-decoration: none !important; } .mg-latest-news-slider a:hover, .mg-latest-news .marquee a:hover { color: var(--era-red) !important; } /* ========================================================== 14. ETIQUETAS POPULARES ========================================================== */ .mg-tpt-tag-area { background: var(--era-white) !important; border-bottom: 1px solid var(--era-border) !important; } .mg-tpt-txnlst strong { color: var(--era-navy) !important; font-weight: 900 !important; } .mg-tpt-txnlst a { color: var(--era-muted) !important; } .mg-tpt-txnlst a:hover { color: var(--era-red) !important; } /* ========================================================== 15. FONDO GENERAL ========================================================== */ #content { background: var(--era-bg) !important; } /* ========================================================== 16. TARJETAS ========================================================== */ .mg-blog-post-box { background: var(--era-white) !important; border: 1px solid rgba(6,26,51,.06) !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 5px 18px rgba(6,26,51,.06) !important; } .mg-blog-post-3 { border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 5px 18px rgba(6,26,51,.10) !important; transition: transform .2s ease, box-shadow .2s ease !important; } /* Hover solo ordenador */ @media (min-width: 992px) { .mg-blog-post-3:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(6,26,51,.14) !important; } } /* ========================================================== 17. TITULARES NORMALES ========================================================== */ .mg-blog-post-box .title, .mg-blog-post-box .title a, .mg-blog-post-box h1, .mg-blog-post-box h2, .mg-blog-post-box h3, .mg-blog-post-box h4 { color: var(--era-navy) !important; } .mg-blog-post-box .title a:hover { color: var(--era-red) !important; } /* ========================================================== 18. TITULARES SOBRE FOTO ========================================================== */ .mg-blog-post-3 .title, .mg-blog-post-3 .title a, .mg-blog-post-3 .mg-blog-inner .title, .mg-blog-post-3 .mg-blog-inner .title a { color: var(--era-white) !important; font-weight: 800 !important; line-height: 1.14 !important; letter-spacing: -.2px !important; } /* ========================================================== 19. CATEGORÍAS ========================================================== */ .newsup-categories, .mg-blog-category .newsup-categories, .mg-blog-category a { background: var(--era-red) !important; border: 0 !important; border-radius: 4px !important; color: var(--era-white) !important; padding: 5px 8px !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .35px !important; line-height: 1.2 !important; text-transform: uppercase !important; } .newsup-categories:hover, .mg-blog-category a:hover { background: var(--era-navy) !important; color: var(--era-white) !important; } /* ========================================================== 20. METADATOS ========================================================== */ .mg-blog-meta, .mg-blog-meta a, .mg-blog-date { color: #7d8996 !important; font-size: 11px !important; } .mg-blog-meta a:hover { color: var(--era-red) !important; } /* Metadatos sobre imagen */ .mg-blog-post-3 .mg-blog-meta, .mg-blog-post-3 .mg-blog-meta a, .mg-blog-post-3 .mg-blog-date { color: rgba(255,255,255,.82) !important; } /* ========================================================== 21. BOTÓN EDITAR Solo lo ves tú conectado a WordPress ========================================================== */ .mg-blog-post-3 .post-edit-link, .mg-blog-post-3 .edit-link a { color: rgba(255,255,255,.75) !important; font-size: 10px !important; letter-spacing: 1px !important; text-transform: uppercase !important; } .mg-blog-post-3 .post-edit-link:hover, .mg-blog-post-3 .edit-link a:hover { color: var(--era-white) !important; } /* ========================================================== 22. TÍTULOS DE SECCIÓN ========================================================== */ .mg-sec-title { border-color: var(--era-red) !important; } .mg-sec-title h4 { color: var(--era-navy) !important; font-weight: 900 !important; } /* ========================================================== 23. ENTRADA INDIVIDUAL ========================================================== */ .single .mg-blog-post-box .mg-header h1, .mg-blog-post-box .mg-header h1.title.single { color: var(--era-navy) !important; font-weight: 900 !important; line-height: 1.12 !important; } /* Texto artículo */ .mg-blog-post-box article.single { color: var(--era-text); } /* Links del artículo */ .mg-blog-post-box article.single > p > a { color: var(--era-red); } /* ========================================================== 24. AUTOR ========================================================== */ .mg-info-author-block { background: var(--era-white) !important; border-color: var(--era-border) !important; } .mg-info-author-block .media-heading, .mg-info-author-block .media-heading a { color: var(--era-navy) !important; } /* ========================================================== 25. IMÁGENES ========================================================== */ .mg-blog-post-box > img.img-fluid, .mg-blog-post-box .img-fluid { border-radius: 8px; } /* ========================================================== 26. SIDEBAR ========================================================== */ aside .widget:not(.widget_custom_html) { background: var(--era-white); border: 1px solid var(--era-border); border-radius: 9px; } aside .widget:not(.widget_custom_html) .widget-title { color: var(--era-navy) !important; } /* ========================================================== 27. BOTONES GENERALES ========================================================== */ .btn-theme, button[type="submit"], input[type="submit"] { background: var(--era-red) !important; border-color: var(--era-red) !important; color: var(--era-white) !important; border-radius: 5px !important; } .btn-theme:hover, button[type="submit"]:hover, input[type="submit"]:hover { background: var(--era-navy) !important; border-color: var(--era-navy) !important; } /* ========================================================== 28. FOOTER ========================================================== */ footer .overlay, .mg-footer-widget-area, .mg-footer-bottom-area { background: var(--era-navy) !important; } /* Línea roja superior */ .mg-footer-widget-area { border-top: 4px solid var(--era-red) !important; } .mg-footer-bottom-area { color: var(--era-white) !important; } /* Separador */ .mg-footer-bottom-area .divide-line { border-color: rgba(255,255,255,.12) !important; background: rgba(255,255,255,.12) !important; } /* ========================================================== 29. LOGO FOOTER ========================================================== */ .mg-footer-bottom-area .custom-logo { width: auto !important; height: auto !important; max-height: 38px !important; max-width: 210px !important; } /* ========================================================== 30. TEXTOS FOOTER ========================================================== */ .mg-footer-widget-area h1, .mg-footer-widget-area h2, .mg-footer-widget-area h3, .mg-footer-widget-area h4, .mg-footer-widget-area h5, .mg-footer-widget-area h6, .mg-footer-widget-area .widget-title, .mg-footer-bottom-area .site-title, .mg-footer-bottom-area .site-title a, .mg-footer-bottom-area .site-title-footer, .mg-footer-bottom-area .site-title-footer a { color: var(--era-white) !important; } .mg-footer-widget-area p, .mg-footer-widget-area li, .mg-footer-bottom-area p, .mg-footer-bottom-area .site-description, .mg-footer-bottom-area .site-description-footer { color: #bec9d4 !important; } .mg-footer-widget-area a, .mg-footer-bottom-area a { color: var(--era-white) !important; } .mg-footer-widget-area a:hover, .mg-footer-bottom-area a:hover { color: #ff6a70 !important; } /* ========================================================== 31. REDES FOOTER ========================================================== */ .mg-footer-bottom-area .mg-social li a, .mg-footer-widget-area .mg-social li a { color: var(--era-white) !important; } .mg-footer-bottom-area .mg-social .icon-soci, .mg-footer-widget-area .mg-social .icon-soci { background: var(--era-navy-2) !important; color: var(--era-white) !important; border-radius: 5px !important; } .mg-footer-bottom-area .mg-social a:hover .icon-soci, .mg-footer-widget-area .mg-social a:hover .icon-soci { background: var(--era-red) !important; } /* ========================================================== 32. COPYRIGHT ========================================================== */ .mg-footer-copyright { background: #041426 !important; border-top: 1px solid rgba(255,255,255,.07) !important; color: #8999aa !important; } .mg-footer-copyright p, .mg-footer-copyright span { color: #8999aa !important; } .mg-footer-copyright a { color: #c8d2dc !important; } .mg-footer-copyright a:hover { color: var(--era-white) !important; } /* ========================================================== 33. VOLVER ARRIBA ========================================================== */ .ta_upscr { background: var(--era-red) !important; color: var(--era-white) !important; border-radius: 6px !important; box-shadow: 0 5px 15px rgba(6,26,51,.25) !important; } .ta_upscr:hover { background: var(--era-navy-2) !important; color: var(--era-white) !important; } /* ========================================================== 34. TABLET ========================================================== */ @media (max-width: 991px) { /* LOGO */ .custom-logo, .site-logo-container img, .navbar-header .custom-logo, .custom-logo-link img { max-height: 42px !important; max-width: 220px !important; } /* CABECERA */ .mg-headwidget .mg-nav-widget-area { padding-top: 8px !important; padding-bottom: 8px !important; } /* TARJETAS */ .mg-blog-post-box, .mg-blog-post-3 { border-radius: 9px !important; } } /* ========================================================== 35. MÓVIL ========================================================== */ @media (max-width: 767px) { /* ====================================================== ZONA DEL LOGO ====================================================== */ .mg-headwidget .mg-nav-widget-area-back, .mg-headwidget .mg-nav-widget-area-back .overlay, .mg-headwidget .mg-nav-widget-area-back .inner { background: var(--era-navy) !important; } .mg-headwidget .mg-nav-widget-area { padding: 10px 14px !important; min-height: 64px !important; } .mg-headwidget .mg-nav-widget-area .row { margin-left: 0 !important; margin-right: 0 !important; align-items: center !important; } .mg-headwidget .navbar-header { display: flex !important; align-items: center !important; min-height: 44px !important; width: 100% !important; overflow: visible !important; } /* ====================================================== LOGO MÓVIL ====================================================== */ .custom-logo, .site-logo-container img, .navbar-header .custom-logo, .custom-logo-link img { max-height: 44px !important; max-width: 205px !important; width: auto !important; height: auto !important; } /* ====================================================== FILA INFERIOR MÓVIL HOME + HAMBURGUESA + BUSCADOR + CAMPANA SIN ALTURAS FIJAS QUE CORTEN LOS BOTONES ====================================================== */ .mg-menu-full, .navbar-wp { background: var(--era-navy) !important; height: auto !important; min-height: 58px !important; max-height: none !important; overflow: visible !important; } .navbar-wp { padding: 8px 14px !important; box-shadow: 0 3px 12px rgba(3,15,30,.12) !important; } .navbar-wp > .container, .navbar-wp > .container-fluid { height: auto !important; min-height: 42px !important; max-height: none !important; padding-left: 0 !important; padding-right: 0 !important; overflow: visible !important; } /* ====================================================== CONTENEDOR MÓVIL REAL DEL TEMA ====================================================== */ .navbar-wp .m-header { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 42px !important; gap: 10px !important; overflow: visible !important; } /* Reset de posiciones para evitar botones cortados */ .navbar-wp .m-header .mobilehomebtn, .navbar-wp .m-header .navbar-toggler, .navbar-wp .m-header .navbar-toggle, .navbar-wp .m-header .mg-search-box, .navbar-wp .m-header .btn-bell { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ====================================================== HOME ====================================================== */ .mobilehomebtn { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--era-red) !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; } .mobilehomebtn span, .mobilehomebtn i { color: var(--era-white) !important; font-size: 19px !important; } /* ====================================================== HAMBURGUESA ====================================================== */ .navbar-wp .navbar-toggler, .navbar-wp .navbar-toggle { flex: 0 0 42px !important; width: 42px !important; height: 40px !important; padding: 8px !important; margin-left: auto !important; margin-right: auto !important; border: 1px solid rgba(255,255,255,.32) !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important; } .navbar-wp .navbar-toggler .burger, .navbar-wp .navbar-toggle .burger { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 4px !important; width: 100% !important; height: 100% !important; } .navbar-wp .navbar-toggler .burger-line, .navbar-wp .navbar-toggle .icon-bar { width: 22px !important; height: 2px !important; margin: 0 !important; background: var(--era-white) !important; opacity: 1 !important; } /* ====================================================== BUSCADOR ====================================================== */ .navbar-wp .m-header .mg-search-box { display: flex !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; margin-right: 0 !important; padding: 0 !important; } .navbar-wp .m-header .mg-search-box .msearch, .navbar-wp .m-header .mg-search-box .msearch i { color: var(--era-white) !important; font-size: 21px !important; } /* ====================================================== CAMPANA ====================================================== */ .navbar-wp .m-header .btn-bell { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--era-red) !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; } /* ====================================================== MENÚ DESPLEGADO ====================================================== */ #navbar-wp { background: var(--era-navy) !important; border-top: 1px solid rgba(255,255,255,.08) !important; } #navbar-wp .navbar-nav > li > a { padding: 12px 15px !important; background: transparent !important; color: var(--era-white) !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; font-size: 13px !important; font-weight: 800 !important; } #navbar-wp .navbar-nav > .current-menu-item > a, #navbar-wp .navbar-nav > .current_page_item > a, #navbar-wp .navbar-nav > .active > a { background: var(--era-red) !important; color: var(--era-white) !important; } #navbar-wp .dropdown-menu a { color: var(--era-navy) !important; } /* ====================================================== TICKER MÓVIL UNA SOLA FRANJA ====================================================== */ .mg-latest-news-sec { height: 44px !important; min-height: 44px !important; max-height: 44px !important; overflow: hidden !important; } .mg-latest-news { height: 44px !important; min-height: 44px !important; max-height: 44px !important; overflow: hidden !important; } /* BLOQUE ÚLTIMA ENTRADA */ .mg-latest-news .bn_title { width: 145px !important; min-width: 145px !important; max-width: 145px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding-left: 10px !important; padding-right: 10px !important; overflow: hidden !important; } .mg-latest-news .bn_title h2, .mg-latest-news .bn_title .title { font-size: 13px !important; line-height: 44px !important; white-space: nowrap !important; } /* NOTICIAS DEL TICKER */ .mg-latest-news-slider, .mg-latest-news .marquee { height: 44px !important; min-height: 44px !important; max-height: 44px !important; overflow: hidden !important; white-space: nowrap !important; } .mg-latest-news-slider a, .mg-latest-news .marquee a { font-size: 12px !important; line-height: 44px !important; white-space: nowrap !important; } /* ====================================================== CONTENIDO ====================================================== */ #content { padding-top: 16px !important; } /* ====================================================== TARJETAS ====================================================== */ .mg-blog-post-box, .mg-blog-post-3 { border-radius: 10px !important; } .mg-blog-post-3 { margin-bottom: 18px !important; } /* ====================================================== TITULARES MÓVIL ====================================================== */ .mg-blog-post-3 .title, .mg-blog-post-3 .title a, .mg-blog-post-3 .mg-blog-inner .title, .mg-blog-post-3 .mg-blog-inner .title a { font-size: 21px !important; line-height: 1.15 !important; white-space: normal !important; } /* ====================================================== TITULAR DE ARTÍCULO ====================================================== */ .single .mg-blog-post-box .mg-header h1, .mg-blog-post-box .mg-header h1.title.single { font-size: 29px !important; line-height: 1.12 !important; } /* ====================================================== FOOTER ====================================================== */ .mg-footer-bottom-area { text-align: center !important; } .mg-footer-bottom-area .custom-logo { max-height: 30px !important; } .mg-footer-bottom-area .text-right { text-align: center !important; } .mg-footer-bottom-area .mg-social { justify-content: center; } } /* ========================================================== 36. MÓVIL MUY PEQUEÑO ========================================================== */ @media (max-width: 420px) { /* CABECERA */ .mg-headwidget .mg-nav-widget-area { padding: 9px 12px !important; } /* LOGO */ .custom-logo, .site-logo-container img, .navbar-header .custom-logo, .custom-logo-link img { max-height: 40px !important; max-width: 185px !important; } /* NAV */ .navbar-wp { padding-left: 10px !important; padding-right: 10px !important; } .navbar-wp .m-header { gap: 8px !important; } /* HOME Y CAMPANA */ .mobilehomebtn, .navbar-wp .m-header .btn-bell { flex-basis: 38px !important; width: 38px !important; height: 38px !important; } /* HAMBURGUESA */ .navbar-wp .navbar-toggler, .navbar-wp .navbar-toggle { flex-basis: 40px !important; width: 40px !important; height: 38px !important; } /* TICKER */ .mg-latest-news .bn_title { width: 132px !important; min-width: 132px !important; max-width: 132px !important; } .mg-latest-news .bn_title h2, .mg-latest-news .bn_title .title { font-size: 12px !important; } .mg-latest-news-slider a, .mg-latest-news .marquee a { font-size: 12px !important; } /* TITULARES */ .mg-blog-post-3 .title, .mg-blog-post-3 .title a, .mg-blog-post-3 .mg-blog-inner .title, .mg-blog-post-3 .mg-blog-inner .title a { font-size: 20px !important; } /* ARTÍCULO */ .single .mg-blog-post-box .mg-header h1, .mg-blog-post-box .mg-header h1.title.single { font-size: 26px !important; } } /* ========================================================== CENTRAR LOGO EN TABLET Y MÓVIL ========================================================== */ @media (max-width: 991px) { /* Contenedor principal del logo */ .mg-headwidget .navbar-header { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Contenedor del logo */ .mg-headwidget .site-logo-container, .mg-headwidget .custom-logo-link, .mg-headwidget .navbar-brand { display: flex !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; float: none !important; } /* Imagen del logo */ .mg-headwidget .custom-logo, .mg-headwidget .site-logo-container img, .mg-headwidget .navbar-header .custom-logo, .mg-headwidget .custom-logo-link img { display: block !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================== CENTRAR PERFECTAMENTE LA FILA DEL MENÚ EN MÓVIL/TABLET ========================================================== */ @media (max-width: 991px) { .navbar-wp .m-header { display: grid !important; grid-template-columns: 40px 1fr 42px 1fr 40px !important; align-items: center !important; width: 100% !important; gap: 12px !important; } /* HOME */ .navbar-wp .m-header .mobilehomebtn { grid-column: 1 !important; justify-self: start !important; margin: 0 !important; } /* HAMBURGUESA - CENTRADA */ .navbar-wp .m-header .navbar-toggler, .navbar-wp .m-header .navbar-toggle { grid-column: 3 !important; justify-self: center !important; margin: 0 !important; } /* BUSCADOR */ .navbar-wp .m-header .mg-search-box { grid-column: 4 !important; justify-self: end !important; margin: 0 !important; } /* CAMPANA */ .navbar-wp .m-header .btn-bell { grid-column: 5 !important; justify-self: end !important; margin: 0 !important; } } /* ========================================================== EL RINCÓN ATLÉTICO ENTRADAS FULL WIDTH EN MÓVIL Y TABLET ========================================================== */ @media (max-width: 991px) { /* ------------------------------------------------------ CONTENEDOR GENERAL DE LA ENTRADA Elimina los márgenes laterales de la plantilla ------------------------------------------------------ */ body.single #content .container, body.single #content .container-fluid { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } body.single #content .row { margin-left: 0 !important; margin-right: 0 !important; } body.single #content .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } /* ------------------------------------------------------ QUITAR EFECTO TARJETA ------------------------------------------------------ */ body.single .mg-blog-post-box { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #ffffff !important; overflow: visible !important; } /* ------------------------------------------------------ QUITAR REDONDEO DE LA IMAGEN DESTACADA ------------------------------------------------------ */ body.single .mg-blog-post-box > img.img-fluid, body.single .mg-blog-post-box .img-fluid, body.single .mg-blog-post-box figure, body.single .mg-blog-post-box figure img { width: 100% !important; max-width: 100% !important; border-radius: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* ------------------------------------------------------ TÍTULO DE LA NOTICIA Sigue teniendo margen para respirar ------------------------------------------------------ */ body.single .mg-blog-post-box .mg-header { padding-left: 20px !important; padding-right: 20px !important; margin-left: 0 !important; margin-right: 0 !important; } body.single .mg-blog-post-box .mg-header h1, body.single .mg-blog-post-box .mg-header h1.title.single { margin-top: 0 !important; font-size: 36px !important; line-height: 1.08 !important; letter-spacing: -0.7px !important; } /* ------------------------------------------------------ CUERPO DE LA NOTICIA Pantalla completa pero texto con margen interior ------------------------------------------------------ */ body.single .mg-blog-post-box article.single { width: 100% !important; max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------ NUESTROS HTML PERSONALIZADOS ------------------------------------------------------ */ body.single .mg-blog-post-box article.single > article { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* ------------------------------------------------------ FONDO Evita la franja gris alrededor de la noticia ------------------------------------------------------ */ body.single #content { background: #ffffff !important; padding-left: 0 !important; padding-right: 0 !important; } /* ------------------------------------------------------ MENOS ESPACIO ENTRE HEADER WEB Y ARTÍCULO ------------------------------------------------------ */ body.single #content { padding-top: 0 !important; } } /* ========================================================== MÓVIL ========================================================== */ @media (max-width: 767px) { body.single .mg-blog-post-box .mg-header { padding-left: 18px !important; padding-right: 18px !important; } body.single .mg-blog-post-box article.single { padding-left: 18px !important; padding-right: 18px !important; } body.single .mg-blog-post-box .mg-header h1, body.single .mg-blog-post-box .mg-header h1.title.single { font-size: 34px !important; line-height: 1.08 !important; margin-bottom: 24px !important; } } /* ========================================================== MÓVIL PEQUEÑO ========================================================== */ @media (max-width: 420px) { body.single .mg-blog-post-box .mg-header { padding-left: 16px !important; padding-right: 16px !important; } body.single .mg-blog-post-box article.single { padding-left: 16px !important; padding-right: 16px !important; } body.single .mg-blog-post-box .mg-header h1, body.single .mg-blog-post-box .mg-header h1.title.single { font-size: 32px !important; line-height: 1.08 !important; } }