/* ============================================================================
   FINAL OVERRIDE v13.0 — 26 Abril 2026
   ----------------------------------------------------------------------------
   ÚLTIMO archivo CSS que se carga: tiene la palabra final.
   Resuelve definitivamente:
   1. Hero CENTRADO + JUSTIFICADO premium
   2. Menú frozen-nav SIEMPRE arriba (top:0) congelado
   3. Top header oculto al hacer scroll → menú sube a top:0
   4. Login admin: campo grande, profesional
   5. Acordeones limpios premium
   6. Paleta global oro/marino consistente
   ========================================================================= */

/* ============== VARIABLES GLOBALES OVERRIDE ============== */
:root {
    --gold: #D4AF37;
    --gold-soft: #E8C766;
    --gold-deep: #A6862C;
    --navy: #0A1628;
    --navy-light: #142540;
    --navy-deep: #050B17;
    --cobalt: #1E40AF;
    --carbon: #0F1419;
    --ivory: #F5F1E8;
    --text-primary: #F5F1E8;
    --text-secondary: rgba(245,241,232,.78);
    --text-muted: rgba(245,241,232,.55);
    --gold-grad: linear-gradient(135deg, #E8C766 0%, #D4AF37 50%, #A6862C 100%);
    --premium-shadow: 0 20px 60px -15px rgba(0,0,0,.65);
    --gold-glow: 0 0 32px rgba(212,175,55,.35);
}

html, body {
    background: #050B17 !important;
    color: var(--text-primary) !important;
    overflow-x: hidden;
}

body {
    background:
        radial-gradient(ellipse at top left, rgba(30,64,175,.12) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(212,175,55,.08) 0%, transparent 55%),
        #050B17 !important;
    min-height: 100vh;
}

/* ============================================================
   1. TOP HEADER — 64px, se oculta al scroll para liberar el menú
   ============================================================ */
#topHeader,
.top-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    z-index: 1000 !important;
    background: linear-gradient(180deg, rgba(5,11,23,.96) 0%, rgba(10,22,40,.92) 100%) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border-bottom: 1px solid rgba(212,175,55,.18) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.4) !important;
    transform: translateY(0) !important;
    transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .35s ease !important;
    opacity: 1 !important;
    display: block !important;
}

#topHeader.scrolled,
#topHeader.hidden,
.top-header.scrolled,
.top-header.hidden {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.header-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    height: 64px !important;
    padding: 0 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.header-brand { display:flex !important; align-items:center !important; gap:14px !important; }
.header-logo-big, .header-avatar {
    width: 44px !important; height: 44px !important;
    border-radius: 50% !important; object-fit: cover !important;
    border: 2px solid var(--gold) !important;
    box-shadow: 0 0 18px rgba(212,175,55,.45) !important;
}
.header-name {
    font-family: 'Sora', sans-serif !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: var(--ivory) !important; margin: 0 !important; line-height: 1.1 !important;
}
.header-title {
    font-size: 11px !important; color: var(--gold-soft) !important;
    letter-spacing: .12em !important; text-transform: uppercase !important;
}

.header-actions { display:flex !important; align-items:center !important; gap:10px !important; }
.theme-toggle-btn, .header-admin-btn {
    width: 40px !important; height: 40px !important;
    display: inline-flex !important; align-items:center !important; justify-content:center !important;
    background: rgba(212,175,55,.12) !important;
    border: 1px solid rgba(212,175,55,.28) !important;
    color: var(--gold-soft) !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: all .25s ease !important;
}
.theme-toggle-btn:hover, .header-admin-btn:hover {
    background: var(--gold) !important; color: var(--navy-deep) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   2. MENÚ FROZEN-NAV — debajo del header (top:64), y al scroll sube a top:0
   ============================================================ */
#frozenNav,
.frozen-nav,
.frozen-nav.frozen-nav-large {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    display: block !important;
    height: 64px !important;
    background: linear-gradient(180deg, rgba(10,22,40,.97) 0%, rgba(5,11,23,.95) 100%) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
    border-top: 1px solid rgba(212,175,55,.12) !important;
    border-bottom: 1px solid rgba(212,175,55,.22) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.45) !important;
    transform: none !important;
    transition: top .45s cubic-bezier(.4,0,.2,1), background .3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Cuando el header se oculta (scroll), el menú sube a top:0 */
body.scrolled #frozenNav,
body.scrolled .frozen-nav,
.frozen-nav.nav-on-top,
#frozenNav.nav-on-top {
    top: 0 !important;
    box-shadow: 0 10px 38px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,55,.18) !important;
}

.frozen-nav-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    height: 64px !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

