/*=========================================================
    HAGAMOS DISEÑO
    STYLE.CSS
    Versión 0.1.0

    Layout General
    Loader
    Navbar

=========================================================*/
/*==================================================
PARTÍCULAS
==================================================*/

#particles{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    z-index:-3;

}

/*=========================================================
    BODY
=========================================================*/

body{

    background: var(--bg-body);

    color: var(--text-white);

    position: relative;

}


/*=========================================================
    FONDO PRINCIPAL
=========================================================*/

body::before{

    content:"";

    position: fixed;

    inset:0;

    background:

    radial-gradient(circle at top left,
    rgba(37,99,235,.22),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(6,182,212,.18),
    transparent 40%),

    radial-gradient(circle at center,
    rgba(124,58,237,.10),
    transparent 45%);

    z-index:-2;

}


/*=========================================================
    GLOW SUPERIOR
=========================================================*/

body::after{

    content:"";

    position: fixed;

    width:700px;

    height:700px;

    top:-300px;

    right:-250px;

    border-radius:50%;

    background:rgba(29,78,216,.18);

    filter:blur(120px);

    z-index:-1;

}
.hero::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(29,78,216,.28),

    rgba(6,182,212,.18),

    transparent 70%);

    filter:blur(80px);

    animation:aurora 14s linear infinite;

    z-index:-1;

}

/*=========================================================
    LOADER
=========================================================*/

#loader{

    position:fixed;

    inset:0;

    background:#050816;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:25px;

    z-index:99999;

}


#loader img{

    width:130px;

    animation:logoFloat 2s ease-in-out infinite;

}


#loader h2{

    font-size:1rem;

    font-weight:500;

    color:var(--text-gray);

    letter-spacing:2px;

}


/*=========================================================
    HEADER
=========================================================*/

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    transition:.35s;

}


/*=========================================================
    NAVBAR
=========================================================*/

nav{

    width:min(94%,1280px);

    margin:auto;

    margin-top:22px;

    padding:16px 28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-radius:18px;

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 20px 40px rgba(0,0,0,.25);

}


/*=========================================================
    LOGO
=========================================================*/

.logo img{

    width:220px;

}
/*=========================================================
    BOTÓN HAMBURGUESA
=========================================================*/

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#ffffff;

    font-size:1.6rem;

    cursor:pointer;

    transition:.3s;

}

.menu-toggle:hover{

    background:var(--color-primary);

}

/*=========================================================
    MENU
=========================================================*/

nav ul{

    display:flex;

    align-items:center;

    gap:35px;

    list-style:none;

    margin:0;

    padding:0;

}


nav ul li a{

    color:var(--text-gray);

    font-weight:500;

    transition:.35s;

    position:relative;

}


nav ul li a:hover{

    color:#ffffff;

}


/*=========================================================
    LINHA HOVER
=========================================================*/

nav ul li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--color-secondary);

    transition:.35s;

}


nav ul li a:hover::after{

    width:100%;

}


/*=========================================================
    BOTONES NAVBAR
=========================================================*/

.nav-buttons{

    display:flex;

    align-items:center;

    gap:15px;

}


.nav-buttons button{

    width:44px;

    height:44px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:white;

    transition:.35s;

}


.nav-buttons button:hover{

    background:var(--color-primary);

    transform:translateY(-3px);

    box-shadow:var(--shadow-glow);

}


/*=========================================================
    HERO
=========================================================*/

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    overflow:hidden;
    
    padding-top:160px;

    padding-bottom:120px;

}
/*=========================================================

HERO

=========================================================*/

.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:80px;

}

.hero-left{

    text-align:left;

}

.badge{

    display:inline-block;

    padding:12px 22px;

    border-radius:40px;

    background:rgba(37,99,235,.12);

    border:1px solid rgba(37,99,235,.25);

    color:#8EC5FF;

    margin-bottom:30px;

}

.hero h1{

    font-size:3.9rem;

    line-height:1.05;

    margin-bottom:30px;

    max-width:650px;

}

