/*
 * Mk Médico - Doctores y Especialidades — frontend
 *
 * Design System: alineado con docs/_refresh-design/refresh-system.css
 * Si el sitio carga refresh-system.css, las variables --ecm-* las toma de ahí.
 * Si no, los fallbacks dentro de var(...) garantizan apariencia consistente.
 *
 * Cache busting: el plugin enqueue este archivo con filemtime() como version
 * (G.7 de instrucciones_francel.md).
 */

.mkm-selector-wrapper { margin: 0 0 24px 0; }

/* Buscador único (v4.2.5) — reemplaza al viejo <select> de especialidad +
   caja de texto separados: un solo input busca en nombre de médico Y
   especialidad a la vez (ambos ya están en el texto visible de la card).
   Full-width por diseño: se acomoda solo a cualquier ancho, mobile incluido. */
.mkm-selector-controls {
    margin: 0 0 20px 0;
}
.mkm-search-box {
    position: relative;
    width: 100%;
}
.mkm-search-box__icono {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ecm-ink-500, #6b7688);
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 2;
    width: 18px;
    height: 18px;
}
.mkm-search-box__icono svg {
    display: block;
    width: 18px;
    height: 18px;
}
.mkm-search-box .mkm-search-input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 16px 12px 44px;
    box-sizing: border-box;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 16px; /* 16px evita zoom de iOS al enfocar */
    line-height: 1.5;
    color: var(--ecm-ink-800, #1a2236);
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-md, 12px);
    background: #fff;
    box-sizing: border-box;
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mkm-search-input:focus {
    outline: none;
    border-color: var(--ecm-brand-600, #1f6feb);
    box-shadow: 0 0 0 3px var(--ecm-brand-50, #eff6ff);
}
.mkm-no-results {
    text-align: center;
    padding: 30px 16px;
    color: var(--ecm-ink-500, #6b7688);
    font-size: 15px;
    background: var(--ecm-ink-50, #f9fafb);
    border-radius: var(--ecm-radius-md, 12px);
    margin-top: 16px;
}
@media (max-width: 480px) {
    .mkm-search-input { padding: 11px 14px 11px 38px; font-size: 15px; }
    .mkm-no-results { padding: 22px 14px; font-size: 14px; }
}

/* Sección "Destacados" — banner(es) horizontal(es) arriba de la grilla de
   [selector_especialidades] para los doctores con ¿Especialista Destacado?
   marcado (ver Mkm_Cards_Trait::render_destacados_section()). */
.mkm-destacados {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 24px 0;
}
.mkm-destacado-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--ecm-brand-50, #dbeefc);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 28px 32px;
    overflow: hidden;
}
.mkm-destacado-hero__texto {
    flex: 1 1 auto;
    min-width: 0;
}
.mkm-destacado-hero__texto .mkm-doctor-nombre {
    margin: 0 0 4px;
    font-size: 20px;
}
.mkm-destacado-hero__texto .mkm-doctor-esp {
    display: inline-block;
    margin: 0 0 8px;
    padding-bottom: 4px;
    font-size: 15px;
    color: var(--mkm-primary, var(--ecm-brand-600, #1f6feb));
    border-bottom: 1px solid var(--ecm-ink-200, #e4e8ef);
}
.mkm-destacado-hero__texto .mkm-doctor-esp-sub {
    margin: 0 0 16px;
}
.mkm-destacado-hero__foto {
    flex: 0 0 160px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-destacado-hero__foto img,
.mkm-destacado-hero__foto .mkm-doctor-avatar-default {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 600px) {
    .mkm-destacado-hero {
        flex-direction: column-reverse;
        text-align: center;
        padding: 20px;
    }
    .mkm-destacado-hero__texto .mkm-doctor-esp {
        border-bottom: none;
    }
    .mkm-destacado-hero__foto {
        width: 120px;
        height: 120px;
    }
}

/* [especialistas_buscar] — buscador que redirige a la página de la
   especialidad elegida (ver Mkm_Shortcodes_Trait::render_especialistas_buscar). */
.mkm-buscador-wrapper {
    position: relative;
    width: 100%;
    margin: 0 0 24px 0;
}
.mkm-buscador-wrapper .mkm-search-input { cursor: pointer; padding-right: 40px; }
.mkm-buscador-wrapper .mkm-search-input:focus { cursor: text; }
.mkm-buscador-flecha {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ecm-ink-600, #4b5566);
    pointer-events: none;
    font-size: 20px;
    line-height: 1;
    z-index: 2;
}
/* Boton "Reestablecer" — reset defaults del theme y estilo propio.
   Aparece cuando hay texto en el input; en tax archive navega al listado principal. */
button.mkm-buscador-reset {
    display: inline-block !important;
    margin: 10px 0 0 !important;
    padding: 8px 16px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 1px solid #d0d5dd !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    background: #f5f7fa !important;
    color: #1a2236 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    appearance: none;
    -webkit-appearance: none;
}
button.mkm-buscador-reset:hover {
    background: #e4e8ef !important;
    border-color: #a5aebd !important;
    color: #0b1220 !important;
}
button.mkm-buscador-reset[hidden] { display: none !important; }
.mkm-buscador-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-md, 12px);
    box-shadow: 0 8px 24px rgba(20, 25, 40, 0.12);
}
.mkm-buscador-dropdown.is-visible { display: block; }
.mkm-buscador-opcion {
    padding: 12px 16px;
    font-size: 15px;
    color: var(--ecm-ink-800, #1a2236);
    cursor: pointer;
    border-bottom: 1px solid var(--ecm-ink-100, #f2f4f8);
}
.mkm-buscador-opcion:last-child { border-bottom: none; }
.mkm-buscador-opcion:hover {
    background: var(--ecm-brand-50, #eff6ff);
    color: var(--ecm-brand-600, #1f6feb);
}
.mkm-buscador-opcion.is-current {
    background: var(--ecm-brand-50, #eff6ff);
    color: var(--ecm-brand-600, #1f6feb);
    font-weight: 600;
}
.mkm-buscador-sin-resultados {
    padding: 16px;
    text-align: center;
    color: var(--ecm-ink-500, #6b7688);
    font-size: 14px;
}

/* Buscador combinado de templates/archive-doctor.php (v4.3.4) -- grupos
   "Especialidades" / "Doctores" dentro del mismo dropdown, y el subtitulo
   de especialidad debajo del nombre de cada doctor sugerido. */
.mkm-buscador-grupo-label {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ecm-ink-500, #6b7688);
}
.mkm-buscador-opcion__sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ecm-ink-500, #6b7688);
}

/* Opciones del dropdown de /especialidades/ — titulo (bold) + descripcion
   corta (primeros 20 caracteres) debajo, apiladas. */
.mkm-buscador-opcion--servicio {
    display: block;
    line-height: 1.35;
}
.mkm-buscador-opcion__titulo {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ecm-ink-900, #0b1220);
}
.mkm-buscador-opcion__desc {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ecm-ink-600, #58627a);
}
.mkm-buscador-opcion--servicio:hover .mkm-buscador-opcion__titulo,
.mkm-buscador-opcion--servicio:hover .mkm-buscador-opcion__desc {
    color: var(--ecm-brand-600, #1f6feb);
}

/* Grid responsivo basado en el ANCHO DEL CONTENEDOR.
   El máximo de cada minmax() es un px fijo (no 1fr): así, cuando hay menos
   doctores de los que entran por fila, las cards NO se estiran para llenar el
   espacio sobrante — quedan del mismo ancho/alto que si hubiera 3 o más
   (pedido explícito: 1, 2 o 3 doctores deben verse igual de "chicos").
   Aplica a los 5 Template: moderno y destacada no tienen clase de grid propia,
   heredan esta regla base. */
.mkm-doctores-grid {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 300px)) !important;
    justify-content: start !important;
    width: 100% !important;
    box-sizing: border-box;
}
/* v4.2.10 — el tope de 300px de arriba es intencional en desktop (que 1-2
   doctores no se estiren gigantes), pero en mobile de 1 sola columna (grid ya
   colapsado por el auto-fit) ese mismo tope deja la única card pegada a la
   izquierda con hasta ~160px de espacio muerto a la derecha en pantallas de
   375-480px. A ese ancho ninguna fila real de 2 columnas cabe de todos modos
   (2 × 220px + 14px de gap = 454px de contenedor mínimo), así que forzar 1fr
   acá no le quita nada al layout de 2+ columnas, solo estira la única card
   visible a lo ancho. No toca --horizontal ni --horizontal-compact: cada una
   define su propia regla más abajo (con o sin este mismo breakpoint) y esas
   ganan la cascada para sus propias cards por venir después en el archivo. */
@media (max-width: 600px) {
    .mkm-doctores-grid {
        grid-template-columns: 1fr !important;
    }
}
/* Layout vertical: max 4 columnas en pantallas grandes. */
.mkm-doctores-grid--vertical {
    /* hereda el default */
}
@media (min-width: 1200px) {
    .mkm-doctores-grid--vertical { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* Layout horizontal: cards más anchas → min 360 px, cap en 460 px. */
.mkm-doctores-grid--horizontal {
    grid-template-columns: repeat(auto-fit, minmax(360px, 460px)) !important;
    justify-content: start !important;
}
/* Layout horizontal-compact: cards más estrechas → min 280 px (caben más por fila), cap en 420 px.
   En mobile (< 600 px) se fuerza a 1 columna: un doctor por fila, card sigue horizontal
   (foto izquierda + contenido derecha), NO stack a vertical. */
.mkm-doctores-grid--horizontal-compact {
    grid-template-columns: repeat(auto-fit, minmax(280px, 420px)) !important;
    justify-content: start !important;
}
@media (max-width: 600px) {
    .mkm-doctores-grid--horizontal-compact {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* Reset defensivo contra estilos del theme aplicados a <article>. */
.mkm-doctores-grid > .mkm-doctor-card {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    flex: none !important;
    clear: none !important;
    grid-column: auto !important;
    box-sizing: border-box;
}

/* CARDS — replica .ecm-card / .doctor-card del design system. */
.mkm-doctor-card {
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 22px;
    text-align: center;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04), 0 1px 1px rgba(11,18,32,0.03));
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.mkm-doctor-card:hover {
    border-color: var(--ecm-ink-400, #9aa4b5);
    box-shadow: var(--ecm-shadow-md, 0 4px 12px rgba(11,18,32,0.06), 0 2px 4px rgba(11,18,32,0.04));
    transform: translateY(-1px);
}

/* ── FOTO — vertical (default): circular como avatar, alineada con .doc-avatar del design.
   v3.8.0: sube de 110 a 126 px (pedido del admin). ── */
.mkm-doctor-foto {
    width: 126px; height: 126px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--ecm-ink-200, #e4e8ef), var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
    color: var(--ecm-ink-500, #6b7688); /* base color para el SVG default avatar */
}
.mkm-doctor-foto img,
.mkm-doctor-foto .mkm-doctor-avatar-default {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block;
}

/* Wrapper de contenido (siempre presente, en vertical es passthrough). */
.mkm-doctores-grid .mkm-doctor-content { display: block; }

/* ─────────────────────────────────────────────────────────────
   CARD HORIZONTAL — foto columna izquierda, contenido derecha.
   En < 480 px hace stack a vertical clásica.
   ──────────────────────────────────────────────────────────── */
.mkm-doctor-card--horizontal {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden;
    text-align: left;
    min-height: 180px;
}
.mkm-doctor-card--horizontal .mkm-doctor-foto {
    flex: 0 0 38% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    align-self: stretch !important;
    aspect-ratio: 1 / 1;
    background: var(--ecm-ink-100, #f2f4f8);
}
.mkm-doctor-card--horizontal .mkm-doctor-content {
    flex: 1 1 auto !important;
    padding: 18px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    text-align: left;
}
.mkm-doctor-card--horizontal .mkm-doctor-nombre {
    margin: 0 0 4px;
    font-size: 18px;
}
.mkm-doctor-card--horizontal .mkm-doctor-esp {
    margin: 0 0 6px;
}
.mkm-doctor-card--horizontal .mkm-doctor-info {
    margin: 0 0 14px;
}
.mkm-doctor-card--horizontal .mkm-doctor-actions {
    margin-top: auto !important;
    justify-content: flex-start !important;
}

/* Stack horizontal → vertical en celulares chicos */
@media (max-width: 480px) {
    .mkm-doctor-card--horizontal {
        flex-direction: column !important;
        text-align: center;
        min-height: 0;
        padding: 22px !important;
    }
    .mkm-doctor-card--horizontal .mkm-doctor-foto {
        flex: 0 0 auto !important;
        aspect-ratio: auto;
        width: 110px !important;
        height: 110px !important;
        margin: 0 auto 14px !important;
        border-radius: 50% !important;
        border: 3px solid #fff !important;
        box-shadow: 0 0 0 1px var(--ecm-ink-200, #e4e8ef), var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04)) !important;
    }
    .mkm-doctor-card--horizontal .mkm-doctor-content {
        padding: 0 !important;
        text-align: center;
    }
    .mkm-doctor-card--horizontal .mkm-doctor-actions {
        justify-content: center !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   CARD HORIZONTAL-COMPACT — foto fija ~100 px, contenido al lado.
   Mucho más baja que la horizontal normal. Ideal para 1–2 columnas.
   ──────────────────────────────────────────────────────────── */
.mkm-doctor-card--horizontal-compact {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 16px 18px !important;
    text-align: left;
    min-height: 0;
    gap: 16px;
}
.mkm-doctor-card--horizontal-compact .mkm-doctor-foto {
    flex: 0 0 114px !important;
    width: 114px !important;
    height: 114px !important;
    margin: 0 !important;
    border-radius: var(--ecm-radius-md, 12px) !important;
    border: 0 !important;
    box-shadow: none !important;
    align-self: center !important;
    aspect-ratio: 1 / 1;
    background: var(--ecm-ink-100, #f2f4f8);
    overflow: hidden;
}
.mkm-doctor-card--horizontal-compact .mkm-doctor-content {
    flex: 1 1 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    text-align: left;
}
.mkm-doctor-card--horizontal-compact .mkm-doctor-nombre {
    margin: 0 0 2px;
    font-size: 16px;
    line-height: 1.25;
}
.mkm-doctor-card--horizontal-compact .mkm-doctor-esp {
    margin: 0 0 2px;
    font-size: 13px;
}
.mkm-doctor-card--horizontal-compact .mkm-doctor-info {
    margin: 0 0 8px;
    font-size: 12px;
}
.mkm-doctor-card--horizontal-compact .mkm-doctor-actions {
    margin-top: 6px !important;
    justify-content: flex-start !important;
    gap: 6px !important;
}
.mkm-doctor-card--horizontal-compact .mkm-btn {
    padding: 7px 14px;
    font-size: 12px;
}

/* Mobile (< 600 px) la variante horizontal-compact mantiene su layout horizontal —
   NO stack a vertical — con 1 doctor por fila. La card es full-width del container,
   así que la foto y la tipografía conservan tamaños cercanos al desktop. Pequeño ajuste
   de padding para aprovechar el ancho del celular. */
@media (max-width: 600px) {
    .mkm-doctor-card--horizontal-compact {
        padding: 14px 16px !important;
    }
}

.mkm-doctor-nombre {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ecm-ink-900, #0b1220);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.mkm-doctor-esp {
    margin: 0 0 6px;
    color: var(--ecm-ink-800, #1a2236);
    font-size: 14px;
    font-weight: 600;
}
.mkm-doctor-info {
    margin: 0 0 16px;
    color: var(--ecm-ink-500, #6b7688);
    font-size: 13px;
    font-style: normal;
}

.mkm-doctor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

/* BOTONES — replica .ecm-btn (rounded-full, weight 600).
   v3.8.0: la letra usa --mkm-btn-texto (configurable en Ajustes → Template →
   Botones) con blanco como fallback. */
.mkm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: var(--ecm-radius-full, 999px);
    background: var(--ecm-brand-600, #1f6feb);
    color: var(--mkm-btn-texto, #fff) !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', sans-serif);
    line-height: 1;
    border: 1px solid transparent;
    transition: all 150ms ease;
}
.mkm-btn:hover {
    background: var(--ecm-brand-700, #1857c9);
    color: var(--mkm-btn-texto, #fff) !important;
    transform: translateY(-1px);
    box-shadow: var(--ecm-shadow-md, 0 4px 12px rgba(11,18,32,0.06));
}
/* "Ver más" / acciones de perfil — v3.8.0: sólido en tinta oscura (antes outline
   con letra oscura). Así TODOS los botones llevan letra blanca por defecto y
   queda un sistema consistente: primario = agendar/reservar, tinta/secundario = perfil. */
.mkm-btn:not(.mkm-btn-agenda) {
    background: var(--ecm-ink-800, #1a2236);
    border-color: transparent;
    color: var(--mkm-btn-texto, #fff) !important;
}
.mkm-btn:not(.mkm-btn-agenda):hover {
    background: var(--ecm-ink-900, #0b1220);
    color: var(--mkm-btn-texto, #fff) !important;
    filter: brightness(1.15);
}
/* Agendar = CTA primario verde mint (disponibilidad). */
.mkm-btn-agenda {
    background: var(--ecm-mint-600, #059669) !important;
    border-color: transparent !important;
    color: var(--mkm-btn-texto, #fff) !important;
}
.mkm-btn-agenda:hover {
    background: var(--ecm-mint-700, #047857) !important;
    color: var(--mkm-btn-texto, #fff) !important;
}

/* "Ver más" fantasma — usa var(--mkm-primary) con el mismo
   fallback que el resto del design system. */
.mkm-btn-ghost {
    background: transparent !important;
    border-color: var(--mkm-primary, var(--ecm-brand-600, #1f6feb)) !important;
    color: var(--mkm-primary, var(--ecm-brand-600, #1f6feb)) !important;
}
.mkm-btn-ghost:hover {
    background: var(--mkm-primary, var(--ecm-brand-600, #1f6feb)) !important;
    color: var(--mkm-btn-texto, #fff) !important;
}

/* Botones de Layout 4 · Moderno y Layout 5 · Destacada (v3.6.1) — cada uno
   usa el Color Primario / Secundario PROPIOS de su Template (ver Ajustes →
   Template → "Colores de este Template"). Fallback naranja/azul para que el
   Template ya se vea terminado aunque el admin no configure nada todavía. */
.mkm-btn-reservar {
    background: var(--mkm-primary, #f97316) !important;
    border-color: transparent !important;
    color: var(--mkm-btn-texto, #fff) !important;
}
.mkm-btn-reservar:hover {
    filter: brightness(0.92);
    color: var(--mkm-btn-texto, #fff) !important;
}
/* Layout 5 · Destacada ya usa el azul del design system para su pill/degradado;
   el botón "Reservar Hora" hereda ese mismo tono por defecto en vez del naranja. */
.mkm-doctor-card--destacada .mkm-btn-reservar,
.mkm-single--destacada .mkm-btn-reservar {
    background: var(--mkm-primary, var(--ecm-brand-600, #1f6feb)) !important;
}
/* "Ver Perfil" — v3.8.0: de enlace de texto a BOTÓN sólido con el Color
   Secundario propio del Template activo (fallback azul). Mismo tratamiento
   hover (brightness) que "Reservar Hora". */
.mkm-btn-verperfil {
    background: var(--mkm-secondary, #2563eb) !important;
    border-color: transparent !important;
    color: var(--mkm-btn-texto, #fff) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}
.mkm-btn-verperfil:hover {
    background: var(--mkm-secondary, #2563eb) !important;
    filter: brightness(0.92);
    color: var(--mkm-btn-texto, #fff) !important;
    text-decoration: none;
}

/* Pill de especialidad reutilizado por Layout 5 (card + single). */
.mkm-doctor-esp-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--ecm-radius-full, 999px);
    background: var(--mkm-primary, var(--ecm-brand-600, #1f6feb));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   CARD LAYOUT 4 · MODERNO — v3.6.1
   Foto circular arriba a la derecha, nombre + especialidad a la izquierda,
   línea de apoyo, y dos botones (Reservar Hora / Ver Perfil →).
   ═══════════════════════════════════════════════════════════════ */
.mkm-doctor-card--moderno {
    text-align: left;
    padding: 20px 22px !important;
}
.mkm-doctor-moderno-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.mkm-doctor-moderno-titulos {
    min-width: 0;
    flex: 1 1 auto;
}
.mkm-doctor-card--moderno .mkm-doctor-nombre {
    font-size: 17px;
    margin: 0 0 4px;
}
.mkm-doctor-card--moderno .mkm-doctor-esp {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--mkm-primary, #f97316);
}
.mkm-doctor-esp-sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--ecm-ink-500, #6b7688);
    line-height: 1.1em;
}
.mkm-doctor-foto--circular {
    flex: 0 0 74px !important;
    width: 74px !important;
    height: 74px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
}
.mkm-doctor-foto--circular .mkm-doctor-img,
.mkm-doctor-foto--circular .mkm-doctor-avatar-default {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50% !important;
}
.mkm-doctor-actions--moderno {
    justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   CARD LAYOUT 5 · DESTACADA — v3.6.0 (botones actualizados en v3.6.1)
   Foto full-bleed arriba con degradado, nombre superpuesto, pill de especialidad.
   ═══════════════════════════════════════════════════════════════ */
.mkm-doctor-card--destacada {
    padding: 0 !important;
    overflow: hidden;
    text-align: left;
}
.mkm-doctor-destacada-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--ecm-ink-100, #f2f4f8);
    overflow: hidden;
}
.mkm-doctor-destacada-media .mkm-doctor-img,
.mkm-doctor-destacada-media .mkm-doctor-avatar-default {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
    margin: 0 !important;
}
.mkm-doctor-destacada-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 18px;
    background: linear-gradient(to top, rgba(11, 18, 32, 0.78), rgba(11, 18, 32, 0));
}
.mkm-doctor-destacada-overlay .mkm-doctor-nombre {
    color: #fff;
    margin: 0 0 8px;
}
.mkm-doctor-card--destacada .mkm-doctor-content {
    padding: 16px 18px 18px;
}
.mkm-doctor-card--destacada .mkm-doctor-info {
    margin: 0 0 14px;
}
.mkm-doctor-card--destacada .mkm-doctor-actions {
    justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE — página individual del doctor (v3.6.0)
   Solo se usa si el admin activó "Usar este Template también en el single"
   en Ajustes → Template. 5 variantes, alineadas 1:1 con sus cards.
   ═══════════════════════════════════════════════════════════════ */
.mkm-single {
    max-width: 1000px;
    margin: 2.5rem auto;
    padding: 0 1rem;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--ecm-ink-800, #1a2236);
}
.mkm-single__nombre {
    margin: 0 0 0.75rem;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--ecm-ink-900, #0b1220);
    font-family: var(--ecm-font-display, 'Fraunces', Georgia, serif);
}
.mkm-single__seccion {
    margin-bottom: 1.25rem;
}
.mkm-single__seccion strong {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--mkm-secondary, var(--ecm-ink-500, #6b7688));
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mkm-single__esp-destacada {
    margin: 0 0 1.25rem;
    color: var(--mkm-primary, var(--ecm-brand-600, #1f6feb));
    font-weight: 600;
    font-size: 1.05rem;
}
.mkm-single__cta {
    margin-top: 0.5rem;
}

/* Layout 1 · Vertical — dos columnas, foto en tarjeta con sombra + borde inferior primario */
.mkm-single--vertical {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 782px) {
    .mkm-single--vertical { grid-template-columns: 1fr; }
}
.mkm-single--vertical .mkm-single__foto-card {
    background: #fff;
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 0.75rem;
    overflow: hidden;
    box-shadow: var(--ecm-shadow-md, 0 6px 24px rgba(11,18,32,0.1));
    border-bottom: 4px solid var(--mkm-primary, var(--ecm-brand-600, #1f6feb));
}
.mkm-single--vertical .mkm-single-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
    border-radius: var(--ecm-radius-md, 8px);
    object-fit: cover;
}

/* Layout 2 · Horizontal — hero banner ancho arriba */
.mkm-single--horizontal .mkm-single__hero {
    aspect-ratio: 21 / 9;
    border-radius: var(--ecm-radius-lg, 16px);
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
    margin-bottom: 1.5rem;
}
.mkm-single--horizontal .mkm-single__hero .mkm-single-img,
.mkm-single--horizontal .mkm-single__hero .mkm-doctor-avatar-default {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mkm-single--horizontal .mkm-single__encabezado {
    margin-bottom: 1.5rem;
}
.mkm-single--horizontal .mkm-single__cuerpo {
    max-width: 760px;
}

/* Layout 3 · Horizontal compacta — sidebar angosto pegajoso + contenido ancho.
   Columna de 260px (antes 220px) para que la foto se vea un poco más grande. */
.mkm-single--horizontal-compact {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 782px) {
    .mkm-single--horizontal-compact { grid-template-columns: 1fr; }
}
.mkm-single--horizontal-compact .mkm-single__sidebar {
    position: sticky;
    top: 24px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 1.25rem;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
/* Card del contenido (Información adicional / Biografía / Descripción) —
   mismo tratamiento de borde que el sidebar, para que ambos bloques se
   distingan como cards independientes en vez de flotar sobre el fondo. */
.mkm-single--horizontal-compact .mkm-single__cuerpo {
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 1.75rem 2rem;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-single--horizontal-compact .mkm-single__sidebar-foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--ecm-radius-md, 12px);
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
    margin: 0 0 0.75rem;
}
.mkm-single--horizontal-compact .mkm-single__sidebar-foto .mkm-single-img,
.mkm-single--horizontal-compact .mkm-single__sidebar-foto .mkm-doctor-avatar-default {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mkm-single--horizontal-compact .mkm-single__sidebar .mkm-single__nombre {
    font-size: 1.3rem;
    margin: 0 0 0.4rem;
}
.mkm-single--horizontal-compact .mkm-single__sidebar .mkm-doctor-esp-pill {
    margin-bottom: 1rem;
}
.mkm-single--horizontal-compact .mkm-single__sidebar .mkm-single__cta {
    display: block;
}

/* Layout 4 · Moderno — dos columnas; foto en tarjeta blanca con línea de
   acento (Color Primario propio de este Template) sobre el borde superior. */
.mkm-single--moderno {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 782px) {
    .mkm-single--moderno { grid-template-columns: 1fr; }
}
.mkm-single__foto-card--moderno {
    background: #fff;
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 0.75rem;
    overflow: hidden;
    box-shadow: var(--ecm-shadow-md, 0 6px 24px rgba(11,18,32,0.1));
    border-top: 4px solid var(--mkm-primary, #f97316);
}
.mkm-single--moderno .mkm-single-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
    border-radius: var(--ecm-radius-md, 8px);
    object-fit: cover;
}
.mkm-single--moderno .mkm-single__seccion strong {
    color: var(--mkm-secondary, #2563eb);
}

/* Layout 5 · Destacada — foto full-bleed con degradado y nombre superpuesto */
.mkm-single--destacada .mkm-single__destacada-media {
    position: relative;
    aspect-ratio: 16 / 7;
    border-radius: var(--ecm-radius-lg, 16px);
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
    margin-bottom: 1.5rem;
}
.mkm-single--destacada .mkm-single__destacada-media .mkm-single-img,
.mkm-single--destacada .mkm-single__destacada-media .mkm-doctor-avatar-default {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mkm-single--destacada .mkm-single__destacada-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(to top, rgba(11, 18, 32, 0.8), rgba(11, 18, 32, 0));
}
.mkm-single--destacada .mkm-single__destacada-overlay .mkm-single__nombre {
    color: #fff;
    margin-bottom: 0.6rem;
}
.mkm-single--destacada .mkm-single__cuerpo {
    max-width: 760px;
}

/* ═══════════════════════════════════════════════════════════════
   ARCHIVE /doctores/ — v3.6.1
   Solo se usa si el admin activó "Usar este Template también en el
   listado de doctores" en Ajustes → Template. Header + buscador (filtra
   en el navegador, sin recargar) + la grilla de cards del Template elegido.
   ═══════════════════════════════════════════════════════════════ */
.mkm-archivo-doctores {
    max-width: 1200px;
    margin: 2.5rem auto;
    padding: 0 1rem;
}
.mkm-archivo-doctores__header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.mkm-archivo-doctores__titulo {
    margin: 0;
    font-size: 2.25rem;
    line-height: 1.2;
    color: var(--ecm-ink-900, #0b1220);
    font-family: var(--ecm-font-display, 'Fraunces', Georgia, serif);
}
/* Subtitulo: nombre del termino/busqueda en curso, ~3x mas chico que el h1. */
.mkm-archivo-doctores__subtitulo {
    margin: 6px 0 0;
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--ecm-ink-500, #6b7688);
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    min-height: 1.3em;
}
.mkm-archivo-doctores__subtitulo:empty { display: none; }
.mkm-tax-desc {
    max-width: 720px;
    margin: 12px auto 0;
    color: var(--ecm-ink-600, #4b5566);
    font-size: 0.95rem;
    line-height: 1.5;
}
/* Buscador + boton Reestablecer en la misma linea (flex). */
.mkm-buscador-linea {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}
.mkm-buscador-linea .mkm-search-box {
    flex: 1 1 auto;
    min-width: 0;
}
.mkm-buscador-linea button.mkm-buscador-reset {
    margin: 0 !important;
    flex: 0 0 auto;
    align-self: stretch;
}

/* Header repetido en single del doctor: boton Volver + buscador arriba,
   info del doctor debajo (single-layout-*.php). */
.mkm-archivo-doctores--single-header {
    max-width: 1200px;
    margin: 2rem auto 1.5rem;
}
.mkm-archivo-doctores__acciones {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 12px;
}
a.mkm-btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #f5f7fa;
    color: #1a2236;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
}
a.mkm-btn-volver:hover {
    background: #e4e8ef;
    border-color: #a5aebd;
    color: #0b1220;
    text-decoration: none;
}
.mkm-archivo-doctores__buscador {
    max-width: 720px;
    margin: 0 auto 2rem;
}
.mkm-archivo-doctores__input {
    width: 100%;
    padding: 12px 18px;
    font-size: 15px;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--ecm-ink-800, #1a2236);
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-full, 999px);
    background: #fff;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-archivo-doctores__input:focus {
    outline: none;
    border-color: var(--ecm-brand-600, #1f6feb);
    box-shadow: 0 0 0 3px var(--ecm-brand-50, #eff6ff);
}
.mkm-archivo-doctores__sin-resultados {
    text-align: center;
    color: var(--ecm-ink-500, #6b7688);
    margin-top: 1.5rem;
}

/* Single de Especialidad/Servicio (ej. /especialidades/cardiologia/) — v3.6.5.
   Reutiliza .mkm-archivo-doctores (header + wrapper) para verse igual que
   /doctores/; esto es solo la descripción (post_content) bajo el título. */
.mkm-especialidad-single__desc {
    max-width: 720px;
    margin: 0 auto 2rem;
    color: var(--ecm-ink-500, #6b7688);
    text-align: center;
    line-height: 1.6;
}

/* Archive de Especialidad/Servicio (/especialidades/) — v4.3.5.
   Card blanca con icono (thumb chico) arriba a la izquierda + título en
   negro y descripción corta debajo. Layout inspirado en el mockup de
   clinicamiradordepenuelas.cl pero con el mismo lenguaje visual del resto
   del plugin (radios, bordes, tipografía y sombras del design system ECM). */
.mkm-archivo-especialidades .mkm-doctores-grid.mkm-especialidades-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
@media (min-width: 981px) {
    .mkm-archivo-especialidades .mkm-doctores-grid.mkm-especialidades-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
.mkm-especialidad-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 26px 26px 28px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    min-height: 100%;
    box-sizing: border-box;
}
.mkm-especialidad-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    border-color: var(--ecm-brand-500, #1f6feb);
}
.mkm-especialidad-card__icono {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ecm-ink-900, #0b1220);
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 8px;
    background: transparent;
}
.mkm-especialidad-card__icono img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.mkm-especialidad-card__icono svg {
    width: 40px;
    height: 40px;
    display: block;
}
.mkm-especialidad-card__icono i[class*="icon-"] {
    font-size: 44px;
    line-height: 1;
    color: var(--ecm-ink-900, #0b1220);
    display: inline-block;
}
.mkm-especialidad-card__nombre {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ecm-ink-900, #0b1220);
}
.mkm-especialidad-card__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ecm-ink-700, #4a5468);
}

/* Layout de 2 columnas del archive /especialidades/: índice angosto a la
   izquierda (solo texto) + buscador/grilla a la derecha — replica el panel
   lateral de la Página "Especialidades" original armada con Elementor. */
.mkm-especialidades-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.mkm-especialidades-sidebar {
    flex: 0 0 240px;
    width: 240px;
    background: var(--ecm-ink-50, #f9fafb);
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 20px;
    box-sizing: border-box;
    max-height: 640px;
    overflow-y: auto;
}
.mkm-especialidades-main {
    flex: 1;
    min-width: 0;
}
.mkm-especialidades-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mkm-especialidades-lista li {
    border-bottom: 1px solid var(--ecm-ink-200, #e4e8ef);
}
.mkm-especialidades-lista li:last-child {
    border-bottom: none;
}
.mkm-especialidades-lista a {
    display: block;
    padding: 9px 2px;
    font-size: 14px;
    color: var(--ecm-ink-800, #1a2236);
    text-decoration: none;
    line-height: 1.4;
}
.mkm-especialidades-lista a:hover {
    color: var(--ecm-brand-600, #1f6feb);
}

/* [mkm_paginas_relacionadas] — v4.2.10. Mismo tratamiento visual que
   .mkm-especialidades-lista (lista simple, sin bullets, separador sutil)
   para que calce sin sobresaltos dentro de cualquier bloque tipo
   "Podría interesarte" / "De interés" ya armado en el theme/Elementor. */
.mkm-paginas-relacionadas {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mkm-paginas-relacionadas li {
    border-bottom: 1px solid var(--ecm-ink-200, #e4e8ef);
}
.mkm-paginas-relacionadas li:last-child {
    border-bottom: none;
}
.mkm-paginas-relacionadas a {
    display: block;
    padding: 9px 2px;
    font-size: 14px;
    color: var(--ecm-ink-800, #1a2236);
    text-decoration: none;
    line-height: 1.4;
}
.mkm-paginas-relacionadas a:hover {
    color: var(--ecm-brand-600, #1f6feb);
}

@media (max-width: 782px) {
    .mkm-especialidades-layout {
        flex-direction: column;
    }
    .mkm-especialidades-sidebar {
        width: 100%;
        flex-basis: auto;
        max-height: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINACIÓN DE GRILLAS — v3.7.0
   Links « 1 2 3 » que imprime Mkm_Cards_Trait::render_paginacion_grilla().
   Al final del archivo para ganar cualquier empate de !important contra
   estilos del theme sobre .page-numbers.
   ═══════════════════════════════════════════════════════════════ */
.mkm-paginacion {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
}
.mkm-paginacion .page-numbers,
nav.mkm-paginacion span.page-numbers,
nav.mkm-paginacion a.page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: var(--ecm-radius-full, 999px) !important;
    border: 1px solid var(--ecm-ink-200, #e4e8ef) !important;
    background: #fff !important;
    color: var(--ecm-ink-800, #1a2236) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    float: none !important;
    list-style: none !important;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
nav.mkm-paginacion a.page-numbers:hover {
    border-color: var(--ecm-brand-600, #1f6feb) !important;
    color: var(--ecm-brand-600, #1f6feb) !important;
    background: var(--ecm-brand-50, #eff6ff) !important;
    transform: translateY(-1px);
}
nav.mkm-paginacion span.page-numbers.current {
    background: var(--ecm-brand-600, #1f6feb) !important;
    border-color: var(--ecm-brand-600, #1f6feb) !important;
    color: #fff !important;
    cursor: default;
}

/* Variante <button> de render_paginacion_js() (paginación sin recarga de
   [selector_especialidades]) — mismo look que los <a>/<span> de arriba, la
   base ya la cubre ".mkm-paginacion .page-numbers"; acá solo lo que faltaba
   por estar escrito para etiquetas <a>/<span> específicamente. */
nav.mkm-paginacion button.page-numbers {
    font-family: inherit !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
nav.mkm-paginacion button.page-numbers:hover {
    border-color: var(--ecm-brand-600, #1f6feb) !important;
    color: var(--ecm-brand-600, #1f6feb) !important;
    background: var(--ecm-brand-50, #eff6ff) !important;
    transform: translateY(-1px);
}
nav.mkm-paginacion button.page-numbers.current {
    background: var(--ecm-brand-600, #1f6feb) !important;
    border-color: var(--ecm-brand-600, #1f6feb) !important;
    color: #fff !important;
    cursor: default;
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   HOVER PRONUNCIADO OPCIONAL — v3.7.0
   La clase .mkm-grid-hover la agrega PHP al contenedor del grid SOLO si el
   admin activó "Efecto hover" en Ajustes → Template. Sin ella, las cards
   conservan exactamente el hover sutil de siempre. Scoped a dispositivos con
   puntero real para evitar el hover "pegajoso" del touch.
   ═══════════════════════════════════════════════════════════════ */
@media (hover: hover) {
    .mkm-doctores-grid.mkm-grid-hover .mkm-doctor-card:hover {
        transform: translateY(-6px) !important;
        border-color: var(--mkm-primary, var(--ecm-brand-600, #1f6feb)) !important;
        box-shadow: 0 16px 32px rgba(11, 18, 32, 0.12), 0 6px 14px rgba(11, 18, 32, 0.08) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE FINO DE GRILLAS — v3.7.0
   Compactación extra en celulares (<600px): gap, tipografía y paddings de
   los layouts que no traen regla propia en ese breakpoint. Las reglas van AL
   FINAL del archivo para ganar por orden de fuente los empates de !important.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .mkm-doctores-grid {
        gap: 10px !important;
    }
    .mkm-doctor-nombre {
        font-size: 16px;
    }
    .mkm-doctor-esp {
        font-size: 13px;
    }
    .mkm-doctor-card--moderno {
        padding: 16px 14px !important;
    }
    .mkm-doctor-card--destacada .mkm-doctor-content {
        padding: 13px 14px 15px;
    }
    .mkm-doctor-foto {
        width: 108px;
        height: 108px;
    }
    nav.mkm-paginacion .page-numbers {
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ARCHIVE /centros/ y /agendamiento/ — v4.0.0
   Wrapper compartido para ambos archives con grilla + buscador.
   ═══════════════════════════════════════════════════════════════ */
.mkm-archivo-centros {
    max-width: 1200px;
    margin: 2.5rem auto;
    padding: 0 1rem;
}
.mkm-archivo-centros__header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.mkm-archivo-centros__titulo {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--ecm-ink-900, #0b1220);
    font-family: var(--ecm-font-display, 'Fraunces', Georgia, serif);
}
.mkm-archivo-centros__buscador {
    max-width: 480px;
    margin: 0 auto 2rem;
}
.mkm-archivo-centros__input {
    width: 100%;
    padding: 12px 18px;
    font-size: 15px;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--ecm-ink-800, #1a2236);
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-full, 999px);
    background: #fff;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-archivo-centros__input:focus {
    outline: none;
    border-color: var(--ecm-brand-600, #1f6feb);
    box-shadow: 0 0 0 3px var(--ecm-brand-50, #eff6ff);
}
.mkm-archivo-centros__vacio {
    text-align: center;
    color: var(--ecm-ink-500, #6b7688);
    margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   GRID CENTROS MÉDICOS — /centros/
   ═══════════════════════════════════════════════════════════════ */
.mkm-centros-grid {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    width: 100% !important;
}
.mkm-centro-card {
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    overflow: hidden;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04), 0 1px 1px rgba(11,18,32,0.03));
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.mkm-centro-card:hover {
    border-color: var(--ecm-ink-400, #9aa4b5);
    box-shadow: var(--ecm-shadow-md, 0 4px 12px rgba(11,18,32,0.06), 0 2px 4px rgba(11,18,32,0.04));
    transform: translateY(-1px);
}
.mkm-centro-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.mkm-centro-card__foto {
    aspect-ratio: 16 / 9;
    background: var(--ecm-ink-100, #f2f4f8);
    overflow: hidden;
}
.mkm-centro-card__foto img,
.mkm-centro-card__foto .mkm-centro-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.mkm-centro-card__foto-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ecm-ink-300, #c1c7d4);
}
.mkm-centro-card__foto-placeholder svg {
    width: 64px;
    height: 64px;
}
.mkm-centro-card__contenido {
    padding: 16px 18px 18px;
}
.mkm-centro-card__nombre {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ecm-ink-900, #0b1220);
    line-height: 1.3;
}
.mkm-centro-card__direccion,
.mkm-centro-card__horario,
.mkm-centro-card__telefono {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--ecm-ink-500, #6b7688);
    line-height: 1.5;
}
.mkm-centro-card__telefono a {
    color: var(--ecm-brand-600, #1f6feb);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   GRID AGENDAMIENTO — /agendamiento/
   ═══════════════════════════════════════════════════════════════ */
.mkm-agendamiento-grid {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    width: 100% !important;
}
.mkm-agendamiento-card {
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 22px;
    text-align: center;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04), 0 1px 1px rgba(11,18,32,0.03));
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.mkm-agendamiento-card:hover {
    border-color: var(--ecm-ink-400, #9aa4b5);
    box-shadow: var(--ecm-shadow-md, 0 4px 12px rgba(11,18,32,0.06), 0 2px 4px rgba(11,18,32,0.04));
    transform: translateY(-1px);
}
.mkm-agendamiento-card--destacado {
    border-color: var(--mkm-primary, var(--ecm-brand-600, #1f6feb));
    border-width: 2px;
}
.mkm-agendamiento-card__icono {
    font-size: 36px;
    margin-bottom: 10px;
    line-height: 1;
}
.mkm-agendamiento-card__titulo {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ecm-ink-900, #0b1220);
    line-height: 1.3;
}
.mkm-agendamiento-card__titulo a {
    color: inherit;
    text-decoration: none;
}
.mkm-agendamiento-card__titulo a:hover {
    color: var(--ecm-brand-600, #1f6feb);
}
.mkm-agendamiento-card__desc {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--ecm-ink-500, #6b7688);
    line-height: 1.6;
}
.mkm-agendamiento-card__cta {
    margin-top: auto;
}

/* Single Agendamiento */
.mkm-agendamiento-single__icono {
    font-size: 48px;
    margin-bottom: 10px;
    line-height: 1;
}
.mkm-agendamiento-single__cta {
    margin-top: 12px;
}
.mkm-agendamiento-single__desc {
    max-width: 720px;
    margin: 0 auto 2rem;
    color: var(--ecm-ink-500, #6b7688);
    text-align: center;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE CENTRO MÉDICO — /centros/{slug}/
   Hero con foto + overlay, info + mapa, grilla de doctores.
   ═══════════════════════════════════════════════════════════════ */
.mkm-centro-single {
    max-width: 1200px;
    margin: 2.5rem auto;
    padding: 0 1rem;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--ecm-ink-800, #1a2236);
}
.mkm-centro-single__hero {
    position: relative;
    aspect-ratio: 21 / 9;
    border-radius: var(--ecm-radius-lg, 16px);
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
    margin-bottom: 2rem;
}
.mkm-centro-single__hero-img,
.mkm-centro-single__hero-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.mkm-centro-single__hero-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2rem 2.5rem;
    background: linear-gradient(to top, rgba(11, 18, 32, 0.8), rgba(11, 18, 32, 0));
}
.mkm-centro-single__nombre {
    margin: 0 0 0.5rem;
    font-size: 2rem;
    line-height: 1.2;
    color: #fff;
    font-family: var(--ecm-font-display, 'Fraunces', Georgia, serif);
}
.mkm-centro-single__direccion {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
}
.mkm-centro-single__especialidades {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.mkm-centro-esp-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--mkm-primary, var(--ecm-brand-600, #1f6feb));
    border-radius: 999px;
    white-space: nowrap;
}
.mkm-centro-single__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 3rem;
}
@media (max-width: 782px) {
    .mkm-centro-single__body { grid-template-columns: 1fr; }
}
.mkm-centro-single__info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.mkm-centro-single__bloque {
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-centro-single__bloque h3 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ecm-ink-500, #6b7688);
}
.mkm-centro-single__bloque p {
    margin: 0;
    line-height: 1.6;
}
.mkm-centro-single__bloque a {
    color: var(--ecm-brand-600, #1f6feb);
    text-decoration: none;
}
.mkm-centro-single__bloque a:hover {
    text-decoration: underline;
}
.mkm-centro-single__contenido {
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-centro-single__mapa iframe {
    border-radius: var(--ecm-radius-lg, 16px);
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-centro-single__doctores {
    margin-top: 1rem;
}
.mkm-centro-single__doctores h2 {
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    color: var(--ecm-ink-900, #0b1220);
    font-family: var(--ecm-font-display, 'Fraunces', Georgia, serif);
}

/* ════════════════════════════════════════════════════════════════════
   Plantillas de la ficha de Especialidad/Servicio — v4.4.0
   templates/singles/single-especialidad-{clasica|moderna|lateral}.php
   El color de acento sale de Ajustes → Template (--mkm-esp-acento).
   ════════════════════════════════════════════════════════════════════ */
.mkm-esp {
    --mkm-esp-ancho: 1140px;
    color: var(--ecm-ink-800, #1a2236);
    line-height: 1.65;
}
.mkm-esp *, .mkm-esp *::before, .mkm-esp *::after { box-sizing: border-box; }
/* Los selectores comunes van prefijados con .mkm-esp (dos clases) para ganarle
   a los estilos globales del Kit de Elementor (.elementor-kit-N h2 / a), que
   pisaban colores y tamaños de títulos y enlaces. */
.mkm-esp .mkm-esp__titulo {
    margin: 0;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--ecm-ink-900, #0b1220);
}
.mkm-esp .mkm-esp__eyebrow,
.mkm-esp .mkm-esp__eyebrow a {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mkm-esp-acento, #EF7A42);
    text-decoration: none;
}
.mkm-esp .mkm-esp-breadcrumb {
    font-size: .875rem;
    color: var(--ecm-ink-500, #6b7688);
}
.mkm-esp .mkm-esp-breadcrumb a { color: inherit; text-decoration: none; }
.mkm-esp .mkm-esp-breadcrumb a:hover { text-decoration: underline; }
.mkm-esp .mkm-esp-breadcrumb [aria-current] { font-weight: 700; }
.mkm-esp .mkm-esp__seccion-titulo {
    margin: 0 0 .75rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mkm-esp-acento, #EF7A42);
}
.mkm-esp .mkm-esp__seccion-titulo--centro {
    text-align: center;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    margin-bottom: 1.75rem;
    color: var(--ecm-ink-800, #1a2236);
}
.mkm-esp__contenido > :first-child { margin-top: 0; }
.mkm-esp__contenido img { max-width: 100%; height: auto; border-radius: var(--ecm-radius-md, 12px); }
.mkm-esp .mkm-esp__lista { list-style: none; margin: 0; padding: 0; }
.mkm-esp .mkm-esp__lista li { border-bottom: 1px solid var(--ecm-ink-200, #e4e8ef); }
.mkm-esp .mkm-esp__lista li:last-child { border-bottom: 0; }
.mkm-esp .mkm-esp__lista a {
    display: block;
    padding: .55rem 0;
    color: var(--ecm-ink-800, #1a2236);
    text-decoration: none;
    font-weight: 500;
}
.mkm-esp .mkm-esp__lista a:hover { color: var(--mkm-esp-acento, #EF7A42); }
.mkm-esp__bloque + .mkm-esp__bloque { margin-top: 1.5rem; }
.mkm-esp__doctores {
    max-width: var(--mkm-esp-ancho);
    margin: 3rem auto 0;
    padding: 0 20px 3rem;
}

/* ── Plantilla 1 · Clásica ── */
/* Valores tomados de la plantilla de Elementor original ("Menu único
   Derecho"): padding 10em/7em, velo degradado 90° #625763D4 → #66666675 (75%),
   categorías en etiqueta de color, lateral gris con bordes de 10px y enlaces
   en cajas blancas. */
.mkm-esp--clasica .mkm-esp__hero {
    position: relative;
    background-color: #07080E;
    background-size: cover;
    background-position: center center;
    padding: 10em 20px 7em;
}
.mkm-esp--clasica .mkm-esp__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #625763D4 0%, #66666675 75%);
}
.mkm-esp--clasica .mkm-esp__hero-inner {
    position: relative;
    max-width: var(--mkm-esp-ancho);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
}
.mkm-esp--clasica .mkm-esp__hero .mkm-esp__eyebrow {
    padding: 5px 10px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--mkm-esp-acento, #EF7A42), var(--mkm-esp-acento, #EF7A42));
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: .95rem;
}
.mkm-esp--clasica .mkm-esp__hero .mkm-esp__eyebrow a {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: inherit;
}
.mkm-esp--clasica .mkm-esp__hero .mkm-esp__titulo,
.mkm-esp--clasica .mkm-esp__hero .mkm-esp__eyebrow,
.mkm-esp--clasica .mkm-esp__hero .mkm-esp__eyebrow a,
.mkm-esp--clasica .mkm-esp__hero .mkm-esp-breadcrumb { color: #fff; }
.mkm-esp--clasica .mkm-esp__divisor {
    width: 100%;
    margin: .6rem 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .35);
}
.mkm-esp--clasica .mkm-esp__cuerpo {
    max-width: var(--mkm-esp-ancho);
    margin: 0 auto;
    padding: 3.5rem 20px 0;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 3.5rem;
}
.mkm-esp--clasica .mkm-esp__lateral {
    align-self: start;
    padding: 1em;
    background: #F1F2F6;
    border-radius: 10px;
}
.mkm-esp--clasica .mkm-esp__lateral .mkm-esp__lista li { border: 0; }
.mkm-esp--clasica .mkm-esp__lateral .mkm-esp__lista li + li { margin-top: .5rem; }
.mkm-esp--clasica .mkm-esp__lateral .mkm-esp__lista a {
    padding: .5em 1em;
    background: #fff;
    border-radius: 10px;
    color: #333;
    font-size: .95rem;
    font-weight: 400;
}
.mkm-esp--clasica .mkm-esp__lateral .mkm-esp__lista a:hover { color: var(--mkm-esp-acento, #EF7A42); }

/* ── Plantilla 2 · Moderna ── */
.mkm-esp--moderna .mkm-esp__hero {
    max-width: var(--mkm-esp-ancho);
    margin: 2rem auto 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
    background: linear-gradient(135deg, var(--ecm-brand-50, #eff6ff), #fff 70%);
    border-radius: 24px;
}
.mkm-esp--moderna .mkm-esp__hero-texto { display: flex; flex-direction: column; gap: .8rem; }
.mkm-esp--moderna .mkm-esp__extracto { margin: 0; font-size: 1.1rem; color: var(--ecm-ink-500, #6b7688); }
.mkm-esp--moderna .mkm-esp__acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .5rem; }
.mkm-esp--moderna .mkm-esp__cta { padding: .75rem 1.5rem; border-radius: 999px; }
.mkm-esp--moderna .mkm-esp__cta-sec {
    padding: .7rem 1.4rem;
    border-radius: 999px;
    border: 2px solid var(--mkm-esp-acento, #EF7A42);
    color: var(--mkm-esp-acento, #EF7A42);
    font-weight: 600;
    text-decoration: none;
}
.mkm-esp--moderna .mkm-esp__cta-sec:hover { background: var(--mkm-esp-acento, #EF7A42); color: #fff; }
.mkm-esp--moderna .mkm-esp__hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(11, 18, 32, .14);
}
.mkm-esp--moderna .mkm-esp__chips {
    max-width: var(--mkm-esp-ancho);
    margin: 1.5rem auto 0;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.mkm-esp--moderna .mkm-esp__chips a {
    padding: .4rem .95rem;
    border-radius: 999px;
    border: 1px solid var(--mkm-esp-acento, #EF7A42);
    color: var(--ecm-ink-800, #1a2236);
    font-size: .9rem;
    text-decoration: none;
}
.mkm-esp--moderna .mkm-esp__chips a:hover { background: var(--mkm-esp-acento, #EF7A42); color: #fff; }
.mkm-esp__contenido--lectura {
    max-width: 820px;
    margin: 2.5rem auto 0;
    padding: 0 20px;
    font-size: 1.05rem;
}
.mkm-esp--moderna .mkm-esp__pie {
    max-width: var(--mkm-esp-ancho);
    margin: 0 auto;
    padding: 0 20px 3rem;
}
.mkm-esp__rel-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.mkm-esp__rel-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    overflow: hidden;
    text-decoration: none;
    color: var(--ecm-ink-900, #0b1220);
    transition: transform .15s ease, box-shadow .15s ease;
}
.mkm-esp__rel-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 18, 32, .08); }
.mkm-esp__rel-card-img {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--ecm-brand-50, #eff6ff) center / cover no-repeat;
}
.mkm-esp__rel-card-titulo { padding: .85rem 1rem; font-weight: 600; }

/* ── Plantilla 3 · Lateral ── */
.mkm-esp--lateral {
    max-width: var(--mkm-esp-ancho);
    margin: 0 auto;
    padding: 2.5rem 20px 0;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 2.5rem;
}
.mkm-esp--lateral .mkm-esp__nav-sticky {
    position: sticky;
    top: 2rem;
    padding: 1.25rem;
    background: var(--ecm-ink-50, #f9fafb);
    border-radius: var(--ecm-radius-lg, 16px);
}
.mkm-esp__lista--nav ul { list-style: none; margin: 0 0 .4rem; padding: 0 0 0 .9rem; }
.mkm-esp__lista--nav ul li { border: 0; }
.mkm-esp__lista--nav ul a { padding: .3rem 0; font-size: .92rem; font-weight: 400; }
.mkm-esp__lista--nav .is-actual > a {
    color: var(--mkm-esp-acento, #EF7A42);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--mkm-esp-acento, #EF7A42);
    padding-left: .6rem;
}
.mkm-esp--lateral .mkm-esp__principal { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.mkm-esp--lateral .mkm-esp__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
    border-radius: var(--ecm-radius-lg, 16px);
}
.mkm-esp--lateral .mkm-esp__doctores { margin-top: 2rem; padding-left: 0; padding-right: 0; }
/* La columna principal es ~75% del ancho: las "Columnas (desktop)" fijas de
   Ajustes → Template (ej. 4) dejan las cards demasiado angostas acá, así que
   esta plantilla usa columnas automáticas. Gana al !important de ese ajuste
   por especificidad (dos clases). */
@media (min-width: 981px) {
    .mkm-esp--lateral .mkm-doctores-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    }
}

/* ── Responsive ── */
@media (max-width: 980px) {
    .mkm-esp--clasica .mkm-esp__cuerpo,
    .mkm-esp--moderna .mkm-esp__hero,
    .mkm-esp--lateral { grid-template-columns: minmax(0, 1fr); }
    .mkm-esp--moderna .mkm-esp__hero { margin: 1rem 16px 0; }
    .mkm-esp--moderna .mkm-esp__hero-media { order: -1; }
    .mkm-esp--lateral .mkm-esp__nav { order: 2; }
    .mkm-esp--lateral .mkm-esp__nav-sticky { position: static; }
    .mkm-esp--clasica .mkm-esp__hero { padding: 7em 20px 5em; }
    .mkm-esp--clasica .mkm-esp__cuerpo { gap: 2rem; padding-top: 2.5rem; }
}
@media (max-width: 767px) {
    .mkm-esp--clasica .mkm-esp__hero { padding: 5em 16px 1em; }
    .mkm-esp--clasica .mkm-esp__hero-inner { align-items: center; text-align: center; }
}