.fnav-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-secondary) !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all .25s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.fnav-btn i { font-size: 14px !important; color: var(--gold-soft) !important; }
.fnav-btn:hover {
    background: rgba(212,175,55,.12) !important;
    color: var(--ivory) !important;
    border-color: rgba(212,175,55,.32) !important;
    transform: translateY(-2px) !important;
}
.fnav-btn.active {
    background: var(--gold-grad) !important;
    color: var(--navy-deep) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 6px 18px rgba(212,175,55,.38) !important;
}
.fnav-btn.active i { color: var(--navy-deep) !important; }

.fnav-btn.fnav-music {
    background: linear-gradient(135deg, rgba(30,64,175,.35), rgba(212,175,55,.25)) !important;
    border-color: rgba(212,175,55,.32) !important;
    color: var(--gold-soft) !important;
}

@media (max-width: 1100px) {
    .fnav-btn { padding: 9px 12px !important; font-size: 12.5px !important; }
    .fnav-btn span { display: none !important; }
    .fnav-btn i { font-size: 16px !important; }
}
@media (max-width: 640px) {
    .frozen-nav-inner { padding: 0 12px !important; gap: 4px !important; justify-content: flex-start !important; }
}

/* mainApp con padding-top suficiente (header 64 + nav 64 = 128) */
#mainApp, .main-app {
    padding-top: 128px !important;  /* dejar espacio para header + nav */
    display: block !important;
}

/* ============================================================
   3. HERO ELIMINADO — la bienvenida vive en welcome.html
   ============================================================ */
#heroScreen, .hero-screen, .hero-fullbleed { display: none !important; }

/* Patrón decorativo de fondo */
#heroScreen::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(212,175,55,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,175,55,.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
    animation: gridFloat 20s linear infinite;
}
@keyframes gridFloat { 0%{transform:translate(0,0)} 100%{transform:translate(60px,60px)} }

#heroScreen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(5,11,23,.65) 90%);
    pointer-events: none;
    z-index: 1;
}

.hero-image-wrap {
    display: none !important;  /* ocultamos el wrap antiguo, usamos hero-fullbleed-content */
}

.hero-fullbleed-overlay { display: none !important; }
.hero-scroll-indicator { display: none !important; }

/* Reescribimos hero-fullbleed-content como un grid centrado */
.hero-fullbleed-content {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    gap: 64px !important;
    align-items: center !important;
    justify-items: stretch !important;
    text-align: left !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Imagen hero como columna izquierda con marco premium */
.hero-fullbleed-content::before {
    content: '';
    grid-column: 1 / 2;
    grid-row: 1 / -1;
    background-image: url('../images/hero-welcome.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 540px;
    border-radius: 24px;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(212,175,55,.18));
    animation: heroImageFloat 8s ease-in-out infinite;
}
@keyframes heroImageFloat {
    0%,100% { transform: translateY(0) }
    50% { transform: translateY(-12px) }
}

/* Contenido derecho centrado verticalmente */
.hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 18px !important;
    background: rgba(212,175,55,.12) !important;
    border: 1px solid rgba(212,175,55,.35) !important;
    border-radius: 999px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .15em !important;
    color: var(--gold-soft) !important;
    text-transform: uppercase !important;
    margin-bottom: 28px !important;
    width: fit-content !important;
}
.badge-dot {
    width: 8px; height: 8px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--gold);
    animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(1.4)} }

/* Insertamos título antes del stack de botones via ::before en content */

.hero-stack-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin: 32px 0 !important;
    text-align: left !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 480px !important;
}

.ai-chip-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 18px !important;
    background: rgba(20,37,64,.7) !important;
    border: 1px solid rgba(212,175,55,.22) !important;
    border-radius: 12px !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ivory) !important;
    cursor: pointer !important;
    transition: all .25s ease !important;
    text-align: left !important;
    backdrop-filter: blur(10px) !important;
}
.ai-chip-btn i { color: var(--gold-soft) !important; font-size: 15px !important; }
.ai-chip-btn:hover {
    background: rgba(212,175,55,.18) !important;
    border-color: var(--gold) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 22px rgba(212,175,55,.25) !important;
}
.ai-chip-btn.claude-highlight {
    background: linear-gradient(135deg, rgba(212,175,55,.22), rgba(30,64,175,.22)) !important;
    border-color: var(--gold) !important;
    color: var(--gold-soft) !important;
}

.hero-cta-group {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
    justify-content: flex-start !important;
}

