/**
 * MiTerapia — Directorio de psicólogos + Ficha de autor + Modal reservas
 *
 * Paleta oficial MiTerapia.online:
 *   Primary:   #4F8DA6  (Azul terapéutico)
 *   Primary-D: #2E6E87  (Azul profundo)
 *   Accent:    #6FB3A8  (Verde bienestar)
 *   BG:        #F5F6F7  |  Card: #FFFFFF
 *   Text:      #1F2933  |  Secondary: #6B7280
 *
 * Tipografías: Bricolage Grotesque (headings) · Geologica (body)
 *
 * Prefijo: .mt-dir-  (directorio) / .mt-author-  (ficha autor)
 *          .mt-booking-  (modal reservas)
 *
 * @package MiTerapia_Integrations
 * @since   1.8.0
 */

/* ══════════════════════════════════════════
   VARIABLES — Paleta Elementor MiTerapia
══════════════════════════════════════════ */
:root {
    /* Primarios (Elementor #23739B) */
    --mt-primary:     #23739B;
    --mt-primary-d:   #1a5a7a;
    --mt-primary-l:   #5D9DBF;
    --mt-primary-pale:#E8F2F7;
    --mt-primary-glass: rgba(35,115,155,.08);

    /* Acento (Elementor #A8C6DA) */
    --mt-accent:      #A8C6DA;
    --mt-accent-d:    #7BACC5;
    --mt-accent-l:    #C8DCEA;
    --mt-accent-pale: #EAF2F7;

    /* Texto */
    --mt-ink:         #1F2933;
    --mt-ink-mid:     #4A5568;
    --mt-ink-soft:    #6B7280;
    --mt-ink-muted:   #9CA3AF;

    /* Fondos */
    --mt-bg:          #F5F6F7;
    --mt-bg-warm:     #EDEFF1;
    --mt-bg-card:     #FFFFFF;
    --mt-border:      #E2E8F0;
    --mt-border-l:    #F1F5F9;

    /* Semánticos */
    --mt-success:     #16A34A;
    --mt-warning:     #EAB308;
    --mt-error:       #DC2626;

    /* Sombras */
    --mt-shadow-xs:   0 1px 2px rgba(31,41,55,.04);
    --mt-shadow-sm:   0 2px 8px rgba(31,41,55,.06);
    --mt-shadow-md:   0 8px 24px rgba(31,41,55,.08);
    --mt-shadow-lg:   0 16px 48px rgba(31,41,55,.12);
    --mt-shadow-primary: 0 8px 24px rgba(35,115,155,.25);

    /* Radios */
    --mt-r-xs:        6px;
    --mt-r-sm:        8px;
    --mt-r-md:        14px;
    --mt-r-lg:        20px;
    --mt-r-xl:        28px;
    --mt-r-pill:      50px;

    /* Transiciones */
    --mt-transition:  all .25s cubic-bezier(.4,0,.2,1);
    --mt-ease-spring: cubic-bezier(.34,1.56,.64,1);

    /* Tipografía — Elementor: Poppins (headings), Raleway (body) */
    --mt-font-head:   'Poppins', system-ui, sans-serif;
    --mt-font-body:   'Raleway', system-ui, sans-serif;
    --mt-font-btn:    'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
}

/* ══════════════════════════════════════════
   DIRECTORIO — HEADER (estilo Elementor 685)
══════════════════════════════════════════ */
.mt-dir-wrap {
    max-width: 1600px;
    margin: 0 auto;
    font-family: var(--mt-font-body);
    color: var(--mt-ink-mid);
    -webkit-font-smoothing: antialiased;
}

.mt-dir-header {
    text-align: center;
    padding: 5em 5em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.mt-dir-header-pill {
    display: inline-block;
    background: var(--mt-accent);
    color: var(--mt-ink);
    font-family: var(--mt-font-head);
    font-size: .85rem;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 43px;
    margin-bottom: .5rem;
}
.mt-dir-header-title {
    font-family: var(--mt-font-head);
    font-size: 50px;
    font-weight: 500;
    color: var(--mt-ink);
    margin: 35px 0 0;
    line-height: 1.2;
    max-width: 55%;
}
.mt-dir-header-sub {
    font-family: var(--mt-font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--mt-ink-mid);
    margin: 35px 0 0;
    line-height: 1.6;
    max-width: 75%;
}

@media (max-width: 1024px) {
    .mt-dir-header { padding: 12em 2em 0; }
    .mt-dir-header-title { max-width: 100%; }
    .mt-dir-header-sub { max-width: 66%; }
}
@media (max-width: 767px) {
    .mt-dir-header { padding: 10em 1em 0; }
    .mt-dir-header-title { font-size: 36px; }
    .mt-dir-header-sub { max-width: 100%; font-size: 14px; }
}

/* ══════════════════════════════════════════
   DIRECTORIO — ACCORDION (estilo rkit_image_accordion)
   Filas de 3 items — hover expande dentro de la fila
══════════════════════════════════════════ */
.mt-dir-accordion {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    padding: 5em;
}

/* Cada fila de accordion ocupa el 100% del ancho
   Los items dentro de una fila comparten un contenedor flex de altura fija */
.mt-dir-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 500px;
    gap: 25px;
}

.mt-dir-ia-item {
    position: relative;
    flex: 1;
    min-width: 0;
    border-radius: 50px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    outline: none;
    transition: flex .7s cubic-bezier(.25, .8, .25, 1);
}
.mt-dir-ia-item--nophoto {
    background: linear-gradient(135deg, var(--mt-primary) 0%, var(--mt-primary-d) 100%);
}
/* Placeholder vacío: mantiene el hueco en la fila */
.mt-dir-ia-item--empty {
    visibility: hidden;
    pointer-events: none;
    cursor: default;
}

.mt-dir-ia-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mt-dir-ia-initials {
    font-size: 4rem;
    font-weight: 700;
    color: rgba(255,255,255,.35);
    letter-spacing: .15em;
}

/* Overlay oscuro semi-transparente (#505050 50%) */
.mt-dir-ia-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: #505050;
    opacity: .5;
    z-index: 1;
    pointer-events: none;
    transition: opacity .5s cubic-bezier(.25,.8,.25,1);
}

/* Contenido textual sobre el overlay */
.mt-dir-ia-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
}

.mt-dir-ia-title {
    font-family: var(--mt-font-head);
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    padding: 0 0 5px 0;
    text-align: start;
}

.mt-dir-ia-desc {
    font-family: var(--mt-font-head);
    font-size: .85rem;
    font-weight: 400;
    color: #fff;
    margin: 0;
    padding: 0;
    text-align: start;
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .5s cubic-bezier(.25,.8,.25,1),
                opacity .4s cubic-bezier(.25,.8,.25,1) .1s;
}

.mt-dir-ia-actions {
    display: flex;
    gap: .5rem;
    align-self: start;
    padding-top: 12px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .5s cubic-bezier(.25,.8,.25,1),
                opacity .4s cubic-bezier(.25,.8,.25,1) .15s;
}