.hero h1 span{

    background:var(--gradient-primary);

    -webkit-background-clip:text;

    color:transparent;

}

.hero p{

    font-size:1.2rem;

    max-width:620px;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:50px;

}

.btn-primary{

    background:var(--gradient-primary);

    padding:18px 34px;

    border-radius:14px;

    font-weight:600;

    color:white;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-glow);

}

.btn-secondary{

    border:1px solid rgba(255,255,255,.12);

    padding:18px 34px;

    border-radius:14px;

    color:white;

}

.btn-secondary:hover{

    background:rgba(255,255,255,.05);

}

.hero-tags{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.hero-tags span{

    background:rgba(255,255,255,.04);

    padding:12px 20px;

    border-radius:50px;

    border:1px solid rgba(255,255,255,.08);

}

.tech-card{

    padding:40px;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 30px 60px rgba(0,0,0,.25);

}

.tech-card h3{

    margin-bottom:30px;

    font-size:1.8rem;

}

.tech-card ul{

    display:grid;

    gap:20px;

}

.tech-card li{

    padding:18px;

    border-radius:14px;

    background:rgba(255,255,255,.03);

    transition:.35s;

}

.tech-card li:hover{

    background:var(--gradient-primary);

    transform:translateX(10px);

}
/*=========================================================
DASHBOARD HERO
=========================================================*/

.dashboard{

    width:380px;

    margin:auto;

    padding:35px;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.dashboard-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

    font-weight:600;

    color:white;

}

.status{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:0 0 12px #22c55e;

    animation:pulse 2s infinite;

}

.dashboard-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:14px;

    margin-bottom:18px;

    border-radius:16px;

    background:rgba(255,255,255,.04);

    transition:.35s;

}

.dashboard-card:hover{

    transform:translateX(12px);

    background:rgba(37,99,235,.15);

}

.dashboard-card h4{

    margin-bottom:4px;

    font-size:1rem;

}

.dashboard-card small{

    color:var(--text-muted);

}

.icon{

    width:54px;

    height:54px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:var(--gradient-primary);

    font-size:1.5rem;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.3);

    }

    100%{

        transform:scale(1);

    }

}
@keyframes aurora{

    0%{

        transform:translate(-150px,-80px);

    }

    50%{

        transform:translate(120px,70px);

    }

    100%{

        transform:translate(-150px,-80px);

    }

}
.dashboard{

    animation:floatCard 7s ease-in-out infinite;

}

@keyframes floatCard{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}
/*=========================================================
SERVICIOS
=========================================================*/

.services-grid{

    display:grid;

    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));

    gap:35px;

}

.service-card{

    padding:45px;

    border-radius:24px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:#2563EB;

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.12),
        transparent 70%
    );

    opacity:0;

    transition:.35s;

}

.service-card:hover::before{

    opacity:1;

}

.service-icon{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:var(--gradient-primary);

    font-size:2rem;

    margin-bottom:30px;

}

.service-card h3{

    margin-bottom:20px;

    font-size:1.6rem;

}

.service-card p{

    color:var(--text-gray);

}
/*==================================================
                METODOLOGÍA
==================================================*/

.methodology{

    padding:120px 0;

    position:relative;

}

.methodology-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

    margin-top:70px;

}

.step-card{

    position:relative;

    padding:40px 30px;

    border-radius:28px;

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

    overflow:hidden;

}

.step-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,212,255,.45);

    box-shadow:0 25px 50px rgba(0,0,0,.30);

}

.step-number{

    position:absolute;

    right:25px;

    top:20px;

    font-size:42px;

    font-weight:700;

    color:rgba(255,255,255,.08);

}