.cta-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 20px 44px !important;
    background: var(--gold-grad) !important;
    color: var(--navy-deep) !important;
    border: none !important;
    border-radius: 14px !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 14px 38px rgba(212,175,55,.45), 0 0 0 1px rgba(212,175,55,.6) inset !important;
    transition: all .3s cubic-bezier(.4,0,.2,1) !important;
    position: relative !important;
    overflow: hidden !important;
}
.cta-primary:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 22px 48px rgba(212,175,55,.6) !important;
}
.cta-primary i {
    transition: transform .3s ease !important;
}
.cta-primary:hover i {
    transform: translateX(6px) !important;
}

/* TÍTULO HERO inyectado con pseudo-element o clase nueva */
.hero-fullbleed-content > .hero-text-block {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    animation: heroFadeIn 1.2s cubic-bezier(.4,0,.2,1) both;
}

.hero-title-premium {
    font-family: 'Sora', sans-serif !important;
    font-size: clamp(36px, 5vw, 64px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    color: var(--ivory) !important;
    margin: 0 0 16px 0 !important;
}
.hero-title-premium .accent {
    background: var(--gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.hero-subtitle-premium {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--text-secondary) !important;
    margin: 0 0 8px 0 !important;
    max-width: 520px !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto !important;
}

@keyframes heroFadeIn {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Responsive Hero */
@media (max-width: 980px) {
    .hero-fullbleed-content {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        text-align: center !important;
    }
    .hero-fullbleed-content::before {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 320px !important;
        max-height: 380px !important;
    }
    .hero-fullbleed-content > .hero-text-block {
        grid-column: 1 !important;
        text-align: center !important;
        align-items: center !important;
    }
    .hero-badge { margin: 0 auto 20px !important; }
    .hero-stack-buttons { margin: 24px auto !important; max-width: 100% !important; }
    .hero-subtitle-premium { text-align: center !important; margin: 0 auto 20px !important; }
    .hero-cta-group { justify-content: center !important; }
    #heroScreen { padding: 148px 20px 60px 20px !important; min-height: auto !important; }
}
@media (max-width: 540px) {
    .hero-stack-buttons { grid-template-columns: 1fr !important; }
    .cta-primary { padding: 18px 28px !important; font-size: 13px !important; width: 100% !important; justify-content: center !important; }
    .hero-fullbleed-content::before { min-height: 240px !important; }
}

/* ============================================================
   4. SECCIONES PORTFOLIO — espaciado limpio
   ============================================================ */
.portfolio-section {
    position: relative !important;
    padding: 90px 24px !important;
    z-index: 2 !important;
}
.section-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
}
.section-header-block {
    text-align: center !important;
    margin-bottom: 56px !important;
}
.section-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 18px !important;
    background: rgba(212,175,55,.1) !important;
    border: 1px solid rgba(212,175,55,.32) !important;
    border-radius: 999px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
    color: var(--gold-soft) !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
}
.section-title-main {
    font-family: 'Sora', sans-serif !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    font-weight: 800 !important;
    color: var(--ivory) !important;
    margin: 8px 0 14px !important;
    letter-spacing: -.02em !important;
    line-height: 1.15 !important;
}
.solid-accent {
    background: var(--gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.section-subtitle {
    color: var(--text-secondary) !important;
    font-size: 15px !important;
    max-width: 720px !important;
    margin: 12px auto 0 !important;
    line-height: 1.6 !important;
}
.section-underline {
    width: 80px; height: 3px;
    background: var(--gold-grad);
    margin: 16px auto 0;
    border-radius: 2px;
    box-shadow: 0 0 16px rgba(212,175,55,.5);
}

/* ============================================================
   5. ACORDEONES — abren correctamente, premium
   ============================================================ */
.accordion-block,
.accordion-pro,
.accordion-premium {
    background: linear-gradient(135deg, rgba(20,37,64,.85) 0%, rgba(10,22,40,.92) 100%) !important;
    border: 1px solid rgba(212,175,55,.18) !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    backdrop-filter: blur(14px) !important;
    transition: border-color .3s ease, box-shadow .3s ease !important;
}
.accordion-block:hover,
.accordion-pro:hover,
.accordion-premium:hover {
    border-color: rgba(212,175,55,.4) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.4) !important;
}
.accordion-block.is-open,
.accordion-pro.is-open,
.accordion-premium.is-open {
    border-color: var(--gold) !important;
    box-shadow: 0 16px 40px rgba(212,175,55,.18), 0 0 0 1px var(--gold) inset !important;
}

.accordion-toggle,
.accordion-pro-toggle,
.accordion-premium-toggle {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 22px 26px !important;
    background: transparent !important;
    border: none !important;
    color: var(--ivory) !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background .25s ease !important;
}
.accordion-toggle:hover,
.accordion-pro-toggle:hover,
.accordion-premium-toggle:hover {
    background: rgba(212,175,55,.05) !important;
}
.accordion-toggle .acc-pro-chev,
.accordion-toggle i.fa-chevron-down,
.accordion-toggle i.fa-chevron-right,
.accordion-pro-toggle .acc-pro-chev,
.accordion-premium-toggle .acc-pro-chev {
    color: var(--gold) !important;
    transition: transform .35s ease !important;
}
.accordion-toggle[aria-expanded="true"] .acc-pro-chev,
.accordion-toggle[aria-expanded="true"] i.fa-chevron-down,
.accordion-pro-toggle[aria-expanded="true"] .acc-pro-chev,
.accordion-premium-toggle[aria-expanded="true"] .acc-pro-chev {
    transform: rotate(180deg) !important;
}

.accordion-panel,
.accordion-pro-panel,
.accordion-premium-panel {
    overflow: hidden !important;
    transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease !important;
}
.accordion-panel:not([hidden]),
.accordion-pro-panel:not([hidden]),
.accordion-premium-panel:not([hidden]) {
    padding: 0 26px 26px 26px !important;
}

/* ============================================================
   6. LOGIN ADMIN — campo grande, profesional
   ============================================================ */
.login-screen {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    background:
        radial-gradient(circle at 30% 30%, rgba(30,64,175,.2), transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(212,175,55,.15), transparent 50%),
        linear-gradient(135deg, #0A1628 0%, #050B17 100%) !important;
    z-index: 9999 !important;
    padding: 32px !important;
}
.login-box {
    width: 100% !important;
    max-width: 560px !important;
    padding: 48px 44px !important;
    background: linear-gradient(135deg, rgba(20,37,64,.92), rgba(10,22,40,.95)) !important;
    border: 1px solid rgba(212,175,55,.32) !important;
    border-radius: 22px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(212,175,55,.1) inset !important;
    backdrop-filter: blur(20px) !important;
    text-align: center !important;
    color: var(--ivory) !important;
}
.login-logo {
    width: 84px !important; height: 84px !important;
    border-radius: 50% !important;
    border: 3px solid var(--gold) !important;
    box-shadow: 0 0 32px rgba(212,175,55,.5) !important;
    margin: 0 auto 22px !important;
    object-fit: cover !important;
}
.login-box h1 {
    font-family: 'Sora', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--ivory) !important;
    margin: 0 0 6px !important;
}
.login-subtitle {
    color: var(--gold-soft) !important;
    font-size: 13px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    margin: 0 0 32px !important;
}
.login-field { text-align: left !important; margin-bottom: 18px !important; }
.login-field label {
    display: block !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--gold-soft) !important;
    margin-bottom: 10px !important;
    letter-spacing: .04em !important;
}
.pass-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}
.pass-wrap input,
#adminPass {
    width: 100% !important;
    padding: 22px 60px 22px 22px !important;
    background: rgba(5,11,23,.7) !important;
    border: 2px solid rgba(212,175,55,.3) !important;
    border-radius: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--ivory) !important;
    letter-spacing: .04em !important;
    outline: none !important;
    transition: all .25s ease !important;
}
.pass-wrap input:focus,
#adminPass:focus {
    border-color: var(--gold) !important;
    background: rgba(5,11,23,.9) !important;
    box-shadow: 0 0 0 4px rgba(212,175,55,.18) !important;
}
.pass-wrap input::placeholder { color: rgba(245,241,232,.35) !important; }

