/*
 * Secciones inferiores portadas de master: Galen AI + onboarding.
 * Se mantiene aislado del CSS global de develop-v2 para evitar regresiones.
 */

/* master:styles.css 4301-4789 */
.ia-block--orbit {
    background:
        radial-gradient(ellipse at center, rgba(54, 132, 139, 0.1) 0%, rgba(54, 132, 139, 0) 46%),
        linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
    overflow: hidden;
}

.ia-block--orbit .ia-block__header {
    margin-bottom: 42px;
}

.ia-block--orbit .ia-block__subtitle {
    max-width: 820px;
}

.hygia-map {
    position: relative;
    min-height: 680px;
    max-width: 1120px;
    margin: 0 auto 34px;
}

.hygia-map::before,
.hygia-map::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(54, 132, 139, 0.22);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hygia-map::before {
    width: 520px;
    height: 420px;
}

.hygia-map::after {
    width: 760px;
    height: 540px;
}

.hygia-map__center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: 184px;
    height: 184px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(212, 224, 225, 0.9);
    box-shadow: 0 24px 64px rgba(0, 61, 79, 0.13);
    transform: translate(-50%, -50%);
    backdrop-filter: blur(10px);
}

.hygia-map__center img {
    width: 154px;
    height: 154px;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(0, 85, 109, 0.18));
}

.hygia-card {
    position: absolute;
    z-index: 2;
    width: 285px;
    min-height: 150px;
    padding: 20px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(212, 224, 225, 0.95);
    box-shadow: 0 16px 38px rgba(0, 61, 79, 0.07);
}

.hygia-card::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 96px;
    border-top: 2px dotted rgba(54, 132, 139, 0.28);
}

.hygia-card span {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(54, 132, 139, 0.1);
    color: var(--color-secondary);
    font-size: 11px;
    font-weight: 800;
}

.hygia-card h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.hygia-card p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.hygia-card--invoice {
    left: 0;
    top: 70px;
}

.hygia-card--summary {
    right: 0;
    top: 70px;
}

.hygia-card--voice {
    left: 54px;
    top: 300px;
}

.hygia-card--analytics {
    left: 0;
    bottom: 72px;
}

.hygia-card--consent {
    right: 54px;
    top: 300px;
}

.hygia-card--protocol {
    right: 0;
    bottom: 72px;
}

.hygia-card--invoice::after,
.hygia-card--voice::after,
.hygia-card--analytics::after {
    right: -98px;
}

.hygia-card--summary::after,
.hygia-card--consent::after,
.hygia-card--protocol::after {
    left: -98px;
}

.onboarding--carousel {
    padding: var(--section-padding) 0;
    background:
        radial-gradient(ellipse at top left, rgba(54, 132, 139, 0.08) 0%, rgba(54, 132, 139, 0) 38%),
        linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
    background: transparent;
    overflow: hidden;
}

.onboarding-carousel__header {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 58px;
}

.onboarding-carousel__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 22px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    color: var(--color-primary);
}

.onboarding-carousel__eyebrow::before,
.onboarding-carousel__eyebrow::after {
    content: "";
    width: 150px;
    height: 3px;
    background: linear-gradient(90deg, rgba(0, 85, 109, 0), var(--color-primary));
    border-radius: 999px;
}

.onboarding-carousel__eyebrow::after {
    background: linear-gradient(90deg, var(--color-primary), rgba(0, 85, 109, 0));
}

.onboarding-carousel__header .section-title {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(42px, 6vw, 74px);
    line-height: 1.05;
}

.onboarding-carousel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
    gap: 48px;
    align-items: stretch;
    max-width: 1120px;
    margin: 0 auto;
    position: relative;
}

.onboarding-carousel::before {
    content: "";
    position: absolute;
    left: 0;
    top: -28px;
    width: 52%;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary), rgba(0, 85, 109, 0.12));
}

.onboarding-carousel__track {
    position: relative;
    min-height: 350px;
}

.onboarding-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
    padding: 46px 48px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(212, 224, 225, 0.95);
    box-shadow: 0 18px 44px rgba(0, 61, 79, 0.06);
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.onboarding-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.onboarding-slide__number {
    font-family: var(--font-heading);
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
}

.onboarding-slide h3 {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.14;
    color: var(--color-primary);
    margin-bottom: 22px;
}

.onboarding-slide p {
    font-size: 20px;
    line-height: 1.75;
    color: var(--color-text-secondary);
}

.onboarding-carousel__visual {
    min-height: 350px;
    border-radius: 28px;
    border: 1px solid rgba(212, 224, 225, 0.95);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 18px 44px rgba(0, 61, 79, 0.06);
    padding: 24px;
}

.onboarding-screen {
    height: 100%;
    min-height: 300px;
    border-radius: 24px;
    padding: 22px;
    background:
        radial-gradient(circle at 18% 62%, rgba(42, 157, 143, 0.26) 0%, rgba(42, 157, 143, 0) 34%),
        linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    position: relative;
    overflow: hidden;
}

.onboarding-screen>span {
    display: inline-flex;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
}

.onboarding-screen__mock {
    position: absolute;
    right: 24px;
    top: 44px;
    bottom: 24px;
    width: 150px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    display: grid;
    grid-template-columns: 38px 1fr;
    padding: 18px 12px;
    gap: 12px;
}

.onboarding-screen__sidebar {
    border-radius: 14px;
    background: rgba(54, 132, 139, 0.16);
}

.onboarding-screen__main {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.onboarding-screen__main i {
    display: block;
    height: 12px;
    border-radius: 999px;
    background: rgba(54, 132, 139, 0.18);
}

.onboarding-carousel__controls {
    position: absolute;
    left: 160px;
    bottom: 38px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 18px;
}

.onboarding-carousel__arrow {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--color-secondary);
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
}

.onboarding-carousel__dots {
    display: flex;
    align-items: center;
    gap: 9px;
}

.onboarding-carousel__dots button {
    width: 36px;
    height: 5px;
    border: 0;
    border-radius: 999px;
    background: rgba(54, 132, 139, 0.18);
    cursor: pointer;
    transition: width var(--transition-fast), background var(--transition-fast);
}

.onboarding-carousel__dots button.active {
    width: 50px;
    background: var(--color-primary);
}

