/* =========================================================
   RASTREO - HERO
========================================================= */

.tracking-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-height) + 65px) 0 90px;
    overflow: hidden;
    background: radial-gradient( circle at 50% 20%, rgba(255, 255, 255, 0.72), transparent 42% ), radial-gradient( circle at 90% 30%, rgba(64, 161, 220, 0.13), transparent 34% ), radial-gradient( circle at 10% 75%, rgba(239, 37, 45, 0.05), transparent 30% ), linear-gradient( 135deg, #d9eef9 0%, #c5e4f4 48%, #add8ed 100% ) !important;
    isolation: isolate;
}

.tracking-grid-background {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.12;
    background-image: linear-gradient( rgba(255,255,255,0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.025) 1px, transparent 1px );
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient( circle at 70% 45%, black, transparent 74% );
    mask-image: radial-gradient( circle at 70% 45%, black, transparent 74% );
}

.tracking-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    top: 20%;
    z-index: -1;
    opacity: 0.35;
    background: linear-gradient( 90deg, transparent, rgba(72, 184, 255, 0.65), transparent );
    box-shadow: 0 0 15px rgba(72,184,255,0.25);
    animation: trackingScan 7s linear infinite;
}

@keyframes trackingScan {
    from {
        top: 15%;
        opacity: 0;
    }

    15% {
        opacity: 0.35;
    }

    85% {
        opacity: 0.35;
    }

    to {
        top: 90%;
        opacity: 0;
    }
}


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

.tracking-hero-layout {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
    align-items: center;
    gap: 70px;
}


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

.tracking-title {
    margin: 0;
    color: #102432;
    font-size: clamp(4rem, 6vw, 7.2rem);
    font-weight: 900;
    line-height: 0.86;
    letter-spacing: -0.055em;
    text-transform: uppercase;
    text-shadow: 0 20px 55px rgba(0,0,0,0.5);
}

    .tracking-title span {
        display: block;
    }

    .tracking-title strong {
        display: block;
        margin-top: 12px;
        color: var(--lam-red);
        text-shadow: 0 0 35px rgba(239,37,45,0.16);
    }

.tracking-description {
    max-width: 650px;
    margin-top: 30px;
    color: #405f72;
    font-size: 1rem;
    line-height: 1.8;
}

.tracking-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 35px;
}


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

.tracking-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

    .tracking-status-row > div {
        min-width: 150px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 16px;
        border: 1px solid rgba(31,105,151,0.12);
        border-radius: 15px;
        background: rgba(255,255,255,0.32);
    }

    .tracking-status-row i {
        color: #4db8ff;
    }

    .tracking-status-row small {
        display: block;
        color: #5c7b8d;
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.13em;
    }

    .tracking-status-row strong {
        display: block;
        margin-top: 2px;
        color: #102432;
        font-size: 0.8rem;
    }

.tracking-online-dot {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #32d787;
    box-shadow: 0 0 14px rgba(50,215,135,0.72);
    animation: trackingOnlinePulse 1.7s ease-in-out infinite;
}

@keyframes trackingOnlinePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}


/* =========================================================
   MONITOR DIGITAL
========================================================= */

.tracking-monitor {
    position: relative;
    min-height: 550px;
    padding: 22px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(80,181,246,0.24);
    background: linear-gradient( 145deg, rgba(10,35,54,0.86), rgba(3,14,24,0.78) );
    box-shadow: 0 40px 95px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

    .tracking-monitor::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient( circle at var(--spotlight-x, 70%) var(--spotlight-y, 40%), rgba(52, 164, 235, 0.13), transparent 32% );
    }

.tracking-monitor-header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 4px 4px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    color: #718d9e;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

    .tracking-monitor-header > div {
        display: flex;
        align-items: center;
        gap: 10px;
    }


/* =========================================================
   MAPA
========================================================= */

.tracking-map {
    position: relative;
    height: 390px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 20px;
    background: radial-gradient( circle at 55% 45%, rgba(31,119,180,0.15), transparent 38% ), linear-gradient( 145deg, rgba(8,30,47,0.76), rgba(2,12,21,0.9) );
    border: 1px solid rgba(83,172,231,0.12);
}

.map-grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: linear-gradient( rgba(77,180,246,0.12) 1px, transparent 1px ), linear-gradient( 90deg, rgba(77,180,246,0.1) 1px, transparent 1px );
    background-size: 36px 36px;
}


/* RUTA */

.map-route {
    position: absolute;
    left: 15%;
    right: 17%;
    top: 52%;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient( 90deg, #31a9ef, #ef252d );
    box-shadow: 0 0 18px rgba(49,169,239,0.35);
    transform: rotate(-8deg);
}

    .map-route::after {
        content: "";
        position: absolute;
        inset: -5px 0;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.55), transparent );
        animation: routeFlow 2.4s linear infinite;
    }

@keyframes routeFlow {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}


/* PUNTOS */

.tracking-point {
    position: absolute;
    z-index: 5;
}

.tracking-point-start {
    left: 12%;
    top: 58%;
}

