/* === Blue Nova — Subtítulos chiquitos debajo de cada cuadro del home === */
.elementor-element-62078f8c .ekit-heading,
.elementor-element-287dea6f .ekit-heading,
.elementor-element-4fdd69cf .ekit-heading,
.elementor-element-350859d3 .ekit-heading,
.elementor-element-150360a0 .ekit-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
.elementor-element-62078f8c .ekit-heading::after,
.elementor-element-287dea6f .ekit-heading::after,
.elementor-element-4fdd69cf .ekit-heading::after,
.elementor-element-350859d3 .ekit-heading::after,
.elementor-element-150360a0 .ekit-heading::after {
    display: block;
    margin-top: 8px;
    font-family: 'Poppins', 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.01em;
    text-transform: none;
    font-style: normal;
    max-width: 320px;
}
.elementor-element-62078f8c .ekit-heading::after { content: "Trafficker Digital"; }
.elementor-element-287dea6f .ekit-heading::after { content: "Webs, eCommerce, Apps"; }
.elementor-element-4fdd69cf .ekit-heading::after { content: "Expertos en GoHighLevel"; }
.elementor-element-350859d3 .ekit-heading::after { content: "Sal en Google y en IAs cuando la gente busque"; }
.elementor-element-150360a0 .ekit-heading::after { content: "Traza el comportamiento de tus usuarios"; }
@media (max-width: 768px) {
    .elementor-element-62078f8c .ekit-heading::after,
    .elementor-element-287dea6f .ekit-heading::after,
    .elementor-element-4fdd69cf .ekit-heading::after,
    .elementor-element-350859d3 .ekit-heading::after,
    .elementor-element-150360a0 .ekit-heading::after {
        font-size: 13px;
        margin-top: 6px;
        max-width: 100%;
    }
}

/* === Subir texto cerca de la imagen del workflow n8n === */
.elementor-element-1ee08d47 { padding-top: 0 !important; margin-top: -40px !important; }
.elementor-element-201a7a66 { padding-top: 20px !important; }
@media (max-width: 768px) {
    .elementor-element-1ee08d47 { margin-top: -20px !important; padding-top: 0 !important; }
    .elementor-element-201a7a66 { padding-top: 10px !important; }
}

/* === Cards clickeables: hover lift sutil === */
.bn-card-link { cursor: pointer !important; transition: transform .3s, box-shadow .3s !important; }
.bn-card-link:hover { transform: translateY(-4px) !important; box-shadow: 0 14px 32px rgba(74,123,247,0.18) !important; }