.mt-dir-ia-btn {
    display: inline-block;
    font-family: var(--mt-font-btn);
    font-size: .85rem;
    font-weight: 600;
    color: #5D727A;
    background: #fff;
    border-radius: 43px;
    padding: .5rem 1.25rem;
    text-decoration: none;
    text-align: center;
    transition: background .2s, color .2s;
}
.mt-dir-ia-btn:hover {
    background: #5D727A;
    color: #fff;
    text-decoration: none;
}
.mt-dir-ia-btn--outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.5);
}
.mt-dir-ia-btn--outline:hover {
    background: rgba(255,255,255,.2);
    color: #fff;
    border-color: #fff;
}

/* ── Hover / Active: expande item ── */
.mt-dir-ia-item:hover,
.mt-dir-ia-item:focus-within,
.mt-dir-ia-item.active {
    flex: 3;
}
.mt-dir-ia-item:hover .mt-dir-ia-desc,
.mt-dir-ia-item:focus-within .mt-dir-ia-desc,
.mt-dir-ia-item.active .mt-dir-ia-desc {
    max-height: 120px;
    opacity: 1;
}
.mt-dir-ia-item:hover .mt-dir-ia-actions,
.mt-dir-ia-item:focus-within .mt-dir-ia-actions,
.mt-dir-ia-item.active .mt-dir-ia-actions {
    max-height: 60px;
    opacity: 1;
}
.mt-dir-ia-item:hover .mt-dir-ia-overlay,
.mt-dir-ia-item:focus-within .mt-dir-ia-overlay,
.mt-dir-ia-item.active .mt-dir-ia-overlay {
    opacity: .6;
}

/* ── Mobile: accordion vertical ── */
@media (max-width: 1024px) {
    .mt-dir-accordion {
        padding: 4em 2em;
    }
    .mt-dir-row {
        height: 450px;
    }
}
@media (max-width: 767px) {
    .mt-dir-accordion {
        padding: 2em 1em;
    }
    .mt-dir-row {
        flex-direction: column;
        height: auto;
        min-height: 650px;
    }
    .mt-dir-ia-item {
        flex: none;
        min-height: 180px;
    }
    .mt-dir-ia-item:hover,
    .mt-dir-ia-item:focus-within,
    .mt-dir-ia-item.active {
        flex: none;
        min-height: 300px;
    }
    .mt-dir-ia-title {
        margin-top: auto;
    }
}

/* ── Reduced motion — accordion ── */
@media (prefers-reduced-motion: reduce) {
    .mt-dir-ia-item,
    .mt-dir-ia-desc,
    .mt-dir-ia-actions,
    .mt-dir-ia-overlay {
        transition: none !important;
    }
}

/* ── Paginación / Infinite scroll ── */
.mt-dir-pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}
.mt-dir-pagination .page-numbers {
    list-style: none;
    display: flex;
    gap: .4rem;
    margin: 0;
    padding: 0;
}
.mt-dir-pagination .page-numbers li { display: inline-flex; }
.mt-dir-pagination .page-numbers a,
.mt-dir-pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 .5rem;
    border-radius: var(--mt-r-sm);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--mt-border);
    background: var(--mt-bg-card);
    color: var(--mt-ink-mid);
    transition: var(--mt-transition);
}
.mt-dir-pagination .page-numbers a:hover {
    background: var(--mt-primary-pale);
    border-color: var(--mt-primary-l);
    color: var(--mt-primary-d);
}
.mt-dir-pagination .page-numbers .current {
    background: var(--mt-primary);
    border-color: var(--mt-primary);
    color: #fff;
    font-weight: 600;
}

/* Infinite scroll loader */
.mt-dir-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0 4rem;
    min-height: 80px;
}
.mt-dir-loader.hidden { display: none; }
.mt-dir-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--mt-border);
    border-top-color: var(--mt-primary);
    border-radius: 50%;
    animation: mt-spin .8s linear infinite;
}
@keyframes mt-spin {
    to { transform: rotate(360deg); }
}
.mt-dir-end {
    text-align: center;
    padding: 2rem 0 4rem;
    color: var(--mt-ink-soft);
    font-size: .9rem;
    font-family: var(--mt-font-body);
}

/* Empty state */
.mt-dir-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--mt-ink-soft);
    font-size: .95rem;
}


/* ══════════════════════════════════════════
   AUTHOR — FICHA DEL PSICÓLOGO (estilo Elementor 842)
══════════════════════════════════════════ */
.mt-author-wrap {
    font-family: var(--mt-font-body);
    color: var(--mt-ink-mid);
    -webkit-font-smoothing: antialiased;
    background: #eeeeee00;
}

