/*
Theme Name:   Mascaraque GP
Theme URI:    https://www.mascaraquemarketing.com/
Description:  Tema hijo de GeneratePress para MascaraqueMarketing. Ligero, sin maquetadores, fuentes locales.
Author:       David Díez Molina
Template:     generatepress
Version:      1.2.0
Requires at least: 6.5
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  mascaraque-gp
*/

/* ==========================================================================
   1. Fuentes locales (subset latin: cubre á é í ó ú ñ ¿ ¡). Licencia OFL.
   Sin peticiones a Google Fonts → mejor rendimiento y sin problemas RGPD.
   ========================================================================== */
@font-face {
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/work-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Work Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/work-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("assets/fonts/work-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("assets/fonts/raleway-latin-300-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("assets/fonts/raleway-latin-700-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("assets/fonts/raleway-latin-800-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Libre Baskerville";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/libre-baskerville-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Libre Baskerville";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/libre-baskerville-latin-400-italic.woff2") format("woff2");
}

/* ==========================================================================
   2. Variables (paleta de la web original)
   ========================================================================== */
:root {
    --mm-teal: #004245; /* títulos, botones, categorías */
    --mm-salmon: #f7b498; /* bordes de tarjetas y widgets */
    --mm-olive: #9a9e7a; /* acento original (decorativo) */
    --mm-olive-dark: #6e7350; /* oliva oscurecido: contraste AA en textos y enlaces */
    --mm-line: #d6daba; /* línea superior de la cabecera */
    --mm-text: #444444;
    --mm-heading: #222222;
    --mm-white: #ffffff;

    --mm-font-sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mm-font-head: "Raleway", var(--mm-font-sans);
    --mm-font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;

    --mm-radius: 15px;

    /* Rediseño 2026 (home, categorías y búsqueda). Misma paleta de marca:
       los tonos nuevos son mezclas de teal, oliva y la línea #d6daba */
    --mm-surface: var(--mm-white);
    --mm-surface-alt: #f4f5ec; /* #d6daba muy aclarado: fondos suaves */
    --mm-border: #e6e8d8; /* bordes de tarjetas */
    --mm-teal-soft: rgba(0, 66, 69, 0.08); /* fondo de píldoras de categoría */

    --mm-space-1: 4px;
    --mm-space-2: 8px;
    --mm-space-3: 12px;
    --mm-space-4: 16px;
    --mm-space-5: 24px;
    --mm-space-6: 32px;
    --mm-space-7: 48px;
    --mm-space-8: 64px;

    --mm-fs-sm: 0.8125rem; /* 13px */
    --mm-fs-base: 1rem; /* 16px */
    --mm-fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17–19px */
    --mm-fs-xl: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem); /* 19–22px */
    --mm-fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); /* 24–32px */
    --mm-fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); /* 32–52px */

    --mm-radius-sm: 8px;
    --mm-radius-md: 16px;
    --mm-radius-pill: 999px;

    --mm-shadow-sm: 0 1px 2px rgba(0, 66, 69, 0.06), 0 2px 8px rgba(0, 66, 69, 0.05);
    --mm-shadow-md: 0 6px 16px rgba(0, 66, 69, 0.1), 0 16px 40px rgba(0, 66, 69, 0.08);

    --mm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --mm-dur: 250ms;
}

/* Sin animaciones para quien las tenga desactivadas en el sistema */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   3. Base
   ========================================================================== */
body,
button,
input,
select,
textarea {
    font-family: var(--mm-font-sans);
}

body {
    color: var(--mm-text);
    font-size: 16px; /* la original usaba 13px: ilegible en móvil */
    line-height: 1.65;
    background-color: var(--mm-white);
}

/* Fondo decorativo de la X. Pesa 24 KB, así que también va en móvil, donde se
   ajusta al ancho de la pantalla y no es fijo (fixed falla en iOS/Android). */
body {
    /* [PENDIENTE: confirmar que la imagen existe en el nuevo servidor y ajustar posición/tamaño] */
    background-image: url("/wp-content/uploads/2026/03/Raque-Mascaraque_blog_Fondo.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 100% auto;
}

@media (min-width: 1024px) {
    body {
        background-size: auto;
        background-attachment: fixed;
    }
}

a {
    color: var(--mm-teal);
}

a:hover,
a:focus {
    color: var(--mm-olive-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--mm-heading);
}

/* ==========================================================================
   4. Cabecera: línea superior + logo y menú centrados + sticky
   ========================================================================== */
.site-header {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 100;
    background-color: var(--mm-white);
    border-top: 4px solid var(--mm-line);
}

.site-header .inside-header {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding-top: 0;
    padding-bottom: 0;
}

.site-header .site-logo img {
    width: 50px;
    height: auto;
}

.main-navigation,
.main-navigation ul ul {
    background-color: var(--mm-white);
}

/* GeneratePress empuja el menú a la derecha (nav-float-right: margin-left:auto) */
.site-header .main-navigation,
.nav-float-right .site-header #site-navigation {
    width: auto;
    margin-left: 0;
    margin-right: 0;
}

.site-header .inside-header {
    width: 100%;
    max-width: none;
}

.main-navigation .main-nav ul li a {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mm-teal);
    padding-left: 8px;
    padding-right: 8px;
}

/* Hover y sección activa: el texto sigue en teal (el oliva #9a9e7a no llega a
   AA sobre blanco); lo marca un subrayado que crece desde el centro */
.site-header .main-navigation .main-nav ul li > a:hover,
.site-header .main-navigation .main-nav ul li > a:focus,
.site-header .main-navigation .main-nav ul li:hover > a,
.site-header .main-navigation .main-nav ul li:focus-within > a,
.site-header .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--mm-teal);
    background-color: transparent;
}

.site-header .main-navigation .menu-toggle,
.site-header .main-navigation .menu-toggle:hover,
.site-header .main-navigation .menu-toggle:focus {
    color: var(--mm-teal);
    background-color: transparent;
}

@media (min-width: 769px) {
    .site-header .main-navigation .main-nav > ul > li > a {
        position: relative;
    }

    .site-header .main-navigation .main-nav > ul > li > a::after {
        content: "";
        position: absolute;
        right: 8px;
        bottom: 8px;
        left: 8px;
        height: 2px;
        background-color: var(--mm-teal);
        border-radius: 2px;
        transform: scaleX(0);
        transition: transform var(--mm-dur) var(--mm-ease);
    }

    .site-header .main-navigation .main-nav > ul > li:hover > a::after,
    .site-header .main-navigation .main-nav > ul > li:focus-within > a::after,
    .site-header .main-navigation .main-nav > ul > li[class*="current-menu-"] > a::after {
        transform: scaleX(1);
    }

    /* Con flecha de submenú: que el subrayado acabe con el texto. La flecha de
       GeneratePress ocupa 10px + 1em (12px) + 20px, y el enlace no lleva
       padding derecho */
    .site-header .main-navigation .main-nav > ul > li.menu-item-has-children > a::after {
        right: 42px;
    }
}

.main-navigation ul ul {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Submenú: bloque teal con texto blanco; hover en oliva (como el original) */
.site-header .main-navigation .main-nav ul ul li > a {
    font-size: 12px;
    text-transform: uppercase;
    min-width: auto;
    padding: 15px;
    background-color: var(--mm-teal);
    color: var(--mm-white);
    transition: background-color var(--mm-dur) var(--mm-ease);
}

.site-header .main-navigation .main-nav ul ul li > a:hover,
.site-header .main-navigation .main-nav ul ul li > a:focus,
.site-header .main-navigation .main-nav ul ul li:hover > a,
.site-header .main-navigation .main-nav ul ul li:focus-within > a,
.site-header .main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
    background-color: var(--mm-olive);
    color: var(--mm-white);
}

/* Escritorio: bloque recto, sin borde ni sombra, texto en una sola línea */
@media (min-width: 769px) {
    .site-header .main-navigation ul ul {
        width: auto;
        min-width: 220px;
        padding: 0;
        background-color: var(--mm-teal);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .site-header .main-navigation .main-nav ul ul li > a {
        padding: var(--mm-space-4) var(--mm-space-5);
        white-space: nowrap;
    }
}

/* ==========================================================================
   5. Hero de texto (sustituye a la imagen PNG de la cabecera)
   ========================================================================== */
.mm-hero {
    padding: var(--mm-space-8) var(--mm-space-5) var(--mm-space-7);
    text-align: center;
}

.mm-hero__inner {
    max-width: 760px;
    margin: 0 auto;
}

.mm-hero__heading {
    margin: 0;
    font-weight: 400;
    line-height: 1.1;
    color: var(--mm-teal);
}

/* Antetítulo en versalitas con una línea a cada lado */
.mm-hero__kicker,
.mm-books__kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mm-space-4);
    margin-bottom: var(--mm-space-4);
    font-family: var(--mm-font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mm-olive-dark);
}

.mm-hero__kicker::before,
.mm-hero__kicker::after,
.mm-books__kicker::before,
.mm-books__kicker::after {
    content: "";
    width: 40px;
    height: 1px;
    background-color: var(--mm-line);
}

/* Centrado explícito: el tema justifica h1 y p, y en una sola línea eso
   equivale a alinear a la izquierda */
.mm-hero__heading,
.mm-hero__title,
.mm-hero__tagline {
    text-align: center !important;
}

.mm-hero__title {
    display: block;
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-3xl); /* 32–52px */
    font-weight: 400;
    line-height: 1.1;
    color: var(--mm-teal);
}

.mm-hero__tagline {
    margin: var(--mm-space-3) 0 0;
    font-family: var(--mm-font-sans);
    font-size: var(--mm-fs-xl);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--mm-olive-dark);
}

/* Un solo color por línea: la cursiva serif es el único acento */
.mm-hero em {
    font-family: var(--mm-font-serif);
    font-style: italic;
    color: inherit;
}

/* ==========================================================================
   6. Listado de entradas (home, categorías, búsqueda): rejilla de tarjetas
   verticales. Orden visual: imagen → categoría → título → extracto → fecha.
   En el HTML de GeneratePress el título (y la fecha) van antes que la imagen
   y la categoría al final, así que se reordena con flex + order.
   ========================================================================== */

/* Rejilla: 2 columnas (la barra lateral ocupa el 33 %); el resto de hijos de
   .site-main (cabecera de categoría, paginación…) ocupan todo el ancho */
.blog .site-main,
.archive .site-main,
.search .site-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mm-space-6) var(--mm-space-5);
    margin-top: var(--mm-space-5);
}

.blog .site-main > :not(article),
.archive .site-main > :not(article),
.search .site-main > :not(article) {
    grid-column: 1 / -1;
}

.blog .site-main article,
.archive .site-main article,
.search .site-main article {
    margin: 0;
    background-color: transparent;
}

/* Tarjeta */
.blog .site-main .inside-article,
.archive .site-main .inside-article,
.search .site-main .inside-article {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    background-color: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-md);
    box-shadow: var(--mm-shadow-sm);
    overflow: hidden;
    transition:
        transform var(--mm-dur) var(--mm-ease),
        box-shadow var(--mm-dur) var(--mm-ease),
        border-color var(--mm-dur) var(--mm-ease);
}

.blog .site-main .inside-article:hover,
.archive .site-main .inside-article:hover,
.search .site-main .inside-article:hover {
    transform: translateY(-4px);
    border-color: var(--mm-line);
    box-shadow: var(--mm-shadow-md);
}

/* La cabecera se "deshace" para poder colocar título y fecha por separado */
body:not(.single) .site-main .inside-article > .entry-header {
    display: contents;
}

/* Imagen 2:1 arriba, con zoom suave en el hover */
body:not(.single) .site-main .inside-article > .post-image {
    order: 1;
    margin: 0;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background-color: var(--mm-surface-alt);
}

body:not(.single) .site-main .inside-article > .post-image > a,
body:not(.single) .site-main .inside-article > .post-image img {
    display: block;
    width: 100%;
    height: 100%;
}

body:not(.single) .site-main .inside-article > .post-image img {
    object-fit: cover;
    transition: transform 600ms var(--mm-ease);
}

body:not(.single) .site-main .inside-article:hover > .post-image img {
    transform: scale(1.04);
}

