/**
 * VARIABLES GLOBALES Y SISTEMA DE DISEÑO
 * Dr. Andrés Herrera - Cirugía Plástica y Estética
 *
 * Paleta de colores: Azul Médico Cirujano (Surgical Blue Palette)
 * Tipografías, espaciados, sombras y capas de elevación
 */

:root {
  /* ==========================================================================
     1. PALETA DE COLORES PRINCIPAL (AZUL MÉDICO CIRUJANO)
     ========================================================================== */
  --marfil: #F4F8FB;              /* Fondo general clínico suave, limpio y sofisticado */
  --marfil-suave: #EBF2F7;        /* Superficie secundaria / tarjetas alternas */
  --marfil-medio: #D3E2ED;        /* Bordes y separadores sutiles */
  
  --blanco: #FFFFFF;              /* Fondo de tarjetas y elementos contrastados */
  --blanco-translucido: rgba(255, 255, 255, 0.9);
  --blanco-vidrio: rgba(255, 255, 255, 0.14);
  
  --antracita: #0B192C;           /* Textos principales y fondos oscuros de lujo (Navy Slate) */
  --antracita-puro: #060D17;      /* Fondo hero y footer profundo (Midnight Navy) */
  --antracita-suave: #1E3A5F;     /* Tarjetas oscuras y contraste intermedio */
  
  /* Azul Médico Cirujano y Acabados */
  --dorado: #0F75BD;              /* Color acento principal: Azul Quirúrgico / Cirujano */
  --dorado-oscuro: #094B7A;       /* Estado hover de elementos: Azul Marino Quirúrgico */
  --dorado-claro: #38BDF8;        /* Resplandores y brillos: Celeste / Cyan Médico */
  --dorado-translucido: rgba(15, 117, 189, 0.12);
  --dorado-glow: rgba(15, 117, 189, 0.35);

  --gris-texto: #4A5B6C;          /* Texto secundario y descripciones (Gris Acero) */
  --gris-claro: #8295A5;          /* Textos terciarios y placeholders */
  --gris-borde: rgba(11, 25, 44, 0.08); /* Líneas finas divisoras */

  --salvia: #0284C7;              /* Acento médico de bienestar y tecnología */
  --salvia-suave: #E0F2FE;        /* Fondos de insignias y tags */
  --salvia-oscuro: #0369A1;       /* Contraste sobre fondos claros */

  --exito: #16A34A;               /* Verde de confirmación */
  --whatsapp: #25D366;            /* Verde oficial de WhatsApp */
  --whatsapp-hover: #20BA5A;
  --error: #DC2626;               /* Validación de formularios */

  /* ==========================================================================
     2. TIPOGRAFÍAS
     ========================================================================== */
  --fuente-titulos: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fuente-cuerpo: 'Jost', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fuente-firma: 'Playfair Display', cursive, serif;

  /* Tamaños de fuente fluidos y legibles */
  --fs-hero-titulo: clamp(2.4rem, 5vw + 1rem, 4.2rem);
  --fs-h1: clamp(2.2rem, 4vw + 0.8rem, 3.4rem);
  --fs-h2: clamp(1.8rem, 3vw + 0.6rem, 2.6rem);
  --fs-h3: clamp(1.3rem, 2vw + 0.4rem, 1.75rem);
  --fs-h4: 1.2rem;
  --fs-cuerpo-grande: 1.125rem;
  --fs-cuerpo: 1rem;
  --fs-pequeno: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* Pesos de fuente */
  --fw-ligera: 300;
  --fw-regular: 400;
  --fw-media: 500;
  --fw-seminegrita: 600;
  --fw-negrita: 700;

  /* Interlineados */
  --lh-titulos: 1.18;
  --lh-subtitulos: 1.35;
  --lh-cuerpo: 1.68;

  /* ==========================================================================
     3. ESPACIADOS Y CONTENEDORES
     ========================================================================== */
  --espacio-xs: 0.25rem;   /* 4px */
  --espacio-sm: 0.5rem;    /* 8px */
  --espacio-md: 1rem;      /* 16px */
  --espacio-lg: 1.5rem;    /* 24px */
  --espacio-xl: 2rem;      /* 32px */
  --espacio-2xl: 3rem;     /* 48px */
  --espacio-3xl: 4.5rem;   /* 72px */
  --espacio-4xl: 6.5rem;   /* 104px */

  --seccion-padding-v: clamp(4rem, 8vw, 7.5rem);
  --seccion-padding-h: clamp(1.25rem, 4vw, 3rem);

  --ancho-maximo: 1240px;
  --ancho-reducido: 980px;
  --ancho-lectura: 760px;

  /* ==========================================================================
     4. RADIOS DE BORDE (BORDER-RADIUS)
     ========================================================================== */
  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-card: 16px;     /* Radio estándar exigido para cards */
  --radio-lg: 22px;
  --radio-xl: 30px;
  --radio-pildora: 9999px; /* Botones cápsula y badges */
  --radio-redondo: 50%;

  /* ==========================================================================
     5. SOMBRAS (BOX SHADOWS) - ELEGANTES Y MÉDICAS
     ========================================================================== */
  --sombra-suave: 0 4px 20px rgba(11, 25, 44, 0.05);
  --sombra-media: 0 10px 30px rgba(11, 25, 44, 0.08);
  --sombra-elevada: 0 18px 45px rgba(11, 25, 44, 0.12);
  --sombra-flotante: 0 25px 60px rgba(11, 25, 44, 0.16);
  --sombra-dorada: 0 8px 25px rgba(15, 117, 189, 0.32);
  --sombra-dorada-hover: 0 14px 35px rgba(15, 117, 189, 0.48);
  --sombra-navbar: 0 6px 25px rgba(11, 25, 44, 0.08);

  /* ==========================================================================
     6. TRANSICIONES Y TIEMPOS
     ========================================================================== */
  --transicion-rapida: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transicion-estandar: 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  --transicion-suave: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transicion-rebote: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==========================================================================
     7. NIVELES DE CAPAS (Z-INDEX)
     ========================================================================== */
  --z-fondo: -1;
  --z-base: 1;
  --z-elementos: 10;
  --z-sticky: 100;
  --z-navbar: 1000;
  --z-menu-movil: 1050;
  --z-flotantes: 1100;
  --z-modal: 1200;
  --z-preloader: 2000;
}