.step-icon{

    width:75px;

    height:75px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:25px;

    background:linear-gradient(135deg,#2F80FF,#00D4FF);

}

.step-card h3{

    margin-bottom:18px;

}

.step-card p{

    line-height:1.8;

    opacity:.85;

}
/*==================================================
                TECNOLOGÍAS
==================================================*/

.tech-section{

    padding:120px 0;

    position:relative;

}

.tech-cloud{

    margin-top:70px;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:25px;

}

.tech-chip{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:220px;

    height:120px;

    border-radius:24px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.35s;

    cursor:pointer;

    overflow:hidden;

}

.tech-chip:hover{

    transform:translateY(-8px) scale(1.05);

    border-color:#2EA8FF;

    box-shadow:0 20px 50px rgba(46,168,255,.25);

}

.tech-chip{

    font-size:1.2rem;

    font-weight:700;

    color:white;

}

.tech-chip small{

    margin-top:10px;

    color:#8ca3c7;

    font-size:.9rem;

}
/*==================================================
                APRENDE
==================================================*/

.learn-section{

    padding:140px 0;

}

.learn-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

    margin-top:70px;

}

.learn-card{

    padding:50px;

    border-radius:30px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.learn-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,180,255,.18);

}

.learn-icon{

    width:90px;

    height:90px;

    border-radius:22px;

    background:linear-gradient(135deg,#3A7BFF,#14D3FF);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    margin-bottom:30px;

}

.learn-card h3{

    font-size:2rem;

    margin-bottom:20px;

}

.learn-card p{

    color:#AFC2DD;

    line-height:1.8;

}

.learn-card ul{

    margin:30px 0;

}

.learn-card li{

    margin:12px 0;

    color:white;

}
/*==================================================
                CURSOS DESTACADOS
==================================================*/

.courses{

    padding:120px 0;

}

.courses-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:60px;

}

.course-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    overflow:hidden;

    backdrop-filter:blur(20px);

    transition:.35s;

}

.course-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(0,0,0,.35);

    border-color:#3da9fc;

}

.course-card img{

    width:100%;

    display:block;

}

.course-content{

    padding:28px;

}

.course-category{

    display:inline-block;

    padding:8px 14px;

    border-radius:30px;

    background:#1d5eff22;

    color:#7fc7ff;

    font-size:.8rem;

    margin-bottom:18px;

}

.course-content h3{

    margin-bottom:15px;

    font-size:1.35rem;

}

.course-content p{

    opacity:.8;

    line-height:1.8;

    margin-bottom:30px;

}

.btn-course{

    color:#4fb8ff;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.btn-course:hover{

    color:white;

}
/*==================================================
                SOLUCIONES
==================================================*/

.solutions{

    padding:170px 0 120px;

}



.solutions-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(320px,1fr));

    gap:30px;

    margin-top:70px;

    align-items:stretch;

}

.solution-card{

    position: relative;

    overflow: hidden;

    padding: 35px;

    min-height: 280px;

    border-radius: 28px;

    background: rgba(255,255,255,.05);

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(20px);

    transition: all .35s ease;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}

.solution-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transition:.8s;

}

.solution-card:hover::before{

    left:100%;

}

.solution-card:hover{

    transform:translateY(-10px);

    border-color:#3DA9FC;

    box-shadow:0 25px 60px rgba(61,169,252,.18);

}

.solution-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    background:linear-gradient(135deg,#3A7BFF,#14D3FF);

    margin-bottom:22px;

}

.solution-card h3{

    font-size:1.5rem;

    margin-bottom:15px;

}

.solution-card p{

    color:#b7c7df;

    line-height:1.7;

    font-size:.98rem;

}
/*==================================================
            ECOSISTEMA TECNOLÓGICO
==================================================*/

/*=========================
TECNOLOGÍAS
=========================*/

.technologies-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:30px;

    margin-top:70px;

}

