@font-face {
    font-family: 'Fredoka';
    src: url('../../fonts/fredoka.woff2') format('woff2');
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

html[data-em-theme='light'] {
    color-scheme: light;
    --em-page-bg: #f4f7f9;
    --em-surface: #ffffff;
    --em-surface-elevated: #ffffff;
    --em-surface-soft: #eef4f8;
    --em-input-bg: #ffffff;
    --em-header-bg: rgba(255, 255, 255, .95);
    --em-footer-bg: #e9eff5;
    --em-text-primary: #18253a;
    --em-text-secondary: #5f6f82;
    --em-text-on-primary: #ffffff;
    --em-button-primary-text: #ffffff;
    --em-border: #d9e2ec;
    --em-primary: #046bd2;
    --em-primary-hover: #0353a4;
    --em-primary-soft: rgba(4, 107, 210, .11);
    --em-success: #0f8a5f;
    --em-warning: #b77900;
    --em-error: #c43b47;
    --em-overlay: rgba(15, 23, 42, .58);
    --em-shadow-card: 0 12px 32px rgba(24, 55, 91, .10);
    --em-focus: 0 0 0 3px rgba(4, 107, 210, .24);
    --bg-main: var(--em-page-bg) !important;
    --bg-card: var(--em-surface) !important;
    --bg-input: var(--em-input-bg) !important;
    --primary: var(--em-primary) !important;
    --primary-hover: var(--em-primary-hover) !important;
    --secondary: var(--em-border) !important;
    --text-main: var(--em-text-primary) !important;
    --text-muted: var(--em-text-secondary) !important;
    --success: var(--em-success) !important;
    --warning: var(--em-warning) !important;
    --error: var(--em-error) !important;
    --font-main: 'Fredoka', system-ui, sans-serif !important;
}

html[data-em-theme='dark'] {
    color-scheme: dark;
    --em-page-bg: #0f172a;
    --em-surface: #17233d;
    --em-surface-elevated: #1e2d49;
    --em-surface-soft: #111d34;
    --em-input-bg: #111c31;
    --em-header-bg: rgba(15, 23, 42, .95);
    --em-footer-bg: #0b1220;
    --em-text-primary: #f4f7fb;
    --em-text-secondary: #b9c4d4;
    --em-text-on-primary: #071623;
    --em-button-primary-text: #071623;
    --em-border: #33435d;
    --em-primary: #22d3ee;
    --em-primary-hover: #67e8f9;
    --em-primary-soft: rgba(34, 211, 238, .14);
    --em-success: #34d399;
    --em-warning: #fbbf24;
    --em-error: #fb7185;
    --em-overlay: rgba(2, 6, 23, .82);
    --em-shadow-card: 0 18px 46px rgba(0, 0, 0, .34);
    --em-focus: 0 0 0 3px rgba(34, 211, 238, .28);
    --bg-main: var(--em-page-bg) !important;
    --bg-card: var(--em-surface) !important;
    --bg-input: var(--em-input-bg) !important;
    --primary: var(--em-primary) !important;
    --primary-hover: var(--em-primary-hover) !important;
    --secondary: var(--em-border) !important;
    --text-main: var(--em-text-primary) !important;
    --text-muted: var(--em-text-secondary) !important;
    --success: var(--em-success) !important;
    --warning: var(--em-warning) !important;
    --error: var(--em-error) !important;
    --font-main: 'Fredoka', system-ui, sans-serif !important;
}

html[data-em-theme] body.em-theme-template,
html[data-em-theme] body.em-color-scheme-enabled {
    background-color: var(--em-page-bg) !important;
    color: var(--em-text-primary) !important;
    font-family: 'Fredoka', system-ui, sans-serif;
    transition: background-color .2s ease, color .2s ease;
}

html[data-em-theme] body.em-theme-template > header,
html[data-em-theme] body.em-theme-template > .site-header {
    background-color: var(--em-header-bg) !important;
    border-color: var(--em-border) !important;
}

html[data-em-theme] body.em-theme-template > footer {
    background-color: var(--em-footer-bg) !important;
    color: var(--em-text-secondary) !important;
    border-color: var(--em-border) !important;
}

html[data-em-theme] body.em-theme-template :is(h1, h2, h3, h4, h5, h6, .page-title, .profile-name, .track-title, .section-title, .plan-name, .plan-price, .list-header, .course-title, .modal-title, .summary-text) { color: var(--em-text-primary) !important; }
html[data-em-theme] body.em-theme-template :is(p, .subtitle, .description, .profile-username, .track-artist, .meta-text) { color: var(--em-text-secondary); }
html[data-em-theme] body.em-theme-template :is(a, .nav-link):not(.btn):not(.button):not(.wp-element-button):not(.btn-nav):not(.btn-primary):not(.btn-outline):not(.btn-logout):not(.btn-back):not(.em-plan-cta) { color: var(--em-primary); }

/* Botones: los enlaces de acción nunca heredan el color de los enlaces normales. */
html[data-em-theme] body.em-color-scheme-enabled :is(a.btn-primary, button.btn-primary, .btn.btn-primary, a.btn-nav, button.btn-nav, .wp-element-button, .wp-block-button__link),
html[data-em-theme] body.em-theme-template :is(a.btn-primary, button.btn-primary, .btn.btn-primary, a.btn-nav, button.btn-nav, .wp-element-button, .wp-block-button__link) {
    background-color: var(--em-primary) !important;
    border-color: var(--em-primary) !important;
    color: var(--em-button-primary-text) !important;
}

html[data-em-theme] body.em-color-scheme-enabled :is(a.btn-primary, button.btn-primary, .btn.btn-primary, a.btn-nav, button.btn-nav, .wp-element-button, .wp-block-button__link):hover,
html[data-em-theme] body.em-theme-template :is(a.btn-primary, button.btn-primary, .btn.btn-primary, a.btn-nav, button.btn-nav, .wp-element-button, .wp-block-button__link):hover {
    background-color: var(--em-primary-hover) !important;
    border-color: var(--em-primary-hover) !important;
    color: var(--em-button-primary-text) !important;
}

html[data-em-theme] body.em-color-scheme-enabled :is(.btn-outline, .is-style-outline > .wp-block-button__link),
html[data-em-theme] body.em-theme-template :is(.btn-outline, .is-style-outline > .wp-block-button__link) {
    background-color: transparent !important;
    border-color: var(--em-primary) !important;
    color: var(--em-primary) !important;
}

html[data-em-theme] body.em-color-scheme-enabled :is(.btn-outline, .is-style-outline > .wp-block-button__link):hover,
html[data-em-theme] body.em-theme-template :is(.btn-outline, .is-style-outline > .wp-block-button__link):hover {
    background-color: var(--em-primary) !important;
    color: var(--em-button-primary-text) !important;
}

html[data-em-theme] body.em-color-scheme-enabled :is(button, .button, .btn, .wp-element-button, input[type='button'], input[type='submit']):focus-visible {
    outline: none !important;
    box-shadow: var(--em-focus) !important;
}

html[data-em-theme] body.em-color-scheme-enabled :is(button, .button, .btn, .wp-element-button, input[type='button'], input[type='submit']):disabled,
html[data-em-theme] body.em-color-scheme-enabled :is(.button, .btn, .wp-element-button)[aria-disabled='true'] {
    opacity: .58;
    cursor: not-allowed;
}

html[data-em-theme] body.em-theme-template :is(.card, .pricing-card, .feature-card, .learning-card, .course-card, .track-card, .content-card, .profile-sidebar, .shortcode-container, .terms-card, .calendar-container, .main-card, .checkout-container, .modal-content, .form-container) {
    background-color: var(--em-surface) !important;
    color: var(--em-text-primary) !important;
    border-color: var(--em-border) !important;
    box-shadow: var(--em-shadow-card);
}

html[data-em-theme] body.em-theme-template :is(input, select, textarea) {
    background-color: var(--em-input-bg) !important;
    color: var(--em-text-primary) !important;
    border-color: var(--em-border) !important;
}
html[data-em-theme] body.em-theme-template :is(input, select, textarea):focus { border-color: var(--em-primary) !important; box-shadow: var(--em-focus) !important; outline: none; }
html[data-em-theme] body.em-theme-template :is(input, textarea)::placeholder { color: var(--em-text-secondary); opacity: .78; }

html[data-em-theme='light'] body.em-theme-template :is(.hero-overlay, .banner-overlay) { background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.60)) !important; }
html[data-em-theme='dark'] body.em-theme-template :is(.hero-overlay, .banner-overlay) { background: linear-gradient(90deg, rgba(15,23,42,.96), rgba(15,23,42,.48)) !important; }

/* Portada: conserva detalle fotográfico y una zona oscura detrás del texto. */
html[data-em-theme='light'] .em-template-home .hero {
    background-image: linear-gradient(to bottom, rgba(9, 23, 47, .68) 0%, rgba(9, 23, 47, .52) 58%, rgba(244, 247, 249, .96) 100%), url('https://expresionmusical.com/wp-content/uploads/js/imagen-fondo-em.webp') !important;
}
html[data-em-theme] .em-template-home .hero :is(h1, p) { color: #ffffff !important; }
html[data-em-theme='light'] .em-template-home .hero .btn-outline {
    background-color: rgba(255, 255, 255, .94) !important;
    border-color: var(--em-primary) !important;
    color: var(--em-primary-hover) !important;
}
html[data-em-theme='dark'] .em-template-home .hero .btn-outline {
    background-color: rgba(15, 23, 42, .88) !important;
    border-color: var(--em-primary) !important;
    color: var(--em-primary) !important;
}

/* Plantilla predeterminada de Kadence: Header Builder, sticky y navegación móvil. */
html[data-em-theme] body.em-color-scheme-enabled :is(#masthead, #main-header, .site-header-wrap, .site-header-row-container-inner, .site-header-row-container) {
    background-color: var(--em-header-bg) !important;
    border-color: var(--em-border) !important;
}

html[data-em-theme] body.em-color-scheme-enabled #masthead :is(.main-navigation .primary-menu-container > ul > li > a, .site-header-section a:not(.button), .menu-toggle-open, .menu-toggle-open-container button) {
    color: var(--em-text-primary) !important;
}

