/* ============================================================
   JLD WebStudio · Blog CSS
   Ruta: /assets/css/blog.css
   ============================================================ */

:root{
    --ws-bg:#05070f;
    --ws-bg-2:#0a0f1f;
    --ws-accent:#00e0ff;
    --ws-accent-2:#7b5cff;
    --ws-accent-3:#00ffa3;
    --ws-text:#e8f0ff;
    --ws-muted:#8a9bbd;
    --ws-card:rgba(255,255,255,0.04);
    --ws-border:rgba(255,255,255,0.08);
    --ws-radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--ws-bg);
    color:var(--ws-text);
    line-height:1.6;
    overflow-x:hidden;
    position:relative;
    min-height:100vh;
    display:flex;flex-direction:column;
}

.bg-aurora{
    position:fixed;inset:0;z-index:-2;overflow:hidden;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(0,224,255,.15), transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(123,92,255,.15), transparent 55%),
        radial-gradient(ellipse at 50% 90%, rgba(0,255,163,.1), transparent 55%),
        var(--ws-bg);
}
.bg-aurora::before,
.bg-aurora::after{
    content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;
    animation:float 18s ease-in-out infinite;
}
.bg-aurora::before{
    width:600px;height:600px;top:-200px;left:-150px;
    background:radial-gradient(circle,#00e0ff,transparent 70%);
}
.bg-aurora::after{
    width:700px;height:700px;bottom:-250px;right:-200px;
    background:radial-gradient(circle,#7b5cff,transparent 70%);
    animation-delay:-9s;
}
@keyframes float{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(60px,-40px) scale(1.1)}
}

#neural-canvas{
    position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.45;
}

.ws-container{max-width:1100px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* NAVBAR */
.ws-nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    background:rgba(5,7,15,.55);
    border-bottom:1px solid var(--ws-border);
    padding:14px 0;
}
.ws-nav .ws-container{display:flex;justify-content:space-between;align-items:center;max-width:1200px}
.ws-nav a.ws-nav-cta{
    color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;
    padding:8px 18px;border-radius:999px;
    background:linear-gradient(135deg,var(--ws-accent),var(--ws-accent-2));
    box-shadow:0 4px 20px rgba(0,224,255,.3);
    transition:.2s;
}
.ws-nav a.ws-nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 25px rgba(0,224,255,.5)}

/* HERO DEL BLOG */
.blog-hero{
    padding:150px 0 60px;text-align:center;
}
.blog-kicker{
    font-family:'Space Grotesk',sans-serif;
    font-size:.85rem;font-weight:700;letter-spacing:3px;
    text-transform:uppercase;
    background:linear-gradient(90deg,var(--ws-accent),var(--ws-accent-2));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    margin-bottom:16px;
}
.blog-hero h1{
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(1.8rem,4.5vw,3rem);
    font-weight:700;line-height:1.15;letter-spacing:-1.2px;
    margin-bottom:20px;
}
.blog-hero h1 .grad{
    background:linear-gradient(90deg,#00e0ff,#7b5cff,#00ffa3,#00e0ff);
    background-size:300% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:gradient-move 8s ease infinite;
}
@keyframes gradient-move{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}
.blog-sub{
    font-size:1.05rem;color:var(--ws-muted);
    max-width:680px;margin:0 auto;font-weight:300;
}

/* LISTADO */
.blog-list{padding:40px 0 80px}
.blog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:24px;
}
.blog-card{
    background:var(--ws-card);
    border:1px solid var(--ws-border);
    border-radius:var(--ws-radius);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    transition:all .3s;
    overflow:hidden;
}
.blog-card:hover{
    transform:translateY(-6px);
    border-color:rgba(0,224,255,.35);
    box-shadow:0 20px 50px rgba(0,224,255,.15);
    background:rgba(255,255,255,.06);
}
.blog-card a{
    display:block;padding:28px;color:inherit;text-decoration:none;height:100%;
}
.blog-tag{
    display:inline-block;
    font-size:.7rem;font-weight:700;letter-spacing:1px;
    text-transform:uppercase;
    padding:4px 10px;border-radius:999px;
    background:rgba(0,224,255,.1);
    color:var(--ws-accent);
    margin-bottom:14px;
}
.blog-card h2{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.2rem;font-weight:700;color:#fff;
    line-height:1.3;margin-bottom:12px;
    letter-spacing:-.3px;
}
.blog-card p{
    color:var(--ws-muted);font-size:.9rem;
    margin-bottom:18px;
}
.blog-meta{
    display:flex;justify-content:space-between;align-items:center;
    font-size:.82rem;color:var(--ws-muted);
    padding-top:14px;border-top:1px solid var(--ws-border);
}
.blog-meta span:last-child{color:var(--ws-accent);font-weight:600}

