/* ============================================================
   Business Welcome Style — Dashboard de bienvenida (prefijo baw-)
   Welcome banner, chips, avatar, KPI layout,
   action cards y animaciones.
   ============================================================ */

/* ── SHELL CONTAINER ─────────────────────────────────────── */
.bcp-centered-container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    min-height: 0;
}

/* ── RAÍZ ────────────────────────────────────────────────── */
.baw-root {
    padding: 20px 24px;
    background: var(--surface-dim);
    min-height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── WELCOME BANNER ──────────────────────────────────────── */
.baw-banner {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-top: none;
    border-radius: var(--radius-sm);
    padding: 24px 28px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    animation: baw-slideDown 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.baw-banner:hover { box-shadow: 0 2px 12px rgba(0,0,0,.07); }

/* Barra de color superior */
.baw-banner-top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--primary);
    border-radius: 12px 12px 0 0;
}

.baw-banner-left  { flex: 1; min-width: 0; }
.baw-banner-right { flex-shrink: 0; }

.baw-greeting-text {
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-size: 21px; font-weight: 500;
    color: var(--on-surface);
    margin: 0;
}

.baw-subtitle {
    font-size: 13px;
    color: var(--on-surface-variant);
    margin: 0 0 14px;
    font-weight: 500;
}

/* ── CHIPS ───────────────────────────────────────────────── */
.baw-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.baw-chip {
    display: inline-flex;
    align-items: center; gap: 5px;
    padding: 4px 11px;
    border-radius: var(--radius-full);
    font-size: 12px; font-weight: 500;
    border: 1px solid var(--outline);
    background: var(--surface-dim);
    color: var(--on-surface-variant);
}
.baw-chip.primary { background: var(--primary-surface); border-color: #c5d8fc; color: var(--primary); }
.baw-chip.success { background: var(--success-surface); border-color: #b7e5c4; color: var(--success); }
.baw-chip.warning { background: var(--warning-surface); border-color: #fde6a0; color: #b45309; }
.baw-chip.danger  { background: var(--error-surface);   border-color: #f5b8b4; color: var(--error); }

/* ── AVATAR ──────────────────────────────────────────────── */
.baw-avatar-ring {
    width: 60px; height: 60px;
    border-radius: var(--radius-full);
    background: var(--primary-surface);
    border: 2px solid #c5d8fc;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-weight: 500;
    color: var(--primary);
    position: relative;
    animation: baw-float 5s ease-in-out 2.5s infinite;
}

.baw-avatar-status {
    position: absolute;
    bottom: 1px; right: 1px;
    width: 14px; height: 14px;
    background: var(--success);
    border: 2px solid var(--surface);
    border-radius: var(--radius-full);
    animation: baw-pulse-dot 2.5s ease-in-out 1s infinite;
}

/* ── SECTION HEADER ──────────────────────────────────────── */
.baw-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-top: 8px;
}

.baw-section-title {
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-size: 14px; font-weight: 500;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0;
}

/* ── ACTION CARDS ────────────────────────────────────────── */
.baw-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    animation: baw-slideUp 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
}

@media (max-width: 1200px) { .baw-actions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .baw-actions-grid { grid-template-columns: 1fr; } }

.baw-action-card {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-xs);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.baw-action-card:hover {
    box-shadow: var(--elevation-2);
    text-decoration: none;
}

.baw-action-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.baw-action-icon-blue   { background: var(--info-surface); color: var(--info); }
.baw-action-icon-green  { background: var(--success-surface); color: var(--success); }
.baw-action-icon-amber  { background: var(--warning-surface); color: #b45309; }
.baw-action-icon-purple { background: #f3e8ff; color: #7c3aed; }
.baw-action-icon-primary { background: var(--primary-surface); color: var(--primary); }

.baw-action-card:hover .baw-action-icon-blue   { background: var(--info);    color: #fff; }
.baw-action-card:hover .baw-action-icon-green  { background: var(--success); color: #fff; }
.baw-action-card:hover .baw-action-icon-amber  { background: var(--warning); color: #fff; }
.baw-action-card:hover .baw-action-icon-purple { background: #7c3aed; color: #fff; }
.baw-action-card:hover .baw-action-icon-primary { background: var(--primary); color: #fff; }

.baw-action-content { flex: 1; min-width: 0; }

.baw-action-title {
    font-size: 14px; font-weight: 600;
    color: var(--on-surface);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.baw-action-desc {
    font-size: 12px;
    color: var(--on-surface-variant);
    margin: 0;
}

.baw-action-badge {
    font-size: 11px; font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--surface-dim);
    color: var(--on-surface-variant);
    white-space: nowrap;
}

.baw-action-go {
    font-size: 18px;
    color: var(--outline);
    transition: color 0.2s ease;
}
.baw-action-card:hover .baw-action-go { color: var(--on-surface-variant); }

/* ── INFO STRIP ──────────────────────────────────────────── */
.baw-info-strip {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-xs);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.baw-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--on-surface-variant);
}

.baw-info-item i,
.baw-info-item .material-symbols-outlined {
    font-size: 16px;
    color: var(--on-surface-variant);
}

.baw-info-divider { width: 1px; height: 16px; background: var(--outline); }

/* ── SHIMMER / SKELETON ──────────────────────────────────── */
.baw-shimmer {
    background: linear-gradient(90deg, var(--surface-dim) 25%, var(--surface-variant) 50%, var(--surface-dim) 75%);
    background-size: 800px 100%;
    animation: baw-shimmer 1.4s infinite;
}

/* ── ANIMACIONES ─────────────────────────────────────────── */
@keyframes baw-slideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes baw-slideUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes baw-slideRight {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes baw-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

@keyframes baw-pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.6); opacity: 0.55; }
}

@keyframes baw-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

/* ── DARK MODE ───────────────────────────────────────────── */
[data-theme="dark"] .baw-banner,
[data-theme="dark"] .baw-action-card,
[data-theme="dark"] .baw-info-strip {
    background: var(--surface) !important;
    border-color: var(--outline) !important;
}

[data-theme="dark"] .baw-action-title { color: var(--on-surface) !important; }
[data-theme="dark"] .baw-greeting-text { color: var(--on-surface) !important; }

/* ═══════════════════════════════════════════════════════════
   BUSINESS ADMIN WELCOME — Nuevas clases del componente
   (spec: docs/BUSINESS_ADMIN_WELCOME_SPEC.md)
   ═══════════════════════════════════════════════════════════ */

/* ── BANNER EXTENSIONES ──────────────────────────────────── */
.baw-greeting-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.baw-greeting-icon {
    font-size: 24px;
    line-height: 1;
    animation: baw-float 4s ease-in-out 1s infinite;
    display: inline-block;
}

.baw-banner-right { flex-shrink: 0; }

/* ── CHIPS ROW ───────────────────────────────────────────── */
.baw-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.baw-chip-btn {
    cursor: pointer;
    background: none;
    border: 1px solid var(--outline);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.baw-chip-btn:hover {
    background: var(--primary-hover);
    border-color: #c5d8fc;
}
.baw-chip-btn.active {
    background: var(--primary-surface);
    border-color: #c5d8fc;
    color: var(--primary);
}

.baw-online-dot {
    width: 7px; height: 7px;
    background: var(--success);
    border-radius: var(--radius-full);
    display: inline-block;
    animation: baw-pulse-dot 2.5s ease-in-out 1s infinite;
}

/* ── AI PANEL ────────────────────────────────────────────── */
.baw-ai-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.baw-ai-panel.baw-ai-open {
    max-height: 200px;
}

.baw-ai-panel-inner {
    margin-top: 14px;
    background: var(--primary-surface);
    border: 1px solid #c5d8fc;
    border-radius: var(--radius-xs);
    padding: 14px 16px;
    animation: baw-fadeIn 0.3s ease both;
}

.baw-ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.baw-ai-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.baw-ai-refresh-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}
.baw-ai-refresh-btn:hover { background: #d2e3fc; }

.baw-ai-text {
    font-size: 13px;
    color: var(--on-surface);
    line-height: 1.55;
}

.baw-ai-skeleton {
    height: 13px;
    border-radius: 6px;
    margin-bottom: 8px;
    background: rgba(26,115,232,0.12);
}

/* ── FOCUS CARD ──────────────────────────────────────────── */
.baw-focus-card {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    padding: 20px 24px;
    margin-bottom: 20px;
    animation: baw-slideDown 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
}

.baw-focus-skeleton {
    display: flex;
    flex-direction: column;
}

.baw-focus-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid;
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    animation: baw-fadeIn 0.35s ease both;
    flex-wrap: wrap;
}

.baw-focus-icon-wrap {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.baw-focus-body {
    flex: 1;
    min-width: 0;
}

.baw-focus-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--on-surface-variant);
    margin-bottom: 3px;
}

.baw-focus-title {
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--on-surface);
    margin-bottom: 3px;
}

.baw-focus-desc {
    font-size: 12px;
    color: var(--on-surface-variant);
}

.baw-focus-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.baw-focus-cta:hover { opacity: 0.88; transform: translateY(-1px); }

/* ── MAIN GRID ───────────────────────────────────────────── */
.baw-main-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1300px) {
    .baw-main-grid { grid-template-columns: 1fr; }
    .baw-news-section { order: -1; }
    .baw-news-card.baw-news-open {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1000px) {
    .baw-modules-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 800px) {
    .baw-root { padding: 12px; }
    .baw-banner { flex-direction: column; align-items: flex-start; }
    .baw-banner-right { display: none; }
    .baw-modules-grid { grid-template-columns: 1fr !important; }
    .baw-main-grid { grid-template-columns: 1fr; }
    .baw-news-card.baw-news-open { grid-template-columns: 1fr; }
    .baw-focus-inner { flex-direction: column; align-items: flex-start; }
    .baw-focus-cta { width: 100%; justify-content: center; }
}

/* ── MODULES SECTION ─────────────────────────────────────── */
.baw-modules-section {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    padding: 20px;
}
.baw-modules-section > .baw-section-title { margin-bottom: 14px; }

.baw-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.baw-module-card {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-xs);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    position: relative;
    overflow: hidden;
    animation: baw-slideUp 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.baw-module-card:nth-child(1) { animation-delay: .10s; }
.baw-module-card:nth-child(2) { animation-delay: .16s; }
.baw-module-card:nth-child(3) { animation-delay: .22s; }
.baw-module-card:nth-child(4) { animation-delay: .28s; }
.baw-module-card:nth-child(5) { animation-delay: .34s; }
.baw-module-card:nth-child(6) { animation-delay: .40s; }

.baw-module-card:hover {
    box-shadow: var(--elevation-2);
    border-color: #c5d8fc;
    transform: translateY(-2px);
}

/* Featured module */
.baw-module-card:has(.baw-featured-badge) {
    animation: baw-featured-pulse 2.5s ease-in-out 0.5s infinite;
    border-color: #c5d8fc;
}

.baw-featured-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    letter-spacing: 0.3px;
}

.baw-module-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.baw-module-info { flex: 1; min-width: 0; }

.baw-module-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--on-surface);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.baw-module-desc {
    font-size: 11px;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.baw-module-arrow {
    font-size: 18px;
    color: var(--outline);
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}
.baw-module-card:hover .baw-module-arrow {
    color: var(--primary);
    transform: translateX(2px);
}

/* ── NEWS SECTION ────────────────────────────────────────── */
.baw-news-section {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    padding: 20px;
}

.baw-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.baw-news-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--on-surface-variant);
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}
.baw-news-toggle-btn:hover { background: var(--surface-container); }

