/* Bloque con gradiente animado de fondo */
#blog-surface{
  position: relative;
  isolation: isolate;   /* asegura que z-index internos no escapen */
  overflow: hidden;
  width: 100%;
}

/* Capa animada detrás del contenido */
#blog-gradient{
  position: absolute;
  inset: -25%;          /* más grande para que al animar no se vean bordes */
  z-index: 0;
  pointer-events: none;
  will-change: background-image, opacity;
  opacity: .95;
  background: linear-gradient(90deg, #ffffff, #f8fbff); /* estado inicial */
}

/* El contenido va por encima del underlay */
/* Después: NO afectes al underlay */
#blog-surface > :not(#blog-gradient){
  position: relative;
  z-index: 1;
}


/* Que no tapen el efecto */
.theme-light .filters{ background: transparent; }
.theme-light .content-area{ background: transparent; }









/* === Separación sólida entre filtros y la primera tarjeta === */
:root{
  /* Ajusta este valor cuando quieras más/menos espacio */
  --gap-filtros: clamp(24px, 3.2vw, 44px);
}

.filters{
  position: relative;
  z-index: 2;
  background: #fff;              /* color de superficie */
  padding-bottom: var(--gap-filtros);   /* usa padding, no margin */
  margin-bottom: 0;              /* evita colapso de márgenes */
  border-bottom: 1px solid #00000010;   /* opcional: línea sutil */
}

/* Evita colapso arriba del contenido y asegura apilado correcto */
.content-area{
  position: relative;
  z-index: 1;
  /* por si tu primer hijo tenía margen-top que colapsaba,
     un pequeño padding neutraliza ese efecto */
  padding-top: 80px;
}

/* En móvil puedes reducir un poco la brecha si quieres */
@media (max-width: 640px){
  :root{ --gap-filtros: clamp(18px, 3.5vw, 28px); }
}


/* --- Que el video del hero se extienda bajo la siguiente sección --- */
:root{
  /* Ajusta este valor para “cuánto” quieres que el video baje */
  --hero-bleed: 64px;            /* prueba 48–80px según gusto */
}

/* Asegura que el video cubra el hero completo */
.hero{
  position: relative;
  min-height: clamp(520px, 68vh, 860px); /* opcional: que sea más alto */
  margin-bottom: calc(-1 * var(--hero-bleed));   /* baja el hero visualmente */
  overflow: hidden;
}
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La sección de filtros “recupera” el espacio con padding (no se colapsa) */
.hero + .filters{
  position: relative;
  z-index: 2;
  padding-top: var(--hero-bleed);
  margin-top: 0;                 /* por si había margen */
  background: #fff;              /* o transparente, según diseño */
}

/* En móviles, sangrado un poco menor */
@media (max-width: 640px){
  :root{ --hero-bleed: 40px; }
}