/* ========================================================
   Blob orgánico animado (clonado de app.evimedic.com).
   Aislado para usarlo en el landing.
   - Uso: <div class="containerBlob palette-1"></div>
   - JS lo hidrata inyectando SVG + clase blob-hydrated.
   - Tamaño con `--ai-blob-size` (px). Default abajo.
   ======================================================== */

.containerBlob,
.palette-1 {
    --bg-0: #101030;
    --bg-1: #050515;
    --blob-1: #00cfd6;
    --blob-2: #005f7e;
    --blob-3: #11c1ce;
    --blob-4: #9cd7ff;
    --blob-6: white;
}

.palette-2 {
    --bg-0: #545454;
    --bg-1: #150513;
    --blob-1: #ff3838;
    --blob-2: #ff9d7c;
    --blob-3: #ffdda0;
    --blob-4: #fff6ea;
}

.palette-3 {
    --bg-0: #300030;
    --bg-1: #000000;
    --blob-1: #291528;
    --blob-2: #3a3e3b;
    --blob-3: #9e829c;
    --blob-4: #f0eff4;
}

.palette-4 {
    --bg-0: #ffffff;
    --bg-1: #d3f7ff;
    --blob-1: #bb74ff;
    --blob-2: #7c7dff;
    --blob-3: #a0f8ff;
    --blob-4: #ffffff;
}

.palette-5 {
    --bg-0: #968e85;
    --bg-1: #8cc084;
    --blob-1: #c1d7ae;
    --blob-2: #9eff72;
    --blob-3: #ffcab1;
    --blob-4: #ecdcb0;
}

.palette-6 {
    --bg-0: #ffffff;
    --bg-1: #4e598c;
    --blob-1: #ff8c42;
    --blob-2: #fcaf58;
    --blob-3: #f9c784;
    --blob-4: #ffffff;
}

.containerBlob {
    --ai-blob-size: 220px;
    position: relative;
    background: transparent;
    width: var(--ai-blob-size);
    height: var(--ai-blob-size);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 1000ms ease;

    --blob-pop-max: 0.95;
    --blob-pop-settle: 0.93;
    --blob-pop-up-ms: 820ms;
    --blob-pop-down-ms: 180ms;
    --blob-pop-off-ms: 1600ms;
    --blob-pop-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --blob-press-down-ms: 120ms;
    --blob-press-up-ms: 160ms;
    --blob-press-min: 0.88;
    --blob-press-max: 0.905;
    --blob-press-pulse-ms: 1100ms;
    --blob-press-down-ease: cubic-bezier(0.2, 0, 0.2, 1);
    --blob-press-up-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --blob-pop-delay-1: 0ms;
    --blob-pop-delay-2: 20ms;
    --blob-pop-delay-3: 40ms;
    --blob-pop-delay-4: 80ms;
    --blob-pop-delay-5: 120ms;
}

.containerBlob[data-ia-blob-lazy="1"] {
    will-change: opacity, transform;
}

.containerBlob[data-ia-blob-lazy="1"]:not(.blob-hydrated) {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.94);
}

.containerBlob[data-ia-blob-lazy="1"].blob-hydrated {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition: opacity 220ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1), background 1000ms ease;
}

