/* ========================================================
   BLOG — ver home.php e inc/blog/render.php.
   Color y tipografía desde los tokens de style.css.
   ======================================================== */

/* ========================================================
   PEGADO AL MENÚ
   Reglas GEMELAS de las de las landings (css/ayuda.css, css/cupones.css…): cada una carga solo
   su hoja y todas necesitan lo mismo. Si Kadence cambia sus clases, hay que tocarlas todas.
   ======================================================== */
body.mmc-blog-pagina .content-area,
body.mmc-blog-pagina .site-main,
body.mmc-blog-pagina .entry-content-wrap,
body.mmc-blog-pagina .content-container,
body.mmc-blog-pagina .site-container,
body.mmc-blog-pagina .wp-site-blocks,
body.mmc-blog-pagina #primary {
    padding-top: 0 !important;
    margin-top: 0 !important;
    max-width: none !important;
}
body.mmc-blog-pagina .wp-block-kadence-header,
body.mmc-blog-pagina .kb-header-placeholder-wrapper { margin-bottom: 0 !important; }


/* ========================================================
   BASE
   ======================================================== */
.mmc-blog {
    /* Lo que mide el menú pegajoso de Kadence. Lo afina js/blog.js al cargar; este valor es el
       que vale mientras tanto y si el script no llega a correr. */
    --mmc-blog-menu: 80px;

    font-family: var(--mmc-fuente);
    color: var(--mmc-texto);
    /* `clip` y no `hidden`: `hidden` crearía un contenedor de scroll y el filtro dejaría de
       poder pegarse al menú. */
    overflow-x: clip;
}

/* La banda gris de la cabecera y la rejilla, de borde a borde de la ventana. */
.mmc-blog-fondo {
    background: var(--mmc-fondo-suave);
}
.mmc-blog-caja {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 20px 72px;
}


/* ========================================================
   FILTRO DE CATEGORÍAS
   Se queda pegado justo debajo del menú al bajar.
   ======================================================== */
.mmc-blog-filtros {
    position: sticky;
    top: var(--mmc-blog-menu);
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--mmc-borde);
}
.mmc-blog-filtros-caja {
    display: flex;
    justify-content: center;
    gap: 6px;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mmc-blog-filtros-caja::-webkit-scrollbar { display: none; }

/* Kadence repinta cualquier <button> al enfocarlo con su propio fondo Y con color:#fff. Hay que
   neutralizar las dos cosas, en todos los estados, o la píldora activa se queda en blanco sobre
   blanco justo después de pulsarla. */
.mmc-blog .mmc-blog-filtro {
    flex: 0 0 auto;
    position: relative;
    padding: 18px 16px;
    background: none !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--mmc-texto-suave) !important;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease;
}
.mmc-blog .mmc-blog-filtro:hover { background: none !important; color: var(--mmc-texto-fuerte) !important; }

/* La raya del activo va en un pseudoelemento y no en el borde inferior: así no empuja el texto
   ni desplaza las demás píldoras al cambiar de una a otra. */
.mmc-blog .mmc-blog-filtro::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 3px;
    background: var(--mmc-enlace);
    opacity: 0;
    transition: opacity .15s ease;
}
.mmc-blog .mmc-blog-filtro.is-activo {
    color: var(--mmc-enlace) !important;
    font-weight: 500;
}
.mmc-blog .mmc-blog-filtro.is-activo::after { opacity: 1; }


/* ========================================================
   CABECERA
   ======================================================== */
.mmc-blog-hero { padding: 26px 0 44px; text-align: center; }

.mmc-blog-migas {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 36px;
    font-size: 13px;
    color: var(--mmc-texto-suave);
}
.mmc-blog .mmc-blog-migas a { color: var(--mmc-texto-suave); text-decoration: none; }
.mmc-blog .mmc-blog-migas a:hover { color: var(--mmc-enlace); }

.mmc-blog .mmc-blog-hero-titulo {
    max-width: 1000px;
    margin: 0 auto;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    line-height: 1.22;
    color: var(--mmc-texto-fuerte);
    text-wrap: balance;
}
.mmc-blog .mmc-blog-hero-sub {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--mmc-texto-suave);
}