#togglePass {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important; height: 42px !important;
    background: rgba(212,175,55,.15) !important;
    border: 1px solid rgba(212,175,55,.3) !important;
    border-radius: 10px !important;
    color: var(--gold) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#togglePass:hover { background: var(--gold) !important; color: var(--navy-deep) !important; }

.login-error {
    color: #ff6b6b !important;
    background: rgba(255,107,107,.12) !important;
    border: 1px solid rgba(255,107,107,.32) !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    text-align: center !important;
}

.login-box .btn-primary,
.login-box button[type="submit"] {
    width: 100% !important;
    padding: 18px 28px !important;
    background: var(--gold-grad) !important;
    color: var(--navy-deep) !important;
    border: none !important;
    border-radius: 14px !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 14px 36px rgba(212,175,55,.45) !important;
    transition: all .3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 8px !important;
}
.login-box .btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 48px rgba(212,175,55,.6) !important;
}

.back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: color .25s ease !important;
}
.back-link:hover { color: var(--gold) !important; }

/* ============================================================
   7. OCULTAR ELEMENTOS QUE INTERFIEREN
   ============================================================ */
/* Ocultar el loader de inmediato — la bienvenida vive ahora en welcome.html */
.loading-screen { display: none !important; }
.loading-screen[style*="display: none"] { display: none !important; }

