/* === Standalone home: header con el ESTILO del proyecto, ganando sobre el
           CSS de la landing. Se mantiene position:fixed porque la landing reserva
           el hueco con .hero{padding-top:180px}; el proyecto da el resto del aspecto
           vía clases propias (.headerInner, .navLink, .brandLogo, .btnPrimary...). === */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            padding: 0;
            background: transparent;
            border-bottom: 1px solid transparent;
            box-shadow: none;
            transition: background 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
        }

        .header.is-scrolled,
        .header.scrolled {
            padding: 0;
            background: rgba(255, 255, 255, 0.8);
            border-bottom-color: var(--line, rgba(0, 61, 79, 0.08));
            box-shadow: 0 1px 2px rgba(0, 61, 79, 0.06);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        /* Header IDÉNTICO al de contacto: la landing pisa la fuente del body con
           Montserrat (más ancha) — el header vuelve a Urbanist, como el proyecto. */
        .header,
        .header .navLink,
        .header .btn {
            font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        .header .navLink {
            font-size: 1rem;
            font-weight: 500;
        }

        /* Nav centrado REAL en el header (misma geometría que contacto). */
        @media (min-width: 1025px) {
            .header .headerInner {
                position: relative;
            }

            .header .headerInner .nav {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }

        /* Hamburger móvil: reset de button nativo (la landing no resetea <button>)
           para que se vean solo las 3 rayitas, no la caja gris del sistema. */
        .navToggle {
            background: transparent;
            border: 0;
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
        }

        /* === Header móvil: layout blindado — logo a la izquierda y CTA + hamburger
           empaquetados a la derecha (sin depender del margin:auto heredado). === */
        @media (max-width: 1024px) {
            .header .headerInner {
                justify-content: flex-start;
                gap: 12px;
            }

            .header .brand {
                margin-right: auto;
            }

            .header .headerActions {
                margin-left: 0;
                margin-right: 0;
            }

            /* CTA compacto en móvil/tablet (a ≤519 el del proyecto lo compacta aún más). */
            .header .btn.btnPrimary {
                padding: 10px 18px;
                font-size: .9rem;
            }

            /* Header SIEMPRE sólido en móvil: sin transparente arriba, sin blur y sin
               transición — el toggle transparente↔glass a 8px de scroll parpadea, y el
               backdrop-filter da tirones al scrollear en móvil. */
            .header,
            .header.is-scrolled,
            .header.scrolled {
                background: rgba(255, 255, 255, 0.97);
                border-bottom: 1px solid rgba(0, 61, 79, 0.08);
                box-shadow: 0 1px 2px rgba(0, 61, 79, 0.05);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                transition: none;
            }

            /* Sin bamboleo lateral: cualquier desborde horizontal accidental no genera
               scroll-x (que hace que el header fijo parezca "descolocarse"). */
            html, body {
                overflow-x: clip;
            }
        }

        /* === Mata el scroll horizontal global ===
           Causa raíz: las líneas decorativas .scrollPath (width:160vw) dependían de un
           <main>{overflow:clip} que ESTA landing NO tiene (el .scrollPaths cuelga directo
           de <body>), y su .scrollPaths{overflow:hidden} no contenía bien porque el <body>
           NO es position:relative → el overlay absolute(inset:0) no se anclaba a él y los
           160vw extendían el documento → scroll-x → todo el contenido corrido a la derecha.
           Fix: body relative (ancla el overlay), clip explícito en el overlay, y overflow-x
           clip global de respaldo con prioridad. También cubre las maquetas escaladas
           (device/Galen/órbita) de ancho de referencia grande. */
        body {
            position: relative;
        }
        .scrollPaths {
            overflow: clip !important;
        }
        html, body {
            overflow-x: clip !important;
        }

        /* Botón azul del header: forma del .btn del proyecto (la landing redefine .btn). */
        .header .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 13px 28px;
            font-size: 15px;
            font-weight: 600;
            border-radius: var(--radius-lg, 14px);
            white-space: nowrap;
            cursor: pointer;
        }

        /* === Fondos de sección fuera → fondo uniforme + las líneas visibles por toda la web === */
        body {
            position: relative;
            background: var(--color-surface, #fff);
        }

        section,
        .hero, .beta-program, .clinic-flow, .ia-block, .capabilities,
        .specialties, .specialties--dark, .onboarding, .cta-final, .faq {
            background: transparent !important;
            border-top: 0 !important;
            border-bottom: 0 !important;
        }

        /* Rejilla de la sección oscura + ripples (anillos) del hero: fuera definitivamente. */
        .specialties--dark::before,
        .hero__pattern {
            display: none !important;
        }

        /* El contenedor .mockup del hero se colapsaba en este montaje; el marco real lo
           da .tablet-frame__screen (con su fondo). display:contents deja que la barra y el
           dashboard se rendericen dentro del screen del tablet. */
        .hero .mockup.mockup--tablet.hero-mockup {
            display: contents;
        }

        /* 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;
        }

        /* === Hero: tablet con tilt 3D que se endereza al scrollear + texto que se desvanece/retrocede
           (efecto del home original). Las variables las mueve el JS según scroll. === */
        .hero__visual {
            perspective: 800px;
            perspective-origin: center top;
        }

        .hero-device {
            transform-origin: center center;
            transform: translateY(var(--hero-ty, 120px)) rotateX(var(--hero-rx, 50deg)) scale(var(--hero-scale, 1)) !important;
            transition: transform 80ms linear !important;
            will-change: transform;
            backface-visibility: hidden;
        }

        .hero__content {
            transform: translateY(var(--hero-inner-y, 0)) !important;
            opacity: var(--hero-inner-opacity, 1) !important;
            transform-origin: center top;
            transition: opacity 120ms linear !important;
            will-change: transform, opacity;
        }

        /* La tablet inclinada (tilt 3D) sobresale del contenedor; que no la recorten. */
        .hero,
        .hero__inner,
        .hero__visual {
            overflow: visible !important;
        }

        /* === Excepción: la sección final "Acceso limitado" va en modo fondo azul (bgModoAzul en el HTML) === */
        .cta-final.cta-final,
        .cta-final.cta-final .cta-final__title,
        .cta-final.cta-final .cta-final__subtitle,
        .cta-final.cta-final .cta-final__badge,
        .cta-final.cta-final h2,
        .cta-final.cta-final p {
            color: #fff !important;
        }

        .cta-final.cta-final .btn.btn--white {
            background: #fff !important;
            color: var(--color-primary) !important;
            box-shadow: 0 14px 32px rgba(0, 0, 0, .18) !important;
        }

        .cta-final.cta-final .btn.btn--white-outline {
            background: transparent !important;
            color: #fff !important;
            border: 1.5px solid rgba(255, 255, 255, .5) !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;
        }

        /* Secciones que eran oscuras (texto blanco): ahora claras → texto oscuro legible.
           El hero NO se toca: su diseño nuevo ya es claro y el mockup lleva sus propios colores. */
        .cta-final, .cta-final h2, .cta-final h3, .cta-final p, .cta-final li,
        .specialties--dark, .specialties--dark h2, .specialties--dark h3, .specialties--dark p, .specialties--dark li {
            color: var(--color-text) !important;
        }

        /* Titular del hero en azul de marca (no negro). */
        .hero__title {
            color: var(--color-primary) !important;
        }

        /* Botones blancos (pensados para fondo oscuro) → azules sobre el fondo claro. */
        /* Degradado de marca (el del header) en los CTA principales: header + hero (+ cta / especialidades). */
        .header .btn.btnPrimary,
        .hero .btn.btn--white,
        .cta-final .btn.btn--white,
        .specialties--dark .btn.btn--white {
            background: linear-gradient(135deg, #00556d 0%, #36848b 70%, #00556d 100%) !important;
            background-size: 200% 200% !important;
            background-position: 0% 0% !important;
            color: #fff !important;
            border: 0 !important;
            box-shadow: 0 14px 32px rgba(0, 85, 109, 0.18) !important;
            transition: background-position .25s ease, box-shadow .25s ease, transform .2s ease !important;
        }

        .header .btn.btnPrimary:hover,
        .hero .btn.btn--white:hover,
        .cta-final .btn.btn--white:hover,
        .specialties--dark .btn.btn--white:hover {
            background-position: 25% 25% !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 18px rgba(0, 85, 109, 0.32) !important;
        }

        .hero .btn--white-outline, .cta-final .btn--white-outline, .specialties--dark .btn--white-outline {
            background: transparent !important;
            color: var(--color-primary) !important;
            border-color: var(--color-primary) !important;
        }

        /* === Mini-títulos de sección: fuera la pill, estilo del badge del hero (texto + 2 líneas fade) === */
        .clinic-flow__badge,
        .ia-block__badge,
        .capabilities__badge,
        .cta-final__badge {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            width: fit-content !important;
            margin-left: auto !important;
            margin-right: auto !important;
            background: transparent !important;
            border: 0 !important;
            padding: 0 !important;
            border-radius: 0 !important;
            color: var(--color-primary) !important;
        }

        .clinic-flow__badge::before, .clinic-flow__badge::after,
        .ia-block__badge::before, .ia-block__badge::after,
        .capabilities__badge::before, .capabilities__badge::after,
        .cta-final__badge::before, .cta-final__badge::after {
            content: "";
            width: 74px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(0, 85, 109, 0), var(--color-primary));
            box-shadow: none;
        }

        .clinic-flow__badge::after,
        .ia-block__badge::after,
        .capabilities__badge::after,
        .cta-final__badge::after {
            background: linear-gradient(90deg, var(--color-primary), rgba(0, 85, 109, 0));
        }

        /* En la sección azul (Acceso limitado) las líneas fade van en blanco. */
        .cta-final.cta-final .cta-final__badge::before {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
        }

        .cta-final.cta-final .cta-final__badge::after {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
        }

        /* === Órbita "¿Qué es EviMedic?": Paciente redondo, cards ORBITANDO alrededor
           y ripples (ondas) que se expanden con fade hacia fuera. === */
        /* Orbe central: círculo AZUL marca sólido, solo icono de usuario + "Paciente"
           en blanco — sin círculos interiores ni bordes. */
        .clinic-orbit__center {
            width: 156px;
            height: 156px;
            border-radius: 50%;
            gap: 4px;
            background: var(--color-primary, #00556d);
            border: 0;
            /* Luz cenital sutil (detalle invisible que da materialidad) + sombra tintada marca. */
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.16),
                0 20px 48px rgba(0, 61, 79, 0.28);
        }

        .clinic-orbit__avatar {
            width: auto;
            height: auto;
            background: transparent !important;
            border: 0;
            color: #fff !important;
        }

        .clinic-orbit__center strong {
            color: #fff;
        }

        /* Mockup de citas (agenda): un pelín más grande — cada media hora pasa
           de 16px a 20px de alto, el grid completo gana ~64px. */
        .agendaMock {
            --rowH: 20px !important;
        }

        /* Mockup Pacientes: sin altura mínima heredada (sobraba hueco vacío por debajo);
           al encoger, el align-items:center del panel lo deja centrado en vertical. */
        [data-feature-panel="pacientes"] .software-mock {
            min-height: 0 !important;
        }

        /* Topbar de mockups calcado a la barra del software real (pacientes, tratamientos
           y análisis): banda teal A SANGRE COMPLETA pegada arriba del mock (sin bubble),
           esquinas redondeadas solo arriba y título blanco en negrita. */
        [data-feature-panel="pacientes"] .software-topbar,
        [data-feature-panel="tratamientos"] .software-topbar,
        [data-feature-panel="analisis"] .software-topbar {
            background: var(--color-secondary, #36848b) !important;
            border: 0 !important;
            margin: -18px -18px 16px !important;
            padding: 16px 20px !important;
            border-radius: 27px 27px 0 0 !important;
            box-shadow: none !important;
        }

        [data-feature-panel="pacientes"] .software-topbar span,
        [data-feature-panel="tratamientos"] .software-topbar span,
        [data-feature-panel="analisis"] .software-topbar span {
            color: #fff !important;
            font-weight: 800 !important;
            font-size: 15px !important;
        }

        [data-feature-panel="analisis"] .software-topbar strong {
            color: #fff !important;
        }

        [data-feature-panel="pacientes"] .software-topbar em,
        [data-feature-panel="tratamientos"] .software-topbar em,
        [data-feature-panel="analisis"] .software-topbar em {
            background: transparent !important;
            padding: 0 !important;
            border-radius: 0 !important;
            color: rgba(255, 255, 255, 0.72) !important;
        }

        /* === Paneles de funcionalidades (todas las pestañas): fuera el padding gordo
           de la card (54px) — era el hueco sobre el "04" y lo que hacía que la lista
           de Tratamientos se saliera por abajo. === */
        .capability-panel {
            padding: 14px 30px !important;
        }

        /* Fuera la línea discontinua decorativa que enmarcaba los paneles
           (quedaba cruzando el contenido con el padding nuevo). */
        .capabilities-panels::before {
            display: none !important;
        }

        /* Números de panel (01-07): SIN pill (número plano y discreto) y anclados
           a la esquina superior izquierda de la card, sin mezclarse con el título. */
        .capability-panel__number {
            position: absolute !important;
            top: 18px;
            left: 26px;
            margin: 0 !important;
            min-width: 0 !important;
            height: auto !important;
            padding: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            color: rgba(0, 85, 109, 0.42);
            font-size: 16px;
        }

        /* El contenido despeja la zona del número (también en los paneles altos). */
        .capability-panel__copy {
            padding-top: 26px;
        }

        /* === Historia clínica: filas un poco más altas (ocupa un pelín más). === */
        [data-feature-panel="historia"] .historyMockRow {
            padding-top: 14px !important;
            padding-bottom: 14px !important;
        }

        /* === Facturación: fuera el marco blanco exterior (la tabla va directa),
           filas más altas y columnas reequilibradas (Fecha estrecha; Pendiente
           y Estado con aire, que se comían arriba). === */
        [data-feature-panel="facturacion"] .tabPanelVisual {
            padding: 0 !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        [data-feature-panel="facturacion"] .invoiceMock {
            --invoiceCols: 30px 0.65fr 1.25fr 1.05fr 0.8fr 1fr 1.35fr;
        }

        [data-feature-panel="facturacion"] .invoiceMockHead,
        [data-feature-panel="facturacion"] .invoiceMockRow {
            padding-top: 14px !important;
            padding-bottom: 14px !important;
        }

        /* === Tratamientos: tabla recreada del software real (código, tratamiento con
           categoría e icono de color, paciente anonimizado, sesiones, precio y
           pendiente coloreado según estado). === */
        [data-feature-panel="tratamientos"] .software-mock {
            min-height: 0 !important;
        }

        .txMock {
            width: 100%;
            background: #fff;
            border: 1px solid rgba(212, 224, 225, 0.96);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 12px 26px rgba(0, 61, 79, 0.05);
        }

        .txMockHead,
        .txMockRow {
            display: grid;
            grid-template-columns: 42px 1.7fr 0.65fr 0.95fr 0.6fr 0.7fr;
            gap: 10px;
            align-items: center;
            padding: 11px 14px;
        }

        .txMockHead {
            background: #fafbfc;
            border-bottom: 1px solid rgba(212, 224, 225, 0.9);
            font-size: .63rem;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--color-text-secondary);
        }

        .txMockRow {
            border-bottom: 1px solid rgba(212, 224, 225, 0.65);
            font-size: .73rem;
        }

        .txMockRow:last-child {
            border-bottom: 0;
        }

        .txMockId {
            color: var(--color-text-secondary);
            font-variant-numeric: tabular-nums;
        }

        .txMockTx small {
            display: block;
            font-size: .62rem;
            color: var(--color-text-muted);
        }

        .txMockTx strong {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--color-primary);
            font-family: var(--font-heading);
            font-size: .74rem;
            line-height: 1.25;
        }

        .txDot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex: 0 0 8px;
        }

        .txDotBlue {
            background: #4a78ad;
        }

        .txDotAmber {
            background: #cf8a4d;
        }

        .txDotGreen {
            background: #55a077;
        }

        .txDotPurple {
            background: #8a6fb1;
        }

        .txMockPat {
            color: var(--color-text-muted);
        }

        .txMockUse {
            display: inline-block;
            padding: 4px 9px;
            border: 1px solid rgba(212, 224, 225, 0.96);
            border-radius: 999px;
            background: #fff;
            font-size: .63rem;
            font-weight: 700;
            color: var(--color-text-secondary);
            white-space: nowrap;
        }

        .txNum {
            text-align: right;
            font-variant-numeric: tabular-nums;
            color: var(--color-text-secondary);
        }

        .txPendRed {
            color: #c4536a;
            font-weight: 700;
        }

        .txPendGreen {
            color: #2a9d8f;
            font-weight: 700;
        }

        /* Título del onboarding: mismo tamaño que la cabecera de funcionalidades. */
        .onboarding-carousel__header .section-title {
            font-size: clamp(40px, 5vw, 64px) !important;
            line-height: 1.1 !important;
        }

        /* === Onboarding v2: sin línea ni preview lateral.
           - 5 puntos VACÍOS que se van RELLENANDO conforme bajas (acumulativo).
           - Junto a cada card, una card GEMELA del mismo tamaño y altura, oculta,
             que aparece al llegar su paso, con su animación propia. === */
        .onboarding-carousel--vertical {
            grid-template-columns: auto 1fr;
            column-gap: 26px;
        }

        /* Subtítulo bajo el título del onboarding. */
        .onboarding-carousel__subtitle {
            max-width: 680px;
            margin: 14px auto 0;
            text-align: center;
        }

        /* Frase de cierre con efecto de escritura (typewriter real). */
        .onboarding-closer {
            max-width: 760px;
            margin: 40px auto 0;
            text-align: center;
            font-family: var(--font-heading);
            font-size: clamp(18px, 2.2vw, 24px);
            font-weight: 700;
            line-height: 1.35;
            color: var(--color-primary);
            min-height: 1.35em;
        }
        .onboarding-closer.is-typing::after {
            content: "";
            display: inline-block;
            width: 2px;
            height: 1em;
            margin-left: 3px;
            background: var(--color-secondary);
            vertical-align: text-bottom;
            animation: onbCloserCaret 850ms step-end infinite;
        }
        @keyframes onbCloserCaret {
            50% { opacity: 0; }
        }

        /* Controles antiguos del carrusel (flechas + 5 dots de abajo): fuera —
           la navegación es el raíl sticky y el scroll. */
        .onboarding-carousel--vertical .onboarding-carousel__controls {
            display: none;
        }

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

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

        .onboarding-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 26px;
            align-items: stretch;
        }

        .onboarding-carousel--vertical .onboarding-slide {
            min-height: 205px;
            padding: 38px 40px;
        }

        .onboarding-carousel--vertical .onboarding-slide__number {
            font-size: 46px;
        }

        .onboarding-carousel--vertical .onboarding-slide h3 {
            font-size: 26px;
        }

        .onboarding-carousel--vertical .onboarding-slide p {
            font-size: 15px;
        }

        /* La sección tenía overflow:hidden, que ROMPE position:sticky (el raíl quedaba
           congelado). overflow:clip recorta igual pero NO crea contenedor de scroll,
           así que el sticky vuelve a funcionar. */
        .onboarding--carousel {
            overflow: clip !important;
        }

        /* Los puntos de las cards desaparecen: la guía vive en el raíl sticky. */
        .onboarding-carousel--vertical .onboarding-slide::before {
            display: none;
        }

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

        /* Raíl de 5 puntos: FIJO en pantalla durante el recorrido de la sección
           (sticky con límites en el div) y clicable para navegar entre pasos. */
        .onboarding-railNav {
            position: sticky;
            top: 40vh;
            align-self: start;
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 4px;
        }

        .onboarding-railNav button {
            width: 16px;
            height: 16px;
            padding: 0;
            border-radius: 50%;
            background: #fff;
            border: 3px solid rgba(0, 85, 109, 0.28);
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
            transition:
                background 240ms cubic-bezier(0.23, 1, 0.32, 1),
                border-color 240ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
        }

        .onboarding-railNav button:hover {
            transform: scale(1.2);
            border-color: var(--color-primary);
        }

        /* Relleno acumulativo de los puntos según el paso activo. */
        .onboarding-carousel--vertical[data-active-slide="0"] .onboarding-railNav button:nth-child(-n+1),
        .onboarding-carousel--vertical[data-active-slide="1"] .onboarding-railNav button:nth-child(-n+2),
        .onboarding-carousel--vertical[data-active-slide="2"] .onboarding-railNav button:nth-child(-n+3),
        .onboarding-carousel--vertical[data-active-slide="3"] .onboarding-railNav button:nth-child(-n+4),
        .onboarding-carousel--vertical[data-active-slide="4"] .onboarding-railNav button:nth-child(-n+5) {
            background: var(--color-primary);
            border-color: var(--color-primary);
        }

        /* Card gemela: mismo lienzo que la card del paso, oculta hasta su paso. */
        .onboarding-twin {
            display: grid;
            place-items: center;
            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);
            /* Iconos en el color del logo de EviMedic. */
            color: var(--color-primary, #00556d);
            opacity: 0;
            transform: translateY(14px) scale(0.985);
            transition:
                opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
            pointer-events: none;
        }

        .onboarding-carousel--vertical[data-active-slide="0"] .onboarding-row:nth-child(-n+1) .onboarding-twin,
        .onboarding-carousel--vertical[data-active-slide="1"] .onboarding-row:nth-child(-n+2) .onboarding-twin,
        .onboarding-carousel--vertical[data-active-slide="2"] .onboarding-row:nth-child(-n+3) .onboarding-twin,
        .onboarding-carousel--vertical[data-active-slide="3"] .onboarding-row:nth-child(-n+4) .onboarding-twin,
        .onboarding-carousel--vertical[data-active-slide="4"] .onboarding-row:nth-child(-n+5) .onboarding-twin,
        .onboarding-twin.is-shown {
            opacity: 1;
            transform: none;
        }

        /* Escenario común de los iconos animados. */
        .tw {
            position: relative;
            width: 180px;
            height: 122px;
            display: grid;
            place-items: center;
        }

        .tw>svg {
            width: 62px;
            height: 62px;
        }

        /* 1 — Solicitas acceso: mail volando a la izquierda + maqueta de login a la derecha. */
        .twMail {
            width: auto;
            height: auto;
            grid-template-columns: auto auto;
            gap: 26px;
            align-items: center;
        }

        .twMail__fly {
            position: relative;
            width: 88px;
            height: 84px;
            display: grid;
            place-items: center;
        }

        .twMail__env {
            width: 54px;
            height: 54px;
            transform: rotate(-6deg);
            animation: twMailFly 2.8s cubic-bezier(0.45, 0, 0.4, 1) infinite;
        }

        @keyframes twMailFly {
            0%, 100% {
                translate: -7px 4px;
            }

            50% {
                translate: 9px -6px;
            }
        }

        .twMail__line {
            position: absolute;
            left: 4px;
            width: 16px;
            height: 2.5px;
            border-radius: 999px;
            background: rgba(54, 132, 139, 0.45);
            animation: twMailLine 2.8s ease-in-out infinite;
        }

        .twMail__line:nth-child(1) {
            top: 32px;
            animation-delay: 0s;
        }

        .twMail__line:nth-child(2) {
            top: 42px;
            left: -2px;
            animation-delay: .18s;
        }

        .twMail__line:nth-child(3) {
            top: 52px;
            animation-delay: .36s;
        }

        @keyframes twMailLine {
            0%, 100% {
                opacity: 0;
                translate: -8px 0;
            }

            50% {
                opacity: 1;
                translate: 6px 0;
            }
        }

        /* Login de mentira: estructura mínima sin texto legible. */
        .twLogin {
            width: 94px;
            padding: 12px 12px 11px;
            border-radius: 12px;
            background: #fff;
            border: 1.5px solid rgba(0, 85, 109, 0.16);
            box-shadow: 0 10px 22px rgba(0, 61, 79, 0.07);
            display: grid;
            gap: 7px;
            justify-items: center;
        }

        .twLogin__avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(0, 85, 109, 0.16);
        }

        .twLogin__field {
            width: 100%;
            height: 9px;
            border-radius: 5px;
            background: rgba(0, 85, 109, 0.08);
            border: 1px solid rgba(0, 85, 109, 0.14);
        }

        .twLogin__btn {
            width: 100%;
            height: 11px;
            border-radius: 6px;
            background: var(--color-primary);
            opacity: .88;
        }

        /* 2 — Analizar clínica: edificio con escaneo a la izquierda + consola ilegible
           loopeando de abajo arriba a la derecha. */
        .twClinic {
            width: auto;
            height: auto;
            grid-template-columns: auto auto;
            gap: 24px;
            align-items: center;
        }

        .twClinic__icon {
            position: relative;
            width: 72px;
            height: 84px;
            display: grid;
            place-items: center;
            overflow: hidden;
        }

        .twClinic__icon svg {
            width: 60px;
            height: 60px;
        }

        .twClinic__scan {
            position: absolute;
            left: 6%;
            right: 6%;
            top: 10px;
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
            box-shadow: 0 0 10px rgba(54, 132, 139, 0.35);
            animation: twScan 2.4s ease-in-out infinite;
        }

        @keyframes twScan {
            0%, 100% {
                translate: 0 0;
                opacity: .35;
            }

            50% {
                translate: 0 60px;
                opacity: 1;
            }
        }

        .twConsole {
            width: 98px;
            height: 86px;
            padding: 10px 12px;
            border-radius: 12px;
            background: #0d2f3a;
            border: 1px solid rgba(0, 85, 109, 0.3);
            box-shadow: 0 10px 22px rgba(0, 61, 79, 0.14);
            overflow: hidden;
            -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
        }

        .twConsole__scroll {
            display: grid;
            gap: 7px;
            animation: twConsoleUp 7s linear infinite;
        }

        .twConsole__scroll i {
            display: block;
            height: 3px;
            border-radius: 999px;
            width: var(--w, 60%);
            background: rgba(143, 211, 205, 0.6);
        }

        @keyframes twConsoleUp {
            to {
                translate: 0 -50%;
            }
        }

        /* 3 — Migración: casita — línea RECTA con pulso — logo EviMedic (más grande). */
        .twMigra {
            width: auto;
            height: auto;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .twMigra__house {
            width: 46px;
            height: 46px;
            flex: 0 0 auto;
        }

        .twMigra__logo {
            width: 58px;
            height: 58px;
            object-fit: contain;
            border-radius: 12px;
            flex: 0 0 auto;
        }

        .twMigra__wire {
            position: relative;
            width: 84px;
            height: 3px;
            border-radius: 999px;
            background: rgba(0, 85, 109, 0.16);
            overflow: hidden;
            flex: 0 0 auto;
        }

        .twMigra__wire i {
            position: absolute;
            top: 0;
            left: 0;
            width: 34px;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
            animation: twPulse 1.7s ease-in-out infinite;
        }

        @keyframes twPulse {
            0% {
                transform: translateX(-36px);
            }

            100% {
                transform: translateX(86px);
            }
        }

        /* 4 — Formar al equipo: formador señalando una pizarra que se va escribiendo. */
        .twTeach {
            width: 200px;
        }

        .twTeach__person {
            position: absolute;
            left: 26px;
            bottom: 18px;
            width: 52px;
            height: 52px;
        }

        .twTeach__board {
            position: absolute;
            right: 22px;
            top: 24px;
            width: 86px;
            height: 60px;
            padding: 4px 0 8px;
            border-radius: 10px;
            background: #fff;
            border: 1.5px solid rgba(0, 85, 109, 0.22);
            box-shadow: 0 8px 18px rgba(0, 61, 79, 0.07);
        }

        .twTeach__board i {
            display: block;
            margin: 8px 10px 0;
            height: 4px;
            border-radius: 999px;
            background: rgba(0, 85, 109, 0.3);
            transform: scaleX(0);
            transform-origin: left center;
            animation: twWrite 3.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
        }

        .twTeach__board i:nth-child(2) {
            margin-right: 26px;
            animation-delay: .35s;
        }

        .twTeach__board i:nth-child(3) {
            margin-right: 40px;
            animation-delay: .7s;
        }

        @keyframes twWrite {
            0% {
                transform: scaleX(0);
                opacity: 1;
            }

            38% {
                transform: scaleX(1);
                opacity: 1;
            }

            78% {
                transform: scaleX(1);
                opacity: 1;
            }

            90% {
                transform: scaleX(1);
                opacity: 0;
            }

            100% {
                transform: scaleX(0);
                opacity: 0;
            }
        }

        /* 5 — Usuario contento con rayitas brillando encima. */
        .twHappy__ray {
            position: absolute;
            top: 16px;
            left: 50%;
            width: 3px;
            height: 13px;
            border-radius: 999px;
            background: var(--color-secondary);
            transform-origin: center bottom;
            animation: twRay 1.9s ease-in-out infinite;
        }

        .twHappy__ray--1 {
            translate: -26px 4px;
            rotate: -32deg;
            animation-delay: 0s;
        }

        .twHappy__ray--2 {
            translate: -1.5px -4px;
            animation-delay: .22s;
        }

        .twHappy__ray--3 {
            translate: 23px 4px;
            rotate: 32deg;
            animation-delay: .44s;
        }

        @keyframes twRay {
            0%, 100% {
                opacity: .2;
                scale: .65;
            }

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

        /* Accesibilidad y móvil. */
        @media (prefers-reduced-motion: reduce) {
            .onboarding-twin {
                opacity: 1;
                transform: none;
            }

            .tw *, .tw>svg {
                animation: none !important;
            }
        }

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

            .onboarding-twin {
                display: none;
            }

            .onboarding-railNav {
                display: none;
            }

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

        /* TABLET (769-1080): recupera las 2 columnas y el gráfico a la derecha (el reveal
           por paso y el estilo de card lo aporta el bloque @media (min-width:769px)). */
        @media (min-width: 769px) and (max-width: 1080px) {
            .onboarding-row {
                grid-template-columns: 1fr 1fr !important;
            }
            .onboarding-twin {
                display: grid !important;
            }
        }

        /* === Zona paciente: portal recreado del software real — hero teal de bienvenida,
           4 KPIs solapados, citas pendientes y últimos tratamientos con progreso. === */
        [data-feature-panel="zona"] .software-mock {
            min-height: 0 !important;
        }

        .pzHero {
            margin: -18px -18px 0;
            padding: 18px 20px 40px;
            border-radius: 27px 27px 0 0;
            background:
                radial-gradient(120% 170% at 85% 0%, rgba(94, 191, 184, 0.4) 0%, rgba(94, 191, 184, 0) 48%),
                linear-gradient(115deg, #0b3a45 0%, #155e66 55%, #2e7d85 100%);
        }

        /* "Bienvenido al" sin pill: texto plano blanco sobre el hero. */
        .pzHero__badge {
            display: inline-block;
            margin-bottom: 9px;
            padding: 0;
            border-radius: 0;
            background: transparent;
            border: 0;
            color: rgba(255, 255, 255, 0.85);
            font-size: 10.5px;
            font-weight: 700;
        }

        .pzHero strong {
            display: block;
            color: #fff;
            font-family: var(--font-heading);
            font-size: 21px;
            letter-spacing: -0.01em;
        }

        /* KPIs solapando el borde inferior del hero, como en el portal real. */
        .pzKpis {
            position: relative;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 9px;
            margin: -24px 0 12px;
        }

        .pzKpi {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: 10px 11px;
            background: #fff;
            border: 1px solid rgba(212, 224, 225, 0.9);
            border-radius: 12px;
            box-shadow: 0 10px 22px rgba(0, 61, 79, 0.08);
        }

        .pzKpi strong {
            margin-top: 2px;
            font-family: var(--font-heading);
            font-size: 17px;
            line-height: 1;
            color: var(--color-primary);
        }

        .pzKpi span {
            font-size: 9.5px;
            line-height: 1.25;
            color: var(--color-text-secondary);
        }

        .pzChip {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 7px;
            font-style: normal;
            flex: 0 0 24px;
        }

        .pzChipBlue {
            background: rgba(74, 120, 173, 0.14);
            color: #4a78ad;
        }

        .pzChipGreen {
            background: rgba(85, 160, 119, 0.14);
            color: #55a077;
        }

        .pzChipPurple {
            background: rgba(138, 111, 177, 0.14);
            color: #8a6fb1;
        }

        .pzChipTan {
            background: rgba(207, 138, 77, 0.16);
            color: #cf8a4d;
        }

        .pzPanel {
            padding: 11px 13px;
            background: #fff;
            border: 1px solid rgba(212, 224, 225, 0.9);
            border-radius: 12px;
            box-shadow: 0 10px 22px rgba(0, 61, 79, 0.05);
        }

        .pzPanel+.pzPanel {
            margin-top: 10px;
        }

        .pzPanel__head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 9px;
        }

        .pzPanel__head strong {
            font-family: var(--font-heading);
            font-size: 12.5px;
            color: var(--color-primary);
        }

        .pzPanel__head span {
            font-size: 10px;
            font-weight: 700;
            color: var(--color-secondary);
        }

        .pzRow {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 10px;
            align-items: center;
        }

        .pzRow+.pzRow {
            margin-top: 9px;
            padding-top: 9px;
            border-top: 1px solid rgba(212, 224, 225, 0.6);
        }

        .pzRow__txt strong {
            display: block;
            font-family: var(--font-heading);
            font-size: 11.5px;
            color: var(--color-text);
        }

        .pzRow__txt span {
            display: block;
            font-size: 10px;
            color: var(--color-text-secondary);
        }

        .pzTag {
            font-style: normal;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: #c4536a;
            white-space: nowrap;
        }

        .pzSes {
            font-style: normal;
            font-size: 9.5px;
            color: var(--color-text-secondary);
            white-space: nowrap;
            align-self: end;
        }

        .pzBar {
            display: block;
            position: relative;
            margin-top: 6px;
            height: 5px;
            border-radius: 999px;
            background: rgba(212, 224, 225, 0.7);
            overflow: hidden;
        }

        .pzBar::before {
            content: "";
            position: absolute;
            inset: 0;
            width: 50%;
            border-radius: inherit;
            background: var(--color-secondary);
        }

        .pzBarFull::before {
            width: 100%;
            background: #55a077;
        }

        /* === Análisis y control: mockup nuevo (KPIs + ingresos por semana +
           rentabilidad por tratamiento), lenguaje visual del resto de mocks. === */
        [data-feature-panel="analisis"] .software-mock {
            min-height: 0 !important;
        }

        /* Neutralizar el estilo de card heredado en los wrappers directos. */
        .dashboard-mock--v2>div {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
            min-height: 0 !important;
        }

        .dashboard-mock--v2 {
            display: block !important;
        }

        .dashboard-mock--v2 .dash-kpis {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 12px;
        }

        .dashboard-mock--v2 .dash-kpi {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 14px 16px;
            background: #fff;
            border: 1px solid rgba(212, 224, 225, 0.86);
            border-radius: 16px;
            box-shadow: 0 12px 26px rgba(0, 61, 79, 0.05);
        }

        .dashboard-mock--v2 .dash-kpi span {
            font-size: 11.5px;
            color: var(--color-text-secondary);
        }

        .dashboard-mock--v2 .dash-kpi strong {
            font-family: var(--font-heading);
            font-size: 22px;
            color: var(--color-primary);
        }

        .dashboard-mock--v2 .dash-kpi em {
            font-style: normal;
            font-size: 10.5px;
            font-weight: 700;
            width: fit-content;
            padding: 3px 8px;
            border-radius: 999px;
        }

        .dashboard-mock--v2 .dash-kpi em.up {
            background: rgba(42, 157, 143, 0.14);
            color: #1f7a6d;
        }

        .dashboard-mock--v2 .dash-kpi em.down {
            background: rgba(54, 132, 139, 0.1);
            color: var(--color-secondary);
        }

        .dashboard-mock--v2 .dash-grid2 {
            display: grid !important;
            grid-template-columns: 1.1fr 1fr;
            gap: 12px;
        }

        .dashboard-mock--v2 .dash-card {
            padding: 14px 16px !important;
            background: #fff !important;
            border: 1px solid rgba(212, 224, 225, 0.86) !important;
            border-radius: 16px !important;
            box-shadow: 0 12px 26px rgba(0, 61, 79, 0.05) !important;
        }

        .dashboard-mock--v2 .dash-card__head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .dashboard-mock--v2 .dash-card__head strong {
            font-family: var(--font-heading);
            font-size: 13px;
            color: var(--color-primary);
        }

        .dashboard-mock--v2 .dash-card__head span {
            font-size: 11px;
            color: var(--color-text-muted);
        }

        .dashboard-mock--v2 .dash-bars {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            align-items: end;
            height: 116px;
        }

        .dashboard-mock--v2 .dash-bar {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            gap: 6px;
            height: 100%;
        }

        .dashboard-mock--v2 .dash-bar i {
            display: block;
            width: 100%;
            height: var(--h, 50%);
            border-radius: 8px 8px 4px 4px;
            background: rgba(54, 132, 139, 0.28);
        }

        .dashboard-mock--v2 .dash-bar.is-top i {
            background: linear-gradient(180deg, var(--color-secondary), var(--color-primary));
        }

        .dashboard-mock--v2 .dash-bar span {
            font-size: 10.5px;
            color: var(--color-text-muted);
        }

        .dashboard-mock--v2 .dash-rows {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .dashboard-mock--v2 .dash-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 5px 10px;
            align-items: center;
        }

        .dashboard-mock--v2 .dash-row span {
            font-size: 12px;
            color: var(--color-text-secondary);
        }

        .dashboard-mock--v2 .dash-row em {
            font-style: normal;
            font-size: 12px;
            font-weight: 800;
            color: var(--color-primary);
            font-variant-numeric: tabular-nums;
        }

        .dashboard-mock--v2 .dash-row i {
            grid-column: 1 / -1;
            display: block;
            height: 6px;
            width: var(--w, 50%);
            border-radius: 999px;
            background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
        }

        /* === Mockup Pacientes reestructurado:
           Últimas visitas / Documentos a la izquierda, Marta Ruiz a la derecha (2 filas),
           y debajo Consentimientos y Tratamientos a todo el ancho. === */
        .patient-mock {
            grid-template-columns: 1.45fr 1fr !important;
            grid-template-areas:
                "visitas marta"
                "documentos marta"
                "consentimientos consentimientos"
                "tratamientos tratamientos" !important;
            gap: 12px !important;
        }

        .patient-mock main {
            display: contents !important;
        }

        .patient-mock aside {
            grid-area: marta;
            min-height: 0 !important;
            padding: 14px 16px !important;
            gap: 8px !important;
        }

        /* Compactas para que las 4 filas quepan dentro del panel (640px) sin desbordar. */
        .patient-mock main>div {
            min-height: 0 !important;
            padding: 13px 16px !important;
        }

        .patient-mock p {
            margin: 2px 0 0 !important;
        }

        .patient-mock .patient-avatar {
            width: 44px !important;
            height: 44px !important;
        }

        .patient-mock main>div:nth-child(1) {
            grid-area: visitas;
        }

        .patient-mock main>div:nth-child(2) {
            grid-area: documentos;
        }

        .patient-mock main>div:nth-child(3) {
            grid-area: consentimientos;
        }

        .patient-mock main>div:nth-child(4) {
            grid-area: tratamientos;
        }

        /* === Menú de funcionalidades estilo home original (tabsNav + indicador deslizante):
           con 7 pestañas la barra necesita más ancho y botones más compactos. === */
        .capabilities-system .tabsNav {
            max-width: 1100px;
        }

        .capabilities-system .tabsBtn {
            padding: 10px 12px;
            font-size: .88rem;
        }
        /* Nombre de la funcionalidad DENTRO del panel: oculto por defecto (en desktop
           la toolbar ya muestra el texto); visible en tablet/móvil (toolbar = iconos),
           centrado arriba del todo de la card. */
        .capPanelTab {
            display: none;
        }

        /* Tablet (≤1180): 7 pestañas no caben en texto y se solapan → mostrar SOLO
           los iconos (como en móvil). Scopeado a capabilities-system para no tocar
           otros .tabsNav del proyecto. */
        @media (max-width: 1180px) {
            .capabilities-system .tabsNav {
                gap: 4px;
            }
            /* Título de la funcionalidad CENTRADO arriba del panel (la toolbar es solo
               iconos). Absolute para que centre SIEMPRE igual, sin depender del grid
               de cada panel (con grid-column el auto-placement lo descentraba a veces). */
            .capability-panel {
                padding-top: 52px;
            }
            .capability-panel .capPanelTab {
                display: block;
                position: absolute;
                top: 19px;
                left: 52px;          /* justo a la derecha del número (left:26, ~18px ancho) */
                right: auto;
                text-align: left;
                font-family: var(--font-heading);
                font-weight: 800;
                font-size: 14px;
                letter-spacing: .04em;
                text-transform: uppercase;
                color: var(--color-secondary);
                pointer-events: none;
            }
            .capabilities-system .tabsBtn {
                display: grid;
                place-items: center;
                padding: 11px 8px;
            }
            .capabilities-system .tabsBtn .tabsLabel {
                display: none;
            }
            .capabilities-system .tabsBtn .tabsIcon {
                display: block;
                width: 20px;
                height: 20px;
            }
        }

        /* Sección "¿Qué es EviMedic?": contenido más pegado al mini-título de arriba. */
        .clinic-flow__badge {
            margin-bottom: 4px !important;
        }

        .clinic-flow__layout {
            margin-top: -28px;
        }

        /* === Móvil/tablet: títulos centrados y SIN el margen negativo de desktop
           (subía el título de "¿Qué es EviMedic?" hasta solaparse con el badge). === */
        @media (max-width: 1024px) {
            .clinic-flow__layout {
                margin-top: 0;
            }

            .section-title,
            .sectionTitle,
            .section-subtitle,
            .sectionLead {
                text-align: center !important;
            }
            /* Botón "Ver funcionalidades" de la sección "El software que se adapta
               a tu clínica" (clinic-flow): centrado en móvil/tablet, sea cual sea
               el tipo de contenedor (flex column → align-self; bloque → margin auto). */
            .clinic-flow__cta {
                display: flex !important;
                width: fit-content !important;
                align-self: center !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            /* Párrafos de "El software que se adapta a tu clínica" centrados y el
               bloque de copy con ancho limitado + centrado (no se expande infinito). */
            .clinic-flow__copy {
                max-width: 620px !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            .clinic-flow__copy p {
                text-align: center !important;
            }
        }

        /* Móviles estrechos: rayas de los mini-títulos más cortas para que
           texto + líneas quepan sin pisarse. */
        @media (max-width: 540px) {

            .clinic-flow__badge::before, .clinic-flow__badge::after,
            .ia-block__badge::before, .ia-block__badge::after,
            .capabilities__badge::before, .capabilities__badge::after,
            .cta-final__badge::before, .cta-final__badge::after {
                width: 36px;
            }
        }

        /* Pills de la órbita: borde visible en tono marca + bisel superior blanco
           (edge de "placa de cristal") y sombra tintada al tono del fondo. */
        .clinic-orbit__node {
            border: 1.5px solid rgba(0, 85, 109, 0.22);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.85),
                0 12px 28px rgba(0, 61, 79, 0.07);
        }

        /* Ripples: ondas concéntricas que nacen del centro, se expanden y se desvanecen. */
        .clinic-orbit__ring {
            width: 420px;
            height: 420px;
            border-style: solid;
            opacity: 0;
            animation: clinicRipple 5.5s linear infinite;
        }

        .clinic-orbit__ring--inner {
            animation-delay: -2.75s;
        }

        @keyframes clinicRipple {
            0% {
                transform: translate(-50%, -50%) scale(0.42);
                opacity: 0;
            }

            22% {
                opacity: 0.85;
            }

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

        @media (min-width: 769px) {
            .clinic-orbit {
                min-height: 580px;
            }

            /* Formación en 5 NIVELES de altura equiespaciados (gap vertical constante de
               58px entre vecinas) + flotación suave individual. Las posiciones son fijas:
               la separación entre cards es SIEMPRE idéntica, sin morphing ni roces. */
            .clinic-orbit__node {
                width: 272px;
                min-width: 0;
                justify-content: center;
                left: calc(50% - 136px);
                top: calc(50% - 31px);
                right: auto;
                bottom: auto;
                animation: clinicFloat 5.6s ease-in-out infinite;
                will-change: translate;
            }

            /* Anillo tipo "estadio": pareja arriba + pareja abajo (sin pill en el eje
               central) y dos niveles por lado — simétrico, compacto y sin huecos raros. */
            .clinic-orbit__node--policies {
                transform: translate(245px, -65px);
                animation-delay: 0s;
            }

            .clinic-orbit__node--treatments {
                transform: translate(245px, 65px);
                animation-delay: -.7s;
            }

            .clinic-orbit__node--consents {
                transform: translate(145px, 190px);
                animation-delay: -1.4s;
            }

            .clinic-orbit__node--billing {
                transform: translate(-145px, 190px);
                animation-delay: -2.1s;
            }

            .clinic-orbit__node--compliance {
                transform: translate(-245px, 65px);
                animation-delay: -2.8s;
            }

            .clinic-orbit__node--stats {
                transform: translate(-245px, -65px);
                animation-delay: -3.5s;
            }

            .clinic-orbit__node--agenda {
                transform: translate(-145px, -190px);
                animation-delay: -4.2s;
            }

            .clinic-orbit__node--history {
                transform: translate(145px, -190px);
                animation-delay: -4.9s;
            }
        }

        /* Flotación: vaivén vertical de ±5px en onda alrededor del anillo.
           Anima `translate` (composición GPU, subpíxel) — NO margin (layout, da trompicones).
           `translate` se suma al transform de posición de cada card sin pisarlo. */
        @keyframes clinicFloat {
            0%, 100% {
                translate: 0 -5px;
            }

            50% {
                translate: 0 5px;
            }
        }

        /* Accesibilidad: sin animaciones → órbita estática en 8 puntos y anillos fijos. */
        @media (prefers-reduced-motion: reduce) {
            .clinic-orbit__ring {
                animation: none;
                opacity: 1;
            }
        }

        @media (min-width: 769px) and (prefers-reduced-motion: reduce) {
            .clinic-orbit__node {
                animation: none !important;
            }

            .clinic-orbit__node--policies {
                transform: translate(245px, -65px);
            }

            .clinic-orbit__node--history {
                transform: translate(145px, -190px);
            }

            .clinic-orbit__node--agenda {
                transform: translate(-145px, -190px);
            }

            .clinic-orbit__node--stats {
                transform: translate(-245px, -65px);
            }

            .clinic-orbit__node--compliance {
                transform: translate(-245px, 65px);
            }

            .clinic-orbit__node--billing {
                transform: translate(-145px, 190px);
            }

            .clinic-orbit__node--consents {
                transform: translate(145px, 190px);
            }

            .clinic-orbit__node--treatments {
                transform: translate(245px, 65px);
            }
        }

        /* ============================================================
           MÓVIL (≤768): "ÓRBITA DE BOLSILLO" — diseño propio.
           Orbe Paciente centrado con sus ondas detrás + tallo conector
           y los 8 ítems como NUBE DE CHIPS centrada: rotaciones alternas
           sutiles y flotación escalonada (la vida de la órbita, en vertical).
           ============================================================ */
        .clinic-orbit-fit {
            display: contents;
        }
        /* === Clinic-orbit en MÓVIL (≤768): el anillo orbital no entra bien en pantallas
           estrechas, así que se reorganiza en una REJILLA limpia de 2 columnas con el orbe
           Paciente centrado arriba y SEPARADO de las tarjetas. Cada función es una pastilla.
           (En escritorio/tablet ≥769 se mantiene el anillo estadio.) === */
        @media (max-width: 768px) {
            .clinic-orbit-fit {
                display: block !important;
                width: 100% !important;
                max-width: 440px !important;
                margin: 0 auto !important;
                aspect-ratio: auto !important;
            }
            .clinic-orbit-fit > .clinic-orbit {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 12px !important;
                width: 100% !important;
                height: auto !important;
                min-height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                position: relative !important;
                perspective: none !important;
                transform: none !important;
            }
            /* Anillos fuera: no aportan en rejilla. */
            .clinic-orbit .clinic-orbit__ring {
                display: none !important;
            }
            /* Orbe Paciente: círculo, centrado arriba y separado de las tarjetas. */
            .clinic-orbit .clinic-orbit__center {
                grid-column: 1 / -1 !important;
                position: static !important;
                transform: none !important;
                justify-self: center !important;
                width: 128px !important;
                height: 128px !important;
                margin: 2px auto 22px !important;
                padding: 0 !important;
            }
            .clinic-orbit .clinic-orbit__center::after {
                display: none !important;
            }
            .clinic-orbit .clinic-orbit__avatar {
                width: 52px !important;
                height: 52px !important;
            }
            /* Tarjetas-función: pastillas limpias (sin posiciones absolutas ni flotación). */
            .clinic-orbit .clinic-orbit__node {
                position: static !important;
                transform: none !important;
                animation: none !important;
                width: auto !important;
                min-width: 0 !important;
                justify-content: flex-start !important;
                gap: 10px !important;
                padding: 13px 14px !important;
                border-radius: 14px !important;
                white-space: normal !important;
                font-size: 13.5px !important;
                margin: 0 !important;
                left: auto !important;
                top: auto !important;
            }
            .clinic-orbit .clinic-orbit__icon {
                width: 30px !important;
                height: 30px !important;
                flex: 0 0 30px !important;
            }
        }
        @media (max-width: 768px) and (prefers-reduced-motion: reduce) {
            .clinic-orbit .clinic-orbit__node {
                animation: none !important;
            }
        }
        /* ≤444px: tarjetas-función más juntas (menos gap) e iconos un poco más
           pequeños, para que los textos largos (Historia clínica, Cumplimiento
           normativo…) entren mejor. */
        @media (max-width: 444px) {
            .clinic-orbit-fit > .clinic-orbit {
                gap: 8px !important;
            }
            .clinic-orbit .clinic-orbit__node {
                gap: 7px !important;
                padding: 12px 10px !important;
            }
            .clinic-orbit .clinic-orbit__icon {
                width: 26px !important;
                height: 26px !important;
                flex: 0 0 26px !important;
            }
            .clinic-orbit .clinic-orbit__icon svg {
                width: 17px !important;
                height: 17px !important;
            }
        }

        /* ============================================================
           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.
           Textos nuevos en .txtNew (rojo temporal).
           ============================================================ */
        .txtNew {
            color: #e02424 !important;
        }

        /* 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;
                /* Flex columna centrada + min-height FIJO: la altura no cambia al pasar de
                   una card a otra (cada ejemplo mide distinto) → la página deja de saltar
                   arriba/abajo. La tarjeta corta se centra en vez de dejar hueco. */
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                align-items: flex-start !important;
                min-height: 150px !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;
            }
            /* "Resuelve dudas sobre protocolos": sube solo un poco (menos que los demás). */
            .hyg3MobEx[data-cap="protocol"] {
                margin-top: 6px !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. */
            .hyg3MobEx[data-cap="summary"] .hyg3Mock__in,
            .hyg3MobEx[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. */
            .hyg3MobEx[data-cap="summary"] .hyg3Field {
                padding: 2px 0 !important;
            }
            .hyg3MobEx[data-cap="summary"] .hyg3Field span {
                font-size: 8px !important;
            }
            .hyg3MobEx[data-cap="summary"] .hyg3Field strong {
                font-size: 8.5px !important;
            }
            /* Crea citas por voz: la tarjeta solo tiene la pill → la centramos en vertical. */
            .hyg3MobEx[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;
            }
            /* FADE al cambiar de card (suave, no brusco): título, texto y ejemplo. El JS
               añade .is-swapping en .hyg3-fit durante el intercambio de contenido. */
            .hyg3MobTitle,
            .hyg3MobDesc,
            .hyg3MobEx {
                transition: opacity .18s ease !important;
            }
            .hyg3-fit.is-swapping .hyg3MobTitle,
            .hyg3-fit.is-swapping .hyg3MobDesc,
            .hyg3-fit.is-swapping .hyg3MobEx {
                opacity: 0 !important;
            }
        }

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

            .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;
        }

        /* === FAQ: apertura/cierre SUAVE de los <details> (Chrome moderno; en navegadores
           sin soporte abre instantáneo, como siempre). === */
        :root {
            interpolate-size: allow-keywords;
        }

        .faq__item::details-content {
            block-size: 0;
            overflow-y: clip;
            transition:
                block-size .45s cubic-bezier(.16, 1, .3, 1),
                content-visibility .45s allow-discrete;
        }

        .faq__item[open]::details-content {
            block-size: auto;
        }

        /* === Anclaje de scroll DESACTIVADO en toda la página: al crecer contenido
           (abrir una pregunta, "Ver más"), el navegador NO re-scrollea para mantener
           quieto el footer — lo de arriba queda estático y solo baja lo de debajo. === */
        html {
            overflow-anchor: none;
        }

        /* === FAQ: las preguntas 4-13 viven en un contenedor COLAPSADO que crece
           con animación de altura real (0fr→1fr): nada aparece "del tirón". === */
        .faq__rest {
            display: grid;
            grid-template-rows: 0fr;
            visibility: hidden;
            transition: grid-template-rows .7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .faq__rest-inner {
            min-height: 0;
            overflow: clip;
        }

        .faq__rest.is-open {
            grid-template-rows: 1fr;
            visibility: visible;
        }

        /* Cascada suave de los items mientras el contenedor crece. */
        .faq__rest .faq__item {
            opacity: 0;
            translate: 0 10px;
            transition:
                opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
                translate .5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .faq__rest.is-open .faq__item {
            opacity: 1;
            translate: 0 0;
        }

        .faq__rest.is-open .faq__item:nth-child(2) {
            transition-delay: .05s;
        }

        .faq__rest.is-open .faq__item:nth-child(3) {
            transition-delay: .1s;
        }

        .faq__rest.is-open .faq__item:nth-child(4) {
            transition-delay: .15s;
        }

        .faq__rest.is-open .faq__item:nth-child(5) {
            transition-delay: .2s;
        }

        .faq__rest.is-open .faq__item:nth-child(6) {
            transition-delay: .25s;
        }

        .faq__rest.is-open .faq__item:nth-child(7) {
            transition-delay: .3s;
        }

        .faq__rest.is-open .faq__item:nth-child(8) {
            transition-delay: .35s;
        }

        .faq__rest.is-open .faq__item:nth-child(9) {
            transition-delay: .4s;
        }

        .faq__rest.is-open .faq__item:nth-child(10) {
            transition-delay: .45s;
        }

        @media (prefers-reduced-motion: reduce) {
            .faq__rest {
                transition: none;
            }

            .faq__rest .faq__item {
                transition: none;
            }
        }

        .faq__more {
            display: flex;
            justify-content: center;
            margin-top: 28px;
        }

        .faq__list.is-expanded~.faq__more {
            display: none;
        }

        /* === Cards de Especialidades: los ticks van ARRIBA (pegados al párrafo intro),
           con separación uniforme entre ellos — no anclados al fondo de la card. === */
        .specNewCard p {
            flex: 0 0 auto !important;
        }

        .specNewCard .specialty-card__checks {
            margin: 0 !important;
            gap: 13px !important;
        }

        /* === Modo fondo azul (parallax full-bleed): excepción al "sin fondos".
           Aplica a toda .bgModoAzul (especialidades, Acceso limitado, footer). === */
        .bgModoAzul {
            background: url('assets/img/parallax.webp') center center / cover no-repeat fixed !important;
        }

        /* Móvil: el mockup de la card NO scrollea. Se ESCALA para caber (como imagen):
           el mock se ancla a 440px y se reduce con container-query (cqw); el JS
           (funcionalidades-fit) fija la altura del visual = alto del mock × escala. */
        @media (max-width: 768px) {
            .capability-panel__visual {
                overflow: hidden !important;
                padding: 0 !important;
                /* Sin min-height ni grid centrado: el mock va ABSOLUTO en la esquina y el JS
                   fija el alto del visual = alto del mock escalado → sin hueco blanco abajo
                   y sin descuadrar la horizontal. */
                min-height: 0 !important;
                display: block !important;
                position: relative !important;
                /* Transparente: la card es el propio mock; así no asoma fondo blanco del
                   panel a los lados del mock centrado. */
                background: transparent !important;
                border: 0 !important;
                box-shadow: none !important;
                container-type: inline-size;
            }
            .capability-panel__visual > * {
                position: absolute !important;
                top: 0 !important;
                left: 50% !important;
                margin-left: -220px !important;   /* centra la caja de 440px en el visual */
                min-width: 0 !important;
                width: 440px !important;
                /* min(1, …): NUNCA agranda. Anclado a 440px y centrado para no dejar hueco. */
                transform: scale(min(1, 100cqw / 440px)) !important;
                transform-origin: top center !important;
            }
        }

        /* === FUNCIONALIDADES ("Procesos 100% conectados") — solo móvil === */
        @media (max-width: 768px) {
            /* Nombres de vuelta en las pestañas + barra de NOMBRES scrolleable en horizontal
               (la card de abajo NO scrollea; su mock se escala para caber). */
            .capabilities-system .tabsNav {
                display: flex !important;
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                gap: 6px !important;
                scrollbar-width: none !important;
                scroll-snap-type: x proximity !important;
            }
            .capabilities-system .tabsNav::-webkit-scrollbar {
                display: none !important;
            }
            .capabilities-system .tabsBtn {
                display: inline-flex !important;
                align-items: center !important;
                gap: 7px !important;
                flex: 0 0 auto !important;          /* no encoger → fuerzan el scroll */
                padding: 9px 14px !important;
                white-space: nowrap !important;
                scroll-snap-align: start !important;
            }
            .capabilities-system .tabsBtn .tabsLabel {
                display: inline !important;          /* nombre de la sección de vuelta */
                font-size: .86rem !important;
            }
            .capabilities-system .tabsBtn .tabsIcon {
                display: block !important;
                width: 18px !important;
                height: 18px !important;
                flex: 0 0 auto !important;
            }
            /* El indicador deslizante lo posiciona el JS con coordenadas que no cuentan con el
               scroll ni con tabs de ancho variable → se ponía donde le daba la gana. Fuera en
               móvil; el activo se marca con su PROPIO fondo (sin JS, no se puede buguear). */
            .capabilities-system .tabsIndicator {
                display: none !important;
            }
            .capabilities-system .tabsBtn {
                transition: background-color .2s ease, color .2s ease !important;
            }
            .capabilities-system .tabsBtn.is-active {
                background: var(--brand, var(--color-primary)) !important;
                color: #fff !important;
                border-radius: 999px !important;
                box-shadow: 0 4px 12px rgba(0, 85, 109, 0.25) !important;
            }
            /* Título de la card separado del número de arriba y del texto de abajo. */
            .capability-panel__copy h3 {
                margin: 16px 0 12px !important;
            }
            /* Fuera los "ticks" (lista): solo texto + mockup. */
            .capability-panel__copy ul {
                display: none !important;
            }
        }

        /* Texto de la sección de especialidades (fondo azul): versión corta SOLO en móvil. */
        .sectionLead__mob {
            display: none;
        }
        @media (max-width: 768px) {
            .sectionLead__full {
                display: none;
            }
            .sectionLead__mob {
                display: inline;
            }
            /* CTA "Acceso limitado": los dos botones con el MISMO ancho en móvil. */
            .cta-final__actions {
                flex-direction: column !important;
                align-items: stretch !important;
                max-width: 360px !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            .cta-final__actions .btn {
                width: 100% !important;
            }
        }

        /* === Especialidades (3 clínicas + "¿Tu especialidad no aparece?"): en MÓVIL pasa de
           rejilla vertical a CARRUSEL horizontal con scroll-snap + puntitos debajo. === */
        .specNewDots {
            display: none;
        }
        @media (max-width: 768px) {
            .specialtiesNew .specNewGrid {
                display: flex !important;
                grid-template-columns: none !important;
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                scroll-snap-type: x mandatory !important;
                gap: 14px !important;
                padding: 4px 20px !important;
                scroll-padding-left: 20px !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
            }
            .specialtiesNew .specNewGrid::-webkit-scrollbar {
                display: none !important;
            }
            .specialtiesNew .specNewCard {
                flex: 0 0 84% !important;
                min-width: 0 !important;
                scroll-snap-align: start !important;
                /* Forzadas visibles: las cards que entran por scroll horizontal nunca
                   dispararían el reveal de animate-on-scroll y quedarían invisibles. */
                opacity: 1 !important;
                transform: none !important;
            }
            /* Controles de paginación (flechas + puntitos), sobre fondo azul → blancos. */
            .specNewDots {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                gap: 14px !important;
                margin: 18px 0 0 !important;
            }
            .specNewDots__track {
                display: flex !important;
                align-items: center !important;
                gap: 8px !important;
            }
            .specNewDots__track button {
                width: 8px !important;
                height: 8px !important;
                padding: 0 !important;
                border: 0 !important;
                border-radius: 999px !important;
                background: rgba(255, 255, 255, 0.45) !important;
                cursor: pointer !important;
                transition: width .25s ease, background-color .25s ease !important;
            }
            .specNewDots__track button.is-active {
                width: 22px !important;
                background: #fff !important;
            }
            /* Flechas a la altura de los puntitos para pasar de card. */
            .specNewArrow {
                width: 34px !important;
                height: 34px !important;
                flex: 0 0 auto !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0 !important;
                border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
                border-radius: 50% !important;
                background: rgba(255, 255, 255, 0.12) !important;
                color: #fff !important;
                cursor: pointer !important;
                transition: background-color .2s ease, opacity .2s ease, border-color .2s ease !important;
            }
            .specNewArrow svg {
                width: 16px !important;
                height: 16px !important;
            }
            .specNewArrow:disabled {
                opacity: 0.35 !important;
                cursor: default !important;
            }
        }

        @media (max-width: 1024px) {

            /* En móvil/tablet background-attachment fixed da problemas (iOS lo ignora). */
            .bgModoAzul {
                background-attachment: scroll !important;
            }
        }

        /* === Mockup del hero "como una IMG": MISMA proporción de DESKTOP (~16:9) en
           TODAS las resoluciones bajo 2 columnas (móvil, tablet y la franja 1025-1100),
           escalado uniforme con el ancho. El device se ancla a 1040px y se escala con
           container-query units (cqw); el contenedor reserva la altura con aspect-ratio.
           CLAVE: se CONGELA el layout interno al de desktop (sidebar/bar/schedule/alturas)
           para que el reflow no achate la proporción. Aquí irá un vídeo. === */
        @media (max-width: 1100px) {
            /* El hero__inner es flex-column centrado (styles.css:4838), así que el texto ya
               se centra solo. El corrimiento a la derecha NO venía de aquí, sino del
               desborde horizontal de Galen (1040px) y la órbita (780px) en flujo, que
               ensanchaban el <body> (ver overflow:clip en sus wrappers). Aquí solo se
               refuerza el centrado del bloque de texto. */
            .hero__content {
                margin-left: auto !important;
                margin-right: auto !important;
            }
            .hero__visual {
                position: relative;
                container-type: inline-size;
                width: 100%;
                max-width: 640px !important;
                margin: 48px auto 0 !important;
                /* Fallback antes de que el JS mida la altura exacta (hero-fit). */
                aspect-ratio: 1040 / 610;
                /* overflow VISIBLE: con hidden se recortaba el drop-shadow del device en
                   rectángulo y se veía gris en las esquinas (fuera del tablet redondeado).
                   El JS clava la altura exacta, así que el device no desborda; solo su
                   sombra, que debe difuminarse libremente. */
                overflow: visible !important;
            }
            .hero__visual .hero-device {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                width: 1040px !important;
                transform: scale(calc(100cqw / 1040px)) !important;
                transform-origin: top left !important;
                transition: none !important;
                margin: 0 !important;
            }
            .hero-device .tablet-frame {
                padding: 22px !important;
            }
            .hero-device .tablet-frame__screen {
                overflow: hidden;
            }
            .hero-mockup .mockup__bar {
                display: flex !important;
            }
            .hero-mockup .mockup__body {
                min-height: 500px !important;
            }
            .hero-mockup .mockup__sidebar {
                display: block !important;
                width: 190px !important;
            }
            .hero-mockup .mockup__main {
                padding: 28px !important;
            }
            .hero-dashboard__schedule {
                grid-template-columns: 1fr 1fr !important;
            }
            .hero-appointment {
                min-height: 112px !important;
            }
            .hero-dashboard__stats {
                grid-template-columns: repeat(4, 1fr) !important;
            }
            .hero-device__play {
                display: none !important;
            }
            .hero__actions {
                flex-direction: column !important;
                align-items: center !important;
            }
            .hero__actions .btn {
                width: 100% !important;
                max-width: 420px !important;
            }
        }

        /* "El software que se adapta a tu clínica": reducir el hueco entre el orbe
           Paciente y la siguiente sección en móvil/tablet (el orbe ya reserva menos alto
           con su aspect-ratio; aquí recortamos el padding inferior de la sección). */
        @media (max-width: 1024px) {
            .clinic-flow {
                padding-bottom: 20px !important;
            }
            /* La siguiente sección (Galen) arranca antes: menos hueco hasta el orbe. */
            .ia-block {
                padding-top: 48px !important;
            }
        }

        /* === 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: var(--color-surface, #fbffff) !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;
            }
        }

        /* === 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 {
            height: 2px;
            border-radius: 999px;
            /* "Datos en movimiento": brillos teal que recorren la línea en BUCLE CONTINUO.
               Patrón REPETIDO (repeating-linear-gradient, periodo 28px) desplazado
               exactamente un periodo → el reinicio es invisible, sin saltos. (background-image,
               no el shorthand, para que !important no bloquee la animación de la posición.) */
            background-image: repeating-linear-gradient(90deg, transparent 0, var(--color-primary) 14px, transparent 28px) !important;
            background-repeat: repeat-x !important;
            animation: secStreamFlow 1s linear infinite !important;
        }

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

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

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

        .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 {
            to {
                /* Desplaza EXACTAMENTE un periodo del patrón (28px) → loop sin saltos. */
                background-position-x: 28px;
            }
        }

        /* === 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;
            }

        }

        /* ============================================================
           PULIDO DE DISEÑO — pase conservador, 100% aditivo (2026-06-16)
           Auditoría de craft de toda la landing. Solo CSS aditivo: foco de
           teclado (:focus-visible), áreas táctiles >=44px, cobertura de
           prefers-reduced-motion, medidas de línea 65-75ch, armonización de
           sombras/bordes hacia el hue de marca y ritmo vertical.
           NO toca textos, fondos de sección ni la maquetación móvil a medida.
           ============================================================ */

        /* ---------- Header / Nav ---------- */
        /* A11y: anillo de foco de teclado en el header (el reset de .navToggle
           había eliminado el outline nativo). Solo afecta a teclado. */
        .header .navLink:focus-visible,
        .header .brand:focus-visible,
        .header .navToggle:focus-visible {
            outline: 2px solid var(--brand, #00556d);
            outline-offset: 3px;
            border-radius: var(--radius-sm, 8px);
        }
        .header .navLink:focus-visible::after {
            width: 100%;
        }
        /* A11y: el toggle de menú (interactivo solo en <=1024px) alcanza el
           mínimo táctil de 44px sin cambiar el tamaño visual de las barras. */
        @media (max-width: 1024px) {
            .header .navToggle {
                min-width: 44px !important;
                min-height: 44px !important;
                align-items: center !important;
                justify-content: center !important;
            }
            /* Items del menú desplegable móvil con altura táctil ~44px. */
            .header .nav.is-open .navLink {
                padding-top: 14px;
                padding-bottom: 14px;
            }
        }

        /* ---------- Footer ---------- */
        /* A11y: foco claro legible sobre el fondo azul del footer. */
        .footer .footerCol a:focus-visible {
            color: var(--brand-mist, #b9d2d4);
            outline: 2px solid var(--brand-mist, #b9d2d4);
            outline-offset: 3px;
            border-radius: 4px;
        }
        @media (max-width: 720px) {
            /* A11y: enlaces del footer con altura táctil ~44px al apilarse. */
            .footer .footerCol a {
                padding-top: 11px;
                padding-bottom: 11px;
            }
            /* Alineación: el logo deja de quedar suelto a la derecha cuando el
               grid del footer se apila (en desktop conserva flex-end). */
            .footer .footerLogo {
                justify-content: flex-start;
            }
        }

        /* ---------- Hero ---------- */
        /* A11y: foco de teclado en los CTAs del hero (offset para que el
           degradado azul del primario no tape el anillo). */
        .hero .btn.btn--white:focus-visible,
        .hero .btn--white-outline:focus-visible {
            outline: 3px solid rgba(0, 85, 109, 0.55) !important;
            outline-offset: 3px !important;
        }
        /* Motion: acota la transición del CTA outline (heredaba 'all') a las
           propiedades reales, igualando al CTA primario hermano. */
        .hero .btn--white-outline {
            transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease !important;
        }
        /* Tipografía: tracking óptico ligero en el titular display (56px/800). */
        .hero__title {
            letter-spacing: -0.015em !important;
        }
        @media (prefers-reduced-motion: reduce) {
            /* Anula solo el desplazamiento del hover; mantiene color/sombra. */
            .hero .btn.btn--white:hover,
            .hero .btn--white-outline:hover {
                transform: none !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;
            }
        }

        /* ---------- Clinic-flow / círculo Paciente ---------- */
        /* A11y: foco de teclado en el único control de la sección, y acota el
           'transition: all' del .btn base a las propiedades que cambian. */
        .clinic-flow__cta:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 3px;
            border-radius: var(--radius-md);
        }
        .clinic-flow__cta {
            transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
        }
        /* Elevación: el orbe central baja su sombra (0.28 -> 0.16) al rango de
           elevación de la sección; mantiene hue, bisel y geometría. */
        .clinic-orbit__center {
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.16),
                0 20px 48px rgba(0, 61, 79, 0.16);
        }
        /* Rendimiento: quita el will-change permanente de las 8 pills (en
           desktop, donde orbitan); translate ya compone en GPU por sí solo. */
        @media (min-width: 769px) {
            .clinic-orbit__node {
                will-change: auto;
            }
        }

        /* ---------- 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;
            }
        }

        /* ---------- Funcionalidades ---------- */
        /* A11y: foco de teclado en los tabs (role=tab ya correcto en markup). */
        .capabilities-system .tabsBtn:focus-visible {
            outline: 2px solid var(--color-primary, #00556d);
            outline-offset: 2px;
            border-radius: var(--radius-pill, 999px);
        }
        @media (max-width: 768px) {
            /* A11y: tabs scrolleables con altura táctil >=44px en móvil. */
            .capabilities-system .tabsBtn {
                min-height: 44px !important;
            }
        }

        /* ---------- Especialidades (fondo azul) ---------- */
        /* A11y: foco de teclado blanco (legible sobre el azul) en flechas,
           puntos del carrusel y CTA hueco. */
        .specNewArrow:focus-visible,
        .specNewDots__track button:focus-visible,
        .specNewCardHollow .specNewCardHollowBtn:focus-visible {
            outline: 2px solid #fff !important;
            outline-offset: 3px !important;
        }
        /* Tipografía: interlineado del párrafo typewriter (1.45 -> 1.55). */
        .specialties-typewriter p {
            line-height: 1.55 !important;
        }
        @media (prefers-reduced-motion: reduce) {
            /* Anula el movimiento de las cards/links; conserva la elevación. */
            .specNewCard {
                transition: box-shadow var(--t-base, 240ms ease) !important;
            }
            .specNewCard:hover {
                transform: none !important;
            }
            .specNewLink::after {
                transition: none !important;
            }
        }

        /* ---------- Onboarding ---------- */
        /* A11y: foco de teclado en los puntos del rail (controles del modo
           vertical), con offset para no quedar tapado por el borde de 3px. */
        .onboarding-railNav button:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 3px;
        }
        /* Consistencia: en >=769px la card del gráfico (.onboarding-twin)
           iguala su radio (22 -> 28px) al de la card del paso. */
        @media (min-width: 769px) {
            .onboarding-twin {
                border-radius: 28px !important;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            /* Congela las dos animaciones infinitas de los gráficos
               transplantados (anillo IA + líneas de transferencia). */
            .onboarding-twin .ai-orbit,
            .onboarding-twin .secure-stream span {
                animation: none !important;
            }
        }

        /* ---------- CTA final (fondo azul) ---------- */
        /* A11y: foco de teclado blanco sobre el fondo azul/teal. */
        .cta-final.cta-final .btn.btn--white:focus-visible,
        .cta-final.cta-final .btn.btn--white-outline:focus-visible {
            outline: 2px solid #fff !important;
            outline-offset: 3px !important;
            border-radius: var(--radius-lg) !important;
        }
        /* Elevación: la sombra del botón principal pasa de negro puro a tinte
           de marca (mismo valor que ya usa su hermano). */
        .cta-final.cta-final .btn.btn--white {
            box-shadow: 0 14px 32px rgba(0, 85, 109, 0.18) !important;
        }
        /* El hover recupera su elevación: la sombra estática de arriba (0,4,0)
           le ganaba en especificidad al hover existente (0,3,1) y la aplanaba. */
        .cta-final.cta-final .btn.btn--white:hover {
            box-shadow: 0 6px 18px rgba(0, 85, 109, 0.32) !important;
        }
        @media (prefers-reduced-motion: reduce) {
            .cta-final.cta-final .btn.btn--white:hover,
            .cta-final.cta-final .btn.btn--white-outline:hover {
                transform: none !important;
            }
        }

        /* ---------- FAQ ---------- */
        /* A11y: foco de teclado en los <summary> (list-style:none eliminaba el
           marcador nativo) y en el botón 'Ver más'. */
        .faq__question:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 4px;
            border-radius: 6px;
        }
        .faq__question:focus:not(:focus-visible) {
            outline: none;
        }
        .faq__more [data-faq-more]:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 3px;
        }
        .faq__more [data-faq-more]:focus:not(:focus-visible) {
            outline: none;
        }
        /* Tipografía: acota la medida de lectura de las respuestas (~68ch). */
        .faq__answer p,
        .faq__answer li {
            max-width: 68ch;
        }

        /* ---------- Tipografía global ---------- */
        /* Unifica el interlineado del .section-title base (1.2 -> 1.1) con el
           resto de cabeceras grandes. Las secciones con override mantienen el
           suyo (mayor especificidad). */
        .section-title {
            line-height: 1.1 !important;
        }
        /* Medida del subtítulo de Funcionalidades (~95ch -> ~64ch). */
        .capabilities-system__header .section-subtitle {
            max-width: 64ch;
        }

        /* ---------- 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;
            }
        }

        /* ---------- Color y elevación (armonización a hue de marca) ---------- */
        /* Tinta los tokens de sombra globales hacia el azul de marca; misma
           geometría y opacidad, solo se sustituye el negro neutro. */
        :root {
            --shadow-xs: 0 1px 2px rgba(0, 61, 79, 0.04);
            --shadow-sm: 0 1px 3px rgba(0, 61, 79, 0.06);
            --shadow-md: 0 4px 16px rgba(0, 61, 79, 0.08);
            --shadow-lg: 0 12px 40px rgba(0, 61, 79, 0.10);
            --shadow-xl: 0 20px 60px rgba(0, 61, 79, 0.12);
        }
        /* ---------- Accesibilidad global ---------- */
        @media (prefers-reduced-motion: reduce) {
            /* Respeta reduced-motion en el reveal global por scroll (la
               animación más extendida y la única laguna real). Deja el
               contenido visible en vez de invisible. */
            .animate-on-scroll,
            .reveal__tablet.animate-on-scroll,
            .reveal__mockup.animate-on-scroll {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
            }
        }

        /* ============================================================
           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;
            }
        }

        /* ============================================================
           Marca "EviMedic" en negrita en la prosa de la landing. Se usa <b>
           (no <strong>) para esquivar reglas scoped tipo `.beta-offer strong`.
           Peso 800 (extra-bold) + azul de marca como los títulos. Sobre fondos
           azules (.bgModoAzul: especialidades, CTA final, footer) hereda el
           color claro del contenedor para no perderse.
           ============================================================ */
        .evm {
            font-weight: 800;
            /* Azul de marca pero apagado (mezclado con el color de texto): un
               tono azul ligero, no el primario pleno. */
            color: #103b47;
            color: color-mix(in srgb, var(--color-primary) 40%, var(--color-text));
        }
        .bgModoAzul .evm {
            color: inherit;
        }

        /* ============================================================
           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;
            }
        }

        /* ============================================================
           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;
        }