:root {
    --core-red: #ff3e2e;
    --glow-white: rgba(255, 255, 255, 0.9);
    --halo-color: rgba(255, 255, 255, 0.4);
}

/* HOTSPOT BASE */
.hotspot {
    position:absolute;
    width:14px;
    height:14px;
    border-radius:50%;
    background-color: var(--core-red);
    z-index:5;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.4s ease;

    box-shadow:
        0 0 15px 5px var(--glow-white),
        0 0 30px 10px rgba(255, 62, 46, 0.3);

    animation:pulse-core 2s infinite ease-in-out;
}

.hotspot.visible {
    opacity:1;
    pointer-events:auto;
}

/* HALO */
.hotspot::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    background-color: var(--halo-color);
    border-radius:50%;
    transform: translate(-50%, -50%) scale(1);
    animation:halo-expand 2s infinite ease-out;
    z-index:-1;
    filter: blur(2px);
}

/* CORE PULSE */
@keyframes pulse-core {
    0%,100% {
        transform: scale(1);
        box-shadow:
            0 0 15px 5px var(--glow-white),
            0 0 30px 10px rgba(255, 62, 46, 0.3);
    }
    50% {
        transform: scale(1.15);
        box-shadow:
            0 0 20px 8px var(--glow-white),
            0 0 40px 15px rgba(255, 62, 46, 0.4);
    }
}

/* HALO EXPANSIÓN */
@keyframes halo-expand {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity:0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(5);
        opacity:0;
    }
}

/* ---------- RESET ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width:100%;
    min-height:100%;
}

body {
    font-family:'Inter', sans-serif;
}

body.human-body-demo {
    min-height:100dvh;

    display:grid;
    place-items:center;

    overflow:hidden;

    background:#f2f6fa;
}

/* ---------- VIEWER ---------- */

#human-body-shell {
    position:relative;

    /*
     * Componente autónomo.
     * Su tamaño depende del contenedor exterior,
     * nunca directamente del viewport.
     */
    width:100%;
    max-width:100%;

    aspect-ratio:9 / 16;

    overflow:hidden;
}


#viewer {
    position:relative;

    width:100%;
    height:100%;

    overflow:hidden;
}

#frame {
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    user-select:none;
    pointer-events:none;
    -webkit-user-drag:none;
}


/* ---------- MODAL GLASS ---------- */

.modal-card{
    position:absolute;

    display:inline-block;
    width:auto !important;
    min-width:220px;
    max-width:75vw;
    max-height:65vh;

    overflow:auto;
    padding:20px;

    background:rgba(20,20,20,0.55);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border-radius:22px;
    color:#fff;

    box-shadow:0 12px 28px rgba(0,0,0,.32);

    opacity:0;
    transform:scale(.98);
    transition:opacity .3s ease, transform .3s ease;

    z-index:40;
}

.modal-card.active{
    opacity:1;
    transform:scale(1);
}

/* cerrar */

.modal-close{
    position:absolute;
    top:14px;
    right:16px;

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

    color:#ffffff;
    cursor:pointer;

    opacity:.8;
    transition:opacity .2s ease, transform .2s ease;
}

.modal-close:hover{
    opacity:1;
    transform:scale(1.1);
}

/* Scroll elegante */

.modal-card::-webkit-scrollbar{
    width:6px;
}
.modal-card::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.3);
    border-radius:3px;
}

/* ---------- INTERACCIÓN DESKTOP ---------- */

#viewer {
    cursor: grab;
}

#viewer.is-dragging {
    cursor: grabbing;
}

.hotspot {
    cursor: pointer;
}


/* =========================================================
   HUMAN BODY — PANEL LAYER
========================================================= */

#panelContainer {
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:30;
}

#panelContainer .modal-card {
    pointer-events:auto;

    max-width:
        calc(100% - 24px);

    max-height:
        calc(100% - 24px);
}


/* =========================================================
   HUMAN BODY — DISCOVERY / ONBOARDING
========================================================= */

.body-discovery {
    position:absolute;

    left:50%;
    bottom:5%;

    transform:translateX(-50%);

    width:max-content;
    max-width:82%;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:4px;

    padding:11px 18px;

    border:1px solid rgba(255,255,255,.7);
    border-radius:18px;

    background:rgba(255,255,255,.68);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 8px 28px rgba(30,50,70,.10);

    color:#24333f;
    text-align:center;

    opacity:0;
    pointer-events:none;

    z-index:20;
}

.body-discovery strong {
    font-size:14px;
    font-weight:700;
}

.body-discovery span {
    font-size:12px;
    font-weight:600;
}

.body-discovery small {
    margin-top:1px;

    font-size:10px;
    opacity:.68;
}

.body-discovery-desktop {
    display:none;
}

@media (hover:hover) and (pointer:fine) {

    .body-discovery-mobile {
        display:none;
    }

    .body-discovery-desktop {
        display:block;
    }
}


