/* ============================================================
   BLOG — rediseño en sintonía con la home y la página de precios.
   Reutiliza los tokens: azul --primary-color #125781, acento
   naranja #FF7400, tarjetas blancas redondeadas, degradado azul
   con patrón de puntos. Estilos scoped a .blog_page.
   ============================================================ */

.blog_page {
    color: #1f2a36;
    overflow-x: hidden;
}

/* ---------- HERO ---------- */
.blog_hero {
    position: relative;
    overflow: hidden;
    padding: 46px 24px 116px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(900px 480px at 0% 0%, rgba(255, 116, 0, 0.16), transparent 60%),
        radial-gradient(900px 460px at 100% 100%, rgba(30, 122, 179, 0.45), transparent 60%),
        linear-gradient(180deg, #1a6f9e 0%, #125781 50%, #0f4d72 100%);
}

.blog_hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.55;
    pointer-events: none;
}

.blog_hero > * {
    position: relative;
    z-index: 1;
}

.blog_overline {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 18px;
}

.blog_hero h1 {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin: 0 auto 16px;
    max-width: 680px;
    color: #fff;
}

.blog_hero .hero_sub {
    max-width: 600px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 400;
}

/* ---------- FILTROS DE CATEGORÍA (chips) ---------- */
.blog_filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.blog_filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.blog_filter:hover {
    background: rgba(255, 255, 255, 0.2);
}

.blog_filter.active {
    background: #fff;
    color: var(--primary-color);
    border-color: #fff;
    font-weight: 600;
}

/* ---------- CONTENEDOR / SECCIONES ---------- */
.blog_section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 62px 20px 0;
}

.blog_section.last {
    padding-bottom: 20px;
}

/* ============================================================
   POST DESTACADO / FIJADO — módulo principal de la portada /blog
   Pieza ÚNICA, moderna y tecnológica. Se solapa con el hero azul.
   Toda la tarjeta es un solo enlace clicable (sin enlaces anidados).
   ============================================================ */
.blog_featured_wrap {
    max-width: 1000px;
    margin: -64px auto 0;
    padding: 0 20px 22px;
    position: relative;
    z-index: 3;
}

/* Fondo inmediato: gris azulado muy suave + formas azules de baja opacidad,
   con transición natural desde la cabecera azul. Sin bloque azul intenso. */
.blog_featured_wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    width: min(940px, 96%);
    height: calc(100% - 18px);
    border-radius: 34px;
    background:
        radial-gradient(460px 240px at 8% 2%, rgba(26, 111, 158, 0.11), transparent 62%),
        radial-gradient(360px 220px at 98% 100%, rgba(37, 99, 140, 0.07), transparent 60%),
        linear-gradient(180deg, rgba(223, 234, 245, 0.55), rgba(240, 245, 250, 0));
    z-index: -1;
    pointer-events: none;
}