/* ── HERO — dos columnas, texto izquierda + foto derecha ── */
.mt-author-hero {
    max-width: 1600px;
    margin: 0 auto;
    padding: 12em 5em 5em;
}
.mt-author-hero-inner {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: center;
}
.mt-author-hero-text {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.mt-author-hero-photo-col {
    flex: 1;
    display: flex;
    justify-content: space-between;
}
.mt-author-hero-photo {
    width: 91%;
    min-height: 650px;
    border-radius: 110px 13px 110px 13px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.mt-author-hero-photo--ph {
    background: linear-gradient(135deg, var(--mt-primary-pale), var(--mt-accent-pale));
    display: flex;
    align-items: center;
    justify-content: center;
}
.mt-author-hero-photo--ph svg { color: var(--mt-primary); opacity: .4; }

/* Pill / tag en hero */
.mt-author-hero-pill {
    display: inline-block;
    background: var(--mt-accent);
    color: var(--mt-ink);
    font-family: var(--mt-font-head);
    font-size: .85rem;
    font-weight: 400;
    padding: 10px 15px;
    border-radius: 43px;
    align-self: flex-start;
}
.mt-author-hero-pill b { font-weight: 700; }

/* Nombre grande */
.mt-author-hero-name {
    font-family: var(--mt-font-head);
    font-size: 80px;
    font-weight: 500;
    color: var(--mt-ink);
    margin: 20px 0 0;
    line-height: 1.1;
    max-width: 86%;
}

/* Descripción hero */
.mt-author-hero-desc {
    font-family: var(--mt-font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--mt-ink-mid);
    line-height: 1.7;
    text-align: justify;
    margin: 0 50px 20px 0;
}
.mt-author-hero-desc p { margin-block-end: 0; }

/* Botones hero */
.mt-author-hero-btns {
    display: flex;
    gap: .5rem;
    margin-top: 20px;
}
.mt-author-btn {
    display: inline-block;
    font-family: var(--mt-font-head);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    border: 2px solid var(--mt-primary);
    border-radius: var(--mt-r-pill);
    padding: 15px 75px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.mt-author-btn--primary {
    background: var(--mt-primary);
    color: #fff;
}
.mt-author-btn--primary:hover,
.mt-author-btn--primary:focus {
    background: #fff;
    color: var(--mt-primary);
    border-color: var(--mt-primary);
    text-decoration: none;
}

@media (max-width: 1024px) {
    .mt-author-hero { padding: 12em 2em 4em; }
    .mt-author-hero-name { font-size: 48px; max-width: 100%; }
}
@media (max-width: 767px) {
    .mt-author-hero { padding: 5em 1em 2em; }
    .mt-author-hero-inner { flex-direction: column; }
    .mt-author-hero-text { flex: none; text-align: center; align-items: center; }
    .mt-author-hero-name { font-size: 36px; max-width: 100%; }
    .mt-author-hero-pill { align-self: center; }
    .mt-author-hero-btns { flex-direction: column; width: 100%; }
    .mt-author-btn { padding: 15px 40px; width: 100%; }
    .mt-author-hero-photo { min-height: 400px; width: 100%; border-radius: 40px 13px 40px 13px; }
    .mt-author-hero-desc { margin-right: 0; text-align: center; }
}

/* ── BIO SECTION — dos columnas, fondo blanco ── */
.mt-author-bio-section {
    background: #fff;
    padding: 8em 5em 0;
    max-width: 1600px;
    margin: 0 auto;
}
.mt-author-bio-inner {
    display: flex;
    flex-direction: row;
    gap: 160px;
    padding: 2em 5em 7em;
}
.mt-author-bio-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.mt-author-bio-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Pill sección (nombre tag) */
.mt-author-section-pill {
    display: inline-block;
    background: var(--mt-accent);
    color: var(--mt-ink);
    font-family: var(--mt-font-head);
    font-size: .85rem;
    font-weight: 400;
    padding: 10px 15px;
    border-radius: 43px;
    align-self: flex-start;
}

.mt-author-bio-subtitle {
    font-family: var(--mt-font-head);
    font-size: 25px;
    font-weight: 500;
    color: var(--mt-ink);
    line-height: 1.35;
    margin: 0;
}

.mt-author-bio-text {
    font-family: var(--mt-font-body);
    font-size: .95rem;
    font-weight: 400;
    color: var(--mt-ink-mid);
    line-height: 1.75;
    text-align: justify;
}
.mt-author-bio-text p { margin-block-end: 0; margin-bottom: .75rem; }

/* Formación headings */
.mt-author-form-heading {
    font-family: var(--mt-font-head);
    font-size: 25px;
    font-weight: 500;
    color: var(--mt-ink);
    margin: 0 0 1.5rem;
    max-width: 94%;
}
.mt-author-form-subheading {
    font-family: var(--mt-font-head);
    font-size: 18px;
    font-weight: 600;
    color: var(--mt-ink);
    margin: 1.5rem 0 .75rem;
    max-width: 94%;
}

/* Icon list — replica elementor-icon-list con chevron */
.mt-author-icon-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mt-author-icon-list-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: 1.5px 0;
}
.mt-author-icon-list-icon {
    flex-shrink: 0;
    color: var(--mt-primary);
    margin-top: 4px;
}
.mt-author-icon-list-icon svg {
    fill: var(--mt-primary);
}
.mt-author-icon-list-text {
    font-family: var(--mt-font-body);
    font-size: .9rem;
    color: var(--mt-ink-mid);
    line-height: 1.5;
}

/* Icon list inline (especialidades) */
.mt-author-icon-list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
}
.mt-author-icon-list--inline .mt-author-icon-list-item {
    display: inline-flex;
}

/* Especialidades chips (ficha pública) */
.mt-author-specs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.mt-author-spec-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(168, 198, 218, .15);
    color: var(--mt-ink, #2c3e50);
    border: 1px solid rgba(168, 198, 218, .4);
    border-radius: 999px;
    padding: .4em 1em;
    font-family: var(--mt-font-body, 'DM Sans', sans-serif);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    transition: background .2s, border-color .2s;
}
.mt-author-spec-chip:hover {
    background: rgba(168, 198, 218, .25);
    border-color: rgba(168, 198, 218, .6);
}

@media (max-width: 1024px) {
    .mt-author-bio-section { padding: 4em 2em 0; }
    .mt-author-bio-inner { gap: 20px; padding: 4em 2em; }
    .mt-author-form-heading { font-size: 48px; }
    .mt-author-form-subheading { font-size: 48px; }
}
@media (max-width: 767px) {
    .mt-author-bio-section { padding: 2em 1em 0; }
    .mt-author-bio-inner { flex-direction: column; gap: 30px; padding: 2em 1em; }
    .mt-author-form-heading { font-size: 36px; }
    .mt-author-form-subheading { font-size: 25px; }
}

/* ── CTA BAND — fondo #A8C6DA ── */
.mt-author-cta-band {
    background: var(--mt-accent);
    padding: 5em 0;
    text-align: center;
}
.mt-author-cta-band-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.mt-author-cta-band-title {
    font-family: var(--mt-font-head);
    font-size: 35px;
    font-weight: 500;
    color: var(--mt-ink);
    margin: 0;
}
.mt-author-cta-band-text {
    font-family: var(--mt-font-body);
    font-size: 1rem;
    font-weight: 400;
    color: #000;
    margin: 0;
}
.mt-author-btn--cta {
    margin-top: 10px;
}
.mt-author-cta-band .mt-author-btn--primary:hover {
    background: var(--mt-accent);
    color: #fff;
    border-color: #fff;
}

@media (max-width: 767px) {
    .mt-author-cta-band { padding: 3em 1em; }
    .mt-author-cta-band-title { font-size: 28px; }
}

/* ── ARTÍCULOS — estilo rkit-post-grid ── */
.mt-author-articles {
    padding: 0 5em 5em;
    max-width: 1600px;
    margin: 0 auto;
}
.mt-author-articles-inner {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.mt-author-articles-header {
    display: flex;
    flex-direction: row;
    gap: 117px;
    padding: 8em 5em 0;
}
.mt-author-articles-header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}
.mt-author-articles-header-right {
    display: flex;
    align-items: center;
}
.mt-author-articles-title {
    font-family: var(--mt-font-head);
    font-size: 35px;
    font-weight: 500;
    color: var(--mt-ink);
    margin: 0;
    max-width: 80%;
    line-height: 1.3;
}
.mt-author-articles-title b { font-weight: 700; }

.mt-author-articles-desc {
    font-family: var(--mt-font-body);
    font-size: 18px;
    font-weight: 400;
    color: var(--mt-ink-mid);
    margin: 0;
    max-width: 68%;
}

/* Post grid */
.mt-author-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 5em;
}
.mt-author-post-card {
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
    transition: var(--mt-transition);
    display: flex;
    flex-direction: column;
    box-shadow: var(--mt-shadow-sm);
}
.mt-author-post-card:hover {
    box-shadow: var(--mt-shadow-md);
    transform: translateY(-3px);
}

.mt-author-post-thumb-link {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.mt-author-post-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mt-author-post-thumb--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt-bg);
}
.mt-author-post-thumb--ph svg { color: var(--mt-border); }

.mt-author-post-body {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.mt-author-post-title {
    font-family: var(--mt-font-head);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mt-ink);
    text-decoration: none;
    margin: 0 0 .5rem;
    line-height: 1.3;
    text-align: left;
}
.mt-author-post-title:hover { color: var(--mt-primary); text-decoration: none; }

.mt-author-post-excerpt {
    font-family: var(--mt-font-body);
    font-size: .88rem;
    color: var(--mt-ink-soft);
    line-height: 1.6;
    margin: 0 0 1rem;
    flex: 1;
    text-align: justify;
}
.mt-author-post-readmore {
    display: inline-block;
    font-family: var(--mt-font-head);
    font-size: .85rem;
    font-weight: 500;
    color: #000;
    background: var(--mt-accent);
    border-radius: 15px;
    padding: .4rem 1rem;
    text-decoration: none;
    text-align: left;
    transition: background .2s, color .2s;
    align-self: flex-start;
}
.mt-author-post-readmore:hover {
    color: #fff;
    text-decoration: none;
}

@media (max-width: 1024px) {
    .mt-author-articles { padding: 0 2em 4em; }
    .mt-author-articles-header { gap: 20px; padding: 4em 2em 0; }
    .mt-author-posts-grid { grid-template-columns: repeat(2, 1fr); padding: 4em 2em; }
    .mt-author-articles-title { font-size: 48px; max-width: 100%; }
    .mt-author-articles-desc { max-width: 100%; font-size: 22px; }
}
@media (max-width: 767px) {
    .mt-author-articles { padding: 0 1em 2em; }
    .mt-author-articles-header { flex-direction: column; gap: 15px; padding: 2em 1em 0; }
    .mt-author-articles-header-left { flex-direction: column; align-items: flex-start; }
    .mt-author-posts-grid { grid-template-columns: 1fr; padding: 2em 1em; }
    .mt-author-articles-title { font-size: 36px; }
    .mt-author-articles-desc { font-size: 18px; max-width: 100%; }
    .mt-author-post-body { padding: 20px; }
}

/* ══════════════════════════════════════════
   MODAL DE RESERVAS — PROTOTIPO
══════════════════════════════════════════ */
.mt-booking-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.mt-booking-overlay.open {
    display: flex;
    animation: mtOverlayIn .3s cubic-bezier(.4,0,.2,1);
}

@keyframes mtOverlayIn {
    from { opacity: 0; backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(8px); }
}

.mt-bk-box {
    background: var(--mt-bg);
    border-radius: var(--mt-r-xl);
    box-shadow: 0 25px 60px rgba(31,41,55,.15), 0 0 0 1px rgba(255,255,255,.1);
    max-width: 860px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mtSlideUp .4s var(--mt-ease-spring);
}

@keyframes mtSlideUp {
    from { opacity: 0; transform: translateY(24px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.mt-bk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.75rem;
    background: linear-gradient(135deg, var(--mt-bg-card) 60%, var(--mt-primary-pale));
    border-bottom: 1px solid var(--mt-border);
    position: relative;
}
.mt-bk-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 1.75rem; right: 1.75rem;
    height: 2px;
    background: linear-gradient(90deg, var(--mt-primary), var(--mt-accent), transparent);
    opacity: .4;
}
.mt-bk-header-title {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--mt-font-head);
    font-size: 1.1rem; font-weight: 700;
    color: var(--mt-ink); margin: 0;
}
.mt-bk-header-title svg { color: var(--mt-primary); }
.mt-bk-close {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--mt-border); background: var(--mt-bg);
    font-size: 1.2rem; color: var(--mt-ink-soft); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--mt-transition); line-height: 1;
}
.mt-bk-close:hover { background: var(--mt-bg-warm); border-color: var(--mt-ink-muted); color: var(--mt-ink-mid); }
.mt-bk-close:focus-visible {
    outline: 2px solid var(--mt-primary);
    outline-offset: 2px;
}

/* Progress bar */
.mt-bk-progress {
    display: flex; align-items: center; gap: 0;
    padding: 1rem 1.75rem;
    background: var(--mt-bg-card);
    border-bottom: 1px solid var(--mt-border);
}
.mt-bk-step-item {
    display: flex; align-items: center; flex: 1; gap: .5rem; position: relative;
}
.mt-bk-step-num {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; flex-shrink: 0;
    transition: all .4s var(--mt-ease-spring); position: relative; z-index: 1;
    background: var(--mt-bg); color: var(--mt-ink-muted);
    border: 2px solid var(--mt-border);
}
.mt-bk-step-item.active .mt-bk-step-num {
    background: var(--mt-primary); color: #fff;
    border-color: var(--mt-primary);
    box-shadow: 0 0 0 4px var(--mt-primary-pale), 0 2px 8px rgba(79,141,166,.3);
    animation: mtStepPulse 2s ease-in-out infinite;
}
@keyframes mtStepPulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--mt-primary-pale), 0 2px 8px rgba(79,141,166,.3); }
    50%      { box-shadow: 0 0 0 6px var(--mt-primary-pale), 0 2px 12px rgba(79,141,166,.4); }
}
.mt-bk-step-item.done .mt-bk-step-num {
    background: linear-gradient(135deg, var(--mt-primary), var(--mt-accent));
    color: #fff; border-color: transparent;
    box-shadow: 0 2px 8px rgba(79,141,166,.25);
    font-size: 0; /* oculta el número */
}
.mt-bk-step-item.done .mt-bk-step-num::after {
    content: '✓'; font-size: .8rem; font-weight: 800;
}
.mt-bk-step-label {
    font-size: .72rem; font-weight: 500; color: var(--mt-ink-muted);
    white-space: nowrap; transition: var(--mt-transition);
}
.mt-bk-step-item.active .mt-bk-step-label { color: var(--mt-primary-d); font-weight: 700; }
.mt-bk-step-item.done .mt-bk-step-label { color: var(--mt-primary); font-weight: 600; }

/* Body */
.mt-bk-body {
    flex: 1; overflow-y: auto;
    padding: 1.75rem;
    scroll-behavior: smooth;
}

/* Screens */
.mt-bk-screen { display: none; }
.mt-bk-screen.active { display: block; animation: mtScreenIn .4s var(--mt-ease-spring) both; }

