/* ============================================================
   FASTY — Apple-Inspired Scrollytelling
   Visual language: apple.com/cl/apple-watch
   ============================================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --orange: #FF8800;
    --orange-light: #FFA033;
    --orange-glow: rgba(255, 136, 0, 0.18);
    --orange-subtle: rgba(255, 136, 0, 0.07);
    --black: #1d1d1f;
    --gray-dark: #333336;
    --gray: #86868b;
    --gray-light: #d2d2d7;
    --gray-bg: #f5f5f7;
    --white: #fbfbfd;
    --pure-white: #ffffff;
    --cyan: #40C4FF;
    --pink: #D500F9;
    --lime: #CCFF00;
    --red: #FF3D00;
    --nav-height: 48px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-gym: 'Roboto Condensed', sans-serif;
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    color: var(--black);
    background: var(--pure-white);
    line-height: 1.5;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* ---------- Typography ---------- */
.text-orange { color: var(--orange); }

.section-headline {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-align: center;
    margin-bottom: 1rem;
}

.section-sub {
    font-size: 1.125rem;
    color: var(--gray);
    text-align: center;
    max-width: 540px;
    margin: 0 auto 2.5rem;
    line-height: 1.5;
}

.focus-overline {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--orange);
    margin-bottom: 0.75rem;
}

.focus-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
}

.focus-desc {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--gray-dark);
    max-width: 480px;
}

/* ---------- Anim Utility ---------- */
[data-anim] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-anim].visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   NAVIGATION — Apple-style frosted glass
   ============================================================ */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    height: var(--nav-height);
    background: rgba(251, 251, 253, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.3s, box-shadow 0.3s;
}
.nav.scrolled {
    background: rgba(251,251,253,0.92);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.nav.nav--dark {
    background: rgba(29,29,31,0.82);
    border-bottom-color: rgba(255,255,255,0.06);
}
.nav.nav--dark .nav-links a { color: var(--gray-light); }
.nav-inner {
    max-width: 1200px; margin: 0 auto; height: 100%;
    padding: 0 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
}
.nav-logo-img { height: 22px; width: auto; }
.nav-links { display: flex; gap: 2rem; }
.nav-links a {
    font-size: 0.8125rem; font-weight: 400;
    color: var(--black); opacity: 0.8; transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 1; }
.nav-cta {
    font-size: 0.8125rem; font-weight: 500;
    color: var(--pure-white) !important;
    background: var(--orange);
    padding: 0.4rem 1rem; border-radius: 980px;
    transition: background 0.2s;
}
.nav-cta:hover { background: var(--orange-light); }

/* ============================================================
   FIGMA INTRO: NAV
   ============================================================ */
.fi-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    width: 100%;
    background: rgba(0,0,0,0.55);
    font-family: 'Homenaje', sans-serif;
}
.fi-nav-inner {
    max-width: 1400px; margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
}
.fi-nav-logo-img { height: 50px; width: auto; }
.fi-nav-links {
    display: flex; align-items: center; gap: 1.5rem;
}
.fi-nav-links a {
    font-size: 1.25rem; color: #fff;
    text-decoration: none; white-space: nowrap;
    transition: opacity 0.2s;
}
.fi-nav-links a:hover { opacity: 0.8; }
.fi-nav-demo { color: #f80 !important; }
.fi-nav-contratar {
    background: #f80; color: #fff !important;
    padding: 0.5rem 1.5rem; border-radius: 30px;
}
.fi-nav-contratar:hover { background: #e07000; }

/* Indicador de sección activa */
.fi-nav-links a.active {
    opacity: 1;
    color: #FF8800 !important;
}
.fi-nav-links a.active::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #FF8800;
    border-radius: 1px;
    margin-top: 2px;
}
.fi-nav-links a.fi-nav-demo.active::after,
.fi-nav-links a.fi-nav-contratar.active::after {
    display: none;
}

/* Navbar scrolled & dark states (fix: .fi-nav not .nav) */
.fi-nav.scrolled {
    background: rgba(0,0,0,0.85);
    box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}
.fi-nav.nav--dark {
    background: rgba(0,0,0,0.85);
}

/* ============================================================
   FIGMA INTRO: SUBTITLE STRIP
   ============================================================ */
.fi-subtitle-strip {
    position: fixed;
    top: 74px; left: 0; right: 0;
    z-index: 100;
    background: rgba(255,136,0,0.5);
    color: #000;
    font-family: 'Homenaje', sans-serif;
    font-size: clamp(0.75rem, 1.5vw, 1.1rem);
    text-align: center;
    padding: 0.6rem 1rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ============================================================
   FIGMA INTRO: HERO (Gym BG + Products)
   ============================================================ */
.fi-intro {
    width: 100%;
    overflow: hidden;
    position: relative;
}
/* Hero contenedor unificado: gym arriba + blanco abajo + productos */
.fi-hero {
    position: relative;
    width: 100%;
    height: clamp(900px, 92vw, 1200px);
    overflow: hidden;
}

/* Foto del gimnasio: ocupa el 55% superior */
.fi-hero-bg {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 58%;
    overflow: hidden;
}
.fi-hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
}
/* Fondo alternado: las dos imágenes se superponen y se cruzan en fade */
.fi-hero-bg-img {
    position: absolute;
    top: 0; left: 0;
    animation: fiHeroFade 10s ease-in-out infinite;
}
.fi-hero-bg-img--a { animation-delay: 0s; }
.fi-hero-bg-img--b { animation-delay: 5s; }
@keyframes fiHeroFade {
    0%, 45%   { opacity: 1; }
    50%, 95%  { opacity: 0; }
    100%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .fi-hero-bg-img { animation: none; }
    .fi-hero-bg-img--b { opacity: 0; }
}

/* Fondo blanco: 45% inferior */
.fi-hero-white {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 42%;
    background: #fff;
}

/* Etiquetas arriba a la izquierda de cada producto */
.fi-plabel {
    position: absolute;
    font-family: 'Homenaje', sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    color: #000;
    z-index: 12;
    pointer-events: none;
}
.fi-plabel--totem { top: 59%; left: 6%; }
.fi-plabel--wear  { top: 59%; left: 42%; }
.fi-plabel--home  { top: 59%; left: 68%; }

/* Grid de productos: el totem sube un poco al área de la foto, el resto queda en blanco */
.fi-hero-products {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 70%;
    pointer-events: none;
}

.fi-product {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.fi-product img {
    display: block;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.12));
}
.fi-product-label {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Homenaje', sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    color: #000;
    white-space: nowrap;
    z-index: 5;
    pointer-events: auto;
}

/* Totem: izquierda — grande, solo ~10-13% sobresale en la foto superior, sin cortarse */
.fi-product--totem {
    left: -6%;          /* compensar el espacio blanco izquierdo */
    width: 57%;         /* grande pero que alcance completo en el espacio blanco */
    bottom: 0;
}
.fi-product--totem img {
    width: 100%;
    height: auto;
}

/* Wearable: centro, rotado — más chico */
.fi-product--wearable {
    left: 50%;
    transform: translateX(-50%) rotate(40deg);
    width: 16%;
    bottom: 12%;
}
.fi-product--wearable img {
    width: 100%;
    height: auto;
}
.fi-product--wearable .fi-product-label {
    transform: rotate(-40deg);
    top: -1.5rem;
    left: -1rem;
}

/* Home: derecha, invertido */
.fi-product--home {
    right: -2%;
    width: 32%;
    bottom: 0;
    transform: scaleY(-1) rotate(180deg);
}
.fi-product--home img {
    width: 100%;
    height: auto;
}
.fi-product--home .fi-product-label {
    transform: scaleY(-1) rotate(180deg);
    top: auto;
    bottom: 0;
    left: 0;
}

/* ============================================================
   FIGMA INTRO: APPS SECTION
   ============================================================ */
.fi-apps {
    position: relative;
    background: rgba(255,136,0,0.5);
    padding: 2rem 1rem 2.5rem;
}
.fi-apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.fi-app-col {
    display: flex; flex-direction: column;
    align-items: center;
    position: relative;
}
.fi-app-header {
    text-align: center; margin-bottom: 0.75rem;
    font-family: 'Homenaje', sans-serif;
}
.fi-app-label {
    display: block;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: #000;
}
.fi-app-role {
    display: block;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    color: #000;
    line-height: 1.1;
}
.fi-app-content {
    position: relative;
    width: 100%;
    display: flex; flex-direction: column;
    align-items: center;
}
.fi-app-phone-wrap {
    position: relative;
    width: 75%;
    max-width: 260px;
    aspect-ratio: 9 / 19;
}
.fi-phone-canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.fi-app-profile {
    position: relative;
    width: clamp(80px, 15vw, 160px);
    height: clamp(80px, 15vw, 160px);
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid;
    margin-bottom: 15px;
    z-index: 3;
    background: #fff;
}
.fi-app-profile--orange { border-color: #f80; }
.fi-app-profile--black { border-color: #000; }
.fi-app-profile--white { border-color: #fff; }
.fi-app-profile img {
    display: none; /* ocultamos el img, usamos background-image en el div */
}
/* Fotos de perfil como background: zoom controlado + posición de la cara */
.fi-app-profile--orange {
    background: url(assets/profile-admin.jpg) no-repeat;
    background-size: 280%;
    background-position: 16% 15%;
}
.fi-app-profile--black {
    background: url(assets/profile-kine.jpg) no-repeat;
    background-size: 280%;
    background-position: 9% 12%;
}
.fi-app-profile--white {
    background: url(assets/profile-paciente.jpg) no-repeat;
    background-size: 600%;
    background-position: 50% 19%;
}
.fi-app-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    margin-top: 0.75rem;
}
.fi-app-dot--orange { background: #f80; }
.fi-app-dot--green { background: #4CAF50; }
.fi-app-dot--blue { background: #2196F3; }

.fi-apps-lines {
    position: absolute;
    top: 50%; left: 0; right: 0;
    display: flex; justify-content: center;
    gap: 33%;
    z-index: 1;
    pointer-events: none;
}
.fi-apps-line {
    width: 20%; height: 3px;
    background: #f80;
}

/* ============================================================
   FIGMA INTRO: BOTTOM CONTEXT STRIP
   ============================================================ */
.fi-contexts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    height: clamp(120px, 15vw, 200px);
}
.fi-context-panel {
    position: relative;
    overflow: hidden;
}
.fi-context-img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.fi-context-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.49);
}
.fi-context-label {
    position: absolute;
    bottom: 0.5rem; left: 0.5rem;
    font-family: 'Homenaje', sans-serif;
    font-size: clamp(0.9rem, 2vw, 1.5rem);
    color: #fff;
    z-index: 2;
}
.fi-context-devices {
    position: absolute;
    top: 50%; right: 10%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex; gap: 4px;
    align-items: center;
}
.fi-ctx-device {
    height: clamp(30px, 5vw, 60px);
    width: auto;
    object-fit: contain;
}
.fi-ctx-device--wearable { transform: rotate(40deg); }
.fi-ctx-device--tv { transform: rotate(-20deg); }
.fi-ctx-device--wear-sm { height: clamp(20px, 3vw, 40px); transform: rotate(40deg); }

/* ============================================================
   SCENE: HERO (legacy - kept for scroll hint compatibility)
   ============================================================ */
.hero-scroll-hint {
    position: absolute; bottom: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    animation: hintPulse 2s ease-in-out infinite;
}
.scroll-mouse {
    width: 24px; height: 38px;
    border: 2px solid var(--gray); border-radius: 12px;
    position: relative;
}
.scroll-wheel {
    width: 4px; height: 8px; background: var(--gray);
    border-radius: 2px; position: absolute;
    top: 8px; left: 50%; transform: translateX(-50%);
    animation: scrollWheel 2s ease-in-out infinite;
}
@keyframes scrollWheel {
    0% { opacity: 1; top: 8px; }
    100% { opacity: 0; top: 20px; }
}
@keyframes hintPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ============================================================
   SCENE: INTRO TEXT (cinematic text)
   ============================================================ */
.scene-intro-text { height: 300vh; background: var(--black); }
.scene-intro-text .sticky-container {
    position: sticky; justify-content: center;
}
.intro-sequence { text-align: center; max-width: 700px; }
.intro-line {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 300; color: var(--gray);
    line-height: 1.4; margin-bottom: 1.5rem;
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), color 0.6s;
}
.intro-line.visible {
    opacity: 1; transform: translateY(0);
}
.intro-line--bold {
    font-weight: 600; font-size: clamp(1.75rem, 4vw, 3rem);
    color: var(--pure-white) !important;
}

/* ============================================================
   SCENE: ECOSYSTEM CONSTELLATION
   ============================================================ */
.scene-ecosystem { height: 300vh; background: var(--pure-white); }
.scene { position: relative; width: 100%; }
.sticky-container {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    overflow: hidden;
    padding: calc(var(--nav-height) + 1.5rem) 2rem 2rem;
}
.constellation {
    position: relative;
    width: min(800px, 90vw); height: min(500px, 55vh);
    margin-top: 1rem;
}
.constellation-node {
    position: absolute;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    transition: transform 0.8s var(--ease-out), opacity 0.8s var(--ease-out);
    opacity: 0; transform: scale(0.8) translateY(20px);
}
.constellation-node.visible { opacity: 1; transform: scale(1) translateY(0); }
.constellation-node img {
    width: 100px; height: 100px; object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08));
    transition: transform 0.5s var(--ease-out);
}
.constellation-node:hover img { transform: scale(1.08); }
.node-label {
    font-size: 0.75rem; font-weight: 600;
    color: var(--gray-dark); text-align: center; white-space: nowrap;
}
.node-wearable { top: 3%; left: 50%; transform: translateX(-50%); }
.node-totem { top: 35%; left: 3%; }
.node-phone { top: 35%; right: 3%; }
.node-tv { bottom: 8%; left: 16%; }
.node-kine { bottom: 8%; right: 16%; }
.node-wearable.visible { transform: translateX(-50%) scale(1); }
.constellation-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 2;
}
.center-logo {
    width: 50px; height: auto;
    filter: drop-shadow(0 4px 16px rgba(255, 136, 0,0.3));
    animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 4px 16px rgba(255, 136, 0,0.3)); }
    50% { filter: drop-shadow(0 4px 28px rgba(255, 136, 0,0.5)); }
}
.constellation-lines {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
}
.c-line {
    stroke: var(--orange); stroke-width: 1; opacity: 0;
    stroke-dasharray: 4 4; transition: opacity 0.6s;
}
.c-line.active { opacity: 0.35; stroke-width: 1.5; }

