/* ========================================
   RESET Y VARIABLES CSS - SMARTCLINIC
   ======================================== */

/* Reset básico y eficiente */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  line-height: 1.6;
  overflow-x: hidden;
}

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

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

/* === Quitar tap highlight en móviles === */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Permitir selección de texto donde sea necesario */
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
li,
input,
textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Quitar outline azul al hacer focus */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* Agregar un focus visible más bonito (accesibilidad) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* Variables del sistema */
:root {
  /* Colores adicionales para diferenciadores */
  --color-accent-lighter: rgba(255, 107, 107, 0.1);
  --space-6xl: 6rem;
  /* Paleta de colores principal - Tema Clínica */
  --color-white: #ffffff;
  --color-off-white: #f6f6f6;
  --color-light-gray: #e8edf2;
  --color-gray: #b8c5d3;
  --color-medium-gray: #7a8a9e;
  --color-dark-gray: #4a5768;
  --color-text-primary: #111217;
  --color-text-secondary: #666e75;

  /* Azules clínicos */
  --color-primary: #0a5f7d;
  --color-primary-light: #1b7a9f;
  --color-primary-lighter: #d6e9f0;
  --color-primary-dark: #083e52;

  /* Acentos */
  --color-accent: #007a6b;
  --color-accent-light: #00a08b;
  --color-accent-hover: #005a4f;

  /* Estados */
  --color-success: #00a878;
  --color-warning: #f49d37;
  --color-error: #e63946;
  --color-info: #457b9d;

  /* Overlays */
  --overlay-light: rgba(17, 18, 23, 0.4);
  --overlay-medium: rgba(17, 18, 23, 0.55);
  --overlay-dark: rgba(17, 18, 23, 0.75);
  /* Overlays para hero */
  --hero-overlay-primary: rgba(10, 30, 40, 0.65);
  --hero-overlay-secondary: rgba(10, 30, 40, 0.5);

  /* Colores para hero */
  --hero-accent: #a8dadc;
  --hero-feature-icon: #89c9d1;

  /* Tipografía */
  /* --font-primary: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-display: "Spectral", Georgia, serif; */

  --font-primary: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Lora", Georgia, serif;

  /* Tamaños de fuente */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.75rem; /* 60px */

  /* Pesos de fuente */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Espaciado */
  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem; /* 8px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4rem; /* 64px */
  --space-4xl: 6rem; /* 96px */
  --space-5xl: 8rem; /* 128px */

  /* Layout */
  --max-width-content: 1280px;
  --max-width-text: 65ch;
  --header-height: 80px;
  --header-height-scroll: 64px;

  /* Border radius - Diseño cuadrado */
  --radius-none: 0;
  --radius-sm: 2px; /* Solo para casos muy específicos */

  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(17, 18, 23, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(17, 18, 23, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(17, 18, 23, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(17, 18, 23, 0.12);

  /* Transiciones */
  --transition-fast: 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Z-index */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* Media queries personalizadas */
@media (max-width: 768px) {
  :root {
    --text-4xl: 2rem;
    --text-5xl: 2.5rem;
    --text-6xl: 3rem;
    --header-height: 64px;
    --header-height-scroll: 56px;
  }
}