:root{ --blue-900:#1e3a5f; --blue-700:#2563eb; --blue-600:#3b82f6; --blue-400:#60a5fa; --blue-200:#bfdbfe; --blue-100:#dbeafe; --blue-50:#eff6ff; --ink-900:#1e293b; --ink-700:#334155; --ink-500:#64748b; --ink-300:#94a3b8; --white:#ffffff; --surface:#f7f9fc; --border:#e2e8f0; --green:#16a34a; --amber:#d97706; --radius:14px; --shadow-sm:0 1px 2px rgba(30,58,95,.06); --shadow-md:0 6px 20px rgba(30,58,95,.08); --shadow-lg:0 16px 40px rgba(30,58,95,.14); } *{box-sizing:border-box;} html,body{height:100%;} /* font-size fijo a propósito: la landing mueve el font-size de para su rejilla rem, y así el texto de la app no hereda ese tamaño. */ body{margin:0; font-size:16px; font-family:'Inter',system-ui,-apple-system,sans-serif; background:linear-gradient(180deg,var(--blue-50) 0%, var(--surface) 320px); color:var(--ink-900); min-height:100dvh; -webkit-font-smoothing:antialiased;} button{font-family:inherit;cursor:pointer;} input,textarea,select{font-family:inherit;} ::selection{background:var(--blue-200);} .hidden{display:none !important;} .fade-in{animation:fadeIn .35s ease-out both;} .fade-slide{animation:fadeSlide .4s cubic-bezier(.22,.9,.32,1) both;} @keyframes fadeIn{from{opacity:0} to{opacity:1}} @keyframes fadeSlide{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}} @keyframes popIn{from{opacity:0; transform:scale(.94)} to{opacity:1; transform:scale(1)}} @keyframes spin{to{transform:rotate(360deg)}} .stagger > *{animation:fadeSlide .4s cubic-bezier(.22,.9,.32,1) both;} .spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite; display:inline-block;} /* Foco visible por teclado (accesibilidad) — no aparece al hacer clic con mouse */ :focus-visible{outline:2px solid var(--blue-600); outline-offset:2px; border-radius:4px;} .nav-item:focus-visible, .etb:focus-visible, .style-chip:focus-visible, .color-swatch:focus-visible{outline-offset:1px;} /* Respeta la preferencia de reducir movimiento del sistema */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }