/* --- Paleta de Colores con Variables CSS (TEMA OSCURO DE ALTO CONTRASTE) --- */
       :root {
           --bbl-color-primary: #14b8a6; /* Turquesa Vibrante */
           --bbl-color-primary-hover: #0d9488; /* Turquesa más oscuro para hover */
           --bbl-color-secondary: #374151; /* Gris oscuro para botones secundarios */
           --bbl-color-secondary-hover: #4b5563; /* Gris más claro para hover */
           --bbl-color-surface-main: #0f172a; /* Fondo principal (Gris casi negro) */
           --bbl-color-surface-card: #1f2937; /* Fondo de tarjetas (Gris oscuro azulado) */
           --bbl-color-surface-header: #1f2937; /* Fondo de la cabecera */
           --bbl-color-surface-footer: #1f2937; /* Fondo del pie de tarjeta */
           --bbl-color-text-base: #f3f4f6; /* Texto secundario (Gris medio) */
           --bbl-color-text-muted: #d0d9e7; /* Texto principal (Gris muy claro) */
           --bbl-color-text-inverted: #111827; /* Texto sobre fondos claros (botones primarios) */
           --bbl-color-text-subtle: #6b7280; /* Texto sutil (Gris oscuro) */
           --bbl-color-border: #374151; /* Color de borde */
           --bbl-color-rating: #f59e0b;
           --bbl-color-rating-bg: #422006;
           --bbl-color-rating-border: #fde68a;
           --bbl-color-rating-text: #fefce8;
           --bbl-color-status-open: #4ade80; /* Verde más brillante */
           --bbl-color-status-closed: #f87171; /* Rojo más suave */
           --bbl-color-badge-verified-bg: #064e3b;
           --bbl-color-badge-verified-text: #a7f3d0;
           --bbl-color-badge-offer-bg: #78350f;
           --bbl-color-badge-offer-text: #fde68a;
           --bbl-color-badge-top-bg: #1e3a8a;
           --bbl-color-badge-top-text: #bfdbfe;
       }
       html { scroll-behavior: smooth; }
       body { margin: 0; font-family: 'Inter', sans-serif; background-color: var(--bbl-color-surface-main); color: var(--bbl-color-text-base); }
       * { box-sizing: border-box; }
       a { text-decoration: none; color: inherit; }
       button { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
       /* =============================================================== */
       /* INICIO: CORRECCIÓN DE RESALTADO AZUL EN MÓVILES                 */
       /* =============================================================== */
       a,
       button,
       .bbl-slayer-ad,
       .bbl-faq-pregunta,
       .bbl-footer-button,
       .bbl-calculadora-cta-btn,
       .bbl-read-more-btn {
           -webkit-tap-highlight-color: transparent; /* Elimina el resaltado en iOS y Android */
           -webkit-focus-ring-color: transparent; /* Elimina el anillo de foco en algunos navegadores */
           outline: none; /* Elimina el contorno que aparece al hacer clic */
       }
       /* =============================================================== */
       /* FIN: CORRECCIÓN                                                 */
       /* =============================================================== */
       .bbl-container { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
       .bbl-font-bold { font-weight: 500; }
       .bbl-font-extrabold { font-weight: 600; }
       .bbl-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
       /*.bbl-shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }*/
       .bbl-rounded-lg { border-radius: 0.5rem; }
       .bbl-overflow-hidden { overflow: hidden; }
       
       /* --- INICIO: Estilos del Hero Modificados --- */
       .bbl-intro-section { margin-top: 0; margin-bottom: 2rem; border-bottom: 1px solid var(--bbl-color-border); }
       .bbl-intro-grid {
           background-color: #101b36; /* Color marino */
           background-image: none;
           padding: 4rem 0;
       }
       .bbl-intro-grid-content {
           display: flex;
           flex-direction: column;
           align-items: center;
           gap: 2rem;
       }
       @media (min-width: 768px) { 
           .bbl-intro-grid { padding: 5rem 0; }
       }
       /* --- FIN: Estilos del Hero Modificados --- */

       .bbl-intro-title {
           font-size: 2.25rem;
           line-height: 2.5rem;
           color: var(--bbl-color-text-base);
           text-align: center; /* Centrado */
           margin: 0;
       }
       @media (min-width: 768px) {
           .bbl-intro-title {
               font-size: 3rem;
               line-height: 1.1;
           }
       }
       
       .bbl-intro-title .bbl-page-city {
           color: var(--bbl-color-primary);
       }

       .bbl-intro-image-wrapper {
           display: flex;
           align-items: center;
           justify-content: center;
           margin: 0;
       }
       
       .bbl-intro-image {
           max-height: 200px;
           max-width: 100%;
           width: auto;
           object-fit: contain;
           transition: transform 0.3s ease;
       }
       @media (min-width: 768px) {
           .bbl-intro-image { max-height: 250px; }
       }

       .bbl-intro-desc {
           font-size: 1.125rem;
           line-height: 1.75rem;
           color: var(--bbl-color-text-muted);
           text-align: center; /* Centrado */
           margin: 0;
           max-width: 65ch; /* Para mejor legibilidad */
       }
       
       /* --- INICIO: Animación del pez --- */
       .bbl-intro-image.animate-on-load,
       .bbl-intro-image-wrapper:hover .bbl-intro-image {
            -webkit-animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
       }

        @-webkit-keyframes shake-top {
            0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; }
            10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); }
            20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); }
            30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); }
            80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
            90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); }
        }
        @keyframes shake-top {
            0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; }
            10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); }
            20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); }
            30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); }
            80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
            90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); }
        }
       /* --- FIN: Animación del pez --- */
       
       /* --- INICIO: Flechas de Scroll Animadas --- */
       .bbl-scroll-indicator {
           position: relative;
           width: 24px;
           height: 24px;
           margin-top: 1rem; /* Espacio después del párrafo */
       }
       .bbl-scroll-arrow {
           position: absolute;
           width: 100%;
           height: 100%;
           border-right: 3px solid var(--bbl-color-primary);
           border-bottom: 3px solid var(--bbl-color-primary);
           border-radius: 2px;
           transform: rotate(45deg);
           opacity: 0;
           animation: bbl-scroll-fade 2s infinite;
       }
       .bbl-scroll-arrow:nth-child(1) {
           animation-delay: 0s;
       }
       .bbl-scroll-arrow:nth-child(2) {
           animation-delay: 0.3s;
       }
       .bbl-scroll-arrow:nth-child(3) {
           animation-delay: 0.6s;
       }
       @keyframes bbl-scroll-fade {
           0% {
               opacity: 0;
               transform: rotate(45deg) translate(-15px, -15px);
           }
           50% {
               opacity: 1;
           }
           100% {
               opacity: 0;
               transform: rotate(45deg) translate(15px, 15px);
           }
       }
       /* --- FIN: Flechas de Scroll Animadas --- */

       .bbl-section-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; text-align: center; color: var(--bbl-color-text-base); margin-bottom: 1rem; }
       @media (min-width: 768px) { .bbl-section-title { font-size: 2.25rem; line-height: 2.5rem; } }
       .bbl-section-description { font-size: 1.125rem; line-height: 1.75rem; color: var(--bbl-color-text-muted); text-align: center; max-width: 48rem; margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; }
       .bbl-listado-title { margin-top: 4rem; margin-bottom: 2.5rem; }
       
       /* --- INICIO: CÓDIGO DE LA CALCULADORA CORREGIDO --- */
       .bbl-calculadora-section { max-width: 56rem; margin: 4rem auto; text-align: center; }
       .bbl-calculadora-container {
           background-color: #0f172a;
           background-image: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, #0f172a 100%);
           border: 1px solid #334155;
           padding: 2.5rem;
           border-radius: 0.75rem;
           box-shadow: var(--bbl-shadow-xl);
           opacity: 0;
           transform: translateY(20px);
           transition: opacity 0.6s ease-out, transform 0.6s ease-out;
       }
       .bbl-calculadora-container.is-visible { opacity: 1; transform: translateY(0); }
       @media (max-width: 768px) { .bbl-calculadora-container { padding: 1.5rem; } }
       .bbl-calculadora-container .bbl-section-title {
           color: var(--bbl-color-text-base); /* Ajustado para tema oscuro */
       }
       .bbl-calculadora-container .bbl-section-description {
           color: var(--bbl-color-text-muted); /* Ajustado para tema oscuro */
       }
       .bbl-calculadora-cta-btn { background-color: var(--bbl-color-primary); color: var(--bbl-color-text-inverted); padding: 0.875rem 2rem; border-radius: 0.5rem; font-size: 1.125rem; font-weight: 700; box-shadow: var(--bbl-shadow-lg); transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.75rem; }
       .bbl-calculadora-cta-btn:hover { background-color: var(--bbl-color-primary-hover); transform: translateY(-2px); box-shadow: var(--bbl-shadow-xl); }
       .bbl-calculadora-wrapper {
            text-align: left;
            margin-top: 2rem;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.7s ease-in-out, opacity 0.5s ease-in-out, margin-top 0.5s ease-in-out, padding 0.7s ease-in-out;
            padding: 0 1.5rem;
            border-radius: 0.5rem;
            background-color: #1e293b;
            border: 1px solid transparent;
        }
       .bbl-calculadora-wrapper.is-open {
            max-height: 1000px;
            opacity: 1;
            padding: 1.5rem;
            border-color: #334155;
        }
       .bbl-calculadora-header { 
           display: flex; 
           flex-direction: column; 
           align-items: center; 
           gap: 1rem; 
           margin-bottom: 2rem; 
           padding-bottom: 1.5rem;
           border-bottom: 1px solid #334155;
        }
       @media (max-width: 768px) {
           .bbl-calculadora-wrapper.is-open {
               padding: 0;
               border-color: transparent;
               background-color: transparent;
           }
           .bbl-calculadora-header {
               padding-bottom: 1.5rem;
               margin-bottom: 1.5rem;
           }
       }
       .bbl-calculadora-title { font-size: 1.5rem; font-weight: 800; color: var(--bbl-color-text-base); margin: 0; text-align: center; }
       .bbl-calculadora-title .bbl-city-name { color: var(--bbl-color-primary); }
       .bbl-mode-switcher { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 0.875rem; font-weight: 600; background-color: #1e293b; border: 1px solid #334155; padding: 0.5rem 1rem; border-radius: 9999px; width: fit-content; }
       .bbl-mode-switcher .bbl-label { color: var(--bbl-color-text-muted); transition: color 0.3s; }
       .bbl-mode-switcher .bbl-label.is-active { color: var(--bbl-color-text-base); }
       .bbl-switch { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0; }
       .bbl-switch input { opacity: 0; width: 0; height: 0; }
       .bbl-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #334155; transition: .4s; border-radius: 28px; }
       .bbl-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
       input:checked + .bbl-slider { background-color: var(--bbl-color-primary); }
       input:checked + .bbl-slider:before { transform: translateX(22px); }
       @media (max-width: 420px) {
           .bbl-mode-switcher { width: 100%; justify-content: center; padding: 0.5rem 1rem; gap: 0.75rem; }
           .bbl-mode-switcher .bbl-label { font-size: 0.8rem; white-space: nowrap; flex: 1; }
           .bbl-mode-switcher .bbl-label:first-of-type { text-align: left; }
           .bbl-mode-switcher .bbl-label:last-of-type { text-align: right; }
       }
       .bbl-calculadora-body { display: grid; grid-template-columns: 1fr; gap: 2rem; }
       @media (min-width: 768px) { .bbl-calculadora-body { grid-template-columns: 1fr 1fr; } }
       .bbl-input-group, .bbl-output-group { display: flex; flex-direction: column; }
       #bbl-mode-medidas { display: flex; flex-direction: column; gap: 1.5rem; }
       .is-hidden { display: none !important; }
       .bbl-input-field { display: flex; flex-direction: column; }
       .bbl-input-field label { font-weight: 600; margin-bottom: 0.75rem; font-size: 0.875rem; color: var(--bbl-color-text-muted); text-align: left; }
       .bbl-input-field input { width: 100%; padding: 0.75rem 1rem; border: 1px solid #334155; border-radius: 0.375rem; font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s; background-color: #1e293b; color: var(--bbl-color-text-base); }
       .bbl-input-field input::placeholder { color: var(--bbl-color-text-muted); }
       .bbl-input-field input:focus { outline: none; border-color: var(--bbl-color-primary); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2); }
       .bbl-output-group h4 { font-size: 1.125rem; font-weight: 700; margin: 0; color: var(--bbl-color-text-base); text-align: left; }
       .bbl-result-display { 
           background-color: #1e293b; 
           padding: 1rem; 
           border-radius: 0.5rem; 
           text-align: center; 
           border: 1px solid #334155; 
           margin-top: 0.75rem;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 0.5rem;
       }
       @media (min-width: 768px) {
            .bbl-result-display {
                flex-direction: row;
                justify-content: space-around;
                padding: 1.5rem;
                gap: 1.5rem;
            }
       }
       .bbl-result-text-group {
           text-align: center;
       }
       .bbl-result-display .bbl-result-value { font-size: 2.5rem; font-weight: 800; color: var(--bbl-color-primary); line-height: 1.2; }
       .bbl-result-display .bbl-result-unit { font-size: 1rem; font-weight: 500; color: var(--bbl-color-text-muted); margin-top: 0.25rem; }
       .bbl-visual-medidas-container {
           position: relative;
           width: 100%;
           max-width: 250px;
           margin: 1rem auto;
       }
       .bbl-visual-medidas-svg {
           width: 100%;
           height: auto;
           overflow: visible;
       }
       .bbl-visual-medidas-svg .bbl-shape-fill {
           fill: rgba(20, 184, 166, 0.1); /* Ajustado para tema oscuro */
       }
       .bbl-visual-medidas-svg .bbl-shape-stroke {
           stroke: var(--bbl-color-primary);
           stroke-width: 1;
           fill: none;
       }
       .bbl-visual-medidas-svg .bbl-label-line {
           stroke: var(--bbl-color-text-muted);
           stroke-width: 0.75;
           stroke-dasharray: 2, 2;
       }
       .bbl-visual-medidas-svg .bbl-label-text {
           font-family: 'Inter', sans-serif;
           fill: var(--bbl-color-text-muted);
           font-size: 10px;
           font-weight: 600;
       }
       .bbl-visual-medidas-svg .bbl-label-value {
           font-weight: 800;
           fill: var(--bbl-color-text-base); /* Ajustado para tema oscuro */
       }
       @keyframes bbl-spin-icon {
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
       }
       .bbl-spin {
           animation: bbl-spin-icon 0.5s ease-in-out;
       }
       /* --- FIN: CÓDIGO DE LA CALCULADORA CORREGIDO --- */

        .bbl-slayer-ad {
            font-family: 'Inter', sans-serif;
            background-color: #0f172a;
            background-image: 
                linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%231e293b' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            color: #ffffff;
            border-radius: 0.75rem;
            padding: 2.5rem;
            margin: 6rem auto 0;
            max-width: 900px;
            display: grid;
            grid-template-columns: 150px 1fr;
            align-items: center;
            gap: 2.5rem;
            border: 1px solid #38bdf8;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            visibility: hidden;
            cursor: pointer;
        }
        .bbl-slayer-ad.is-visible {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
        }
        .bbl-slayer-ad::before {
            content: '';
            position: absolute;
            top: -80px;
            right: -80px;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0) 70%);
            border-radius: 50%;
            pointer-events: none;
            transition: transform 0.5s ease-out;
        }
        .bbl-slayer-ad:hover::before { transform: scale(1.2); }
        .bbl-slayer-gallery { width: 150px; height: 150px; position: relative; border-radius: 50%; border: 3px solid #38bdf8; box-shadow: 0 0 25px rgba(56, 189, 248, 0.3); }
        .bbl-slayer-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; position: absolute; top: 0; left: 0; opacity: 0; animation: bbl-fade-in-out 9s infinite; }
        .bbl-slayer-gallery img:nth-child(1) { animation-delay: 0s; }
        .bbl-slayer-gallery img:nth-child(2) { animation-delay: 3s; }
        .bbl-slayer-gallery img:nth-child(3) { animation-delay: 6s; }
        
        @keyframes bbl-fade-in-out {
            0% { opacity: 0; transform: scale(0.95); }
            11% { opacity: 1; transform: scale(1); }
            33.3% { opacity: 1; transform: scale(1); }
            44.4% { opacity: 0; transform: scale(0.95); }
            100% { opacity: 0; }
        }
        .bbl-slayer-content {
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: flex-start; 
            text-align: left; 
        }
        .bbl-slayer-ad h2 { font-size: 1.75rem; font-weight: 900; margin: 0; margin-bottom: 1.5rem; line-height: 1.2; background: linear-gradient(90deg, #38bdf8, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
        .bbl-slayer-ad p { font-size: 1rem; line-height: 1.6; color: #cbd5e1; margin: 0; max-width: 500px; }
        .bbl-slayer-trust-icons { display: flex; gap: 1.5rem; margin-top: 0.5rem; }
        .bbl-trust-icon-item { color: #7dd3fc; font-size: 1.5rem; cursor: pointer; }
        .bbl-tooltip { position: absolute; left: -9999px; transform: scale(0.95); padding: 0.6em 1em; opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.2s ease-out, opacity 0.2s ease-out, visibility 0s 0.2s; background: #1e293b; color: #ffffff; border: 1px solid #334155; border-radius: 0.5rem; z-index: 10001; font-size: 0.85rem; font-weight: 400; line-height: 1.4; width: max-content; max-width: 250px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
        .bbl-tooltip::after { position: absolute; content: ""; height: 0.6em; width: 0.6em; bottom: -0.35em; left: 50%; transform: translateX(-50%) rotate(45deg); background: #1e293b; border-right: 1px solid #334155; border-bottom: 1px solid #334155; z-index: -1; }
        .bbl-tooltip.bbl-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); transition-delay: 0s; }
        .bbl-slayer-cta-wrapper { margin-top: 1rem; }
        .bbl-slayer-cta { display: inline-flex; justify-content: center; align-items: center; background-color: #0ea5e9; color: #ffffff; text-decoration: none; font-weight: 700; padding: 0.85rem 1.75rem; border-radius: 3rem; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 20px rgba(14, 165, 233, 0.3); white-space: nowrap; z-index: 2; animation: bbl-pulse-animation 2s infinite; }
        .bbl-slayer-cta:hover { animation-play-state: paused; background-color: #0284c7; transform: translateY(-3px); box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1), 0 0 30px rgba(14, 165, 233, 0.5); }
        .bbl-slayer-cta i { margin-left: 0.5em; }
        @keyframes bbl-pulse-animation {
            0% { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 20px rgba(14, 165, 233, 0.3); }
            50% { box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1), 0 0 30px rgba(14, 165, 233, 0.5); }
            100% { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 20px rgba(14, 165, 233, 0.3); }
        }
        @media (max-width: 768px) {
            .bbl-slayer-ad { grid-template-columns: 1fr; padding: 2rem 1.5rem; gap: 1.5rem; text-align: center; justify-items: center; }
            .bbl-slayer-gallery { width: 120px; height: 120px; margin-bottom: 0.5rem; }
            .bbl-slayer-content { gap: 1.5rem; align-items: center; width: 100%; }
            .bbl-slayer-ad h2 { font-size: 1.6rem; }
            .bbl-slayer-ad p { font-size: 0.95rem; }
            .bbl-slayer-trust-icons { justify-content: center; }
            .bbl-slayer-cta-wrapper { margin-top: 0; width: 100%; text-align: center; }
        }

       .bbl-listado-acuarios-contenedor { counter-reset: ficha-counter; max-width: 56rem; margin-left: auto; margin-right: auto; }
       .bbl-listado-acuarios-contenedor > *:not(:last-child) { margin-bottom: 5rem; }
       
       .bbl-ficha { 
           position: relative; 
           opacity: 0; 
       }
       .bbl-ficha.is-visible {
            -webkit-animation: scale-in-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
       }

        @-webkit-keyframes scale-in-bottom {
            0% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 0; }
            100% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 1; }
        }
        @keyframes scale-in-bottom {
            0% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 0; }
            100% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 1; }
        }

       .bbl-ficha-inner { background-color: var(--bbl-color-surface-card); display: flex; flex-direction: column; transition: all 0.3s; border: 1px solid #334155; }
       .bbl-ficha-inner:hover { 
           transform: translateY(-5px);
           box-shadow: 0 0 25px -5px rgba(20, 184, 166, 0.2); 
           border-color: rgba(20, 184, 166, 0.5);
        }
       .bbl-ficha::before { content: "0" counter(ficha-counter); counter-increment: ficha-counter; position: absolute; top: 15px; left: 15px; background-color: var(--bbl-color-primary); color: var(--bbl-color-text-inverted); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; border: 4px solid var(--bbl-color-surface-card); box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3); z-index: 10; }
       .bbl-ficha-main-content { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1.5rem; padding: 1.5rem; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
       @media (min-width: 768px) { .bbl-ficha-main-content { grid-template-columns: 12rem 1fr; grid-template-rows: 1fr; } .bbl-ficha.is-expanded .bbl-ficha-main-content { grid-template-columns: 6rem 1fr; } }
       .bbl-ficha-image-col { flex-shrink: 0; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
       .bbl-ficha-image { width: 100%; padding-top: 100%; position: relative; }
       .bbl-ficha-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0.375rem; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); }
       .bbl-ficha-info-col { width: 100%; display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
       .bbl-categoria-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, var(--bbl-color-primary), var(--bbl-color-primary-hover)); color: var(--bbl-color-text-inverted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.375rem 0.875rem; border-radius: 9999px; margin-bottom: 0.75rem; box-shadow: 0 2px 4px rgba(13, 148, 136, 0.2); width: fit-content; width: -moz-fit-content; }
       .bbl-categoria-badge i { font-size: 0.875rem; }
       .bbl-ficha-title { font-size: 1.5rem; line-height: 2rem; margin: 0 0 0.5rem 0; color: var(--bbl-color-text-base); }
       .bbl-badges-container { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; min-height: 25px; }
       .bbl-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1.25; }
       .bbl-badge i { font-size: 0.8em; }
        /* =============================================================== */
        /* INICIO: NUEVA PALETA DE COLORES PARA BADGES                     */
        /* =============================================================== */
        .bbl-badge-color-1 { background-color: #064e3b; color: #a7f3d0; } /* Verde Oscuro */
        .bbl-badge-color-2 { background-color: #78350f; color: #fde68a; } /* Naranja Oscuro */
        .bbl-badge-color-3 { background-color: #1e3a8a; color: #bfdbfe; } /* Azul Oscuro */
        .bbl-badge-color-4 { background-color: #701a75; color: #fbcfe8; } /* Morado Oscuro */
        .bbl-badge-color-5 { background-color: #7f1d1d; color: #fecaca; } /* Rojo Oscuro */
        /* =============================================================== */
        /* FIN: NUEVA PALETA DE COLORES                                    */
        /* =============================================================== */
       .bbl-rating-badge { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--bbl-color-rating-bg); border: 1px solid var(--bbl-color-rating-border); padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; line-height: 1.25rem; margin-bottom: 1rem; width: fit-content; width: -moz-fit-content; }
       .bbl-rating-stars { display: flex; align-items: center; gap: 0.25rem; color: var(--bbl-color-rating); }
       .bbl-rating-text { font-weight: 600; color: var(--bbl-color-rating-text); }
       .bbl-rating-text a:hover { text-decoration: underline; }
       .bbl-ficha-desc-wrapper { position: relative; }
       .bbl-ficha-desc { color: var(--bbl-color-text-muted); line-height: 1.6; margin: 0; max-height: 85px; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%); mask-image: linear-gradient(to bottom, black 60%, transparent 100%); }
       .bbl-ficha.is-expanded .bbl-ficha-desc { -webkit-mask-image: none; mask-image: none; }
       .bbl-read-more-btn { display: none; color: var(--bbl-color-primary); font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; margin-top: 0.5rem; }
       .bbl-read-more-btn.is-visible { display: inline-block; }
       .bbl-ficha.is-expanded .bbl-read-more-btn { margin-top: 0.75rem; }
       .bbl-ficha-details { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--bbl-color-border); font-size: 0.875rem; line-height: 1.25rem; }
       .bbl-detail-item { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--bbl-color-text-base); }
       .bbl-detail-item:not(:last-child) { margin-bottom: 0.75rem; }
       /* =============================================================== */
        /* INICIO: MEJORA DE ESTILO PARA ÍCONOS (CORREGIDO)                */
        /* =============================================================== */
        .bbl-detail-item i { 
            width: 1.5rem; /* Aumenta el espacio contenedor */
            text-align: center; 
            color: var(--bbl-color-primary); 
            margin-top: 0.125rem;
            font-size: 1.2em; /* Aumenta el tamaño para mejor visibilidad */
            opacity: 0.9; /* Suaviza la apariencia del ícono */
            transition: transform 0.2s ease-in-out; /* Añade una transición suave */
        }
        
        .bbl-detail-item:hover i {
            transform: scale(1.1); /* Efecto sutil al pasar el ratón */
        }
        /* =============================================================== */
        /* FIN: MEJORA DE ESTILO                                           */
        /* =============================================================== */
       .bbl-detail-item a:hover { text-decoration: underline; color: var(--bbl-color-primary); }
       
       .bbl-horario-dinamico {
           cursor: pointer;
       }
       .bbl-horario-content-wrapper {
           flex-grow: 1;
           width: 100%;
           min-width: 0; /* Fix for flexbox overflow */
       }
       .bbl-horario-status-line {
           display: flex;
           align-items: center;
       }
       .bbl-horario-status-text {
           display: flex;
           flex-wrap: wrap;
           align-items: baseline; /* Align to text baseline */
           gap: 0.5rem; /* Use gap for consistent spacing */
           min-width: 0;
       }
       .bbl-icono-desplegable {
           transition: transform 0.3s;
           font-size: 0.75rem;
           color: #9ca3af;
       }
       .bbl-horario-dinamico.is-open .bbl-icono-desplegable { 
           transform: rotate(180deg); 
       }
       .bbl-horario-semana { 
           list-style: none; 
           padding: 0; 
           margin: 0; 
           max-height: 0; 
           overflow: hidden; 
           transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, margin-top 0.4s ease-in-out; 
           opacity: 0; 
           margin-top: 0; 
       }
       .bbl-horario-dinamico.is-open .bbl-horario-semana { 
           max-height: 500px; 
           opacity: 1; 
           margin-top: 0.75rem; 
       }
       .bbl-horario-semana li { 
           display: grid; 
           grid-template-columns: 80px 1fr; 
           color: var(--bbl-color-text-muted); 
           padding: 0.25rem 0; 
           font-size: 0.875rem; 
       }
       .bbl-horario-semana li.is-today { 
           color: var(--bbl-color-text-base); 
           font-weight: 700; 
       }
       .bbl-horario-semana li .bbl-dia-semana { 
           text-transform: capitalize; 
       }
       .bbl-estado-abierto { 
           color: var(--bbl-color-status-open); 
       }
       .bbl-estado-cerrado { 
           color: var(--bbl-color-status-closed); 
       }

        .bbl-pecera-wrapper {
            width: 150px;
            height: 120px;
            position: relative;
            flex-shrink: 0;
        }
        .bbl-pecera-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.4);
        }
        @media (min-width: 768px) {
            .bbl-pecera-wrapper {
                width: 180px;
                height: 150px;
            }
            .bbl-pecera-container {
                 transform: translate(-50%, -50%) scale(0.5);
            }
        }
        .bbl-pecera-bowl {
            position: relative;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
            border: 8px solid transparent;
            transform-origin: bottom center;
            animation: 
                bbl-animateBowl 4s ease-in-out infinite alternate,
                bbl-animateColor 10s linear infinite;
        }
        @keyframes bbl-animateBowl {
            from { transform: rotate(-10deg); }
            to { transform: rotate(10deg); }
        }
        @keyframes bbl-animateColor {
            0% { filter: hue-rotate(0deg); }
            100% { filter: hue-rotate(360deg); }
        }
        .bbl-pecera-bowl::before {
            content: '';
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 40%;
            height: 30px;
            border: 15px solid #4b5563;
            border-radius: 50%;
            box-shadow: 0 10px #1f2937;
        }
        .bbl-pecera-bowl::after {
            content: '';
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            width: 150px;
            height: 80px;
            background: rgba(255, 255, 255, 0.02);
        }
        .bbl-pecera-liquid {
            position: absolute;
            top: 50%;
            left: 5px;
            right: 5px;
            bottom: 5px;
            background: var(--bbl-color-primary);
            border-bottom-left-radius: 150px;
            border-bottom-right-radius: 150px;
            filter: drop-shadow(0 0 80px var(--bbl-color-primary));
            transform-origin: top center;
            animation: bbl-animateLiquid 4s ease-in-out infinite alternate;
        }
        @keyframes bbl-animateLiquid {
            0% { transform: rotate(-8deg); } 25% { transform: rotate(12deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(9deg); } 100% { transform: rotate(-8deg); }
        }
        .bbl-pecera-liquid::before {
            content: '';
            position: absolute;
            top: -10px;
            left: 0px;
            width: 100%;
            height: 20px;
            background: var(--bbl-color-primary-hover);
            border-radius: 50%;
            filter: drop-shadow(0 0 80px var(--bbl-color-primary));
        }
        .bbl-pecera-base {
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 250px;
            height: 30px;
            background: #1f2937;
            border-radius: 50%;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
            z-index: -1;
        }
        .bbl-pecera-base::before {
            content: '';
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            background: #374151;
            border-radius: 50%;
        }

       .bbl-ficha-footer { background-color: var(--bbl-color-surface-footer); padding: 1rem 1.5rem; border-top: 1px solid var(--bbl-color-border); }
       .bbl-footer-buttons { display: flex; flex-direction: column; gap: 1rem; }
       @media (min-width: 640px) { .bbl-footer-buttons { flex-direction: row; } }
       .bbl-footer-button { display: inline-flex; align-items: center; justify-content: center; flex: 1; text-align: center; padding: 0.75rem 1.25rem; border-radius: 0.5rem; font-weight: 700; transition: all 0.2s; }
       .bbl-footer-button i { margin-right: 0.75rem; }
       .bbl-button-primary { background-color: var(--bbl-color-primary); color: var(--bbl-color-text-inverted); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); }
       .bbl-button-primary:hover { background-color: var(--bbl-color-primary-hover); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
       .bbl-button-secondary { background-color: var(--bbl-color-secondary); color: var(--bbl-color-text-base); }
       .bbl-button-secondary:hover { background-color: var(--bbl-color-secondary-hover); }
       
       .bbl-mapa-contenedor { 
           border-radius: 0.5rem; 
           overflow: hidden; 
           max-height: 0; 
           opacity: 0; 
           transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, margin-top 0.5s ease-in-out;
           margin-top: 0;
       }
       .bbl-mapa-contenedor.is-visible { 
           max-height: 250px; 
           opacity: 1; 
           margin-top: 1rem; 
       }
       
       .bbl-mapa-contenedor iframe { width: 100%; height: 350px; border: 0; display: block; /*filter: invert(90%) hue-rotate(180deg);*/ }
       .bbl-faq-section { margin-top: 4rem; padding-bottom: 4rem; }
       .bbl-faq-title { font-size: 2.25rem; line-height: 2.5rem; text-align: center; margin-bottom: 2.5rem; }
       .bbl-faq-contenedor { max-width: 48rem; margin-left: auto; margin-right: auto; }
       .bbl-faq-item { background-color: var(--bbl-color-surface-card); border-radius: 0.5rem; border: 1px solid var(--bbl-color-border); transition: border-color 0.3s; }
       .bbl-faq-item:not(:last-child) { margin-bottom: 1rem; }
       .bbl-faq-item:hover { border-color: var(--bbl-color-primary); }
       .bbl-faq-pregunta { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 1.25rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; cursor: pointer; color: var(--bbl-color-text-base); transition: color 0.3s; }
       .bbl-faq-pregunta i { transition: transform 0.3s ease-in-out; color: var(--bbl-color-primary); }
       .bbl-faq-item.is-open .bbl-faq-pregunta i { transform: rotate(180deg); }
       .bbl-faq-item.is-open .bbl-faq-pregunta { color: var(--bbl-color-primary); }
       .bbl-faq-respuesta { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; }
       .bbl-faq-respuesta-contenido { color: var(--bbl-color-text-muted); line-height: 1.6; border-top: 1px solid var(--bbl-color-border); padding: 1.5rem 1.25rem; margin: 0 1.25rem; }

        /* --- INICIO: NUEVO SLIDER DE CONVERSIÓN --- */
        .bbl-conversion-slider-section {
            padding: 0rem 0;
            background-color: var(--bbl-color-surface-main);
        }
        .bbl-conversion-slider {
            background-color: #0f172a;
            background-image: 
                radial-gradient(at 0% 0%, hsla(172, 71%, 41%, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 100%, hsla(172, 71%, 41%, 0.15) 0px, transparent 50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 4rem 2rem;
            border-top: 1px solid var(--bbl-color-border);
            /*border-bottom: 1px solid var(--bbl-color-border);*/
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .bbl-conversion-slider.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .bbl-conversion-slider-title {
            font-size: 2.5rem;
            font-weight: 900;
            line-height: 1.2;
            margin: 0 0 1rem 0;
            max-width: 20ch;
            background: linear-gradient(90deg, #f3f4f6, var(--bbl-color-primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }
        .bbl-conversion-slider-text {
            font-size: 1.125rem;
            line-height: 1.75;
            color: var(--bbl-color-text-muted);
            max-width: 60ch;
            margin: 0 0 2rem 0;
        }
        .bbl-conversion-slider-cta {
            background-color: var(--bbl-color-primary);
            color: var(--bbl-color-text-inverted);
            padding: 1rem 2.5rem;
            border-radius: 9999px;
            font-size: 1.125rem;
            font-weight: 700;
            box-shadow: 0 0 30px rgba(20, 184, 166, 0.4);
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
        }
        .bbl-conversion-slider-cta:hover {
            background-color: var(--bbl-color-primary-hover);
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 0 40px rgba(20, 184, 166, 0.6);
        }
        @media (max-width: 768px) {
            .bbl-conversion-slider-title { font-size: 2rem; }
            .bbl-conversion-slider-text { font-size: 1rem; }
            .bbl-conversion-slider { padding: 3rem 1.5rem; }
        }
        /* --- FIN: NUEVO SLIDER DE CONVERSIÓN --- */

        /* --- INICIO: Animación Heartbeat --- */
       .heartbeat {
            -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
                    animation: heartbeat 1.5s ease-in-out infinite both;
        }
        @-webkit-keyframes heartbeat {
            from {
                -webkit-transform: scale(1);
                        transform: scale(1);
                -webkit-transform-origin: center center;
                        transform-origin: center center;
                -webkit-animation-timing-function: ease-out;
                        animation-timing-function: ease-out;
            }
            10% {
                -webkit-transform: scale(0.91);
                        transform: scale(0.91);
                -webkit-animation-timing-function: ease-in;
                        animation-timing-function: ease-in;
            }
            17% {
                -webkit-transform: scale(0.98);
                        transform: scale(0.98);
                -webkit-animation-timing-function: ease-out;
                        animation-timing-function: ease-out;
            }
            33% {
                -webkit-transform: scale(0.87);
                        transform: scale(0.87);
                -webkit-animation-timing-function: ease-in;
                        animation-timing-function: ease-in;
            }
            45% {
                -webkit-transform: scale(1);
                        transform: scale(1);
                -webkit-animation-timing-function: ease-out;
                        animation-timing-function: ease-out;
            }
        }
        @keyframes heartbeat {
            from {
                -webkit-transform: scale(1);
                        transform: scale(1);
                -webkit-transform-origin: center center;
                        transform-origin: center center;
                -webkit-animation-timing-function: ease-out;
                        animation-timing-function: ease-out;
            }
            10% {
                -webkit-transform: scale(0.91);
                        transform: scale(0.91);
                -webkit-animation-timing-function: ease-in;
                        animation-timing-function: ease-in;
            }
            17% {
                -webkit-transform: scale(0.98);
                        transform: scale(0.98);
                -webkit-animation-timing-function: ease-out;
                        animation-timing-function: ease-out;
            }
            33% {
                -webkit-transform: scale(0.87);
                        transform: scale(0.87);
                -webkit-animation-timing-function: ease-in;
                        animation-timing-function: ease-in;
            }
            45% {
                -webkit-transform: scale(1);
                        transform: scale(1);
                -webkit-animation-timing-function: ease-out;
                        animation-timing-function: ease-out;
            }
        }
        /* --- FIN: Animación Heartbeat --- */

        /* --- INICIO: Animación Jello Vertical --- */
        .jello-vertical {
            -webkit-animation: jello-vertical 0.9s both;
	        animation: jello-vertical 0.9s both;
        }
        @-webkit-keyframes jello-vertical {
            0% {
                -webkit-transform: scale3d(1, 1, 1);
                        transform: scale3d(1, 1, 1);
            }
            30% {
                -webkit-transform: scale3d(0.75, 1.25, 1);
                        transform: scale3d(0.75, 1.25, 1);
            }
            40% {
                -webkit-transform: scale3d(1.25, 0.75, 1);
                        transform: scale3d(1.25, 0.75, 1);
            }
            50% {
                -webkit-transform: scale3d(0.85, 1.15, 1);
                        transform: scale3d(0.85, 1.15, 1);
            }
            65% {
                -webkit-transform: scale3d(1.05, 0.95, 1);
                        transform: scale3d(1.05, 0.95, 1);
            }
            75% {
                -webkit-transform: scale3d(0.95, 1.05, 1);
                        transform: scale3d(0.95, 1.05, 1);
            }
            100% {
                -webkit-transform: scale3d(1, 1, 1);
                        transform: scale3d(1, 1, 1);
            }
        }
        @keyframes jello-vertical {
            0% {
                -webkit-transform: scale3d(1, 1, 1);
                        transform: scale3d(1, 1, 1);
            }
            30% {
                -webkit-transform: scale3d(0.75, 1.25, 1);
                        transform: scale3d(0.75, 1.25, 1);
            }
            40% {
                -webkit-transform: scale3d(1.25, 0.75, 1);
                        transform: scale3d(1.25, 0.75, 1);
            }
            50% {
                -webkit-transform: scale3d(0.85, 1.15, 1);
                        transform: scale3d(0.85, 1.15, 1);
            }
            65% {
                -webkit-transform: scale3d(1.05, 0.95, 1);
                        transform: scale3d(1.05, 0.95, 1);
            }
            75% {
                -webkit-transform: scale3d(0.95, 1.05, 1);
                        transform: scale3d(0.95, 1.05, 1);
            }
            100% {
                -webkit-transform: scale3d(1, 1, 1);
                        transform: scale3d(1, 1, 1);
            }
        }
        /* --- FIN: Animación Jello Vertical --- */
        
        /* --- INICIO: Estilos para Migas de Pan (Compatible con Rank Math) --- */

        /* Estilo para el contenedor que genera Rank Math */
        .rank-math-breadcrumb {
            font-size: 0.875rem;
            line-height: 1.25rem;
            color: var(--bbl-color-text-muted);
            margin-bottom: 1.5rem;
            text-align: center;
        }
        
        /* Rank Math envuelve las migas en un párrafo, quitamos su margen */
        .rank-math-breadcrumb p {
            margin: 0;
        }
        
        /* Estilo para los enlaces dentro de las migas de Rank Math */
        .rank-math-breadcrumb a {
            color: var(--bbl-color-text-muted);
            transition: color 0.3s ease;
        }
        
        .rank-math-breadcrumb a:hover {
            color: var(--bbl-color-primary);
        }
        
        /* Estilos para el fallback manual (si Rank Math no está) */
        .bbl-hero-breadcrumb {
            font-size: 0.875rem;
            line-height: 1.25rem;
            color: var(--bbl-color-text-muted);
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        
        .bbl-hero-breadcrumb a:hover {
            color: var(--bbl-color-primary);
        }
        /* --- FIN: Estilos para Migas de Pan --- */
        
        .bbl-highlight {
            color: var(--bbl-color-primary);
        }