/* ========================================================
   REJILLA
   ======================================================== */
.mmc-blog-rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
}
.mmc-blog-zona[data-columnas="2"] .mmc-blog-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mmc-blog-zona[data-columnas="4"] .mmc-blog-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mmc-blog-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border-radius: var(--mmc-radio-grande);
}

/* ---- La foto y el hover ---- */
.mmc-blog-card-media { position: relative; overflow: hidden; }

.mmc-blog-card-foto { display: block; }
.mmc-blog-card-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .4s ease;
}
.mmc-blog-card-sinfoto {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--mmc-fondo-gris);
}

/* El velo y los botones comparten el mismo disparador: pasar por encima de la media, o enfocar
   con el teclado cualquiera de los botones. Sin lo segundo, tabulando se saltarían. */
.mmc-blog-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* El porcentaje sale del panel; lo escribe home.php en la raíz del blog. */
    background: rgba(0, 0, 0, var(--mmc-blog-velo, .25));
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.mmc-blog-card-media:hover::after,
.mmc-blog-card-media:focus-within::after { opacity: 1; }
.mmc-blog-card-media:hover .mmc-blog-card-foto img { transform: scale(1.04); }

/* Arriba a la izquierda, no centrados: así no tapan la cara ni el motivo de la foto, que es
   justo lo que se quiere seguir viendo mientras se decide compartir. */
.mmc-blog-card-rrss {
    position: absolute;
    top: 16px;
    left: 16px;
    /* IMPRESCINDIBLE. El velo es un ::after de .mmc-blog-card-media, y un pseudoelemento ::after
       es el ÚLTIMO hijo del elemento: sin esto se pinta por encima de los botones y los oscurece
       igual que a la foto. Era justo lo que se veía. */
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.mmc-blog-card-media:hover .mmc-blog-card-rrss,
.mmc-blog-card-media:focus-within .mmc-blog-card-rrss {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Círculo esmerilado con el símbolo blanco dentro, como la referencia. El disco translúcido se
   desenfoca sobre la foto, así que el icono se lee sin tener que taparla con un velo fuerte. */
.mmc-blog .mmc-blog-rrss-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: rgba(255, 255, 255, .26) !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    border-radius: 50%;
    box-shadow: none !important;
    /* Si el navegador no lo soporta se queda el disco translúcido a secas: se ve algo peor,
       nunca mal. */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff !important;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
}
.mmc-blog .mmc-blog-rrss-btn:hover,
.mmc-blog .mmc-blog-rrss-btn:focus {
    transform: scale(1.08);
    background: rgba(255, 255, 255, .42) !important;
    color: #fff !important;
}

/* El símbolo, dentro del círculo y no a su tamaño. Lo que se sube es solo el logo, sin disco. */
.mmc-blog-rrss-btn img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.mmc-blog .mmc-blog-rrss-btn.is-copiado { background: rgba(255, 255, 255, .8) !important; color: #2e7d32 !important; }

/* ---- El cuerpo ---- */
.mmc-blog-card-cuerpo {
    display: flex;
    flex-direction: column;
    padding: 18px 20px 22px;
}

.mmc-blog-card-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.mmc-blog .mmc-blog-chip {
    padding: 5px 12px;
    background: var(--mmc-fondo-info);
    border-radius: 5px;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--mmc-seleccion);
    text-decoration: none;
    white-space: nowrap;
}
.mmc-blog .mmc-blog-chip:hover { background: var(--mmc-seleccion-fondo); color: var(--mmc-accion); }

.mmc-blog .mmc-blog-card-titulo {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
.mmc-blog .mmc-blog-card-titulo a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--mmc-texto-fuerte);
    text-decoration: none;
}
.mmc-blog .mmc-blog-card-titulo a:hover { color: var(--mmc-enlace); }

.mmc-blog .mmc-blog-card-texto {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--mmc-texto-suave);
}


/* ========================================================
   TARJETA DE SUSCRIPCIÓN
   Ocupa una celda de la rejilla como una entrada más.
   ======================================================== */
