/* =========================================================
   FLOTA - HERO PREMIUM
========================================================= */

.fleet-page-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-height) + 55px) 0 75px;
    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% );
    isolation: isolate;
}


    /* CUADRÍCULA TECNOLÓGICA */

    .fleet-page-hero::before {
        content: "";
        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: 76px 76px;
        -webkit-mask-image: radial-gradient( circle at 65% 45%, black, transparent 72% );
        mask-image: radial-gradient( circle at 65% 45%, black, transparent 72% );
    }


    /* SOMBRA INFERIOR */

    .fleet-page-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 180px;
        z-index: -1;
        background: linear-gradient( to bottom, transparent, #071522 );
        pointer-events: none;
    }


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

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


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

.fleet-hero-content {
    position: relative;
    z-index: 10;
}

    .fleet-hero-content .page-subtitle {
        color: var(--lam-red);
    }

    .fleet-hero-content .page-title {
        margin: 0;
        max-width: 760px;
        color: #102432;
        font-size: clamp(4rem, 6.3vw, 7.5rem);
        font-weight: 900;
        line-height: 0.86;
        letter-spacing: -0.055em;
        text-transform: uppercase;
        text-shadow: 0 20px 50px rgba(0,0,0,0.45);
    }

        .fleet-hero-content .page-title span {
            display: block;
            color: #102432;
        }

        .fleet-hero-content .page-title strong {
            display: block;
            margin-top: 10px;
            color: var(--lam-red);
            text-shadow: 0 0 35px rgba(239,37,45,0.14);
        }

    .fleet-hero-content .page-description {
        max-width: 640px;
        margin-top: 30px;
        color: #405f72;
        font-size: 1rem;
        line-height: 1.8;
    }


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

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


/* =========================================================
   BENEFICIOS
========================================================= */

.fleet-hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 35px;
}

    .fleet-hero-features > div {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #527286;
        font-size: 0.78rem;
    }

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


/* =========================================================
   VISUAL PRINCIPAL
========================================================= */

.fleet-hero-visual {
    position: relative;
    min-height: 590px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1300px;
}


/* CÍRCULO / PLACA DETRÁS */

.fleet-hero-backplate {
    position: absolute;
    width: 580px;
    height: 580px;
    border-radius: 50%;
    border: 1px solid rgba(79, 176, 239, 0.12);
    background: radial-gradient( circle, rgba(46, 150, 218, 0.11), rgba(8, 27, 43, 0.06) 46%, transparent 70% );
    box-shadow: inset 0 0 70px rgba(51, 157, 225, 0.04);
    animation: fleetBackplateFloat 7s ease-in-out infinite alternate;
}


/* IMAGEN */

.fleet-main-image {
    position: relative;
    z-index: 4;
    width: min(690px, 100%);
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(111, 190, 240, 0.17);
    box-shadow: 0 45px 100px rgba(0,0,0,0.55);
    transform: perspective(1200px) rotateY(-7deg) rotateX(2deg);
    transition: transform 0.8s cubic-bezier(.16,1,.3,1);
}

    .fleet-main-image:hover {
        transform: perspective(1200px) rotateY(-2deg) rotateX(0deg) translateY(-8px);
    }

    .fleet-main-image img {
        display: block;
        width: 100%;
        height: 470px;
        object-fit: cover;
        filter: brightness(1.04) contrast(1.07) saturate(1.04);
    }


    /* GRADIENTE EN FOTO */

    .fleet-main-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to top, rgba(2,8,14,0.55), transparent 46% );
        pointer-events: none;
    }


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

.fleet-floating-card {
    position: absolute;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 19px;
    border-radius: 17px;
    background: linear-gradient( 145deg, rgba(13, 37, 56, 0.88), rgba(4, 16, 27, 0.82) );
    border: 1px solid rgba(100, 184, 238, 0.18);
    box-shadow: 0 22px 55px rgba(0,0,0,0.38);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.fleet-floating-card-top {
    top: 75px;
    right: -20px;
}

.fleet-floating-card-bottom {
    left: -25px;
    bottom: 70px;
}

.fleet-floating-card small {
    display: block;
    color: #708b9d;
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.fleet-floating-card strong {
    display: block;
    margin-top: 3px;
    color: #ffffff;
    font-size: 0.92rem;
}


/* PUNTO VERDE */

.fleet-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #30d483;
    box-shadow: 0 0 15px rgba(48,212,131,0.7);
    animation: fleetLivePulse 1.7s ease-in-out infinite;
}


/* ICONO */

.fleet-floating-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(239,37,45,0.11);
    color: var(--lam-red);
}


/* =========================================================
   NÚMERO DE UNIDAD
========================================================= */

.fleet-hero-index {
    position: absolute;
    right: -10px;
    bottom: -5px;
    z-index: 1;
    color: rgba(255,255,255,0.025);
    font-size: 10rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}


/* =========================================================
   LUCES AMBIENTALES
========================================================= */

.fleet-hero-light {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(55px);
    pointer-events: none;
}

.fleet-hero-light-blue {
    width: 470px;
    height: 470px;
    right: 10%;
    top: 20%;
    background: rgba(45, 152, 222, 0.10);
}