.solution-card:hover::after,
.eco-card:hover::after{

    opacity:1;

}
.tech-card{

    padding:35px;

    border-radius:24px;

    background:rgba(22,29,55,.90);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.35s;

    position:relative;

    overflow:hidden;

}
.tech-card:hover{

    transform:translateY(-10px);

    border-color:#29B6FF;

    box-shadow:0 0 35px rgba(41,182,255,.25);

}
.tech-icon{

    width:72px;

    height:72px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    margin-bottom:25px;

    background:linear-gradient(135deg,#276EF1,#29D3FF);

}
.tech-card h3{

    font-size:26px;

    margin-bottom:12px;

}
.tech-card p{

    color:var(--text-light);

    line-height:1.8;

}
.tech-card::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:radial-gradient(circle,
    rgba(41,182,255,.18),
    transparent 70%);

    top:-120px;

    right:-120px;

    opacity:0;

    transition:.4s;

}
.tech-card:hover::before{

    opacity:1;

}
.tech-chip{

    text-decoration: none;
    color: inherit;

}

.tech-chip:hover{

    text-decoration: none;
    color: #ffffff;

}
.youtube-section{

padding:120px 0;

}

.youtube-box{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

margin-top:70px;

}

.youtube-info ul{

margin-top:30px;

display:grid;

gap:12px;

}

.youtube-info li{

color:#cfd8e3;

font-size:17px;

}

.youtube-preview img{

width:100%;

border-radius:24px;

border:1px solid rgba(255,255,255,.08);

box-shadow:0 25px 80px rgba(0,0,0,.4);

transition:.4s;

}

.youtube-preview img:hover{

transform:scale(1.02);

}
/*==================================================
            RECURSOS
==================================================*/

.resources{

    padding:150px 0;

}

.resources-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:70px;

}

.resource-card{

    padding:35px;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    transition:.35s;

    text-align:center;

}

.resource-card:hover{

    transform:translateY(-8px);

    border-color:#3DA9FC;

    box-shadow:0 20px 40px rgba(61,169,252,.20);

}

.resource-icon{

    font-size:2.5rem;

    margin-bottom:20px;

}
/*=================================
CONTACTO
==================================*/

.contact{

padding:160px 0;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.contact-list{

margin-top:40px;

display:grid;

gap:25px;

}

.contact-item{

display:flex;

gap:20px;

align-items:center;

}

.contact-icon{

width:65px;

height:65px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#2A74FF,#28D7FF);

font-size:1.5rem;

}

.contact-form{

padding:45px;

background:rgba(255,255,255,.05);

border-radius:28px;

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

}

.contact-form form{

display:grid;

gap:20px;

}

.contact-form input,
.contact-form textarea{

padding:18px;

border:none;

border-radius:16px;

background:rgba(255,255,255,.05);

color:white;

font-size:16px;

}
/*=================================
FOOTER
==================================*/

footer{

padding:80px 0 30px;

border-top:1px solid rgba(255,255,255,.08);

background:#070B18;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:50px;

}

.footer-grid h4{

margin-bottom:20px;

}

.footer-grid a{

display:block;

margin-bottom:12px;

color:#cbd5e1;

transition:.3s;

}

.footer-grid a:hover{

color:#3DA9FC;

}

.footer-logo{

max-width:220px;

margin-bottom:20px;

}

.copyright{

margin-top:60px;

text-align:center;

opacity:.6;

font-size:.9rem;

}
.tech-card{
    display:block;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:.35s;
}
/*==================================
    ENLACES LEGALES
==================================*/

.footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    flex-wrap:wrap;

    margin:20px auto 0;

    width:100%;

    text-align:center;

}

.footer-links a{

    color:#cbd5e1;

    text-decoration:none;

    transition:.3s;

}

.footer-links a:hover{

    color:#3DA9FC;

}

.tech-card:hover{

    transform:translateY(-8px);

    border-color:#3ba4ff;

    box-shadow:0 15px 40px rgba(0,150,255,.18);

}

.tech-card:hover .tech-icon{

    transform:scale(1.12);

}


/*==================================
    PÁGINAS LEGALES
==================================*/

.legal-page{

    padding:160px 0 100px;

}

.legal-page .container{

    max-width:900px;

}

.legal-page h1{

    font-size:3rem;

    margin-bottom:20px;

    color:var(--white);

}

.legal-page h2{

    margin-top:40px;

    margin-bottom:15px;

    color:var(--primary);

}

