/** * ESTILO DE LOS ARTÍCULOS DEL BLOG (/blog/*, desde el 08/10/2026) * --------------------------------------------------------------------------------------------------------------- * Solo cambia el aspecto: no toca el HTML ni el texto de ningún artículo. Se carga desde modulos/head.php únicamente * en las páginas de /blog/ y después de estilos-min.css, al que sobreescribe. El cuerpo va bajo #blog .col-lg-8 (la * columna del artículo) y el lateral bajo #recentArticlesAside; la cabecera y el pie no cambian. El índice y las * entradas recientes los genera /js/entradas-recientes.js. * Colores: los mismos de la web nueva (home-asisa.css, --hx-*). */ #blog { --ba-azulon: #0c1a2f; --ba-titulo: #0e2b55; --ba-azul: #1c4a82; --ba-azul-claro: #3098cf; --ba-naranja: #ff5400; --ba-naranja-osc: #e04a00; --ba-fondo: #f4f7fb; --ba-fondo-2: #f8fafd; --ba-linea: #e4eaf2; --ba-texto: #1d2b3f; --ba-gris: #5b6b80; --ba-verde: #16a36a; --ba-radio: 20px; --ba-sombra: 0 1px 2px rgba(12, 26, 47, .04), 0 12px 32px rgba(12, 26, 47, .07); --ba-sombra-alta: 0 2px 4px rgba(12, 26, 47, .05), 0 22px 48px rgba(12, 26, 47, .13); } /* =================================================================================================== Texto */ #blog .col-lg-8 {color: var(--ba-texto);} #blog .col-lg-8 p, #blog .col-lg-8 ul li, #blog .col-lg-8 ol li {font-size: 1.06rem; line-height: 1.75;} #blog .col-lg-8 p {margin-bottom: 1.1rem;} #blog .col-lg-8 strong, #blog .col-lg-8 b {color: var(--ba-azulon); font-weight: 700; font-family: inherit; font-size: inherit;} #blog .col-lg-8 a:not(.btn):not(.accordion-button):not(#tocContainer a) {color: var(--ba-azul); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(28, 74, 130, .3); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s;} #blog .col-lg-8 a:not(.btn):not(.accordion-button):not(#tocContainer a):hover {color: var(--ba-naranja-osc); text-decoration-color: currentColor;} #blog .col-lg-8 .verde {color: var(--ba-verde) !important;} #blog .col-lg-8 .naranja {color: var(--ba-naranja) !important;} /* Cabecera del artículo: título, fecha e imagen */ #blog .col-lg-8 > h1 {font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; color: var(--ba-titulo) !important; margin-bottom: 14px;} #blog .col-lg-8 > p.text-muted {display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 6px 14px; border-radius: 30px; background: var(--ba-fondo); color: var(--ba-gris) !important; font-size: .88rem; font-weight: 600;} #blog .col-lg-8 > p.text-muted::before {content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ba-naranja);} #blog .col-lg-8 > picture img, #blog .col-lg-8 > img {border-radius: var(--ba-radio) !important; box-shadow: var(--ba-sombra-alta);} /* Entradilla */ #blog .col-lg-8 p.display-2 {font-size: 1.2rem !important; line-height: 1.65; color: var(--ba-titulo); font-weight: 500; margin: 24px 0 16px;} #blog .col-lg-8 p.display-3 {font-size: 1.25rem !important; line-height: 1.6; color: var(--ba-azul);} /* Miga de pan */ #blog .col-lg-8 .breadcrumb {display: inline-flex; flex-wrap: wrap; margin: 18px 0 6px; padding: 6px 14px; border-radius: 30px; background: var(--ba-fondo); font-size: .85rem;} #blog .col-lg-8 .breadcrumb a {text-decoration: none !important; font-weight: 600;} /* =================================================================================================== Banner bajo la imagen */ #blog .col-lg-8 .banner-blog {position: relative; overflow: hidden; margin: 22px 0 8px; padding: 30px 28px; border-radius: var(--ba-radio); text-align: left; background: radial-gradient(circle at 92% 10%, rgba(48, 152, 207, .45), transparent 45%), linear-gradient(135deg, var(--ba-azul) 0%, #12345f 60%, var(--ba-azulon) 100%); box-shadow: var(--ba-sombra-alta);} #blog .col-lg-8 .banner-blog::after {content: ""; position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; border: 34px solid rgba(255, 255, 255, .06); pointer-events: none;} #blog .col-lg-8 .banner-blog .banner-container {position: relative; z-index: 1;} #blog .col-lg-8 .banner-blog h2 {margin: 0 0 18px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.25; font-weight: 800; color: #fff !important;} #blog .col-lg-8 .banner-blog .banner-buttons {display: flex; flex-wrap: wrap; gap: 12px;} #blog .col-lg-8 .banner-blog .btn {display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 24px; border-radius: 40px; font-weight: 800; font-size: .98rem; border: 2px solid transparent; transition: transform .2s, background-color .2s, box-shadow .2s;} #blog .col-lg-8 .banner-blog .btn:first-child {background: var(--ba-naranja); border-color: var(--ba-naranja); color: #fff; box-shadow: 0 12px 24px -10px rgba(255, 84, 0, .8);} #blog .col-lg-8 .banner-blog .btn:first-child:hover {background: var(--ba-naranja-osc); border-color: var(--ba-naranja-osc); transform: translateY(-1px);} #blog .col-lg-8 .banner-blog .btn:not(:first-child) {background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .55) !important; color: #fff !important; box-shadow: none !important;} #blog .col-lg-8 .banner-blog .btn:not(:first-child):hover {background: #fff !important; color: var(--ba-azul) !important; transform: translateY(-1px);} /* =================================================================================================== Títulos */ #blog .col-lg-8 h2.titulo_blog, #blog .col-lg-8 > h2:not(.accordion-header) {position: relative; margin: 56px 0 18px; padding: 4px 0 4px 20px; border: 0; border-radius: 0; background: none; font-size: clamp(1.45rem, 2.4vw, 1.85rem); line-height: 1.25; letter-spacing: -.01em; font-weight: 700; color: var(--ba-titulo) !important; text-align: left;} #blog .col-lg-8 h2.titulo_blog::before, #blog .col-lg-8 > h2:not(.accordion-header)::before {content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 5px; border-radius: 5px; background: linear-gradient(var(--ba-naranja), #ff9a5c);} #blog .col-lg-8 h3 {line-height: 1.3; font-weight: 700; color: var(--ba-titulo) !important;} /* Títulos con rayas a los lados: rayas más finas y que se difuminan */ #blog .col-lg-8 .guiones-titulo {gap: 16px; font-weight: 700; color: var(--ba-titulo) !important; letter-spacing: -.01em;} #blog .col-lg-8 .guiones-titulo::before, #blog .col-lg-8 .guiones-titulo::after {content: ""; flex: 1 1 24px; max-width: 90px; height: 3px; border: 0; margin: 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--ba-naranja));} #blog .col-lg-8 .guiones-titulo::after {background: linear-gradient(90deg, var(--ba-naranja), transparent);} #blog .col-lg-8 #tocContainer .guiones-titulo::before, #blog .col-lg-8 #tocContainer .guiones-titulo::after {max-width: 72px;} /* Encabezados de sección con antetítulo */ #blog .col-lg-8 .heading-section .subheading, #blog .col-lg-8 .subheading {display: inline-block; padding: 5px 14px; border-radius: 30px; background: #fff0e6; color: var(--ba-naranja-osc); font-size: .75rem; letter-spacing: .12em; font-weight: 800;} #blog .col-lg-8 .heading-section h2 {font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em;} #blog .col-lg-8 .titSub::before, #blog .col-lg-8 .titSub::after {height: 3px; border: 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--ba-azul-claro));} #blog .col-lg-8 .titSub::after {background: linear-gradient(90deg, var(--ba-azul-claro), transparent);} /* =================================================================================================== Listas */ /* Listas normales: viñeta propia (anillo naranja) y números en círculo */ #blog .col-lg-8 ul:not(.sinlista):not(.ul-modern):not(#tableOfContents):not(#tocContainer ul):not(.breadcrumb):not(.nav):not(.list-unstyled):not([class*="pagination"]) {list-style: none; padding-left: 0; margin: 0 0 1.3rem;} #blog .col-lg-8 ul:not(.sinlista):not(.ul-modern):not(#tableOfContents):not(#tocContainer ul):not(.breadcrumb):not(.nav):not(.list-unstyled):not([class*="pagination"]) > li {position: relative; padding: 0 0 0 30px; margin-bottom: 12px;} #blog .col-lg-8 ul:not(.sinlista):not(.ul-modern):not(#tableOfContents):not(#tocContainer ul):not(.breadcrumb):not(.nav):not(.list-unstyled):not([class*="pagination"]) > li.pb-3 {padding-bottom: .4rem !important;} #blog .col-lg-8 ul:not(.sinlista):not(.ul-modern):not(#tableOfContents):not(#tocContainer ul):not(.breadcrumb):not(.nav):not(.list-unstyled):not([class*="pagination"]) > li::before {content: ""; position: absolute; left: 4px; top: .62em; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--ba-naranja); background: #fff; box-sizing: border-box;} /* Segundo nivel: punto azul pequeño */ #blog .col-lg-8 ul ul:not(.sinlista):not(.ul-modern):not(#tocContainer ul) {margin: 10px 0 4px !important;} #blog .col-lg-8 ul ul:not(.sinlista):not(.ul-modern):not(#tocContainer ul) > li {margin-bottom: 6px !important;} #blog .col-lg-8 ul ul:not(.sinlista):not(.ul-modern):not(#tocContainer ul) > li::before {left: 7px !important; top: .72em !important; width: 7px !important; height: 7px !important; border: 0 !important; background: var(--ba-azul-claro) !important;} #blog .col-lg-8 ol:not(.breadcrumb):not(#tocContainer ol) {list-style: none; counter-reset: baNum; padding-left: 0; margin: 0 0 1.3rem;} #blog .col-lg-8 ol:not(.breadcrumb):not(#tocContainer ol) > li {position: relative; counter-increment: baNum; padding-left: 42px; margin-bottom: 14px; min-height: 28px;} #blog .col-lg-8 ol:not(.breadcrumb):not(#tocContainer ol) > li::before {content: counter(baNum); position: absolute; left: 0; top: .1em; width: 28px; height: 28px; border-radius: 50%; background: var(--ba-azul); color: #fff; font-size: .85rem; font-weight: 800; line-height: 28px; text-align: center;} /* Listas con icono (check, etc.): cada punto en una tarjeta suave. flow-root: si hay una foto flotante al lado, la tarjeta se estrecha junto a ella en vez de pasar por debajo y taparla */ #blog .col-lg-8 ul.sinlista, #blog .col-lg-8 ul.ul-modern {display: block; list-style: none; margin: 0 0 1.3rem; padding: 0 !important;} #blog .col-lg-8 ul.sinlista > li, #blog .col-lg-8 ul.ul-modern > li {display: flow-root; margin: 0 0 10px !important; padding: 12px 16px 12px 16px !important; border: 1px solid var(--ba-linea); border-radius: 14px; background: var(--ba-fondo-2); line-height: 1.6; text-align: left; overflow-wrap: anywhere; min-width: 0;} #blog .col-lg-8 ul.sinlista > li > :is(i,svg.ib):first-child, #blog .col-lg-8 ul.ul-modern > li > :is(i,svg.ib):first-child {margin-right: 8px;} #blog .col-lg-8 ul.sinlista > li::before, #blog .col-lg-8 ul.ul-modern > li::before {content: none !important;} /* =================================================================================================== Cajas y tarjetas */ /* Bloques enmarcados (fila con borde) */ #blog .col-lg-8 .row.border {margin-left: 0; margin-right: 0; border: 1px solid var(--ba-linea) !important; border-radius: var(--ba-radio); background: linear-gradient(180deg, #fff, var(--ba-fondo-2)); box-shadow: var(--ba-sombra);} /* Tarjetas */ #blog .col-lg-8 .card {border: 1px solid var(--ba-linea) !important; border-radius: var(--ba-radio); box-shadow: var(--ba-sombra) !important; overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s;} /* Tarjetas de contenido (título con icono + texto + lista): blancas, con un brillo suave arriba a la derecha */ #blog .col-lg-8 .card.shadow-lg {padding-top: 26px !important; padding-bottom: 22px !important; background: radial-gradient(circle at 100% 0%, #fff4ec, transparent 38%), #fff;} #blog .col-lg-8 .card.shadow-lg:hover {border-color: #ffd0b5 !important; box-shadow: var(--ba-sombra-alta) !important;} #blog .col-lg-8 .card.shadow-lg > .card-body {padding: 0 28px;} #blog .col-lg-8 .card .card-title.guiones-titulo {display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin-bottom: 16px !important; font-size: 1.22rem; line-height: 1.3; text-align: left;} #blog .col-lg-8 .card .card-title.guiones-titulo::before, #blog .col-lg-8 .card .card-title.guiones-titulo::after {display: none;} /* Icono del título en una insignia: SVG propio (/images/iconos-blog.svg), de línea y del color del texto */ #blog .col-lg-8 .ib-insignia {flex: 0 0 50px; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 15px; background: linear-gradient(135deg, #ff8a3d, var(--ba-naranja)); color: #fff; box-shadow: 0 10px 20px -10px rgba(255, 84, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .25);} #blog .col-lg-8 .ib-insignia--verde {background: linear-gradient(135deg, #2bc184, var(--ba-verde)); box-shadow: 0 10px 20px -10px rgba(22, 163, 106, .85), inset 0 1px 0 rgba(255, 255, 255, .25);} #blog .ib-icono {width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible;} /* Dentro de la tarjeta, el párrafo destacado y la lista más ligeros */ #blog .col-lg-8 .card p.display-2 {margin: 0 0 12px; font-size: 1.06rem !important; color: var(--ba-texto); font-weight: 400;} #blog .col-lg-8 .card ul.sinlista, #blog .col-lg-8 .card ul.ul-modern {padding-top: 4px !important; padding-bottom: 4px !important; margin-bottom: 8px;} #blog .col-lg-8 .card ul.sinlista > li, #blog .col-lg-8 .card ul.ul-modern > li {margin-bottom: 8px !important; padding: 10px 14px !important; border-color: transparent; background: var(--ba-fondo);} @media (max-width: 575px) { #blog .col-lg-8 .card.shadow-lg > .card-body {padding: 0 18px;} #blog .col-lg-8 .ib-insignia {flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px;} #blog .col-lg-8 .ib-insignia .ib-icono {width: 23px; height: 23px;} #blog .col-lg-8 .card .card-title.guiones-titulo {font-size: 1.1rem;} } #blog .col-lg-8 a.card:hover, #blog .col-lg-8 .card:has(> a.stretched-link):hover {box-shadow: var(--ba-sombra-alta) !important; transform: translateY(-2px);} #blog .col-lg-8 .card-img-top {border-radius: 0;} #blog .col-lg-8 .card-title {color: var(--ba-titulo) !important;} /* Avisos */ #blog .col-lg-8 .alert {position: relative; margin: 1.4rem 0; padding: 16px 20px 16px 22px; border: 1px solid transparent; border-left-width: 5px; border-radius: 14px; font-size: 1.02rem; line-height: 1.65;} #blog .col-lg-8 .alert-info {background: #eef6fd; border-color: #d4e7f8; border-left-color: var(--ba-azul-claro); color: var(--ba-texto);} #blog .col-lg-8 .alert-warning {background: #fff7ea; border-color: #fbe3bd; border-left-color: #f59e0b; color: var(--ba-texto);} #blog .col-lg-8 .alert p:last-child {margin-bottom: 0;} /* Imágenes dentro del texto */ #blog .col-lg-8 picture img, #blog .col-lg-8 .picture img, #blog .col-lg-8 img.fotoleft, #blog .col-lg-8 img.fotoright, #blog .col-lg-8 .fotoleft img, #blog .col-lg-8 .fotoright img {border-radius: 16px; max-width: 100%; height: auto;} #blog .col-lg-8 .card picture img, #blog .col-lg-8 .b-action img {border-radius: 0;} /* =================================================================================================== Tablas */ #blog .col-lg-8 .table-responsive, #blog .col-lg-8 [class*="table-responsive"] {margin: 1.4rem 0 2rem; border: 1px solid var(--ba-linea); border-radius: 18px; box-shadow: var(--ba-sombra); background: #fff; padding-bottom: 0 !important;} #blog .col-lg-8 .table {margin: 0; border-collapse: separate; border-spacing: 0; font-size: .95rem; color: var(--ba-texto); --bs-table-striped-bg: var(--ba-fondo-2); --bs-table-hover-bg: #eef4fb;} #blog .col-lg-8 :not([class*="table-responsive"]) > .table {border: 1px solid var(--ba-linea); border-radius: 18px; overflow: hidden; box-shadow: var(--ba-sombra);} #blog .col-lg-8 .table > :not(caption) > * > * {padding: 14px 16px; border-color: var(--ba-linea); border-width: 0 0 1px; vertical-align: middle; box-shadow: none;} #blog .col-lg-8 .table > tbody > tr:last-child > * {border-bottom-width: 0;} #blog .col-lg-8 .table thead th, #blog .col-lg-8 .table thead td {background: var(--ba-azul) !important; color: #fff !important; font-size: .9rem; font-weight: 800; letter-spacing: .01em; border-color: rgba(255, 255, 255, .12); white-space: normal;} #blog .col-lg-8 .table thead tr:first-child > :first-child {border-top-left-radius: 17px;} #blog .col-lg-8 .table thead tr:first-child > :last-child {border-top-right-radius: 17px;} #blog .col-lg-8 .table tbody td {font-size: .93rem; line-height: 1.5;} #blog .col-lg-8 .table tbody td p {font-size: inherit; margin-bottom: 0;} #blog .col-lg-8 .table tbody th {color: var(--ba-azulon); font-weight: 700; font-size: .92rem; text-align: left;} #blog .col-lg-8 .table-striped > tbody > tr:nth-of-type(odd) > * {--bs-table-bg-type: var(--ba-fondo-2); background-color: var(--ba-fondo-2);} #blog .col-lg-8 .table-striped > tbody > tr:nth-of-type(even) > * {background-color: #fff;} #blog .col-lg-8 .table tbody tr:hover > * {background-color: #eef4fb;} #blog .col-lg-8 .table-bordered > :not(caption) > * > * {border-width: 0 0 1px;} #blog .col-lg-8 .table svg.ib {font-size: 1.05rem;} #blog .col-lg-8 .table .small-text {margin: 4px 0 0; font-size: .8rem; line-height: 1.4; color: var(--ba-gris);} #blog .col-lg-8 .table .btn {border-radius: 30px; font-weight: 800; padding: 7px 16px;} /* Primera columna fija: fondo propio para que no se transparente al desplazar */ #blog .col-lg-8 .table tbody .sticky-col {background: #fff !important;} #blog .col-lg-8 .table-striped > tbody > tr:nth-of-type(odd) > .sticky-col {background: var(--ba-fondo-2) !important;} #blog .col-lg-8 .table thead .sticky-col {background: var(--ba-azul) !important;} /* =================================================================================================== Llamada a calcular (b-action) */ #blog .col-lg-8 .b-action {position: relative; overflow: hidden; border-radius: var(--ba-radio); background: radial-gradient(circle at 95% 0%, rgba(48, 152, 207, .4), transparent 45%), linear-gradient(120deg, var(--ba-azul), #12345f); box-shadow: var(--ba-sombra-alta);} #blog .col-lg-8 .b-action .container {padding-left: 24px; padding-right: 24px;} #blog .col-lg-8 .b-action img {max-width: 150px; height: auto; filter: brightness(0) invert(1); opacity: .95;} #blog .col-lg-8 .b-action h3, #blog .col-lg-8 .b-action .azul {margin: 0 !important; color: #fff !important; font-size: 1.2rem; line-height: 1.35;} #blog .col-lg-8 .b-action .btn {display: inline-flex; align-items: center; gap: 4px; padding: 6px 22px 6px 8px; border: 0; border-radius: 40px; background: var(--ba-naranja); color: #fff; font-weight: 800; letter-spacing: .03em; box-shadow: 0 12px 24px -10px rgba(255, 84, 0, .9); transition: background-color .2s, transform .2s;} #blog .col-lg-8 .b-action .btn:hover {background: var(--ba-naranja-osc); transform: translateY(-1px);} #blog .col-lg-8 .b-action .calculator {width: 38px; height: 38px; margin: 0 6px 0 0;} /* =================================================================================================== Preguntas frecuentes */ #blog .col-lg-8 .accordion {--bs-accordion-border-color: transparent; display: grid; gap: 10px;} #blog .col-lg-8 .accordion-item {border: 1px solid var(--ba-linea) !important; border-radius: 16px !important; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(12, 26, 47, .04);} #blog .col-lg-8 .accordion-header {border: 0 !important; margin: 0;} #blog .col-lg-8 .accordion-button {padding: 18px 22px; background: #fff !important; color: var(--ba-azulon) !important; font-size: 1.04rem; font-weight: 700; line-height: 1.4; box-shadow: none !important; border-radius: 0 !important;} #blog .col-lg-8 .accordion-button:not(.collapsed) {background: var(--ba-fondo) !important; color: var(--ba-azul) !important;} #blog .col-lg-8 .accordion-button:focus-visible {outline: 3px solid rgba(48, 152, 207, .35); outline-offset: -3px;} #blog .col-lg-8 .accordion-button :is(i,svg.ib) {color: var(--ba-naranja); margin-right: 12px !important;} #blog .col-lg-8 .accordion-body {padding: 6px 22px 20px; background: var(--ba-fondo); color: var(--ba-texto);} #blog .col-lg-8 .accordion-body p:last-child {margin-bottom: 0;} #blog .col-lg-8 .preguntas_frecuentes .accordion-header {border-bottom: 0;} /* =================================================================================================== Promociones */ #blog .col-lg-8 .promo_temporal {border-radius: var(--ba-radio); background: var(--ba-fondo) !important;} /* =================================================================================================== Móvil */ @media (max-width: 767px) { #blog .col-lg-8 p, #blog .col-lg-8 ul li, #blog .col-lg-8 ol li {font-size: 1rem;} #blog .col-lg-8 .banner-blog {padding: 24px 20px; text-align: center;} #blog .col-lg-8 .banner-blog .banner-buttons {flex-direction: column;} #blog .col-lg-8 .banner-blog .btn {width: 100%;} #blog .col-lg-8 h2.titulo_blog, #blog .col-lg-8 > h2:not(.accordion-header) {margin-top: 40px; padding-left: 16px;} #blog .col-lg-8 .row.border {padding-left: 4px; padding-right: 4px;} #blog .col-lg-8 .b-action .row > div {margin-bottom: 12px;} #blog .col-lg-8 .table > :not(caption) > * > * {padding: 11px 10px;} #blog .col-lg-8 .accordion-button {padding: 16px 18px; font-size: 1rem;} } /* =================================================================================================== Índice del artículo */ #blog #tocContainer {max-width: 100%; margin: 34px 0 10px; padding: 22px 24px 18px; border: 1px solid var(--ba-linea); border-radius: var(--ba-radio); background: #fff; box-shadow: var(--ba-sombra);} #blog #tocContainer .guiones-titulo {justify-content: flex-start; gap: 10px; margin: 0 0 12px; font-size: 1.15rem; text-align: left;} #blog #tocContainer .guiones-titulo::before {flex: 0 0 auto; width: 5px; max-width: none; height: 22px; border-radius: 5px; background: linear-gradient(var(--ba-naranja), #ff9a5c);} #blog #tocContainer .guiones-titulo::after {display: none;} #blog #tableOfContents {max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; list-style: none; counter-reset: baToc;} #blog #tableOfContents .toc-list {margin: 0 !important; padding: 0; list-style: none;} #blog #tableOfContents .toc-list li {margin: 0 !important; padding: 0 !important; font-size: 1rem !important; counter-increment: baToc; border-top: 1px solid #eef2f7;} #blog #tableOfContents .toc-list:first-child li:first-child {border-top: 0;} #blog #tableOfContents .toc-list li::before {content: none !important;} #blog #tableOfContents .toc-list a {display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 6px; border: 0; border-radius: 12px; background: none; box-shadow: none; color: var(--ba-azul); font-size: .98rem; font-weight: 600; line-height: 1.4; text-decoration: none; transform: none; transition: background-color .2s, color .2s;} #blog #tableOfContents .toc-list a::before {content: counter(baToc, decimal-leading-zero); position: static; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #fff0e6; box-shadow: none; transform: none; color: var(--ba-naranja-osc); font-size: .75rem; font-weight: 800; line-height: 30px; text-align: center; transition: background-color .2s, color .2s;} #blog #tableOfContents .toc-list a:hover {background: var(--ba-fondo); color: var(--ba-azulon); transform: none; box-shadow: none; text-decoration: none;} #blog #tableOfContents .toc-list a.is-activo {background: #eef4fb; color: var(--ba-azulon);} #blog #tableOfContents .toc-list a.is-activo::before {background: var(--ba-naranja); color: #fff;} #blog #tableOfContents .toc-toggle-btn {display: flex; gap: 8px; width: auto; min-width: 0; margin: 12px auto 0; padding: 9px 18px; border: 1px solid var(--ba-linea); border-radius: 30px; background: var(--ba-fondo); box-shadow: none; color: var(--ba-azul); font-size: .9rem; font-weight: 700;} #blog #tableOfContents .toc-toggle-btn:hover {background: var(--ba-azul); border-color: var(--ba-azul); color: #fff; transform: none; box-shadow: none;} /* =================================================================================================== Lateral (aside) */ @media (min-width: 992px) { #blog #recentArticlesAside {position: sticky; top: 96px;} } /* Entradas recientes */ #blog #recentArticlesAside .bg-light.p-4 {padding: 22px 20px 14px !important; border: 1px solid var(--ba-linea); border-radius: var(--ba-radio); background: #fff !important; box-shadow: var(--ba-sombra);} #blog #recentArticlesAside .guiones-titulo {justify-content: flex-start; gap: 10px; margin: 0 0 8px; font-size: 1.15rem; line-height: 1.2; text-align: left; color: var(--ba-titulo) !important;} #blog #recentArticlesAside .guiones-titulo::before {content: ""; flex: 0 0 auto; width: 5px; max-width: none; height: 22px; border-radius: 5px; background: linear-gradient(var(--ba-naranja), #ff9a5c);} #blog #recentArticlesAside .guiones-titulo::after {display: none;} #blog #recentArticlesAside #recentArticles {margin: 0; padding: 0; border-radius: 0; background: none; list-style: none;} #blog #recentArticlesAside #recentArticles li {margin: 0; border-top: 1px solid #eef2f7; font-size: 1rem !important;} #blog #recentArticlesAside #recentArticles li:first-child {border-top: 0;} #blog #recentArticlesAside #recentArticles a {display: flex; align-items: center; gap: 12px; padding: 12px 6px; border: 0; border-radius: 14px; background: none; box-shadow: none; color: var(--ba-titulo); font-size: .95rem; font-weight: 700; line-height: 1.35; text-decoration: none; transform: none; transition: background-color .2s;} #blog #recentArticlesAside #recentArticles a::before {content: none;} #blog #recentArticlesAside #recentArticles a:hover {background: var(--ba-fondo); transform: none; box-shadow: none;} #blog #recentArticlesAside .ra-foto {flex: 0 0 76px; width: 76px; height: 60px; border-radius: 12px; object-fit: cover; background: var(--ba-fondo);} #blog #recentArticlesAside .ra-texto {display: flex; flex-direction: column; gap: 3px; min-width: 0;} #blog #recentArticlesAside .ra-categoria {align-self: flex-start; padding: 2px 9px; border-radius: 20px; background: #fff0e6; color: var(--ba-naranja-osc); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;} #blog #recentArticlesAside .ra-titulo {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;} #blog #recentArticlesAside a:hover .ra-titulo {color: var(--ba-naranja-osc);} /* Banner lateral (Contrata ahora…) */ #blog #recentArticlesAside .card-banner {position: relative; overflow: hidden; margin-top: 20px !important; padding: 30px 22px 24px !important; border: 0; border-radius: var(--ba-radio); background: radial-gradient(circle at 100% 0%, rgba(48, 152, 207, .5), transparent 50%), linear-gradient(150deg, var(--ba-azul), #12345f 60%, var(--ba-azulon)) !important; box-shadow: var(--ba-sombra-alta) !important;} #blog #recentArticlesAside .card-banner::after {content: ""; position: absolute; left: -70px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; border: 34px solid rgba(255, 255, 255, .05); pointer-events: none;} #blog #recentArticlesAside .card-banner img {position: relative; width: 52%; margin: 0 auto 6px;} #blog #recentArticlesAside .card-banner .card-body {position: relative; z-index: 1; padding: 0;} #blog #recentArticlesAside .card-banner h3 {margin: 12px 0 22px !important; color: #fff !important; font-size: 1.3rem; font-weight: 800; line-height: 1.3;} #blog #recentArticlesAside .card-banner .btn {display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 54px; padding: 6px 20px 6px 8px; border: 0; border-radius: 40px; background: var(--ba-naranja); color: #fff; font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; box-shadow: 0 12px 24px -10px rgba(255, 84, 0, .9); transition: background-color .2s, transform .2s;} #blog #recentArticlesAside .card-banner .btn:hover {background: var(--ba-naranja-osc); transform: translateY(-1px);} #blog #recentArticlesAside .card-banner .calculator {width: 40px; height: 40px; margin: 0 8px 0 0;} @media (max-width: 991px) { #blog #recentArticlesAside .guiones-titulo {font-size: 1.15rem; margin-bottom: 8px;} #blog #recentArticlesAside #recentArticles {padding: 0;} #blog #recentArticlesAside #recentArticles a {padding: 12px 6px; font-size: .95rem;} } @media (max-width: 575px) { #blog #tocContainer {padding: 18px 16px 14px;} } #blog #tableOfContents .toc-toggle-btn[aria-expanded="true"] .toc-toggle-arrow {transform: none;} /* el texto ya cambia a ▲ */ /* Iconos SVG propios (sustituyen a Font Awesome): /images/iconos-blog.svg */ .ib{display:inline-block;width:1em;height:1em;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;flex-shrink:0} svg.ib.calculator{background-color:#fff;color:#ff6d25;width:45px;height:45px;padding:11px;margin:0 10px;border-radius:50%;vertical-align:middle} .preguntas_frecuentes svg.ib{margin-right:20px} /* =================================================================================================================== MEJORAS DEL 13/10/2026 (solo aspecto, sin tocar textos ni HTML) Tablas alineadas a la izquierda y legibles en movil, listas con check mas ligeras, compartir y anterior/siguiente con el estilo de la web nueva. =================================================================================================================== */ /* ---------- Tablas: texto a la izquierda (muchas traen text-center en el HTML) y arriba; en movil, columnas con un ancho minimo para que la tabla se desplace en horizontal en lugar de partir cada celda en palabras sueltas ---------- */ #blog .col-lg-8 .table > :not(caption) > * > * {text-align: left !important;} #blog .col-lg-8 .table tbody > tr > * {vertical-align: top;} #blog .col-lg-8 .table thead > tr > * {vertical-align: bottom;} #blog .col-lg-8 .table tbody > tr > td:first-child {font-weight: 600; color: var(--ba-azulon);} @media (max-width: 767px) { #blog .col-lg-8 [class*="table-responsive"] .table > :not(caption) > * > * {min-width: 150px;} #blog .col-lg-8 [class*="table-responsive"] .table > :not(caption) > * > *:first-child {min-width: 120px;} } /* ---------- Listas con check (.ul-modern y .sinlista): una linea separadora en lugar de una caja por cada punto, y el texto alineado con sangria cuando ocupa mas de una linea ---------- */ #blog .col-lg-8 :is(ul.ul-modern, ul.sinlista) > li, #blog .col-lg-8 .card :is(ul.ul-modern, ul.sinlista) > li { margin: 0 !important; padding: 11px 4px !important; border: 0; border-bottom: 1px solid var(--ba-linea); border-radius: 0; background: none; box-shadow: none; } #blog .col-lg-8 :is(ul.ul-modern, ul.sinlista) > li:last-child, #blog .col-lg-8 .card :is(ul.ul-modern, ul.sinlista) > li:last-child {border-bottom: 0;} #blog .col-lg-8 :is(ul.ul-modern, ul.sinlista) > li:has(> :is(i, svg.ib):first-child) {position: relative; padding-left: 32px !important;} #blog .col-lg-8 :is(ul.ul-modern, ul.sinlista) > li > :is(i, svg.ib):first-child {position: absolute; left: 4px; top: 15px; margin: 0;} #blog .col-lg-8 :is(ul.ul-modern, ul.sinlista) {margin-bottom: 1.4rem;} /* ---------- Compartir (modulos/redes-sociales.php) ---------- */ #blog .col-lg-8 .redesSociales { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 36px 0 8px; padding: 16px 20px; border: 1px solid var(--ba-linea); border-radius: 16px; background: var(--ba-fondo); } #blog .col-lg-8 .redesSociales p {margin: 0; color: var(--ba-titulo); font-weight: 700;} #blog .col-lg-8 .redesSociales .social-share {display: flex; gap: 8px;} #blog .col-lg-8 .redesSociales .social-share a {display: inline-flex; border-radius: 10px; overflow: hidden; transition: transform .2s, box-shadow .2s;} #blog .col-lg-8 .redesSociales .social-share a:hover {transform: translateY(-2px); box-shadow: var(--ba-sombra);} #blog .col-lg-8 .redesSociales .social-share img {display: block; height: 34px; width: auto;} /* ---------- Articulo anterior / siguiente (los genera /js/entradas-recientes.js) ---------- */ #blog .col-lg-8 div:has(> #previousArticle) {display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px;} #blog .col-lg-8 #previousArticle:empty, #blog .col-lg-8 #nextArticle:empty {display: none;} #blog .col-lg-8 #nextArticle:only-child {grid-column: 2;} #blog .col-lg-8 #previousArticle a, #blog .col-lg-8 #nextArticle a { gap: 14px; height: 100%; padding: 14px; border: 1px solid var(--ba-linea); border-radius: 16px; background: #fff; box-shadow: var(--ba-sombra); color: var(--ba-titulo); font-weight: 400; text-decoration: none; transition: border-color .2s, transform .2s; } #blog .col-lg-8 #previousArticle a:hover, #blog .col-lg-8 #nextArticle a:hover {border-color: var(--ba-naranja); transform: translateY(-2px); color: var(--ba-titulo);} #blog .col-lg-8 #previousArticle img, #blog .col-lg-8 #nextArticle img {flex: 0 0 72px; width: 72px !important; height: 72px !important; margin: 0 !important; padding: 0; border: 0; border-radius: 12px; object-fit: cover;} #blog .col-lg-8 #previousArticle small, #blog .col-lg-8 #nextArticle small {display: block; margin: 0 0 3px; color: var(--ba-naranja); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;} #blog .col-lg-8 #previousArticle h6, #blog .col-lg-8 #nextArticle h6 {margin: 0; color: var(--ba-titulo); font-size: .98rem; font-weight: 700; line-height: 1.35;} @media (max-width: 575px) { #blog .col-lg-8 div:has(> #previousArticle) {grid-template-columns: 1fr;} #blog .col-lg-8 #nextArticle:only-child {grid-column: auto;} } /* ---------- Hueco de la promocion (modulos/promociones_cia.php): sin promocion vigente queda una caja gris vacia ---------- */ #blog .promo_temporal:not(:has(*)) {display: none;} /* Numeros de pasos que antes eran emojis de teclas numeradas */ #blog .ib-num {display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; margin-right: 4px; border-radius: 50%; background: var(--ba-naranja, #ff5400); color: #fff; font-size: .85em; font-weight: 700; line-height: 1; vertical-align: .05em;} /* Miga de pan encima del titulo (13/10/2026): discreta, alineada con el texto y en una sola linea; el ultimo elemento (el titulo, que ya se lee debajo) se corta con puntos suspensivos si no cabe */ #blog .col-lg-8 > section.container:has(> nav > .breadcrumb) {padding: 0; max-width: none;} #blog .col-lg-8 .breadcrumb {display: flex; flex-wrap: nowrap; align-items: baseline; margin: 0 0 14px; padding: 0; border-radius: 0; background: none; font-size: .85rem; line-height: 1.4; color: #64748b; min-width: 0;} #blog .col-lg-8 .breadcrumb-item {flex: 0 0 auto; white-space: nowrap;} #blog .col-lg-8 .breadcrumb-item:last-child {flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;} #blog .col-lg-8 .breadcrumb-item + .breadcrumb-item {padding-left: .45rem;} #blog .col-lg-8 .breadcrumb-item + .breadcrumb-item::before {padding-right: .45rem; color: #94a3b8;} /* ------ Botones antiguos unificados (13/10/2026) ------ Los botones de Bootstrap que quedaban en los articulos (btn-primary, btn-danger, btn-warning, btn-success, btn-outline-primary y .btn sin color) toman los dos estilos del blog: accion en naranja y secundario con borde azul. No afecta al banner del articulo (.banner-blog), a la caja de llamada (.b-action), al indice ni a los acordeones. */ #blog .col-lg-8 .btn:where(:not(.banner-blog *, .b-action *, .accordion-button, .toc-toggle-btn)) {display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 22px; border: 2px solid var(--ba-azul); border-radius: 40px; background: #fff; background-image: none; color: var(--ba-azul); font-weight: 800; font-size: .95rem; line-height: 1.25; text-decoration: none !important; white-space: normal; box-shadow: none; transition: background-color .2s, border-color .2s, color .2s, transform .2s;} #blog .col-lg-8 .btn:where(:not(.banner-blog *, .b-action *, .accordion-button, .toc-toggle-btn)):hover {background: var(--ba-azul); color: #fff; transform: translateY(-1px);} #blog .col-lg-8 :is(.btn-primary, .btn-danger, .btn-warning, .btn-success):where(:not(.banner-blog *, .b-action *)) {border-color: var(--ba-naranja); background: var(--ba-naranja); color: #fff !important; box-shadow: 0 12px 24px -12px rgba(255, 84, 0, .8);} #blog .col-lg-8 :is(.btn-primary, .btn-danger, .btn-warning, .btn-success):where(:not(.banner-blog *, .b-action *)):hover {border-color: var(--ba-naranja-osc); background: var(--ba-naranja-osc); color: #fff !important;} #blog .col-lg-8 .btn-lg:where(:not(.banner-blog *, .b-action *)) {min-height: 50px; font-size: 1rem;} /* Icono de calculadora dentro de los botones: circulo pequeno, blanco en los naranjas y ambar en los de borde */ #blog .col-lg-8 .btn:where(:not(.banner-blog *, .b-action *)) svg.ib.calculator {flex: 0 0 auto; width: 30px; height: 30px; margin: -4px 0 -4px -12px; padding: 7px; background: #fff7f2; color: var(--ba-naranja);} #blog .col-lg-8 :is(.btn-primary, .btn-danger, .btn-warning, .btn-success):where(:not(.banner-blog *, .b-action *)) svg.ib.calculator {background: #fff;} /* Cajas de producto antiguas (seguros con y sin copago): botones a lo ancho; «COPAGO BAJO/ALTO» es una etiqueta, no un boton */ #blog .col-lg-8 .d-grid > a {display: block; text-decoration: none !important;} #blog .col-lg-8 .d-grid > a > .btn {width: 100%; margin: 0 !important; padding-left: 12px; padding-right: 12px; white-space: nowrap;} #blog .col-lg-8 .caja-producto .btn-outline-warning {min-height: 0; margin: 0 auto 16px; padding: 5px 14px; border: 0; border-radius: 30px; background: #fff1e8; color: var(--ba-naranja-osc); font-size: .78rem; letter-spacing: .05em; box-shadow: none; cursor: default; pointer-events: none;} #blog .col-lg-8 .caja-producto .d-grid {margin-top: 14px; padding: 0 16px 16px; gap: 10px !important;} /* Fecha de actualizacion junto a la de publicacion (13/10/2026) */ #blog .col-lg-8 > p.text-muted {flex-wrap: wrap; row-gap: 2px;} #blog .col-lg-8 > p.text-muted .fecha-actualizado {display: inline; color: var(--ba-texto);} #blog .col-lg-8 > p.text-muted .fecha-actualizado::before {content: "·"; margin-right: 8px; color: var(--ba-gris);} /* Firma del articulo en la linea de la fecha (13/10/2026) */ #blog .col-lg-8 > p.text-muted .fecha-autor {color: var(--ba-titulo); font-weight: 700;} #blog .col-lg-8 > p.text-muted .fecha-autor::after {content: "·"; margin-left: 8px; color: var(--ba-gris); font-weight: 600;}