@keyframes mtScreenIn {
    from { opacity: 0; transform: translateY(16px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Step header */
.mt-bk-step-header { margin-bottom: 1.75rem; }
.mt-bk-eyebrow {
    font-size: .7rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mt-primary-d); margin: 0 0 .35rem;
}
.mt-bk-step-title {
    font-family: var(--mt-font-head); font-size: 1.5rem; font-weight: 700;
    color: var(--mt-ink); margin: 0 0 .5rem; line-height: 1.2;
}
.mt-bk-step-sub { font-size: .88rem; color: var(--mt-ink-soft); margin: 0; line-height: 1.6; }

/* ── Step 1: Psicólogo card ── */
.mt-bk-psico-card {
    background: linear-gradient(135deg, var(--mt-bg-card) 70%, var(--mt-primary-pale));
    border-radius: var(--mt-r-md);
    padding: 1.35rem; box-shadow: var(--mt-shadow-sm);
    border: 1px solid var(--mt-border); margin-bottom: 1.5rem;
    transition: var(--mt-transition);
}
.mt-bk-psico-top { display: flex; gap: 1rem; align-items: center; }
.mt-bk-psico-avatar-wrap { flex-shrink: 0; }
.mt-bk-psico-avatar {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--mt-primary-pale);
    box-shadow: 0 4px 12px rgba(79,141,166,.15);
    transition: var(--mt-transition);
}
.mt-bk-psico-avatar-ph {
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mt-primary-pale), var(--mt-accent-pale));
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--mt-primary-pale);
    box-shadow: 0 4px 12px rgba(79,141,166,.15);
}
.mt-bk-psico-avatar-ph svg { width: 28px; height: 28px; color: var(--mt-primary); }
.mt-bk-psico-name { font-family: var(--mt-font-head); font-size: 1.15rem; font-weight: 700; color: var(--mt-ink); }
.mt-bk-psico-role { font-size: .84rem; color: var(--mt-ink-soft); margin-top: .15rem; }
.mt-bk-psico-col {
    display: inline-flex; align-items: center; gap: .3rem;
    background: linear-gradient(135deg, var(--mt-primary-pale), var(--mt-accent-pale));
    color: var(--mt-primary-d);
    font-size: .73rem; font-weight: 700; padding: .25rem .65rem; border-radius: 100px;
    margin-top: .4rem;
    border: 1px solid rgba(79,141,166,.15);
}

/* ── Services grid ── */
.mt-bk-services {
    display: grid; grid-template-columns: 1fr 1fr; gap: .85rem;
}
.mt-bk-svc-btn {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1.15rem; border-radius: var(--mt-r-md);
    border: 1.5px solid var(--mt-border); background: var(--mt-bg-card);
    cursor: pointer; transition: all .3s var(--mt-ease-spring);
    font-family: var(--mt-font-body); text-align: left;
}
.mt-bk-svc-btn:hover {
    border-color: var(--mt-primary-l); background: var(--mt-primary-pale);
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(79,141,166,.12);
}
.mt-bk-svc-btn.selected {
    border-color: var(--mt-primary); background: var(--mt-primary-pale);
    box-shadow: 0 0 0 3px rgba(79,141,166,.15), 0 6px 20px rgba(79,141,166,.12);
    transform: translateY(-1px);
}
.mt-bk-svc-btn:focus-visible {
    outline: 2px solid var(--mt-primary);
    outline-offset: 2px;
}
.mt-bk-svc-icon {
    width: 36px; height: 36px; border-radius: var(--mt-r-sm); background: var(--mt-bg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: var(--mt-shadow-xs);
    transition: all .3s var(--mt-ease-spring);
}
.mt-bk-svc-icon svg { color: var(--mt-primary); transition: var(--mt-transition); }
.mt-bk-svc-btn:hover .mt-bk-svc-icon,
.mt-bk-svc-btn.selected .mt-bk-svc-icon {
    background: linear-gradient(135deg, var(--mt-primary), var(--mt-accent));
    box-shadow: 0 4px 12px rgba(79,141,166,.25);
}
.mt-bk-svc-btn:hover .mt-bk-svc-icon svg,
.mt-bk-svc-btn.selected .mt-bk-svc-icon svg { color: #fff; }
.mt-bk-svc-info { display: flex; flex-direction: column; gap: .2rem; }
.mt-bk-svc-name { font-size: .85rem; font-weight: 700; color: var(--mt-ink-mid); transition: var(--mt-transition); }
.mt-bk-svc-btn.selected .mt-bk-svc-name { color: var(--mt-primary-d); }
.mt-bk-svc-meta { font-size: .74rem; color: var(--mt-ink-soft); }

/* ── Step 2: Layout 2-col ── */
.mt-bk-layout-2col {
    display: grid; grid-template-columns: 1fr 280px; gap: 1.25rem; align-items: start;
}
@media (max-width: 700px) {
    .mt-bk-layout-2col { grid-template-columns: 1fr; }
}

/* Calendar */
.mt-bk-calendar {
    background: var(--mt-bg-card); border-radius: var(--mt-r-md);
    padding: 1.35rem; box-shadow: var(--mt-shadow-sm);
    border: 1px solid var(--mt-border);
    position: relative; /* contenedor para .mt-bk-cal-loader */
}

/* Loader overlay del calendario mientras se hace fetch a Amelia /slots */
.mt-bk-cal-loader {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .85);
    border-radius: var(--mt-r-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}
.mt-bk-cal-loader.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.mt-bk-cal-loader-text {
    font-family: var(--mt-font-body);
    font-size: .82rem;
    font-weight: 500;
    color: var(--mt-ink-mid);
    letter-spacing: .02em;
}
.mt-bk-calendar--loading .mt-bk-cal-grid {
    opacity: .35;
    filter: blur(.5px);
    transition: opacity .18s ease;
}

/* Spinner reutilizable (también usable fuera del calendario si hace falta) */
.mt-bk-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--mt-primary-pale);
    border-top-color: var(--mt-primary);
    animation: mtSpinnerRotate .8s linear infinite;
}
@keyframes mtSpinnerRotate {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .mt-bk-spinner { animation-duration: 2.5s; }
}
.mt-bk-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mt-bk-cal-month { font-family: var(--mt-font-head); font-size: 1.05rem; font-weight: 700; color: var(--mt-ink); }
.mt-bk-cal-nav { display: flex; gap: .4rem; }
.mt-bk-cal-nav button {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1.5px solid var(--mt-border); background: var(--mt-bg);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--mt-ink-mid); transition: var(--mt-transition);
}
.mt-bk-cal-nav button:hover { background: var(--mt-primary-pale); border-color: var(--mt-primary-l); color: var(--mt-primary-d); }
.mt-bk-cal-nav button:focus-visible { outline: 2px solid var(--mt-primary); outline-offset: 2px; }

.mt-bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mt-bk-cal-dow {
    text-align: center; font-size: .65rem; font-weight: 700;
    color: var(--mt-ink-muted); padding: .4rem 0;
    text-transform: uppercase; letter-spacing: .06em;
}
.mt-bk-cal-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: .82rem; border-radius: var(--mt-r-sm); cursor: pointer;
    transition: all .2s ease; color: var(--mt-ink-mid);
    border: 1.5px solid transparent; position: relative;
}
.mt-bk-cal-day:hover:not(.disabled):not(.empty) {
    background: var(--mt-primary-pale); color: var(--mt-primary-d);
    border-color: var(--mt-primary-l);
}
.mt-bk-cal-day.available { font-weight: 600; color: var(--mt-ink); }
.mt-bk-cal-day.available::after {
    content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mt-primary), var(--mt-accent));
    box-shadow: 0 0 4px rgba(79,141,166,.4);
}
.mt-bk-cal-day.selected {
    background: linear-gradient(135deg, var(--mt-primary), var(--mt-primary-d));
    color: #fff; font-weight: 700;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(79,141,166,.3);
}
.mt-bk-cal-day.selected::after { background: rgba(255,255,255,.7); box-shadow: none; }
.mt-bk-cal-day.today { border-color: var(--mt-primary); color: var(--mt-primary-d); font-weight: 700; }
.mt-bk-cal-day.disabled, .mt-bk-cal-day.empty { color: var(--mt-border); cursor: default; }

