/* ==========================================================================
   Design tokens — Natalia Pérez Fisioterapia
   Extraídos de Figma (archivo "Web", página única, 6 frames de referencia:
   Home mobile/tablet/desktop, Natalia mobile/tablet/desktop).
   ========================================================================== */

:root {
  /* ---- Color ---------------------------------------------------------- */
  --color-bg: #ffffff;
  --color-ink: #222222;      /* texto principal */
  --color-ink-strong: #000000; /* texto "black" puntual (diferencial, talleres, oferta) */
  --color-muted: #707070;    /* texto secundario / notas / separador footer */
  --color-sage: #526252;     /* verde salvia — CTA secundarios, enlaces footer */
  --color-terracotta: #c66f6c; /* CTA principal fijo, círculo oferta */
  --color-border: #222222;   /* borde de tarjetas */

  /* ---- Tipografía ------------------------------------------------------ */
  --font-body: "Plus Jakarta Sans", sans-serif;

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

  /* Escala tipográfica (px de Figma → rem, base 16px) */
  --fs-nav: 0.75rem;    /* 12px mobile — enlaces de navbar y botón "Natalia" */
  --fs-button: 0.875rem;/* 14px — botones */
  --fs-note: 0.875rem;  /* 14px — notas / italics */
  --fs-body: 1rem;      /* 16px — cuerpo de texto */
  --fs-lead: 1.25rem;   /* 20px — texto de apoyo destacado */
  --fs-subhead: 1.5rem; /* 24px — subtítulos (valoración, precios de card) */
  --fs-h2: 2rem;        /* 32px — títulos de sección */
  --fs-h1: 2.5rem;      /* 40px — nombre en el hero */

  /* ---- Espaciado -------------------------------------------------------- */
  --space-3xs: 0.375rem; /* 6px */
  --space-2xs: 0.5rem;   /* 8px */
  --space-xs: 0.625rem;  /* 10px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 2.875rem; /* 46px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 8rem;     /* 128px */

  /* ---- Radios ------------------------------------------------------------ */
  --radius-card: 0.75rem;  /* 12px — tarjetas de tarifas */
  --radius-soft: 0.375rem; /* 6px — esquinas cuadradas de las formas "arco" */
  --radius-tight: 0.1875rem; /* 3px — esquina corta de la tarjeta-cita */
  --radius-pill: 999px;    /* botones, navbar, esquinas redondeadas de fotos */
  --radius-arch: 999px;    /* alias semántico para las fotos "arco" */

  /* ---- Layout -------------------------------------------------------- */
  --content-max: 834px;   /* ancho de contenido compartido en tablet y desktop */
  --content-wide: 1120px; /* ancho ampliado sólo para el bloque "Formación" en desktop */
  --nav-height: 92px;     /* separación desde arriba que reserva el navbar fijo */

  /* ---- Movimiento ------------------------------------------------------ */
  --ease-reveal: cubic-bezier(0.22, 0.68, 0.32, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
}

@media (min-width: 768px) {
  :root {
    --fs-nav: 0.875rem; /* 14px tablet/desktop — enlaces de navbar y botón "Natalia" */
  }
}