/* === Botones Agenda + WhatsApp + Escríbenos: IDÉNTICOS === */
.bn-extra-btns {
    display: flex !important; flex-direction: column !important; align-items: flex-start !important;
    gap: 14px !important; margin-top: 14px !important;
}
.elementor-element-5ee058c3 .ekit-btn-wraper,
.elementor-element-5ee058c3 .ekit-wid-con {
    display: block !important; margin: 0 !important; padding: 0 !important;
}
.elementor-element-5ee058c3 a.elementskit-btn,
.bn-extra-btn {
    width: 240px !important; min-width: 240px !important; max-width: 240px !important;
    height: 52px !important; min-height: 52px !important;
    box-sizing: border-box !important;
    display: inline-flex !important; align-items: center !important; justify-content: flex-start !important;
    gap: 12px !important; padding: 0 22px !important; border-radius: 10px !important;
    text-decoration: none !important; font-family: 'Poppins','Manrope',sans-serif !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important;
    letter-spacing: 0.01em !important; color: #ffffff !important;
    background: linear-gradient(135deg, #4A7BF7 0%, #3562D4 100%) !important;
    box-shadow: 0 8px 22px rgba(74,123,247,0.32), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    border: none !important; margin: 0 !important; cursor: pointer !important;
    white-space: nowrap !important;
    transition: all .25s cubic-bezier(.4,0,.2,1) !important;
    text-transform: none !important;
}
.elementor-element-5ee058c3 a.elementskit-btn:hover,
.bn-extra-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(74,123,247,0.5), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    background: linear-gradient(135deg, #6B93FF 0%, #4A7BF7 100%) !important;
    color: #ffffff !important;
}
.elementor-element-5ee058c3 a.elementskit-btn i.icon,
.elementor-element-5ee058c3 a.elementskit-btn i[class*="arrow"],
.elementor-element-5ee058c3 a.elementskit-btn i.icon-right-arrow1 {
    display: none !important;
}
/* Icono calendar via JS-injected span */
.bn-cal-icon {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 18px !important; height: 18px !important; flex-shrink: 0 !important;
}
.bn-cal-icon svg {
    width: 18px !important; height: 18px !important;
    stroke: #ffffff !important; fill: none !important;
    stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
    display: block !important;
}
.bn-cal-icon svg * { stroke: #ffffff !important; }
.bn-extra-btn svg {
    width: 18px !important; height: 18px !important; flex-shrink: 0 !important;
}
.bn-extra-btn.bn-wa svg { fill: currentColor !important; stroke: none !important; }
.bn-extra-btn.bn-email svg { fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; }
@media (max-width: 768px) {
    .elementor-element-5ee058c3 a.elementskit-btn,
    .bn-extra-btn {
        width: 220px !important; min-width: 220px !important; max-width: 220px !important;
        height: 48px !important; min-height: 48px !important;
        padding: 0 20px !important; font-size: 13px !important; gap: 10px !important;
    }
    .bn-cal-icon, .bn-cal-icon svg, .bn-extra-btn svg {
        width: 16px !important; height: 16px !important;
    }
}

/* === Pasos numerados 01/02/03/04 — bien visibles === */
.elementor-element-d3818ea .elementskit-box-header,
.elementor-element-3a1a52bd .elementskit-box-header,
.elementor-element-a96fa54 .elementskit-box-header,
.elementor-element-69199d86 .elementskit-box-header {
    position: relative !important;
    padding-top: 72px !important;
}
.elementor-element-d3818ea .elementskit-box-header::before,
.elementor-element-3a1a52bd .elementskit-box-header::before,
.elementor-element-a96fa54 .elementskit-box-header::before,
.elementor-element-69199d86 .elementskit-box-header::before {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    transform: none !important;
    font-family: 'Poppins','Manrope',sans-serif !important;
    font-size: 52px !important; font-weight: 800 !important;
    line-height: 1 !important; letter-spacing: -0.02em !important;
    color: #6B93FF !important;
    opacity: 0.45 !important;
    text-shadow: 0 0 24px rgba(74,123,247,0.5) !important;
    pointer-events: none !important; user-select: none !important;
    z-index: 1 !important; display: block !important;
}
.elementor-element-d3818ea .elementskit-box-header::before { content: "01" !important; }
.elementor-element-3a1a52bd .elementskit-box-header::before { content: "02" !important; }
.elementor-element-a96fa54 .elementskit-box-header::before  { content: "03" !important; }
.elementor-element-69199d86 .elementskit-box-header::before { content: "04" !important; }
.elementor-element-d3818ea .elementskit-info-box-icon,
.elementor-element-3a1a52bd .elementskit-info-box-icon,
.elementor-element-a96fa54 .elementskit-info-box-icon,
.elementor-element-69199d86 .elementskit-info-box-icon {
    position: relative !important; z-index: 2 !important;
}
@media (max-width: 768px) {
    .elementor-element-d3818ea .elementskit-box-header,
    .elementor-element-3a1a52bd .elementskit-box-header,
    .elementor-element-a96fa54 .elementskit-box-header,
    .elementor-element-69199d86 .elementskit-box-header {
        padding-top: 56px !important;
    }
    .elementor-element-d3818ea .elementskit-box-header::before,
    .elementor-element-3a1a52bd .elementskit-box-header::before,
    .elementor-element-a96fa54 .elementskit-box-header::before,
    .elementor-element-69199d86 .elementskit-box-header::before {
        font-size: 40px !important;
    }
}

/* === Back-to-Top minimalista — brilla solo en hover === */
button.bn-back-top {
    position: fixed !important;
    bottom: 24px !important; left: 24px !important;
    width: 38px !important; height: 38px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.06) !important; background-image: none !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; z-index: 2147483647 !important;
    box-shadow: none !important;
    transition: all .25s ease !important;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    -webkit-appearance: none !important; appearance: none !important;
    padding: 0 !important; margin: 0 !important;
    backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
}
button.bn-back-top.is-visible { opacity: 0.85; visibility: visible; transform: translateY(0); }
button.bn-back-top:hover {
    opacity: 1 !important;
    background: rgba(74,123,247,0.45) !important;
    border-color: rgba(150,180,255,0.45) !important;
    box-shadow: 0 6px 20px rgba(74,123,247,0.35) !important;
    transform: translateY(-2px) !important;
}
button.bn-back-top svg {
    width: 14px !important; height: 14px !important;
    stroke: #ffffff !important; fill: none !important;
    stroke-width: 2.2 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
    display: block !important;
}
button.bn-back-top svg * { stroke: #ffffff !important; }
@media (max-width: 768px) {
    button.bn-back-top {
        bottom: 18px !important; left: 14px !important;
        width: 34px !important; height: 34px !important;
    }
    button.bn-back-top svg { width: 13px !important; height: 13px !important; }
}

/* === Panel Blog & Noticias en mega menu desktop === */
.bnm-panel.bn-blog-panel { display: none; }
.bn-blog-panel .bn-blog-list {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
    max-width: 480px;
}
.bn-blog-panel a.bn-blog-item {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    text-decoration: none !important;
    color: #fff !important;
    transition: all .2s;
}
.bn-blog-panel a.bn-blog-item:hover {
    background: rgba(74,123,247,0.12);
    border-color: rgba(107,147,255,0.35);
    transform: translateX(2px);
}
.bn-blog-thumb {
    width: 64px; height: 64px; flex-shrink: 0;
    border-radius: 8px; overflow: hidden;
    background: linear-gradient(135deg, #1a1f3a, #0a0e27);
}
.bn-blog-thumb img,
.bn-blog-thumb-ph {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.bn-blog-meta {
    display: flex; flex-direction: column;
    gap: 4px; flex: 1; min-width: 0;
}
.bn-blog-title {
    color: #fff !important;
    font-size: 14px; font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bn-blog-date {
    color: #96B4FF !important;
    font-size: 11px; font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.bn-blog-all {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 18px;
    color: #6B93FF !important;
    font-size: 13px; font-weight: 600;
    text-decoration: none !important;
    border: 1px solid rgba(107,147,255,0.3);
    border-radius: 999px;
    transition: all .2s;
}
.bn-blog-all:hover {
    background: rgba(74,123,247,0.15);
    border-color: #6B93FF;
}

/* === Fix: títulos Diagnóstico/Planificación/etc desplazados a la derecha del número === */
.elementor-element-d3818ea .elementskit-info-box-title,
.elementor-element-3a1a52bd .elementskit-info-box-title,
.elementor-element-a96fa54 .elementskit-info-box-title,
.elementor-element-69199d86 .elementskit-info-box-title {
    padding-left: 56px !important;
    position: relative !important;
    z-index: 3 !important;
}
.elementor-element-d3818ea .elementskit-info-box-icon,
.elementor-element-3a1a52bd .elementskit-info-box-icon,
.elementor-element-a96fa54 .elementskit-info-box-icon,
.elementor-element-69199d86 .elementskit-info-box-icon {
    margin-left: 56px !important;
}
@media (max-width: 768px) {
    .elementor-element-d3818ea .elementskit-info-box-title,
    .elementor-element-3a1a52bd .elementskit-info-box-title,
    .elementor-element-a96fa54 .elementskit-info-box-title,
    .elementor-element-69199d86 .elementskit-info-box-title {
        padding-left: 48px !important;
    }
    .elementor-element-d3818ea .elementskit-info-box-icon,
    .elementor-element-3a1a52bd .elementskit-info-box-icon,
    .elementor-element-a96fa54 .elementskit-info-box-icon,
    .elementor-element-69199d86 .elementskit-info-box-icon {
        margin-left: 48px !important;
    }
}

/* === Fix: reducir espacio Agenda → WhatsApp === */
/* Quitar margin-bottom del widget Elementor Agenda */
.elementor-element-5ee058c3 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.elementor-element-5ee058c3 .elementor-widget-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* Acercar mi container de botones extra al Agenda */
.bn-extra-btns {
    margin-top: 14px !important;
}

/* === Fix definitivo: pegar WhatsApp al Agenda tu cita === */
/* Quitar TODO el margin/padding bottom del widget Agenda y sus parents */
.elementor-element-5ee058c3,
.elementor-element-5ee058c3 > .elementor-widget-container,
.elementor-element-5ee058c3 .ekit-wid-con,
.elementor-element-5ee058c3 .ekit-btn-wraper {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}
.elementor-element-5ee058c3 a.elementskit-btn {
    margin-bottom: 0 !important;
    line-height: 1 !important;
}
/* Mi container con margin negativo para subir el WhatsApp pegado al Agenda */
.bn-extra-btns {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}


/* === Loom iframe dentro de card bnpr de My Tour EC === */
a.bnpr-media iframe.bn-loom-iframe {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9;
    display: block !important;
    border: 0 !important;
    background: #000;
}
/* Si el link no tiene height definida, asegurar aspect ratio */
a.bnpr-media:has(iframe.bn-loom-iframe) {
    display: block !important;
    position: relative !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* === Fix DEFINITIVO: padding 0 en TODO el container parent del botón Agenda === */
/* Subir varios niveles del DOM y resetear padding/margin */
.elementor-element-5ee058c3,
.elementor-element-5ee058c3 *,
.elementor-element-5ee058c3 > .elementor-widget-container,
.elementor-element-5ee058c3 > .elementor-widget-container > * {
    margin: 0 !important;
    padding: 0 !important;
}
/* Excepto el botón en sí (debe mantener su padding interno 0 22px) */
.elementor-element-5ee058c3 a.elementskit-btn {
    padding: 0 22px !important;
}
/* El padre directo del widget Agenda — quitar padding 10px 0 del e-con-inner */
.elementor-element-5ee058c3 ~ * .e-con-inner,
.elementor-element:has(> .elementor-widget-container > .ekit-wid-con) .e-con-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Container padre con clase e-con que contiene al botón Agenda */
.e-con:has(.elementor-element-5ee058c3),
.e-con:has(.elementor-element-5ee058c3) .e-con-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 14px !important;
}
/* Mi container de los 2 botones extra: justo después */
.bn-extra-btns {
    margin: 0 !important;
    padding: 0 !important;
    gap: 14px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* === Fix Loom iframe: aspect-ratio correcto + centrado === */
/* La card My Tour EC con iframe Loom — forzar aspect 16:9 y llenarla */
a.bnpr-media[href*="mytourec"] {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: inherit;
    background: #000 !important;
}
a.bnpr-media[href*="mytourec"] iframe.bn-loom-iframe,
a.bnpr-media[href*="mytourec"] iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
    transform: none !important;
    object-fit: cover !important;
}
/* La span del tag "Sitio web" debe estar encima del iframe */
a.bnpr-media[href*="mytourec"] .bnpr-tag {
    position: absolute !important;
    z-index: 5 !important;
    top: 12px !important;
    left: 12px !important;
}

/* ============================================================
   FIX MOBILE: centrar WhatsApp + Escríbenos (<=768px)
   - NO toca el widget Agenda (ya queda centrado en el screenshot)
   - SOLO ataca el wrapper .bn-extra-btns y sus botones extras
   - Sin :has() para soporte amplio en navegadores
   - Síntesis del workflow w0wn80x50 + ajustes de verificación adversarial
   ============================================================ */
@media (max-width: 768px) {
    body .bn-extra-btns,
    div.bn-extra-btns,
    .bn-extra-btns {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
        margin: 14px auto 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        align-self: center !important;
    }
    .bn-extra-btn,
    a.bn-extra-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
        align-self: center !important;
    }
}

@media (max-width: 480px) {
    body .bn-extra-btns,
    .bn-extra-btns {
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
    .bn-extra-btn,
    a.bn-extra-btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================================
   LOOM iframe HD + reproducción rápida (overrides robustos)
   ============================================================ */
a.bnpr-media iframe.bn-loom-iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
}

/* ============================================================
   FIX MOBILE: aplanar el gap entre los 3 botones
   El widget Agenda tu cita (.elementor-element-5ee058c3) deja un
   margin-bottom heredado del Elementor en móvil que separa demasiado
   "Agenda tu cita" de "WhatsApp". Lo eliminamos para uniformar el
   espaciado vertical a 14px entre los 3 botones.
   ============================================================ */
@media (max-width: 768px) {
    .elementor-element-5ee058c3,
    .elementor-element-5ee058c3 .elementor-widget-container,
    .elementor-element-5ee058c3 .ekit-btn-wraper,
    .elementor-element-5ee058c3 .ekit-wid-con {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    /* El gap entre Agenda y WhatsApp lo controla SOLO margin-top de .bn-extra-btns */
    body .bn-extra-btns,
    .bn-extra-btns {
        margin-top: 14px !important;
        padding-top: 0 !important;
    }
    /* El botón Agenda no debe tener margin propio */
    .elementor-element-5ee058c3 a.elementskit-btn {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 480px) {
    .elementor-element-5ee058c3,
    .elementor-element-5ee058c3 .elementor-widget-container,
    .elementor-element-5ee058c3 .ekit-btn-wraper,
    .elementor-element-5ee058c3 .ekit-wid-con {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    body .bn-extra-btns,
    .bn-extra-btns {
        margin-top: 14px !important;
        padding-top: 0 !important;
    }
}

/* ============================================================
   FIX MOBILE: aplanar padding del .e-con-inner que envuelve
   el bloque "Transforma tu empresa hoy! + Agenda + WhatsApp + Escríbenos"
   data-id="996adb1" (estable en Elementor).
   El padding-bottom de este container era lo que metía el espacio
   extra entre Agenda y WhatsApp visible en DevTools.
   ============================================================ */
@media (max-width: 768px) {
    .elementor-element-996adb1,
    .elementor-element-996adb1 > .e-con-inner,
    [data-id="996adb1"],
    [data-id="996adb1"] > .e-con-inner {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* El margin-top de .bn-extra-btns ya separa Agenda de WhatsApp con 14px */
    /* WhatsApp ↔ Escríbenos están separados por gap:14px del flex column */
    /* Resultado: Agenda → WhatsApp = 14px, WhatsApp → Escríbenos = 14px */
}

@media (max-width: 480px) {
    .elementor-element-996adb1,
    .elementor-element-996adb1 > .e-con-inner,
    [data-id="996adb1"],
    [data-id="996adb1"] > .e-con-inner {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ============================================================
   YouTube Facade Click-to-Play (bypass bot check)
   Reemplaza iframes YouTube por <button> con thumbnail.
   Click → JS infla iframe autoplay.
   ============================================================ */
.bn-yt-facade {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #000 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
    z-index: 3;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
}

/* Play button overlay (estilo YouTube) */
.bn-yt-facade::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 68px; height: 48px;
    background: rgba(20, 20, 20, 0.75);
    border-radius: 14%;
    transition: background 0.2s ease;
    pointer-events: none;
}

.bn-yt-facade::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-35%, -50%);
    width: 0; height: 0;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
    pointer-events: none;
}

.bn-yt-facade:hover::before,
.bn-yt-facade:focus::before {
    background: #ff0000;
}

.bn-yt-facade:focus {
    outline: 2px solid #6B93FF;
    outline-offset: 2px;
}

/* Gradient sutil arriba para que el bnpr-tag se vea */
.bn-yt-facade::before { z-index: 2; }
.bn-yt-facade::after  { z-index: 3; }

a.bnpr-media:has(.bn-yt-facade) {
    position: relative !important;
    display: block !important;
    overflow: hidden;
}

/* iframe activo tras click */
iframe.bn-yt-iframe-active {
    z-index: 4;
}

/* ============================================================
 *  BLUE NOVA — BLOG MEGA-PANEL (append a home-subtitles.css)
 *  Reemplaza/extiende el bloque actual .bn-blog-panel (lineas 214-235)
 * ============================================================ */

/* === Desktop only === */
@media (min-width: 1025px) {

  /* ---------- Panel col 2: lista de posts ---------- */
  .bnm-panel.bn-blog-panel { display: none; }
  .bnm-panel.bn-blog-panel.is-active { display: block; }

  .bn-blog-panel .bnm-panel-label {
    margin-bottom: 14px;
  }

  .bn-blog-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a.bn-blog-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background-color .18s ease, transform .18s ease;
  }
  a.bn-blog-item:hover,
  a.bn-blog-item:focus-visible {
    background: rgba(255, 255, 255, .06);
    transform: translateX(2px);
    outline: none;
  }

  .bn-blog-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #1a1f2e center/cover no-repeat;
    flex-shrink: 0;
  }
  .bn-blog-thumb--ph {
    background-image: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  }

  .bn-blog-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .bn-blog-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bn-blog-date {
    font-size: 11px;
    opacity: .6;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* CTA al final del panel — refuerza la nav a /blog/ */
  a.bn-blog-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    transition: filter .18s ease, transform .18s ease;
  }
  a.bn-blog-cta:hover { filter: brightness(1.1); transform: translateX(2px); }

  /* Skeleton / empty */
  .bn-blog-list--loading .bn-blog-skeleton {
    display: block;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(90deg,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,.09) 50%,
      rgba(255,255,255,.04) 100%);
    background-size: 200% 100%;
    animation: bnBlogShimmer 1.2s linear infinite;
  }
  .bn-blog-empty {
    display: block;
    opacity: .6;
    font-size: 13px;
    padding: 8px 4px;
  }

  /* ---------- Card col 3: collage visual ---------- */
  .bnm-card.bn-blog-card { display: none; }
  .bnm-card.bn-blog-card.is-active {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .bn-blog-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    min-height: 240px;
  }
  /* Primera tile ocupa toda la columna izquierda (hero) */
  .bn-blog-card-grid > .bn-blog-card-tile:nth-child(1) {
    grid-row: 1 / span 2;
  }

  a.bn-blog-card-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: #14182a center/cover no-repeat;
    text-decoration: none;
    color: #fff;
    min-height: 110px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  a.bn-blog-card-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
  }
  a.bn-blog-card-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.78) 100%);
    pointer-events: none;
  }
  .bn-blog-card-tile-title {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    z-index: 2;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Skeleton card */
  .bn-blog-card-grid--loading > .bn-blog-card-skeleton {
    display: block;
    border-radius: 12px;
    background: linear-gradient(90deg,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,.09) 50%,
      rgba(255,255,255,.04) 100%);
    background-size: 200% 100%;
    animation: bnBlogShimmer 1.4s linear infinite;
  }
  .bn-blog-card-grid--loading > .bn-blog-card-skeleton:nth-child(1) {
    grid-row: 1 / span 2;
  }
  .bn-blog-card-empty {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .6;
    font-size: 13px;
  }

  @keyframes bnBlogShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Hook opcional para el link Blog hovered */
  .bnm-cat--link.is-hover { /* el tema decide; hook listo */ }
}

/* === Mobile: ocultar definitivamente === */
@media (max-width: 1024px) {
  .bnm-panel.bn-blog-panel,
  .bnm-card.bn-blog-card { display: none !important; }
}