/* ============================================================
   FOCUS LAYOUTS (Wearable, Totem, Kine)
   ============================================================ */
.scene-focus { height: 400vh; }
.scene-wearable { background: var(--gray-bg); }
.scene-totem { background: var(--pure-white); }
.scene-kine { background: var(--gray-bg); }

.focus-layout {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4rem; width: 100%; max-width: 1100px;
    align-items: center;
}
.focus-layout--reverse { direction: rtl; }
.focus-layout--reverse > * { direction: ltr; }
.focus-media {
    display: flex; align-items: center; justify-content: center;
}
.focus-product-img {
    max-height: 400px; width: auto; object-fit: contain;
    transition: transform 0.8s var(--ease-out), opacity 0.8s;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.1));
}
.focus-product-img--large { max-height: 480px; }
/* Totem image: visualmente 2x sin afectar el layout (la propiedad `scale`
   es independiente del `transform` que pone el JS en scroll, así que ambas
   composiciones se combinan en lugar de pisarse). */
#totemImg { scale: 2; transform-origin: center center; }
.focus-step {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    position: absolute; pointer-events: none;
}
.focus-step.active {
    opacity: 1; transform: translateY(0);
    position: relative; pointer-events: auto;
}
.focus-content { position: relative; min-height: 300px; }

/* ============================================================
   LIVE UI: SHARED ENTRANCE ANIMATIONS
   ============================================================ */
.live-ui { margin-top: 2rem; }

/* --- Screen entrance base state --- */
.screen-entrance {
    opacity: 0;
    transform: scale(0.88) translateY(24px);
    filter: blur(6px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.7s ease-out,
        box-shadow 1.2s ease-out;
}

.screen-entrance.screen-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}

/* --- Glow ring on entrance (colored halo) --- */
.screen-entrance.screen-visible.glow-orange {
    box-shadow:
        0 8px 32px rgba(255, 136, 0, 0.25),
        0 0 0 1px rgba(255, 136, 0, 0.08),
        0 0 60px rgba(255, 136, 0, 0.1);
    animation: screenGlowOrange 2.5s ease-out forwards;
}
.screen-entrance.screen-visible.glow-cyan {
    box-shadow:
        0 8px 32px rgba(64, 196, 255, 0.25),
        0 0 0 1px rgba(64, 196, 255, 0.08),
        0 0 60px rgba(64, 196, 255, 0.1);
    animation: screenGlowCyan 2.5s ease-out forwards;
}
.screen-entrance.screen-visible.glow-red {
    box-shadow:
        0 8px 32px rgba(255, 61, 0, 0.25),
        0 0 0 1px rgba(255, 61, 0, 0.08),
        0 0 60px rgba(255, 61, 0, 0.1);
    animation: screenGlowRed 2.5s ease-out forwards;
}
.screen-entrance.screen-visible.glow-purple {
    box-shadow:
        0 8px 32px rgba(213, 0, 249, 0.2),
        0 0 0 1px rgba(213, 0, 249, 0.06),
        0 0 60px rgba(213, 0, 249, 0.08);
    animation: screenGlowPurple 2.5s ease-out forwards;
}
.screen-entrance.screen-visible.glow-white {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 0 50px rgba(255, 255, 255, 0.08);
    animation: screenGlowWhite 2.5s ease-out forwards;
}

/* Glow keyframes: flash bright then settle to soft */
@keyframes screenGlowOrange {
    0% { box-shadow: 0 0 0 rgba(255, 136, 0,0); }
    30% { box-shadow: 0 0 80px rgba(255, 136, 0,0.35), 0 8px 32px rgba(255, 136, 0,0.3), 0 0 0 2px rgba(255, 136, 0,0.15); }
    100% { box-shadow: 0 8px 32px rgba(255, 136, 0,0.15), 0 0 0 1px rgba(255, 136, 0,0.05); }
}
@keyframes screenGlowCyan {
    0% { box-shadow: 0 0 0 rgba(64,196,255,0); }
    30% { box-shadow: 0 0 80px rgba(64,196,255,0.35), 0 8px 32px rgba(64,196,255,0.3), 0 0 0 2px rgba(64,196,255,0.15); }
    100% { box-shadow: 0 8px 32px rgba(64,196,255,0.15), 0 0 0 1px rgba(64,196,255,0.05); }
}
@keyframes screenGlowRed {
    0% { box-shadow: 0 0 0 rgba(255,61,0,0); }
    30% { box-shadow: 0 0 80px rgba(255,61,0,0.35), 0 8px 32px rgba(255,61,0,0.3), 0 0 0 2px rgba(255,61,0,0.15); }
    100% { box-shadow: 0 8px 32px rgba(255,61,0,0.1), 0 0 0 1px rgba(255,61,0,0.04); }
}
@keyframes screenGlowPurple {
    0% { box-shadow: 0 0 0 rgba(213,0,249,0); }
    30% { box-shadow: 0 0 80px rgba(213,0,249,0.3), 0 8px 32px rgba(213,0,249,0.25), 0 0 0 2px rgba(213,0,249,0.12); }
    100% { box-shadow: 0 8px 32px rgba(213,0,249,0.1), 0 0 0 1px rgba(213,0,249,0.04); }
}
@keyframes screenGlowWhite {
    0% { box-shadow: 0 0 0 rgba(0,0,0,0); }
    30% { box-shadow: 0 0 60px rgba(255,255,255,0.12), 0 12px 40px rgba(0,0,0,0.18), 0 0 0 2px rgba(0,0,0,0.06); }
    100% { box-shadow: 0 12px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.03); }
}

/* Slight overshoot bounce on the scale for extra pop */
.screen-entrance.screen-pop {
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.6s ease-out,
        box-shadow 1.2s ease-out;
}

/* ============================================================
   LIVE UI: HAPTIC ZONES
   ============================================================ */
.haptic-band {
    display: flex; gap: 1rem; justify-content: center;
    padding: 1.5rem; background: var(--pure-white);
    border-radius: 16px;
    /* entrance handled by screen-entrance class */
}
.haptic-zone {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--gray-bg); position: relative; transition: background 0.3s;
}
.haptic-zone span { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; color: var(--gray); }
.haptic-zone.active { background: var(--orange-glow); }
.haptic-zone.active span { color: var(--orange); }
.hz-pulse {
    position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid var(--orange); opacity: 0; transition: opacity 0.3s;
}
.haptic-zone.active .hz-pulse { opacity: 1; animation: hzPulse 1.2s ease-out infinite; }
@keyframes hzPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 0; }
}
.haptic-status {
    text-align: center; margin-top: 0.75rem;
    font-size: 0.8125rem; color: var(--gray);
    transition: opacity 0.3s;
}

/* ============================================================
   LIVE UI: GYM EXERCISE SCREEN (from real app)
   ============================================================ */
.gym-screen-wrap { margin-top: 1.5rem; }
.gym-screen {
    background: linear-gradient(180deg, #000510 0%, #001a33 50%, #003366 100%);
    border-radius: 16px; padding: 1.25rem; color: white;
    font-family: var(--font-gym); max-width: 340px;
    /* entrance handled by screen-entrance class */
}
.gym-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1rem;
}
.gym-exercise-num {
    font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.1em; color: rgba(255,255,255,0.6);
    text-transform: uppercase;
}
.gym-weight {
    background: rgba(64,196,255,0.15); padding: 0.25rem 0.75rem;
    border-radius: 20px; font-size: 0.75rem; color: var(--cyan);
}
.gym-weight-val { font-weight: 700; }
.gym-status-bar {
    display: flex; justify-content: space-between; margin-bottom: 0.75rem;
}
.gym-stat { text-align: center; flex: 1; }
.gym-stat-label {
    display: block; font-size: 0.5625rem; font-weight: 700;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.4);
    margin-bottom: 0.25rem; text-transform: uppercase;
}
.gym-stat-value { font-size: 1.25rem; font-weight: 700; }
.gym-stat-cyan { color: var(--cyan); }
.gym-stat-pink { color: var(--pink); }
.gym-stat-white { color: white; }
.gym-stat-dots {
    display: flex; justify-content: center; gap: 4px; margin-top: 4px;
}
.dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
}
.dot--filled { background: var(--cyan); }
.gym-progress-tracks { margin-bottom: 0.75rem; }
.gym-track {
    height: 4px; border-radius: 2px; overflow: hidden;
    margin-bottom: 3px;
}
.gym-track--series { background: rgba(64,196,255,0.15); }
.gym-track--reps { background: rgba(213,0,249,0.15); }
.gym-track--series .gym-track-fill { background: var(--cyan); height: 100%; border-radius: 2px; transition: width 0.5s; }
.gym-track--reps .gym-track-fill { background: var(--pink); height: 100%; border-radius: 2px; transition: width 0.5s; }
.gym-breathing {
    text-align: center; font-size: 1.125rem; font-weight: 300;
    color: rgba(255,255,255,0.5); margin: 0.75rem 0;
    animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}
