:root{
    --tlider_bg:#05070C;
    --tlider_fg:#EDEDED;
    --tlider_accent:#FD272E;
    --tlider_neon:#00F0FF;
    --tlider_card:rgba(255,255,255,.04);
    --tlider_stroke:rgba(255,255,255,.1);
    --tlider_ease:cubic-bezier(.2,.8,.2,1);
}

[data-theme="light"]{
    --tlider_bg:#F5F7FA;
    --tlider_fg:#0A0A0A;
    --tlider_card:rgba(0,0,0,.04);
    --tlider_stroke:rgba(0,0,0,.12);
    --tlider_accent:#FD272E;
    --tlider_neon:#0094FF;
}

*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
}

body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--tlider_bg);
    color:var(--tlider_fg);
    overflow-x:hidden;
    transition:background .35s,color .35s;
}

a{
    text-decoration:none;
    color:inherit;
}

/* UI */

.tlider_accent{
    color:var(--tlider_neon);
}

.tlider_btn{
    border:1px solid var(--tlider_stroke);
    padding:8px 12px;
    border-radius:999px;
    font-size:11px;
    letter-spacing:.15em;
    background:transparent;
    color:var(--tlider_fg);
}

.tlider_btn_main{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 20px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--tlider_accent),var(--tlider_neon));
    color:#fff;
}

.tlider_btn_outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 20px;
    border-radius:999px;
    border:1px solid var(--tlider_stroke);
}

.tlider_chip{
    border:1px solid var(--tlider_stroke);
    background:var(--tlider_card);
    border-radius:999px;
    padding:8px 12px;
}

.tlider_pill{
    border:1px solid var(--tlider_stroke);
    background:var(--tlider_card);
    border-radius:999px;
    padding:6px 10px;
}

/* FX */

.tlider_fx_layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    mix-blend-mode:screen;
    opacity:.85;
}

#tlider_fx_particles{
    width:100%;
    height:100%;
    display:block;
}

.tlider_vignette{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    background:
        radial-gradient(circle at 20% 20%,rgba(253,39,46,.14),transparent 40%),
        radial-gradient(circle at 80% 70%,rgba(0,240,255,.12),transparent 50%);
}

/* ─────────────────────────────────────────────
   CLASES UTILITARIAS QUE TAILWIND NO PUEDE HACER
   Agregá esto al final de tu base.css existente
───────────────────────────────────────────── */

/* Números con degradado neon (nosotros stats) */
.tlider_stat_num {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--tlider_neon), var(--tlider_accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dot pulsante del footer (el de header ya está en header.css) */
.tlider_dot_glow {
    box-shadow: 0 0 10px var(--tlider_neon), 0 0 20px rgba(0,240,255,.35);
    animation: dot_pulse 2.8s ease-in-out infinite;
}
@keyframes dot_pulse {
    0%,100% { box-shadow: 0 0 10px var(--tlider_neon), 0 0 20px rgba(0,240,255,.35); }
    50%      { box-shadow: 0 0 18px var(--tlider_neon), 0 0 36px rgba(0,240,255,.55); }
}

/* Filtros de portafolio: estado activo */
.port_filter--active {
    border-color: var(--tlider_neon) !important;
    background: rgba(0,240,255,.1) !important;
    color: var(--tlider_neon) !important;
}
[data-theme="light"] .port_filter--active {
    border-color: var(--tlider_neon) !important;
    background: rgba(0,148,255,.08) !important;
}