/* Categoría (píldora) */
body:not(.single) .site-main .inside-article > footer.entry-meta {
    order: 2;
    margin: 0;
    padding: var(--mm-space-5) var(--mm-space-5) 0;
}

/* Título */
.blog .entry-title,
.archive .entry-title,
.search .entry-title {
    order: 3;
    margin: 0;
    padding: var(--mm-space-3) var(--mm-space-5) 0;
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-xl);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: normal;
}

.blog .entry-title a,
.archive .entry-title a,
.search .entry-title a {
    color: var(--mm-heading);
    text-decoration: none;
    transition: color var(--mm-dur) var(--mm-ease);
}

.blog .entry-title a:hover,
.archive .entry-title a:hover,
.search .entry-title a:hover,
.blog .inside-article:hover .entry-title a,
.archive .inside-article:hover .entry-title a,
.search .inside-article:hover .entry-title a {
    color: var(--mm-teal);
}

/* Toda la tarjeta es clicable: el enlace del título se estira sobre ella */
.blog .entry-title a::after,
.archive .entry-title a::after,
.search .entry-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Extracto: 3 líneas como máximo */
.blog .entry-summary,
.archive .entry-summary,
.search .entry-summary {
    order: 4;
    flex-grow: 1;
    margin: 0;
    padding: var(--mm-space-3) var(--mm-space-5) 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--mm-text);
}

.blog .entry-summary p,
.archive .entry-summary p,
.search .entry-summary p {
    display: -webkit-box;
    margin-bottom: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Fecha · tiempo de lectura, al pie de la tarjeta */
body:not(.single) .site-main .inside-article > .entry-header > .entry-meta {
    order: 5;
    margin: 0;
    padding: var(--mm-space-4) var(--mm-space-5) var(--mm-space-5);
    font-size: var(--mm-fs-sm);
    color: var(--mm-olive-dark);
}

.mm-reading-time::before {
    content: "·";
    margin: 0 var(--mm-space-2);
    color: var(--mm-olive);
}

/* Categorías como píldoras (por encima del enlace que cubre la tarjeta).
   font-size: 0 en el contenedor oculta las comas entre categorías */
.inside-article footer.entry-meta .cat-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-space-2);
    font-size: 0;
}

.inside-article footer.entry-meta .cat-links a {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: var(--mm-space-1) var(--mm-space-3);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mm-teal);
    background-color: var(--mm-teal-soft);
    border-radius: var(--mm-radius-pill);
    transition:
        background-color var(--mm-dur) var(--mm-ease),
        color var(--mm-dur) var(--mm-ease);
}

.inside-article footer.entry-meta .cat-links a:hover,
.inside-article footer.entry-meta .cat-links a:focus-visible {
    color: var(--mm-white);
    background-color: var(--mm-teal);
}

.inside-article footer.entry-meta .gp-icon {
    display: none;
}

/* Foco de teclado visible en toda la tarjeta */
.blog .entry-title a:focus-visible,
.archive .entry-title a:focus-visible,
.search .entry-title a:focus-visible {
    outline: none;
}

.blog .entry-title a:focus-visible::after,
.archive .entry-title a:focus-visible::after,
.search .entry-title a:focus-visible::after {
    outline: 2px solid var(--mm-teal);
    outline-offset: -2px;
    border-radius: var(--mm-radius-md);
}

/* Paginación: botones redondeados; la página actual en teal. Sin la caja
   blanca de 40px de padding de GeneratePress */
.separate-containers .site-main .paging-navigation {
    margin: var(--mm-space-4) 0 0;
    padding: 0;
    background-color: transparent;
}

.paging-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--mm-space-2);
}

.paging-navigation .nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mm-space-2);
    min-width: 44px;
    height: 44px;
    padding: 0 var(--mm-space-3);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--mm-teal);
    text-decoration: none;
    background-color: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-pill);
    transition:
        background-color var(--mm-dur) var(--mm-ease),
        border-color var(--mm-dur) var(--mm-ease),
        color var(--mm-dur) var(--mm-ease);
}

.paging-navigation .nav-links a.page-numbers:hover,
.paging-navigation .nav-links a.page-numbers:focus-visible {
    color: var(--mm-teal);
    background-color: var(--mm-surface-alt);
    border-color: var(--mm-line);
}

.paging-navigation .nav-links a.page-numbers:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 2px;
}

.paging-navigation .nav-links .page-numbers.current {
    font-weight: 500;
    color: var(--mm-white);
    background-color: var(--mm-teal);
    border-color: var(--mm-teal);
}

/* "…" sin botón */
.paging-navigation .nav-links .page-numbers.dots {
    min-width: auto;
    padding: 0 var(--mm-space-1);
    color: var(--mm-olive-dark);
    background-color: transparent;
    border-color: transparent;
}

/* Anterior / Siguiente: un poco más anchos */
.paging-navigation .nav-links .page-numbers.prev,
.paging-navigation .nav-links .page-numbers.next {
    padding: 0 var(--mm-space-5);
}

/* ==========================================================================
   7. Entrada individual: rediseño 2026 en la §15 (al final del archivo)
   ========================================================================== */

/* ==========================================================================
   8. Widgets (barra lateral y pie): borde punteado salmón + título centrado
   ========================================================================== */
.widget-area.sidebar .widget,
.site-footer .footer-widgets .footer-widgets-container .widget {
    position: relative;
    margin-top: 18px;
    padding: 30px 20px 20px;
    background-color: var(--mm-white);
    border: 4px dotted var(--mm-salmon);
}

.sidebar .widget :is(.widget-title, .wp-block-heading:first-child),
.footer-widgets .widget :is(.widget-title, .wp-block-heading:first-child) {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -55%);
    margin: 0;
    padding: 0 12px;
    white-space: nowrap;
    font-family: var(--mm-font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000;
    background-color: var(--mm-white);
}

/* Título de widget con icono (p. ej. el sobre de "¿Quieres contactar conmigo?"):
   icono a la izquierda y el texto a continuación. GeneratePress convierte
   .alignleft en bloque centrado por debajo de 768px, y el título lleva un
   text-align: justify en línea que estira el texto */
.widget h3:has(> img.alignleft) {
    text-align: left !important;
}

.widget h3 > img.alignleft {
    display: inline-block;
    float: none;
    margin: 0 10px 0 0;
    vertical-align: middle;
}

/* Widgets sin caja (p. ej. el banner "Conoce mi web personal"):
   añadir la clase CSS "is-plain" al bloque de imagen */
.widget-area.sidebar .widget:has(.is-plain),
.site-footer .footer-widgets .footer-widgets-container .widget:has(.is-plain) {
    padding: 0;
    border: 0;
    background: transparent;
}

.widget .is-plain img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Widget de imagen de Jetpack: sin caja, sin padding ni borde punteado */
.widget-area.sidebar .widget.widget_image,
.site-footer .footer-widgets .footer-widgets-container .widget.widget_image {
    padding: 0;
    border: 0;
    background: transparent;
}

.widget.widget_image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Bloque "Últimas entradas" con miniatura ("¡Quiero leer más!") */
.widget .wp-block-latest-posts li {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    column-gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
    font-size: 14px;
    line-height: 1.4;
}

.widget .wp-block-latest-posts li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.widget .wp-block-latest-posts__featured-image.alignleft {
    float: none;
    grid-row: 1 / span 2;
    margin: 0;
}

.widget .wp-block-latest-posts__featured-image img {
    display: block;
    width: 90px;
    height: 60px;
    object-fit: cover;
}

.widget .wp-block-latest-posts__post-title {
    color: #000;
    text-decoration: none;
}

.widget .wp-block-latest-posts__post-date {
    font-size: 11px;
    line-height: 1.2;
    color: var(--mm-text);
    opacity: 0.5;
}

/* Widget "OrangeIdea: Popular Posts" */
.mm-popular-posts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-popular-posts__item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
    font-size: 13px;
    line-height: 1.25;
}

.mm-popular-posts__item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* Miniatura rectangular 90×60 como el original (no cuadrada: se estiraba) */
.mm-popular-posts__image {
    flex-shrink: 0;
}

.mm-popular-posts__image img {
    display: block;
    width: 90px;
    height: 60px;
    object-fit: cover;
}

.mm-popular-posts__content {
    display: flex;
    flex-direction: column;
    gap: 10px; /* el <p> del título llevaba margin-bottom: 10px en Bootstrap */
}

.mm-popular-posts__title {
    color: #000;
    text-decoration: none;
}

.mm-popular-posts__date {
    font-size: 11px;
    line-height: 11px;
    color: var(--mm-text);
    opacity: 0.5;
}

/* Formularios de newsletter / contacto */
.widget input[type="email"],
.widget input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="text"],
.entry-content textarea {
    border: 1px solid #dddddd;
    border-radius: 0;
    padding: 10px;
}

button,
input[type="submit"],
.wp-block-button__link {
    padding: 10px 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mm-white);
    background-color: var(--mm-teal);
    border: 0;
    border-radius: 20px;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    color: var(--mm-white);
    background-color: var(--mm-olive-dark);
}

/* ==========================================================================
   9. Pie
   ========================================================================== */
.site-footer,
.site-footer .footer-widgets,
.site-footer .site-info {
    background-color: transparent;
    color: var(--mm-text);
}

.site-footer .site-info {
    font-size: 12px;
}

.site-footer .site-info a {
    color: var(--mm-text);
}

.site-footer .site-info a:hover {
    color: var(--mm-teal);
}

/* Línea inferior: copyright a la izquierda y menú a la derecha. Rediseño 2026:
   franja blanca a todo el ancho, como la cabecera, separada por una línea fina
   teal; texto en teal */
.site-footer .site-info {
    margin-top: var(--mm-space-7);
    margin-bottom: 0;
    background-color: var(--mm-white);
    border-top: 1px solid var(--mm-teal);
}

.site-footer .site-info .inside-site-info {
    justify-content: space-between;
    align-items: center;
}

/* El copyright heredaba el texto del body original: 13px / 22px, color #444 */
.site-footer .site-info .copyright-bar {
    order: -1;
    margin: 0;
    color: var(--mm-teal);
    font-size: 13px;
    line-height: 22px;
}

/* Sin barra lateral: el CSS en línea de GeneratePress fija .content-area al 67 %
   aunque la página use no-sidebar; se fuerza el ancho completo */
body.no-sidebar .site-content .content-area {
    width: 100%;
}

/* Páginas legales de Complianz: su CSS limita #cmplz-document a un ancho máximo */
body.cmplz-document #cmplz-document {
    width: 100%;
    max-width: none;
}

/* Enlaces legales junto al copyright: separados por un punto medio */
.site-footer .site-info .mm-legal-links a {
    color: var(--mm-teal);
    text-decoration: none;
}

.site-footer .site-info .mm-legal-links a::before {
    content: "\00b7";
    display: inline-block;
    margin: 0 8px;
}

.site-footer .site-info .mm-legal-links a:hover,
.site-footer .site-info .mm-legal-links a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 768px) {
    .site-footer .site-info .copyright-bar {
        text-align: center;
    }
}

/* Menú del pie (widget "Menú de navegación" en la zona "Barra del pie"):
   enlaces en teal (rediseño 2026; antes negro al 40 %, sin contraste AA) */
.footer-bar .widget_nav_menu ul,
.footer-bar .wp-block-navigation__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 4px;
    margin: 0;
    list-style: none;
}

.footer-bar .widget_nav_menu li {
    margin: 0;
    padding-left: 7px;
}

/* Enlaces en teal sobre la franja #d6daba, con subrayado teal que crece
   desde el centro (como el menú de la cabecera) */
.footer-bar .widget_nav_menu li a {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    padding: var(--mm-space-1) 0;
    color: var(--mm-teal);
    font-size: 13px;
    letter-spacing: 0;
    text-decoration: none;
}

.footer-bar .widget_nav_menu li a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: var(--mm-teal);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform var(--mm-dur) var(--mm-ease);
}

.footer-bar .widget_nav_menu li a:hover,
.footer-bar .widget_nav_menu li a:focus-visible {
    color: var(--mm-teal);
    text-decoration: none;
}

.footer-bar .widget_nav_menu li a:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 2px;
}

