/* ==========================================
   1.BANNER SERVICIOS - PANTALLA COMPLETA
   ========================================== */

:root {
    --neon: #ccff0b;
    --dark: #0a0a0a;
    --GRIS: #7f7f7f;

    /* Tipografía fluida: clamp(mínimo, preferido, máximo) */
    --fs-h1: clamp(2.2rem, 5vw, 4.5rem);
    --fs-p: clamp(1rem, 2vw, 1.2rem);
}

html {
    scroll-behavior: smooth;
}

/*Banner*/
.services-banner {
    position: relative;
    width: 100%;
    min-height: 80vh;
    /* Se adapta a la altura del dispositivo */
    display: flex;
    align-items: center;
    background: url('../imagenes/fondo-banner-servicios.webp') no-repeat center center/cover;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

/*capa oscura*/
.services-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.938), rgba(82, 81, 81, 0.514));
    z-index: 1;
}

/*contenedor*/
.services-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
    position: relative;
    z-index: 2;
}

/*contenido*/
.services-content {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 1rem;

}

.services-tag {
    font-size: 1.2rem;
    text-transform: uppercase;
    color: var(--neon);
    letter-spacing: 3px;

}

/*titulo*/
.services-title {
    font-family: 'montserrat', sans-serif;
    font-size: var(--fs-h1);
    color: #fff;
    line-height: 1.1;
    text-transform: uppercase;
}

/*texto neon*/
.text-neon {
    color: var(--neon);
}

/*descripcion*/
.services-description {
    font-size: var(--fs-p);
    color: #ccc;
    max-width: 600px;
    line-height: 1.6;
}

.services-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    /* Permite que los botones bajen si no caben */
}

.btn-main {
    background: var(--neon);
    color: #000;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 800;
    border-radius: 5px;
    transition: 0.3s;
}

.btn-alt {
    border: 2px solid #fff;
    color: #fff;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
}

/* --- MEDIA QUERIES (BANNER DE PAGINA DE SERVICIOS) --- */

/* Laptops (769px - 1024px) */
@media (max-width: 1024px) {
    .services-banner {
        min-height: 80vh;
    }

    .services-content {
        max-width: 700px;
    }
}

/* Tablets (481px - 768px) */
@media (max-width: 768px) {
    .services-banner {
        text-align: center;
        justify-content: center;
    }

    .services-content {
        align-items: center;
        max-width: 100%;
    }

    .services-btns {
        justify-content: center;
    }

    .services-overlay {
        background: rgba(0, 0, 0, 0.7);
        /* Oscurecemos más para legibilidad móvil */
    }
}

/* Móviles (320px - 480px) */
@media (max-width: 480px) {
    .services-banner {
        padding-top: 80px;
        /* Espacio para el header fijo */
        min-height: 100vh;
        /* Pantalla completa en móvil */
    }

    .services-btns {
        flex-direction: column;
        width: 100%;
    }

    .btn-main,
    .btn-alt {
        width: 100%;
        /* Botones de ancho completo para facilitar el clic táctil */
        text-align: center;
    }
}

/* ==========================================
   2. CINTAS DE ACCION SERVICIOS
   ========================================== */

/*caja contenedora de la seccion de acciones*/
.cinta-accion {
    background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.603)), url(../imagenes/fondo-mapa.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    min-height: 15vh;
    background-color: var(--dark);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

/*caja contenedora de las acciones*/
.acciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;

}

/*imagnes de la aciiones*/
.acciones img {
    width: 30px;
}

/*titulo de las acciones*/
.acciones h2 {
    text-transform: uppercase;
    font-size: 1.2rem;
    color: var(--neon);
    font-family: montserrat;
    font-weight: 500;

}

/* --- MEDIA QUERIES (CINTA DE ACCION DE PAGINA DE SERVICIOS) --- */

/* Laptops (769px - 1024px) */
@media (max-width: 1024px) {
    .cinta-accion {
        padding: 3rem 0;
    }

    .acciones h2 {
        font-size: 1rem;
    }
}

/* Tablets (481px - 768px) */
@media (max-width: 768px) {

    .cinta-accion {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        padding: 1rem;
    }

    .acciones {
        flex-direction: column;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    .acciones h2 {
        font-size: .9rem;
    }
}

/* Móviles (320px - 480px) */
@media (max-width: 480px) {
    .cinta-accion {
        background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.603)), url(../imagenes/fondo-mapa.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
        padding: 1rem;
    }

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

    .acciones h2 {
        font-size: 1rem;
    }

    .acciones img {
        width: 25px;
    }
}


/* ==========================================
   3. CATÁLOGO DE SERVICIOS
   ========================================== */

/* --- SECCIÓN CATÁLOGO --- */
.catalogo-servicios {
    background-color:#0a0a0a;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 50px 5%;
    display: flex;
    flex-direction: column;
    color: #fff;
}

/*caja contenedora del titulo de la seccion de servicios*/
.servicios-intro {
    text-align: center;
    margin-bottom: 60px;
}

/*titulo de la seccion de servicios*/
.servicios-intro h2 {
    color: #fff;
    font-family: montserrat;
    font-weight: 700;
    font-size: 2rem;
    text-transform: uppercase;
}

/*texto neones del titulo del catalogo de servicios*/
.neon-text {
    color: var(--color-principal);
    text-shadow: 0 0 10px rgba(204, 255, 11, 0.3);
    font-weight: 600;
}

/* GRID RESPONSIVO */
.grid-interactivo {
    display: grid;
    /* 1 columna en móvil, se adapta a 2 y 4 en pantallas más grandes */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    align-items: start;
}

/* TARJETAS INDIVIDUALES */
.servicio-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.466);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 1px;
    overflow: hidden;
    position: relative;
    /* Importante para el efecto acordeón */
}

/*linea vertical NEON  de la tarjeta*/
.linea-neon {
    position: absolute;
    left: 0;
    top: 20%;
    width: 5px;
    /* Ancho fijo para que no se vea gigante en desktop */
    height: 60%;
    background: var(--color-principal);
    border-radius: 0 10px 10px 0;
    box-shadow: 0 0 15px var(--color-principal);
}

/*Efecto hover de la tarjeta*/
.servicio-item:hover {
    border-color: rgba(204, 255, 11, 0.5);
}