/* Time slots */
.mt-bk-time-section { margin-top: 1.25rem; }
.mt-bk-time-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--mt-ink-soft); margin-bottom: .7rem;
}
.mt-bk-time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.mt-bk-time-slot {
    padding: .6rem .35rem; text-align: center; border-radius: var(--mt-r-sm);
    border: 1.5px solid var(--mt-border); font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: all .25s var(--mt-ease-spring);
    color: var(--mt-ink-mid); background: var(--mt-bg-card);
    font-family: var(--mt-font-body);
    min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.mt-bk-time-slot:hover {
    border-color: var(--mt-primary-l); background: var(--mt-primary-pale);
    color: var(--mt-primary-d); transform: translateY(-1px);
}
.mt-bk-time-slot.selected {
    border-color: var(--mt-primary);
    background: linear-gradient(135deg, var(--mt-primary), var(--mt-primary-d));
    color: #fff;
    box-shadow: 0 4px 12px rgba(79,141,166,.25);
    transform: translateY(-1px);
}
.mt-bk-time-slot:focus-visible { outline: 2px solid var(--mt-primary); outline-offset: 2px; }
.mt-bk-time-loading, .mt-bk-no-slots {
    text-align: center; padding: 1.5rem; font-size: .85rem; color: var(--mt-ink-soft);
}
/* Spinner CSS para loading */
.mt-bk-time-loading {
    display: none;
    flex-direction: column; align-items: center; gap: .75rem;
}
.mt-bk-time-loading[style*="display:block"],
.mt-bk-time-loading[style*="display: block"] {
    display: flex !important;
}
.mt-bk-time-loading::before {
    content: '';
    width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid var(--mt-primary-pale);
    border-top-color: var(--mt-primary);
    animation: mtSpin .8s linear infinite;
}
@keyframes mtSpin { to { transform: rotate(360deg); } }

/* Summary sidebar */
.mt-bk-summary {
    background: linear-gradient(180deg, var(--mt-bg-card) 0%, var(--mt-primary-pale) 100%);
    border-radius: var(--mt-r-md);
    padding: 1.35rem; box-shadow: var(--mt-shadow-sm);
    border: 1.5px solid var(--mt-primary-l); position: sticky; top: 0;
}
.mt-bk-summary-title {
    font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--mt-primary-d); margin: 0 0 .85rem;
    display: flex; align-items: center; gap: .4rem;
}
.mt-bk-summary-title::before {
    content: '📋'; font-size: .82rem;
}
.mt-bk-summary-psico {
    display: flex; align-items: center; gap: .6rem;
    padding-bottom: .85rem; border-bottom: 1px solid rgba(79,141,166,.15); margin-bottom: .85rem;
}
.mt-bk-summary-avatar {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--mt-primary-pale);
    box-shadow: 0 2px 8px rgba(79,141,166,.12);
}
.mt-bk-summary-avatar-ph {
    width: 42px; height: 42px; border-radius: 50%; background: var(--mt-primary-pale);
    display: flex; align-items: center; justify-content: center;
}
.mt-bk-summary-name { font-weight: 700; font-size: .85rem; color: var(--mt-ink); }
.mt-bk-summary-svc { font-size: .75rem; color: var(--mt-ink-soft); margin-top: .1rem; }
.mt-bk-summary-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .82rem; margin-bottom: .35rem;
}
.mt-bk-summary-row span:first-child { color: var(--mt-ink-soft); }
.mt-bk-summary-row span:last-child { font-weight: 600; color: var(--mt-ink); }
.mt-bk-summary-datetime {
    background: linear-gradient(135deg, var(--mt-primary-pale), var(--mt-accent-pale));
    border-radius: var(--mt-r-sm);
    padding: .7rem .85rem; margin-top: .85rem;
    font-size: .82rem; color: var(--mt-primary-d); font-weight: 600;
    border: 1px solid rgba(79,141,166,.12);
}

/* ── Step 3: Form ── */
.mt-bk-form-card {
    background: var(--mt-bg-card); border-radius: var(--mt-r-md);
    padding: 1.75rem; box-shadow: var(--mt-shadow-sm);
    border: 1px solid var(--mt-border);
}
.mt-bk-form-section-title {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--mt-primary); margin: 0 0 1rem;
}
.mt-bk-form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem;
}
@media (max-width: 500px) { .mt-bk-form-row { grid-template-columns: 1fr; } }
.mt-bk-form-group { display: flex; flex-direction: column; gap: .3rem; }
.mt-bk-form-group label { font-size: .78rem; font-weight: 600; color: var(--mt-ink-mid); }
.mt-bk-req { color: var(--mt-primary); }
.mt-bk-form-group input {
    padding: .7rem .9rem; border: 1.5px solid var(--mt-border);
    border-radius: var(--mt-r-sm); font-family: var(--mt-font-body);
    font-size: .88rem; color: var(--mt-ink); background: var(--mt-bg);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    outline: none; width: 100%;
}
.mt-bk-form-group input:focus,
.mt-bk-form-group input:focus-visible {
    border-color: var(--mt-primary); background: var(--mt-bg-card);
    box-shadow: 0 0 0 3px rgba(79,141,166,.15);
    outline: none;
}
.mt-bk-form-group input.error {
    border-color: var(--mt-error);
    box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}
.mt-bk-form-group input::placeholder { color: var(--mt-ink-muted); opacity: .7; }

/* Privacy */
.mt-bk-privacy {
    display: flex; gap: .7rem; align-items: flex-start;
    padding: 1.1rem 1.15rem; background: var(--mt-primary-pale);
    border-radius: var(--mt-r-md); border: 1.5px solid transparent;
    margin-top: 1.25rem; cursor: pointer;
    transition: all .25s ease;
}
.mt-bk-privacy:hover { border-color: var(--mt-primary-l); background: rgba(232,242,247,.8); }
.mt-bk-privacy.checked { border-color: var(--mt-primary); background: rgba(232,242,247,.6); }
.mt-bk-checkbox {
    width: 22px; height: 22px; border-radius: 6px;
    border: 2px solid var(--mt-primary-l); background: #fff;
    flex-shrink: 0; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    transition: all .25s var(--mt-ease-spring);
}
.mt-bk-checkbox.checked {
    background: linear-gradient(135deg, var(--mt-primary), var(--mt-accent));
    border-color: var(--mt-primary);
    transform: scale(1.05);
}
.mt-bk-checkbox svg { width: 13px; height: 13px; color: #fff; display: none; }
.mt-bk-checkbox.checked svg { display: block; }
.mt-bk-privacy-text { font-size: .8rem; color: var(--mt-ink-mid); line-height: 1.55; }
.mt-bk-privacy-text a { color: var(--mt-primary-d); text-decoration: underline; font-weight: 600; }

/* Error message */
.mt-bk-error {
    background: #fef2f2; border: 1.5px solid #fecaca; border-radius: var(--mt-r-sm);
    padding: .85rem 1.1rem; margin-top: .85rem;
    font-size: .82rem; color: #991b1b;
    display: flex; align-items: center; gap: .5rem;
    animation: mtShake .4s ease;
}
@keyframes mtShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-2px); }
    80%      { transform: translateX(2px); }
}