.blog_featured {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: linear-gradient(135deg, #ffffff 0%, #f5f9fc 55%, #eef3f9 100%);
    border-radius: 22px;
    border: 1px solid rgba(18, 87, 129, 0.11);
    box-shadow: 0 16px 40px rgba(10, 40, 64, 0.09), 0 2px 5px rgba(10, 40, 64, 0.04);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Textura tecnológica muy sutil (no dificulta la lectura) */
.blog_featured::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(18, 87, 129, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.blog_featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 54px rgba(10, 40, 64, 0.15), 0 3px 8px rgba(10, 40, 64, 0.06);
    border-color: rgba(26, 111, 158, 0.28);
    text-decoration: none;
}

/* ---------- IMAGEN (≈54% en escritorio, con presencia) ---------- */
.blog_featured_media {
    flex: 1 1 50%;
    position: relative;
    min-height: 296px;
    overflow: hidden;
    background: linear-gradient(160deg, #edf3fa 0%, #e1ebf5 100%);
    z-index: 0;
}

.blog_featured_media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog_featured:hover .blog_featured_media img {
    transform: scale(1.02);
}

/* Divisor fino y discreto entre imagen y contenido (gris azulado, sin naranja) */
.blog_featured_media::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: rgba(18, 87, 129, 0.10);
    z-index: 1;
}

/* ---------- CONTENIDO (≈46% en escritorio) ---------- */
.blog_featured_body {
    flex: 1 1 50%;
    padding: 34px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* Etiqueta base */
.blog_tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(18, 87, 129, 0.08);
    padding: 6px 13px;
    border-radius: 999px;
}

/* Etiqueta naranja del destacado (presente, sin dominar) */
.blog_featured_body .blog_tag.is_pinned {
    align-self: flex-start;
    margin: 0;
    background: linear-gradient(135deg, #ED6F18 0%, #F58E4A 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(237, 111, 24, 0.28);
}

/* Fecha + ubicación: línea discreta en gris azulado, icono pequeño */
.blog_feat_date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0 15px;
    font-size: 13.5px;
    font-weight: 500;
    color: #5f7183;
}

.blog_feat_date svg {
    width: 15px;
    height: 15px;
    fill: #8a97a6;
    flex-shrink: 0;
}

/* Evita que la fecha o la ubicación se dividan de forma incómoda */
.blog_feat_date .nb { white-space: nowrap; }

/* Título: elemento textual principal */
.blog_featured_body h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #12222f;
    margin: 0 0 12px;
}

/* El título es el ÚNICO enlace real; su ::after se estira (stretched link)
   para que toda la tarjeta sea clicable sin anidar enlaces. */
.blog_featured_body h2 a {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.blog_featured_body h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Resumen: gris azulado con buen contraste */
.blog_featured_body p {
    font-size: 15.5px;
    line-height: 1.6;
    color: #566575;
    margin: 0 0 22px;
    max-width: 46ch;
}

/* CTA con presencia: botón naranja + flecha discreta.
   Es un enlace decorativo (aria-hidden) por encima del stretched link. */
.blog_feat_cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, #ED6F18 0%, #F58E4A 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: 11px;
    box-shadow: 0 10px 22px rgba(237, 111, 24, 0.30);
    transition: box-shadow 0.3s ease, filter 0.3s ease;
}

.blog_feat_cta svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.blog_featured:hover .blog_feat_cta {
    box-shadow: 0 15px 28px rgba(237, 111, 24, 0.42);
    filter: brightness(1.03);
}

.blog_featured:hover .blog_feat_cta svg {
    transform: translateX(3px);
}

/* Accesibilidad por teclado: elevar la tarjeta al enfocar el enlace del título
   y mostrar un foco visible claro. */
.blog_featured:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 36px 74px rgba(10, 40, 64, 0.22), 0 4px 10px rgba(10, 40, 64, 0.08);
    border-color: rgba(26, 111, 158, 0.42);
}

.blog_featured_body h2 a:focus-visible::after {
    outline: 3px solid #FF7400;
    outline-offset: 4px;
    border-radius: 24px;
}

.blog_feat_cta:focus-visible {
    outline: 3px solid #0f3b57;
    outline-offset: 3px;
}

/* ---------- REJILLA "Últimas noticias" (tarjetas más discretas que la destacada) ----------
   2 columnas en escritorio; 1 (o 2) en tablet; 1 en móvil. Una sola tarjeta
   queda alineada a la izquierda, sin estirarse a todo el ancho. */
.blog_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 480px));
    justify-content: start;
    gap: 30px;
    margin-top: 34px;
}

.blog_card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(18, 87, 129, 0.12);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 24px rgba(10, 40, 64, 0.06);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.blog_card:hover {
    transform: translateY(-4px);
    border-color: rgba(26, 111, 158, 0.28);
    box-shadow: 0 18px 38px rgba(10, 40, 64, 0.12);
}

.blog_card_media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #eef4f9 0%, #f6f9fc 100%);
    overflow: hidden;
}

.blog_card_media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog_card:hover .blog_card_media img {
    transform: scale(1.02);
}

.blog_card_body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 22px 22px;
}

.blog_card_body .blog_tag {
    align-self: flex-start;
    margin-bottom: 12px;
}

.blog_card_date {
    font-size: 12.5px;
    color: #8a95a1;
    margin-bottom: 8px;
}

.blog_card_body h3 {
    font-size: 18.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #14212e;
    margin: 0 0 10px;
}

.blog_card_body h3 a {
    color: inherit;
    text-decoration: none;
    outline: none;
}

/* Toda la tarjeta es clicable mediante el enlace del título (stretched link) */
.blog_card_body h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.blog_card_body h3 a:focus-visible::after {
    outline: 3px solid #FF7400;
    outline-offset: 3px;
    border-radius: 16px;
}

