/* =====================================================
   ALVAS PERÚ SYSTEM
   UI CORE
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');


:root {

    --bg: #020817;
    --bg-soft: #061225;

    --surface: rgba(10, 27, 50, .68);

    --border: rgba(129, 194, 255, .15);

    --text: #f5f9ff;
    --muted: #8ea5be;

    --blue: #1597ff;
    --cyan: #38d7ff;

    --gradient:
        linear-gradient(
            135deg,
            #4ca7ff,
            #19d3ff
        );

}


/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

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

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(0, 115, 255, .12),
            transparent 30%
        ),
        var(--bg);

    color: var(--text);

    overflow-x: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


.container {

    width: min(1180px, calc(100% - 48px));

    margin-inline: auto;

}


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

.page-noise {

    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: .025;

    z-index: 100;

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

}


.cursor-glow {

    width: 420px;
    height: 420px;

    position: fixed;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 153, 255, .10),
            transparent 65%
        );

    pointer-events: none;

    z-index: 0;

    transform:
        translate(-50%, -50%);

}


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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 50;

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

    background:
        rgba(2,8,23,.58);

    backdrop-filter:
        blur(18px);

}


.navbar {

    height: 88px;

    display: flex;
    align-items: center;

}


.brand {

    display: flex;
    align-items: center;

    gap: 14px;

    margin-right: auto;

}


.brand-symbol {

    width: 47px;
    height: 47px;

    border-radius: 13px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(90,180,255,.35);

    background:
        linear-gradient(
            145deg,
            rgba(49,146,255,.22),
            rgba(3,15,34,.8)
        );

    box-shadow:
        inset 0 0 22px rgba(28,148,255,.12);

}


.brand-symbol span {

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 26px;
    font-weight: 700;

    background: var(--gradient);

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

}


.brand-text {

    display: flex;
    flex-direction: column;

}


.brand-text strong {

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 14px;

    letter-spacing: 1.8px;

}


.brand-text small {

    margin-top: 4px;

    font-size: 9px;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--muted);

}


.nav-menu {

    display: flex;

    gap: 34px;

    margin-right: 38px;

}


.nav-menu a {

    position: relative;

    font-size: 13px;

    color: #9cb0c6;

    transition: .3s;

}


.nav-menu a:hover,
.nav-menu a.active {

    color: white;

}


.nav-menu a.active::after {

    content: "";

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--cyan);

    bottom: -12px;

    left: 50%;

}


.nav-contact {

    height: 44px;

    padding: 0 19px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-radius: 50px;

    border:
        1px solid rgba(67,174,255,.3);

    background:
        rgba(19,108,184,.12);

    font-size: 12px;

    transition: .3s;

}


.nav-contact:hover {

    background:
        rgba(26,149,255,.2);

    border-color:
        rgba(70,190,255,.6);

}


.mobile-menu {
    display: none;
}


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

.hero {

    min-height: 100vh;

    position: relative;

    display: flex;
    align-items: center;

    padding:
        150px 0 90px;

    overflow: hidden;

}


.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .16;

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

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );

}


.orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

}


.orb-one {

    width: 500px;
    height: 500px;

    background:
        rgba(0,100,255,.13);

    left: -200px;
    top: 15%;

}


.orb-two {

    width: 420px;
    height: 420px;

    background:
        rgba(0,205,255,.09);

    right: -180px;
    bottom: 5%;

}


.hero-layout {

    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        1.08fr .92fr;

    align-items: center;

    gap: 60px;

}


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

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding:
        9px 15px;

    border-radius: 50px;

    border:
        1px solid rgba(64,177,255,.22);

    background:
        rgba(10,65,110,.12);

    color: #82caff;

    font-size: 11px;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    margin-bottom: 30px;

}


.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #38d7ff;

    box-shadow:
        0 0 12px #38d7ff;

}


.hero h1 {

    max-width: 690px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(52px, 6vw, 86px);

    line-height: .98;

    letter-spacing: -4px;

    font-weight: 600;

}


.hero h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #bcecff,
            #25c8ff,
            #138aff
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

}


.hero-description {

    max-width: 600px;

    margin-top: 30px;

    color: #91a8bf;

    font-size: 16px;

    line-height: 1.8;

}


.hero-actions {

    display: flex;

    gap: 14px;

    margin-top: 36px;

}


.btn-primary,
.btn-secondary {

    height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding:
        0 23px;

    border-radius: 10px;

    font-size: 13px;

    font-weight: 600;

    transition: .3s;

}


.btn-primary {

    background:
        linear-gradient(
            135deg,
            #168cff,
            #22cfff
        );

    color: #001425;

    box-shadow:
        0 14px 45px rgba(0,145,255,.22);

}


.btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 55px rgba(0,167,255,.35);

}


.btn-secondary {

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

    color: #dceaff;

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

}


.btn-secondary:hover {

    border-color:
        rgba(75,184,255,.4);

    background:
        rgba(75,184,255,.07);

}


.hero-metrics {

    margin-top: 58px;

    display: flex;

    gap: 45px;

}


.metric {

    display: flex;

    flex-direction: column;

}


.metric strong {

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 21px;

}


.metric span {

    margin-top: 5px;

    color: #647d98;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


/* =====================================================
   TECHNOLOGY CORE
===================================================== */

.hero-visual {

    min-height: 560px;

    position: relative;

    display: grid;

    place-items: center;

}


.core-glow {

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(31,190,255,.22),
            rgba(17,102,255,.08),
            transparent 70%
        );

    filter: blur(15px);

}


.technology-core {

    position: relative;

    z-index: 5;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

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

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(26,112,190,.3),
            rgba(3,15,31,.96) 68%
        );

    border:
        1px solid rgba(77,188,255,.32);

    box-shadow:
        0 0 80px rgba(0,151,255,.15),
        inset 0 0 35px rgba(30,154,255,.08);

}


.core-logo {

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 48px;
    font-weight: 700;

    line-height: 1;

    background: var(--gradient);

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

}


.technology-core small {

    margin-top: 10px;

    font-size: 9px;

    letter-spacing: 4px;

    color: #b3d9f5;

}


.technology-core strong {

    margin-top: 5px;

    font-size: 7px;

    letter-spacing: 1.6px;

    color: #4f799c;

}


.tech-orbit {

    position: absolute;

    border-radius: 50%;

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

}


.orbit-one {

    width: 285px;
    height: 285px;

    animation:
        rotateOrbit 18s linear infinite;

}


.orbit-two {

    width: 410px;
    height: 410px;

    border-style: dashed;

    animation:
        rotateOrbitReverse 26s linear infinite;

}


.orbit-three {

    width: 520px;
    height: 520px;

    opacity: .4;

}


@keyframes rotateOrbit {

    to {
        transform: rotate(360deg);
    }

}


@keyframes rotateOrbitReverse {

    to {
        transform: rotate(-360deg);
    }

}


/* =====================================================
   NODES
===================================================== */

.tech-node {

    position: absolute;

    z-index: 8;

    min-width: 94px;

    padding:
        11px 13px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    gap: 8px;

    background:
        rgba(5,18,36,.86);

    border:
        1px solid rgba(79,176,255,.18);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

}


.tech-node i {

    color: var(--cyan);

    font-size: 15px;

}


.tech-node span {

    color: #9dc4e1;

    font-size: 8px;

    letter-spacing: 1px;

}


.node-code {

    top: 15%;
    left: 8%;

}


.node-network {

    top: 22%;
    right: 0;

}


.node-security {

    bottom: 18%;
    right: 6%;

}


.node-camera {

    bottom: 13%;
    left: 3%;

}


/* =====================================================
   SYSTEM CARD
===================================================== */

.system-card {

    position: absolute;

    z-index: 10;

    right: -15px;
    bottom: 2%;

    width: 270px;

    padding: 17px;

    border-radius: 13px;

    background:
        rgba(4,17,34,.86);

    border:
        1px solid rgba(70,175,255,.18);

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.28);

}


.system-card-header {

    display: flex;

    justify-content: space-between;

    padding-bottom: 13px;

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

    font-size: 8px;

    letter-spacing: 1.2px;

    color: #6e8aa5;

}


.online {

    color: #45e5c0;

}


.system-line {

    margin-top: 13px;

    display: grid;

    grid-template-columns:
        78px 1fr 28px;

    align-items: center;

    gap: 8px;

    font-size: 8px;

    color: #7791aa;

}


.progress {

    height: 3px;

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

    border-radius: 10px;

    overflow: hidden;

}


.progress div {

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #198cff,
            #3de0ff
        );

}


.system-line strong {

    font-size: 8px;

    color: #b6d5ed;

}


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

.scroll-indicator {

    position: absolute;

    left: 30px;
    bottom: 40px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 14px;

    transform:
        rotate(-90deg);

    transform-origin:
        left center;

}


.scroll-indicator span {

    font-size: 7px;

    letter-spacing: 3px;

    color: #46617c;

}


.scroll-line {

    width: 60px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #238dff,
            transparent
        );

}


/* =====================================================
   TECHNOLOGY STRIP
===================================================== */

.technology-strip {

    position: relative;

    overflow: hidden;

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

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

    background:
        rgba(6,20,39,.7);

}


.strip-track {

    min-height: 67px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 26px;

    white-space: nowrap;

    color: #607d98;

    font-size: 9px;

    letter-spacing: 2px;

}


.strip-track i {

    color: #158fff;

}


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

.intro-section {
    padding: 80px 0 35px;
}

.services-preview {
    padding: 35px 0 80px;
}


.section-label {

    display: flex;

    gap: 14px;

    align-items: center;

    color: #4f7698;

    font-size: 9px;

    letter-spacing: 2px;

}


.section-label span:first-child {

    color: var(--cyan);

}


.intro-grid {

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 100px;

    margin-top: 38px;

}


.intro-grid h2,
.section-heading h2 {

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(38px, 4.5vw, 64px);

    line-height: 1.08;

    letter-spacing: -2.5px;

}


.intro-grid h2 span,
.section-heading h2 span {

    display: block;

    color: #51708c;

}


.intro-copy {

    padding-top: 10px;

}


.intro-copy p {

    color: #829ab2;

    line-height: 1.9;

    font-size: 14px;

}


.text-link {

    margin-top: 27px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #69c6ff;

    font-size: 12px;

}


/* =====================================================
   SERVICES
===================================================== */

.services-preview {

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(5,21,40,.65),
            transparent
        );

}


.section-heading {

    max-width: 750px;

}


.section-heading h2 {

    margin-top: 32px;

}


.services-grid {

    margin-top: 65px;

    display: grid;

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

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

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

}


.service-card {

    min-height: 360px;

    position: relative;

    padding: 30px;

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

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

    background:
        rgba(5,17,33,.32);

    transition:
        transform .35s,
        background .35s;

}


.service-card:hover {

    transform:
        translateY(-8px);

    background:
        rgba(12,47,78,.36);

}


.service-card.featured {

    background:
        linear-gradient(
            160deg,
            rgba(14,76,127,.35),
            rgba(4,16,32,.4)
        );

}


.service-number {

    color: #43617d;

    font-size: 9px;

    letter-spacing: 2px;

}


.service-icon {

    width: 47px;
    height: 47px;

    margin-top: 55px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        rgba(20,134,219,.09);

    border:
        1px solid rgba(54,171,255,.15);

    color: #41c9ff;

    font-size: 20px;

}


.service-card h3 {

    margin-top: 25px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 17px;

}


.service-card p {

    margin-top: 14px;

    color: #708aa4;

    font-size: 11px;

    line-height: 1.8;

}


.service-card a {

    position: absolute;

    bottom: 27px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #7acaff;

    font-size: 10px;

}


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

.site-footer {

    padding:
        40px 0;

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

}


.footer-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.footer-inner strong {

    font-family:
        'Space Grotesk',
        sans-serif;

    letter-spacing: 1px;

}


.footer-inner p,
.footer-copy {

    margin-top: 6px;

    color: #536b83;

    font-size: 10px;

}


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

@media (max-width: 1050px) {

    .nav-menu,
    .nav-contact {
        display: none;
    }


    .mobile-menu {

        display: grid;

        place-items: center;

        width: 43px;
        height: 43px;

        border-radius: 10px;

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

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

        color: white;

        font-size: 20px;

    }


    .hero-layout {

        grid-template-columns: 1fr;

    }


    .hero-content {

        text-align: center;

    }


    .hero-description {

        margin-inline: auto;

    }


    .hero-actions,
    .hero-metrics {

        justify-content: center;

    }


    .hero-visual {

        margin-top: 30px;

    }


    .services-grid {

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

    }

}


@media (max-width: 700px) {

    .container {

        width:
            min(100% - 30px, 1180px);

    }


    .site-header .navbar {

        height: 72px;

    }


    .brand-text strong {

        font-size: 11px;

    }


    .brand-text small {

        display: none;

    }


    .hero {

        padding-top: 120px;

    }


    .hero h1 {

        font-size: 50px;

        letter-spacing: -2.5px;

    }


    .hero-actions {

        flex-direction: column;

    }


    .hero-actions a {

        width: 100%;

    }


    .hero-metrics {

        gap: 20px;

    }


    .metric {

        flex: 1;

    }


    .hero-visual {

        min-height: 480px;

        transform:
            scale(.82);

    }


    .intro-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .services-grid {

        grid-template-columns: 1fr;

    }

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

    .service-icon {
        margin-top: 24px;
    }

    .service-card h3 {
        margin-top: 22px;
    }

    .service-card p {
        margin-top: 14px;
        font-size: 12px;
        line-height: 1.8;
    }

    .service-card a {
        position: static;
        margin-top: 30px;
        width: fit-content;
    }


    .strip-track {

        justify-content: flex-start;

        padding-inline: 20px;

        overflow: hidden;

    }


    .footer-inner {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }

}

/* =====================================================
   ALVAS 2.0
   ANIMATIONS & CORE STATUS
===================================================== */

.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .9s cubic-bezier(.2,.8,.2,1),
        transform .9s cubic-bezier(.2,.8,.2,1);

}


.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}


/* CORE PULSE */

.core-pulse {

    position: absolute;

    inset: -1px;

    border-radius: 50%;

    border:
        1px solid rgba(62, 205, 255, .45);

    animation:
        corePulse 2.8s ease-out infinite;

}


@keyframes corePulse {

    0% {

        transform: scale(.85);

        opacity: .8;

    }

    70% {

        transform: scale(1.45);

        opacity: 0;

    }

    100% {

        transform: scale(1.45);

        opacity: 0;

    }

}


/* CORE STATUS */

.core-status-row {

    display: grid;

    grid-template-columns:
        20px 1fr auto;

    gap: 8px;

    align-items: center;

    padding-top: 13px;

    font-size: 8px;

    color: #7791aa;

}


.core-status-row i {

    color: #4acfff;

    font-size: 11px;

}


.core-status-row strong {

    color: #51e4bd;

    font-size: 7px;

    letter-spacing: 1px;

}


/* NAV ACCESSIBILITY */

.nav-menu a:focus {

    outline: none;

}


.nav-menu a:focus-visible,
.nav-contact:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {

    outline:
        2px solid #38d7ff;

    outline-offset: 5px;

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

    }

}

/* =====================================================
   03 - PROJECTS & INNOVATION
===================================================== */

.projects-section {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

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

}


.projects-background {

    position: absolute;
    inset: 0;

    pointer-events: none;

}


.project-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

}


.project-glow-one {

    width: 500px;
    height: 500px;

    right: -250px;
    top: 10%;

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

}


.project-glow-two {

    width: 400px;
    height: 400px;

    left: -250px;
    bottom: 0;

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

}


.projects-heading {

    position: relative;

    z-index: 2;

}


.projects-title-grid {

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 100px;

    align-items: end;

    margin-top: 35px;

}


.projects-title-grid h2 {

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(42px, 5vw, 70px);

    line-height: 1.03;

    letter-spacing: -3px;

}


.projects-title-grid h2 span {

    display: block;

    color: #526f8c;

}


.projects-title-grid p {

    max-width: 480px;

    color: #7890a8;

    font-size: 13px;

    line-height: 1.9;

}


/* =====================================================
   FEATURED PROJECT
===================================================== */

.project-showcase {

    position: relative;

    z-index: 2;

    margin-top: 70px;

}


.project-featured {

    min-height: 520px;

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    border:
        1px solid rgba(79,175,255,.15);

    background:
        rgba(4,15,31,.52);

    overflow: hidden;

}


/* =====================================================
   SIVAR VISUAL
===================================================== */

.project-visual {

    position: relative;

    min-height: 520px;

    overflow: hidden;

    border-right:
        1px solid rgba(79,175,255,.15);

}


.solar-visual {

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(0,135,255,.13),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #06152a,
            #020916
        );

}


.project-grid-bg {

    position: absolute;
    inset: 0;

    opacity: .22;

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

    background-size:
        45px 45px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 75%
        );

}


/* RADAR */

.radar {

    position: absolute;

    left: 50%;
    top: 48%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    border:
        1px solid rgba(66,186,255,.17);

}


.radar-one {

    width: 170px;
    height: 170px;

}


.radar-two {

    width: 300px;
    height: 300px;

    border-style: dashed;

    animation:
        radarRotate 22s linear infinite;

}


.radar-three {

    width: 430px;
    height: 430px;

    opacity: .55;

}


@keyframes radarRotate {

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


/* CAMERA */

.camera-system {

    position: absolute;

    left: 50%;
    top: 48%;

    transform:
        translate(-50%, -50%);

    z-index: 5;

    width: 115px;
    height: 115px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

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

    border:
        1px solid rgba(68,199,255,.35);

    background:
        radial-gradient(
            circle,
            rgba(16,110,177,.3),
            rgba(3,15,30,.96)
        );

    box-shadow:
        0 0 60px rgba(0,156,255,.18);

}


.camera-icon {

    font-size: 30px;

    color: #55d8ff;

}


.camera-system span {

    margin-top: 8px;

    font-size: 7px;

    letter-spacing: 2px;

    color: #8ec7e8;

}


/* SIGNAL POINTS */

.signal-point {

    position: absolute;

    z-index: 5;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #57d9ff;

    border:
        1px solid rgba(73,194,255,.22);

    background:
        rgba(4,22,42,.88);

    box-shadow:
        0 0 30px rgba(0,155,255,.12);

}


.signal-one {

    left: 18%;
    top: 26%;

}


.signal-two {

    right: 18%;
    top: 24%;

}


.signal-three {

    right: 14%;
    bottom: 25%;

}


/* CONNECTIONS */

.connection-line {

    position: absolute;

    height: 1px;

    z-index: 2;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(59,198,255,.4),
            transparent
        );

}


.line-one {

    width: 190px;

    left: 23%;
    top: 34%;

    transform:
        rotate(24deg);

}


.line-two {

    width: 190px;

    left: 52%;
    top: 39%;

    transform:
        rotate(-25deg);

}


.line-three {

    width: 190px;

    left: 54%;
    top: 56%;

    transform:
        rotate(26deg);

}


/* MONITOR */

.monitor-panel {

    position: absolute;

    left: 30px;
    bottom: 28px;

    width: calc(100% - 60px);

    padding: 16px 18px;

    z-index: 8;

    border-radius: 10px;

    border:
        1px solid rgba(65,184,255,.16);

    background:
        rgba(3,15,30,.78);

    backdrop-filter:
        blur(15px);

}


.monitor-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #607f9d;

    font-size: 7px;

    letter-spacing: 1.5px;

}


.monitor-top strong {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #62e4c3;

    font-size: 7px;

}


.monitor-dot {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #55e4be;

    box-shadow:
        0 0 9px #55e4be;

}


.monitor-data {

    display: grid;

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

    margin-top: 14px;

    padding-top: 14px;

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

}


.monitor-data div {

    display: flex;

    flex-direction: column;

}


.monitor-data small {

    color: #4e6c88;

    font-size: 6px;

    letter-spacing: 1px;

}


.monitor-data span {

    margin-top: 4px;

    color: #a4c9e4;

    font-size: 9px;

}


/* =====================================================
   PROJECT INFORMATION
===================================================== */

.project-information {

    padding:
        55px 48px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.project-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #55728d;

    font-size: 7px;

    letter-spacing: 1.5px;

}


.project-status {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #59d6ff;

}


.project-status i {

    font-size: 5px;

}


.project-information h3 {

    margin-top: 50px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(36px, 4vw, 55px);

    letter-spacing: -2px;

}


.project-information h4 {

    margin-top: 10px;

    max-width: 420px;

    color: #7a9ab7;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 18px;

    line-height: 1.4;

}


.project-information p {

    margin-top: 25px;

    max-width: 450px;

    color: #7089a1;

    font-size: 11px;

    line-height: 1.9;

}


.project-tech {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 30px;

}


.project-tech span {

    padding:
        7px 10px;

    border-radius: 50px;

    border:
        1px solid rgba(71,180,255,.14);

    background:
        rgba(27,110,174,.06);

    color: #6498bd;

    font-size: 6px;

    letter-spacing: 1px;

}


.project-link {

    margin-top: 38px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    color: #67ccff;

    font-size: 10px;

}


/* =====================================================
   SECONDARY PROJECTS
===================================================== */

.secondary-projects {

    display: grid;

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

}


.mini-project {

    min-height: 310px;

    position: relative;

    padding: 30px;

    border-right:
        1px solid rgba(79,175,255,.15);

    border-bottom:
        1px solid rgba(79,175,255,.15);

    border-left:
        1px solid rgba(79,175,255,.15);

    background:
        rgba(4,15,31,.32);

    transition:
        background .35s,
        transform .35s;

}


.mini-project:last-child {

    border-left: 0;

}


.mini-project:hover {

    background:
        rgba(10,45,75,.38);

}


.mini-project-top {

    display: flex;

    justify-content: space-between;

    color: #45627e;

    font-size: 8px;

}


.mini-project-top i {

    color: #51cfff;

    font-size: 18px;

}


.mini-project-content {

    margin-top: 65px;

}


.mini-category {

    color: #4e8db7;

    font-size: 6px;

    letter-spacing: 1.6px;

}


.mini-project h3 {

    margin-top: 10px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 27px;

}


.mini-project p {

    margin-top: 12px;

    max-width: 390px;

    color: #688198;

    font-size: 10px;

    line-height: 1.8;

}


.mini-project-footer {

    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #45627d;

    font-size: 6px;

    letter-spacing: 1px;

}


.mini-project-footer a {

    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(68,180,255,.17);

    color: #67ceff;

    transition: .3s;

}


.mini-project-footer a:hover {

    transform:
        rotate(45deg);

    background:
        rgba(40,156,235,.12);

}


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

@media (max-width: 950px) {

    .projects-title-grid,
    .project-featured {

        grid-template-columns: 1fr;

    }


    .projects-title-grid {

        gap: 30px;

    }


    .project-visual {

        border-right: 0;

        border-bottom:
            1px solid rgba(79,175,255,.15);

    }

}


@media (max-width: 700px) {

    .projects-section {

        padding:
            100px 0;

    }


    .project-visual {

        min-height: 430px;

    }


    .project-information {

        padding:
            38px 25px;

    }


    .project-information h3 {

        margin-top: 35px;

    }


    .secondary-projects {

        grid-template-columns: 1fr;

    }


    .mini-project:last-child {

        border-left:
            1px solid rgba(79,175,255,.15);

    }


    .radar-three {

        width: 360px;
        height: 360px;

    }

}

/* =====================================================
   04 - VIDEOVIGILANCIA
===================================================== */

.cctv-section {

    position: relative;

    padding: 150px 0;

    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(0,145,255,.08),
            transparent 35%
        );

}


.cctv-layout {

    display: grid;

    grid-template-columns:
        .72fr 1.28fr;

    gap: 85px;

    align-items: center;

}


/* CONTENT */

.cctv-content h2 {

    margin-top: 32px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(43px, 5vw, 68px);

    line-height: 1.03;

    letter-spacing: -3px;

}


.cctv-content h2 span {

    display: block;

    color: #536f8a;

}


.cctv-content > p {

    max-width: 480px;

    margin-top: 28px;

    color: #748da5;

    font-size: 12px;

    line-height: 1.9;

}


.cctv-capabilities {

    display: grid;

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

    gap: 10px;

    margin-top: 35px;

}


.cctv-capabilities div {

    min-height: 55px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 0 15px;

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

    background:
        rgba(6,24,43,.32);

    color: #7797b2;

    font-size: 9px;

}


.cctv-capabilities i {

    color: #4bd1ff;

    font-size: 15px;

}


.cctv-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 32px;

    color: #67cfff;

    font-size: 10px;

}


/* =====================================================
   SECURITY CONSOLE
===================================================== */

.security-console {

    position: relative;

    border:
        1px solid rgba(75,182,255,.18);

    background:
        rgba(2,12,25,.78);

    box-shadow:
        0 35px 100px rgba(0,0,0,.3);

}


.console-header {

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 18px;

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

    color: #526f89;

    font-size: 6px;

    letter-spacing: 1.4px;

}


.console-header div {

    display: flex;

    align-items: center;

    gap: 8px;

}


.console-header strong {

    color: #8db7d5;

    font-size: 7px;

}


.console-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #54e1bf;

    box-shadow:
        0 0 10px #54e1bf;

}


/* CAMERA GRID */

.camera-grid {

    display: grid;

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

    gap: 1px;

    background:
        rgba(77,174,255,.10);

}


.camera-feed {

    position: relative;

    min-height: 245px;

    overflow: hidden;

    background: #03101e;

}


.feed-background {

    position: absolute;

    inset: 0;

    opacity: .65;

}


.feed-one {

    background:
        radial-gradient(
            circle at 65% 40%,
            rgba(35,135,190,.25),
            transparent 25%
        ),
        linear-gradient(
            150deg,
            transparent 35%,
            rgba(53,128,168,.15) 36%,
            transparent 37%
        ),
        #061523;

}


.feed-two {

    background:
        linear-gradient(
            90deg,
            transparent 20%,
            rgba(50,128,170,.12) 21%,
            rgba(50,128,170,.12) 23%,
            transparent 24%
        ),
        linear-gradient(
            rgba(50,128,170,.08) 1px,
            transparent 1px
        ),
        #06131f;

    background-size:
        auto,
        100% 35px;

}


.feed-three {

    background:
        radial-gradient(
            ellipse at 50% 100%,
            rgba(30,115,170,.20),
            transparent 55%
        ),
        #05121f;

}


/* FEED INFORMATION */

.feed-top,
.feed-bottom {

    position: absolute;

    left: 14px;
    right: 14px;

    z-index: 5;

    display: flex;

    justify-content: space-between;

    font-size: 6px;

    letter-spacing: 1px;

}


.feed-top {

    top: 13px;

    color: #7898b1;

}


.feed-bottom {

    bottom: 12px;

    color: #496982;

}


.feed-status {

    color: #55deb9;

}


/* CAMERA TARGET */

.camera-target {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 82px;
    height: 62px;

    transform:
        translate(-50%, -50%);

    display: grid;

    place-items: center;

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

}


.camera-target > span {

    position: absolute;

    width: 16px;
    height: 16px;

}


.camera-target > span:nth-child(1) {

    left: 0;
    top: 0;

    border-left:
        1px solid #4ecfff;

    border-top:
        1px solid #4ecfff;

}


.camera-target > span:nth-child(2) {

    right: 0;
    top: 0;

    border-right:
        1px solid #4ecfff;

    border-top:
        1px solid #4ecfff;

}


.camera-target > span:nth-child(3) {

    left: 0;
    bottom: 0;

    border-left:
        1px solid #4ecfff;

    border-bottom:
        1px solid #4ecfff;

}


.camera-target > span:nth-child(4) {

    right: 0;
    bottom: 0;

    border-right:
        1px solid #4ecfff;

    border-bottom:
        1px solid #4ecfff;

}


.camera-target i {

    font-size: 21px;

}


/* SCAN */

.scan-line {

    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    z-index: 4;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(61,211,255,.55),
            transparent
        );

    box-shadow:
        0 0 12px rgba(61,211,255,.25);

    animation:
        securityScan 5s linear infinite;

}


.scan-line.delay {

    animation-delay: -2.5s;

}


@keyframes securityScan {

    from {
        top: 8%;
    }

    to {
        top: 92%;
    }

}


/* =====================================================
   NETWORK MAP
===================================================== */

.system-map {

    background:
        radial-gradient(
            circle,
            rgba(14,95,153,.18),
            transparent 55%
        ),
        #04111e;

}


.map-grid {

    position: absolute;

    inset: 0;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(60,174,235,.15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(60,174,235,.15) 1px,
            transparent 1px
        );

    background-size:
        25px 25px;

}


.network-core {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 145px;
    height: 145px;

    transform:
        translate(-50%, -50%);

}


.network-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(72,195,255,.18);

}


.ring-a {

    inset: 20px;

}


.ring-b {

    inset: 0;

    border-style: dashed;

    animation:
        networkRotation 15s linear infinite;

}


@keyframes networkRotation {

    to {
        transform: rotate(360deg);
    }

}


.network-center {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 48px;
    height: 48px;

    transform:
        translate(-50%, -50%);

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(12,83,130,.35);

    border:
        1px solid rgba(72,196,255,.28);

    color: #55d8ff;

}


.network-node {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #53d7ff;

    box-shadow:
        0 0 10px #53d7ff;

}


.n1 {

    left: 10px;
    top: 50%;

}


.n2 {

    right: 20px;
    top: 18px;

}


.n3 {

    right: 4px;
    bottom: 34px;

}


/* CONSOLE FOOTER */

.console-footer {

    min-height: 50px;

    padding:
        0 17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #4c6b85;

    font-size: 6px;

    letter-spacing: 1px;

}


.console-footer > div {

    display: flex;

    align-items: center;

    gap: 8px;

}


.console-footer i {

    color: #52d6ff;

}


.console-indicators {

    display: flex;

    gap: 5px;

}


.console-indicators span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #4cdcb8;

    box-shadow:
        0 0 7px rgba(76,220,184,.5);

}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .cctv-layout {

        grid-template-columns: 1fr;

        gap: 60px;

    }

}


@media (max-width: 650px) {

    .cctv-section {

        padding:
            100px 0;

    }


    .camera-grid {

        grid-template-columns: 1fr;

    }


    .camera-feed {

        min-height: 220px;

    }


    .cctv-capabilities {

        grid-template-columns: 1fr;

    }

}

/* =====================================================
   05 - TECHNOLOGY ECOSYSTEM
===================================================== */

.technology-section {
    position: relative;
    padding: 150px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.04);
}

.technology-glow {
    position: absolute;
    width: 700px;
    height: 700px;
    left: 50%;
    top: 55%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: rgba(0,128,255,.045);
    filter: blur(140px);
    pointer-events: none;
}

.technology-heading {
    position: relative;
    z-index: 2;
}

.technology-heading-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 100px;
    align-items: end;
    margin-top: 35px;
}

.technology-heading-grid h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(43px,5vw,70px);
    line-height: 1.03;
    letter-spacing: -3px;
}

.technology-heading-grid h2 span {
    display: block;
    color: #536f8b;
}

.technology-heading-grid p {
    max-width: 470px;
    color: #718aa2;
    font-size: 12px;
    line-height: 1.9;
}


/* SYSTEM */

.technology-system {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 420px 1fr;
    gap: 50px;
    align-items: center;
    margin-top: 100px;
}


/* TECH ITEMS */

.tech-column {
    display: flex;
    flex-direction: column;
}

.tech-item {
    position: relative;
    min-height: 125px;
    display: grid;
    grid-template-columns: 28px 52px 1fr;
    gap: 18px;
    align-items: center;
    padding: 20px 10px;
    border-bottom: 1px solid rgba(78,174,255,.10);
    transition: .35s ease;
}

.tech-item:first-child {
    border-top: 1px solid rgba(78,174,255,.10);
}

.tech-item:hover {
    padding-left: 20px;
    background: linear-gradient(
        90deg,
        rgba(23,121,193,.09),
        transparent
    );
}

.tech-number {
    color: #3d607c;
    font-size: 7px;
    letter-spacing: 1px;
}

.tech-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(67,183,255,.17);
    background: rgba(16,73,113,.13);
    color: #56d4ff;
    font-size: 17px;
    transition: .35s;
}

.tech-item:hover .tech-icon {
    border-color: rgba(74,207,255,.45);
    box-shadow: 0 0 25px rgba(30,170,255,.12);
}

.tech-item div:last-child > span {
    color: #42779c;
    font-size: 6px;
    letter-spacing: 1.5px;
}

.tech-item h3 {
    margin-top: 4px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
}

.tech-item p {
    margin-top: 5px;
    color: #607991;
    font-size: 8px;
}


/* =====================================================
   CORE
===================================================== */

.technology-core {
    position: relative;
    width: 420px;
    height: 420px;
    margin: auto;
}

.core-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid rgba(67,181,255,.15);
}

.orbit-one {
    width: 170px;
    height: 170px;
}

.orbit-two {
    width: 275px;
    height: 275px;
    border-style: dashed;
    animation: techOrbit 30s linear infinite;
}

.orbit-three {
    width: 390px;
    height: 390px;
    opacity: .6;
}

@keyframes techOrbit {
    to {
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }
}


/* CORE CENTER */

.core-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 135px;
    height: 135px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(71,195,255,.35);
    background:
        radial-gradient(
            circle,
            rgba(25,125,190,.3),
            rgba(4,18,34,.96)
        );
    box-shadow:
        0 0 70px rgba(0,151,255,.12);
}

.core-center strong {
    position: relative;
    z-index: 2;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 44px;
    line-height: 1;
    background:
        linear-gradient(
            135deg,
            #c8efff,
            #38caff,
            #187dff
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.core-center > span:last-child {
    position: relative;
    z-index: 2;
    margin-top: 7px;
    color: #6085a2;
    text-align: center;
    font-size: 5px;
    line-height: 1.6;
    letter-spacing: 2px;
}

.core-small {
    position: relative;
    z-index: 2;
    margin-bottom: 5px;
    color: #63cfff;
    font-size: 5px;
    letter-spacing: 2px;
}


/* PULSE */

.core-pulse {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(71,198,255,.3);
    animation: corePulse 3s ease-out infinite;
}

@keyframes corePulse {
    0% {
        transform: scale(1);
        opacity: .8;
    }

    100% {
        transform: scale(1.65);
        opacity: 0;
    }
}


/* PARTICLES */

.orbit-particle {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #55d9ff;
    box-shadow: 0 0 12px #55d9ff;
}

.particle-one {
    top: 48px;
    left: 203px;
}

.particle-two {
    right: 39px;
    top: 205px;
}

.particle-three {
    bottom: 51px;
    left: 203px;
}

.particle-four {
    left: 39px;
    top: 205px;
}


/* LABELS */

.core-label {
    position: absolute;
    padding: 6px 10px;
    border: 1px solid rgba(67,178,255,.13);
    border-radius: 20px;
    background: rgba(4,20,36,.7);
    color: #4f7998;
    font-size: 5px;
    letter-spacing: 1.3px;
}

.label-top {
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
}

.label-right {
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
}

.label-bottom {
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
}

.label-left {
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}


/* FOOTER */

.technology-footer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    margin-top: 65px;
    color: #45647e;
    font-size: 6px;
    letter-spacing: 1.5px;
}

.technology-line {
    height: 1px;
    background:
        linear-gradient(
            90deg,
            rgba(57,169,240,.08),
            rgba(57,169,240,.3),
            rgba(57,169,240,.08)
        );
}

.technology-online {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5a9b93;
}

.technology-online i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #52ddb9;
    box-shadow: 0 0 9px #52ddb9;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .technology-system {
        grid-template-columns: 1fr 320px 1fr;
        gap: 25px;
    }

    .technology-core {
        width: 320px;
        height: 320px;
        transform: scale(.85);
    }

}

@media (max-width: 850px) {

    .technology-heading-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .technology-system {
        grid-template-columns: 1fr;
        margin-top: 65px;
    }

    .technology-core {
        order: -1;
    }

}

@media (max-width: 520px) {

    .technology-section {
        padding: 100px 0;
    }

    .technology-core {
        width: 300px;
        height: 300px;
        transform: scale(.75);
        margin: -35px auto;
    }

    .technology-footer {
        grid-template-columns: 1fr;
    }

    .technology-line {
        display: none;
    }

}

/* =====================================================
   06 - CTA / CONTACT
===================================================== */

.cta-section {
    position: relative;
    padding: 150px 0 90px;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.04);
}

.cta-grid-background {
    position: absolute;
    inset: 0;
    opacity: .12;
    pointer-events: none;

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

    background-size: 60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 75%,
            transparent
        );
}

.cta-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    pointer-events: none;
}

.cta-glow-one {
    width: 500px;
    height: 500px;
    left: 15%;
    top: 30%;
    background: rgba(0,123,255,.08);
}

.cta-glow-two {
    width: 420px;
    height: 420px;
    right: 5%;
    bottom: 0;
    background: rgba(0,205,255,.055);
}


/* WRAPPER */

.cta-wrapper {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(78,177,255,.15);
    border-bottom: 1px solid rgba(78,177,255,.15);
}


/* TOP */

.cta-top {
    min-height: 85px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(78,177,255,.10);
}

.cta-status {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #5e8b9f;
    font-size: 6px;
    letter-spacing: 1.5px;
}

.cta-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #55e0bb;
    box-shadow: 0 0 12px #55e0bb;
}


/* MAIN */

.cta-main {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 90px;
    align-items: end;
    padding: 90px 0;
}

.cta-overline {
    color: #4c7798;
    font-size: 7px;
    letter-spacing: 2px;
}

.cta-title h2 {
    margin-top: 17px;
    max-width: 850px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(60px, 7.2vw, 108px);

    line-height: .94;
    letter-spacing: -5px;
}

.cta-title h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #bcecff,
            #43ccff,
            #1988ff
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}

.cta-description {
    padding-bottom: 8px;
}

.cta-description p {
    color: #738da4;
    font-size: 11px;
    line-height: 1.9;
}


/* CTA BUTTON */

.cta-main-button {
    position: relative;

    margin-top: 32px;

    min-height: 64px;

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

    padding-left: 22px;

    border: 1px solid rgba(71,190,255,.28);
    border-radius: 4px;

    overflow: hidden;

    color: #dff5ff;
    background: rgba(11,55,89,.24);

    font-size: 9px;

    transition: .35s ease;
}

.cta-main-button::before {
    content: "";

    position: absolute;
    inset: 0;

    transform: translateX(-101%);

    background:
        linear-gradient(
            90deg,
            rgba(25,137,221,.18),
            rgba(46,197,255,.12)
        );

    transition: transform .4s ease;
}

.cta-main-button:hover::before {
    transform: translateX(0);
}

.cta-main-button > span,
.cta-button-icon {
    position: relative;
    z-index: 2;
}

.cta-button-icon {
    width: 63px;
    height: 63px;

    display: grid;
    place-items: center;

    border-left:
        1px solid rgba(71,190,255,.20);

    color: #64d6ff;

    font-size: 17px;
}

.cta-main-button:hover .cta-button-icon {
    transform: rotate(45deg);
}


/* CHANNELS */

.cta-channels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(78,177,255,.10);
}

.cta-channel {
    position: relative;

    min-height: 150px;

    display: grid;
    grid-template-columns: 25px 46px 1fr 30px;
    gap: 15px;

    align-items: center;

    padding: 25px;

    border-right:
        1px solid rgba(78,177,255,.10);

    color: inherit;

    transition:
        background .35s ease;
}

.cta-channel:last-child {
    border-right: 0;
}

.cta-channel:hover {
    background:
        linear-gradient(
            135deg,
            rgba(15,91,146,.13),
            rgba(0,0,0,0)
        );
}

.channel-number {
    color: #3e607b;
    font-size: 6px;
}

.channel-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(68,187,255,.20);

    color: #57d4ff;

    font-size: 15px;
}

.channel-content {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.channel-content span {
    color: #486d89;
    font-size: 6px;
    letter-spacing: 1.5px;
}

.channel-content strong {
    color: #a4bfd2;
    font-size: 9px;
    font-weight: 500;
}

.channel-arrow {
    color: #4d87ac;
    transition: .3s ease;
}

.cta-channel:hover .channel-arrow {
    color: #62d4ff;
    transform: translate(3px,-3px);
}


/* SYSTEM SIGNATURE */

.cta-system {
    min-height: 65px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 25px;

    align-items: center;

    border-top:
        1px solid rgba(78,177,255,.10);

    color: #3f6079;

    font-size: 5px;
    letter-spacing: 1.4px;
}

.cta-system > div:first-child {
    display: flex;
    gap: 10px;
}

.cta-system strong {
    color: #587c96;
    font-weight: 500;
}

.cta-system-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(62,171,240,.05),
            rgba(62,171,240,.25),
            rgba(62,171,240,.05)
        );
}

.cta-system-state {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #57978f;
}

.cta-system-state i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #50ddb8;

    box-shadow:
        0 0 9px #50ddb8;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .cta-main {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .cta-description {
        max-width: 500px;
    }

    .cta-channels {
        grid-template-columns: 1fr;
    }

    .cta-channel {
        border-right: 0;

        border-bottom:
            1px solid rgba(78,177,255,.10);
    }

}

@media (max-width: 600px) {

    .cta-section {
        padding: 100px 0 60px;
    }

    .cta-top {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 15px;
    }

    .cta-main {
        padding: 65px 0;
    }

    .cta-title h2 {
        font-size: clamp(50px,15vw,72px);
        letter-spacing: -3px;
    }

    .cta-channel {
        grid-template-columns: 22px 42px 1fr;
    }

    .channel-arrow {
        display: none;
    }

    .cta-system {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 20px 0;
    }

    .cta-system-line {
        display: none;
    }

}

/* =====================================================
   FOOTER - ALVAS PERÚ SYSTEM
===================================================== */

.site-footer {
    position: relative;
    overflow: hidden;

    padding: 90px 0 35px;

    background:
        linear-gradient(
            180deg,
            rgba(3, 12, 24, .35),
            rgba(2, 9, 18, .95)
        );

    border-top:
        1px solid rgba(74, 177, 255, .10);
}


/* GLOW */

.footer-glow {
    position: absolute;

    width: 600px;
    height: 300px;

    left: 50%;
    bottom: -230px;

    transform: translateX(-50%);

    border-radius: 50%;

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

    filter: blur(100px);

    pointer-events: none;
}


/* =====================================================
   MAIN
===================================================== */

.footer-main {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.6fr
        .7fr
        1fr
        1fr;

    gap: 70px;

    padding-bottom: 70px;
}


/* =====================================================
   BRAND
===================================================== */

.footer-brand {
    max-width: 390px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;

    gap: 15px;

    color: inherit;
}

.footer-logo-symbol {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    border:
        1px solid rgba(78, 184, 255, .25);

    background:
        linear-gradient(
            145deg,
            rgba(26, 81, 130, .45),
            rgba(8, 27, 48, .75)
        );

    color: #75ceff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 27px;
    font-weight: 700;

    box-shadow:
        inset 0 0 25px rgba(47, 151, 230, .05);
}

.footer-logo-text {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.footer-logo-text strong {
    color: #edf8ff;

    font-size: 13px;

    letter-spacing: 1.5px;
}

.footer-logo-text span {
    color: #5f7c94;

    font-size: 6px;

    letter-spacing: 3px;
}

.footer-brand > p {
    margin-top: 28px;

    max-width: 340px;

    color: #637e95;

    font-size: 9px;

    line-height: 1.9;
}


/* STATUS */

.footer-status {
    margin-top: 27px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #508f89;

    font-size: 6px;

    letter-spacing: 1.7px;
}

.footer-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #58e1bd;

    box-shadow:
        0 0 10px #58e1bd;
}


/* =====================================================
   COLUMNS
===================================================== */

.footer-column {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
}

.footer-column-title {
    margin-bottom: 10px;

    color: #416782;

    font-size: 6px;

    letter-spacing: 2px;
}

.footer-column > a {
    position: relative;

    color: #8299ad;

    font-size: 9px;

    transition:
        color .25s ease,
        transform .25s ease;
}

.footer-column > a:hover {
    color: #66d3ff;

    transform: translateX(4px);
}


/* CONTACT */

.footer-contact > a {
    display: flex;
    align-items: center;

    gap: 10px;
}

.footer-contact i {
    width: 17px;

    color: #4caedf;

    font-size: 11px;
}


/* =====================================================
   SYSTEM LINE
===================================================== */

.footer-system-line {
    position: relative;
    z-index: 2;

    min-height: 62px;

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

    border-top:
        1px solid rgba(71, 170, 238, .09);

    border-bottom:
        1px solid rgba(71, 170, 238, .09);
}

.footer-system-line > div:first-child {
    display: flex;
    align-items: center;

    gap: 14px;

    color: #395a72;

    font-size: 5px;

    letter-spacing: 1.8px;
}

.footer-system-line i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #4599c8;
}

.footer-system-code {
    color: #314d62;

    font-size: 5px;

    letter-spacing: 1.5px;
}


/* =====================================================
   BOTTOM
===================================================== */

.footer-bottom {
    position: relative;
    z-index: 2;

    min-height: 85px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 30px;
}

.footer-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    color: #405d73;

    font-size: 6px;

    letter-spacing: .5px;
}

.footer-copy strong {
    color: #587a93;

    font-weight: 500;
}


/* DOMAIN */

.footer-domain {
    display: flex;
    align-items: center;

    gap: 8px;
}

.footer-domain-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #55d8ff;

    box-shadow:
        0 0 9px rgba(85, 216, 255, .8);
}

.footer-domain a {
    color: #557991;

    font-size: 7px;

    letter-spacing: 1px;

    transition: .25s;
}

.footer-domain a:hover {
    color: #70d7ff;
}


/* BACK TOP */

.footer-back-top {
    justify-self: end;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #54778f;

    font-size: 6px;

    letter-spacing: 1.3px;

    transition: .3s;
}

.footer-back-top i {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(70, 171, 239, .18);

    border-radius: 50%;

    color: #5bcaff;

    transition: .3s;
}

.footer-back-top:hover {
    color: #71d6ff;
}

.footer-back-top:hover i {
    transform: translateY(-4px);

    border-color:
        rgba(79, 199, 255, .45);

    box-shadow:
        0 0 18px rgba(40, 166, 230, .10);
}


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

@media (max-width: 1000px) {

    .footer-main {
        grid-template-columns:
            1.4fr 1fr 1fr;

        gap: 50px;
    }

    .footer-brand {
        grid-column:
            1 / -1;

        max-width: 500px;
    }

}


@media (max-width: 700px) {

    .site-footer {
        padding-top: 70px;
    }

    .footer-main {
        grid-template-columns:
            1fr 1fr;

        gap: 50px 30px;
    }

    .footer-brand {
        grid-column:
            1 / -1;
    }

    .footer-contact {
        grid-column:
            1 / -1;
    }

    .footer-system-line {
        padding: 20px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }

    .footer-bottom {
        grid-template-columns: 1fr;

        padding: 28px 0;

        gap: 18px;
    }

    .footer-back-top {
        justify-self: start;
    }

}


@media (max-width: 450px) {

    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-column,
    .footer-contact {
        grid-column: auto;
    }

}

/* =====================================================
   AJUSTE DE LEGIBILIDAD - FOOTER
===================================================== */

.footer-logo-text strong {
    font-size: 15px;
}

.footer-logo-text span {
    font-size: 7px;
}

.footer-brand > p {
    font-size: 11px;
    line-height: 1.9;
}

.footer-status {
    font-size: 7px;
}

/* Títulos: NAVEGACIÓN / SOLUCIONES / CONTACTO */
.footer-column-title {
    font-size: 8px;
    letter-spacing: 2px;
}

/* Enlaces del footer */
.footer-column > a {
    font-size: 11px;
}

/* Contacto */
.footer-contact > a {
    font-size: 11px;
}

/* ALVAS • TECHNOLOGY • PERÚ */
.footer-system-line > div:first-child {
    font-size: 7px;
}

/* APS / DIGITAL SYSTEM / 2026 */
.footer-system-code {
    font-size: 7px;
}

/* Copyright */
.footer-copy {
    font-size: 7px;
}

/* alvasperusystem.com */
.footer-domain a {
    font-size: 8px;
}

/* VOLVER ARRIBA */
.footer-back-top {
    font-size: 7px;
}

/* =====================================================
   CURSOR Y SELECCIÓN DE TEXTO
===================================================== */

/* Cursor normal en toda la página */
body,
body * {
    cursor: default;
}

/* Evitar selección accidental del contenido visual */
header,
main,
section,
footer {
    -webkit-user-select: none;
    user-select: none;
}

/* Los elementos interactivos conservan cursor de mano */
a,
button,
input[type="button"],
input[type="submit"],
[role="button"] {
    cursor: pointer !important;
}

/* Campos donde sí debe poder escribirse y seleccionar */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
    cursor: text !important;
    -webkit-user-select: text;
    user-select: text;
}

/* =====================================================
   PÁGINA NOSOTROS
   ALVAS PERÚ SYSTEM
===================================================== */

.about-page {
    position: relative;
    overflow: hidden;
}


/* =====================================================
   01 - HERO
===================================================== */

.about-hero {
    position: relative;
    min-height: 100vh;
    padding: 90px 0 120px;
    overflow: hidden;
}

.about-hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .13;

    background-image:
        linear-gradient(
            rgba(64, 158, 230, .13) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(64, 158, 230, .13) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            black 70%,
            transparent
        );
}

.about-hero-glow {
    position: absolute;

    width: 850px;
    height: 600px;

    left: 50%;
    top: 40%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        rgba(0, 115, 255, .07);

    filter: blur(160px);

    pointer-events: none;
}


/* HERO TOP */

.about-hero-top {
    position: relative;
    z-index: 2;

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

    padding-bottom: 45px;

    border-bottom:
        1px solid rgba(71, 170, 239, .10);
}

.about-hero-status {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #53758f;

    font-size: 7px;
    letter-spacing: 1.8px;
}

.about-hero-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #5bd8ff;

    box-shadow:
        0 0 10px rgba(91, 216, 255, .9);
}


/* HERO CONTENT */

.about-hero-content {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.4fr .6fr;

    gap: 100px;

    align-items: end;

    padding: 85px 0 70px;
}

.about-eyebrow {
    color: #4b7695;

    font-size: 7px;

    letter-spacing: 2.5px;
}

.about-hero-title h1 {
    margin-top: 18px;

    max-width: 900px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(72px, 8vw, 125px);

    line-height: .88;

    letter-spacing: -6px;
}

.about-hero-title h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #c7efff,
            #58d1ff,
            #238aff
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}


/* DESCRIPTION */

.about-hero-description {
    padding-bottom: 10px;
}

.about-description-number {
    display: block;

    margin-bottom: 20px;

    color: #416680;

    font-size: 6px;

    letter-spacing: 2px;
}

.about-hero-description p {
    color: #7890a5;

    font-size: 11px;

    line-height: 1.9;
}

.about-description-line {
    height: 1px;

    margin: 28px 0 18px;

    background:
        linear-gradient(
            90deg,
            rgba(68, 176, 244, .35),
            transparent
        );
}

.about-description-small {
    color: #456d89;

    font-size: 6px;

    letter-spacing: 1.8px;
}


/* =====================================================
   CORE VISUAL
===================================================== */

.about-core {
    position: relative;
    z-index: 2;

    min-height: 430px;

    display: grid;

    grid-template-columns:
        1fr 430px 1fr;

    align-items: center;

    gap: 70px;

    border-top:
        1px solid rgba(72, 169, 238, .10);

    border-bottom:
        1px solid rgba(72, 169, 238, .10);
}


/* LEFT */

.about-core-info > span,
.about-core-text > span {
    color: #426985;

    font-size: 6px;

    letter-spacing: 2px;
}

.about-core-info strong {
    display: block;

    margin-top: 22px;

    color: #edf7ff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 38px;

    line-height: 1.12;

    letter-spacing: -1.5px;
}

.about-core-info strong em {
    color: #56728e;

    font-style: normal;
}


/* RIGHT */

.about-core-text p {
    margin-top: 22px;

    max-width: 330px;

    color: #71899e;

    font-size: 10px;

    line-height: 1.9;
}


/* CORE */

.about-core-visual {
    position: relative;

    width: 430px;
    height: 430px;

    margin: auto;
}

.about-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    border:
        1px solid rgba(69, 182, 255, .18);
}

.ring-a {
    width: 170px;
    height: 170px;
}

.ring-b {
    width: 280px;
    height: 280px;

    border-style: dashed;

    animation:
        aboutRotate 35s linear infinite;
}

.ring-c {
    width: 400px;
    height: 400px;

    opacity: .7;
}

@keyframes aboutRotate {

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


/* NODES */

.about-node {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #5bd9ff;

    box-shadow:
        0 0 13px #5bd9ff;
}

.node-a {
    top: 45px;
    left: 211px;
}

.node-b {
    right: 38px;
    top: 211px;
}

.node-c {
    bottom: 44px;
    left: 211px;
}


/* CENTER */

.about-core-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 150px;
    height: 150px;

    transform:
        translate(-50%, -50%);

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    border:
        1px solid rgba(71, 193, 255, .38);

    background:
        radial-gradient(
            circle,
            rgba(26, 124, 190, .28),
            rgba(3, 16, 30, .96)
        );

    box-shadow:
        0 0 80px rgba(0, 151, 255, .10);
}

.about-core-center::before {
    content: "";

    position: absolute;

    inset: -1px;

    border-radius: 50%;

    border:
        1px solid rgba(84, 206, 255, .30);

    animation:
        aboutPulse 3s ease-out infinite;
}

@keyframes aboutPulse {

    0% {
        transform: scale(1);
        opacity: .7;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }

}

.about-core-center > span {
    position: relative;
    z-index: 2;

    color: #59c9f8;

    font-size: 5px;

    letter-spacing: 2px;
}

.about-core-center strong {
    position: relative;
    z-index: 2;

    margin: 5px 0;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 50px;

    line-height: 1;

    background:
        linear-gradient(
            135deg,
            #d0f4ff,
            #49caff,
            #2181ff
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}

.about-core-center small {
    position: relative;
    z-index: 2;

    color: #547995;

    text-align: center;

    font-size: 5px;

    line-height: 1.5;

    letter-spacing: 2px;
}


/* =====================================================
   02 - STORY
===================================================== */

.about-story {
    position: relative;

    padding: 150px 0;
}

.about-story-grid {
    display: grid;

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

    gap: 130px;
}

.about-story h2 {
    margin-top: 35px;

    max-width: 700px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(50px, 5vw, 78px);

    line-height: 1;

    letter-spacing: -4px;
}

.about-story h2 span {
    display: block;

    color: #526d88;
}

.about-story-content {
    padding-top: 50px;
}

.about-story-content p {
    margin-bottom: 25px;

    color: #71889d;

    font-size: 10px;

    line-height: 1.95;
}

.about-story-content .about-story-lead {
    color: #a2b7c8;

    font-size: 13px;
}


/* PRINCIPLES */

.about-principles {
    display: grid;

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

    margin-top: 100px;

    border-top:
        1px solid rgba(69, 169, 238, .13);

    border-bottom:
        1px solid rgba(69, 169, 238, .13);
}

.about-principle {
    min-height: 260px;

    padding: 35px 28px;

    border-right:
        1px solid rgba(69, 169, 238, .13);

    transition:
        background .35s ease;
}

.about-principle:last-child {
    border-right: 0;
}

.about-principle:hover {
    background:
        linear-gradient(
            145deg,
            rgba(21, 93, 147, .12),
            transparent
        );
}

.about-principle > span {
    color: #42627c;

    font-size: 6px;
}

.about-principle strong {
    display: block;

    margin-top: 65px;

    color: #e6f3fb;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 21px;
}

.about-principle p {
    margin-top: 14px;

    color: #637d94;

    font-size: 8px;

    line-height: 1.8;
}


/* =====================================================
   03 - MISSION / VISION
===================================================== */

.about-direction {
    position: relative;

    padding: 150px 0;

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

.about-direction-header h2 {
    margin-top: 35px;

    max-width: 800px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(50px, 5vw, 80px);

    line-height: 1;

    letter-spacing: -4px;
}

.about-direction-header h2 span {
    display: block;

    color: #526e89;
}


/* CARDS */

.direction-grid {
    display: grid;

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

    margin-top: 85px;

    border:
        1px solid rgba(69, 171, 241, .13);
}

.direction-card {
    position: relative;

    min-height: 480px;

    padding: 45px;

    overflow: hidden;

    border-right:
        1px solid rgba(69, 171, 241, .13);

    transition:
        background .4s ease;
}

.direction-card:last-child {
    border-right: 0;
}

.direction-card:hover {
    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(29, 130, 202, .12),
            transparent 45%
        );
}

.direction-card-featured {
    background:
        linear-gradient(
            145deg,
            rgba(18, 72, 113, .09),
            transparent
        );
}

.direction-number {
    color: #426984;

    font-size: 6px;

    letter-spacing: 1.5px;
}

.direction-icon {
    width: 58px;
    height: 58px;

    margin-top: 65px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(75, 190, 255, .20);

    border-radius: 13px;

    color: #5ed3ff;

    font-size: 22px;
}

.direction-card h3 {
    margin-top: 35px;

    max-width: 500px;

    color: #edf7ff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 31px;

    line-height: 1.15;

    letter-spacing: -1px;
}

.direction-card p {
    margin-top: 25px;

    max-width: 510px;

    color: #6e879d;

    font-size: 9px;

    line-height: 1.9;
}

.direction-status {
    position: absolute;

    left: 45px;
    bottom: 40px;

    display: flex;
    align-items: center;

    gap: 9px;

    color: #4f857f;

    font-size: 6px;

    letter-spacing: 1.5px;
}

.direction-status span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #56ddb9;

    box-shadow:
        0 0 10px #56ddb9;
}


/* =====================================================
   04 - VALUES
===================================================== */

.about-values {
    position: relative;

    padding: 150px 0;
}

.values-heading {
    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 100px;

    align-items: end;
}

.values-heading h2 {
    margin-top: 35px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(50px, 5vw, 80px);

    line-height: 1;

    letter-spacing: -4px;
}

.values-heading h2 span {
    display: block;

    color: #536f8a;
}

.values-heading > p {
    max-width: 400px;

    color: #71899e;

    font-size: 10px;

    line-height: 1.9;
}


/* VALUE GRID */

.values-grid {
    display: grid;

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

    margin-top: 85px;

    border-top:
        1px solid rgba(68, 171, 240, .13);

    border-bottom:
        1px solid rgba(68, 171, 240, .13);
}

.value-card {
    position: relative;

    min-height: 330px;

    padding: 35px 30px;

    border-right:
        1px solid rgba(68, 171, 240, .13);

    transition:
        background .35s ease;
}

.value-card:last-child {
    border-right: 0;
}

.value-card:hover {
    background:
        linear-gradient(
            150deg,
            rgba(21, 97, 151, .13),
            transparent
        );
}

.value-number {
    color: #3e607a;

    font-size: 6px;
}

.value-card > i {
    display: block;

    margin-top: 60px;

    color: #59ceff;

    font-size: 24px;
}

.value-card h3 {
    margin-top: 25px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 22px;
}

.value-card p {
    margin-top: 14px;

    color: #627d94;

    font-size: 8px;

    line-height: 1.8;
}


/* =====================================================
   05 - CAPABILITIES
===================================================== */

.about-capabilities {
    padding: 150px 0;

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

.capabilities-layout {
    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 120px;
}

.capabilities-title h2 {
    margin-top: 35px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(48px, 4.5vw, 72px);

    line-height: 1;

    letter-spacing: -4px;
}

.capabilities-title h2 span {
    display: block;

    color: #536f8a;
}


/* LIST */

.capabilities-list {
    border-top:
        1px solid rgba(70, 172, 241, .13);
}

.capability-row {
    min-height: 100px;

    display: grid;

    grid-template-columns:
        45px 1fr 45px;

    align-items: center;

    border-bottom:
        1px solid rgba(70, 172, 241, .13);

    transition:
        padding .3s ease,
        background .3s ease;
}

.capability-row:hover {
    padding-left: 15px;

    background:
        linear-gradient(
            90deg,
            rgba(21, 104, 163, .10),
            transparent
        );
}

.capability-row > span {
    color: #42617a;

    font-size: 6px;
}

.capability-row strong {
    color: #b7c9d6;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 18px;

    font-weight: 500;
}

.capability-row i {
    color: #56caff;

    font-size: 18px;
}


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

.about-final {
    position: relative;

    padding: 80px 0 140px;
}

.about-final-box {
    position: relative;

    min-height: 570px;

    padding: 80px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;

    border:
        1px solid rgba(73, 179, 247, .16);

    background:
        linear-gradient(
            135deg,
            rgba(9, 46, 79, .20),
            rgba(3, 14, 27, .25)
        );
}

.about-final-box::before {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: -150px;
    top: -180px;

    border-radius: 50%;

    border:
        1px solid rgba(65, 180, 255, .13);

    box-shadow:
        0 0 0 70px rgba(56, 164, 237, .025),
        0 0 0 140px rgba(56, 164, 237, .018);
}

.about-final-label {
    position: relative;
    z-index: 2;

    color: #4a7391;

    font-size: 7px;

    letter-spacing: 2px;
}

.about-final h2 {
    position: relative;
    z-index: 2;

    margin-top: 25px;

    max-width: 900px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(65px, 7vw, 105px);

    line-height: .93;

    letter-spacing: -5px;
}

.about-final h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #c7efff,
            #55d1ff,
            #2489ff
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}

.about-final-box > a {
    position: relative;
    z-index: 2;

    width: fit-content;

    margin-top: 45px;

    display: flex;
    align-items: center;

    gap: 35px;

    padding: 18px 22px;

    border:
        1px solid rgba(72, 189, 255, .24);

    color: #b7d6e7;

    font-size: 9px;

    transition: .3s;
}

.about-final-box > a:hover {
    background:
        rgba(36, 143, 209, .10);

    border-color:
        rgba(72, 202, 255, .42);
}

.about-final-box > a i {
    color: #5fd4ff;

    transition:
        transform .3s ease;
}

.about-final-box > a:hover i {
    transform:
        translate(4px, -4px);
}


/* FINAL SYSTEM */

.about-final-system {
    position: absolute;

    left: 80px;
    right: 80px;
    bottom: 40px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 25px;

    color: #3e6079;

    font-size: 5px;

    letter-spacing: 1.5px;
}

.about-final-system > div {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(72, 174, 239, .08),
            rgba(72, 174, 239, .28),
            rgba(72, 174, 239, .08)
        );
}

.about-final-online {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #57968e;
}

.about-final-online i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #58ddb9;

    box-shadow:
        0 0 9px #58ddb9;
}


/* =====================================================
   RESPONSIVE - NOSOTROS
===================================================== */

@media (max-width: 1050px) {

    .about-core {
        grid-template-columns:
            1fr 340px 1fr;

        gap: 35px;
    }

    .about-core-visual {
        width: 340px;
        height: 340px;

        transform: scale(.85);
    }

    .about-story-grid {
        gap: 70px;
    }

    .capabilities-layout {
        gap: 70px;
    }

}


@media (max-width: 850px) {

    .about-hero-content,
    .about-story-grid,
    .values-heading,
    .capabilities-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-core {
        grid-template-columns: 1fr;

        padding: 60px 0;
    }

    .about-core-visual {
        order: -1;
    }

    .about-principles,
    .values-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

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

    .direction-card {
        border-right: 0;

        border-bottom:
            1px solid rgba(69, 171, 241, .13);
    }

    .direction-card:last-child {
        border-bottom: 0;
    }

}


@media (max-width: 600px) {

    .about-hero {
        padding-top: 60px;
    }

    .about-hero-top {
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;
    }

    .about-hero-title h1 {
        font-size:
            clamp(60px, 18vw, 90px);

        letter-spacing: -4px;
    }

    .about-principles,
    .values-grid {
        grid-template-columns: 1fr;
    }

    .about-principle,
    .value-card {
        border-right: 0;

        border-bottom:
            1px solid rgba(69, 169, 238, .13);
    }

    .about-core-visual {
        width: 300px;
        height: 300px;

        transform: scale(.72);

        margin: -40px auto;
    }

    .direction-card {
        padding: 32px;

        min-height: 500px;
    }

    .direction-status {
        left: 32px;
    }

    .about-final-box {
        min-height: 530px;

        padding: 45px 30px;
    }

    .about-final h2 {
        font-size:
            clamp(52px, 16vw, 75px);

        letter-spacing: -3px;
    }

    .about-final-system {
        left: 30px;
        right: 30px;

        grid-template-columns: 1fr;
    }

    .about-final-system > div {
        display: none;
    }

}

/* =========================================================
   SERVICES PAGE — HERO
========================================================= */

.services-page {
    overflow: hidden;
}

.services-hero {
    position: relative;
    min-height: calc(100vh - 90px);
    padding: 52px 0 34px;
    border-bottom: 1px solid rgba(116, 194, 255, .12);
    overflow: hidden;
}

.services-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(35, 132, 255, .12),
            transparent 30%
        ),
        linear-gradient(
            rgba(73, 137, 213, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(73, 137, 213, .035) 1px,
            transparent 1px
        );

    background-size:
        auto,
        72px 72px,
        72px 72px;
}

.services-hero-inner {
    position: relative;
    z-index: 2;
}


/* CABECERA */

.services-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(120, 184, 255, .12);
}

.section-index,
.system-label {
    display: flex;
    align-items: center;
    gap: 16px;

    font-size: 11px;
    letter-spacing: .28em;
    color: #6e86a8;
}

.section-index span:first-child {
    color: #75d8ff;
}

.system-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #75dcff;

    box-shadow:
        0 0 8px rgba(117, 220, 255, .9),
        0 0 20px rgba(117, 220, 255, .45);
}


/* LAYOUT */

.services-hero-layout {
    min-height: 650px;

    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 70px;

    padding: 55px 0 45px;
}


/* TEXTO */

.services-hero-content {
    max-width: 690px;
}

.services-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 25px;

    font-size: 11px;
    letter-spacing: .26em;

    color: #72cfff;
}

.services-hero-content h1 {
    margin: 0;

    font-size: clamp(64px, 6vw, 112px);
    line-height: .93;
    letter-spacing: -.065em;

    color: #f6f9ff;
}

.services-hero-content h1 span {
    display: block;

    background: linear-gradient(
        90deg,
        #bdeaff,
        #67c9ff,
        #3f86ff
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

.services-hero-description {
    max-width: 640px;

    margin: 35px 0 0;

    font-size: 18px;
    line-height: 1.8;

    color: #8192ad;
}


/* BOTONES */

.services-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 35px;
}

.btn-primary-tech,
.btn-outline-tech {
    min-height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    padding: 0 24px;

    text-decoration: none;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.btn-primary-tech {
    color: #03101f;

    background: linear-gradient(
        110deg,
        #4f9cff,
        #78dcff
    );
}

.btn-outline-tech {
    color: #dceaff;

    border: 1px solid rgba(115, 188, 255, .25);
    background: rgba(5, 16, 34, .45);
}

.btn-primary-tech:hover,
.btn-outline-tech:hover {
    transform: translateY(-3px);
}

.btn-outline-tech:hover {
    border-color: rgba(115, 207, 255, .55);
}


/* MÉTRICAS */

.services-metrics {
    display: flex;
    gap: 42px;

    margin-top: 55px;
    padding-top: 25px;

    border-top: 1px solid rgba(111, 180, 255, .12);
}

.service-metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-metric strong {
    font-size: 25px;
    color: #f5f8ff;
}

.service-metric span {
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #607695;
}


/* =========================================================
   TECHNOLOGY CORE
========================================================= */

.services-core {
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-interface {
    position: relative;

    width: min(100%, 700px);
    aspect-ratio: 1 / 1;

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

.core-grid {
    position: absolute;
    inset: 7%;

    border-radius: 50%;

    opacity: .35;

    background:
        linear-gradient(
            rgba(80, 156, 240, .06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(80, 156, 240, .06) 1px,
            transparent 1px
        );

    background-size: 34px 34px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 72%
        );
}


/* ANILLOS */

.core-ring {
    position: absolute;
    border-radius: 50%;

    border: 1px solid rgba(89, 173, 255, .22);
}

.core-ring-1 {
    width: 35%;
    height: 35%;
}

.core-ring-2 {
    width: 58%;
    height: 58%;

    border-style: dashed;

    animation: coreRotate 28s linear infinite;
}

.core-ring-3 {
    width: 82%;
    height: 82%;

    border-color: rgba(91, 173, 255, .17);

    animation: coreRotateReverse 42s linear infinite;
}

@keyframes coreRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes coreRotateReverse {
    to {
        transform: rotate(-360deg);
    }
}


/* CENTRO */

.core-center {
    position: relative;
    z-index: 4;

    width: 185px;
    height: 185px;

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

    border-radius: 50%;

    border: 1px solid rgba(102, 194, 255, .45);

    background:
        radial-gradient(
            circle,
            rgba(45, 137, 230, .18),
            rgba(5, 16, 34, .85) 70%
        );

    box-shadow:
        0 0 60px rgba(46, 139, 255, .13),
        inset 0 0 35px rgba(87, 181, 255, .07);
}

.core-center::before {
    content: "";

    position: absolute;
    inset: -12px;

    border-radius: 50%;

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

.core-center strong {
    font-size: 72px;
    line-height: 1;

    background: linear-gradient(
        180deg,
        #d5f3ff,
        #53adff
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    text-shadow: 0 0 35px rgba(73, 172, 255, .22);
}

.core-center span {
    margin-top: 8px;

    font-size: 8px;
    letter-spacing: .38em;

    color: #7187a7;
}

.core-center .core-small {
    margin: 0 0 6px;

    color: #77ceff;
}


/* NODOS */

.core-node {
    position: absolute;
    z-index: 5;

    min-width: 105px;
    height: 47px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 0 14px;

    border-radius: 8px;

    border: 1px solid rgba(104, 184, 255, .22);

    background: rgba(5, 16, 34, .82);

    backdrop-filter: blur(12px);

    color: #6dcef9;

    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}

.core-node i {
    font-size: 16px;
}

.core-node span {
    font-size: 8px;
    letter-spacing: .19em;

    color: #8aa1be;
}

.node-software {
    top: 12%;
    left: 23%;
}

.node-data {
    top: 21%;
    right: 7%;
}

.node-cloud {
    bottom: 24%;
    right: 4%;
}

.node-network {
    bottom: 8%;
    left: 43%;
}

.node-security {
    bottom: 24%;
    left: 3%;
}

.node-support {
    top: 21%;
    left: 5%;
}


/* PUNTOS */

.orbit-point {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #72d7ff;

    box-shadow:
        0 0 8px #72d7ff,
        0 0 22px rgba(114, 215, 255, .65);
}

.point-1 {
    top: 8%;
}

.point-2 {
    right: 8%;
    bottom: 36%;
}

.point-3 {
    left: 11%;
    bottom: 27%;
}


/* PANEL STATUS */

.core-status {
    position: absolute;
    z-index: 8;

    right: 1%;
    bottom: 1%;

    width: 275px;

    padding: 18px;

    border: 1px solid rgba(102, 184, 255, .25);

    border-radius: 9px;

    background: rgba(3, 13, 30, .88);

    backdrop-filter: blur(16px);

    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.core-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 13px;
    margin-bottom: 13px;

    border-bottom: 1px solid rgba(105, 181, 255, .12);

    font-size: 8px;
    letter-spacing: .18em;

    color: #7086a5;
}

.status-online {
    color: #7cebc6 !important;
}

.status-online i {
    display: inline-block;

    width: 5px;
    height: 5px;

    margin-right: 5px;

    border-radius: 50%;

    background: #7cebc6;

    box-shadow: 0 0 10px #7cebc6;
}

.core-status-row {
    display: grid;
    grid-template-columns: 82px 1fr 30px;
    align-items: center;
    gap: 9px;

    margin-top: 10px;

    font-size: 8px;
    color: #7388a5;
}

.core-status-row strong {
    font-size: 8px;
    color: #b7c7db;
}

.status-bar {
    height: 2px;
    background: rgba(92, 151, 213, .15);
}

.status-bar span {
    display: block;
    height: 100%;

    background: linear-gradient(
        90deg,
        #4e8eff,
        #72e3ff
    );

    box-shadow: 0 0 8px rgba(91, 197, 255, .35);
}


/* FOOTER DEL HERO */

.services-hero-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;

    font-size: 8px;
    letter-spacing: .25em;

    color: #4f6685;
}

.services-scan-line {
    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(78, 143, 214, .15),
        rgba(91, 195, 255, .45),
        rgba(78, 143, 214, .15)
    );
}

.services-ready {
    color: #6c9b9d;
}

.services-ready i {
    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 8px;

    border-radius: 50%;

    background: #7cebc6;

    box-shadow: 0 0 10px #7cebc6;
}


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

@media (max-width: 1100px) {

    .services-hero-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .services-hero-content {
        max-width: 850px;
    }

    .services-core {
        max-width: 720px;
        width: 100%;
        margin: 0 auto;
    }

}


@media (max-width: 700px) {

    .services-hero {
        padding-top: 30px;
    }

    .services-hero-top {
        gap: 15px;
    }

    .system-label {
        display: none;
    }

    .services-hero-layout {
        padding-top: 45px;
    }

    .services-hero-content h1 {
        font-size: clamp(54px, 17vw, 78px);
    }

    .services-hero-description {
        font-size: 16px;
    }

    .services-hero-actions {
        flex-direction: column;
    }

    .btn-primary-tech,
    .btn-outline-tech {
        width: 100%;
        justify-content: space-between;
    }

    .services-metrics {
        gap: 20px;
        justify-content: space-between;
    }

    .service-metric strong {
        font-size: 21px;
    }

    .service-metric span {
        font-size: 8px;
    }

    .core-interface {
        transform: scale(.92);
    }

    .core-node {
        min-width: auto;
    }

    .core-node span {
        display: none;
    }

    .core-status {
        width: 230px;
    }

    .services-hero-footer {
        grid-template-columns: 1fr auto;
    }

    .services-scan-line {
        display: none;
    }

}


@media (prefers-reduced-motion: reduce) {

    .core-ring-2,
    .core-ring-3 {
        animation: none;
    }

}

/* =========================================================
   AJUSTE SERVICES TECHNOLOGY CORE
========================================================= */

.services-core .core-center {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 10;

    width: 190px;
    height: 190px;

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

    border-radius: 50%;

    border: 1px solid rgba(102, 194, 255, .55);

    background:
        radial-gradient(
            circle at center,
            rgba(50, 145, 240, .22) 0%,
            rgba(8, 27, 55, .92) 55%,
            rgba(3, 13, 30, .98) 100%
        );

    box-shadow:
        0 0 45px rgba(56, 151, 255, .15),
        inset 0 0 35px rgba(79, 175, 255, .10);
}

.services-core .core-center strong {
    display: block;

    font-size: 72px;
    font-weight: 700;
    line-height: .9;

    background: linear-gradient(
        180deg,
        #dff6ff,
        #5eb7ff
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: #7acaff;
}

.services-core .core-center span {
    display: block;

    margin-top: 9px;

    font-size: 8px;
    letter-spacing: .32em;

    color: #7894b5;
}

.services-core .core-center .core-small {
    margin: 0 0 8px;

    font-size: 8px;
    color: #72d5ff;
}


/* Evitar que los nodos se estiren */

.services-core .core-node {
    width: auto;
    min-width: 118px;
    max-width: 150px;

    white-space: nowrap;
}

.services-core .node-software {
    top: 13%;
    left: 22%;
}

.services-core .node-support {
    top: 25%;
    left: 4%;
}

.services-core .node-data {
    top: 22%;
    right: 5%;
}

.services-core .node-cloud {
    right: 4%;
    bottom: 25%;
}

.services-core .node-network {
    left: 50%;
    bottom: 7%;

    transform: translateX(-50%);
}

.services-core .node-security {
    left: 3%;
    bottom: 25%;
}


/* El panel debe permanecer por encima del radar */

.services-core .core-status {
    z-index: 15;
}

/* =========================================================
   SERVICES — TECHNOLOGY MATRIX
========================================================= */

.services-matrix {
    position: relative;
    padding: 130px 0 100px;
    overflow: hidden;
}

.services-matrix::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 20% 40%,
            rgba(42, 119, 255, .07),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 65%,
            rgba(61, 197, 255, .05),
            transparent 28%
        );
}


/* CABECERA */

.services-matrix-heading {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.15fr .65fr;
    gap: 100px;
    align-items: end;

    margin-bottom: 75px;
}

.services-matrix-heading h2 {
    max-width: 850px;

    margin: 28px 0 0;

    font-size: clamp(58px, 6vw, 105px);
    line-height: .95;
    letter-spacing: -.055em;

    color: #f5f8ff;
}

.services-matrix-heading h2 span {
    display: block;
    color: #526987;
}

.services-matrix-intro {
    padding-bottom: 8px;
}

.services-matrix-intro p {
    margin: 0 0 30px;

    font-size: 16px;
    line-height: 1.8;

    color: #8192ad;
}

.services-matrix-intro span {
    font-size: 8px;
    letter-spacing: .25em;
    color: #58708f;
}


/* GRID */

.services-matrix-grid {
    position: relative;
    z-index: 2;

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

    border-top: 1px solid rgba(104, 176, 255, .18);
    border-left: 1px solid rgba(104, 176, 255, .18);
}


/* MÓDULO */

.service-module {
    position: relative;

    min-height: 470px;

    display: flex;
    flex-direction: column;

    padding: 34px;

    border-right: 1px solid rgba(104, 176, 255, .18);
    border-bottom: 1px solid rgba(104, 176, 255, .18);

    background:
        linear-gradient(
            145deg,
            rgba(13, 31, 60, .34),
            rgba(3, 11, 26, .15)
        );

    overflow: hidden;

    transition:
        background .35s ease,
        transform .35s ease;
}

.service-module::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(74, 170, 255, .13),
            transparent 55%
        );

    transition: opacity .35s ease;

    pointer-events: none;
}

.service-module:hover::before {
    opacity: 1;
}

.service-module:hover {
    background:
        linear-gradient(
            145deg,
            rgba(18, 45, 82, .52),
            rgba(4, 14, 31, .3)
        );
}


/* MÓDULO PRINCIPAL */

.service-module-large {
    grid-column: span 2;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(54, 150, 255, .10),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(15, 37, 72, .46),
            rgba(3, 11, 26, .16)
        );
}


/* NUMERACIÓN */

.service-module-number {
    position: absolute;
    top: 30px;
    right: 30px;

    font-size: 9px;
    letter-spacing: .2em;

    color: #4f6583;
}


/* ICONO */

.service-module-icon {
    width: 54px;
    height: 54px;

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

    margin-bottom: 48px;

    border: 1px solid rgba(103, 190, 255, .24);
    border-radius: 10px;

    background: rgba(13, 39, 72, .38);

    color: #69cfff;

    font-size: 21px;

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

.service-module:hover .service-module-icon {
    transform: translateY(-5px);

    border-color: rgba(103, 208, 255, .55);

    box-shadow:
        0 0 30px rgba(67, 164, 255, .12);
}


/* CONTENIDO */

.service-module-content {
    position: relative;
    z-index: 2;
}

.service-module-category {
    display: block;

    margin-bottom: 15px;

    font-size: 8px;
    letter-spacing: .26em;

    color: #6086ad;
}

.service-module h3 {
    max-width: 580px;

    margin: 0;

    font-size: 31px;
    line-height: 1.12;
    letter-spacing: -.035em;

    color: #f4f7fd;
}

.service-module h3 span {
    display: block;

    margin-top: 3px;

    color: #667b99;
}

.service-module-large h3 {
    font-size: 46px;
}

.service-module p {
    max-width: 520px;

    margin: 22px 0 0;

    font-size: 14px;
    line-height: 1.75;

    color: #7689a6;
}


/* ETIQUETAS */

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 24px;
}

.service-tags span {
    padding: 7px 10px;

    border: 1px solid rgba(102, 178, 255, .15);
    border-radius: 20px;

    font-size: 7px;
    letter-spacing: .14em;
    text-transform: uppercase;

    color: #6784a6;

    background: rgba(8, 24, 48, .32);
}


/* LINK */

.service-module-link {
    position: relative;
    z-index: 3;

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

    width: 100%;

    margin-top: auto;
    padding-top: 30px;

    text-decoration: none;

    font-size: 11px;

    color: #6bcaff;

    cursor: pointer;
}

.service-module-link i {
    transition: transform .25s ease;
}

.service-module-link:hover i {
    transform: translate(4px, -4px);
}


/* DETALLE ESQUINA */

.module-corner {
    position: absolute;
    right: -50px;
    bottom: -50px;

    width: 145px;
    height: 145px;

    border: 1px solid rgba(85, 169, 255, .10);
    border-radius: 50%;
}

.module-corner::after {
    content: "";

    position: absolute;
    inset: 25px;

    border: 1px solid rgba(85, 169, 255, .07);
    border-radius: 50%;
}


/* CCTV */

.service-module-security {
    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(50, 209, 194, .08),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(11, 38, 63, .45),
            rgba(3, 11, 26, .18)
        );
}

.security-signal {
    position: absolute;
    top: 34px;
    left: 105px;

    display: flex;
    gap: 5px;
}

.security-signal span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #72e3c2;

    box-shadow: 0 0 9px rgba(114, 227, 194, .8);
}

.security-signal span:nth-child(2) {
    opacity: .6;
}

.security-signal span:nth-child(3) {
    opacity: .3;
}


/* PIE */

.services-matrix-footer {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 25px;

    margin-top: 35px;

    font-size: 8px;
    letter-spacing: .24em;

    color: #4d6584;
}

.services-matrix-footer > div {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(83, 157, 229, .15),
            rgba(84, 190, 255, .35),
            rgba(83, 157, 229, .15)
        );
}

.matrix-status {
    color: #638c8b;
}

.matrix-status i {
    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 8px;

    border-radius: 50%;

    background: #78e5c4;

    box-shadow: 0 0 10px rgba(120, 229, 196, .8);
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .services-matrix-heading {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .services-matrix-intro {
        max-width: 650px;
    }

    .services-matrix-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-module-large {
        grid-column: span 2;
    }

}


@media (max-width: 650px) {

    .services-matrix {
        padding: 90px 0 70px;
    }

    .services-matrix-heading h2 {
        font-size: clamp(50px, 15vw, 72px);
    }

    .services-matrix-grid {
        grid-template-columns: 1fr;
    }

    .service-module,
    .service-module-large {
        grid-column: auto;

        min-height: 430px;

        padding: 27px;
    }

    .service-module-large h3,
    .service-module h3 {
        font-size: 32px;
    }

    .services-matrix-footer {
        grid-template-columns: 1fr auto;
    }

    .services-matrix-footer > div {
        display: none;
    }

}

/* =========================================================
   AJUSTE VISUAL — SERVICES MATRIX HEADING
========================================================= */

.services-matrix {
    padding-top: 165px;
}

.services-matrix-heading h2 {
    font-size: clamp(58px, 5.3vw, 92px);
    line-height: .98;
    letter-spacing: -.05em;
}

@media (max-width: 1050px) {
    .services-matrix {
        padding-top: 130px;
    }
}

@media (max-width: 650px) {
    .services-matrix {
        padding-top: 105px;
    }

    .services-matrix-heading h2 {
        font-size: clamp(46px, 14vw, 68px);
    }
}

/* =========================================================
   SERVICES — TECHNOLOGY PROCESS
========================================================= */

.services-process {
    position: relative;
    padding: 150px 0 120px;
    overflow: hidden;
    border-top: 1px solid rgba(120, 190, 255, .12);
}

/* Luz ambiental */
.services-process::before {
    content: "";
    position: absolute;
    width: 900px;
    height: 600px;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(
            circle,
            rgba(44, 139, 255, .09) 0%,
            rgba(17, 91, 190, .04) 35%,
            transparent 70%
        );
    pointer-events: none;
}

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

.process-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 35px;
    border-bottom: 1px solid rgba(135, 188, 255, .12);
}

.process-header-left,
.process-header-status {
    display: flex;
    align-items: center;
    gap: 15px;
}

.section-index,
.section-label,
.process-header-status {
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.section-index {
    color: #73d7ff;
}

.section-label {
    color: #607491;
}

.process-header-status {
    color: #7186a3;
}

/* =========================================================
   INTRO
========================================================= */

.process-intro {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 100px;
    align-items: end;
    padding: 85px 0 110px;
}

.process-eyebrow {
    display: block;
    margin-bottom: 24px;
    font-size: 10px;
    letter-spacing: .32em;
    color: #65809f;
}

.process-intro h2 {
    margin: 0;
    max-width: 780px;
    font-size: clamp(62px, 6vw, 108px);
    line-height: .94;
    letter-spacing: -.055em;
    color: #f4f7ff;
}

.process-intro h2 span {
    display: block;
    background: linear-gradient(
        90deg,
        #bcecff,
        #69c7ff,
        #4f8cff
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.process-intro-copy {
    padding-bottom: 12px;
}

.process-intro-copy p {
    margin: 0;
    max-width: 500px;
    font-size: 17px;
    line-height: 1.9;
    color: #8799b5;
}

.process-system-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    font-size: 9px;
    letter-spacing: .25em;
    color: #5f7694;
}

.process-system-line span {
    width: 38px;
    height: 1px;
    background: #64cfff;
}

/* =========================================================
   PROCESS NETWORK
========================================================= */

.process-network {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid rgba(113, 170, 231, .17);
    border-bottom: 1px solid rgba(113, 170, 231, .17);
}

/* Línea central */
.process-line {
    position: absolute;
    top: 167px;
    left: 10%;
    right: 10%;
    height: 1px;
    z-index: 1;
    background: rgba(101, 164, 225, .18);
}

.process-line-progress {
    position: absolute;
    left: 0;
    top: -1px;
    width: 25%;
    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        #5bbdff,
        #8fe9ff,
        transparent
    );

    filter: drop-shadow(0 0 7px #55c7ff);

    animation: processFlow 5s linear infinite;
}

@keyframes processFlow {

    0% {
        left: -25%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* =========================================================
   NODES
========================================================= */

.process-node {
    position: relative;
    min-height: 470px;
    padding: 35px 28px 45px;
    border-right: 1px solid rgba(110, 166, 225, .15);
}

.process-node:last-child {
    border-right: none;
}

.process-node-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.process-number {
    font-size: 10px;
    letter-spacing: .2em;
    color: #536a87;
}

.process-node-status {
    font-size: 8px;
    letter-spacing: .24em;
    color: #526983;
}

.process-node-status.active {
    color: #79e4bd;
}

/* =========================================================
   ICON
========================================================= */

.process-icon {
    position: relative;
    z-index: 3;

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

    width: 58px;
    height: 58px;

    margin-top: 55px;

    border: 1px solid rgba(99, 180, 255, .28);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(21, 51, 91, .65),
            rgba(7, 18, 36, .7)
        );

    color: #79d5ff;
    font-size: 21px;

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

.process-node:hover .process-icon {
    transform: translateY(-6px);
    border-color: rgba(112, 213, 255, .7);

    box-shadow:
        0 0 30px rgba(58, 170, 255, .15),
        inset 0 0 20px rgba(73, 177, 255, .06);
}

/* =========================================================
   CONNECTION POINT
========================================================= */

.process-point {
    position: absolute;
    top: 161px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;

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

    width: 14px;
    height: 14px;

    border-radius: 50%;
    border: 1px solid rgba(105, 205, 255, .35);

    background: #071426;
}

.process-point span {
    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: #76ddff;

    box-shadow:
        0 0 8px #69d7ff,
        0 0 18px rgba(105, 215, 255, .6);
}

/* Nodo central */
.process-node-core {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(43, 126, 216, .10),
            transparent 58%
        );
}

.process-node-core .process-point span {
    background: #83f0c7;

    box-shadow:
        0 0 8px #83f0c7,
        0 0 22px rgba(131, 240, 199, .7);
}

/* =========================================================
   CONTENT
========================================================= */

.process-node-content {
    margin-top: 92px;
}

.process-category {
    display: block;
    margin-bottom: 14px;

    font-size: 9px;
    letter-spacing: .28em;

    color: #5e7899;
}

.process-node h3 {
    margin: 0 0 18px;

    font-size: 27px;
    letter-spacing: -.03em;

    color: #f4f7ff;
}

.process-node p {
    margin: 0;

    font-size: 14px;
    line-height: 1.8;

    color: #71839e;
}

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

.process-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-top: 30px;

    font-size: 8px;
    letter-spacing: .25em;

    color: #526a88;
}

.process-footer > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.process-footer span {
    color: #72d5ff;
}

.status-dot {
    display: inline-block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #7de4bd;

    box-shadow:
        0 0 8px rgba(125, 228, 189, .8);
}

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

@media (max-width: 1100px) {

    .process-intro {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .process-network {
        grid-template-columns: 1fr;
    }

    .process-line {
        top: 60px;
        bottom: 60px;
        left: 63px;
        right: auto;

        width: 1px;
        height: auto;
    }

    .process-line-progress {
        top: -20%;
        left: -1px;

        width: 3px;
        height: 22%;

        animation: processFlowVertical 5s linear infinite;
    }

    @keyframes processFlowVertical {

        0% {
            top: -20%;
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        90% {
            opacity: 1;
        }

        100% {
            top: 100%;
            opacity: 0;
        }
    }

    .process-node {
        min-height: 260px;
        padding: 32px 35px 35px 115px;

        border-right: none;
        border-bottom:
            1px solid rgba(110, 166, 225, .13);
    }

    .process-node:last-child {
        border-bottom: none;
    }

    .process-icon {
        position: absolute;
        left: 35px;
        top: 82px;

        margin: 0;
    }

    .process-point {
        top: 104px;
        left: 63px;
    }

    .process-node-content {
        margin-top: 55px;
    }
}

@media (max-width: 650px) {

    .services-process {
        padding: 100px 0 80px;
    }

    .process-header {
        align-items: flex-start;
        gap: 20px;
    }

    .process-header-status {
        display: none;
    }

    .process-intro {
        padding: 65px 0 75px;
    }

    .process-intro h2 {
        font-size: clamp(52px, 16vw, 76px);
    }

    .process-intro-copy p {
        font-size: 15px;
    }

    .process-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
}

/* Respeta preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {

    .process-line-progress {
        animation: none;
    }
}

/* =========================================================
   FIX — ESPACIO SUPERIOR SERVICES PROCESS
========================================================= */

.services-process {
    scroll-margin-top: 110px;
}

.process-intro {
    padding-top: 120px;
}

@media (max-width: 1100px) {
    .process-intro {
        padding-top: 100px;
    }
}

@media (max-width: 650px) {
    .process-intro {
        padding-top: 80px;
    }
}

/* =========================================================
   SERVICES - PROJECT CONSOLE
========================================================= */

.services-project-console {
    position: relative;
    padding: 140px 0 120px;
    overflow: hidden;
}

/* iluminación ambiental */
.services-project-console::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    left: -250px;
    top: 5%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(37, 200, 255, 0.08),
        transparent 68%
    );
    pointer-events: none;
}

.services-project-console::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    right: -250px;
    bottom: -250px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(19, 138, 255, 0.07),
        transparent 70%
    );
    pointer-events: none;
}


/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

.project-console {
    position: relative;
    border: 1px solid rgba(111, 190, 255, 0.18);
    background:
        linear-gradient(
            135deg,
            rgba(13, 29, 55, 0.55),
            rgba(4, 12, 27, 0.72)
        );
    backdrop-filter: blur(14px);
    overflow: hidden;
}

/* rejilla interna */
.project-console::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(91, 164, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(91, 164, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    pointer-events: none;
}


/* =========================================================
   CABECERA CONSOLA
========================================================= */

.project-console-top {
    position: relative;
    z-index: 2;

    min-height: 72px;

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

    padding: 0 34px;

    border-bottom: 1px solid rgba(111, 190, 255, 0.14);

    font-size: 11px;
    letter-spacing: 0.22em;
}

.console-id {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #8ea2bd;
}

.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #7fffd4;

    box-shadow:
        0 0 8px rgba(127, 255, 212, 0.8),
        0 0 18px rgba(127, 255, 212, 0.35);
}

.console-status {
    color: #7fffd4;
}


/* =========================================================
   CONTENIDO
========================================================= */

.project-console-main {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
}


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

.project-console-copy {
    padding: 90px 70px;

    border-right: 1px solid rgba(111, 190, 255, 0.14);
}

.console-index {
    display: block;

    margin-bottom: 30px;

    color: #75d8ff;

    font-size: 11px;
    letter-spacing: 0.28em;
}

.project-console-copy h2 {
    margin: 0 0 30px;

    max-width: 570px;

    font-size: clamp(54px, 5.6vw, 94px);
    line-height: 0.95;
    letter-spacing: -0.055em;

    color: #f6f9ff;
}

.project-console-copy h2 span {
    display: block;

    margin-top: 10px;

    background: linear-gradient(
        90deg,
        #bcecff,
        #62c7ff,
        #4b8cff
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

.project-console-copy p {
    max-width: 520px;

    margin: 0;

    color: #8395b0;

    font-size: 17px;
    line-height: 1.9;
}


/* =========================================================
   SELECTOR DE PROYECTO
========================================================= */

.project-selector {
    position: relative;
}

.selector-label {
    height: 64px;

    display: flex;
    align-items: center;

    padding: 0 32px;

    border-bottom: 1px solid rgba(111, 190, 255, 0.14);

    color: #607796;

    font-size: 10px;
    letter-spacing: 0.25em;
}


/* =========================================================
   OPCIONES
========================================================= */

.project-option {
    position: relative;

    min-height: 118px;

    display: grid;
    grid-template-columns: 45px 58px 1fr 42px;
    align-items: center;
    gap: 18px;

    padding: 20px 32px;

    border-bottom: 1px solid rgba(111, 190, 255, 0.12);

    text-decoration: none;

    transition:
        background 0.35s ease,
        padding-left 0.35s ease,
        border-color 0.35s ease;

    overflow: hidden;
}

/* iluminación hover */
.project-option::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(48, 157, 255, 0.11),
        rgba(69, 207, 255, 0.025),
        transparent
    );

    opacity: 0;

    transition: opacity 0.35s ease;

    pointer-events: none;
}

/* línea lateral */
.project-option::after {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 2px;
    height: 0;

    transform: translateY(-50%);

    background: #69d8ff;

    box-shadow: 0 0 15px rgba(105, 216, 255, 0.8);

    transition: height 0.35s ease;
}

.project-option:hover {
    padding-left: 40px;

    background: rgba(38, 129, 221, 0.055);

    border-color: rgba(111, 190, 255, 0.25);
}

.project-option:hover::before {
    opacity: 1;
}

.project-option:hover::after {
    height: 54%;
}


/* número */
.project-option-number {
    position: relative;
    z-index: 2;

    color: #506681;

    font-size: 10px;
    letter-spacing: 0.2em;
}


/* icono */
.project-option-icon {
    position: relative;
    z-index: 2;

    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(105, 202, 255, 0.23);
    border-radius: 13px;

    background: rgba(26, 83, 145, 0.10);

    color: #75d8ff;

    font-size: 20px;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.project-option:hover .project-option-icon {
    transform: translateY(-3px);

    background: rgba(48, 157, 255, 0.16);

    box-shadow:
        0 0 25px rgba(48, 157, 255, 0.12);
}


/* contenido */
.project-option-content {
    position: relative;
    z-index: 2;
}

.project-option-content span {
    display: block;

    margin-bottom: 7px;

    color: #607895;

    font-size: 9px;
    letter-spacing: 0.23em;
}

.project-option-content strong {
    display: block;

    color: #eef6ff;

    font-size: 18px;
    font-weight: 600;

    transition: color 0.3s ease;
}

.project-option:hover .project-option-content strong {
    color: #8fddff;
}


/* flecha */
.project-option-arrow {
    position: relative;
    z-index: 2;

    color: #69ccff;

    font-size: 18px;

    transition: transform 0.35s ease;
}

.project-option:hover .project-option-arrow {
    transform: translate(4px, -4px);
}


/* opción especial */
.project-option-special {
    background: rgba(31, 100, 180, 0.045);
}

.project-option-special .project-option-icon {
    color: #8dffd5;

    border-color: rgba(141, 255, 213, 0.22);
}

.project-option-special:hover {
    background: rgba(72, 209, 166, 0.055);
}


/* =========================================================
   BARRA INFERIOR
========================================================= */

.project-console-bottom {
    position: relative;
    z-index: 2;

    min-height: 68px;

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

    padding: 0 34px;

    border-top: 1px solid rgba(111, 190, 255, 0.14);

    color: #607895;

    font-size: 9px;
    letter-spacing: 0.22em;
}

.project-console-bottom > div:first-child {
    display: flex;
    align-items: center;
    gap: 11px;
}

.console-pulse {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #7fffd4;

    box-shadow:
        0 0 8px #7fffd4,
        0 0 18px rgba(127, 255, 212, 0.35);

    animation: consolePulse 2s ease-in-out infinite;
}

.console-sequence {
    display: flex;
    gap: 12px;
}

.console-sequence span {
    color: #315174;
}


/* =========================================================
   ANIMACIÓN
========================================================= */

@keyframes consolePulse {

    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}


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

@media (max-width: 1050px) {

    .project-console-main {
        grid-template-columns: 1fr;
    }

    .project-console-copy {
        border-right: 0;
        border-bottom: 1px solid rgba(111, 190, 255, 0.14);

        padding: 70px 45px;
    }

}


@media (max-width: 700px) {

    .services-project-console {
        padding: 90px 0 80px;
    }

    .project-console-top {
        padding: 0 20px;
    }

    .console-status {
        display: none;
    }

    .project-console-copy {
        padding: 55px 24px;
    }

    .project-console-copy h2 {
        font-size: clamp(48px, 15vw, 72px);
    }

    .project-console-copy p {
        font-size: 15px;
    }

    .project-option {
        min-height: 105px;

        grid-template-columns: 34px 48px 1fr 24px;

        gap: 12px;

        padding: 18px 20px;
    }

    .project-option:hover {
        padding-left: 24px;
    }

    .project-option-icon {
        width: 44px;
        height: 44px;
    }

    .project-option-content strong {
        font-size: 15px;
    }

    .project-console-bottom {
        padding: 20px;

        flex-direction: column;
        align-items: flex-start;
    }

    .console-sequence {
        flex-wrap: wrap;
    }

}

/* =========================================================
   CONTACTO — ALVAS PERÚ SYSTEM
========================================================= */

.contact-page {
    position: relative;
    overflow: hidden;
}

.contact-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 18% 30%,
            rgba(37, 200, 255, .055),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 55%,
            rgba(19, 138, 255, .04),
            transparent 32%
        );

    z-index: -1;
}


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

.contact-hero {
    position: relative;
    padding: 78px 0 90px;
    border-bottom: 1px solid rgba(116, 181, 255, .12);
}

.contact-hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(74, 140, 220, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(74, 140, 220, .035) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
    pointer-events: none;
}

.contact-hero .container {
    position: relative;
    z-index: 2;
}

.contact-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 48px;
    border-bottom: 1px solid rgba(112, 178, 255, .13);
}

.contact-section-id,
.contact-system-status {
    display: flex;
    align-items: center;
    gap: 16px;

    font-size: 11px;
    letter-spacing: .27em;
    color: #7289a8;
}

.contact-section-id span:first-child {
    color: #6bd9ff;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;

    background: #82f5ce;

    box-shadow:
        0 0 8px rgba(130, 245, 206, .85),
        0 0 20px rgba(130, 245, 206, .35);
}


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

.contact-hero-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 90px;
    align-items: end;

    padding-top: 82px;
}

.contact-eyebrow,
.contact-code {
    display: block;

    margin-bottom: 24px;

    font-size: 10px;
    letter-spacing: .32em;

    color: #6284ad;
}

.contact-hero-copy h1 {
    margin: 0;

    max-width: 850px;

    font-size: clamp(64px, 7vw, 126px);
    line-height: .91;
    letter-spacing: -.065em;

    color: #f5f8ff;
}

.contact-hero-copy h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #bcecff,
            #67caff,
            #4b82ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

.contact-hero-description {
    padding-bottom: 12px;
}

.contact-hero-description p {
    margin: 0;

    max-width: 500px;

    font-size: 17px;
    line-height: 1.9;

    color: #899bb5;
}

.contact-signal {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 34px;

    font-size: 9px;
    letter-spacing: .22em;

    color: #64809f;
}

.contact-signal span {
    width: 42px;
    height: 1px;

    background: #62d6ff;

    box-shadow:
        0 0 10px rgba(98, 214, 255, .4);
}


/* =========================================================
   CONTACT CENTER
========================================================= */

.contact-center {
    padding: 100px 0;
}

.contact-console {
    position: relative;

    border: 1px solid rgba(99, 169, 255, .19);

    background:
        linear-gradient(
            145deg,
            rgba(8, 25, 49, .82),
            rgba(2, 10, 25, .94)
        );

    box-shadow:
        0 35px 100px rgba(0, 0, 0, .24);

    overflow: hidden;
}

.contact-console::before {
    content: "";
    position: absolute;

    width: 650px;
    height: 650px;

    left: -280px;
    top: -260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(42, 137, 255, .13),
            transparent 68%
        );

    pointer-events: none;
}


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

.contact-console-header {
    min-height: 70px;

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

    padding: 0 34px;

    border-bottom: 1px solid rgba(99, 169, 255, .15);

    font-size: 9px;
    letter-spacing: .25em;

    color: #6c86a5;
}

.contact-console-header > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.contact-console-grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
}


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

.contact-information {
    position: relative;

    padding: 64px 55px;

    border-right: 1px solid rgba(99, 169, 255, .16);
}

.contact-number {
    display: block;

    margin-bottom: 30px;

    font-size: 9px;
    letter-spacing: .25em;

    color: #5d7798;
}

.contact-information h2 {
    margin: 0 0 24px;

    font-size: clamp(42px, 4vw, 72px);
    line-height: .98;
    letter-spacing: -.045em;

    color: #f2f6ff;
}

.contact-information h2 span {
    display: block;
    color: #637796;
}

.contact-intro {
    max-width: 500px;

    margin: 0 0 45px;

    color: #8193ad;

    line-height: 1.85;
    font-size: 15px;
}


/* =========================================================
   MÉTODOS DE CONTACTO
========================================================= */

.contact-method {
    position: relative;

    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 18px;

    min-height: 92px;

    padding: 15px 18px;

    border-top: 1px solid rgba(103, 168, 245, .14);

    text-decoration: none;

    transition:
        background .3s ease,
        padding-left .3s ease;
}

.contact-method:last-of-type {
    border-bottom: 1px solid rgba(103, 168, 245, .14);
}

.contact-method:hover {
    padding-left: 25px;

    background:
        linear-gradient(
            90deg,
            rgba(36, 143, 255, .08),
            transparent
        );
}

.contact-method-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(91, 176, 255, .28);
    border-radius: 13px;

    background: rgba(16, 55, 96, .22);

    color: #73d7ff;

    font-size: 18px;
}

.contact-method > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.contact-method span {
    font-size: 8px;
    letter-spacing: .25em;

    color: #5d7594;
}

.contact-method strong {
    font-size: 14px;
    font-weight: 500;

    color: #aebbd0;
}

.contact-method > i {
    color: #72d4ff;
    font-size: 17px;

    transition: transform .3s ease;
}

.contact-method:hover > i {
    transform: translate(4px, -4px);
}

.contact-method-whatsapp:hover .contact-method-icon {
    color: #83f3ce;

    box-shadow:
        0 0 22px rgba(77, 235, 184, .09);
}

.contact-information-bottom {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 42px;

    font-size: 8px;
    letter-spacing: .25em;

    color: #5d7997;
}


/* =========================================================
   FORMULARIO
========================================================= */

.contact-form-area {
    padding: 64px 58px;

    background:
        linear-gradient(
            135deg,
            rgba(13, 37, 68, .20),
            transparent 65%
        );
}

.contact-form-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 45px;
}

.contact-form-heading span {
    display: block;

    margin-bottom: 12px;

    font-size: 9px;
    letter-spacing: .25em;

    color: #627c9d;
}

.contact-form-heading h3 {
    margin: 0;

    font-size: 31px;
    font-weight: 600;
    letter-spacing: -.03em;

    color: #f0f5ff;
}

.form-status {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 8px !important;
    letter-spacing: .25em;

    color: #7ce5c3;
}

.form-status span {
    width: 6px;
    height: 6px;

    margin: 0;

    border-radius: 50%;

    background: #7ce5c3;

    box-shadow:
        0 0 12px rgba(124, 229, 195, .8);
}


/* =========================================================
   CAMPOS
========================================================= */

.project-contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-field {
    position: relative;

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

.form-field label {
    font-size: 9px;
    letter-spacing: .22em;

    color: #657e9e;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;

    border: 1px solid rgba(104, 170, 250, .20);
    outline: none;

    padding: 17px 18px;

    background: rgba(3, 14, 32, .68);

    color: #dbe8fa;

    font-family: inherit;
    font-size: 14px;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.form-field input,
.form-field select {
    height: 56px;
}

.form-field textarea {
    resize: vertical;
    min-height: 150px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #4f6685;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: rgba(91, 201, 255, .62);

    background: rgba(7, 26, 52, .85);

    box-shadow:
        0 0 0 3px rgba(50, 155, 255, .055),
        0 0 28px rgba(40, 148, 255, .05);
}

.form-field select {
    cursor: pointer;

    appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #6dcfff 50%
        ),
        linear-gradient(
            135deg,
            #6dcfff 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 21px) 24px,
        calc(100% - 16px) 24px;

    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.form-field select option {
    background: #071426;
    color: #dbe8fa;
}


/* =========================================================
   BOTÓN
========================================================= */

.contact-submit {
    position: relative;

    min-height: 65px;

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

    margin-top: 7px;

    padding: 0 24px;

    border: 1px solid rgba(99, 194, 255, .5);
    border-radius: 0;

    background:
        linear-gradient(
            90deg,
            #4b88ff,
            #78d9ff
        );

    color: #03101e;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.contact-submit::before {
    content: "";

    position: absolute;
    top: 0;
    left: -100%;

    width: 55%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .22),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .6s ease;
}

.contact-submit:hover::before {
    left: 130%;
}

.contact-submit:hover {
    transform: translateY(-2px);

    box-shadow:
        0 15px 45px rgba(42, 151, 255, .17);
}

.contact-submit i {
    font-size: 18px;
}

.contact-form-note {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 3px;

    color: #566d8c;

    font-size: 10px;
    line-height: 1.6;
}

.contact-form-note i {
    color: #70cfff;
}


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

.contact-console-footer {
    min-height: 66px;

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

    padding: 0 34px;

    border-top: 1px solid rgba(99, 169, 255, .14);

    color: #536c8a;

    font-size: 8px;
    letter-spacing: .22em;
}

.contact-console-footer > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-console-footer span {
    color: #3b5777;
}

.console-pulse {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #75eac6;

    box-shadow:
        0 0 10px rgba(117, 234, 198, .85);
}


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

.contact-final {
    position: relative;

    padding: 100px 0 120px;

    border-top: 1px solid rgba(103, 170, 250, .10);

    overflow: hidden;
}

.contact-final-grid {
    display: grid;
    grid-template-columns: 1fr 500px;
    align-items: center;
    gap: 70px;
}

.contact-final span {
    display: block;

    margin-bottom: 25px;

    color: #5e7d9f;

    font-size: 9px;
    letter-spacing: .28em;
}

.contact-final h2 {
    max-width: 820px;

    margin: 0;

    font-size: clamp(55px, 6vw, 100px);
    line-height: .94;
    letter-spacing: -.055em;

    color: #f2f6ff;
}

.contact-final h2 strong {
    display: block;

    font-weight: inherit;

    color: #627794;
}


/* =========================================================
   ORBITA FINAL
========================================================= */

.contact-final-orbit {
    position: relative;

    width: 420px;
    height: 420px;

    margin-left: auto;

    display: grid;
    place-items: center;
}

.final-orbit-ring {
    position: absolute;

    width: 100%;
    height: 100%;

    border: 1px solid rgba(96, 178, 255, .20);
    border-radius: 50%;

    animation: contactOrbit 20s linear infinite;
}

.final-orbit-ring::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: 48px;
    left: 70px;

    border-radius: 50%;

    background: #78ddff;

    box-shadow:
        0 0 13px rgba(120, 221, 255, .85);
}

.final-orbit-ring.ring-two {
    width: 72%;
    height: 72%;

    border-style: dashed;

    animation-direction: reverse;
    animation-duration: 26s;
}

.final-orbit-core {
    position: relative;
    z-index: 2;

    width: 155px;
    height: 155px;

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

    border: 1px solid rgba(103, 197, 255, .4);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(41, 121, 210, .22),
            rgba(3, 15, 32, .86)
        );

    box-shadow:
        0 0 60px rgba(49, 148, 255, .08);
}

.final-orbit-core span {
    margin: 0;

    color: #81d9ff;

    font-size: 52px;
    font-weight: 700;
    letter-spacing: 0;
}

.final-orbit-core small {
    margin-top: 4px;

    color: #627d9e;

    font-size: 8px;
    letter-spacing: .35em;
}

.orbit-point {
    position: absolute;

    width: 6px;
    height: 6px;

    margin: 0 !important;

    border-radius: 50%;

    background: #79e5c3;

    box-shadow:
        0 0 12px rgba(121, 229, 195, .8);
}

.point-one {
    top: 12%;
    right: 22%;
}

.point-two {
    bottom: 18%;
    left: 8%;
}

.point-three {
    right: 3%;
    top: 56%;
}

@keyframes contactOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


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

@media (max-width: 1050px) {

    .contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-console-grid {
        grid-template-columns: 1fr;
    }

    .contact-information {
        border-right: none;
        border-bottom: 1px solid rgba(99, 169, 255, .16);
    }

    .contact-final-grid {
        grid-template-columns: 1fr;
    }

    .contact-final-orbit {
        margin: 30px auto 0;
    }
}


@media (max-width: 700px) {

    .contact-hero {
        padding: 55px 0 65px;
    }

    .contact-hero-top {
        align-items: flex-start;
        gap: 25px;
        flex-direction: column;
    }

    .contact-hero-grid {
        padding-top: 55px;
    }

    .contact-hero-copy h1 {
        font-size: clamp(54px, 17vw, 78px);
    }

    .contact-information,
    .contact-form-area {
        padding: 42px 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-console-header,
    .contact-console-footer {
        padding: 20px 22px;

        align-items: flex-start;
        flex-direction: column;

        gap: 15px;
    }

    .contact-method {
        grid-template-columns: 48px 1fr auto;
    }

    .contact-method strong {
        font-size: 12px;
    }

    .contact-final {
        padding: 75px 0;
    }

    .contact-final-orbit {
        width: 300px;
        height: 300px;
    }

    .final-orbit-core {
        width: 120px;
        height: 120px;
    }

    .final-orbit-core span {
        font-size: 42px;
    }
}

/* =========================================================
   PROYECTOS — HERO / ALVAS TECHNOLOGY LAB
========================================================= */

.projects-page {
    position: relative;
    overflow: hidden;
}

.projects-hero {
    position: relative;
    min-height: 900px;
    padding: 80px 0 55px;

    border-bottom: 1px solid rgba(100, 177, 255, .12);

    overflow: hidden;
}

.projects-hero::before {
    content: "";
    position: absolute;

    width: 900px;
    height: 900px;

    right: -280px;
    top: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 157, 255, .10),
            rgba(37, 157, 255, .025) 38%,
            transparent 70%
        );

    pointer-events: none;
}

.projects-hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(77, 147, 225, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(77, 147, 225, .035) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    pointer-events: none;
}

.projects-hero .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   CABECERA
========================================================= */

.projects-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 42px;

    border-bottom: 1px solid rgba(104, 174, 255, .13);
}

.projects-section-id,
.projects-system-status {
    display: flex;
    align-items: center;
    gap: 15px;

    color: #6b83a2;

    font-size: 10px;
    letter-spacing: .27em;
}

.projects-section-id span:first-child {
    color: #67d4ff;
}

.projects-system-status .status-dot {
    width: 7px;
    height: 7px;
}


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

.projects-hero-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
    gap: 60px;

    min-height: 670px;

    padding: 60px 0 40px;
}


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

.projects-hero-copy {
    position: relative;
    z-index: 5;
}

.projects-eyebrow {
    display: block;

    margin-bottom: 28px;

    color: #6685aa;

    font-size: 10px;
    letter-spacing: .32em;
}

.projects-hero-copy h1 {
    max-width: 760px;

    margin: 0;

    color: #f4f8ff;

    font-size: clamp(62px, 6vw, 112px);
    line-height: .91;
    letter-spacing: -.065em;
}

.projects-hero-copy h1 span {
    display: block;

    margin-top: 10px;

    background:
        linear-gradient(
            90deg,
            #bceeff,
            #69d0ff 50%,
            #4d83ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

.projects-hero-copy p {
    max-width: 630px;

    margin: 38px 0 0;

    color: #8395af;

    font-size: 16px;
    line-height: 1.9;
}


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

.projects-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 40px;
}

.projects-hero-actions a {
    min-height: 55px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    padding: 0 23px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.projects-hero-actions .btn-primary-tech {
    border: 1px solid rgba(107, 206, 255, .55);

    background:
        linear-gradient(
            90deg,
            rgba(63, 132, 255, .95),
            rgba(101, 207, 255, .95)
        );

    color: #03111f;
}

.projects-hero-actions .btn-primary-tech:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 40px rgba(50, 160, 255, .16);
}

.projects-hero-actions .btn-secondary-tech {
    border: 1px solid rgba(101, 173, 255, .22);

    background: rgba(10, 29, 54, .45);

    color: #b8c9de;
}

.projects-hero-actions .btn-secondary-tech:hover {
    transform: translateY(-3px);

    border-color: rgba(101, 202, 255, .5);

    background: rgba(27, 78, 130, .18);
}


/* =========================================================
   LAB VISUAL
========================================================= */

.projects-lab-visual {
    position: relative;

    width: min(100%, 650px);
    aspect-ratio: 1 / 1;

    margin-left: auto;

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

    background:
        radial-gradient(
            circle at center,
            rgba(35, 125, 218, .10),
            rgba(5, 18, 37, .2) 38%,
            transparent 70%
        );

    overflow: hidden;
}


/* grid interior */
.lab-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(83, 157, 239, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(83, 157, 239, .045) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        radial-gradient(
            circle,
            black 30%,
            transparent 78%
        );

    pointer-events: none;
}


/* =========================================================
   ÓRBITAS
========================================================= */

.lab-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(90, 184, 255, .20);
    border-radius: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;
}

.lab-orbit::before {
    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #72dfff;

    box-shadow:
        0 0 10px #72dfff,
        0 0 22px rgba(114, 223, 255, .4);
}

.lab-orbit-one {
    width: 82%;
    height: 82%;

    animation: labRotate 30s linear infinite;
}

.lab-orbit-one::before {
    top: 14%;
    left: 13%;
}

.lab-orbit-two {
    width: 61%;
    height: 61%;

    border-style: dashed;

    animation: labRotateReverse 24s linear infinite;
}

.lab-orbit-two::before {
    right: 7%;
    top: 32%;
}

.lab-orbit-three {
    width: 39%;
    height: 39%;

    border-color: rgba(105, 221, 255, .27);

    animation: labRotate 18s linear infinite;
}

.lab-orbit-three::before {
    bottom: 7%;
    left: 27%;

    background: #7cf1c9;

    box-shadow:
        0 0 12px rgba(124, 241, 201, .9);
}


/* =========================================================
   NÚCLEO ALVAS
========================================================= */

.lab-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 176px;
    height: 176px;

    transform: translate(-50%, -50%);

    display: grid;
    place-items: center;

    border: 1px solid rgba(93, 205, 255, .42);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 112, 204, .28),
            rgba(4, 18, 38, .92) 68%
        );

    box-shadow:
        0 0 30px rgba(51, 169, 255, .09),
        0 0 80px rgba(51, 169, 255, .08);

    z-index: 4;
}

.lab-core::before,
.lab-core::after {
    content: "";

    position: absolute;

    border-radius: 50%;
}

.lab-core::before {
    inset: -15px;

    border: 1px dashed rgba(90, 191, 255, .16);

    animation: labRotate 15s linear infinite;
}

.lab-core::after {
    inset: 12px;

    border: 1px solid rgba(97, 213, 255, .09);
}

.lab-core-inner {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.lab-core-logo {
    color: #80ddff;

    font-size: 54px;
    font-weight: 700;
    line-height: 1;
}

.lab-core-name {
    margin-top: 5px;

    color: #e8f6ff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .27em;
}

.lab-core-inner small {
    margin-top: 8px;

    color: #557695;

    font-size: 7px;
    letter-spacing: .25em;
}


/* =========================================================
   NODOS DE PROYECTOS
========================================================= */

.lab-project-node {
    position: absolute;
    z-index: 6;

    min-width: 160px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 15px;

    border: 1px solid rgba(96, 177, 255, .18);

    background:
        linear-gradient(
            90deg,
            rgba(7, 27, 52, .92),
            rgba(8, 23, 43, .75)
        );

    backdrop-filter: blur(8px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .12);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.lab-project-node:hover {
    transform: translateY(-4px);

    border-color: rgba(98, 213, 255, .45);

    background:
        linear-gradient(
            90deg,
            rgba(12, 46, 82, .95),
            rgba(7, 28, 52, .88)
        );
}

.lab-project-node .node-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #72ddff;

    box-shadow:
        0 0 10px rgba(114, 221, 255, .9);
}

.lab-project-node div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lab-project-node small {
    color: #506d8d;

    font-size: 7px;
    letter-spacing: .22em;
}

.lab-project-node strong {
    color: #c8e8f8;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
}


/* posiciones */
.node-sivar {
    top: 13%;
    right: 8%;
}

.node-sisae {
    left: 3%;
    top: 50%;
}

.node-library {
    right: 4%;
    bottom: 14%;
}


/* SIVAR destacado */
.node-sivar .node-dot {
    background: #7af1c9;

    box-shadow:
        0 0 12px rgba(122, 241, 201, .95);
}


/* =========================================================
   SEÑALES
========================================================= */

.lab-signal {
    position: absolute;
    z-index: 3;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #72dfff;

    box-shadow:
        0 0 10px rgba(114, 223, 255, .9);

    animation: labSignal 2.4s ease-in-out infinite;
}

.signal-one {
    top: 22%;
    left: 30%;
}

.signal-two {
    right: 24%;
    top: 47%;

    animation-delay: .7s;
}

.signal-three {
    bottom: 21%;
    left: 36%;

    animation-delay: 1.4s;
}


/* =========================================================
   MONITOR
========================================================= */

.lab-monitor {
    position: absolute;

    left: 28px;
    bottom: 27px;

    z-index: 7;

    min-width: 150px;

    padding: 14px 16px;

    border: 1px solid rgba(91, 169, 255, .18);

    background: rgba(4, 17, 34, .88);

    backdrop-filter: blur(8px);
}

.lab-monitor > div {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 9px;

    color: #5b7594;

    font-size: 7px;
    letter-spacing: .22em;
}

.lab-monitor .status-dot {
    width: 5px;
    height: 5px;
}

.lab-monitor strong {
    display: block;

    margin-bottom: 5px;

    color: #77eac5;

    font-size: 11px;
    letter-spacing: .18em;
}

.lab-monitor small {
    color: #496582;

    font-size: 7px;
    letter-spacing: .16em;
}


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

.projects-hero-footer {
    min-height: 65px;

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

    border-top: 1px solid rgba(103, 171, 255, .12);

    color: #536f8e;

    font-size: 8px;
    letter-spacing: .23em;
}

.projects-hero-footer > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.projects-hero-footer .console-pulse {
    width: 6px;
    height: 6px;
}

.projects-hero-footer span {
    color: #355574;
}


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

@keyframes labRotate {
    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes labRotateReverse {
    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }
}

@keyframes labSignal {
    0%,
    100% {
        opacity: .25;
        transform: scale(.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}


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

@media (max-width: 1100px) {

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

    .projects-hero-grid {
        grid-template-columns: 1fr;

        gap: 75px;

        padding-bottom: 70px;
    }

    .projects-hero-copy {
        max-width: 900px;
    }

    .projects-lab-visual {
        width: min(100%, 680px);

        margin: 0 auto;
    }
}


@media (max-width: 700px) {

    .projects-hero {
        padding: 55px 0 35px;
    }

    .projects-hero-top {
        flex-direction: column;
        align-items: flex-start;

        gap: 22px;
    }

    .projects-hero-grid {
        padding-top: 55px;
        gap: 60px;
    }

    .projects-hero-copy h1 {
        font-size: clamp(55px, 17vw, 78px);
    }

    .projects-hero-copy p {
        font-size: 15px;
    }

    .projects-hero-actions {
        flex-direction: column;
    }

    .projects-hero-actions a {
        width: 100%;
    }

    .projects-lab-visual {
        min-height: 470px;
        aspect-ratio: auto;
    }

    .lab-core {
        width: 130px;
        height: 130px;
    }

    .lab-core-logo {
        font-size: 42px;
    }

    .lab-project-node {
        min-width: 125px;

        padding: 10px 11px;
    }

    .lab-project-node strong {
        font-size: 9px;
    }

    .node-sivar {
        top: 10%;
        right: 4%;
    }

    .node-sisae {
        left: 2%;
        top: 48%;
    }

    .node-library {
        right: 3%;
        bottom: 12%;
    }

    .lab-monitor {
        left: 15px;
        bottom: 15px;

        min-width: 130px;
    }

    .projects-hero-footer {
        padding: 22px 0;

        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   ACCESIBILIDAD — REDUCIR MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .lab-orbit,
    .lab-core::before,
    .lab-signal {
        animation: none;
    }
}

/* =========================================================
   PROYECTOS — SIVAR-SOLAR SHOWCASE
========================================================= */

.projects-showcase {
    position: relative;
    padding: 145px 0 120px;
    border-top: 1px solid rgba(91, 168, 255, .10);
    border-bottom: 1px solid rgba(91, 168, 255, .10);
    overflow: hidden;
    scroll-margin-top: 100px;
}

.projects-showcase::before {
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    left: -400px;
    top: 15%;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(29, 139, 255, .08),
            transparent 68%
        );

    pointer-events: none;
}

.projects-showcase::after {
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    right: -350px;
    bottom: -250px;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(60, 229, 186, .045),
            transparent 70%
        );

    pointer-events: none;
}

.projects-showcase .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   CABECERA
========================================================= */

.showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 32px;

    border-bottom: 1px solid rgba(96, 169, 255, .13);
}

.showcase-header-left,
.showcase-header-status {
    display: flex;
    align-items: center;
    gap: 14px;
}

.showcase-header-left {
    font-size: 10px;
    letter-spacing: .25em;
}

.showcase-header-left .section-index {
    color: #65d5ff;
}

.showcase-header-left .section-label {
    color: #607a9a;
}

.showcase-header-status {
    color: #6f88a6;

    font-size: 9px;
    letter-spacing: .23em;
}


/* =========================================================
   INTRO
========================================================= */

.showcase-intro {
    display: grid;
    grid-template-columns: 1fr .72fr;
    align-items: end;
    gap: 90px;

    padding: 80px 0 75px;
}

.showcase-project-code,
.showcase-category {
    display: block;

    margin-bottom: 22px;

    color: #6280a3;

    font-size: 9px;
    letter-spacing: .28em;
}

.showcase-intro h2 {
    margin: 0;

    color: #f4f8ff;

    font-size: clamp(70px, 8vw, 138px);
    line-height: .82;
    letter-spacing: -.075em;
}

.showcase-intro h2 span {
    color: #66d4ff;
}

.showcase-intro-copy {
    padding-bottom: 4px;
}

.showcase-intro-copy p {
    max-width: 570px;

    margin: 0;

    color: #8295af;

    font-size: 16px;
    line-height: 1.9;
}


/* =========================================================
   SISTEMA PRINCIPAL
========================================================= */

.sivar-system {
    position: relative;

    display: grid;
    grid-template-columns: .72fr 1.25fr .72fr;

    min-height: 620px;

    border: 1px solid rgba(96, 173, 255, .18);

    background:
        linear-gradient(
            145deg,
            rgba(8, 27, 52, .83),
            rgba(3, 13, 29, .94)
        );

    box-shadow:
        0 35px 100px rgba(0, 0, 0, .22);

    overflow: hidden;
}

.sivar-system::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(85, 156, 235, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(85, 156, 235, .025) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    pointer-events: none;
}


/* =========================================================
   TÍTULOS DE PANELES
========================================================= */

.sivar-panel-title {
    min-height: 62px;

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

    padding: 0 20px;

    border-bottom: 1px solid rgba(99, 171, 255, .13);

    color: #597493;

    font-size: 7px;
    letter-spacing: .21em;
}

.sivar-panel-title > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.sivar-panel-title .status-dot {
    width: 5px;
    height: 5px;
}

.sivar-panel-title > span {
    color: #69d5ff;
}


/* =========================================================
   PANEL IZQUIERDO
========================================================= */

.sivar-info-panel {
    position: relative;
    z-index: 3;

    border-right: 1px solid rgba(96, 171, 255, .14);

    background: rgba(3, 15, 31, .46);
}

.sivar-main-status {
    padding: 35px 22px 30px;

    border-bottom: 1px solid rgba(96, 171, 255, .12);
}

.sivar-main-status span {
    display: block;

    margin-bottom: 12px;

    color: #536d8c;

    font-size: 7px;
    letter-spacing: .23em;
}

.sivar-main-status strong {
    display: block;

    margin-bottom: 7px;

    color: #79e8c5;

    font-size: 17px;
    font-weight: 600;
    letter-spacing: .03em;
}

.sivar-main-status small {
    color: #486481;

    font-size: 7px;
    letter-spacing: .16em;
}


/* =========================================================
   TELEMETRÍA
========================================================= */

.sivar-telemetry {
    padding: 5px 20px;
}

.telemetry-item {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;

    min-height: 86px;

    border-bottom: 1px solid rgba(96, 171, 255, .10);
}

.telemetry-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(93, 190, 255, .22);
    border-radius: 10px;

    background: rgba(27, 88, 143, .11);

    color: #6fd5ff;

    font-size: 16px;
}

.telemetry-item > div:nth-child(2) span {
    display: block;

    margin-bottom: 5px;

    color: #526d8b;

    font-size: 7px;
    letter-spacing: .2em;
}

.telemetry-item > div:nth-child(2) strong {
    color: #c9dcef;

    font-size: 13px;
    font-weight: 600;
}

.telemetry-item > small {
    font-size: 6px;
    letter-spacing: .15em;
}

.telemetry-ok {
    color: #72e1bd;
}

.sivar-panel-footer {
    padding: 24px 20px;
}

.sivar-panel-footer span {
    display: block;

    margin-bottom: 7px;

    color: #4e6885;

    font-size: 6px;
    letter-spacing: .18em;
}

.sivar-panel-footer strong {
    color: #65d5ff;

    font-size: 9px;
    letter-spacing: .14em;
}


/* =========================================================
   CENTRO DE RED
========================================================= */

.sivar-network {
    position: relative;
    z-index: 2;

    min-height: 620px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(31, 123, 213, .12),
            transparent 55%
        );
}

.sivar-network-grid {
    position: absolute;
    inset: 0;

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

    background-size: 42px 42px;

    mask-image:
        radial-gradient(
            circle,
            black 25%,
            transparent 78%
        );

    pointer-events: none;
}


/* =========================================================
   ANILLOS
========================================================= */

.sivar-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(92, 189, 255, .17);
    border-radius: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;
}

.ring-a {
    width: 82%;
    aspect-ratio: 1;

    animation: sivarRotate 30s linear infinite;
}

.ring-b {
    width: 59%;
    aspect-ratio: 1;

    border-style: dashed;

    animation: sivarRotateReverse 22s linear infinite;
}

.ring-c {
    width: 35%;
    aspect-ratio: 1;

    border-color: rgba(112, 234, 198, .18);

    animation: sivarRotate 17s linear infinite;
}

.sivar-ring::before {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    top: 14%;
    left: 17%;

    border-radius: 50%;

    background: #6fdcff;

    box-shadow:
        0 0 10px rgba(111, 220, 255, .9);
}

.ring-c::before {
    background: #78e9c4;

    box-shadow:
        0 0 10px rgba(120, 233, 196, .9);
}


/* =========================================================
   CAM-001
========================================================= */

.sivar-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 145px;
    height: 145px;

    transform: translate(-50%, -50%);

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

    border: 1px solid rgba(96, 205, 255, .38);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(31, 118, 205, .30),
            rgba(3, 17, 35, .94) 68%
        );

    box-shadow:
        0 0 65px rgba(47, 157, 255, .11);

    z-index: 7;
}

.sivar-camera {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 10px;

    border: 1px solid rgba(102, 214, 255, .25);
    border-radius: 50%;

    color: #79ddff;

    font-size: 21px;

    background: rgba(29, 102, 174, .13);
}

.sivar-core > span {
    color: #d7effb;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.sivar-core > small {
    margin-top: 6px;

    color: #52708d;

    font-size: 6px;
    letter-spacing: .19em;
}


/* =========================================================
   NODOS
========================================================= */

.sivar-node {
    position: absolute;
    z-index: 8;

    min-width: 112px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 13px;

    border: 1px solid rgba(91, 181, 255, .18);

    background: rgba(4, 21, 41, .90);

    backdrop-filter: blur(8px);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.sivar-node:hover {
    transform: translateY(-3px);

    border-color: rgba(101, 213, 255, .43);

    background: rgba(8, 39, 70, .94);
}

.sivar-node > i {
    color: #6fd7ff;
    font-size: 17px;
}

.sivar-node span {
    display: block;

    margin-bottom: 4px;

    color: #506c89;

    font-size: 6px;
    letter-spacing: .18em;
}

.sivar-node strong {
    display: block;

    color: #bdd8e9;

    font-size: 9px;
    letter-spacing: .1em;
}

.sivar-solar-node {
    left: 6%;
    top: 15%;
}

.sivar-network-node {
    right: 6%;
    top: 18%;
}

.sivar-api-node {
    left: 7%;
    bottom: 17%;
}

.sivar-alert-node {
    right: 6%;
    bottom: 18%;
}

.sivar-solar-node > i {
    color: #ffe07a;
}

.sivar-alert-node > i {
    color: #7ce9c4;
}


/* =========================================================
   PULSOS
========================================================= */

.sivar-pulse {
    position: absolute;
    z-index: 6;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #6fdcff;

    box-shadow:
        0 0 12px rgba(111, 220, 255, .9);

    animation: sivarPulse 2.2s ease-in-out infinite;
}

.pulse-a {
    left: 31%;
    top: 34%;
}

.pulse-b {
    right: 30%;
    top: 57%;

    animation-delay: .7s;
}

.pulse-c {
    left: 42%;
    bottom: 23%;

    animation-delay: 1.3s;
}


/* scanner */
.sivar-scanner {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 44%;
    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(100, 215, 255, .55),
            transparent
        );

    opacity: .35;

    animation: sivarScanner 8s linear infinite;
}


/* =========================================================
   PANEL DERECHO
========================================================= */

.sivar-monitor-panel {
    position: relative;
    z-index: 3;

    border-left: 1px solid rgba(96, 171, 255, .14);

    background: rgba(3, 15, 31, .46);
}


/* =========================================================
   MAPA
========================================================= */

.sivar-map {
    position: relative;

    height: 285px;

    border-bottom: 1px solid rgba(96, 171, 255, .12);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 56% 50%,
            rgba(32, 125, 214, .16),
            transparent 45%
        );
}

.map-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(91, 168, 246, .05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(91, 168, 246, .05) 1px,
            transparent 1px
        );

    background-size: 27px 27px;

    transform: perspective(400px) rotateX(55deg) scale(1.3);
}

.map-location {
    position: absolute;

    left: 52%;
    top: 48%;

    display: flex;
    align-items: center;
    gap: 10px;

    transform: translate(-50%, -50%);

    z-index: 4;
}

.map-location > span {
    width: 9px;
    height: 9px;

    border: 2px solid #6fdcff;
    border-radius: 50%;

    background: #071a31;

    box-shadow:
        0 0 0 7px rgba(111, 220, 255, .07),
        0 0 18px rgba(111, 220, 255, .6);
}

.map-location strong {
    display: block;

    color: #bcdff1;

    font-size: 8px;
    letter-spacing: .12em;
}

.map-location small {
    color: #4e6d8c;

    font-size: 6px;
    letter-spacing: .14em;
}

.map-radar {
    position: absolute;

    width: 135px;
    height: 135px;

    left: 52%;
    top: 48%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(105, 212, 255, .15);
    border-radius: 50%;

    animation: mapRadar 2.5s ease-out infinite;
}


/* =========================================================
   ALERTAS
========================================================= */

.sivar-alerts {
    padding: 20px;
}

.alerts-heading {
    display: flex;
    justify-content: space-between;

    margin-bottom: 13px;

    color: #506c89;

    font-size: 6px;
    letter-spacing: .18em;
}

.alert-row {
    min-height: 65px;

    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: center;
    gap: 11px;

    border-top: 1px solid rgba(96, 171, 255, .09);
}

.alert-level {
    width: 6px;
    height: 6px;

    border-radius: 50%;
}

.alert-level.green {
    background: #74e5be;

    box-shadow:
        0 0 9px rgba(116, 229, 190, .7);
}

.alert-level.yellow {
    background: #f0ca6a;

    box-shadow:
        0 0 9px rgba(240, 202, 106, .6);
}

.alert-level.red {
    background: #ff7181;

    box-shadow:
        0 0 9px rgba(255, 113, 129, .6);
}

.alert-row strong {
    display: block;

    margin-bottom: 4px;

    color: #aabfd3;

    font-size: 8px;
    letter-spacing: .08em;
}

.alert-row small {
    color: #4c6784;

    font-size: 6px;
    letter-spacing: .14em;
}


/* =========================================================
   ARQUITECTURA
========================================================= */

.sivar-architecture {
    display: grid;
    grid-template-columns: 190px 1fr;
    align-items: center;

    min-height: 120px;

    margin-top: 20px;

    border: 1px solid rgba(96, 173, 255, .14);

    background: rgba(5, 19, 38, .48);
}

.architecture-label {
    height: 100%;

    display: flex;
    align-items: center;

    padding: 0 24px;

    border-right: 1px solid rgba(96, 173, 255, .12);

    color: #526d8c;

    font-size: 7px;
    letter-spacing: .22em;
}

.architecture-flow {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px;

    padding: 20px 30px;
}

.architecture-flow > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    color: #65819e;
}

.architecture-flow > div i {
    color: #6ed5ff;
    font-size: 18px;
}

.architecture-flow > div span {
    font-size: 7px;
    letter-spacing: .15em;
}

.architecture-flow > i {
    color: #345b7d;
    font-size: 13px;
}


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

.showcase-footer {
    min-height: 70px;

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

    margin-top: 35px;

    border-top: 1px solid rgba(96, 173, 255, .11);

    color: #536e8d;

    font-size: 8px;
    letter-spacing: .21em;
}

.showcase-footer > div {
    display: flex;
    align-items: center;
    gap: 11px;
}

.showcase-footer span {
    color: #345675;
}


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

@keyframes sivarRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes sivarRotateReverse {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }
}

@keyframes sivarPulse {

    0%,
    100% {
        opacity: .25;
        transform: scale(.65);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

@keyframes sivarScanner {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes mapRadar {

    0% {
        opacity: .7;
        transform:
            translate(-50%, -50%)
            scale(.25);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(1.35);
    }
}


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

@media (max-width: 1180px) {

    .sivar-system {
        grid-template-columns: 260px 1fr;
    }

    .sivar-monitor-panel {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: 1fr 1fr;

        border-left: 0;
        border-top: 1px solid rgba(96, 171, 255, .14);
    }

    .sivar-monitor-panel .sivar-panel-title {
        grid-column: 1 / -1;
    }

    .sivar-map {
        border-bottom: 0;
        border-right: 1px solid rgba(96, 171, 255, .12);
    }
}


@media (max-width: 850px) {

    .showcase-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .sivar-system {
        grid-template-columns: 1fr;
    }

    .sivar-info-panel {
        border-right: 0;
        border-bottom: 1px solid rgba(96, 171, 255, .14);
    }

    .sivar-network {
        min-height: 580px;
    }

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

    .sivar-map {
        border-right: 0;
        border-bottom: 1px solid rgba(96, 171, 255, .12);
    }

    .sivar-architecture {
        grid-template-columns: 1fr;
    }

    .architecture-label {
        min-height: 55px;

        border-right: 0;
        border-bottom: 1px solid rgba(96, 173, 255, .12);
    }

    .architecture-flow {
        flex-wrap: wrap;
        justify-content: center;

        gap: 22px;
    }
}


@media (max-width: 600px) {

    .projects-showcase {
        padding: 95px 0 80px;
    }

    .showcase-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .showcase-intro {
        padding: 60px 0 55px;
    }

    .showcase-intro h2 {
        font-size: clamp(62px, 21vw, 90px);
    }

    .sivar-network {
        min-height: 500px;
    }

    .sivar-core {
        width: 115px;
        height: 115px;
    }

    .sivar-camera {
        width: 40px;
        height: 40px;
    }

    .sivar-node {
        min-width: 96px;
        padding: 9px;
    }

    .sivar-node > i {
        font-size: 14px;
    }

    .sivar-node strong {
        font-size: 7px;
    }

    .architecture-flow > i {
        transform: rotate(90deg);
    }

    .showcase-footer {
        padding: 22px 0;

        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   REDUCIR MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sivar-ring,
    .sivar-pulse,
    .sivar-scanner,
    .map-radar {
        animation: none;
    }
}

/* =========================================================
   PROYECTOS — INNOVATION LAB
   SISAE + BIBLIOTECA VIRTUAL
========================================================= */

.projects-lab-section {
    position: relative;
    padding: 145px 0 120px;
    overflow: hidden;
    border-bottom: 1px solid rgba(96, 170, 255, .10);
}

.projects-lab-section::before {
    content: "";
    position: absolute;
    width: 850px;
    height: 850px;
    right: -380px;
    top: 8%;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(42, 139, 255, .07),
            transparent 68%
        );
    pointer-events: none;
}

.projects-lab-section::after {
    content: "";
    position: absolute;
    width: 750px;
    height: 750px;
    left: -350px;
    bottom: -180px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(72, 224, 190, .035),
            transparent 70%
        );
    pointer-events: none;
}

.projects-lab-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   CABECERA
========================================================= */

.projects-lab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 32px;

    border-bottom: 1px solid rgba(96, 170, 255, .13);
}

.projects-lab-header-left,
.projects-lab-status {
    display: flex;
    align-items: center;
    gap: 14px;

    font-size: 9px;
    letter-spacing: .25em;
}

.projects-lab-header-left .section-index {
    color: #69d7ff;
}

.projects-lab-header-left .section-label,
.projects-lab-status {
    color: #607b9a;
}


/* =========================================================
   INTRO
========================================================= */

.projects-lab-intro {
    display: grid;
    grid-template-columns: 1fr .72fr;
    align-items: end;
    gap: 90px;

    padding: 80px 0 90px;
}

.projects-lab-eyebrow {
    display: block;
    margin-bottom: 24px;

    color: #6381a3;

    font-size: 9px;
    letter-spacing: .29em;
}

.projects-lab-intro h2 {
    margin: 0;

    color: #f3f7ff;

    font-size: clamp(64px, 7vw, 118px);
    line-height: .88;
    letter-spacing: -.065em;
}

.projects-lab-intro h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #b9edff,
            #69d1ff,
            #4d86ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

.projects-lab-description p {
    margin: 0;

    color: #8295af;

    font-size: 16px;
    line-height: 1.9;
}

.projects-lab-line {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 30px;

    color: #567391;

    font-size: 7px;
    letter-spacing: .2em;
}

.projects-lab-line span {
    width: 45px;
    height: 1px;

    background: #64d4ff;

    box-shadow:
        0 0 10px rgba(100, 212, 255, .4);
}


/* =========================================================
   CONTENEDOR DE PROYECTO
========================================================= */

.lab-project {
    position: relative;

    display: grid;
    grid-template-columns: .78fr 1.22fr;

    min-height: 650px;

    margin-bottom: 35px;

    border: 1px solid rgba(96, 171, 255, .16);

    background:
        linear-gradient(
            145deg,
            rgba(8, 25, 49, .78),
            rgba(3, 13, 29, .92)
        );

    overflow: hidden;
}

.lab-project::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(82, 153, 232, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(82, 153, 232, .025) 1px,
            transparent 1px
        );

    background-size: 65px 65px;

    pointer-events: none;
}


/* =========================================================
   INFORMACIÓN DEL PROYECTO
========================================================= */

.lab-project-info {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 65px 55px;

    border-right: 1px solid rgba(96, 171, 255, .13);
}

.lab-project-library .lab-project-info {
    border-right: 0;
    border-left: 1px solid rgba(96, 171, 255, .13);
}

.lab-project-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    margin-bottom: 55px;

    color: #536f8e;

    font-size: 7px;
    letter-spacing: .21em;
}

.project-active {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #72dfbd;
}

.project-active i {
    font-size: 5px;

    filter:
        drop-shadow(
            0 0 5px rgba(114, 223, 189, .8)
        );
}

.lab-project-type {
    display: block;

    margin-bottom: 18px;

    color: #6281a3;

    font-size: 8px;
    letter-spacing: .23em;
}

.lab-project-info h3 {
    margin: 0 0 28px;

    color: #f1f6ff;

    font-size: clamp(60px, 6vw, 100px);
    line-height: .87;
    letter-spacing: -.065em;
}

.lab-project-info h3 span {
    display: block;
    color: #65d3ff;
}

.lab-project-info > p {
    max-width: 510px;

    margin: 0;

    color: #8295ae;

    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   ETIQUETAS
========================================================= */

.lab-project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 35px;
}

.lab-project-tags span {
    padding: 8px 11px;

    border: 1px solid rgba(99, 180, 255, .17);

    background: rgba(22, 65, 108, .10);

    color: #6886a6;

    font-size: 7px;
    letter-spacing: .17em;
}


/* =========================================================
   INFORMACIÓN TÉCNICA
========================================================= */

.lab-project-tech {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin-top: 45px;

    border-top: 1px solid rgba(96, 171, 255, .12);
    border-bottom: 1px solid rgba(96, 171, 255, .12);
}

.lab-project-tech > div {
    padding: 18px 10px 18px 0;

    border-right: 1px solid rgba(96, 171, 255, .10);
}

.lab-project-tech > div:last-child {
    border-right: 0;
}

.lab-project-tech small {
    display: block;

    margin-bottom: 7px;

    color: #496582;

    font-size: 6px;
    letter-spacing: .17em;
}

.lab-project-tech strong {
    color: #8caac4;

    font-size: 8px;
    letter-spacing: .13em;
}


/* =========================================================
   INTERFACES GENERALES
========================================================= */

.sisae-interface,
.library-interface {
    position: relative;
    z-index: 3;

    margin: 50px;

    align-self: center;

    border: 1px solid rgba(97, 178, 255, .20);

    background:
        rgba(4, 16, 33, .91);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .28);

    overflow: hidden;
}

.interface-topbar {
    min-height: 68px;

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

    padding: 0 20px;

    border-bottom: 1px solid rgba(96, 171, 255, .13);

    background: rgba(8, 26, 48, .75);
}

.interface-topbar > div:first-child {
    display: flex;
    align-items: center;
    gap: 11px;
}

.interface-logo {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(100, 203, 255, .35);
    border-radius: 9px;

    background: rgba(40, 126, 208, .13);

    color: #70d9ff;

    font-size: 16px;
    font-weight: 700;
}

.interface-topbar strong {
    display: block;

    margin-bottom: 4px;

    color: #c8dcec;

    font-size: 9px;
    letter-spacing: .12em;
}

.interface-topbar small {
    display: block;

    color: #4f6c8a;

    font-size: 6px;
    letter-spacing: .16em;
}

.interface-online {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #69dcb7;

    font-size: 6px;
    letter-spacing: .18em;
}

.interface-online span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #72e6bd;

    box-shadow:
        0 0 8px rgba(114, 230, 189, .8);
}


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

.sisae-dashboard {
    display: grid;
    grid-template-columns: 58px 1fr;

    min-height: 470px;
}

.sisae-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;

    padding: 24px 0;

    border-right: 1px solid rgba(96, 171, 255, .11);

    background: rgba(3, 14, 29, .65);
}

.sisae-sidebar span {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 1px solid transparent;
    border-radius: 8px;

    color: #496987;

    font-size: 13px;
}

.sisae-sidebar-active {
    color: #6dd7ff !important;

    border-color:
        rgba(104, 201, 255, .24) !important;

    background:
        rgba(34, 117, 193, .12);
}

.sisae-dashboard-main {
    padding: 28px;
}

.sisae-dashboard-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 24px;
}

.sisae-dashboard-heading small {
    display: block;

    margin-bottom: 7px;

    color: #4d6987;

    font-size: 6px;
    letter-spacing: .16em;
}

.sisae-dashboard-heading strong {
    color: #c2d8e9;

    font-size: 15px;
    font-weight: 600;
}

.sisae-dashboard-heading > span {
    color: #66d9b4;

    font-size: 6px;
    letter-spacing: .17em;
}


/* =========================================================
   SISAE STATS
========================================================= */

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

    margin-bottom: 18px;
}

.sisae-stats > div {
    min-height: 78px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 13px;

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

    background: rgba(18, 55, 94, .10);
}

.sisae-stats span {
    margin-bottom: 8px;

    color: #6bd7ff;

    font-size: 21px;
    font-weight: 600;
}

.sisae-stats small {
    color: #526d89;

    font-size: 6px;
    letter-spacing: .15em;
}


/* =========================================================
   SISAE GRÁFICO
========================================================= */

.sisae-chart {
    height: 190px;

    padding: 18px;

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

    background:
        linear-gradient(
            rgba(12, 39, 72, .16),
            rgba(4, 17, 34, .1)
        );
}

.chart-header {
    display: flex;
    justify-content: space-between;

    color: #526e8c;

    font-size: 6px;
    letter-spacing: .16em;
}

.chart-bars {
    height: 125px;

    display: flex;
    align-items: flex-end;
    gap: 11px;

    padding-top: 22px;

    border-bottom: 1px solid rgba(96, 171, 255, .12);
}

.chart-bars span {
    flex: 1;

    height: var(--bar);

    min-width: 7px;

    background:
        linear-gradient(
            180deg,
            #68d8ff,
            rgba(50, 111, 255, .18)
        );

    box-shadow:
        0 0 12px rgba(91, 202, 255, .08);

    transform-origin: bottom;

    animation:
        sisaeBar 1.3s ease both;
}

.chart-bars span:nth-child(2) {
    animation-delay: .08s;
}

.chart-bars span:nth-child(3) {
    animation-delay: .16s;
}

.chart-bars span:nth-child(4) {
    animation-delay: .24s;
}

.chart-bars span:nth-child(5) {
    animation-delay: .32s;
}

.chart-bars span:nth-child(6) {
    animation-delay: .40s;
}

.chart-bars span:nth-child(7) {
    animation-delay: .48s;
}


/* =========================================================
   SISAE FLUJO
========================================================= */

.sisae-flow {
    min-height: 74px;

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

    margin-top: 18px;
    padding: 10px 15px;

    border: 1px solid rgba(95, 174, 255, .11);
}

.sisae-flow > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;

    color: #607e9c;
}

.sisae-flow > div i {
    color: #6bd4ff;
    font-size: 14px;
}

.sisae-flow > div span {
    font-size: 6px;
    letter-spacing: .13em;
}

.sisae-flow > i {
    color: #315675;
    font-size: 10px;
}


/* =========================================================
   BIBLIOTECA
========================================================= */

.lab-project-library {
    grid-template-columns: 1.22fr .78fr;
}

.library-logo {
    color: #7ce5c3;

    border-color: rgba(124, 229, 195, .27);

    background:
        rgba(50, 173, 134, .09);
}

.library-dashboard {
    display: grid;
    grid-template-columns: 58px 1fr;

    min-height: 470px;
}

.library-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;

    padding: 20px 0;

    border-right: 1px solid rgba(96, 171, 255, .11);

    background: rgba(3, 14, 29, .67);
}

.library-sidebar-logo {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    margin-bottom: 15px;

    color: #74e1bd;

    font-size: 15px;
}

.library-sidebar > span {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: #496986;

    border: 1px solid transparent;
    border-radius: 8px;
}

.library-menu-active {
    color: #6fd7ff !important;

    border-color:
        rgba(104, 201, 255, .22) !important;

    background:
        rgba(33, 114, 191, .11);
}

.library-main {
    padding: 26px;
}


/* =========================================================
   BUSCADOR
========================================================= */

.library-search {
    min-height: 45px;

    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;

    padding: 0 14px;

    border: 1px solid rgba(95, 174, 255, .13);

    background: rgba(6, 24, 45, .6);

    color: #526e8b;

    font-size: 8px;
}

.library-search i {
    color: #65d1ff;
}

.library-search small {
    color: #4c6987;

    font-size: 6px;
    letter-spacing: .15em;
}


/* =========================================================
   LIBRARY HEADING
========================================================= */

.library-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin: 27px 0 20px;
}

.library-heading small {
    display: block;

    margin-bottom: 6px;

    color: #4f6a88;

    font-size: 6px;
    letter-spacing: .17em;
}

.library-heading strong {
    color: #c5d9e9;

    font-size: 19px;
}

.library-heading > span {
    color: #6fe0bb;

    font-size: 6px;
    letter-spacing: .16em;
}


/* =========================================================
   LIBROS
========================================================= */

.library-books {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.digital-book {
    min-width: 0;
}

.book-cover {
    position: relative;

    height: 175px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 16px 13px;

    border: 1px solid rgba(103, 185, 255, .18);

    background:
        linear-gradient(
            145deg,
            rgba(20, 73, 125, .35),
            rgba(4, 19, 38, .92)
        );

    overflow: hidden;

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

.book-cover::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -35px;
    top: -35px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(88, 199, 255, .15),
            transparent 70%
        );
}

.digital-book:hover .book-cover {
    transform: translateY(-5px);

    border-color:
        rgba(102, 210, 255, .42);

    box-shadow:
        0 15px 30px rgba(0, 0, 0, .18);
}

.book-cover i {
    position: relative;
    z-index: 2;

    color: #71d8ff;

    font-size: 23px;
}

.book-cover span {
    position: relative;
    z-index: 2;

    color: #a9c7da;

    font-size: 7px;
    letter-spacing: .16em;
}

.digital-book > small {
    display: block;

    margin-top: 9px;

    color: #536f8d;

    font-size: 6px;
    letter-spacing: .12em;
}

.book-two .book-cover {
    background:
        linear-gradient(
            145deg,
            rgba(35, 105, 149, .27),
            rgba(4, 19, 38, .92)
        );
}

.book-three .book-cover {
    background:
        linear-gradient(
            145deg,
            rgba(43, 90, 170, .25),
            rgba(4, 19, 38, .92)
        );
}

.book-four .book-cover {
    background:
        linear-gradient(
            145deg,
            rgba(43, 151, 125, .18),
            rgba(4, 19, 38, .92)
        );
}


/* =========================================================
   ESTADO DEL LECTOR
========================================================= */

.library-reader-status {
    min-height: 58px;

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

    margin-top: 23px;
    padding: 0 15px;

    border: 1px solid rgba(95, 174, 255, .11);

    color: #536f8c;

    font-size: 6px;
    letter-spacing: .15em;
}

.library-reader-status > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.library-reader-status i {
    color: #6bd6ff;
}

.reader-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #71e2bc;

    box-shadow:
        0 0 8px rgba(113, 226, 188, .8);
}


/* =========================================================
   PIE INNOVATION LAB
========================================================= */

.projects-lab-footer {
    min-height: 75px;

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

    margin-top: 50px;

    border-top: 1px solid rgba(96, 171, 255, .12);

    color: #536f8d;

    font-size: 8px;
    letter-spacing: .21em;
}

.projects-lab-footer > div {
    display: flex;
    align-items: center;
    gap: 11px;
}

.projects-lab-footer span {
    color: #365876;
}


/* =========================================================
   ANIMACIÓN SISAE
========================================================= */

@keyframes sisaeBar {

    from {
        transform: scaleY(0);
        opacity: .25;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}


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

@media (max-width: 1150px) {

    .lab-project,
    .lab-project-library {
        grid-template-columns: 1fr;
    }

    .lab-project-info,
    .lab-project-library .lab-project-info {
        border-right: 0;
        border-left: 0;
        border-bottom:
            1px solid rgba(96, 171, 255, .13);
    }

    .lab-project-library .library-interface {
        order: 2;
    }

    .lab-project-library .lab-project-info {
        order: 1;
    }

    .sisae-interface,
    .library-interface {
        width: calc(100% - 80px);

        margin: 40px;
    }
}


@media (max-width: 800px) {

    .projects-lab-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .lab-project-info {
        padding: 55px 35px;
    }

    .sisae-interface,
    .library-interface {
        width: calc(100% - 40px);

        margin: 20px;
    }

    .library-books {
        grid-template-columns: repeat(2, 1fr);
    }

    .book-cover {
        height: 150px;
    }
}


@media (max-width: 600px) {

    .projects-lab-section {
        padding: 95px 0 80px;
    }

    .projects-lab-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .projects-lab-intro {
        padding: 60px 0;
    }

    .projects-lab-intro h2 {
        font-size: clamp(58px, 18vw, 82px);
    }

    .lab-project-info {
        padding: 45px 22px;
    }

    .lab-project-meta {
        flex-direction: column;
        align-items: flex-start;

        margin-bottom: 40px;
    }

    .lab-project-tech {
        grid-template-columns: 1fr;
    }

    .lab-project-tech > div {
        border-right: 0;
        border-bottom:
            1px solid rgba(96, 171, 255, .10);
    }

    .lab-project-tech > div:last-child {
        border-bottom: 0;
    }

    .sisae-interface,
    .library-interface {
        width: calc(100% - 24px);

        margin: 12px;
    }

    .sisae-dashboard,
    .library-dashboard {
        grid-template-columns: 45px 1fr;
    }

    .sisae-dashboard-main,
    .library-main {
        padding: 16px;
    }

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

    .sisae-flow {
        flex-direction: column;
        gap: 15px;

        padding: 18px;
    }

    .sisae-flow > i {
        transform: rotate(90deg);
    }

    .library-books {
        grid-template-columns: repeat(2, 1fr);
    }

    .library-reader-status {
        padding: 15px;

        flex-direction: column;
        align-items: flex-start;
        gap: 13px;
    }

    .projects-lab-footer {
        padding: 22px 0;

        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .chart-bars span {
        animation: none;
    }
}

/* =========================================================
   PROYECTOS — FINAL CTA
========================================================= */

.projects-final-cta {
    position: relative;
    padding: 130px 0 80px;
    overflow: hidden;
}

.projects-final-cta::before {
    content: "";
    position: absolute;

    width: 850px;
    height: 850px;

    right: -300px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(47, 154, 255, .10),
            transparent 68%
        );

    pointer-events: none;
}

.projects-final-cta .container {
    position: relative;
    z-index: 2;
}


/* CABECERA */

.projects-cta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 30px;

    border-bottom:
        1px solid rgba(96, 171, 255, .13);

    color: #5d7897;

    font-size: 8px;
    letter-spacing: .24em;
}

.projects-cta-top > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.projects-cta-top > div:first-child span:first-child {
    color: #68d7ff;
}


/* GRID */

.projects-cta-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 85px;

    padding: 100px 0;
}


/* TEXTO */

.projects-cta-eyebrow {
    display: block;

    margin-bottom: 25px;

    color: #6482a4;

    font-size: 9px;
    letter-spacing: .29em;
}

.projects-cta-copy h2 {
    max-width: 720px;

    margin: 0;

    color: #f4f8ff;

    font-size: clamp(65px, 6.8vw, 118px);
    line-height: .88;
    letter-spacing: -.067em;
}

.projects-cta-copy h2 span {
    display: block;

    margin-top: 10px;

    background:
        linear-gradient(
            90deg,
            #bceeff,
            #68d3ff,
            #5186ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

.projects-cta-copy p {
    max-width: 610px;

    margin: 35px 0 0;

    color: #8295ae;

    font-size: 16px;
    line-height: 1.9;
}


/* BOTONES */

.projects-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;

    margin-top: 42px;
}

.projects-start-button {
    min-height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    padding: 0 24px;

    border: 1px solid rgba(105, 211, 255, .45);

    background:
        linear-gradient(
            90deg,
            #498cff,
            #6bd9ff
        );

    color: #03111f;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.projects-start-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(55, 160, 255, .17);
}

.projects-services-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #7f9ab6;

    text-decoration: none;

    font-size: 10px;
    letter-spacing: .08em;

    transition:
        color .3s ease,
        gap .3s ease;
}

.projects-services-link:hover {
    color: #6fd8ff;
    gap: 17px;
}


/* =========================================================
   CONSOLA
========================================================= */

.next-project-console {
    position: relative;

    border: 1px solid rgba(97, 180, 255, .20);

    background:
        linear-gradient(
            145deg,
            rgba(8, 27, 52, .92),
            rgba(3, 14, 30, .96)
        );

    box-shadow:
        0 35px 90px rgba(0, 0, 0, .25);

    overflow: hidden;
}

.next-project-console::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(85, 159, 239, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(85, 159, 239, .035) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    pointer-events: none;
}


/* HEADER CONSOLA */

.next-console-header {
    position: relative;
    z-index: 2;

    min-height: 62px;

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

    padding: 0 20px;

    border-bottom:
        1px solid rgba(96, 171, 255, .13);

    color: #597493;

    font-size: 7px;
    letter-spacing: .2em;
}

.next-console-header > div {
    display: flex;
    align-items: center;
    gap: 9px;
}


/* CUERPO */

.next-console-body {
    position: relative;
    z-index: 2;

    min-height: 520px;

    padding: 40px;
}


/* =========================================================
   NÚCLEO DEL NUEVO PROYECTO
========================================================= */

.next-project-core {
    position: relative;

    width: 320px;
    height: 320px;

    margin: 0 auto;
}

.next-core-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.next-core-ring.ring-01 {
    width: 100%;
    height: 100%;

    border:
        1px solid rgba(95, 192, 255, .15);

    animation:
        nextRotate 30s linear infinite;
}

.next-core-ring.ring-02 {
    width: 72%;
    height: 72%;

    border:
        1px dashed rgba(101, 206, 255, .20);

    animation:
        nextRotateReverse 22s linear infinite;
}

.next-core-ring.ring-03 {
    width: 44%;
    height: 44%;

    border:
        1px solid rgba(116, 230, 196, .22);

    animation:
        nextRotate 17s linear infinite;
}

.next-core-ring::before {
    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    top: 14%;
    left: 17%;

    border-radius: 50%;

    background: #70dcff;

    box-shadow:
        0 0 12px rgba(112, 220, 255, .9);
}

.next-core-ring.ring-03::before {
    background: #78e7c1;

    box-shadow:
        0 0 12px rgba(120, 231, 193, .9);
}


/* CENTRO */

.next-core-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 112px;
    height: 112px;

    transform: translate(-50%, -50%);

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

    border:
        1px solid rgba(105, 211, 255, .35);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(38, 126, 209, .30),
            rgba(3, 17, 35, .95)
        );

    box-shadow:
        0 0 60px rgba(50, 160, 255, .12);
}

.next-core-center > span {
    color: #70dbff;

    font-size: 35px;
    font-weight: 200;
    line-height: 1;
}

.next-core-center strong {
    margin-top: 7px;

    color: #d6eaf7;

    font-size: 9px;
    letter-spacing: .18em;
}

.next-core-center small {
    margin-top: 5px;

    color: #506d89;

    font-size: 6px;
    letter-spacing: .17em;
}


/* PUNTOS */

.next-point {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #6fdcff;

    box-shadow:
        0 0 10px rgba(111, 220, 255, .9);

    animation:
        nextPulse 2.2s ease-in-out infinite;
}

.point-01 {
    top: 18%;
    right: 20%;
}

.point-02 {
    left: 13%;
    top: 55%;

    animation-delay: .7s;
}

.point-03 {
    right: 27%;
    bottom: 12%;

    animation-delay: 1.4s;
}


/* =========================================================
   ESTADOS
========================================================= */

.next-project-status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin-top: 15px;

    border-top:
        1px solid rgba(96, 171, 255, .12);

    border-bottom:
        1px solid rgba(96, 171, 255, .12);
}

.next-project-status > div {
    padding: 17px;

    border-right:
        1px solid rgba(96, 171, 255, .10);
}

.next-project-status > div:last-child {
    border-right: 0;
}

.next-project-status span {
    display: block;

    margin-bottom: 7px;

    color: #4e6986;

    font-size: 6px;
    letter-spacing: .17em;
}

.next-project-status strong {
    color: #8faac2;

    font-size: 8px;
    letter-spacing: .12em;
}

.next-project-status .ready {
    color: #70e2bc;
}


/* =========================================================
   TERMINAL
========================================================= */

.next-project-terminal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 25px;
}

.next-project-terminal > div {
    flex: 1;

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

.next-project-terminal > div span {
    color: #3f607e;

    font-size: 6px;
}

.next-project-terminal > div strong {
    color: #86a6c0;

    font-size: 8px;
    letter-spacing: .12em;
}

.next-project-terminal > div small {
    color: #45627f;

    font-size: 6px;
    letter-spacing: .13em;
}

.next-project-terminal > i {
    color: #335978;

    font-size: 9px;
}


/* FOOTER CONSOLA */

.next-console-footer {
    position: relative;
    z-index: 2;

    min-height: 52px;

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

    padding: 0 20px;

    border-top:
        1px solid rgba(96, 171, 255, .12);

    color: #4e6b88;

    font-size: 6px;
    letter-spacing: .17em;
}


/* =========================================================
   BARRA FINAL
========================================================= */

.projects-cta-bottom {
    min-height: 72px;

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

    border-top:
        1px solid rgba(96, 171, 255, .12);

    color: #536f8c;

    font-size: 8px;
    letter-spacing: .2em;
}

.projects-cta-bottom > div {
    display: flex;
    align-items: center;
    gap: 11px;
}

.projects-cta-bottom span {
    color: #365978;
}


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

@keyframes nextRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes nextRotateReverse {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }
}

@keyframes nextPulse {

    0%,
    100% {
        opacity: .25;
        transform: scale(.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.6);
    }
}


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

@media (max-width: 1050px) {

    .projects-cta-grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .next-project-console {
        max-width: 750px;
    }
}


@media (max-width: 650px) {

    .projects-final-cta {
        padding: 95px 0 60px;
    }

    .projects-cta-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .projects-cta-grid {
        padding: 70px 0;
    }

    .projects-cta-copy h2 {
        font-size:
            clamp(56px, 18vw, 80px);
    }

    .projects-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .projects-start-button {
        width: 100%;
    }

    .projects-services-link {
        justify-content: center;
    }

    .next-console-body {
        min-height: auto;
        padding: 30px 15px;
    }

    .next-project-core {
        width: 260px;
        height: 260px;
    }

    .next-project-status {
        grid-template-columns: 1fr;
    }

    .next-project-status > div {
        border-right: 0;

        border-bottom:
            1px solid rgba(96, 171, 255, .10);
    }

    .next-project-status > div:last-child {
        border-bottom: 0;
    }

    .next-project-terminal {
        flex-direction: column;
        align-items: stretch;

        gap: 13px;
    }

    .next-project-terminal > div {
        align-items: center;
    }

    .next-project-terminal > i {
        transform: rotate(90deg);
        text-align: center;
    }

    .next-console-footer {
        padding: 17px;

        flex-direction: column;
        align-items: flex-start;
    }

    .projects-cta-bottom {
        padding: 22px 0;

        flex-direction: column;
        align-items: flex-start;
    }
}


/* REDUCIR MOVIMIENTO */

@media (prefers-reduced-motion: reduce) {

    .next-core-ring,
    .next-point {
        animation: none;
    }
}

/* =========================================================
   NAVBAR — PÁGINA ACTIVA
========================================================= */

.main-nav a.active {
    color: #75dcff;
}

.main-nav a.active::after {
    width: 100%;
    opacity: 1;
}

.main-nav a.active {
    text-shadow:
        0 0 18px rgba(92, 205, 255, .18);
}

/* =========================================================
   RESPONSIVE GLOBAL — ALVAS PERÚ SYSTEM
   BASE PARA TABLET Y MÓVIL
========================================================= */

/* Evitar desbordamiento horizontal */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
svg,
canvas {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   CONTENEDOR GLOBAL
========================================================= */

.container {
    width: min(1180px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}


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

@media (max-width: 1100px) {

    .container {
        width: min(100% - 40px, 960px);
    }

}


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

@media (max-width: 700px) {

    .container {
        width: calc(100% - 30px);
    }

    /* Evitar que títulos grandes rompan la pantalla */

    h1,
    h2,
    h3 {
        overflow-wrap: break-word;
    }

    /* Botones cómodos para pantalla táctil */

    a,
    button {
        -webkit-tap-highlight-color: transparent;
    }

}


/* =========================================================
   MÓVILES PEQUEÑOS
========================================================= */

@media (max-width: 420px) {

    .container {
        width: calc(100% - 24px);
    }

}


/* =========================================================
   PROTECCIÓN DE INTERFACES TECNOLÓGICAS
========================================================= */

.sivar-system,
.sisae-interface,
.library-interface,
.next-project-console,
.project-console {
    max-width: 100%;
}


/* =========================================================
   TEXTOS MUY LARGOS
========================================================= */

.projects-page,
.services-page,
.contact-page {
    overflow-x: clip;
}


/* =========================================================
   ELEMENTOS INTERACTIVOS
========================================================= */

a,
button,
input,
textarea,
select {
    touch-action: manipulation;
}


/* Mantener flecha normal sobre contenido no interactivo */

p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
small,
strong {
    cursor: default;
}

a,
button,
select,
input,
textarea,
[role="button"] {
    cursor: pointer;
}


/* =========================================================
   REDUCIR EFECTOS EN DISPOSITIVOS TÁCTILES
========================================================= */

@media (hover: none) {

    .digital-book:hover .book-cover,
    .sivar-node:hover,
    .projects-start-button:hover {
        transform: none;
    }

}


/* =========================================================
   ACCESIBILIDAD — MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}

/* =========================================================
   NAVBAR — MENÚ MÓVIL PREMIUM
========================================================= */

.nav-number {
    display: none;
}


/* BOTÓN HAMBURGUESA */

.mobile-menu {
    position: relative;
    z-index: 1003;

    width: 46px;
    height: 46px;

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

    gap: 7px;

    padding: 0;

    border: 1px solid rgba(104, 200, 255, .18);
    border-radius: 10px;

    background: rgba(7, 24, 45, .72);

    cursor: pointer;
}

.mobile-menu-line {
    width: 19px;
    height: 1px;

    display: block;

    background: #91dfff;

    transition:
        transform .35s ease,
        width .35s ease,
        opacity .35s ease;
}


/* X AL ABRIR */

.mobile-menu.is-active
.mobile-menu-line:first-child {
    transform:
        translateY(4px)
        rotate(45deg);
}

.mobile-menu.is-active
.mobile-menu-line:last-child {
    transform:
        translateY(-4px)
        rotate(-45deg);
}


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

@media (max-width: 900px) {

    body.mobile-nav-open {
        overflow: hidden;
    }


    /* Ocultar Hablemos de escritorio */

    .nav-contact {
        display: none;
    }


    /* Mostrar hamburguesa */

    .mobile-menu {
        display: flex;
    }


    /* HEADER */

    .site-header {
        z-index: 1000;
    }

    .site-header.menu-open {
        background:
            rgba(2, 10, 24, .97);

        backdrop-filter: blur(22px);
    }


    /* =====================================================
       PANEL DEL MENÚ
    ====================================================== */

    .nav-menu {
        position: fixed;

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

        width: 100%;
        height: 100dvh;

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

        gap: 0;

        padding:
            110px
            max(25px, calc((100vw - 700px) / 2))
            55px;

        background:
            radial-gradient(
                circle at 75% 20%,
                rgba(32, 132, 226, .14),
                transparent 35%
            ),
            linear-gradient(
                145deg,
                rgba(2, 11, 26, .995),
                rgba(3, 18, 37, .995)
            );

        opacity: 0;
        visibility: hidden;

        transform: translateY(-18px);

        pointer-events: none;

        transition:
            opacity .35s ease,
            visibility .35s ease,
            transform .35s ease;

        z-index: 1001;
    }


    /* CUADRÍCULA TECNOLÓGICA */

    .nav-menu::before {
        content: "";

        position: absolute;
        inset: 0;

        background-image:
            linear-gradient(
                rgba(86, 162, 239, .035) 1px,
                transparent 1px
            ),
            linear-gradient(
                90deg,
                rgba(86, 162, 239, .035) 1px,
                transparent 1px
            );

        background-size: 45px 45px;

        mask-image:
            linear-gradient(
                to bottom,
                transparent,
                black 20%,
                black 80%,
                transparent
            );

        pointer-events: none;
    }


    /* PANEL ABIERTO */

    .nav-menu.mobile-open {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;
    }


    /* =====================================================
       ENLACES
    ====================================================== */

    .nav-menu > a {
        position: relative;
        z-index: 2;

        width: 100%;

        display: grid;
        grid-template-columns: 50px 1fr auto;
        align-items: center;

        min-height: 76px;

        padding: 0 10px;

        border-bottom:
            1px solid rgba(96, 171, 255, .11);

        color: #8199b4;

        text-decoration: none;

        font-size: clamp(25px, 6vw, 38px);
        font-weight: 500;
        letter-spacing: -.035em;

        transition:
            color .25s ease,
            padding-left .25s ease;
    }


    /* Flecha */

    .nav-menu > a::after {
        content: "↗";

        position: static;

        width: auto;
        height: auto;

        background: none;

        color: #365b7b;

        opacity: 1;

        font-size: 18px;

        transition:
            color .25s ease,
            transform .25s ease;
    }


    /* NÚMERO */

    .nav-number {
        display: block;

        color: #3f6282;

        font-size: 8px;
        font-weight: 500;
        letter-spacing: .16em;
    }


    /* ACTIVO */

    .nav-menu > a.active {
        color: #e9f7ff;

        text-shadow:
            0 0 24px rgba(89, 205, 255, .16);
    }

    .nav-menu > a.active
    .nav-number {
        color: #6dd8ff;
    }

    .nav-menu > a.active::after {
        color: #6dd8ff;
    }


    /* HOVER */

    .nav-menu > a:hover {
        color: #e9f7ff;

        padding-left: 17px;
    }

    .nav-menu > a:hover::after {
        color: #6dd8ff;

        transform:
            translate(3px, -3px);
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .brand-text strong {
        font-size: 10px;
    }

    .brand-text small {
        font-size: 6px;
    }

    .brand-symbol {
        width: 38px;
        height: 38px;
    }

    .mobile-menu {
        width: 42px;
        height: 42px;
    }

    .nav-menu {
        padding:
            100px 20px 35px;
    }

    .nav-menu > a {
        min-height: 68px;

        grid-template-columns:
            42px 1fr auto;

        font-size: 27px;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .nav-menu,
    .mobile-menu-line,
    .nav-menu > a,
    .nav-menu > a::after {
        transition: none;
    }

}

/* =========================================================
   NAVBAR MÓVIL — REFINAMIENTO TIPOGRÁFICO
========================================================= */

@media (max-width: 900px) {

    /* Menú un poco más compacto */
    .nav-menu {
        justify-content: center;
        padding-top: 90px;
        padding-bottom: 45px;
    }

    /* Cada opción */
    .nav-menu > a {
        min-height: 68px;

        grid-template-columns:
            45px
            1fr
            28px;

        padding:
            0 16px;

        color: #718ba8;

        font-size: clamp(21px, 5vw, 29px);
        font-weight: 400;

        line-height: 1;
        letter-spacing: -.025em;

        border-bottom:
            1px solid rgba(93, 168, 239, .10);
    }


    /* Número 01, 02, 03... */

    .nav-menu .nav-number {
        color: #3d6385;

        font-size: 7px;
        font-weight: 600;

        letter-spacing: .20em;
    }


    /* Flecha derecha */

    .nav-menu > a::after {
        font-size: 14px;

        color: #315a7b;

        opacity: .75;
    }


    /* Página activa */

    .nav-menu > a.active {
        color: #f0f9ff;

        font-weight: 500;

        text-shadow:
            0 0 24px rgba(86, 202, 255, .16);
    }

    .nav-menu > a.active
    .nav-number {
        color: #67d8ff;
    }

    .nav-menu > a.active::after {
        color: #67d8ff;
        opacity: 1;
    }


    /* Pequeño indicador de página activa */

    .nav-menu > a.active::before {
        content: "";

        position: absolute;

        left: 0;
        top: 50%;

        width: 2px;
        height: 25px;

        transform: translateY(-50%);

        background:
            linear-gradient(
                #5bcaff,
                #6ee6d1
            );

        box-shadow:
            0 0 12px rgba(91, 202, 255, .65);
    }


    /* Hover solo para dispositivos que lo soporten */

    .nav-menu > a:hover {
        padding-left: 20px;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 480px) {

    .nav-menu {
        padding:
            88px 22px 30px;
    }

    .nav-menu > a {
        min-height: 64px;

        grid-template-columns:
            40px
            1fr
            24px;

        padding:
            0 10px;

        font-size: 23px;
    }

    .nav-menu .nav-number {
        font-size: 6px;
    }

}

/* =========================================================
   HOME HERO — AJUSTE FINO PARA MÓVIL
========================================================= */

@media (max-width: 700px) {

    /* HERO */
    .hero {
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 75px;
    }


    /* ETIQUETA SUPERIOR */
    .hero-badge {
        width: fit-content;
        max-width: 100%;

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

        padding: 10px 16px;

        font-size: 9px;
        letter-spacing: .14em;

        white-space: normal;
        text-align: center;
    }


    /* TÍTULO PRINCIPAL */
    .hero h1 {
        max-width: 680px;

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

        font-size: clamp(46px, 12vw, 68px);
        line-height: .98;
        letter-spacing: -.055em;

        text-align: center;
    }


    /* TEXTO DESCRIPTIVO */
    .hero-description {
        max-width: 650px;

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

        font-size: 16px;
        line-height: 1.75;

        text-align: center;
    }


    /* BOTONES */
    .hero-actions {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 32px;
    }

    .hero-actions a {
        width: 100%;
        min-height: 58px;

        justify-content: center;
    }


    /* INDICADORES INFERIORES */
    .hero-features {
        margin-top: 70px;

        gap: 12px;
    }

    .hero-feature {
        min-width: 0;
    }

    .hero-feature i {
        font-size: 21px;
    }

    .hero-feature span {
        font-size: 7px;
        letter-spacing: .15em;
    }

}


/* =========================================================
   CELULARES MÁS PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .hero {
        padding-top: 65px;
        padding-bottom: 60px;
    }

    .hero h1 {
        font-size: clamp(42px, 12.5vw, 57px);
        line-height: .97;
    }

    .hero-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .hero-features {
        margin-top: 55px;
    }

    .hero-feature span {
        font-size: 6px;
    }

}

/* =========================================================
   HOME — VISIÓN / CAPACIDADES
   AJUSTE RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    /* SECCIÓN VISIÓN */
    .vision-section {
        min-height: auto;
        padding-top: 75px;
        padding-bottom: 85px;
    }

    /* TÍTULO */
    .vision-section h2 {
        max-width: 100%;

        font-size: clamp(42px, 10.5vw, 60px);
        line-height: 1.04;
        letter-spacing: -.045em;
    }

    /* SEGUNDA LÍNEA */
    .vision-section h2 span {
        display: block;
        margin-top: 7px;
    }

    /* DESCRIPCIÓN */
    .vision-section p {
        max-width: 100%;

        margin-top: 38px;

        font-size: 15px;
        line-height: 1.85;
    }

    /* ENLACE */
    .vision-section a {
        margin-top: 28px;
    }


    /* =====================================================
       CAPACIDADES / SERVICIOS HOME
    ====================================================== */

    .services-home {
        padding-top: 80px;
    }

    .services-home-header {
        margin-bottom: 50px;
    }

    .services-home h2 {
        max-width: 100%;

        font-size: clamp(43px, 10.5vw, 61px);
        line-height: 1.02;
        letter-spacing: -.045em;
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .vision-section {
        padding-top: 60px;
        padding-bottom: 70px;
    }

    .vision-section h2 {
        font-size: clamp(38px, 10.5vw, 50px);
    }

    .vision-section p {
        margin-top: 30px;

        font-size: 14px;
        line-height: 1.8;
    }

    .services-home {
        padding-top: 65px;
    }

    .services-home h2 {
        font-size: clamp(39px, 10.5vw, 52px);
    }

}

/* =========================================================
   HOME — NUESTRA VISIÓN
   CORRECCIÓN RESPONSIVE CON CLASES REALES
========================================================= */

@media (max-width: 700px) {

    /* Quitar altura excesiva de la sección */
    .intro-section {
        min-height: auto !important;
        height: auto !important;

        padding-top: 75px !important;
        padding-bottom: 75px !important;
    }


    /* Etiqueta 01 / NUESTRA VISIÓN */
    .intro-section .section-label {
        margin-bottom: 42px;
    }


    /* Grid principal */
    .intro-grid {
        display: grid;
        grid-template-columns: 1fr;

        gap: 38px;

        min-height: 0 !important;
        height: auto !important;

        align-items: start;
    }


    /* TÍTULO */
    .intro-grid h2 {
        max-width: 100%;

        margin: 0;

        font-size: clamp(40px, 10vw, 56px);
        line-height: 1.05;
        letter-spacing: -.045em;
    }


    .intro-grid h2 span {
        display: block;

        margin-top: 8px;
    }


    /* TEXTO DERECHO */
    .intro-copy {
        min-height: 0 !important;
        height: auto !important;

        padding: 0 !important;
        margin: 0 !important;
    }


    .intro-copy p {
        max-width: 100%;

        margin: 0;

        font-size: 15px;
        line-height: 1.8;
    }


    /* ENLACE */
    .intro-copy .text-link {
        display: inline-flex;
        align-items: center;
        gap: 12px;

        margin-top: 28px;
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .intro-section {
        padding-top: 60px !important;
        padding-bottom: 65px !important;
    }

    .intro-section .section-label {
        margin-bottom: 35px;
    }

    .intro-grid {
        gap: 32px;
    }

    .intro-grid h2 {
        font-size: clamp(37px, 10.5vw, 48px);
        line-height: 1.04;
    }

    .intro-copy p {
        font-size: 14px;
        line-height: 1.75;
    }

}

/* =========================================================
   PROJECT DETAIL — SIVAR SOLAR
   HERO
========================================================= */

.project-detail-page {
    position: relative;
    overflow: hidden;
}

.project-detail-hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    padding: 150px 0 100px;

    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(0, 157, 255, .12),
            transparent 32%
        ),
        radial-gradient(
            circle at 20% 70%,
            rgba(0, 215, 255, .05),
            transparent 30%
        );
}


/* GRID TECNOLÓGICO DE FONDO */

.project-detail-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .16;

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

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 95%
        );
}


.project-detail-hero .container {
    position: relative;
    z-index: 2;
}


/* ETIQUETA */

.project-detail-hero .section-label {
    margin-bottom: 35px;
}


/* SIVAR-SOLAR */

.project-detail-hero h1 {
    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(58px, 8vw, 108px);

    font-weight: 600;

    line-height: .9;

    letter-spacing: -5px;

    background:
        linear-gradient(
            90deg,
            #f3fbff,
            #6ddcff,
            #168fff
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}


/* NOMBRE COMPLETO */

.project-detail-hero h2 {
    max-width: 780px;

    margin-top: 32px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(25px, 3vw, 42px);

    font-weight: 500;

    line-height: 1.15;

    letter-spacing: -1.5px;

    color: #8ba6be;
}


/* DESCRIPCIÓN */

.project-detail-hero > .container > p {
    max-width: 620px;

    margin-top: 27px;

    color: #738ca5;

    font-size: 14px;

    line-height: 1.9;
}


/* VOLVER */

.project-detail-hero .text-link {
    margin-top: 35px;
}


/* =========================================================
   SIVAR SOLAR — RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .project-detail-hero {
        min-height: auto;

        padding:
            125px 0 80px;
    }

    .project-detail-hero .section-label {
        margin-bottom: 28px;
    }

    .project-detail-hero h1 {
        font-size:
            clamp(48px, 15vw, 72px);

        line-height: .95;

        letter-spacing: -3px;
    }

    .project-detail-hero h2 {
        margin-top: 25px;

        font-size: 25px;

        line-height: 1.2;
    }

    .project-detail-hero > .container > p {
        margin-top: 22px;

        font-size: 13px;

        line-height: 1.8;
    }

    .project-detail-hero .text-link {
        margin-top: 30px;
    }

}

/* =========================================================
   SIVAR-SOLAR — ARQUITECTURA DEL SISTEMA
========================================================= */

.sivar-project-architecture {
    position: relative;
    padding: 120px 0 130px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}


/* LUZ AMBIENTAL */

.sivar-project-architecture::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(0, 174, 255, .08),
            transparent 68%
        );
}


/* =========================================================
   ENCABEZADO
========================================================= */

.sivar-architecture-header {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.sivar-architecture-header .section-label {
    margin-bottom: 30px;
}

.sivar-architecture-header h2 {
    max-width: 760px;
    margin: 0;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(40px, 5vw, 68px);

    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -3px;

    color: #eef8ff;
}

.sivar-architecture-header h2 span {
    color: #39cfff;
}

.sivar-architecture-header > p {
    max-width: 620px;
    margin-top: 28px;

    color: #7189a0;

    font-size: 14px;
    line-height: 1.9;
}


/* =========================================================
   FLUJO
========================================================= */

.sivar-flow {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        42px
        minmax(0, 1fr)
        42px
        minmax(0, 1fr)
        42px
        minmax(0, 1fr)
        42px
        minmax(0, 1fr)
        42px
        minmax(0, 1fr);

    align-items: stretch;

    margin-top: 75px;
}


/* =========================================================
   NODOS
========================================================= */

.sivar-flow-node {
    position: relative;

    min-height: 285px;

    padding: 28px 22px 25px;

    overflow: hidden;

    border:
        1px solid rgba(79, 174, 255, .14);

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 25, 47, .82),
            rgba(3, 13, 28, .62)
        );

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


/* LÍNEA SUPERIOR */

.sivar-flow-node::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #25cfff,
            transparent
        );
}


/* BRILLO INTERIOR */

.sivar-flow-node::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -65px;
    bottom: -65px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(0, 174, 255, .10),
            transparent 70%
        );
}


/* HOVER */

.sivar-flow-node:hover {
    transform: translateY(-7px);

    border-color:
        rgba(65, 201, 255, .35);

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


/* NÚMERO */

.sivar-node-number {
    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    color: #3bcfff;
}


/* ICONO */

.sivar-node-icon {
    width: 48px;
    height: 48px;

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

    margin-top: 30px;

    border:
        1px solid rgba(53, 196, 255, .22);

    border-radius: 4px;

    background:
        rgba(15, 104, 160, .08);

    color: #42d3ff;

    font-size: 21px;
}


/* TÍTULO */

.sivar-flow-node h3 {
    margin-top: 27px;

    font-size: 16px;

    font-weight: 500;

    color: #eaf7ff;
}


/* TEXTO */

.sivar-flow-node p {
    margin-top: 14px;

    color: #698299;

    font-size: 11px;

    line-height: 1.8;
}


/* =========================================================
   CONEXIONES
========================================================= */

.sivar-flow-line {
    position: relative;

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

    color: #279dcc;

    font-size: 12px;
}


/* LÍNEA */

.sivar-flow-line::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(29, 121, 171, .20),
            rgba(50, 205, 255, .65),
            rgba(29, 121, 171, .20)
        );
}


/* FLECHA */

.sivar-flow-line i {
    position: relative;
    z-index: 2;

    padding: 5px;

    background: #030b18;

    color: #37cfff;
}


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

@media (max-width: 1100px) {

    .sivar-flow {
        grid-template-columns:
            1fr 34px
            1fr 34px
            1fr;

        row-gap: 35px;
    }

    .sivar-flow-node {
        min-height: 260px;
    }

    /*
       A partir del cuarto nodo continuamos
       en una segunda fila.
    */

    .sivar-flow-line:nth-of-type(6) {
        display: none;
    }
}


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

@media (max-width: 700px) {

    .sivar-project-architecture {
        padding: 85px 0 90px;
    }

    .sivar-architecture-header h2 {
        font-size: 40px;
        line-height: 1.05;
        letter-spacing: -2px;
    }

    .sivar-architecture-header > p {
        margin-top: 23px;
        font-size: 13px;
    }

    .sivar-flow {
        display: flex;
        flex-direction: column;

        margin-top: 55px;
    }

    .sivar-flow-node {
        width: 100%;
        min-height: auto;

        padding: 28px 26px 30px;
    }

    .sivar-node-icon {
        margin-top: 24px;
    }

    .sivar-flow-node h3 {
        margin-top: 22px;
        font-size: 18px;
    }

    .sivar-flow-node p {
        max-width: 320px;

        margin-top: 12px;

        font-size: 12px;
    }


    /* CONECTOR VERTICAL */

    .sivar-flow-line {
        width: 100%;
        height: 50px;

        transform: rotate(90deg);
    }

}

/* =========================================================
   SIVAR-SOLAR — 03 EL PROYECTO
========================================================= */

.sivar-project-overview {
    position: relative;
    scroll-margin-top: 100px;
    padding: 125px 0 135px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .05);

    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(0, 163, 255, .07),
            transparent 30%
        );
}


/* =========================================================
   ENCABEZADO
========================================================= */

.sivar-overview-header {
    position: relative;
    z-index: 2;
    max-width: 950px;
}

.sivar-overview-header .section-label {
    margin-bottom: 30px;
}

.sivar-overview-header h2 {
    max-width: 900px;
    margin: 0;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(42px, 5vw, 68px);

    font-weight: 500;
    line-height: 1.03;
    letter-spacing: -3px;

    color: #eef8ff;
}

.sivar-overview-header h2 span {
    display: block;
    color: #39cfff;
}


/* =========================================================
   GRID PRINCIPAL
========================================================= */

.sivar-overview-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(430px, 1.1fr);

    gap: 90px;

    align-items: center;

    margin-top: 80px;
}


/* =========================================================
   COLUMNA IZQUIERDA
========================================================= */

.sivar-overview-content {
    position: relative;
}

.sivar-overview-block {
    display: grid;
    grid-template-columns: 55px 1fr;

    gap: 25px;

    padding: 35px 0;

    border-top:
        1px solid rgba(91, 169, 226, .12);
}

.sivar-overview-block:last-child {
    border-bottom:
        1px solid rgba(91, 169, 226, .12);
}


/* NÚMERO */

.sivar-overview-number {
    padding-top: 4px;

    color: #35cfff;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;
}


/* ETIQUETA */

.sivar-overview-label {
    display: block;

    margin-bottom: 15px;

    color: #35cfff;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2.5px;
}


/* TÍTULO */

.sivar-overview-info h3 {
    max-width: 430px;

    margin: 0;

    color: #eaf7ff;

    font-size: 24px;
    font-weight: 500;

    line-height: 1.2;

    letter-spacing: -.7px;
}


/* TEXTO */

.sivar-overview-info p {
    max-width: 500px;

    margin-top: 18px;

    color: #7089a1;

    font-size: 12px;

    line-height: 1.9;
}


/* =========================================================
   VISUAL TECNOLÓGICO
========================================================= */

.sivar-overview-visual {
    position: relative;

    min-height: 520px;

    overflow: hidden;

    border:
        1px solid rgba(60, 176, 255, .15);

    border-radius: 6px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 29, 54, .78),
            rgba(3, 13, 28, .72)
        );

    box-shadow:
        inset 0 0 80px rgba(0, 137, 255, .025);
}


/* CUADRÍCULA */

.sivar-visual-grid {
    position: absolute;
    inset: 0;

    opacity: .14;

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

    background-size: 42px 42px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 85%
        );
}


/* ESTADO SUPERIOR */

.sivar-visual-status {
    position: absolute;

    top: 25px;
    left: 27px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #7996ad;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2px;
}

.status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #39d6ff;

    box-shadow:
        0 0 12px rgba(57, 214, 255, .75);
}


/* =========================================================
   NÚCLEO CENTRAL
========================================================= */

.sivar-visual-core {
    position: absolute;

    width: 250px;
    height: 250px;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);
}

.sivar-core-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}


/* ANILLO EXTERIOR */

.ring-01 {
    width: 240px;
    height: 240px;

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


/* ANILLO MEDIO */

.ring-02 {
    width: 175px;
    height: 175px;

    border:
        1px dashed rgba(56, 196, 255, .22);

    animation:
        sivarRingRotate 25s
        linear infinite;
}


/* ANILLO INTERIOR */

.ring-03 {
    width: 115px;
    height: 115px;

    border:
        1px solid rgba(56, 196, 255, .22);

    box-shadow:
        0 0 35px
        rgba(0, 174, 255, .06);
}


/* CENTRO */

.sivar-core-center {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 74px;
    height: 74px;

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

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(65, 209, 255, .38);

    border-radius: 50%;

    color: #47d8ff;

    font-size: 27px;

    background:
        rgba(5, 40, 67, .78);

    box-shadow:
        0 0 45px
        rgba(0, 178, 255, .12);
}


@keyframes sivarRingRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


/* =========================================================
   INDICADORES
========================================================= */

.sivar-visual-data {
    position: absolute;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 11px 13px;

    min-width: 135px;

    border:
        1px solid rgba(58, 188, 255, .14);

    background:
        rgba(3, 18, 35, .80);

    backdrop-filter: blur(5px);
}

.sivar-visual-data i {
    color: #3bd4ff;
    font-size: 16px;
}

.sivar-visual-data div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.sivar-visual-data span {
    color: #526d84;

    font-size: 6px;

    letter-spacing: 1.5px;
}

.sivar-visual-data strong {
    color: #b9d1e2;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1px;
}


/* POSICIONES */

.data-energy {
    top: 115px;
    left: 30px;
}

.data-network {
    top: 115px;
    right: 30px;
}

.data-monitor {
    bottom: 90px;
    right: 38px;
}


/* =========================================================
   IDENTIFICADOR INFERIOR
========================================================= */

.sivar-visual-id {
    position: absolute;

    left: 28px;
    bottom: 25px;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.sivar-visual-id span {
    color: #456077;

    font-size: 6px;

    letter-spacing: 2px;
}

.sivar-visual-id strong {
    color: #7c9ab1;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 1.5px;
}


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

@media (max-width: 1000px) {

    .sivar-overview-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .sivar-overview-visual {
        min-height: 500px;
    }

}


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

@media (max-width: 700px) {

    .sivar-project-overview {
        padding: 85px 0 90px;
    }

    .sivar-overview-header h2 {
        font-size: 39px;

        line-height: 1.06;

        letter-spacing: -2px;
    }

    .sivar-overview-grid {
        margin-top: 55px;

        gap: 50px;
    }

    .sivar-overview-block {
        grid-template-columns: 38px 1fr;

        gap: 15px;

        padding: 30px 0;
    }

    .sivar-overview-info h3 {
        font-size: 21px;
    }

    .sivar-overview-info p {
        font-size: 12px;
    }

    .sivar-overview-visual {
        min-height: 430px;
    }

    .sivar-visual-core {
        width: 190px;
        height: 190px;
    }

    .ring-01 {
        width: 185px;
        height: 185px;
    }

    .ring-02 {
        width: 140px;
        height: 140px;
    }

    .ring-03 {
        width: 95px;
        height: 95px;
    }

    .sivar-core-center {
        width: 62px;
        height: 62px;

        font-size: 23px;
    }

    .sivar-visual-data {
        min-width: auto;

        padding: 9px 10px;
    }

    .data-energy {
        top: 80px;
        left: 15px;
    }

    .data-network {
        top: 80px;
        right: 15px;
    }

    .data-monitor {
        right: 15px;
        bottom: 65px;
    }

}

/* =========================================================
   SIVAR-SOLAR — 04 COMPONENTES DEL SISTEMA
========================================================= */

.sivar-project-components {
    position: relative;
    padding: 125px 0 135px;
    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 15% 45%,
            rgba(0, 160, 255, .06),
            transparent 30%
        );
}


/* =========================================================
   ENCABEZADO
========================================================= */

.sivar-components-header {
    position: relative;
    z-index: 2;

    max-width: 850px;
}

.sivar-components-header .section-label {
    margin-bottom: 30px;
}

.sivar-components-header h2 {
    max-width: 800px;
    margin: 0;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(42px, 5vw, 68px);

    font-weight: 500;
    line-height: 1.03;

    letter-spacing: -3px;

    color: #eef8ff;
}

.sivar-components-header h2 span {
    color: #39cfff;
}

.sivar-components-header > p {
    max-width: 600px;

    margin-top: 27px;

    color: #7089a1;

    font-size: 13px;
    line-height: 1.9;
}


/* =========================================================
   GRID DE COMPONENTES
========================================================= */

.sivar-components-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    margin-top: 75px;

    border-top:
        1px solid rgba(67, 171, 238, .12);

    border-left:
        1px solid rgba(67, 171, 238, .12);
}


/* =========================================================
   TARJETA
========================================================= */

.sivar-component-card {
    position: relative;

    min-height: 390px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 30px 30px 34px;

    overflow: hidden;

    border-right:
        1px solid rgba(67, 171, 238, .12);

    border-bottom:
        1px solid rgba(67, 171, 238, .12);

    background:
        linear-gradient(
            145deg,
            rgba(8, 27, 49, .56),
            rgba(3, 14, 29, .36)
        );

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease;
}


/* BRILLO INFERIOR */

.sivar-component-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -110px;
    bottom: -110px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(0, 184, 255, .10),
            transparent 70%
        );

    opacity: 0;

    transition: opacity .35s ease;
}


/* LÍNEA SUPERIOR ACTIVA */

.sivar-component-card::after {
    content: "";

    position: absolute;

    top: -1px;
    left: 0;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #34d2ff,
            transparent
        );

    transition:
        width .4s ease;
}


.sivar-component-card:hover {
    transform: translateY(-6px);

    background:
        linear-gradient(
            145deg,
            rgba(9, 37, 66, .72),
            rgba(3, 17, 34, .55)
        );

    border-color:
        rgba(59, 199, 255, .24);
}

.sivar-component-card:hover::before {
    opacity: 1;
}

.sivar-component-card:hover::after {
    width: 65%;
}


/* =========================================================
   PARTE SUPERIOR
========================================================= */

.sivar-component-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.sivar-component-top > span {
    color: #36d1ff;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2px;
}

.sivar-component-top i {
    width: 52px;
    height: 52px;

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

    border:
        1px solid rgba(57, 196, 255, .18);

    border-radius: 4px;

    background:
        rgba(6, 45, 72, .25);

    color: #3bd5ff;

    font-size: 21px;
}


/* =========================================================
   CONTENIDO
========================================================= */

.sivar-component-content {
    position: relative;
    z-index: 2;

    margin-top: 80px;
}

.sivar-component-type {
    display: block;

    margin-bottom: 15px;

    color: #35cfff;

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 2.2px;
}

.sivar-component-content h3 {
    margin: 0;

    color: #eaf7ff;

    font-size: 22px;
    font-weight: 500;

    line-height: 1.2;

    letter-spacing: -.5px;
}

.sivar-component-content p {
    max-width: 260px;

    margin-top: 17px;

    color: #6f879e;

    font-size: 11px;

    line-height: 1.9;
}


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

@media (max-width: 1000px) {

    .sivar-components-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sivar-component-card {
        min-height: 340px;
    }

}


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

@media (max-width: 700px) {

    .sivar-project-components {
        padding: 85px 0 90px;
    }

    .sivar-components-header h2 {
        font-size: 39px;

        line-height: 1.06;

        letter-spacing: -2px;
    }

    .sivar-components-header > p {
        font-size: 12px;
    }

    .sivar-components-grid {
        grid-template-columns: 1fr;

        margin-top: 55px;
    }

    .sivar-component-card {
        min-height: auto;

        padding: 27px 25px 30px;
    }

    .sivar-component-content {
        margin-top: 55px;
    }

    .sivar-component-content h3 {
        font-size: 21px;
    }

    .sivar-component-content p {
        max-width: 100%;

        font-size: 12px;
    }

}


/* =========================================================
   SIVAR-SOLAR — 05 MONITOREO Y ALERTAS
========================================================= */

.sivar-project-monitoring {
    position: relative;
    padding: 125px 0 130px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.05);
    background:
        radial-gradient(circle at 70% 45%,
        rgba(0,150,255,.07), transparent 45%);
}

.sivar-monitoring-header {
    max-width: 880px;
    position: relative;
    z-index: 2;
}

.sivar-monitoring-header .section-label {
    margin-bottom: 30px;
}

.sivar-monitoring-header h2 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(42px,5vw,68px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -3px;
    color: #eef8ff;
}

.sivar-monitoring-header h2 span {
    display: block;
    color: #39cfff;
}

.sivar-monitoring-header > p {
    max-width: 620px;
    margin-top: 26px;
    font-size: 13px;
    line-height: 1.9;
    color: #7891a8;
}

/* DISTRIBUCIÓN PRINCIPAL */

.sivar-monitoring-layout {
    display: grid;
    grid-template-columns:
        minmax(0,1.65fr) minmax(300px,.85fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 75px;
}

/* DASHBOARD */

.sivar-monitoring-dashboard {
    min-width: 0;
    padding: 30px;
    border: 1px solid rgba(64,174,255,.17);
    border-radius: 6px;
    background:
        linear-gradient(145deg,
        rgba(9,31,56,.88),
        rgba(3,13,28,.90));
    box-shadow: 0 25px 65px rgba(0,0,0,.12);
}

.sivar-dashboard-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(85,165,225,.12);
}

.sivar-dashboard-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sivar-dashboard-brand > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(57,204,255,.25);
    border-radius: 5px;
    background: rgba(0,153,255,.08);
    color: #3bd4ff;
    font-size: 20px;
}

.sivar-dashboard-brand > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sivar-dashboard-brand strong {
    color: #eaf8ff;
    font-size: 13px;
    letter-spacing: 1px;
}

.sivar-dashboard-brand span {
    color: #67849b;
    font-size: 8px;
    letter-spacing: 1.8px;
}

.sivar-demo-tag {
    padding: 9px 12px;
    border: 1px solid rgba(57,204,255,.18);
    color: #44cfff;
    font-size: 8px;
    letter-spacing: 1.2px;
    white-space: nowrap;
}

/* INDICADORES */

.sivar-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-top: 28px;
}

.sivar-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 155px;
    padding: 18px 15px;
    border: 1px solid rgba(73,168,239,.12);
    border-radius: 4px;
    background: rgba(3,19,37,.55);
}

.sivar-stat-card > i {
    margin-bottom: 22px;
    color: #3ed4ff;
    font-size: 21px;
}

.sivar-stat-card > span {
    color: #5b829d;
    font-size: 8px;
    letter-spacing: 1.5px;
}

.sivar-stat-card strong {
    margin-top: 9px;
    color: #e5f5ff;
    font-size: 13px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.sivar-stat-card small {
    margin-top: 7px;
    color: #69869b;
    font-size: 10px;
    line-height: 1.5;
}

/* PANEL DE CÁMARA */

.sivar-camera-panel {
    margin-top: 22px;
    padding: 25px;
    border: 1px solid rgba(73,168,239,.13);
    border-radius: 4px;
    background: rgba(3,18,35,.45);
}

.sivar-camera-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.sivar-camera-panel-header > div > span {
    color: #5c839c;
    font-size: 8px;
    letter-spacing: 2px;
}

.sivar-camera-panel-header h3 {
    margin-top: 9px;
    color: #eaf7ff;
    font-size: 24px;
    font-weight: 500;
}

.sivar-camera-status {
    padding: 8px 10px;
    border: 1px solid rgba(62,205,255,.18);
    color: #40cfff;
    font-size: 8px;
    letter-spacing: 1px;
    text-align: center;
}

.sivar-camera-data {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 15px;
    margin-top: 28px;
    padding-top: 23px;
    border-top: 1px solid rgba(85,165,225,.12);
}

.sivar-camera-data > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sivar-camera-data span {
    color: #69869c;
    font-size: 10px;
}

.sivar-camera-data strong {
    color: #d9efff;
    font-size: 12px;
    font-weight: 500;
}

/* PANEL LATERAL DE ALERTAS */

.sivar-monitoring-alerts {
    min-width: 0;
    padding: 30px;
    border: 1px solid rgba(64,174,255,.17);
    border-radius: 6px;
    background:
        linear-gradient(160deg,
        rgba(8,28,52,.88),
        rgba(3,13,28,.90));
}

.sivar-alerts-heading > span {
    color: #3acfff;
    font-size: 9px;
    letter-spacing: 2px;
}

.sivar-alerts-heading h3 {
    margin-top: 17px;
    color: #edf8ff;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -.7px;
}

.sivar-alerts-heading p {
    margin-top: 13px;
    color: #7891a8;
    font-size: 12px;
    line-height: 1.8;
}

/* NIVELES DE ALERTA */

.sivar-alert-levels {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 35px;
}

.sivar-alert-level {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(90,160,210,.12);
    border-radius: 4px;
    background: rgba(3,17,33,.52);
}

.sivar-level-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.sivar-alert-level > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sivar-alert-level strong {
    font-size: 10px;
    letter-spacing: 1.4px;
}

.sivar-alert-level small {
    color: #7d94a7;
    font-size: 10px;
}

/* COLORES DE PRIORIDAD */

.level-green .sivar-level-dot {
    background: #2cdd98;
    box-shadow: 0 0 12px rgba(44,221,152,.35);
}
.level-green strong { color: #2cdd98; }

.level-yellow .sivar-level-dot {
    background: #f4d35e;
    box-shadow: 0 0 12px rgba(244,211,94,.35);
}
.level-yellow strong { color: #f4d35e; }

.level-orange .sivar-level-dot {
    background: #ff9c4b;
    box-shadow: 0 0 12px rgba(255,156,75,.35);
}
.level-orange strong { color: #ff9c4b; }

.level-red .sivar-level-dot {
    background: #ff5e72;
    box-shadow: 0 0 12px rgba(255,94,114,.35);
}
.level-red strong { color: #ff5e72; }

/* VARIABLES */

.sivar-alert-types {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(85,165,225,.12);
}

.sivar-alert-types > span {
    color: #3bcfff;
    font-size: 8px;
    letter-spacing: 1.5px;
}

.sivar-alert-types p {
    margin-top: 12px;
    color: #8299ad;
    font-size: 11px;
    line-height: 1.8;
}

.sivar-monitoring-note {
    margin-top: 20px;
    color: #627d94;
    font-size: 11px;
    line-height: 1.7;
}

/* TABLET */

@media (max-width: 1100px) {
    .sivar-monitoring-layout {
        grid-template-columns: 1fr;
    }
}

/* MÓVIL */

@media (max-width: 700px) {
    .sivar-project-monitoring {
        padding: 85px 0 90px;
    }

    .sivar-monitoring-header h2 {
        font-size: 39px;
        line-height: 1.08;
        letter-spacing: -2px;
    }

    .sivar-monitoring-header > p {
        font-size: 12px;
    }

    .sivar-monitoring-layout {
        margin-top: 50px;
        gap: 18px;
    }

    .sivar-monitoring-dashboard,
    .sivar-monitoring-alerts {
        padding: 20px;
    }

    .sivar-dashboard-top {
        flex-wrap: wrap;
    }

    .sivar-dashboard-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .sivar-stat-card {
        min-height: 145px;
    }

    .sivar-camera-panel {
        padding: 18px;
    }

    .sivar-camera-panel-header {
        flex-wrap: wrap;
    }

    .sivar-camera-data {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sivar-alerts-heading h3 {
        font-size: 25px;
    }
}

@media (max-width: 380px) {
    .sivar-dashboard-stats {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   SIVAR-SOLAR — 06 GALERÍA DEL PROYECTO
========================================================= */

.sivar-project-gallery {
    position: relative;
    padding: 125px 0 135px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.05);

    background:
        radial-gradient(
            circle at 50% 60%,
            rgba(0,153,255,.07),
            transparent 50%
        );
}

/* ENCABEZADO */

.sivar-gallery-header {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.sivar-gallery-header .section-label {
    margin-bottom: 30px;
}

.sivar-gallery-header h2 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(42px,5vw,68px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -3px;
    color: #eef8ff;
}

.sivar-gallery-header h2 span {
    color: #39cfff;
}

.sivar-gallery-header > p {
    max-width: 620px;
    margin-top: 27px;
    color: #7891a8;
    font-size: 13px;
    line-height: 1.9;
}

/* DISTRIBUCIÓN */

.sivar-gallery-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0,1.25fr)
        minmax(0,1fr);

    grid-template-rows: repeat(2,260px);
    gap: 20px;

    margin-top: 75px;
}

/* IMAGEN PRINCIPAL */

.sivar-gallery-featured {
    grid-row: span 2;
}

/* TARJETAS */

.sivar-gallery-item {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;

    border: 1px solid rgba(65,175,255,.17);
    border-radius: 6px;

    background: #06182c;
}

/* IMÁGENES */

.sivar-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center;

    transition:
        transform .7s ease,
        filter .7s ease;
}

.sivar-gallery-item:hover img {
    transform: scale(1.055);
    filter: brightness(1.08);
}

/* OSCURECIMIENTO INFERIOR */

.sivar-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(1,9,22,.96) 0%,
            rgba(1,9,22,.65) 25%,
            transparent 65%
        );
}

/* INFORMACIÓN */

.sivar-gallery-item figcaption {
    position: absolute;
    z-index: 2;

    left: 30px;
    right: 30px;
    bottom: 28px;
}

.sivar-gallery-item figcaption > span {
    display: block;
    margin-bottom: 12px;

    color: #48d5ff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sivar-gallery-item figcaption h3 {
    margin: 0;

    color: #f0faff;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.6px;
}

.sivar-gallery-item figcaption p {
    margin-top: 10px;

    color: #a0b8c9;
    font-size: 11px;
    line-height: 1.7;
}

/* BORDE LUMINOSO AL PASAR EL CURSOR */

.sivar-gallery-item::before {
    content: "";
    position: absolute;
    z-index: 3;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #2acaff,
            transparent
        );

    transition: width .5s ease;
}

.sivar-gallery-item:hover::before {
    width: 65%;
}

/* TABLET */

@media (max-width: 1000px) {

    .sivar-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 350px 260px;
    }

    .sivar-gallery-featured {
        grid-column: span 2;
        grid-row: span 1;
    }
}

/* MÓVIL */

@media (max-width: 700px) {

    .sivar-project-gallery {
        padding: 85px 0 90px;
    }

    .sivar-gallery-header h2 {
        font-size: 39px;
        line-height: 1.08;
        letter-spacing: -2px;
    }

    .sivar-gallery-header > p {
        font-size: 12px;
    }

    .sivar-gallery-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 16px;
        margin-top: 55px;
    }

    .sivar-gallery-item,
    .sivar-gallery-featured {
        grid-column: auto;
        grid-row: auto;
        height: 270px;
    }

    .sivar-gallery-featured {
        height: 340px;
    }

    .sivar-gallery-item figcaption {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .sivar-gallery-item figcaption h3 {
        font-size: 21px;
    }

    .sivar-gallery-item figcaption p {
        font-size: 11px;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
    .sivar-gallery-item img,
    .sivar-gallery-item::before {
        transition: none;
    }
}


/* =========================================================
   SIVAR-SOLAR — 07 RESULTADOS E IMPACTO
========================================================= */

.sivar-project-impact {
    position: relative;
    padding: 125px 0 130px;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 85% 20%,
            rgba(0, 174, 255, 0.075),
            transparent 45%
        ),
        radial-gradient(
            ellipse at 10% 90%,
            rgba(0, 94, 180, 0.06),
            transparent 45%
        );
}

/* ENCABEZADO */

.sivar-impact-header {
    max-width: 850px;
    margin-bottom: 65px;
}

.sivar-impact-header .section-label {
    margin-bottom: 30px;
}

.sivar-impact-header h2 {
    margin: 0;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(40px, 4.8vw, 66px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -2.8px;
}

.sivar-impact-header h2 span {
    display: block;
    color: #39cfff;
}

.sivar-impact-header > p {
    max-width: 640px;
    margin-top: 28px;
    color: #849db3;
    font-size: 13px;
    line-height: 1.9;
}

/* CUADRÍCULA */

.sivar-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* TARJETAS */

.sivar-impact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 345px;
    padding: 32px 25px 28px;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(11, 38, 65, 0.85),
            rgba(4, 17, 34, 0.95)
        );

    border: 1px solid rgba(70, 175, 255, 0.13);
    border-radius: 7px;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.sivar-impact-card:hover {
    transform: translateY(-7px);
    border-color: rgba(57, 207, 255, 0.45);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

/* LÍNEA SUPERIOR */

.sivar-impact-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        #39cfff,
        transparent
    );
    transition: width 0.4s ease;
}

.sivar-impact-card:hover::before {
    width: 100%;
}

/* NÚMERO */

.sivar-impact-number {
    position: absolute;
    top: 24px;
    right: 25px;
    color: rgba(111, 165, 205, 0.35);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}

/* ÍCONOS */

.sivar-impact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 42px;

    color: #39cfff;
    font-size: 25px;

    border: 1px solid rgba(57, 207, 255, 0.2);
    border-radius: 10px;
    background: rgba(57, 207, 255, 0.065);
}

/* TÍTULOS */

.sivar-impact-card h3 {
    margin: 0 0 15px;
    color: #eaf6ff;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

/* DESCRIPCIÓN */

.sivar-impact-card p {
    margin: 0 0 28px;
    color: #88a0b6;
    font-size: 12px;
    line-height: 1.85;
}

/* ETIQUETAS */

.sivar-impact-tag {
    display: inline-flex;
    align-self: flex-start;
    margin-top: auto;
    padding: 9px 11px;

    color: #55c8ed;
    background: rgba(57, 207, 255, 0.055);
    border: 1px solid rgba(57, 207, 255, 0.14);
    border-radius: 3px;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.1px;
}

/* NOTA FINAL */

.sivar-impact-footer {
    margin-top: 55px;
}

.sivar-impact-footer-line {
    width: 100%;
    height: 1px;
    margin-bottom: 24px;
    background: linear-gradient(
        90deg,
        rgba(57, 207, 255, 0.35),
        rgba(57, 207, 255, 0.04),
        transparent
    );
}

.sivar-impact-footer p {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 850px;
    margin: 0;

    color: #7b93aa;
    font-size: 11px;
    line-height: 1.85;
}

.sivar-impact-footer p i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #39cfff;
    font-size: 15px;
}

/* TABLET */

@media (max-width: 1100px) {
    .sivar-impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sivar-impact-card {
        min-height: 310px;
    }
}

/* MÓVIL */

@media (max-width: 700px) {
    .sivar-project-impact {
        padding: 85px 0 95px;
    }

    .sivar-impact-header {
        margin-bottom: 45px;
    }

    .sivar-impact-header h2 {
        font-size: 38px;
        line-height: 1.12;
        letter-spacing: -1.8px;
    }

    .sivar-impact-header > p {
        font-size: 12px;
    }

    .sivar-impact-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .sivar-impact-card {
        min-height: 285px;
        padding: 28px 25px;
    }

    .sivar-impact-icon {
        margin-bottom: 32px;
    }

    .sivar-impact-footer {
        margin-top: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sivar-impact-card,
    .sivar-impact-card::before {
        transition: none;
    }

    .sivar-impact-card:hover {
        transform: none;
    }
}


/* =========================================================
   SIVAR-SOLAR — 08 EVOLUCIÓN TECNOLÓGICA
========================================================= */

.sivar-project-future {
    position: relative;
    padding: 125px 0 135px;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.04);

    background:
        radial-gradient(
            ellipse at 85% 15%,
            rgba(0,155,255,.07),
            transparent 45%
        ),
        radial-gradient(
            ellipse at 10% 85%,
            rgba(0,95,190,.06),
            transparent 45%
        );
}

/* ENCABEZADO */

.sivar-future-header {
    max-width: 850px;
    margin-bottom: 75px;
}

.sivar-future-header .section-label {
    margin-bottom: 30px;
}

.sivar-future-header h2 {
    margin: 0;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(40px, 4.8vw, 66px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -2.8px;
}

.sivar-future-header h2 span {
    display: block;
    color: #39cfff;
}

.sivar-future-header > p {
    max-width: 650px;
    margin-top: 28px;
    color: #849db3;
    font-size: 13px;
    line-height: 1.9;
}

/* LÍNEA DE TIEMPO */

.sivar-future-roadmap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-left: 70px;
}

/* LÍNEA VERTICAL */

.sivar-future-roadmap::before {
    content: "";
    position: absolute;
    top: 34px;
    bottom: 34px;
    left: 24px;
    width: 1px;

    background: linear-gradient(
        to bottom,
        rgba(57,207,255,.75),
        rgba(57,207,255,.25),
        rgba(57,207,255,.06)
    );
}

/* ETAPAS */

.sivar-future-step {
    position: relative;
    min-width: 0;
}

/* MARCADOR NUMÉRICO */

.sivar-future-marker {
    position: absolute;
    top: 33px;
    left: -70px;
    z-index: 2;

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

    width: 49px;
    height: 49px;

    border: 1px solid rgba(57,207,255,.4);
    border-radius: 50%;
    background: #071c32;

    box-shadow: 0 0 22px rgba(57,207,255,.08);
}

.sivar-future-marker span {
    color: #39cfff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* TARJETA */

.sivar-future-content {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    min-height: 170px;
    padding: 32px 34px;

    border: 1px solid rgba(70,175,255,.13);
    border-radius: 7px;

    background: linear-gradient(
        125deg,
        rgba(11,39,67,.8),
        rgba(4,17,34,.95)
    );

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

.sivar-future-content:hover {
    transform: translateX(7px);
    border-color: rgba(57,207,255,.42);
    box-shadow: 0 18px 45px rgba(0,0,0,.14);
}

/* CONECTOR HORIZONTAL */

.sivar-future-step::before {
    content: "";
    position: absolute;
    top: 57px;
    left: -21px;
    width: 21px;
    height: 1px;
    background: rgba(57,207,255,.3);
}

/* ÍCONO */

.sivar-future-icon {
    flex-shrink: 0;

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

    width: 57px;
    height: 57px;

    color: #39cfff;
    font-size: 25px;

    background: rgba(57,207,255,.065);
    border: 1px solid rgba(57,207,255,.18);
    border-radius: 10px;
}

/* INFORMACIÓN */

.sivar-future-information {
    flex: 1;
    min-width: 0;
}

.sivar-future-category {
    display: block;
    margin-bottom: 12px;

    color: #39cfff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sivar-future-information h3 {
    margin: 0 0 13px;

    color: #edf8ff;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.6px;
}

.sivar-future-information p {
    max-width: 700px;
    margin: 0;

    color: #89a1b7;
    font-size: 12px;
    line-height: 1.9;
}

/* ESTADO */

.sivar-future-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: auto;
    padding: 9px 12px;

    color: #79cde8;
    background: rgba(57,207,255,.055);
    border: 1px solid rgba(57,207,255,.15);
    border-radius: 3px;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.1px;
}

/* MENSAJE FINAL */

.sivar-future-bottom {
    display: flex;
    align-items: flex-start;
    gap: 25px;

    margin-top: 65px;
    padding: 36px 38px;

    background: rgba(57,207,255,.035);
    border: 1px solid rgba(57,207,255,.15);
    border-radius: 7px;
}

.sivar-future-bottom-icon {
    flex-shrink: 0;

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

    width: 56px;
    height: 56px;

    color: #39cfff;
    font-size: 26px;

    border: 1px solid rgba(57,207,255,.2);
    border-radius: 10px;
    background: rgba(57,207,255,.07);
}

.sivar-future-bottom > div:last-child {
    min-width: 0;
}

.sivar-future-bottom > div:last-child > span {
    display: block;
    margin-bottom: 12px;

    color: #39cfff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sivar-future-bottom h3 {
    margin: 0 0 12px;

    color: #edf8ff;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.3;
}

.sivar-future-bottom p {
    max-width: 750px;
    margin: 0;

    color: #89a1b7;
    font-size: 12px;
    line-height: 1.85;
}

/* TABLET */

@media (max-width: 1000px) {

    .sivar-future-content {
        flex-wrap: wrap;
        gap: 22px;
    }

    .sivar-future-information {
        flex-basis: calc(100% - 90px);
    }

    .sivar-future-status {
        margin-left: 79px;
    }
}

/* MÓVIL */

@media (max-width: 700px) {

    .sivar-project-future {
        padding: 85px 0 95px;
    }

    .sivar-future-header {
        margin-bottom: 50px;
    }

    .sivar-future-header h2 {
        font-size: 38px;
        line-height: 1.12;
        letter-spacing: -1.8px;
    }

    .sivar-future-header > p {
        font-size: 12px;
    }

    .sivar-future-roadmap {
        padding-left: 45px;
        gap: 16px;
    }

    .sivar-future-roadmap::before {
        left: 17px;
    }

    .sivar-future-marker {
        left: -45px;
        top: 24px;
        width: 35px;
        height: 35px;
    }

    .sivar-future-marker span {
        font-size: 10px;
    }

    .sivar-future-step::before {
        left: -10px;
        top: 41px;
        width: 10px;
    }

    .sivar-future-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        min-height: 0;
        padding: 25px 22px;
    }

    .sivar-future-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .sivar-future-information {
        flex-basis: auto;
        width: 100%;
    }

    .sivar-future-information h3 {
        font-size: 20px;
    }

    .sivar-future-information p {
        font-size: 12px;
    }

    .sivar-future-status {
        margin: 0;
    }

    .sivar-future-bottom {
        flex-direction: column;
        gap: 22px;
        margin-top: 45px;
        padding: 28px 24px;
    }

    .sivar-future-bottom h3 {
        font-size: 21px;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {

    .sivar-future-content {
        transition: none;
    }

    .sivar-future-content:hover {
        transform: none;
    }
}


/* =========================================================
   SIVAR-SOLAR — 09 CONTACTO Y CIERRE
========================================================= */

.sivar-project-closing {
    position: relative;
    padding: 95px 0 125px;
    overflow: hidden;
    background: #040e1c;
}

.sivar-closing-wrapper {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 90px 75px 0;

    border: 1px solid rgba(57, 207, 255, .2);
    border-radius: 10px;

    background:
        radial-gradient(
            ellipse at 80% 15%,
            rgba(0, 157, 255, .16),
            transparent 50%
        ),
        linear-gradient(
            135deg,
            #0b2846 0%,
            #06182c 50%,
            #04101f 100%
        );
}

/* EFECTO LUMINOSO */

.sivar-closing-glow {
    position: absolute;
    z-index: -1;
    top: -220px;
    right: -180px;

    width: 600px;
    height: 600px;

    border-radius: 50%;
    background: rgba(0, 179, 255, .12);
    filter: blur(110px);
    pointer-events: none;
}

/* CONTENIDO */

.sivar-closing-content {
    position: relative;
    z-index: 1;
    max-width: 930px;
    padding-bottom: 85px;
}

/* IDENTIFICADOR */

.sivar-closing-label {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 36px;

    color: #75cfea;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
}

.sivar-closing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #39cfff;
    box-shadow: 0 0 15px rgba(57, 207, 255, .7);
}

/* TÍTULO */

.sivar-closing-content h2 {
    margin: 0;
    color: #f0f9ff;

    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(40px, 5.2vw, 72px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -3px;
}

.sivar-closing-content h2 span {
    display: block;
    color: #39cfff;
}

/* DESCRIPCIÓN */

.sivar-closing-content > p {
    max-width: 650px;
    margin: 32px 0 0;

    color: #9ab2c6;
    font-size: 13px;
    line-height: 2;
}

/* BOTONES */

.sivar-closing-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 45px;
}

.sivar-closing-btn-primary,
.sivar-closing-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    min-height: 54px;
    padding: 16px 24px;

    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

/* BOTÓN PRINCIPAL */

.sivar-closing-btn-primary {
    color: #031525;
    background: #39cfff;
    border: 1px solid #39cfff;
}

.sivar-closing-btn-primary:hover {
    color: #031525;
    background: #81e5ff;
    border-color: #81e5ff;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(57, 207, 255, .18);
}

/* BOTÓN SECUNDARIO */

.sivar-closing-btn-secondary {
    color: #d9efff;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(120, 190, 230, .25);
}

.sivar-closing-btn-secondary:hover {
    color: #fff;
    background: rgba(57, 207, 255, .08);
    border-color: rgba(57, 207, 255, .55);
    transform: translateY(-3px);
}

/* FRANJA INFERIOR */

.sivar-closing-footer {
    position: relative;
    z-index: 1;

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

    padding: 30px 0 35px;
    border-top: 1px solid rgba(120, 190, 230, .15);
}

/* MARCA */

.sivar-closing-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.sivar-closing-brand-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    color: #39cfff;
    font-size: 22px;
    font-weight: 700;

    border: 1px solid rgba(57, 207, 255, .3);
    border-radius: 7px;
    background: rgba(57, 207, 255, .07);
}

.sivar-closing-brand strong,
.sivar-closing-brand small {
    display: block;
}

.sivar-closing-brand strong {
    color: #edf8ff;
    font-size: 12px;
    letter-spacing: .8px;
}

.sivar-closing-brand small {
    margin-top: 5px;
    color: #7296af;
    font-size: 9px;
    letter-spacing: 1.5px;
}

/* NOMBRE DEL PROYECTO */

.sivar-closing-project-name {
    text-align: right;
}

.sivar-closing-project-name span,
.sivar-closing-project-name strong {
    display: block;
}

.sivar-closing-project-name span {
    margin-bottom: 7px;
    color: #7296af;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.sivar-closing-project-name strong {
    color: #39cfff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* TABLET */

@media (max-width: 1000px) {
    .sivar-closing-wrapper {
        padding: 70px 45px 0;
    }

    .sivar-closing-content {
        padding-bottom: 70px;
    }
}

/* MÓVIL */

@media (max-width: 700px) {
    .sivar-project-closing {
        padding: 65px 0 85px;
    }

    .sivar-closing-wrapper {
        padding: 55px 25px 0;
    }

    .sivar-closing-content {
        padding-bottom: 55px;
    }

    .sivar-closing-label {
        font-size: 9px;
        letter-spacing: 1.6px;
    }

    .sivar-closing-content h2 {
        font-size: clamp(34px, 8vw, 45px);
        letter-spacing: -1.6px;
    }

    .sivar-closing-content > p {
        font-size: 12px;
        line-height: 1.9;
    }

    .sivar-closing-actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: 35px;
    }

    .sivar-closing-btn-primary,
    .sivar-closing-btn-secondary {
        width: 100%;
        gap: 12px;
    }

    .sivar-closing-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

    .sivar-closing-project-name {
        text-align: left;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
    .sivar-closing-btn-primary,
    .sivar-closing-btn-secondary {
        transition: none;
    }

    .sivar-closing-btn-primary:hover,
    .sivar-closing-btn-secondary:hover {
        transform: none;
    }
}


/* =====================================================
   PROYECTOS — BOTÓN DE ACCESO A SIVAR-SOLAR
===================================================== */

.sivar-showcase-action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 35px;
    padding: 32px 38px;

    border: 1px solid rgba(57, 207, 255, .22);
    border-radius: 8px;

    background: linear-gradient(
        110deg,
        rgba(9, 43, 72, .9),
        rgba(4, 20, 38, .95)
    );

    overflow: hidden;
}

/* EFECTO LUMINOSO */

.sivar-showcase-action::before {
    content: "";
    position: absolute;
    top: -90px;
    right: 5%;
    width: 280px;
    height: 220px;
    background: rgba(57, 207, 255, .09);
    filter: blur(70px);
    pointer-events: none;
}

/* INFORMACIÓN */

.sivar-showcase-action-info {
    position: relative;
    z-index: 1;
    max-width: 550px;
}

.sivar-showcase-action-info > span {
    display: block;
    margin-bottom: 12px;

    color: #39cfff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sivar-showcase-action-info p {
    margin: 0;
    color: #94acc1;
    font-size: 12px;
    line-height: 1.9;
}

/* BOTÓN */

.sivar-showcase-action-btn {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    flex-shrink: 0;
    min-height: 56px;
    padding: 17px 25px;

    color: #041727;
    background: #39cfff;
    border: 1px solid #39cfff;
    border-radius: 4px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-decoration: none;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.sivar-showcase-action-btn i {
    font-size: 17px;
    transition: transform .3s ease;
}

/* INTERACCIÓN */

.sivar-showcase-action-btn:hover {
    color: #041727;
    background: #85e6ff;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(57, 207, 255, .2);
}

.sivar-showcase-action-btn:hover i {
    transform: translate(3px, -3px);
}

.sivar-showcase-action-btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}

/* TABLET */

@media (max-width: 900px) {

    .sivar-showcase-action {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }
}

/* MÓVIL */

@media (max-width: 600px) {

    .sivar-showcase-action {
        margin-top: 25px;
        padding: 27px 22px;
        gap: 23px;
    }

    .sivar-showcase-action-info p {
        font-size: 12px;
    }

    .sivar-showcase-action-btn {
        width: 100%;
        gap: 12px;
        padding: 16px 14px;
        font-size: 10px;
        text-align: center;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {

    .sivar-showcase-action-btn,
    .sivar-showcase-action-btn i {
        transition: none;
    }

    .sivar-showcase-action-btn:hover,
    .sivar-showcase-action-btn:hover i {
        transform: none;
    }
}


/* =========================================================
   SISAE — 01 PORTADA DEL PROYECTO
   ALVAS PERÚ SYSTEM
========================================================= */

.sisae-project-page {
    background: #040d1b;
    color: #eef8ff;
}

.sisae-project-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 780px;
    padding: 120px 0 95px;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 78% 35%,
            rgba(93, 69, 220, .15),
            transparent 43%
        ),
        radial-gradient(
            ellipse at 12% 72%,
            rgba(0, 195, 255, .09),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #071a30 0%,
            #040d1b 65%,
            #090f26 100%
        );
}

/* CUADRÍCULA TECNOLÓGICA */

.sisae-project-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

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

    background-size: 70px 70px;
    mask-image: linear-gradient(
        to right,
        transparent,
        black 40%,
        black
    );
    pointer-events: none;
}

/* LUZ DECORATIVA */

.sisae-project-hero::after {
    content: "";
    position: absolute;
    top: 14%;
    right: -170px;
    z-index: -1;

    width: 560px;
    height: 560px;
    border-radius: 50%;

    background: rgba(84, 77, 255, .12);
    filter: blur(110px);
    pointer-events: none;
}

/* CONTENIDO */

.sisae-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
}

/* ETIQUETA SUPERIOR */

.sisae-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 45px;

    color: #9fb8d2;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.2px;
}

.sisae-hero-indicator {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;

    background: #48dcff;
    box-shadow: 0 0 16px rgba(72, 220, 255, .65);
}

/* CÓDIGO */

.sisae-hero-code {
    margin-bottom: 16px;
    color: #7195b6;
    font-size: 10px;
    letter-spacing: 2.5px;
}

/* TÍTULO PRINCIPAL */

.sisae-hero-content h1 {
    margin: 0;

    color: #f3faff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(105px, 16vw, 230px);
    font-weight: 600;
    line-height: .95;
    letter-spacing: -12px;
}

.sisae-hero-content h1 span {
    color: #49d8ff;
    text-shadow: 0 0 75px rgba(73, 216, 255, .16);
}

/* LÍNEA */

.sisae-hero-line {
    width: 90px;
    height: 3px;
    margin: 38px 0 34px;

    background: linear-gradient(
        90deg,
        #48dcff,
        #8a70ff
    );
}

/* SUBTÍTULO */

.sisae-hero-content h2 {
    max-width: 850px;
    margin: 0;

    color: #edf7ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(30px, 4.2vw, 55px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -1.8px;
}

.sisae-hero-content h2 span {
    display: block;
    color: #9c8aff;
}

/* DESCRIPCIÓN */

.sisae-hero-content > p {
    max-width: 660px;
    margin: 30px 0 0;

    color: #92aac0;
    font-size: 13px;
    line-height: 2;
}

/* BOTONES */

.sisae-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 17px;
    margin-top: 42px;
}

.sisae-hero-primary,
.sisae-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    min-height: 55px;
    padding: 16px 24px;

    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-decoration: none;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.sisae-hero-primary {
    color: #041626;
    background: #49d8ff;
    border: 1px solid #49d8ff;
}

.sisae-hero-primary:hover {
    color: #041626;
    background: #8ce8ff;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(73, 216, 255, .2);
}

.sisae-hero-secondary {
    color: #d6e8f7;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(150,190,230,.22);
}

.sisae-hero-secondary:hover {
    color: #fff;
    border-color: #9c8aff;
    background: rgba(156,138,255,.08);
    transform: translateY(-3px);
}

/* METADATOS */

.sisae-hero-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 55px;
    margin-top: 80px;
    padding-top: 28px;
    border-top: 1px solid rgba(120,175,220,.13);
}

.sisae-hero-metadata > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sisae-hero-metadata span {
    color: #6e91ae;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sisae-hero-metadata strong {
    color: #dceeff;
    font-size: 12px;
    font-weight: 500;
}

/* TEXTO DECORATIVO */

.sisae-hero-background-text {
    position: absolute;
    right: -30px;
    bottom: 0;
    z-index: 0;

    color: rgba(140, 180, 255, .035);
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(170px, 27vw, 440px);
    font-weight: 700;
    line-height: .8;
    letter-spacing: -20px;

    pointer-events: none;
    user-select: none;
}

/* TABLET */

@media (max-width: 1000px) {

    .sisae-project-hero {
        min-height: 0;
        padding: 115px 0 90px;
    }

    .sisae-hero-content h1 {
        letter-spacing: -7px;
    }

    .sisae-hero-metadata {
        gap: 35px;
    }
}

/* CELULARES */

@media (max-width: 700px) {

    .sisae-project-hero {
        padding: 100px 0 70px;
    }

    .sisae-hero-eyebrow {
        margin-bottom: 40px;
        font-size: 9px;
        line-height: 1.7;
        letter-spacing: 1.2px;
    }

    .sisae-hero-code {
        font-size: 9px;
    }

    .sisae-hero-content h1 {
        font-size: clamp(76px, 20vw, 125px);
        letter-spacing: -5px;
    }

    .sisae-hero-line {
        margin: 28px 0;
    }

    .sisae-hero-content h2 {
        font-size: clamp(29px, 7vw, 40px);
        letter-spacing: -1px;
    }

    .sisae-hero-content > p {
        font-size: 12px;
        line-height: 1.9;
    }

    .sisae-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .sisae-hero-primary,
    .sisae-hero-secondary {
        width: 100%;
        padding: 15px;
        text-align: center;
    }

    .sisae-hero-metadata {
        margin-top: 55px;
        gap: 25px;
    }

    .sisae-hero-metadata > div {
        flex-basis: 100%;
    }

    .sisae-hero-background-text {
        right: -15px;
        bottom: 20px;
        font-size: 38vw;
        letter-spacing: -8px;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {

    .sisae-hero-primary,
    .sisae-hero-secondary {
        transition: none;
    }

    .sisae-hero-primary:hover,
    .sisae-hero-secondary:hover {
        transform: none;
    }
}


/* =========================================================
   SISAE — 02 EL DESAFÍO Y LA SOLUCIÓN
   ALVAS PERÚ SYSTEM
========================================================= */

.sisae-project-overview {
    position: relative;
    padding: 125px 0 135px;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 95% 45%,
            rgba(105, 80, 235, .07),
            transparent 45%
        ),
        #050f1e;

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

/* ENCABEZADO */

.sisae-overview-heading {
    max-width: 850px;
    margin-bottom: 65px;
}

.sisae-overview-heading .section-label {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px;

    color: #58d8ff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sisae-overview-heading h2 {
    margin: 0;

    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(38px, 4.8vw, 65px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -2.5px;
}

.sisae-overview-heading h2 span {
    display: block;
    color: #9c8aff;
}

.sisae-overview-heading > p {
    max-width: 680px;
    margin-top: 27px;

    color: #91a9c0;
    font-size: 13px;
    line-height: 1.95;
}

/* CUADRÍCULA PRINCIPAL */

.sisae-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

/* TARJETAS */

.sisae-overview-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 460px;
    padding: 40px 38px 30px;

    border: 1px solid rgba(110,170,220,.15);
    border-radius: 8px;

    background: linear-gradient(
        145deg,
        rgba(12,34,58,.95),
        rgba(5,17,34,.98)
    );

    overflow: hidden;

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

/* EFECTO DECORATIVO */

.sisae-overview-card::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -100px;

    width: 300px;
    height: 300px;
    border-radius: 50%;

    background: rgba(57,207,255,.06);
    filter: blur(60px);
    pointer-events: none;
}

.sisae-overview-solution {
    border-color: rgba(156,138,255,.25);

    background: linear-gradient(
        145deg,
        rgba(28,29,69,.85),
        rgba(7,17,37,.98)
    );
}

.sisae-overview-solution::before {
    background: rgba(156,138,255,.13);
}

.sisae-overview-card:hover {
    transform: translateY(-6px);
    border-color: rgba(73,216,255,.45);
    box-shadow: 0 20px 50px rgba(0,0,0,.16);
}

.sisae-overview-solution:hover {
    border-color: rgba(156,138,255,.55);
}

/* CABECERA DE TARJETA */

.sisae-overview-card-top {
    position: relative;
    z-index: 1;

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

    margin-bottom: 60px;
}

.sisae-overview-card-top > span {
    color: #69cce9;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sisae-overview-solution .sisae-overview-card-top > span {
    color: #ae9fff;
}

.sisae-overview-card-top i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    color: #49d8ff;
    font-size: 25px;

    border: 1px solid rgba(73,216,255,.2);
    border-radius: 10px;
    background: rgba(73,216,255,.06);
}

.sisae-overview-solution .sisae-overview-card-top i {
    color: #ac9aff;
    border-color: rgba(156,138,255,.25);
    background: rgba(156,138,255,.08);
}

/* TÍTULOS */

.sisae-overview-card h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 25px;

    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(26px, 2.5vw, 37px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -1px;
}

.sisae-overview-card h3 span {
    display: block;
    color: #49d8ff;
}

.sisae-overview-solution h3 span {
    color: #ac9aff;
}

/* DESCRIPCIONES */

.sisae-overview-card > p {
    position: relative;
    z-index: 1;

    margin: 0 0 18px;

    color: #91a9c0;
    font-size: 12px;
    line-height: 1.95;
}

/* PIE DE TARJETA */

.sisae-overview-card-footer {
    position: relative;
    z-index: 1;

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

    gap: 20px;
    margin-top: auto;
    padding-top: 30px;

    border-top: 1px solid rgba(150,190,230,.12);
}

.sisae-overview-card-footer span {
    color: #6fbfdc;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.7px;
}

.sisae-overview-card-footer i {
    color: #49d8ff;
    font-size: 19px;
}

.sisae-overview-solution .sisae-overview-card-footer span,
.sisae-overview-solution .sisae-overview-card-footer i {
    color: #ac9aff;
}

/* PROPÓSITO CENTRAL */

.sisae-overview-purpose {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 28px;

    margin-top: 26px;
    padding: 38px 40px;

    border: 1px solid rgba(73,216,255,.16);
    border-radius: 8px;

    background: linear-gradient(
        110deg,
        rgba(9,40,65,.65),
        rgba(8,18,40,.85)
    );
}

.sisae-overview-purpose-icon {
    flex-shrink: 0;

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

    width: 60px;
    height: 60px;

    color: #49d8ff;
    font-size: 27px;

    background: rgba(73,216,255,.07);
    border: 1px solid rgba(73,216,255,.2);
    border-radius: 12px;
}

.sisae-overview-purpose-content {
    min-width: 0;
}

.sisae-overview-purpose-content > span {
    display: block;
    margin-bottom: 14px;

    color: #49d8ff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sisae-overview-purpose-content h3 {
    max-width: 800px;
    margin: 0 0 16px;

    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 500;
    line-height: 1.3;
}

.sisae-overview-purpose-content p {
    max-width: 780px;
    margin: 0;

    color: #91a9c0;
    font-size: 12px;
    line-height: 1.9;
}

/* TABLET */

@media (max-width: 1000px) {

    .sisae-overview-card {
        padding: 32px 28px;
    }

    .sisae-overview-card-top {
        margin-bottom: 45px;
    }
}

/* CELULARES */

@media (max-width: 700px) {

    .sisae-project-overview {
        padding: 85px 0 95px;
    }

    .sisae-overview-heading {
        margin-bottom: 45px;
    }

    .sisae-overview-heading h2 {
        font-size: clamp(34px, 8vw, 45px);
        letter-spacing: -1.5px;
    }

    .sisae-overview-heading > p {
        font-size: 12px;
    }

    .sisae-overview-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sisae-overview-card {
        min-height: 0;
        padding: 30px 25px;
    }

    .sisae-overview-card-top {
        margin-bottom: 40px;
    }

    .sisae-overview-card h3 {
        font-size: 28px;
    }

    .sisae-overview-purpose {
        flex-direction: column;
        gap: 22px;
        padding: 30px 25px;
    }

    .sisae-overview-purpose-content h3 {
        font-size: 24px;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {

    .sisae-overview-card {
        transition: none;
    }

    .sisae-overview-card:hover {
        transform: none;
    }
}


/* =========================================================
   SISAE — 03 ARQUITECTURA TECNOLÓGICA
   ALVAS PERÚ SYSTEM
========================================================= */

.sisae-project-architecture {
    position: relative;
    padding: 125px 0 135px;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 85% 30%,
            rgba(130, 100, 255, .08),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 10% 85%,
            rgba(57, 207, 255, .06),
            transparent 45%
        ),
        #050e1d;
    border-top: 1px solid rgba(255,255,255,.04);
}

/* ENCABEZADO */

.sisae-architecture-header {
    max-width: 900px;
    margin-bottom: 70px;
}

.sisae-architecture-header .section-label {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px;
    color: #49d8ff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sisae-architecture-header h2 {
    margin: 0;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(38px, 4.8vw, 65px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -2.5px;
}

.sisae-architecture-header h2 span {
    display: block;
    color: #9c8aff;
}

.sisae-architecture-header > p {
    max-width: 680px;
    margin-top: 27px;
    color: #91a9c0;
    font-size: 13px;
    line-height: 1.95;
}

/* CONTENEDOR DE CAPAS */

.sisae-architecture-layers {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* TARJETAS DE ARQUITECTURA */

.sisae-architecture-layer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    min-width: 0;
    min-height: 175px;
    padding: 32px 38px;
    border: 1px solid rgba(73,216,255,.16);
    border-radius: 8px;
    background: linear-gradient(
        115deg,
        rgba(12,39,66,.9),
        rgba(6,17,37,.96)
    );
    transition:
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.sisae-architecture-layer:hover {
    transform: translateY(-3px);
    border-color: rgba(73,216,255,.45);
    box-shadow: 0 18px 45px rgba(0,0,0,.15);
}

/* NÚMERO */

.sisae-architecture-number {
    flex-shrink: 0;
    color: rgba(73,216,255,.25);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 46px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2px;
}

/* ÍCONO */

.sisae-architecture-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    color: #49d8ff;
    font-size: 28px;
    background: rgba(73,216,255,.07);
    border: 1px solid rgba(73,216,255,.2);
    border-radius: 12px;
}

/* INFORMACIÓN */

.sisae-architecture-info {
    flex: 1;
    min-width: 0;
}

.sisae-architecture-info > span {
    display: block;
    margin-bottom: 12px;
    color: #49d8ff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
}

.sisae-architecture-info h3 {
    margin: 0 0 12px;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 25px;
    font-weight: 500;
    letter-spacing: -.6px;
}

.sisae-architecture-info p {
    max-width: 650px;
    margin: 0;
    color: #91a9c0;
    font-size: 12px;
    line-height: 1.85;
}

/* ETIQUETAS TECNOLÓGICAS */

.sisae-architecture-tags {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
    max-width: 230px;
}

.sisae-architecture-tags span {
    padding: 8px 11px;
    color: #a8dff0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .4px;
    background: rgba(73,216,255,.06);
    border: 1px solid rgba(73,216,255,.15);
    border-radius: 4px;
}

/* CAPA CENTRAL VIOLETA */

.sisae-architecture-layer:nth-of-type(2) {
    border-color: rgba(156,138,255,.23);
    background: linear-gradient(
        115deg,
        rgba(29,29,68,.85),
        rgba(8,17,38,.96)
    );
}

.sisae-architecture-layer:nth-of-type(2) .sisae-architecture-icon {
    color: #ac9aff;
    background: rgba(156,138,255,.08);
    border-color: rgba(156,138,255,.25);
}

.sisae-architecture-layer:nth-of-type(2) .sisae-architecture-info > span {
    color: #ac9aff;
}

.sisae-architecture-layer:nth-of-type(2) .sisae-architecture-tags span {
    color: #c0b5ff;
    background: rgba(156,138,255,.07);
    border-color: rgba(156,138,255,.2);
}

.sisae-architecture-layer:nth-of-type(2):hover {
    border-color: rgba(156,138,255,.55);
}

/* CONECTORES VERTICALES */

.sisae-architecture-connector {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 65px;
    color: #49d8ff;
    font-size: 20px;
}

.sisae-architecture-connector::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        rgba(73,216,255,.1),
        rgba(73,216,255,.5),
        rgba(156,138,255,.15)
    );
}

.sisae-architecture-connector i {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(73,216,255,.25);
    border-radius: 50%;
    background: #071a30;
}

/* BASE TECNOLÓGICA */

.sisae-architecture-foundation {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-top: 55px;
    padding: 38px 40px;
    background: linear-gradient(
        110deg,
        rgba(18,31,67,.7),
        rgba(7,19,39,.95)
    );
    border: 1px solid rgba(156,138,255,.22);
    border-radius: 8px;
}

.sisae-architecture-foundation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    color: #ac9aff;
    font-size: 27px;
    background: rgba(156,138,255,.08);
    border: 1px solid rgba(156,138,255,.23);
    border-radius: 12px;
}

.sisae-architecture-foundation > div:last-child {
    min-width: 0;
}

.sisae-architecture-foundation > div:last-child > span {
    display: block;
    margin-bottom: 13px;
    color: #ac9aff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sisae-architecture-foundation h3 {
    margin: 0 0 13px;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 27px;
    font-weight: 500;
}

.sisae-architecture-foundation p {
    max-width: 780px;
    margin: 0;
    color: #91a9c0;
    font-size: 12px;
    line-height: 1.9;
}

/* TABLET */

@media (max-width: 1050px) {
    .sisae-architecture-layer {
        flex-wrap: wrap;
        gap: 22px;
    }

    .sisae-architecture-info {
        flex-basis: calc(100% - 160px);
    }

    .sisae-architecture-tags {
        max-width: none;
        justify-content: flex-start;
        margin-left: 0;
    }
}

/* CELULARES */

@media (max-width: 700px) {
    .sisae-project-architecture {
        padding: 85px 0 95px;
    }

    .sisae-architecture-header {
        margin-bottom: 45px;
    }

    .sisae-architecture-header h2 {
        font-size: clamp(34px, 8vw, 45px);
        letter-spacing: -1.5px;
    }

    .sisae-architecture-header > p {
        font-size: 12px;
    }

    .sisae-architecture-layer {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 28px 24px;
    }

    .sisae-architecture-number {
        font-size: 35px;
    }

    .sisae-architecture-icon {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

    .sisae-architecture-info {
        flex-basis: auto;
        width: 100%;
    }

    .sisae-architecture-info h3 {
        font-size: 23px;
    }

    .sisae-architecture-tags {
        width: 100%;
    }

    .sisae-architecture-connector {
        height: 55px;
    }

    .sisae-architecture-foundation {
        flex-direction: column;
        gap: 22px;
        padding: 30px 25px;
        margin-top: 40px;
    }

    .sisae-architecture-foundation h3 {
        font-size: 23px;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
    .sisae-architecture-layer {
        transition: none;
    }

    .sisae-architecture-layer:hover {
        transform: none;
    }
}


/* =========================================================
   SISAE — 04 MÓDULOS Y FUNCIONALIDADES
   ALVAS PERÚ SYSTEM
========================================================= */

.sisae-project-modules {
    position: relative;
    padding: 125px 0 135px;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 85% 15%,
            rgba(125, 95, 255, .08),
            transparent 45%
        ),
        radial-gradient(
            ellipse at 5% 85%,
            rgba(57, 207, 255, .06),
            transparent 45%
        ),
        #050f1e;

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

/* ENCABEZADO */

.sisae-modules-header {
    max-width: 850px;
    margin-bottom: 65px;
}

.sisae-modules-header .section-label {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px;

    color: #49d8ff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sisae-modules-header h2 {
    margin: 0;

    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(38px, 4.8vw, 65px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -2.5px;
}

.sisae-modules-header h2 span {
    display: block;
    color: #9c8aff;
}

.sisae-modules-header > p {
    max-width: 680px;
    margin-top: 27px;

    color: #91a9c0;
    font-size: 13px;
    line-height: 1.95;
}

/* CUADRÍCULA DE MÓDULOS */

.sisae-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* TARJETAS */

.sisae-module-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 365px;
    padding: 30px 28px 25px;

    border: 1px solid rgba(90, 160, 220, .16);
    border-radius: 8px;

    background: linear-gradient(
        145deg,
        rgba(12, 35, 61, .95),
        rgba(5, 17, 34, .98)
    );

    overflow: hidden;

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

/* ILUMINACIÓN DECORATIVA */

.sisae-module-card::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;

    width: 250px;
    height: 250px;
    border-radius: 50%;

    background: rgba(73, 216, 255, .055);
    filter: blur(55px);
    pointer-events: none;
}

/* ALTERNANCIA DE COLORES */

.sisae-module-card:nth-child(even) {
    border-color: rgba(156, 138, 255, .2);

    background: linear-gradient(
        145deg,
        rgba(26, 28, 65, .9),
        rgba(7, 17, 36, .98)
    );
}

.sisae-module-card:nth-child(even)::before {
    background: rgba(156, 138, 255, .09);
}

/* EFECTO HOVER */

.sisae-module-card:hover {
    transform: translateY(-7px);
    border-color: rgba(73, 216, 255, .48);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
}

.sisae-module-card:nth-child(even):hover {
    border-color: rgba(156, 138, 255, .55);
}

/* CABECERA */

.sisae-module-top {
    position: relative;
    z-index: 1;

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

    margin-bottom: 34px;
}

.sisae-module-top > span {
    color: #6cacc6;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.7px;
}

.sisae-module-top > i {
    color: rgba(110, 170, 210, .5);
    font-size: 17px;
}

/* ÍCONO PRINCIPAL */

.sisae-module-icon {
    position: relative;
    z-index: 1;

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

    width: 64px;
    height: 64px;
    margin-bottom: 28px;

    color: #49d8ff;
    font-size: 29px;

    background: rgba(73, 216, 255, .07);
    border: 1px solid rgba(73, 216, 255, .22);
    border-radius: 12px;
}

.sisae-module-card:nth-child(even) .sisae-module-icon {
    color: #ac9aff;
    background: rgba(156, 138, 255, .08);
    border-color: rgba(156, 138, 255, .25);
}

/* TÍTULO */

.sisae-module-card h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 17px;

    color: #edf8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.5px;
}

/* DESCRIPCIÓN */

.sisae-module-card > p {
    position: relative;
    z-index: 1;

    margin: 0 0 30px;

    color: #91a9c0;
    font-size: 12px;
    line-height: 1.9;
}

/* PIE DE TARJETA */

.sisae-module-footer {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: auto;
    padding-top: 20px;

    border-top: 1px solid rgba(120, 175, 220, .12);
}

.sisae-module-footer > span:first-child {
    color: #7497b2;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

/* ESTADO DEL MÓDULO */

.sisae-module-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 10px;

    color: #80dce8;
    background: rgba(73, 216, 255, .06);
    border: 1px solid rgba(73, 216, 255, .18);
    border-radius: 4px;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: .6px;
}

.sisae-module-status::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #49d8ff;
}

.sisae-module-card:nth-child(even) .sisae-module-status {
    color: #c1b4ff;
    background: rgba(156, 138, 255, .07);
    border-color: rgba(156, 138, 255, .22);
}

.sisae-module-card:nth-child(even) .sisae-module-status::before {
    background: #ac9aff;
}

/* NOTA INFORMATIVA */

.sisae-modules-note {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    margin-top: 35px;
    padding: 23px 27px;

    border: 1px solid rgba(73, 216, 255, .13);
    border-radius: 6px;
    background: rgba(73, 216, 255, .035);
}

.sisae-modules-note > i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #49d8ff;
    font-size: 19px;
}

.sisae-modules-note p {
    margin: 0;
    color: #91a9c0;
    font-size: 12px;
    line-height: 1.85;
}

/* TABLET */

@media (max-width: 1050px) {

    .sisae-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sisae-module-card {
        min-height: 350px;
    }
}

/* CELULARES */

@media (max-width: 700px) {

    .sisae-project-modules {
        padding: 85px 0 95px;
    }

    .sisae-modules-header {
        margin-bottom: 45px;
    }

    .sisae-modules-header h2 {
        font-size: clamp(34px, 8vw, 45px);
        letter-spacing: -1.5px;
    }

    .sisae-modules-header > p {
        font-size: 12px;
    }

    .sisae-modules-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .sisae-module-card {
        min-height: 0;
        padding: 28px 25px 24px;
    }

    .sisae-module-top {
        margin-bottom: 28px;
    }

    .sisae-module-icon {
        width: 58px;
        height: 58px;
        font-size: 26px;
    }

    .sisae-module-card h3 {
        font-size: 22px;
    }

    .sisae-modules-note {
        padding: 22px;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {

    .sisae-module-card {
        transition: none;
    }

    .sisae-module-card:hover {
        transform: none;
    }
}

/* =========================================================
   SISAE — 05 PANEL DE CONTROL E INTERFAZ
   ALVAS PERÚ SYSTEM
========================================================= */

.sisae-project-dashboard {
    position: relative;
    padding: 125px 0 135px;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 85% 30%,
            rgba(140, 100, 255, .09),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 10% 80%,
            rgba(73, 216, 255, .06),
            transparent 45%
        ),
        #050d1c;
    border-top: 1px solid rgba(255,255,255,.04);
}

/* ENCABEZADO */

.sisae-dashboard-heading {
    max-width: 900px;
    margin-bottom: 65px;
}

.sisae-dashboard-heading .section-label {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px;
    color: #49d8ff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sisae-dashboard-heading h2 {
    margin: 0;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(38px, 4.8vw, 65px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -2.5px;
}

.sisae-dashboard-heading h2 span {
    display: block;
    color: #9c8aff;
}

.sisae-dashboard-heading > p {
    max-width: 680px;
    margin-top: 27px;
    color: #91a9c0;
    font-size: 13px;
    line-height: 1.95;
}

/* VENTANA DEL SISTEMA */

.sisae-dashboard-window {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(100, 165, 220, .24);
    border-radius: 12px;
    background: #08172a;
    box-shadow:
        0 35px 90px rgba(0, 0, 0, .3),
        0 0 65px rgba(73, 216, 255, .035);
}

/* BARRA SUPERIOR */

.sisae-dashboard-windowbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 55px;
    padding: 15px 24px;
    border-bottom: 1px solid rgba(120, 175, 220, .15);
    background: #0d2038;
}

.sisae-dashboard-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sisae-dashboard-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff7285;
}

.sisae-dashboard-dots span:nth-child(2) {
    background: #ffc36a;
}

.sisae-dashboard-dots span:nth-child(3) {
    background: #56d9b1;
}

.sisae-dashboard-windowtitle {
    color: #a8c1d7;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
}

.sisae-dashboard-windowstatus {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #75cfe7;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* DISTRIBUCIÓN PRINCIPAL */

.sisae-dashboard-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 560px;
}

/* MENÚ LATERAL */

.sisae-dashboard-sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px 18px 22px;
    background: #0a1a30;
    border-right: 1px solid rgba(120, 175, 220, .12);
}

.sisae-dashboard-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 55px;
    padding: 0 10px;
}

.sisae-dashboard-brand > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, #49d8ff, #8977ff);
    color: #061426;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.sisae-dashboard-brand strong {
    display: block;
    color: #f0f8ff;
    font-size: 15px;
    letter-spacing: 1px;
}

.sisae-dashboard-brand small {
    display: block;
    margin-top: 5px;
    color: #789ab6;
    font-size: 8px;
    letter-spacing: 1.2px;
}

.sisae-dashboard-menu-label {
    margin: 0 12px 18px;
    color: #668ba9;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.7px;
}

.sisae-dashboard-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sisae-dashboard-menu > div {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    color: #91abc2;
    font-size: 11px;
    border: 1px solid transparent;
    border-radius: 6px;
}

.sisae-dashboard-menu > div i {
    font-size: 17px;
}

.sisae-dashboard-menu > div.is-active {
    color: #49d8ff;
    background: rgba(73, 216, 255, .08);
    border-color: rgba(73, 216, 255, .16);
}

.sisae-dashboard-sidebar-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 22px 10px 0;
    color: #6f93ae;
    font-size: 10px;
    line-height: 1.6;
}

.sisae-dashboard-sidebar-bottom i {
    color: #49d8ff;
    font-size: 17px;
}

/* CONTENIDO PRINCIPAL */

.sisae-dashboard-content {
    min-width: 0;
    padding: 32px;
    background:
        radial-gradient(
            ellipse at 95% 5%,
            rgba(110, 95, 230, .075),
            transparent 45%
        ),
        #081629;
}

.sisae-dashboard-content-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.sisae-dashboard-content-top > div:first-child > span {
    color: #49d8ff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.7px;
}

.sisae-dashboard-content-top h3 {
    margin: 10px 0;
    color: #edf8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 30px;
    font-weight: 500;
}

.sisae-dashboard-content-top p {
    margin: 0;
    color: #89a3ba;
    font-size: 11px;
    line-height: 1.8;
}

.sisae-dashboard-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 10px 13px;
    color: #bdd3e5;
    font-size: 9px;
    letter-spacing: 1px;
    border: 1px solid rgba(120, 175, 220, .17);
    border-radius: 6px;
    background: rgba(255,255,255,.025);
}

.sisae-dashboard-user i {
    color: #9c8aff;
    font-size: 19px;
}

/* INDICADORES */

.sisae-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 20px;
}

.sisae-dashboard-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 11px;
    padding: 22px 18px;
    border: 1px solid rgba(100, 160, 210, .16);
    border-radius: 7px;
    background: rgba(15, 39, 65, .75);
}

.sisae-dashboard-stat > i {
    color: #49d8ff;
    font-size: 22px;
}

.sisae-dashboard-stat:nth-child(even) > i {
    color: #ac9aff;
}

.sisae-dashboard-stat > span {
    color: #789ab4;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
}

.sisae-dashboard-stat strong {
    color: #edf8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* PANELES INFERIORES */

.sisae-dashboard-panels {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
}

.sisae-dashboard-panel {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(100, 160, 210, .16);
    border-radius: 7px;
    background: rgba(12, 33, 57, .8);
}

.sisae-dashboard-panel-accent {
    border-color: rgba(156, 138, 255, .22);
    background: linear-gradient(
        145deg,
        rgba(30, 28, 68, .7),
        rgba(11, 23, 47, .9)
    );
}

.sisae-dashboard-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 25px;
}

.sisae-dashboard-panel-heading span {
    color: #a8c7dc;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
}

.sisae-dashboard-panel-heading i {
    color: #49d8ff;
    font-size: 18px;
}

.sisae-dashboard-panel-accent .sisae-dashboard-panel-heading i {
    color: #ac9aff;
}

/* LISTADO */

.sisae-dashboard-feature-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.sisae-dashboard-feature-list > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(120, 175, 220, .1);
    border-radius: 5px;
    background: rgba(255,255,255,.025);
}

.sisae-dashboard-feature-list > div i:first-child {
    flex-shrink: 0;
    color: #49d8ff;
    font-size: 17px;
}

.sisae-dashboard-feature-list > div span {
    flex: 1;
    min-width: 0;
    color: #b8cde0;
    font-size: 11px;
    line-height: 1.5;
}

.sisae-dashboard-feature-list > div i:last-child {
    color: #668ba9;
    font-size: 13px;
}

/* REPRESENTACIÓN MODULAR */

.sisae-dashboard-orbit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 145px;
}

.sisae-dashboard-orbit-ring {
    position: absolute;
    width: 130px;
    height: 130px;
    border: 1px dashed rgba(156, 138, 255, .35);
    border-radius: 50%;
}

.sisae-dashboard-orbit-ring::before,
.sisae-dashboard-orbit-ring::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ac9aff;
    box-shadow: 0 0 15px rgba(156,138,255,.5);
}

.sisae-dashboard-orbit-ring::before {
    top: 10px;
    left: 15px;
}

.sisae-dashboard-orbit-ring::after {
    bottom: 10px;
    right: 15px;
}

.sisae-dashboard-orbit-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    color: #ac9aff;
    font-size: 29px;
    border: 1px solid rgba(156,138,255,.35);
    background: rgba(156,138,255,.1);
    box-shadow: 0 0 35px rgba(156,138,255,.1);
}

.sisae-dashboard-panel-accent > p {
    max-width: 240px;
    margin: 15px auto 0;
    color: #a6a5d0;
    font-size: 11px;
    line-height: 1.8;
    text-align: center;
}

/* ACLARACIÓN */

.sisae-dashboard-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 25px;
    padding: 20px 24px;
    border: 1px solid rgba(73,216,255,.13);
    border-radius: 6px;
    background: rgba(73,216,255,.035);
}

.sisae-dashboard-disclaimer i {
    flex-shrink: 0;
    color: #49d8ff;
    font-size: 18px;
}

.sisae-dashboard-disclaimer p {
    margin: 0;
    color: #91a9c0;
    font-size: 12px;
    line-height: 1.85;
}

/* TABLET */

@media (max-width: 1050px) {

    .sisae-dashboard-layout {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .sisae-dashboard-content {
        padding: 24px;
    }

    .sisae-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sisae-dashboard-panels {
        grid-template-columns: 1fr;
    }
}

/* CELULARES */

@media (max-width: 700px) {

    .sisae-project-dashboard {
        padding: 85px 0 95px;
    }

    .sisae-dashboard-heading {
        margin-bottom: 45px;
    }

    .sisae-dashboard-heading h2 {
        font-size: clamp(34px, 8vw, 45px);
        letter-spacing: -1.5px;
    }

    .sisae-dashboard-heading > p {
        font-size: 12px;
    }

    .sisae-dashboard-windowbar {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 15px;
    }

    .sisae-dashboard-windowtitle {
        font-size: 9px;
    }

    .sisae-dashboard-windowstatus {
        width: 100%;
    }

    .sisae-dashboard-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sisae-dashboard-sidebar {
        padding: 20px 15px;
        border-right: 0;
        border-bottom: 1px solid rgba(120,175,220,.12);
    }

    .sisae-dashboard-brand {
        margin-bottom: 22px;
    }

    .sisae-dashboard-menu {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sisae-dashboard-menu > div {
        padding: 11px;
        font-size: 10px;
    }

    .sisae-dashboard-sidebar-bottom {
        margin-top: 15px;
    }

    .sisae-dashboard-content {
        padding: 20px 15px;
    }

    .sisae-dashboard-content-top {
        flex-direction: column;
    }

    .sisae-dashboard-content-top h3 {
        font-size: 25px;
    }

    .sisae-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sisae-dashboard-stat {
        padding: 17px 12px;
    }

    .sisae-dashboard-stat strong {
        font-size: 15px;
    }

    .sisae-dashboard-panels {
        grid-template-columns: 1fr;
    }

    .sisae-dashboard-panel {
        padding: 19px 15px;
    }

    .sisae-dashboard-disclaimer {
        padding: 20px;
    }
}

@media (max-width: 390px) {

    .sisae-dashboard-menu {
        grid-template-columns: 1fr;
    }

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

/* =====================================================
   SISAE — CORRECCIÓN ENCABEZADO SECCIÓN 05
===================================================== */

.sisae-project-dashboard .sisae-dashboard-heading {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 0 65px;
}

.sisae-project-dashboard .sisae-dashboard-heading .section-label {
    display: flex;
    width: auto;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin: 0 0 28px;
}

.sisae-project-dashboard .sisae-dashboard-heading h2 {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0;
    line-height: 1.12;
}

.sisae-project-dashboard .sisae-dashboard-heading h2 span {
    display: block;
    width: 100%;
}

.sisae-project-dashboard .sisae-dashboard-heading > p {
    display: block;
    width: 100%;
    max-width: 680px;
    margin: 27px 0 0;
}

@media (max-width: 700px) {

    .sisae-project-dashboard .sisae-dashboard-heading {
        margin-bottom: 45px;
    }

    .sisae-project-dashboard .sisae-dashboard-heading h2 {
        font-size: clamp(34px, 8vw, 45px);
    }
}


/* =========================================================
   SISAE — 06 INNOVACIÓN Y EVOLUCIÓN TECNOLÓGICA
   ALVAS PERÚ SYSTEM
========================================================= */

.sisae-project-innovation {
    position: relative;
    padding: 125px 0 135px;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 85% 25%,
            rgba(145, 105, 255, .09),
            transparent 46%
        ),
        radial-gradient(
            ellipse at 10% 85%,
            rgba(73, 216, 255, .06),
            transparent 48%
        ),
        #050f1e;
    border-top: 1px solid rgba(255,255,255,.04);
}

/* ENCABEZADO */

.sisae-innovation-header {
    display: block;
    width: 100%;
    max-width: 950px;
    margin: 0 0 65px;
}

.sisae-innovation-header .section-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin: 0 0 28px;
    color: #49d8ff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sisae-innovation-header h2 {
    display: block;
    width: 100%;
    margin: 0;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(38px, 4.8vw, 65px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -2.5px;
}

.sisae-innovation-header h2 span {
    display: block;
    color: #9c8aff;
}

.sisae-innovation-header > p {
    display: block;
    max-width: 690px;
    margin: 27px 0 0;
    color: #91a9c0;
    font-size: 13px;
    line-height: 1.95;
}

/* CUADRÍCULA */

.sisae-innovation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 23px;
}

/* TARJETAS */

.sisae-innovation-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 355px;
    padding: 35px;
    overflow: hidden;
    border: 1px solid rgba(73,216,255,.18);
    border-radius: 9px;
    background: linear-gradient(
        145deg,
        rgba(11, 37, 64, .94),
        rgba(5, 17, 34, .98)
    );
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

/* ILUMINACIÓN */

.sisae-innovation-card::before {
    content: "";
    position: absolute;
    top: -115px;
    right: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(73,216,255,.075);
    filter: blur(65px);
    pointer-events: none;
}

.sisae-innovation-card:nth-child(even) {
    border-color: rgba(156,138,255,.24);
    background: linear-gradient(
        145deg,
        rgba(30, 29, 70, .88),
        rgba(7, 17, 37, .98)
    );
}

.sisae-innovation-card:nth-child(even)::before {
    background: rgba(156,138,255,.13);
}

.sisae-innovation-card:hover {
    transform: translateY(-6px);
    border-color: rgba(73,216,255,.52);
    box-shadow: 0 20px 50px rgba(0,0,0,.2);
}

.sisae-innovation-card:nth-child(even):hover {
    border-color: rgba(156,138,255,.58);
}

/* PARTE SUPERIOR */

.sisae-innovation-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 33px;
}

.sisae-innovation-card-top span {
    color: #70bdd8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
}

.sisae-innovation-card-top i {
    color: rgba(110,185,225,.65);
    font-size: 20px;
}

.sisae-innovation-card:nth-child(even)
.sisae-innovation-card-top span,
.sisae-innovation-card:nth-child(even)
.sisae-innovation-card-top i {
    color: #b2a4ff;
}

/* ÍCONO */

.sisae-innovation-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 28px;
    color: #49d8ff;
    font-size: 30px;
    border: 1px solid rgba(73,216,255,.24);
    border-radius: 13px;
    background: rgba(73,216,255,.075);
}

.sisae-innovation-card:nth-child(even)
.sisae-innovation-icon {
    color: #ac9aff;
    border-color: rgba(156,138,255,.28);
    background: rgba(156,138,255,.09);
}

/* TEXTO */

.sisae-innovation-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 17px;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(23px, 2.4vw, 30px);
    font-weight: 500;
    letter-spacing: -.6px;
}

.sisae-innovation-card > p {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 0 0 30px;
    color: #91a9c0;
    font-size: 12px;
    line-height: 1.95;
}

/* ESTADO PROYECTADO */

.sisae-innovation-status {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 9px;
    margin-top: auto;
    padding: 10px 13px;
    color: #8cdaee;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    border: 1px solid rgba(73,216,255,.2);
    border-radius: 4px;
    background: rgba(73,216,255,.06);
}

.sisae-innovation-status::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #49d8ff;
}

.sisae-innovation-card:nth-child(even)
.sisae-innovation-status {
    color: #c0b4ff;
    border-color: rgba(156,138,255,.25);
    background: rgba(156,138,255,.07);
}

.sisae-innovation-card:nth-child(even)
.sisae-innovation-status::before {
    background: #ac9aff;
}

/* PANEL DE VISIÓN */

.sisae-innovation-vision {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-top: 28px;
    padding: 42px;
    overflow: hidden;
    border: 1px solid rgba(156,138,255,.26);
    border-radius: 9px;
    background: linear-gradient(
        110deg,
        rgba(29, 29, 71, .8),
        rgba(8, 24, 46, .95)
    );
}

.sisae-innovation-vision::after {
    content: "";
    position: absolute;
    top: -120px;
    right: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(156,138,255,.09);
    filter: blur(70px);
    pointer-events: none;
}

.sisae-innovation-vision-symbol {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    color: #ac9aff;
    font-size: 32px;
    border: 1px solid rgba(156,138,255,.3);
    border-radius: 14px;
    background: rgba(156,138,255,.1);
}

.sisae-innovation-vision-content {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.sisae-innovation-vision-content > span {
    display: block;
    margin-bottom: 16px;
    color: #ac9aff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.sisae-innovation-vision-content h3 {
    max-width: 820px;
    margin: 0 0 17px;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.8px;
}

.sisae-innovation-vision-content p {
    max-width: 790px;
    margin: 0;
    color: #9baec5;
    font-size: 12px;
    line-height: 1.95;
}

/* TABLET */

@media (max-width: 900px) {
    .sisae-innovation-card {
        padding: 29px;
    }
}

/* CELULARES */

@media (max-width: 700px) {

    .sisae-project-innovation {
        padding: 85px 0 95px;
    }

    .sisae-innovation-header {
        margin-bottom: 45px;
    }

    .sisae-innovation-header h2 {
        font-size: clamp(34px, 8vw, 45px);
        letter-spacing: -1.5px;
    }

    .sisae-innovation-header > p {
        font-size: 12px;
    }

    .sisae-innovation-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .sisae-innovation-card {
        min-height: 0;
        padding: 29px 25px;
    }

    .sisae-innovation-card-top {
        margin-bottom: 28px;
    }

    .sisae-innovation-icon {
        width: 60px;
        height: 60px;
        font-size: 27px;
    }

    .sisae-innovation-card h3 {
        font-size: 25px;
    }

    .sisae-innovation-vision {
        flex-direction: column;
        gap: 23px;
        padding: 30px 25px;
    }

    .sisae-innovation-vision-symbol {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
    .sisae-innovation-card {
        transition: none;
    }

    .sisae-innovation-card:hover {
        transform: none;
    }
}


/* =========================================================
   SISAE — 07 IMPACTO Y BENEFICIOS
   ALVAS PERÚ SYSTEM
========================================================= */

.sisae-project-impact {
    position: relative;
    padding: 125px 0 135px;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 80% 20%,
            rgba(156, 138, 255, .08),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 8% 80%,
            rgba(73, 216, 255, .07),
            transparent 48%
        ),
        #050e1d;
    border-top: 1px solid rgba(255,255,255,.04);
}

/* ENCABEZADO */

.sisae-project-impact .sisae-impact-header {
    display: block;
    width: 100%;
    max-width: 1000px;
    margin: 0 0 65px;
}

.sisae-project-impact .sisae-impact-header .section-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin: 0 0 28px;
    color: #49d8ff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sisae-project-impact .sisae-impact-header h2 {
    display: block;
    width: 100%;
    margin: 0;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(38px, 4.8vw, 65px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -2.5px;
}

.sisae-project-impact .sisae-impact-header h2 span {
    display: block;
    color: #9c8aff;
}

.sisae-project-impact .sisae-impact-header > p {
    display: block;
    width: 100%;
    max-width: 700px;
    margin: 27px 0 0;
    color: #91a9c0;
    font-size: 13px;
    line-height: 1.95;
}

/* CUADRÍCULA */

.sisae-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

/* TARJETAS */

.sisae-impact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 345px;
    padding: 30px 25px;
    overflow: hidden;

    border: 1px solid rgba(73, 216, 255, .17);
    border-radius: 9px;

    background: linear-gradient(
        145deg,
        rgba(12, 36, 62, .95),
        rgba(5, 17, 34, .98)
    );

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

/* ALTERNANCIA DE COLORES */

.sisae-impact-card:nth-child(even) {
    border-color: rgba(156, 138, 255, .22);

    background: linear-gradient(
        145deg,
        rgba(28, 28, 66, .88),
        rgba(7, 17, 37, .98)
    );
}

/* ILUMINACIÓN DECORATIVA */

.sisae-impact-card::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -100px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(73, 216, 255, .065);
    filter: blur(60px);
    pointer-events: none;
}

.sisae-impact-card:nth-child(even)::before {
    background: rgba(156, 138, 255, .11);
}

/* INTERACCIÓN */

.sisae-impact-card:hover {
    transform: translateY(-6px);
    border-color: rgba(73, 216, 255, .48);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .2);
}

.sisae-impact-card:nth-child(even):hover {
    border-color: rgba(156, 138, 255, .55);
}

/* NUMERACIÓN */

.sisae-impact-number {
    position: relative;
    z-index: 1;
    margin-bottom: 32px;

    color: rgba(73, 216, 255, .35);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 45px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2px;
}

.sisae-impact-card:nth-child(even)
.sisae-impact-number {
    color: rgba(156, 138, 255, .45);
}

/* ÍCONOS */

.sisae-impact-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;
    margin-bottom: 27px;

    color: #49d8ff;
    font-size: 27px;

    border: 1px solid rgba(73, 216, 255, .23);
    border-radius: 12px;
    background: rgba(73, 216, 255, .07);
}

.sisae-impact-card:nth-child(even)
.sisae-impact-icon {
    color: #ac9aff;
    border-color: rgba(156, 138, 255, .28);
    background: rgba(156, 138, 255, .09);
}

/* TÍTULOS */

.sisae-impact-card h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 17px;
    color: #eef8ff;

    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.5px;
}

/* DESCRIPCIONES */

.sisae-impact-card > p {
    position: relative;
    z-index: 1;

    margin: 0 0 28px;
    color: #91a9c0;
    font-size: 12px;
    line-height: 1.9;
}

/* CATEGORÍA */

.sisae-impact-category {
    position: relative;
    z-index: 1;

    display: block;
    margin-top: auto;
    padding-top: 19px;

    border-top: 1px solid rgba(120, 175, 220, .13);

    color: #70bdd8;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.sisae-impact-card:nth-child(even)
.sisae-impact-category {
    color: #b3a6ff;
}

/* NOTA INFORMATIVA */

.sisae-impact-note {
    display: flex;
    align-items: flex-start;
    gap: 17px;

    margin-top: 32px;
    padding: 24px 28px;

    border: 1px solid rgba(73, 216, 255, .14);
    border-radius: 7px;
    background: rgba(73, 216, 255, .035);
}

.sisae-impact-note > i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #49d8ff;
    font-size: 19px;
}

.sisae-impact-note p {
    margin: 0;
    color: #91a9c0;
    font-size: 12px;
    line-height: 1.9;
}

/* PANTALLAS MEDIANAS */

@media (max-width: 1150px) {
    .sisae-impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sisae-impact-card {
        min-height: 320px;
    }
}

/* CELULARES */

@media (max-width: 700px) {

    .sisae-project-impact {
        padding: 85px 0 95px;
    }

    .sisae-project-impact .sisae-impact-header {
        margin-bottom: 45px;
    }

    .sisae-project-impact .sisae-impact-header h2 {
        font-size: clamp(34px, 8vw, 45px);
        letter-spacing: -1.5px;
    }

    .sisae-project-impact .sisae-impact-header > p {
        font-size: 12px;
    }

    .sisae-impact-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .sisae-impact-card {
        min-height: 0;
        padding: 28px 25px;
    }

    .sisae-impact-number {
        margin-bottom: 25px;
        font-size: 38px;
    }

    .sisae-impact-icon {
        width: 57px;
        height: 57px;
        font-size: 25px;
    }

    .sisae-impact-card h3 {
        font-size: 23px;
    }

    .sisae-impact-note {
        padding: 22px;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {

    .sisae-impact-card {
        transition: none;
    }

    .sisae-impact-card:hover {
        transform: none;
    }
}


/* =========================================================
   SISAE — 08 PROYECCIÓN Y PRÓXIMOS PASOS
   ALVAS PERÚ SYSTEM
========================================================= */

.sisae-project-roadmap {
    position: relative;
    padding: 125px 0 135px;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 85% 20%,
            rgba(156, 138, 255, .09),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 10% 85%,
            rgba(73, 216, 255, .06),
            transparent 48%
        ),
        #050f1e;
    border-top: 1px solid rgba(255,255,255,.04);
}

/* ENCABEZADO */

.sisae-project-roadmap .sisae-roadmap-header {
    display: block;
    width: 100%;
    max-width: 1050px;
    margin: 0 0 75px;
}

.sisae-project-roadmap .sisae-roadmap-header .section-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin: 0 0 28px;
    color: #49d8ff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.sisae-project-roadmap .sisae-roadmap-header h2 {
    display: block;
    width: 100%;
    margin: 0;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(38px, 4.8vw, 65px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -2.5px;
}

.sisae-project-roadmap .sisae-roadmap-header h2 span {
    display: block;
    color: #9c8aff;
}

.sisae-project-roadmap .sisae-roadmap-header > p {
    display: block;
    max-width: 720px;
    margin: 27px 0 0;
    color: #91a9c0;
    font-size: 13px;
    line-height: 1.95;
}

/* LÍNEA DE TIEMPO */

.sisae-roadmap-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

/* LÍNEA CENTRAL */

.sisae-roadmap-timeline::before {
    content: "";
    position: absolute;
    top: 35px;
    bottom: 35px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        rgba(73,216,255,.08),
        rgba(73,216,255,.65),
        rgba(156,138,255,.65),
        rgba(156,138,255,.08)
    );
}

/* CADA ETAPA */

.sisae-roadmap-step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
    align-items: center;
    min-height: 250px;
}

/* MARCADOR CENTRAL */

.sisae-roadmap-marker {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: auto;
    border: 1px solid rgba(73,216,255,.48);
    border-radius: 50%;
    background: #0a2540;
    box-shadow: 0 0 30px rgba(73,216,255,.12);
}

.sisae-roadmap-marker span {
    color: #49d8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 600;
}

.sisae-roadmap-step:nth-child(even) .sisae-roadmap-marker {
    border-color: rgba(156,138,255,.5);
    background: #211e45;
    box-shadow: 0 0 30px rgba(156,138,255,.13);
}

.sisae-roadmap-step:nth-child(even) .sisae-roadmap-marker span {
    color: #ac9aff;
}

/* TARJETAS */

.sisae-roadmap-card {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 35px;
    border: 1px solid rgba(73,216,255,.2);
    border-radius: 9px;
    background: linear-gradient(
        145deg,
        rgba(12,37,64,.95),
        rgba(5,17,34,.98)
    );
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

/* ALTERNANCIA DERECHA */

.sisae-roadmap-step:nth-child(even) .sisae-roadmap-card {
    grid-column: 3;
    border-color: rgba(156,138,255,.25);
    background: linear-gradient(
        145deg,
        rgba(30,28,69,.9),
        rgba(7,17,37,.98)
    );
}

/* CONECTOR HORIZONTAL */

.sisae-roadmap-card::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 41px;
    height: 1px;
    background: rgba(73,216,255,.5);
}

.sisae-roadmap-step:nth-child(even) .sisae-roadmap-card::after {
    left: auto;
    right: 100%;
    background: rgba(156,138,255,.5);
}

/* EFECTO HOVER */

.sisae-roadmap-card:hover {
    transform: translateY(-5px);
    border-color: rgba(73,216,255,.55);
    box-shadow: 0 20px 45px rgba(0,0,0,.2);
}

.sisae-roadmap-step:nth-child(even) .sisae-roadmap-card:hover {
    border-color: rgba(156,138,255,.58);
}

/* CABECERA DE TARJETA */

.sisae-roadmap-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 25px;
}

.sisae-roadmap-card-top span {
    color: #70bdd8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
}

.sisae-roadmap-card-top i {
    color: #49d8ff;
    font-size: 25px;
}

.sisae-roadmap-step:nth-child(even) .sisae-roadmap-card-top span,
.sisae-roadmap-step:nth-child(even) .sisae-roadmap-card-top i {
    color: #ac9aff;
}

/* TÍTULO */

.sisae-roadmap-card h3 {
    margin: 0 0 17px;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.6px;
}

/* DESCRIPCIÓN */

.sisae-roadmap-card p {
    margin: 0 0 25px;
    color: #91a9c0;
    font-size: 12px;
    line-height: 1.9;
}

/* ETIQUETA */

.sisae-roadmap-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    color: #83d8e9;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    border: 1px solid rgba(73,216,255,.2);
    border-radius: 4px;
    background: rgba(73,216,255,.055);
}

.sisae-roadmap-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #49d8ff;
}

.sisae-roadmap-step:nth-child(even) .sisae-roadmap-tag {
    color: #c0b4ff;
    border-color: rgba(156,138,255,.25);
    background: rgba(156,138,255,.07);
}

.sisae-roadmap-step:nth-child(even) .sisae-roadmap-tag::before {
    background: #ac9aff;
}

/* NOTA FINAL */

.sisae-roadmap-footer {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 1100px;
    margin: 55px auto 0;
    padding: 25px 28px;
    border: 1px solid rgba(73,216,255,.15);
    border-radius: 7px;
    background: rgba(73,216,255,.035);
}

.sisae-roadmap-footer > i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #49d8ff;
    font-size: 22px;
}

.sisae-roadmap-footer p {
    margin: 0;
    color: #91a9c0;
    font-size: 12px;
    line-height: 1.9;
}

/* TABLET Y CELULARES */

@media (max-width: 900px) {

    .sisae-roadmap-timeline::before {
        left: 27px;
        transform: none;
    }

    .sisae-roadmap-step {
        grid-template-columns: 55px minmax(0, 1fr);
        gap: 20px;
        min-height: 0;
    }

    .sisae-roadmap-marker {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        width: 54px;
        height: 54px;
        margin: 25px 0 0;
    }

    .sisae-roadmap-card,
    .sisae-roadmap-step:nth-child(even) .sisae-roadmap-card {
        grid-column: 2;
        grid-row: 1;
    }

    .sisae-roadmap-card::after,
    .sisae-roadmap-step:nth-child(even) .sisae-roadmap-card::after {
        display: none;
    }
}

@media (max-width: 700px) {

    .sisae-project-roadmap {
        padding: 85px 0 95px;
    }

    .sisae-project-roadmap .sisae-roadmap-header {
        margin-bottom: 50px;
    }

    .sisae-project-roadmap .sisae-roadmap-header h2 {
        font-size: clamp(34px, 8vw, 45px);
        letter-spacing: -1.5px;
    }

    .sisae-project-roadmap .sisae-roadmap-header > p {
        font-size: 12px;
    }

    .sisae-roadmap-timeline {
        gap: 20px;
    }

    .sisae-roadmap-timeline::before {
        left: 21px;
    }

    .sisae-roadmap-step {
        grid-template-columns: 43px minmax(0, 1fr);
        gap: 13px;
    }

    .sisae-roadmap-marker {
        width: 43px;
        height: 43px;
        margin-top: 20px;
    }

    .sisae-roadmap-marker span {
        font-size: 14px;
    }

    .sisae-roadmap-card {
        padding: 25px 20px;
    }

    .sisae-roadmap-card-top {
        margin-bottom: 20px;
    }

    .sisae-roadmap-card-top span {
        font-size: 9px;
    }

    .sisae-roadmap-card h3 {
        font-size: 23px;
    }

    .sisae-roadmap-footer {
        margin-top: 35px;
        padding: 22px;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {

    .sisae-roadmap-card {
        transition: none;
    }

    .sisae-roadmap-card:hover {
        transform: none;
    }
}


/* =========================================================
   SISAE — 09 CIERRE Y CONTACTO
   ALVAS PERÚ SYSTEM
========================================================= */

.sisae-project-closing {
    position: relative;
    padding: 110px 0 135px;
    overflow: hidden;
    background: #050e1d;
    border-top: 1px solid rgba(255,255,255,.04);
}

/* PANEL PRINCIPAL */

.sisae-closing-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 38px 48px 30px;
    border: 1px solid rgba(73,216,255,.27);
    border-radius: 14px;
    background:
        radial-gradient(
            ellipse at 85% 20%,
            rgba(156,138,255,.18),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 15% 85%,
            rgba(73,216,255,.13),
            transparent 50%
        ),
        linear-gradient(
            135deg,
            #0b2541 0%,
            #0a1731 55%,
            #17163b 100%
        );
    box-shadow: 0 30px 80px rgba(0,0,0,.22);
}

/* CUADRÍCULA DECORATIVA */

.sisae-closing-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(
            rgba(120,180,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(120,180,255,.045) 1px,
            transparent 1px
        );
    background-size: 75px 75px;
    pointer-events: none;
}

.sisae-closing-glow {
    position: absolute;
    z-index: -1;
    top: -180px;
    right: -130px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: rgba(156,138,255,.14);
    filter: blur(90px);
    pointer-events: none;
}

/* FRANJA SUPERIOR */

.sisae-closing-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(160,200,255,.13);
}

.sisae-closing-label {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #49d8ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.sisae-closing-label i {
    font-size: 17px;
}

.sisae-closing-code {
    color: #8daac8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.7px;
}

/* CONTENIDO CENTRAL */

.sisae-closing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 970px;
    margin: 0 auto;
    padding: 85px 0 95px;
    text-align: center;
}

/* SÍMBOLO */

.sisae-closing-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 85px;
    margin-bottom: 35px;
    color: #49d8ff;
    font-size: 38px;
    border: 1px solid rgba(73,216,255,.36);
    border-radius: 20px;
    background: rgba(73,216,255,.09);
    box-shadow: 0 0 45px rgba(73,216,255,.1);
}

/* TÍTULO */

.sisae-closing-content h2 {
    display: block;
    width: 100%;
    margin: 0;
    color: #eef8ff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(39px, 5vw, 70px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -2.8px;
}

.sisae-closing-content h2 span {
    display: block;
    color: #a18dff;
}

/* DESCRIPCIÓN */

.sisae-closing-content > p {
    max-width: 650px;
    margin: 30px auto 0;
    color: #a4b8cf;
    font-size: 13px;
    line-height: 2;
}

/* BOTONES */

.sisae-closing-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 45px;
}

.sisae-closing-btn-primary,
.sisae-closing-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 60px;
    padding: 17px 27px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .65px;
    text-decoration: none;
    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

/* BOTÓN PRINCIPAL */

.sisae-closing-btn-primary {
    color: #061526;
    border: 1px solid #49d8ff;
    background: #49d8ff;
}

.sisae-closing-btn-primary:hover {
    color: #061526;
    background: #80e7ff;
    border-color: #80e7ff;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(73,216,255,.2);
}

/* BOTÓN SECUNDARIO */

.sisae-closing-btn-secondary {
    color: #d5e7f7;
    border: 1px solid rgba(165,195,235,.27);
    background: rgba(255,255,255,.025);
}

.sisae-closing-btn-secondary:hover {
    color: #ffffff;
    border-color: rgba(156,138,255,.65);
    background: rgba(156,138,255,.1);
    transform: translateY(-3px);
}

/* FRANJA INFERIOR */

.sisae-closing-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 27px;
    border-top: 1px solid rgba(160,200,255,.13);
}

.sisae-closing-bottom span {
    color: #86a3bf;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 1.3px;
}

/* TABLET */

@media (max-width: 900px) {

    .sisae-closing-panel {
        padding: 30px;
    }

    .sisae-closing-content {
        padding: 70px 0 80px;
    }
}

/* CELULARES */

@media (max-width: 700px) {

    .sisae-project-closing {
        padding: 80px 0 95px;
    }

    .sisae-closing-panel {
        padding: 25px 20px;
    }

    .sisae-closing-top {
        gap: 12px;
    }

    .sisae-closing-code {
        font-size: 9px;
    }

    .sisae-closing-content {
        padding: 65px 0 70px;
    }

    .sisae-closing-symbol {
        width: 70px;
        height: 70px;
        margin-bottom: 28px;
        font-size: 31px;
    }

    .sisae-closing-content h2 {
        font-size: clamp(34px, 8vw, 47px);
        letter-spacing: -1.5px;
    }

    .sisae-closing-content > p {
        font-size: 12px;
        line-height: 1.9;
    }

    .sisae-closing-actions {
        width: 100%;
        flex-direction: column;
        gap: 13px;
        margin-top: 35px;
    }

    .sisae-closing-btn-primary,
    .sisae-closing-btn-secondary {
        width: 100%;
        min-height: 57px;
        padding: 15px;
        font-size: 10px;
        text-align: center;
    }

    .sisae-closing-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {

    .sisae-closing-btn-primary,
    .sisae-closing-btn-secondary {
        transition: none;
    }

    .sisae-closing-btn-primary:hover,
    .sisae-closing-btn-secondary:hover {
        transform: none;
    }
}


/* ==========================================
   BOTÓN DEL PROYECTO SISAE
========================================== */

.lab-project-sisae-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 30px;
    padding: 17px 24px;
    min-height: 58px;
    border: 1px solid rgba(73, 214, 255, 0.4);
    border-radius: 12px;
    background: linear-gradient(
        120deg,
        #32d4ff 0%,
        #66b8ff 55%,
        #a18bff 100%
    );
    color: #061225;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

.lab-project-sisae-btn i {
    font-size: 19px;
    transition: transform .3s ease;
}

.lab-project-sisae-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(63, 180, 255, 0.25);
    color: #061225;
}

.lab-project-sisae-btn:hover i {
    transform: translate(3px, -3px);
}

@media (max-width: 576px) {
    .lab-project-sisae-btn {
        width: 100%;
        gap: 15px;
        font-size: 11px;
    }
}

/* ==================================================
   BIBLIOTECA VIRTUAL — PROYECTO 003
   SECCIÓN 01: HERO
================================================== */

.biblioteca-project-page {
    background: #050d1b;
    color: #f2f7ff;
    overflow: hidden;
}

.biblioteca-hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    padding: 125px 0 110px;
    background:
        radial-gradient(ellipse at 78% 30%,
            rgba(100, 72, 220, .19),
            transparent 45%),
        radial-gradient(ellipse at 18% 75%,
            rgba(0, 190, 245, .12),
            transparent 50%),
        #050d1b;
}

.biblioteca-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(70, 155, 225, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(70, 155, 225, .045) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, transparent, black 25%, transparent);
}

.biblioteca-hero .container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.biblioteca-hero-content {
    max-width: 930px;
}

.biblioteca-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 30px;
    margin-bottom: 50px;
    color: #6f91b2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
}

.biblioteca-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    color: #53d9ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.biblioteca-hero-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #54e6c5;
    box-shadow: 0 0 15px rgba(84, 230, 197, .65);
}

.biblioteca-hero h1 {
    margin: 0 0 35px;
    color: #f4f8ff;
    font-size: clamp(60px, 8.5vw, 130px);
    font-weight: 850;
    line-height: .98;
    letter-spacing: -6px;
}

.biblioteca-hero h1 span {
    display: block;
    background: linear-gradient(100deg, #36d8ff, #7aaeff, #a38cff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.biblioteca-hero-content > p {
    max-width: 690px;
    margin: 0 0 45px;
    color: #9aafc8;
    font-size: 19px;
    line-height: 1.9;
}

.biblioteca-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 55px;
}

.biblioteca-btn-primary,
.biblioteca-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 58px;
    padding: 17px 26px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-decoration: none;
    transition: .3s ease;
}

.biblioteca-btn-primary {
    background: linear-gradient(115deg, #37d6ff, #8e9aff);
    color: #061326;
    border: 1px solid transparent;
}

.biblioteca-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(50, 192, 255, .22);
    color: #061326;
}

.biblioteca-btn-secondary {
    border: 1px solid rgba(85, 160, 220, .3);
    background: rgba(15, 34, 58, .5);
    color: #d5e6f8;
}

.biblioteca-btn-secondary:hover {
    border-color: #53d9ff;
    color: #53d9ff;
    transform: translateY(-3px);
}

.biblioteca-hero-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.biblioteca-hero-tech span {
    padding: 11px 16px;
    border: 1px solid rgba(76, 151, 215, .23);
    background: rgba(9, 28, 49, .6);
    color: #7f9ebd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

@media (max-width: 768px) {
    .biblioteca-hero {
        min-height: auto;
        padding: 110px 0 85px;
    }

    .biblioteca-hero h1 {
        font-size: clamp(48px, 11vw, 80px);
        letter-spacing: -3px;
    }

    .biblioteca-hero-content > p {
        font-size: 16px;
        line-height: 1.8;
    }

    .biblioteca-hero-meta {
        margin-bottom: 35px;
    }

    .biblioteca-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ==========================================
   BIBLIOTECA VIRTUAL - CORRECCIÓN HERO
========================================== */

.biblioteca-hero > .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

.biblioteca-hero-content {
    width: 100%;
    max-width: 930px;
    margin-left: 0;
    margin-right: auto;
}

.biblioteca-hero h1 {
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 768px) {
    .biblioteca-hero > .container {
        width: calc(100% - 36px);
    }

    .biblioteca-hero h1 {
        font-size: clamp(42px, 10vw, 76px);
        letter-spacing: -2px;
    }
}

/* ==================================================
   BIBLIOTECA VIRTUAL — SECCIÓN 02
   ARQUITECTURA Y MÓDULOS
================================================== */

.biblioteca-overview {
    position: relative;
    padding: 115px 0 125px;
    background:
        radial-gradient(ellipse at 90% 20%,
            rgba(103, 78, 220, .10),
            transparent 45%),
        linear-gradient(180deg, #050d1b, #08162a);
    color: #f2f7ff;
}

.biblioteca-overview > .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.biblioteca-overview-heading {
    max-width: 800px;
    margin-bottom: 65px;
}

.biblioteca-overview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin-bottom: 28px;
    color: #53cfff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.biblioteca-overview-heading h2 {
    margin: 0 0 25px;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -2px;
}

.biblioteca-overview-heading h2 span {
    display: block;
    background: linear-gradient(100deg, #36d8ff, #9b92ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.biblioteca-overview-heading p {
    max-width: 680px;
    margin: 0;
    color: #96abc5;
    font-size: 17px;
    line-height: 1.9;
}

/* TARJETAS DE MÓDULOS */

.biblioteca-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 55px;
}

.biblioteca-overview-card {
    position: relative;
    min-width: 0;
    min-height: 305px;
    padding: 30px 25px;
    border: 1px solid rgba(78, 153, 220, .18);
    border-radius: 15px;
    background: linear-gradient(
        145deg,
        rgba(17, 42, 72, .85),
        rgba(8, 23, 43, .92)
    );
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.biblioteca-overview-card:hover {
    transform: translateY(-7px);
    border-color: rgba(69, 212, 255, .55);
    box-shadow: 0 18px 45px rgba(0, 180, 255, .10);
}

.biblioteca-overview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 32px;
    border: 1px solid rgba(72, 205, 255, .35);
    border-radius: 13px;
    background: rgba(44, 172, 236, .10);
    color: #48d7ff;
    font-size: 26px;
}

.biblioteca-overview-card > span {
    display: block;
    margin-bottom: 13px;
    color: #5b9fc5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.biblioteca-overview-card h3 {
    margin: 0 0 17px;
    color: #f2f7ff;
    font-size: 20px;
    font-weight: 750;
}

.biblioteca-overview-card p {
    margin: 0;
    color: #8fa6c0;
    font-size: 14px;
    line-height: 1.8;
}

/* DIAGRAMA DE ARQUITECTURA */

.biblioteca-architecture {
    padding: 35px 38px;
    border: 1px solid rgba(74, 160, 226, .22);
    border-radius: 14px;
    background: rgba(8, 27, 49, .75);
}

.biblioteca-architecture > span {
    display: block;
    margin-bottom: 30px;
    color: #5fb7e5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.biblioteca-architecture-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.biblioteca-architecture-flow > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
    min-height: 72px;
    padding: 14px;
    border: 1px solid rgba(70, 154, 220, .22);
    border-radius: 9px;
    background: rgba(14, 43, 72, .65);
    color: #d9e9fa;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .7px;
    text-align: center;
}

.biblioteca-architecture-flow > div i {
    color: #49d4ff;
    font-size: 21px;
}

.biblioteca-architecture-flow > i {
    flex-shrink: 0;
    color: #3c779e;
    font-size: 20px;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .biblioteca-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .biblioteca-architecture-flow {
        flex-wrap: wrap;
        justify-content: center;
    }

    .biblioteca-architecture-flow > div {
        flex: 1 1 180px;
    }
}

@media (max-width: 600px) {
    .biblioteca-overview {
        padding: 80px 0;
    }

    .biblioteca-overview > .container {
        width: calc(100% - 36px);
    }

    .biblioteca-overview-grid {
        grid-template-columns: 1fr;
    }

    .biblioteca-overview-card {
        min-height: auto;
    }

    .biblioteca-architecture {
        padding: 25px 20px;
    }

    .biblioteca-architecture-flow {
        flex-direction: column;
    }

    .biblioteca-architecture-flow > div {
        width: 100%;
        flex: none;
    }

    .biblioteca-architecture-flow > i {
        transform: rotate(90deg);
    }
}

/* =====================================================
   BIBLIOTECA VIRTUAL — SECCIÓN 03
   CATÁLOGO DIGITAL / VISTA DEMOSTRATIVA
===================================================== */

.biblioteca-catalog {
    position: relative;
    padding: 115px 0 120px;
    background:
        radial-gradient(ellipse at 15% 45%,
            rgba(21, 147, 220, .10), transparent 48%),
        radial-gradient(ellipse at 90% 20%,
            rgba(120, 75, 220, .12), transparent 45%),
        #050d1b;
    color: #f2f7ff;
}

.biblioteca-catalog > .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* CABECERA */

.biblioteca-catalog-heading {
    max-width: 850px;
    margin-bottom: 60px;
}

.biblioteca-catalog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin-bottom: 28px;
    color: #52cefa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.biblioteca-catalog-heading h2 {
    margin: 0 0 25px;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -2px;
}

.biblioteca-catalog-heading h2 span {
    display: block;
    background: linear-gradient(100deg, #37d7ff, #a18cff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.biblioteca-catalog-heading p {
    max-width: 680px;
    margin: 0;
    color: #94aac4;
    font-size: 17px;
    line-height: 1.9;
}

/* CONTENEDOR DE INTERFAZ */

.biblioteca-catalog-interface {
    overflow: hidden;
    border: 1px solid rgba(77, 164, 225, .27);
    border-radius: 16px;
    background: #08172b;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .25);
}

/* BARRA SUPERIOR */

.biblioteca-catalog-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 30px;
    border-bottom: 1px solid rgba(77, 164, 225, .20);
    background: rgba(15, 37, 64, .75);
}

.biblioteca-catalog-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.biblioteca-catalog-logo {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(68, 207, 255, .4);
    border-radius: 11px;
    background: rgba(41, 177, 240, .12);
    color: #47d7ff;
    font-size: 23px;
}

.biblioteca-catalog-brand strong,
.biblioteca-catalog-brand small {
    display: block;
}

.biblioteca-catalog-brand strong {
    font-size: 13px;
    letter-spacing: 1px;
}

.biblioteca-catalog-brand small {
    margin-top: 5px;
    color: #7196b8;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.biblioteca-catalog-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #70e0c7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.biblioteca-catalog-indicator span,
.biblioteca-catalog-pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #65e7ca;
    box-shadow: 0 0 13px rgba(101, 231, 202, .65);
}

/* ESTRUCTURA INTERNA */

.biblioteca-catalog-body {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    min-height: 600px;
}

.biblioteca-catalog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 30px 15px;
    border-right: 1px solid rgba(77, 164, 225, .18);
    background: rgba(6, 19, 37, .75);
}

.biblioteca-sidebar-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #7796b5;
    font-size: 12px;
    font-weight: 600;
}

.biblioteca-sidebar-item i {
    font-size: 17px;
}

.biblioteca-sidebar-item.active {
    border-color: rgba(58, 204, 255, .25);
    background: rgba(46, 172, 238, .12);
    color: #4bd8ff;
}

.biblioteca-sidebar-bottom {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    color: #537a9c;
    font-size: 9px;
    letter-spacing: 1px;
}

/* CONTENIDO PRINCIPAL */

.biblioteca-catalog-main {
    min-width: 0;
    padding: 36px 38px 26px;
}

.biblioteca-catalog-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 28px;
}

.biblioteca-catalog-welcome span {
    color: #5f9fc7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.biblioteca-catalog-welcome h3 {
    margin: 9px 0 0;
    color: #f2f7ff;
    font-size: 26px;
    font-weight: 750;
}

.biblioteca-catalog-view {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #7197b7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* BUSCADOR VISUAL */

.biblioteca-catalog-search {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 56px;
    margin-bottom: 24px;
    padding: 0 19px;
    border: 1px solid rgba(75, 156, 220, .25);
    border-radius: 9px;
    background: rgba(12, 34, 58, .85);
    color: #718eab;
    font-size: 13px;
}

.biblioteca-catalog-search > i {
    color: #46cfff;
    font-size: 18px;
}

.biblioteca-catalog-search span {
    flex: 1;
}

.biblioteca-catalog-search small {
    color: #4e82a6;
    font-size: 9px;
    letter-spacing: 1px;
}

/* CATEGORÍAS */

.biblioteca-catalog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 28px;
}

.biblioteca-catalog-categories span {
    padding: 10px 12px;
    border: 1px solid rgba(76, 149, 210, .22);
    border-radius: 6px;
    color: #7597b7;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .7px;
}

.biblioteca-catalog-categories span.active {
    border-color: rgba(62, 204, 255, .4);
    background: rgba(45, 182, 243, .12);
    color: #4ad6ff;
}

/* CUADRÍCULA DE LIBROS */

.biblioteca-catalog-books {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

.biblioteca-digital-book {
    min-width: 0;
}

.biblioteca-book-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    min-height: 225px;
    padding: 22px 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    box-shadow: 5px 8px 20px rgba(0, 0, 0, .18);
    transition: transform .3s ease, box-shadow .3s ease;
}

.biblioteca-book-cover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 9px;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, .2);
}

.biblioteca-digital-book:hover .biblioteca-book-cover {
    transform: translateY(-5px);
    box-shadow: 5px 15px 30px rgba(0, 0, 0, .3);
}

.biblioteca-book-cover > i {
    color: rgba(255, 255, 255, .9);
    font-size: 29px;
}

.biblioteca-book-cover strong {
    color: #fff;
    font-size: clamp(11px, 1.1vw, 15px);
    line-height: 1.45;
    letter-spacing: 1px;
}

.biblioteca-book-cover small {
    color: rgba(255, 255, 255, .65);
    font-size: 8px;
    letter-spacing: 1.3px;
}

.cover-programming {
    background: linear-gradient(145deg, #14688e, #082b50 70%, #061b36);
}

.cover-database {
    background: linear-gradient(145deg, #6850b8, #29265e 70%, #171a42);
}

.cover-network {
    background: linear-gradient(145deg, #147e83, #0b3d57 70%, #08253f);
}

.cover-technology {
    background: linear-gradient(145deg, #315eaa, #1b326a 70%, #101e42);
}

.biblioteca-book-details {
    padding: 17px 2px 0;
}

.biblioteca-book-details > span {
    color: #4bbfe8;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 1px;
}

.biblioteca-book-details h4 {
    margin: 9px 0;
    color: #dceaf8;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.biblioteca-book-details small {
    color: #5f809e;
    font-size: 9px;
    letter-spacing: .8px;
}

/* PIE DE INTERFAZ */

.biblioteca-catalog-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 35px;
    padding-top: 22px;
    border-top: 1px solid rgba(75, 156, 220, .18);
}

.biblioteca-catalog-footer > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6688a8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.biblioteca-catalog-note {
    margin: 22px 0 0;
    color: #6686a5;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .biblioteca-catalog-body {
        grid-template-columns: 75px minmax(0, 1fr);
    }

    .biblioteca-sidebar-item {
        justify-content: center;
    }

    .biblioteca-sidebar-item span,
    .biblioteca-sidebar-bottom {
        display: none;
    }

    .biblioteca-catalog-books {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .biblioteca-catalog {
        padding: 80px 0;
    }

    .biblioteca-catalog > .container {
        width: calc(100% - 30px);
    }

    .biblioteca-catalog-topbar {
        padding: 18px;
    }

    .biblioteca-catalog-indicator {
        display: none;
    }

    .biblioteca-catalog-body {
        grid-template-columns: 1fr;
    }

    .biblioteca-catalog-sidebar {
        flex-direction: row;
        justify-content: center;
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(77, 164, 225, .18);
    }

    .biblioteca-catalog-main {
        padding: 25px 17px;
    }

    .biblioteca-catalog-welcome h3 {
        font-size: 21px;
    }

    .biblioteca-catalog-view {
        display: none;
    }

    .biblioteca-catalog-books {
        gap: 12px;
    }

    .biblioteca-book-cover {
        min-height: 185px;
        padding: 16px 12px;
    }

    .biblioteca-book-cover strong {
        font-size: 11px;
    }
}

/* =====================================================
   BIBLIOTECA VIRTUAL — SECCIÓN 04
   LECTOR DIGITAL PROTEGIDO
===================================================== */

.biblioteca-reader {
    position: relative;
    padding: 115px 0 120px;
    background:
        radial-gradient(ellipse at 85% 30%, rgba(103, 72, 220, .12), transparent 48%),
        radial-gradient(ellipse at 10% 75%, rgba(0, 181, 240, .09), transparent 45%),
        #071326;
    color: #f2f7ff;
}

.biblioteca-reader > .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* CABECERA */

.biblioteca-reader-heading {
    max-width: 850px;
    margin-bottom: 60px;
}

.biblioteca-reader-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin-bottom: 28px;
    color: #52cefa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.biblioteca-reader-heading h2 {
    margin: 0 0 25px;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -2px;
}

.biblioteca-reader-heading h2 span {
    display: block;
    background: linear-gradient(100deg, #38d8ff, #a28dff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.biblioteca-reader-heading p {
    max-width: 720px;
    margin: 0;
    color: #96abc5;
    font-size: 17px;
    line-height: 1.9;
}

/* INTERFAZ PRINCIPAL */

.biblioteca-reader-interface {
    overflow: hidden;
    border: 1px solid rgba(77, 164, 225, .28);
    border-radius: 16px;
    background: #09182c;
    box-shadow: 0 25px 75px rgba(0, 0, 0, .25);
}

/* BARRA SUPERIOR */

.biblioteca-reader-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 22px 30px;
    border-bottom: 1px solid rgba(77, 164, 225, .20);
    background: rgba(15, 37, 64, .85);
}

.biblioteca-reader-document {
    display: flex;
    align-items: center;
    gap: 15px;
}

.biblioteca-reader-document > i {
    color: #55d5ff;
    font-size: 30px;
}

.biblioteca-reader-document strong,
.biblioteca-reader-document small {
    display: block;
}

.biblioteca-reader-document strong {
    color: #eaf4ff;
    font-size: 14px;
}

.biblioteca-reader-document small {
    margin-top: 6px;
    color: #7294b4;
    font-size: 9px;
    letter-spacing: 1.3px;
}

.biblioteca-reader-security {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #71e2c8;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.2px;
}

.biblioteca-reader-security i {
    font-size: 19px;
}

/* HERRAMIENTAS */

.biblioteca-reader-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px 30px;
    border-bottom: 1px solid rgba(77, 164, 225, .18);
    background: #0b1c33;
}

.biblioteca-reader-controls,
.biblioteca-reader-zoom,
.biblioteca-reader-tools {
    display: flex;
    align-items: center;
    gap: 13px;
}

.biblioteca-reader-controls span,
.biblioteca-reader-zoom span,
.biblioteca-reader-tools span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(85, 156, 218, .23);
    border-radius: 7px;
    background: rgba(22, 52, 83, .7);
    color: #80b8dc;
    font-size: 15px;
}

.biblioteca-reader-controls strong,
.biblioteca-reader-zoom strong {
    color: #c8ddef;
    font-size: 11px;
    letter-spacing: 1px;
}

/* ESPACIO DE LECTURA */

.biblioteca-reader-workspace {
    display: grid;
    grid-template-columns: 135px minmax(0, 1fr);
    min-height: 670px;
}

/* MINIATURAS */

.biblioteca-reader-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 30px 15px;
    border-right: 1px solid rgba(77, 164, 225, .17);
    background: #071426;
}

.biblioteca-reader-thumbnail {
    width: 85px;
    text-align: center;
}

.biblioteca-reader-mini-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    height: 115px;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 5px;
    background: #eaf1f8;
    color: #2c5479;
}

.biblioteca-reader-thumbnail.active .biblioteca-reader-mini-page {
    border-color: #4bd4ff;
    box-shadow: 0 0 18px rgba(75, 212, 255, .18);
}

.biblioteca-reader-mini-page i {
    font-size: 23px;
}

.biblioteca-reader-mini-page span {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .4px;
}

.biblioteca-reader-thumbnail small {
    display: block;
    margin-top: 9px;
    color: #6b90b0;
    font-size: 10px;
}

/* ÁREA CENTRAL */

.biblioteca-reader-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    padding: 48px 35px;
    background:
        radial-gradient(circle at center, rgba(53, 112, 174, .13), transparent 60%),
        #0a1729;
}

/* DOCUMENTO DIGITAL */

.biblioteca-reader-paper {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 550px);
    min-height: 590px;
    padding: 38px 42px 28px;
    overflow: hidden;
    background: #f1f5fa;
    color: #1b3652;
    box-shadow: 0 22px 65px rgba(0, 0, 0, .35);
}

.biblioteca-paper-header,
.biblioteca-paper-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #7a8fa5;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 1px;
}

.biblioteca-paper-header {
    padding-bottom: 20px;
    border-bottom: 1px solid #d7e1eb;
}

.biblioteca-paper-content {
    position: relative;
    z-index: 1;
    flex: 1;
    padding-top: 65px;
}

.biblioteca-paper-chapter {
    color: #3587b1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.biblioteca-paper-content h3 {
    margin: 20px 0 25px;
    color: #183653;
    font-size: clamp(28px, 3.2vw, 43px);
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -1px;
}

.biblioteca-paper-content h3 span {
    display: block;
    color: #238cb8;
}

.biblioteca-paper-divider {
    width: 70px;
    height: 4px;
    margin-bottom: 30px;
    background: linear-gradient(90deg, #24b8e7, #8b8cff);
}

.biblioteca-paper-content p {
    max-width: 390px;
    color: #536a80;
    font-size: 13px;
    line-height: 1.9;
}

/* DIAGRAMA DEL DOCUMENTO */

.biblioteca-paper-diagram {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 35px;
}

.biblioteca-paper-diagram > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 17px 8px;
    border: 1px solid #d2e0eb;
    border-radius: 6px;
    background: #e5eef6;
    color: #346181;
    font-size: 9px;
    font-weight: 800;
}

.biblioteca-paper-diagram > div i {
    color: #238fbf;
    font-size: 24px;
}

.biblioteca-paper-diagram > i {
    color: #7f9ab2;
    font-size: 15px;
}

/* LÍNEAS DECORATIVAS */

.biblioteca-paper-lines {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 35px;
}

.biblioteca-paper-lines span {
    height: 6px;
    border-radius: 5px;
    background: #dce5ee;
}

.biblioteca-paper-lines span:nth-child(2) {
    width: 92%;
}

.biblioteca-paper-lines span:nth-child(3) {
    width: 84%;
}

.biblioteca-paper-lines span:nth-child(4) {
    width: 65%;
}

/* MARCA DE AGUA */

.biblioteca-reader-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 120%;
    transform: translate(-50%, -50%) rotate(-32deg);
    color: rgba(25, 90, 135, .075);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: 4px;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

.biblioteca-paper-footer {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid #d7e1eb;
}

/* BARRA INFERIOR */

.biblioteca-reader-statusbar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding: 18px 30px;
    border-top: 1px solid rgba(77, 164, 225, .18);
    background: #0b1c33;
}

.biblioteca-reader-statusbar > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7295b5;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1px;
}

.biblioteca-reader-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #69e2c6;
    box-shadow: 0 0 12px rgba(105, 226, 198, .5);
}

/* CARACTERÍSTICAS */

.biblioteca-reader-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
}

.biblioteca-reader-features > div {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 75px;
    padding: 18px;
    border: 1px solid rgba(75, 155, 220, .22);
    border-radius: 10px;
    background: rgba(12, 35, 61, .7);
}

.biblioteca-reader-features i {
    flex-shrink: 0;
    color: #4dd5ff;
    font-size: 22px;
}

.biblioteca-reader-features span {
    color: #b3cbe0;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .7px;
}

.biblioteca-reader-note {
    max-width: 850px;
    margin: 25px auto 0;
    color: #6f8eab;
    font-size: 12px;
    line-height: 1.8;
    text-align: center;
}

/* RESPONSIVE */

@media (max-width: 1000px) {
    .biblioteca-reader-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .biblioteca-reader {
        padding: 80px 0;
    }

    .biblioteca-reader > .container {
        width: calc(100% - 30px);
    }

    .biblioteca-reader-topbar,
    .biblioteca-reader-toolbar,
    .biblioteca-reader-statusbar {
        padding: 17px;
    }

    .biblioteca-reader-workspace {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .biblioteca-reader-pages {
        flex-direction: row;
        justify-content: center;
        gap: 15px;
        padding: 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(77, 164, 225, .17);
    }

    .biblioteca-reader-thumbnail {
        width: 65px;
    }

    .biblioteca-reader-mini-page {
        height: 85px;
    }

    .biblioteca-reader-mini-page span {
        font-size: 7px;
    }

    .biblioteca-reader-stage {
        padding: 25px 12px;
    }

    .biblioteca-reader-paper {
        min-height: 480px;
        padding: 24px 18px;
    }

    .biblioteca-paper-content {
        padding-top: 40px;
    }

    .biblioteca-paper-content h3 {
        font-size: 29px;
    }

    .biblioteca-paper-diagram {
        gap: 5px;
    }

    .biblioteca-paper-diagram > div {
        font-size: 8px;
        padding: 12px 5px;
    }

    .biblioteca-reader-features {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   BIBLIOTECA VIRTUAL — SECCIÓN 05
   PANEL DE ADMINISTRACIÓN
===================================================== */

.biblioteca-admin {
    position: relative;
    padding: 115px 0 120px;
    background:
        radial-gradient(ellipse at 85% 20%, rgba(109, 75, 215, .11), transparent 45%),
        radial-gradient(ellipse at 10% 75%, rgba(20, 160, 230, .09), transparent 45%),
        #050d1b;
    color: #f2f7ff;
}

.biblioteca-admin > .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* CABECERA */

.biblioteca-admin-heading {
    max-width: 850px;
    margin-bottom: 60px;
}

.biblioteca-admin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin-bottom: 28px;
    color: #52cefa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.biblioteca-admin-heading h2 {
    margin: 0 0 25px;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -2px;
}

.biblioteca-admin-heading h2 span {
    display: block;
    background: linear-gradient(100deg, #38d8ff, #a28dff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.biblioteca-admin-heading p {
    max-width: 720px;
    margin: 0;
    color: #96abc5;
    font-size: 17px;
    line-height: 1.9;
}

/* INTERFAZ */

.biblioteca-admin-interface {
    overflow: hidden;
    border: 1px solid rgba(77, 164, 225, .27);
    border-radius: 16px;
    background: #09182c;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .25);
}

/* BARRA SUPERIOR */

.biblioteca-admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 22px 30px;
    border-bottom: 1px solid rgba(77, 164, 225, .20);
    background: rgba(15, 37, 64, .85);
}

.biblioteca-admin-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.biblioteca-admin-logo {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(68, 207, 255, .4);
    border-radius: 11px;
    background: rgba(41, 177, 240, .12);
    color: #47d7ff;
    font-size: 22px;
}

.biblioteca-admin-brand strong,
.biblioteca-admin-brand small {
    display: block;
}

.biblioteca-admin-brand strong {
    color: #eaf4ff;
    font-size: 13px;
    letter-spacing: 1px;
}

.biblioteca-admin-brand small {
    margin-top: 5px;
    color: #7196b8;
    font-size: 9px;
    letter-spacing: 1.2px;
}

.biblioteca-admin-session {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #71e2c8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.biblioteca-admin-online {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #65e7ca;
    box-shadow: 0 0 12px rgba(101, 231, 202, .6);
}

/* DISTRIBUCIÓN */

.biblioteca-admin-layout {
    display: grid;
    grid-template-columns: 205px minmax(0, 1fr);
    min-height: 610px;
}

/* MENÚ LATERAL */

.biblioteca-admin-sidebar {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 28px 15px;
    border-right: 1px solid rgba(77, 164, 225, .18);
    background: #071426;
}

.biblioteca-admin-menu-title {
    margin: 0 10px 18px;
    color: #507695;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.4px;
}

.biblioteca-admin-menu-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #7898b5;
    font-size: 12px;
    font-weight: 600;
}

.biblioteca-admin-menu-item i {
    flex-shrink: 0;
    font-size: 17px;
}

.biblioteca-admin-menu-item.active {
    border-color: rgba(58, 204, 255, .25);
    background: rgba(46, 172, 238, .12);
    color: #4bd8ff;
}

.biblioteca-admin-sidebar-bottom {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding: 20px 8px 0;
    color: #507695;
    font-size: 9px;
    letter-spacing: .8px;
}

/* CONTENIDO CENTRAL */

.biblioteca-admin-content {
    min-width: 0;
    padding: 35px 30px 25px;
}

.biblioteca-admin-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
}

.biblioteca-admin-welcome span {
    color: #5f9fc7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.biblioteca-admin-welcome h3 {
    margin: 9px 0;
    color: #f2f7ff;
    font-size: 27px;
    font-weight: 750;
}

.biblioteca-admin-welcome p {
    margin: 0;
    color: #7898b5;
    font-size: 12px;
}

.biblioteca-admin-period {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #6d9ec2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
}

/* TARJETAS ESTADÍSTICAS */

.biblioteca-admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.biblioteca-admin-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 20px 16px;
    border: 1px solid rgba(77, 164, 225, .20);
    border-radius: 11px;
    background: linear-gradient(145deg, #112b49, #0a1e36);
    transition: transform .3s ease, border-color .3s ease;
}

.biblioteca-admin-stat:hover {
    transform: translateY(-4px);
    border-color: rgba(75, 212, 255, .5);
}

.biblioteca-admin-stat-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 10px;
    font-size: 21px;
}

.biblioteca-admin-stat-icon.cyan {
    background: rgba(40, 190, 240, .14);
    color: #4bd8ff;
}

.biblioteca-admin-stat-icon.violet {
    background: rgba(142, 105, 255, .15);
    color: #ae94ff;
}

.biblioteca-admin-stat-icon.blue {
    background: rgba(75, 125, 255, .15);
    color: #80a7ff;
}

.biblioteca-admin-stat-icon.green {
    background: rgba(48, 206, 160, .13);
    color: #69e4bd;
}

.biblioteca-admin-stat > span {
    color: #7b9bb9;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .8px;
}

.biblioteca-admin-stat strong {
    margin: 12px 0 6px;
    color: #f1f8ff;
    font-size: 29px;
    font-weight: 800;
}

.biblioteca-admin-stat small {
    color: #5e819f;
    font-size: 10px;
}

/* TABLA ADMINISTRATIVA */

.biblioteca-admin-table-panel {
    overflow: hidden;
    border: 1px solid rgba(77, 164, 225, .20);
    border-radius: 12px;
    background: #0c213a;
}

.biblioteca-admin-table-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 23px;
    border-bottom: 1px solid rgba(77, 164, 225, .17);
}

.biblioteca-admin-table-heading span {
    color: #5f9fc7;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 1.2px;
}

.biblioteca-admin-table-heading h4 {
    margin: 8px 0 0;
    color: #e9f4ff;
    font-size: 18px;
}

.biblioteca-admin-table-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #71d7bf;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .7px;
}

.biblioteca-admin-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.biblioteca-admin-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    text-align: left;
}

.biblioteca-admin-table th {
    padding: 17px 20px;
    border-bottom: 1px solid rgba(77, 164, 225, .15);
    background: #102a46;
    color: #759bb9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.biblioteca-admin-table td {
    padding: 19px 20px;
    border-bottom: 1px solid rgba(77, 164, 225, .11);
    color: #a6bfd5;
    font-size: 11px;
}

.biblioteca-admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.biblioteca-admin-table td:first-child {
    color: #d8e9f7;
    font-weight: 650;
}

.biblioteca-admin-table td:first-child i {
    margin-right: 9px;
    color: #54cfff;
    font-size: 16px;
}

.biblioteca-admin-active,
.biblioteca-admin-review {
    display: inline-block;
    padding: 7px 9px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    white-space: nowrap;
}

.biblioteca-admin-active {
    background: rgba(51, 198, 150, .12);
    color: #70e1bd;
}

.biblioteca-admin-review {
    background: rgba(255, 184, 77, .12);
    color: #f5c77b;
}

/* PIE DEL DASHBOARD */

.biblioteca-admin-content-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 24px;
}

.biblioteca-admin-content-footer span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #6689a8;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 1px;
}

/* MÓDULOS INFERIORES */

.biblioteca-admin-modules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.biblioteca-admin-modules > div {
    padding: 28px;
    border: 1px solid rgba(77, 164, 225, .20);
    border-radius: 12px;
    background: rgba(12, 35, 61, .75);
}

.biblioteca-admin-modules i {
    display: block;
    margin-bottom: 20px;
    color: #4dd5ff;
    font-size: 29px;
}

.biblioteca-admin-modules strong {
    display: block;
    margin-bottom: 12px;
    color: #e9f4ff;
    font-size: 16px;
}

.biblioteca-admin-modules p {
    margin: 0;
    color: #88a3bd;
    font-size: 13px;
    line-height: 1.8;
}

.biblioteca-admin-note {
    max-width: 850px;
    margin: 25px auto 0;
    color: #6f8eab;
    font-size: 12px;
    line-height: 1.8;
    text-align: center;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .biblioteca-admin-layout {
        grid-template-columns: 75px minmax(0, 1fr);
    }

    .biblioteca-admin-menu-title,
    .biblioteca-admin-menu-item span,
    .biblioteca-admin-sidebar-bottom {
        display: none;
    }

    .biblioteca-admin-menu-item {
        justify-content: center;
    }

    .biblioteca-admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .biblioteca-admin {
        padding: 80px 0;
    }

    .biblioteca-admin > .container {
        width: calc(100% - 30px);
    }

    .biblioteca-admin-topbar {
        padding: 18px;
    }

    .biblioteca-admin-session {
        display: none;
    }

    .biblioteca-admin-layout {
        grid-template-columns: 1fr;
    }

    .biblioteca-admin-sidebar {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(77, 164, 225, .18);
    }

    .biblioteca-admin-menu-item {
        padding: 10px;
    }

    .biblioteca-admin-content {
        padding: 25px 16px;
    }

    .biblioteca-admin-welcome h3 {
        font-size: 22px;
    }

    .biblioteca-admin-period {
        display: none;
    }

    .biblioteca-admin-stats {
        gap: 10px;
    }

    .biblioteca-admin-stat {
        padding: 16px 12px;
    }

    .biblioteca-admin-stat strong {
        font-size: 25px;
    }

    .biblioteca-admin-table-heading {
        padding: 18px;
    }

    .biblioteca-admin-modules {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   BIBLIOTECA VIRTUAL — SECCIÓN 06
   TECNOLOGÍA Y ARQUITECTURA
===================================================== */

.biblioteca-tech {
    position: relative;
    padding: 115px 0 120px;
    background:
        radial-gradient(ellipse at 90% 15%, rgba(110, 76, 215, .12), transparent 45%),
        radial-gradient(ellipse at 5% 75%, rgba(18, 160, 230, .09), transparent 45%),
        #071326;
    color: #f2f7ff;
}

.biblioteca-tech > .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* CABECERA */

.biblioteca-tech-heading {
    max-width: 850px;
    margin-bottom: 60px;
}

.biblioteca-tech-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin-bottom: 28px;
    color: #52cefa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.biblioteca-tech-heading h2 {
    margin: 0 0 25px;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -2px;
}

.biblioteca-tech-heading h2 span {
    display: block;
    background: linear-gradient(100deg, #38d8ff, #a28dff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.biblioteca-tech-heading p {
    max-width: 720px;
    margin: 0;
    color: #96abc5;
    font-size: 17px;
    line-height: 1.9;
}

/* TARJETAS TECNOLÓGICAS */

.biblioteca-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 55px;
}

.biblioteca-tech-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 330px;
    padding: 27px 24px;
    border: 1px solid rgba(77, 164, 225, .20);
    border-radius: 14px;
    background: linear-gradient(
        145deg,
        rgba(17, 43, 73, .9),
        rgba(8, 23, 43, .95)
    );
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.biblioteca-tech-card:hover {
    transform: translateY(-7px);
    border-color: rgba(75, 212, 255, .55);
    box-shadow: 0 18px 45px rgba(0, 180, 255, .10);
}

.biblioteca-tech-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 30px;
}

.biblioteca-tech-card-top > span {
    color: #6487a6;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 1px;
    text-align: right;
}

.biblioteca-tech-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 13px;
    font-size: 27px;
}

.biblioteca-tech-icon.php {
    background: rgba(117, 121, 218, .15);
    color: #a7aaff;
}

.biblioteca-tech-icon.mysql {
    background: rgba(43, 176, 230, .13);
    color: #4bd3ff;
}

.biblioteca-tech-icon.bootstrap {
    background: rgba(157, 90, 238, .15);
    color: #c19aff;
}

.biblioteca-tech-icon.javascript {
    background: rgba(240, 199, 62, .12);
    color: #f4d46d;
}

.biblioteca-tech-card h3 {
    margin: 0 0 17px;
    color: #f0f7ff;
    font-size: 24px;
    font-weight: 800;
}

.biblioteca-tech-card p {
    margin: 0 0 30px;
    color: #8ea8c1;
    font-size: 13px;
    line-height: 1.85;
}

.biblioteca-tech-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(77, 164, 225, .17);
    color: #638cae;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .8px;
}

.biblioteca-tech-card-footer i {
    color: #4bd4ff;
    font-size: 17px;
}

/* PANEL DE ARQUITECTURA */

.biblioteca-tech-architecture {
    padding: 35px;
    border: 1px solid rgba(77, 164, 225, .24);
    border-radius: 15px;
    background: linear-gradient(
        145deg,
        rgba(14, 37, 65, .9),
        rgba(7, 22, 42, .95)
    );
}

.biblioteca-tech-architecture-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 45px;
}

.biblioteca-tech-architecture-header span {
    color: #5ba6d2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.biblioteca-tech-architecture-header h3 {
    margin: 10px 0 0;
    color: #e9f4ff;
    font-size: 24px;
}

.biblioteca-tech-architecture-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border: 1px solid rgba(75, 212, 255, .25);
    border-radius: 7px;
    background: rgba(45, 175, 238, .10);
    color: #59d5ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* DIAGRAMA */

.biblioteca-tech-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    margin-bottom: 38px;
}

.biblioteca-tech-node {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 175px;
    padding: 20px 12px;
    border: 1px solid rgba(74, 158, 225, .25);
    border-radius: 11px;
    background: rgba(10, 30, 54, .9);
    text-align: center;
    transition: border-color .3s ease, transform .3s ease;
}

.biblioteca-tech-node:hover {
    transform: translateY(-4px);
    border-color: rgba(75, 212, 255, .6);
}

.biblioteca-tech-node-icon {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    margin-bottom: 20px;
    border: 1px solid rgba(75, 212, 255, .27);
    border-radius: 12px;
    background: rgba(45, 175, 238, .10);
    color: #4dd5ff;
    font-size: 25px;
}

.biblioteca-tech-node strong {
    color: #e4f2ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
    line-height: 1.5;
}

.biblioteca-tech-node > span {
    margin-top: 9px;
    color: #7197b7;
    font-size: 11px;
}

.biblioteca-tech-arrow {
    flex-shrink: 0;
    color: #4b9dc8;
    font-size: 23px;
}

/* PIE DEL PANEL */

.biblioteca-tech-architecture-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 27px;
    border-top: 1px solid rgba(77, 164, 225, .17);
}

.biblioteca-tech-architecture-footer > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7da2c0;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .8px;
}

.biblioteca-tech-architecture-footer i {
    color: #50cfff;
    font-size: 18px;
}

/* BLOQUE FINAL */

.biblioteca-tech-summary {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 35px;
    padding: 35px 40px;
    border: 1px solid rgba(75, 212, 255, .25);
    border-radius: 14px;
    background:
        linear-gradient(
            110deg,
            rgba(21, 91, 130, .28),
            rgba(54, 35, 105, .22)
        );
}

.biblioteca-tech-summary-icon {
    display: grid;
    place-items: center;
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    border: 1px solid rgba(75, 212, 255, .35);
    border-radius: 17px;
    background: rgba(35, 159, 220, .12);
    color: #4dd5ff;
    font-size: 34px;
}

.biblioteca-tech-summary span {
    color: #57c9f3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.biblioteca-tech-summary h3 {
    margin: 11px 0;
    color: #eff7ff;
    font-size: 23px;
}

.biblioteca-tech-summary p {
    max-width: 720px;
    margin: 0;
    color: #91abc4;
    font-size: 13px;
    line-height: 1.8;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .biblioteca-tech-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .biblioteca-tech-flow {
        flex-wrap: wrap;
        justify-content: center;
    }

    .biblioteca-tech-node {
        flex: 1 1 180px;
    }
}

@media (max-width: 700px) {
    .biblioteca-tech {
        padding: 80px 0;
    }

    .biblioteca-tech > .container {
        width: calc(100% - 30px);
    }

    .biblioteca-tech-grid {
        grid-template-columns: 1fr;
    }

    .biblioteca-tech-card {
        min-height: auto;
    }

    .biblioteca-tech-architecture {
        padding: 25px 18px;
    }

    .biblioteca-tech-architecture-header h3 {
        font-size: 21px;
    }

    .biblioteca-tech-flow {
        flex-direction: column;
        gap: 14px;
    }

    .biblioteca-tech-node {
        width: 100%;
        flex: none;
        min-height: 145px;
    }

    .biblioteca-tech-arrow {
        transform: rotate(90deg);
    }

    .biblioteca-tech-architecture-footer {
        flex-direction: column;
    }

    .biblioteca-tech-summary {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 23px;
    }

    .biblioteca-tech-summary h3 {
        font-size: 20px;
    }
}

/* =====================================================
   BIBLIOTECA VIRTUAL — SECCIÓN 07
   IMPACTO Y BENEFICIOS
===================================================== */

.biblioteca-impact {
    position: relative;
    overflow: hidden;
    padding: 115px 0 120px;
    background:
        radial-gradient(ellipse at 85% 25%,
            rgba(111, 78, 224, .12), transparent 48%),
        radial-gradient(ellipse at 8% 80%,
            rgba(16, 170, 235, .10), transparent 45%),
        #050d1b;
    color: #f2f7ff;
}

.biblioteca-impact > .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* CABECERA */

.biblioteca-impact-heading {
    max-width: 850px;
    margin-bottom: 60px;
}

.biblioteca-impact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin-bottom: 28px;
    color: #52cefa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.biblioteca-impact-heading h2 {
    margin: 0 0 25px;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -2px;
}

.biblioteca-impact-heading h2 span {
    display: block;
    background: linear-gradient(100deg, #38d8ff, #a28dff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.biblioteca-impact-heading p {
    max-width: 720px;
    margin: 0;
    color: #96abc5;
    font-size: 17px;
    line-height: 1.9;
}

/* TARJETAS DE BENEFICIOS */

.biblioteca-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 65px;
}

.biblioteca-impact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 335px;
    padding: 30px 25px;
    border: 1px solid rgba(77, 164, 225, .20);
    border-radius: 14px;
    background: linear-gradient(
        145deg,
        rgba(17, 43, 73, .88),
        rgba(8, 23, 43, .95)
    );
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.biblioteca-impact-card:hover {
    transform: translateY(-7px);
    border-color: rgba(75, 212, 255, .55);
    box-shadow: 0 18px 45px rgba(0, 180, 255, .10);
}

.biblioteca-impact-card-number {
    position: absolute;
    top: 25px;
    right: 25px;
    color: rgba(92, 155, 201, .35);
    font-size: 29px;
    font-weight: 850;
}

.biblioteca-impact-card-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 35px;
    border: 1px solid rgba(75, 212, 255, .3);
    border-radius: 14px;
    background: rgba(44, 175, 238, .10);
    color: #4dd5ff;
    font-size: 27px;
}

.biblioteca-impact-card h3 {
    margin: 0 0 18px;
    color: #eef7ff;
    font-size: 20px;
    font-weight: 800;
}

.biblioteca-impact-card p {
    margin: 0 0 30px;
    color: #8fa8c1;
    font-size: 13px;
    line-height: 1.85;
}

.biblioteca-impact-card > span {
    display: block;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(77, 164, 225, .17);
    color: #5f96b9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* BLOQUE DESTACADO */

.biblioteca-impact-feature {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 35px;
    min-height: 470px;
    padding: 50px;
    overflow: hidden;
    border: 1px solid rgba(75, 212, 255, .24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 78% 50%,
            rgba(45, 119, 207, .17), transparent 45%),
        linear-gradient(120deg, #102b49, #091a32 70%);
}

.biblioteca-impact-feature-content {
    position: relative;
    z-index: 2;
}

.biblioteca-impact-feature-content > span {
    color: #55cfff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.biblioteca-impact-feature-content h3 {
    margin: 22px 0 25px;
    color: #f2f8ff;
    font-size: clamp(31px, 3.6vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
}

.biblioteca-impact-feature-content h3 strong {
    display: block;
    background: linear-gradient(100deg, #40d8ff, #a998ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.biblioteca-impact-feature-content p {
    max-width: 520px;
    margin: 0;
    color: #9ab2c9;
    font-size: 14px;
    line-height: 1.95;
}

/* ETIQUETAS */

.biblioteca-impact-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.biblioteca-impact-tags span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border: 1px solid rgba(77, 164, 225, .25);
    border-radius: 7px;
    background: rgba(24, 69, 104, .30);
    color: #a9d9f2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .7px;
}

.biblioteca-impact-tags i {
    color: #62e0c3;
    font-size: 14px;
}

/* ECOSISTEMA VISUAL */

.biblioteca-impact-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 370px;
    isolation: isolate;
}

.biblioteca-impact-visual::before {
    content: "";
    position: absolute;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: rgba(40, 165, 240, .12);
    filter: blur(55px);
    z-index: -1;
}

.biblioteca-impact-orbit {
    position: absolute;
    width: 290px;
    height: 290px;
    border: 1px dashed rgba(75, 212, 255, .27);
    border-radius: 50%;
    animation: bibliotecaOrbitRotate 35s linear infinite;
}

.biblioteca-impact-orbit.orbit-two {
    width: 225px;
    height: 225px;
    border-style: solid;
    border-color: rgba(145, 112, 255, .22);
    animation-direction: reverse;
    animation-duration: 28s;
}

.biblioteca-impact-core {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(75, 212, 255, .55);
    border-radius: 28px;
    background: linear-gradient(145deg, #155a8b, #172a62);
    color: #75e5ff;
    font-size: 66px;
    box-shadow:
        0 0 35px rgba(49, 191, 255, .18),
        inset 0 0 30px rgba(75, 212, 255, .09);
}

.biblioteca-impact-floating {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(75, 212, 255, .35);
    border-radius: 15px;
    background: #102c4d;
    color: #66dfff;
    font-size: 26px;
    box-shadow: 0 12px 25px rgba(0, 0, 0, .25);
    animation: bibliotecaFloat 5s ease-in-out infinite;
}

.biblioteca-impact-floating.floating-one {
    top: 32px;
    left: 48%;
}

.biblioteca-impact-floating.floating-two {
    bottom: 65px;
    left: 7%;
    animation-delay: -1.5s;
}

.biblioteca-impact-floating.floating-three {
    bottom: 75px;
    right: 5%;
    animation-delay: -3s;
}

.biblioteca-impact-visual-label {
    position: absolute;
    bottom: 0;
    color: #6598b9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-align: center;
}

@keyframes bibliotecaOrbitRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

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

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

/* MENSAJE FINAL */

.biblioteca-impact-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid rgba(77, 164, 225, .18);
}

.biblioteca-impact-bottom > div {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.biblioteca-impact-bottom i {
    color: #4dd5ff;
    font-size: 23px;
}

.biblioteca-impact-bottom span {
    color: #68b8dc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.biblioteca-impact-bottom p {
    max-width: 560px;
    margin: 0;
    color: #8ba7bf;
    font-size: 13px;
    line-height: 1.8;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .biblioteca-impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .biblioteca-impact-feature {
        grid-template-columns: 1fr;
    }

    .biblioteca-impact-visual {
        min-height: 390px;
    }
}

@media (max-width: 700px) {
    .biblioteca-impact {
        padding: 80px 0;
    }

    .biblioteca-impact > .container {
        width: calc(100% - 30px);
    }

    .biblioteca-impact-grid {
        grid-template-columns: 1fr;
    }

    .biblioteca-impact-card {
        min-height: auto;
    }

    .biblioteca-impact-feature {
        padding: 30px 22px;
    }

    .biblioteca-impact-feature-content h3 {
        font-size: 32px;
    }

    .biblioteca-impact-visual {
        min-height: 330px;
    }

    .biblioteca-impact-orbit {
        width: 245px;
        height: 245px;
    }

    .biblioteca-impact-orbit.orbit-two {
        width: 185px;
        height: 185px;
    }

    .biblioteca-impact-core {
        width: 105px;
        height: 105px;
        font-size: 53px;
    }

    .biblioteca-impact-floating {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .biblioteca-impact-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .biblioteca-impact-orbit,
    .biblioteca-impact-floating {
        animation: none;
    }
}

/* =====================================================
   BIBLIOTECA VIRTUAL — SECCIÓN 08
   CIERRE DEL PROYECTO
===================================================== */

.biblioteca-closing {
    position: relative;
    overflow: hidden;
    padding: 125px 0 75px;
    background:
        radial-gradient(ellipse at 50% 35%,
            rgba(38, 155, 225, .16), transparent 48%),
        radial-gradient(ellipse at 80% 70%,
            rgba(112, 75, 220, .12), transparent 45%),
        #061020;
    color: #f2f7ff;
}

.biblioteca-closing::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(78, 160, 220, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78, 160, 220, .035) 1px, transparent 1px);
    background-size: 55px 55px;
    pointer-events: none;
}

.biblioteca-closing > .container {
    position: relative;
    z-index: 1;
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.biblioteca-closing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1050px;
    margin: 0 auto;
    text-align: center;
}

/* IDENTIFICADOR SUPERIOR */

.biblioteca-closing-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin-bottom: 40px;
    color: #5acfff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

/* SÍMBOLO CENTRAL */

.biblioteca-closing-symbol {
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    margin-bottom: 38px;
    border: 1px solid rgba(75, 212, 255, .45);
    border-radius: 25px;
    background: linear-gradient(
        145deg,
        rgba(33, 141, 205, .25),
        rgba(104, 68, 205, .20)
    );
    color: #65ddff;
    font-size: 49px;
    box-shadow:
        0 0 50px rgba(46, 178, 240, .12),
        inset 0 0 25px rgba(75, 212, 255, .08);
    animation: bibliotecaClosingFloat 5s ease-in-out infinite;
}

/* TÍTULO */

.biblioteca-closing h2 {
    max-width: 1000px;
    margin: 0 0 30px;
    color: #f4f9ff;
    font-size: clamp(40px, 5.5vw, 75px);
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -2.5px;
}

.biblioteca-closing h2 span {
    display: block;
    margin-top: 10px;
    background: linear-gradient(100deg, #42d9ff, #a994ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* DESCRIPCIÓN */

.biblioteca-closing-content > p {
    max-width: 760px;
    margin: 0 auto 35px;
    color: #9ab2ca;
    font-size: 17px;
    line-height: 1.95;
}

/* ETIQUETAS */

.biblioteca-closing-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-bottom: 45px;
}

.biblioteca-closing-tags span {
    padding: 10px 16px;
    border: 1px solid rgba(75, 165, 225, .25);
    border-radius: 6px;
    background: rgba(17, 48, 78, .55);
    color: #8fbbd9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* BOTONES */

.biblioteca-closing-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 95px;
}

.biblioteca-closing-btn-primary,
.biblioteca-closing-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 57px;
    padding: 16px 26px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1px;
    text-decoration: none;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.biblioteca-closing-btn-primary {
    border: 1px solid #48cfff;
    background: linear-gradient(110deg, #31c9f5, #7275ef);
    color: #061324;
    box-shadow: 0 10px 35px rgba(44, 181, 240, .18);
}

.biblioteca-closing-btn-secondary {
    border: 1px solid rgba(102, 178, 230, .40);
    background: rgba(14, 39, 67, .70);
    color: #d8ebfa;
}

.biblioteca-closing-btn-primary:hover,
.biblioteca-closing-btn-secondary:hover {
    transform: translateY(-4px);
}

.biblioteca-closing-btn-primary:hover {
    color: #061324;
    box-shadow: 0 15px 45px rgba(44, 181, 240, .30);
}

.biblioteca-closing-btn-secondary:hover {
    border-color: #4bd5ff;
    color: #ffffff;
}

/* PIE DE SECCIÓN */

.biblioteca-closing-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    padding-top: 30px;
    border-top: 1px solid rgba(77, 164, 225, .20);
}

.biblioteca-closing-footer span {
    color: #668cab;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

/* ANIMACIÓN */

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

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

/* RESPONSIVE */

@media (max-width: 700px) {
    .biblioteca-closing {
        padding: 85px 0 55px;
    }

    .biblioteca-closing > .container {
        width: calc(100% - 30px);
    }

    .biblioteca-closing-meta {
        font-size: 9px;
    }

    .biblioteca-closing-symbol {
        width: 80px;
        height: 80px;
        font-size: 39px;
    }

    .biblioteca-closing h2 {
        font-size: clamp(36px, 9vw, 52px);
        letter-spacing: -1.5px;
    }

    .biblioteca-closing-content > p {
        font-size: 15px;
    }

    .biblioteca-closing-actions {
        flex-direction: column;
        width: 100%;
        margin-bottom: 65px;
    }

    .biblioteca-closing-btn-primary,
    .biblioteca-closing-btn-secondary {
        width: 100%;
    }

    .biblioteca-closing-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .biblioteca-closing-symbol {
        animation: none;
    }
}

/* =====================================================
   BOTÓN — PROYECTO BIBLIOTECA VIRTUAL
   INNOVATION LAB
===================================================== */

.lab-project-library-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    margin-top: 30px;
    padding: 16px 24px;
    min-height: 54px;

    border: 1px solid rgba(74, 211, 255, 0.55);
    border-radius: 8px;

    background: linear-gradient(
        110deg,
        rgba(27, 134, 190, 0.20),
        rgba(89, 71, 177, 0.18)
    );

    color: #8ee7ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-decoration: none;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.lab-project-library-btn i {
    font-size: 17px;
    transition: transform 0.3s ease;
}

.lab-project-library-btn:hover {
    transform: translateY(-4px);

    border-color: #4dd8ff;

    background: linear-gradient(
        110deg,
        rgba(35, 165, 225, 0.32),
        rgba(107, 82, 215, 0.28)
    );

    color: #ffffff;

    box-shadow: 0 12px 35px rgba(40, 184, 240, 0.16);
}

.lab-project-library-btn:hover i {
    transform: translate(3px, -3px);
}

.lab-project-library-btn:focus-visible {
    outline: 2px solid #70e1ff;
    outline-offset: 4px;
}

/* ADAPTACIÓN A CELULARES */

@media (max-width: 700px) {
    .lab-project-library-btn {
        width: 100%;
        padding: 16px 18px;
        gap: 10px;
        font-size: 10px;
        text-align: center;
    }
}

/* =====================================================
   ALVAS PERÚ SYSTEM
   NOSOTROS — MEJORA 01: HERO CORPORATIVO
===================================================== */

.about-page .about-hero {
    padding-top: 145px;
    padding-bottom: 100px;
    min-height: auto;
    background:
        radial-gradient(
            ellipse at 75% 35%,
            rgba(42, 117, 210, .12),
            transparent 55%
        ),
        #050e1d;
}

.about-page .about-hero > .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* IDENTIFICADORES */

.about-page .about-hero-top {
    padding-bottom: 30px;
}

.about-page .about-hero-top .section-label,
.about-page .about-hero-status {
    font-size: 11px;
    letter-spacing: 1.5px;
}

.about-page .about-hero-status {
    color: #85aeca;
}

/* TÍTULO Y DESCRIPCIÓN */

.about-page .about-hero-content {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    gap: 65px;
    padding: 80px 0 65px;
}

.about-page .about-eyebrow {
    color: #5ccfff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.about-page .about-hero-title h1 {
    max-width: 760px;
    margin-top: 22px;
    font-size: clamp(52px, 6.5vw, 95px);
    line-height: 1.03;
    letter-spacing: -3px;
}

.about-page .about-hero-description {
    max-width: 440px;
}

.about-page .about-description-number {
    margin-bottom: 18px;
    color: #53caff;
    font-size: 12px;
    font-weight: 700;
}

.about-page .about-hero-description p {
    color: #a4bdd3;
    font-size: 16px;
    line-height: 1.9;
}

.about-page .about-description-small {
    color: #70b9dc;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* ADAPTACIÓN RESPONSIVE */

@media (max-width: 850px) {
    .about-page .about-hero-content {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 65px 0 50px;
    }

    .about-page .about-hero-description {
        max-width: 680px;
    }
}

@media (max-width: 600px) {
    .about-page .about-hero {
        padding-top: 110px;
        padding-bottom: 65px;
    }

    .about-page .about-hero > .container {
        width: calc(100% - 30px);
    }

    .about-page .about-hero-top {
        gap: 15px;
    }

    .about-page .about-hero-title h1 {
        font-size: clamp(44px, 12vw, 68px);
        letter-spacing: -2px;
    }

    .about-page .about-hero-description p {
        font-size: 15px;
    }
}

/* =====================================================
   NOSOTROS — MEJORA 02: NÚCLEO VISUAL
===================================================== */

.about-page .about-core-info > span,
.about-page .about-core-text > span {
    display: block;
    color: #66cfff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 28px;
}

.about-page .about-core-info strong {
    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.15;
}

.about-page .about-core-info strong em {
    color: #86b8d8;
}

.about-page .about-core-text p {
    color: #a6bed4;
    font-size: 15px;
    line-height: 1.85;
    max-width: 340px;
}

.about-page .about-core-center > span {
    font-size: 10px;
    letter-spacing: 2px;
}

.about-page .about-core-center small {
    font-size: 9px;
    line-height: 1.6;
    letter-spacing: 1.5px;
}

@media (max-width: 700px) {
    .about-page .about-core-info strong {
        font-size: 34px;
    }

    .about-page .about-core-text p {
        font-size: 14px;
    }
}

/* =====================================================
   NOSOTROS — MEJORA 03: QUIÉNES SOMOS
===================================================== */

.about-page .about-story {
    padding: 110px 0 105px;
}

.about-page .about-story .container {
    width: min(100% - 48px, 1200px);
    margin: 0 auto;
}

/* TÍTULO PRINCIPAL */

.about-page .about-story-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 85px;
    align-items: start;
}

.about-page .about-story h2 {
    font-size: clamp(46px, 5.5vw, 78px);
    line-height: 1.08;
    letter-spacing: -2.5px;
}

.about-page .about-story h2 span {
    color: #86c9ef;
}

/* DESCRIPCIÓN EMPRESARIAL */

.about-page .about-story-content {
    padding-top: 5px;
}

.about-page .about-story-content p {
    color: #a4b9cf;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 22px;
}

.about-page .about-story-content .about-story-lead {
    color: #e0edfa;
    font-size: 17px;
    line-height: 1.8;
}

/* CUATRO PRINCIPIOS */

.about-page .about-principles {
    margin-top: 85px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-page .about-principle {
    min-height: 250px;
    padding: 32px 28px;
}

.about-page .about-principle > span {
    display: block;
    color: #58cfff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.about-page .about-principle strong {
    display: block;
    color: #f0f7ff;
    font-size: 23px;
    margin-top: 45px;
}

.about-page .about-principle p {
    color: #a2b8cd;
    font-size: 14px;
    line-height: 1.8;
    margin-top: 16px;
}

/* TABLETAS */

@media (max-width: 950px) {
    .about-page .about-story-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .about-page .about-principles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* CELULARES */

@media (max-width: 600px) {
    .about-page .about-story {
        padding: 75px 0;
    }

    .about-page .about-story .container {
        width: calc(100% - 30px);
    }

    .about-page .about-story h2 {
        font-size: clamp(40px, 10vw, 55px);
        letter-spacing: -1.5px;
    }

    .about-page .about-story-content p {
        font-size: 14px;
    }

    .about-page .about-principles {
        grid-template-columns: 1fr;
        margin-top: 50px;
    }

    .about-page .about-principle {
        min-height: 200px;
        padding: 28px;
    }

    .about-page .about-principle strong {
        margin-top: 28px;
    }
}

/* =====================================================
   NOSOTROS — MEJORA 04: MISIÓN Y VISIÓN
===================================================== */

.about-page .about-direction {
    padding: 110px 0;
}

.about-page .about-direction .container {
    width: min(100% - 48px, 1200px);
    margin: 0 auto;
}

/* TÍTULO */

.about-page .about-direction-header h2 {
    font-size: clamp(46px, 5.5vw, 78px);
    line-height: 1.08;
    letter-spacing: -2.5px;
}

.about-page .about-direction-header h2 span {
    color: #86c9ef;
}

/* DISTRIBUCIÓN DE TARJETAS */

.about-page .direction-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 65px;
}

.about-page .direction-card {
    min-height: 460px;
    padding: 45px;
}

/* IDENTIFICADORES */

.about-page .direction-number {
    color: #62cfff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* ÍCONOS */

.about-page .direction-icon {
    margin-top: 55px;
}

.about-page .direction-icon i {
    font-size: 25px;
    color: #5bd2ff;
}

/* TÍTULOS DE LAS TARJETAS */

.about-page .direction-card h3 {
    color: #f0f7ff;
    font-size: clamp(27px, 2.5vw, 36px);
    line-height: 1.25;
    letter-spacing: -1px;
    margin-top: 35px;
}

/* DESCRIPCIONES */

.about-page .direction-card p {
    color: #a8bfd5;
    font-size: 15px;
    line-height: 1.9;
    margin-top: 25px;
}

/* ETIQUETAS INFERIORES */

.about-page .direction-status {
    color: #70c9ed;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* TABLETAS Y CELULARES */

@media (max-width: 850px) {
    .about-page .direction-grid {
        grid-template-columns: 1fr;
    }

    .about-page .direction-card {
        min-height: auto;
        padding: 38px;
    }
}

@media (max-width: 600px) {
    .about-page .about-direction {
        padding: 75px 0;
    }

    .about-page .about-direction .container {
        width: calc(100% - 30px);
    }

    .about-page .about-direction-header h2 {
        font-size: clamp(40px, 10vw, 55px);
    }

    .about-page .direction-card {
        padding: 28px;
    }

    .about-page .direction-card h3 {
        font-size: 27px;
    }

    .about-page .direction-card p {
        font-size: 14px;
    }
}

/* =====================================================
   NOSOTROS — MEJORA 05: VALORES CORPORATIVOS
===================================================== */

.about-page .about-values {
    padding: 110px 0;
}

.about-page .about-values .container {
    width: min(100% - 48px, 1200px);
    margin: 0 auto;
}

/* ENCABEZADO */

.about-page .values-heading h2 {
    font-size: clamp(46px, 5.5vw, 78px);
    line-height: 1.08;
    letter-spacing: -2.5px;
}

.about-page .values-heading h2 span {
    color: #86c9ef;
}

.about-page .values-heading > p {
    max-width: 440px;
    color: #a9bfd5;
    font-size: 16px;
    line-height: 1.9;
}

/* TARJETAS */

.about-page .values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 70px;
}

.about-page .value-card {
    min-height: 340px;
    padding: 32px 28px;
}

.about-page .value-number {
    color: #5ccfff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.about-page .value-card > i {
    color: #52d4ff;
    font-size: 30px;
}

.about-page .value-card h3 {
    color: #f0f7ff;
    font-size: 23px;
    line-height: 1.3;
}

.about-page .value-card p {
    color: #a7bfd5;
    font-size: 14px;
    line-height: 1.85;
    margin-top: 17px;
}

/* TABLETAS */

@media (max-width: 950px) {
    .about-page .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-page .values-heading {
        gap: 30px;
    }
}

/* CELULARES */

@media (max-width: 600px) {
    .about-page .about-values {
        padding: 75px 0;
    }

    .about-page .about-values .container {
        width: calc(100% - 30px);
    }

    .about-page .values-heading h2 {
        font-size: clamp(40px, 10vw, 55px);
        letter-spacing: -1.5px;
    }

    .about-page .values-heading > p {
        font-size: 14px;
    }

    .about-page .values-grid {
        grid-template-columns: 1fr;
        margin-top: 45px;
    }

    .about-page .value-card {
        min-height: 260px;
        padding: 28px;
    }
}

/* =====================================================
   NOSOTROS — MEJORA 06: CAPACIDADES
===================================================== */

.about-page .about-capabilities {
    padding: 110px 0;
}

.about-page .about-capabilities .container {
    width: min(100% - 48px, 1200px);
    margin: 0 auto;
}

/* DISTRIBUCIÓN */

.about-page .capabilities-layout {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 75px;
    align-items: center;
}

/* TÍTULO */

.about-page .capabilities-title h2 {
    font-size: clamp(46px, 5.5vw, 78px);
    line-height: 1.08;
    letter-spacing: -2.5px;
}

.about-page .capabilities-title h2 span {
    color: #86c9ef;
}

/* LISTADO DE CAPACIDADES */

.about-page .capabilities-list {
    width: 100%;
}

.about-page .capability-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 32px;
    gap: 18px;
    align-items: center;
    min-height: 100px;
    padding: 20px 15px;
    transition: background .3s ease;
}

.about-page .capability-row:hover {
    background: rgba(56, 180, 255, .06);
}

.about-page .capability-row > span {
    color: #59cfff;
    font-size: 12px;
    font-weight: 700;
}

.about-page .capability-row strong {
    color: #eaf5ff;
    font-size: clamp(17px, 1.5vw, 22px);
    font-weight: 600;
    line-height: 1.4;
}

.about-page .capability-row > i {
    color: #50d1ff;
    font-size: 23px;
    text-align: right;
}

/* TABLETAS */

@media (max-width: 950px) {
    .about-page .capabilities-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}

/* CELULARES */

@media (max-width: 600px) {
    .about-page .about-capabilities {
        padding: 75px 0;
    }

    .about-page .about-capabilities .container {
        width: calc(100% - 30px);
    }

    .about-page .capabilities-title h2 {
        font-size: clamp(40px, 10vw, 55px);
        letter-spacing: -1.5px;
    }

    .about-page .capability-row {
        grid-template-columns: 28px minmax(0, 1fr) 26px;
        gap: 10px;
        min-height: 85px;
        padding: 16px 5px;
    }

    .about-page .capability-row strong {
        font-size: 16px;
    }

    .about-page .capability-row > i {
        font-size: 20px;
    }
}

/* =====================================================
   NOSOTROS — MEJORA 07: CIERRE CORPORATIVO
===================================================== */

/* BOTÓN PRINCIPAL */

.about-page .about-final a {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
}

.about-page .about-final a i {
    font-size: 17px;
}

/* ETIQUETAS INFERIORES */

.about-page .about-final-bottom {
    font-size: 11px;
    letter-spacing: 1.5px;
}

.about-page .about-final-bottom span,
.about-page .about-final-bottom small {
    color: #8cbad4;
    font-size: 11px;
    font-weight: 600;
}

/* ADAPTACIÓN A CELULARES */

@media (max-width: 600px) {
    .about-page .about-final a {
        font-size: 14px;
    }

    .about-page .about-final-bottom {
        font-size: 10px;
    }
}

/* =====================================================
   ALVAS PERÚ SYSTEM — CCTV
   SECCIÓN 01: HERO DE VIDEOVIGILANCIA
===================================================== */

.cctv-page {
    background: #050d1b;
    color: #f0f7ff;
    overflow: hidden;
}

.cctv-page .cctv-hero {
    position: relative;
    min-height: 850px;
    padding: 155px 0 65px;
    background:
        radial-gradient(
            ellipse at 78% 45%,
            rgba(31, 105, 190, .20),
            transparent 50%
        ),
        radial-gradient(
            ellipse at 15% 70%,
            rgba(25, 73, 135, .12),
            transparent 55%
        ),
        #050d1b;
}

.cctv-page .cctv-hero .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* ETIQUETAS SUPERIORES */

.cctv-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(91, 185, 255, .12);
}

.cctv-label,
.cctv-status {
    color: #6bbfe7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cctv-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cctv-status-dot,
.cctv-live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #54e9bc;
    box-shadow: 0 0 14px rgba(84, 233, 188, .6);
}

/* CONTENIDO PRINCIPAL */

.cctv-hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 70px;
    align-items: center;
    padding: 95px 0 100px;
}

.cctv-eyebrow {
    color: #55cfff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cctv-hero-left h1 {
    margin: 25px 0 30px;
    font-size: clamp(60px, 6.5vw, 100px);
    line-height: 1.04;
    letter-spacing: -4px;
    font-weight: 800;
}

.cctv-hero-left h1 span {
    display: block;
    background: linear-gradient(110deg, #b4eeff, #45c9ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cctv-hero-left > p {
    max-width: 530px;
    color: #a5bed5;
    font-size: 17px;
    line-height: 1.9;
}

/* BOTÓN */

.cctv-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 35px;
    padding: 19px 26px;
    border: 1px solid rgba(75, 198, 255, .4);
    background: rgba(34, 113, 185, .10);
    color: #eaf8ff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: .3s ease;
}

.cctv-hero-btn i {
    color: #56d4ff;
    font-size: 18px;
}

.cctv-hero-btn:hover {
    background: rgba(49, 161, 236, .18);
    border-color: #56d4ff;
    color: #fff;
    transform: translateY(-3px);
}

/* NÚCLEO VISUAL CCTV */

.cctv-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
    isolation: isolate;
}

.cctv-visual-ring {
    position: absolute;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(72, 184, 255, .25);
    border-radius: 50%;
    box-shadow: 0 0 70px rgba(34, 134, 215, .06);
    animation: cctvPulse 6s ease-in-out infinite;
}

.cctv-visual-ring.ring-two {
    width: 450px;
    height: 450px;
    border-style: dashed;
    border-color: rgba(72, 184, 255, .12);
    animation-delay: -3s;
}

.cctv-camera-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    border: 1px solid rgba(74, 198, 255, .35);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(44, 153, 235, .18), #08172a 75%);
    box-shadow: 0 0 80px rgba(33, 154, 235, .12);
}

.cctv-camera-icon i {
    font-size: 90px;
    color: #61d7ff;
    filter: drop-shadow(0 0 20px rgba(67, 201, 255, .25));
}

.cctv-visual-label {
    position: absolute;
    z-index: 3;
    top: 55px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #a8d6ee;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.cctv-visual-bottom {
    position: absolute;
    bottom: 35px;
    display: flex;
    gap: 25px;
    color: #6fa9c8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* PIE DE SECCIÓN */

.cctv-hero-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 30px;
    border-top: 1px solid rgba(91, 185, 255, .12);
    color: #6b9dbb;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* ANIMACIÓN */

@keyframes cctvPulse {
    0%, 100% {
        transform: scale(1);
        opacity: .65;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

/* TABLETAS */

@media (max-width: 950px) {
    .cctv-hero-content {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 75px 0;
    }

    .cctv-visual {
        min-height: 420px;
    }
}

/* CELULARES */

@media (max-width: 600px) {
    .cctv-page .cctv-hero {
        min-height: auto;
        padding: 125px 0 45px;
    }

    .cctv-page .cctv-hero .container {
        width: calc(100% - 30px);
    }

    .cctv-hero-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .cctv-hero-content {
        padding: 65px 0 55px;
    }

    .cctv-hero-left h1 {
        font-size: clamp(48px, 12vw, 68px);
        letter-spacing: -2px;
    }

    .cctv-hero-left > p {
        font-size: 15px;
    }

    .cctv-visual {
        min-height: 340px;
    }

    .cctv-visual-ring {
        width: 250px;
        height: 250px;
    }

    .cctv-visual-ring.ring-two {
        width: 315px;
        height: 315px;
    }

    .cctv-camera-icon {
        width: 155px;
        height: 155px;
    }

    .cctv-camera-icon i {
        font-size: 65px;
    }

    .cctv-visual-label {
        top: 5px;
        right: 0;
    }

    .cctv-visual-bottom {
        bottom: 0;
        gap: 12px;
        font-size: 8px;
    }

    .cctv-hero-footer {
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cctv-visual-ring {
        animation: none;
    }
}

/* =====================================================
   ALVAS PERÚ SYSTEM — CCTV
   SECCIÓN 02: SOLUCIONES DE VIDEOVIGILANCIA
===================================================== */

.cctv-page .cctv-solutions {
    position: relative;
    padding: 120px 0 110px;
    background:
        radial-gradient(
            ellipse at 50% 10%,
            rgba(30, 95, 170, .12),
            transparent 55%
        ),
        #060f20;
}

.cctv-page .cctv-solutions .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* ENCABEZADO */

.cctv-solutions-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: end;
    gap: 70px;
    margin-bottom: 70px;
}

.cctv-solutions-eyebrow {
    display: block;
    margin-bottom: 30px;
    color: #5bd1ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cctv-solutions-heading h2 {
    margin: 0;
    color: #f2f7ff;
    font-size: clamp(46px, 5.5vw, 78px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -3px;
}

.cctv-solutions-heading h2 span {
    display: block;
    color: #83d4f7;
}

.cctv-solutions-heading > p {
    max-width: 470px;
    margin: 0 0 8px;
    color: #a9bfd5;
    font-size: 16px;
    line-height: 1.9;
}

/* CUADRÍCULA */

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

/* TARJETAS */

.cctv-solution-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    min-height: 380px;
    padding: 32px;
    border: 1px solid rgba(84, 175, 236, .16);
    background:
        linear-gradient(
            145deg,
            rgba(17, 43, 76, .70),
            rgba(6, 18, 36, .92)
        );
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.cctv-solution-card:hover {
    transform: translateY(-6px);
    border-color: rgba(76, 204, 255, .55);
    background:
        linear-gradient(
            145deg,
            rgba(22, 61, 101, .85),
            rgba(7, 23, 46, .96)
        );
    box-shadow: 0 20px 55px rgba(0, 0, 0, .20);
}

/* PARTE SUPERIOR */

.cctv-solution-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.cctv-solution-top span {
    color: #66cfff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.cctv-solution-top > i {
    color: #5bd4ff;
    font-size: 32px;
    line-height: 1;
}

/* CONTENIDO */

.cctv-solution-content {
    margin: 45px 0 35px;
}

.cctv-solution-content h3 {
    margin: 0 0 20px;
    color: #f0f7ff;
    font-size: clamp(22px, 2vw, 27px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.6px;
}

.cctv-solution-content p {
    margin: 0;
    color: #a8bfd5;
    font-size: 14px;
    line-height: 1.85;
}

/* PARTE INFERIOR */

.cctv-solution-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding-top: 22px;
    border-top: 1px solid rgba(93, 177, 235, .16);
}

.cctv-solution-bottom span {
    color: #7bb4d3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.cctv-solution-bottom > i {
    color: #5bd4ff;
    font-size: 18px;
    transition: transform .3s ease;
}

.cctv-solution-card:hover .cctv-solution-bottom > i {
    transform: translate(3px, -3px);
}

/* PIE DE SECCIÓN */

.cctv-solutions-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 45px;
    padding-top: 25px;
    border-top: 1px solid rgba(93, 177, 235, .16);
    color: #78aaca;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

/* TABLETAS */

@media (max-width: 1000px) {
    .cctv-solutions-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .cctv-solutions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* CELULARES */

@media (max-width: 650px) {
    .cctv-page .cctv-solutions {
        padding: 75px 0;
    }

    .cctv-page .cctv-solutions .container {
        width: calc(100% - 30px);
    }

    .cctv-solutions-heading {
        margin-bottom: 45px;
    }

    .cctv-solutions-heading h2 {
        font-size: clamp(40px, 10vw, 55px);
        letter-spacing: -1.5px;
    }

    .cctv-solutions-heading > p {
        font-size: 15px;
    }

    .cctv-solutions-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cctv-solution-card {
        min-height: 330px;
        padding: 27px;
    }

    .cctv-solution-content {
        margin: 35px 0;
    }

    .cctv-solution-content h3 {
        font-size: 24px;
    }

    .cctv-solutions-footer {
        flex-direction: column;
        align-items: flex-start;
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cctv-solution-card,
    .cctv-solution-bottom > i {
        transition: none;
    }
}

/* CCTV — AJUSTE DEL ENCABEZADO DE SOLUCIONES */

@media (min-width: 1001px) {
    .cctv-page .cctv-solutions-heading {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
        gap: 45px;
    }

    .cctv-page .cctv-solutions-heading h2 {
        font-size: clamp(46px, 4.5vw, 65px);
        letter-spacing: -2px;
    }
}

/* =====================================================
   ALVAS PERÚ SYSTEM — CCTV
   SECCIÓN 03: TECNOLOGÍA Y EQUIPAMIENTO
===================================================== */

.cctv-page .cctv-equipment {
    position: relative;
    padding: 120px 0 110px;
    background:
        radial-gradient(
            ellipse at 85% 20%,
            rgba(32, 110, 195, .13),
            transparent 50%
        ),
        #050d1b;
}

.cctv-page .cctv-equipment .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* ENCABEZADO */

.cctv-equipment-heading {
    max-width: 900px;
    margin-bottom: 65px;
}

.cctv-equipment-eyebrow {
    display: block;
    margin-bottom: 28px;
    color: #5bd1ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cctv-equipment-heading h2 {
    margin: 0;
    color: #f2f7ff;
    font-size: clamp(46px, 5.5vw, 78px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -3px;
}

.cctv-equipment-heading h2 span {
    display: block;
    color: #86d6f7;
}

.cctv-equipment-heading > p {
    max-width: 650px;
    margin: 30px 0 0;
    color: #a9bfd5;
    font-size: 16px;
    line-height: 1.9;
}

/* CUADRÍCULA DE EQUIPAMIENTO */

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

/* TARJETAS */

.cctv-equipment-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 340px;
    padding: 32px;
    border: 1px solid rgba(84, 175, 236, .16);
    background:
        linear-gradient(
            145deg,
            rgba(16, 40, 73, .65),
            rgba(6, 18, 36, .94)
        );
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.cctv-equipment-card:hover {
    transform: translateY(-6px);
    border-color: rgba(76, 204, 255, .55);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .20);
}

/* IDENTIFICADOR */

.cctv-equipment-number {
    color: #67cfff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

/* ÍCONO */

.cctv-equipment-card > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-top: 40px;
    border: 1px solid rgba(77, 198, 255, .28);
    background: rgba(27, 111, 185, .08);
    color: #5bd4ff;
    font-size: 29px;
}

/* TÍTULO */

.cctv-equipment-card h3 {
    margin: 30px 0 16px;
    color: #f0f7ff;
    font-size: clamp(22px, 2vw, 27px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.5px;
}

/* DESCRIPCIÓN */

.cctv-equipment-card p {
    margin: 0 0 30px;
    color: #a8bfd5;
    font-size: 14px;
    line-height: 1.85;
}

/* ETIQUETA INFERIOR */

.cctv-equipment-tag {
    display: block;
    width: 100%;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(93, 177, 235, .16);
    color: #7bb4d3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

/* PIE DE SECCIÓN */

.cctv-equipment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 45px;
    padding-top: 25px;
    border-top: 1px solid rgba(93, 177, 235, .16);
    color: #78aaca;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

/* TABLETAS */

@media (max-width: 1000px) {
    .cctv-equipment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* CELULARES */

@media (max-width: 650px) {
    .cctv-page .cctv-equipment {
        padding: 75px 0;
    }

    .cctv-page .cctv-equipment .container {
        width: calc(100% - 30px);
    }

    .cctv-equipment-heading {
        margin-bottom: 45px;
    }

    .cctv-equipment-heading h2 {
        font-size: clamp(40px, 10vw, 55px);
        letter-spacing: -1.5px;
    }

    .cctv-equipment-heading > p {
        font-size: 15px;
    }

    .cctv-equipment-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cctv-equipment-card {
        min-height: 310px;
        padding: 27px;
    }

    .cctv-equipment-card > i {
        margin-top: 30px;
    }

    .cctv-equipment-card h3 {
        font-size: 24px;
    }

    .cctv-equipment-footer {
        flex-direction: column;
        align-items: flex-start;
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cctv-equipment-card {
        transition: none;
    }
}

/* =====================================================
   ALVAS PERÚ SYSTEM — CCTV
   SECCIÓN 04: PROCESO DE INSTALACIÓN
===================================================== */

.cctv-page .cctv-process {
    position: relative;
    padding: 120px 0 110px;
    background:
        radial-gradient(
            ellipse at 12% 35%,
            rgba(30, 100, 185, .14),
            transparent 55%
        ),
        #060f20;
}

.cctv-page .cctv-process .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* ENCABEZADO */

.cctv-process-heading {
    margin-bottom: 75px;
}

.cctv-process-eyebrow {
    display: block;
    margin-bottom: 30px;
    color: #5bd1ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cctv-process-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 65px;
    align-items: end;
}

.cctv-process-intro h2 {
    margin: 0;
    color: #f2f7ff;
    font-size: clamp(46px, 5.5vw, 78px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -3px;
}

.cctv-process-intro h2 span {
    display: block;
    color: #86d6f7;
}

.cctv-process-intro > p {
    max-width: 460px;
    margin: 0 0 8px;
    color: #a9bfd5;
    font-size: 16px;
    line-height: 1.9;
}

/* LISTA DE ETAPAS */

.cctv-process-list {
    border-top: 1px solid rgba(93, 177, 235, .18);
}

.cctv-process-step {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 70px;
    align-items: center;
    gap: 35px;
    min-height: 190px;
    padding: 35px 25px;
    border-bottom: 1px solid rgba(93, 177, 235, .18);
    transition:
        background .3s ease,
        padding-left .3s ease;
}

.cctv-process-step:hover {
    background: rgba(39, 123, 197, .08);
    padding-left: 35px;
}

/* NÚMERO */

.cctv-process-number {
    align-self: start;
    color: #55cfff;
    font-size: clamp(34px, 3vw, 45px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
}

/* CONTENIDO */

.cctv-process-content {
    max-width: 780px;
}

.cctv-process-label {
    display: block;
    margin-bottom: 15px;
    color: #69cfff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.cctv-process-content h3 {
    margin: 0 0 15px;
    color: #f0f7ff;
    font-size: clamp(25px, 2.5vw, 35px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.6px;
}

.cctv-process-content p {
    max-width: 700px;
    margin: 0;
    color: #a8bfd5;
    font-size: 15px;
    line-height: 1.85;
}

/* ÍCONOS */

.cctv-process-step > i {
    justify-self: end;
    color: #5bd4ff;
    font-size: 32px;
    transition: transform .3s ease;
}

.cctv-process-step:hover > i {
    transform: scale(1.15);
}

/* PIE DE SECCIÓN */

.cctv-process-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 45px;
    padding-top: 25px;
    border-top: 1px solid rgba(93, 177, 235, .16);
    color: #78aaca;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

/* TABLETAS */

@media (max-width: 950px) {
    .cctv-process-intro {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cctv-process-step {
        grid-template-columns: 75px minmax(0, 1fr) 45px;
        gap: 20px;
    }
}

/* CELULARES */

@media (max-width: 650px) {
    .cctv-page .cctv-process {
        padding: 75px 0;
    }

    .cctv-page .cctv-process .container {
        width: calc(100% - 30px);
    }

    .cctv-process-heading {
        margin-bottom: 45px;
    }

    .cctv-process-intro h2 {
        font-size: clamp(40px, 10vw, 55px);
        letter-spacing: -1.5px;
    }

    .cctv-process-intro > p {
        font-size: 15px;
    }

    .cctv-process-step {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 15px;
        min-height: auto;
        padding: 30px 5px;
    }

    .cctv-process-step:hover {
        padding-left: 5px;
    }

    .cctv-process-number {
        font-size: 29px;
    }

    .cctv-process-content h3 {
        font-size: 24px;
    }

    .cctv-process-content p {
        font-size: 14px;
    }

    .cctv-process-step > i {
        grid-column: 2;
        justify-self: start;
        margin-top: 10px;
        font-size: 25px;
    }

    .cctv-process-footer {
        flex-direction: column;
        align-items: flex-start;
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cctv-process-step,
    .cctv-process-step > i {
        transition: none;
    }
}

/* =====================================================
   ALVAS PERÚ SYSTEM — CCTV
   SECCIÓN 05: APLICACIONES DE VIDEOVIGILANCIA
===================================================== */

.cctv-applications {
    position: relative;
    padding: 120px 0;
    background:
        radial-gradient(
            ellipse at 80% 20%,
            rgba(24, 91, 163, .16),
            transparent 55%
        ),
        #071326;
}

.cctv-applications .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* ENCABEZADO */

.cctv-applications-heading {
    margin-bottom: 65px;
}

.cctv-applications-eyebrow {
    display: block;
    margin-bottom: 30px;
    color: #58d0ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cctv-applications-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 65px;
    align-items: end;
}

.cctv-applications-intro h2 {
    margin: 0;
    color: #f3f7ff;
    font-size: clamp(46px, 5.5vw, 78px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -3px;
}

.cctv-applications-intro h2 span {
    display: block;
    color: #83d4f7;
}

.cctv-applications-intro > p {
    max-width: 460px;
    margin: 0 0 8px;
    color: #a9bfd5;
    font-size: 16px;
    line-height: 1.9;
}

/* CUADRÍCULA */

.cctv-applications-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* TARJETAS */

.cctv-application-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 390px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(83, 170, 235, .18);
    background:
        linear-gradient(
            145deg,
            rgba(25, 68, 115, .36),
            rgba(6, 18, 37, .85)
        );
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.cctv-application-card:hover {
    transform: translateY(-6px);
    border-color: rgba(83, 207, 255, .55);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .18);
}

/* PARTE SUPERIOR */

.cctv-application-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.cctv-application-top > span {
    color: #66cfff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.4px;
}

.cctv-application-top > i {
    color: #5bd4ff;
    font-size: 31px;
}

/* CONTENIDO */

.cctv-application-content {
    margin-top: auto;
    padding: 45px 0 30px;
}

.cctv-application-content h3 {
    margin: 0 0 18px;
    color: #f0f6ff;
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.6px;
}

.cctv-application-content p {
    margin: 0;
    color: #aac0d7;
    font-size: 15px;
    line-height: 1.85;
}

/* PIE DE TARJETA */

.cctv-application-bottom {
    display: block;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(83, 170, 235, .2);
    color: #83b8d7;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.2px;
}

/* TARJETA DESTACADA */

.cctv-application-featured {
    border-color: rgba(78, 198, 255, .4);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(63, 174, 247, .19),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #102d4e,
            #071529
        );
}

.cctv-application-featured .cctv-application-content h3 span {
    display: block;
    color: #7dd5fa;
}

.cctv-application-featured .cctv-application-content a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 25px;
    padding: 14px 18px;
    border: 1px solid rgba(92, 202, 255, .45);
    color: #e9f8ff;
    background: rgba(32, 114, 183, .12);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.cctv-application-featured .cctv-application-content a:hover {
    background: rgba(52, 155, 225, .22);
    border-color: #69d5ff;
    transform: translateY(-2px);
}

.cctv-application-featured .cctv-application-content a i {
    color: #62d2ff;
    font-size: 17px;
}

/* TABLETAS */

@media (max-width: 1000px) {
    .cctv-applications-intro {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cctv-applications-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* CELULARES */

@media (max-width: 650px) {
    .cctv-applications {
        padding: 75px 0;
    }

    .cctv-applications .container {
        width: calc(100% - 30px);
    }

    .cctv-applications-heading {
        margin-bottom: 40px;
    }

    .cctv-applications-intro h2 {
        font-size: clamp(40px, 10vw, 55px);
        letter-spacing: -1.5px;
    }

    .cctv-applications-intro > p {
        font-size: 15px;
    }

    .cctv-applications-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .cctv-application-card {
        min-height: 330px;
        padding: 25px;
    }

    .cctv-application-content {
        padding-top: 35px;
    }

    .cctv-application-content h3 {
        font-size: 25px;
    }

    .cctv-application-content p {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cctv-application-card,
    .cctv-application-featured .cctv-application-content a {
        transition: none;
    }
}

/* =====================================================
   ALVAS PERÚ SYSTEM — CCTV
   SECCIÓN 06: CIERRE Y CONTACTO
===================================================== */

.cctv-closing {
    position: relative;
    padding: 110px 0 130px;
    background: #050d1b;
}

.cctv-closing .container {
    width: min(100% - 48px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* PANEL PRINCIPAL */

.cctv-closing-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 600px;
    padding: 85px 80px 35px;
    border: 1px solid rgba(88, 180, 245, .25);
    background:
        radial-gradient(
            ellipse at 80% 25%,
            rgba(35, 116, 201, .15),
            transparent 55%
        ),
        linear-gradient(
            135deg,
            #0b1b33 0%,
            #061225 65%,
            #07172c 100%
        );
}

/* CÍRCULOS DECORATIVOS */

.cctv-closing-decoration {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.cctv-closing-circle {
    position: absolute;
    display: block;
    width: 580px;
    height: 580px;
    right: -170px;
    top: -210px;
    border: 1px solid rgba(75, 169, 236, .13);
    border-radius: 50%;
}

.cctv-closing-circle-one {
    width: 580px;
    height: 580px;
}

.cctv-closing-circle-two {
    width: 760px;
    height: 760px;
    right: -260px;
    top: -300px;
    border-color: rgba(75, 169, 236, .09);
}

.cctv-closing-circle-three {
    width: 950px;
    height: 950px;
    right: -350px;
    top: -395px;
    border-color: rgba(75, 169, 236, .06);
}

/* CONTENIDO */

.cctv-closing-content {
    position: relative;
    z-index: 1;
    max-width: 850px;
}

.cctv-closing-eyebrow {
    display: block;
    margin-bottom: 30px;
    color: #68cfff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cctv-closing-content h2 {
    max-width: 850px;
    margin: 0;
    color: #f4f8ff;
    font-size: clamp(48px, 6vw, 86px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -3px;
}

.cctv-closing-content h2 span {
    display: block;
    color: #83d7fb;
}

.cctv-closing-content > p {
    max-width: 650px;
    margin: 30px 0 0;
    color: #afc4db;
    font-size: 16px;
    line-height: 1.9;
}

/* BOTONES */

.cctv-closing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
}

.cctv-closing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 58px;
    padding: 17px 22px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.cctv-closing-btn i {
    font-size: 17px;
}

/* BOTÓN PRINCIPAL */

.cctv-closing-btn-primary {
    color: #061426;
    border: 1px solid #74d5ff;
    background: #74d5ff;
}

.cctv-closing-btn-primary:hover {
    color: #061426;
    background: #a5e5ff;
    border-color: #a5e5ff;
    transform: translateY(-3px);
}

/* BOTÓN SECUNDARIO */

.cctv-closing-btn-secondary {
    color: #e8f6ff;
    border: 1px solid rgba(100, 198, 255, .4);
    background: rgba(14, 51, 89, .25);
}

.cctv-closing-btn-secondary:hover {
    color: #ffffff;
    background: rgba(52, 137, 204, .2);
    border-color: #74d5ff;
    transform: translateY(-3px);
}

/* PIE DEL PANEL */

.cctv-closing-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 70px;
    padding-top: 25px;
    border-top: 1px solid rgba(100, 183, 242, .17);
    color: #78a7c7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.cctv-closing-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cctv-closing-status-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #5ce3b8;
    box-shadow: 0 0 15px rgba(92, 227, 184, .6);
}

/* TABLETAS */

@media (max-width: 950px) {
    .cctv-closing-panel {
        padding: 65px 50px 30px;
    }

    .cctv-closing-content h2 {
        font-size: clamp(48px, 7vw, 72px);
    }
}

/* CELULARES */

@media (max-width: 650px) {
    .cctv-closing {
        padding: 75px 0;
    }

    .cctv-closing .container {
        width: calc(100% - 30px);
    }

    .cctv-closing-panel {
        min-height: auto;
        padding: 55px 25px 25px;
    }

    .cctv-closing-eyebrow {
        font-size: 10px;
        line-height: 1.8;
    }

    .cctv-closing-content h2 {
        font-size: clamp(38px, 9vw, 55px);
        letter-spacing: -1.5px;
    }

    .cctv-closing-content > p {
        font-size: 14px;
        line-height: 1.85;
    }

    .cctv-closing-actions {
        flex-direction: column;
    }

    .cctv-closing-btn {
        width: 100%;
    }

    .cctv-closing-footer {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 55px;
        font-size: 9px;
        line-height: 1.8;
    }

    .cctv-closing-circle {
        right: -400px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cctv-closing-btn {
        transition: none;
    }
}