body{
    margin:0;
    font-family: 'Inter', sans-serif;
    background:#0b0f19;
    color:#1f2937;
}

/* LAYOUT */

.layout{
    display:flex;
}

/* SIDEBAR */

.sidebar{
    width:270px;
    background:#020617;
    padding:30px 25px;
    min-height:100vh;
    position:fixed;
    border-right:1px solid rgba(255,255,255,0.05);
}

.sidebar h2{
    color:white;
    font-size:20px;
    margin-bottom:30px;
}

.sidebar nav a{
    display:block;
    color:#94a3b8;
    text-decoration:none;
    margin-bottom:12px;
    padding:10px 12px;
    border-radius:8px;
    font-size:14px;
    transition:.2s;
}

.sidebar nav a:hover{
    background:#1e293b;
    color:white;
}

/* CONTENIDO */

.content{
    margin-left:270px;
    padding:60px;
    width:100%;
    max-width:1100px;
}

/* CONTENEDOR DOCUMENTO */

.content-inner{
    background:white;
    padding:60px;
    border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
}

/* TITULOS */

h1{
    font-size:38px;
    font-weight:800;
    margin-bottom:25px;
    color:#0f172a;
}

h2{
    font-size:22px;
    margin-top:40px;
    margin-bottom:15px;
    color:#1e40af;
}

/* TEXTO */

p{
    line-height:1.7;
    margin-bottom:15px;
}

/* BLOQUES */

.card-block{
    background:#f8fafc;
    padding:25px;
    border-radius:12px;
    margin-bottom:25px;
    border-left:4px solid #3b82f6;
}

/* INSIGHT */

.insight{
    background:#eef2ff;
    border-left:5px solid #6366f1;
}

/* WARNING */

.warning{
    background:#fff7ed;
    border-left:5px solid #f97316;
}

/* SUCCESS */

.success{
    background:#ecfdf5;
    border-left:5px solid #10b981;
}

/* LISTAS */

ul{
    padding-left:20px;
}

li{
    margin-bottom:8px;
}
.list-icon{
    list-style:none;
    padding-left:0;
}

.list-icon li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:10px;
}

.list-icon i{
    color:#3b82f6;
    font-size:16px;
    margin-top:3px;
}


/* BOTON MENU */

.btn-toggle{
    position:fixed;
    top:15px;
    left:15px;
    z-index:1001;
    background:#020617;
    border:none;
    color:white;
    font-size:22px;
    padding:8px 12px;
    border-radius:8px;
    display:none;
}

/* MOBILE */

@media (max-width: 992px){

    .btn-toggle{
        display:block;
    }

    .sidebar{
        transform:translateX(-100%);
        transition:0.3s ease;
        z-index:1000;
    }

    .sidebar.active{
        transform:translateX(0);
    }

    .content{
        margin-left:0;
        padding:25px;
    }

    .content-inner{
        padding:25px;
    }

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

.portada-wrap{
    padding:60px 20px;
    background:#1e0a3c;
    min-height:100vh;
}

/* TITULO */

.titulo{
    font-size:34px;
    font-weight:800;
}

.sub{
    color:#cbd5e1;
}

/* GRID */

.grid-tarjetas{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap:25px;
    max-width:1000px;
    margin:40px auto;
}

/* TARJETA */

.tarjeta{
    background:#ffffff;
    border-radius:14px;
    padding:25px;
    text-align:center;
    cursor:pointer;
    transition:.25s;
}

/* HOVER */

.tarjeta:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 40px rgba(0,0,0,0.2);
}

/* ICONO */

.tarjeta-icono{
    width:60px;
    height:60px;
    margin:auto;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#3b82f6,#6366f1);
    color:white;
    font-size:24px;
    margin-bottom:15px;
}

/* TITULO TARJETA */

.tarjeta-titulo{
    font-weight:600;
    color:#0f172a;
}

/* LOGO */

.logo{
    max-width:80px;
}

/* TITULO */

.titulo-seccion{
    font-size:36px;
    font-weight:800;
    margin-bottom:30px;
}

/* GRID */

.grid-seccion{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:25px;
}

/* TARJETAS */

.card-bloque{
    background:#f1f3f5;
    border-radius:14px;
    padding:25px;
}

/* DESTACADA */

.card-bloque.highlight{
    background:#f5e9dc;
    border-left:4px solid #ff7a00;
}

/* FULL WIDTH */

.card-bloque.full{
    grid-column: span 2;
}

/* LISTA */

.lista{
    list-style:none;
    padding:0;
}

.lista li{
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:10px;
}

.lista i{
    color:#3b82f6;
}

/* RESPONSIVE */

@media(max-width:768px){

    .grid-seccion{
        grid-template-columns: 1fr;
    }

    .card-bloque.full{
        grid-column: span 1;
    }

}