/* =====================================================================
   Servia — capa "liquid gooey" de la landing
   =====================================================================

   HOJA APARTE A PROPÓSITO. `styles.css` trae el diseño heredado del sitio
   de NesuxTech con sus 19 keyframes ambientales, y el revelado al hacer
   scroll (`html.js-anim` / `data-anim`) vive al final de ese archivo. Esto
   es una capa NUEVA que convive con las dos: aquí no se toca ni una regla
   de `data-anim`, y el escáner del punto 1 de `test_landing.ps1` sigue
   mirando sólo `styles.css`.

   TRES EFECTOS, TRES ELEMENTOS FILTRADOS COMO MÁXIMO:
     1. `.goo-hero`      — 1 elemento, filtro permanente pero estático.
     2. `.btn-goo`       — el filtro se activa SÓLO en :hover/:focus-visible,
                           así que en reposo el coste es cero y nunca hay más
                           de un botón filtrado a la vez.
     3. `.goo-cursor`    — 1 elemento, sólo en ratón fino.
   Un filtro SVG obliga a la GPU a rasterizar el subárbol entero en cada
   fotograma. Por eso no está en las tarjetas de módulo, ni en las de dolor,
   ni en la galería: son decenas de elementos y el efecto que se gana no
   compensa la caída de fluidez al hacer scroll.

   QUÉ PASA SIN JAVASCRIPT:
   los blobs del hero se ven, quietos. Es decoración, y el fallo correcto de
   una decoración es quedarse como está — al revés que el revelado al scroll,
   donde lo que se oculta DEBE colgar de una clase que ponga el JS. El
   único gooey que sí se apaga sin JS es el de los botones (`html.js-goo`),
   porque sus gotas las coloca GSAP: sin él el filtro no fundiría nada y
   sólo redondearía un rectángulo.

   PALETA: todos los colores salen de las variables de `styles.css`. Ni un
   literal nuevo.
   ===================================================================== */

/* El <svg> de los filtros no debe ocupar sitio ni, sobre todo, ensanchar
   el documento: un <svg> suelto con tamaño mete barra de scroll horizontal
   en el móvil, que es de las pocas cosas que hacen que una landing se
   sienta rota (misma regla que vigila el punto 4 de la prueba). */
.goo-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* =====================================================================
   1. BLOBS DEL HERO
   ===================================================================== */