.baw-news-card {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.baw-news-card.baw-news-open {
    max-height: 600px;
    animation: baw-fadeIn 0.3s ease both;
}

.baw-news-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    animation: baw-news-stagger 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.baw-news-dot {
    width: 10px; height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-top: 4px;
}
.baw-news-dot.new    { background: var(--primary); animation: baw-pulse-dot 2.5s ease-in-out infinite; }
.baw-news-dot.update { background: var(--success); }
.baw-news-dot.tip    { background: var(--warning); }

.baw-news-content { flex: 1; min-width: 0; }

.baw-news-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-bottom: 4px;
}
.baw-news-badge.new    { background: var(--primary-surface); color: var(--primary); }
.baw-news-badge.update { background: var(--success-surface); color: var(--success); }
.baw-news-badge.tip    { background: var(--warning-surface); color: #b45309; }

.baw-news-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0 0 3px;
}

.baw-news-desc {
    font-size: 12px;
    color: var(--on-surface-variant);
    margin: 0;
}

.baw-news-divider {
    height: 1px;
    background: var(--outline-variant);
}

/* ── EXTRA ANIMATIONS ────────────────────────────────────── */
@keyframes baw-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes baw-scaleIn {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes baw-featured-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26,115,232,0); }
    50%       { box-shadow: 0 0 0 5px rgba(26,115,232,0.15); }
}

@keyframes baw-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes baw-chip-attract {
    0%, 90%, 100% { box-shadow: none; }
    95%           { box-shadow: 0 0 0 4px rgba(124,58,237,0.2); }
}

@keyframes baw-news-stagger {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes baw-top-bar-slide {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); }
}

.baw-chip-attract {
    animation: baw-chip-attract 3s ease 1.5s infinite;
}

/* ── DARK MODE — nuevas clases ───────────────────────────── */
[data-theme="dark"] .baw-focus-card,
[data-theme="dark"] .baw-modules-section,
[data-theme="dark"] .baw-news-section {
    background: var(--surface) !important;
    border-color: var(--outline) !important;
}

[data-theme="dark"] .baw-module-card {
    background: var(--surface) !important;
    border-color: var(--outline) !important;
}

[data-theme="dark"] .baw-ai-panel-inner {
    background: rgba(26,115,232,0.08) !important;
    border-color: rgba(26,115,232,0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   BUSINESS CLIENT WELCOME — Quick actions
   (spec: docs/BUSINESS_CLIENT_PORTAL_SPEC.md §7.3)
   ═══════════════════════════════════════════════════════════ */

.baw-quick-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
    flex-shrink: 0;
    align-self: flex-start;
}

.baw-qa-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--on-surface-variant);
    margin: 0;
}

.baw-qa-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.baw-qa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--outline);
    background: var(--surface);
    color: var(--on-surface-variant);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.baw-qa-btn:hover {
    background: var(--primary-hover);
    border-color: #c5d8fc;
    color: var(--primary);
}
.baw-qa-btn i {
    font-size: 14px;
    line-height: 1;
}
.baw-qa-btn[data-baw-action="logout"]:hover {
    background: var(--error-surface);
    border-color: #f5b8b4;
    color: var(--error);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 800px) {
    .baw-quick-actions {
        align-items: flex-start;
        margin-top: 14px;
    }
    .baw-qa-btns {
        justify-content: flex-start;
    }
}

/* ── DARK MODE ───────────────────────────────────────────── */
[data-theme="dark"] .baw-qa-btn {
    background: var(--surface) !important;
    border-color: var(--outline) !important;
    color: var(--on-surface-variant) !important;
}
[data-theme="dark"] .baw-qa-btn:hover {
    background: rgba(26,115,232,0.1) !important;
    border-color: rgba(26,115,232,0.3) !important;
    color: var(--primary) !important;
}

/* ================================================================
   First-Login Welcome Modal (prefijo bwm-)
   Pantalla de bienvenida mostrada solo en el primer ingreso del cliente.
   ================================================================ */

/* ── Overlay ──────────────────────────────────────────────── */

.bwm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    animation: bwm-fade-in 0.35s ease forwards;
}

/* ── Card ─────────────────────────────────────────────────── */

.bwm-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(28px) scale(0.97);
    opacity: 0;
    animation: bwm-slide-up 0.42s cubic-bezier(0.34, 1.2, 0.64, 1) 0.12s forwards;
}