.tracking-point-end {
    right: 13%;
    top: 38%;
}

    .tracking-point-start > span,
    .tracking-point-end > span {
        display: block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #4db8ff;
        box-shadow: 0 0 18px rgba(77,184,255,0.7);
    }

    .tracking-point-end > span {
        background: var(--lam-red);
        box-shadow: 0 0 18px rgba(239,37,45,0.65);
    }

.tracking-point small {
    display: block;
    margin-top: 8px;
    color: #7e9aaa;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}


/* CAMIÓN CENTRAL */

.tracking-point-current {
    left: 50%;
    top: 45%;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient( 145deg, #ef252d, #a50d14 );
    color: #ffffff;
    box-shadow: 0 0 30px rgba(239,37,45,0.48);
}

.tracking-radar {
    position: absolute;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(81,184,249,0.35);
    border-radius: 50%;
    animation: radarPulse 2s ease-out infinite;
}

@keyframes radarPulse {
    from {
        transform: scale(0.45);
        opacity: 0.9;
    }

    to {
        transform: scale(1.5);
        opacity: 0;
    }
}


/* ETIQUETA */

.tracking-map-label {
    position: absolute;
    left: 22px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(4,16,27,0.76);
    backdrop-filter: blur(12px);
}

    .tracking-map-label i {
        color: var(--lam-red);
    }

    .tracking-map-label small {
        display: block;
        color: #718b9c;
        font-size: 0.56rem;
    }

    .tracking-map-label strong {
        color: #102432;
        font-size: 0.8rem;
    }


/* FOOTER MONITOR */

.tracking-monitor-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

    .tracking-monitor-footer > div {
        padding: 13px 15px;
        border-radius: 13px;
        background: rgba(255,255,255,0.025);
        border: 1px solid rgba(255,255,255,0.06);
    }

    .tracking-monitor-footer small {
        display: block;
        color: #698596;
        font-size: 0.55rem;
    }

    .tracking-monitor-footer strong {
        color: #102432;
        font-size: 0.8rem;
    }


/* =========================================================
   TECNOLOGÍA
========================================================= */

.tracking-technology {
    position: relative;
    padding: 130px 0;
    background: radial-gradient( circle at 50% 20%, rgba(255, 255, 255, 0.72), transparent 42% ), radial-gradient( circle at 90% 30%, rgba(64, 161, 220, 0.13), transparent 34% ), radial-gradient( circle at 10% 75%, rgba(239, 37, 45, 0.05), transparent 30% ), linear-gradient( 135deg, #d9eef9 0%, #c5e4f4 48%, #add8ed 100% ) !important;
}

.tracking-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    margin-top: 70px;
}


/* =========================================================
   TARJETAS TECNOLOGÍA
========================================================= */

.tracking-tech-card {
    position: relative;
    min-height: 390px;
    padding: 36px;
    overflow: hidden;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,0.74);
    background: linear-gradient( 145deg, rgba(255,255,255,0.62), rgba(219,239,249,0.38) );
    box-shadow: 0 25px 65px rgba(31,77,107,0.14);
    transition: transform 0.45s cubic-bezier(.16,1,.3,1), border-color 0.35s ease, box-shadow 0.35s ease;
}

    .tracking-tech-card:hover {
        transform: translateY(-10px);
        border-color: rgba(39,133,190,0.28);
        box-shadow: 0 32px 75px rgba(31,77,107,0.18);
    }

.tracking-tech-number {
    position: absolute;
    top: 18px;
    right: 25px;
    color: rgba(16,36,50,0.055);
    font-size: 6rem;
    font-weight: 900;
}

.tracking-tech-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    border: 1px solid rgba(70,176,244,0.25);
    background: rgba(61,163,230,0.09);
    color: #4db8ff;
    font-size: 1.25rem;
}

    .tracking-tech-icon.red {
        color: var(--lam-red);
        border-color: rgba(239,37,45,0.28);
        background: rgba(239,37,45,0.08);
    }

.tracking-tech-card > span {
    display: block;
    margin-top: 30px;
    color: #58788b;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.tracking-tech-card h3 {
    margin: 10px 0 18px;
    color: #102432;
    font-size: 2rem;
    text-transform: uppercase;
}

    .tracking-tech-card h3 strong {
        display: block;
        color: var(--lam-red);
    }

.tracking-tech-card p {
    color: #405f72;
    line-height: 1.75;
}

.tracking-tech-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    padding: 9px 13px;
    border-radius: 100px;
    border: 1px solid rgba(31,105,151,0.12);
    background: rgba(255,255,255,0.34);
    color: #48697c;
    font-size: 0.7rem;
}

    .tracking-tech-status.warning i {
        color: var(--lam-red);
    }


/* =========================================================
   CENTRO DE MONITOREO
========================================================= */

