#fw-section-hero-0 {

/* Esto crea un degradado negro en la parte inferior de la imagen principal */
/* Nota: Puede que tengamos que ajustar la clase ".hero-section" según Fourthwall */
div[class*="section-background"], header {
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

/* --- Efecto Parallax Sutil --- */

/* 1. Tienes que encontrar la "sección" o "div" que contiene la imagen de fondo de la cúpula */
/* Sustituye '.nombre-de-tu-seccion-hero' por la clase real de tu web */

div[class*="section-background"] {
    /* Esta es la línea mágica que "congela" el fondo */
    background-attachment: fixed !important;
    /* Asegura que la imagen cubra todo y esté centrada */
    background-position: center center !important;
    background-size: cover !important;
}

/* NOTA: En algunos móviles el 'fixed' se desactiva automáticamente por rendimiento,
pero en escritorio se verá espectacular. */
}
#fw-section-tiers-1726830402 {

/* === PARTE 1: ESTILO DE LA TARJETA PREMIUM === */
/* Apunta al hijo directo (la tarjeta real) */
div[class*="grid__column"] > div {
    border: 1px solid #333333 !important; /* Borde gris sutil */
    background-color: #1A1A1A !important; /* FONDO GRIS PIZARRA (Ya no es negro) */
    border-radius: 12px !important;       /* Esquinas más suaves y premium */
    padding: 30px !important;             /* Más aire por dentro */
    /* Sombra suave para que flote sobre el fondo negro */
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8) !important;
}

/* === PARTE 2: ARREGLAR BOTÓN UNIRSE === */
/* Como el fondo ahora es gris claro, el botón blanco no destaca. Lo ponemos negro. */
div[class*="grid__column"] > div button {
    background-color: #000000 !important; /* Botón Negro Sólido */
    color: #FFFFFF !important;            /* Texto Blanco */
    border: none !important;
}

/* === PARTE 3: MATAR LA SOMBRA FEA DE "MOSTRAR MÁS" === */
/* Busca el contenedor que tiene ese gradiente feo y lo hace transparente */
div[class*="grid__column"] > div div[style*="linear-gradient"] {
    background: none !important; /* ¡Adiós sombra! */
    height: auto !important; /* Ajuste por si acaso */
}
/* Capa extra de seguridad por si la sombra es un box-shadow */
div[class*="grid__column"] > div div[class*="line-clamp"]::after {
    background: none !important;
    box-shadow: none !important;
}

/* --- Efecto Levitación en Tarjetas --- */

/* 1. Identifica la clase de tus tarjetas (suscripción y productos) */
/* Sustituye '.tu-tarjeta-generica' por las clases reales, separadas por comas */
/* Ejemplo hipotético: .subscription-box, .product-grid-item */

div[class*="grid__column"] {
    /* Define la velocidad de la animación (0.3 segundos, movimiento suave) */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    /* Nos aseguramos que tenga una sombra base inicial */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 2. Qué pasa cuando el ratón está encima (:hover) */
div[class*="grid__column"]:hover {
    /* Se mueve 7 píxeles hacia arriba (eje Y negativo) */
    transform: translateY(-7px) !important;
    /* La sombra crece y se hace más difusa, dando sensación de altura */
    box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important;
}
}
#fw-section-featured-collection-6e4ad09f-1fe9-43f7-9dc7-a71f04135484 {

/* === FORZAR ALINEACIÓN CENTRADA === */

/* 1. Convertimos la cabecera (que ahora es una fila izquierda-derecha) en una columna centrada */
div[class*="section-header"], header {
    display: flex !important;
    flex-direction: column !important; /* Pone uno debajo del otro */
    align-items: center !important;    /* Centra todo horizontalmente */
    justify-content: center !important;
    text-align: center !important;
    gap: 24px !important; /* Añade aire entre el título y el botón */
}

/* 2. Aseguramos que el texto del título se centre sí o sí */
h2, h3, div[class*="heading"] {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* 3. (Opcional) Ajuste fino para el botón si se pone rebelde */
button, a[class*="button"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Efecto Levitación en Tarjetas --- */

/* 1. Identifica la clase de tus tarjetas (suscripción y productos) */
/* Sustituye '.tu-tarjeta-generica' por las clases reales, separadas por comas */
/* Ejemplo hipotético: .subscription-box, .product-grid-item */

div[class*="grid__column"] {
    /* Define la velocidad de la animación (0.3 segundos, movimiento suave) */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    /* Nos aseguramos que tenga una sombra base inicial */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 2. Qué pasa cuando el ratón está encima (:hover) */
div[class*="grid__column"]:hover {
    /* Se mueve 7 píxeles hacia arriba (eje Y negativo) */
    transform: translateY(-7px) !important;
    /* La sombra crece y se hace más difusa, dando sensación de altura */
    box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important;
}
}
#fw-section-recent-posts-2015e142-fe58-47d9-9ab9-b98a8e2513f6 {

/* Ocultar estadísticas (likes/comentarios) en las tarjetas de post */
.post-tile__feedback {
    display: none !important;
}

/* Si lo anterior no va, prueba a ser más agresivo ocultando el pie de la tarjeta */
/* ¡OJO! Revisa que no borre también el candado de "bloqueado" */
/* .post-card__footer {
   display: none !important;
}
*/
}