/* Programa Beta trasladado literalmente desde master. */

/* Programa Beta interactive redesign */
.beta-program {
    padding: 104px 0 112px;
    background:
        radial-gradient(ellipse at 50% 8%, rgba(54, 132, 139, 0.1) 0%, rgba(54, 132, 139, 0) 42%),
        linear-gradient(180deg, #ffffff 0%, #f8fafa 100%);
    overflow: hidden;
}

.beta-program__header {
    max-width: 880px;
    margin: 0 auto 54px;
    text-align: center;
}

.beta-program__header .section-title {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.08;
}

.beta-program__header .section-subtitle {
    max-width: 760px;
    margin: 16px auto 0;
}

.beta-mobile-copy-only {
    display: none;
}

.beta-program__interactive {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.25fr);
    gap: 34px;
    align-items: center;
    max-width: 1160px;
    margin: 0 auto;
}

.beta-tabs {
    position: relative;
    display: grid;
    gap: 0;
    border: 1px solid rgba(212, 224, 225, 0.95);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 22px 54px rgba(0, 61, 79, 0.07);
    overflow: hidden;
}

.beta-tabs::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 54px;
    bottom: 54px;
    width: 1px;
    background: rgba(54, 132, 139, 0.18);
}

.beta-tab {
    position: relative;
    display: grid;
    grid-template-columns: 42px 74px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 136px;
    padding: 24px 26px 24px 18px;
    border: 0;
    border-bottom: 1px solid rgba(212, 224, 225, 0.78);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

.beta-tab:last-child {
    border-bottom: 0;
}

.beta-tab.active {
    background:
        linear-gradient(90deg, rgba(236, 248, 247, 0.94) 0%, rgba(255, 255, 255, 0.84) 100%);
    box-shadow: inset 4px 0 0 var(--color-primary);
}

.beta-tab__step {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(212, 224, 225, 0.95);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(0, 61, 79, 0.08);
}

.beta-tab.active .beta-tab__step {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.beta-tab__icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--color-primary);
    background: rgba(54, 132, 139, 0.08);
}

.beta-tab strong,
.beta-tab small {
    display: block;
}

.beta-tab strong {
    margin-bottom: 9px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1.18;
}

.beta-tab small {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

.beta-tablet {
    filter: drop-shadow(0 28px 58px rgba(0, 35, 46, 0.16));
}

.beta-tablet__frame {
    padding: 18px;
    border-radius: 30px;
    background: linear-gradient(145deg, #15242e 0%, #22343d 45%, #0f1b22 100%);
}

.beta-tablet__topbar,
.beta-tablet__screen {
    background: #f9fcfc;
}

.beta-tablet__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-radius: 18px 18px 0 0;
    border-bottom: 1px solid rgba(212, 224, 225, 0.9);
}

.beta-tablet__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.beta-tablet__brand span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
}

.beta-tablet__brand strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 18px;
}

.beta-tablet__brand small {
    color: var(--color-accent);
    font-weight: 800;
}

.beta-tablet__dots {
    color: var(--color-primary);
    letter-spacing: 3px;
}

.beta-tablet__screen {
    position: relative;
    min-height: 540px;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
}

.beta-tablet__screen::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.32;
    background:
        radial-gradient(circle at 20% 28%, rgba(54, 132, 139, 0.12) 0 1px, transparent 2px),
        radial-gradient(circle at 66% 36%, rgba(54, 132, 139, 0.1) 0 1px, transparent 2px);
    background-size: 82px 82px;
    pointer-events: none;
}

.beta-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 34px 38px;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 320ms ease, transform 320ms ease;
}

.beta-screen.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.beta-file,
.beta-bubble,
.beta-result,
.beta-call,
.beta-feedback-card {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(212, 224, 225, 0.86);
    box-shadow: 0 12px 28px rgba(0, 61, 79, 0.05);
}

.beta-file {
    width: min(340px, 74%);
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff;
}

.beta-file strong,
.beta-file span {
    display: block;
}

.beta-file strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 15px;
}