.mmc-blog-sus {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 28px;
    background: var(--mmc-fondo-info);
    border-radius: var(--mmc-radio-grande);
    text-align: center;
}
.mmc-blog .mmc-blog-sus-titulo {
    margin: 0 0 14px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mmc-texto-fuerte);
    text-wrap: balance;
}
.mmc-blog .mmc-blog-sus-texto {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--mmc-texto);
}

.mmc-blog-sus-form { display: flex; flex-direction: column; gap: 10px; }
.mmc-blog .mmc-blog-sus-form input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--mmc-borde-fuerte);
    border-radius: var(--mmc-radio);
    font-family: inherit;
    font-size: 15px;
    color: var(--mmc-texto);
}
.mmc-blog .mmc-blog-sus-form input[type="email"]:focus {
    outline: none;
    border-color: var(--mmc-seleccion);
}
.mmc-blog .mmc-blog-sus-form button {
    height: 46px;
    padding: 0 20px;
    background: var(--mmc-enlace) !important;
    border: 0 !important;
    border-radius: var(--mmc-radio);
    box-shadow: none !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #fff !important;
    cursor: pointer;
}
.mmc-blog .mmc-blog-sus-form button:hover,
.mmc-blog .mmc-blog-sus-form button:focus { background: var(--mmc-accion) !important; color: #fff !important; }

.mmc-blog .mmc-blog-sus-aviso {
    margin: 0;
    font-size: 13px;
    color: var(--mmc-texto-tenue);
    font-style: italic;
}


/* ========================================================
   CARGAR MÁS Y VACÍO
   ======================================================== */
.mmc-blog-cargar-caja { display: flex; justify-content: center; margin-top: 44px; }

.mmc-blog .mmc-blog-cargar {
    padding: 14px 38px;
    background: var(--mmc-texto-fuerte) !important;
    border: 0 !important;
    border-radius: var(--mmc-radio);
    box-shadow: none !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff !important;
    cursor: pointer;
    transition: background-color .15s ease;
}
.mmc-blog .mmc-blog-cargar:hover,
.mmc-blog .mmc-blog-cargar:focus { background: var(--mmc-enlace) !important; color: #fff !important; }
.mmc-blog .mmc-blog-cargar.is-oculto { display: none; }
.mmc-blog .mmc-blog-cargar.is-cargando { opacity: .6; pointer-events: none; }

.mmc-blog .mmc-blog-vacio {
    display: none;
    margin: 0;
    padding: 60px 0;
    font-size: 16px;
    color: var(--mmc-texto-suave);
    text-align: center;
}
.mmc-blog .mmc-blog-vacio.is-visible { display: block; }


/* ========================================================
   EXPERTOS
   ======================================================== */
.mmc-blog-expertos { background: #faf4ee; }
.mmc-blog-expertos-caja {
    max-width: 1340px;
    margin: 0 auto;
    padding: 64px 20px 72px;
}
.mmc-blog .mmc-blog-expertos-titulo {
    margin: 0 0 28px;
    font-size: clamp(20px, 2.2vw, 25px);
    font-weight: 700;
    line-height: var(--mmc-lh-titulo);
    color: var(--mmc-texto-fuerte);
}

.mmc-blog-expertos-rejilla {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

/* Están todas impresas y solo se enseña la página activa. */
.mmc-blog-exp { display: none; }
.mmc-blog-exp.is-visible {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #fff;
    border-radius: var(--mmc-radio-grande);
}

.mmc-blog-exp-cab {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mmc-borde);
}
.mmc-blog-exp-foto {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}
.mmc-blog-exp-quien { min-width: 0; }
.mmc-blog .mmc-blog-exp-nombre {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mmc-texto-fuerte);
}
.mmc-blog .mmc-blog-exp-rol {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--mmc-texto-suave);
}

.mmc-blog .mmc-blog-exp-bio {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 16px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mmc-texto-suave);
}

/* Es un <button> y no un enlace porque abre una ventana, no lleva a otra dirección. Kadence
   repinta cualquier <button> al enfocarlo con su propio fondo Y con color:#fff, así que hay que
   neutralizar las dos cosas en todos los estados. */