/* ── Header con gradiente ─────────────────────────────────── */

.bwm-header {
    background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
    padding: 28px 32px 24px;
    position: relative;
    overflow: visible;
    text-align: center;
}

/* Círculos decorativos de fondo */
.bwm-header::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -15%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
    z-index: 0;
}

.bwm-header::before {
    content: '';
    position: absolute;
    bottom: -30%;
    left: 5%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
    z-index: 0;
}

/* ── Animación de logística (globo + órbitas) ─────────────── */

.bwm-anim-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    z-index: 1;
}

/* Globo central */
.bwm-globe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    box-shadow: 0 0 0 8px rgba(255,255,255,0.06),
                0 0 0 16px rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.bwm-globe .material-symbols-outlined {
    font-size: 28px;
    color: #fff;
    animation: bwm-globe-spin 14s linear infinite;
    display: block;
}

/* Anillos de órbita */
.bwm-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.24);
    z-index: 1;
}

.bwm-orbit--1 {
    width: 82px;
    height: 82px;
    margin-top: -41px;
    margin-left: -41px;
    animation: bwm-orbit-cw 5s linear infinite;
}

.bwm-orbit--2 {
    width: 116px;
    height: 116px;
    margin-top: -58px;
    margin-left: -58px;
    animation: bwm-orbit-ccw 9s linear infinite;
}

/* Icono en cada órbita — siempre en la cima del anillo */
.bwm-orbit-icon {
    position: absolute;
    top: -11px;
    left: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.bwm-orbit--1 .bwm-orbit-icon {
    transform: translateX(-50%);
    animation: bwm-counter-cw 5s linear infinite;
}

.bwm-orbit--2 .bwm-orbit-icon {
    transform: translateX(-50%);
    animation: bwm-counter-ccw 9s linear infinite;
}

.bwm-orbit-icon .material-symbols-outlined {
    font-size: 12px;
    color: #1557b0;
    display: block;
}

/* ── Textos del header ────────────────────────────────────── */

.bwm-header-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.58);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 4px;
    position: relative;
    z-index: 1;
}

.bwm-header-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.82);
    margin: 0 0 3px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.bwm-header-company {
    font-family: 'Google Sans', sans-serif;
    font-size: 21px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}

.bwm-header-byline {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.4px;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ── Body ─────────────────────────────────────────────────── */

.bwm-body {
    padding: 28px 32px 20px;
}

.bwm-greeting {
    font-family: 'Google Sans', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--on-surface);
    margin: 0 0 6px;
}

.bwm-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--on-surface-variant);
    margin: 0 0 22px;
    line-height: 1.65;
}

.bwm-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 4px;
    list-style: none;
    padding: 0;
}

.bwm-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    opacity: 0;
    transform: translateX(-12px);
}

.bwm-feature-item:nth-child(1) { animation: bwm-item-in 0.32s ease 0.50s forwards; }
.bwm-feature-item:nth-child(2) { animation: bwm-item-in 0.32s ease 0.64s forwards; }
.bwm-feature-item:nth-child(3) { animation: bwm-item-in 0.32s ease 0.78s forwards; }

.bwm-feature-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-xs);
    background: var(--primary-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.bwm-feature-icon .material-symbols-outlined {
    font-size: 18px;
}

.bwm-feature-text {
    flex: 1;
    padding-top: 2px;
}

.bwm-feature-title {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0 0 2px;
}

.bwm-feature-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: 1.5;
}

/* ── Footer ───────────────────────────────────────────────── */

.bwm-footer {
    padding: 16px 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.bwm-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease;
    opacity: 0;
    animation: bwm-fade-in 0.28s ease 0.92s forwards;
}

.bwm-btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.bwm-btn-primary:active {
    transform: translateY(0);
}

.bwm-btn-skip {
    background: none;
    border: none;
    color: var(--on-surface-variant);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-full);
    transition: color 0.15s ease;
    opacity: 0;
    animation: bwm-fade-in 0.28s ease 1.02s forwards;
}

.bwm-btn-skip:hover {
    color: var(--on-surface);
}

/* ── Keyframes ────────────────────────────────────────────── */

@keyframes bwm-fade-in {
    to { opacity: 1; }
}

@keyframes bwm-slide-up {
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes bwm-item-in {
    to { opacity: 1; transform: translateX(0); }
}

/* Globo girando sobre su eje */
@keyframes bwm-globe-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Órbita sentido horario */
@keyframes bwm-orbit-cw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Órbita sentido antihorario */
@keyframes bwm-orbit-ccw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* Contra-rotación para que el icono no gire con el anillo */
@keyframes bwm-counter-cw {
    from { transform: translateX(-50%) rotate(0deg); }
    to   { transform: translateX(-50%) rotate(-360deg); }
}

@keyframes bwm-counter-ccw {
    from { transform: translateX(-50%) rotate(0deg); }
    to   { transform: translateX(-50%) rotate(360deg); }
}

/* ── Dark mode ────────────────────────────────────────────── */

[data-theme="dark"] .bwm-overlay {
    background: rgba(0, 0, 0, 0.72);
}

[data-theme="dark"] .bwm-card {
    background: #2d2d2d;
}

[data-theme="dark"] .bwm-greeting,
[data-theme="dark"] .bwm-feature-title {
    color: #e8eaed;
}

[data-theme="dark"] .bwm-desc,
[data-theme="dark"] .bwm-feature-desc,
[data-theme="dark"] .bwm-btn-skip {
    color: #9aa0a6;
}

[data-theme="dark"] .bwm-feature-icon {
    background: #3c4043;
    color: #8ab4f8;
}

[data-theme="dark"] .bwm-orbit-icon {
    background: rgba(232,234,237,0.88);
}

[data-theme="dark"] .bwm-orbit-icon .material-symbols-outlined {
    color: #1557b0;
}


/* ═══════════════════════════════════════════════════════════════════
   OBW — Onboarding Welcome (full-screen slide wizard)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Overlay ──────────────────────────────────────────────── */

.obw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    animation: obw-fade-in 0.4s ease forwards;
}

/* ── Card ─────────────────────────────────────────────────── */

.obw-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 580px;
    min-height: 520px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.28), 0 6px 20px rgba(0,0,0,0.14);
    transform: translateY(32px) scale(0.96);
    opacity: 0;
    animation: obw-card-in 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.1s forwards;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ── Progress bar (top) ───────────────────────────────────── */

.obw-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--outline-variant);
    z-index: 2;
    overflow: hidden;
    border-radius: 3px 3px 0 0;
}

.obw-progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Slide container ──────────────────────────────────────── */

.obw-slides {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.obw-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    overflow-y: auto;
}

.obw-slide.obw-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
}

.obw-slide.obw-exit-left {
    opacity: 0;
    transform: translateX(-60px);
    pointer-events: none;
}

/* ── Slide header (gradient) ──────────────────────────────── */

.obw-slide-header {
    background: linear-gradient(135deg, #1a73e8 0%, #1557b0 60%, #0d47a1 100%);
    padding: 40px 36px 32px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.obw-slide-header::after {
    content: '';
    position: absolute;
    top: -60%;
    right: -20%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}

.obw-slide-header::before {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

/* ── Hero icon (central animated icon per slide) ──────────── */

.obw-hero-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    box-shadow: 0 0 0 12px rgba(255,255,255,0.06), 0 0 0 24px rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    position: relative;
    z-index: 1;
    animation: obw-hero-pulse 3s ease-in-out infinite;
}

.obw-hero-icon .material-symbols-outlined {
    font-size: 36px;
    color: #fff;
}

/* ── Globe animation (slide 1 reuses bwm pattern) ────────── */

.obw-globe-wrapper {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 18px;
    z-index: 1;
}

.obw-globe-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    box-shadow: 0 0 0 10px rgba(255,255,255,0.06), 0 0 0 20px rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.obw-globe-center .material-symbols-outlined {
    font-size: 30px;
    color: #fff;
    animation: obw-globe-spin 16s linear infinite;
}

.obw-orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,0.22);
    z-index: 1;
}

