/* ============================================================ premium-fx.css — Efectos "estilo Apple" reutilizables (Healthor) AUTO (sin tocar HTML): resorte al presionar, profundidad en tarjetas, sheen en CTAs con gradiente, reveal al scroll (protegido: solo se oculta si el JS marcó .fx-on en ). OPT-IN (con atributos): [data-fx-count], [data-fx-seg], [data-fx-ring]. Token-agnóstico: usa fallbacks, funciona en landing y app. Respeta prefers-reduced-motion. Cargar AL FINAL del head. Fase 13 · 2026-07-03 ============================================================ */ /* ---------- 2 · Física de resorte (press) ---------- */ .btn, .choice, .icon-btn, .fcard[role="link"], [data-fx-spring] { transition: transform .4s cubic-bezier(.34,1.4,.5,1), box-shadow .35s ease, filter .3s ease; } .btn:active, .choice:active, .icon-btn:active, .fcard[role="link"]:active, [data-fx-spring]:active { transform: scale(.965); } /* ---------- 6 · Profundidad (luz superior + sombra ambiental) ---------- */ .fcard, .labcard, [data-fx-depth] { box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 16px 34px -20px rgba(28,30,60,.30); } .fcard:hover, .labcard:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 26px 50px -22px rgba(28,30,60,.36); } html[data-theme="dark"] .fcard, html[data-theme="dark"] .labcard, html[data-theme="dark"] [data-fx-depth] { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 38px -20px rgba(0,0,0,.65); } html[data-theme="dark"] .fcard:hover, html[data-theme="dark"] .labcard:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 28px 54px -22px rgba(0,0,0,.72); } /* ---------- 8 · Sheen (barrido de luz) en CTA con gradiente ---------- */ .btn-grad, .btn-primary, [data-fx-sheen] { position: relative; overflow: hidden; } .btn-grad::after, .btn-primary::after, [data-fx-sheen]::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); transition: left .7s ease; pointer-events: none; } .btn-grad:hover::after, .btn-primary:hover::after, [data-fx-sheen]:hover::after { left: 130%; } /* ---------- 9 · Revelado al scroll (guardado por .fx-on) ---------- */ .fx-on .fx-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .fx-on .fx-reveal.fx-in { opacity: 1; transform: none; } /* ---------- 7 · Control segmentado (opt-in) ---------- */ [data-fx-seg] { position: relative; } [data-fx-seg] .fx-seg-ind { position: absolute; z-index: 0; top: 4px; left: 4px; height: calc(100% - 8px); background: var(--surface, #fff); border-radius: 9px; box-shadow: 0 2px 8px rgba(20,22,45,.14), inset 0 1px 0 rgba(255,255,255,.85); transition: transform .35s cubic-bezier(.34,1.4,.5,1), width .35s cubic-bezier(.34,1.4,.5,1); } html[data-theme="dark"] [data-fx-seg] .fx-seg-ind { background: var(--surface-2, #23252f); box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1); } /* ---------- 3 · Anillos de progreso (opt-in) ---------- */ [data-fx-ring] circle { fill: none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.3s cubic-bezier(.3,.7,.2,1); } /* ---------- Accesibilidad: respeta reduce motion ---------- */ @media (prefers-reduced-motion: reduce) { .fx-on .fx-reveal { opacity: 1 !important; transform: none !important; } .btn:active, .choice:active, .icon-btn:active, .fcard[role="link"]:active, .fcard:hover, .labcard:hover { transform: none !important; } .btn-grad::after, .btn-primary::after, [data-fx-sheen]::after { display: none; } }