.mmc-blog .mmc-blog-exp-btn {
    /* `margin-top:auto` empuja el botón al fondo, así todos quedan a la misma altura aunque las
       biografías tengan distinto número de líneas. */
    align-self: flex-start;
    margin-top: auto;
    padding: 9px 20px;
    background: var(--mmc-texto-fuerte) !important;
    border: 0 !important;
    border-radius: var(--mmc-radio-pildora);
    box-shadow: none !important;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff !important;
    cursor: pointer;
}
.mmc-blog .mmc-blog-exp-btn:hover,
.mmc-blog .mmc-blog-exp-btn:focus { background: var(--mmc-enlace) !important; color: #fff !important; }

/* La ficha completa viaja escondida dentro de su tarjeta hasta que se pide. */
.mmc-blog-exp-oculto { display: none; }
/* Separa el botón de la biografía cuando esta existe; si no, el margen automático ya basta. */
.mmc-blog-exp-bio + .mmc-blog-exp-btn { margin-top: 18px; }

/* ---- Paginación de expertos ---- */
.mmc-blog-exp-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
}
.mmc-blog .mmc-blog-exp-num,
.mmc-blog .mmc-blog-exp-flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: none !important;
    border: 0 !important;
    border-radius: var(--mmc-radio);
    box-shadow: none !important;
    font-family: inherit;
    font-size: 15px;
    color: var(--mmc-texto) !important;
    cursor: pointer;
}
.mmc-blog .mmc-blog-exp-num:hover,
.mmc-blog .mmc-blog-exp-flecha:hover { background: rgba(0, 0, 0, .06) !important; color: var(--mmc-texto-fuerte) !important; }
.mmc-blog .mmc-blog-exp-num.is-activo {
    background: #fff !important;
    font-weight: 700;
    color: var(--mmc-texto-fuerte) !important;
}
.mmc-blog .mmc-blog-exp-flecha.is-apagada { opacity: .3; pointer-events: none; }


/* ========================================================
   VENTANA CON LA FICHA DEL EXPERTO
   ======================================================== */
.mmc-blog-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mmc-blog-modal.is-abierto { display: flex; }
body.mmc-blog-sin-scroll { overflow: hidden; }

.mmc-blog-modal-velo { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }

.mmc-blog-modal-caja {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: var(--mmc-radio-grande);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}

.mmc-blog .mmc-blog-modal-x {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 26px;
    line-height: 1;
    color: var(--mmc-texto-suave) !important;
    cursor: pointer;
}
.mmc-blog .mmc-blog-modal-x:hover,
.mmc-blog .mmc-blog-modal-x:focus {
    background: var(--mmc-fondo-gris) !important;
    border-radius: 50%;
    color: var(--mmc-texto-fuerte) !important;
}

/* ---- La ficha ---- */
/* Fondo liso. El degradado de dos tramos que había antes dibujaba una raya horizontal a media
   foto que no respondía a nada de la composición: parecía un corte, no una decisión. */
.mmc-blog-exp-ficha {
    padding: 40px 34px 34px;
    background: #fff;
    text-align: center;
}

.mmc-blog-exp-ficha-foto {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto 22px;
    border-radius: 50%;
    object-fit: cover;
}

.mmc-blog .mmc-blog-exp-ficha-nombre {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mmc-texto-fuerte);
    text-wrap: balance;
}
.mmc-blog .mmc-blog-exp-ficha-rol {
    margin: 5px 0 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--mmc-texto-suave);
}

.mmc-blog-exp-redes {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}
.mmc-blog .mmc-blog-exp-red {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--mmc-fondo-suave);
    border: 1px solid var(--mmc-borde-fuerte);
    border-radius: 50%;
    color: var(--mmc-texto-medio);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.mmc-blog .mmc-blog-exp-red:hover {
    border-color: var(--mmc-seleccion);
    color: var(--mmc-enlace);
}
.mmc-blog-exp-red img { width: 18px; height: 18px; object-fit: contain; }

/* Aquí la biografía sale ENTERA: ni recorte de líneas ni etiquetas quitadas. */
.mmc-blog .mmc-blog-exp-ficha-bio { margin-top: 24px; text-align: center; }
.mmc-blog .mmc-blog-exp-ficha-bio p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--mmc-texto);
}
.mmc-blog .mmc-blog-exp-ficha-bio p:last-child { margin-bottom: 0; }
.mmc-blog .mmc-blog-exp-ficha-bio a {
    color: var(--mmc-enlace);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mmc-blog .mmc-blog-exp-ficha-bio strong { font-weight: 700; color: var(--mmc-texto-fuerte); }


/* ========================================================
   LA ENTRADA INDIVIDUAL
   ======================================================== */
.mmc-blog-single { background: #fff; }

.mmc-blog-migas-art {
    justify-content: flex-start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 20px 0;
}
.mmc-blog-migas-aqui {
    /* El título entero en las migas desborda en móvil y descoloca la fila. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Texto y columna de compartir en la misma rejilla: así la columna se queda pegada mientras
   dura el artículo y se marcha con él al llegar a las relacionadas. */
.mmc-blog-art-caja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 56px;
    align-items: start;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px 64px;
}
.mmc-blog-art-col { min-width: 0; }

/* ---- Cabecera ---- */
.mmc-blog-art-cab { padding: 28px 0 0; }

.mmc-blog .mmc-blog-art-titulo {
    margin: 0;
    font-size: clamp(29px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.16;
    color: var(--mmc-texto-fuerte);
    text-wrap: balance;
}
.mmc-blog .mmc-blog-art-meta {
    margin: 18px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--mmc-texto-suave);
}
.mmc-blog-art-punto { margin: 0 4px; }

.mmc-blog-art-autor {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--mmc-borde);
}
.mmc-blog .mmc-blog-art-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}
.mmc-blog-art-autor-txt {
    font-size: 17px;
    font-weight: 700;
    color: var(--mmc-texto-fuerte);

}
/* ---- El cuerpo del artículo ----
   Kadence estiliza los <p> y los <h*> del contenido con selectores de dos clases, así que estas
   reglas van prefijadas con .mmc-blog para poder ganarle sin recurrir a !important.
   Dan tipografía y aire; no imponen estructura, que la decides tú con los bloques. */
.mmc-blog-art-texto { margin-top: 38px; }

.mmc-blog .mmc-blog-art-texto p {
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--mmc-texto);
}
.mmc-blog .mmc-blog-art-texto h2 {
    margin: 46px 0 18px;
    font-size: clamp(22px, 2.4vw, 27px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--mmc-texto-fuerte);
}
.mmc-blog .mmc-blog-art-texto h3 {
    margin: 36px 0 14px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mmc-texto-fuerte);
}
.mmc-blog .mmc-blog-art-texto h4 {
    margin: 30px 0 12px;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mmc-texto-fuerte);
}
/* Un encabezado justo después de otro no necesita el hueco grande: no hay texto que separar. */
.mmc-blog .mmc-blog-art-texto h2 + h3,
.mmc-blog .mmc-blog-art-texto h3 + h4 { margin-top: 18px; }

.mmc-blog .mmc-blog-art-texto a {
    color: var(--mmc-enlace);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mmc-blog .mmc-blog-art-texto a:hover { color: var(--mmc-accion); }
.mmc-blog .mmc-blog-art-texto strong { font-weight: 700; color: var(--mmc-texto-fuerte); }

.mmc-blog .mmc-blog-art-texto ul,
.mmc-blog .mmc-blog-art-texto ol { margin: 0 0 22px; padding-left: 24px; }
.mmc-blog .mmc-blog-art-texto li {
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 1.75;
}

.mmc-blog .mmc-blog-art-texto img { max-width: 100%; height: auto; border-radius: var(--mmc-radio); }
.mmc-blog .mmc-blog-art-texto figure { margin: 32px 0; }
.mmc-blog .mmc-blog-art-texto figcaption {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--mmc-texto-tenue);
    text-align: center;
}

.mmc-blog .mmc-blog-art-texto blockquote {
    margin: 32px 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--mmc-seleccion);
    font-size: 19px;
    line-height: 1.6;
    color: var(--mmc-texto-fuerte);
}
.mmc-blog .mmc-blog-art-texto blockquote p { font-size: inherit; }