.gym-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}
.gym-btn {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.25rem; padding: 0.625rem; border-radius: 12px;
    border: 1.5px solid transparent; cursor: pointer;
    font-family: var(--font-gym); transition: all 0.2s;
}
.gym-btn span { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.gym-btn-icon { font-size: 1.125rem; }
.gym-btn--lime { border-color: rgba(204,255,0,0.3); color: var(--lime); }
.gym-btn--red { border-color: rgba(255,100,100,0.3); color: #ff6464; }
.gym-btn--purple { border-color: rgba(157,70,255,0.3); color: #9D46FF; }
.gym-btn--cyan { border-color: rgba(64,196,255,0.3); color: var(--cyan); }

/* ============================================================
   SCENE: PAIN ASSESSMENT
   ============================================================ */
.scene-pain { height: 200vh; background: var(--gray-bg); }
.pain-layout {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4rem; width: 100%; max-width: 1000px; align-items: center;
}
.pain-demo-wrap { display: flex; justify-content: center; }
.pain-demo {
    background: linear-gradient(180deg, #000510 0%, #001a33 60%, #003366 100%);
    border-radius: 20px; padding: 1.5rem; width: 280px;
    color: white; font-family: var(--font-gym);
    /* entrance handled by screen-entrance class */
}
.pain-demo-header {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem;
}
.pain-logo { height: 16px; }
.pain-demo-title {
    font-size: 0.625rem; font-weight: 700;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.5);
}
.pain-body-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 1rem; }
.pain-body-svg { width: 100px; height: auto; }
.pain-point { animation: painPulse 2s ease-in-out infinite; }
@keyframes painPulse {
    0%, 100% { r: 12; opacity: 0.6; }
    50% { r: 16; opacity: 0.3; }
}
.pain-zone-label {
    font-size: 0.75rem; font-weight: 600; color: var(--red);
    margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.pain-slider-area {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1rem;
}
.pain-scale { flex: 1; }
.pain-bar {
    height: 8px; background: rgba(255,255,255,0.1);
    border-radius: 4px; position: relative; overflow: visible;
}
.pain-fill {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--cyan), #FF9800, var(--red));
    width: 60%; transition: width 0.5s;
}
.pain-knob {
    position: absolute; top: 50%; right: 0;
    transform: translate(50%, -50%);
    width: 18px; height: 18px; border-radius: 50%;
    background: white; border: 3px solid var(--red);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    left: 60%; transition: left 0.5s;
}
.pain-labels {
    display: flex; justify-content: space-between;
    margin-top: 0.5rem; font-size: 0.5625rem; color: rgba(255,255,255,0.4);
}
.pain-value-display { text-align: center; min-width: 50px; }
.pain-value-number {
    font-size: 2rem; font-weight: 700; color: var(--red);
    line-height: 1;
}
.pain-value-desc {
    display: block; font-size: 0.5625rem; color: rgba(255,255,255,0.5);
    margin-top: 0.25rem;
}
.pain-type-selector { display: flex; gap: 0.5rem; }
.pain-type-btn {
    flex: 1; padding: 0.5rem; border: 1.5px solid rgba(64,196,255,0.3);
    background: transparent; color: var(--cyan); border-radius: 8px;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
    cursor: pointer; transition: all 0.2s; font-family: var(--font-gym);
}
.pain-type-btn--active {
    background: rgba(64,196,255,0.15); border-color: var(--cyan);
}

/* ============================================================
   SCENE: CONTEXTS GRID
   ============================================================ */
.scene-contexts { height: 200vh; background: var(--black); color: var(--pure-white); }
.scene-contexts .sticky-container { gap: 0; }
.scene-contexts .section-headline { margin-bottom: 0.75rem; }
.scene-contexts .section-sub { color: var(--gray); margin-bottom: 2rem; }
.contexts-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem; max-width: 1100px; width: 100%;
}
.context-card {
    border-radius: 20px; overflow: hidden; background: #2d2d2f;
    transition: transform 0.5s var(--ease-out), opacity 0.6s;
    opacity: 0; transform: translateY(40px);
}
.context-card.visible { opacity: 1; transform: translateY(0); }
.context-card:hover { transform: translateY(-4px) !important; }
.context-img-wrap { height: 200px; overflow: hidden; }
.context-img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s var(--ease-out);
}
.context-card:hover .context-img-wrap img { transform: scale(1.04); }
.context-info { padding: 1.25rem; }
.context-info h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.375rem; }
.context-info p { font-size: 0.8125rem; color: var(--gray); line-height: 1.5; margin-bottom: 0.75rem; }
.context-tag {
    font-size: 0.6875rem; font-weight: 600; color: var(--orange);
    background: var(--orange-glow); padding: 0.25rem 0.625rem;
    border-radius: 20px;
}

/* ============================================================
   SCENE: FASTY TV
   ============================================================ */
.scene-tv { height: 200vh; background: #ffffff; color: var(--black); }
/* Permitir que el render del home3d se vea completo. El sticky sigue siendo
   100vh, pero compactamos padding y gaps para que todo (título + TV + home3d)
   quepa dentro del viewport sin desbordarse hacia la sección siguiente. */
.scene-tv .sticky-container {
    overflow: visible;
    justify-content: flex-start;
    /* Padding mínimo para que tv-text + tv-scene-bg quepan dentro del 100vh
       sin que la imagen de fondo se recorte abajo. */
    padding-top: var(--nav-height);
    padding-bottom: 0;
}
.tv-layout {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.5rem; width: 100%; max-width: 900px;
}
.tv-text { text-align: center; }
.tv-text .focus-desc { color: var(--gray-dark); margin: 0 auto; }
/* Texto del título también en oscuro sobre fondo blanco */
.scene-tv .tv-text .focus-title { color: var(--black); }
.scene-tv .tv-text .focus-overline { color: var(--orange); }
/* Wrapper con la foto de la sala (tvgrande.png) como fondo. El TV UI se monta
   ENCIMA, ubicado en el rectángulo de la pantalla del televisor de la foto. */
.tv-scene-bg {
    position: relative;
    /* Ancho = mínimo entre el padre y el ancho derivado del alto disponible
       (alto disponible en el sticky × aspect-ratio). Así si la altura del
       viewport manda, el width se reduce y la proporción 264:176 se preserva
       sin recortar la foto. */
    width: min(100%, calc((100vh - 340px) * 264 / 176));
    max-width: 900px;
    aspect-ratio: 264 / 176;          /* proporción de la foto tvgrande.png */
    background: #fff url('../tvgrande.png') center/cover no-repeat;
    border-radius: 12px;
    overflow: hidden;
}
.tv-frame {
    /* Posición SOBRE la pantalla del TV de la foto (5% más chica que el v1,
       bajada 2.5% para encajar con la pantalla real sin caer demasiado). */
    position: absolute;
    left: 27.69%; top: 11.98%;
    width: 45.12%; height: 37.05%;
    background: transparent; border-radius: 4px; padding: 0;
    /* entrance handled by screen-entrance class */
}
.tv-screen {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #0a0a0a, #1a1a2e);
    border-radius: 8px; overflow: hidden;
}
.tv-ui { height: 100%; display: flex; flex-direction: column; padding: 1.5rem; }
/* Cuando el UI vive dentro de la pantalla de tvgrande.png, achicamos
   padding y tipografías para que el contenido se vea proporcional. */
.tv-scene-bg .tv-ui {
    padding: 0.35rem 0.5rem; gap: 0.25rem;
    font-size: clamp(0.55rem, 1.2cqw, 0.85rem);
    container-type: inline-size;
}
.tv-scene-bg .tv-ui-header { margin-bottom: 0.3rem; }
.tv-scene-bg .tv-logo { height: clamp(10px, 2.2cqw, 18px); }
.tv-scene-bg .tv-session { font-size: clamp(0.45rem, 1cqw, 0.7rem); }
.tv-scene-bg .tv-ui-body { gap: 0.4rem; }
.tv-scene-bg .tv-silhouette--photo { min-height: 0; }
.tv-scene-bg .tv-weight-badge { top: 3px; right: 3px; padding: 0.12rem 0.28rem; }
.tv-scene-bg .tv-weight-label { font-size: clamp(0.42rem, 0.9cqw, 0.6rem); }
.tv-scene-bg .tv-weight-value { font-size: clamp(0.6rem, 1.3cqw, 0.85rem); }
.tv-scene-bg .tv-exercise-name { font-size: clamp(0.6rem, 1.4cqw, 0.95rem); }
.tv-scene-bg .tv-rep-current { font-size: clamp(1.2rem, 3cqw, 2rem); }
.tv-scene-bg .tv-rep-total { font-size: clamp(0.7rem, 1.4cqw, 1rem); }
.tv-scene-bg .tv-correction { font-size: clamp(0.5rem, 1cqw, 0.7rem); }
/* En pantallas/contenedores chicos el UI cambia de dos columnas a una sola
   para que la foto + el panel quepan dentro de la pantalla del TV de la foto */
@container (max-width: 280px) {
    .tv-scene-bg .tv-ui-body {
        grid-template-columns: 1fr !important;
        gap: 0.25rem;
    }
    .tv-scene-bg .tv-silhouette--photo { aspect-ratio: 16/9; }
}
.tv-ui-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem;
}
.tv-logo { height: 20px; }
.tv-session { font-size: 0.75rem; color: var(--orange); font-weight: 500; }
.tv-ui-body {
    flex: 1; display: grid; grid-template-columns: 1fr 1fr;
    gap: 2rem; align-items: center;
}
.tv-silhouette { display: flex; align-items: center; justify-content: center; }
/* Foto del paciente detectado (reemplaza la silueta SVG) */
.tv-silhouette--photo {
    position: relative;
    width: 100%; height: 100%;
    min-height: 180px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 136, 0, 0.04);
    border: 1px solid rgba(255, 136, 0, 0.18);
}
.tv-detection-img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 12px rgba(255, 136, 0, 0.25));
}
.tv-weight-badge {
    position: absolute;
    top: 8px; right: 8px;
    display: flex; flex-direction: column;
    background: rgba(0,0,0,0.78);
    border: 1px solid rgba(255, 136, 0, 0.6);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    backdrop-filter: blur(4px);
    line-height: 1.1;
    z-index: 2;
}
.tv-weight-label {
    font-size: 0.6rem; font-weight: 500;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tv-weight-value {
    font-size: 1rem; font-weight: 800;
    color: var(--orange);
    font-variant-numeric: tabular-nums;
}

/* (.tv-stack y .tv-home3d eliminados — el home3d ahora viene en tvgrande.png) */

/* ========================================================================
   ONDAS sobre la escena de TV (dispositivo FASTY Home → TV y → frente)
   El "dispositivo" en tvgrande.png está aprox en (77%, 55%) de la escena.
   ====================================================================== */

/* Ondas WiFi: salen del dispositivo HACIA EL TV (cyan). Tres arcos
   concéntricos que crecen desde el dispositivo y se desvanecen. */
.tv-wifi-waves {
    position: absolute;
    /* origen en la parte superior del dispositivo */
    left: 76%; top: 50%;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 1;
}
.tv-wifi-waves span {
    position: absolute;
    left: 0; top: 0;
    width: 28px; height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    border: 2px solid rgba(0, 200, 255, 0.95);
    /* SOLO cuadrante superior-izquierdo del círculo → arco que apunta al TV (NW) */
    clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);
    opacity: 0;
    box-shadow: 0 0 6px rgba(0, 200, 255, 0.55);
    animation: tvWifiPulse 2.4s ease-out infinite;
}
.tv-wifi-waves span:nth-child(1) { animation-delay: 0s; }
.tv-wifi-waves span:nth-child(2) { animation-delay: 0.8s; }
.tv-wifi-waves span:nth-child(3) { animation-delay: 1.6s; }
@keyframes tvWifiPulse {
    0%   { transform: scale(0.3); opacity: 0;   border-width: 3px; }
    15%  { opacity: 0.95; }
    100% { transform: scale(4.5); opacity: 0;   border-width: 1px; }
}

