:root {

    --bg: #090909;

    --surface: #111111;

    --surface-2: #171717;

    --text: #f5f3ef;

    --muted: #aaa7a1;

    --accent: #f2a900;

    --accent-soft: #ffc44d;

    --line: rgba(255,255,255,.11);

    --max: 1240px;

}



* {
    box-sizing: border-box;
}



html {
    scroll-behavior: smooth;
}



body {

    margin: 0;

    background: var(--bg);

    color: var(--text);

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

    line-height: 1.55;

}



/* =========================
   TEXTURA
========================= */

.noise {

    position: fixed;

    inset: 0;

    pointer-events: none;

    opacity: .025;

    z-index: 20;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

}



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

.header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: 84px;

    z-index: 30;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 5vw;

    background: rgba(9,9,9,.72);

    backdrop-filter: blur(16px);

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

}



.brand img {

    width: 110px;

    height: 64px;

    object-fit: contain;

}



.nav {

    display: flex;

    gap: 34px;

}



.nav a {

    color: #ddd;

    text-decoration: none;

    font-size: .86rem;

    letter-spacing: .08em;

    text-transform: uppercase;

    transition:
        color .2s ease;

}



.nav a:hover {

    color: var(--accent);

}



.menu-toggle {

    display: none;

    background: none;

    border: 0;

    cursor: pointer;

}



.menu-toggle span {

    display: block;

    width: 25px;

    height: 2px;

    margin: 5px;

    background: #fff;

}



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

.hero {

    min-height: 100vh;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    padding:
        140px 8vw 90px;

    background:

        radial-gradient(
            circle at 76% 48%,
            rgba(242,169,0,.13),
            transparent 26%
        ),

        radial-gradient(
            circle at 15% 80%,
            rgba(255,255,255,.05),
            transparent 30%
        );

}



.hero-content {

    max-width: 820px;

    position: relative;

    z-index: 2;

}



.eyebrow,
.section-label {

    color: var(--accent);

    font-size: .72rem;

    letter-spacing: .24em;

    font-weight: 700;

}



h1 {

    font-size:
        clamp(3.7rem, 8vw, 8.5rem);

    line-height: .92;

    letter-spacing: -.065em;

    margin:
        20px 0 30px;

    font-weight: 750;

}



h1 em,
h2 em {

    color: var(--accent);

    font-style: normal;

}



.hero-text {

    max-width: 560px;

    color: #bbb;

    font-size: 1.08rem;

}



.hero-actions {

    display: flex;

    gap: 14px;

    margin-top: 38px;

    flex-wrap: wrap;

}



.btn {

    padding:
        14px 21px;

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

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: .08em;

    font-size: .72rem;

    font-weight: 700;

    transition:
        .25s ease;

}



.btn-primary {

    background: var(--accent);

    color: #111;

    border-color: var(--accent);

}



.btn-primary:hover {

    background: var(--accent-soft);

    transform:
        translateY(-2px);

}



.btn-ghost {

    color: #fff;

}



.btn-ghost:hover {

    border-color: var(--accent);

    color: var(--accent);

}



.scroll-indicator {

    position: absolute;

    bottom: 30px;

    left: 8vw;

    font-size: .62rem;

    letter-spacing: .2em;

    color: #777;

    display: flex;

    align-items: center;

    gap: 12px;

}



.scroll-indicator span {

    width: 36px;

    height: 1px;

    background: #777;

}



.hero-glow {

    position: absolute;

    width: 520px;

    height: 520px;

    right: 7%;

    top: 24%;

    border:
        1px solid rgba(242,169,0,.17);

    border-radius: 50%;

    box-shadow:
        0 0 100px rgba(242,169,0,.08),
        inset 0 0 80px rgba(242,169,0,.05);

}



.hero-glow::after {

    content: "";

    position: absolute;

    inset: 14%;

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

    border-radius: 50%;

}



/* =========================
   SECCIONES
========================= */

.section {

    max-width: var(--max);

    margin: auto;

    padding:
        120px 5vw;

}



.intro {

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

}



.intro-grid {

    display: grid;

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

    gap: 10vw;

    margin-top: 28px;

}



h2 {

    font-size:
        clamp(2.5rem, 5vw, 5.2rem);

    line-height: .98;

    letter-spacing: -.055em;

    margin:
        18px 0;

}



h2 span {

    color: #76736e;

}



.lead {

    color: #eee;

    font-size: 1.25rem;

    line-height: 1.5;

}



.intro-grid p:not(.lead) {

    color: var(--muted);

}



/* =========================
   ESPACIOS
========================= */

.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 30px;

    margin-bottom: 45px;

}