.footer-bar .widget_nav_menu li a:hover::after,
.footer-bar .widget_nav_menu li a:focus-visible::after,
.footer-bar .widget_nav_menu li[class*="current-menu-"] > a::after {
    transform: scaleX(1);
}

@media (max-width: 768px) {
    .footer-bar .widget_nav_menu ul {
        justify-content: center;
    }

    .footer-bar .widget_nav_menu li,
    .footer-bar .widget_nav_menu li:first-child,
    .footer-bar .widget_nav_menu li:last-child {
        margin: 0;
        padding: 0;
    }

    .footer-bar .widget_nav_menu li a {
        margin: 0 3px;
    }
}

/* Botón "subir" del original (.suzette_to_top): cuadrado en la esquina inferior
   derecha, fondo #f1f1f1 y negro con la flecha en blanco al pasar el ratón.
   Se activa en Personalizar → Diseño → Pie de página → "Back to Top Button".
   Los colores y medidas de GeneratePress salen de CSS en línea y de los ajustes
   del personalizador, por eso van con !important (el original también) */
html body a.generate-back-to-top {
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    padding: 10px 15px !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    background-color: #f1f1f1 !important;
    color: #000 !important;
    text-decoration: none !important;
}

html body a.generate-back-to-top:hover,
html body a.generate-back-to-top:focus {
    background-color: var(--mm-teal) !important;
    color: #fff !important;
}

html body a.generate-back-to-top .gp-icon {
    display: block;
}

html body a.generate-back-to-top .gp-icon svg {
    fill: currentColor;
}

/* ==========================================================================
   9b. Espaciados del tema original (Suzette)
   ========================================================================== */
/* Barra del menú: 15px arriba y abajo con texto de 12px (≈45px de alto) */
.site-header .main-navigation .main-nav > ul > li > a {
    line-height: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Separación entre widgets de la barra lateral */
.sidebar .widget {
    margin-bottom: 50px;
}

/* Rejilla del original (Bootstrap): contenedor de 1170px, sidebar con 20px a la izquierda */
.grid-container {
    max-width: 1170px;
}

/* Contenedor Bootstrap del original: 15px de gutter a cada lado; fluido por debajo
   de 768px y con ancho fijo de 750 / 970 / 1170px a partir de ahí */
#page.grid-container,
.site-footer .footer-widgets-container.grid-container,
.site-footer .inside-site-info.grid-container {
    width: auto;
    max-width: none;
    padding-left: 15px;
    padding-right: 15px;
}

.site-header .inside-header {
    padding-left: 15px;
    padding-right: 15px;
}

/* Escritorio: la cabecera usa el mismo contenedor que el contenido (750 / 970 /
   1170px): logo alineado con el borde izquierdo de las tarjetas y menú con el
   borde derecho de la barra lateral */
@media (min-width: 769px) {
    .site-header .inside-header {
        justify-content: space-between;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
    }

    .site-header .site-logo img {
        width: 60px;
    }

    /* El último enlace llega justo al borde del contenedor */
    .site-header .main-navigation .main-nav > ul > li:last-child > a {
        padding-right: 0;
    }

    .site-header .main-navigation .main-nav > ul > li:last-child > a::after {
        right: 0;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .site-header .inside-header {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .site-header .inside-header {
        width: 970px;
    }

    /* 13px solo con sitio: en tablet (750px) el menú no cabría en una línea */
    .site-header .main-navigation .main-nav > ul > li > a {
        font-size: 13px;
    }
}

@media (min-width: 1200px) {
    .site-header .inside-header {
        width: 1170px;
    }
}


@media (min-width: 768px) {
    #page.grid-container,
    .site-footer .footer-widgets-container.grid-container,
    .site-footer .inside-site-info.grid-container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    #page.grid-container,
    .site-footer .footer-widgets-container.grid-container,
    .site-footer .inside-site-info.grid-container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    #page.grid-container,
    .site-footer .footer-widgets-container.grid-container,
    .site-footer .inside-site-info.grid-container {
        width: 1170px;
    }
}

.sidebar .inside-right-sidebar {
    padding-left: 20px;
}

/* Margen superior de la barra lateral: 30px (GeneratePress trae 20px) */
.separate-containers .inside-left-sidebar,
.separate-containers .inside-right-sidebar {
    margin-top: 30px;
}

/* Pie: columnas con 30px de separación (rejilla Bootstrap) y cajas de la misma altura */
.site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets {
    gap: 30px;
    margin-left: 0;
}

.site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets > div {
    display: flex;
    flex-direction: column;
    padding-left: 0;
}

.site-footer .footer-widgets-container .inside-footer-widgets > div > .widget:last-child {
    flex-grow: 1;
}

/* Suscripción de Jetpack dentro de la caja */
.widget_blog_subscription p {
    font-size: 14px;
}

.widget_blog_subscription #subscribe-text {
    margin-bottom: 10px;
}

.widget_blog_subscription #subscribe-text,
.widget_blog_subscription #subscribe-text p {
    line-height: 125%;
}

.widget_blog_subscription input[type="email"] {
    width: 100%;
    font-size: 14px;
}

/* Pie: 60px arriba y 20px abajo; línea de copyright con 20px */
.site-footer .footer-widgets-container {
    padding-top: 60px;
    padding-bottom: 20px;
}

.site-footer .site-info .inside-site-info {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Páginas y entradas: base del rediseño 2026 para CUALQUIER página o entrada
   (también las nuevas). Las entradas ajustan lo suyo en §15.
   Contenido sin caja, texto de 16px, títulos serif teal y bloques del editor
   (listas, citas, imágenes, botones, separadores, tablas) con la marca.
   Contacto y Mi NeuroYO añaden lo suyo encima en §13 y §14 */
.page .site-main > article {
    margin: 0;
    background-color: transparent;
}

.page .inside-article {
    padding: 0;
    background-color: transparent;
}

/* Título de la página (GeneratePress; oculto en Contacto y Mi NeuroYO) */
.page .entry-header {
    margin: var(--mm-space-5) 0 var(--mm-space-4);
}

.page .entry-header .entry-title {
    margin: 0;
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-2xl);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--mm-teal);
}

:is(.page, .single) .entry-content {
    margin-top: 0;
    font-size: var(--mm-fs-base);
    line-height: 1.7;
    color: var(--mm-text);
}

:is(.page, .single) .entry-content::after {
    content: "";
    display: table;
    clear: both;
}

:is(.page, .single) .entry-content p {
    margin: 0 0 var(--mm-space-4);
}

:is(.page, .single) .entry-content strong {
    font-weight: 500;
    color: var(--mm-teal);
}

/* Encabezados del contenido */
:is(.page, .single) .entry-content h2,
:is(.page, .single) .entry-content h3 {
    font-family: var(--mm-font-serif);
    font-weight: 400;
    letter-spacing: normal;
    color: var(--mm-teal);
}

:is(.page, .single) .entry-content h2 {
    margin: var(--mm-space-7) 0 var(--mm-space-4);
    font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    line-height: 1.3;
}

:is(.page, .single) .entry-content h3 {
    margin: var(--mm-space-6) 0 var(--mm-space-3);
    font-size: var(--mm-fs-xl);
    line-height: 1.35;
}

/* h4: como el antetítulo del hero */
:is(.page, .single) .entry-content h4 {
    margin: var(--mm-space-6) 0 var(--mm-space-3);
    font-family: var(--mm-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-olive-dark);
}

:is(.page, .single) .entry-content h5,
:is(.page, .single) .entry-content h6 {
    margin: var(--mm-space-5) 0 var(--mm-space-2);
    font-family: var(--mm-font-sans);
    font-size: var(--mm-fs-base);
    font-weight: 500;
    line-height: 1.5;
    color: var(--mm-teal);
}

:is(.page, .single) .entry-content > :is(h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* Enlaces: teal subrayado fino (el oliva claro no llegaba a AA) */
:is(.page, .single) .entry-content a {
    color: var(--mm-teal);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--mm-dur) var(--mm-ease);
}

:is(.page, .single) .entry-content a:hover,
:is(.page, .single) .entry-content a:focus-visible {
    color: var(--mm-olive-dark);
}

/* Listas */
:is(.page, .single) .entry-content :is(ul, ol) {
    margin: 0 0 var(--mm-space-4);
    padding-left: var(--mm-space-5);
}

:is(.page, .single) .entry-content li {
    margin-bottom: var(--mm-space-2);
}

:is(.page, .single) .entry-content li::marker {
    color: var(--mm-olive-dark);
}

/* Citas */
:is(.page, .single) .entry-content blockquote {
    margin: var(--mm-space-6) 0;
    padding: var(--mm-space-4) var(--mm-space-5);
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-lg);
    font-style: italic;
    line-height: 1.6;
    color: var(--mm-teal);
    background-color: var(--mm-surface-alt);
    border-left: 3px solid var(--mm-line);
    border-radius: 0 var(--mm-radius-sm) var(--mm-radius-sm) 0;
}

:is(.page, .single) .entry-content blockquote p:last-of-type {
    margin-bottom: 0;
}

:is(.page, .single) .entry-content blockquote cite {
    display: block;
    margin-top: var(--mm-space-2);
    font-family: var(--mm-font-sans);
    font-size: var(--mm-fs-sm);
    font-style: normal;
    color: var(--mm-olive-dark);
}

/* Imágenes */
:is(.page, .single) .entry-content img {
    height: auto;
    max-width: 100%;
    border-radius: var(--mm-radius-sm);
}

:is(.page, .single) .entry-content figure {
    margin: var(--mm-space-5) 0;
}

:is(.page, .single) .entry-content figcaption {
    margin-top: var(--mm-space-2);
    font-size: var(--mm-fs-sm);
    text-align: center;
    color: var(--mm-olive-dark);
}

:is(.page, .single) .entry-content :is(img, figure).alignleft {
    float: left;
    margin: 0 var(--mm-space-5) var(--mm-space-5) 0;
}

:is(.page, .single) .entry-content :is(img, figure).alignright {
    float: right;
    margin: 0 0 var(--mm-space-5) var(--mm-space-5);
}

/* Separador */
:is(.page, .single) .entry-content hr,
:is(.page, .single) .entry-content .wp-block-separator {
    height: 1px;
    margin: var(--mm-space-7) 0;
    background-color: var(--mm-line);
    border: 0;
}

/* Botones del editor de bloques: píldora teal, como "Enviar mensaje" */
:is(.page, .single) .entry-content .wp-block-button__link {
    display: inline-block;
    padding: 14px var(--mm-space-6);
    font-family: var(--mm-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mm-white);
    background-color: var(--mm-teal);
    border: 1px solid var(--mm-teal);
    border-radius: var(--mm-radius-pill);
    transition:
        background-color var(--mm-dur) var(--mm-ease),
        border-color var(--mm-dur) var(--mm-ease),
        transform var(--mm-dur) var(--mm-ease);
}

:is(.page, .single) .entry-content .wp-block-button__link:hover,
:is(.page, .single) .entry-content .wp-block-button__link:focus-visible {
    color: var(--mm-white);
    background-color: var(--mm-olive-dark);
    border-color: var(--mm-olive-dark);
    transform: translateY(-2px);
}

/* Variante "Contorno" del editor */
:is(.page, .single) .entry-content .is-style-outline > .wp-block-button__link {
    color: var(--mm-teal);
    background-color: transparent;
}

:is(.page, .single) .entry-content .is-style-outline > .wp-block-button__link:hover,
:is(.page, .single) .entry-content .is-style-outline > .wp-block-button__link:focus-visible {
    color: var(--mm-white);
    background-color: var(--mm-teal);
    border-color: var(--mm-teal);
}

:is(.page, .single) .entry-content .wp-block-button__link:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 3px;
}

