/* ==========================================================================
   Dr. Jesús Ríos — Base compartida por las cuatro páginas
   --------------------------------------------------------------------------
   Fuentes, tokens de color y tipografía, escala de espaciado, sombras, radios,
   curvas de movimiento y estilos base de elementos.

   Antes esto vivía inline y COPIADO en los cuatro index.html: 194 líneas
   idénticas por cuadruplicado. Cambiar un color de marca obligaba a tocar los
   cuatro archivos y a acertar en todos. Ahora se edita aquí y punto.

   Las rutas de las fuentes son relativas a ESTE archivo (/assets/base.css),
   así que `fonts/x.otf` resuelve a /assets/fonts/x.otf desde cualquier página,
   esté en la raíz o en una subcarpeta. Deben coincidir exactamente con los
   <link rel="preload"> de cada HTML o la fuente se descargaría dos veces.

   Orden en el <head>: este archivo va PRIMERO, luego el <style> propio de la
   página, y al final assets/refinamiento.css.
   ========================================================================== */

/* Dr. Jesús Ríos — Webfonts (@font-face locales)
   Display: Tappatarap Bold — titulares, números y caracteres especiales
   (reemplaza a Kanoffe Dramed DEMO + Astrid; se conservan como familias
   secundarias por si se quiere volver). */

@font-face {
  font-family: 'Tappatarap';
  src: url("fonts/tappatarap-086a57b4.ttf") format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  /* Tappatarap no dibuja el acento de la í (U+00ED) — se excluye para que
     caiga al respaldo de abajo y "Clínica" no se lea "Clinica". */
  unicode-range: U+0000-00EC, U+00EE-FFFF;
}
/* Respaldo solo para la í acentuada */
@font-face {
  font-family: 'Tappatarap';
  src: url("fonts/tappatarap-e1e5603f.otf") format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00ED;
}
/* Familias anteriores, disponibles pero fuera del token --font-display */
@font-face {
  font-family: 'Kanoffe Dramed';
  src: url("fonts/kanoffe-dramed-14d66c1b.otf") format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+0041-005A, U+0061-007A, U+00C0-024F, U+1E00-1EFF;
}
@font-face {
  font-family: 'Astrid';
  src: url("fonts/tappatarap-e1e5603f.otf") format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url("fonts/sf-pro-display-06c132c0.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url("fonts/sf-pro-display-5516de5e.otf") format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url("fonts/sf-pro-display-3c0b6d26.otf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Dr. Jesús Ríos — Color tokens */
:root {
  /* Base brand */
  --blue-brand: #1D4C9F;        /* azul marca — titulares, botones */
  --blue-deep: #24549E;         /* azul marca profundo — final de gradientes */
  --blue-hover: #153A7A;        /* azul royal hover */
  --blue-light: #4C7FD1;        /* acento luz — glows, iconos, detalles */

  /* Neutrals */
  --gray-bg: #E8EAEC;           /* gris fondo de sección */
  --white: #FFFFFF;
  --ink: #1A2338;               /* texto principal */
  --ink-2: #5B6577;             /* texto secundario */

  /* Translucents */
  --watermark: rgba(174, 187, 204, 0.40);  /* marca de agua serif + cruz plus */
  --blue-glass: rgba(29, 76, 159, 0.08);   /* tintes suaves de azul */
  --white-glass: rgba(255, 255, 255, 0.70);/* navbar glassmorphism */

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #1D4C9F 0%, #24549E 100%); /* @kind color */
  --grad-section: linear-gradient(180deg, #E8EAEC 0%, #FFFFFF 100%); /* @kind color */
  --grad-cta: linear-gradient(160deg, #1D4C9F 0%, #153A7A 100%); /* @kind color */

  /* Semantic aliases */
  --text-heading: var(--blue-brand);
  --text-body: var(--ink);
  --text-muted: var(--ink-2);
  --text-on-blue: var(--white);
  --surface-page: var(--white);
  --surface-section: var(--gray-bg);
  --surface-card: var(--white);
  --surface-cta: var(--grad-cta);
  --border-soft: rgba(26, 35, 56, 0.08);
  --focus-ring: 0 0 0 3px rgba(76, 127, 209, 0.45);
}

/* Dr. Jesús Ríos — Typography tokens (2 familias máx) */
:root {
  --font-display: 'Tappatarap', 'Georgia', serif;    /* titulares, números, marca de agua */
  --font-body: 'SF Pro Display', -apple-system, 'Helvetica Neue', sans-serif;

  /* Display (Kanoffe Dramed) */
  --display-tracking: -0.5px;
  --display-leading: 0.95;

  /* Scale */
  --text-hero: clamp(44px, 6vw, 76px);
  --text-h2: clamp(32px, 4vw, 48px);
  --text-h3: 24px;
  --text-lead: 19px;
  --text-body-size: 16px;
  --text-small: 14px;
  --text-tag: 13px;

  /* Weights (SF Pro Display) */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --body-leading: 1.6;

  /* Marca de agua gigante */
  --watermark-size: clamp(180px, 24vw, 360px);
}

/* Dr. Jesús Ríos — Radios, sombras, espaciado, movimiento */
:root {
  /* Radios — cards disciplinadas a 14px; el radio grande (56px) SOLO en la máscara de foto firma */
  --radius-card: 14px;
  --radius-photo: 56px;   /* máscaras de foto */
  --radius-pill: 999px;

  /* Corte diagonal firma (fotos) */
  --photo-cut: polygon(0 0, 100% 0, 100% 88%, 82% 100%, 0 100%); /* @kind other */

  /* Sombras — elevación suave, glow azul */
  --shadow-card: 0 8px 32px rgba(26, 35, 56, 0.10);
  --shadow-float: 0 16px 48px rgba(29, 76, 159, 0.18);
  --shadow-nav: 0 4px 24px rgba(26, 35, 56, 0.08);
  --glow-blue: 0 8px 28px rgba(76, 127, 209, 0.45);

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-section: clamp(64px, 10vw, 128px);
  --container-max: 1400px;

  /* Movimiento — curvas custom fuertes; UI < 300ms; solo transform/opacity */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* @kind other */
  --dur-press: 140ms; /* @kind other */ /* press de botón 100–160ms */
  --dur-fast: 180ms; /* @kind other */
  --dur-med: 250ms; /* @kind other */
  --dur-reveal: 600ms; /* @kind other */
  --stagger: 80ms; /* @kind other */

  /* Blur — solo con propósito (nunca glassmorphism por defecto) */
  --glass-blur: 14px;
}

/* Dr. Jesús Ríos — base element styles */
body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--body-leading);
  color: var(--text-body);
  background: var(--surface-page);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--text-heading);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  margin: 0;
  text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: var(--blue-brand); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