/* Ondas radar: salen del dispositivo HACIA EL FRENTE/ABAJO (naranja).
   Semicírculos pulsando — como un sensor de profundidad escaneando. */
.tv-radar-waves {
    position: absolute;
    /* origen al frente del dispositivo (centrado con la esfera cyan del WiFi) */
    left: 76%; top: 62%;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 1;
}
.tv-radar-waves span {
    position: absolute;
    left: 0; top: 0;
    /* Elipse APLANADA (3:1) — simula perspectiva del piso: el arco se ve "echado"
       hacia adelante, como un sonar visto en planta inclinada. */
    width: 60px; height: 20px;
    margin: -10px 0 0 -30px;
    border-radius: 50%;
    border: 2px solid var(--orange);
    /* sólo la mitad inferior de la elipse — queda un "1/4 de luna" plano,
       paralelo al piso, abriéndose hacia el viewer */
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    opacity: 0;
    box-shadow: 0 0 10px rgba(255, 136, 0, 0.55);
    animation: tvRadarSweep 2.8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.tv-radar-waves span:nth-child(1) { animation-delay: 0s; }
.tv-radar-waves span:nth-child(2) { animation-delay: 0.95s; }
.tv-radar-waves span:nth-child(3) { animation-delay: 1.9s; }
@keyframes tvRadarSweep {
    0%   { transform: scale(0.3); opacity: 0; }
    15%  { opacity: 0.95; }
    100% { transform: scale(8.5); opacity: 0; }
}

/* Tamaños responsivos para las ondas (escalan con el contenedor de la escena) */
.tv-scene-bg { container-type: inline-size; }
@container (min-width: 600px) {
    .tv-wifi-waves span { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
    /* Radar mantiene la proporción 3:1 (perspectiva del piso) en desktop */
    .tv-radar-waves span { width: 84px; height: 28px; margin: -14px 0 0 -42px; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-wifi-waves span, .tv-radar-waves span { animation: none; opacity: 0.5; }
}
.tv-body-outline {
    position: relative; width: 120px; height: 200px;
    background: linear-gradient(to bottom,
        transparent 0%, rgba(255, 136, 0,0.1) 15%,
        rgba(255, 136, 0,0.15) 40%, rgba(255, 136, 0,0.1) 60%,
        rgba(255, 136, 0,0.08) 80%, transparent 100%
    );
    border-radius: 30px 30px 0 0;
    border: 1px solid rgba(255, 136, 0,0.2);
}
.tv-joint {
    position: absolute; width: 10px; height: 10px;
    border-radius: 50%; background: var(--orange); opacity: 0.6;
}
.tv-joint--shoulder-l { top: 18%; left: 10%; }
.tv-joint--shoulder-r { top: 18%; right: 10%; }
.tv-joint--elbow-l { top: 35%; left: 2%; }
.tv-joint--elbow-r { top: 35%; right: 2%; }
.tv-joint--hip-l { top: 52%; left: 18%; }
.tv-joint--hip-r { top: 52%; right: 18%; }
.tv-joint--knee-l { top: 72%; left: 20%; }
.tv-joint--knee-r { top: 72%; right: 20%; }
.tv-joint--warning {
    background: #ff4444; opacity: 1;
    animation: jointWarning 1s ease-in-out infinite;
}
@keyframes jointWarning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,68,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(255,68,68,0); }
}
.tv-info-panel { display: flex; flex-direction: column; gap: 0.75rem; }
.tv-exercise-name { font-size: 1.125rem; font-weight: 600; }
.tv-rep-counter { display: flex; align-items: baseline; gap: 0.125rem; }
.tv-rep-current { font-size: 3rem; font-weight: 800; color: var(--orange); line-height: 1; }
.tv-rep-total { font-size: 1.5rem; font-weight: 300; color: var(--gray); }
.tv-progress-bar {
    height: 4px; background: rgba(255,255,255,0.1);
    border-radius: 2px; overflow: hidden;
}
.tv-progress-fill {
    height: 100%; background: var(--orange);
    border-radius: 2px; transition: width 0.5s;
}
.tv-correction {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8125rem; color: #ff8a65;
    padding: 0.5rem 0.75rem; background: rgba(255,138,101,0.1);
    border-radius: 8px; line-height: 1.4;
}
.tv-correction-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #ff8a65; flex-shrink: 0;
    animation: indicatorPulse 1.5s ease-in-out infinite;
}
@keyframes indicatorPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ============================================================
   SCENE: KINE APP (Phone Frame)
   ============================================================ */
.focus-media--phone { display: flex; align-items: center; justify-content: center; }
.phone-frame {
    width: 280px; height: 580px;
    background: var(--black); border-radius: 40px; padding: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15),
                0 0 0 1px rgba(255,255,255,0.08) inset;
    position: relative; overflow: hidden;
    /* entrance: starts hidden, animated via screen-entrance */
    opacity: 0;
    transform: perspective(800px) rotateY(-8deg) scale(0.88) translateY(24px);
    filter: blur(6px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.7s ease-out,
        box-shadow 1.2s ease-out;
}
.phone-frame.screen-visible {
    opacity: 1;
    transform: perspective(800px) rotateY(-4deg) scale(1) translateY(0);
    filter: blur(0);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.15),
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 0 80px rgba(255, 136, 0,0.2);
    animation: phoneGlow 2.5s ease-out forwards;
}
@keyframes phoneGlow {
    0% { box-shadow: 0 0 0 rgba(255, 136, 0,0), 0 20px 60px rgba(0,0,0,0.15); }
    30% { box-shadow: 0 0 90px rgba(255, 136, 0,0.35), 0 20px 60px rgba(0,0,0,0.2), 0 0 0 2px rgba(255, 136, 0,0.12); }
    100% { box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 40px rgba(255, 136, 0,0.08); }
}
.phone-frame:hover { transform: perspective(800px) rotateY(0deg) scale(1); }
.phone-notch {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 26px; background: var(--black);
    border-radius: 0 0 16px 16px; z-index: 10;
}
.phone-screen {
    width: 100%; height: 100%;
    background: var(--pure-white); border-radius: 30px;
    overflow: hidden; overflow-y: auto;
}
.kine-app { padding: 2.5rem 1rem 1.25rem; }
.kine-header {
    display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.5rem;
    position: relative;
}
.kine-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--orange); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8125rem; font-weight: 700;
}
.kine-header-info { display: flex; flex-direction: column; }
.kine-name { font-size: 0.8125rem; font-weight: 700; }
.kine-role { font-size: 0.625rem; color: var(--gray); }
.kine-header-badge {
    position: absolute; right: 0; top: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--red); color: white;
    font-size: 0.6875rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.kine-section { margin-bottom: 1rem; }
