/* ==========================================================
   VIREXIS — CINEMATIC PATIENT PORTAL V1
   Portal del paciente / Line-art RM + Sonografía
   Elaborado por Miguel Minier | MDesign
   ========================================================== */


.vx-cinema-portal{
    position:absolute;

    z-index:8;

    right:clamp(60px, 9vw, 150px);
    top:43%;

    width:clamp(250px, 19vw, 330px);

    display:block;

    color:#fff;

    text-decoration:none;

    opacity:.74;

    transform:translateY(-50%);

    transition:
        opacity .45s ease,
        transform .45s cubic-bezier(.2,.7,.2,1);

    isolation:isolate;
}


/* ----------------------------------------------------------
   TEXTO
---------------------------------------------------------- */

.vx-cinema-portal__intro{
    display:block;
}

.vx-cinema-portal__intro small{
    display:block;

    margin-bottom:8px;

    color:rgba(210,239,252,.63);

    font-size:7px;
    font-weight:700;

    letter-spacing:.30em;

    line-height:1;
}

.vx-cinema-portal__intro strong{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:15px;

    color:rgba(255,255,255,.92);

    font-size:13px;
    font-weight:600;

    letter-spacing:.015em;

    line-height:1.25;
}

.vx-cinema-portal__intro strong b{
    color:#51caff;

    font-size:15px;
    font-weight:400;

    transition:transform .35s ease;
}


/* ----------------------------------------------------------
   LÍNEA VIVA
---------------------------------------------------------- */

.vx-cinema-portal__line{
    position:relative;

    display:block;

    height:1px;

    margin:15px 0 10px;

    overflow:visible;

    background:
        linear-gradient(
            90deg,
            rgba(78,202,255,.08),
            rgba(78,202,255,.50) 30%,
            rgba(78,202,255,.16) 82%,
            transparent
        );
}

.vx-cinema-portal__line::before{
    content:"";

    position:absolute;

    left:0;
    top:-3px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#50caff;

    box-shadow:
        0 0 8px rgba(80,202,255,.8);

    animation:
        vxCinemaPortalDot
        4.8s
        ease-in-out
        infinite;
}

.vx-cinema-portal__line i{
    position:absolute;

    top:0;
    left:0;

    width:34%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #68d4ff,
            transparent
        );

    filter:
        drop-shadow(
            0 0 3px rgba(70,205,255,.7)
        );

    animation:
        vxCinemaPortalSweep
        5.4s
        ease-in-out
        infinite;
}

.vx-cinema-portal__line b{
    position:absolute;

    right:0;
    top:-2px;

    width:5px;
    height:5px;

    border:
        1px solid rgba(87,209,255,.65);

    border-radius:50%;
}


/* ----------------------------------------------------------
   IMAGING BLUEPRINT
---------------------------------------------------------- */

.vx-cinema-portal__imaging{
    position:relative;

    display:flex;

    height:90px;

    align-items:center;
    justify-content:space-between;

    gap:5px;
}

.vx-cinema-portal__machine{
    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#56ccfa;
}

.vx-cinema-portal__machine--mr{
    width:46%;
}

.vx-cinema-portal__machine--us{
    width:38%;
}

.vx-cinema-portal__machine svg{
    display:block;

    width:100%;
    height:70px;

    overflow:visible;
}

.vx-cp-stroke{
    fill:none;

    stroke:rgba(86,204,250,.54);

    stroke-width:1;

    stroke-linecap:round;
    stroke-linejoin:round;

    vector-effect:
        non-scaling-stroke;
}

.vx-cp-soft{
    stroke:
        rgba(123,218,255,.24);
}

.vx-cp-ring{
    transform-origin:70px 51px;

    animation:
        vxCinemaMRPulse
        4.2s
        ease-in-out
        infinite;
}

.vx-cp-scan{
    fill:none;

    stroke:#62d1ff;

    stroke-width:1;

    opacity:.2;

    filter:
        drop-shadow(
            0 0 4px rgba(80,205,255,.85)
        );

    animation:
        vxCinemaMRScan
        3.5s
        ease-in-out
        infinite;
}

.vx-cp-wave{
    fill:none;

    stroke:#64d3ff;

    stroke-width:1;

    stroke-linecap:round;

    stroke-dasharray:7 4;

    filter:
        drop-shadow(
            0 0 3px rgba(86,205,255,.5)
        );

    animation:
        vxCinemaUSWave
        4s
        linear
        infinite;
}

.vx-cinema-portal__machine small{
    margin-top:-4px;

    color:
        rgba(175,230,253,.48);

    font-size:6px;

    font-weight:700;

    letter-spacing:.25em;
}


/* ----------------------------------------------------------
   CONEXIÓN ENTRE TECNOLOGÍAS
---------------------------------------------------------- */

.vx-cinema-portal__connector{
    position:relative;

    flex:1;

    height:20px;

    display:flex;

    align-items:center;
}

.vx-cinema-portal__connector::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:50%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(74,201,252,.10),
            rgba(74,201,252,.48),
            rgba(74,201,252,.10)
        );
}

.vx-cinema-portal__connector b{
    position:absolute;

    left:50%;
    top:50%;

    width:5px;
    height:5px;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:#51cbfb;

    box-shadow:
        0 0 8px
        rgba(81,203,251,.55);

    animation:
        vxCinemaConnector
        3s
        ease-in-out
        infinite;
}


/* ----------------------------------------------------------
   ACTION
---------------------------------------------------------- */

.vx-cinema-portal__action{
    display:flex;

    align-items:center;

    gap:9px;

    margin-top:2px;

    color:
        rgba(190,234,252,.54);

    font-size:6.5px;

    font-weight:700;

    letter-spacing:.24em;

    transition:
        color .35s ease;
}

.vx-cinema-portal__action::before{
    content:"";

    width:22px;
    height:1px;

    background:
        rgba(77,202,252,.45);

    transition:
        width .4s ease,
        background .4s ease;
}

.vx-cinema-portal__action b{
    color:#4fcaff;

    font-size:10px;
}


/* ----------------------------------------------------------
   HOVER
---------------------------------------------------------- */

.vx-cinema-portal:hover{
    opacity:1;

    transform:
        translateY(-50%)
        translateX(-4px);
}

.vx-cinema-portal:hover
.vx-cinema-portal__intro strong b{
    transform:
        translate(2px,-2px);
}

.vx-cinema-portal:hover
.vx-cp-stroke{
    stroke:
        rgba(100,215,255,.78);
}

.vx-cinema-portal:hover
.vx-cinema-portal__action{
    color:
        rgba(225,246,255,.9);
}

.vx-cinema-portal:hover
.vx-cinema-portal__action::before{
    width:35px;

    background:#53ceff;
}

.vx-cinema-portal:focus-visible{
    outline:
        1px solid rgba(78,203,255,.8);

    outline-offset:10px;
}


/* ----------------------------------------------------------
   ANIMACIONES
---------------------------------------------------------- */

@keyframes vxCinemaPortalSweep{

    0%{
        left:-10%;
        opacity:0;
    }

    20%{
        opacity:.8;
    }

    75%{
        opacity:.65;
    }

    100%{
        left:76%;
        opacity:0;
    }
}

@keyframes vxCinemaPortalDot{

    0%,
    100%{
        opacity:.35;
        transform:scale(.75);
    }

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

@keyframes vxCinemaMRPulse{

    0%,
    100%{
        opacity:.55;
        transform:scale(1);
    }

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

@keyframes vxCinemaMRScan{

    0%,
    100%{
        opacity:.15;
        transform:translateY(-12px);
    }

    50%{
        opacity:.9;
        transform:translateY(12px);
    }
}

@keyframes vxCinemaUSWave{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-44;
    }
}

@keyframes vxCinemaConnector{

    0%,
    100%{
        opacity:.25;
        transform:
            translate(-50%,-50%)
            scale(.75);
    }

    50%{
        opacity:1;
        transform:
            translate(-50%,-50%)
            scale(1.15);
    }
}


/* ----------------------------------------------------------
   LAPTOP
---------------------------------------------------------- */

@media (max-width:1350px) and (min-width:901px){

    .vx-cinema-portal{
        right:5.5vw;

        width:245px;

        top:42%;
    }

}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width:1100px) and (min-width:769px){

    .vx-cinema-portal{
        right:4vw;

        width:215px;

        opacity:.68;
    }

    .vx-cinema-portal__machine svg{
        height:58px;
    }

}


/* ----------------------------------------------------------
   MOBILE
   Simplificamos para no competir con el Hero.
---------------------------------------------------------- */

@media (max-width:768px){

    .vx-cinema-portal{
        top:auto;

        right:22px;
        left:22px;

        bottom:104px;

        width:auto;

        transform:none;

        opacity:.88;
    }

    .vx-cinema-portal:hover{
        transform:none;
    }

    .vx-cinema-portal__intro{
        display:flex;

        align-items:center;
        justify-content:space-between;

        gap:14px;
    }

    .vx-cinema-portal__intro small{
        margin:0;

        font-size:6px;
    }

    .vx-cinema-portal__intro strong{
        font-size:11px;
    }

    .vx-cinema-portal__line{
        margin:10px 0 0;
    }

    .vx-cinema-portal__imaging,
    .vx-cinema-portal__action{
        display:none;
    }

}


/* ----------------------------------------------------------
   REDUCED MOTION
---------------------------------------------------------- */

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

    .vx-cinema-portal *,
    .vx-cinema-portal *::before,
    .vx-cinema-portal *::after{

        animation:none !important;

        transition:none !important;
    }

}


/* ==========================================================
   VIREXIS — CINEMATIC PORTAL VISIBILITY V2
   Mayor presencia visual sin convertirlo en tarjeta
   Elaborado por Miguel Minier | MDesign
   ========================================================== */

