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

.hero-home{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;

    margin-bottom:-80px;
    padding-bottom:80px;
}

    /* IMAGEN FONDO */

    .hero-bg{
        position:absolute;
        inset:0;
        z-index:1;
    }

    .hero-bg img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center center;
        display:block;
    }

    .hero-desktop-bg{
        display:block;
    }

    .hero-mobile-bg{
        display:none;
    }

    /* OSCURECER PARA LEER TEXTO */

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
        linear-gradient(
            90deg,
            rgba(4,12,24,.92) 0%,
            rgba(4,12,24,.85) 25%,
            rgba(4,12,24,.65) 45%,
            rgba(4,12,24,.35) 65%,
            rgba(4,12,24,.15) 85%,
            rgba(4,12,24,.05) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,0) 55%,
            rgba(6,19,33,.25) 70%,
            rgba(6,19,33,.65) 85%,
            #061321 100%
        );
}

    .hero-home::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:3;

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

        background-size:56px 56px;

        opacity:.5;
    }

    .hero-home::after{
    content:"";
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:260px;

    z-index:4;

    background:linear-gradient(
        to bottom,
        rgba(6,19,33,0) 0%,
        rgba(6,19,33,.20) 25%,
        rgba(6,19,33,.55) 55%,
        rgba(6,19,33,.85) 80%,
        #061321 100%
    );

    pointer-events:none;
}

    /* CONTENIDO */

    .hero-home .container{
        position:relative;
        z-index:10;
        width:100%;
        padding-left:70px;
    }

    .hero-copy{
        max-width:720px;
    }

    .hero-copy h1{
        font-size:clamp(3rem,6vw,6.5rem);
        line-height:.95;
        margin-bottom:24px;
    }

    .hero-lead{
        max-width:650px;
        font-size:1.15rem;
        line-height:1.8;
        color:#d5dee8;
        margin-bottom:35px;
    }

    .hero-actions{
        display:flex;
        gap:15px;
        flex-wrap:wrap;
    }

    

    
    .system-panel {
        width: min(100%, 560px);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 32px;
        background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
        box-shadow: var(--shadow);
        overflow: hidden;
        backdrop-filter: blur(10px)
    }

    .panel-top {
        height: 54px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 0 22px
    }

    .panel-top span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .28)
    }

    .network-map {
        height: 330px;
        position: relative;
        background: radial-gradient(circle at 50% 50%, rgba(0, 207, 232, .13), transparent 45%)
    }

    .network-map svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        fill: none
    }

    .network-map path {
        stroke: rgba(0, 207, 232, .55);
        stroke-width: 1.5;
        stroke-dasharray: 7 8;
        animation: dash 12s linear infinite
    }

    .node {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 24px rgba(0, 207, 232, .8)
    }

    .n1 {
        left: 13%;
        top: 70%
    }

    .n2 {
        left: 48%;
        top: 43%
    }

    .n3 {
        right: 12%;
        top: 27%
    }

    .n4 {
        left: 18%;
        top: 22%
    }

    .n5 {
        right: 14%;
        bottom: 18%
    }

    @keyframes dash {
        to {
            stroke-dashoffset: -220
        }
    }

    .panel-data {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid rgba(255, 255, 255, .1)
    }

    .panel-data div {
        padding: 20px;
        border-right: 1px solid rgba(255, 255, 255, .08)
    }

    .panel-data div:last-child {
        border-right: 0
    }

    .panel-data strong {
        display: block;
        font-size: .78rem;
        letter-spacing: .12em
    }

    .panel-data span {
        display: block;
        color: var(--muted);
        font-size: .78rem;
        margin-top: 5px
    }

    .specialty-section,
.split-section,
.use-cases{
    background:#061321;
}

.specialty-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px
    }

    .specialty-card {
        min-height: 310px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 34px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
        transition: .25s ease
    }

    .specialty-card:hover {
        transform: translateY(-6px);
        border-color: rgba(0, 207, 232, .42)
    }

    .card-number{
        position:absolute;

        top:15px;
        right:20px;

        font-size:7rem;
        font-weight:900;
        line-height:1;

        color:rgba(255,255,255,.04);

        letter-spacing:-4px;

        pointer-events:none;
    }

    .specialty-card h3 {
        margin-top: 92px;
        margin-bottom: 18px
    }

    .specialty-card p {
        font-size: .98rem
    }

    .specialty-list{
        margin:0;
        padding:0;
        list-style:none;

        display:flex;
        flex-direction:column;
        gap:14px;
    }

    .specialty-list li{
        position:relative;

        padding-left:24px;

        color:#c7d3df;

        font-size:.96rem;
    }

    .specialty-list li::before{
        content:"✓";

        position:absolute;

        left:0;
        top:0;

        color:var(--cyan);

        font-weight:700;
    }