.obw-orbit-ring--1 {
    width: 88px;
    height: 88px;
    margin: -44px 0 0 -44px;
    animation: obw-orbit-cw 6s linear infinite;
}

.obw-orbit-ring--2 {
    width: 126px;
    height: 126px;
    margin: -63px 0 0 -63px;
    animation: obw-orbit-ccw 10s linear infinite;
}

.obw-orbit-dot {
    position: absolute;
    top: -10px;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.90);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.obw-orbit-ring--1 .obw-orbit-dot {
    animation: obw-counter-cw 6s linear infinite;
}

.obw-orbit-ring--2 .obw-orbit-dot {
    animation: obw-counter-ccw 10s linear infinite;
}

.obw-orbit-dot .material-symbols-outlined {
    font-size: 11px;
    color: #1557b0;
}

/* ── Slide header text ────────────────────────────────────── */

.obw-slide-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 6px;
    position: relative;
    z-index: 1;
}

.obw-slide-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.obw-slide-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.72);
    margin: 0;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

/* ── Slide body ───────────────────────────────────────────── */

.obw-slide-body {
    padding: 28px 36px 20px;
    flex: 1;
}

/* ── Feature grid (slide 2) ───────────────────────────────── */

.obw-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.obw-feature-card {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(16px);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.obw-feature-card:hover {
    border-color: var(--primary);
    box-shadow: var(--elevation-1);
}

.obw-feature-card.obw-animate-in {
    animation: obw-card-fade-up 0.4s ease forwards;
}

.obw-feature-card:nth-child(1).obw-animate-in { animation-delay: 0.1s; }
.obw-feature-card:nth-child(2).obw-animate-in { animation-delay: 0.2s; }
.obw-feature-card:nth-child(3).obw-animate-in { animation-delay: 0.3s; }
.obw-feature-card:nth-child(4).obw-animate-in { animation-delay: 0.4s; }

.obw-feature-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
}

.obw-feature-card-icon .material-symbols-outlined {
    font-size: 20px;
}

.obw-feature-card-icon.obw-icon-blue    { background: var(--primary-surface); color: var(--primary); }
.obw-feature-card-icon.obw-icon-green   { background: var(--success-surface); color: var(--success); }
.obw-feature-card-icon.obw-icon-amber   { background: var(--warning-surface); color: #b45309; }
.obw-feature-card-icon.obw-icon-purple  { background: #f3e8fd; color: #7c3aed; }

.obw-feature-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0;
}

.obw-feature-card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: 1.5;
}

/* ── Email setup (slide 3) ────────────────────────────────── */

.obw-email-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.obw-email-card {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.obw-email-card:hover {
    border-color: var(--primary);
    box-shadow: var(--elevation-1);
}

.obw-email-card.obw-email-active {
    border-color: var(--primary);
    background: var(--primary-surface);
}

.obw-email-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xs);
    background: var(--surface-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.obw-email-card-icon img {
    width: 22px;
    height: 22px;
}

.obw-email-card-text {
    flex: 1;
}

.obw-email-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0 0 3px;
}

.obw-email-card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: 1.45;
}

.obw-email-card-action {
    flex-shrink: 0;
}

.obw-email-card-action .material-symbols-outlined {
    font-size: 20px;
    color: var(--primary);
}

.obw-email-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-xs);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

.obw-email-status.obw-status-connected {
    background: var(--success-surface);
    color: var(--success);
}

.obw-email-status.obw-status-skipped {
    background: var(--surface-dim);
    color: var(--on-surface-variant);
}

.obw-skip-link {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--on-surface-variant);
    text-align: center;
    cursor: pointer;
    padding: 4px;
    border: none;
    background: none;
    transition: color 0.15s ease;
}

.obw-skip-link:hover {
    color: var(--on-surface);
}

/* ── Final slide (slide 4) ────────────────────────────────── */

.obw-final-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 36px;
    flex: 1;
    text-align: center;
}

.obw-final-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--success-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    opacity: 0;
    transform: scale(0.5);
    animation: obw-final-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

.obw-final-icon .material-symbols-outlined {
    font-size: 40px;
    color: var(--success);
}

.obw-final-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: var(--on-surface);
    margin: 0 0 10px;
}

.obw-final-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--on-surface-variant);
    margin: 0 0 32px;
    line-height: 1.6;
    max-width: 380px;
}

.obw-confetti-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.obw-confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
    animation: obw-confetti-fall 2.2s ease forwards;
}

/* ── Footer (nav buttons + dots) ──────────────────────────── */

.obw-footer {
    padding: 16px 36px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--outline-variant);
}

.obw-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.obw-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--outline);
    transition: all 0.3s ease;
    cursor: pointer;
}

.obw-dot.obw-dot-active {
    width: 24px;
    border-radius: 4px;
    background: var(--primary);
}

.obw-dot.obw-dot-done {
    background: var(--primary-surface);
}

.obw-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: var(--radius-full);
    padding: 10px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

.obw-nav-btn:hover {
    transform: translateY(-1px);
}

.obw-nav-btn:active {
    transform: translateY(0);
}

.obw-nav-btn.obw-btn-primary {
    background: var(--primary);
    color: #fff;
}

.obw-nav-btn.obw-btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: var(--elevation-1);
}

.obw-nav-btn.obw-btn-secondary {
    background: transparent;
    color: var(--on-surface-variant);
}

.obw-nav-btn.obw-btn-secondary:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}

.obw-nav-btn.obw-btn-success {
    background: var(--success);
    color: #fff;
}

.obw-nav-btn.obw-btn-success:hover {
    background: #2d9249;
    box-shadow: var(--elevation-1);
}

.obw-nav-btn .material-symbols-outlined {
    font-size: 18px;
}

/* ── Keyframes ────────────────────────────────────────────── */

@keyframes obw-fade-in {
    to { opacity: 1; }
}