/* CABECERA DE LA TARJETA */
.servicio-header {
    padding: 35px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*caja contenedora de los iconos de las tarjetas*/
.icon-box {
    color: var(--color-principal);
    font-weight: bold;
    font-family: montserrat;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

/*titulo de las tarjetas*/
.servicio-header h3 {
    font-family: montserrat;
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

/* INDICADOR FLECHA despliegue de la tarjeta */
.flecha-indicator {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transition: 0.4s ease;
}

/* --- ESTADO ACTIVO (CUANDO LA TARJETA SE DESPLIEGA) --- */
/*CUANDO LA TARJETA SE DESPLIEGA*/
.servicio-item.active {
    border-color: var(--color-principal);
    background: rgba(204, 255, 11, 0.03);
}

/*titulo de la tarjeta CUANDO SE DESPLIEGA*/
.servicio-item.active h3 {
    color: var(--color-principal);
}

/*flecha CUANDO SE DESPLIEGA*/
.servicio-item.active .flecha-indicator {
    transform: translateY(-50%) rotate(-135deg);
    border-color: var(--color-principal);
}

/* --- CONTENIDO DESPLEGABLE --- */
.servicio-content {
    max-height: 0;
    /* Cerrado por defecto */
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/*CUANDO LA TARJETA SE DESPLIEGA ALTO MAXIMO*/
.servicio-item.active .servicio-content {
    max-height: 600px;
    /* Se abre solo cuando tiene la clase .active */
}

/* contenido de la tarjeta cuando se despliega margen interno*/
.content-desplegado {
    padding: 0 30px 30px 30px;
}

/*parrafo del contenido de la tarjeta cuando se despliega*/
.detalle-txt {
    color: #cfcece;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/*lista de servicios desplegable*/
.lista-incluye {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

/*lista de servicios textos*/
.lista-incluye li {
    font-size: 0.85rem;
    color: #eee;
    margin-bottom: 8px;
    display: flex;
    gap: 10px;
}

/*icono de la lista de servicios*/
.lista-incluye li::before {
    content: '✓';
    color: var(--color-principal);
}

/*boton de servicio*/
.btn-servicio {
    display: block;
    width: 100%;
    background: var(--color-principal);
    color: #000;
    text-align: center;
    padding: 12px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: 0.3s;
}

/*boton de servicio hover*/
.btn-servicio:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 15px rgba(204, 255, 11, 0.4);
}

/* --- ESTILOS PARA LA CAJA DE VALORES DENTRO DEL GRID --- */
/*caja de valores*/
.caja-valores-final {
    background: rgba(204, 255, 11, 0.03);
    width: 100%;
    /* Un toque sutil de neón de fondo */
    border: 2px dashed rgba(204, 255, 11, 0.3);
    /* Borde discontinuo para diferenciarla */
    border-radius: 15px;
    padding: 30px;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 350px;
    /* Para que alinee con las cajas abiertas */
    text-align: center;
}

/*titulo de la caja de valores*/
.cta-mini-titulo {
    font-family: montserrat;
    font-weight: 800;
    font-size: 2.1rem;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* Texto neón de la caja de valores*/
.neon-text2 {
    color: var(--color-principal);
    text-shadow: 0 0 10px rgba(204, 255, 11, 0.3);
    font-weight: 800;
    font-size: 2.3rem;

}

/* NUBE DE TAGS */
.nube-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 25px;
}

/*boton dentro de la caja de valores*/
.tag {
    padding: 10px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.9rem;
    color: #fff;
    transition: all 0.4s ease;
}

/* TRANSFORMS ÚNICOS PARA CADA BOTÓN/TAG */
/*boton 1*/
.btn-1 {
    transform: rotate(-10deg);

}

/*boton 2*/
.btn-2 {
    transform: translateY(2px) rotate(6deg);

}

/*boton 3*/
.btn-3 {
    transform: scale(1.1);
}

/*boton 4*/
.btn-4 {
    transform: rotate(-6deg);
}

/*boton 5*/
.btn-5 {
    transform: rotate(4deg);
}

/*boton 6*/
.btn-6 {
    transform: translateY(3px) rotate(-2deg);
    color: var(--color-principal);
    border-color: var(--color-principal);

}

/* HOVER: Al pasar el mouse, el tag se endereza y brilla */
.tag:hover {
    background: var(--color-principal);
    color: #000;
    transform: scale(1.2) rotate(0deg) skew(0deg);
    box-shadow: 0 0 15px var(--color-principal);
    z-index: 5;
}

/* BOTÓN DE CONTACTO DENTRO DE LA CAJA */
.btn-contacto-mini {
    display: inline-block;
    padding: 12px 20px;
    background: var(--color-principal);
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: 0.3s;
}

/*boton de contacto hover*/
.btn-contacto-mini:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(204, 255, 11, 0.4);
}

/* AJUSTE RESPONSIVE: caja cierre valores*/
@media (max-width: 500px) {
    .caja-valores-final {
        padding: 20px 10px !important;
        min-height: auto !important;
        /* Que crezca según el contenido */
    }

    .cta-mini-titulo {
        font-size: 1.5rem;
        /* Bajamos el tamaño */
        line-height: 1.2;
        padding: 0 10px;
        word-wrap: break-word;
        /* Rompe palabras si son muy largas */
    }

    .neon-text2 {
        display: inline-block;
        font-size: 1.5rem;
        /* Ayuda a que el texto neón se mantenga en línea */
    }

    /* 3. Nube de Tags: Evitamos que el texto se salga de los botones */
    .nube-tags {
        gap: 8px;
        /* Reducimos espacio entre botones */
    }

    .tag {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
        /* Letra más pequeña para que quepa la palabra */
        white-space: nowrap;
        /* Evita que la palabra se parta en dos líneas */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        /* No permite que el botón sea más ancho que la pantalla */
    }

    .btn-1,
    .btn-2,
    .btn-3,
    .btn-4,
    .btn-5,
    .btn-6 {
        transform: rotate(0deg) skew(0deg) !important;
        /* En pantallas tan pequeñas, los transforms pueden sacar el texto de los bordes */
    }

    /* Opcional: grid-column: span 2; si quieres que sea más larga */
}