/* ==========================================================
   HERO
   D DIGITAL
========================================================== */

.hero{

    position:relative;

    min-height:100vh;

    padding-top:50px;

    padding-bottom:90px;

    display:flex;

    align-items:center;

    overflow:hidden;

    isolation:isolate;

}

/* ==========================================================
   BACKGROUND
========================================================== */

.hero-grid-bg{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:70px 70px;

    opacity:.35;

    mask-image:radial-gradient(circle,#000 35%,transparent 95%);

    z-index:1;

}

.hero-light{

    position:absolute;

    border-radius:50%;

    filter:blur(170px);

    z-index:0;

}

.hero-light-1{

    width:700px;

    height:700px;

    background:#5637ff;

    left:-220px;

    top:-170px;

    opacity:.28;

}

.hero-light-2{

    width:560px;

    height:560px;

    background:#0066ff;

    right:-150px;

    bottom:-150px;

    opacity:.22;

}

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

.hero-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:90px;

    align-items:center;

    z-index:5;

}

.hero-content{

    position:relative;

    z-index:5;

    max-width:620px;

}

/* ==========================================================
   CHIP
========================================================== */

.hero-chip{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

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

    backdrop-filter:blur(20px);

    color:#D9DCE5;

    font-size:14px;

    margin-bottom:28px;

}

.hero-chip span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#7C3AED;

    box-shadow:0 0 18px #7C3AED;

}

/* ==========================================================
   TITULO
========================================================== */

.hero h1{

    font-size:clamp(72px,6vw,104px);

    line-height:.90;

    letter-spacing:-4px;

    margin:28px 0 34px;

}

.hero h1 span{

    background:var(--gradient-button);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

/* ==========================================================
   TEXTO
========================================================== */

.hero p{

    max-width:620px;

    font-size:21px;

    line-height:1.8;

    color:var(--color-text-light);

    margin-bottom:46px;

}

/* ==========================================================
   BOTONES
========================================================== */

.hero-actions{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:60px;

}

.hero-actions .btn-primary{

    min-width:230px;

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:58px;

    padding:0 34px;

    min-width:210px;

    border-radius:999px;

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

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

    backdrop-filter:blur(20px);

    color:#FFF;

    font-weight:600;

    text-decoration:none;

    transition:all .35s ease;

}

.btn-outline:hover{

    transform:translateY(-3px);

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

    border-color:rgba(124,58,237,.45);

    box-shadow:0 12px 35px rgba(124,58,237,.18);

}

.btn-outline span{

    transition:.35s;

}

.btn-outline:hover span{

    transform:translateX(6px);

}

/* ==========================================================
   MÉTRICAS
========================================================== */

.hero-metrics{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.metric{

    padding:20px 24px;

    min-width:170px;

    border-radius:24px;

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

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

    backdrop-filter:blur(18px);

    transition:.35s;

}

.metric:hover{

    transform:translateY(-6px);

    border-color:rgba(124,58,237,.35);

}

.metric strong{

    display:block;

    font-size:28px;

    font-family:"General Sans";

    color:white;

    margin-bottom:6px;

}

.metric small{

    color:var(--color-text-light);

    line-height:1.5;

}

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

.hero-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:760px;

    perspective:1800px;

}

/* ==========================================================
   GLOW
========================================================== */

.scene-glow{

    position:absolute;

    width:820px;

    height:820px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(90,45,218,.45) 0%,

    rgba(90,45,218,.65) 45%,

    transparent 75%);

    filter:blur(120px);

    animation:pulseGlow 8s ease-in-out infinite;

}

/* ==========================================================
   DASHBOARD
========================================================== */

.dashboard{

    position:relative;

    width:128%;

    max-width:860px;

    transform-style:preserve-3d;

    animation:floatHero 8s ease-in-out infinite;

    z-index:5;

}

.dashboard img{

    width:100%;

    display:block;

    border-radius:28px;

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

    box-shadow:

        0 70px 160px rgba(0,0,0,.45),

        0 0 90px rgba(124,58,237,.20);

}

/* ==========================================================
   TARJETAS FLOTANTES
========================================================== */

.glass-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:16px;

    min-width:260px;

    padding:18px 20px;

    border-radius:24px;

    background:rgba(255,255,255,.06);

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

    backdrop-filter:blur(24px);

    box-shadow:var(--shadow-lg);

    transition:all .35s ease;

    z-index:20;

}

.glass-card:hover{

    transform:translateY(-8px) scale(1.03);

    border-color:rgba(124,58,237,.40);

}

.card-icon{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(255,255,255,.05);

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

    flex-shrink:0;

}

.card-icon svg{

    width:28px;

    height:28px;

    color:#ffffff;

}

.glass-card strong{

    display:block;

    color:#fff;

    font-size:17px;

    margin-bottom:4px;

}

.glass-card span{

    color:var(--color-text-light);

    font-size:14px;

}

/* ==========================================================
   POSICIONES
========================================================== */