@media (max-width: 1080px) {
    .hygia-map {
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .hygia-map::before,
    .hygia-map::after,
    .hygia-card::after {
        display: none;
    }

    .hygia-map__center,
    .hygia-card {
        position: static;
        transform: none;
    }

    .hygia-map__center {
        grid-column: 1 / -1;
        width: 170px;
        height: 170px;
        margin: 0 auto 8px;
    }

    .hygia-card {
        width: auto;
    }

    .onboarding-carousel {
        grid-template-columns: 1fr;
    }

    .onboarding-carousel__visual {
        order: -1;
    }

    .onboarding-carousel__controls {
        position: static;
        justify-content: center;
        margin-top: 24px;
    }
}

@media (max-width: 768px) {
    .hygia-map {
        grid-template-columns: 1fr;
    }

    .onboarding-carousel__eyebrow::before,
    .onboarding-carousel__eyebrow::after {
        width: 42px;
    }

    .onboarding-slide {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 34px 28px;
    }

    .onboarding-slide__number {
        font-size: 42px;
    }

    .onboarding-slide p {
        font-size: 17px;
    }
}

/* Base editorial que en master vivía antes del bloque orbital. */
.ia-block--master {
    padding: var(--section-padding, 112px) 0 88px;
}

.ia-block--master .ia-block__header {
    max-width: 900px;
    margin: 0 auto 42px;
    text-align: center;
}

.ia-block--master .ia-block__subtitle {
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
}

.ia-block--master .ia-block__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    color: var(--color-primary, #00556d);
    background: transparent;
    border: 0;
    border-radius: 0;
}

.ia-block--master .ia-block__badge::before,
.ia-block--master .ia-block__badge::after {
    content: "";
    width: 74px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--color-primary, #00556d));
}

.ia-block--master .ia-block__badge::after {
    background: linear-gradient(90deg, var(--color-primary, #00556d), transparent);
}

.ia-block--master .ia-block__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.ia-block--master .btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    color: #fff;
    background: var(--color-primary, #00556d);
    border: 0;
    border-radius: var(--radius-lg, 16px);
    font-size: 16px;
    font-weight: 700;
    transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.ia-block--master .btn--primary:hover {
    color: #fff;
    background: var(--color-primary-light, #0a6f85);
    box-shadow: 0 8px 22px rgba(0, 85, 109, .22);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .ia-block--master {
        padding-top: 72px;
        padding-bottom: 64px;
    }

    .ia-block--master .ia-block__badge::before,
    .ia-block--master .ia-block__badge::after {
        width: 44px;
    }
}

.hygia-map {
    min-height: 760px;
}

.hygia-map__center img {
    width: 132px;
    height: 132px;
}

.hygia-card--invoice {
    top: 30px;
}

.hygia-card--summary {
    top: 30px;
}

.hygia-card--voice {
    left: 56px;
    top: 294px;
}

.hygia-card--consent {
    right: 0;
    top: 294px;
}

.hygia-card--analytics {
    left: 0;
    bottom: 30px;
}

.hygia-card--protocol {
    right: 0;
    bottom: 30px;
}

/* master:styles.css 5005-5482 */
/* Galen AI interactive orbit */
.ia-block--orbit {
    background: transparent;
}

.ia-block--orbit .ia-block__header {
    position: relative;
    z-index: 3;
    margin-bottom: 24px;
}

.hygia-map {
    min-height: 790px;
    cursor: crosshair;
}

.hygia-map::before {
    width: 480px;
    height: 480px;
    border-color: rgba(54, 132, 139, 0.2);
}

.hygia-map::after {
    width: 820px;
    height: 570px;
    border-color: rgba(54, 132, 139, 0.16);
}

.hygia-map__center {
    cursor: pointer;
    background:
        radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 34%),
        rgba(255, 255, 255, 0.72);
    box-shadow:
        0 0 0 12px rgba(89, 198, 188, 0.08),
        0 0 0 30px rgba(89, 198, 188, 0.04),
        0 26px 70px rgba(0, 85, 109, 0.18);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hygia-map__center::before,
.hygia-map__center::after {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 1px solid rgba(89, 198, 188, 0.24);
    pointer-events: none;
}

.hygia-map__center::after {
    inset: -34px;
    border-color: rgba(89, 198, 188, 0.14);
}

.hygia-map.is-interacting .hygia-map__center,
.hygia-map.is-pinned .hygia-map__center {
    transform: translate(-50%, -50%) scale(1.04);
    box-shadow:
        0 0 0 14px rgba(89, 198, 188, 0.12),
        0 0 0 38px rgba(89, 198, 188, 0.06),
        0 34px 86px rgba(0, 85, 109, 0.22);
}

.hygia-card {
    width: 315px;
    min-height: 170px;
    cursor: pointer;
    opacity: 0.24;
    filter: saturate(0.72);
    transform: translateY(12px) scale(0.96);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        filter var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base);
}

.hygia-map:hover .hygia-card {
    opacity: 0.42;
}

.hygia-card:hover,
.hygia-card:focus-visible,
.hygia-card.active {
    z-index: 6;
    opacity: 1;
    filter: saturate(1);
    transform: translateY(0) scale(1);
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(54, 132, 139, 0.28);
    box-shadow: 0 24px 58px rgba(0, 61, 79, 0.13);
    outline: none;
}

.hygia-card:focus-visible {
    box-shadow:
        0 0 0 4px rgba(89, 198, 188, 0.18),
        0 24px 58px rgba(0, 61, 79, 0.13);
}

.hygia-card.active::before {
    content: "";
    position: absolute;
    right: 18px;
    top: 18px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 5px rgba(89, 198, 188, 0.16);
}

.hygia-card::after {
    opacity: 0.25;
    transition: opacity var(--transition-base), border-color var(--transition-base);
}

.hygia-card.active::after,
.hygia-card:hover::after,
.hygia-card:focus-visible::after {
    opacity: 1;
    border-color: rgba(54, 132, 139, 0.56);
}

.hygia-card--invoice {
    left: 18px;
    top: 28px;
}

.hygia-card--summary {
    right: 18px;
    top: 28px;
}

.hygia-card--voice {
    left: 0;
    top: 286px;
}

.hygia-card--consent {
    right: 0;
    top: 286px;
}

.hygia-card--analytics {
    left: 54px;
    bottom: 72px;
}

.hygia-card--protocol {
    right: 54px;
    bottom: 72px;
}

.hygia-map__message {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 5;
    width: min(520px, 90%);
    padding: 18px 24px;
    border-radius: 18px;
    background: rgba(236, 248, 247, 0.9);
    border: 1px solid rgba(54, 132, 139, 0.2);
    box-shadow: 0 18px 40px rgba(0, 61, 79, 0.07);
    color: var(--color-primary);
    text-align: center;
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
}

.hygia-map__message strong,
.hygia-map__message span {
    display: block;
}

.hygia-map__message strong {
    font-family: var(--font-heading);
    font-size: 17px;
    line-height: 1.3;
}

.hygia-map__message span {
    margin-top: 4px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

@media (max-width: 1080px) {
    .hygia-map {
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        cursor: default;
    }

    .hygia-map::before,
    .hygia-map::after,
    .hygia-card::after {
        display: none;
    }

    .hygia-map__center,
    .hygia-card,
    .hygia-map__message {
        position: static;
        transform: none;
    }

    .hygia-map.is-interacting .hygia-map__center,
    .hygia-map.is-pinned .hygia-map__center {
        transform: none;
    }

    .hygia-map__center {
        grid-column: 1 / -1;
        width: 170px;
        height: 170px;
        margin: 0 auto 8px;
    }

    .hygia-card {
        width: auto;
        min-height: 0;
        opacity: 1;
        filter: none;
        cursor: pointer;
    }

    .hygia-map__message {
        grid-column: 1 / -1;
        width: auto;
    }
}

@media (max-width: 680px) {
    .hygia-map {
        grid-template-columns: 1fr;
    }

    .hygia-card {
        padding: 18px;
    }
}

/* Clinic flow additions */
.clinic-flow__cta {
    margin-top: 10px;
}

.clinic-orbit__node--policies {
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
}

@media (min-width: 769px) {
    .clinic-orbit__node--policies {
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Vertical onboarding scroll */
.onboarding-carousel--vertical {
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.82fr);
    align-items: start;
}

.onboarding-carousel--vertical::before {
    left: 34px;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-primary), rgba(0, 85, 109, 0.08));
}

.onboarding-carousel--vertical .onboarding-carousel__track {
    display: grid;
    gap: 22px;
    min-height: 0;
    padding-left: 34px;
}

.onboarding-carousel--vertical .onboarding-slide {
    position: relative;
    inset: auto;
    min-height: 230px;
    opacity: 0.42;
    transform: translateY(18px);
    pointer-events: auto;
    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        background var(--transition-base);
}

.onboarding-carousel--vertical .onboarding-slide::before {
    content: "";
    position: absolute;
    left: -48px;
    top: 52px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 6px solid rgba(54, 132, 139, 0.2);
    box-shadow: 0 0 0 6px #f7fbfb;
}

.onboarding-carousel--vertical .onboarding-slide.active {
    opacity: 1;
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(54, 132, 139, 0.24);
    box-shadow: 0 24px 58px rgba(0, 61, 79, 0.1);
}

.onboarding-carousel--vertical .onboarding-slide.active::before {
    border-color: var(--color-primary);
}

.onboarding-carousel--vertical .onboarding-carousel__visual {
    position: sticky;
    top: 126px;
    min-height: 470px;
}

.onboarding-carousel--vertical .onboarding-screen {
    min-height: 420px;
    transition: background var(--transition-base);
}

.onboarding-carousel--vertical .onboarding-screen__path {
    position: absolute;
    left: 28px;
    right: 210px;
    top: 106px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.onboarding-carousel--vertical .onboarding-screen__path i {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.onboarding-carousel--vertical[data-active-slide="0"] .onboarding-screen__path i:nth-child(-n+1),
.onboarding-carousel--vertical[data-active-slide="1"] .onboarding-screen__path i:nth-child(-n+2),
.onboarding-carousel--vertical[data-active-slide="2"] .onboarding-screen__path i:nth-child(-n+3),
.onboarding-carousel--vertical[data-active-slide="3"] .onboarding-screen__path i:nth-child(-n+4),
.onboarding-carousel--vertical[data-active-slide="4"] .onboarding-screen__path i:nth-child(-n+5) {
    background: #fff;
    transform: translateY(-2px);
}

.onboarding-carousel--vertical .onboarding-screen__mock {
    top: 124px;
    bottom: 34px;
    width: 174px;
}

.onboarding-carousel--vertical .onboarding-screen__card {
    position: absolute;
    left: 34px;
    width: 210px;
    height: 76px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 34px rgba(0, 35, 46, 0.12);
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.onboarding-carousel--vertical .onboarding-screen__card--one {
    bottom: 112px;
}

.onboarding-carousel--vertical .onboarding-screen__card--two {
    bottom: 30px;
    width: 152px;
    opacity: 0.76;
}

.onboarding-carousel--vertical[data-active-slide="1"] .onboarding-screen {
    background:
        radial-gradient(circle at 64% 28%, rgba(89, 198, 188, 0.34) 0%, rgba(89, 198, 188, 0) 32%),
        linear-gradient(135deg, var(--color-primary-dark), var(--color-secondary));
}

.onboarding-carousel--vertical[data-active-slide="2"] .onboarding-screen {
    background:
        radial-gradient(circle at 22% 72%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

.onboarding-carousel--vertical[data-active-slide="3"] .onboarding-screen {
    background:
        radial-gradient(circle at 72% 70%, rgba(89, 198, 188, 0.28) 0%, rgba(89, 198, 188, 0) 34%),
        linear-gradient(135deg, var(--color-secondary), var(--color-primary));
}

.onboarding-carousel--vertical[data-active-slide="4"] .onboarding-screen {
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

.onboarding-carousel--vertical[data-active-slide="1"] .onboarding-screen__card--one,
.onboarding-carousel--vertical[data-active-slide="3"] .onboarding-screen__card--one {
    transform: translateX(48px);
}

.onboarding-carousel--vertical[data-active-slide="2"] .onboarding-screen__card--two,
.onboarding-carousel--vertical[data-active-slide="4"] .onboarding-screen__card--two {
    transform: translateX(78px);
}

.onboarding-carousel--vertical .onboarding-carousel__controls {
    left: 82px;
    bottom: -58px;
}

.onboarding-carousel--vertical .onboarding-carousel__arrow {
    display: none;
}

@media (max-width: 1080px) {
    .onboarding-carousel--vertical {
        grid-template-columns: 1fr;
    }

    .onboarding-carousel--vertical .onboarding-carousel__visual {
        position: relative;
        top: auto;
        order: -1;
    }
}

@media (max-width: 768px) {
    .clinic-orbit__node--policies {
        right: auto;
        top: auto;
        transform: none;
    }

    .onboarding-carousel--vertical .onboarding-carousel__track {
        padding-left: 22px;
    }

    .onboarding-carousel--vertical::before,
    .onboarding-carousel--vertical .onboarding-slide::before {
        display: none;
    }

    .onboarding-carousel--vertical .onboarding-slide {
        min-height: 0;
    }

    .onboarding-carousel--vertical .onboarding-carousel__controls {
        position: static;
        justify-content: center;
        margin-top: 24px;
    }
}

/* master:custom.css 2536-4215 */
/* ============================================================
           GALEN AI v3 — collage tipo referencia: blob central con glow,
           6 composiciones de software real en capas (paneles con campos,
           documento con firma, waveform, KPIs + gráfica, sidebar de
           protocolos) y conectores curvos punteados.
           Los textos .txtNew van en azul oscuro de los títulos (--color-primary).
           ============================================================ */
.txtNew {
    color: var(--color-primary);
}

/* Mensajes (petición del usuario + respuesta de Galen): texto en color
           normal, ya NO en rojo. El rojo se mantiene en los mockups falsos. */
/* Texto de los mensajes: el negro un punto más suave (86%). */
.hyg3Quote .txtNew,
.hyg3Ai .txtNew {
    color: rgba(26, 42, 46, 0.86) !important;
}

.hyg3Ai__body strong.txtNew {
    color: var(--color-primary) !important;
}

.hyg3 {
    position: relative;
    max-width: 1040px;
    height: 760px;
    margin: 10px auto 26px;
}

/* Conectores curvos punteados con marcha de datos. */
.hyg3__links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hyg3__links path {
    fill: none;
    stroke: rgba(0, 85, 109, 0.18);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 2 7;
    animation: hyg3Dash 1.8s linear infinite;
}

.hyg3__links circle {
    fill: rgba(0, 85, 109, 0.22);
}

@keyframes hyg3Dash {
    to {
        stroke-dashoffset: -18;
    }
}

/* Núcleo: glow + blob. */
.hyg3__core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
}

.hyg3__glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(110, 211, 207, 0.38) 0%,
            rgba(110, 211, 207, 0.16) 38%,
            rgba(110, 211, 207, 0) 68%);
    animation: hyg3Glow 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hyg3Glow {
    0%, 100% {
        opacity: .8;
        scale: 1;
    }

    50% {
        opacity: 1;
        scale: 1.06;
    }
}

.hyg3 .hygia-map__center {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
}

/* --- Posiciones del collage --- */
.hyg3__cl {
    position: absolute;
    width: 340px;
    transition: scale .35s cubic-bezier(0.23, 1, 0.32, 1), filter .35s ease;
}

/* Hover: un pelín más grande + sombra leve por detrás. */
.hyg3__cl:hover,
.hyg3__cl:focus-within {
    scale: 1.03;
    filter: drop-shadow(0 18px 28px rgba(0, 61, 79, 0.12));
}

/* Reparto en RELOJ alrededor de la bola: una ENCIMA, otra DEBAJO y el
           resto en diagonales — sin columnas. */
.hyg3__cl--voice {
    left: 50%;
    top: 0;
    transform: translateX(-52%);
    rotate: .6deg;
    width: 312px;
}

.hyg3__cl--summary {
    right: 0;
    top: 20px;
    width: 344px;
    rotate: .8deg;
}

.hyg3__cl--analytics {
    right: 0;
    bottom: 40px;
    width: 344px;
    rotate: -.7deg;
}

.hyg3__cl--invoice {
    left: 50%;
    bottom: 0;
    transform: translateX(-48%);
    rotate: .9deg;
}

.hyg3__cl--protocol {
    left: 0;
    bottom: 78px;
    width: 336px;
    rotate: -.9deg;
}

.hyg3__cl--consent {
    left: 0;
    top: 48px;
    rotate: -1deg;
}

/* La card en hover pasa por encima de las vecinas mientras se expande. */
.hyg3__cl:hover,
.hyg3__cl:focus-within {
    z-index: 12;
}

/* === Cards colapsadas por defecto (título + minitexto + mensajes);
           el mockup falso (texto rojo) se EXPANDE en hover con altura animada. === */
/* NUEVO FLUJO (controlado por JS al hover):
           1) se escriben los mensajes (conversación) debajo del minitexto,
           2) al terminar el intercambio aparece el mockup.
           Orden visual dentro del panel: título · minitexto · mensajes · mockup. */

/* Contenedor de mensajes: siempre presente; las burbujas de dentro
           controlan su propia aparición (display none → flex por JS). */
.hyg3Msgs__in {
    display: flex;
    flex-direction: column;
}

/* En reposo el contenedor de mensajes NO ocupa nada; solo existe en hover.
           Como display:none→block no es animable, el fade-in se hace con @keyframes
           (sí se ejecuta al cambiar display) → aparición gradual del bloque y del
           waveform de citas por voz. */
.hyg3Msgs {
    display: none;
}

.hyg3__cl.is-live .hyg3Msgs {
    display: block;
    margin-top: 12px;
    animation: hyg3MsgsIn .45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hyg3MsgsIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Burbujas: ocultas con display:none. Al activarse (q-on / a-on) entran
           con keyframes y ALTURA NATURAL SIEMPRE (sin overflow hidden, sin alturas
           fijadas, sin transiciones de height) → es físicamente imposible que el
           texto quede recortado o invisible. El JS solo fija el ANCHO final para
           que las líneas se llenen igual que en el resultado final. */
.hyg3__cl .hyg3Quote,
.hyg3__cl .hyg3Ai {
    display: none;
}

.hyg3__cl.q-on .hyg3Quote {
    display: flex;
    margin-top: 12px;
    animation: hyg3BubbleIn .4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hyg3__cl.a-on .hyg3Ai {
    display: flex;
    margin-top: 8px;
    animation: hyg3BubbleIn .4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hyg3BubbleIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/* Mockup: colapsado de verdad con height:0 (grid 0fr no colapsa fiable:
           un track fr lleva un mínimo auto implícito que respeta el contenido).
           El JS mide su altura y anima height 0 → exacta al llegar m-on. */
.hyg3Mock {
    overflow: hidden;
    height: 0;
    min-height: 0;
    opacity: 0;
    margin-top: 0;
    transition:
        height .5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity .4s cubic-bezier(0.16, 1, 0.3, 1),
        margin-top .5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hyg3__cl.m-on .hyg3Mock {
    opacity: 1;
    margin-top: 12px;
}

/* --- Panel principal de cada cluster --- */
.hyg3Panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 17px 19px;
    border-radius: 18px;
    background: #fff;
    /* Elevación de doble capa con tinte de marca: contacto nítido + difusión. */
    border: 1px solid rgba(0, 85, 109, 0.08);
    box-shadow:
        0 1px 2px rgba(0, 61, 79, 0.04),
        0 14px 34px rgba(0, 61, 79, 0.10);
}

/* Orden: título · minitexto · MENSAJES · MOCKUP (el doc flotante es absolute). */
.hyg3Panel__title {
    order: 1;
}

.hyg3Panel__desc {
    order: 2;
}

.hyg3Msgs {
    order: 3;
}

.hyg3Mock {
    order: 4;
}

.hyg3Doc {
    order: 5;
}

.hyg3Panel__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.hyg3Ico {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    /* Chip de marca con leve degradado e inset highlight (más presencia). */
    background: linear-gradient(135deg, rgba(54, 132, 139, 0.16), rgba(0, 85, 109, 0.1));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    color: var(--color-primary);
}

.hyg3Ico svg {
    width: 17px;
    height: 17px;
}

.hyg3Panel__title h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--color-primary);
}

.hyg3Panel__desc {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    /* Mismo color que el texto de los mensajes. */
    color: rgba(26, 42, 46, 0.86);
}

/* Filas campo/valor con hairline (look software real). */
.hyg3Field {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(212, 224, 225, 0.55);
}

.hyg3Field:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

/* En consentimientos los valores dejan hueco al documento flotante. */
.hyg3__cl--consent .hyg3Field {
    padding-right: 54px;
}

.hyg3Field span {
    font-size: 12.5px;
}

.hyg3Field strong {
    font-size: 13.5px;
    font-weight: 700;
}

/* Documento de consentimiento solapado con firma. */
.hyg3Doc {
    position: absolute;
    /* Anclado ABAJO: a la altura del mockup de campos (último bloque del
               panel), no sobre los mensajes. */
    top: auto;
    bottom: 10px;
    right: -58px;
    width: 124px;
    padding: 10px 11px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(212, 224, 225, 0.9);
    box-shadow: 0 14px 30px rgba(0, 61, 79, 0.12);
    rotate: 2.5deg;
    z-index: 2;
    /* Oculto en colapsado; aparece con la expansión. */
    opacity: 0;
    scale: .9;
    pointer-events: none;
    transition:
        opacity .35s cubic-bezier(0.16, 1, 0.3, 1) .12s,
        scale .35s cubic-bezier(0.16, 1, 0.3, 1) .12s;
}

.hyg3__cl.m-on .hyg3Doc {
    opacity: 1;
    scale: 1;
}

.hyg3Doc strong {
    display: block;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .02em;
    margin-bottom: 6px;
}

.hyg3Doc i {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: rgba(0, 61, 79, 0.14);
    margin: 5px 0;
}

.hyg3Doc__sign {
    width: 58px;
    height: 17px;
    margin-top: 5px;
    color: var(--color-primary);
}

/* Sub-panel de detalle (consulta). */
.hyg3Detail {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fbfdfd;
    border: 1px solid rgba(212, 224, 225, 0.7);
}

.hyg3Detail>strong {
    display: block;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 6px;
}

.hyg3Detail__row {
    margin-bottom: 6px;
}

.hyg3Detail__row:last-child {
    margin-bottom: 0;
}

.hyg3Detail__row span {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    opacity: .75;
}

.hyg3Detail__row em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    line-height: 1.4;
}

/* Waveform denso animado (citas por voz): ahora va ARRIBA de los mensajes. */
.hyg3Wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 26px;
    margin-bottom: 10px;
}

/* Cita creada: pill azul temática, centrada, texto blanco (aparece al final). */
.hyg3VoicePill {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
    box-shadow: 0 10px 22px rgba(0, 85, 109, 0.22);
}

.hyg3Wave i {
    display: block;
    flex: 0 0 auto;
    width: 2.5px;
    height: 100%;
    border-radius: 999px;
    background: var(--color-secondary);
    animation: hyg3WaveLoop 1.15s ease-in-out infinite;
}

.hyg3Wave i:nth-child(even) {
    background: rgba(42, 157, 143, 0.85);
}

.hyg3Wave i:nth-child(3n) {
    scale: 1 .45;
    animation-delay: .1s;
}

.hyg3Wave i:nth-child(3n+1) {
    scale: 1 .85;
    animation-delay: .32s;
}

.hyg3Wave i:nth-child(3n+2) {
    scale: 1 .6;
    animation-delay: .55s;
}

.hyg3Wave i:nth-child(4n) {
    animation-delay: .76s;
}

.hyg3Wave i:nth-child(5n) {
    scale: 1 .95;
    animation-delay: .9s;
}

@keyframes hyg3WaveLoop {
    0%, 100% {
        scale: 1 .3;
    }

    50% {
        scale: 1 1;
    }
}

/* KPIs con tendencia. */
.hyg3Kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.hyg3Kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 9px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(212, 224, 225, 0.85);
    box-shadow: 0 6px 14px rgba(0, 61, 79, 0.04);
}

.hyg3Kpi span {
    font-size: 9px;
    line-height: 1.2;
}

.hyg3Kpi strong {
    font-family: var(--font-heading);
    font-size: 13px;
    line-height: 1.1;
}

.hyg3Kpi em {
    font-style: normal;
    font-size: 9px;
    font-weight: 800;
}

/* Gráfica que se dibuja al entrar. */
.hyg3Chart {
    position: relative;
    padding: 8px 9px 6px;
    border-radius: 10px;
    background: #fbfdfd;
    border: 1px solid rgba(212, 224, 225, 0.7);
}

.hyg3Chart__label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    margin-bottom: 4px;
}

.hyg3Chart svg {
    display: block;
    width: 100%;
    height: 52px;
}

.hyg3Chart__area {
    fill: rgba(54, 132, 139, 0.13);
    stroke: none;
}

.hyg3Chart__line {
    fill: none;
    stroke: var(--color-secondary);
    stroke-width: 2;
    stroke-linecap: round;
}

.hyg3.visible .hyg3Chart__line {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: hyg3Draw 1.5s cubic-bezier(0.23, 1, 0.32, 1) .6s forwards;
}

@keyframes hyg3Draw {
    to {
        stroke-dashoffset: 0;
    }
}

.hyg3Chart__months {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
}

.hyg3Chart__months span {
    font-size: 8px;
}

/* Factura: mini documento + campos. */
.hyg3Invoice {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 11px;
    align-items: start;
}

.hyg3Invoice__doc {
    padding: 8px 9px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid rgba(212, 224, 225, 0.9);
    box-shadow: 0 10px 22px rgba(0, 61, 79, 0.1);
    rotate: -2.5deg;
}

.hyg3Invoice__doc strong {
    display: block;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 5px;
}

.hyg3Invoice__doc i {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: rgba(0, 61, 79, 0.14);
    margin: 4px 0;
}

.hyg3Invoice__doc em {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: 9px;
    font-weight: 800;
    text-align: right;
}

.hyg3Invoice__fields .hyg3Field {
    padding: 4.5px 0;
}

/* Protocolos: sidebar + documento. */
.hyg3Proto {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 10px;
}

.hyg3Proto__nav {
    list-style: none;
    margin: 0;
    padding: 6px;
    border-radius: 10px;
    background: #fbfdfd;
    border: 1px solid rgba(212, 224, 225, 0.7);
    display: grid;
    gap: 3px;
    align-content: start;
}

.hyg3Proto__nav li {
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 9.5px;
    line-height: 1.25;
}

.hyg3Proto__nav li.is-active {
    background: rgba(54, 132, 139, 0.13);
    font-weight: 800;
}

.hyg3Proto__doc {
    padding: 9px 11px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(212, 224, 225, 0.85);
    box-shadow: 0 8px 18px rgba(0, 61, 79, 0.05);
}

.hyg3Proto__doc strong {
    display: block;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 6px;
}

.hyg3Proto__doc span {
    display: block;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .03em;
    margin-top: 5px;
}

.hyg3Proto__doc i {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: rgba(0, 61, 79, 0.12);
    margin: 4px 0;
}

/* Items de texto reales del protocolo (Consentimiento informado, Pasos…). */
.hyg3Proto__doc em {
    display: block;
    font-style: normal;
    font-size: 9px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 2px 0 0;
}

/* Petición del usuario (pill solapada). */
/* Coherencia de conversación: usuario SIEMPRE a la derecha. */
.hyg3Quote {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 85%;
    margin: 6px 10px 0 auto;
    padding: 7px 12px 7px 7px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0, 85, 109, 0.08);
    box-shadow:
        0 1px 2px rgba(0, 61, 79, 0.04),
        0 8px 20px rgba(0, 61, 79, 0.08);
}

.hyg3Av {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
}

.hyg3Av svg {
    width: 14px;
    height: 14px;
}

.hyg3Quote span {
    font-size: 13px;
    line-height: 1.4;
    /* Palabras SIEMPRE enteras, línea rellenada al máximo (greedy). */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* Respuesta de Galen. */
.hyg3Ai {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 312px;
    max-width: 85%;
    /* Galen SIEMPRE a la izquierda. */
    margin: 8px auto 0 6px;
    padding: 9px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(54, 132, 139, 0.18);
    box-shadow:
        0 1px 2px rgba(0, 61, 79, 0.04),
        0 10px 24px rgba(0, 61, 79, 0.09);
}

.hyg3Ai__shield {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(54, 132, 139, 0.12);
    color: var(--color-primary);
}

.hyg3Ai__shield svg {
    width: 13px;
    height: 13px;
}

.hyg3Ai__body {
    flex: 1 1 auto;
    min-width: 0;
}

.hyg3Ai__body strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
}

.hyg3Ai__body span {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    /* Palabras SIEMPRE enteras, línea rellenada al máximo (greedy). */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

.hyg3Ai__sub {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    margin-top: 2px;
    opacity: .8;
}

.hyg3Check {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #27b08b;
    color: #fff;
    box-shadow: 0 4px 10px rgba(39, 176, 139, 0.4);
}

.hyg3Check svg {
    width: 10px;
    height: 10px;
}

/* --- Entrada escalonada + flotación sutil de paneles --- */
.hyg3.visible .hyg3__cl {
    animation: hygIn .7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.hyg3.visible .hyg3__cl--consent {
    animation-delay: .05s;
}

.hyg3.visible .hyg3__cl--summary {
    animation-delay: .13s;
}

.hyg3.visible .hyg3__cl--voice {
    animation-delay: .21s;
}

.hyg3.visible .hyg3__cl--analytics {
    animation-delay: .29s;
}

.hyg3.visible .hyg3__cl--invoice {
    animation-delay: .37s;
}

.hyg3.visible .hyg3__cl--protocol {
    animation-delay: .45s;
}

@keyframes hygIn {
    from {
        opacity: 0;
        translate: 0 18px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* Los transform de posición de voice/analytics conviven con la animación
           vía translate (propiedad independiente). */
.hyg3.visible .hyg3Panel {
    animation: hyg3Float 7s ease-in-out infinite;
}

.hyg3.visible .hyg3__cl--summary .hyg3Panel,
.hyg3.visible .hyg3__cl--invoice .hyg3Panel {
    animation-delay: 1.4s;
}

.hyg3.visible .hyg3__cl--voice .hyg3Panel,
.hyg3.visible .hyg3__cl--protocol .hyg3Panel {
    animation-delay: 2.8s;
}

@keyframes hyg3Float {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -5px;
    }
}

/* Float irregular para las burbujas del ejemplo móvil: dos ritmos distintos
           (amplitud, fases y leve balanceo diferentes) para que no vayan sincronizadas.
           Usan translate/rotate (no transform) para no pisar otros transforms. */
@keyframes hyg3FloatA {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -5px;
    }
}

@keyframes hyg3FloatB {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -3.5px;
    }
}

/* Checks con pop tras la entrada. */
.hyg3.visible .hyg3Check {
    animation: hygPop .45s cubic-bezier(0.23, 1, 0.32, 1) backwards;
}

.hyg3.visible .hyg3__cl--consent .hyg3Check {
    animation-delay: .8s;
}

.hyg3.visible .hyg3__cl--summary .hyg3Check {
    animation-delay: .9s;
}

.hyg3.visible .hyg3__cl--voice .hyg3Check {
    animation-delay: 1s;
}

.hyg3.visible .hyg3__cl--analytics .hyg3Check {
    animation-delay: 1.1s;
}

.hyg3.visible .hyg3__cl--invoice .hyg3Check {
    animation-delay: 1.2s;
}

.hyg3.visible .hyg3__cl--protocol .hyg3Check {
    animation-delay: 1.3s;
}

@keyframes hygPop {
    0% {
        scale: 0.3;
        opacity: 0;
    }

    70% {
        scale: 1.18;
        opacity: 1;
    }

    100% {
        scale: 1;
        opacity: 1;
    }
}

/* Registro del ángulo de giro como propiedad tipada: la TRANSICIÓN va en
           la variable, y todo lo derivado (posición, brillo, caída) se interpola
           frame a frame durante el giro. */
@property --hyg3-spin {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

/* ============================================================
           MÓVIL Y TABLET (≤1180) — Galen: el ORBE (blob) grande y centrado arriba, y
           las 6 capacidades debajo en una REJILLA de 2 columnas mostrando SOLO el título
           (icono + nombre); se ocultan descripción, mensajes y mockups (que en orbital se
           solapaban). En escritorio (>1180) se mantiene la composición orbital con hover.
           ============================================================ */
.hyg3-fit {
    display: contents;
}

/* El ejemplo clonado solo existe en móvil (≤768); oculto por defecto. */
.hyg3MobEx {
    display: none;
}

@media (max-width: 1180px) {
    .hyg3-fit {
        display: block;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }

    .hyg3-fit>.hyg3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        perspective: none !important;
        transform: none !important;
    }

    /* Conectores SVG fuera (no aportan en rejilla). */
    .hyg3 .hyg3__links {
        display: none !important;
    }

    /* Orbe grande, centrado arriba, ocupando el ancho completo. */
    .hyg3 .hyg3__core {
        grid-column: 1 / -1 !important;
        position: static !important;
        transform: none !important;
        justify-self: center !important;
        margin: 4px auto 24px !important;
    }

    .hyg3 .hygia-map__center {
        scale: 1 !important;
    }

    .hyg3 .containerBlob {
        --ai-blob-size: 156px !important;
    }

    .hyg3 .hyg3__glow {
        width: 220px !important;
        height: 220px !important;
    }

    /* Cada capacidad = pastilla (sin posiciones orbitales ni animación). */
    .hyg3 .hyg3__cl {
        position: static !important;
        transform: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        filter: none !important;
        animation: none !important;
    }

    .hyg3 .hyg3__cl .hyg3Panel {
        background: var(--color-surface, #fff) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: 16px !important;
        box-shadow: 0 6px 22px rgba(0, 61, 79, 0.05) !important;
        padding: 16px 16px 18px !important;
        height: 100% !important;
    }

    /* SOLO el título (icono + h3): se oculta descripción, mensajes, mockups, etc. */
    .hyg3 .hyg3__cl .hyg3Panel>*:not(.hyg3Panel__title) {
        display: none !important;
    }

    .hyg3 .hyg3Panel__title {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin: 0 !important;
    }

    /* Icono en pastilla teal tenue. */
    .hyg3 .hyg3Ico {
        width: 42px !important;
        height: 42px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 12px !important;
        background: rgba(54, 132, 139, 0.1) !important;
        color: var(--color-secondary) !important;
        flex: 0 0 auto !important;
    }

    .hyg3 .hyg3Ico svg {
        width: 21px !important;
        height: 21px !important;
    }

    .hyg3 .hyg3Panel__title h3 {
        margin: 0 !important;
        font-family: var(--font-heading) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: var(--color-primary) !important;
    }
}

/* Tablet (769-1180): las 6 capacidades en 2 filas de 3 (rejilla de 3 columnas);
           en móvil (≤768) se quedan en 2 columnas. El orbe sigue arriba a todo el ancho. */
@media (min-width: 769px) and (max-width: 1180px) {
    .hyg3-fit {
        max-width: 720px !important;
    }

    .hyg3-fit>.hyg3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* === MÓVIL (≤768): Galen INTERACTIVO — orbe en el centro y los iconos de las 6
           capacidades orbitando alrededor. Al tocar un icono se invierte (fondo teal +
           icono blanco), su TÍTULO aparece sobre el orbe y su DESCRIPCIÓN debajo. El JS
           gestiona la selección (hyg3-mobsel). === */
@media (max-width: 768px) {
    .hyg3-fit {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 520px !important;
        /* Espacio claro entre el texto de la sección (subtítulo "Delega tareas…")
                   y el mockup (que arranca con el título dinámico sobre el orbe). */
        margin: 44px auto 0 !important;
    }

    /* Título de la capacidad seleccionada (encima del orbe). Ocupa todo el ancho
               del contenedor (más ancho que el stage) para evitar saltos de línea salvo
               que el título sea demasiado largo. */
    .hyg3MobTitle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        order: 1 !important;
        width: 100% !important;
        text-align: center !important;
        text-wrap: balance !important;
        font-family: var(--font-heading) !important;
        font-size: 31px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        color: var(--color-primary) !important;
        /* Reserva SIEMPRE el alto de 2 líneas (2 × line-height 1.2 = 2.4em): así la
                   página no salta de golpe cuando el título seleccionado pasa de 1 a 2
                   líneas. Los títulos de 1 línea se centran vertical (justify-content). */
        min-height: 2.4em !important;
        /* Margen inferior negativo: absorbe el hueco vacío del stage por encima del
                   orbe para pegar el título al orbe sin tocar la geometría del semicírculo.
                   Reajustado a -36 porque el orbe ahora es mayor (55cqw) y sube más. */
        margin: 0 0 -36px !important;
    }

    /* Stage cuadrado: orbe centro + iconos alrededor. */
    .hyg3-fit>.hyg3 {
        order: 2 !important;
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 330px !important;
        /* Contenedor de container-query: orbe e iconos se miden en cqw (% del ancho
                   del stage), así escalan juntos y la separación orbe↔icono es constante en
                   cualquier viewport (no colisionan en móviles estrechos). */
        container-type: inline-size !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        transform: none !important;
        perspective: none !important;
    }

    .hyg3 .hyg3__links {
        display: none !important;
    }

    /* Orbe arriba-centro (los iconos hacen un semicírculo por debajo). */
    .hyg3 .hyg3__core {
        position: absolute !important;
        left: 50% !important;
        top: 38% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }

    .hyg3 .hygia-map__center {
        scale: 1 !important;
    }

    .hyg3 .containerBlob {
        --ai-blob-size: 55cqw !important;
    }

    .hyg3 .hyg3__glow {
        width: 74cqw !important;
        height: 74cqw !important;
    }

    /* Cada card → solo su icono, posicionado en círculo (la card marca el punto).
               IMPORTANTE: reseteamos right/bottom/rotate que las cards arrastran de la
               composición de ESCRITORIO (.hyg3__cl--summary right:0; --analytics/--invoice/
               --protocol bottom; rotate). Si no, con width:auto la caja se estira del punto
               hasta el borde y el icono (en su esquina) se dispara: era el desorden. */
    .hyg3 .hyg3__cl {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        rotate: 0deg !important;
        opacity: 1 !important;
        filter: none !important;
        animation: none !important;
        transform: translate(-50%, -50%) !important;
        z-index: 2 !important;
    }

    .hyg3 .hyg3__cl .hyg3Panel {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        height: auto !important;
    }

    .hyg3 .hyg3__cl .hyg3Panel>*:not(.hyg3Panel__title) {
        display: none !important;
    }

    .hyg3 .hyg3__cl .hyg3Panel__title {
        display: block !important;
        margin: 0 !important;
    }

    .hyg3 .hyg3__cl .hyg3Panel__title h3 {
        display: none !important;
    }

    /* Icono = botón circular. */
    .hyg3 .hyg3Ico {
        width: 21cqw !important;
        height: 21cqw !important;
        border-radius: 50% !important;
        display: grid !important;
        place-items: center !important;
        background: var(--color-surface, #fff) !important;
        border: 1.5px solid rgba(0, 85, 109, 0.18) !important;
        box-shadow: 0 6px 16px rgba(0, 61, 79, 0.08) !important;
        color: var(--color-secondary) !important;
        cursor: pointer !important;
        transition: background .25s ease, color .25s ease, border-color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1) !important;
    }

    .hyg3 .hyg3Ico svg {
        width: 9.5cqw !important;
        height: 9.5cqw !important;
    }

    /* Posiciones en SEMICÍRCULO inferior (arco bajo el orbe, de izquierda a
               derecha): los extremos a la altura del orbe, el resto descolgando. */
    .hyg3 .hyg3__cl--consent {
        left: 10% !important;
        top: 38% !important;
    }

    .hyg3 .hyg3__cl--summary {
        left: 18% !important;
        top: 61.5% !important;
    }

    .hyg3 .hyg3__cl--voice {
        left: 38% !important;
        top: 76% !important;
    }

    .hyg3 .hyg3__cl--analytics {
        left: 62% !important;
        top: 76% !important;
    }

    .hyg3 .hyg3__cl--invoice {
        left: 82% !important;
        top: 61.5% !important;
    }

    .hyg3 .hyg3__cl--protocol {
        left: 90% !important;
        top: 38% !important;
    }

    /* Seleccionada → icono invertido (fondo teal, icono blanco) + un pelín mayor. */
    .hyg3 .hyg3__cl.is-sel {
        z-index: 4 !important;
    }

    .hyg3 .hyg3__cl.is-sel .hyg3Ico {
        background: var(--color-primary) !important;
        color: #fff !important;
        border-color: var(--color-primary) !important;
        box-shadow: 0 10px 24px rgba(0, 61, 79, 0.22) !important;
        transform: scale(1.12) !important;
    }

    /* Descripción de la capacidad seleccionada (debajo del ejemplo). */
    .hyg3MobDesc {
        display: block !important;
        order: 3 !important;
        width: 100% !important;
        text-align: center !important;
        text-wrap: pretty !important;
        font-size: 16.5px !important;
        line-height: 1.6 !important;
        color: var(--color-text-secondary) !important;
        margin: -14px 0 0 !important;
        min-height: 5.2em !important;
    }

    /* EJEMPLO de la card seleccionada (mockup + chat), clonado del panel de
               escritorio y mostrado SIN animación, entre los iconos y el texto. Tarjeta
               blanca igual que el panel de escritorio. */
    .hyg3MobEx {
        order: 4 !important;
        /* Contenedor TRANSPARENTE y ancho. La tarjeta blanca es ahora el mockup
                   (.hyg3Mock, izquierda); los mensajes flotan absolutos a la derecha
                   sobresaliendo de ella. Todo queda dentro de este contenedor → sin
                   scroll horizontal. */
        position: relative !important;
        /* Los seis ejemplos comparten la misma celda. Aunque solo uno sea visible,
                   todos participan en el tamaño del grid: el mayor reserva el espacio desde
                   el inicio y el contenido inferior nunca salta al cambiar de capacidad. */
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        align-items: stretch !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        max-width: 500px !important;
        /* Sube hacia el arco de iconos, dejando hueco para el sobresalir superior. */
        margin: -6px auto 0 !important;
        text-align: left !important;
    }

    .hyg3MobExItem {
        grid-area: 1 / 1 !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .hyg3MobEx:empty {
        display: none !important;
    }

    /* El panel de escritorio oculta/colapsa estos con clases de estado
               (.m-on / .is-live / .q-on / .a-on) y animaciones. Como el clon vive FUERA
               del stage esos selectores no lo alcanzan; aquí forzamos su estado visible
               final y matamos animaciones/transiciones. */
    .hyg3MobEx .hyg3Mock {
        /* TARJETA blanca (el mockup), columna izquierda, más ancha que los mensajes.
                   Padding vertical reducido → tarjeta más baja para que los mensajes
                   sobresalgan ligeramente por arriba/abajo. */
        width: 50% !important;
        padding: 12px 15px !important;
        background: #fff !important;
        border: 1px solid rgba(0, 85, 109, 0.08) !important;
        border-radius: 16px !important;
        box-shadow:
            0 1px 2px rgba(0, 61, 79, 0.04),
            0 14px 34px rgba(0, 61, 79, 0.10) !important;
        height: auto !important;
        min-height: 0 !important;
        opacity: 1 !important;
        /* El contenido del mock no se sale de la card: se recorta a sus bordes. */
        overflow: hidden !important;
        margin: 0 !important;
    }

    /* Factura: doc arriba y campos a TODO el ancho (la rejilla doc+campos los dejaba
               muy estrechos al 50% y los valores se salían). */
    .hyg3MobEx .hyg3Invoice {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .hyg3MobEx .hyg3Msgs {
        /* Mensajes FLOTANDO a la derecha: absolutos, sobresaliendo del borde
                   derecho de la tarjeta y centrados verticalmente sobre ella (si son más
                   altos que la tarjeta, asoman por arriba y por abajo). */
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        width: 54% !important;
        display: block !important;
        margin: 0 !important;
        z-index: 3 !important;
    }

    /* Mensajes ligeramente más pequeños y sin el ancho fijo (312px) de escritorio
               para que quepan en la columna estrecha. */
    .hyg3MobEx .hyg3Quote {
        display: flex !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 0 0 auto !important;
        /* burbuja del usuario alineada a la derecha */
        padding: 5px 9px 5px 5px !important;
        gap: 6px !important;
        /* Float suave (gana al `* { animation: none }` por mayor especificidad). */
        animation: hyg3FloatA 4.6s ease-in-out infinite !important;
    }

    .hyg3MobEx .hyg3Ai {
        display: flex !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 8px auto 0 0 !important;
        /* respuesta de Galen a la izquierda */
        padding: 7px 9px !important;
        gap: 7px !important;
        /* Otro ritmo + amplitud + arranque desfasado → no van sincronizadas. */
        animation: hyg3FloatB 5.8s ease-in-out -2.3s infinite !important;
    }

    /* Sombra un poco más potente en las burbujas (más sensación de flotar). */
    .hyg3MobEx .hyg3Quote,
    .hyg3MobEx .hyg3Ai {
        box-shadow: 0 2px 6px rgba(0, 61, 79, 0.10), 0 14px 32px rgba(0, 61, 79, 0.17) !important;
    }

    .hyg3MobEx .hyg3Quote span,
    .hyg3MobEx .hyg3Ai__body span {
        font-size: 11px !important;
        line-height: 1.38 !important;
    }

    .hyg3MobEx .hyg3Ai__body strong {
        font-size: 9.5px !important;
    }

    .hyg3MobEx .hyg3Av {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
    }

    .hyg3MobEx .hyg3Av svg {
        width: 12px !important;
        height: 12px !important;
    }

    .hyg3MobEx .hyg3Ai__shield {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
    }

    .hyg3MobEx .hyg3Ai__shield svg {
        width: 11px !important;
        height: 11px !important;
    }

    .hyg3MobEx .hyg3Check svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Mocks muy altos (resume consulta / protocolos): capamos el contenido y lo
               desvanecemos con un fade para que no ocupen tanta altura. */
    .hyg3MobExItem[data-cap="summary"] .hyg3Mock__in,
    .hyg3MobExItem[data-cap="protocol"] .hyg3Mock__in {
        max-height: 120px !important;
        overflow: hidden !important;
        -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%) !important;
        mask-image: linear-gradient(to bottom, #000 66%, transparent 100%) !important;
    }

    /* "Resume una consulta": Paciente/Profesional bastante más pequeños para que se
               vea más del detalle de la consulta de abajo dentro del cap. */
    .hyg3MobExItem[data-cap="summary"] .hyg3Field {
        padding: 2px 0 !important;
    }

    .hyg3MobExItem[data-cap="summary"] .hyg3Field span {
        font-size: 8px !important;
    }

    .hyg3MobExItem[data-cap="summary"] .hyg3Field strong {
        font-size: 8.5px !important;
    }

    /* Crea citas por voz: la tarjeta solo tiene la pill → la centramos en vertical. */
    .hyg3MobExItem[data-cap="voice"] .hyg3Mock {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 122px !important;
    }

    .hyg3MobEx * {
        animation: none !important;
        transition: none !important;
    }

    /* El "rojo temporal" de .txtNew no aplica en el clon: color normal. */
    .hyg3MobEx .txtNew {
        color: rgba(26, 42, 46, 0.86) !important;
    }

    .hyg3MobEx .hyg3Ai__body strong.txtNew {
        color: var(--color-primary) !important;
    }

    /* Crossfade de ejemplos: el saliente sigue presente mientras entra el nuevo.
               Visibility solo cambia al terminar para conservar la altura del grid. */
    .hyg3MobExItem {
        z-index: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(8px) scale(.988) !important;
        transition:
            opacity .34s cubic-bezier(.22, 1, .36, 1),
            transform .48s cubic-bezier(.22, 1, .36, 1),
            visibility 0s linear .42s !important;
        will-change: opacity, transform;
    }

    .hyg3MobExItem.is-active {
        z-index: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transition-delay: .06s, .06s, 0s !important;
    }

    /* Título y descripción usan una salida corta y una entrada más pausada. Sus
               alturas quedan fijadas por JS al máximo real para eliminar layout shift. */
    .hyg3MobTitle,
    .hyg3MobDesc {
        transition:
            opacity .44s cubic-bezier(.22, 1, .36, 1),
            transform .52s cubic-bezier(.22, 1, .36, 1) !important;
        will-change: opacity, transform;
    }

    .hyg3-fit.is-swapping .hyg3MobTitle,
    .hyg3-fit.is-swapping .hyg3MobDesc {
        opacity: 0 !important;
        transform: translateY(5px) scale(.992) !important;
        transition-duration: .2s !important;
        transition-timing-function: cubic-bezier(.4, 0, 1, 1) !important;
    }
}

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

    .hyg3MobTitle,
    .hyg3MobDesc,
    .hyg3MobExItem {
        transition: none !important;
        transform: none !important;
    }

    .hyg3__links path,
    .hyg3__glow,
    .hyg3Wave i,
    .hyg3__cl.is-live .hyg3Msgs,
    .hyg3__cl.q-on .hyg3Quote,
    .hyg3__cl.a-on .hyg3Ai,
    .hyg3MobEx .hyg3Quote,
    .hyg3MobEx .hyg3Ai,
    .hyg3.visible .hyg3__cl,
    .hyg3.visible .hyg3Panel,
    .hyg3.visible .hyg3Check {
        animation: none !important;
    }

    .hyg3.visible .hyg3Chart__line {
        animation: none !important;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
}

/* Mensaje inferior (mismos textos de siempre). */
.hyg2__msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: fit-content;
    margin: 0 auto 30px;
    padding: 13px 22px;
    border-radius: 14px;
    background: rgba(0, 85, 109, 0.05);
    border: 1px solid rgba(0, 85, 109, 0.1);
}

.hyg2__msgIcon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
}

.hyg2__msgIcon svg {
    width: 16px;
    height: 16px;
}

.hyg2__msg p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.hyg2__msg strong {
    color: var(--color-primary);
}

.hyg2__msg span {
    color: var(--color-text-secondary);
}

/* Móvil/tablet: una columna con el blob arriba; sin líneas conectoras. */
@media (max-width: 1080px) {
    .hyg2 {
        grid-template-columns: 1fr;
    }

    .hyg2__center {
        order: -1;
    }

    .hygCl::after {
        display: none;
    }
}

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

    .hygCl::after,
    .hygWave i,
    .hyg2.visible .hygCl,
    .hyg2.visible .hygCl__check {
        animation: none !important;
    }
}

/* Orbe central de Galen: sin disco blanco — el blob flota solo
           (se mantienen los anillos orbitales finos). */
.hygia-map__center,
.hygia-map.is-interacting .hygia-map__center,
.hygia-map.is-pinned .hygia-map__center {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* master:custom.css 4882-5718 */
/* === Onboarding: gráficos transplantados de la landing descargada.
           Reemplazan los iconos animados (tw*) dentro de cada .onboarding-twin.
           TODOS los selectores van ACOTADOS con `.onboarding-twin ` porque
           styles.css ya define un `.onboarding-visual` distinto y hay que evitar
           la colisión. Los @keyframes (spinSoft, streamPulse) no existen en el
           sitio, así que van tal cual. === */
.onboarding-twin {
    --color-aqua: #b9d2d4;
    --color-green: #2a9d8f;
    --color-ink: #17282d;
    --color-muted: #607174;
    /* El twin deja de ser card: el ÚNICO marco es el propio gráfico
               (.onboarding-visual). Antes había card (twin) dentro de card (visual). */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Lienzo del gráfico: llena el contenedor gemelo y neutraliza el padding
           heredado del `.onboarding-visual` legacy de styles.css. */
.onboarding-twin .onboarding-visual {
    width: 100%;
    padding: 0 !important;
    position: relative;
    min-height: 172px;
    overflow: hidden;
    border: 1px solid rgba(217, 229, 230, 0.82);
    border-radius: 22px;
    /* Sin degradado azul detrás del gráfico: fondo plano (en móvil se funde con la
               card del paso, que también es blanca). */
    background: #fff;
    box-shadow: 0 26px 70px rgba(0, 61, 79, 0.1);
    backdrop-filter: blur(16px);
}

/* Desktop: la CARD del gráfico es el propio twin (llena la celda con el stretch de la
           fila → misma altura que la card del punto). El gráfico (.onboarding-visual) va
           transparente, a su ALTURA NATURAL y CENTRADO dentro del twin (place-items:center)
           → su contenido queda centrado verticalmente, no pegado a los bordes al estirar el
           lienzo. En móvil no aplica (todo va en una sola card apilada). */
@media (min-width: 769px) {
    .onboarding-twin {
        background: #fff !important;
        border: 1px solid rgba(212, 224, 225, 0.95) !important;
        border-radius: 22px !important;
        box-shadow: 0 18px 44px rgba(0, 61, 79, 0.06) !important;
        overflow: hidden;
    }

    .onboarding-twin .onboarding-visual {
        height: auto;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        border-radius: 0 !important;
    }

    /* El dashboard (punto 5) SÍ llena la card (su contenido escala bien con la
               altura). Su lista y su panel se centran verticalmente en vez de quedar
               anclados arriba/estirados → se va el hueco de arriba. */
    .onboarding-twin .onboarding-visual--dashboard {
        height: 100%;
    }

    .onboarding-twin .onboarding-visual--dashboard .automation-list {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .onboarding-twin .onboarding-visual--dashboard .mini-dashboard {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.onboarding-twin .onboarding-visual::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.58), transparent 46%);
    pointer-events: none;
}

.onboarding-twin .onboarding-visual--dashboard {
    min-height: 228px;
}

.onboarding-twin .glass-card {
    position: absolute;
    border: 1px solid rgba(217, 229, 230, 0.82);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 18px 42px rgba(0, 61, 79, 0.14);
    backdrop-filter: blur(16px);
}

.onboarding-twin .call-card {
    top: 22px;
    left: 28px;
    right: 82px;
    display: grid;
    grid-template-columns: 48px 1fr 34px;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
}

.onboarding-twin .call-card__media {
    position: relative;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
    overflow: hidden;
}

.onboarding-twin .call-card__media span {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
}

.onboarding-twin .call-card__media span:nth-child(1) {
    width: 18px;
    height: 18px;
    top: 9px;
    left: 15px;
}

.onboarding-twin .call-card__media span:nth-child(2) {
    width: 28px;
    height: 12px;
    right: -4px;
    bottom: 6px;
}

.onboarding-twin .call-card__media span:nth-child(3) {
    width: 9px;
    height: 9px;
    right: 8px;
    top: 8px;
    background: var(--color-aqua);
}

.onboarding-twin .call-card__meta span,
.onboarding-twin .analysis-card__top,
.onboarding-twin .data-system span,
.onboarding-twin .automation-item,
.onboarding-twin .floating-chip {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
}

.onboarding-twin .call-card__meta strong,
.onboarding-twin .call-agenda strong,
.onboarding-twin .analysis-card strong {
    display: block;
    color: var(--color-ink);
    font-size: 15px;
    line-height: 1.2;
}

.onboarding-twin .call-card__action,
.onboarding-twin .analysis-card__top i,
.onboarding-twin .automation-item span {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(42, 157, 143, 0.12);
}

.onboarding-twin .call-card__action {
    width: 30px;
    height: 30px;
}

.onboarding-twin .call-card__action span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-green);
}

.onboarding-twin .call-agenda {
    left: 96px;
    right: 28px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
}

.onboarding-twin .call-agenda em {
    margin-left: auto;
    color: var(--color-secondary);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.onboarding-twin .floating-chip {
    position: absolute;
    top: 22px;
    right: 24px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(0, 85, 109, 0.08);
    color: var(--color-primary);
}

.onboarding-twin .software-icon {
    position: relative;
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: rgba(0, 85, 109, 0.1);
}

.onboarding-twin .software-icon::before,
.onboarding-twin .software-icon::after {
    content: "";
    position: absolute;
}

.onboarding-twin .software-icon--video::before {
    inset: 8px 9px;
    border-radius: 4px;
    background: var(--color-primary);
}

.onboarding-twin .software-icon--video::after {
    top: 10px;
    right: 5px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--color-primary);
}

.onboarding-twin .ai-orbit {
    position: absolute;
    left: 28px;
    top: 43px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 5px solid rgba(0, 85, 109, 0.12);
    border-top-color: var(--color-primary);
    animation: spinSoft 7s linear infinite;
}

.onboarding-twin .ai-orbit span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-secondary);
}

.onboarding-twin .ai-orbit span:nth-child(1) {
    top: -14px;
    left: 20px;
}

.onboarding-twin .ai-orbit span:nth-child(2) {
    right: -12px;
    top: 22px;
    background: var(--color-aqua);
}

.onboarding-twin .ai-orbit span:nth-child(3) {
    bottom: -12px;
    left: 18px;
    background: var(--color-primary);
}

.onboarding-twin .analysis-card {
    top: 24px;
    left: 92px;
    right: 24px;
    padding: 15px 17px 16px;
}

.onboarding-twin .analysis-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.onboarding-twin .analysis-card__top i,
.onboarding-twin .automation-item span {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

.onboarding-twin .analysis-card__top i::before,
.onboarding-twin .automation-item span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-green);
}

.onboarding-twin .analysis-card p {
    margin-top: 5px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
}

.onboarding-twin .progress-line {
    height: 6px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(185, 210, 212, 0.42);
}

.onboarding-twin .progress-line span {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.onboarding-twin .signal-lines {
    position: absolute;
    inset: auto 30px 22px 138px;
    display: grid;
    gap: 5px;
}

.onboarding-twin .signal-lines span,
.onboarding-twin .secure-stream span {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 85, 109, 0.28), transparent);
}

.onboarding-twin .data-system {
    top: 26px;
    bottom: 26px;
    width: 132px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    padding: 12px 10px;
    text-align: center;
    overflow: hidden;
}

/* Texto más pequeño para que NO se salga de la card del sistema de datos. */
.onboarding-twin .data-system span {
    font-size: 9.5px !important;
    line-height: 1.25 !important;
}

.onboarding-twin .data-system:first-child {
    left: 26px;
}

.onboarding-twin .data-system--target {
    right: 26px;
}

.onboarding-twin .data-ring,
.onboarding-twin .validation-ring {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fff 0 40%, transparent 42%),
        conic-gradient(var(--color-primary) 0 35%, rgba(185, 210, 212, 0.56) 35% 52%, var(--color-secondary) 52% 84%, rgba(185, 210, 212, 0.4) 84%);
}

