@layer base, layout, components, utilities;

/* ==========================================================
   BASE
========================================================== */

@layer base {

    :root{
        --dark:#07111f;
        --blue:#0b5cff;
        --cyan:#00d4ff;
        --soft:#f4f7fb;
        --text:#334155;
    }

    body{
        font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
        color:var(--text);
        background:#fff;
    }

}

/* ==========================================================
   LAYOUT
========================================================== */

@layer layout {

    .section{
        padding:90px 0;
    }

    .hero{
        background:
            radial-gradient(circle at top right,rgba(0,212,255,.25),transparent 30%),
            linear-gradient(135deg,#07111f 0%,#0b1730 55%,#092045 100%);
        color:#fff;
        padding:150px 0 90px;
        overflow:hidden;
    }

    .bg-soft{
        background:var(--soft);
    }

}

/* ==========================================================
   COMPONENTES
========================================================== */

@layer components {

    /* ---------------- Navbar ---------------- */

    .navbar{
        background:rgba(7,17,31,.92);
        backdrop-filter:blur(12px);
    }

    .logo-navbar{
        height:48px;
        width:auto;
        display:block;
    }

    .navbar-brand{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .nav-link{
        color:rgba(255,255,255,.8)!important;
        font-weight:500;
    }

    /* ---------------- Hero ---------------- */

    .hero-logo{
        width:430px;
        max-width:100%;
        height:auto;
        display:block;
        margin-bottom:40px;
    }

    .hero h1{
        font-size:clamp(2.5rem,5vw,4.8rem);
        font-weight:900;
        line-height:1;
        letter-spacing:-2px;
    }

    .hero h1 span{
        color:var(--cyan);
    }

    .hero p{
        font-size:1.2rem;
        color:rgba(255,255,255,.78);
        max-width:680px;
    }

    /* ---------------- Footer ---------------- */

    footer{
        background:#07111f;
        color:rgba(255,255,255,.72);
        padding:60px 0 25px;
    }

    footer strong{
        color:#fff;
    }

    .footer-logo{
        width:230px;
        height:auto;
        display:block;
        margin-bottom:20px;
    }

    /* ---------------- Botones ---------------- */

    .btn-main{
        background:linear-gradient(135deg,var(--blue),var(--cyan));
        color:#fff;
        border:0;
        font-weight:700;
        padding:14px 26px;
        border-radius:999px;
    }

    .btn-main:hover{
        color:#fff;
        transform:translateY(-2px);
    }

    .btn-outline-light{
        border-radius:999px;
        padding:14px 26px;
        font-weight:700;
    }

    /* ---------------- Cards ---------------- */

    .section-title{
        font-weight:900;
        letter-spacing:-1px;
        color:var(--dark);
    }

    .card-soft{
        border:1px solid #e5e7eb;
        border-radius:24px;
        padding:30px;
        height:100%;
        background:#fff;
        box-shadow:0 20px 45px rgba(15,23,42,.06);
        transition:.25s;
    }

    .card-soft:hover{
        transform:translateY(-6px);
        box-shadow:0 25px 60px rgba(15,23,42,.1);
    }

    .icon-box{
        width:58px;
        height:58px;
        border-radius:18px;
        display:grid;
        place-items:center;
        background:linear-gradient(
            135deg,
            rgba(11,92,255,.12),
            rgba(0,212,255,.20)
        );
        color:var(--blue);
        font-size:1.7rem;
        margin-bottom:18px;
    }

    .profile{
        border-radius:28px;
        background:#fff;
        padding:32px;
        border:1px solid #e5e7eb;
        box-shadow:0 20px 45px rgba(15,23,42,.06);
    }

    .avatar{
        width:92px;
        height:92px;
        border-radius:50%;
        background:linear-gradient(135deg,var(--blue),var(--cyan));
        color:#fff;
        font-size:2rem;
        font-weight:900;
        display:grid;
        place-items:center;
        margin-bottom:18px;
    }

    .process-number{
        width:42px;
        height:42px;
        border-radius:50%;
        background:var(--dark);
        color:#fff;
        display:grid;
        place-items:center;
        font-weight:800;
        margin-bottom:15px;
    }

    .cta{
        background:linear-gradient(135deg,#07111f,#0b5cff);
        color:#fff;
        border-radius:34px;
        padding:60px;
    }

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@layer utilities {

    @media (max-width:768px){

        .hero{
            padding:120px 0 70px;
        }

        .hero-logo{
            width:280px;
        }

        .logo-navbar{
            height:40px;
        }

        .footer-logo{
            width:170px;
        }

        .cta{
            padding:35px 24px;
        }

    }

}