.beta-file span {
    margin-top: 5px;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.beta-bubble {
    max-width: 360px;
    padding: 17px 20px;
    border-radius: 18px;
    color: var(--color-primary);
    font-size: 15px;
    line-height: 1.45;
}

.beta-bubble--ai {
    align-self: flex-end;
    background: rgba(236, 248, 247, 0.96);
}

.beta-bubble--user {
    align-self: flex-start;
    background: #fff;
}

.beta-result,
.beta-call {
    width: fit-content;
    padding: 12px 16px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
}

.beta-call {
    background: #fff;
    color: var(--color-primary);
}

.beta-screen--panel {
    justify-content: center;
}

.beta-feedback-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 20px;
    border-radius: 18px;
    background: #fff;
}

.beta-feedback-card strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
}

.beta-feedback-card span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(54, 132, 139, 0.1);
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 800;
}

.beta-screen--panel p {
    position: relative;
    z-index: 1;
    margin: 8px 0 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

.beta-program__cta {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

.beta-program__cta .btn {
    min-width: 260px;
}

@media (max-width: 1040px) {
    .beta-program__interactive {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .beta-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .beta-tabs::before {
        display: none;
    }

    .beta-tab {
        grid-template-columns: 34px minmax(0, 1fr);
        min-height: 0;
    }

    .beta-tab__icon {
        display: none;
    }
}

@media (max-width: 640px) {
    .beta-program {
        padding: 84px 0;
    }

    .beta-tabs {
        grid-template-columns: 1fr;
    }

    .beta-tab {
        padding: 18px;
    }

    .beta-tablet__frame {
        padding: 12px;
        border-radius: 24px;
    }

    .beta-tablet__topbar {
        padding: 16px;
    }

    .beta-tablet__screen {
        min-height: 470px;
    }

    .beta-screen {
        padding: 22px;
    }
}

/* Beta tablet portrait refinement */
.beta-program__interactive {
    grid-template-columns: minmax(340px, 0.92fr) minmax(360px, 0.98fr);
    gap: 44px;
}

.beta-tablet {
    width: min(100%, 580px);
    justify-self: center;
}

.beta-tablet__frame {
    padding: 16px;
    border-radius: 34px;
}

.beta-tablet__topbar {
    padding: 18px 22px;
}

.beta-tablet__screen {
    min-height: 560px;
}

.beta-screen {
    gap: 16px;
    padding: 30px 34px;
}

.beta-file {
    width: min(360px, 84%);
}

.beta-bubble {
    max-width: 330px;
}

.beta-bubble--ai {
    margin-left: auto;
}

.beta-result {
    max-width: 100%;
    white-space: normal;
}

.beta-feedback-card {
    min-height: 82px;
}

@media (max-width: 1040px) {
    .beta-program__interactive {
        grid-template-columns: 1fr;
    }

    .beta-tablet {
        width: min(100%, 620px);
    }
}

@media (max-width: 640px) {
    .beta-tablet {
        width: 100%;
    }

    .beta-tablet__screen {
        min-height: 560px;
    }

    .beta-bubble,
    .beta-file {
        max-width: 100%;
        width: 100%;
    }
}

/* Programa Beta depth stack */
.beta-program__interactive {
    grid-template-columns: minmax(360px, 0.84fr) minmax(360px, 1fr);
    align-items: center;
}

.beta-tabs {
    position: relative;
    height: 470px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    perspective: 1200px;
}

.beta-tabs::before {
    display: none;
}

.beta-tab {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(100%, 520px);
    min-height: 190px;
    grid-template-columns: 38px 68px minmax(0, 1fr);
    gap: 18px;
    padding: 26px;
    border: 1px solid rgba(212, 224, 225, 0.95);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 26px 60px rgba(0, 61, 79, 0.12);
    opacity: 0;
    filter: blur(3px);
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0) scale(0.86);
    transition:
        opacity 360ms ease,
        filter 360ms ease,
        transform 420ms ease,
        box-shadow 360ms ease,
        border-color 360ms ease;
}

.beta-tab.active {
    z-index: 5;
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(54, 132, 139, 0.26);
    box-shadow: 0 34px 76px rgba(0, 61, 79, 0.16);
    transform: translate3d(-50%, -50%, 70px) scale(1);
}

.beta-tab.is-prev {
    z-index: 2;
    opacity: 0.34;
    filter: blur(2.4px);
    pointer-events: auto;
    transform: translate3d(-50%, calc(-50% - 142px), -80px) scale(0.92);
}

.beta-tab.is-next {
    z-index: 2;
    opacity: 0.34;
    filter: blur(2.4px);
    pointer-events: auto;
    transform: translate3d(-50%, calc(-50% + 142px), -80px) scale(0.92);
}

.beta-tab.is-hidden {
    z-index: 1;
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(-50%, -50%, -140px) scale(0.78);
}

.beta-tab__step {
    align-self: start;
    margin-top: 2px;
}

.beta-tab__icon {
    width: 62px;
    height: 62px;
}

.beta-tab strong {
    font-size: 23px;
}

.beta-tab small {
    font-size: 14px;
}

.beta-tablet {
    width: min(100%, 560px);
}

@media (max-width: 1040px) {
    .beta-program__interactive {
        grid-template-columns: 1fr;
    }

    .beta-tabs {
        height: 440px;
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
    }

    .beta-tab {
        grid-template-columns: 34px 58px minmax(0, 1fr);
    }

    .beta-tab__icon {
        display: grid;
        width: 54px;
        height: 54px;
    }
}

@media (max-width: 640px) {
    .beta-tabs {
        height: 410px;
    }

    .beta-tab {
        grid-template-columns: 32px minmax(0, 1fr);
        min-height: 176px;
        padding: 22px;
    }

    .beta-tab__icon {
        display: none;
    }

    .beta-tab.is-prev {
        transform: translate3d(-50%, calc(-50% - 118px), -80px) scale(0.92);
    }

    .beta-tab.is-next {
        transform: translate3d(-50%, calc(-50% + 118px), -80px) scale(0.92);
    }
}

/* Tablet (1041-1180): la noria es APILADA pero heredaba la altura fija 470px
   de la rueda de escritorio; con 5 cards (~700px) desbordaba y se montaba sobre
   el móvil y el botón. Altura automática para que crezca natural + columnas
   alineadas arriba. */
@media (min-width: 1041px) and (max-width: 1180px) {
    .beta-program__interactive {
        align-items: start;
    }
    .beta-tabs {
        height: auto;
        perspective: none;
    }
}



/* Ajustes finales de master específicos del bloque Beta. */

.beta-program--master { background: transparent !important; }

        /* Mensajes del móvil Beta anclados abajo: cada nuevo aparece abajo y empuja los anteriores hacia arriba. */
        .beta-screen {
            justify-content: flex-end !important;
            transition: opacity .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1) !important;
        }

        /* Cambio de card (noria) más suave, con el easing del proyecto. */
        .beta-tab {
            transition:
                opacity .55s cubic-bezier(.16, 1, .3, 1),
                filter .55s cubic-bezier(.16, 1, .3, 1),
                transform .62s cubic-bezier(.16, 1, .3, 1),
                box-shadow .55s ease,
                border-color .55s ease !important;
            min-height: 0 !important;
            padding-top: 18px !important;
            padding-bottom: 18px !important;
        }

        /* Icono "12" de la card "12 meses incluidos": número grande en el slot del icono. */
        .beta-tab__icon--num {
            font-family: var(--font-heading);
            font-size: 32px;
            font-weight: 800;
            line-height: 1;
            color: var(--color-primary);
        }

        /* Cards un pelín más grandes en general (contenido), sin cambiar posiciones. */
        .beta-tab strong {
            font-size: 27px !important;
        }

        .beta-tab small {
            font-size: 16px !important;
        }

        .beta-tab .beta-tab__icon {
            width: 66px !important;
            height: 66px !important;
        }

        /* Hover (.is-paused desde JS): las 4 cards de la noria alineadas a la misma altura,
           equidistantes y todas nítidas (como en el home original). */
        /* La noria crece/encoge en altura al desplegarse (hover/tap) — transición suave
           para que el resto de la sección (subtítulo arriba, móvil abajo) haga sitio. */
        /* Noria táctil (≤1040): el arrastre vertical sobre la noria GIRA la rueda,
           no scrollea la página (pan-x deja pasar solo gestos horizontales). */
        @media (max-width: 1040px) {
            .beta-program .beta-tabs {
                touch-action: pan-x;
            }
        }

        .beta-tabs {
            transition: height .5s cubic-bezier(.16, 1, .3, 1);
        }

        .beta-tabs.is-paused {
            overflow: visible !important;
            z-index: 6 !important;
        }

        .beta-tabs.is-paused .beta-tab {
            filter: blur(0) !important;
            opacity: 1 !important;
            z-index: 2 !important;
            pointer-events: auto !important;
            box-shadow: 0 16px 40px rgba(0, 61, 79, 0.12) !important;
        }

        /* Las posiciones del hover las calcula el JS (layoutPaused) según la altura real
           de cada card → gaps uniformes sin importar cuál esté seleccionada. */
        /* Mensajes con fondo azul oscuro (resultados) centrados horizontalmente. */
        .beta-result {
            align-self: center !important;
        }

        /* Plantilla feedback: centrada horizontal y verticalmente (aparece directa, no se teclea). */
        .beta-screen--panel {
            justify-content: center !important;
            align-items: center !important;
        }

        /* Las 3 cards de feedback con el MISMO ancho (el textillo de debajo conserva el suyo). */
        .beta-screen--panel .beta-feedback-card {
            width: min(100%, 380px) !important;
        }

        /* Pills de estado: En revisión (naranja) / Planificada (azul) / En desarrollo (verde),
           tonos apagados pero visibles, texto blanco. */
        .beta-screen--panel .beta-feedback-card span {
            display: inline-block !important;
            padding: 5px 13px !important;
            border-radius: 999px !important;
            color: #fff !important;
            font-weight: 700 !important;
            white-space: nowrap !important;
        }

        .beta-screen--panel .beta-feedback-card:nth-child(1) span {
            background: #cf8a4d !important;
        }

        .beta-screen--panel .beta-feedback-card:nth-child(2) span {
            background: #4a78ad !important;
        }

        .beta-screen--panel .beta-feedback-card:nth-child(3) span {
            background: #55a077 !important;
        }

        /* Móvil Beta un poco menos ancho. */
        .beta-tablet {
            width: min(100%, 480px) !important;
        }

        /* Logo de EviMedic en el topbar del móvil (sustituye al ✦ + texto). */
        .beta-tablet__logo {
            height: 26px;
            width: auto;
            display: block;
        }

        /* === Sección beta (escritorio, modo noria 3D ≥1181): que respire MÁS de BASE
           (sin depender del hover). El contenedor de la noria es más alto, las 3 cards
           visibles de la noria se separan un poco más en vertical, y la pantalla del
           tablet de chat es más alta. NO se toca el comportamiento del hover. === */
        @media (min-width: 1181px) {
            .beta-tabs {
                height: 820px;
            }

            .beta-tab.is-prev {
                transform: translate3d(-50%, calc(-50% - 230px), -80px) scale(0.92);
            }

            .beta-tab.is-next {
                transform: translate3d(-50%, calc(-50% + 230px), -80px) scale(0.92);
            }

            .beta-tablet__screen {
                min-height: 760px;
            }
        }

        /* === Beta program (móvil/tablet ≤1024): la noria 3D se sustituye por un ACORDEÓN
           con estilo propio — lista NUMERADA editorial. Cada ventaja lleva su número (1-5)
           grande y tenue que se ILUMINA al color de marca cuando el item se abre; el item
           reposa en una pastilla teal muy sutil y se "eleva" (fondo claro + sombra suave)
           al desplegarse. Chevron v → ^ (no "+"). Hover limpio (sin las transiciones 3D de
           la noria, que provocaban el salto). El driver JS de la noria hace return aquí. === */
        @media (max-width: 1024px) {
            .beta-program__interactive {
                display: block !important;
                width: 100% !important;
                max-width: 580px !important;
                margin: 0 auto !important;
            }

            .beta-program .beta-tablet {
                display: none !important;
            }

            .beta-program .beta-tabs {
                position: static !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 10px !important;
                height: auto !important;
                min-height: 0 !important;
                perspective: none !important;
                width: 100% !important;
                max-width: 580px !important;
                margin: 0 auto !important;
                background: transparent !important;
                border: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                overflow: visible !important;
                touch-action: auto !important;
            }

            .beta-program .beta-tabs::before {
                display: none !important;
            }

            /* Item-pastilla. Anula TODO el estado/transición 3D de la noria (transform,
               filter, blur), que era lo que daba el salto raro al pasar el ratón. */
            .beta-program .beta-tab {
                position: static !important;
                transform: none !important;
                opacity: 1 !important;
                filter: none !important;
                z-index: auto !important;
                pointer-events: auto !important;
                width: 100% !important;
                min-height: 0 !important;
                display: grid !important;
                grid-template-columns: 48px 1fr auto !important;
                grid-template-areas: "icon title chevron"". panel ." !important;
                align-items: center !important;
                column-gap: 16px !important;
                row-gap: 0 !important;
                padding: 16px 20px !important;
                background: rgba(54, 132, 139, 0.045) !important;
                border: 1px solid transparent !important;
                border-radius: 16px !important;
                box-shadow: none !important;
                cursor: pointer !important;
                transition: background .3s ease, border-color .3s ease, box-shadow .35s cubic-bezier(.22, 1, .36, 1) !important;
            }

            .beta-program .beta-tab:hover {
                background: rgba(54, 132, 139, 0.085) !important;
            }

            .beta-program .beta-tab.active,
            .beta-program .beta-tab.is-open {
                background: #fff !important;
                border-color: rgba(54, 132, 139, 0.16) !important;
                box-shadow: 0 14px 34px rgba(0, 61, 79, 0.08) !important;
            }

            /* Número de la noria fuera; protagonista = el icono de cada ventaja. */
            .beta-program .beta-tab .beta-tab__step {
                display: none !important;
            }

            /* Icono en una pastilla teal que se ILUMINA (sólida + icono blanco) al abrir. */
            .beta-program .beta-tab .beta-tab__icon {
                grid-area: icon !important;
                display: grid !important;
                place-items: center !important;
                width: 46px !important;
                height: 46px !important;
                border-radius: 14px !important;
                background: rgba(54, 132, 139, 0.1) !important;
                color: var(--color-secondary) !important;
                transition: background .3s ease, color .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1) !important;
            }

            .beta-program .beta-tab .beta-tab__icon svg {
                width: 23px !important;
                height: 23px !important;
            }

            .beta-program .beta-tab:hover .beta-tab__icon {
                background: rgba(54, 132, 139, 0.16) !important;
            }

            .beta-program .beta-tab.active .beta-tab__icon,
            .beta-program .beta-tab.is-open .beta-tab__icon {
                background: var(--color-primary) !important;
                color: #fff !important;
                transform: scale(1.06) !important;
            }

            .beta-program .beta-tab>span {
                display: contents !important;
            }

            .beta-program .beta-tab strong {
                grid-area: title !important;
                margin: 0 !important;
                font-family: var(--font-heading) !important;
                font-size: 16px !important;
                font-weight: 700 !important;
                line-height: 1.3 !important;
                color: var(--color-primary) !important;
            }

            /* Chevron v → ^ (no "+"). */
            .beta-program .beta-tab::after {
                content: "" !important;
                grid-area: chevron !important;
                align-self: center !important;
                width: 8px !important;
                height: 8px !important;
                margin-top: -2px !important;
                border-right: 2px solid rgba(0, 85, 109, 0.4) !important;
                border-bottom: 2px solid rgba(0, 85, 109, 0.4) !important;
                transform: rotate(45deg) !important;
                transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .3s ease !important;
            }

            .beta-program .beta-tab.is-open::after {
                transform: rotate(-135deg) !important;
                margin-top: 2px !important;
                border-color: var(--color-primary) !important;
            }

            /* Panel = descripción, indentada bajo el título (no bajo el icono). */
            .beta-program .beta-tab small {
                grid-area: panel !important;
                display: block !important;
                max-height: 0 !important;
                overflow: hidden !important;
                opacity: 0 !important;
                font-size: 14.5px !important;
                line-height: 1.62 !important;
                color: var(--color-text-secondary) !important;
                transition: max-height .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, padding .42s cubic-bezier(.22, 1, .36, 1) !important;
            }

            .beta-program .beta-tab.is-open small {
                max-height: 220px !important;
                opacity: 1 !important;
                padding-top: 10px !important;
            }
        }

        /* ---------- Programa Beta ---------- */
        /* A11y: foco de teclado en los .beta-tab (botones del acordeón/noria). */
        .beta-program .beta-tab:focus-visible {
            outline: 2px solid var(--color-secondary, #36848b) !important;
            outline-offset: 3px !important;
            border-radius: 16px !important;
        }

        /* Color: chevron del acordeón más legible en reposo (0.4 -> 0.6). */
        .beta-program .beta-tab::after {
            border-right-color: rgba(0, 85, 109, 0.6) !important;
            border-bottom-color: rgba(0, 85, 109, 0.6) !important;
        }

        /* Consistencia: .beta-file iguala su radio (16 -> 18px) al de sus
           hermanas rectangulares (.beta-bubble / .beta-feedback-card). */
        .beta-program .beta-file {
            border-radius: 18px !important;
        }

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

            /* Anula solo la DURACIÓN de las transiciones (no su resultado). */
            .beta-program .beta-tab,
            .beta-program .beta-tab.active,
            .beta-program .beta-tab.is-prev,
            .beta-program .beta-tab.is-next,
            .beta-program .beta-tab.is-hidden,
            .beta-program .beta-tab__icon,
            .beta-program .beta-tab::after,
            .beta-program .beta-tab small,
            .beta-program .beta-screen,
            .beta-program .beta-tabs {
                transition-duration: 0.01ms !important;
            }
        }

