/* ==========================================================================
   bl-rise — La última sección sube con el scroll (scrub) y queda CENTRADA en la
   pantalla al llegar al fondo de la página. Cristal esmerilado permanente.
   Comportamiento y opciones en bl-rise.js. Requiere GSAP + ScrollTrigger.

   No toca el pie del sitio: el pie se queda en flujo normal; solo se mueve el
   panel.

   Estructura (dos contenedores anidados en Elementor):

     <section class="bl-rise">        <- exterior: ancla del scroll
       <div class="bl-rise__panel">   <- interior: es lo que sube (cristal)
         ... contenido ...
       </div>
     </section>
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) El hueco / ancla
   -------------------------------------------------------------------------- */
.bl-rise {
	position: relative;
	z-index: 2;
	/* SIN overflow:clip a propósito: el panel VIAJA más allá de su hueco hasta
	   centrarse en la pantalla; recortarlo lo haría desaparecer al subir. (También
	   se quitó isolation:isolate, que bloqueaba el backdrop-filter del cristal.) */
}

/* --------------------------------------------------------------------------
   2) El panel que sube.

   IMPORTANTE: el desplazamiento del panel lo controla POR COMPLETO GSAP (con
   `y` en píxeles) desde bl-rise.js. NO poner aquí ningún `transform`: GSAP lo
   leería como base y lo sumaría a su propia animación, dejando el panel
   descolocado (no llegaría a su destino). No reintroducir.

   Degradación segura: si el JS fallara, el panel se queda en su sitio y la web
   se ve con normalidad.
   -------------------------------------------------------------------------- */
.bl-rise__panel {
	position: relative;
	will-change: transform;
}

/* --------------------------------------------------------------------------
   2b) GLASS — cristal esmerilado REUTILIZABLE.

   Para usarlo en CUALQUIER contenedor: añade la clase `bl-glass` en Elementor
   (Avanzado → CSS Classes). Es OPCIONAL e independiente del reveal: el CTA de
   bl-rise (.bl-rise-cta) NO lo lleva de serie; si lo quieres con cristal, pon
   `bl-rise-cta bl-glass`. Sin `bl-glass`, reveal sin desenfoque.
   (El panel de la versión con transform, .bl-rise__panel, sí lo conserva.)

   Se nota incluso sobre fondos casi blancos porque no depende solo del blur:
   suma un velo tenue + un borde claro que dibuja el canto + una sombra suave.

   EL TINTE (color de fondo) LO PONES TÚ EN ELEMENTOR y debe ser SEMITRANSPARENTE
   (p. ej. un color al 25-45 % de opacidad). Si es opaco, no se ve nada por detrás
   y no hay cristal. Aquí NO se define ningún background a propósito: uno por
   defecto pisaba el fondo puesto en Elementor (misma especificidad, carga
   posterior) y "borraba" los colores del contenedor.

   OJO EN ELEMENTOR V4: al estilizar, ten seleccionada la ficha "local" (el
   elemento), no la ficha de la clase `bl-glass`; si no, estarás editando la
   clase global (afecta a todos los que la lleven).

   Intensidad del desenfoque: variable --bl-glass-blur (por defecto 30px).
   -------------------------------------------------------------------------- */
.bl-glass,
.bl-rise__panel {
	/* AQUÍ NUNCA SE PONE `background`. En Elementor V4 el estilo `local` del
	   elemento y esta regla tienen la MISMA especificidad, y esta hoja carga
	   después: cualquier fondo puesto aquí (aunque sea transparent) PISA el que
	   el usuario define en `local`. El tinte se pone siempre en Elementor. */
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
	backdrop-filter: blur(var(--bl-glass-blur, var(--bl-rise-blur, 30px))) !important;
	-webkit-backdrop-filter: blur(var(--bl-glass-blur, var(--bl-rise-blur, 30px))) !important;

	/* Estabiliza la capa GPU y evita el parpadeo del contenido visto a través del
	   cristal al moverse (subpíxel / re-rasterizado del backdrop-filter). */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   3) Accesibilidad
   Con prefers-reduced-motion, bl-rise.js sale sin crear la animación y no
   escribe ningún transform, así que el panel queda en su sitio sin más. No
   hace falta regla CSS.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4) STICKY FOOTER REVEAL — ACOTADO (estilo adelt.io).

   El footer se pega al fondo SOLO dentro de un contenedor propio, así aparece
   desde abajo al FINAL y el CTA se desliza por encima revelándolo. No afecta al
   resto del sitio (a diferencia de un sticky global).

   ESTRUCTURA en Elementor (clases en Avanzado → CSS Classes):
     .bl-rise-wrap            <- CONTENEDOR envoltorio
       ├─ .bl-rise-cta        <- CTA/contenido que sube por encima
       └─ .bl-rise-footer     <- FOOTER recreado (logo, dirección, mapa...)

   (Clase propia bl-rise-cta, NO bl-rise__panel: así el bl-rise.js de la versión
   con transform no intenta animar este CTA. Este efecto es solo CSS.)

   REQUISITOS:
     - Desactiva el footer de Astra en esa página (para no tener dos footers).
     - Ningún ancestro hasta el scroll puede tener overflow != visible, o el
       sticky no pega (compruébalo con el snippet del overflow).
     - Etiqueta HTML del contenedor footer = "footer" (Avanzado → Etiqueta HTML)
       por semántica/SEO.
   -------------------------------------------------------------------------- */
.bl-rise-wrap {
	position: relative;
	/* El envoltorio DEBE crecer hasta la suma de sus hijos (CTA + footer): el
	   recorrido del sticky es "alto del envoltorio − alto del footer". Si un
	   contenedor padre flex lo encoge (flex-shrink por defecto) o le impone
	   altura, ese recorrido se queda en cero y el efecto no ocurre. */
	height: auto !important;
	flex-shrink: 0 !important;
}

/* El CTA va por encima del footer. El margin-bottom NEGATIVO es el SOLAPE: el
   footer se monta detrás del CTA y, al subir, se revela. El valor debe ser ≈ el
   ALTO DE TU FOOTER en negativo (para que quede del todo tapado y se revele
   entero). Ajústalo a tu footer (o define --bl-rise-overlap). A 0 no hay reveal. */
.bl-rise-wrap .bl-rise-cta {
	/* !important porque Elementor fuerza position:static, y sin elemento
	   posicionado el z-index es INERTE: el footer (sticky, sí posicionado) se
	   pintaría por delante del CTA. */
	position: relative !important;
	z-index: 2;
	/* OJO: un margin-bottom negativo mayor que el alto del CTA deja el envoltorio
	   MÁS CORTO que el footer y el sticky deja de pegar. Mantenlo pequeño (o 0). */
	margin-bottom: var(--bl-rise-overlap, 0px);
}

/* El footer, pegado al fondo dentro del envoltorio: se revela al subir el CTA.
   !important porque Elementor fuerza position:relative en sus contenedores. */
.bl-rise-footer {
	position: -webkit-sticky !important;
	position: sticky !important;
	bottom: 0 !important;
	z-index: 1;
}