.kine-section h4 {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--gray); margin-bottom: 0.625rem;
}
.kine-patient-card {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem; border-radius: 12px; margin-bottom: 0.375rem;
    transition: background 0.2s;
}
.kine-patient--active {
    background: var(--orange-subtle); border: 1px solid var(--orange-glow);
}
.kp-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--gray-bg); display: flex; align-items: center; justify-content: center;
    font-size: 0.625rem; font-weight: 700; color: var(--gray-dark); flex-shrink: 0;
}
.kp-avatar--active { background: var(--orange); color: white; }
.kp-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kp-name { font-size: 0.75rem; font-weight: 600; }
.kp-status { font-size: 0.625rem; color: var(--gray); }
.kp-status--active { color: var(--orange); font-weight: 500; }
.kp-progress {
    height: 3px; background: var(--gray-bg); border-radius: 2px;
    overflow: hidden; margin-top: 3px;
}
.kp-progress-fill { height: 100%; background: var(--orange); border-radius: 2px; }
.kp-indicator {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--orange); margin-left: auto; flex-shrink: 0;
    animation: indicatorPulse 2s ease-in-out infinite;
}
.kine-alert {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.5rem; background: #fff3e0; border-radius: 8px;
    font-size: 0.6875rem; color: #e65100; line-height: 1.4;
    margin-bottom: 0.375rem;
}
.kine-alert--info { background: #e3f2fd; color: #1565c0; }
.kine-alert-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #e65100; flex-shrink: 0; margin-top: 3px;
    animation: indicatorPulse 1.5s ease-in-out infinite;
}
.kine-alert-dot--blue { background: #1565c0; }
.kine-actions { display: flex; gap: 0.375rem; margin-top: 0.75rem; }
.kine-btn {
    flex: 1; padding: 0.5rem; border: none; border-radius: 10px;
    font-size: 0.6875rem; font-weight: 600; cursor: pointer;
    background: var(--gray-bg); color: var(--black);
    transition: background 0.2s; font-family: var(--font);
}
.kine-btn--primary { background: var(--orange); color: white; }

/* ============================================================
   SCENE: ADMIN DASHBOARD
   ============================================================ */
.scene-admin { height: 200vh; background: var(--pure-white); }
.admin-layout {
    display: grid; grid-template-columns: 1fr 1.2fr;
    gap: 3rem; width: 100%; max-width: 1100px; align-items: center;
}
.admin-demo { display: flex; justify-content: center; }
.admin-screen {
    background: linear-gradient(135deg, #0f0f12, #1a1a2e);
    border-radius: 16px; padding: 1.25rem; width: 100%; max-width: 480px;
    color: white; border: 1px solid rgba(64,196,255,0.08);
    /* entrance handled by screen-entrance class */
}
.admin-header-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.25rem; padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.admin-logo { height: 18px; }
.admin-view-label {
    font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.1em;
    color: var(--cyan); background: rgba(64,196,255,0.1);
    padding: 0.2rem 0.5rem; border-radius: 4px;
}
.admin-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem; margin-bottom: 1.25rem;
}
.admin-kpi {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.125rem; text-align: center;
    padding: 0.75rem 0.25rem;
    background: rgba(255,255,255,0.03); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
}
.admin-kpi-icon { font-size: 1.25rem; }
.admin-kpi-value {
    font-size: 1.375rem; font-weight: 800; color: white;
}
.admin-kpi-label {
    font-size: 0.5rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: rgba(255,255,255,0.4);
}
.admin-kpi-trend {
    font-size: 0.625rem; font-weight: 700;
    padding: 0.1rem 0.375rem; border-radius: 4px;
}
.admin-kpi-trend--up { color: #4caf50; background: rgba(76,175,80,0.1); }
.admin-kpi-trend--down { color: var(--cyan); background: rgba(64,196,255,0.1); }
.admin-charts {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 0.75rem;
}
.admin-chart {
    background: rgba(255,255,255,0.03); border-radius: 10px;
    padding: 0.75rem; border: 1px solid rgba(255,255,255,0.04);
}
.admin-chart-title {
    font-size: 0.625rem; font-weight: 600; color: rgba(255,255,255,0.5);
    display: block; margin-bottom: 0.5rem;
}
.admin-bar-chart {
    display: flex; align-items: flex-end; gap: 6px; height: 80px;
}
.admin-bar {
    flex: 1; background: var(--orange); border-radius: 3px 3px 0 0;
    height: var(--h); display: flex; flex-direction: column;
    justify-content: flex-end; align-items: center;
    padding-bottom: 4px; transition: height 0.6s var(--ease-out);
    min-height: 8px;
}
.admin-bar span {
    font-size: 0.5rem; font-weight: 700; color: rgba(255,255,255,0.4);
    margin-top: auto; position: relative; bottom: -16px;
}
.admin-donut {
    position: relative; display: flex; align-items: center;
    justify-content: center; height: 80px;
}
.admin-donut svg { width: 70px; height: 70px; }
.donut-fill { transition: stroke-dasharray 1s var(--ease-out); }
.donut-value {
    position: absolute; font-size: 1rem; font-weight: 800; color: var(--orange);
}

/* ============================================================
   SCENE: REPORTS
   ============================================================ */
.scene-reports { height: 200vh; background: var(--gray-bg); }
.reports-layout {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4rem; width: 100%; max-width: 1000px; align-items: center;
}
.report-demo-wrap { display: flex; justify-content: center; }
.report-demo {
    background: linear-gradient(180deg, #000510 0%, #001a33 60%, #003366 100%);
    border-radius: 20px; padding: 1.5rem; width: 300px;
    color: white; font-family: var(--font-gym);
    /* entrance handled by screen-entrance class */
}
.report-header {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 1rem; padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.report-logo { height: 16px; }
.report-title {
    font-size: 0.625rem; font-weight: 700;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.5);
}
.report-patient { margin-bottom: 0.75rem; }
.report-patient-name { display: block; font-size: 1rem; font-weight: 700; }
.report-date { font-size: 0.6875rem; color: rgba(255,255,255,0.4); }
.report-main-bar {
    height: 10px; background: rgba(255,255,255,0.08);
    border-radius: 5px; overflow: hidden; margin-bottom: 0.375rem;
}
.report-main-fill {
    height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, var(--orange), var(--orange-light));
    transition: width 0.8s var(--ease-out);
}
.report-main-label {
    font-size: 0.6875rem; color: rgba(255,255,255,0.5);
    display: block; margin-bottom: 1rem;
}
.report-main-label strong { color: white; }
.report-metrics { display: flex; flex-direction: column; gap: 0.625rem; }
.report-metric {
    padding: 0.625rem; background: rgba(255,255,255,0.04);
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.06);
}
.report-metric-header {
    display: flex; align-items: center; gap: 0.375rem;
    margin-bottom: 0.375rem;
}
.report-metric-icon { font-size: 0.875rem; }
.report-metric-name { font-size: 0.75rem; font-weight: 600; }
.report-metric-bar {
    height: 6px; background: rgba(255,255,255,0.08);
    border-radius: 3px; overflow: hidden; margin-bottom: 0.25rem;
}
.report-metric-fill { height: 100%; border-radius: 3px; transition: width 0.8s var(--ease-out); }
.report-metric-val {
    font-size: 0.625rem; font-weight: 700;
    color: rgba(255,255,255,0.6); text-align: right; display: block;
}

/* ============================================================
   SCENE: FINALE
   ============================================================ */
.scene-finale {
    min-height: 100vh; display: flex;
    align-items: center; justify-content: center;
    background: var(--pure-white); padding: 4rem 2rem;
}
.finale-content { text-align: center; max-width: 800px; }
.finale-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700; line-height: 1.08;
    letter-spacing: -0.03em; margin-bottom: 3rem;
}
.finale-flow {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: 3rem;
}
.flow-node {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.flow-icon { font-size: 2.5rem; }
.flow-node span { font-size: 0.875rem; font-weight: 600; color: var(--gray-dark); }
.flow-node--center { transform: scale(1.15); }
.flow-logo {
    height: 40px; width: auto;
    filter: drop-shadow(0 4px 12px rgba(255, 136, 0,0.3));
}
.flow-connector {
    display: flex; align-items: center; width: 80px; position: relative;
}
.flow-line {
    width: 100%; height: 1px; background: var(--gray-light);
}
.flow-dot {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--orange);
    animation: flowDotMove 3s ease-in-out infinite;
}
@keyframes flowDotMove {
    0% { left: 10%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 90%; opacity: 0; }
}
.finale-contexts {
    display: flex; justify-content: center; gap: 2rem; margin-bottom: 3rem;
}
.finale-ctx {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.finale-ctx img {
    width: 180px; height: 110px; object-fit: cover;
    border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: transform 0.4s var(--ease-out);
}
.finale-ctx:hover img { transform: scale(1.04); }
.finale-ctx span { font-size: 0.8125rem; font-weight: 600; color: var(--gray-dark); }
.finale-tagline { font-size: 1.25rem; color: var(--gray); margin-bottom: 2rem; }
.finale-cta {
    display: inline-block; padding: 0.875rem 2.5rem;
    background: var(--orange); color: white;
    border-radius: 980px; font-size: 1.0625rem; font-weight: 600;
    transition: background 0.2s, transform 0.2s;
}
.finale-cta:hover { background: var(--orange-light); transform: scale(1.02); }

/* ============================================================
   FOOTER — Apple style
   ============================================================ */
.footer {
    background: var(--gray-bg);
    border-top: 1px solid var(--gray-light);
    padding: 2rem 2rem 1.5rem;
}
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2rem; margin-bottom: 2rem;
    padding-bottom: 1.5rem; border-bottom: 1px solid var(--gray-light);
}
.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col h5 {
    font-size: 0.75rem; font-weight: 700; color: var(--black);
    margin-bottom: 0.25rem;
}
.footer-col a {
    font-size: 0.75rem; color: var(--gray); transition: color 0.2s;
}
.footer-col a:hover { color: var(--black); }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom p { font-size: 0.75rem; color: var(--gray); }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { font-size: 0.75rem; color: var(--gray); }
.footer-legal a:hover { color: var(--black); }

/* ============================================================
   DEMO SIMULATOR
   ============================================================ */
