/* Fuente de reserva con las métricas de Inter ajustadas: cuando Inter termina de
   cargar y reemplaza a la de reserva, el texto no se desplaza (reduce el CLS). */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.06%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}

:root {
  /* === FAMILIA ARCILLA (color principal de marca) === */
  --clay:        #C4652A;
  --clay-dark:   #8B3D14;
  --clay-light:  #E8896A;
  --clay-pale:   #F5E6DC;

  /* === FAMILIA TINTA (fondos oscuros) === */
  --ink:         #141009;
  --ink-mid:     #1F1710;
  --nav:         #0D0A06;

  /* === FAMILIA CREMA (fondos claros) === */
  --cream:       #FDFAF4;
  --sand:        #F5F0E8;
  --sand-dark:   #EDE5D8;

  /* === TEXTOS APAGADOS === */
  --muted:       #7A6E60;
  --muted-light: #A89D8F;

  /* === ACENTO DORADO === */
  --accent:      #E8B84B;
  --accent-dark: #C49830;

  /* === VERDE (confirmaciones, checks) === */
  --green:       #25D366;
  --green-pale:  #E6F4ED;

  /* === TEAL ELÉCTRICO === */
  --electric:    #4ECDC4;

  /* === TIPOGRAFÍA === */
  --font-display: 'Inter', 'Inter Fallback', sans-serif;
  --font-body: 'Inter', 'Inter Fallback', sans-serif;
  /* === TRANSICIONES === */
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* === SOMBRAS === */
  --shadow: 0 4px 20px rgba(0,0,0,0.06);
  --shadow-hover: 0 16px 40px rgba(196,101,42,0.24);

  /* === RADIOS === */
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 100px;
}