/* Tablas */
:is(.page, .single) .entry-content table {
    width: 100%;
    margin: var(--mm-space-5) 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

:is(.page, .single) .entry-content :is(th, td) {
    padding: var(--mm-space-3) var(--mm-space-4);
    text-align: left;
    border: 1px solid var(--mm-border);
}

:is(.page, .single) .entry-content th {
    font-weight: 500;
    color: var(--mm-teal);
    background-color: var(--mm-surface-alt);
}

/* Móvil: imágenes flotantes a todo el ancho */
@media (max-width: 767px) {
    :is(.page, .single) .entry-content :is(img, figure):is(.alignleft, .alignright) {
        float: none;
        display: block;
        margin: 0 auto var(--mm-space-5);
    }
}

/* Caja de autor */
.author-box {
    margin-bottom: 40px;
    padding: 40px;
    border: 4px solid #eaeaea;
}

/* Cabecera de categoría/búsqueda (rediseño 2026): título serif en teal,
   centrado como el hero, con una línea corta #d6daba debajo. El text-align
   va con !important porque el tema justifica los h1 */
.archive .page-header,
.search .page-header {
    margin: 0;
    padding: 0 0 var(--mm-space-2);
    text-align: left;
    background-color: transparent;
    border-bottom: 0;
}

.archive .page-header .page-title,
.search .page-header .page-title {
    margin: 0;
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-2xl);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: left !important;
    text-transform: none;
    color: var(--mm-teal);
}

.archive .page-header .page-title::after,
.search .page-header .page-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin: var(--mm-space-4) 0 0;
    background-color: var(--mm-line);
}

/* Término buscado en cursiva */
.search .page-header .page-title span {
    font-style: italic;
    color: var(--mm-olive-dark);
}

/* Descripción de la categoría (si se rellena en el panel) */
.archive .page-header .taxonomy-description {
    max-width: 60ch;
    margin: var(--mm-space-4) 0 0;
    font-size: var(--mm-fs-base);
    color: var(--mm-text);
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media (max-width: 991px) {
    /* Tablet: el original (Bootstrap col-md) apila contenido, barra lateral y
	   columnas del pie por debajo de 992px; GeneratePress solo lo hace a 768px */
    .site-content {
        flex-direction: column;
    }

    .container .site-content .content-area,
    .is-left-sidebar.sidebar,
    .is-right-sidebar.sidebar {
        width: auto;
        order: initial;
    }

    #main {
        margin-left: 0;
        margin-right: 0;
    }

    .sidebar .inside-right-sidebar,
    .sidebar .inside-left-sidebar {
        padding-left: 0;
    }

    /* Pie apilado: 24px entre cajas (como las tarjetas) y sin márgenes que se
       sumen. La 3.ª columna, vacía, solo añadía hueco */
    .site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets {
        flex-direction: column;
        gap: var(--mm-space-5);
    }

    .site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets > div {
        margin-bottom: 0;
    }

    .site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets > div:not(:has(.widget)) {
        display: none;
    }

    .site-footer .footer-widgets .widget {
        margin-bottom: 0;
    }

    .site-footer .footer-widgets-container {
        padding-bottom: 0;
    }

    .site-footer .site-info {
        margin-top: var(--mm-space-6);
    }

    .site-footer .site-info .inside-site-info {
        padding-top: var(--mm-space-4);
        padding-bottom: var(--mm-space-4);
    }
}

@media (max-width: 768px) {
    .mm-hero {
        padding: var(--mm-space-6) var(--mm-space-4) var(--mm-space-5);
    }

    .mm-hero__kicker::before,
    .mm-hero__kicker::after {
        width: 24px;
    }

    /* Menú móvil: logo en el extremo izquierdo y botón del menú en el derecho */
    .site-header .inside-header {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
        text-align: left;
    }

    .site-header .mobile-menu-control-wrapper {
        margin-left: auto;
    }

    /* Paginación: como el original en móvil, solo "Anterior" y "Siguiente" en una
	   fila (los números se ocultan); "Siguiente" siempre a la derecha */
    .paging-navigation .nav-links {
        display: flex;
        justify-content: space-between;
    }

    .paging-navigation .nav-links .page-numbers:not(.prev):not(.next) {
        display: none;
    }

    .paging-navigation .nav-links .next {
        margin-left: auto;
    }
}

/* Móvil: una tarjeta por fila */
@media (max-width: 640px) {
    .blog .site-main,
    .archive .site-main,
    .search .site-main {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--mm-space-5);
    }

    body:not(.single) .site-main .inside-article > footer.entry-meta,
    .blog .entry-title,
    .archive .entry-title,
    .search .entry-title,
    .blog .entry-summary,
    .archive .entry-summary,
    .search .entry-summary,
    body:not(.single) .site-main .inside-article > .entry-header > .entry-meta {
        padding-left: var(--mm-space-4);
        padding-right: var(--mm-space-4);
    }
}

/* ==========================================================================
   11. Barra lateral (rediseño 2026): banner "Conoce mi Web Personal" y redes.
   Solo .sidebar: los widgets del pie comparten estilos (§8) y no se tocan.
   ========================================================================== */
.widget-area.sidebar .widget {
    margin: 0 0 var(--mm-space-5);
}

.widget-area.sidebar .widget:last-child {
    margin-bottom: 0;
}

/* Misma altura de arranque que la rejilla del listado y la cabecera de la entrada */
.blog .inside-right-sidebar,
.archive .inside-right-sidebar,
.search .inside-right-sidebar,
.single .inside-right-sidebar {
    margin-top: var(--mm-space-5);
}

/* Banner: como las tarjetas (radio, sombra y elevación en el hover) */
.widget-area.sidebar .widget.widget_image .jetpack-image-container > a {
    display: block;
    overflow: hidden;
    border-radius: var(--mm-radius-md);
    box-shadow: var(--mm-shadow-sm);
    transition:
        transform var(--mm-dur) var(--mm-ease),
        box-shadow var(--mm-dur) var(--mm-ease);
}

.widget-area.sidebar .widget.widget_image .jetpack-image-container > a:hover,
.widget-area.sidebar .widget.widget_image .jetpack-image-container > a:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--mm-shadow-md);
}

.widget-area.sidebar .widget.widget_image .jetpack-image-container > a:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 3px;
}

.widget-area.sidebar .widget.widget_image img {
    border-radius: 0; /* el radio lo lleva el enlace (overflow: hidden) */
}

/* Redes: caja en verde claro de la marca, sin el borde punteado */
.widget-area.sidebar .widget.widget_lsi_widget {
    padding: var(--mm-space-5);
    text-align: center;
    background-color: var(--mm-surface-alt);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-md);
}

/* Título dentro de la caja, con el mismo estilo que el antetítulo del hero */
.widget-area.sidebar .widget.widget_lsi_widget .widget-title {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mm-space-3);
    margin: 0 0 var(--mm-space-4);
    padding: 0;
    transform: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--mm-olive-dark);
    background-color: transparent;
}

.widget-area.sidebar .widget.widget_lsi_widget .widget-title::before,
.widget-area.sidebar .widget.widget_lsi_widget .widget-title::after {
    content: "";
    width: 24px;
    height: 1px;
    background-color: var(--mm-olive);
}

/* Iconos redondos. El plugin mete sus colores en línea con !important:
   estos selectores son más específicos y por eso ganan */
.widget-area.sidebar .lsi-social-icons {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mm-space-3);
}

.widget-area.sidebar .lsi-social-icons li {
    margin: 0 !important;
}

.widget-area.sidebar .lsi-social-icons li a,
.widget-area.sidebar .lsi-social-icons li a:visited,
.widget-area.sidebar .lsi-social-icons li a:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    font-size: 16px !important;
    line-height: 1;
    color: var(--mm-white) !important;
    background: var(--mm-olive-dark) !important;
    transition:
        background-color var(--mm-dur) var(--mm-ease),
        transform var(--mm-dur) var(--mm-ease);
}

.widget-area.sidebar .lsi-social-icons li a:hover,
.widget-area.sidebar .lsi-social-icons li a:focus-visible {
    color: var(--mm-white) !important;
    background: var(--mm-teal) !important;
    transform: translateY(-2px);
}

.widget-area.sidebar .lsi-social-icons li a:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 2px;
}

/* Escritorio: la barra lateral acompaña al hacer scroll (banner + redes caben
   en pantalla). Se descuenta la cabecera fija (~50px) y la barra de admin */
@media (min-width: 992px) and (min-height: 760px) {
    .blog .inside-right-sidebar,
    .archive .inside-right-sidebar,
    .search .inside-right-sidebar,
    .single .inside-right-sidebar {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 80px);
    }
}

/* Tablet: la barra cae bajo el listado (2 columnas); el banner (vertical) no
   se estira a todo el ancho */
@media (min-width: 641px) and (max-width: 991px) {
    .widget-area.sidebar .widget.widget_image {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .widget-area.sidebar .widget.widget_lsi_widget {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Móvil (tarjetas a 1 columna): banner y redes encima del listado, con el
   mismo ancho que las tarjetas y la misma separación entre bloques (24px).
   Solo en listados: en la entrada individual la barra sigue debajo */
@media (max-width: 640px) {
    .blog .site-content .is-right-sidebar.sidebar,
    .archive .site-content .is-right-sidebar.sidebar,
    .search .site-content .is-right-sidebar.sidebar {
        order: -1;
    }

    .blog .inside-right-sidebar,
    .archive .inside-right-sidebar,
    .search .inside-right-sidebar {
        margin: var(--mm-space-5) 0 0;
    }
}

/* ==========================================================================
   12. Pie: widgets "¡Quiero leer más!" y "¡NeuroSuscríbete!" (rediseño 2026).
   Mismo lenguaje que la barra lateral (§11). La barra del copyright no cambia
   ========================================================================== */
.site-footer .footer-widgets .footer-widgets-container .widget.OrangeIdea_popular_post_widget,
.site-footer .footer-widgets .footer-widgets-container .widget.widget_blog_subscription {
    margin-top: 0;
    padding: var(--mm-space-6);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-md);
    box-shadow: var(--mm-shadow-sm);
}

/* Títulos dentro de la caja, como el antetítulo del hero */
.site-footer .footer-widgets .widget.OrangeIdea_popular_post_widget .widget-title,
.site-footer .footer-widgets .widget.widget_blog_subscription .widget-title {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mm-space-3);
    margin: 0 0 var(--mm-space-5);
    padding: 0;
    transform: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--mm-olive-dark);
    background-color: transparent;
}

.site-footer .footer-widgets .widget.OrangeIdea_popular_post_widget .widget-title::before,
.site-footer .footer-widgets .widget.OrangeIdea_popular_post_widget .widget-title::after,
.site-footer .footer-widgets .widget.widget_blog_subscription .widget-title::before,
.site-footer .footer-widgets .widget.widget_blog_subscription .widget-title::after {
    content: "";
    width: 24px;
    height: 1px;
    background-color: var(--mm-olive);
}

/* ¡Quiero leer más!: cada entrada es una mini tarjeta horizontal con el mismo
   lenguaje que las del listado (imagen redondeada, píldora, título serif) */
.site-footer .mm-popular-posts__item {
    position: relative;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: var(--mm-space-4);
    margin-bottom: var(--mm-space-4);
    padding-bottom: var(--mm-space-4);
    border-bottom-color: var(--mm-border);
}

.site-footer .mm-popular-posts__image {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--mm-radius-sm);
    background-color: var(--mm-surface-alt);
}

.site-footer .mm-popular-posts__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--mm-ease);
}

.site-footer .mm-popular-posts__item:hover .mm-popular-posts__image img {
    transform: scale(1.06);
}

.site-footer .mm-popular-posts__content {
    align-items: flex-start;
    gap: var(--mm-space-2);
}

.site-footer .mm-popular-posts__cat {
    display: inline-block;
    padding: 2px var(--mm-space-2);
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mm-teal);
    background-color: var(--mm-teal-soft);
    border-radius: var(--mm-radius-pill);
}

.site-footer .mm-popular-posts__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-family: var(--mm-font-serif);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--mm-heading);
    transition: color var(--mm-dur) var(--mm-ease);
}

/* Toda la fila es clicable */
.site-footer .mm-popular-posts__title::after {
    content: "";
    position: absolute;
    inset: 0;
}

.site-footer .mm-popular-posts__item:hover .mm-popular-posts__title {
    color: var(--mm-teal);
}

.site-footer .mm-popular-posts__title:focus-visible {
    outline: none;
}

