/* =========================================================
   CIDMED — HERO PREMIUM
   ========================================================= */


/* =========================================================
   HERO PRINCIPAL
   ========================================================= */

#home.cidmed-hero {
    position: relative;

    min-height: calc(100vh - 94px);

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f8fcfa 45%,
            #f7f9fc 100%);
}


/* =========================================================
   AURA VERDE
   Esquina superior izquierda
   ========================================================= */

#home.cidmed-hero::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: -280px;
    left: -180px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(88, 171, 149, 0.15) 0%,
            rgba(88, 171, 149, 0.07) 35%,
            rgba(88, 171, 149, 0) 70%);

    filter: blur(10px);

    pointer-events: none;

    z-index: 0;

    animation:
        cidmedAuraLeft 12s ease-in-out infinite alternate;
}


/* =========================================================
   AURA AZUL
   Esquina inferior derecha
   ========================================================= */

#home.cidmed-hero::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -250px;
    bottom: -350px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(52, 74, 108, 0.12) 0%,
            rgba(52, 74, 108, 0.05) 38%,
            rgba(52, 74, 108, 0) 72%);

    filter: blur(12px);

    pointer-events: none;

    z-index: 0;

    animation:
        cidmedAuraRight 14s ease-in-out infinite alternate;
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

#home.cidmed-hero .container {
    position: relative;

    z-index: 2;

    padding-top: 35px;
    padding-bottom: 35px;
}


/* =========================================================
   HALO CENTRAL
   Detrás del logo
   ========================================================= */

#home.cidmed-hero .container::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(88, 171, 149, 0.10) 0%,
            rgba(88, 171, 149, 0.045) 38%,
            rgba(88, 171, 149, 0) 70%);

    filter: blur(5px);

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   ANILLO DECORATIVO
   Respiración muy suave
   ========================================================= */

#home.cidmed-hero .container::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: 50%;
    left: 50%;

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

    border:
        2px solid rgba(88, 171, 149, 0.28);

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

    animation:
        cidmedRingBreath 7s ease-in-out infinite;
}


/* =========================================================
   IMAGEN PRINCIPAL
   ========================================================= */

#home.cidmed-hero img {
    position: relative;

    z-index: 2;

    display: block;

    width: auto;

    max-width: min(760px, 90%);

    max-height: 62vh;

    margin: 0 auto;

    object-fit: contain;

    filter:
        drop-shadow(0 20px 35px rgba(45, 64, 95, 0.09));

    animation:
        cidmedFloat 6s ease-in-out infinite;

    transition:
        filter 0.5s ease;
}


/* =========================================================
   HOVER DE LA IMAGEN
   ========================================================= */

#home.cidmed-hero img:hover {
    filter:
        drop-shadow(0 24px 42px rgba(45, 64, 95, 0.12));
}


/* =========================================================
   ANIMACIÓN — AURA VERDE
   ========================================================= */

@keyframes cidmedAuraLeft {

    0% {
        transform:
            translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform:
            translate3d(35px, 25px, 0) scale(1.08);
    }
}


/* =========================================================
   ANIMACIÓN — AURA AZUL
   ========================================================= */

@keyframes cidmedAuraRight {

    0% {
        transform:
            translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform:
            translate3d(-35px, -25px, 0) scale(1.06);
    }
}


/* =========================================================
   ANIMACIÓN — RESPIRACIÓN DEL ANILLO
   ========================================================= */

@keyframes cidmedRingBreath {

    0%,
    100% {
        transform:
            translate(-50%, -50%) scale(0.96);

        opacity: 0.45;
    }

    50% {
        transform:
            translate(-50%, -50%) scale(1.04);

        opacity: 0.85;
    }
}


/* =========================================================
   ANIMACIÓN — MOVIMIENTO DE LA IMAGEN
   ========================================================= */

