/* =========================================================
   SERVICES SECTION
   Todo lo que está aquí pertenece EXCLUSIVAMENTE a servicios
========================================================= */

.services-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   CONTENIDO
========================================================= */

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


/* =========================================================
   FONDO / RED DIGITAL
========================================================= */

.services-section__network {
    position: absolute;

    width: 850px;
    height: 1100px;

    right: -280px;
    top: 50px;

    opacity: .45;

    pointer-events: none;

    z-index: 0;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, .85) 3px,
            transparent 4px
        );

    background-size: 45px 45px;

    border-radius: 50%;

    filter:
        drop-shadow(
            0 0 12px rgba(197, 160, 89, .45)
        );

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


/* =========================================================
   NODOS
========================================================= */

.services-section__network::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 20% 25%,
            #00A4E4 0,
            #00A4E4 6px,
            transparent 7px
        ),

        radial-gradient(
            circle at 55% 18%,
            #6558B1 0,
            #6558B1 5px,
            transparent 6px
        ),

        radial-gradient(
            circle at 75% 42%,
            #00A4E4 0,
            #00A4E4 7px,
            transparent 8px
        ),

        radial-gradient(
            circle at 35% 65%,
            #E31837 0,
            #E31837 7px,
            transparent 9px
        ),

        radial-gradient(
            circle at 70% 78%,
            #6558B1 0,
            #6558B1 6px,
            transparent 7px
        );

    filter:
        drop-shadow(
            0 0 12px rgba(0, 164, 228, .7)
        );

    animation:
        servicesNodePulse 5s ease-in-out infinite;
}


/* =========================================================
   LÍNEAS DE CONEXIÓN
========================================================= */

.services-section__network::after {
    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            35deg,
            transparent 32%,
            rgba(0, 164, 228, .35) 32.2%,
            transparent 32.5%
        ),

        linear-gradient(
            -25deg,
            transparent 48%,
            rgba(101, 88, 177, .35) 48.2%,
            transparent 48.5%
        ),

        linear-gradient(
            70deg,
            transparent 60%,
            rgba(0, 164, 228, .25) 60.2%,
            transparent 60.5%
        );

    pointer-events: none;
}


/* =========================================================
   ANIMACIÓN
========================================================= */

@keyframes servicesNodePulse {

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

    50% {
        opacity: 1;
        transform: scale(1.03);
    }

    100% {
        opacity: .75;
        transform: scale(1);
    }

}

/* FIN DEL PROCESO VECTORIAL */

.services-section {
  background: var(--color-light)
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}
.service-card {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 30px;
  border-radius: var(--radius-md);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition)
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card)
}
.service-card.featured {
  background: var(--color-primary);
  color: #fff
}
.service-icon {
  width: 54px;
  height: 54px;
  border: 1px solid var(--color-accent);
  display: grid;
  place-items: center;
  color: var(--color-accent);
  font-weight: 800;
  margin-bottom: 25px
}
.service-label {
  font-size: .65rem;
  letter-spacing: .14em;
  color: var(--color-accent);
  font-weight: 800
}
.service-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.7rem;
  margin: 5px 0
}
.service-card p {
  color: var(--color-gray);
  font-size: .9rem
}
.featured p {
  color: #c6d0da
}
.service-card a {
  color: var(--color-accent);
  font-size: .8rem;
  font-weight: 800;
  margin-top: 20px;
  display: inline-block
}
/* Color cuando se hace clic (Tarjeta normal) */
.service-card.active {
  background: var(--color-primary); /* Cambia esto por el color que quieras al hacer clic */
  color: #fff;
  border-color: var(--color-accent);
}

/* Ajuste para que los textos dentro de la tarjeta activa también cambien de color */
.service-card.active p,
.service-card.active a,
.service-card.active .service-label,
.service-card.active .service-icon {
  color: var (--color-accent);
  border-color: #fff;
}

/* =========================================================
   MODAL INTERACTIVO Y CARRUSEEL (INTEGRACIÓN)
========================================================= */

/* Estilos para transformar el botón en el link visual que ya tenías */
.service-modal-trigger {
    background: none;
    border: none;
    padding: 0;
    margin-top: 20px;
    display: inline-block;
    color: var(--color-accent);
    font-size: .8rem;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
}

.service-card.active .service-modal-trigger {
    color: #fff;
}

/* Fondo oscuro del modal */
.modal-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Oscuro elegante */
    z-index: 2000; /* Por encima de la red digital */
    justify-content: center;
    align-items: center;
}

/* Contenedor interno del modal */
.modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    background-color: #000;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Botón cerrar esquina superior */
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 35px;
    color: rgba(255, 255, 255, 0.7);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2010;
    transition: color 0.3s;
}

.modal-close-btn:hover {
    color: #fff;
}

/* Contenedor del Carrusel */
.carousel-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Formato panorámico ideal para video */
}

.carousel-slides {
    width: 100%;
    height: 100%;
}

.carousel-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.carousel-slide.active {
    display: block;
}

.carousel-slide video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Asegura que el video no se deforme */
}

/* Flechas de navegación */
.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 44px;
    height: 44px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background 0.3s, opacity 0.3s;
    z-index: 2005;
}

.carousel-nav-btn:hover {
    background-color: var(--color-accent, #00A4E4);
    border-color: transparent;
}

.carousel-nav-btn.prev { left: 15px; }
.carousel-nav-btn.next { right: 15px; }

/* Ocultar flechas si solo hay un video */
.carousel-container.single-video .carousel-nav-btn {
    display: none;
}


@media(max-width:900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}
@media(max-width:600px) {
  .services-grid {
    grid-template-columns: 1fr
  }
}