/* =========================================================================
   LaCardio · Design tokens
   Fuente canónica: educacion-continua-eventos/styles.css (set --lc-* completo)
   + capa de alias legados usada por la familia especialidad (MET/CARD/TRAS).
   Regla: código NUEVO usa solo tokens --lc-*. Los alias existen para que los
   componentes extraídos funcionen tal cual; se retiran en el port a React.
   ========================================================================= */
:root {

  /* — Marca ————————————————————————————————————————————————— */
  --lc-brand-primary:        #002D72;
  --lc-brand-primary-hover:  #00245C;
  --lc-brand-primary-active: #001B45;
  --lc-brand-secondary:      #E40046;
  --lc-brand-secondary-hover:#B70038;

  /* — Texto ———————————————————————————————————————————————— */
  --lc-text-primary:   #080808;
  --lc-text-secondary: #616161;
  --lc-text-on-brand:  #ffffff;

  /* — Fondos ——————————————————————————————————————————————— */
  --lc-bg-page:    #F4F3F0;
  --lc-bg-surface: #ffffff;
  --lc-bg-topbar:  #EEF5FF;

  /* — Bordes ——————————————————————————————————————————————— */
  --lc-border-default: #C5C4C1;

  /* — Sombras ——————————————————————————————————————————————— */
  --lc-shadow-header:     0px 9px 20.6px 0px rgba(196, 210, 216, 0.4);
  --lc-shadow-bottom-nav: 0px 6px 12px 0px rgba(3, 14, 37, 0.35);
  --lc-shadow-card:       0 2px 8px rgba(0, 0, 0, 0.10);
  --lc-shadow-btn:        0 4px 14px rgba(0, 45, 114, 0.40);

  /* — Tipografía ———————————————————————————————————————————— */
  --lc-font-heading: 'Fira Sans', sans-serif;
  --lc-font-body:    'Open Sans', sans-serif;

  /* — Escala de texto (desktop) ————————————————————————————— */
  --lc-size-h1:        46px;
  --lc-size-h2:        40px;
  --lc-size-h3:        36px;
  --lc-size-h4:        32px;
  --lc-size-h5:        24px;
  --lc-size-h6:        20px;
  --lc-size-body:      18px;
  --lc-size-body-sm:   14px;
  --lc-size-caption:   12px;
  --lc-size-eyebrow:   14px;
  --lc-size-btn:       16px;
  --lc-size-btn-lg:    18px;

  /* — Line-heights ——————————————————————————————————————————— */
  --lc-lh-h1: 56px;
  --lc-lh-h2: 52px;
  --lc-lh-h3: 44px;
  --lc-lh-h4: 41px;
  --lc-lh-h5: 32px;
  --lc-lh-h6: 28px;
  --lc-lh-body: 24px;
  --lc-lh-body-sm: 20px;

  /* — Letter-spacing ———————————————————————————————————————— */
  --lc-ls-heading:  -1px;
  --lc-ls-body:      1.5px;
  --lc-ls-eyebrow:   1.625px;

  /* — Espaciado ————————————————————————————————————————————— */
  --lc-space-xs:  4px;
  --lc-space-sm:  8px;
  --lc-space-md:  16px;
  --lc-space-lg:  24px;
  --lc-space-xl:  32px;
  --lc-space-2xl: 48px;
  --lc-space-3xl: 64px;
  --lc-space-4xl: 80px;

  /* — Radios ———————————————————————————————————————————————— */
  --lc-radius-sm:   4px;
  --lc-radius-md:   8px;
  --lc-radius-lg:   12px;
  --lc-radius-xl:   16px;
  --lc-radius-full: 9999px;

  /* — Estructura del header ————————————————————————————————— */
  --lc-mobile-header-h:  70px;
  --lc-topbar-h:         36px;
  --lc-navbar-h:         90px;
  --lc-desktop-header-h: calc(var(--lc-topbar-h) + var(--lc-navbar-h));

  /* — Layout de página —————————————————————————————————————— */
  /* Contenido centrado a 1200px; padding lateral 120px hasta 1440px y
     creciente en pantallas más anchas (fondos a sangre). */
  --page-pad-x: max(120px, calc((100% - 1200px) / 2));
}

/* =========================================================================
   ALIAS LEGADOS — familia especialidad (salud-metabolica, cardiologia,
   trasplantes). ⚠️ No usar en código nuevo. Deuda documentada:
   - --radius-sm (6px) ≠ --lc-radius-sm (4px): se conservan ambos.
   - --text-secondary (#474644 ink-700) ≠ --lc-text-secondary
     (#616161): se conservan ambos.
   ========================================================================= */
:root {
  --color-royal-blue: var(--lc-brand-primary);
  --color-jordy-blue: #AACCFF;
  --color-blue-50: #E5EBF6;   /* texto secundario sobre azul (diff cards) */
  --color-blue-100: #C3D0EA;  /* subtítulos/eyebrows sobre azul */
  --color-blue-200: #94A9DB;  /* texto principal del diferenciador */
  --color-blue-card-bg: #001B45; /* blue/700 · fondo cards del diff */
  --color-blue-500: #1D386D;  /* blue/500 · títulos de preguntas FAQ */
  --color-red-500: var(--lc-brand-secondary);
  --color-black: var(--lc-text-primary);
  --color-white: #FFFFFF;
  --color-gray-1: var(--lc-text-secondary);
  --color-gray-2: #C9C9C9;
  --color-ink-700: #474644;   /* text/secondary */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;

  --font-display: var(--lc-font-heading);
  --font-body: var(--lc-font-body);

  --fs-caption: 12px;
  --fs-sm: 14px;
  --fs-body: 18px;
  --fs-h6: 20px;
  --fs-h5: 24px;
  --fs-h4: 32px;
  --fs-h3: 36px;
  --fs-h2: 40px;
  --fs-h1: 46px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --shadow-header: var(--lc-shadow-header);
  /* Sombra de tarjetas info (Por qué elegir) */
  --shadow-info: 0px 15px 16.1px 0px rgba(135, 145, 162, 0.06),
    0px 13px 20.5px -6px rgba(135, 145, 162, 0),
    0px 45px 45px -19px rgba(135, 145, 162, 0.18);
  /* "sombra-timeline" de las cards del proceso paso a paso:
     highlight blanco superior-izq + drop gris inferior-der. */
  --shadow-timeline: -6px -8px 16.5px 0px rgba(255, 255, 255, 0.68),
    15px 26px 25.1px -12px rgba(146, 146, 146, 0.24);

  --background-page: var(--lc-bg-page);
  --brand-primary: var(--lc-brand-primary);
  --brand-accent: var(--lc-brand-secondary);
  --text-primary: var(--lc-text-primary);
  --text-secondary: var(--color-ink-700);
  --text-muted: var(--lc-text-secondary);
  --text-on-primary: var(--color-white);
  --surface: var(--color-white);
  --surface-soft: var(--color-blue-50);
  --border-subtle: var(--color-gray-2);
  --border-default: var(--lc-border-default);

  --btn-primary-bg: var(--brand-accent);
  --btn-primary-text: var(--color-white);
  --btn-radius: var(--radius-sm);
  --btn-pad-y: var(--space-4);
  --btn-pad-x: 30px;
}