@media (min-width: 769px) { .beta-program { padding-top: 96px; } }

        /* ============================================================
           TÍTULO BETA — más ancho en escritorio/tablet para reducir saltos de
           línea ("Forma parte de las primeras 15 clínicas que utilizarán
           EviMedic"). Tamaño de fuente SIN TOCAR (queda el clamp original).
           Móvil (<=768px) intacto.
           ============================================================ */
        @media (min-width: 769px) {
            .beta-program__header {
                max-width: 1160px;
            }

            .beta-program__header .section-title {
                max-width: 1120px;
            }
        }

        @media (max-width: 768px) {
            .beta-program__header .section-title {
                font-size: 28px;
                line-height: 1.08;
            }

            .beta-mobile-copy-desktop {
                display: none;
            }

            .beta-mobile-copy-only {
                display: inline;
                white-space: nowrap;
            }
        }

        /* ============================================================
           Noria beta: flechas ▲/▼ a la IZQUIERDA de la rueda, FUERA del bloque.
           Desde ≥1300px (el bloque llena el container de 1200px; solo hay hueco
           a la izquierda en ventanas anchas). Además se empujan las cards ~22px
           hacia el mockup (translateX en .beta-tabs, que en modo rueda es
           transparente/overflow visible) para ganar ese margen izquierdo.
           Se ocultan al hacer hover sobre las cards (estado .is-paused).
           En <1300px la rueda funciona pero sin flechas.
           ============================================================ */
        .beta-program__interactive {
            position: relative;
        }

        .beta-nav {
            display: none;
        }

        @media (min-width: 1300px) {

            /* Cards un poco más pegadas al mockup → libera margen a la izquierda. */
            .beta-tabs {
                transform: translateX(22px);
            }

            .beta-nav {
                display: flex;
                flex-direction: column;
                gap: 14px;
                position: absolute;
                left: -62px;
                top: 50%;
                transform: translateY(-50%);
                z-index: 10;
            }

            /* Hover sobre las cards (noria en pausa) → flechas fuera. */
            .beta-tabs.is-paused~.beta-nav {
                display: none;
            }

            .beta-nav__btn {
                width: 42px;
                height: 42px;
                display: grid;
                place-items: center;
                padding: 0;
                border: 1px solid rgba(0, 61, 79, 0.16);
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.9);
                color: var(--color-primary);
                box-shadow: 0 6px 18px rgba(0, 61, 79, 0.10);
                cursor: pointer;
                transition: background .2s ease, border-color .2s ease, transform .2s ease;
            }

            .beta-nav__btn:hover {
                background: #fff;
                border-color: rgba(0, 61, 79, 0.3);
                transform: translateY(-1px);
            }

            .beta-nav__btn:active {
                transform: translateY(0);
            }

            .beta-nav__btn:focus-visible {
                outline: 2px solid var(--color-primary);
                outline-offset: 3px;
            }

            .beta-nav__btn svg {
                display: block;
            }
        }

        /* Sin animación de noria → flechas inútiles: se ocultan. */
        @media (prefers-reduced-motion: reduce) {
            .beta-nav {
                display: none !important;
            }
        }