@keyframes obw-card-in {
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes obw-hero-pulse {
    0%, 100% { box-shadow: 0 0 0 12px rgba(255,255,255,0.06), 0 0 0 24px rgba(255,255,255,0.03); }
    50%      { box-shadow: 0 0 0 16px rgba(255,255,255,0.10), 0 0 0 32px rgba(255,255,255,0.05); }
}

@keyframes obw-globe-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes obw-orbit-cw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes obw-orbit-ccw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@keyframes obw-counter-cw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@keyframes obw-counter-ccw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes obw-card-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes obw-final-pop {
    to { opacity: 1; transform: scale(1); }
}

@keyframes obw-confetti-fall {
    0%   { opacity: 1; transform: translateY(-20px) rotate(0deg); }
    100% { opacity: 0; transform: translateY(400px) rotate(720deg); }
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 600px) {
    .obw-card {
        max-width: 100%;
        min-height: auto;
        border-radius: var(--radius-sm);
    }

    .obw-slide-header {
        padding: 28px 24px 24px;
    }

    .obw-slide-body {
        padding: 20px 24px 16px;
    }

    .obw-feature-grid {
        grid-template-columns: 1fr;
    }

    .obw-footer {
        padding: 14px 24px 20px;
    }

    .obw-globe-wrapper {
        width: 100px;
        height: 100px;
    }
}

/* ── Dark mode ────────────────────────────────────────────── */

[data-theme="dark"] .obw-overlay {
    background: rgba(0, 0, 0, 0.78);
}

[data-theme="dark"] .obw-card {
    background: #2d2d2d;
    box-shadow: 0 32px 80px rgba(0,0,0,0.50);
}

[data-theme="dark"] .obw-progress {
    background: #3c4043;
}

[data-theme="dark"] .obw-feature-card {
    border-color: #3c4043;
    background: #353535;
}

[data-theme="dark"] .obw-feature-card:hover {
    border-color: #8ab4f8;
}

[data-theme="dark"] .obw-feature-card-title,
[data-theme="dark"] .obw-final-title {
    color: #e8eaed;
}

[data-theme="dark"] .obw-feature-card-desc,
[data-theme="dark"] .obw-final-desc,
[data-theme="dark"] .obw-email-card-desc,
[data-theme="dark"] .obw-skip-link {
    color: #9aa0a6;
}

[data-theme="dark"] .obw-feature-card-icon.obw-icon-blue    { background: #1e3a5f; color: #8ab4f8; }
[data-theme="dark"] .obw-feature-card-icon.obw-icon-green   { background: #1e3a2f; color: #81c995; }
[data-theme="dark"] .obw-feature-card-icon.obw-icon-amber   { background: #3a2e1e; color: #fdd663; }
[data-theme="dark"] .obw-feature-card-icon.obw-icon-purple  { background: #2e1e3a; color: #c4b5fd; }

[data-theme="dark"] .obw-email-card {
    border-color: #3c4043;
    background: #353535;
}

[data-theme="dark"] .obw-email-card:hover {
    border-color: #8ab4f8;
}

[data-theme="dark"] .obw-email-card.obw-email-active {
    border-color: #8ab4f8;
    background: #1e3a5f;
}

[data-theme="dark"] .obw-email-card-icon {
    background: #3c4043;
}

[data-theme="dark"] .obw-email-card-title {
    color: #e8eaed;
}

[data-theme="dark"] .obw-dot {
    background: #5f6368;
}

[data-theme="dark"] .obw-dot.obw-dot-active {
    background: #8ab4f8;
}

[data-theme="dark"] .obw-dot.obw-dot-done {
    background: #1e3a5f;
}

[data-theme="dark"] .obw-footer {
    border-top-color: #3c4043;
}

[data-theme="dark"] .obw-final-icon {
    background: #1e3a2f;
}

[data-theme="dark"] .obw-final-icon .material-symbols-outlined {
    color: #81c995;
}

[data-theme="dark"] .obw-nav-btn.obw-btn-secondary {
    color: #9aa0a6;
}

[data-theme="dark"] .obw-nav-btn.obw-btn-secondary:hover {
    background: #3c4043;
    color: #e8eaed;
}

/* ─── WelcomeWorkspace (welcome-workspace) ────────────────────────────────── */

.ws-root {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 48px 24px 24px;
    gap: 40px;
    background: var(--surface-dim);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ws-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 520px;
    width: 100%;
    margin: auto 0;
}

.ws-greeting {
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--on-surface);
    margin: 0;
    letter-spacing: -0.2px;
}

.ws-name {
    background: linear-gradient(100deg, #1a73e8 0%, #7c3aed 45%, #ea4335 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
    animation: ws-name-shimmer 4.5s ease-in-out infinite;
}

@keyframes ws-name-shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.ws-date {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--on-surface-variant);
    margin: 6px 0 0;
}

.ws-icon-tile {
    position: relative;
    margin-top: 44px;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    background: var(--primary-surface);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--outline-variant);
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ws-icon-tile:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--elevation-2);
}

.ws-icon-tile:active {
    transform: scale(0.96);
}

.ws-icon-glyph {
    font-size: 28px;
    transition: transform 0.3s ease;
}

.ws-icon-tile:hover .ws-icon-glyph {
    transform: rotate(-8deg) scale(1.08);
}

.ws-icon-pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.55);
}

.ws-icon-invite .ws-icon-pulse {
    animation: ws-icon-pulse-kf 1.9s ease-out infinite;
}

@keyframes ws-icon-pulse-kf {
    0%   { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.45); }
    70%  { box-shadow: 0 0 0 14px rgba(26, 115, 232, 0); }
    100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
}

.ws-icon-hint {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--on-surface);
    color: var(--surface);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.ws-icon-hint .material-symbols-outlined {
    font-size: 13px;
}

.ws-icon-hint::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--on-surface);
}

.ws-icon-invite .ws-icon-hint {
    opacity: 1;
    animation: ws-icon-hint-bob 1.6s ease-in-out infinite;
}

@keyframes ws-icon-hint-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-5px); }
}

.ws-icon-pop {
    animation: ws-icon-pop-kf 0.35s ease;
}

