/* =========================================
BASE
========================================= */

body{

    background:#f5f8fd;

    overflow-x:hidden;

    font-family:'Inter', sans-serif;
}

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

.automation-hero{

    position:relative;

    padding:180px 0 150px;

    overflow:hidden;

    background:
    radial-gradient(circle at top,
    #123d91 0%,
    #071325 45%,
    #020817 100%);
}

.automation-grid{

    position:absolute;

    inset:0;

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

    background-size:60px 60px;
}

.automation-glow{

    position:absolute;

    width:700px;
    height:700px;

    background:#2563eb;

    filter:blur(130px);

    opacity:.22;

    top:-240px;
    right:-180px;
}

.automation-container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;
}

.automation-tag{

    color:#60a5fa;

    font-size:12px;

    font-weight:700;

    letter-spacing:.18em;
}

.automation-left h1{

    font-size:84px;

    line-height:.95;

    color:#fff;

    margin:24px 0;

    font-family:'DM Serif Display', serif;
}

.automation-left p{

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

    font-size:20px;

    line-height:1.8;

    max-width:700px;
}

.automation-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:40px;

    padding:18px 34px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:#fff;

    text-decoration:none;

    font-weight:700;

    letter-spacing:.05em;

    transition:.45s ease;

    box-shadow:
    0 20px 50px rgba(37,99,235,.35);
}

.automation-btn:hover{

    transform:
    translateY(-5px);

    box-shadow:
    0 30px 80px rgba(37,99,235,.55);
}

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

.automation-dashboard{

    position:relative;

    height:520px;

    border-radius:38px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.03)
    );

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

    backdrop-filter:blur(24px);

    overflow:hidden;
}

.node{

    position:absolute;

    padding:18px 24px;

    border-radius:18px;

    background:#0f172a;

    color:#fff;

    font-size:14px;

    font-weight:700;

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

.node-1{ top:70px; left:70px; }
.node-2{ top:70px; right:70px; }
.node-3{ top:220px; left:50%; transform:translateX(-50%); }
.node-4{ bottom:70px; left:70px; }
.node-5{ bottom:70px; right:70px; }

.flow-line{

    position:absolute;

    background:#2563eb;

    box-shadow:
    0 0 20px #2563eb;
}

.flow-1{

    width:3px;

    height:260px;

    left:50%;

    top:120px;
}

.flow-2{

    width:70%;

    height:3px;

    left:15%;

    top:250px;
}

/* =========================================
PROOF BAR
========================================= */

.automation-proof{

    padding:30px 0;

    background:#020817;
}

.proof-container{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:50px;
}

.proof-container span{

    display:flex;

    align-items:center;

    gap:10px;

    color:#93c5fd;

    font-weight:700;

    letter-spacing:.08em;
}

.proof-container svg{

    width:18px;
    height:18px;
}

/* =========================================
SPECIALIZED
========================================= */

.specialized-systems-section{

    position:relative;

    padding:160px 0;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #f8fbff 0%,
        #eef4ff 100%
    );
}

.specialized-glow{

    position:absolute;

    width:700px;
    height:700px;

    background:#2563eb;

    opacity:.08;

    filter:blur(120px);

    top:-240px;
    right:-180px;
}

.specialized-heading{

    text-align:center;

    max-width:900px;

    margin:0 auto 90px;
}

.specialized-heading span{

    display:inline-block;

    margin-bottom:18px;

    color:#2563eb;

    font-size:12px;

    font-weight:700;

    letter-spacing:.22em;
}

.specialized-heading h2{

    font-size:68px;

    line-height:1;

    color:#0f172a;

    margin-bottom:26px;

    font-family:'DM Serif Display', serif;
}

.specialized-heading p{

    color:#64748b;

    font-size:20px;

    line-height:1.8;
}

.specialized-grid{

    display:grid;

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

    gap:34px;
}

.special-card{

    position:relative;

    min-height:560px;

    border-radius:34px;

    overflow:hidden;

    padding:50px;

    display:flex;

    align-items:flex-end;

    background-size:cover;

    background-position:center;

    transition:.5s ease;

    box-shadow:
    0 25px 70px rgba(15,23,42,.10);
}

.special-card:hover{

    transform:
    translateY(-10px)
    scale(1.01);
}

.special-card-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(2,6,23,.10) 0%,
        rgba(2,6,23,.90) 100%
    );
}

.special-content{

    position:relative;

    z-index:2;
}

.special-content span{

    display:inline-block;

    margin-bottom:18px;

    color:#93c5fd;

    font-size:12px;

    font-weight:700;

    letter-spacing:.18em;
}

.special-content h3{

    font-size:42px;

    line-height:1;

    color:#fff;

    margin-bottom:24px;

    font-family:'DM Serif Display', serif;
}

.special-content p{

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

    line-height:1.8;

    margin-bottom:30px;
}

.special-content ul{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:16px;
}

.special-content li{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;
}

.special-content li svg{

    width:18px;
    height:18px;

    color:#60a5fa;
}

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

.attendance-card{

    background-image:
    url('../img/asistencia.webp');
}

.pos-card{

    background-image:
    url('../img/pos.webp');
}

.inventory-card{

    background-image:
    url('../img/inventario.webp');
}

/* =========================================
SHOWCASE
========================================= */

.automation-showcase{

    position:relative;

    padding:150px 0;

    background:#020817;

    overflow:hidden;
}

.showcase-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:60px 60px;
}

.automation-heading{

    text-align:center;

    margin-bottom:80px;
}

.automation-heading span{

    color:#60a5fa;

    font-size:12px;

    font-weight:700;

    letter-spacing:.22em;
}

.automation-heading h2{

    color:#fff;

    font-size:68px;

    margin-top:24px;

    font-family:'DM Serif Display', serif;
}

.showcase-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:30px;
}

.showcase-card{

    height:280px;

    border-radius:28px;

    display:flex;

    align-items:end;

    padding:40px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.03)
    );

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

    transition:.45s ease;
}

.showcase-card:hover{

    transform:
    translateY(-10px);
}

.showcase-card h3{

    color:#fff;

    font-size:30px;

    line-height:1.1;
}

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

.automation-final{

    position:relative;

    padding:180px 0;

    overflow:hidden;

    background:
    radial-gradient(circle,
    #123d91 0%,
    #020817 70%);
}

.automation-final-glow{

    position:absolute;

    width:650px;
    height:650px;

    background:#2563eb;

    opacity:.18;

    filter:blur(130px);

    top:-240px;
    left:50%;

    transform:translateX(-50%);
}

.automation-final-container{

    position:relative;

    z-index:2;

    text-align:center;
}

.automation-final-container span{

    color:#60a5fa;

    font-size:12px;

    font-weight:700;

    letter-spacing:.22em;
}

.automation-final-container h2{

    font-size:90px;

    line-height:.95;

    color:#fff;

    margin:30px auto;

    max-width:1100px;

    font-family:'DM Serif Display', serif;
}

.automation-final-container p{

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

    font-size:22px;

    line-height:1.8;

    max-width:850px;

    margin:auto;
}

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

@media(max-width:1100px){

    .automation-container,
    .specialized-grid,
    .showcase-grid{

        grid-template-columns:1fr;
    }

    .automation-left h1,
    .specialized-heading h2,
    .automation-heading h2,
    .automation-final-container h2{

        font-size:54px;
    }

    .special-card{

        min-height:480px;
    }
}