.card-a{

    top:20px;

    left:-35px;

    animation:cardFloat1 7s ease-in-out infinite;

}

.card-b{

    top:170px;

    right:-30px;

    animation:cardFloat2 8s ease-in-out infinite;

}

.card-c{

    bottom:60px;

    left:-10px;

    animation:cardFloat3 6.5s ease-in-out infinite;

}

.card-d{

    bottom:100px;

    right:0px;

    animation:cardFloat4 9s ease-in-out infinite;

}

/* ==========================================================
   ANIMACIONES
========================================================== */

@keyframes floatHero{

    0%{transform:translateY(0);}

    50%{transform:translateY(-14px);}

    100%{transform:translateY(0);}

}

@keyframes pulseGlow{

    0%{

        transform:scale(.95);

        opacity:.65;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

    100%{

        transform:scale(.95);

        opacity:.65;

    }

}

@keyframes cardFloat1{

    0%,100%{transform:translateY(0);}

    50%{transform:translateY(-12px);}

}

@keyframes cardFloat2{

    0%,100%{transform:translateY(0);}

    50%{transform:translateY(10px);}

}

@keyframes cardFloat3{

    0%,100%{transform:translateY(0);}

    50%{transform:translateY(-8px);}

}

@keyframes cardFloat4{

    0%,100%{transform:translateY(0);}

    50%{transform:translateY(12px);}

}

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

@media (max-width:1200px){

    .hero-wrapper{

        grid-template-columns:1fr;

        gap:80px;

    }

    .hero-content{

        max-width:800px;

        margin:auto;

        text-align:center;

    }

    .hero p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-actions{

        justify-content:center;

    }

    .hero-metrics{

        justify-content:center;

    }

    .hero-visual{

        min-height:auto;

    }

    .dashboard{

        width:100%;

        max-width:760px;

    }

}

@media (max-width:992px){

    .glass-card{

        display:none;

    }

}

@media (max-width:768px){

    .hero{

        min-height:auto;

        padding-top:140px;

        padding-bottom:80px;

    }

    .hero h1{

        font-size:54px;

        letter-spacing:-2px;

        line-height:1;

    }

    .hero p{

        font-size:18px;

        line-height:1.7;

    }

    .hero-actions{

        flex-direction:column;

        width:100%;

    }

    .hero-actions .btn-primary,

    .hero-actions .btn-outline{

        width:100%;

    }

    .hero-metrics{

        display:grid;

        grid-template-columns:1fr;

        gap:16px;

    }

    .metric{

        width:100%;

    }

}

@media (max-width:480px){

    .hero{

        padding-top:120px;

    }

    .hero-chip{

        font-size:12px;

        padding:10px 14px;

    }

    .hero h1{

        font-size:42px;

    }

}

/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    z-index:30;

    color:var(--color-text-light);

    font-size:13px;

}

.mouse{

    width:28px;

    height:46px;

    border:2px solid rgba(255,255,255,.18);

    border-radius:30px;

    display:flex;

    justify-content:center;

    padding-top:8px;

}

.wheel{

    width:5px;

    height:10px;

    border-radius:20px;

    background:white;

    animation:wheel 1.8s infinite;

}

@keyframes wheel{

    from{

        transform:translateY(0);

        opacity:1;

    }

    to{

        transform:translateY(14px);

        opacity:0;

    }

}

/* ==========================================================
   WHATSAPP
========================================================== */

.whatsapp-float{

    position:fixed;

    right:32px;

    bottom:32px;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(135deg,#25D366,#1EBE5B);

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

    box-shadow:
        0 10px 35px rgba(37,211,102,.25);

    transition:all .35s ease;

    z-index:99999;

}

.whatsapp-float:hover{

    transform:translateY(-5px) scale(1.08);

    box-shadow:
        0 20px 50px rgba(37,211,102,.40);

}

.whatsapp-float svg{

    width:28px;

    height:28px;

    color:#FFF;

}


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

@media (max-width:1200px){

    .hero-wrapper{

        grid-template-columns:1fr;

        gap:80px;

        text-align:center;

    }

    .hero-content{

        max-width:900px;

        margin:auto;

    }

    .hero-content p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-actions{

        justify-content:center;

    }

    .hero-metrics{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-visual{

        min-height:auto;

    }

    .dashboard{

        max-width:700px;

        margin:auto;

    }

}

@media (max-width:992px){

    .hero{

        min-height:auto;

        padding:50px 0 90px;

    }

    .hero h1{

        font-size:clamp(3.3rem,10vw,5rem);

        line-height:1;

    }

    .hero p{

        font-size:20px;

    }

    .hero-actions{

        flex-wrap:wrap;

    }

    .hero-actions .btn-primary,

    .hero-actions .btn-outline{

        min-width:220px;

    }

    .card-a,

    .card-b,

    .card-c,

    .card-d{

        display:none;

    }

    .scene-glow{

        width:520px;

        height:520px;

    }

}