/* ── Step 4: Payment ── */
.mt-bk-pay-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.15rem; margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--mt-primary-pale), var(--mt-accent-pale));
    border-radius: var(--mt-r-md);
    font-size: .9rem; color: var(--mt-ink-mid);
    border: 1px solid rgba(79,141,166,.12);
}
.mt-bk-pay-total strong {
    font-size: 1.4rem; font-weight: 800; color: var(--mt-ink);
    font-family: var(--mt-font-head);
}

/* Gateway selector */
.mt-bk-gateway-list {
    display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem;
}
.mt-bk-gw-btn {
    display: flex; align-items: center; gap: .75rem;
    padding: .95rem 1.15rem; border: 1.5px solid var(--mt-border);
    border-radius: var(--mt-r-md); background: var(--mt-bg);
    cursor: pointer; transition: all .25s var(--mt-ease-spring);
    font-family: var(--mt-font-body); font-size: .88rem; color: var(--mt-ink);
    text-align: left; width: 100%;
}
.mt-bk-gw-btn:hover { border-color: var(--mt-primary-l); background: var(--mt-bg-card); transform: translateY(-1px); }
.mt-bk-gw-btn.selected {
    border-color: var(--mt-primary); background: var(--mt-primary-pale);
    box-shadow: 0 0 0 3px rgba(79,141,166,.12);
}
.mt-bk-gw-btn:focus-visible { outline: 2px solid var(--mt-primary); outline-offset: 2px; }
.mt-bk-gw-radio {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--mt-border); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: var(--mt-transition);
}
.mt-bk-gw-btn.selected .mt-bk-gw-radio {
    border-color: var(--mt-primary);
}
.mt-bk-gw-radio::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--mt-primary); transform: scale(0);
    transition: var(--mt-transition);
}
.mt-bk-gw-btn.selected .mt-bk-gw-radio::after { transform: scale(1); }
.mt-bk-gw-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--mt-primary); }
.mt-bk-gw-icon svg { width: 100%; height: 100%; }
.mt-bk-gw-name { font-weight: 600; }

/* Gateway panels */
.mt-bk-gateway-form { margin-top: .75rem; }
.mt-bk-gw-panel { animation: mtPanelIn .3s var(--mt-ease-spring); }
@keyframes mtPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Stripe element */
.mt-bk-stripe-element {
    padding: .75rem .9rem;
    border: 1.5px solid var(--mt-border);
    border-radius: var(--mt-r-sm);
    background: var(--mt-bg);
    transition: border-color .2s ease, box-shadow .2s ease;
    min-height: 44px;
}
.mt-bk-stripe-element:focus-within,
.mt-bk-stripe-element.StripeElement--focus {
    border-color: var(--mt-primary);
    background: var(--mt-bg-card);
    box-shadow: 0 0 0 3px rgba(79,141,166,.15);
}
.mt-bk-stripe-element.StripeElement--invalid {
    border-color: var(--mt-error);
    box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}
.mt-bk-card-error {
    display: none;
    font-size: .78rem; color: var(--mt-error);
    margin-top: .45rem; padding: 0 .2rem;
}
.mt-bk-stripe-secure {
    display: flex; align-items: center; gap: .4rem;
    font-size: .73rem; color: var(--mt-ink-soft);
    margin-top: .6rem;
}
.mt-bk-stripe-secure svg { color: var(--mt-success); }

/* Square element */
.mt-bk-square-element {
    padding: .75rem .9rem;
    border: 1.5px solid var(--mt-border);
    border-radius: var(--mt-r-sm);
    background: var(--mt-bg);
    min-height: 44px;
}

/* Redirect / on-site info */
.mt-bk-redirect-info {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: 1.1rem 1.15rem; background: var(--mt-primary-pale);
    border-radius: var(--mt-r-md);
    font-size: .85rem; color: var(--mt-ink-mid); line-height: 1.55;
    border: 1px solid rgba(79,141,166,.1);
}
.mt-bk-redirect-info svg { flex-shrink: 0; color: var(--mt-primary); margin-top: 2px; }

/* ── Navigation buttons ── */
.mt-bk-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 1.75rem; padding-top: 1.15rem; border-top: 1px solid var(--mt-border);
}
.mt-bk-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .7rem 1.35rem; border-radius: var(--mt-r-md);
    font-family: var(--mt-font-body); font-size: .85rem; font-weight: 700;
    cursor: pointer; transition: all .25s var(--mt-ease-spring); border: none; text-decoration: none;
}
.mt-bk-btn:focus-visible {
    outline: 2px solid var(--mt-primary);
    outline-offset: 2px;
}
.mt-bk-btn-primary {
    background: linear-gradient(135deg, var(--mt-primary), var(--mt-primary-d));
    color: #fff;
    box-shadow: 0 4px 16px rgba(79,141,166,.3);
}
.mt-bk-btn-primary:hover {
    background: linear-gradient(135deg, var(--mt-primary-d), var(--mt-primary-d));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(79,141,166,.35);
}
.mt-bk-btn-primary:disabled {
    background: var(--mt-border); color: var(--mt-ink-muted);
    box-shadow: none; cursor: not-allowed; transform: none;
}
.mt-bk-btn-ghost {
    background: transparent; color: var(--mt-ink-soft);
    border: 1.5px solid var(--mt-border);
}
.mt-bk-btn-ghost:hover { border-color: var(--mt-primary-l); color: var(--mt-primary-d); background: var(--mt-primary-pale); }
.mt-bk-btn-pay {
    background: linear-gradient(135deg, var(--mt-primary), var(--mt-primary-d));
    color: #fff; padding: .8rem 2rem; font-size: .92rem;
    box-shadow: 0 8px 24px rgba(79,141,166,.35);
    position: relative; overflow: hidden;
}
.mt-bk-btn-pay::after {
    content: '';
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transition: none;
    animation: mtShimmer 3s ease-in-out infinite;
}
@keyframes mtShimmer {
    0%   { left: -100%; }
    50%  { left: 150%; }
    100% { left: 150%; }
}
.mt-bk-btn-pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(79,141,166,.45);
}
.mt-bk-btn-pay:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.mt-bk-btn-pay:disabled::after { animation: none; }