@keyframes ws-icon-pop-kf {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.9); }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.ws-quote-stage {
    position: relative;
    margin: 28px auto 0;
    max-width: 480px;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-quote {
    margin: 0;
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: italic;
    background: linear-gradient(100deg, #1a73e8 0%, #7c3aed 50%, #ea4335 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1.5;
    text-align: center;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: none;
}

.ws-quote.ws-quote-show {
    animation: ws-quote-reveal 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.2) forwards,
               ws-name-shimmer 4s ease-in-out infinite 0.9s;
}

@keyframes ws-quote-reveal {
    0%   { opacity: 0; transform: translateY(14px) scale(0.9);  filter: blur(4px); }
    40%  { opacity: 1; transform: translateY(-3px) scale(1.04); filter: blur(0);   }
    70%  {            transform: translateY(1px)  scale(0.99);                    }
    100% { opacity: 1; transform: translateY(0)   scale(1);                        }
}

.ws-quote-spark {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #7c3aed 0%, #1a73e8 60%, rgba(26,115,232,0) 70%);
    opacity: 0;
    pointer-events: none;
    top: 50%;
    left: 50%;
}

.ws-quote-burst .ws-quote-spark {
    animation: ws-spark-kf 0.85s ease-out forwards;
}

.ws-quote-burst .ws-quote-spark:nth-child(2) { --sx:  90px; --sy: -30px; background: radial-gradient(circle, #ea4335 0%, #f9ab00 60%, rgba(234,67,53,0) 70%); animation-delay: 0.02s; }
.ws-quote-burst .ws-quote-spark:nth-child(3) { --sx:  60px; --sy:  40px; background: radial-gradient(circle, #34a853 0%, #1a73e8 60%, rgba(52,168,83,0) 70%); animation-delay: 0.05s; }
.ws-quote-burst .ws-quote-spark:nth-child(4) { --sx: -70px; --sy: -40px; background: radial-gradient(circle, #7c3aed 0%, #1a73e8 60%, rgba(124,58,237,0) 70%); animation-delay: 0.08s; }
.ws-quote-burst .ws-quote-spark:nth-child(5) { --sx: -90px; --sy:  30px; background: radial-gradient(circle, #f9ab00 0%, #ea4335 60%, rgba(249,171,0,0) 70%); animation-delay: 0.04s; }
.ws-quote-burst .ws-quote-spark:nth-child(6) { --sx:  20px; --sy: -60px; background: radial-gradient(circle, #1a73e8 0%, #7c3aed 60%, rgba(26,115,232,0) 70%); animation-delay: 0.1s;  }
.ws-quote-burst .ws-quote-spark:nth-child(7) { --sx: -20px; --sy:  60px; background: radial-gradient(circle, #ea4335 0%, #7c3aed 60%, rgba(234,67,53,0) 70%); animation-delay: 0.06s; }

@keyframes ws-spark-kf {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    25%  { opacity: 1; transform: translate(calc(-50% + var(--sx, 40px) * 0.5), calc(-50% + var(--sy, 0px) * 0.5)) scale(1.4); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--sx, 40px)),       calc(-50% + var(--sy, 0px)))       scale(0.2); }
}

.ws-hint-link {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--primary);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.2s ease;
}

.ws-hint-link:hover {
    background: var(--primary-surface);
}

.ws-hint-link .material-symbols-outlined {
    font-size: 18px;
}

.ws-tips-toggle {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--outline);
    color: var(--on-surface);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ws-tips-toggle:hover {
    background: var(--surface-container);
    border-color: var(--primary);
}

.ws-tips-toggle .material-symbols-outlined {
    font-size: 18px;
    color: var(--primary);
}

.ws-tips-toggle-caret {
    transition: transform 0.2s ease;
}

.ws-tips-toggle[aria-expanded="true"] .ws-tips-toggle-caret {
    color: var(--on-surface-variant);
}

.ws-tips-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 4px;
    scrollbar-width: thin;
    max-height: 260px;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease, margin 0.3s ease;
}

.ws-tips-viewport.ws-tips-hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    pointer-events: none;
    overflow: hidden;
}

.ws-tips-viewport::-webkit-scrollbar {
    height: 6px;
}

.ws-tips-viewport::-webkit-scrollbar-thumb {
    background: var(--outline);
    border-radius: var(--radius-full);
}

.ws-tips-track {
    display: flex;
    gap: 16px;
    padding: 4px 48px;
    min-width: min-content;
}

.ws-tip {
    flex: 0 0 260px;
    scroll-snap-align: center;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ws-tip:hover {
    border-color: var(--primary);
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.ws-tip-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--on-surface-variant);
}

.ws-tip-badge .material-symbols-outlined {
    font-size: 16px;
}

.ws-tip-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0;
    line-height: 1.35;
}

.ws-tip-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.ws-tip-path {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--primary);
    line-height: 1.4;
}

.ws-tip-arrow {
    font-size: 18px;
    color: var(--primary);
    transition: transform 0.2s ease;
}

.ws-tip:hover .ws-tip-arrow {
    transform: translateX(2px);
}

@keyframes ws-flash-kf {
    0%, 100% { box-shadow: none; }
    50%      { box-shadow: inset 0 0 0 2px var(--primary); }
}

.ws-flash {
    animation: ws-flash-kf 0.9s ease;
}

/* ─── Orquestación de bienvenida: dirigir la atención al menú lateral ─── */

@keyframes ws-hero-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ws-hero > * {
    opacity: 0;
    animation: ws-hero-fade-up 0.55s ease forwards;
}
.ws-hero > *:nth-child(1) { animation-delay: 0.15s; }
.ws-hero > *:nth-child(2) { animation-delay: 0.30s; }
.ws-hero > *:nth-child(3) { animation-delay: 0.45s; }
.ws-hero > *:nth-child(4) { animation-delay: 0.60s; }
.ws-hero > *:nth-child(5) { animation-delay: 0.75s; }
.ws-hero > *:nth-child(6) { animation-delay: 0.90s; }

/* Foco radial temporal sobre el hero para darle más peso visual */
.ws-root { position: relative; }
.ws-root > * { position: relative; z-index: 1; }
.ws-root.ws-root-focused::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 48% at center, var(--primary-surface), transparent 70%);
    opacity: 0;
    animation: ws-root-focus-kf 2.1s ease forwards;
    z-index: 0;
}
@keyframes ws-root-focus-kf {
    0%   { opacity: 0; }
    45%  { opacity: 0.55; }
    100% { opacity: 0; }
}

/* Saludo central con scale-pop: más grande y contrastado en la entrada */
@keyframes ws-greeting-pop-kf {
    0%   { opacity: 0; transform: translateY(14px) scale(0.94); }
    55%  { opacity: 1; transform: translateY(0)    scale(1.06); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    }
}
.ws-hero > h1.ws-greeting {
    animation: ws-greeting-pop-kf 0.95s cubic-bezier(0.25, 0.9, 0.3, 1.18) forwards;
    animation-delay: 0.15s;
}

@keyframes ws-arrow-bob-intro {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-6px); }
}

.ws-hint-link.ws-arrow-intro .material-symbols-outlined {
    animation: ws-arrow-bob-intro 1.2s ease-in-out 3;
}

@keyframes ws-sidemenu-ring {
    0%, 100% { box-shadow: inset -3px 0 0 0 transparent; }
    50%      { box-shadow: inset -3px 0 0 0 var(--primary); }
}

.b2b-nav.ws-sidemenu-attract {
    animation: ws-sidemenu-ring 1.4s ease-in-out 3;
}

@keyframes ws-section-glow {
    0%, 100% { color: var(--on-surface-variant); }
    50%      { color: var(--primary); }
}

.b2b-nav.ws-sidemenu-attract .nav-section-label {
    animation: ws-section-glow 1.4s ease-in-out 3;
}

/* Secuencia: el sidemenu queda oculto durante la intro del hero y entra
   con un slide+rebote llamativo cuando el hero ya se asentó. */

.b2b-nav.ws-sidemenu-pre {
    opacity: 0;
    transform: translateX(-32px);
    pointer-events: none;
}

@keyframes ws-sidemenu-reveal-kf {
    0%   { opacity: 0; transform: translateX(-32px); }
    65%  { opacity: 1; transform: translateX(6px);   }
    100% { opacity: 1; transform: translateX(0);     }
}

.b2b-nav.ws-sidemenu-reveal {
    animation: ws-sidemenu-reveal-kf 0.75s cubic-bezier(0.22, 0.9, 0.25, 1.15) forwards;
}

/* Scan vertical luminoso que recorre el sidemenu al entrar para forzar la mirada */
.b2b-nav.ws-sidemenu-spotlight { position: relative; }
.b2b-nav.ws-sidemenu-spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(26,115,232,0)    0%,
        rgba(26,115,232,0.18) 45%,
        rgba(26,115,232,0.34) 50%,
        rgba(26,115,232,0.18) 55%,
        rgba(26,115,232,0)    100%
    );
    background-size: 100% 260%;
    animation: ws-sidemenu-scan-kf 1.2s ease forwards;
    z-index: 5;
}
@keyframes ws-sidemenu-scan-kf {
    0%   { background-position: 50% 120%; opacity: 0; }
    15%  { opacity: 1; }
    100% { background-position: 50% -80%; opacity: 0; }
}

/* Tint de entrada: el sidemenu aparece con fondo primario y borde fuerte,
   luego vuelve a su color base. Funciona en light y dark porque usa tokens. */
@keyframes ws-sidemenu-tint-kf {
    0%   { background-color: var(--primary-surface); border-right-color: var(--primary); }
    70%  { background-color: var(--primary-surface); border-right-color: var(--primary); }
    100% { background-color: var(--surface);         border-right-color: var(--outline); }
}

.b2b-nav.ws-sidemenu-tint {
    animation: ws-sidemenu-tint-kf 1.6s ease forwards;
}

@media (max-width: 800px) {
    .ws-root { padding: 32px 16px 16px; gap: 28px; }
    .ws-greeting { font-size: 22px; }
    .ws-tips-track { padding: 4px 20px; }
    .ws-tip { flex-basis: 220px; }
    .ws-favs-panel { width: 100%; }
}

/* ─── Quote author & favorite heart ─────────────────────────────────────── */

.ws-quote-author {
    margin: 8px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--on-surface-variant);
    text-align: center;
    letter-spacing: 0.1px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s;
}

.ws-quote-author.ws-quote-show {
    opacity: 1;
    transform: translateY(0);
}

.ws-quote-fav {
    margin-top: 14px;
    background: transparent;
    border: 1px solid var(--outline);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--on-surface-variant);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ws-quote-fav:hover {
    background: var(--error-surface);
    color: var(--error);
    border-color: var(--error);
    transform: translateY(-1px);
}

.ws-quote-fav .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 0;
    transition: font-variation-settings 0.2s ease;
}

.ws-quote-fav-on {
    background: var(--error-surface);
    color: var(--error);
    border-color: var(--error);
}

.ws-quote-fav-on .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.ws-quote-fav-bump {
    animation: ws-fav-bump-kf 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.4);
}

@keyframes ws-fav-bump-kf {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    70%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

/* ─── Name sparkle trail ─────────────────────────────────────────────────── */

.ws-name {
    cursor: default;
}

.ws-name-sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    animation: ws-name-sparkle-kf 780ms ease-out forwards;
    filter: drop-shadow(0 0 4px currentColor);
}

.ws-name-sparkle svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes ws-name-sparkle-kf {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
    20%  { opacity: 1; transform: translate(calc(-50% + var(--ws-sparkle-drift, 0) * 0.2), calc(-50% - 6px))  scale(1.1) rotate(40deg); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--ws-sparkle-drift, 0)), calc(-50% - 32px))       scale(0.3) rotate(140deg); }
}

