/**
 * ESTILO NUEVO DE LOS ARTÍCULOS DEL BLOG (desde el 26/10/2026, artículo a artículo)
 * ---------------------------------------------------------------------------------------------------------------
 * Solo aspecto: no cambia ningún texto. Se carga en los artículos que ya tienen el estilo nuevo (<main class="blog-v2">
 * y $blogEstiloV2 = true antes de los CTA), encima de css/blog-articulo.css, del que toma los colores (--ba-*).
 * Piezas: resumen «Lo esencial», índice pintado en el servidor, fotos dentro del texto, CTA nuevos (modulos/blog-cta.php:
 * blogCtaV2 y blogCtaCompacto) y banner lateral.
 */

/* ============================================================================ Resumen «Lo esencial en 30 segundos» */
#blog .blog-v2 .bv-esencial {position: relative; margin: 1.6rem 0 1.8rem; border: 0; border-radius: var(--ba-radio); background: linear-gradient(135deg, #fff7f1 0%, #fff 55%, #eef5fc 100%); box-shadow: var(--ba-sombra); overflow: hidden;}
#blog .blog-v2 .bv-esencial::before {content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(var(--ba-naranja), #ff9a5c);}
#blog .blog-v2 .bv-esencial .table {--bs-table-bg: transparent; background: transparent;}
#blog .blog-v2 .bv-esencial .table thead th {padding: 20px 24px 6px 28px; background: transparent !important; color: var(--ba-naranja-osc) !important; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; border: 0;}
#blog .blog-v2 .bv-esencial .table > tbody > tr > * {padding: 10px 24px 10px 28px; background: transparent !important; border: 0; font-weight: 400; color: var(--ba-texto); font-size: 1rem; line-height: 1.6;}
#blog .blog-v2 .bv-esencial .table > tbody > tr:last-child > * {padding-bottom: 22px;}
#blog .blog-v2 .bv-esencial .table tbody tr:hover > * {background: transparent !important;}
#blog .blog-v2 .bv-esencial svg.ib {font-size: 1.15rem; vertical-align: -.2em;}

/* ============================================================================ Índice pintado en el servidor */
#blog .blog-v2 #tocContainer[data-servidor] #tableOfContents {counter-reset: baToc;}   /* una sola vez: la lista oculta sigue en el 04 */
#blog .blog-v2 #tocContainer[data-servidor] #tableOfContents .toc-hidden-list[hidden] {display: none !important;}
#blog .blog-v2 :is(h2[id], .heading-section) {scroll-margin-top: 110px;}

/* ============================================================================ Fotos dentro del texto */
#blog .blog-v2 .bv-foto {margin: 6px 0 26px;}
#blog .blog-v2 .bv-foto img {display: block; width: 100%; height: auto; aspect-ratio: 930 / 540; object-fit: cover; border-radius: var(--ba-radio) !important; box-shadow: var(--ba-sombra-alta);}
@media (max-width: 767px) {
	#blog .blog-v2 .bv-foto img {aspect-ratio: 575 / 400;}
}

/* ============================================================================ Tablas comparativas */
#blog .blog-v2 .table tbody th[scope="row"] {background-clip: padding-box;}
#blog .blog-v2 .bv-tabla-producto thead th:not(:first-child) {background: linear-gradient(160deg, var(--ba-azul), #12345f) !important;}
#blog .blog-v2 .bv-tabla-producto thead th:first-child {background: var(--ba-azulon) !important;}

/* ============================================================================ CTA nuevos (blogCtaV2) */
#blog .blog-v2 .bcv2 {position: relative; display: flex; gap: 22px; align-items: center; margin: 2.6rem 0; padding: 28px 30px; border-radius: 24px; overflow: hidden; color: #fff;
	background: radial-gradient(circle at 100% 0%, rgba(48, 152, 207, .55), transparent 45%), radial-gradient(circle at 0% 120%, rgba(255, 84, 0, .28), transparent 40%), linear-gradient(135deg, var(--ba-azul) 0%, #12345f 55%, var(--ba-azulon) 100%);
	box-shadow: 0 2px 4px rgba(12, 26, 47, .06), 0 26px 50px -18px rgba(12, 26, 47, .55);}