.onboarding-twin .validation-ring {
    display: grid;
    place-items: center;
    /* UN solo círculo verde sólido (antes: donut verde + hueco blanco + círculo
               interno → demasiados círculos). */
    background: var(--color-green);
}

.onboarding-twin .validation-ring i {
    position: relative;
    width: 22px;
    height: 22px;
    /* Sin segundo círculo: solo aloja el tick; el círculo es la propia ring. */
    background: transparent;
}

.onboarding-twin .validation-ring i::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    width: 13px;
    height: 6px;
    border-left: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: rotate(-45deg);
}

.onboarding-twin .data-system em {
    color: var(--color-secondary);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.onboarding-twin .secure-stream {
    position: absolute;
    left: 172px;
    right: 172px;
    top: 68px;
    display: grid;
    gap: 8px;
}

.onboarding-twin .secure-stream span {
    position: relative;
    height: 2px;
    border-radius: 999px;
    overflow: hidden;
    /* Cable estático tenue (la "vía"), desvanecido en los extremos. */
    background-image: linear-gradient(90deg,
            rgba(0, 85, 109, 0.04),
            rgba(0, 85, 109, 0.16) 50%,
            rgba(0, 85, 109, 0.04)) !important;
}

/* Paquete de datos: cometa teal (cabeza brillante + estela) que viaja del
           sistema de origen a EviMedic en bucle. translateX = GPU, suave. */
.onboarding-twin .secure-stream span::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 32%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--color-secondary), var(--color-primary) 72%, transparent);
    transform: translateX(-130%);
    animation: secStreamFlow 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: transform;
}

