/* ============================================================ MediLink DR — base.css Design tokens, reset, tipografía base, utilidades ============================================================ */ /* ----- Design tokens ----- */ :root { /* Paleta de marca — azul cyan brillante + morado del logo oficial MediLink DR */ --primary: #1FA0DA; /* Cyan brillante (color "Medi" del logo) */ --primary-deep: #0E86BD; /* Cyan oscuro — hover de botones, gradientes */ --primary-mid: #4DB8E5; /* Cyan medio — acentos secundarios */ --primary-soft: #E1F4FB; /* Cyan muy claro — fondos suaves de sección */ --primary-tint: #F4FAFD; /* Cyan casi blanco — fondos sutiles */ --accent: #4F2775; /* Morado (color "link" + badge DR del logo) */ --accent-deep: #2D1547; /* Morado oscuro — footer, secciones dark */ --accent-soft: #F2EAF8; /* Morado muy claro — fondos suaves alternativos */ --white: #FFFFFF; --ink: #0F1A2B; --ink-soft: #5A6B82; --border: #E2E8F0; /* Tipografía — Mukta (sans-serif moderna, multi-weight) */ --font-display: "Mukta", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Mukta", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Escalas fluidas (clamp) */ --fs-hero: clamp(48px, 7vw, 112px); --fs-h1: clamp(40px, 5.5vw, 80px); --fs-h2: clamp(32px, 4vw, 60px); --fs-h3: clamp(22px, 2.2vw, 32px); --fs-h4: clamp(18px, 1.4vw, 22px); --fs-body: clamp(16px, 1.05vw, 18px); --fs-small: 14px; /* Espaciado (sistema 8px) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 56px; --sp-9: 72px; --sp-10: 96px; --sp-11: 128px; --sp-12: 160px; --sp-13: 200px; /* Radios */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 24px; --r-full: 999px; /* Sombras (tonalidad cyan-morado sutil para coherencia con la marca) */ --shadow-sm: 0 1px 2px rgba(45, 21, 71, 0.04), 0 1px 3px rgba(45, 21, 71, 0.06); --shadow-md: 0 4px 12px rgba(45, 21, 71, 0.06), 0 10px 30px rgba(45, 21, 71, 0.08); --shadow-lg: 0 20px 60px rgba(45, 21, 71, 0.12); /* Transiciones */ --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 280ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Layout */ --container-max: 1280px; --container-pad: clamp(20px, 4vw, 56px); --section-py: clamp(64px, 10vh, 144px); } /* ----- Fonts ----- Mukta se carga desde Google Fonts CDN vía en el de cada página. Si en el futuro se quiere auto-hospedar: descargar Mukta WOFF2 (weights 300/400/500/600/700) desde gwfh.mranftl.com, colocar en assets/fonts/, y añadir bloques @font-face aquí. */ /* ----- Reset minimalista ----- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, video, svg { max-width: 100%; display: block; height: auto; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } a { color: var(--primary); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--primary-deep); } ul, ol { list-style: none; } input, textarea, select { font: inherit; color: inherit; } /* ----- Tipografía base ----- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { max-width: 70ch; } .lead { font-size: clamp(18px, 1.3vw, 22px); color: var(--ink-soft); line-height: 1.55; } strong, b { font-weight: 600; color: var(--ink); } /* ----- Utilidades ----- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--section-py); } .section--soft { background: var(--primary-tint); } .section--brand { background: var(--accent-deep); color: var(--white); } .section--brand h1, .section--brand h2, .section--brand h3 { color: var(--white); } .eyebrow { display: inline-block; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--sp-4); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip to content link — A11y: visible solo en focus */ .skip-link { position: fixed; top: 12px; left: 12px; z-index: 9999; padding: 12px 20px; background: var(--accent); color: var(--white); font-size: 14px; font-weight: 600; border-radius: var(--r-md); text-decoration: none; transform: translateY(-200%); transition: transform 220ms cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 8px 24px rgba(45, 21, 71, 0.35); } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--white); outline-offset: 2px; color: var(--white); } .text-balance { text-wrap: balance; } .text-center { text-align: center; } /* ----- Focus styles ----- */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-sm); } /* ----- Selección ----- */ ::selection { background: var(--primary); color: var(--white); } /* ----- Reduce motion ----- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }