/* ==========================================
   CNA DIGITAL STUDIO — SERVICES PREMIUM
========================================== */

.services {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 8rem 0;

    background-image:
        linear-gradient(
    180deg,
    #050a1b 0%,
    rgba(5, 10, 27, 0.25) 18%,
    rgba(5, 10, 27, 0.42) 45%,
    rgba(5, 10, 27, 0.52) 75%,
    #050a1b 100%
),
        url("../../assets/images/services-bg.png");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #050a1b;
}

.services > .container {
    position: relative;
    z-index: 1;
}


/* ==========================================
   ENCABEZADO
========================================== */

.services .section-header {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.services .section-title {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.services-highlight {
    background: linear-gradient(
        110deg,
        #93c5fd 0%,
        #398bff 45%,
        #22d3ee 100%
    );

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

/* ==========================================
   GRID
========================================== */

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.35rem;
    margin-top: 4rem;
    align-items: stretch;
}

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

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;

    min-width: 0;
    padding: 1.8rem;

    border: 1px solid rgba(30, 150, 255, 0.48);
    border-radius: 22px;

    background: linear-gradient(
        155deg,
        rgba(9, 36, 75, 0.91),
        rgba(3, 14, 34, 0.94)
    );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 18px 45px rgba(0, 0, 0, 0.18);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Iluminación superior sutil */

.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(56, 210, 255, 0.75),
        transparent
    );

    opacity: 0.55;
    pointer-events: none;
}

/* Luz decorativa en la parte inferior */

.service-card::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #23c9ff,
        transparent
    );

    opacity: 0.35;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.service-card:hover {
    transform: translateY(-9px);
    border-color: rgba(54, 212, 255, 0.95);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(0, 155, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.service-card:hover::after {
    opacity: 1;
}

/* ==========================================
   NUMERACIÓN
========================================== */

.service-number {
    position: absolute;
    top: 2rem;
    right: 1.7rem;

    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;

    color: rgba(94, 169, 255, 0.32);
}

/* ==========================================
   ÍCONOS
========================================== */

.service-icon {
    width: 64px;
    height: 64px;

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

    margin-bottom: 1.6rem;

    color: #40d5ff;

    border-radius: 17px;
    border: 1px solid rgba(39, 194, 255, 0.75);

    background: linear-gradient(
        145deg,
        rgba(14, 102, 204, 0.35),
        rgba(0, 35, 87, 0.35)
    );

    box-shadow:
        0 0 18px rgba(0, 178, 255, 0.24),
        inset 0 0 16px rgba(0, 159, 255, 0.1);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.service-icon svg {
    width: 32px;
    height: 32px;
    display: block;
    stroke: currentColor;
}

.service-card:hover .service-icon {
    transform: translateY(-4px);

    box-shadow:
        0 0 30px rgba(0, 191, 255, 0.45),
        inset 0 0 18px rgba(0, 159, 255, 0.18);
}

/* ==========================================
   TEXTOS
========================================== */

.service-card h3 {
    font-size: clamp(1.2rem, 1.5vw, 1.5rem);
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -0.025em;

    margin-bottom: 1.1rem;
    color: #ffffff;
}

.service-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #c0cde0;

    margin-bottom: 1.5rem;
}

/* ==========================================
   LISTA DE CARACTERÍSTICAS
========================================== */

.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;

    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.service-features li {
    position: relative;
    padding-left: 1.8rem;

    font-size: 0.86rem;
    line-height: 1.5;
    color: #d0def0;
}

/* Check luminoso */

.service-features li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

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

    width: 19px;
    height: 19px;

    border-radius: 50%;

    font-size: 0.8rem;
    font-weight: 800;
    color: #23d8ff;

    background: rgba(0, 169, 255, 0.13);
}

/* ==========================================
   ENLACE INFERIOR
========================================== */

.service-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.6rem;

    margin-top: auto;
    padding-bottom: 0.5rem;

    font-size: 0.95rem;
    font-weight: 700;
    color: #35baff;
    text-decoration: none;

    border-bottom: 2px solid rgba(30, 190, 255, 0.65);

    transition:
        color 0.3s ease,
        gap 0.3s ease;
}

.service-link:hover {
    color: #7ce7ff;
    gap: 1rem;
}

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

@media (max-width: 1100px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .services {
        padding: 5rem 0;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.3rem;
        margin-top: 3rem;
    }

    .service-card {
        padding: 1.8rem;
    }

    .service-card h3 {
        font-size: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-card,
    .service-icon,
    .service-link {
        transition: none;
    }

    .service-card:hover,
    .service-card:hover .service-icon {
        transform: none;
    }
}

/* ==========================================
   SERVICES — DESVANECIMIENTO INFERIOR
========================================== */

.services {
    position: relative;
    isolation: isolate;
}

/* Degradado inferior */
.services::after {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 280px;

    background: linear-gradient(
        to bottom,
        rgba(5, 10, 27, 0) 0%,
        rgba(5, 10, 27, 0.40) 25%,
        rgba(5, 10, 27, 0.85) 55%,
        #050a1b 85%,
        #050a1b 100%
    );

    z-index: 1;
    pointer-events: none;
}

/* Mantener tarjetas y textos por delante */
.services > .container {
    position: relative;
    z-index: 2;
}


/* ==========================================
   CNA — SERVICES INTERACTIVE GLOW
========================================== */

.service-card {
    background:
        radial-gradient(
            260px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(34, 184, 255, 0.13),
            transparent 75%
        ),
        linear-gradient(
            155deg,
            rgba(9, 36, 75, 0.91),
            rgba(3, 14, 34, 0.94)
        );
}

@media (hover: none) {
    .service-card {
        background: linear-gradient(
            155deg,
            rgba(9, 36, 75, 0.91),
            rgba(3, 14, 34, 0.94)
        );
    }
}