.onboarding-twin .secure-stream span:nth-child(2)::after {
    animation-delay: 0.5s;
}

.onboarding-twin .secure-stream span:nth-child(3)::after {
    animation-delay: 1s;
}

.onboarding-twin .secure-stream span:nth-child(4)::after {
    animation-delay: 1.5s;
}

@media (prefers-reduced-motion: reduce) {
    .onboarding-twin .secure-stream span::after {
        animation: none;
        opacity: 0;
    }
}

.onboarding-twin .learning-cluster {
    position: absolute;
    inset: 30px 42px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
}

.onboarding-twin .learning-tile {
    position: relative;
    width: min(92px, 100%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    min-width: 0;
    justify-self: center;
}

.onboarding-twin .learning-tile--main {
    transform: translateY(18px);
}

.onboarding-twin .software-icon--chat::before {
    inset: 8px 7px 11px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-aqua));
}

.onboarding-twin .software-icon--chat::after {
    left: 12px;
    bottom: 7px;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    transform: rotate(45deg);
}

.onboarding-twin .software-icon--team::before {
    width: 13px;
    height: 13px;
    top: 7px;
    left: 10px;
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: 9px 3px 0 rgba(0, 85, 109, 0.26);
}

.onboarding-twin .software-icon--team::after {
    left: 6px;
    right: 6px;
    bottom: 7px;
    height: 10px;
    border-radius: 999px 999px 6px 6px;
    background: linear-gradient(90deg, var(--color-aqua), var(--color-primary));
}