html[data-em-theme] body.em-color-scheme-enabled #masthead :is(.main-navigation a:hover, .main-navigation a:focus, .main-navigation .current-menu-item > a) {
    color: var(--em-primary) !important;
}

html[data-em-theme] body.em-color-scheme-enabled #masthead :is(.sub-menu, .header-navigation .sub-menu) {
    background-color: var(--em-surface-elevated) !important;
    border-color: var(--em-border) !important;
    box-shadow: var(--em-shadow-card) !important;
}

html[data-em-theme] body.em-color-scheme-enabled #masthead :is(.sub-menu a, .header-navigation .sub-menu a) {
    color: var(--em-text-primary) !important;
}

html[data-em-theme] body.em-color-scheme-enabled #masthead :is(.header-button, .button) {
    background-color: var(--em-primary) !important;
    border-color: var(--em-primary) !important;
    color: var(--em-button-primary-text) !important;
}

html[data-em-theme] body.em-color-scheme-enabled #mobile-drawer :is(.drawer-inner, .drawer-content, .mobile-navigation) {
    background-color: var(--em-surface-elevated) !important;
    color: var(--em-text-primary) !important;
    border-color: var(--em-border) !important;
}

html[data-em-theme] body.em-color-scheme-enabled #mobile-drawer :is(a, button, .drawer-toggle) {
    color: var(--em-text-primary) !important;
}

/* Plantilla predeterminada de Kadence: contenido y Footer Builder. */
html[data-em-theme] body.em-color-scheme-enabled :is(#inner-wrap, #primary, #main, .content-bg) {
    background-color: var(--em-page-bg) !important;
    color: var(--em-text-primary) !important;
}

html[data-em-theme] body.em-color-scheme-enabled :is(.content-bg, .entry, .entry-content-wrap) {
    border-color: var(--em-border);
}

html[data-em-theme] body.em-color-scheme-enabled :is(.entry-header, .entry-content, .content-area) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--em-text-primary);
}