.site-footer .mm-popular-posts__title:focus-visible::after {
    outline: 2px solid var(--mm-teal);
    outline-offset: 4px;
    border-radius: var(--mm-radius-sm);
}

.site-footer .mm-popular-posts__date {
    font-size: var(--mm-fs-sm);
    line-height: 1.2;
    color: var(--mm-olive-dark);
    opacity: 1;
}

@media (max-width: 640px) {
    .site-footer .mm-popular-posts__item {
        grid-template-columns: 40% minmax(0, 1fr);
        gap: var(--mm-space-3);
    }
}

/* Caja estrecha (p. ej. 992–1199px y tablet, con el pie en 3 columnas):
   miniatura cuadrada más pequeña a la izquierda, para que el texto quepa sin
   alargar la caja (la de suscripción se estira a su altura). Depende del
   ancho de la lista, no de la pantalla */
.site-footer .mm-popular-posts {
    container-type: inline-size;
}

.site-footer .mm-popular-posts__cat {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@container (max-width: 380px) {
    .site-footer .mm-popular-posts__item {
        grid-template-columns: 88px minmax(0, 1fr);
        align-items: start;
        gap: var(--mm-space-3);
    }

    .site-footer .mm-popular-posts__image {
        aspect-ratio: 1 / 1;
    }

    .site-footer .mm-popular-posts__title {
        font-size: 0.9375rem;
        line-height: 1.35;
    }
}

/* ¡NeuroSuscríbete!: caja teal (contraste blanco/teal 11:1; botón teal sobre
   #d6daba 7,8:1. El oliva con texto blanco no llega a AA) */
.site-footer .footer-widgets .footer-widgets-container .widget.widget_blog_subscription {
    color: var(--mm-white);
    background-color: var(--mm-teal);
    border-color: var(--mm-teal);
}

.site-footer .footer-widgets .widget.widget_blog_subscription .widget-title {
    color: var(--mm-line);
}

/* La caja se estira hasta la altura de "¡Quiero leer más!" (flex-grow en la
   columna): el contenido se centra en vertical en vez de quedarse arriba */
.site-footer .footer-widgets .footer-widgets-container .widget.widget_blog_subscription {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-footer .widget_blog_subscription form,
.site-footer .widget_blog_subscription .wp-block-jetpack-subscriptions__container {
    margin-bottom: 0;
}

.site-footer .widget_blog_subscription #subscribe-text,
.site-footer .widget_blog_subscription #subscribe-text p {
    margin-bottom: var(--mm-space-5);
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-lg);
    line-height: 1.5;
    text-align: center;
    color: var(--mm-white);
}

.site-footer .widget_blog_subscription #subscribe-text p {
    margin-bottom: 0;
}

.site-footer .widget_blog_subscription #subscribe-email,
.site-footer .widget_blog_subscription #subscribe-submit {
    margin: 0;
}

.site-footer .widget_blog_subscription #subscribe-submit {
    margin-top: var(--mm-space-3);
    text-align: center;
}

/* Con #subscribe-email para ganar a "#subscribe-email input{width:95%}" de Jetpack */
.site-footer .widget_blog_subscription #subscribe-email input[type="email"] {
    width: 100%;
    height: 48px;
    padding: 0 var(--mm-space-5);
    font-size: var(--mm-fs-base);
    color: var(--mm-heading);
    background-color: var(--mm-white);
    border: 1px solid transparent;
    border-radius: var(--mm-radius-pill);
}

.site-footer .widget_blog_subscription input[type="email"]::placeholder {
    color: var(--mm-olive-dark);
}

.site-footer .widget_blog_subscription input[type="email"]:focus {
    outline: 2px solid var(--mm-line);
    outline-offset: 2px;
}

.site-footer .widget_blog_subscription button[type="submit"],
.site-footer .widget_blog_subscription button[type="submit"]:visited {
    width: 100%;
    height: 48px;
    padding: 0 var(--mm-space-5);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--mm-teal);
    background-color: var(--mm-line);
    border: 0;
    border-radius: var(--mm-radius-pill);
    transition:
        background-color var(--mm-dur) var(--mm-ease),
        transform var(--mm-dur) var(--mm-ease);
}

.site-footer .widget_blog_subscription button[type="submit"]:hover,
.site-footer .widget_blog_subscription button[type="submit"]:focus-visible {
    color: var(--mm-teal);
    background-color: var(--mm-white);
    transform: translateY(-2px);
}

.site-footer .widget_blog_subscription button[type="submit"]:focus-visible {
    outline: 2px solid var(--mm-line);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .site-footer .footer-widgets .footer-widgets-container .widget.OrangeIdea_popular_post_widget,
    .site-footer .footer-widgets .footer-widgets-container .widget.widget_blog_subscription {
        padding: var(--mm-space-5);
    }
}

/* ==========================================================================
   13. Contacto y Mi NeuroYO (rediseño 2026).
   .mm-split (las dos páginas) / .mm-contact / .mm-about: clases de hooks.php.
   El contenido de las páginas no se toca: el banner va dentro de un h3 (2016)
   y se coloca con float a la izquierda; el resto de bloques son "flow-root"
   para quedarse en su columna junto a él, sin pasar por debajo
   ========================================================================== */
.mm-split .entry-content {
    margin-top: var(--mm-space-5);
    font-size: var(--mm-fs-base);
    line-height: 1.7;
    color: var(--mm-text);
}

/* Banner "Conoce mi Web Personal": columna izquierda, como en la barra lateral */
.mm-split .entry-content > h3 > a:first-child {
    float: left;
    width: 40%;
    margin: 0 var(--mm-space-7) var(--mm-space-5) 0;
    overflow: hidden;
    border-radius: var(--mm-radius-md);
    box-shadow: var(--mm-shadow-sm);
    transition:
        transform var(--mm-dur) var(--mm-ease),
        box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-split .entry-content > h3 > a:first-child:hover,
.mm-split .entry-content > h3 > a:first-child:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--mm-shadow-md);
}

.mm-split .entry-content > h3 > a:first-child:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 3px;
}

.mm-split .entry-content > h3 > a:first-child > img {
    float: none;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* Icono de sobre de 2016 junto a "¿Quieres contactar conmigo?": fuera.
   Con .alignleft para ganar a ".page .entry-content h3 > img.alignleft" (§9b, móvil) */
.mm-split .entry-content > h3 > img,
.mm-split .entry-content > h3 > img.alignleft {
    display: none;
}

/* Párrafos vacíos que quedan al final del contenido */
.mm-split .entry-content > p:empty {
    display: none;
}

/* Contacto: separadores hechos con párrafos de &nbsp; */
.mm-contact .entry-content > h3 + p,
.mm-contact .entry-content > h5 + p {
    display: none;
}

/* Título: serif teal, como el hero. !important por el justify en línea */
.mm-contact .entry-content > h3 {
    margin: 0 0 var(--mm-space-4);
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-2xl);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: left !important;
    color: var(--mm-teal);
}

.mm-split .entry-content > p,
.mm-split .entry-content > h5,
.mm-split .entry-content > .wpcf7 {
    display: flow-root;
}

.mm-split .entry-content > p {
    margin: 0 0 var(--mm-space-4);
    text-align: left !important;
}

.mm-split .entry-content > p strong {
    font-weight: 500;
    color: var(--mm-teal);
}

/* "Espero que tengas un fantástico día." como cierre en cursiva */
.mm-contact .entry-content > h5 {
    margin: var(--mm-space-2) 0 var(--mm-space-6);
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-lg);
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    text-align: left !important;
    color: var(--mm-olive-dark);
}

/* Formularios de Contact Form 7 en tarjeta. Con .entry-content (no .mm-contact):
   cualquier formulario en una página o entrada se ve igual que el de Contacto */
.entry-content .wpcf7 {
    float: none;
    width: auto;
    padding: var(--mm-space-6);
    background-color: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-md);
    box-shadow: var(--mm-shadow-sm);
}

.entry-content .wpcf7-form p {
    margin: 0 0 var(--mm-space-5);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--mm-olive-dark);
}

/* El párrafo del botón es el último: sin margen bajo él */
.entry-content .wpcf7-form p:last-of-type {
    margin-bottom: 0;
}

/* Formulario actual (del gestor): cada etiqueta ("Nombre (requerido)") va en
   su propio <p> y el campo en el siguiente. La etiqueta se pega a su campo
   (8px) y la separación entre grupos queda en 20px */
.entry-content .wpcf7-form p:has(+ p > .wpcf7-form-control-wrap) {
    margin-bottom: var(--mm-space-2);
}

.entry-content .wpcf7-form p:has(> .wpcf7-form-control-wrap) {
    margin-bottom: 20px;
}

.entry-content .wpcf7-form p > .wpcf7-form-control-wrap:first-child {
    margin-top: 0;
}

/* Nombre y correo en 2 columnas (plantilla nueva de CF7: .mm-form-row) */
.entry-content .mm-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--mm-space-4);
}

.entry-content .wpcf7-form label {
    display: block;
}

.entry-content .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: var(--mm-space-2);
}

.entry-content .wpcf7-form .wpcf7-acceptance .wpcf7-form-control-wrap,
.entry-content .wpcf7-form .wpcf7-form-control-wrap:has(.wpcf7-acceptance) {
    margin-top: 0;
}

.entry-content .mm-req {
    color: var(--mm-teal);
}

.entry-content .wpcf7-form input[type="text"],
.entry-content .wpcf7-form input[type="email"],
.entry-content .wpcf7-form textarea {
    width: 100%;
    height: 48px;
    padding: 0 var(--mm-space-4);
    font-family: var(--mm-font-sans);
    font-size: var(--mm-fs-base); /* 16px: iOS no hace zoom al enfocar */
    font-weight: 400;
    line-height: 1.5;
    color: var(--mm-heading);
    background-color: var(--mm-white);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
    transition:
        border-color var(--mm-dur) var(--mm-ease),
        box-shadow var(--mm-dur) var(--mm-ease);
}

/* Mensaje: 3 líneas de alto (el usuario puede estirarlo hacia abajo) */
.entry-content .wpcf7-form textarea {
    height: 96px;
    min-height: 96px;
    padding: var(--mm-space-3) var(--mm-space-4);
    resize: vertical;
}

.entry-content .wpcf7-form input[type="text"]:hover,
.entry-content .wpcf7-form input[type="email"]:hover,
.entry-content .wpcf7-form textarea:hover {
    border-color: var(--mm-line);
}

.entry-content .wpcf7-form input[type="text"]:focus,
.entry-content .wpcf7-form input[type="email"]:focus,
.entry-content .wpcf7-form textarea:focus {
    border-color: var(--mm-teal);
    outline: none;
    box-shadow: 0 0 0 4px var(--mm-teal-soft);
}

/* Casilla de privacidad */
.entry-content .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.entry-content .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: var(--mm-space-3);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--mm-text);
    cursor: pointer;
}

.entry-content .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--mm-teal);
    cursor: pointer;
}