.scene-demo {
    min-height: 100vh;
    background: var(--black);
    color: var(--pure-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.demo-container {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

/* Intro */
.demo-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.demo-logo {
    width: 64px;
    height: auto;
    margin-bottom: 0.5rem;
}

.demo-hero-img {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
}

.demo-headline {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
}

.demo-sub {
    font-size: 1.0625rem;
    color: var(--gray);
    max-width: 460px;
    line-height: 1.6;
}

.demo-start-btn {
    margin-top: 1rem;
    padding: 0.875rem 2.5rem;
    background: var(--orange);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s;
}

.demo-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 136, 0, 0.3);
}

/* Pulso para indicar que el scroll está bloqueado hasta completar el formulario */
@keyframes demoPulseHint {
    0%   { box-shadow: 0 0 0 0 rgba(255, 136, 0, 0.6); transform: scale(1); }
    40%  { box-shadow: 0 0 0 18px rgba(255, 136, 0, 0); transform: scale(1.05); }
    100% { box-shadow: 0 0 0 0 rgba(255, 136, 0, 0); transform: scale(1); }
}
.demo-pulse-hint {
    animation: demoPulseHint 0.9s ease-out 2;
}

/* Progress bar */
.demo-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.demo-progress-fill {
    height: 100%;
    background: var(--orange);
    border-radius: 3px;
    width: 0%;
    transition: width 0.5s var(--ease-out);
}

/* Body / Steps */
.demo-body {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    backdrop-filter: blur(10px);
}

.demo-steps-wrap {
    min-height: 240px;
}

/* ===== TEMA CLARO — fase de input (intro + preguntas + resumen). Los resultados quedan oscuros. ===== */
/* Toda la sección en blanco mientras se responde */
.scene-demo.scene-light {
    background: #ffffff;
    color: #1d1d1f;
}
.demo-intro.demo-light,
.demo-body.demo-light {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    color: #1d1d1f;
    backdrop-filter: none;
}
.demo-intro.demo-light { padding: 2.75rem 2rem; }

.demo-light .demo-headline,
.demo-light .demo-question,
.demo-light .demo-summary-row strong { color: #1d1d1f; }

.demo-light .demo-sub,
.demo-light .demo-interpretation,
.demo-light .demo-summary-row span,
.demo-light .demo-detail-toggle,
.demo-light .demo-chat-loading,
.demo-light .demo-back { color: #5b5b60; }

.demo-light .focus-overline { color: var(--orange); }
.demo-light .demo-progress { background: rgba(0, 0, 0, 0.10); }

.demo-light .demo-opt {
    color: #1d1d1f;
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.18);
}
.demo-light .demo-opt:hover { border-color: var(--orange); background: rgba(255, 136, 0, 0.05); }
.demo-light .demo-opt--primary { background: var(--orange); color: #ffffff; border-color: var(--orange); }
.demo-light .demo-opt--primary:hover { background: var(--orange-light); }
.demo-light .demo-opt--confirm {
    background: rgba(255, 136, 0, 0.10);
    color: #cc4400;
    border-color: var(--orange);
}
/* .demo-opt--selected ya es naranja con texto blanco (!important) — sirve en claro */

.demo-light .demo-slider { background: rgba(0, 0, 0, 0.12); }

.demo-light .demo-input,
.demo-light .demo-chat-textarea {
    background: #f4f4f5;
    border-color: rgba(0, 0, 0, 0.15);
    color: #1d1d1f;
}
.demo-light .demo-custom-input { background: rgba(0, 0, 0, 0.04); }
.demo-light .demo-input::placeholder { color: #9a9aa0; }
.demo-light .demo-chat-textarea::placeholder { color: #9a9aa0; }
.demo-light .demo-chat-response { color: #1d1d1f; }

.demo-light .demo-summary { background: rgba(0, 0, 0, 0.04); }
.demo-light .demo-summary-row { border-bottom-color: rgba(0, 0, 0, 0.08); }
.demo-light .demo-insight { color: #cc4400; }

.demo-fade-in {
    animation: demoFadeIn 0.4s ease-out;
}

@keyframes demoFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Question */
.demo-question {
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

/* Options */
.demo-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.demo-opt {
    padding: 0.65rem 1.25rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: var(--pure-white);
    font-size: 0.9375rem;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.25s;
}

.demo-opt:hover {
    border-color: var(--orange);
    color: var(--orange);
    background: rgba(255, 136, 0, 0.08);
}

.demo-opt--selected {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: white !important;
}

.demo-opt--rank {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.demo-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: #fff !important;
    color: var(--orange) !important;
    font-size: 0.8rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.demo-opt--primary {
    background: var(--orange);
    border-color: var(--orange);
    font-weight: 600;
}

.demo-opt--primary:hover {
    background: var(--orange-light);
    border-color: var(--orange-light);
    color: white;
}

.demo-opt--large {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    width: 100%;
    text-align: center;
}

.demo-opt--confirm {
    background: rgba(255, 136, 0, 0.15);
    border-color: var(--orange);
    color: var(--orange);
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Slider */
.demo-slider-wrap {
    width: 100%;
    margin-bottom: 0.75rem;
}

.demo-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    outline: none;
}

.demo-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: var(--orange);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 136, 0, 0.4);
}

.demo-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--orange);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.demo-slider-val {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--orange);
    margin-top: 0.75rem;
}

.demo-slider--small {
    display: inline-block;
    width: 120px;
    vertical-align: middle;
    margin: 0 0.5rem;
}

/* Detail / Custom input */
.demo-detail,
.demo-custom-input {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
}

.demo-detail label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--gray-light);
}

.demo-input {
    width: 80px;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    font-family: var(--font);
    outline: none;
}
.demo-custom-input .demo-input {
    width: 100%;
    flex: 1;
    min-width: 180px;
    font-size: 1.05rem;
}

.demo-input:focus {
    border-color: var(--orange);
}

.demo-detail-toggle {
    display: block;
    margin-top: 0.75rem;
    background: none;
    border: none;
    color: var(--gray);
    font-size: 0.8125rem;
    font-family: var(--font);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.demo-detail-toggle:hover {
    color: var(--orange);
}

/* Interpretation */
.demo-interpretation {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    color: var(--gray);
    font-style: italic;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s, transform 0.4s;
}

.demo-interp-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Back button */
.demo-back {
    display: inline-block;
    margin-top: 1.5rem;
    background: none;
    border: none;
    color: var(--gray);
    font-size: 0.875rem;
    font-family: var(--font);
    cursor: pointer;
    transition: color 0.2s;
}

.demo-back:hover {
    color: var(--pure-white);
}

/* Validation summary */
.demo-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
}

.demo-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.demo-summary-row:last-child {
    border-bottom: none;
}

.demo-summary-row span {
    color: var(--gray);
}

.demo-summary-row strong {
    color: var(--pure-white);
}

.demo-insight {
    font-size: 0.9375rem;
    color: var(--orange);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.demo-validation-btns {
    display: flex;
    gap: 0.75rem;
}

/* ============================================================
   DEMO RESULTS
   ============================================================ */
.demo-results {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.demo-result-section {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.demo-result-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.demo-result-title {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--orange);
    margin-bottom: 0.75rem;
}

.demo-unlock-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.demo-unlock-list li {
    font-size: 0.9375rem;
    color: var(--gray-light);
    padding-left: 1.25rem;
    position: relative;
}

.demo-unlock-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--orange);
    font-weight: 700;
}

/* Config grid */
.demo-config-grid {
    display: flex;
    gap: 1.5rem;
}

.demo-config-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.demo-config-val {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--orange);
    line-height: 1;
}

.demo-config-label {
    font-size: 0.8125rem;
    color: var(--gray);
}

.demo-config-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.demo-config-detail span {
    font-size: 0.75rem;
    color: var(--gray);
}

.demo-config-note {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--orange);
    line-height: 1.5;
    padding: 0.75rem;
    background: rgba(255, 136, 0, 0.06);
    border-radius: 8px;
    border-left: 3px solid var(--orange);
}

/* Before vs After */
.demo-compare {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.demo-compare-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
}

.demo-compare-col--before {
    background: rgba(255, 255, 255, 0.04);
}

.demo-compare-col--after {
    background: rgba(255, 136, 0, 0.08);
    border: 1px solid rgba(255, 136, 0, 0.2);
}

.demo-compare-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray);
}

.demo-compare-arrow {
    font-size: 1.5rem;
    color: var(--orange);
    font-weight: 700;
}

.demo-compare-kpi {
    display: flex;
    flex-direction: column;
}

.demo-kpi-num {
    font-size: 1.5rem;
    font-weight: 700;
}

.demo-kpi-num--highlight {
    color: var(--orange);
}

.demo-kpi-sub {
    font-size: 0.75rem;
    color: var(--gray);
}

/* Impact */
.demo-impact {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    border-bottom: none;
    padding: 1.5rem 0;
}

/* Mini gráficos de barras (resultados, tema oscuro) */
.demo-bars {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.5rem;
}
.demo-bar-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: 0.7rem;
}
.demo-bar-label {
    font-size: 0.85rem;
    color: var(--gray);
}
.demo-bar-track {
    height: 16px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}
.demo-bar-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.7s var(--ease-out);
}
.demo-bar-val {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--pure-white);
    white-space: nowrap;
}
@media (max-width: 480px) {
    .demo-bar-row { grid-template-columns: 92px 1fr auto; gap: 0.5rem; }
    .demo-bar-label { font-size: 0.78rem; }
}

/* Gráfico de barras VERTICALES */
.demo-vbars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 1rem;
    height: 220px;
    padding: 0.5rem 0.25rem 0;
    margin-top: 0.5rem;
}
.demo-vbar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    min-width: 0;
}
.demo-vbar-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pure-white);
    margin-bottom: 0.4rem;
    white-space: nowrap;
    text-align: center;
}
.demo-vbar-track {
    width: 100%;
    max-width: 64px;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}
.demo-vbar-fill {
    width: 100%;
    border-radius: 6px 6px 0 0;
    transition: height 0.7s var(--ease-out);
    min-height: 4px;
}
.demo-vbar-label {
    font-size: 0.8rem;
    color: var(--gray);
    margin-top: 0.5rem;
    text-align: center;
    line-height: 1.2;
}
@media (max-width: 480px) {
    .demo-vbars { height: 180px; gap: 0.5rem; }
    .demo-vbar-val { font-size: 0.85rem; }
    .demo-vbar-label { font-size: 0.72rem; }
}

/* CTAs secuenciales con iconos */
.demo-cta-seq { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; }
.demo-cta-seq .demo-opt--large,
.demo-cta-seq .demo-back { display: flex; align-items: center; gap: 0.85rem; text-align: left; padding: 0.9rem 1.1rem; }
.demo-cta-seq .demo-opt--large span,
.demo-cta-seq .demo-back span { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.2; }
.demo-cta-seq .demo-opt--large span strong { font-weight: 600; }
.demo-cta-seq .demo-opt--large span small { font-size: 0.8rem; opacity: 0.7; font-weight: 400; }
.demo-ico { width: 22px; height: 22px; flex: 0 0 22px; }
.demo-cta-primary { font-size: 1.05rem; font-weight: 700; }
/* Mantener el botón "Contratar" a mano: sticky en la parte inferior del scroll del demo */
.demo-cta-primary {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    box-shadow: 0 6px 24px rgba(255, 136, 0, 0.35);
}

.demo-impact-item {
    text-align: center;
}

.demo-impact-num {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--orange);
    line-height: 1.1;
}

.demo-impact-label {
    font-size: 0.75rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Key message */
.demo-key-msg {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 136, 0, 0.06);
    border: 1px solid rgba(255, 136, 0, 0.15);
    border-radius: 12px;
}

.demo-key-msg p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--gray-light);
}

/* Justify */
.demo-justify {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--gray-light);
}

.demo-justify strong {
    color: var(--pure-white);
}

.demo-modelo {
    font-size: 0.9375rem;
    color: var(--orange);
    font-weight: 500;
}

/* Economic breakdown */
.demo-econ {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.demo-econ-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--gray-light);
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.demo-econ-row:last-child {
    border-bottom: none;
}

.demo-econ-row--total {
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255, 136, 0, 0.3);
    border-bottom: none;
}

.demo-econ-row span:first-child {
    flex: 1;
}

.demo-econ-cost {
    color: var(--gray);
}

.demo-econ-net {
    color: var(--orange);
    font-size: 1.125rem;
}

.demo-econ-pct {
    font-size: 0.8125rem;
    color: var(--gray);
}

.demo-econ-pct--big {
    color: var(--orange);
    font-weight: 700;
    font-size: 1rem;
}

/* Chat components */
.demo-chat-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.demo-chat-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.demo-chat-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: var(--pure-white);
    font-size: 0.9375rem;
    font-family: var(--font);
    resize: none;
    outline: none;
    line-height: 1.5;
}

.demo-chat-textarea:focus {
    border-color: var(--orange);
}

.demo-chat-textarea::placeholder {
    color: var(--gray);
}

.demo-chat-response {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s, transform 0.5s;
}

.demo-chat-response--visible {
    opacity: 1;
    transform: translateY(0);
}

.demo-chat-response p {
    font-size: 0.9375rem;
    color: var(--gray-light);
    line-height: 1.6;
    padding: 1rem;
    background: rgba(255, 136, 0, 0.06);
    border-left: 3px solid var(--orange);
    border-radius: 0 8px 8px 0;
}

.demo-chat-loading {
    color: var(--orange);
    font-style: italic;
    animation: demoPulse 1.2s ease-in-out infinite;
}

@keyframes demoPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Post-results chat */
.demo-chat-post {
    border-bottom: none !important;
}

.demo-chat-intro {
    font-size: 0.875rem;
    color: var(--gray);
    margin-bottom: 0.75rem;
}

.demo-chat-messages {
    max-height: 350px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-right: 0.25rem;
}

.demo-chat-messages::-webkit-scrollbar {
    width: 4px;
}

.demo-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.demo-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.demo-chat-msg {
    max-width: 90%;
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.demo-chat-msg p {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
}

.demo-chat-msg--user {
    align-self: flex-end;
    background: rgba(255, 136, 0, 0.15);
    border: 1px solid rgba(255, 136, 0, 0.25);
}

.demo-chat-msg--user p {
    color: var(--pure-white);
}

.demo-chat-msg--ai {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.demo-chat-msg--ai p {
    color: var(--gray-light);
}

/* Demo virtual button */
.demo-opt--virtual {
    background: linear-gradient(135deg, rgba(255, 136, 0, 0.15), rgba(64, 196, 255, 0.15));
    border: 1px solid var(--orange);
    color: var(--orange);
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.demo-opt--virtual:hover {
    background: linear-gradient(135deg, rgba(255, 136, 0, 0.25), rgba(64, 196, 255, 0.25));
    color: var(--orange-light);
    border-color: var(--orange-light);
}

/* Layout del botón Tour virtual: thumbnail + título + descripción */
.demo-opt--virtual {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    padding: 0.75rem 1.25rem;
    line-height: 1.25;
}
.demo-virtual-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(255, 136, 0, 0.35));
}
.demo-virtual-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.demo-virtual-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange);
    opacity: 0.95;
}
.demo-virtual-desc {
    font-size: 0.95rem;
    font-weight: 600;
    color: inherit;
    white-space: normal;
}

/* Demo Virtual 3D Section */
.scene-demo-virtual {
    height: 1200vh;
    background: var(--pure-white);
    position: relative;
}

.demo-virtual-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.demo-virtual-sticky canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    z-index: 1;
}

/* Overlays on top of canvas */
.dv-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.dv-overlay.dv-visible {
    opacity: 1;
}

/* Phase 0: Intro */
.dv-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.9);
}

.dv-intro-text {
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 300;
    color: var(--black);
    max-width: 600px;
    line-height: 1.5;
    margin-bottom: 2rem;
}

.dv-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: dvPulse 2s ease-in-out infinite;
}

.dv-scroll-hint .scroll-mouse {
    width: 24px;
    height: 38px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    position: relative;
}

.dv-scroll-hint .scroll-wheel {
    width: 3px;
    height: 8px;
    background: var(--orange);
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: dvWheel 1.5s ease-in-out infinite;
}

@keyframes dvWheel {
    0%, 100% { top: 6px; opacity: 1; }
    50% { top: 18px; opacity: 0.3; }
}

@keyframes dvPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.dv-scroll-hint span {
    font-size: 0.75rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Phase 2: Kine app — phone left, text right */
.dv-kine-phase {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    top: 110px;
    /* Constrain the phase to the left half of the viewport so the info
       card lives entirely on the dark side of the split (the right half
       is reserved for the totem). */
    right: 50%;
    padding: 10px 3rem 10px 5%;
    gap: 2rem;
    overflow: visible;
    box-sizing: border-box;
}

/* Patient-side info card. Mirrors .dv-kine-right but lives on the
   white right half of the viewport, between the totem and the colour
   split. Centered horizontally between split (50vw) and totem
   (~75vw) → ~62.5vw. Surrounding background is white so we use a soft
   tinted glass with dark text instead of inverting like the kine card.
   Text content is updated by totemHand.js per orchestration phase. */
.dv-totem-info {
    position: absolute;
    /* Mirror of .dv-kine-right: that card sits centred between phone
       (~10vw) and the split (50vw) → centre at ~32vw. Mirror across
       the split puts the patient card centre at ~68vw, which is also
       cleanly between the split (50vw) and the totem left edge (~84vw,
       since the totem now sits at 90vw). */
    left: 68%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(360px, 22vw);
    padding: 4vh 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: rgba(20, 24, 32, 0.06);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(20, 24, 32, 0.10);
    border-radius: 22px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    z-index: 11;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.dv-totem-info.is-visible {
    opacity: 1;
}

.dv-totem-info-title {
    font-family: 'Homenaje', sans-serif;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.2;
    margin: 0;
    transition: opacity 0.3s ease;
}

.dv-totem-info-text {
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
    font-weight: 400;
    color: #3a3a3d;
    line-height: 1.55;
    margin: 0;
    transition: opacity 0.3s ease;
}

.dv-totem-info-hint {
    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
    font-weight: 600;
    color: #FF8800;
    margin: 0;
    padding: 0.55rem 0.9rem;
    background: rgba(255, 136, 0, 0.10);
    border-left: 3px solid #FF8800;
    border-radius: 0 8px 8px 0;
    animation: hintPulse 2s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

/* Solid dark backdrop covering the left half of the viewport. Uses
   position: fixed so it extends all the way to the very top of the page
   (behind the fixed navbar at z:100 and the orange subtitle strip at
   z:100). Visibility is still tied to .dv-kine-phase via inherited
   opacity, so it fades in/out with the phase. */
.dv-kine-phase::before {
    content: '';
    position: fixed;
    /* Start right where the orange subtitle strip begins (top of strip =
       bottom of navbar = 74px), not at the very top of the page. */
    top: 74px;
    bottom: 0;
    left: 0;
    width: 50%;
    background: rgba(8, 10, 16, 0.78);
    pointer-events: none;
    z-index: 1;
}

.dv-kine-left {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.dv-kine-right {
    /* Don't grow: keep a fixed-ish width and let auto margins centre the
       card horizontally inside whatever room is left between the phone
       and the right edge of the dv-kine-phase (which now stops at 50%
       of the viewport). Result: the card sits in the middle of the
       space between the phone and the dark/light split. */
    flex: 0 1 360px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 4vh 1.6rem 1.8rem;
    /* Frosted-glass / liquid-glass look (Apple-style). Needs a low-alpha
       background, a backdrop blur+saturate for the glassy effect, a
       hairline border and a soft inner highlight. */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    position: relative;
    z-index: 10;
}

.dv-kine-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin-bottom: 0.25rem;
    /* Icons were designed for a light background; invert so the glyph
       reads as light on the dark frosted card. */
    filter: invert(1) brightness(1.15);
    transition: opacity 0.3s ease;
}

.dv-kine-title {
    font-family: 'Homenaje', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #f5f5f7;
    line-height: 1.2;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: color 0.4s ease, opacity 0.3s ease;
}

.dv-kine-text {
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    font-weight: 400;
    color: rgba(245, 245, 247, 0.85);
    line-height: 1.6;
    text-align: left;
    max-width: 420px;
    margin: 0;
    transition: opacity 0.3s ease;
}

.dv-kine-hint {
    font-size: clamp(0.85rem, 1.8vw, 1.05rem);
    font-weight: 600;
    color: #FFB088;
    line-height: 1.5;
    margin: 0;
    padding: 0.6rem 1rem;
    background: rgba(255, 136, 0, 0.18);
    border-left: 3px solid #FF7A33;
    border-radius: 0 8px 8px 0;
    animation: hintPulse 2s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

@keyframes hintPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Panel de RUTs disponibles — nested glass card inside the parent */
.dv-rut-panel {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    max-width: 420px;
    transition: opacity 0.3s ease;
}
.dv-rut-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(245, 245, 247, 0.78);
    text-align: center;
    margin: 0 0 0.5rem;
}
.dv-rut-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}
.dv-rut-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #6c757d;
    color: #fff;
    border-radius: 6px;
    font-size: 0.72rem;
    font-family: monospace;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    text-align: center;
}
.dv-rut-badge:hover {
    background: #5a6268;
    transform: scale(1.03);
}
.dv-rut-badge small {
    font-family: 'Homenaje', sans-serif;
    font-size: 0.7rem;
    opacity: 0.8;
}
.dv-rut-badge.dv-rut-primary {
    background: #0d6efd;
}
.dv-rut-badge.dv-rut-primary:hover {
    background: #0b5ed7;
}

/* Botones clickeables dentro del celular */
.ks-clickable {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    box-shadow: 0 0 0 1.5px #FF8800;
    animation: ksClickPulse 1.8s ease-in-out infinite;
}
.ks-clickable:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 0 2px #FF8800, 0 0 8px rgba(255, 136, 0, 0.4);
}
.ks-clickable:active {
    transform: scale(0.96);
}

@keyframes ksClickPulse {
    0%, 100% { box-shadow: 0 0 0 1.5px #FF8800; }
    50% { box-shadow: 0 0 0 2px #FF8800, 0 0 6px rgba(255, 136, 0, 0.3); }
}

.dv-phone-wrap {
    position: relative;
    width: 340px;
    max-width: 340px;
    max-height: calc(100vh - 130px);
    opacity: 0;
    transition: opacity 0.6s ease-out;
    flex-shrink: 0;
}

.dv-kine-phase.dv-visible .dv-phone-wrap {
    opacity: 1;
}

.dv-phone-frame {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 130px);
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.6));
    pointer-events: none;
}

.dv-phone-screen {
    position: absolute;
    top: 4.2%;
    left: 9.6%;
    width: 81%;
    bottom: 4.8%;
    border-radius: 30px;
    overflow: hidden;
    z-index: 3;
    background: #f5f5f7;
    pointer-events: auto;
}

/* Iframe real de la app kinesiólogo */
.dv-kine-iframe {
    position: absolute;
    top: 0; left: 0;
    width: 414px;
    height: 896px;
    border: none;
    transform-origin: top left;
    pointer-events: auto;
    /* scale se calcula dinámicamente en JS basado en el phone-screen width */
}

/* Data transfer dots */
.dv-data-dots {
    position: absolute;
    top: 20%;
    right: -20px;
    width: 60px;
    height: 60px;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.dv-data-dots.active { opacity: 1; }

.dv-dot {
    position: absolute;
    /* Tamaño inicial pequeño (12px). El scale final crece hasta el de la
       bolita celeste del tótem (controlado por --dv-dot-end-scale). */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    /* Glow celeste idéntico al de la esfera del totem (radial gradient,
       brillante en el centro, desvaneciendo a transparente en los bordes). */
    background: radial-gradient(circle at 50% 50%,
        rgba(220, 248, 255, 0.95) 0%,
        rgba(120, 220, 255, 0.85) 22%,
        rgba(0, 200, 255, 0.65) 45%,
        rgba(0, 180, 255, 0.30) 70%,
        rgba(0, 160, 255, 0) 100%);
    box-shadow: 0 0 14px rgba(0, 200, 255, 0.55);
    opacity: 0;
    will-change: transform, opacity;
}
.dv-data-dots.active .dv-dot {
    animation: dotFly 1.6s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}
.dv-data-dots.active .dv-dot:nth-child(1) { animation-delay: 0s; }
.dv-data-dots.active .dv-dot:nth-child(2) { animation-delay: 0.18s; }
.dv-data-dots.active .dv-dot:nth-child(3) { animation-delay: 0.36s; }
.dv-data-dots.active .dv-dot:nth-child(4) { animation-delay: 0.54s; }
.dv-data-dots.active .dv-dot:nth-child(5) { animation-delay: 0.72s; }
.dv-data-dots.active .dv-dot:nth-child(6) { animation-delay: 0.90s; }

/* Las variables --dv-dot-end-x, --dv-dot-end-y y --dv-dot-end-scale
   se actualizan en JS según el bounding rect de .dv-totem-screen
   y de .dv-data-dots, para que cada bolita aterrice exactamente sobre
   la esfera celeste del centro de la pantalla del tótem y termine con
   su mismo tamaño. */
@keyframes dotFly {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
    8% { opacity: 1; }
    85% { opacity: 0.85; }
    100% {
        opacity: 0;
        transform: translate(var(--dv-dot-end-x, 900px), var(--dv-dot-end-y, 0px))
                   scale(var(--dv-dot-end-scale, 8));
    }
}

/* Transfer line SVG */
.dv-transfer-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

/* Totem PNG with gym iframe overlay
   Calibrated against assets/totem.png natural dimensions 3300x2550.
   Visible region of PNG: x=1260-1760, y=500-1640 (head + antenna stub).
   Display scale: 320 / 520 = 0.615 → image width 2030px.
   Screen aperture in natural PNG: x=1406-1601, y=905-1595 → at 0.615 scale = 120x424 at wrap (90, 249). */
.dv-totem-wrap {
    position: absolute;
    /* Mirror the phone's position: the phone sits ~10% from the left
       edge of the viewport, so put the totem ~10% from the right edge
       (centre at 90vw) for left/right visual symmetry. */
    left: 90%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 1100px;       /* tall enough to expose the totem base, no bottom clip */
    /* overflow: visible lets the totem PNG's drop-shadow fade naturally
       into the transparent area around the totem body instead of being
       cut by the wrap's right/left edges. The screen aperture has its
       own overflow:hidden so iframe clipping is preserved. */
    overflow: visible;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 4;
    pointer-events: none;
}
.dv-totem-wrap.active {
    opacity: 1;
    pointer-events: auto;
}
.dv-totem-img {
    position: absolute;
    min-width: 2030px;
    width: 2030px;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
    top: -308px;
    left: -775px;
}
.dv-totem-screen {
    /* Calibrated against the baked screen render in assets/totem.png:
       FASTY logo chart icon and INICIAR button as anchor points, with the
       iframe scale chosen so 720×1920 native maps over the baked screenshot. */
    position: absolute;
    top: 320px;
    left: 87px;
    width: 129.6px;   /* 720 * 0.18 */
    height: 345.6px;  /* 1920 * 0.18 */
    overflow: hidden;
    z-index: 5;
    background: transparent;
}
.dv-totem-iframe {
    position: absolute;
    top: 0; left: 0;
    width: 720px;
    height: 1920px;
    border: none;
    pointer-events: auto;
    transform-origin: top left;
    /* Scale 0.18: keeps iframe content aligned with the baked screenshot. */
    transform: scale(0.18);
}

/* Hand overlay used by totemHand.js to simulate a finger tapping
   buttons on the totem screen. The fingertip in the source PNG sits at
   ~(640, 80) of a 1254x1254 image, so when rendered at width:140 the
   tip is at ~(15, 9) relative to the element top-left. JS positions
   .style.left/.top to put that tip over each target button.

   Hidden by default; orchestrator fades it in only while it's actively
   pressing. Smooth transitions on top/left so it visibly "travels"
   between buttons. mask-image fades the lower wrist into the totem
   body so there's no hard cut-off. */
.dv-totem-hand {
    position: absolute;
    top: 600px;
    left: 75px;
    width: 140px;
    height: auto;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transform-origin: top center;
    transition:
        opacity 0.25s ease,
        top 0.45s cubic-bezier(.55, .08, .30, 1.0),
        left 0.45s cubic-bezier(.55, .08, .30, 1.0),
        transform 0.12s ease-out;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%, black 100%);
            mask-image: linear-gradient(to top, transparent 0%, black 30%, black 100%);
}