.section-heading > p {

    color: var(--muted);

    max-width: 310px;

    margin: 0;

}



/* GRID */

.spaces-grid {

    display: grid;

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

    gap: 18px;

}



/* TARJETA */

.space-card {

    background:
        var(--surface);

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

    overflow: hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}



.space-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(242,169,0,.55);

    box-shadow:
        0 15px 40px rgba(0,0,0,.35);

}



/* =========================
   FOTO
========================= */

.space-image {

    position: relative;

    height: 230px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #181818,
            #0c0c0c
        );

}



.space-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .65s ease;

}



.space-card:hover
.space-image img {

    transform:
        scale(1.08);

}



/* OSCURECIDO */

.image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.08),
            rgba(0,0,0,.35)
        );

    pointer-events: none;

    transition:
        background .4s ease;

}



.space-card:hover
.image-overlay {

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.05),
            rgba(242,169,0,.12)
        );

}



/* =========================
   INFORMACIÓN
========================= */

.space-info {

    padding:
        18px 20px 22px;

    background:
        linear-gradient(
            180deg,
            #151515,
            #111111
        );

}



.space-number {

    display: block;

    color:
        var(--accent);

    font-size:
        .66rem;

    font-weight:
        700;

    letter-spacing:
        .18em;

    margin-bottom:
        7px;

}



.space-info h3 {

    font-size:
        1.45rem;

    line-height:
        1.1;

    margin:
        0 0 8px;

    letter-spacing:
        -.035em;

}



.space-info p {

    color: #85827d;

    font-size: .82rem;

    line-height: 1.45;

    margin: 0;

    text-align: justify;

    hyphens: auto;

}



/* =========================
   EXPERIENCIA
========================= */

.experience {

    max-width: none;

    background:
        linear-gradient(
            110deg,
            #111 0%,
            #0b0b0b 55%,
            #15110a 100%
        );

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

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

}



.experience-inner {

    max-width:
        var(--max);

    margin:
        auto;

    padding:
        30px 5vw 20px;

}



.experience h2 {

    max-width:
        800px;

}



.experience p {

    max-width:
        600px;

    color:
        var(--muted);

    font-size:
        1.05rem;

}



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

.contact {

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

}



.contact-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10vw;

    align-items:
        end;

    margin-top:
        20px;

}



.contact-details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;

}



.contact-details a {

    color:
        #fff;

    text-decoration:
        none;

    font-size:
        1.4rem;

    transition:
        color .2s ease;

}



.contact-details a:hover {

    color:
        var(--accent);

}



.contact-details span {

    color:
        #777;

}



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

.footer {

    max-width:
        var(--max);

    margin:
        auto;

    padding:
        45px 5vw;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #686560;

    font-size:
        .72rem;

}



.footer img {

    width:
        95px;

    height:
        45px;

    object-fit:
        contain;

}



/* =========================
   TABLET
========================= */

@media (max-width: 1050px) {

    .spaces-grid {

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

    }

}



/* =========================
   MÓVIL
========================= */

@media (max-width: 800px) {


    .header {

        height:
            72px;

    }



    .nav {

        display:
            none;

        position:
            absolute;

        top:
            72px;

        left:
            0;

        right:
            0;

        padding:
            25px 7vw;

        background:
            #0c0c0c;

        flex-direction:
            column;

        gap:
            20px;

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

    }



    .nav.open {

        display:
            flex;

    }



    .menu-toggle {

        display:
            block;

    }



    .hero {

        padding:
            130px 7vw 90px;

    }



    .hero-glow {

        width:
            280px;

        height:
            280px;

        right:
            -80px;

        top:
            30%;

    }



    h1 {

        font-size:
            clamp(
                3.3rem,
                16vw,
                6rem
            );

    }



    .section {

        padding:
            90px 7vw;

    }



    .intro-grid,
    .contact-grid {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }



    .section-heading {

        display:
            block;

    }



    .section-heading > p {

        margin-top:
            25px;

    }



    .spaces-grid {

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

        gap:
            12px;

    }



    .space-image {

        height:
            190px;

    }



    .space-info {

        padding:
            16px;

    }



    .space-info h3 {

        font-size:
            1.2rem;

    }



    .space-info p {

        font-size:
            .75rem;

    }



    .footer {

        flex-wrap:
            wrap;

    }

}



/* =========================
   MÓVIL PEQUEÑO
========================= */

@media (max-width: 520px) {


    .spaces-grid {

        grid-template-columns:
            1fr;

    }



    .space-image {

        height:
            250px;

    }



    .space-info {

        padding:
            18px;

    }



    .space-info h3 {

        font-size:
            1.35rem;

    }

}