.entry-content .wpcf7-acceptance a {
    color: var(--mm-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Botón */
.entry-content .wpcf7-form input[type="submit"] {
    width: auto;
    height: 48px;
    margin: 0;
    padding: 0 var(--mm-space-6);
    font-family: var(--mm-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-white);
    background-color: var(--mm-teal);
    border: 0;
    border-radius: var(--mm-radius-pill);
    cursor: pointer;
    transition:
        background-color var(--mm-dur) var(--mm-ease),
        transform var(--mm-dur) var(--mm-ease);
}

.entry-content .wpcf7-form input[type="submit"]:hover,
.entry-content .wpcf7-form input[type="submit"]:focus-visible {
    background-color: var(--mm-olive-dark);
    transform: translateY(-2px);
}

.entry-content .wpcf7-form input[type="submit"]:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 3px;
}

/* Spinner de CF7: invisible pero ocupaba 72px junto al botón. Fuera; mientras
   envía (form.submitting) el aviso lo da el propio botón, atenuado */
.entry-content .wpcf7-spinner {
    display: none;
}

.entry-content .wpcf7 form.submitting input[type="submit"] {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

/* CF7 desactiva el botón hasta marcar la casilla de privacidad */
.entry-content .wpcf7-form input[type="submit"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* Validación y mensajes */
.entry-content .wpcf7-form .wpcf7-not-valid {
    border-color: #b3261e;
}

.entry-content .wpcf7-not-valid-tip {
    margin-top: var(--mm-space-2);
    font-size: 0.8125rem;
    font-weight: 400;
    color: #b3261e;
}

.entry-content .wpcf7 form .wpcf7-response-output {
    margin: var(--mm-space-4) 0 0;
    padding: var(--mm-space-3) var(--mm-space-4);
    font-size: 0.875rem;
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
}

.entry-content .wpcf7 form.sent .wpcf7-response-output {
    color: var(--mm-teal);
    background-color: var(--mm-teal-soft);
    border-color: var(--mm-teal);
}

.entry-content .wpcf7 form.invalid .wpcf7-response-output,
.entry-content .wpcf7 form.unaccepted .wpcf7-response-output,
.entry-content .wpcf7 form.failed .wpcf7-response-output,
.entry-content .wpcf7 form.spam .wpcf7-response-output {
    color: #8c1d18;
    background-color: #fdf0ef;
    border-color: #b3261e;
}

/* Móvil y tablet pequeña: una columna; el banner arriba, centrado y acotado */
@media (max-width: 768px) {
    .mm-split .entry-content > h3 > a:first-child {
        float: none;
        display: block;
        width: 100%;
        max-width: 360px;
        margin: 0 auto var(--mm-space-6);
    }

    .entry-content .wpcf7 {
        padding: var(--mm-space-5);
    }

    /* Móvil: campos de 44px (mínimo cómodo para el dedo) y grupos a 16px */
    .entry-content .wpcf7-form input[type="text"],
    .entry-content .wpcf7-form input[type="email"] {
        height: 44px;
    }

    .entry-content .wpcf7-form textarea {
        height: 88px;
        min-height: 88px;
    }

    .entry-content .wpcf7-form p:has(> .wpcf7-form-control-wrap) {
        margin-bottom: var(--mm-space-4);
    }

    .entry-content .wpcf7-form input[type="submit"] {
        height: 44px;
    }

    .entry-content .mm-form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .entry-content .wpcf7-form input[type="submit"] {
        width: 100%;
    }
}

/* ==========================================================================
   14. Mi NeuroYO (rediseño 2026). Banner, texto y móvil: .mm-split (§13)
   ========================================================================== */

/* Título (H1 añadido desde hooks.php): como el de Contacto */
.mm-about .mm-about__title {
    display: flow-root;
    margin: 0 0 var(--mm-space-4);
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-2xl);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--mm-teal);
}

/* Primer párrafo como el resto; solo el nombre destaca en cursiva serif teal */
.mm-about .mm-about__title + p strong {
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-lg);
    font-style: italic;
    font-weight: 400;
    color: var(--mm-teal);
}

/* Programas de radio y TV */
.mm-about .entry-content > p em {
    font-family: var(--mm-font-serif);
}

/* "¿Quieres contactar conmigo?": caja teal y toda ella enlaza a Contacto
   (el enlace del contenido solo está en "contactar"). Blanco sobre teal 11:1;
   #d6daba sobre teal 7,8:1 */
.mm-about .entry-content > h3:last-of-type {
    position: relative;
    display: flow-root;
    margin: var(--mm-space-6) 0 0;
    padding: 20px var(--mm-space-6); /* una sola línea: con 32px arriba y abajo quedaba gruesa */
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-xl);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: center !important; /* justify en línea */
    color: var(--mm-white);
    background-color: var(--mm-teal);
    border-radius: var(--mm-radius-md);
    box-shadow: var(--mm-shadow-sm);
    transition:
        transform var(--mm-dur) var(--mm-ease),
        box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-about .entry-content > h3:last-of-type:hover,
.mm-about .entry-content > h3:last-of-type:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--mm-shadow-md);
}

.mm-about .entry-content > h3:last-of-type > a {
    color: var(--mm-line);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: color var(--mm-dur) var(--mm-ease);
}

.mm-about .entry-content > h3:last-of-type > a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--mm-radius-md);
}

.mm-about .entry-content > h3:last-of-type:hover > a,
.mm-about .entry-content > h3:last-of-type > a:focus-visible {
    color: var(--mm-white);
}

.mm-about .entry-content > h3:last-of-type > a:focus-visible {
    outline: none;
}

.mm-about .entry-content > h3:last-of-type > a:focus-visible::after {
    outline: 2px solid var(--mm-teal);
    outline-offset: 3px;
}

/* "Mis libros": a todo el ancho bajo la caja de contacto. HTML pegado en el
   gestor (div.mm-books); va dentro de un div para que sus h3 no cuenten en el
   h3:last-of-type de la caja de contacto */
.mm-about .entry-content .mm-books {
    clear: both;
    padding-top: var(--mm-space-8);
}

/* Cabecera centrada, como el hero: antetítulo con líneas (.mm-books__kicker,
   junto a .mm-hero__kicker), título con la cursiva como acento y entradilla */
.mm-about .entry-content .mm-books__title {
    margin: 0;
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    line-height: 1.15;
    text-align: center;
}

.mm-about .entry-content .mm-books__intro {
    max-width: 560px;
    margin: var(--mm-space-3) auto 0;
    text-align: center;
    color: var(--mm-olive-dark);
}

.mm-about .entry-content .mm-books__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mm-space-6);
    margin-top: var(--mm-space-7);
}

/* Tarjeta: panel de color con la portada a la izquierda, texto a la derecha */
.mm-about .entry-content .mm-book {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    overflow: hidden;
    background-color: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-md);
    box-shadow: var(--mm-shadow-sm);
    transition:
        transform var(--mm-dur) var(--mm-ease),
        box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-about .entry-content .mm-book:hover {
    transform: translateY(-4px);
    box-shadow: var(--mm-shadow-md);
}

.mm-about .entry-content .mm-book__cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--mm-space-7) var(--mm-space-5);
    perspective: 900px;
}

/* Cada panel toma el color de su portada */
.mm-about .entry-content .mm-book--love .mm-book__cover {
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.65), transparent 45%),
        linear-gradient(160deg, #fbe6dc 0%, #f4bfa8 100%);
}

/* Cielo estrellado, como la portada de ¡A cerebrar!, sobre el teal de la marca */
.mm-about .entry-content .mm-book--cerebrar .mm-book__cover {
    background:
        radial-gradient(circle at 70% 18%, rgba(214, 218, 186, 0.25), transparent 40%),
        radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px) 0 0 / 46px 46px,
        radial-gradient(circle, rgba(255, 255, 255, 0.4) 0 1px, transparent 1.5px) 23px 17px / 31px 31px,
        linear-gradient(160deg, #0b4a4d 0%, #002a2c 100%);
}

/* Portada como un libro en 3D, ligeramente girado; se endereza al pasar el ratón */
.mm-about .entry-content .mm-book__cover img {
    display: block;
    width: 100%;
    max-width: 200px;
    border-radius: 3px 6px 6px 3px;
    box-shadow:
        3px 4px 8px rgba(0, 0, 0, 0.18),
        14px 20px 32px rgba(0, 0, 0, 0.28);
    transform: rotateY(-16deg) rotateX(2deg);
    transform-origin: left center;
    transition: transform 400ms var(--mm-ease);
}

.mm-about .entry-content .mm-book:hover .mm-book__cover img {
    transform: rotateY(0) translateY(-6px) scale(1.03);
}

.mm-about .entry-content .mm-book__badge {
    position: absolute;
    top: var(--mm-space-4);
    left: var(--mm-space-4);
    z-index: 1;
    padding: var(--mm-space-1) var(--mm-space-3);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-white);
    background-color: var(--mm-teal);
    border-radius: var(--mm-radius-pill);
}

.mm-about .entry-content .mm-book__body {
    display: flex;
    flex-direction: column;
    padding: var(--mm-space-6);
}

.mm-about .entry-content .mm-book__title {
    margin: 0 0 var(--mm-space-2);
    font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
    line-height: 1.25;
}

.mm-about .entry-content .mm-book__subtitle {
    margin: 0 0 var(--mm-space-4);
    padding-bottom: var(--mm-space-4);
    font-family: var(--mm-font-serif);
    font-style: italic;
    line-height: 1.5;
    color: var(--mm-olive-dark);
    border-bottom: 1px solid var(--mm-line);
}

.mm-about .entry-content .mm-book__text {
    font-size: 0.9375rem;
}

/* Botón abajo del todo: los dos quedan alineados aunque el texto mida distinto */
.mm-about .entry-content .mm-book__cta {
    margin: auto 0 0;
    padding-top: var(--mm-space-3);
}

.mm-about .entry-content .mm-book__cta .wp-block-button__link::after {
    content: "→";
    display: inline-block;
    margin-left: var(--mm-space-2);
    transition: transform var(--mm-dur) var(--mm-ease);
}

.mm-about .entry-content .mm-book__cta .wp-block-button__link:hover::after,
.mm-about .entry-content .mm-book__cta .wp-block-button__link:focus-visible::after {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .mm-about .entry-content > h3:last-of-type {
        padding: var(--mm-space-4) var(--mm-space-5);
    }
}

@media (max-width: 991px) {
    .mm-about .entry-content .mm-books__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Una tarjeta por fila: hay ancho para una portada aún mayor */
    .mm-about .entry-content .mm-book {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .mm-about .entry-content .mm-book__cover img {
        max-width: 230px;
    }
}

/* Móvil: panel con la portada arriba, texto debajo */
@media (max-width: 640px) {
    .mm-about .entry-content .mm-books {
        padding-top: var(--mm-space-7);
    }

    .mm-about .entry-content .mm-books__grid {
        gap: var(--mm-space-5);
        margin-top: var(--mm-space-6);
    }

    .mm-about .entry-content .mm-book {
        grid-template-columns: minmax(0, 1fr);
    }

    .mm-about .entry-content .mm-book__cover {
        padding: var(--mm-space-6);
    }

    .mm-about .entry-content .mm-book__cover img {
        max-width: 190px;
    }

    .mm-about .entry-content .mm-book__body {
        padding: var(--mm-space-5);
    }

    .mm-about .entry-content .mm-book__cta .wp-block-button__link {
        display: block;
        text-align: center;
    }
}

/* ==========================================================================
   15. Entrada individual (rediseño 2026). Sustituye a la §7 de Suzette.
   El texto, los encabezados, las listas, las citas, las imágenes y los botones
   vienen de la base común de páginas y entradas (§9b); aquí va lo propio de las
   entradas y lo heredado de 2016 (43 entradas del editor clásico, cada una
   maquetada a mano). No se toca el contenido: todo con CSS
   ========================================================================== */
.single .site-main > article {
    margin: 0;
    background-color: transparent;
}

/* Orden visual: cabecera → imagen destacada → contenido → etiquetas → me gusta.
   GeneratePress pinta la imagen antes de la cabecera */
.single .inside-article {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: transparent;
}

.single .inside-article > .entry-header {
    order: 1;
}

.single .inside-article > .featured-image {
    order: 2;
}

.single .inside-article > .entry-content {
    order: 3;
}

.single .inside-article > footer.entry-meta {
    order: 4;
}

.single .inside-article > .mm-like {
    order: 5;
}

/* Cabecera: categoría (píldora) → título → fecha · min de lectura */
.single .entry-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mm-space-3);
    margin: var(--mm-space-5) 0 var(--mm-space-5);
    text-align: left;
}

/* Categoría en píldora delante de "fecha · min de lectura" (hooks.php la añade
   al final en generate_post_date_output; el orden lo pone order: -1) */
.mm-single-cats {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mm-space-2);
    order: -1;
}

.mm-single-cats::after {
    content: "·";
    margin: 0 var(--mm-space-2) 0 var(--mm-space-1);
    color: var(--mm-olive);
}

.mm-single-cats a {
    display: inline-block;
    padding: var(--mm-space-1) var(--mm-space-3);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mm-teal);
    background-color: var(--mm-teal-soft);
    border-radius: var(--mm-radius-pill);
    transition:
        background-color var(--mm-dur) var(--mm-ease),
        color var(--mm-dur) var(--mm-ease);
}

.mm-single-cats a:hover,
.mm-single-cats a:focus-visible {
    color: var(--mm-white);
    background-color: var(--mm-teal);
}