/* Circle nav: si existe, escondemos hasta hacer scroll */
#circleNav { display: none !important; }

/* Mobile menu FAB se mantiene como respaldo en móvil */
@media (max-width: 1100px) {
    .mobile-menu-fab {
        display: none !important;  /* desactivado, usamos el frozen-nav scrollable */
    }
}

/* Forzar que el contenido NO quede oculto detrás del menú */
.portfolio-section:first-of-type { padding-top: 90px !important; }

/* ============================================================
   8. CARDS / GRIDS GENERALES con estilo premium
   ============================================================ */
.about-grid, .about-grid-v2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: start !important;
}
@media (max-width: 980px) {
    .about-grid, .about-grid-v2 { grid-template-columns: 1fr !important; gap: 32px !important; }
}

.bio-highlight-box,
.about-ai-card,
.skills-radar-card,
.profile-justification {
    background: linear-gradient(135deg, rgba(20,37,64,.85), rgba(10,22,40,.92)) !important;
    border: 1px solid rgba(212,175,55,.22) !important;
    border-radius: 18px !important;
    padding: 28px !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.35) !important;
    margin-bottom: 22px !important;
}
.bio-photo-wrapper {
    width: 100% !important;
    aspect-ratio: 16/10 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 18px !important;
    border: 1px solid rgba(212,175,55,.3) !important;
}
.bio-photo, .bio-photo-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.bio-statement {
    color: var(--text-secondary) !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    text-align: justify !important;
    margin: 0 !important;
}
.bio-quote-mark {
    color: var(--gold) !important;
    font-size: 22px !important;
    margin-bottom: 8px !important;
}

.justify-title {
    color: var(--ivory) !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 18px !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
}
.justify-title i { color: var(--gold) !important; }
.justify-item {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(212,175,55,.1) !important;
}
.justify-item:last-child { border-bottom: none !important; }
.justify-icon {
    width: 42px !important; height: 42px !important;
    border-radius: 10px !important;
    background: rgba(212,175,55,.12) !important;
    border: 1px solid rgba(212,175,55,.3) !important;
    color: var(--gold) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important;
}
.justify-content h4 {
    color: var(--ivory) !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
}
.justify-content p {
    color: var(--text-secondary) !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-align: justify !important;
}

.skill-bar-item { margin-bottom: 14px !important; }
.skill-bar-label {
    display: flex !important;
    justify-content: space-between !important;
    color: var(--ivory) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}
.skill-bar-track {
    width: 100% !important;
    height: 8px !important;
    background: rgba(5,11,23,.6) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
.skill-bar-fill {
    height: 100% !important;
    width: var(--fill-width, 0%) !important;
    background: var(--gold-grad) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 12px rgba(212,175,55,.5) !important;
    animation: fillIn 1.5s cubic-bezier(.4,0,.2,1) both !important;
}
@keyframes fillIn { from { width: 0 } }

.section-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 22px !important;
    background: var(--gold-grad) !important;
    color: var(--navy-deep) !important;
    border-radius: 12px !important;
    font-family: 'Sora', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    transition: transform .25s ease !important;
    box-shadow: 0 10px 28px rgba(212,175,55,.4) !important;
}
.section-cta-btn:hover { transform: translateY(-3px) !important; }
.section-cta-btn-outline {
    background: transparent !important;
    color: var(--gold-soft) !important;
    border: 1px solid var(--gold) !important;
    box-shadow: none !important;
}