@media (min-width:1101px){

    .vx-cinema-portal{
        width:clamp(330px, 24vw, 410px) !important;

        right:clamp(65px, 8vw, 135px) !important;

        opacity:.96 !important;

        filter:
            drop-shadow(0 0 22px rgba(31,184,242,.10));
    }


    /* Halo atmosférico detrás del blueprint */

    .vx-cinema-portal::before{
        content:"";

        position:absolute;

        z-index:-1;

        left:10%;
        top:25%;

        width:80%;
        height:65%;

        border-radius:50%;

        background:
            radial-gradient(
                ellipse at center,
                rgba(22,165,226,.12) 0%,
                rgba(16,126,184,.055) 38%,
                transparent 72%
            );

        filter:blur(22px);

        pointer-events:none;
    }


    /* PORTAL DEL PACIENTE */

    .vx-cinema-portal__intro small{
        color:rgba(215,242,253,.82) !important;

        font-size:8px !important;

        letter-spacing:.34em !important;

        text-shadow:
            0 0 12px rgba(49,191,244,.16);
    }


    /* Resultados de estudios */

    .vx-cinema-portal__intro strong{
        color:rgba(255,255,255,.98) !important;

        font-size:16px !important;

        font-weight:600 !important;

        text-shadow:
            0 2px 12px rgba(0,20,35,.32);
    }

    .vx-cinema-portal__intro strong b{
        color:#5ed3ff !important;

        font-size:18px !important;

        text-shadow:
            0 0 12px rgba(72,202,255,.38);
    }


    /* Línea principal */

    .vx-cinema-portal__line{
        margin-top:18px !important;

        margin-bottom:12px !important;

        background:
            linear-gradient(
                90deg,
                rgba(80,207,255,.30),
                rgba(80,207,255,.88) 30%,
                rgba(80,207,255,.36) 80%,
                transparent
            ) !important;

        box-shadow:
            0 0 8px rgba(64,194,245,.10);
    }

    .vx-cinema-portal__line::before{
        width:8px !important;
        height:8px !important;

        background:#62d5ff !important;

        box-shadow:
            0 0 6px #43c6f8,
            0 0 15px rgba(67,198,248,.65) !important;
    }


    /* Zona de máquinas */

    .vx-cinema-portal__imaging{
        height:116px !important;
    }

    .vx-cinema-portal__machine svg{
        height:91px !important;

        filter:
            drop-shadow(
                0 0 5px rgba(64,198,250,.14)
            );
    }


    /* Blueprint más visible */

    .vx-cp-stroke{
        stroke:rgba(103,216,255,.82) !important;

        stroke-width:1.15 !important;
    }

    .vx-cp-soft{
        stroke:rgba(132,222,255,.48) !important;
    }

    .vx-cp-scan{
        stroke:#6edaff !important;

        stroke-width:1.2 !important;

        filter:
            drop-shadow(
                0 0 5px rgba(82,207,255,.95)
            ) !important;
    }

    .vx-cp-wave{
        stroke:#6edaff !important;

        stroke-width:1.2 !important;

        filter:
            drop-shadow(
                0 0 5px rgba(82,207,255,.70)
            ) !important;
    }


    /* RM / SONOGRAFÍA */

    .vx-cinema-portal__machine small{
        color:rgba(199,239,255,.76) !important;

        font-size:7px !important;

        letter-spacing:.30em !important;
    }


    /* Conector */

    .vx-cinema-portal__connector::before{
        background:
            linear-gradient(
                90deg,
                rgba(82,207,255,.18),
                rgba(82,207,255,.78),
                rgba(82,207,255,.18)
            ) !important;
    }

    .vx-cinema-portal__connector b{
        width:6px !important;
        height:6px !important;

        background:#64d6ff !important;

        box-shadow:
            0 0 6px #55ccfa,
            0 0 13px rgba(85,204,250,.60) !important;
    }


    /* CONSULTAR RESULTADOS */

    .vx-cinema-portal__action{
        margin-top:5px !important;

        color:rgba(207,241,255,.78) !important;

        font-size:7.5px !important;

        letter-spacing:.27em !important;
    }

    .vx-cinema-portal__action::before{
        width:31px !important;

        background:
            rgba(91,211,255,.72) !important;
    }

}


/* Laptop: aumento moderado para evitar invasión del copy */

@media (max-width:1350px) and (min-width:1101px){

    .vx-cinema-portal{
        width:310px !important;
        right:5vw !important;
    }

    .vx-cinema-portal__imaging{
        height:102px !important;
    }

    .vx-cinema-portal__machine svg{
        height:78px !important;
    }

}


/* Hover: pasa de visible a protagonista */

@media (hover:hover){

    .vx-cinema-portal:hover{
        opacity:1 !important;

        filter:
            drop-shadow(0 0 28px rgba(42,195,250,.18));
    }

    .vx-cinema-portal:hover .vx-cp-stroke{
        stroke:rgba(128,225,255,.98) !important;
    }

}