/* =========================================================
   Sanus Pharma — reset.css
   Reset moderno + variables globales (única fuente de verdad)
   ========================================================= */

:root {
  /* Paleta institucional (derivada del logotipo Sanus Pharma) */
  --primary-blue: #1497d4;       /* azul institucional del escudo */
  --secondary-blue: #5cb8e8;     /* azul claro: gradientes y hover */
  --deep-blue: #0a5b85;          /* azul profundo: títulos y secciones */
  --slate-blue: #5f7079;         /* gris azulado de la parte alta del escudo */
  --gray: #5b6166;               /* gris corporativo */
  --pharma-gray: #41464a;        /* gris intenso de la palabra "PHARMA" */
  --light-gray: #f3f7fb;
  --white: #ffffff;
  --text-color: #232b32;         /* texto principal, basado en el gris del logo */
  --border-color: rgba(20, 151, 212, .15);

  /* Derivados de color */
  --text-soft: #4a545d;
  --text-muted: #6b757d;
  --bg: var(--white);
  --bg-alt: var(--light-gray);
  --primary-blue-08: rgba(20, 151, 212, .08);
  --primary-blue-12: rgba(20, 151, 212, .12);
  --deep-blue-90: rgba(10, 91, 133, .9);

  /* Gradientes inspirados en el logotipo */
  --gradient-brand: linear-gradient(135deg, var(--secondary-blue) 0%, var(--primary-blue) 48%, var(--deep-blue) 100%);
  --gradient-shield: linear-gradient(160deg, var(--slate-blue) 0%, var(--primary-blue) 58%, var(--deep-blue) 100%);
  --gradient-soft: linear-gradient(135deg, rgba(92, 184, 232, .14), rgba(20, 151, 212, .05));
  --gradient-text: linear-gradient(120deg, var(--deep-blue), var(--primary-blue));
  --gradient-deep: linear-gradient(155deg, var(--deep-blue) 0%, #063f5e 100%);

  /* Cristal / glassmorphism */
  --glass-bg: rgba(255, 255, 255, .68);
  --glass-bg-strong: rgba(255, 255, 255, .82);
  --glass-border: rgba(255, 255, 255, .7);
  --glass-blur: 16px;

  /* Sombras suaves */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-sm: 0 4px 16px rgba(10, 91, 133, .07);
  --shadow-md: 0 14px 40px rgba(10, 91, 133, .10);
  --shadow-lg: 0 28px 70px rgba(10, 91, 133, .16);
  --shadow-glow: 0 10px 34px rgba(20, 151, 212, .36);

  /* Tipografía */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;

  /* Escala fluida */
  --fs-eyebrow: clamp(.72rem, .68rem + .2vw, .82rem);
  --fs-body: clamp(1rem, .96rem + .2vw, 1.075rem);
  --fs-lead: clamp(1.05rem, 1rem + .55vw, 1.3rem);
  --fs-h3: clamp(1.2rem, 1.05rem + .7vw, 1.55rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem);
  --fs-h1: clamp(2.5rem, 1.7rem + 4vw, 5rem);
  --fs-stat: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1.1rem, 3vw, 2rem);
  --section-y: clamp(3rem, 2rem + 4vw, 5.5rem);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* Navbar */
  --nav-h: 76px;

  /* Movimiento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .22s;
  --t: .4s;
  --t-slow: .7s;

  /* Z-index */
  --z-bg: -1;
  --z-base: 1;
  --z-nav: 100;
  --z-progress: 110;
  --z-toast: 200;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-color);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.12;
  color: var(--text-color);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--primary-blue);
  color: var(--white);
}