.fleet-hero-light-red {
    width: 380px;
    height: 380px;
    left: -100px;
    bottom: -100px;
    background: rgba(239, 37, 45, 0.08);
}


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

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

    50% {
        transform: scale(1.45);
        opacity: 0.55;
    }
}

@keyframes fleetBackplateFloat {
    from {
        transform: translateY(-8px) rotate(-2deg);
    }

    to {
        transform: translateY(12px) rotate(2deg);
    }
}


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

@media (max-width: 1100px) {

    .fleet-hero-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .fleet-hero-visual {
        min-height: 520px;
    }

    .fleet-main-image {
        width: min(760px, 90%);
    }

    .fleet-floating-card-top {
        right: 4%;
    }

    .fleet-floating-card-bottom {
        left: 4%;
    }
}


@media (max-width: 700px) {

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

    .fleet-hero-content .page-title {
        font-size: clamp(3.4rem, 15vw, 5.4rem);
    }

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

        .fleet-hero-actions a {
            width: 100%;
            justify-content: center;
        }

    .fleet-hero-features {
        flex-direction: column;
        gap: 12px;
    }

    .fleet-hero-visual {
        min-height: 430px;
    }

    .fleet-main-image {
        width: 100%;
        transform: none;
    }

        .fleet-main-image img {
            height: 360px;
        }

    .fleet-hero-backplate {
        width: 390px;
        height: 390px;
    }

    .fleet-floating-card-top {
        top: 25px;
        right: 8px;
    }

    .fleet-floating-card-bottom {
        left: 8px;
        bottom: 25px;
    }
}


/* =========================================================
   OVERVIEW
========================================================= */

.fleet-overview {
    position: relative;
    padding: 120px 0;
    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;
}

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


/* =========================================================
   TARJETAS DE FLOTA
========================================================= */

.fleet-card {
    position: relative;
    overflow: hidden;
    min-height: 540px;
    border-radius: 28px;
    border: 1px solid rgba(103, 181, 231, 0.18);
    background: linear-gradient( 145deg, rgba(15, 39, 58, 0.78), rgba(5, 17, 28, 0.68) );
    box-shadow: 0 28px 70px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    transition: transform 0.5s cubic-bezier(.16,1,.3,1), border-color 0.35s ease, box-shadow 0.35s ease;
}

    .fleet-card:hover {
        transform: translateY(-10px);
        border-color: rgba(72, 176, 242, 0.34);
        box-shadow: 0 38px 90px rgba(0,0,0,0.44), 0 0 30px rgba(44, 145, 211, 0.10);
    }

.fleet-card-image {
    position: relative;
    height: 340px;
    overflow: hidden;
}

    .fleet-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: brightness(0.9) contrast(1.06) saturate(1.02);
        transition: transform 1s cubic-bezier(.16,1,.3,1), filter 0.5s ease;
    }

.fleet-card:hover .fleet-card-image img {
    transform: scale(1.055);
    filter: brightness(1) contrast(1.06) saturate(1.06);
}

.fleet-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(3, 10, 16, 0.72) 0%, rgba(3, 10, 16, 0.18) 45%, transparent 75% );
    pointer-events: none;
}

.fleet-card-content {
    padding: 30px 32px 34px;
}

    .fleet-card-content > span {
        display: block;
        margin-bottom: 10px;
        color: var(--lam-red);
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.18em;
    }

    .fleet-card-content h3 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(1.8rem, 2.7vw, 3rem);
        line-height: 1;
        text-transform: uppercase;
    }

        .fleet-card-content h3 strong {
            color: var(--lam-red);
        }

    .fleet-card-content p {
        margin-top: 18px;
        color: #94a8b6;
        line-height: 1.75;
    }


/* =========================================================
   CAPACIDADES
========================================================= */

.fleet-capabilities {
    position: relative;
    padding: 100px 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;
}

.fleet-capabilities-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    align-items: center;
    gap: 55px;
    padding: 42px;
    border-radius: 28px;
}

    .fleet-capabilities-panel h2 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(2.5rem, 4.4vw, 4.7rem);
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: -0.035em;
    }

        .fleet-capabilities-panel h2 strong {
            display: block;
            color: var(--lam-red);
        }

    .fleet-capabilities-panel p {
        margin-top: 22px;
        color: #93a7b5;
        line-height: 1.8;
    }

.fleet-capability-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

    .fleet-capability-items > div {
        min-height: 110px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        padding: 20px;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 18px;
        background: rgba(255,255,255,0.025);
        color: #c4d1d9;
        transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
    }

        .fleet-capability-items > div:hover {
            transform: translateY(-5px);
            border-color: rgba(73,175,241,0.28);
            background: rgba(52,151,217,0.07);
        }

    .fleet-capability-items i {
        color: #4db8ff;
        font-size: 1.2rem;
    }


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

.fleet-cta {
    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: 980px) {
    .fleet-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 700px) {
    .fleet-page-hero {
        min-height: auto;
        padding: calc(var(--header-height) + 55px) 0 80px;
    }

    .fleet-overview {
        padding: 85px 0;
    }

    .fleet-card {
        min-height: auto;
    }

    .fleet-card-image {
        height: 260px;
    }

    .fleet-capabilities {
        padding: 80px 0 95px;
    }

    .fleet-capabilities-panel {
        padding: 28px 24px;
    }

    .fleet-capability-items {
        grid-template-columns: 1fr;
    }
}