@keyframes cidmedFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-7px);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    #home.cidmed-hero {
        min-height:
            calc(100vh - 78px);
    }


    #home.cidmed-hero .container {
        padding-top: 30px;
        padding-bottom: 30px;
    }


    /* Halo */

    #home.cidmed-hero .container::before {
        width: 480px;
        height: 480px;
    }


    /* Anillo */

    #home.cidmed-hero .container::after {
        width: 330px;
        height: 330px;
    }


    /* Imagen */

    #home.cidmed-hero img {
        max-width: 82%;
        max-height: 58vh;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    #home.cidmed-hero {
        min-height:
            calc(100vh - 76px);
    }


    #home.cidmed-hero .container {
        padding-top: 20px;
        padding-bottom: 20px;
    }


    /* Halo */

    #home.cidmed-hero .container::before {
        width: 360px;
        height: 360px;
    }


    /* Anillo */

    #home.cidmed-hero .container::after {
        width: 260px;
        height: 260px;
    }


    /* Imagen */

    #home.cidmed-hero img {
        max-width: 92%;
        max-height: 52vh;
    }


    /* Aura verde */

    #home.cidmed-hero::before {
        width: 420px;
        height: 420px;

        top: -220px;
        left: -180px;
    }


    /* Aura azul */

    #home.cidmed-hero::after {
        width: 460px;
        height: 460px;

        right: -220px;
        bottom: -250px;
    }
}


/* =========================================================
   REDUCIR ANIMACIONES
   Accesibilidad
   ========================================================= */

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

    #home.cidmed-hero::before,
    #home.cidmed-hero::after,
    #home.cidmed-hero .container::after,
    #home.cidmed-hero img {
        animation: none;
    }
}

/* =========================================================
   BURBUJAS LATERALES
   ========================================================= */

#home.cidmed-hero .cidmed-bubble {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

    border: 2px solid rgba(88, 171, 149, 0.34);

    background:
        radial-gradient(circle,
            rgba(88, 171, 149, 0.16) 0%,
            rgba(88, 171, 149, 0.07) 45%,
            rgba(88, 171, 149, 0.015) 70%,
            transparent 78%);

    box-shadow:
        0 0 35px rgba(88, 171, 149, 0.12);
}


/* =========================================================
   BURBUJA IZQUIERDA
   ========================================================= */

#home.cidmed-hero .cidmed-bubble-left {
    width: 150px;
    height: 150px;

    left: 8%;
    top: 38%;

    animation:
        cidmedBubbleLeft 8s ease-in-out infinite;
}


/* =========================================================
   BURBUJA DERECHA
   ========================================================= */

#home.cidmed-hero .cidmed-bubble-right {
    width: 110px;
    height: 110px;

    right: 9%;
    top: 55%;

    animation:
        cidmedBubbleRight 10s ease-in-out infinite;
}


@keyframes cidmedBubbleLeft {

    0%,
    100% {
        transform: scale(0.85);
        opacity: 0.55;
    }

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


@keyframes cidmedBubbleRight {

    0%,
    100% {
        transform: scale(0.80);
        opacity: 0.45;
    }

    50% {
        transform: scale(1.20);
        opacity: 0.90;
    }
}

@media (max-width: 576px) {

    #home.cidmed-hero .cidmed-bubble-left {
        width: 90px;
        height: 90px;

        left: 3%;
        top: 35%;
    }

    #home.cidmed-hero .cidmed-bubble-right {
        width: 70px;
        height: 70px;

        right: 3%;
        top: 58%;
    }
}

#home.cidmed-hero .cidmed-bubble-right {
    border-color: rgba(52, 74, 108, 0.28);

    background:
        radial-gradient(
            circle,
            rgba(52, 74, 108, 0.13) 0%,
            rgba(52, 74, 108, 0.055) 45%,
            rgba(52, 74, 108, 0.01) 70%,
            transparent 78%
        );

    box-shadow:
        0 0 35px rgba(52, 74, 108, 0.10);
}