.legal-page p,
.legal-page li{

    line-height:1.9;

    color:var(--text-light);

}

.legal-page ul{

    margin:20px 0 20px 25px;

}

.legal-page hr{

    margin:35px 0;

    border:none;

    height:1px;

    background:rgba(255,255,255,.1);

}

.legal-page .btn-primary{

    display:inline-block;

    margin-top:50px;

}
/*==================================
        CENTRO DE CONTENIDO
==================================*/

.content-page{

    padding:150px 0 100px;

}

.content-header{

    text-align:center;

    margin-bottom:70px;

}

.content-header h1{

    font-size:3rem;

    margin-bottom:20px;

}

.content-header p{

    max-width:760px;

    margin:auto;

    color:var(--text-light);

    line-height:1.8;

}

/* GRID */

.content-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

    gap:35px;

}

/* TARJETA */

.content-card{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

}

.content-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.content-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.content-info{

    padding:28px;

}

.content-category{

    display:inline-block;

    padding:6px 14px;

    border-radius:30px;

    background:rgba(58,134,255,.15);

    color:var(--primary);

    font-size:.85rem;

    margin-bottom:18px;

}

.content-info h3{

    margin-bottom:15px;

    font-size:1.4rem;

}

.content-info p{

    color:var(--text-light);

    line-height:1.7;

    margin-bottom:25px;

}

.read-more{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

}

.read-more:hover{

    gap:14px;

}
/*==================================
        ARTÍCULOS
==================================*/

.article-page{

    padding:150px 0 100px;

}

.article-header{

    max-width:900px;

    margin:auto;

}

.article-category{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(58,134,255,.15);

    color:var(--primary);

    margin-bottom:20px;

}

.article-header h1{

    font-size:3.2rem;

    margin-bottom:25px;

}

.article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:40px;

    color:var(--text-light);

}

.article-header img{

    width:100%;

    border-radius:22px;

    margin-bottom:60px;

}

.article-content{

    max-width:850px;

    margin:auto;

}

.article-content h2{

    margin-top:50px;

    margin-bottom:20px;

    color:var(--primary);

}

.article-content p{

    line-height:2;

    margin-bottom:25px;

    color:var(--text-light);

}

.article-content ul{

    margin:25px;

}

.article-content li{

    margin-bottom:15px;

}

.article-highlight{

    background:rgba(58,134,255,.08);

    border-left:4px solid var(--primary);

    padding:25px;

    margin:40px 0;

    border-radius:12px;

}

.article-navigation{

    display:flex;

    justify-content:space-between;

    margin-top:80px;

    flex-wrap:wrap;

    gap:20px;

}

.back-link{

    display:inline-block;

    margin-bottom:35px;

    text-decoration:none;

    color:var(--primary);

    font-weight:600;

}
/*=========================================
        BIBLIOTECA IA
=========================================*/

.library-section{

    padding:80px 0;

}

.library-title{

    font-size:2rem;

    margin-bottom:10px;

}

.library-description{

    color:var(--text-secondary);

    margin-bottom:40px;

}

.prompt-card{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:30px;

    transition:.3s;

}

.prompt-card:hover{

    transform:translateY(-6px);

}

.prompt-category{

    display:inline-block;

    background:var(--primary);

    color:#fff;

    padding:6px 14px;

    border-radius:20px;

    font-size:.85rem;

    margin-bottom:15px;

}

.prompt-card h3{

    margin-bottom:10px;

}

.prompt-card small{

    display:block;

    margin-bottom:20px;

    opacity:.7;

}

.prompt-card pre{

    background:#111827;

    color:#f8fafc;

    padding:20px;

    border-radius:12px;

    overflow:auto;

    white-space:pre-wrap;

    line-height:1.7;

    margin:20px 0;

}

.copy-button{

    border:none;

    background:var(--primary);

    color:#fff;

    padding:12px 22px;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

}

.copy-button:hover{

    transform:translateY(-2px);

}