.onboarding-twin .software-icon--play::before {
    left: 12px;
    top: 8px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--color-primary);
}

.onboarding-twin .software-icon--home::before {
    left: 8px;
    top: 13px;
    width: 17px;
    height: 13px;
    border-radius: 4px;
    background: var(--color-primary);
}

.onboarding-twin .software-icon--home::after {
    left: 8px;
    top: 7px;
    width: 17px;
    height: 17px;
    border-radius: 4px;
    background: var(--color-secondary);
    transform: rotate(45deg);
}

.onboarding-twin .signal-lines--training {
    inset: 76px 84px auto 84px;
}

.onboarding-twin .mini-dashboard {
    left: 28px;
    top: 34px;
    bottom: 28px;
    width: 168px;
    padding: 16px;
}

.onboarding-twin .mini-dashboard__top {
    display: flex;
    align-items: center;
    min-height: 36px;
}

.onboarding-twin .mini-dashboard__top span {
    display: block;
    width: 28px;
    height: 28px;
    margin-right: -8px;
    border: 2px solid rgba(255, 255, 255, 0.74);
    border-radius: 50%;
    background: var(--color-aqua);
}

.onboarding-twin .mini-dashboard__top span:nth-child(2) {
    background: var(--color-secondary);
}

.onboarding-twin .mini-dashboard__top span:nth-child(3) {
    background: var(--color-primary);
}