#blog .blog-v2 .bcv2::after {content: ""; position: absolute; right: -70px; bottom: -110px; width: 260px; height: 260px; border-radius: 50%; border: 40px solid rgba(255, 255, 255, .05); pointer-events: none;}
#blog .blog-v2 .bcv2 > * {position: relative; z-index: 1;}
#blog .blog-v2 .bcv2-icono {flex: 0 0 76px; display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(135deg, #ff8a3d, var(--ba-naranja)); box-shadow: 0 14px 28px -12px rgba(255, 84, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .3);}
#blog .blog-v2 .bcv2-icono svg.ib {width: 36px; height: 36px; color: #fff;}
#blog .blog-v2 .bcv2-cuerpo {flex: 1 1 auto; min-width: 0;}
#blog .blog-v2 .bcv2 .bcv2-titulo {margin: 0 0 8px; color: #fff; font-size: clamp(1.25rem, 2.3vw, 1.55rem); font-weight: 800; line-height: 1.25; letter-spacing: -.01em;}
#blog .blog-v2 .bcv2 .bcv2-frase {margin: 0 0 18px; color: rgba(255, 255, 255, .86); font-size: 1rem; line-height: 1.6;}
#blog .blog-v2 .bcv2-acciones {display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;}
#blog .blog-v2 a.bcv2-boton {display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 40px; background: var(--ba-naranja); color: #fff !important; font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; text-decoration: none !important; box-shadow: 0 16px 30px -12px rgba(255, 84, 0, .95); transition: background-color .2s, transform .2s, box-shadow .2s;}
#blog .blog-v2 a.bcv2-boton:hover {background: var(--ba-naranja-osc); transform: translateY(-2px); box-shadow: 0 20px 34px -12px rgba(255, 84, 0, 1);}
#blog .blog-v2 a.bcv2-boton svg.ib {width: 1.15em; height: 1.15em; transition: transform .2s;}
#blog .blog-v2 a.bcv2-boton:hover svg.ib {transform: translateX(3px);}
#blog .blog-v2 .bcv2 .bcv2-tel {display: inline-flex; align-items: center; gap: 8px; margin: 0; color: rgba(255, 255, 255, .8); font-size: .95rem;}
#blog .blog-v2 .bcv2 .bcv2-tel svg.ib {color: #ffb98f;}
#blog .blog-v2 .bcv2 .bcv2-tel a {color: #fff !important; font-weight: 800; text-decoration: none !important; border-bottom: 2px solid rgba(255, 255, 255, .35);}
#blog .blog-v2 .bcv2 .bcv2-tel a:hover {border-bottom-color: #fff;}

/* CTA final con la foto del artículo */
#blog .blog-v2 .bcv2--foto {align-items: stretch; padding: 0;}
#blog .blog-v2 .bcv2--foto .bcv2-foto {flex: 0 0 40%; min-height: 260px;}
#blog .blog-v2 .bcv2--foto .bcv2-foto img {width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; box-shadow: none;}
#blog .blog-v2 .bcv2--foto .bcv2-foto::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(18, 52, 95, .95));}
#blog .blog-v2 .bcv2--foto .bcv2-cuerpo {padding: 30px 30px 30px 8px; align-self: center;}

@media (max-width: 767px) {
	#blog .blog-v2 .bcv2 {flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 20px; text-align: left;}
	#blog .blog-v2 .bcv2-icono {flex-basis: 60px; width: 60px; height: 60px; border-radius: 18px;}
	#blog .blog-v2 .bcv2-icono svg.ib {width: 30px; height: 30px;}
	#blog .blog-v2 .bcv2-acciones {flex-direction: column; align-items: stretch; width: 100%;}
	#blog .blog-v2 a.bcv2-boton {width: 100%;}
	#blog .blog-v2 .bcv2 .bcv2-tel {justify-content: center;}
	#blog .blog-v2 .bcv2--foto {padding: 0; gap: 0;}
	#blog .blog-v2 .bcv2--foto .bcv2-foto {flex-basis: auto; width: 100%; min-height: 0; height: 190px;}
	#blog .blog-v2 .bcv2--foto .bcv2-foto::after {background: linear-gradient(180deg, transparent 45%, rgba(18, 52, 95, .95));}
	#blog .blog-v2 .bcv2--foto .bcv2-cuerpo {padding: 4px 20px 24px; width: 100%;}
}

/* ============================================================================ Franja compacta de cálculo (blogCtaCompacto) */
#blog .blog-v2 .bcv2-compacto {display: flex; align-items: center; gap: 16px; margin: 0 0 1.8rem; padding: 16px 18px 16px 16px; border: 1px solid #ffd9c2; border-radius: 18px; background: linear-gradient(90deg, #fff4ec, #fff 70%); box-shadow: var(--ba-sombra);}
#blog .blog-v2 .bcv2-compacto-icono {flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ba-azul); color: #fff;}
#blog .blog-v2 .bcv2-compacto-icono svg.ib {width: 24px; height: 24px;}
#blog .blog-v2 .bcv2-compacto .bcv2-compacto-titulo {flex: 1 1 auto; margin: 0; color: var(--ba-titulo); font-size: 1.12rem; font-weight: 800; line-height: 1.3;}
#blog .blog-v2 .bcv2-compacto a.bcv2-boton {min-height: 48px; padding: 0 22px; font-size: 1rem; letter-spacing: .04em;}
@media (max-width: 575px) {
	#blog .blog-v2 .bcv2-compacto {flex-wrap: wrap;}
	#blog .blog-v2 .bcv2-compacto a.bcv2-boton {width: 100%;}
}

/* ============================================================================ Banner lateral */
#blog .blog-v2 #recentArticlesAside .card-banner {padding: 32px 22px 26px !important; background: radial-gradient(circle at 100% 0%, rgba(48, 152, 207, .55), transparent 50%), radial-gradient(circle at 0% 100%, rgba(255, 84, 0, .3), transparent 45%), linear-gradient(150deg, var(--ba-azul), #12345f 60%, var(--ba-azulon)) !important;}
#blog .blog-v2 #recentArticlesAside .card-banner .btn {min-height: 58px; box-shadow: 0 16px 30px -12px rgba(255, 84, 0, 1); animation: bv-latido 2.8s ease-in-out 1.5s 3;}
@keyframes bv-latido {0%, 100% {transform: scale(1);} 50% {transform: scale(1.04);}}
@media (prefers-reduced-motion: reduce) {
	#blog .blog-v2 #recentArticlesAside .card-banner .btn {animation: none;}
}