/* ─── Favorites trigger ──────────────────────────────────────────────────── */

.ws-favs-trigger {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    color: var(--on-surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-full);
    padding: 6px 14px 6px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    z-index: 5;
}

.ws-favs-trigger:hover {
    background: var(--surface-container);
    border-color: var(--primary);
    box-shadow: var(--elevation-2);
}

.ws-favs-trigger .material-symbols-outlined {
    font-size: 18px;
    color: var(--primary);
}

.ws-favs-count {
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ─── Favorites drawer ───────────────────────────────────────────────────── */

.ws-favs-drawer {
    position: fixed;
    inset: 0;
    z-index: 1050;
    pointer-events: none;
    visibility: hidden;
}

.ws-favs-drawer-open {
    pointer-events: auto;
    visibility: visible;
}

.ws-favs-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 33, 36, 0);
    transition: background 0.3s ease;
}

.ws-favs-drawer-open .ws-favs-backdrop {
    background: rgba(32, 33, 36, 0.45);
}

.ws-favs-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 420px;
    max-width: 92vw;
    background: var(--surface);
    border-left: 1px solid var(--outline);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ws-favs-drawer-open .ws-favs-panel {
    transform: translateX(0);
}

.ws-favs-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--outline-variant);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ws-favs-title {
    margin: 0;
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--on-surface);
}

.ws-favs-subtitle {
    margin: 2px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--on-surface-variant);
}

.ws-favs-close {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--on-surface-variant);
    transition: background 0.2s ease;
}

.ws-favs-close:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}

.ws-favs-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ws-fav-item {
    background: var(--surface-dim);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ws-fav-item:hover {
    border-color: var(--outline);
    box-shadow: var(--elevation-1);
}

.ws-fav-text {
    margin: 0;
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-style: italic;
    color: var(--on-surface);
    line-height: 1.5;
}

.ws-fav-author {
    margin: 6px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--on-surface-variant);
    letter-spacing: 0.1px;
}

.ws-fav-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ws-fav-date {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--on-surface-variant);
}

.ws-fav-remove {
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--on-surface-variant);
    transition: background 0.2s ease, color 0.2s ease;
}

.ws-fav-remove:hover {
    background: var(--error-surface);
    color: var(--error);
}

.ws-fav-remove .material-symbols-outlined {
    font-size: 18px;
}

.ws-favs-empty {
    margin: auto;
    text-align: center;
    color: var(--on-surface-variant);
    padding: 48px 16px;
}

.ws-favs-empty .material-symbols-outlined {
    font-size: 40px;
    color: var(--outline);
    margin-bottom: 12px;
    display: block;
}

.ws-favs-empty p {
    margin: 4px 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--on-surface);
}

.ws-favs-empty-hint {
    font-weight: 400 !important;
    color: var(--on-surface-variant) !important;
    font-size: 12px !important;
    max-width: 260px;
    margin: 6px auto 0 !important;
}

/* ─── WellnessReminderChip (wellness-reminder-chip) ─────────────────────── */

.wrc-chip {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 320px;
    max-width: calc(100vw - 40px);
    padding: 12px 12px 12px 16px;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    box-shadow: var(--elevation-2);
    overflow: hidden;
    transform: translateX(calc(100% + 32px));
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
    pointer-events: none;
}

.wrc-chip-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.wrc-emoji {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.wrc-text {
    flex: 1;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--on-surface);
    line-height: 1.4;
}

.wrc-close {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--on-surface-variant);
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.wrc-close:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}

.wrc-close .material-symbols-outlined {
    font-size: 18px;
}

.wrc-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--primary), var(--info));
    transform-origin: left center;
}

@keyframes wrc-bar-shrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (max-width: 600px) {
    .wrc-chip {
        left: 16px;
        right: 16px;
        width: auto;
        bottom: 16px;
    }
}

[data-theme="dark"] .wrc-bar {
    background: linear-gradient(90deg, #8ab4f8, #aecbfa);
}

/* TODO REMOVE: test trigger button — remove these styles once validated */
.wrc-test-trigger {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1099;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--warning-surface);
    border: 1px dashed var(--warning);
    color: #b45309;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--elevation-1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wrc-test-trigger:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}

.wrc-test-trigger .material-symbols-outlined {
    font-size: 22px;
}

/* ─── Corporate reveal — "Frase del día" ─────────────────────────────────── */

.ws-epic-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
}

.ws-epic-overlay[hidden] { display: none; }

.ws-epic-overlay.ws-epic-open { pointer-events: auto; }

/* Backdrop: neutro profesional con desenfoque */
.ws-epic-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center,
            rgba(20, 28, 52, 0.38) 0%,
            rgba(10, 16, 34, 0.68) 60%,
            rgba(6, 10, 24, 0.82) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    opacity: 0;
    transition: opacity 0.45s ease;
    cursor: pointer;
}

.ws-epic-overlay.ws-epic-open .ws-epic-backdrop { opacity: 1; }

/* Halo primario detrás de la tarjeta — "respira" suavemente */
.ws-epic-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 760px;
    height: 760px;
    transform: translate(-50%, -50%) scale(0.7);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(26, 115, 232, 0.32) 0%,
        rgba(124, 58, 237, 0.18) 38%,
        rgba(10, 16, 34, 0)      72%);
    mix-blend-mode: screen;
    filter: blur(24px);
    opacity: 0;
    pointer-events: none;
}

.ws-epic-overlay.ws-epic-open .ws-epic-glow {
    animation:
        ws-epic-glow-in 1.2s cubic-bezier(0.2, 0.9, 0.25, 1) forwards 0.1s,
        ws-epic-glow-pulse 6s ease-in-out infinite 1.3s;
}

@keyframes ws-epic-glow-in {
    0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
    100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1);   }
}

@keyframes ws-epic-glow-pulse {
    0%, 100% { opacity: 0.82; transform: translate(-50%, -50%) scale(1);    }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.04); }
}

/* Destellos alrededor de la tarjeta — discretos */
.ws-epic-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ws-epic-star {
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 5px currentColor);
}

.ws-epic-star svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ws-epic-overlay.ws-epic-open .ws-epic-star {
    animation-name: ws-epic-star-twinkle;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes ws-epic-star-twinkle {
    0%, 100% { opacity: 0;    transform: translate(-50%, -50%) scale(0.35) rotate(0deg);   }
    45%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1)    rotate(20deg);  }
    60%      { opacity: 0.6;  transform: translate(-50%, -50%) scale(0.9)  rotate(30deg);  }
}

/* Tarjeta principal — superficie limpia, ejecutiva */
.ws-epic-stage {
    position: relative;
    width: min(620px, 90vw);
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    box-shadow:
        0 30px 70px -15px rgba(6, 10, 24, 0.55),
        0 12px 30px -10px rgba(26, 115, 232, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.94) translateY(10px);
    filter: blur(8px);
    z-index: 1;
}

.ws-epic-overlay.ws-epic-open .ws-epic-stage {
    animation: ws-epic-stage-in 0.85s cubic-bezier(0.2, 0.9, 0.25, 1.15) forwards 0.18s;
}

@keyframes ws-epic-stage-in {
    0%   { opacity: 0; transform: scale(0.92) translateY(14px); filter: blur(8px); }
    65%  { opacity: 1; transform: scale(1.01) translateY(-2px); filter: blur(0);   }
    100% { opacity: 1; transform: scale(1)    translateY(0);    filter: blur(0);   }
}

/* Barra superior — gradiente corporativo animado */
.ws-epic-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        #1a73e8 0%,
        #7c3aed 35%,
        #f9ab00 65%,
        #1a73e8 100%);
    background-size: 220% 100%;
    z-index: 3;
    opacity: 0;
    transform-origin: left center;
}