.onboarding-twin .mini-dashboard__top i {
    width: 28px;
    height: 28px;
    margin-left: auto;
    border-radius: 50%;
    background: rgba(0, 85, 109, 0.1);
}

.onboarding-twin .mini-dashboard__calendar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 12px;
}

.onboarding-twin .mini-dashboard__calendar span {
    display: grid;
    place-items: center;
    min-height: 22px;
    border-radius: 7px;
    color: var(--color-muted);
    font-size: 8px;
    font-weight: 800;
}

.onboarding-twin .mini-dashboard__calendar .active {
    background: rgba(54, 132, 139, 0.2);
    color: var(--color-primary);
}

.onboarding-twin .automation-list {
    position: absolute;
    top: 28px;
    right: 26px;
    width: min(214px, 52%);
    display: grid;
    gap: 10px;
}

.onboarding-twin .automation-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 13px;
    color: var(--color-ink);
}

.onboarding-twin .dashboard-bell {
    position: absolute;
    left: 190px;
    bottom: 34px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(185, 210, 212, 0.72);
    box-shadow: 0 16px 30px rgba(0, 61, 79, 0.14);
}

.onboarding-twin .dashboard-bell::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 9px;
    width: 14px;
    height: 16px;
    border: 2px solid var(--color-primary);
    border-bottom: 0;
    border-radius: 9px 9px 4px 4px;
}

