/* ==========================================================================
   TOKENS. Lo único que hay que tocar para re-skinear la plantilla a otra
   clínica (junto con el contenido de index.html y las fotos).
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------------
     Base fría de yeso; tinta grafito real; un solo acento en microdosis.
     El color de la página lo ponen las fotos, no la interfaz. */
  --c-tiza: #F2F4F5;        /* fondo de página: yeso frío, no crema */
  --c-yeso: #E4E8EA;        /* segunda superficie: marcadores, mapa */
  --c-campo: #FAFBFB;       /* interior de campos de formulario */
  --c-tinta: #26292C;       /* texto y titulares (13,3:1 sobre tiza) */
  --c-grafito: #5A6167;     /* texto secundario (5,7:1 sobre tiza) */
  --c-filete: #C5CCD1;      /* líneas de 1px que ordenan datos */
  --c-borde: #7A8288;       /* borde de campos (3,4:1, AA para UI) */
  --c-blanco: #FFFFFF;
  /* El texto de los campos no cambia aunque la sección cambie de fondo:
     se resuelve aquí, en :root, y se hereda ya resuelto. */
  --c-texto-campo: var(--c-tinta);

  /* ACENTO: la variable que cambia por cliente. Cobalto de ref-paleta.
     Solo en: botón de cita, día/hora elegidos, subrayado de enlaces,
     un filete en el hero y la cota de la primera visita. */
  --c-acento: #0F4290;
  --c-acento-hover: #0B3474;
  --c-sobre-acento: #F2F4F5;

  --c-error: #A3261B;       /* 6,6:1 sobre tiza; solo mensajes de error */

  /* Noche: el fondo de la sección de cita. Es el acento llevado a oscuro,
     así que también cambia por cliente. */
  --c-noche: #0B2C60;
  --c-sobre-noche: #F2F4F5;       /* 12,9:1 */
  --c-sobre-noche-suave: #B9C4D6; /* 7,8:1: texto secundario */
  --c-filete-noche: rgb(242 244 245 / 0.22);
  --c-error-noche: #FFB4A8;       /* 9,3:1: errores sobre noche */

  /* WhatsApp: el verde de la marca, oscurecido lo justo para que el
     icono blanco llegue a 3:1. Solo en el botón de WhatsApp. */
  --c-whatsapp: #1DA851;
  --c-whatsapp-hover: #178F44;

  /* --- Tipografía --------------------------------------------------------
     Archivo (eje de anchura): la placa del despacho en el portal.
     Source Serif 4: la carta que te escribe el dentista. */
  --f-placa: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-carta: "Source Serif 4", Georgia, "Times New Roman", serif;

  --anchura-nombre: 118;    /* font-stretch del nombre (62–125) */
  --anchura-titulo: 108;
  --peso-nombre: 330;

  --t-nombre: clamp(3.4rem, 10vw, 9rem);   /* escritorio: escala con su columna */
  --t-h2: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  --t-h3: clamp(1.3rem, 1.05rem + 0.8vw, 1.65rem);
  --t-lead: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem);
  --t-texto: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-dato: 1rem;
  --t-pie: 0.875rem;

  /* --- Espacio (base 8) -------------------------------------------------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-10: 8rem;
  --e-seccion: clamp(5.5rem, 3rem + 8vw, 11rem);

  /* --- Rejilla ----------------------------------------------------------- */
  --ancho-max: 1440px;
  --margen: clamp(20px, 5vw, 72px);
  --hueco: clamp(16px, 2vw, 28px);
  --alto-cabecera: 68px;

  /* --- Forma: todo recto. Un único radio mínimo para controles.
     Lo único redondo es lo que flota sobre la página: el botón de WhatsApp,
     el de "Cómo llegar" y el cursor. -------------------------------------- */
  --radio: 2px;
  --radio-flotante: 999px;
  --linea: 1px;

  /* --- Movimiento -------------------------------------------------------- */
  --curva-salida: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-entrada-salida: cubic-bezier(0.65, 0, 0.35, 1);
  --curva-telon: cubic-bezier(0.77, 0, 0.175, 1);  /* cortinillas de imagen */
  --curva-cajon: cubic-bezier(0.32, 0.72, 0, 1);   /* menú y paneles */
}