/* =========================================================
   HUMAN BODY — ZONE CARD V1
========================================================= */

.info-card {
    background:rgba(250,252,251,.88);

    border:1px solid rgba(255,255,255,.82);

    box-shadow:
        0 18px 50px rgba(8,35,42,.18),
        inset 0 1px 0 rgba(255,255,255,.75);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    color:#123640;
}


.zone-card {
    display:flex;
    flex-direction:column;

    gap:0;

    color:#123640;
}


.zone-card-kicker {
    display:block;

    margin-bottom:7px;

    color:#438f86;

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

    line-height:1.2;

    letter-spacing:1.5px;

    text-transform:uppercase;
}


.zone-card-title {
    margin:0 0 10px;

    color:#123640;

    font-size:27px;
    font-weight:650;

    line-height:1.05;
}


.zone-card-description {
    margin:0 0 14px;

    max-width:31ch;

    color:#49666d;

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

    line-height:1.45;
}


.zone-card-related {
    display:flex;
    flex-wrap:wrap;

    gap:6px;

    margin-bottom:16px;
}


.zone-card-related span {
    display:inline-flex;

    align-items:center;

    min-height:27px;

    padding:5px 9px;

    border:1px solid rgba(67,143,134,.28);

    border-radius:999px;

    background:rgba(255,255,255,.46);

    color:#376f69;

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

    line-height:1.1;
}


.zone-card-action {
    display:flex;

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

    width:100%;

    padding:12px 14px;

    border-radius:12px;

    background:#123f49;

    color:#ffffff;

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

    line-height:1;

    text-decoration:none;

    transition:
        transform .2s ease,
        background .2s ease;
}


.zone-card-action:hover {
    background:#0d5660;

    transform:translateY(-1px);
}


.zone-card-action span {
    font-size:17px;
    font-weight:400;

    line-height:1;
}


/* MOBILE */

@media (max-width:600px) {

    .zone-card-title {
        font-size:25px;
    }

    .zone-card-description {
        font-size:13px;
    }

}


/* =========================================================
   ZONE CARD — LIGHT GLASS OVERRIDES
========================================================= */

.modal-card.info-card {
    background:rgba(248,251,250,.86);

    border:
        1px solid rgba(255,255,255,.82);

    color:#123640;

    box-shadow:
        0 18px 50px rgba(15,45,52,.16);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.modal-card.info-card .modal-close {
    color:#123640;
    opacity:.65;
}

.modal-card.info-card .modal-close:hover {
    opacity:1;
}


/* =========================================================
   HUMAN BODY — CONTEXTUAL ZONE CARD
========================================================= */

.modal-card.info-card {
    width:auto !important;
    min-width:0;

    padding:18px;

    border-radius:20px;

    transition:
        opacity .28s ease,
        transform .28s ease;
}


/* ---------- DESKTOP / TABLET HORIZONTAL ---------- */

@media (min-width:601px) {

    .modal-card.info-card {
        width:44% !important;
        max-width:250px;
    }

    .modal-card.info-card[data-placement="left"] {
        transform:
            translateX(-8px)
            scale(.98);
    }

    .modal-card.info-card[data-placement="right"] {
        transform:
            translateX(8px)
            scale(.98);
    }

    .modal-card.info-card.active[data-placement="left"],
    .modal-card.info-card.active[data-placement="right"] {
        transform:
            translateX(0)
            scale(1);
    }
}


/* ---------- MÓVIL ---------- */

@media (max-width:600px) {

    .modal-card.info-card {
        width:auto !important;
        max-width:none;

        padding:17px 18px;
    }

    .modal-card.info-card[data-placement="bottom"] {
        transform:
            translateY(12px)
            scale(.985);
    }

    .modal-card.info-card[data-placement="top"] {
        transform:
            translateY(-12px)
            scale(.985);
    }

    .modal-card.info-card.active[data-placement="bottom"],
    .modal-card.info-card.active[data-placement="top"] {
        transform:
            translateY(0)
            scale(1);
    }


    .zone-card-title {
        margin-bottom:7px;
    }

    .zone-card-description {
        margin-bottom:11px;

        max-width:none;

        line-height:1.38;
    }

    .zone-card-related {
        margin-bottom:12px;
    }

}


/* =========================================================
   HUMAN BODY — STANDALONE DEMO
========================================================= */

.human-body-demo #human-body-shell {
    width:min(
        100vw,
        calc(100dvh * 9 / 16)
    );

    max-height:100dvh;
}



/* =========================================================
   HUMAN BODY — MOBILE WIDTH SAFETY
========================================================= */

#human-body-shell {
    min-width:0;
    max-width:100%;
}

#viewer,
#panelContainer {
    max-width:100%;
}


/* =========================================================
   HUMAN BODY — TOUCH BEHAVIOUR
========================================================= */

#viewer {
    /*
     * Horizontal: lo gestiona Human Body.
     * Vertical: pertenece al navegador.
     */
    touch-action:pan-y;
}