.split-grid{
    display:grid;
    grid-template-columns:58% 42%;
    align-items:center;
    gap:40px;
}

.split-copy{
    max-width:720px;
}

.split-copy h2{
    font-size:clamp(2.5rem,3.5vw,4.6rem);
    line-height:1.02;
    letter-spacing:-2px;
    max-width:720px;
    margin-bottom:24px;
}

    .image-frame {
        height: 520px;
        border-radius: 32px;
        border: 1px solid var(--line);
        background: linear-gradient(145deg, rgba(0, 207, 232, .10), rgba(255, 255, 255, .04)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 55px);
        display: flex;
        align-items: flex-end;
        padding: 28px;
        box-shadow: var(--shadow)
    }

    .image-frame span {
        font-size: .76rem;
        letter-spacing: .2em;
        color: #d9faff;
        font-weight: 800
    }

    .split-copy p:not(.eyebrow) {
        font-size: 1.08rem;
        max-width: 600px;
        margin-top: 22px
    }

    .use-cases{
        position:relative;
    }

    .case-row{
        display:grid;
        grid-template-columns:160px 1fr;
        gap:40px;
        align-items:center;

        padding:45px 0;

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

        transition:.35s ease;
    }

    .case-row:last-child{
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .case-row.reverse{
        grid-template-columns:1fr 160px;
    }

    .case-row.reverse .case-icon{
        order:2;
    }

    .case-row.reverse .case-content{
        order:1;
        text-align:right;
    }

    .case-icon{
        width:140px;
        height:140px;

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

        background:none;
        border:none;
        border-radius:0;

        padding:0;
        margin:auto;
    }

    .case-icon::before{
        display:none;
    }

    .case-icon img{
        width:100%;
        height:100%;
        object-fit:contain;
        display:block;

        transition:.35s ease;
    }

    .case-row:hover .case-icon img{
        transform:scale(1.05);
    }

    .case-content span{
        display:block;

        font-size:2rem;
        font-weight:700;
        line-height:1.2;

        color:#ffffff;

        margin-bottom:12px;
    }

    .case-content p{
        margin:0;

        font-size:1.05rem;
        line-height:1.8;

        color:#b8c7d8;

        max-width:760px;
    }

    .case-row.reverse .case-content p{
        margin-left:auto;
    }

    .case-row:hover{
        transform:translateX(8px);
    }

    .case-row.reverse:hover{
        transform:translateX(-8px);
    }

    @media(max-width:900px){

        .case-row,
        .case-row.reverse{
            grid-template-columns:1fr;
            gap:20px;
            text-align:center;
        }

        .case-row.reverse .case-icon,
        .case-row.reverse .case-content{
            order:initial;
        }

        .case-row.reverse .case-content{
            text-align:center;
        }

        .case-content p,
        .case-row.reverse .case-content p{
            margin:0 auto;
        }

        .case-icon{
            width:120px;
            height:120px;
        }

        .case-content span{
            font-size:1.5rem;
        }
    }

    @media(max-width:900px){

        /* HERO */

        .hero-home{
            padding:110px 0 60px;
            min-height:auto;
        }

        .hero-home .container{
            text-align:center;
        }

        .hero-copy{
            max-width:100%;
        }

        .hero-copy h1{
            font-size:clamp(2.3rem,9vw,3.8rem);
            line-height:1.05;
            margin-bottom:20px;
        }

        .hero-copy .eyebrow{
            font-size:.72rem;
            line-height:1.6;
            margin-bottom:18px;
        }

        .hero-actions{
            justify-content:center;
            flex-wrap:wrap;
            gap:12px;
        }

        /* HERO DESKTOP / MOBILE */

        .hero-desktop-bg{
            display:none;
        }

        .hero-mobile-bg{
            display:block;
        }

        .hero-mobile-bg img{
            width:100%;
            height:100%;
            object-fit:cover;
            object-position:center center;
        }

        /* RESTO HOME */

        .hero-grid,
        .split-grid{
            grid-template-columns:1fr;
            gap:42px;
        }

        .hero-visual{
            min-height:auto;
        }

        .system-panel{
            border-radius:24px;
        }

        .network-map{
            height:250px;
        }

        .panel-data{
            grid-template-columns:1fr;
        }

        .panel-data div{
            border-right:0;
            border-bottom:1px solid rgba(255,255,255,.08);
        }

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

        .specialty-card{
            position:relative;
            overflow:hidden;
            min-height:310px;
            border:1px solid var(--line);
            border-radius:var(--radius);
            padding:34px;
            background:linear-gradient(
                180deg,
                rgba(255,255,255,.055),
                rgba(255,255,255,.025)
            );
            transition:.25s ease;
        }

        .specialty-card h3{
            margin-top:55px;
            margin-bottom:18px;
        }

        .image-frame{
            height:360px;
        }

        .case-row{
            grid-template-columns:1fr;
            gap:10px;
        }

.diferencial-img{
    width:180%;
    max-width:none;
    display:block;
    margin-left:-180px;
}
    }

    /* DESKTOP */

    .hero-desktop-bg{
        display:block;
    }

    .hero-mobile-bg{
        display:none;
    }

    /* =========================
    IMAGEN DIFERENCIAL
    ========================= */

    .diferencial-img{
        width:250%;
        max-width:none;
        display:block;
        margin-left:-330px;
    }
/* =========================
   PARTNERS / MARCAS
========================= */

.brands-section{
    padding:80px 0;
}

.brands-glass{
    position:relative;
    padding:50px;
    border-radius:32px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

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

    backdrop-filter:blur(18px);
    overflow:hidden;
}

.brands-glass::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(0,217,255,.12),
            transparent 45%
        );

    pointer-events:none;
}