/* Banner lateral v2 (modulos/blog-banner-lateral.php, 26/10/2026): icono del producto, precio «desde», tres ventajas, botón y teléfono.
   En escritorio el lateral deja de ir fijo entero y solo el banner se queda fijo al bajar, para que siempre se vea completo. */
@media (min-width: 992px) {
	#blog .blog-v2 #recentArticlesAside:has(.bv-lateral) {position: static; height: 100%;}
	#blog .blog-v2 #recentArticlesAside .bv-lateral {position: sticky; top: 104px;}
}
#blog .blog-v2 .bv-lateral {position: relative; overflow: hidden; margin-top: 20px; padding: 24px 22px 22px; border-radius: var(--ba-radio); color: #fff; isolation: isolate;
	background: radial-gradient(circle at 100% 0%, rgba(48, 152, 207, .6), transparent 52%), radial-gradient(circle at 0% 100%, rgba(255, 84, 0, .32), transparent 48%), linear-gradient(155deg, var(--ba-azul) 0%, #12345f 58%, var(--ba-azulon) 100%);
	box-shadow: 0 26px 48px -26px rgba(12, 26, 47, .85);}
#blog .blog-v2 .bv-lateral::after {content: ""; position: absolute; z-index: -1; right: -60px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; border: 30px solid rgba(255, 255, 255, .05);}
#blog .blog-v2 .bvl-cab {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px;}
#blog .blog-v2 .bvl-cab img {width: 112px; height: auto;}
#blog .blog-v2 .bvl-icono {display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #ff8a3d, var(--ba-naranja)); box-shadow: 0 12px 24px -10px rgba(255, 84, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .3); transform: rotate(-6deg);}
#blog .blog-v2 .bvl-icono svg.ib {width: 28px; height: 28px; margin: 0; color: #fff;}
#blog .blog-v2 .bvl-titulo {margin: 0 0 6px; color: #fff; font-size: 1.4rem; font-weight: 800; line-height: 1.2;}
#blog .blog-v2 .bvl-frase {margin: 0 0 16px; color: #c9dbef; font-size: .92rem; line-height: 1.5;}
#blog .blog-v2 .bvl-precio {display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); line-height: 1.2;}
#blog .blog-v2 .bvl-precio small {color: #9fc0e4; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;}
#blog .blog-v2 .bvl-precio strong {color: #fff; font-size: 1.7rem; font-weight: 900; letter-spacing: -.01em;}
#blog .blog-v2 .bvl-precio span {color: #9fc0e4; font-size: .8rem;}
#blog .blog-v2 .bvl-ventajas {display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none;}
#blog .blog-v2 .bvl-ventajas li {display: flex; align-items: center; gap: 9px; margin: 0; padding: 0; color: #e6eef8; font-size: .92rem !important; line-height: 1.35;}
#blog .blog-v2 .bvl-ventajas svg.ib {flex: 0 0 20px; width: 20px; height: 20px; margin: 0; padding: 4px; border-radius: 50%; background: rgba(22, 163, 106, .28); color: #5fe0a6;}
#blog .blog-v2 a.bvl-boton {display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 20px; border-radius: 40px; background: var(--ba-naranja); color: #fff !important; font-size: 1.05rem; font-weight: 900; letter-spacing: .06em; text-decoration: none !important; box-shadow: 0 16px 30px -12px rgba(255, 84, 0, 1); transition: background-color .2s, transform .2s; animation: bv-latido 2.8s ease-in-out 1.5s 3;}
#blog .blog-v2 a.bvl-boton:hover {background: var(--ba-naranja-osc); transform: translateY(-2px); animation: none;}
#blog .blog-v2 a.bvl-boton svg.ib {width: 22px; height: 22px; margin: 0; color: #fff;}
#blog .blog-v2 a.bvl-boton2 {display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 10px; padding: 0 20px; border: 2px solid rgba(255, 255, 255, .75); border-radius: 40px; color: #fff !important; font-size: .95rem; font-weight: 800; letter-spacing: .06em; text-decoration: none !important; transition: background-color .2s;}
#blog .blog-v2 a.bvl-boton2:hover {background: rgba(255, 255, 255, .12);}
#blog .blog-v2 .bvl-tel {display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: #b9cfe8; font-size: .86rem;}
#blog .blog-v2 .bvl-tel svg.ib {width: 15px; height: 15px; margin: 0; color: #b9cfe8;}
#blog .blog-v2 .bvl-tel a {color: #fff !important; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px;}
@media (prefers-reduced-motion: reduce) {
	#blog .blog-v2 a.bvl-boton {animation: none; transition: none;}
}

/* Tablas: sin la franja blanca que dejaba el py-3 de Bootstrap encima de la cabecera */
#blog .blog-v2 .table-responsive {padding-top: 0 !important;}