@media (prefers-reduced-motion: reduce) {

    .containerBlob[data-ia-blob-lazy="1"],
    .containerBlob[data-ia-blob-lazy="1"].blob-hydrated {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

.containerBlob::after {
    position: absolute;
    content: "";
    width: min(50vw, 50vh);
    height: min(50vw, 50vh);
    border-radius: 50%;
    filter: blur(1rem);
    transition: background 500ms ease;
}

.containerBlob.blob-no-path-anim::before {
    content: "";
    position: absolute;
    width: 38%;
    height: 38%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    -webkit-filter: blur(8px);
    filter: blur(8px);
    z-index: 3;
    pointer-events: none;
    animation: blob-core-breathe 2.6s ease-in-out infinite;
}

.blobs {
    width: min(60vw, 60vh);
    height: min(60vw, 60vh);
    max-height: 100%;
    max-width: 100%;
    transform: scale(1);
    transform-origin: 50% 50%;
    will-change: transform;
    transition: transform var(--blob-press-up-ms) var(--blob-press-up-ease);
}

.blobs svg {
    position: relative;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.blobs .blob {
    animation: rotate 25s infinite alternate ease-in-out;
    transform-origin: 50% 50%;
    opacity: 0.7;
}

.blobs .blob path {
    animation: blob-anim-1 5s infinite alternate cubic-bezier(0.45, 0.2, 0.55, 0.8);
    transform-origin: 50% 50%;
    transform: scale(0.8);
    pointer-events: visiblePainted;
    transition: fill 800ms ease, transform var(--blob-pop-up-ms) var(--blob-pop-ease);
    transition-delay: 0ms;
}

.containerBlob.blob-no-path-anim .blobs .blob path {
    animation: none;
}

.containerBlob.blob-no-path-anim .blobs .blob-1 path {
    animation: blob-fallback-scale-1 6.8s infinite alternate ease-in-out;
}

.containerBlob.blob-no-path-anim .blobs .blob-2 path {
    animation: blob-fallback-scale-2 5.7s infinite alternate ease-in-out;
}

.containerBlob.blob-no-path-anim .blobs .blob-3 path {
    animation: blob-fallback-scale-3 6.2s infinite alternate ease-in-out;
}

.containerBlob.blob-no-path-anim .blobs .blob-4 path {
    animation: blob-fallback-scale-4 7.4s infinite alternate ease-in-out;
}

.containerBlob.blob-no-path-anim .blobs .blob-5 path,
.containerBlob.blob-no-path-anim .blobs .blob-7 path {
    animation: blob-fallback-stroke 4.5s infinite alternate ease-in-out;
}

.containerBlob.blob-no-path-anim .blobs .blob-6 path {
    animation: blob-fallback-core 5.4s infinite alternate ease-in-out;
}

.containerBlob.blob-no-path-anim.blob-iphone .blobs .blob-6 {
    display: none;
}

.blobs .blob path.is-settle {
    transition: fill 800ms ease, transform var(--blob-pop-down-ms) var(--blob-pop-ease);
}

.containerBlob:not(.is-hover) .blobs .blob path {
    transition: fill 800ms ease, transform var(--blob-pop-off-ms) var(--blob-pop-ease);
}

.containerBlob.is-press .blobs {
    transform: scale(var(--blob-press-min));
    transition: transform var(--blob-press-down-ms) var(--blob-press-down-ease);
}

.containerBlob.is-pulse .blobs {
    animation: blob-press-pulse var(--blob-press-pulse-ms) cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.containerBlob.is-release .blobs {
    animation: none;
    transition: transform var(--blob-press-up-ms) var(--blob-press-up-ease);
    transform: scale(1);
}

.containerBlob.is-hover .blob-1 path {
    transform: scale(var(--blob-pop-max));
    transition-delay: var(--blob-pop-delay-1);
}

.containerBlob.is-hover .blob-2 path {
    transform: scale(var(--blob-pop-max));
    transition-delay: var(--blob-pop-delay-2);
}

.containerBlob.is-hover .blob-3 path {
    transform: scale(var(--blob-pop-max));
    transition-delay: var(--blob-pop-delay-3);
}

.containerBlob.is-hover .blob-4 path {
    transform: scale(var(--blob-pop-max));
    transition-delay: var(--blob-pop-delay-4);
}

.containerBlob.is-hover .blob-5 path {
    transform: scale(var(--blob-pop-max));
    transition-delay: var(--blob-pop-delay-5);
}

.containerBlob.is-hover .blob-7 path {
    transform: scale(var(--blob-pop-max));
    transition-delay: var(--blob-pop-delay-5);
}

.containerBlob.is-hover .blob-1 path.is-settle,
.containerBlob.is-hover .blob-2 path.is-settle,
.containerBlob.is-hover .blob-3 path.is-settle,
.containerBlob.is-hover .blob-4 path.is-settle,
.containerBlob.is-hover .blob-5 path.is-settle {
    transform: scale(var(--blob-pop-settle));
    transition-delay: 0ms;
}

.containerBlob.is-hover {
    cursor: pointer;
}

.blobs .blob.alt {
    animation-direction: alternate-reverse;
    opacity: 0.3;
}

.blobs .blob-1 path {
    fill: var(--blob-1);
    filter: blur(0.2rem);
    scale: .8;
}

.blobs .blob-2 {
    animation-duration: 18s;
    animation-direction: alternate-reverse;
}

.blobs .blob-2 path {
    fill: var(--blob-2);
    animation-name: blob-anim-2;
    animation-duration: 7s;
    filter: blur(0.2rem);
    transform: scale(0.78);
}

.blobs .blob-2.alt {
    animation-direction: alternate;
}

.blobs .blob-3 {
    animation-duration: 23s;
}

.blobs .blob-3 path {
    fill: var(--blob-3);
    animation-name: blob-anim-3;
    animation-duration: 6s;
    filter: blur(0.2rem);
    transform: scale(0.76);
}

.blobs .blob-4 {
    animation-duration: 31s;
    animation-direction: alternate-reverse;
    opacity: 0.9;
}

.blobs .blob-4 path {
    fill: var(--blob-4);
    animation-name: blob-anim-4;
    animation-duration: 10s;
    filter: blur(10rem);
    transform: scale(0.5);
    opacity: 0;
}

.blobs .blob-4.alt {
    animation-direction: alternate;
    opacity: 0.8;
}

.blobs .blob-5 {
    animation-duration: 34s;
    animation-direction: alternate;
    opacity: 0.9;
}

.blobs .blob-5 path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: var(--blob-stroke-5, 1px);
    vector-effect: non-scaling-stroke;
    filter: none;
    animation-name: blob-anim-5;
    animation-duration: 4s;
}

.blobs .blob-6 {
    animation-duration: 8s;
    animation-direction: alternate;
    opacity: 0.5;
}

.blobs .blob-6 path {
    fill: var(--blob-6);
    animation-name: blob-anim-3;
    animation-duration: 6s;
    filter: blur(10rem);
    transform: scale(0.46);
}

.blobs .blob-7 {
    animation-duration: 68s;
    animation-direction: alternate;
    opacity: 0.9;
    mix-blend-mode: soft-light;
}

.blobs .blob-7 path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: var(--blob-stroke-7, 1px);
    vector-effect: non-scaling-stroke;
    filter: none;
    animation-name: blob-anim-5;
    animation-duration: 12s;
}

@keyframes blob-anim-1 {
    0% {
        d: path("M 100 600 q 0 -500, 500 -500 t 500 500 t -500 500 T 100 600 z");
    }

    30% {
        d: path("M 100 600 q -50 -400, 500 -500 t 450 550 t -500 500 T 100 600 z");
    }

    70% {
        d: path("M 100 600 q 0 -400, 500 -500 t 400 500 t -500 500 T 100 600 z");
    }

    100% {
        d: path("M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z");
    }
}

@keyframes blob-anim-2 {
    0% {
        d: path("M 100 600 q 0 -400, 500 -500 t 400 500 t -500 500 T 100 600 z");
    }

    40% {
        d: path("M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z");
    }

    80% {
        d: path("M 100 600 q -50 -400, 500 -500 t 450 550 t -500 500 T 100 600 z");
    }

    100% {
        d: path("M 100 600 q 100 -600, 500 -500 t 400 500 t -500 500 T 100 600 z");
    }
}

@keyframes blob-anim-3 {
    0% {
        d: path("M 100 600 q -50 -400, 500 -500 t 450 550 t -500 500 T 100 600 z");
    }

    35% {
        d: path("M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z");
    }

    75% {
        d: path("M 100 600 q 100 -600, 500 -500 t 400 500 t -500 500 T 100 600 z");
    }

    100% {
        d: path("M 100 600 q 0 -400, 500 -500 t 400 500 t -500 500 T 100 600 z");
    }
}

@keyframes blob-anim-4 {
    0% {
        d: path("M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z");
    }

    30% {
        d: path("M 100 600 q 100 -600, 500 -500 t 400 500 t -500 500 T 100 600 z");
    }

    70% {
        d: path("M 100 600 q -50 -400, 500 -500 t 450 550 t -500 500 T 100 600 z");
    }

    100% {
        d: path("M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z");
    }
}

@keyframes blob-anim-5 {
    0% {
        d: path("M 100 600 q -50 -400, 500 -500 t 450 550 t -500 500 T 100 600 z");
    }

    35% {
        d: path("M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z");
    }

    75% {
        d: path("M 100 600 q 100 -600, 500 -500 t 400 500 t -500 500 T 100 600 z");
    }

    100% {
        d: path("M 100 600 q 0 -400, 500 -500 t 400 500 t -500 500 T 100 600 z");
        transform: rotate3d(360deg);
    }
}

@keyframes blob-press-pulse {
    0% {
        transform: scale(var(--blob-press-min));
    }

    50% {
        transform: scale(var(--blob-press-max));
    }

    100% {
        transform: scale(var(--blob-press-min));
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes blob-core-breathe {
    0% {
        transform: scale(0.96);
        opacity: 0.86;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(0.96);
        opacity: 0.86;
    }
}

@keyframes blob-fallback-scale-1 {
    0% {
        transform: scale(0.74);
    }

    50% {
        transform: scale(0.86);
    }

    100% {
        transform: scale(0.78);
    }
}

@keyframes blob-fallback-scale-2 {
    0% {
        transform: scale(0.72);
    }

    50% {
        transform: scale(0.83);
    }

    100% {
        transform: scale(0.76);
    }
}

@keyframes blob-fallback-scale-3 {
    0% {
        transform: scale(0.70);
    }

    50% {
        transform: scale(0.82);
    }

    100% {
        transform: scale(0.74);
    }
}

@keyframes blob-fallback-scale-4 {
    0% {
        transform: scale(0.45);
        opacity: 0.06;
    }

    50% {
        transform: scale(0.56);
        opacity: 0.16;
    }

    100% {
        transform: scale(0.49);
        opacity: 0.1;
    }
}

@keyframes blob-fallback-core {
    0% {
        transform: scale(0.42);
        opacity: 0.4;
    }

    50% {
        transform: scale(0.5);
        opacity: 0.62;
    }

    100% {
        transform: scale(0.44);
        opacity: 0.45;
    }
}

@keyframes blob-fallback-stroke {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.95;
    }

    100% {
        opacity: 0.65;
    }
}

/* ============================================================
   MÓVIL (≤1024): blob en "baja resolución" — en teléfonos petaba y al
   tocar/hacer zoom se superponían los colores (estados hover/press
   pensados para ratón disparándose con el dedo).
   - Fuera las 4 capas .alt duplicadas (misma silueta, mitad de capas).
   - El blur gigante de blob-4 (10rem = 160px) baja a 2rem.
   - Paths sin pointer-events: ni hover ni press con el dedo → no hay
     superposición de colores al tocar.
   ============================================================ */
@media (max-width: 1024px) {
    .blobs .blob.alt {
        display: none;
    }

    .blobs .blob-4 path {
        filter: blur(2rem);
    }

    .blobs .blob path {
        pointer-events: none;
        transition-delay: 0ms;
    }
}