:where([class^="ri-"])::before {
    content: "\f3c2";
}

/* CLASE BASE: Contiene la estructura (común a todos los dispositivos) */
.hero-parallax-base {
    /* Estructura y dimensiones */
    min-height: 80vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* Propiedades del Fondo (ESTÁTICO por defecto) */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* La imagen se desplazará con el scroll en móviles */
}

/* 🖥️ MEDIA QUERY: Activa el efecto Parallax solo en pantallas grandes */
@media (min-width: 768px) {
    .hero-parallax-base {
        /* ¡El truco del parallax solo para Desktop/Tablet! */
        background-attachment: fixed;
    }
}

/* CLASES MODIFICADORAS: Solo especifican la imagen de fondo */

/* Página de Membresía */
.hero-parallax-membresia {
    background-image: url('../images/membresia_hero.webp');
}

/* Página de Inicio */
.hero-parallax-inicio {
    background-image: url('../images/inicio_hero.webp');
}

/* Página de PERC */
.hero-parallax-perc {
    background-image: url('../images/perc_hero.webp');
}

/* Página de Noticias */
.hero-parallax-noticias {
    background-image: url('../images/noticias_hero.webp');
}

/* Página de Etica */
.hero-parallax-etica {
    background-image: url('../images/etica_hero.webp');
}

/* Página de Estructura */
.hero-parallax-estructura {
    background-image: url('../images/estructura_hero.webp');
}

/* Opcional: Estilos para la legibilidad del contenido (Texto) */
.hero-content {
    /* (Mismos estilos que antes) */
    position: absolute;
    z-index: 10;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Opcional: Estilos para la legibilidad del contenido (Texto) */
.hero-content-inicio {
    /* (Mismos estilos que antes) */
    position: absolute;
    z-index: 10;
    text-align: left;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}