/* ============================================================================ Listas por tipo de contenido (26/10/2026)
   El :not(#_) solo sube la especificidad para ganar a las reglas generales de listas de blog-articulo.css.
   .bv-pasos (LIS-02): pasos que se siguen en orden. .bv-no (LIS-04): lo que no cubre. .bv-consejo (LIS-05): consejos según el caso. */
#blog .col-lg-8 ol.bv-pasos:not(#_):not(#__) {counter-reset: bvPaso; margin: 0 0 1.5rem; padding: 0; list-style: none;}
#blog .col-lg-8 ol.bv-pasos:not(#_):not(#__) > li {counter-increment: bvPaso; position: relative; min-height: 36px; margin: 0; padding: 4px 0 18px 54px;}
#blog .col-lg-8 ol.bv-pasos:not(#_):not(#__) > li::before {content: counter(bvPaso); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--ba-naranja); color: #fff; font-size: 1rem; font-weight: 800; line-height: 36px; text-align: center; box-shadow: 0 8px 16px -8px rgba(255, 84, 0, .9);}
#blog .col-lg-8 ol.bv-pasos:not(#_):not(#__) > li:not(:last-child)::after {content: ""; position: absolute; left: 17px; top: 40px; bottom: 2px; width: 2px; border-radius: 2px; background: linear-gradient(var(--ba-naranja), #ffd1b8);}
#blog .col-lg-8 ol.bv-pasos:not(#_):not(#__) > li:last-child {padding-bottom: 4px;}

#blog .col-lg-8 ul.bv-no:not(#_):not(#__):not(#___) {margin: 0 0 1.5rem; padding: 14px 20px; border: 1px solid #f7cfcb; border-radius: 16px; background: #fdecea; list-style: none;}
#blog .col-lg-8 ul.bv-no:not(#_):not(#__):not(#___) > li {position: relative; margin: 0; padding: 8px 0 8px 36px;}
#blog .col-lg-8 ul.bv-no:not(#_):not(#__):not(#___) > li::before {content: ""; position: absolute; left: 0; top: calc(.875em - 3px); width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6453d' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 1px #f3c2bd;}

#blog .col-lg-8 ul.bv-consejo:not(#_):not(#__):not(#___) {margin: 0 0 1.5rem; padding: 14px 22px; border-left: 4px solid var(--ba-azul-claro); border-radius: 0 16px 16px 0; background: #eef6fd; list-style: none;}
#blog .col-lg-8 ul.bv-consejo:not(#_):not(#__):not(#___) > li {position: relative; margin: 0; padding: 8px 0 8px 24px;}
#blog .col-lg-8 ul.bv-consejo:not(#_):not(#__):not(#___) > li + li {border-top: 1px solid #d6e8f7;}
#blog .col-lg-8 ul.bv-consejo:not(#_):not(#__):not(#___) > li::before {content: ""; position: absolute; left: 2px; top: calc(.875em + 6px); width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--ba-azul);}
@media (max-width: 575px) {
	#blog .col-lg-8 :is(ul.bv-no, ul.bv-consejo):not(#_):not(#__):not(#___) {padding: 12px 14px;}
}

/* ============================================================================ Entradilla (bajo la foto principal, 26/10/2026)
   ENT-01 letra mayor en azul de títulos; ENT-02 la pregunta o idea principal resaltada (<strong class="bv-pregunta">);
   ENT-03 línea corta naranja que cierra la introducción */
#blog .blog-v2 .col-lg-8 p.display-2:not(#_) {position: relative; margin: 26px 0 30px; padding-bottom: 26px; font-size: clamp(1.18rem, 1.6vw, 1.3rem) !important; line-height: 1.7; font-weight: 500; color: var(--ba-titulo);}
#blog .blog-v2 .col-lg-8 p.display-2:not(#_)::after {content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ba-naranja), #ff9a5c);}
#blog .blog-v2 .col-lg-8 p.display-2 strong.bv-pregunta {font-weight: 800; color: var(--ba-azulon); background: linear-gradient(transparent 62%, rgba(255, 84, 0, .22) 62%, rgba(255, 84, 0, .22) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px;}

/* ============================================================================ Negritas y resaltados del cuerpo (26/10/2026)
   <strong> en azul oscuro para datos clave. Frases clave (<mark class="bv-clave">):
   RES-03 si están en un párrafo, el párrafo va en una tarjeta con bombilla (<p class="bv-clave-caja">) y la frase en negrita azul;
   RES-01 si están en una lista, la frase va en una cajita azul clara dentro de la línea */