/* Code card */
.about-ai-card.claude-terminal {
    background: linear-gradient(180deg, #0A1628, #050B17) !important;
    font-family: 'JetBrains Mono', monospace !important;
}
.ai-card-header {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 0 0 12px !important; border-bottom: 1px solid rgba(212,175,55,.1) !important;
    margin-bottom: 16px !important;
}
.ai-card-dot { width: 12px; height: 12px; border-radius: 50%; }
.ai-card-dot.green { background: #5cc870; }
.ai-card-dot.yellow { background: #f9c23c; }
.ai-card-dot.red { background: #ff6b6b; }
.ai-card-title { color: var(--text-muted) !important; font-size: 12px !important; margin-left: 8px !important; }
.code-line { display: block !important; padding: 3px 0 !important; color: var(--ivory) !important; font-size: 13px !important; line-height: 1.5 !important; }
.code-prompt { color: var(--gold) !important; }
.code-comment { color: var(--text-muted) !important; font-style: italic !important; }
.code-keyword { color: #5cc870 !important; }
.code-string { color: #82c8f7 !important; }
.code-cursor { animation: blink 1s steps(2) infinite; color: var(--gold); }
@keyframes blink { 50% { opacity: 0 } }

.section-footer-cta-inline {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 18px !important;
}

/* Footer / contact / general visibility */
.empty-state {
    text-align: center !important;
    padding: 40px !important;
    color: var(--text-muted) !important;
    background: rgba(20,37,64,.4) !important;
    border-radius: 14px !important;
    border: 1px dashed rgba(212,175,55,.22) !important;
}
.empty-state i { color: var(--gold); font-size: 22px; margin-right: 10px; }

/* ============================================================
   9. WEB APPS — Botones de SECCIONES (categorías) y SUB-BOTONES de páginas
   ============================================================ */
.webapp-categories {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 24px 0 32px !important;
    padding: 22px !important;
    background: linear-gradient(135deg, rgba(20,37,64,.6), rgba(10,22,40,.7)) !important;
    border: 1px solid rgba(212,175,55,.2) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(12px) !important;
    justify-content: center !important;
}
.webapp-cat-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 12px 22px !important;
    background: rgba(5,11,23,.6) !important;
    border: 1px solid rgba(212,175,55,.22) !important;
    border-radius: 12px !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    color: var(--ivory) !important;
    cursor: pointer !important;
    transition: all .25s ease !important;
    text-transform: uppercase !important;
}
.webapp-cat-btn i { color: var(--gold-soft) !important; font-size: 14px !important; }
.webapp-cat-btn:hover {
    background: rgba(212,175,55,.15) !important;
    border-color: var(--gold) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(212,175,55,.25) !important;
}
.webapp-cat-btn.active {
    background: var(--gold-grad) !important;
    color: var(--navy-deep) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 8px 24px rgba(212,175,55,.5) !important;
}
.webapp-cat-btn.active i { color: var(--navy-deep) !important; }

/* SUB-BOTONES: tarjetas de cada app web (premium) */
.webapp-gallery, .webapp-gallery-premium {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 18px !important;
    margin-top: 28px !important;
}

.webapp-pro {
    position: relative !important;
    background: linear-gradient(135deg, rgba(20,37,64,.85), rgba(10,22,40,.95)) !important;
    border: 1px solid rgba(212,175,55,.2) !important;
    border-radius: 16px !important;
    padding: 22px !important;
    overflow: hidden !important;
    transition: all .35s cubic-bezier(.4,0,.2,1) !important;
    backdrop-filter: blur(12px) !important;
}
.webapp-pro::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 3px;
    background: var(--gold-grad);
    transition: left .5s ease;
}
.webapp-pro:hover {
    transform: translateY(-6px) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.55), 0 0 0 1px var(--gold) inset !important;
}
.webapp-pro:hover::before { left: 0; }

.webapp-pro-head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(212,175,55,.15) !important;
}
.webapp-pro-icon {
    width: 52px !important; height: 52px !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
    background: rgba(212,175,55,.14) !important;
    border: 1px solid rgba(212,175,55,.32) !important;
    color: var(--gold) !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.3) !important;
    transition: transform .3s ease !important;
}
.webapp-pro:hover .webapp-pro-icon {
    transform: scale(1.08) rotate(-5deg) !important;
    background: var(--gold-grad) !important;
    color: var(--navy-deep) !important;
}
.webapp-pro-meta { flex: 1 !important; min-width: 0 !important; }
.webapp-pro-meta h4 {
    font-family: 'Sora', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--ivory) !important;
    margin: 0 0 4px !important;
    line-height: 1.2 !important;
}
.webapp-pro-url {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11.5px !important;
    color: var(--gold-soft) !important;
    letter-spacing: .04em !important;
    word-break: break-all !important;
}
.webapp-pro-body { padding: 0 !important; }
.webapp-pro-desc {
    color: var(--text-secondary) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    margin: 0 0 16px !important;
    text-align: justify !important;
}
.webapp-pro-foot {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.webapp-pro-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background: rgba(212,175,55,.12) !important;
    border: 1px solid rgba(212,175,55,.32) !important;
    border-radius: 100px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--gold-soft) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}
.webapp-pro-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    background: var(--gold-grad) !important;
    color: var(--navy-deep) !important;
    border-radius: 10px !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    box-shadow: 0 6px 14px rgba(212,175,55,.3) !important;
    transition: all .25s ease !important;
}
.webapp-pro-link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px rgba(212,175,55,.5) !important;
}

.webapp-counter {
    margin-top: 24px !important;
    text-align: center !important;
    padding: 16px !important;
    background: rgba(212,175,55,.08) !important;
    border: 1px solid rgba(212,175,55,.22) !important;
    border-radius: 12px !important;
}