.goo-hero {
    position: absolute;
    inset: 0;
    z-index: 0;              /* `.servia-hero-grid` ya es z-index: 1 */
    pointer-events: none;
    overflow: hidden;
    filter: url(#goo);

    /* La transparencia va AQUÍ y no en los blobs: el feColorMatrix aplasta
       el alfa, así que un blob semitransparente se recorta con borde duro
       en vez de fundirse con el de al lado. */
    opacity: 0.5;

    /* LEGIBILIDAD. El efecto vive en el aire alrededor de la captura, no
       debajo del párrafo: la máscara apaga la capa sobre la columna de
       texto (izquierda en escritorio) y la deja entera a la derecha. */
    -webkit-mask-image: linear-gradient(100deg,
        transparent 0%, rgba(0, 0, 0, 0.28) 32%, rgba(0, 0, 0, 0.75) 55%, #000 78%);
    mask-image: linear-gradient(100deg,
        transparent 0%, rgba(0, 0, 0, 0.28) 32%, rgba(0, 0, 0, 0.75) 55%, #000 78%);
}

.goo-blob {
    position: absolute;
    /* Formas orgánicas, no círculos: un radio distinto por esquina da la
       silueta de gota que el filtro luego funde. */
    border-radius: 47% 53% 62% 38% / 51% 44% 56% 49%;
    will-change: transform;
}

.goo-blob--a {
    width: 28rem; height: 28rem;
    left: 44%; top: -14%;
    background: var(--primary-color);
}

.goo-blob--b {
    width: 20rem; height: 20rem;
    left: 66%; top: 20%;
    background: var(--accent-color);
    border-radius: 58% 42% 41% 59% / 43% 57% 43% 57%;
}

.goo-blob--c {
    width: 24rem; height: 24rem;
    left: 50%; top: 46%;
    background: var(--accent-secondary);
    border-radius: 39% 61% 55% 45% / 60% 38% 62% 40%;
}

.goo-blob--d {
    width: 16rem; height: 16rem;
    left: 78%; top: 2%;
    background: var(--primary-dark);
    border-radius: 55% 45% 36% 64% / 47% 62% 38% 53%;
}

/* En una columna el texto ocupa todo el ancho y la máscara diagonal ya no
   protege nada: se baja la intensidad en vez de tapar el hero. */
@media (max-width: 968px) {
    .goo-hero {
        opacity: 0.3;
        -webkit-mask-image: linear-gradient(180deg,
            transparent 0%, rgba(0, 0, 0, 0.4) 45%, #000 100%);
        mask-image: linear-gradient(180deg,
            transparent 0%, rgba(0, 0, 0, 0.4) 45%, #000 100%);
    }
}

/* =====================================================================
   2. BOTONES GOOEY (sólo los CTA primarios)
   =====================================================================
   Los `.btn-secondary` se quedan como están: si todo burbujea, nada
   destaca, y la jerarquía entre "Probar la demo" y "Ver qué incluye" es
   justamente lo que hay que preservar.

   EL TEXTO NO ENTRA EN EL FILTRO. `.btn-goo` es una capa hermana; la
   etiqueta y el icono suben a `z-index: 1` y se pintan encima, nítidos.
   Un filtro sobre el botón entero desenfocaría la palabra. */
.btn-primary {
    position: relative;
    isolation: isolate;      /* el contexto de apilamiento se queda dentro */
}

/* El marcado ya envolvía la etiqueta en <span> en los cuatro CTA. */
.btn-primary > span,
.btn-primary > i {
    position: relative;
    z-index: 1;
}

.btn-goo {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    /* `overflow: visible` es deliberado: si las gotas se recortaran contra
       el borde no habría derretimiento, sólo un relleno que crece dentro
       de una caja. Lo que vende el efecto es la gota que ASOMA. */
    overflow: visible;
}

/* Réplica exacta del fondo del botón. Es lo que da masa al filtro: sin
   ella las gotas flotarían sueltas en vez de fundirse con el botón.
   Lleva su propio :hover en lugar de `background: inherit` para que la
   transición sea previsible y no dependa del orden de cálculo. */
.goo-base {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    transition: background var(--transition-base);
}

.btn-primary:hover .goo-base,
.btn-primary:focus-visible .goo-base {
    background: linear-gradient(135deg, var(--primary-light), var(--accent-color));
}

.goo-gota {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin: -0.675rem 0 0 -0.675rem;
    border-radius: 50%;
    background: var(--accent-color);
    transform: scale(0);     /* GSAP las levanta desde el punto de entrada */
    will-change: transform;
}

/* EL FILTRO SÓLO CUANDO HAY QUIEN LO ALIMENTE.
   `html.js-goo` la pone `goo.js` tras confirmar que GSAP cargó y que no se
   ha pedido menos movimiento. Sin esa clase el hover del botón es el de
   siempre (elevación + sombra, ya en styles.css), que es la "contraparte
   simplificada" del efecto. */
html.js-goo .btn-primary:hover .btn-goo,
html.js-goo .btn-primary:focus-visible .btn-goo {
    filter: url(#goo-btn);
}

/* Sin JS las gotas no se animarían nunca; se ocultan para que no queden
   cuatro puntos cian pegados al borde izquierdo de cada botón. */
.btn-goo .goo-gota { visibility: hidden; }
html.js-goo .btn-goo .goo-gota { visibility: visible; }

/* =====================================================================
   3. CURSOR BLOB
   =====================================================================
   EL CURSOR NATIVO SE QUEDA VISIBLE. No hay ni una regla `cursor: none`
   en esta hoja, y es una decisión de seguridad además de estética: el blob
   lo crea `goo.js`, y si ese archivo falla —o GSAP no llega— esconder el
   puntero del sistema dejaría la página sin cursor visible. Es la versión
   de este efecto del "landing en blanco" que ya vigila el revelado.

   El elemento no está en el HTML: lo construye `goo.js`. Así no existe
   siquiera en el DOM cuando no toca (táctil, reduced-motion, sin GSAP). */
.goo-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    pointer-events: none;
    filter: url(#goo-cursor);
    opacity: 0;              /* GSAP lo enciende al primer movimiento real */
    will-change: transform;
}

.goo-cursor span {
    position: absolute;
    border-radius: 50%;
    background: var(--accent-color);
    will-change: transform;
}

.goo-cursor-nucleo {
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.75rem 0 0 -0.75rem;
}

/* La estela persigue al núcleo con más retraso; el filtro las funde en una
   sola gota con cola cuando el ratón corre, y las separa al frenar. */
.goo-cursor-estela {
    width: 1.05rem;
    height: 1.05rem;
    margin: -0.525rem 0 0 -0.525rem;
    background: var(--primary-light);
}

/* =====================================================================
   MENOS MOVIMIENTO
   =====================================================================
   `goo.js` ya no arranca nada con esta preferencia, pero el CSS la vuelve
   a cubrir por si alguien la cambia con la página abierta — el mismo
   cinturón y tirantes del revelado al scroll.

   Los blobs del hero SIGUEN VISIBLES: quietos son decoración, y quitarlos
   dejaría un hero distinto según la configuración del sistema. Lo que se
   apaga es el movimiento y el coste de los filtros que dependen de él. */
@media (prefers-reduced-motion: reduce) {
    .goo-blob {
        animation: none;
        transition: none;
    }

    /* El botón cae al hover de siempre: elevación y sombra, sin filtro. */
    html.js-goo .btn-primary:hover .btn-goo,
    html.js-goo .btn-primary:focus-visible .btn-goo {
        filter: none;
    }

    .btn-goo .goo-gota,
    html.js-goo .btn-goo .goo-gota {
        visibility: hidden;
    }

    /* Y el cursor personalizado no se pinta aunque algo lo hubiera creado. */
    .goo-cursor { display: none; }
}