.blog_card_body p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #6b7785;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog_card_cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #FF7400;
}

.blog_card_cta svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.blog_card:hover .blog_card_cta svg { transform: translateX(3px); }

/* ---------- ESTADO VACÍO (aún sin noticias) ---------- */
.blog_empty {
    max-width: 640px;
    margin: 44px auto 0;
    text-align: center;
    background: #fff;
    border: 1px dashed rgba(18, 87, 129, 0.28);
    border-radius: 16px;
    padding: 40px 30px;
}

.blog_empty svg {
    width: 46px;
    height: 46px;
    fill: var(--primary-color);
    opacity: 0.5;
    margin-bottom: 14px;
}

.blog_empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1a2632;
    margin: 0 0 8px;
}

.blog_empty p {
    color: #6b7785;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* ---------- CTA FINAL ---------- */
.blog_cta {
    margin: 104px auto 84px;
    max-width: 980px;
    padding: 0 20px;
}

.blog_cta_inner {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 38px 40px;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(700px 300px at 100% 0%, rgba(255, 116, 0, 0.12), transparent 60%),
        linear-gradient(120deg, #1a6f9e 0%, #125781 55%, #0f4d72 100%);
}

.blog_cta_inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.5;
    pointer-events: none;
}

.blog_cta_inner > * {
    position: relative;
    z-index: 1;
}

.blog_cta_inner h2 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 9px;
    color: #fff;
}

.blog_cta_inner p {
    max-width: 560px;
    margin: 0 auto 24px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.blog_cta_btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #ED6F18 0%, #F58E4A 100%);
    color: #fff;
    font-weight: 600;
    font-size: 15.5px;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(237, 111, 24, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.blog_cta_btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 14px 30px rgba(237, 111, 24, 0.4);
    text-decoration: none;
}

.blog_cta_btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ---------- RESPONSIVE ---------- */

/* Tablet grande: proporciones y padding cómodos */
@media (max-width: 1024px) {
    .blog_featured_body { padding: 30px 32px; }
    .blog_featured_body h2 { font-size: 24px; }
}

/* Tablet: cabecera más baja y menos solapamiento */
@media (max-width: 900px) {
    .blog_hero { padding: 40px 20px 100px; }
    .blog_hero h1 { font-size: 33px; max-width: 90%; }
    .blog_featured_wrap { margin-top: -56px; }
}

/* Tablet estrecha / móvil ancho: apilar en UNA sola tarjeta, imagen arriba */
@media (max-width: 760px) {
    .blog_featured { flex-direction: column; }
    .blog_featured_media {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
    .blog_featured_media::after {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: rgba(18, 87, 129, 0.10);
    }
    .blog_featured_body { flex: 1 1 auto; padding: 28px 26px 30px; }
}

@media (max-width: 640px) {
    .blog_hero { padding: 34px 18px 86px; }
    .blog_hero h1 { font-size: 25px; line-height: 1.22; }
    .blog_hero .hero_sub { font-size: 15px; }
    .blog_section { padding-top: 44px; }
    .blog_grid { grid-template-columns: 1fr; gap: 22px; }
    .blog_featured_wrap { margin-top: -48px; padding-bottom: 6px; }
    .blog_featured { border-radius: 18px; }
    .blog_featured_media { aspect-ratio: 4 / 3; }
    .blog_featured_body { padding: 24px 22px 26px; }
    .blog_featured_body h2 { font-size: 22px; line-height: 1.24; }
    .blog_featured_body p { font-size: 15px; margin-bottom: 20px; }
    .blog_feat_date { font-size: 13px; flex-wrap: wrap; }
    .blog_feat_cta {
        width: 100%;
        justify-content: center;
        padding: 15px 22px;
        font-size: 15.5px;
    }
    .blog_cta { margin: 72px auto 60px; }
    .blog_cta_inner { padding: 34px 24px; }
    .blog_cta_inner h2 { font-size: 22px; }
    /* En táctil, sin micro-efectos hover innecesarios */
    .blog_featured:hover { transform: none; }
    .blog_featured:hover .blog_featured_media img { transform: none; }
}


/* ============================================================
   ARTÍCULO DE BLOG (single post) — scoped a .blog_article
   Columna de lectura cómoda, jerarquía clara, estilo B2B.
   ============================================================ */

.blog_article {
    color: #1f2a36;
    overflow-x: hidden;
}

/* ---------- HERO DEL ARTÍCULO ---------- */
.article_hero {
    position: relative;
    overflow: hidden;
    padding: 74px 24px 86px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(720px 420px at 82% -12%, rgba(255, 116, 0, 0.30), transparent 58%),
        radial-gradient(680px 520px at -8% 118%, rgba(37, 138, 199, 0.55), transparent 55%),
        linear-gradient(158deg, #15628d 0%, #0f4d72 58%, #0b3d5b 100%);
}

.article_hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
    pointer-events: none;
}

/* Línea de acento naranja al pie de la cabecera */
.article_hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, #ED6F18, #F9A45C, #ED6F18);
}

.article_hero > * {
    position: relative;
    z-index: 1;
}

.article_hero .article_cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ED6F18 0%, #F58E4A 100%);
    border: none;
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 22px;
    box-shadow: 0 8px 20px rgba(237, 111, 24, 0.34);
}