.monitoring-center {
    position: relative;
    padding: 130px 0;
    background: radial-gradient( circle at 50% 20%, rgba(255, 255, 255, 0.72), transparent 42% ), radial-gradient( circle at 90% 30%, rgba(64, 161, 220, 0.13), transparent 34% ), radial-gradient( circle at 10% 75%, rgba(239, 37, 45, 0.05), transparent 30% ), linear-gradient( 135deg, #d9eef9 0%, #c5e4f4 48%, #add8ed 100% ) !important;
}

.monitoring-center-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 75px;
}

.monitoring-center-visual {
    position: relative;
    height: 540px;
    overflow: hidden;
    border-radius: 28px;
}

    .monitoring-center-visual > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: brightness(0.88) contrast(1.07) saturate(0.95);
    }

.monitoring-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(2,8,14,0.72), transparent 55% );
}

.monitoring-image-status {
    position: absolute;
    left: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 17px;
    border-radius: 16px;
}

    .monitoring-image-status small {
        display: block;
        color: #70899a;
        font-size: 0.58rem;
    }

    .monitoring-image-status strong {
        color: #ffffff;
    }


/* TEXTO */

.monitoring-center-content h2 {
    margin: 0;
    color: #102432;
    font-size: clamp(2.8rem, 4.5vw, 5rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.04em;
}

    .monitoring-center-content h2 strong {
        display: block;
        color: var(--lam-red);
    }

.monitoring-center-content p {
    margin-top: 26px;
    color: #405f72;
    line-height: 1.85;
}


/* FEATURES */

.monitoring-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    margin-top: 34px;
}

    .monitoring-features > div {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border-radius: 14px;
        border: 1px solid rgba(31,105,151,0.12);
        background: rgba(255,255,255,0.32);
        color: #405f72;
    }

    .monitoring-features i {
        color: #4db8ff;
    }


/* =========================================================
   PROTOCOLO
========================================================= */

.tracking-protocol {
    padding: 120px 0;
    background: radial-gradient( circle at 50% 20%, rgba(255, 255, 255, 0.72), transparent 42% ), radial-gradient( circle at 90% 30%, rgba(64, 161, 220, 0.13), transparent 34% ), radial-gradient( circle at 10% 75%, rgba(239, 37, 45, 0.05), transparent 30% ), linear-gradient( 135deg, #d9eef9 0%, #c5e4f4 48%, #add8ed 100% ) !important;
}

.protocol-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 70px;
}

    .protocol-flow::before {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        top: 59px;
        height: 1px;
        background: linear-gradient( 90deg, transparent, #3ba8e8, var(--lam-red), #3ba8e8, transparent );
        opacity: 0.35;
    }

    .protocol-flow article {
        position: relative;
        z-index: 2;
        text-align: center;
    }

        .protocol-flow article > span {
            color: var(--lam-red);
            font-size: 0.65rem;
            font-weight: 800;
        }

        .protocol-flow article > div {
            width: 72px;
            height: 72px;
            display: grid;
            place-items: center;
            margin: 14px auto 24px;
            border-radius: 50%;
            border: 1px solid rgba(31,126,184,0.22);
            background: rgba(255,255,255,0.52);
            color: #2387bd;
            box-shadow: 0 0 0 8px rgba(255,255,255,0.22);
        }

    .protocol-flow h3 {
        color: #102432;
        text-transform: uppercase;
    }

    .protocol-flow p {
        color: #405f72;
        font-size: 0.84rem;
        line-height: 1.6;
    }


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

.tracking-cta {
    padding: 90px 0 130px;
    background: radial-gradient( circle at 50% 20%, rgba(255, 255, 255, 0.72), transparent 42% ), radial-gradient( circle at 90% 30%, rgba(64, 161, 220, 0.13), transparent 34% ), radial-gradient( circle at 10% 75%, rgba(239, 37, 45, 0.05), transparent 30% ), linear-gradient( 135deg, #d9eef9 0%, #c5e4f4 48%, #add8ed 100% ) !important;
}


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

@media (max-width: 1050px) {

    .tracking-hero-layout {
        grid-template-columns: 1fr;
    }

    .tracking-monitor {
        min-height: auto;
    }

    .monitoring-center-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 850px) {

    .tracking-tech-grid {
        grid-template-columns: 1fr;
    }

    .protocol-flow {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 45px;
    }

        .protocol-flow::before {
            display: none;
        }
}


@media (max-width: 600px) {

    .tracking-hero {
        min-height: auto;
        padding: calc(var(--header-height) + 50px) 0 80px;
    }

    .tracking-title {
        font-size: clamp(3.2rem, 15vw, 5rem);
    }

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

    .tracking-status-row {
        flex-direction: column;
    }

        .tracking-status-row > div {
            width: 100%;
        }

    .tracking-map {
        height: 330px;
    }

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

    .tracking-technology,
    .monitoring-center,
    .tracking-protocol {
        padding: 85px 0;
    }

    .monitoring-center-visual {
        height: 420px;
    }

    .monitoring-features {
        grid-template-columns: 1fr;
    }

    .protocol-flow {
        grid-template-columns: 1fr;
    }
}

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

    .tracking-scan-line,
    .tracking-radar,
    .tracking-online-dot,
    .map-route::after {
        animation: none;
    }
}