.ws-epic-overlay.ws-epic-open .ws-epic-bar {
    animation:
        ws-epic-bar-in     0.5s ease forwards 0.3s,
        ws-epic-bar-shimmer 6s linear infinite 0.8s;
}

@keyframes ws-epic-bar-in {
    0%   { opacity: 0; transform: scaleX(0); }
    100% { opacity: 1; transform: scaleX(1); }
}

@keyframes ws-epic-bar-shimmer {
    0%   { background-position: 0% 50%;   }
    100% { background-position: 220% 50%; }
}

/* Shine sweep — pasa una vez como "pulido" */
.ws-epic-shine {
    position: absolute;
    top: 0;
    left: -40%;
    width: 35%;
    height: 100%;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.0)  30%,
        rgba(26, 115, 232, 0.10)  50%,
        rgba(255, 255, 255, 0.0)  70%,
        transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
    z-index: 2;
}

.ws-epic-overlay.ws-epic-open .ws-epic-shine {
    animation: ws-epic-shine-sweep 1.8s cubic-bezier(0.2, 0.7, 0.3, 1) forwards 0.95s;
}

@keyframes ws-epic-shine-sweep {
    0%   { left: -40%; opacity: 0; }
    25%  { opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

/* Contenido de la tarjeta */
.ws-epic-content {
    position: relative;
    padding: 52px 56px 40px;
    text-align: center;
    z-index: 4;
}

/* Badge "Frase del día" */
.ws-epic-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: var(--primary-surface);
    color: var(--primary);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(-6px);
}

.ws-epic-overlay.ws-epic-open .ws-epic-badge {
    animation: ws-epic-fade-down 0.55s ease forwards 0.5s;
}

@keyframes ws-epic-fade-down {
    0%   { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.ws-epic-badge .material-symbols-outlined {
    font-size: 13px;
    color: var(--primary);
}

/* Comilla decorativa — marca de agua */
.ws-epic-quote-mark {
    position: absolute;
    top: 24px;
    left: 32px;
    font-family: 'Google Sans', Georgia, serif;
    font-size: 140px;
    line-height: 0.8;
    color: var(--primary-surface);
    user-select: none;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.7) rotate(-6deg);
    z-index: 0;
}

.ws-epic-overlay.ws-epic-open .ws-epic-quote-mark {
    animation: ws-epic-mark-in 0.85s cubic-bezier(0.2, 0.9, 0.25, 1.2) forwards 0.55s;
}

@keyframes ws-epic-mark-in {
    0%   { opacity: 0; transform: scale(0.6) rotate(-12deg); }
    100% { opacity: 1; transform: scale(1)   rotate(0deg);   }
}

/* Cita principal */
.ws-epic-quote {
    position: relative;
    margin: 0;
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 500;
    line-height: 1.5;
    color: var(--on-surface);
    letter-spacing: -0.1px;
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
    z-index: 2;
}

.ws-epic-overlay.ws-epic-open .ws-epic-quote {
    animation: ws-epic-quote-in 0.85s cubic-bezier(0.2, 0.9, 0.25, 1.15) forwards 0.7s;
}

@keyframes ws-epic-quote-in {
    0%   { opacity: 0; transform: translateY(14px); filter: blur(4px); }
    60%  { opacity: 1; transform: translateY(-2px); filter: blur(0);   }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

/* Divisor animado */
.ws-epic-divider {
    width: 0;
    height: 1px;
    margin: 28px auto 20px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--primary) 50%,
        transparent 100%);
    z-index: 2;
    position: relative;
    opacity: 0;
}

.ws-epic-overlay.ws-epic-open .ws-epic-divider {
    animation: ws-epic-divider-draw 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) forwards 1s;
}

@keyframes ws-epic-divider-draw {
    0%   { width: 0;     opacity: 0;   }
    30%  { opacity: 0.4; }
    100% { width: 140px; opacity: 1;   }
}

/* Autor */
.ws-epic-author {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--on-surface-variant);
    letter-spacing: 0.3px;
    opacity: 0;
    transform: translateY(8px);
    position: relative;
    z-index: 2;
}

.ws-epic-overlay.ws-epic-open .ws-epic-author {
    animation: ws-epic-fade-up 0.6s ease forwards 1.15s;
}

@keyframes ws-epic-fade-up {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Acciones al pie */
.ws-epic-actions {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    position: relative;
    z-index: 2;
}

.ws-epic-overlay.ws-epic-open .ws-epic-actions {
    animation: ws-epic-fade-up 0.6s ease forwards 1.3s;
}

.ws-epic-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ws-epic-btn .material-symbols-outlined { font-size: 16px; }

.ws-epic-fav {
    background: var(--primary-surface);
    color: var(--primary);
    border-color: transparent;
}

.ws-epic-fav:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.ws-epic-fav.ws-epic-fav-on {
    background: var(--error-surface);
    color: var(--error);
}

.ws-epic-fav.ws-epic-fav-on .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
    color: var(--error);
}

.ws-epic-fav-bump {
    animation: ws-epic-fav-bump-kf 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.4);
}

@keyframes ws-epic-fav-bump-kf {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.16) translateY(-2px); }
    70%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}

.ws-epic-close {
    background: transparent;
    color: var(--on-surface-variant);
    border-color: var(--outline);
}

.ws-epic-close:hover {
    background: var(--surface-container);
    color: var(--on-surface);
    transform: translateY(-1px);
}

/* Salida */
.ws-epic-overlay.ws-epic-closing { pointer-events: none; }

.ws-epic-overlay.ws-epic-closing .ws-epic-backdrop,
.ws-epic-overlay.ws-epic-closing .ws-epic-glow,
.ws-epic-overlay.ws-epic-closing .ws-epic-stars {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.ws-epic-overlay.ws-epic-closing .ws-epic-stage {
    animation: ws-epic-stage-out 0.38s ease forwards;
}

@keyframes ws-epic-stage-out {
    0%   { opacity: 1; transform: scale(1)    translateY(0);   filter: blur(0);   }
    100% { opacity: 0; transform: scale(0.96) translateY(4px); filter: blur(6px); }
}

/* Dark mode — ajustes de la tarjeta */
[data-theme="dark"] .ws-epic-stage {
    background: #171a22;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 30px 70px -15px rgba(0, 0, 0, 0.8),
        0 12px 30px -10px rgba(26, 115, 232, 0.35);
}

[data-theme="dark"] .ws-epic-quote-mark {
    color: rgba(138, 180, 248, 0.12);
}

/* Responsive */
@media (max-width: 720px) {
    .ws-epic-content    { padding: 40px 28px 32px; }
    .ws-epic-quote-mark { top: 8px; left: 14px; font-size: 110px; }
    .ws-epic-badge      { margin-bottom: 22px; }
    .ws-epic-quote      { font-size: clamp(18px, 5vw, 22px); }
    .ws-epic-actions    { margin-top: 28px; padding-top: 18px; gap: 8px; }
    .ws-epic-btn        { padding: 9px 16px; font-size: 12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ws-epic-overlay.ws-epic-open .ws-epic-glow,
    .ws-epic-overlay.ws-epic-open .ws-epic-star,
    .ws-epic-overlay.ws-epic-open .ws-epic-bar,
    .ws-epic-overlay.ws-epic-open .ws-epic-shine {
        animation: none !important;
        opacity: 0.4;
    }
    .ws-epic-overlay.ws-epic-open .ws-epic-stage,
    .ws-epic-overlay.ws-epic-open .ws-epic-badge,
    .ws-epic-overlay.ws-epic-open .ws-epic-quote,
    .ws-epic-overlay.ws-epic-open .ws-epic-quote-mark,
    .ws-epic-overlay.ws-epic-open .ws-epic-author,
    .ws-epic-overlay.ws-epic-open .ws-epic-actions {
        animation: none !important;
        opacity: 1;
        transform: none;
        filter: none;
    }
    .ws-epic-overlay.ws-epic-open .ws-epic-divider {
        animation: none !important;
        opacity: 1;
        width: 140px;
    }
}