html[data-em-theme] body.em-color-scheme-enabled :is(#colophon, .site-footer-wrap, .site-footer-row-container, .site-footer-row-container-inner) {
    background-color: var(--em-footer-bg) !important;
    color: var(--em-text-secondary) !important;
    border-color: var(--em-border) !important;
}

html[data-em-theme] body.em-color-scheme-enabled #colophon :is(h1, h2, h3, h4, h5, h6, .widget-title) {
    color: var(--em-text-primary) !important;
}

html[data-em-theme] body.em-color-scheme-enabled #colophon :is(p, li, .site-info-inner) { color: var(--em-text-secondary) !important; }
html[data-em-theme] body.em-color-scheme-enabled #colophon a { color: var(--em-text-primary) !important; }
html[data-em-theme] body.em-color-scheme-enabled #colophon a:hover,
html[data-em-theme] body.em-color-scheme-enabled #colophon a:focus { color: var(--em-primary) !important; }

/* Compatibilidad puntual con plantillas históricas que conservan colores embebidos. */
html[data-em-theme='light'] body.em-theme-template footer a,
html[data-em-theme='light'] body.em-theme-template footer [style*='color: white'],
html[data-em-theme='light'] body.em-theme-template footer [style*='color:#fff'],
html[data-em-theme='light'] body.em-theme-template footer [style*='color: #fff'] {
    color: var(--em-text-primary) !important;
}

html[data-em-theme='light'] .em-template-dashboard :is(.card-chordem, .card-biblioteca) {
    background: linear-gradient(145deg, var(--em-surface), var(--em-surface-soft)) !important;
    color: var(--em-text-primary) !important;
}

html[data-em-theme] .em-template-registration-process :is(.form-header, .form-summary, .registration-summary),
html[data-em-theme] .em-template-checkout :is(.order-summary, .payment-method),
html[data-em-theme] .em-template-membership-status :is(.membership-summary, .profile-card) {
    background-color: var(--em-surface-soft) !important;
    color: var(--em-text-primary) !important;
    border-color: var(--em-border) !important;
}

html[data-em-theme] body.em-theme-template :is(.currency-select option, select option) {
    background: var(--em-input-bg) !important;
    color: var(--em-text-primary) !important;
}

html[data-em-theme] body.em-theme-template :is(hr, .divider, .separator) { border-color: var(--em-border) !important; }

.em-theme-toggle-shell {
    position: fixed;
    z-index: 2147482000;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
}
.em-theme-toggle-shell.is-inline { position: static; z-index: auto; margin: 0; flex: 0 0 auto; }
.em-theme-toggle-slot,
[data-em-theme-toggle-slot] { display: flex !important; align-items: center; flex: 0 0 auto; }

/* El selector adopta el alto y la alineación de un elemento nativo del Header Builder. */
html[data-em-theme] body.em-color-scheme-enabled #masthead .em-theme-toggle-shell.is-kadence-header {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 100% !important;
    padding-block: 0 !important;
}
html[data-em-theme] body.em-color-scheme-enabled #masthead .em-theme-toggle-shell.is-kadence-header .em-theme-toggle {
    align-self: center !important;
    margin-block: 0 !important;
}
.em-theme-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid var(--em-border);
    border-radius: 999px;
    background: var(--em-surface-elevated);
    color: var(--em-text-primary);
    padding: 8px 13px;
    box-shadow: var(--em-shadow-card);
    font: 700 .82rem/1 'Fredoka', system-ui, sans-serif;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.em-theme-toggle:hover { transform: translateY(-1px); background: var(--em-primary-soft); }
.em-theme-toggle:focus-visible { outline: none; box-shadow: var(--em-focus); }
.em-theme-toggle__icon { width: 1.1em; text-align: center; font-size: 1.05rem; }
html[data-em-theme='light'] .em-theme-toggle__icon--light,
html[data-em-theme='dark'] .em-theme-toggle__icon--dark { display: none; }

@media (max-width: 640px) {
    .em-theme-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .em-theme-toggle { width: 42px; justify-content: center; padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}