.article_hero .article_cat svg {
    width: 13px;
    height: 13px;
    fill: #fff;
    flex-shrink: 0;
}

.article_hero h1 {
    max-width: 940px;
    margin: 0 auto;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

.article_hero .article_facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

/* "Botones" naranjas de datos clave (fecha · lugar · pabellón/stand) */
.article_hero .article_fact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ED6F18 0%, #F58E4A 100%);
    border: none;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 10px 22px rgba(237, 111, 24, 0.30);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article_hero .article_fact:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(237, 111, 24, 0.4);
}

.article_hero .article_fact svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    flex-shrink: 0;
}

/* ---------- CUERPO / COLUMNA DE LECTURA ---------- */
.article_body {
    max-width: 760px;
    margin: 0 auto;
    padding: 52px 22px 20px;
    font-size: 17px;
    line-height: 1.72;
    color: #35424f;
}

.article_body .article_lead {
    font-size: 20px;
    line-height: 1.6;
    color: #1f2a36;
    font-weight: 400;
    margin: 0 0 28px;
}

/* Firma / autoría de la noticia individual */
.article_byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 0 0 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(18, 87, 129, 0.12);
    font-size: 14px;
    color: #6b7785;
}

.article_byline strong { color: #1a2632; font-weight: 600; }
.article_byline time { color: #6b7785; }

.article_body p {
    margin: 0 0 20px;
}

.article_body h2 {
    font-size: 27px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--primary-color);
    margin: 44px 0 14px;
    padding-top: 6px;
}

.article_body h3 {
    font-size: 19px;
    font-weight: 600;
    color: #14212e;
    margin: 26px 0 8px;
}

.article_body strong { font-weight: 600; color: #1a2632; }

.article_body a {
    color: #0f6ea3;
    text-decoration: none;
    border-bottom: 1px solid rgba(15, 110, 163, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.article_body a:hover {
    color: #FF7400;
    border-bottom-color: #FF7400;
}

.article_body ul {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.article_body ul li {
    position: relative;
    padding: 6px 0 6px 30px;
    line-height: 1.55;
}

.article_body ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 13px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #FF7400);
}

/* ---------- FIGURAS / IMÁGENES ---------- */
.article_figure {
    margin: 34px 0;
}

.article_figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid rgba(18, 87, 129, 0.10);
    box-shadow: 0 16px 36px rgba(10, 40, 64, 0.14);
}

/* Plano de ubicación (apaisado): fondo blanco y borde suave */
.article_figure.is_map img {
    background: #fff;
    object-fit: contain;
    padding: 6px;
}

.article_figure figcaption {
    margin-top: 10px;
    text-align: center;
    font-size: 13.5px;
    color: #8a95a1;
}

/* ---------- BLOQUE DE DATOS (dónde encontrarnos) ---------- */
.article_infobox {
    margin: 30px 0;
    background: #fff;
    border: 1px solid rgba(18, 87, 129, 0.12);
    border-left: 4px solid #FF7400;
    border-radius: 16px;
    padding: 26px 28px;
    box-shadow: 0 12px 28px rgba(10, 40, 64, 0.08);
}

.article_infobox h3 {
    margin: 0 0 16px;
    font-size: 18px;
    color: #123f5c;
}

.article_facts_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px 22px;
    margin: 0;
}

.article_facts_grid div {
    padding: 2px 0;
}

.article_facts_grid dt {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #8a95a1;
    margin-bottom: 3px;
}

.article_facts_grid dd {
    margin: 0;
    font-size: 16.5px;
    font-weight: 600;
    color: #14212e;
}

/* ---------- CTA INVITACIÓN ---------- */
.article_invite {
    margin: 46px 0 8px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 40px 38px;
    color: #fff;
    background:
        radial-gradient(700px 300px at 100% 0%, rgba(255, 116, 0, 0.2), transparent 60%),
        linear-gradient(120deg, #1a6f9e 0%, #125781 55%, #0f4d72 100%);
}

.article_invite::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.5;
    pointer-events: none;
}

.article_invite > * { position: relative; z-index: 1; }

.article_invite h2 {
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    padding: 0;
}

.article_invite p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    line-height: 1.62;
    margin: 0 0 14px;
}

/* Las negritas del recuadro azul deben ser blancas (no heredar el gris
   oscuro de .article_body strong). */
.article_invite strong {
    color: #fff;
    font-weight: 700;
}

.article_invite .invite_btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    background: linear-gradient(135deg, #ED6F18 0%, #F58E4A 100%);
    color: #fff;
    font-weight: 700;
    font-size: 18.5px;
    padding: 17px 34px;
    border-radius: 12px;
    text-decoration: none;
    border: none;
    box-shadow: 0 14px 30px rgba(237, 111, 24, 0.36);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* El botón vive dentro de .article_body; forzamos que el texto siga
   siendo blanco y legible en hover (evita que el hover de enlaces lo
   ponga naranja sobre naranja). */
.article_invite .invite_btn,
.article_invite .invite_btn:hover {
    color: #fff;
    border-bottom: none;
}

.article_invite .invite_btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 18px 36px rgba(237, 111, 24, 0.46);
}

.article_invite .invite_btn svg {
    width: 27px;
    height: 27px;
    fill: #fff;
    flex-shrink: 0;
}

/* ---------- VOLVER AL BLOG ---------- */
.article_back {
    max-width: 760px;
    margin: 8px auto 0;
    padding: 0 22px 8px;
}

.article_back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.article_back a svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------- RESPONSIVE ARTÍCULO ---------- */
@media (max-width: 900px) {
    .article_hero h1 { font-size: 33px; }
    .article_hero { padding: 48px 20px 64px; }
}

@media (max-width: 640px) {
    .article_hero h1 { font-size: 27px; }
    .article_body { padding: 40px 20px 16px; font-size: 16px; }
    .article_body .article_lead { font-size: 18px; }
    .article_body h2 { font-size: 23px; }
    .article_invite { padding: 30px 22px; }
    .article_invite h2 { font-size: 21px; }
    .article_figure.is_map img { max-height: none; }
}


/* ============================================================
   TABLA/GRID "Qué encontrarás en el stand" — tarjetas con icono
   Fondo blanco, acento azul corporativo, buena UX (hover).
   ============================================================ */
.stand_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    margin: 24px 0 10px;
}

