/* ==========================================================================
   MediCenter · Design tokens — DERIVADOS DEL LOGO OFICIAL
   --------------------------------------------------------------------------
   Fuente: storage/refence/logo.png (teal de marca #48C3C0 muestreado) +
   referencia visual web.png (teals de accion/profundo muestreados).
   Direccion: teal/turquesa medico + blanco + neutrales frios + texto oscuro.
   Valores de texto/accion ajustados para contraste AA sobre blanco.
   ========================================================================== */
:root{
  /* --- Marca (teal) --- */
  --mc-brand-bright:#48C3C0;        /* teal del logo: tints, iconos sobre circulos, detalles */
  --mc-brand-primary:#0E7A76;       /* teal texto/acento (eyebrows, numeros, enlaces) — AA */
  --mc-brand-primary-hover:#0B6663;
  --mc-brand-primary-active:#095452;
  --mc-brand-dark:#0C6B68;
  --mc-brand-deep:#0F5E5C;          /* banda CTA / superficies teal profundas — texto blanco AA */
  --mc-brand-soft:#E8F6F5;          /* fondos suaves (circulos de icono) */
  --mc-brand-subtle:#F3FAF9;

  /* --- Accion --- */
  --mc-action-primary:#0A7573;      /* botones llenos, texto blanco — AA */
  --mc-action-primary-hover:#086361;
  --mc-action-secondary:#0E7A76;    /* borde/texto de botones outline */

  /* --- Fondos --- */
  --mc-bg-page:#FFFFFF;
  --mc-bg-surface:#FFFFFF;
  --mc-bg-soft:#F6F9F9;             /* seccion servicios / bandas suaves */
  --mc-bg-inverse:#0F5E5C;

  /* --- Texto --- */
  --mc-text-primary:#10252B;        /* near-black frio (coincide con wordmark) */
  --mc-text-secondary:#4E6065;
  --mc-text-muted:#74858A;
  --mc-text-inverse:#FFFFFF;

  /* --- Bordes --- */
  --mc-border-default:#DCE7E7;
  --mc-border-strong:#C3D3D3;

  /* --- Semanticos --- */
  --mc-success:#2E7D5B;
  --mc-warning:#A9761A;
  --mc-danger:#B0453B;
  --mc-info:#2C6E8F;

  /* --- Tipografia --- */
  --mc-font-serif:Georgia,"Times New Roman",Cambria,serif;      /* titulares (coincide con logo) */
  --mc-font-sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* --- Radios / espaciado / sombra --- */
  --mc-radius-sm:8px;
  --mc-radius:12px;
  --mc-radius-lg:16px;
  --mc-shadow-card:0 1px 2px rgba(16,37,43,.04), 0 6px 16px rgba(16,37,43,.05);
  --mc-container:1240px;

  /* --- Escala de spacing (base 4px) --- */
  --mc-space-1:4px;
  --mc-space-2:8px;
  --mc-space-3:12px;
  --mc-space-4:16px;
  --mc-space-6:24px;
  --mc-space-8:32px;
  --mc-space-12:48px;
  --mc-space-16:64px;
  --mc-space-20:80px;
  --mc-space-24:96px;
  --mc-section-y:var(--mc-space-16);   /* ritmo vertical de seccion */
  --mc-header-h:80px;
}