/* =========================================
   HERO POP-ART REDESIGN (VISIBLE & STRONG)
   Target: .hero-home
   ========================================= */

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

/* 1. CONTENEDOR HERO */
.hero-home {
    background-color: #fcf8f5 !important;
    position: relative;
    overflow: hidden !important;
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
    border-bottom: 8px solid #1a1a1a !important;
    /* Separación explícita */
}

/* 2. CAPA 1: TEXTURA PAPEL (::before) */
.hero-home::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.15;
    /* Más visible */
    background-image:
        radial-gradient(#111 1px, transparent 1px),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 4px);
    background-size: 16px 16px, 8px 8px;
    pointer-events: none;
}

/* 3. CAPA 2: MIRÓ CLEAN LINES (::after) */
/* Reemplazamos las "Macroformas" pesadas por líneas finas y limpias */
.hero-home::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;

    background-image:
        /* Línea Curva simple (Negra) */
        radial-gradient(ellipse at 50% -20%, transparent 60%, rgba(0, 0, 0, 0.05) 61%, transparent 62%),
        /* Acento Rojo Pequeño */
        radial-gradient(circle at 80% 20%, rgba(237, 26, 36, 0.4) 0%, transparent 20px);

    mix-blend-mode: normal;
}

/* 4. ELEMENTOS EXISTENTES (SVG) */
/* Permitimos que los SVGs originales se vean, son parte del diseño Miró */
.hero-home>svg {
    opacity: 0.8 !important;
    /* Vuelta a la visibilidad */
    z-index: 0;
    filter: grayscale(100%) contrast(120%);
    /* Estilo tinta */
}

/* 5. TIPOGRAFÍA Y CONTENIDO (z-index superior) */
.hero-home h1,
.hero-home p,
.hero-home a,
.hero-home span {
    position: relative;
    z-index: 10 !important;
    /* Content is King */
}

/* Título H1 */
.hero-home h1 {
    font-family: 'Luckiest Guy', cursive !important;
    color: #1a1a1a !important;
    text-shadow: 4px 4px 0 #fff, 7px 7px 0 rgba(0, 0, 0, 0.8) !important;
    letter-spacing: 1px;
}

/* Badge "Lo Más Nuevo" */
.hero-home span.bg-pop-red {
    background-color: #ED1A24 !important;
    color: #fff !important;
    font-family: 'Bangers', cursive !important;
    border: 3px solid #111 !important;
    box-shadow: 4px 4px 0 #111 !important;
    transform: rotate(-2deg);
    padding: 0.5rem 1rem !important;
}

/* CTA Botón */
.hero-home a[href*="tienda"] {
    background-color: #F39314 !important;
    /* Naranja */
    color: #111 !important;
    font-family: 'Fredoka One', cursive !important;
    border: 3px solid #111 !important;
    box-shadow: 5px 5px 0 #111 !important;
    text-transform: uppercase;
}

.hero-home a[href*="tienda"]:hover {
    background-color: #F0E588 !important;
    /* Amarillo */
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 #111 !important;
}

/* Imagen Principal (Círculo) */
.hero-home .bg-pop-orange {
    background: #fff !important;
    border: 4px solid #111 !important;
    box-shadow: 10px 10px 0 #127FE5 !important;
    border-radius: 50% !important;
    transform: rotate(3deg);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-home::after {
        opacity: 0.4 !important;
        /* Menos intenso en móvil para leer */
        background-image:
            radial-gradient(circle at 90% 10%, rgba(241, 196, 15, 0.4) 0%, rgba(241, 196, 15, 0.4) 40%, transparent 41%);
    }
}