.single .entry-title {
    max-width: none;
    margin: 0;
    font-family: var(--mm-font-serif);
    font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem); /* 30–44px */
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: left;
    color: var(--mm-teal);
}

.single .entry-header .entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--mm-space-2);
    order: 0;
    margin: 0;
    font-size: var(--mm-fs-sm);
    color: var(--mm-olive-dark);
}

.single .entry-header .posted-on time.updated:not(:only-child) {
    display: none;
}

/* Imagen destacada: como las tarjetas */
.single .featured-image {
    margin: 0 0 var(--mm-space-6);
    overflow: hidden;
    border-radius: var(--mm-radius-md);
    box-shadow: var(--mm-shadow-sm);
}

.single .featured-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Texto: algo más grande que en las páginas, para lectura larga */
.single .entry-content {
    margin: 0;
    padding: 0;
    font-size: 1.0625rem; /* 17px */
    line-height: 1.75;
}

/* text-align: justify escrito a mano en casi todos los párrafos (2016–2025) */
.single .entry-content [style*="justify"] {
    text-align: left !important;
}

/* Encabezados: las entradas usan h3 para las secciones (h2 casi nunca), h4 y h5
   como subtítulos. El h1 que hay dentro de alguna entrada se ve como un h2 */
.single .entry-content :is(h1, h2) {
    margin: var(--mm-space-7) 0 var(--mm-space-4);
    font-family: var(--mm-font-serif);
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--mm-teal);
}

.single .entry-content h3 {
    margin: var(--mm-space-7) 0 var(--mm-space-3);
    font-size: clamp(1.3125rem, 1.15rem + 0.7vw, 1.625rem); /* 21–26px */
    line-height: 1.3;
}

.single .entry-content h4 {
    margin: var(--mm-space-6) 0 var(--mm-space-3);
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-lg);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    color: var(--mm-teal);
}

.single .entry-content h5,
.single .entry-content h6 {
    font-size: 1.0625rem;
}

/* Algunos h5 solo envuelven una imagen o un enlace en negrita */
.single .entry-content :is(h3, h4, h5) strong {
    font-weight: inherit;
    color: inherit;
}

/* Imágenes flotantes dentro de un encabezado (números de las listas de libros,
   botón "comprar"): pequeñas, sin radio grande y alineadas con el texto */
.single .entry-content :is(h2, h3, h4, h5) img {
    border-radius: 4px;
}

.single .entry-content :is(h2, h3, h4, h5) img.alignleft {
    margin: 0 var(--mm-space-3) var(--mm-space-2) 0;
}

.single .entry-content :is(h2, h3, h4, h5) img.alignright {
    margin: 0 0 var(--mm-space-2) var(--mm-space-3);
}

.single .entry-content img.aligncenter {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

/* Iconos pequeños de 2016 (números, mapa, sentidos, autor; 19–35px) en un
   párrafo: pegados al texto (el margen de 24px de las fotos les sobra) */
.single .entry-content img.alignleft:is([width="19"], [width="21"], [width="22"], [width="23"], [width="26"], [width="27"], [width="28"], [width="29"], [width="30"], [width="31"], [width="32"], [width="33"], [width="35"]) {
    clear: left; /* cada número debajo del anterior aunque el punto sea corto */
    margin: 0 var(--mm-space-3) 0 0; /* sin margen vertical: no sangra la 2.ª línea */
    border-radius: 0;
}

/* Vídeos de YouTube: 16:9 con radio (antes llevaban 30px de más arriba) */
.single .video-container {
    position: relative;
    height: auto;
    margin: var(--mm-space-5) 0;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--mm-surface-alt);
    border-radius: var(--mm-radius-md);
    clear: both;
}

.single .video-container :is(iframe, object, embed) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Cajas "Click to Tweet" de 2016 (HTML con estilos en línea): cita destacada.
   Se reconocen por su borde oliva en línea; !important para ganar al style="" */
.single .entry-content div[style*="solid #9a9e7a" i] {
    margin: var(--mm-space-6) 0 !important;
    padding: var(--mm-space-5) var(--mm-space-6) !important;
    background-color: var(--mm-surface-alt) !important;
    border: 0 !important;
    border-left: 3px solid var(--mm-line) !important;
    border-radius: 0 var(--mm-radius-sm) var(--mm-radius-sm) 0 !important;
    clear: both;
}

.single .entry-content div[style*="solid #9a9e7a" i] div {
    margin: 0 !important;
}

.single .entry-content div[style*="solid #9a9e7a" i] p {
    margin: 0;
    text-align: left !important;
}

/* La frase */
.single .entry-content div[style*="solid #9a9e7a" i] a:not(.tm-ctt-btn) {
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-xl) !important;
    font-style: italic;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    color: var(--mm-teal) !important;
}

/* "¡Tuitéalo!" → enlace pequeño "Compartir en X" (el texto original se queda
   para los lectores de pantalla) */
.single .entry-content a.tm-ctt-btn {
    display: inline-flex !important;
    float: none !important;
    margin: var(--mm-space-3) 0 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    font-style: normal !important;
    text-decoration: none !important;
    color: var(--mm-olive-dark) !important;
}

.single .entry-content a.tm-ctt-btn::before {
    content: "Compartir en X →";
    font-family: var(--mm-font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.single .entry-content a.tm-ctt-btn:hover,
.single .entry-content a.tm-ctt-btn:focus-visible {
    color: var(--mm-teal) !important;
}

/* Colores y fuentes en línea de entradas antiguas (#993366, #800000, Times…) */
.single .entry-content span[style*="color"],
.single .entry-content font[color] {
    color: var(--mm-teal) !important;
}

.single .entry-content span[style*="font-family"] {
    font-family: inherit !important;
}

/* "¡Compártelo!" (Jetpack): iconos redondos como los de redes de la barra lateral */
.single .entry-content .sharedaddy {
    margin-top: var(--mm-space-7);
    clear: both;
}

.single .sharedaddy .sd-title {
    display: flex;
    align-items: center;
    gap: var(--mm-space-3);
    margin: 0 0 var(--mm-space-3);
    font-family: var(--mm-font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mm-olive-dark);
}

.single .sharedaddy .sd-title::before {
    display: none;
}

.single .sharedaddy .sd-title::after {
    content: "";
    width: 24px;
    height: 1px;
    background-color: var(--mm-olive);
}

.single .sharedaddy .sd-content ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-space-2);
    margin: 0 !important;
    padding: 0;
}

.single .sharedaddy .sd-content ul li {
    margin: 0 !important;
}

/* Medidas con !important: Jetpack pone ancho/alto automáticos con un selector
   igual de fuerte que se carga después (salían óvalos) */
.single .sharedaddy .sd-content ul li a.sd-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: 40px !important;
    min-width: 40px;
    height: 40px !important;
    line-height: 1 !important;
    padding: 0 !important;
    color: var(--mm-white) !important;
    background: var(--mm-olive-dark) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transition:
        background-color var(--mm-dur) var(--mm-ease),
        transform var(--mm-dur) var(--mm-ease);
}

.single .sharedaddy .sd-content ul li a.sd-button::before {
    top: 0 !important;
    color: var(--mm-white) !important;
}

.single .sharedaddy .sd-content ul li a.sd-button:hover,
.single .sharedaddy .sd-content ul li a.sd-button:focus-visible {
    background: var(--mm-teal) !important;
    transform: translateY(-2px);
}

.single .sharedaddy .sd-content ul li a.sd-button:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 2px;
}

/* Etiquetas como píldoras (las comas se ocultan con font-size: 0) */
.single footer.entry-meta {
    margin: var(--mm-space-5) 0 0;
    padding-top: var(--mm-space-4);
    border-top: 1px solid var(--mm-border);
}

.single footer.entry-meta :is(.gp-icon, .screen-reader-text) {
    display: none;
}

.single footer.entry-meta :is(.cat-links, .tags-links) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-space-2);
    font-size: 0;
}

.single footer.entry-meta :is(.cat-links, .tags-links) a {
    display: inline-block;
    padding: var(--mm-space-1) var(--mm-space-3);
    font-size: var(--mm-fs-sm);
    line-height: 1.5;
    text-decoration: none;
    color: var(--mm-teal);
    background-color: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-pill);
    transition:
        background-color var(--mm-dur) var(--mm-ease),
        border-color var(--mm-dur) var(--mm-ease);
}

.single footer.entry-meta :is(.cat-links, .tags-links) a::before {
    content: "#";
    color: var(--mm-teal);
}

/* Hover: texto y "#" en oliva oscuro (la regla de las píldoras del listado,
   §6, lo ponía en blanco) */
.single footer.entry-meta :is(.cat-links, .tags-links) a:hover,
.single footer.entry-meta :is(.cat-links, .tags-links) a:focus-visible {
    color: var(--mm-olive-dark);
    background-color: var(--mm-surface-alt);
    border-color: var(--mm-line);
}

.single footer.entry-meta :is(.cat-links, .tags-links) a:hover::before,
.single footer.entry-meta :is(.cat-links, .tags-links) a:focus-visible::before {
    color: var(--mm-olive-dark);
}

/* Sin anterior / siguiente (decisión D8) */
.single .post-navigation {
    display: none;
}

/* "Me gusta": píldora como los botones de la paginación */
.mm-like {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--mm-space-4);
}

.mm-like__button,
.mm-like__button:hover,
.mm-like__button:focus,
.mm-like__button:active {
    display: inline-flex;
    align-items: center;
    gap: var(--mm-space-2);
    height: 40px;
    padding: 0 var(--mm-space-4);
    font: 500 0.875rem/1 var(--mm-font-sans);
    color: var(--mm-teal);
    background-color: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-pill);
    box-shadow: none;
    cursor: pointer;
    transition:
        background-color var(--mm-dur) var(--mm-ease),
        border-color var(--mm-dur) var(--mm-ease);
}

.mm-like__button:hover,
.mm-like__button:focus-visible {
    background-color: var(--mm-surface-alt);
    border-color: var(--mm-line);
}

.mm-like__button:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 2px;
}

.mm-like__icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--mm-teal);
    stroke-width: 2;
    transition: fill var(--mm-dur) var(--mm-ease);
}

.mm-like__button:hover .mm-like__icon,
.mm-like__button.is-voted .mm-like__icon {
    fill: var(--mm-teal);
}

.mm-like__button.is-voted,
.mm-like__button.is-voted:hover {
    cursor: default;
    background-color: var(--mm-teal-soft);
    border-color: transparent;
}

/* Caja de la autora (single-post.php): tarjeta blanca con monograma "RM"
   (no hay foto), "Escrito por", nombre, bio y enlace a Mi NeuroYO */
.mm-author-bio {
    display: flex;
    align-items: center;
    gap: var(--mm-space-5);
    margin: var(--mm-space-7) 0 0;
    padding: var(--mm-space-5) var(--mm-space-6);
    background-color: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-md);
    box-shadow: var(--mm-shadow-sm);
}

/* Monograma: iniciales en serif cursiva sobre teal, con anillo #d6daba */
.mm-author-bio__avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    font-family: var(--mm-font-serif);
    font-size: 1.75rem;
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--mm-white);
    background-color: var(--mm-teal);
    border: 3px solid var(--mm-white);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--mm-line);
}

.mm-author-bio__body {
    min-width: 0;
}

.mm-author-bio__kicker {
    margin: 0 0 var(--mm-space-1);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mm-olive-dark);
}

.single .mm-author-bio__name {
    margin: 0 0 var(--mm-space-1);
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-xl);
    line-height: 1.3;
    color: var(--mm-teal);
}

.single .mm-author-bio__description {
    margin: 0 0 var(--mm-space-2);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--mm-text);
}

.mm-author-bio__link {
    display: inline-flex;
    align-items: center;
    gap: var(--mm-space-2);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mm-teal);
    transition: color var(--mm-dur) var(--mm-ease);
}

.mm-author-bio__link span {
    transition: transform var(--mm-dur) var(--mm-ease);
}

.mm-author-bio__link:hover,
.mm-author-bio__link:focus-visible {
    color: var(--mm-olive-dark);
}