.onboarding-twin .dashboard-bell::after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: 9px;
    width: 7px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-primary);
}

@keyframes spinSoft {
    to {
        transform: rotate(360deg);
    }
}

@keyframes streamPulse {

    0%,
    100% {
        opacity: 0.35;
        transform: translateX(-6px);
    }

    50% {
        opacity: 1;
        transform: translateX(6px);
    }
}

/* Brillo que recorre las líneas de transferencia de datos (paso "Migramos tus datos"). */
@keyframes secStreamFlow {
    0% {
        transform: translateX(-130%);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translateX(360%);
        opacity: 0;
    }
}

/* === Onboarding móvil (≤768px): dentro de cada fila/slide el orden vertical
           es [número + título] en una fila, luego [texto], luego [gráfico].
           El gráfico (.onboarding-twin) vuelve a mostrarse en móvil (el legacy lo
           ocultaba a ≤1080px). Solo cambia el layout móvil; no toca el carrusel. === */
@media (max-width: 768px) {

    /* UNA card exterior por punto, que envuelve número+título, texto y gráfico. El
               título/texto y el gráfico van PLANOS dentro (sin cards internas). */
    .onboarding-row {
        grid-template-columns: 1fr;
        gap: 14px;
        background: #fff;
        border: 1px solid rgba(212, 224, 225, 0.95);
        border-radius: 22px;
        box-shadow: 0 18px 44px rgba(0, 61, 79, 0.06);
        padding: 22px 22px 20px;
    }

    /* El gráfico se ESCALA "como imagen": anclado a un tamaño de referencia fijo
               (400px de ancho × su alto de diseño) y reducido con container-query (cqw)
               para caber en la card → MISMA composición que en escritorio, aunque quede
               pequeño. El twin reserva la altura escalada con aspect-ratio. */
    .onboarding-twin {
        display: block !important;
        position: relative;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: none;
        padding: 0 !important;
        width: 100%;
        container-type: inline-size;
        overflow: hidden;
        aspect-ratio: 460 / 172;
        /* Sin card propia: el gráfico va plano dentro de la card exterior del punto. */
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    /* El dashboard (último paso) es más alto. */
    .onboarding-row:last-child .onboarding-twin {
        aspect-ratio: 460 / 228;
    }

    .onboarding-twin .onboarding-visual {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        margin-left: -230px !important;
        /* centra la caja de 460px en el twin */
        width: 460px !important;
        height: 172px !important;
        min-height: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        /* min(1,…): nunca agranda (evita el desborde en ≤768 anchos). Centrado
                   horizontal con transform-origin center. */
        transform: scale(min(1, 100cqw / 460px)) !important;
        transform-origin: top center !important;
    }

    .onboarding-twin .onboarding-visual--dashboard {
        height: 228px !important;
    }

    /* Slide: número + título en una FILA arriba, texto debajo (full width). SIN card
               (fuera el fondo/borde/sombra que trae el slide de base) → título y texto planos. */
    .onboarding-carousel--vertical .onboarding-slide,
    .onboarding-slide {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        row-gap: 12px;
        align-items: center;
        min-height: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* El estado activo del slide también trae fondo/sombra: fuera en móvil. */
    .onboarding-carousel--vertical .onboarding-slide.active {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* El <div> que envuelve h3 + p (no el número) deja de ser caja:
               sus hijos (h3, p) entran directamente al grid del slide. */
    .onboarding-carousel--vertical .onboarding-slide>div:not(.onboarding-slide__number) {
        display: contents;
    }

    .onboarding-carousel--vertical .onboarding-slide__number {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .onboarding-carousel--vertical .onboarding-slide h3 {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 0;
        align-self: center;
    }

    /* Texto: ocupa toda la fila, debajo de [número + título]. */
    .onboarding-carousel--vertical .onboarding-slide p {
        grid-column: 1 / -1;
        grid-row: 2;
    }

}

/* master:custom.css 5880-5932 */
/* ---------- Galen AI ---------- */
/* Tipografía: acota la medida del subtítulo (~90ch -> ~72-75ch). */
.ia-block--orbit .ia-block__subtitle {
    max-width: 680px;
}

/* A11y: foco de teclado en el CTA 'Descubrir Galen AI'. */
.ia-block--orbit .ia-block__footer .btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-md);
}

/* Alineación: la respuesta de Galen iguala su gutter izquierdo (10px)
           al gutter derecho de la pregunta (conversación simétrica). */
.hyg3__cl .hyg3Ai {
    margin-left: 10px;
}

/* Elevación: el check usa la elevación neutra de marca (sin halo verde
           saturado); el relleno verde no se toca. */
.hyg3Check {
    box-shadow: 0 2px 6px rgba(0, 61, 79, 0.18) !important;
}

/* Motion: entrada del check sin sobreimpulso (el keyframe base pasaba
           por scale 1.18). Longhand para NO resetear los animation-delay base. */
@keyframes hygPopSmooth {
    0% {
        scale: 0.6;
        opacity: 0;
    }

    100% {
        scale: 1;
        opacity: 1;
    }
}

.hyg3.visible .hyg3Check {
    animation-name: hygPopSmooth !important;
    animation-duration: .4s !important;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
    animation-fill-mode: backwards !important;
}

/* Reduced-motion: re-anula el pop. Esta regla va DESPUÉS del guard
           previo (L~3577), así que hay que volver a desactivarlo aquí. */
@media (prefers-reduced-motion: reduce) {
    .hyg3.visible .hyg3Check {
        animation: none !important;
    }
}

/* master:custom.css 6077-6102 */
/* ---------- Ritmo vertical (solo desktop, móvil intacto) ---------- */
@media (min-width: 769px) {

    /* Reduce el hueco enorme entre Galen (CTA) y Funcionalidades:
               se recorta el padding inferior de Galen (140 -> 88) y el superior
               de Funcionalidades (112 -> 80); antes ~252px de espacio en blanco. */
    .ia-block--orbit {
        padding-bottom: 88px;
    }

    .capabilities--system {
        padding-top: 80px;
        padding-bottom: 112px;
    }

    /* Suaviza la asimetría superior de beta (72 -> 96px). */
    .beta-program {
        padding-top: 96px;
    }

    /* Lleva el gap cabecera->contenido de Funcionalidades al rango
               dominante (42 -> 54px). */
    .capabilities-system__header {
        margin-bottom: 54px;
    }
}

/* master:custom.css 6247-6262 */
/* ============================================================
           Anti-viudas: evita que la última línea de la prosa principal quede
           con una sola palabra suelta. text-wrap: pretty reparte mejor las
           líneas en navegadores modernos (donde no se soporta, no estorba).
           El caso puntual de "…sin duplicar trabajo" se ata además con &nbsp;
           en el HTML, garantía total en cualquier vista.
           ============================================================ */
.clinic-flow__copy p,
.ia-block__subtitle,
.section-subtitle,
.sectionLead,
.hero__subtitle,
.hero__copy,
.faq__answer p {
    text-wrap: pretty;
}

/* master:custom.css 6388-6466 */
/* ============================================================
   TELÉFONO (≤768): blob de Galen AI vivo (11 paths SVG + blurs en
   bucle) Y su glow se sustituyen por assets/video/blob60.mp4 —
   grabación con el glow incluido y el fondo de sección (#f4f8f8)
   horneado. Loop REAL de 60s verificado frame-exacto (sin fundido).
   display:none a los vivos = ni pintan ni animan (coste cero).
   Tablet y desktop conservan blob y glow reales e interactivos.
   ============================================================ */
.blobVideo {
    display: none;
    pointer-events: none;
}

@media (max-width: 768px) {

    /* El blob vivo NO pinta pero CONSERVA su hueco (55cqw) → el layout y el
       título no se mueven un píxel. El glow sí desaparece (es absoluto). */
    .hyg3 .hygia-map__center .containerBlob {
        visibility: hidden !important;
    }

    .hyg3 .hyg3__glow {
        display: none !important;
    }

    /* Vídeo ABSOLUTO centrado sobre el hueco del blob, con la huella del glow
       (74cqw). Máscara radial: sus propios bordes se disuelven a transparente
       (imposible ver el cuadrado aunque el color del H.264 no clave el CSS). */
    .hyg3 .hygia-map__center .blobVideo {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 74cqw;
        height: 74cqw;
        max-width: 400px;
        max-height: 400px;
        z-index: 0;
        -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%);
        mask-image: radial-gradient(circle, #000 58%, transparent 71%);
    }

    /* Título del orbe siempre por encima de la zona del vídeo. */
    .hyg3MobTitle {
        position: relative;
        z-index: 2;
    }
}


/* ============================================================
   ORBE MÓVIL (≤768) — capacidades "consent" (1) e "invoice" (5):
   sus cards llevan filas de campos (Paciente/Tratamiento/Fecha,
   Proveedor/Importe/Categoría/IVA) que NO caben en la media columna
   del layout general (50% + overflow hidden = textos cortados).
   Para estas dos: card a TODO el ancho y las burbujas SUPERPUESTAS
   sobre la card (absolutas, centradas verticalmente sobre ella, a la
   derecha, z-index encima) — no añaden altura y da igual que tapen
   parte del contenido de la card.
   ============================================================ */
@media (max-width: 768px) {

    .hyg3MobExItem[data-cap="consent"] .hyg3Mock,
    .hyg3MobExItem[data-cap="invoice"] .hyg3Mock {
        width: 100% !important;
    }

    .hyg3MobExItem[data-cap="consent"] .hyg3Msgs,
    .hyg3MobExItem[data-cap="invoice"] .hyg3Msgs {
        position: absolute !important;
        top: 50% !important;
        right: 8px !important;
        transform: translateY(-50%) !important;
        width: 72% !important;
        margin: 0 !important;
        z-index: 3 !important;
    }
}