:root {
    --background: #02060d;
    --background-soft: #06101d;

    --text: #f4f8fc;
    --muted: #8b9caf;
    --muted-dark: #607287;

    --blue: #168cff;
    --cyan: #31baff;
    --orange: #f5a21a;

    --border: rgba(90, 165, 255, .15);

    --max: 1200px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-height: 100vh;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(22,140,255,.11),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 50%,
            rgba(245,162,26,.045),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #010409,
            #06101c 55%,
            #010409
        );

    line-height: 1.6;
}


/* Fondo técnico */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(49,186,255,.02) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(49,186,255,.02) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 88%
        );
}


/* Página */

.page {
    position: relative;
    z-index: 1;

    width: min(
        calc(100% - 42px),
        var(--max)
    );

    margin: auto;
}


/* Header */

.topbar {
    height: 76px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}

.brand {
    font-size: 15px;
    font-weight: 750;

    letter-spacing: .18em;
}

.topbar-note {
    color: var(--muted-dark);

    font-size: 11px;

    letter-spacing: .13em;

    text-transform: uppercase;
}


/* Banner */

.banner-section {
    padding-top: 34px;
}

.banner-frame {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(49,186,255,.17);

    border-radius: 18px;

    background: #01050b;

    box-shadow:
        0 28px 90px rgba(0,0,0,.42),
        0 0 65px rgba(22,140,255,.07);
}

.banner-frame::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 55px rgba(0,0,0,.22);
}

.banner {
    display: block;

    width: 100%;
    height: auto;
}


/* Intro */

.intro {
    max-width: 850px;

    margin: auto;

    padding:
        90px 0 92px;

    text-align: center;
}

.kicker,
.section-index {
    color: var(--cyan);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 10px;

    letter-spacing: .17em;

    text-transform: uppercase;
}

.kicker {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 23px;
}

.kicker::before,
.kicker::after {
    content: "";

    width: 34px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--blue)
        );
}

h1 {
    margin: 0;

    font-size:
        clamp(42px, 6vw, 70px);

    line-height: 1;

    letter-spacing: -.055em;

    font-weight: 730;
}

h1 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #a5d9ff 55%,
            #ffc15c
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.lead {
    max-width: 730px;

    margin:
        29px auto 0;

    color: var(--muted);

    font-size:
        clamp(16px,2vw,19px);

    line-height: 1.8;
}


/* Separador */

.section-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(22,140,255,.55),
            rgba(245,162,26,.30),
            transparent
        );
}


/* Áreas */

.areas {
    padding-bottom: 110px;
}

.section-heading {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;

    margin:
        46px 0 31px;
}

.section-heading h2 {
    margin:
        9px 0 0;

    font-size: 31px;

    letter-spacing: -.035em;
}

.section-heading p {
    max-width: 440px;

    margin: 0;

    color: var(--muted);

    font-size: 14px;
}


/* Cards */

.cards {
    display: grid;

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

    gap: 15px;
}

.card {
    position: relative;

    min-height: 205px;

    padding: 27px;

    overflow: hidden;

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

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(9,25,46,.82),
            rgba(3,9,18,.76)
        );

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 2px;
    height: 100%;

    opacity: .65;

    background:
        linear-gradient(
            var(--blue),
            transparent 72%
        );
}

.card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(49,186,255,.28);

    background:
        linear-gradient(
            145deg,
            rgba(12,34,62,.90),
            rgba(3,9,18,.82)
        );
}

.number {
    color: var(--orange);

    font-family:
        Consolas,
        monospace;

    font-size: 11px;
}

.card h3 {
    margin:
        29px 0 10px;

    font-size: 17px;

    font-weight: 650;
}

.card p {
    margin: 0;

    color: #8092a8;

    font-size: 13px;

    line-height: 1.7;
}


/* Enfoque */

.about {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 90px;

    align-items: center;

    padding:
        85px 0;

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

    border-bottom:
        1px solid rgba(255,255,255,.06);
}

.about h2 {
    margin:
        13px 0 20px;

    font-size:
        clamp(35px,4vw,52px);

    line-height: 1.05;

    letter-spacing:
        -.045em;
}

.about-copy p {
    max-width: 540px;

    margin: 0;

    color: var(--muted);

    font-size: 15px;
}

.principles {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    border-top:
        1px solid var(--border);

    border-left:
        1px solid var(--border);
}

.principles div {
    min-height: 100px;

    padding: 22px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-right:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);
}

.principles span {
    color: var(--orange);

    font-family:
        Consolas,
        monospace;

    font-size: 10px;
}

.principles strong {
    font-size: 14px;

    font-weight: 600;
}


/* Contacto */

.contact {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 60px;

    padding:
        100px 0;
}

.contact h2 {
    margin:
        10px 0 7px;

    font-size:
        clamp(35px,4vw,52px);

    letter-spacing:
        -.045em;
}

.contact p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
}

.email {
    display: flex;

    align-items: center;

    gap: 22px;

    padding:
        17px 21px;

    border:
        1px solid rgba(49,186,255,.27);

    border-radius: 9px;

    color: #e1efff;

    background:
        rgba(7,25,47,.66);

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.email:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(49,186,255,.55);

    background:
        rgba(10,38,70,.78);
}

.email b {
    color: var(--orange);

    font-size: 20px;

    font-weight: 400;
}


/* Footer */

footer {
    min-height: 105px;

    display: flex;

    justify-content: space-between;
    align-items: center;

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

    color: #607287;

    font-size: 11px;
}

footer strong {
    color: #9cadc0;

    letter-spacing: .12em;

    font-weight: 650;
}


/* Tablet */

@media (max-width: 900px) {

    .cards {
        grid-template-columns:
            repeat(2,1fr);
    }

    .about {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .contact {
        align-items: flex-start;

        flex-direction: column;
    }
}


/* Móvil */

@media (max-width: 600px) {

    .page {
        width:
            calc(100% - 26px);
    }

    .topbar {
        height: 65px;
    }

    .topbar-note {
        display: none;
    }

    .banner-section {
        padding-top: 20px;
    }

    .banner-frame {
        border-radius: 10px;
    }

    .banner {
        min-height: 140px;

        object-fit: cover;
        object-position: center;
    }

    .intro {
        padding:
            60px 0 70px;
    }

    h1 {
        font-size: 44px;
    }

    .section-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

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

    .about {
        padding:
            65px 0;
    }

    .contact {
        padding:
            70px 0;
    }

    .email {
        width: 100%;

        justify-content: space-between;

        font-size: 13px;

        word-break: break-word;
    }

    footer {
        padding:
            30px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }
}