#blog .blog-v2 .col-lg-8 :is(p, li, td) strong {font-weight: 700; color: var(--ba-azulon);}
#blog .blog-v2 .col-lg-8 mark.bv-clave {padding: 2px 8px; border-radius: 8px; background: #eaf3fc; box-shadow: inset 0 0 0 1px #d3e5f7; color: var(--ba-titulo); font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone;}
#blog .blog-v2 .col-lg-8 p.bv-clave-caja {position: relative; margin: 1.6rem 0; padding: 18px 22px 18px 70px; border-radius: 16px; background: linear-gradient(135deg, #f1f7fe 0%, #fff 70%); border: 1px solid #dbe9f8; box-shadow: 0 10px 24px -18px rgba(28, 74, 130, .6);}
#blog .blog-v2 .col-lg-8 p.bv-clave-caja::before {content: ""; position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; border-radius: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.2h5c0-.9.4-1.7 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center / 18px no-repeat, linear-gradient(135deg, #ff8a3d, var(--ba-naranja)); box-shadow: 0 8px 16px -8px rgba(255, 84, 0, .9);}
#blog .blog-v2 .col-lg-8 p.bv-clave-caja mark.bv-clave {padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ba-titulo); font-weight: 700;}
#blog .blog-v2 .col-lg-8 ul.bv-consejo mark.bv-clave {background: #fff; box-shadow: inset 0 0 0 1px #cfe1f4, 0 2px 6px -3px rgba(28, 74, 130, .35);}
@media (max-width: 575px) {
	#blog .blog-v2 .col-lg-8 p.bv-clave-caja {padding: 64px 18px 18px; }
	#blog .blog-v2 .col-lg-8 p.bv-clave-caja::before {left: 18px; top: 18px;}
}

/* ============================================================================ Preguntas frecuentes v2 (26/10/2026)
   Tarjeta con cabecera a la izquierda, preguntas numeradas con botón «+» y, al lado, el banner del producto
   (modulos/blog-faq.php, fijo al bajar). En móvil el banner pasa debajo de las preguntas. */
#blog .blog-v2 .col-lg-8 .bv-faq {position: relative; margin: 3.5rem 0 1.5rem; padding: clamp(22px, 3.5vw, 36px); border-radius: 26px; background: radial-gradient(circle at 100% 0%, rgba(48, 152, 207, .12), transparent 42%), linear-gradient(180deg, #f3f7fc 0%, #fff 60%); border: 1px solid var(--ba-linea); box-shadow: var(--ba-sombra);}
#blog .blog-v2 .col-lg-8 .bv-faq-cab {margin-bottom: 22px;}
#blog .blog-v2 .col-lg-8 .bv-faq-cab .subheading {display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;}
#blog .blog-v2 .col-lg-8 .bv-faq-cab .subheading::before {content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ba-naranja); box-shadow: 0 0 0 4px rgba(255, 84, 0, .18);}
#blog .blog-v2 .col-lg-8 .bv-faq-cab h2 {margin: 0; font-size: clamp(1.4rem, 2.3vw, 1.75rem); line-height: 1.25; color: var(--ba-titulo); text-wrap: balance;}
#blog .blog-v2 .col-lg-8 .bv-faq-rejilla {display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; align-items: start;}

/* Preguntas */
#blog .blog-v2 .col-lg-8 .bv-faq .accordion {counter-reset: faq; gap: 12px;}
#blog .blog-v2 .col-lg-8 .bv-faq .accordion-item {counter-increment: faq; border-radius: 18px !important; box-shadow: 0 1px 2px rgba(12, 26, 47, .04), 0 8px 20px -14px rgba(12, 26, 47, .25); transition: border-color .25s, box-shadow .25s, transform .25s;}
#blog .blog-v2 .col-lg-8 .bv-faq .accordion-item:hover {transform: translateY(-1px); box-shadow: 0 1px 2px rgba(12, 26, 47, .05), 0 14px 28px -16px rgba(12, 26, 47, .35);}
#blog .blog-v2 .col-lg-8 .bv-faq .accordion-item:has(.accordion-button:not(.collapsed)) {border-color: #ffcfb3 !important; box-shadow: 0 18px 36px -22px rgba(255, 84, 0, .55);}
#blog .blog-v2 .col-lg-8 .bv-faq .accordion-button {position: relative; padding: 18px 64px 18px 66px; background: #fff !important; color: var(--ba-titulo) !important; font-size: 1.02rem;}
#blog .blog-v2 .col-lg-8 .bv-faq .accordion-button::before {content: counter(faq, decimal-leading-zero); position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #fff1e8; color: var(--ba-naranja-osc); font-size: .8rem; font-weight: 800; letter-spacing: .02em; transition: background .25s, color .25s;}
#blog .blog-v2 .col-lg-8 .bv-faq .accordion-button::after {position: absolute; right: 18px; top: 50%; width: 30px; height: 30px; margin: -15px 0 0; border-radius: 50%; background: #eef4fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c4a82' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat; transform: none; transition: transform .3s, background-color .25s;}
#blog .blog-v2 .col-lg-8 .bv-faq .accordion-button:not(.collapsed) {background: #fff !important; color: var(--ba-azul) !important;}
#blog .blog-v2 .col-lg-8 .bv-faq .accordion-button:not(.collapsed)::before {background: var(--ba-naranja); color: #fff;}
#blog .blog-v2 .col-lg-8 .bv-faq .accordion-button:not(.collapsed)::after {transform: rotate(45deg); background-color: #ffe4d4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e04a00' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");}
#blog .blog-v2 .col-lg-8 .bv-faq .accordion-body {padding: 0 24px 20px 66px; background: #fff; font-size: .98rem; line-height: 1.7;}