.brands-header{
    text-align:center;
    margin-bottom:45px;
}

.brands-header h2{
    max-width:700px;
    margin:auto;
}

/* DESKTOP */

.brands-grid{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;

    flex-wrap:nowrap;
    overflow-x:auto;

    scrollbar-width:none;
    -ms-overflow-style:none;
}

.brands-grid::-webkit-scrollbar{
    display:none;
}

.brands-grid img{
    height:75px;
    width:auto;

    min-width:80px;
    max-width:180px;

    object-fit:contain;

    filter:
        grayscale(100%)
        brightness(1.6);

    opacity:.85;

    transition:
        transform .3s ease,
        opacity .3s ease,
        filter .3s ease;
}

.brands-grid img:hover{
    filter:none;
    opacity:1;
    transform:translateY(-6px);
}

/* CARRUSEL MOBILE */

.brands-slider{
    display:none;
}

/* =========================
   SPLIT DIFERENCIAL AJUSTADO
========================= */

.split-section{
    padding:90px 0;
}

.split-grid{
    align-items:center;
}

.split-copy{
    width:100%;
    max-width:950px;

    position:relative;
    z-index:5;

    padding:40px 50px;

    border-radius:28px;

    background:linear-gradient(
        180deg,
        rgba(4,15,28,.72),
        rgba(4,15,28,.52)
    );

    backdrop-filter:blur(14px);
}

.split-copy h2{
    font-size:clamp(1.7rem,2vw,2.6rem);

    line-height:1.12;
    letter-spacing:-1px;

    margin-bottom:20px;

    text-shadow:
        0 4px 20px rgba(0,0,0,.65),
        0 0 35px rgba(0,0,0,.45);
}

.split-intro{
    max-width:none;
    margin:0 0 22px;

    font-size:.95rem;
    line-height:1.8;

    color:rgba(255,255,255,.88);

    text-shadow:
        0 2px 10px rgba(0,0,0,.7);
}

.feature-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:22px;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:12px;
}

.feature-item span{
    min-width:48px;
    padding:5px 8px;

    border-radius:9px;

    background:rgba(0,217,255,.12);
    border:1px solid rgba(0,217,255,.25);

    color:var(--accent);

    font-size:.68rem;
    font-weight:700;
    text-align:center;
}

.feature-item p{
    margin:0;

    font-size:.90rem;

    line-height:1.65;

    color:rgba(255,255,255,.9);

    text-shadow:
        0 2px 10px rgba(0,0,0,.7);
}

.feature-list,
.stats-grid,
.text-link{
    position:relative;
    z-index:5;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;

    margin:24px 0;
}