.stand_item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border: 1px solid rgba(18, 87, 129, 0.16);
    border-radius: 14px;
    padding: 15px 18px;
    text-decoration: none;
    color: var(--primary-color);
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.stand_item .stand_icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8f3fa 0%, #f4f9fc 100%);
    box-shadow: inset 0 0 0 1px rgba(18, 87, 129, 0.10);
    transition: background 0.25s ease;
}

.stand_item .stand_icon svg {
    width: 23px;
    height: 23px;
    fill: var(--primary-color);
    transition: fill 0.25s ease;
}

.stand_item .stand_label {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--primary-color);
    border-bottom: none;
}

/* Flecha sólo en las tarjetas que son enlace */
a.stand_item .stand_label::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid #FF7400;
    border-top: 2px solid #FF7400;
    transform: rotate(45deg);
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* La animación de hover se aplica a TODAS las tarjetas (con o sin enlace) */
.stand_item:hover {
    transform: translateY(-3px);
    border-color: rgba(18, 87, 129, 0.4);
    box-shadow: 0 14px 28px rgba(10, 40, 64, 0.12);
}

.stand_item:hover .stand_icon {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a6f9e 100%);
}

.stand_item:hover .stand_icon svg {
    fill: #fff;
}

a.stand_item:hover .stand_label::after {
    opacity: 1;
    transform: rotate(45deg) translate(2px, -2px);
}