/* Banner del producto */
#blog .blog-v2 .col-lg-8 .bv-faq-producto {position: sticky; top: 110px;}
#blog .blog-v2 .col-lg-8 .bfp-tarjeta {overflow: hidden; border-radius: 22px; color: #fff; background: radial-gradient(circle at 100% 100%, rgba(255, 84, 0, .28), transparent 45%), linear-gradient(160deg, var(--ba-azul) 0%, #12345f 60%, var(--ba-azulon) 100%); box-shadow: 0 24px 44px -24px rgba(12, 26, 47, .8);}
#blog .blog-v2 .col-lg-8 .bfp-foto {position: relative; display: block;}
#blog .blog-v2 .col-lg-8 .bfp-foto img {display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 0 !important; box-shadow: none;}
#blog .blog-v2 .col-lg-8 .bfp-foto::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, #1a4278 100%);}
#blog .blog-v2 .col-lg-8 .bfp-cuerpo {padding: 4px 22px 22px;}
#blog .blog-v2 .col-lg-8 .bfp-etiqueta {display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; color: #ffb48a; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;}
#blog .blog-v2 .col-lg-8 .bfp-etiqueta svg.ib {width: 15px; height: 15px; margin: 0; color: #ffb48a;}
#blog .blog-v2 .col-lg-8 .bfp-titulo {margin: 0 0 16px; color: #fff; font-size: 1.22rem; font-weight: 800; line-height: 1.25;}
#blog .blog-v2 .col-lg-8 .bfp-cuerpo ul {margin: 0; padding: 0; list-style: none;}
#blog .blog-v2 .col-lg-8 .bfp-precios {display: grid; gap: 8px; margin-bottom: 16px !important;}
#blog .blog-v2 .col-lg-8 .bfp-precios li {display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n n" "u p"; align-items: center; gap: 2px 8px; margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);}
#blog .blog-v2 .col-lg-8 .bfp-nombre {grid-area: n; line-height: 1.3; font-size: .86rem; font-weight: 700; color: #dce9f8;}
#blog .blog-v2 .col-lg-8 .bfp-precio {grid-area: p; line-height: 1.2; font-size: 1.15rem; font-weight: 800; color: #fff; white-space: nowrap;}
#blog .blog-v2 .col-lg-8 .bfp-precio small {font-size: .66rem; font-weight: 700; color: #9fc0e4; text-transform: uppercase; letter-spacing: .06em;}
#blog .blog-v2 .col-lg-8 .bfp-unidad {grid-area: u; line-height: 1.3; font-size: .76rem; color: #9fc0e4;}
#blog .blog-v2 .col-lg-8 .bfp-ventajas {display: grid; gap: 7px; margin-bottom: 20px !important;}
#blog .blog-v2 .col-lg-8 .bfp-ventajas li {display: flex; margin: 0; padding: 0 0 7px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); align-items: flex-start; gap: 8px; font-size: .9rem; line-height: 1.4; color: #e6eef8;}
#blog .blog-v2 .col-lg-8 .bfp-ventajas svg.ib {flex: 0 0 18px; width: 18px; height: 18px; margin: 0; padding: 3px; border-radius: 50%; background: rgba(22, 163, 106, .25); color: #5fe0a6;}
#blog .blog-v2 .col-lg-8 a.bfp-boton {display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border-radius: 40px; background: var(--ba-naranja); color: #fff !important; font-weight: 800; text-decoration: none !important; box-shadow: 0 14px 26px -12px rgba(255, 84, 0, .95); transition: background-color .2s, transform .2s;}
#blog .blog-v2 .col-lg-8 a.bfp-boton:hover {background: var(--ba-naranja-osc); transform: translateY(-2px);}
#blog .blog-v2 .col-lg-8 a.bfp-boton svg.ib {width: 18px; height: 18px; margin: 0; color: #fff; transition: transform .2s;}
#blog .blog-v2 .col-lg-8 a.bfp-boton:hover svg.ib {transform: translateX(3px);}
#blog .blog-v2 .col-lg-8 .bfp-tel {display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: .85rem; color: #b9cfe8;}
#blog .blog-v2 .col-lg-8 .bfp-tel svg.ib {width: 15px; height: 15px; margin: 0; color: #b9cfe8;}
#blog .blog-v2 .col-lg-8 .bfp-tel a {color: #fff !important; font-weight: 800; text-decoration-color: rgba(255, 255, 255, .4) !important;}

@media (max-width: 767px) {
	#blog .blog-v2 .col-lg-8 .bv-faq-rejilla {grid-template-columns: 1fr;}
	#blog .blog-v2 .col-lg-8 .bv-faq-producto {position: static;}
	#blog .blog-v2 .col-lg-8 .bfp-foto img {height: 170px;}
}
@media (max-width: 575px) {
	#blog .blog-v2 .col-lg-8 .bv-faq {margin-inline: -4px; padding: 20px 14px; border-radius: 22px;}
	#blog .blog-v2 .col-lg-8 .bv-faq .accordion-button {padding: 16px 54px 16px 56px; font-size: .98rem;}
	#blog .blog-v2 .col-lg-8 .bv-faq .accordion-button::before {left: 14px; width: 30px; height: 30px; border-radius: 10px;}
	#blog .blog-v2 .col-lg-8 .bv-faq .accordion-button::after {right: 14px; width: 28px; height: 28px; margin-top: -14px;}
	#blog .blog-v2 .col-lg-8 .bv-faq .accordion-body {padding: 0 18px 18px 56px;}
}
@media (prefers-reduced-motion: reduce) {
	#blog .blog-v2 .col-lg-8 .bv-faq .accordion-item, #blog .blog-v2 .col-lg-8 .bv-faq .accordion-button::after, #blog .blog-v2 .col-lg-8 a.bfp-boton {transition: none;}
}

