/* ===== Clínica Metamorphosis · Tests — estilos globales ===== Extraído del bloque del diseño de Claude Design. El resto del estilo es inline en cada vista (fiel al diseño original). Fuentes (Sora + Space Grotesk) se cargan vía en el de cada vista. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #ece8f6; font-family: 'Space Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } ::-webkit-scrollbar { width: 0; height: 0; } @keyframes mmfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes mmfloat2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } } @keyframes mmpulse { 0%, 100% { opacity: .9; } 50% { opacity: .55; } } /* Marco-app compartido por las 4 pantallas. Móvil: ocupa toda la pantalla (app nativa). Desktop: mockup de teléfono centrado que scrollea internamente (así los headers/footers sticky se comportan dentro del marco). */ .mm-stage { position: relative; min-height: 100vh; display: flex; justify-content: center; background: radial-gradient(120% 80% at 50% 0%, #efe9fb 0%, #e4def4 60%, #ded6f0 100%); } .mm-frame { position: relative; width: 100%; background: #ffffff; overflow: hidden; } /* Móvil / pantallas angostas: edge-to-edge, sin gradiente ni marco */ @media (max-width: 600px) { .mm-stage { background: #ffffff; } .mm-frame { min-height: 100vh; } } /* Desktop / tablet: teléfono centrado sobre el gradiente, scroll interno */ @media (min-width: 601px) { .mm-stage { align-items: center; padding: 28px 16px; } .mm-frame { max-width: 420px; height: min(900px, calc(100vh - 56px)); border-radius: 36px; box-shadow: 0 30px 90px rgba(40, 22, 90, .28); overflow-y: auto; } .mm-frame::-webkit-scrollbar { width: 0; } } /* Reseteo mínimo para botones nativos usados como CTA (mantienen el look inline) */ button.mm-reset { font: inherit; color: inherit; border: none; background: none; padding: 0; margin: 0; cursor: pointer; text-align: inherit; width: 100%; }