/* ---------- Tarjeta destacada: Plataforma SaaS ITS (la más importante) ---------- */
.stand_item.featured {
    background: linear-gradient(135deg, #125781 0%, #1a6f9e 100%);
    border-color: transparent;
    box-shadow: 0 16px 32px rgba(18, 87, 129, 0.30);
}

.stand_item.featured .stand_icon {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.stand_item.featured .stand_icon svg { fill: #fff; }
.stand_item.featured .stand_label { color: #fff; }
.stand_item.featured .stand_label::after { border-color: #ffb36b; }

.stand_item.featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(18, 87, 129, 0.42);
}

.stand_item.featured:hover .stand_icon {
    background: rgba(255, 255, 255, 0.26);
}

@media (max-width: 640px) {
    .stand_grid { grid-template-columns: 1fr; gap: 12px; }
    .stand_item { padding: 13px 15px; }
    .stand_item .stand_icon { width: 44px; height: 44px; }
}


/* ============================================================
   LIGHTBOX de imágenes del artículo (ampliar + descargar)
   ============================================================ */
.article_body .article_figure img,
.article_body .article_gallery img,
.case_article .case_hero img { cursor: zoom-in; }

.img_lb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(8, 20, 30, 0.92);
    padding: 30px 24px;
}

.img_lb.open { display: flex; }

.img_lb img {
    max-width: 96vw;
    max-height: 80vh;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.img_lb_actions { margin-top: 20px; }

.img_lb_download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ED6F18 0%, #F58E4A 100%);
    color: #fff;
    font-weight: 600;
    font-size: 15.5px;
    padding: 13px 24px;
    border-radius: 11px;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(237, 111, 24, 0.42);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.img_lb_download:hover { transform: translateY(-2px); filter: brightness(1.06); }
.img_lb_download svg { width: 18px; height: 18px; fill: #fff; }

.img_lb_close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.img_lb_close:hover { background: rgba(255, 255, 255, 0.28); }


/* ============================================================
   ARTÍCULO TIPO "CASO DE ÉXITO" (Cantabria)
   Cabecera clara con migas + etiqueta + H1 + entradilla + autoría,
   imagen principal, franja de cifras, vídeo con fachada y relacionados.
   ============================================================ */
.case_article { color: #35424f; overflow-x: hidden; }

.case_head_wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 22px 4px;
}

.article_breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #9aa4af;
    margin-bottom: 20px;
}
.article_breadcrumbs a { color: #5f7183; text-decoration: none; }
.article_breadcrumbs a:hover { color: var(--primary-color); text-decoration: underline; }
.article_breadcrumbs [aria-current="page"] { color: #6b7785; }

.article_cat--case {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ED6F18 0%, #F58E4A 100%);
    padding: 6px 15px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(237, 111, 24, 0.26);
    margin-bottom: 16px;
}

/* Etiqueta de categoría "Proyectos" — azul corporativo (no naranja) */
.article_cat--project {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #1a6f9e 0%, #125781 100%);
    padding: 6px 15px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(18, 87, 129, 0.24);
    margin-bottom: 16px;
}

/* Galería de imágenes integrada del artículo (2 columnas, sin tarjetas) */
.article_gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 30px 0;
}
.article_gallery figure { margin: 0; }
.article_gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(18, 87, 129, 0.10);
    box-shadow: 0 8px 20px rgba(10, 40, 64, 0.08);
    display: block;
}
.article_gallery figcaption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #8a95a1;
}
@media (max-width: 600px) {
    .article_gallery { grid-template-columns: 1fr; gap: 14px; }
}

.case_head_wrap h1 {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.025em;
    color: #12222f;
    margin: 0 0 16px;
}

.case_lead {
    font-size: 19px;
    line-height: 1.6;
    color: #35424f;
    margin: 0 0 20px;
}

.case_head_wrap .article_byline {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ---------- Imagen principal ---------- */
.case_hero {
    max-width: 960px;
    margin: 26px auto 0;
    padding: 0 22px;
}
.case_hero img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(18, 87, 129, 0.10);
    box-shadow: 0 18px 44px rgba(10, 40, 64, 0.14);
    display: block;
}

/* Cuerpo del caso (columna de lectura ~760px la hereda de .article_body) */
.case_body { padding-top: 32px; }

/* ---------- Franja de cifras (una sola franja, no tres tarjetas) ---------- */
.article_stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: linear-gradient(180deg, #f2f6fb, #edf2f8);
    border: 1px solid rgba(18, 87, 129, 0.10);
    border-radius: 16px;
    margin: 4px 0 30px;
}
.article_stats .stat {
    text-align: center;
    padding: 20px 18px;
    position: relative;
}
.article_stats .stat + .stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(18, 87, 129, 0.14);
}
.article_stats .stat_num {
    display: block;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.article_stats .stat_label {
    display: block;
    font-size: 13.5px;
    line-height: 1.4;
    color: #5f7183;
}

/* ---------- Vídeo: fachada tipo lite-youtube ---------- */
.video_block { margin: 34px 0; }
.lyt {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #0b2033;
    box-shadow: 0 18px 40px rgba(10, 40, 64, 0.18);
}
.lyt-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: block;
}
.lyt-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.3s ease;
}
.lyt-btn:hover .lyt-thumb { transform: scale(1.03); filter: brightness(0.92); }
.lyt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 50px;
    transition: transform 0.25s ease;
}
.lyt-btn:hover .lyt-play { transform: translate(-50%, -50%) scale(1.08); }
.lyt-play svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)); }
.lyt-play-bg { fill: #FF0000; opacity: 0.92; }
.lyt-btn:hover .lyt-play-bg { opacity: 1; }
.lyt-btn:focus-visible { outline: 3px solid #FF7400; outline-offset: -3px; }
.lyt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video_block figcaption {
    margin-top: 12px;
    text-align: center;
    font-size: 13.5px;
    color: #8a95a1;
}

/* ---------- Contenido relacionado ---------- */
.article_related {
    margin: 42px 0 8px;
    padding: 24px 26px;
    background: #f5f8fc;
    border: 1px solid rgba(18, 87, 129, 0.10);
    border-radius: 16px;
}
.article_related h2 {
    font-size: 18px;
    margin: 0 0 12px;
    padding-top: 0;
    color: #123f5c;
}
.article_related ul { margin: 0; padding: 0; list-style: none; }
.article_related li { padding: 8px 0 8px 26px; border-bottom: 1px solid rgba(18, 87, 129, 0.08); }
.article_related li:last-child { border-bottom: none; }
.article_related li::before { left: 4px; top: 15px; }
.article_related a {
    color: #0f6ea3;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    border-bottom: none;
}
.article_related a:hover { color: #FF7400; text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .case_head_wrap { padding-top: 22px; }
    .case_head_wrap h1 { font-size: 27px; }
    .case_lead { font-size: 16.5px; }
    .case_hero { padding: 0 16px; }
    .article_stats { grid-template-columns: 1fr; }
    .article_stats .stat + .stat::before {
        left: 18%;
        right: 18%;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
    }
}


/* ============================================================
   IDENTIDAD EDITORIAL DEL BLOG (v1.3)
   Toda la zona de contenido del blog usa un fondo gris muy claro
   (#F3F6F8) para diferenciar la sección del resto de la web, y cada
   artículo se lee dentro de un ÚNICO contenedor blanco. Cambio sutil,
   limpio y premium. La cabecera del sitio y el footer no se tocan.
   ============================================================ */
:root { --blog-bg: #F3F6F8; }

/* Fondo gris muy claro: la cabecera azul se mantiene; el gris empieza
   justo debajo. Aplica a la portada y a los artículos (ES/EN/FR). */
.blog_page,
.blog_article { background: var(--blog-bg); }

/* Portada: las tarjetas siguen siendo blancas y ahora destacan más
   sobre el gris, con sombras algo más contenidas (sensación premium). */
.blog_page .blog_card { box-shadow: 0 6px 20px rgba(10, 40, 64, 0.05); }
.blog_page .blog_card:hover { box-shadow: 0 16px 34px rgba(10, 40, 64, 0.11); }

/* ---------- Contenedor blanco único de lectura (artículos) ----------
   DOS niveles compartidos por TODOS los artículos (actuales y futuros):
   1) Contenedor editorial EXTERIOR ancho (~1160px): breadcrumb, categoría,
      H1, entradilla, autoría, imagen principal, cuerpo, vídeo y CTA.
   2) Columna de lectura INTERIOR (~800px, centrada) solo para el texto.
   Los bloques visuales (hero, figuras, galerías, vídeo, cifras, rejilla,
   CTA) aprovechan todo el ancho del contenedor; el texto se mantiene
   legible. Fondo blanco, borde fino gris azulado, esquinas y sombra suave. */
:root { --read-width: 800px; }

.article_shell {
    width: min(1160px, calc(100% - 48px));
    margin: 48px auto 0;
    background: #fff;
    border: 1px solid rgba(18, 87, 129, 0.10);
    border-radius: 26px;
    box-shadow: 0 16px 44px rgba(10, 40, 64, 0.06), 0 2px 6px rgba(10, 40, 64, 0.03);
    padding: 48px 56px 52px;
}

/* Los hijos directos ocupan el ancho interior del contenedor (sin ancho
   ni padding propios: se apoyan en el padding del contenedor). */
.article_shell > .case_hero,
.article_shell > .article_body {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.article_shell > .case_hero { margin: 30px 0 0; padding: 0; }
.article_shell > .article_body { margin: 0; padding: 40px 0 6px; }
.article_shell > .case_body { padding-top: 32px; }

/* --- Columna de lectura: el TEXTO se centra a ~800px --- */
.article_shell > .case_head_wrap {
    max-width: var(--read-width);
    margin: 4px auto 0;
    padding: 0;
}
.article_shell .article_body > p,
.article_shell .article_body > h2,
.article_shell .article_body > h3,
.article_shell .article_body > ul,
.article_shell .article_body > ol {
    max-width: var(--read-width);
    margin-left: auto;
    margin-right: auto;
}

/* --- Los bloques visuales aprovechan TODO el ancho del contenedor --- */
.article_shell > .case_hero,
.article_shell .article_body > .article_figure,
.article_shell .article_body > .article_gallery,
.article_shell .article_body > .video_block,
.article_shell .article_body > .article_stats,
.article_shell .article_body > .stand_grid,
.article_shell .article_body > .article_invite,
.article_shell .article_body > .article_related {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Imagen principal: más presencia, misma proporción, esquinas redondeadas. */
.article_shell .case_hero img {
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(10, 40, 64, 0.10);
}
.article_shell .article_figure img {
    box-shadow: 0 10px 24px rgba(10, 40, 64, 0.10);
}

/* Ritmo vertical algo más holgado (sin exagerar). */
.article_shell .article_body > h2 { margin-top: 46px; }

/* --- Composición centrada y equilibrada ----------------------------------
   La cabecera del artículo (migas, categoría, H1, entradilla, autoría) y los
   títulos de sección (H2 azul) van CENTRADOS, alineados con el eje de la
   imagen principal y los bloques visuales (que ocupan todo el ancho). El
   cuerpo de párrafos se mantiene legible. Solo afecta a los H2 de sección
   (hijos directos del cuerpo), no a los de CTA / contenido relacionado. */
.article_shell > .case_head_wrap { text-align: center; }
.article_shell .case_head_wrap .article_breadcrumbs { justify-content: center; }
.article_shell .article_byline { justify-content: center; text-align: center; }
.article_shell .article_body > .article_lead { text-align: center; }
.article_shell .article_body > h2 { text-align: center; }

/* "Volver al blog" queda sobre el fondo gris, fuera del contenedor,
   alineado con el borde del bloque de lectura. */
.blog_article .article_back {
    width: min(1160px, calc(100% - 48px));
    max-width: none;
    margin: 26px auto 0;
    padding: 0 8px 48px;
}

/* ---------- Responsive del contenedor ---------- */
@media (max-width: 1024px) {
    .article_shell { padding: 40px 44px 44px; }
}
@media (max-width: 760px) {
    .article_shell {
        width: min(1160px, calc(100% - 32px));
        padding: 32px 32px 36px;
        margin-top: 34px;
    }
}
@media (max-width: 560px) {
    .article_shell {
        width: min(1160px, calc(100% - 22px));
        padding: 20px 20px 26px;
        border-radius: 18px;
        margin-top: 20px;
    }
    .article_shell > .article_body { padding-top: 26px; }
    .article_shell .article_body > h2 { margin-top: 34px; }
    .blog_article .article_back {
        width: min(1160px, calc(100% - 22px));
        padding-bottom: 30px;
    }
}