/* SUB-SECCIONES Apps Web (botones premium colapsables) */
.webapp-gallery, .webapp-gallery-premium {
    display: block !important;
    grid-template-columns: unset !important;
}
.webapp-section-block {
    margin-bottom: 18px !important;
    background: linear-gradient(135deg, rgba(20,37,64,.5), rgba(10,22,40,.6)) !important;
    border: 1px solid rgba(212,175,55,.18) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: border-color .3s ease, box-shadow .3s ease !important;
}
.webapp-section-block.open,
.webapp-section-block:has(.webapp-section-btn.open) {
    border-color: var(--gold) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.45), 0 0 0 1px rgba(212,175,55,.4) inset !important;
}
.webapp-section-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 22px 26px !important;
    background: transparent !important;
    border: none !important;
    color: var(--ivory) !important;
    cursor: pointer !important;
    font-family: 'Sora', sans-serif !important;
    text-align: left !important;
    transition: background .25s ease !important;
}
.webapp-section-btn:hover { background: rgba(212,175,55,.06) !important; }
.webapp-section-btn .ws-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.webapp-section-btn .ws-icon {
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
    border-radius: 14px !important;
    background: var(--gold-grad) !important;
    color: var(--navy-deep) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    box-shadow: 0 10px 24px rgba(212,175,55,.4) !important;
    transition: transform .3s ease !important;
}
.webapp-section-btn:hover .ws-icon { transform: scale(1.08) rotate(-5deg) !important; }
.webapp-section-btn .ws-meta strong {
    display: block !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--ivory) !important;
    margin-bottom: 4px !important;
}
.webapp-section-btn .ws-meta small {
    display: block !important;
    color: var(--gold-soft) !important;
    font-size: 12px !important;
    letter-spacing: .04em !important;
}
.webapp-section-btn .ws-right {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
}
.webapp-section-btn .ws-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    background: rgba(212,175,55,.18) !important;
    border: 1px solid rgba(212,175,55,.4) !important;
    border-radius: 100px !important;
    color: var(--gold) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.webapp-section-btn .ws-chev {
    color: var(--gold) !important;
    transition: transform .35s ease !important;
    font-size: 14px !important;
}
.webapp-section-btn.open .ws-chev { transform: rotate(180deg) !important; }
.webapp-section-btn.open {
    background: rgba(212,175,55,.08) !important;
    border-bottom: 1px solid rgba(212,175,55,.2) !important;
}
.webapp-section-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 16px !important;
    padding: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .5s cubic-bezier(.4,0,.2,1), padding .35s ease !important;
}
.webapp-section-grid.open {
    max-height: 5000px !important;
    padding: 22px !important;
}
@media (max-width: 600px) {
    .webapp-section-btn { padding: 18px !important; }
    .webapp-section-btn .ws-icon { width: 44px !important; height: 44px !important; font-size: 18px !important; }
    .webapp-section-btn .ws-meta strong { font-size: 15px !important; }
    .webapp-section-grid { grid-template-columns: 1fr !important; padding: 16px !important; }
}
.counter-highlight {
    font-family: 'Sora', sans-serif !important;
    font-size: 14px !important;
    color: var(--ivory) !important;
}
.counter-highlight i { color: var(--gold) !important; margin-right: 8px !important; }
.counter-highlight strong {
    color: var(--gold) !important;
    font-weight: 800 !important;
    font-size: 18px !important;
}

/* ============================================================
   10. CERTIFICATIONS — Badges Credly clickeables con hover premium
   ============================================================ */
.cert-institutions, .cert-institutions-premium {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 24px !important;
    margin: 32px 0 !important;
}

.cert-inst-card, .cert-inst-premium {
    position: relative !important;
    background: linear-gradient(135deg, rgba(20,37,64,.85), rgba(10,22,40,.95)) !important;
    border: 1px solid rgba(212,175,55,.22) !important;
    border-radius: 18px !important;
    padding: 28px !important;
    overflow: hidden !important;
    backdrop-filter: blur(14px) !important;
    transition: all .35s ease !important;
}
.cert-inst-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.5) !important;
}
.cert-inst-glow {
    position: absolute !important;
    inset: -50% !important;
    background: radial-gradient(circle at center, rgba(212,175,55,.15), transparent 60%) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity .4s ease !important;
}
.cert-inst-card:hover .cert-inst-glow { opacity: 1 !important; }
.cert-inst-icon {
    width: 64px !important; height: 64px !important;
    border-radius: 14px !important;
    background: var(--gold-grad) !important;
    color: var(--navy-deep) !important;
    font-size: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 18px !important;
    box-shadow: 0 12px 30px rgba(212,175,55,.4) !important;
}
.cert-inst-card h3 {
    font-family: 'Sora', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--ivory) !important;
    margin: 0 0 6px !important;
}
.cert-inst-card h4 {
    font-size: 13px !important;
    color: var(--gold-soft) !important;
    font-weight: 600 !important;
    margin: 0 0 14px !important;
    letter-spacing: .02em !important;
}
.cert-inst-card p {
    color: var(--text-secondary) !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    margin: 0 0 18px !important;
    text-align: justify !important;
}