.mmc-blog .mmc-blog-art-texto table {
    width: 100%;
    margin: 0 0 26px;
    border-collapse: collapse;
}
.mmc-blog .mmc-blog-art-texto th,
.mmc-blog .mmc-blog-art-texto td {
    padding: 12px 14px;
    border: 1px solid var(--mmc-borde);
    font-size: 15.5px;
    line-height: 1.5;
    text-align: left;
}
.mmc-blog .mmc-blog-art-texto th { background: var(--mmc-fondo-suave); font-weight: 700; }

/* Las columnas de Gutenberg: en móvil se apilan solas, pero sin un hueco entre ellas quedan
   pegadas. */
.mmc-blog .mmc-blog-art-texto .wp-block-columns { gap: 28px; }

/* ---- Pie de fechas ---- */
.mmc-blog .mmc-blog-art-fechas {
    margin: 40px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--mmc-borde);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--mmc-texto-tenue);
}
.mmc-blog-art-barra { margin: 0 8px; }

/* ---- La columna de compartir ---- */
.mmc-blog-art-rail {
    position: sticky;
    /* 120px fijos, medidos sobre la cabecera real de este sitio.
       Aquí NO se usa la variable que calcula js/blog.js: en esta cabecera solo acertaba con la
       barra de aviso de arriba (32px) y dejaba los botones a 42px, metidos detrás del menú. Un
       número fijo es menos elegante, pero es el que queda bien y no depende de acertar con qué
       elemento de Kadence es el pegajoso.
       Si algún día cambia el alto de la cabecera, el valor a tocar es este. */
    top: 120px;
}
.mmc-blog-rail-rrss {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Aquí el círculo va OSCURO, al revés que en el hover de la tarjeta.
   El motivo es el icono: los que subes son blancos, y sobre la foto funcionan porque el disco
   es translúcido y debajo hay un velo. Sobre el blanco de esta página, un círculo blanco los
   haría desaparecer —era lo que se veía: círculos vacíos—. Con el disco oscuro, el mismo juego
   de iconos sirve en los dos sitios y no hay que subir una segunda versión en color. */
.mmc-blog .mmc-blog-rail-rrss .mmc-blog-rrss-btn {
    /* El azul oscuro de los botones de compra, no el negro de los titulares: en una columna de
       cuatro discos seguidos el negro pesaba demasiado al lado del texto. */
    background: var(--mmc-accion) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff !important;
}
.mmc-blog .mmc-blog-rail-rrss .mmc-blog-rrss-btn:hover,
.mmc-blog .mmc-blog-rail-rrss .mmc-blog-rrss-btn:focus {
    background: var(--mmc-enlace) !important;
    color: #fff !important;
}


/* ========================================================
   ENTRADAS RELACIONADAS
   ======================================================== */
.mmc-blog-rel { background: #fff; }
.mmc-blog-rel-caja {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px 56px;
}
.mmc-blog .mmc-blog-rel-titulo {
    margin: 0 0 26px;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: var(--mmc-lh-titulo);
    color: var(--mmc-texto-fuerte);
    text-align: center;
    text-transform: uppercase;
}

.mmc-blog-rel-rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.mmc-blog .mmc-blog-rel-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--mmc-radio);
    background: var(--mmc-fondo-gris);
    text-decoration: none;
}
.mmc-blog .mmc-blog-rel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.mmc-blog .mmc-blog-rel-card:hover .mmc-blog-rel-img { transform: scale(1.05); }

/* Degradado desde abajo: el título blanco tiene que leerse sobre cualquier foto, también sobre
   las claras. */
.mmc-blog-rel-capa {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    padding: 20px 18px 18px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .72) 60%);
}
.mmc-blog-rel-txt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}


/* ========================================================
   ANTERIOR · INICIO · SIGUIENTE
   ======================================================== */
.mmc-blog-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px 64px;
}
.mmc-blog-nav-der { justify-self: end; }
.mmc-blog-nav-centro { justify-self: center; }

.mmc-blog .mmc-blog-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mmc-texto-fuerte);
    text-decoration: none;
}
.mmc-blog .mmc-blog-nav-link:hover { color: var(--mmc-enlace); }