.dv-totem-hand.is-tapping {
    transform: translateY(-4px);
}

/* Dashed line flow animation */
@keyframes dashFlow {
    to { stroke-dashoffset: -28; }
}
.dv-transfer-line line.flowing {
    animation: dashFlow 0.8s linear infinite;
}

/* ===== Kine Screen Components ===== */
.ks-header {
    display: flex; align-items: center; gap: 4px;
    background: #333; color: #fff; padding: 4px 6px;
    border-radius: 6px 6px 0 0; font-size: 6px; margin: -6px -8px 6px;
}
.ks-hamburger { font-size: 8px; }
.ks-avatar { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; margin-left: auto; }
.ks-patient-card {
    display: flex; align-items: center; gap: 6px;
    background: #fff; border-radius: 6px; padding: 5px; margin-bottom: 6px;
    border: 1px solid #e0e0e0;
}
.ks-pat-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ks-nav-bar {
    display: flex; gap: 2px; font-size: 5px; padding: 4px 0;
    border-bottom: 1px solid #ddd; margin-bottom: 6px;
    flex-wrap: wrap; justify-content: center;
}
.ks-nav-bar span { padding: 2px 3px; border-radius: 3px; }
.ks-active { background: #FF8800; color: #fff; }
.ks-section-title { font-size: 6px; color: #666; margin-bottom: 4px; text-align: center; }
.ks-routine-card {
    background: #ffe0d0; padding: 5px 6px; border-radius: 6px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 6.5px; font-weight: 600; margin-bottom: 4px;
}
.ks-info-text { font-size: 5.5px; color: #888; text-align: center; }

/* Form */
.ks-form { display: flex; flex-direction: column; gap: 3px; }
.ks-form label { font-size: 5.5px; font-weight: 600; color: #666; }
.ks-input, .ks-select {
    background: #fff; border: 1px solid #ccc; border-radius: 4px;
    padding: 3px 5px; font-size: 6.5px;
}
.ks-input--sm { font-size: 5.5px; }
.ks-btn-row { display: flex; gap: 4px; margin-top: 6px; }
.ks-btn {
    padding: 4px 8px; border: none; border-radius: 4px;
    font-size: 6px; font-weight: 600; cursor: pointer;
}
.ks-btn--primary { background: #FF8800; color: #fff; }
.ks-btn--secondary { background: #e0e0e0; color: #333; }
.ks-btn--full { width: 100%; margin-top: 8px; padding: 6px; }

/* Body filter */
.ks-body-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; justify-content: center; }
.ks-body-svg { width: 40px; height: auto; }
.ks-filter-tag {
    background: #42A4FF; color: #fff; padding: 2px 6px; border-radius: 10px;
    font-size: 6px; font-weight: 600;
}
.ks-exercise-list { display: flex; flex-direction: column; gap: 3px; }
.ks-exercise-card {
    padding: 5px 6px; border-radius: 5px; font-size: 6.5px; font-weight: 500;
}
.ks-ex--pink { background: #f8b4b4; }
.ks-ex--blue { background: #a8c8f0; }
.ks-ex--green { background: #a7d8a7; }
.ks-ex--peach { background: #f8d8a8; }

/* Config */
.ks-modal-header {
    background: #333; color: #fff; padding: 6px; text-align: center;
    font-weight: 700; font-size: 7px; border-radius: 6px 6px 0 0;
    margin: -6px -8px 8px;
}
.ks-config-title { font-size: 8px; font-weight: 700; text-align: center; margin-bottom: 8px; color: #FF8800; }
.ks-config-row {
    display: flex; align-items: center; gap: 4px; margin-bottom: 5px; font-size: 6px;
}
.ks-config-row span:first-child { width: 50px; color: #666; }
.ks-slider { flex: 1; height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.ks-slider-fill { height: 100%; background: #FF8800; border-radius: 3px; }
.ks-val { font-weight: 700; width: 18px; text-align: right; }

/* Assign */
.ks-assign-card {
    background: #fff; border: 1px solid #ddd; border-radius: 6px;
    padding: 6px; margin-bottom: 6px;
}
.ks-assign-routine { font-weight: 700; font-size: 7px; margin-bottom: 3px; }
.ks-assign-patient { font-size: 6px; color: #555; }
.ks-assign-exercises { font-size: 5.5px; color: #888; margin-top: 2px; }
.ks-label-station { font-size: 6px; font-weight: 600; color: #666; display: block; margin: 4px 0 2px; }
.ks-select--big { font-size: 7px; padding: 5px 6px; }
.ks-duration { display: flex; gap: 4px; margin-bottom: 4px; }
.ks-dur-box { background: #fff; border: 1px solid #ccc; border-radius: 4px; padding: 3px 8px; font-size: 6.5px; }

/* Confirm */
.ks-confirm { text-align: center; padding-top: 20px; }
.ks-confetti-wrap { font-size: 14px; margin-bottom: 6px; }
.ks-conf { animation: ks-confetti-fall 1.5s ease-in-out infinite alternate; display: inline-block; }
.ks-conf:nth-child(2) { animation-delay: 0.3s; }
.ks-conf:nth-child(3) { animation-delay: 0.6s; }
@keyframes ks-confetti-fall { from { transform: translateY(-8px) rotate(0deg); } to { transform: translateY(8px) rotate(20deg); } }
.ks-check {
    width: 30px; height: 30px; border-radius: 50%;
    background: #4CAF50; color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 6px;
}
.ks-confirm-title { font-size: 9px; font-weight: 700; margin-bottom: 4px; }
.ks-confirm-detail { font-size: 6.5px; color: #555; }
.ks-confirm-station {
    background: #FF8800; color: #fff; padding: 3px 10px; border-radius: 10px;
    font-size: 7px; font-weight: 700; display: inline-block; margin: 6px 0;
}

@media (max-width: 768px) {
    .dv-kine-phase { padding: 1rem; flex-direction: column; gap: 1rem; }
    .dv-kine-left { width: 100%; align-items: flex-start; }
    .dv-kine-right { width: 100%; }
    .dv-phone-wrap { max-width: 160px; }
    .dv-kine-text { text-align: center; }
}

/* Approval modal */
.demo-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.demo-modal {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.demo-modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--orange);
    margin: 0;
}

.demo-modal-pre {
    flex: 1;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    color: var(--gray-light);
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 200px;
    max-height: 65vh;
    line-height: 1.5;
}

.demo-modal-pre::-webkit-scrollbar {
    width: 6px;
}

.demo-modal-pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}

.demo-modal-pre::-webkit-scrollbar-thumb {
    background: rgba(255, 136, 0, 0.4);
    border-radius: 3px;
}

.demo-modal-pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 136, 0, 0.6);
}

.demo-modal-info {
    font-size: 0.75rem;
    color: var(--gray);
}

.demo-modal-btns {
    display: flex;
    gap: 0.75rem;
}

/* Results CTA */
.demo-result-cta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
    .admin-layout,
    .reports-layout,
    .pain-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .admin-layout .admin-text,
    .reports-layout .reports-text,
    .pain-layout .pain-text {
        text-align: center;
    }
    .admin-layout .focus-desc,
    .reports-layout .focus-desc,
    .pain-layout .focus-desc {
        margin: 0 auto;
    }
    .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .focus-layout, .focus-layout--reverse {
        grid-template-columns: 1fr; gap: 2rem; direction: ltr;
    }
    .focus-media { order: -1; }
    .focus-product-img, .focus-product-img--large { max-height: 260px; }
    .contexts-grid {
        grid-template-columns: 1fr; max-width: 400px; margin: 0 auto;
    }
    .constellation-node img { width: 60px; height: 60px; }
    .node-label { font-size: 0.625rem; }
    .phone-frame {
        width: 240px; height: 500px; transform: none;
    }
    .phone-frame:hover { transform: none; }
    .tv-ui-body { grid-template-columns: 1fr; gap: 1rem; }
    .tv-body-outline { width: 80px; height: 130px; }
    .finale-contexts { flex-direction: column; align-items: center; }
    .flow-connector { width: 40px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
    .gym-screen { max-width: 100%; }
    .admin-screen { max-width: 100%; }
}

@media (max-width: 480px) {
    .hero-product-img { max-height: 200px; }
    .constellation { height: min(400px, 55vh); }
    .haptic-band { padding: 1rem; gap: 0.75rem; }
    .haptic-zone { width: 56px; height: 56px; }
    .intro-line { font-size: 1.25rem; }
    .hero-links { flex-direction: column; align-items: center; }
    .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-charts { grid-template-columns: 1fr; }
    /* Demo responsive */
    .demo-body { padding: 1.5rem 1rem; }
    .demo-options { flex-direction: column; }
    .demo-opt { width: 100%; text-align: center; }
    .demo-config-grid { flex-direction: column; align-items: center; }
    .demo-compare { flex-direction: column; }
    .demo-compare-arrow { transform: rotate(90deg); }
    .demo-impact { flex-direction: column; }
    .demo-validation-btns { flex-direction: column; }
}