.stat-card{
    padding:14px;

    border-radius:16px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

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

.stat-card strong{
    display:block;

    color:var(--accent);

    font-size:1.15rem;

    font-weight:800;

    margin-bottom:4px;
}

.stat-card span{
    font-size:.70rem;
    opacity:.78;
}

/* IMAGEN GRANDE COMO ANTES */

.diferencial-img{
    width:250%;
    max-width:none;
    display:block;
    margin-left:-330px;
}

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

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

/* =========================
   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(3,10,24,.88);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

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

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

/* MENU */

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

.main-nav a{
    position:relative;

    color:#fff;
    text-decoration:none;
    font-size:.95rem;
    font-weight:600;
    letter-spacing:.5px;

    padding:12px 18px;
    border-radius:14px;

    transition:.35s ease;
}

/* HOVER */

.main-nav a:hover{
    color:#22d3ff;

    background:rgba(34,211,255,.08);

    box-shadow:
        0 0 25px rgba(34,211,255,.15),
        inset 0 0 0 1px rgba(34,211,255,.20);

    transform:translateY(-2px);
}

/* LINK ACTIVO */

.main-nav a.active{
    color:#22d3ff;

    background:rgba(34,211,255,.10);

    box-shadow:
        0 0 30px rgba(34,211,255,.18),
        inset 0 0 0 1px rgba(34,211,255,.25);
}

/* BOTON MOBILE */

.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;
}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){

    /* HEADER */

    .site-header{
        padding:16px 18px;
    }

    .brand-logo{
        height:48px;
    }

    .nav-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        z-index:10001;
    }

    .main-nav{
        position:fixed;
        top:0;
        right:-100%;
        width:100%;
        height:100dvh;
        background:rgba(3,10,24,.98);
        backdrop-filter:blur(18px);
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:18px;
        transition:right .35s ease;
        z-index:10000;
    }

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

    .main-nav a{
        width:260px;
        text-align:center;
        padding:14px 18px;
    }

    /* HERO */

    .hero-home{
        padding:110px 0 60px;
        min-height:auto;
    }

    .hero-home .container{
        padding-left:0;
        text-align:center;
    }

    .hero-copy{
        max-width:100%;
    }

    .hero-copy h1{
        font-size:clamp(2.3rem,9vw,3.8rem);
        line-height:1.05;
        margin-bottom:20px;
    }

    .hero-copy .eyebrow{
        font-size:.72rem;
        margin-bottom:18px;
    }

    .hero-actions{
        justify-content:center;
        gap:12px;
    }

    .hero-desktop-bg{
        display:none;
    }

    .hero-mobile-bg{
        display:block;
    }

    .hero-mobile-bg img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
    }

    .hero-overlay{
        background:
        linear-gradient(
            180deg,
            rgba(4,12,24,.55) 0%,
            rgba(4,12,24,.70) 40%,
            rgba(4,12,24,.90) 100%
        );
    }

    /* SPECIALTY */

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

    .specialty-card{
        min-height:auto;
        padding:28px;
    }

    .specialty-card h3{
        margin-top:55px;
    }

    /* PANEL */

    .system-panel{
        border-radius:24px;
    }

    .network-map{
        height:250px;
    }

    .panel-data{
        grid-template-columns:1fr;
    }

    .panel-data div{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    /* DIFERENCIAL */

    .split-section{
        padding:55px 0;
        overflow:hidden;
    }

    .split-grid{
        position:relative;
        display:block;
    }

    .editorial-image{
        position:relative;
        width:100%;
        z-index:1;
    }

    .diferencial-img{
        width:140%;
        max-width:none;
        margin-left:-20%;
        margin-bottom:-80px;
        opacity:.95;
        display:block;
    }

    .split-copy{
        position:relative;
        z-index:5;

        margin-top:-120px;

        width:92%;
        max-width:none;

        margin-left:auto;
        margin-right:auto;

        padding:24px;

        border-radius:24px;

        background:rgba(4,15,28,.78);
        backdrop-filter:blur(16px);
    }

    .split-copy h2{
        font-size:1.9rem;
        line-height:1.05;
        margin-bottom:16px;
    }

    .split-intro{
        font-size:.92rem;
        line-height:1.7;
    }

    .feature-list{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    .feature-item p{
        font-size:.85rem;
    }

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

    .stat-card{
        padding:14px;
    }

    .text-link{
        margin-top:20px;
    }

    /* USE CASES */

    .case-row,
    .case-row.reverse{
        grid-template-columns:1fr;
        text-align:center;
        gap:20px;
    }

    .case-row.reverse .case-icon,
    .case-row.reverse .case-content{
        order:initial;
    }

    .case-row.reverse .case-content{
        text-align:center;
    }

    .case-content p{
        margin:0 auto;
    }

    .case-icon{
        width:120px;
        height:120px;
    }

    .case-content span{
        font-size:1.5rem;
    }

    /* MARCAS */

    .brands-glass{
        padding:35px 20px;
    }

    .brands-grid{
        display:none;
    }

    .brands-slider{
        display:block;
        overflow:hidden;
        margin-top:20px;
    }

    .brands-track{
        display:flex;
        gap:40px;
        width:max-content;
        animation:brandsScroll 22s linear infinite;
    }

    .brands-track img{
        width:120px;
        height:auto;
        flex-shrink:0;
        opacity:.9;
        filter:grayscale(100%) brightness(1.6);
    }
}

@keyframes brandsScroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}