/* =========================================================
   POINTER EVENTS — SCROLL VERTICAL / GIRO HORIZONTAL
========================================================= */

#viewer {
    touch-action:pan-y;
    overscroll-behavior-x:none;
}



/* =========================================================
   HUMAN BODY — ZONE CARD V2
   SISTEMA UNIFICADO
========================================================= */


/*
 * Contenedor general.
 * Siempre ocupa casi todo el ancho disponible.
 */
#panelContainer .modal-card.info-card {
    width:auto !important;

    min-width:0;
    max-width:none;

    left:14px;
    right:14px;

    padding:16px 18px;

    border-radius:20px;

    overflow:visible;

    background:
        rgba(248,251,250,.93);

    border:
        1px solid
        rgba(255,255,255,.88);

    box-shadow:
        0 18px 45px
        rgba(8,35,42,.18);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    color:#123640;
}


/*
 * Entrada vertical coherente
 * tanto en desktop como móvil.
 */
#panelContainer
.modal-card.info-card[data-placement="bottom"] {
    transform:
        translateY(12px)
        scale(.985);
}

#panelContainer
.modal-card.info-card[data-placement="top"] {
    transform:
        translateY(-12px)
        scale(.985);
}

#panelContainer
.modal-card.info-card.active[data-placement="bottom"],
#panelContainer
.modal-card.info-card.active[data-placement="top"] {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   DESKTOP — TARJETA HORIZONTAL
========================================================= */

@media (min-width:601px) {

    #panelContainer .modal-card.info-card {
        padding:
            15px
            17px;
    }


    /*
     * Convertimos el contenido en una composición
     * horizontal compacta.
     */
    .modal-card.info-card .zone-card {
        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            minmax(135px,160px);

        grid-template-rows:
            auto
            auto
            1fr
            auto;

        column-gap:18px;
        row-gap:0;

        align-items:start;
    }


    .modal-card.info-card
    .zone-card-kicker {
        grid-column:1;
        grid-row:1;

        margin-bottom:5px;

        font-size:9px;
    }


    .modal-card.info-card
    .zone-card-title {
        grid-column:1;
        grid-row:2;

        margin:
            0
            0
            7px;

        font-size:24px;

        line-height:1;
    }


    .modal-card.info-card
    .zone-card-description {
        grid-column:1;
        grid-row:3 / 5;

        max-width:none;

        margin:0;

        font-size:12.5px;

        line-height:1.4;
    }


    /*
     * Tags en columna derecha.
     */
    .modal-card.info-card
    .zone-card-related {
        grid-column:2;
        grid-row:1 / 4;

        align-self:start;

        display:flex;
        flex-wrap:wrap;

        gap:5px;

        margin:
            4px
            0
            10px;
    }


    .modal-card.info-card
    .zone-card-related span {
        min-height:24px;

        padding:
            4px
            8px;

        font-size:10px;
    }


    /*
     * CTA compacto a la derecha.
     */
    .modal-card.info-card
    .zone-card-action {
        grid-column:2;
        grid-row:4;

        align-self:end;

        min-height:42px;

        padding:
            10px
            12px;

        border-radius:11px;

        font-size:11px;
    }


    /*
     * Cierre ligeramente más compacto.
     */
    .modal-card.info-card
    .modal-close {
        top:12px;
        right:14px;

        font-size:17px;
    }

}


/* =========================================================
   MOBILE — PATRÓN TOBILLO
========================================================= */

@media (max-width:600px) {

    #panelContainer .modal-card.info-card {
        left:12px;
        right:12px;

        padding:
            17px
            18px;

        border-radius:20px;
    }


    .modal-card.info-card
    .zone-card {
        display:flex;

        flex-direction:column;
    }


    .modal-card.info-card
    .zone-card-kicker {
        margin-bottom:7px;

        font-size:10px;
    }


    .modal-card.info-card
    .zone-card-title {
        margin:
            0
            0
            10px;

        font-size:25px;
    }


    .modal-card.info-card
    .zone-card-description {
        max-width:none;

        margin:
            0
            0
            13px;

        font-size:13px;

        line-height:1.4;
    }


    .modal-card.info-card
    .zone-card-related {
        margin-bottom:14px;
    }


    .modal-card.info-card
    .zone-card-related span {
        min-height:27px;

        font-size:11px;
    }


    .modal-card.info-card
    .zone-card-action {
        width:100%;

        min-height:48px;

        padding:
            12px
            14px;

        font-size:13px;
    }

}


/* =========================================================
   HUMAN BODY — HOTSPOT CENTERING
========================================================= */

.hotspot {
    margin-left:-7px;
    margin-top:-7px;
}


/* =========================================================
   HUMAN BODY — CARD LAYER ABOVE HEADER BADGE
========================================================= */

#panelContainer {
    z-index:120;
}

#panelContainer .modal-card {
    z-index:121;
}