/* CTA */
.blog-cta{
    padding:60px 0;text-align:center;
    background:linear-gradient(135deg,rgba(0,224,255,.08),rgba(123,92,255,.08));
    border-top:1px solid var(--ws-border);
    border-bottom:1px solid var(--ws-border);
}
.blog-cta h2{
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(1.6rem,3vw,2.2rem);
    font-weight:700;margin-bottom:14px;
    letter-spacing:-.8px;
}
.blog-cta h2 .grad{
    background:linear-gradient(90deg,var(--ws-accent),var(--ws-accent-2));
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.blog-cta p{color:var(--ws-muted);margin-bottom:28px}

/* BOTONES */
.ws-btn-primary{
    display:inline-block;padding:14px 32px;border-radius:999px;
    text-decoration:none;font-weight:600;font-size:.95rem;
    background:linear-gradient(135deg,var(--ws-accent),var(--ws-accent-2));
    color:#05070f;
    box-shadow:0 8px 30px rgba(0,224,255,.35);
    transition:all .25s;
}
.ws-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,224,255,.55)}

/* ARTÍCULO */
.blog-article{padding:150px 0 60px}
.article-header{margin-bottom:48px;text-align:center}
.article-back{
    display:inline-block;color:var(--ws-muted);
    text-decoration:none;font-size:.85rem;
    margin-bottom:24px;transition:.2s;
}
.article-back:hover{color:var(--ws-accent)}
.article-header h1{
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(1.8rem,4.5vw,2.8rem);
    font-weight:700;line-height:1.15;letter-spacing:-1px;
    margin:18px 0 24px;
}
.article-meta{
    display:flex;gap:20px;justify-content:center;flex-wrap:wrap;
    font-size:.85rem;color:var(--ws-muted);
}

.article-content{
    max-width:780px;margin:0 auto;
    font-size:1.05rem;line-height:1.75;
}
.article-content .article-lead{
    font-size:1.2rem;color:var(--ws-text);
    font-weight:400;line-height:1.6;
    padding:20px 0 20px 24px;
    border-left:4px solid var(--ws-accent);
    margin-bottom:40px;
}
.article-content h2{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.6rem;font-weight:700;
    color:#fff;letter-spacing:-.5px;
    margin:48px 0 16px;
}
.article-content h3{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.2rem;font-weight:700;
    color:#fff;letter-spacing:-.3px;
    margin:32px 0 12px;
}
.article-content p{
    color:var(--ws-text);
    margin-bottom:20px;
}
.article-content ul,
.article-content ol{
    color:var(--ws-text);
    margin:20px 0 24px 24px;
}
.article-content li{
    margin-bottom:10px;
    padding-left:8px;
}
.article-content strong{color:#fff;font-weight:700}
.article-content a{color:var(--ws-accent);text-decoration:underline}
.article-content a:hover{color:var(--ws-accent-2)}
.article-content blockquote{
    background:rgba(0,224,255,.05);
    border-left:4px solid var(--ws-accent);
    padding:20px 24px;margin:32px 0;
    border-radius:0 12px 12px 0;
    font-style:italic;color:var(--ws-text);
    font-size:1.05rem;
}

.article-cta{
    margin:60px 0 40px;
    background:linear-gradient(135deg,rgba(0,224,255,.1),rgba(123,92,255,.1));
    border:1px solid var(--ws-border);
    border-radius:var(--ws-radius);
    padding:40px 32px;text-align:center;
}
.article-cta h3{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.4rem;font-weight:700;
    color:#fff;margin-bottom:12px;
}
.article-cta p{color:var(--ws-muted);margin-bottom:24px}

/* RELACIONADOS */
.article-related{
    max-width:780px;margin:60px auto 0;
    padding-top:40px;
    border-top:1px solid var(--ws-border);
}
.article-related h3{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.2rem;font-weight:700;
    color:#fff;margin-bottom:24px;
}
.related-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.related-card{
    background:var(--ws-card);
    border:1px solid var(--ws-border);
    border-radius:var(--ws-radius);
    padding:20px;
    text-decoration:none;color:inherit;
    transition:.3s;
}
.related-card:hover{
    border-color:rgba(0,224,255,.35);
    transform:translateY(-3px);
}
.related-card h4{
    font-family:'Space Grotesk',sans-serif;
    font-size:.95rem;font-weight:700;
    color:#fff;line-height:1.3;
    letter-spacing:-.2px;
}

/* FOOTER */
.ws-footer{
    padding:40px 0;text-align:center;
    color:var(--ws-muted);font-size:.85rem;
    border-top:1px solid var(--ws-border);
    margin-top:auto;
}
.ws-footer a{color:var(--ws-accent);text-decoration:none}
.ws-footer a:hover{text-decoration:underline}

/* RESPONSIVE */
@media(max-width:768px){
    .blog-hero{padding:120px 0 40px}
    .blog-article{padding:120px 0 40px}
    .related-grid{grid-template-columns:1fr}
    .article-content{font-size:1rem}
    .article-content h2{font-size:1.35rem}
}