/* Tokens de diseño - Grupo CYFAC Médica. Generados desde DESIGN.md. */
:root {
  /* Marca (logo) */
  --cyfac-azul: #0a4c86;
  --cyfac-turquesa: #04b7a4;
  --cyfac-verde: #2bb673;

  /* Superficies */
  --color-exterior: #14191d;        /* fondo base */
  --color-panel-a: #232a30;         /* degradado de página: claro */
  --color-panel-b: #14191d;         /* degradado de página: oscuro */
  --color-pie: #07090b;             /* pie de página */
  --color-tarjeta: rgba(255, 255, 255, 0.06);
  --color-tarjeta-2: rgba(255, 255, 255, 0.035);
  --color-borde: rgba(255, 255, 255, 0.08);
  --color-oscurecer: rgba(12, 16, 20, 0.82);

  /* Secciones claras (sin foto de fondo) */
  --claro-fondo: #f3f5f6;
  --claro-fondo-2: #ffffff;         /* tarjetas y pie */
  --claro-texto: #14191d;
  --claro-texto-2: #4a5560;
  --claro-texto-3: #5f6b75;
  --claro-borde: rgba(20, 25, 29, 0.1);
  --claro-insignia: #e6ebee;
  --texto-sobre-foto: #f2f5f7;      /* texto claro fijo sobre fotos y sobre el azul */

  /* Canales RGB para transparencias (se usan como rgba(var(--rgb-x), .5)) */
  --rgb-tinta: 12, 16, 20;          /* oscurecidos sobre fotos */
  --rgb-menu: 20, 25, 29;           /* fondo del menú al bajar */
  --rgb-blanco: 255, 255, 255;
  --rgb-turquesa: 4, 183, 164;
  --rgb-verde: 43, 182, 115;

  /* Texto */
  --color-texto: #f2f5f7;
  --color-texto-2: #a9b2ba;
  --color-texto-3: #78838c;

  /* Acción */
  --gradiente-cta: linear-gradient(100deg, #08988a 0%, #04b7a4 55%, #2bb673 100%); /* inicio aclarado: contraste AA con el texto del botón */
  --color-cta-texto: #031d1a;
  --color-foco: var(--cyfac-verde);

  /* Tipografía */
  --font-display: "Epilogue", system-ui, sans-serif;
  --peso-titulo: 700;
  --font-texto: "Work Sans", system-ui, sans-serif;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-h3: 1.125rem;
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h1: clamp(2.2rem, 1.5rem + 2.4vw, 3.3rem);
  --lh-texto: 1.65;

  /* Espaciado */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-40: 40px;
  --sp-64: 64px;
  --sp-120: 120px;
  --seccion: clamp(64px, 7vw, 104px);
  --contenido: 1120px;              /* ancho del contenido */
  --margen: clamp(20px, 5vw, 72px);

  /* Forma */
  --radio-boton: 4px;
  --radio-tarjeta: 6px;

  /* Movimiento */
  --curva: cubic-bezier(.16, 1, .3, 1);
}