/* =========================================
   SERVICES SECTION POP-ART REDESIGN
   Target: .home-services
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Fredoka+One&display=swap');

/* 1. SECCIÓN PRINCIPAL (.home-services) */
.home-services {
    background-color: #fcf8f5 !important;
    /* Cream Paper */
    position: relative;
    padding-top: 6rem !important;
    padding-bottom: 8rem !important;
    overflow: hidden !important;
    border-bottom: 8px solid #1a1a1a !important;
    /* Separación Sopa -> Services -> Alianzas */
}

/* 2. CAPA TEXTURA (::before) */
.home-services::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.1;
    background-image:
        radial-gradient(#111 1px, transparent 1px),
        repeating-linear-gradient(45deg, #ccc 0, #ccc 1px, transparent 0, transparent 50%);
    background-size: 10px 10px, 10px 10px;
    pointer-events: none;
}

/* 3. TÍTULO SECCIÓN */
.home-services h2 {
    font-family: 'Bangers', cursive !important;
    font-size: 4.5rem !important;
    color: #fff !important;
    text-shadow: 4px 4px 0 #111 !important;
    position: relative;
    z-index: 10;
    /* El contenedor padre ya tiene rotación en HTML, pero aseguramos estilo texto */
}

/* Contenedor Título */
.home-services .bg-pop-black {
    border: 4px solid #1a1a1a !important;
    box-shadow: 8px 8px 0 0 #ED1A24 !important;
    /* Sombra Roja */
}


/* 4. TARJETAS DE SERVICIOS */
/* Grid Items */
.home-services .grid>div {
    background-color: #ffffff !important;
    border: 4px solid #1a1a1a !important;
    box-shadow: 8px 8px 0 0 #1a1a1a !important;
    padding: 2.5rem !important;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative;
    z-index: 10;
}

/* Hover Cards */
.home-services .grid>div:hover {
    transform: translateY(-5px) !important;
    box-shadow: 12px 12px 0 0 #127FE5 !important;
    /* Sombra Azul */
}

/* Colores específicos por tarjeta (si existen clases bg-pop-*, las forzamos o respetamos si es necesario) */
/* Editoriales */
.home-services .grid>div:nth-child(1) {
    background-color: #fff !important;
}

/* Creación */
.home-services .grid>div:nth-child(2) {
    background-color: #F0E588 !important;
}

/* Amarillo */
/* Transmedia */
.home-services .grid>div:nth-child(3) {
    background-color: #dbeafe !important;
}

/* Azul claro */


/* Títulos Cards */
.home-services h3 {
    font-family: 'Bangers', cursive !important;
    /* Dispara la fuente pop */
    font-size: 2.5rem !important;
    color: #1a1a1a !important;
    margin-bottom: 1rem !important;
    text-transform: uppercase !important;
}

/* Texto Cards */
.home-services p {
    font-family: 'Fredoka One', cursive !important;
    font-size: 1.1rem !important;
    color: #444 !important;
}

/* Etiquetas (Bottom Tags) */
.home-services span.bg-pop-black {
    background-color: #1a1a1a !important;
    color: #fff !important;
    font-family: 'Fredoka One', cursive !important;
    font-size: 0.8rem !important;
    padding: 0.4rem 1rem !important;
    letter-spacing: 0.1em !important;
}

/* BOTÓN "DESCUBRIR TODO" */
.home-services a[href*="servicios"] {
    font-family: 'Bangers', cursive !important;
    font-size: 2rem !important;
    background-color: #127FE5 !important;
    /* Azul */
    color: #fff !important;
    border: 4px solid #1a1a1a !important;
    box-shadow: 6px 6px 0 0 #1a1a1a !important;
    padding: 1rem 3rem !important;
    text-transform: uppercase !important;
    display: inline-block;
}

.home-services a[href*="servicios"]:hover {
    background-color: #F39314 !important;
    /* Naranja */
    color: #1a1a1a !important;
    box-shadow: 4px 4px 0 0 #1a1a1a !important;
    transform: translate(2px, 2px);
}

/* STICKERS FLOTANTES (Pop Art Blobs) */
.home-services .miro-blob {
    font-family: 'Bangers', cursive !important;
    border: 3px solid #1a1a1a !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2) !important;
}