/* ============================================================
   ESTRUCTURA GLOBAL Y HERO (BASADO EN NOSOTROS)
   ============================================================ */

/* Contenedor controlado para que no ocupe el 100% de ancho */
.servicios .container {
    max-width: 1140px; 
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Hero de Servicios: Clon del estilo de Nosotros */
.servicios-hero {
	background-color: #000;
    background-image: url('../img/web/banner-servicios.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    
    /* Dimensiones controladas */
    height: 60vh; 
    min-height: 400px;
    
    /* Alineación de contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

/* Ajustes de texto dentro del Hero sin reinventar tus estilos base */
.servicios-hero h1 {
    margin-bottom: 15px;
    font-weight: 800;
}

.servicios-hero p {
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
}
/* ============================================================
   RESPONSIVO: HERO DE SERVICIOS
   ============================================================ */

@media (max-width: 768px) {
    .servicios-hero {
        /* Bajamos la altura en móvil para que no ocupe toda la pantalla y deje ver contenido */
        height: 50vh; 
        min-height: 350px;
        
        /* Desactivamos el background-attachment: fixed en móviles */
        /* Nota: Muchos navegadores móviles (iOS) dan tirones con el efecto parallax */
        background-attachment: scroll; 
        
        padding: 40px 20px;
    }

    .servicios-hero h1 {
        /* Reducimos un poco el tamaño para que no rompa en pantallas pequeñas */
        font-size: 1.8rem; 
        line-height: 1.2;
    }

    .servicios-hero p {
        font-size: 1rem;
        padding: 0 10px;
    }
}

/* Ajuste para pantallas muy pequeñas (iPhone SE, etc.) */
@media (max-width: 480px) {
    .servicios-hero {
        height: 45vh;
    }
    
    .servicios-hero h1 {
        font-size: 1.5rem;
    }
}





/* ============================================================
   SECCIÓN SERVICIOS - ESTILO AGENCIA (NEÓN & GLOW)
   ============================================================ */

/* 1. TEXTO MARTILLO - Enfoque en el Azul Neón */
.servicios-intro {
    padding: 150px 0;
    text-align: center;
    background: #fff;
}

.servicios-intro .subtitulo {
    display: block;
    color: #ce62f2; /* Azul más brillante/vibrante */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
   /* text-shadow: 0 0 10px rgba(0, 210, 255, 0.3);*/
}

.servicios-intro .texto-martillo {
    max-width: 900px;
    margin: 0 auto;
    font-weight: 800;
    line-height: 1.2;
    color: #1a1a1a;
}

/* 2. BLOQUES DE CATEGORÍA - Espaciado y Sinergia */
.categoria-bloque {
    padding: 150px 0;
}

.impresion-section, .uniformes-section {
    background-color: #fcfcfc;
}

/* El bloque oscuro ahora tiene profundidad */
.letreros-section.dark {
    color: #fff;
	background-image: url('../img/web/fondo-galeria.png');
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.grid-flex {
    display: flex;
    align-items: center;
    gap: 80px;
}

.grid-flex.reverse {
    flex-direction: row-reverse;
}

/* Imagen con bordes súper redondeados como en tu Home */
.categoria-visual img {
    max-width: 100%;
    border-radius: 30px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transition: transform 0.4s ease;
}

.categoria-bloque:hover .categoria-visual img {
    transform: scale(1.02);
}

/* 3. TAGS Y LISTAS NEÓN */
.tag {
    background: rgba(0, 210, 255, 0.1);
    color: #007bff;
    padding: 8px 18px;
    border-radius: 50px; /* Estilo píldora */
    font-weight: 700;
    font-size: 0.75rem;
    margin-bottom: 25px;
    display: inline-block;
    border: 1px solid rgba(0, 210, 255, 0.2);
}

.categoria-info h3 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.destacados-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 30px 0 40px;
}

.destacados-lista .item {
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #444;
}

.dark .destacados-lista .item { color: #ccc; }

.destacados-lista .item span {
    color: #2ecc71; /* Punto verde como tus botones */
    font-size: 1.2rem;
}

/* 4. BOTONES "IGRAPHIC STYLE" (VERDE NEÓN CON GLOW) */
.btn-categoria {
    display: inline-block;
    padding: 16px 35px;
    background: #ce62f2; /* El verde de tu Home */
    color: #fff;
    text-decoration: none;
    border-radius: 50px; /* Redondeados como en el Home */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 10px 20px rgba(46, 204, 113, 0.3);
}

.btn-categoria:hover {
    background: #b311e9;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(46, 204, 113, 0.5); /* Efecto Glow al pasar el mouse */
    color: #fff;
}

/* Botón especial para fondo oscuro */
.letreros-section.dark .btn-categoria.inverse {
    background: #ce62f2;
    color: #000;
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

.letreros-section.dark .btn-categoria.inverse:hover {
    background: #b311e9;
    color: #fff;
    box-shadow: 0 15px 30px rgba(46, 204, 113, 0.4);
}

/* 5. RESPONSIVO */
@media (max-width: 991px) {
    .grid-flex, .grid-flex.reverse {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    
    .destacados-lista {
        text-align: left;
        max-width: 380px;
        margin: 20px auto 40px;
    }
}



/* Estado inicial: invisible y un poco más abajo */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

/* Estado final: visible y en su posición original */
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay escalonado para la información de categorías (efecto cascada) */
.categoria-info h3.visible { transition-delay: 0.2s; }
.categoria-info p.visible { transition-delay: 0.4s; }
.destacados-lista.visible { transition-delay: 0.6s; }

/* Efecto especial para las imágenes (un ligero zoom) */
.categoria-visual {
    opacity: 0;
    transform: scale(0.95);
    transition: all 1s ease-in-out;
}
.categoria-visual.visible {
    opacity: 1;
    transform: scale(1);
}