/* BADGES Credly clickeables */
.cert-inst-badges {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-top: 18px !important;
}
.credly-badge {
    position: relative !important;
    display: block !important;
    aspect-ratio: 1 !important;
    background: rgba(255,255,255,.04) !important;
    border: 2px solid rgba(212,175,55,.25) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    cursor: pointer !important;
    transition: all .35s cubic-bezier(.4,0,.2,1) !important;
    overflow: hidden !important;
}
.credly-badge img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transition: transform .35s ease !important;
}
.credly-badge::after {
    content: '\f06e';  /* fa-eye */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 8px; right: 8px;
    width: 28px; height: 28px;
    background: var(--gold-grad);
    color: var(--navy-deep);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(212,175,55,.5);
    opacity: 0;
    transform: scale(0.5);
    transition: all .3s ease;
}
.credly-badge:hover {
    border-color: var(--gold) !important;
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 16px 38px rgba(212,175,55,.4) !important;
    background: rgba(212,175,55,.1) !important;
}
.credly-badge:hover img { transform: scale(1.05) !important; }
.credly-badge:hover::after { opacity: 1; transform: scale(1); }

.cert-inst-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 18px 0 0 !important;
}
.cert-inst-list li {
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(212,175,55,.08) !important;
    font-size: 13px !important;
}
.cert-inst-list li:last-child { border-bottom: none !important; }
.cert-inst-list li i {
    color: #ff6b6b !important;
    margin-right: 10px !important;
}
.cert-inst-list li a {
    color: var(--ivory) !important;
    text-decoration: none !important;
    transition: color .25s ease !important;
}
.cert-inst-list li a:hover { color: var(--gold) !important; }

/* ============================================================
   11. MODAL CREDLY — Vista previa de badge
   ============================================================ */
.credly-modal {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(5,11,23,.92) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 99999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px !important;
    animation: modalFade .3s ease !important;
}
.credly-modal.show { display: flex !important; }
@keyframes modalFade { from { opacity: 0 } to { opacity: 1 } }

.credly-modal-box {
    width: 100% !important;
    max-width: 580px !important;
    background: linear-gradient(135deg, rgba(20,37,64,.95), rgba(10,22,40,.98)) !important;
    border: 1px solid rgba(212,175,55,.4) !important;
    border-radius: 22px !important;
    padding: 36px !important;
    text-align: center !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(212,175,55,.1) inset !important;
    animation: modalSlide .4s cubic-bezier(.4,0,.2,1) !important;
}
@keyframes modalSlide {
    from { opacity: 0; transform: translateY(30px) scale(.95) }
    to { opacity: 1; transform: translateY(0) scale(1) }
}

.credly-modal-close {
    position: absolute !important;
    top: 24px !important; right: 24px !important;
    width: 44px !important; height: 44px !important;
    background: rgba(212,175,55,.15) !important;
    border: 1px solid rgba(212,175,55,.3) !important;
    color: var(--gold) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 18px !important;
    transition: all .25s ease !important;
}
.credly-modal-close:hover { background: var(--gold) !important; color: var(--navy-deep) !important; }

.credly-modal-img {
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto 24px !important;
    padding: 24px !important;
    background: rgba(255,255,255,.06) !important;
    border: 2px solid rgba(212,175,55,.3) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 40px rgba(212,175,55,.2) !important;
}
.credly-modal-img img { width: 100%; height: 100%; object-fit: contain; }

.credly-modal h3 {
    font-family: 'Sora', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--ivory) !important;
    margin: 0 0 8px !important;
}
.credly-modal-issuer {
    color: var(--gold-soft) !important;
    font-size: 13px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
}
.credly-modal-desc {
    color: var(--text-secondary) !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    margin: 0 0 28px !important;
    text-align: justify !important;
}
.credly-modal-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 32px !important;
    background: var(--gold-grad) !important;
    color: var(--navy-deep) !important;
    border-radius: 12px !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: 0 14px 32px rgba(212,175,55,.5) !important;
    transition: all .3s ease !important;
}
.credly-modal-link:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 44px rgba(212,175,55,.7) !important;
}