/* ── Confirmation ── */
.mt-bk-confirmation { text-align: center; padding: 2.5rem 1.25rem; }
.mt-bk-confirm-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mt-primary), var(--mt-accent));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 0 0 8px var(--mt-primary-pale), 0 16px 40px rgba(79,141,166,.25);
    animation: mtConfirmPop .6s var(--mt-ease-spring) both;
    position: relative;
}
.mt-bk-confirm-icon::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid var(--mt-primary-pale);
    animation: mtConfirmRing 1s ease-out .3s both;
}
@keyframes mtConfirmPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes mtConfirmRing {
    0%   { transform: scale(.8); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}
.mt-bk-confirm-icon svg { color: #fff; animation: mtCheckDraw .5s ease-out .4s both; }
@keyframes mtCheckDraw {
    from { stroke-dasharray: 40; stroke-dashoffset: 40; }
    to   { stroke-dashoffset: 0; }
}
.mt-bk-confirm-title {
    font-family: var(--mt-font-head); font-size: 1.8rem; font-weight: 800;
    color: var(--mt-ink); margin: 0 0 .6rem;
    animation: mtFadeInUp .5s ease .5s both;
}
@keyframes mtFadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mt-bk-confirm-sub {
    font-size: .92rem; color: var(--mt-ink-soft);
    max-width: 400px; margin: 0 auto 1.75rem; line-height: 1.6;
    animation: mtFadeInUp .5s ease .6s both;
}
.mt-bk-confirm-card {
    background: var(--mt-bg-card); border-radius: var(--mt-r-md);
    padding: 1.35rem; max-width: 420px; margin: 0 auto 1.75rem;
    box-shadow: var(--mt-shadow-md); text-align: left;
    border: 1px solid var(--mt-border);
    animation: mtFadeInUp .5s ease .7s both;
}
.mt-bk-confirm-row {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem 0; border-bottom: 1px solid var(--mt-border-l); font-size: .84rem;
}
.mt-bk-confirm-row:last-child { border-bottom: none; }
.mt-bk-confirm-row svg { flex-shrink: 0; color: var(--mt-primary); }
.mt-bk-confirm-row span { color: var(--mt-ink-soft); }
.mt-bk-confirm-row strong { color: var(--mt-ink); }

/* ── Mobile modal fullscreen ── */
@media (max-width: 600px) {
    .mt-booking-overlay { padding: 0; }
    .mt-bk-box { border-radius: 0; max-height: 100vh; height: 100%; }
    .mt-bk-step-label { display: none; }
    .mt-bk-services { grid-template-columns: 1fr; }
    .mt-bk-time-grid { grid-template-columns: repeat(3, 1fr); }
    .mt-bk-step-title { font-size: 1.25rem; }
    .mt-bk-body { padding: 1.25rem; }
    .mt-bk-header { padding: 1rem 1.25rem; }
    .mt-bk-progress { padding: .85rem 1.25rem; }
    .mt-bk-form-card { padding: 1.25rem; }
    .mt-bk-nav { margin-top: 1.25rem; }
    .mt-bk-svc-btn { min-height: 56px; } /* Touch target > 44px */
    .mt-bk-time-slot { min-height: 48px; font-size: .85rem; }
    .mt-bk-cal-nav button { width: 40px; height: 40px; } /* Touch target */
    .mt-bk-btn { padding: .75rem 1.25rem; font-size: .88rem; min-height: 44px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .mt-bk-box,
    .mt-bk-screen.active,
    .mt-bk-confirm-icon,
    .mt-bk-confirm-icon svg,
    .mt-bk-confirm-title,
    .mt-bk-confirm-sub,
    .mt-bk-confirm-card,
    .mt-bk-gw-panel,
    .mt-booking-overlay.open {
        animation: none !important;
    }
    .mt-bk-step-item.active .mt-bk-step-num { animation: none; }
    .mt-bk-btn-pay::after { animation: none; }
}

/* ══════════════════════════════════════════
   THEME & ELEMENTOR RESET OVERRIDES
   ──────────────────────────────────────────
   hello-elementor reset.css aplica estilos a:
     button, [type=button], [type=submit] → bg:transparent, border:#c36, color:#c36
     a → color:#c36

   Usamos doble-clase para ganar especificidad (0,2,0 > 0,1,0)
   sin recurrir a !important.
══════════════════════════════════════════ */

/* ── Botones ficha de autor (hero, CTA, etc.) ── */
button.mt-author-btn,
a.mt-author-btn,
.mt-author-btn.mt-author-btn {
    display: inline-block;
    font-family: var(--mt-font-head);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    border: 2px solid var(--mt-primary);
    border-radius: var(--mt-r-pill);
    padding: 15px 75px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    line-height: 1.2;
}
button.mt-author-btn--primary,
a.mt-author-btn--primary,
.mt-author-btn.mt-author-btn--primary {
    background: var(--mt-primary);
    color: #fff;
    border-color: var(--mt-primary);
}
button.mt-author-btn--primary:hover,
button.mt-author-btn--primary:focus,
a.mt-author-btn--primary:hover,
a.mt-author-btn--primary:focus,
.mt-author-btn.mt-author-btn--primary:hover,
.mt-author-btn.mt-author-btn--primary:focus {
    background: #fff;
    color: var(--mt-primary);
    border-color: var(--mt-primary);
    text-decoration: none;
}

/* ── Botones directorio / image accordion ── */
a.mt-dir-ia-btn,
.mt-dir-ia-btn.mt-dir-ia-btn {
    display: inline-block;
    font-family: var(--mt-font-btn);
    font-size: .85rem;
    font-weight: 600;
    color: #5D727A;
    background: #fff;
    border: none;
    border-radius: 43px;
    padding: .5rem 1.25rem;
    text-decoration: none;
    text-align: center;
    transition: background .2s, color .2s;
}
a.mt-dir-ia-btn:hover,
.mt-dir-ia-btn.mt-dir-ia-btn:hover {
    background: #5D727A;
    color: #fff;
    text-decoration: none;
}
a.mt-dir-ia-btn--outline,
.mt-dir-ia-btn.mt-dir-ia-btn--outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.5);
}
a.mt-dir-ia-btn--outline:hover,
.mt-dir-ia-btn.mt-dir-ia-btn--outline:hover {
    background: rgba(255,255,255,.2);
    color: #fff;
    border-color: #fff;
}

/* ── Botones modal de reservas ── */
button.mt-bk-btn,
.mt-bk-btn.mt-bk-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1.35rem;
    border-radius: var(--mt-r-md);
    font-family: var(--mt-font-body);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s var(--mt-ease-spring);
    border: none;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
}
button.mt-bk-btn-primary,
.mt-bk-btn.mt-bk-btn-primary {
    background: linear-gradient(135deg, var(--mt-primary), var(--mt-primary-d));
    color: #fff;
    box-shadow: 0 4px 16px rgba(79,141,166,.3);
}
button.mt-bk-btn-ghost,
.mt-bk-btn.mt-bk-btn-ghost {
    background: transparent;
    color: var(--mt-ink-soft);
    border: 1.5px solid var(--mt-border);
}

/* ── CTA band override ── */
.mt-author-cta-band button.mt-author-btn--primary:hover,
.mt-author-cta-band .mt-author-btn.mt-author-btn--primary:hover {
    background: var(--mt-accent);
    color: #fff;
    border-color: #fff;
}

/* ── Responsive overrides ── */
@media (max-width: 767px) {
    button.mt-author-btn,
    a.mt-author-btn,
    .mt-author-btn.mt-author-btn {
        padding: 15px 40px;
        width: 100%;
    }
}