.mm-author-bio__link:hover span,
.mm-author-bio__link:focus-visible span {
    transform: translateX(4px);
}

.mm-author-bio__link:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (max-width: 767px) {
    .mm-author-bio {
        align-items: flex-start;
        gap: var(--mm-space-4);
        padding: var(--mm-space-5);
    }

    .mm-author-bio__avatar {
        width: 56px;
        height: 56px;
        font-size: 1.3125rem;
    }
}

/* Entradas relacionadas: franja a lo ancho (como la original) con tres tarjetas
   y el título siempre visible (antes solo en el hover, invisible en móvil) */
.mm-related {
    margin: var(--mm-space-7) 0;
    padding: var(--mm-space-6);
    background-color: var(--mm-surface-alt);
    border-radius: var(--mm-radius-md);
}

.mm-related .mm-related__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mm-space-3);
    margin: 0 0 var(--mm-space-5);
    font-family: var(--mm-font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-align: center;
    text-transform: uppercase;
    color: var(--mm-olive-dark);
}

.mm-related .mm-related__title::before,
.mm-related .mm-related__title::after {
    content: "";
    width: 24px;
    height: 1px;
    background-color: var(--mm-olive);
}

.mm-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mm-space-5);
}

/* Tarjetas como las del listado de la home: imagen → categoría → título
   (3 líneas como máximo) → fecha · min de lectura, siempre abajo */
.mm-related__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    background-color: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-md);
    transition:
        transform var(--mm-dur) var(--mm-ease),
        box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-related__body {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mm-space-2);
    padding: var(--mm-space-4);
}

.mm-related__cat {
    display: inline-block;
    padding: 2px var(--mm-space-2);
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mm-teal);
    background-color: var(--mm-teal-soft);
    border-radius: var(--mm-radius-pill);
}

.mm-related__meta {
    margin-top: auto;
    padding-top: var(--mm-space-1);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mm-olive-dark);
}

.mm-related__item:hover,
.mm-related__item:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--mm-shadow-md);
}

.mm-related__item:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 3px;
}

/* 2:1, como las imágenes destacadas: se ve entero el rótulo de la imagen */
.mm-related__item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    transition: transform 600ms var(--mm-ease);
}

.mm-related__item:hover img {
    transform: scale(1.04);
}

.mm-related__caption {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-family: var(--mm-font-serif);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--mm-heading);
    transition: color var(--mm-dur) var(--mm-ease);
}

.mm-related__item:hover .mm-related__caption {
    color: var(--mm-teal);
}

/* Comentarios: tarjeta blanca, título como el antetítulo del hero y formulario
   con los mismos campos y botón que el de Contacto */
.comments-area,
.separate-containers .comments-area {
    margin-top: 0;
    padding: 0;
    background-color: transparent;
}

#comments {
    margin-top: var(--mm-space-7);
    padding: var(--mm-space-6);
    background-color: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-md);
    box-shadow: var(--mm-shadow-sm);
}

#comments .comments-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mm-space-3);
    margin: 0 0 var(--mm-space-3);
    font-family: var(--mm-font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-align: center;
    text-transform: uppercase;
    color: var(--mm-olive-dark);
}

#comments .comments-title::before,
#comments .comments-title::after {
    content: "";
    width: 24px;
    height: 1px;
    background-color: var(--mm-olive);
}

.comment-list {
    margin: 0 0 var(--mm-space-6);
    padding: 0;
    list-style: none;
}

.comment-list > li + li,
.comment-list .children > li {
    border-top: 1px solid var(--mm-border);
}

.comment-list .children {
    margin: 0 0 0 var(--mm-space-7);
    padding: 0 0 0 var(--mm-space-4);
    list-style: none;
    border-left: 2px solid var(--mm-line);
}

.comment-list .comment .children {
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}

.comment-list .comment-body {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr); /* minmax(0,…): que un enlace largo no ensanche la columna */
    column-gap: var(--mm-space-4);
    min-width: 0;
    max-width: 100%;
    padding: var(--mm-space-5) 0;
    background: transparent;
}

.comment-list .comment-meta,
.comment-list .comment-author-info {
    display: contents;
}

.comment-list .comment-meta .avatar {
    float: none;
    grid-column: 1;
    grid-row: 1 / 4;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 50%;
}

.comment-list .comment-author {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    font-style: normal;
    overflow-wrap: anywhere;
    color: var(--mm-teal);
}

.comment-list .comment-author .fn {
    font-style: normal;
}

.comment-list .comment-author .says {
    display: none;
}

.comment-list .comment-author a {
    color: var(--mm-teal);
    text-decoration: none;
}

.comment-list .comment-metadata {
    grid-column: 2;
    grid-row: 2;
    margin: 0 0 var(--mm-space-2);
    font-size: 0.75rem;
}

.comment-list .comment-metadata a {
    font-size: 0.75rem;
    text-decoration: none;
    color: var(--mm-olive-dark);
}

.comment-list .comment-content {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    padding: 0; /* GeneratePress le pone 30px y estrecha el texto */
    font-size: 0.9375rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
    border: 0;
}

.comment-list .comment-content :is(a, p) {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.comment-list .comment-content p {
    margin-bottom: var(--mm-space-2);
}

.comment-list .comment-content a {
    color: var(--mm-teal);
}

/* "Responder": siempre visible (antes solo en el hover, invisible en móvil) */
.comment-list .reply {
    grid-column: 2;
    margin-top: var(--mm-space-1);
}

.comment-list .reply a {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mm-olive-dark);
    transition: color var(--mm-dur) var(--mm-ease);
}

.comment-list .reply a:hover,
.comment-list .reply a:focus-visible {
    color: var(--mm-teal);
}

/* Pingbacks/trackbacks: una línea discreta, sin avatar ni columnas */
.comment-list .pingback .comment-body,
.comment-list .trackback .comment-body {
    display: block;
    padding: var(--mm-space-3) 0;
    font-size: var(--mm-fs-sm);
    color: var(--mm-olive-dark);
}

.comment-list .pingback .comment-body a,
.comment-list .trackback .comment-body a {
    color: var(--mm-teal);
    text-decoration: none;
}

.comment-list .pingback .comment-body a:hover,
.comment-list .trackback .comment-body a:hover {
    text-decoration: underline;
}

/* Formulario */
.comment-respond {
    margin-top: 0;
}

#reply-title {
    position: static;
    width: auto;
    max-width: none;
    margin: 0 0 var(--mm-space-4);
    padding: 0;
    font-family: var(--mm-font-serif);
    font-size: var(--mm-fs-xl);
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    color: var(--mm-teal);
    background-color: transparent;
    transform: none;
}

#reply-title small {
    display: block;
    margin-top: var(--mm-space-1);
    font-family: var(--mm-font-sans);
    font-size: var(--mm-fs-sm);
}

#reply-title small a {
    color: var(--mm-olive-dark);
}

.comment-form {
    text-align: left;
}

.comment-notes {
    margin-bottom: var(--mm-space-4);
    font-size: var(--mm-fs-sm);
    color: var(--mm-olive-dark);
}

.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
    width: 100%;
    height: 48px;
    margin-bottom: var(--mm-space-3);
    padding: 0 var(--mm-space-4);
    font-family: var(--mm-font-sans);
    font-size: var(--mm-fs-base); /* 16px: iOS no hace zoom al enfocar */
    line-height: 1.5;
    color: var(--mm-heading);
    background-color: var(--mm-white);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
    transition:
        border-color var(--mm-dur) var(--mm-ease),
        box-shadow var(--mm-dur) var(--mm-ease);
}

/* Con #commentform: la regla de los campos (:is(input[type=…], textarea), 48px)
   es más específica que ".comment-form textarea" y le ganaba la altura */
#commentform textarea {
    display: block;
    height: 180px;
    min-height: 120px;
    padding: var(--mm-space-3) var(--mm-space-4);
    resize: vertical;
}

.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea):hover {
    border-color: var(--mm-line);
}

.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus {
    border-color: var(--mm-teal);
    outline: none;
    box-shadow: 0 0 0 4px var(--mm-teal-soft);
}

.comment-form .logged-in-as {
    margin: 0 0 var(--mm-space-4);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--mm-olive-dark);
}

.comment-form .logged-in-as a {
    color: var(--mm-olive-dark);
    text-decoration: none;
}

.comment-form .logged-in-as a:hover,
.comment-form .logged-in-as a:focus {
    color: var(--mm-teal);
}

/* Casillas (guardar datos, suscribirse): pequeñas y juntas */
.comment-form p:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: var(--mm-space-2);
    margin: 0 0 var(--mm-space-2);
}

.comment-form input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    accent-color: var(--mm-teal);
}

.comment-form p:has(> input[type="checkbox"]) label {
    display: inline;
    font-size: var(--mm-fs-sm);
    line-height: 1.5;
    color: var(--mm-text);
}

.comment-form .form-submit {
    margin: var(--mm-space-4) 0 0;
}

.comment-form input[type="submit"] {
    height: 48px;
    padding: 0 var(--mm-space-6);
    font-family: var(--mm-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-white);
    background-color: var(--mm-teal);
    border: 0;
    border-radius: var(--mm-radius-pill);
    cursor: pointer;
    transition:
        background-color var(--mm-dur) var(--mm-ease),
        transform var(--mm-dur) var(--mm-ease);
}

.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus-visible {
    background-color: var(--mm-olive-dark);
    transform: translateY(-2px);
}

.comment-form input[type="submit"]:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 3px;
}

/* Tablet: relacionadas en 2 columnas */
@media (max-width: 991px) {
    .mm-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mm-related__item:nth-child(3) {
        display: none;
    }
}

/* Móvil */
@media (max-width: 767px) {
    .single .entry-header {
        margin-top: var(--mm-space-4);
    }

    /* La categoría no cabe junto a "fecha · min de lectura": en su propia línea,
       encima de la fecha, y sin el "·", que se quedaba suelto */
    .mm-single-cats {
        flex-basis: 100%;
    }

    .mm-single-cats::after {
        display: none;
    }

    .single .featured-image {
        margin-bottom: var(--mm-space-5);
    }

    /* Los iconos pequeños de dentro de los encabezados siguen flotando */
    .single .entry-content :is(h2, h3, h4, h5) img.alignleft {
        float: left;
        display: inline;
        margin: 0 var(--mm-space-3) var(--mm-space-2) 0;
    }

    .single .entry-content :is(h2, h3, h4, h5) img.alignright {
        float: right;
        display: inline;
        margin: 0 0 var(--mm-space-2) var(--mm-space-3);
    }

    /* Iconos pequeños de 2016 (números 1-1.jpg, 2-1.jpg…, mapa, sentidos, autor;
       19–35px) dentro de un párrafo: siguen a la izquierda del texto, como en
       escritorio, en vez de ir solos en una línea como las fotos flotantes */
    .single .entry-content img.alignleft:is([width="19"], [width="21"], [width="22"], [width="23"], [width="26"], [width="27"], [width="28"], [width="29"], [width="30"], [width="31"], [width="32"], [width="33"], [width="35"]) {
        float: left;
        display: inline;
        width: auto;
        margin: 0 var(--mm-space-3) 0 0;
    }

    /* Fotos flotantes de los párrafos (casi todas de 300px): a todo el ancho y
       sin márgenes laterales (centradas a 300px quedaban huecos raros) */
    .single .entry-content p img:is(.alignleft, .alignright) {
        width: 100%;
        height: auto;
        margin: 0 0 var(--mm-space-4);
    }

    .single .entry-content div[style*="solid #9a9e7a" i] {
        padding: var(--mm-space-4) var(--mm-space-5) !important;
    }

    .mm-related {
        padding: var(--mm-space-5);
    }

    .mm-related__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--mm-space-4);
    }

    .mm-related__item:nth-child(3) {
        display: flex;
    }

    #comments {
        padding: var(--mm-space-5);
    }

    .comment-list .children {
        margin-left: var(--mm-space-3);
        padding-left: var(--mm-space-3);
    }

    .comment-list .comment-body {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: var(--mm-space-3);
    }

    .comment-list .comment-meta .avatar {
        width: 40px;
        height: 40px;
    }

    .comment-form input[type="submit"] {
        width: 100%;
    }
}