body{
    background:#061321;
}

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

.about-hero{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 85% 25%, rgba(0,207,232,.16), transparent 34%),
        linear-gradient(180deg,#061321,#071827);
}

.about-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:58px 58px;
    opacity:.35;
    pointer-events:none;
}

.page-hero-grid{
    position:relative;
    z-index:2;
}

/* =========================
   EDITORIAL SECTIONS
========================= */

.about-editorial{
    position:relative;
    overflow:hidden;
    background:#061321;
}

.about-editorial::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,207,232,.12), transparent 70%);
    filter:blur(20px);
    pointer-events:none;
}

.about-editorial:nth-of-type(odd)::before{
    right:-260px;
    top:20%;
}

.about-editorial:nth-of-type(even)::before{
    left:-260px;
    top:20%;
}

.editorial-row{
    min-height:720px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
}

.editorial-row.reverse .editorial-copy{
    order:2;
}

.editorial-row.reverse .editorial-media{
    order:1;
}

.editorial-copy{
    position:relative;
    z-index:3;
    padding:80px 8vw;
}

.editorial-copy::before{
    content:"";
    position:absolute;
    width:180px;
    height:2px;
    top:45px;
    left:8vw;
    background:linear-gradient(90deg,var(--cyan),transparent);
    opacity:.65;
}

.editorial-copy h2{
    font-size:clamp(3rem,5.4vw,6.2rem);
    line-height:.9;
    letter-spacing:-.06em;
    margin-bottom:34px;
    max-width:780px;
}

.editorial-copy p:not(.eyebrow){
    max-width:640px;
    font-size:1.12rem;
    line-height:1.9;
    color:#b9c8d7;
    margin-bottom:22px;
}

.editorial-media{
    position:relative;
    height:720px;
    overflow:hidden;
    z-index:2;
}

.editorial-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.04);
    filter:saturate(1.08) contrast(1.08);
    transition:1s ease;
}

.editorial-row:hover .editorial-media img{
    transform:scale(1.09);
}

.media-right{
    clip-path:polygon(0 0,100% 0,100% 100%,16% 100%);
}

.media-left{
    clip-path:polygon(0 0,100% 0,84% 100%,0 100%);
}

.media-right::after,
.media-left::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
}

.media-right::after{
    background:
        linear-gradient(90deg,#061321 0%,rgba(6,19,33,.75) 8%,transparent 32%),
        linear-gradient(180deg,rgba(6,19,33,.18),#061321 105%);
}

.media-left::after{
    background:
        linear-gradient(270deg,#061321 0%,rgba(6,19,33,.75) 8%,transparent 32%),
        linear-gradient(180deg,rgba(6,19,33,.18),#061321 105%);
}

.editorial-media::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:
        radial-gradient(circle at 50% 50%, rgba(0,207,232,.18), transparent 45%);
    mix-blend-mode:screen;
    pointer-events:none;
}

/* =========================
   FINAL CTA
========================= */

.about-final{
    position:relative;
    overflow:hidden;
    padding:150px 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(0,207,232,.18), transparent 35%),
        linear-gradient(180deg,#061321,#04101c);
}

.about-final::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:60px 60px;
    opacity:.35;
    pointer-events:none;
}

.final-content{
    position:relative;
    z-index:2;
    max-width:950px;
    margin:0 auto;
    text-align:center;
}

.final-content h2{
    font-size:clamp(3rem,5vw,5.8rem);
    line-height:.9;
    letter-spacing:-.06em;
    margin-bottom:28px;
}

.final-content p:not(.eyebrow){
    max-width:620px;
    margin:0 auto 34px;
    font-size:1.12rem;
    line-height:1.8;
    color:#b9c8d7;
}
/* =========================
   HEADER
========================= */

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

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

    padding:18px 50px;

    background:transparent;

    transition:.35s ease;
}

.site-header.scrolled{
    background:rgba(5,12,25,.85);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.brand{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.brand-logo{
    height:60px;
    width:auto;
    display:block;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:8px;
}

.main-nav a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    padding:12px 18px;
    border-radius:14px;
    transition:.3s;
}

.main-nav a:hover{
    color:#25d8ff;
    background:rgba(37,216,255,.08);
    transform:translateY(-2px);
}

.main-nav a.active{
    color:#25d8ff;
    background:rgba(37,216,255,.10);
}

.nav-toggle{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
}

.nav-toggle span{
    display:block;
    width:28px;
    height:3px;
    margin:5px 0;
    border-radius:20px;
    background:#fff;
}
/* =========================
   RESPONSIVE
========================= */

@media(max-width:1000px){

    .editorial-row,
    .editorial-row.reverse{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .editorial-row.reverse .editorial-copy,
    .editorial-row.reverse .editorial-media{
        order:initial;
    }

    .editorial-copy{
        padding:70px 24px 45px;
    }

    .editorial-copy::before{
        left:24px;
        top:42px;
    }

    .editorial-media{
        height:420px;
        clip-path:none;
    }

    .media-right::after,
    .media-left::after{
        background:
            linear-gradient(180deg,transparent 0%,#061321 100%),
            linear-gradient(90deg,#061321 0%,transparent 25%,transparent 75%,#061321 100%);
    }

    .editorial-copy h2{
        font-size:clamp(2.5rem,12vw,4.2rem);
    }

    .editorial-copy p:not(.eyebrow){
        font-size:1rem;
    }

    .about-final{
        padding:100px 0;
    }
    .site-header{
    padding:15px 20px;
}

.brand-logo{
    height:48px;
}

.nav-toggle{
    display:block;
    z-index:10001;
}

.main-nav{
    position:fixed;
    top:0;
    right:-100%;
    width:280px;
    height:100vh;

    background:#08111f;

    flex-direction:column;
    justify-content:center;
    align-items:center;

    transition:.35s ease;
}

.main-nav.open{
    right:0;
}
}