/* ============================================================================ Título corto encima de una lista (26/10/2026)
   Las tablas de una sola columna pasan a lista (sin cambiar el texto); su cabecera queda como esta etiqueta */
#blog .blog-v2 .col-lg-8 p.bv-lista-titulo {display: flex; align-items: center; gap: 10px; margin: 1.6rem 0 .9rem; color: var(--ba-naranja-osc); font-size: .8rem; font-weight: 800; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase;}
#blog .blog-v2 .col-lg-8 p.bv-lista-titulo::before {content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ba-naranja); box-shadow: 0 0 0 4px rgba(255, 84, 0, .18);}

/* ============================================================================ Tarjetas de producto antiguas (.row.productos .caja-producto, 26/10/2026)
   Mismo HTML y textos: cabecera azul con el nombre y la etiqueta, precio «desde» en una pastilla blanca, foto a sangre,
   descripción a la izquierda y botones al pie (CALCULAR naranja y «Ver coberturas» como enlace). Tarjetas de igual altura. */
#blog .blog-v2 .col-lg-8 .row.productos {margin-top: 1.4rem !important; margin-bottom: 2.4rem !important; --bs-gutter-y: 1.4rem;}
#blog .blog-v2 .col-lg-8 .row.productos > [class*="col-"] {justify-content: stretch !important;}
#blog .blog-v2 .col-lg-8 .caja-producto:not(#_) {display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; padding: 0; overflow: hidden; border: 1px solid var(--ba-linea); border-radius: 22px; background: #fff; box-shadow: var(--ba-sombra) !important; text-align: left !important; transition: transform .25s, box-shadow .25s;}
#blog .blog-v2 .col-lg-8 .caja-producto:not(#_):hover {transform: translateY(-4px); box-shadow: var(--ba-sombra-alta) !important;}
#blog .blog-v2 .col-lg-8 .caja-producto .header-producto:not(#_) {position: relative; display: flex; justify-content: space-between !important; align-items: center !important; gap: 14px; margin: 0; padding: 22px 20px 22px 22px; color: #fff; overflow: hidden;
	background: radial-gradient(circle at 100% 0%, rgba(48, 152, 207, .55), transparent 50%), radial-gradient(circle at 0% 120%, rgba(255, 84, 0, .28), transparent 45%), linear-gradient(140deg, var(--ba-azul) 0%, #12345f 60%, var(--ba-azulon) 100%);}
#blog .blog-v2 .col-lg-8 .caja-producto .header-producto p.display-4:not(#_) {display: block; min-height: 0; margin: 0; padding: 0 !important; color: #9fc0e4 !important; font-size: 1rem !important; font-weight: 600; line-height: 1.2; text-align: left;}
#blog .blog-v2 .col-lg-8 .caja-producto .header-producto p.display-4 > strong:not(#_) {display: block; margin-top: 2px; color: #fff; font-size: clamp(1.45rem, 2.4vw, 1.8rem); font-weight: 900; letter-spacing: .01em; line-height: 1.1;}
#blog .blog-v2 .col-lg-8 .caja-producto .header-producto p.display-4 br {display: none;}
#blog .blog-v2 .col-lg-8 .caja-producto .header-producto p.display-4 span.naranja:not(#_) {display: inline-block; margin-top: 12px; padding: 5px 11px; border-radius: 30px; background: rgba(255, 84, 0, .2); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .45); font-size: .68rem !important; line-height: 1.35;}
#blog .blog-v2 .col-lg-8 .caja-producto .header-producto p.display-4 span.naranja strong:not(#_) {color: #ffc09c; font-weight: 800; letter-spacing: .08em;}
#blog .blog-v2 .col-lg-8 .caja-producto .precio-circulo:not(#_) {flex: 0 0 auto; width: 98px; height: 98px; padding: 6px; border-radius: 22px; background: #fff; color: var(--ba-azulon); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .7); transform: rotate(-3deg);}
#blog .blog-v2 .col-lg-8 .caja-producto .precio-circulo .price-desc {color: #6b7a90; font-size: .62rem !important; font-weight: 800; letter-spacing: .1em;}
#blog .blog-v2 .col-lg-8 .caja-producto .precio-circulo .price {margin: 1px 0 !important; color: var(--ba-naranja); font-size: 1.45rem; font-weight: 900; line-height: 1.1;}
#blog .blog-v2 .col-lg-8 .caja-producto > div:has(> img, > picture) {position: relative;}
#blog .blog-v2 .col-lg-8 .caja-producto > div:has(> img, > picture)::after {content: ""; position: absolute; inset: 0 0 auto; height: 40%; background: linear-gradient(rgba(18, 52, 95, .35), transparent); pointer-events: none;}
#blog .blog-v2 .col-lg-8 .caja-producto > div > img:not(#_) {display: block; width: 100%; height: 175px; object-fit: cover; border-radius: 0 !important; box-shadow: none;}
#blog .blog-v2 .col-lg-8 .caja-producto p.descripcion:not(#_) {flex: 1 1 auto; min-height: 0; margin: 0; padding: 18px 22px 4px !important; color: var(--ba-texto); font-size: .98rem !important; line-height: 1.65; text-align: left;}
#blog .blog-v2 .col-lg-8 .caja-producto .d-grid:not(#_) {margin-top: auto; padding: 14px 22px 20px; gap: 6px !important;}
#blog .blog-v2 .col-lg-8 .caja-producto .d-grid > a > .btn:not(.btn-warning):not(#_) {min-height: 42px; border-color: transparent; background: transparent; color: var(--ba-azul); white-space: normal;}
#blog .blog-v2 .col-lg-8 .caja-producto .d-grid > a > .btn:not(.btn-warning):not(#_):hover {background: #eef4fb; color: var(--ba-azulon); transform: none;}
#blog .blog-v2 .col-lg-8 .caja-producto .d-grid > a > .btn:not(.btn-warning) svg.ib {transition: transform .2s;}
#blog .blog-v2 .col-lg-8 .caja-producto .d-grid > a > .btn:not(.btn-warning):hover svg.ib {transform: translateX(3px);}
@media (prefers-reduced-motion: reduce) {
	#blog .blog-v2 .col-lg-8 .caja-producto:not(#_) {transition: none;}
}

/* ============================================================================ Párrafos con forma (26/10/2026): aligeran los bloques de texto sin cambiarlo
   .bv-destacado  idea principal de una sección, en letra algo mayor con barra naranja
   .bv-nota       remite a otra página o a otra opción (icono de flecha, azul claro)
   .bv-contra     la parte menos favorable o una pega que conviene saber (ámbar, icono de aviso)
   .bv-accion     paso práctico con el comparador (naranja suave, icono de calculadora)
   mark.bv-clave dentro de un párrafo normal sale como cajita azul, igual que en las listas */
#blog .blog-v2 .col-lg-8 p.bv-destacado {margin: 1.4rem 0 1.6rem; padding: 4px 0 4px 22px; border-left: 4px solid var(--ba-naranja); color: var(--ba-titulo); font-size: 1.12rem; font-weight: 400; line-height: 1.65;}
#blog .blog-v2 .col-lg-8 :is(p.bv-nota, p.bv-contra, p.bv-accion) {position: relative; margin: 1.4rem 0; padding: 16px 20px 16px 62px; border-radius: 16px; line-height: 1.65;}
#blog .blog-v2 .col-lg-8 :is(p.bv-nota, p.bv-contra, p.bv-accion)::before {content: ""; position: absolute; left: 18px; top: 17px; width: 30px; height: 30px; border-radius: 10px; background-position: center; background-size: 16px; background-repeat: no-repeat;}
#blog .blog-v2 .col-lg-8 p.bv-nota {background: #f3f8fd; border: 1px dashed #c4dbf1;}
#blog .blog-v2 .col-lg-8 p.bv-nota::before {background-color: #dcebf9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c4a82' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");}
#blog .blog-v2 .col-lg-8 p.bv-contra {background: #fff8ec; border: 1px solid #fbe1b6;}
#blog .blog-v2 .col-lg-8 p.bv-contra::before {background-color: #f59e0b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); box-shadow: 0 8px 16px -8px rgba(245, 158, 11, .9);}
#blog .blog-v2 .col-lg-8 p.bv-accion {background: linear-gradient(90deg, #fff4ec, #fff 75%); border: 1px solid #ffd9c2; box-shadow: var(--ba-sombra);}
#blog .blog-v2 .col-lg-8 p.bv-accion::before {background-color: var(--ba-naranja); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h.01M12 11h.01M16 11h.01M8 15h.01M12 15h.01M16 15h.01M8 18h.01M12 18h4'/%3E%3C/svg%3E"); box-shadow: 0 8px 16px -8px rgba(255, 84, 0, .9);}
#blog .blog-v2 .col-lg-8 p.bv-accion a {font-weight: 800; color: var(--ba-naranja-osc);}
@media (max-width: 575px) {
	#blog .blog-v2 .col-lg-8 :is(p.bv-nota, p.bv-contra, p.bv-accion) {padding: 58px 16px 16px;}
	#blog .blog-v2 .col-lg-8 :is(p.bv-nota, p.bv-contra, p.bv-accion)::before {left: 16px; top: 16px;}
	#blog .blog-v2 .col-lg-8 p.bv-destacado {font-size: 1.06rem; padding-left: 16px;}
}
/* Frase clave dentro de un párrafo normal: subrayado de rotulador en azul claro (la cajita queda para las listas) */
#blog .blog-v2 .col-lg-8 p:not(.bv-clave-caja) mark.bv-clave {padding: 0 2px; border-radius: 0; background: linear-gradient(transparent 58%, rgba(48, 152, 207, .22) 58%, rgba(48, 152, 207, .22) 94%, transparent 94%); box-shadow: none; color: var(--ba-titulo); font-weight: 700;}