/* ========================================================
   UTILIDADES
   ======================================================== */
.mmc-blog .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ========================================================
   PANTALLAS MEDIANAS Y MÓVIL
   ======================================================== */
@media (max-width: 1100px) {
    .mmc-blog-zona .mmc-blog-rejilla,
    .mmc-blog-zona[data-columnas="4"] .mmc-blog-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mmc-blog-expertos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
    /* El filtro deja de centrarse: con el scroll horizontal, centrado esconde la primera
       píldora fuera de la vista al cargar. */
    .mmc-blog-filtros-caja { justify-content: flex-start; }
    .mmc-blog .mmc-blog-filtro { padding: 15px 12px; font-size: 14px; }
    .mmc-blog .mmc-blog-filtro::after { left: 12px; right: 12px; }

    .mmc-blog-hero { padding: 20px 0 32px; }
    .mmc-blog-migas { justify-content: center; margin-bottom: 24px; }
    .mmc-blog-caja { padding-bottom: 52px; }

    .mmc-blog-zona .mmc-blog-rejilla,
    .mmc-blog-zona[data-columnas="2"] .mmc-blog-rejilla,
    .mmc-blog-zona[data-columnas="4"] .mmc-blog-rejilla { grid-template-columns: minmax(0, 1fr); gap: 22px; }

    /* Sin ratón no hay hover: los botones de compartir se quedan a la vista o serían
       inalcanzables, y el velo con ellos para que se lean sobre la foto. */
    .mmc-blog-card-media::after { opacity: 1; }
    .mmc-blog-card-rrss { opacity: 1; visibility: visible; transform: none; }

    .mmc-blog-expertos-rejilla { grid-template-columns: minmax(0, 1fr); }
    .mmc-blog-expertos-caja { padding: 46px 20px 52px; }

    .mmc-blog-modal-caja { max-height: 92vh; }
    .mmc-blog-exp-ficha { padding: 32px 22px 28px; }
    .mmc-blog-exp-ficha-foto { width: 120px; height: 120px; margin: 0 auto 18px; }

    /* ---- Entrada individual ---- */
    /* La columna de compartir no cabe al lado: pasa a una fila horizontal al final del
       artículo, que es cuando alguien decide si merece la pena mandárselo a otro. */
    .mmc-blog-art-caja { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 48px; }
    .mmc-blog-art-rail { position: static; }
    .mmc-blog-rail-rrss { flex-direction: row; justify-content: flex-start; margin-top: 28px; }

    .mmc-blog .mmc-blog-art-texto p,
    .mmc-blog .mmc-blog-art-texto li { font-size: 16px; }

    .mmc-blog-rel-rejilla { grid-template-columns: minmax(0, 1fr); }
    .mmc-blog .mmc-blog-rel-card { aspect-ratio: 16 / 9; }

    /* LOS TRES ENLACES EN UNA SOLA FILA: anterior · inicio · siguiente.
       Antes el del centro se bajaba a su propia línea y eso añadía una fila entera de hueco
       justo antes del bloque de garantía. Caben los tres bajando la letra y el icono y
       dejando que las etiquetas largas partan en dos renglones.
       Si quieres verlos en una sola línea cada uno, acorta los textos en el panel
       (Upvisión → Blog → "Anterior · Inicio · Siguiente"): con "Anterior" y "Siguiente"
       entran de sobra. */
    .mmc-blog-nav {
        grid-template-columns: 1fr auto 1fr;
        gap: 12px;
        padding-bottom: 36px;
    }
    .mmc-blog-nav-centro { grid-column: auto; order: 0; }
    .mmc-blog .mmc-blog-nav-link {
        gap: 4px;
        font-size: 13px;
        line-height: 1.25;
    }
    .mmc-blog .mmc-blog-nav-link svg { flex: 0 0 14px; width: 14px; height: 14px; }
    /* Cada lado tira hacia su borde y el texto se alinea con él: así los dos extremos quedan
       pegados a los lados y el del centro de verdad centrado. */
    .mmc-blog-nav-lado .mmc-blog-nav-link { text-align: left; }
    .mmc-blog-nav-der .mmc-blog-nav-link { text-align: right; }
}