:root{
  /* Fondo general */
  --bg: #f5ede0;

  /* Paleta marca Rincón de Kari */
  --tierra-50:  #fdf7f0;
  --tierra-100: #f5ede0;
  --tierra-200: #f2ba81;
  --tierra-400: #c49a6c;
  --tierra-600: #8b5a2b;
  --tierra-800: #5b3a1b;
  --tierra-900: #3d2b1f;

  --verde-50:   #f4f7c1;
  --verde-200:  #d8e8a0;
  --verde-400:  #b4c880;
  --verde-600:  #7a9940;
  --verde-800:  #4a6020;

  --rosa-50:    #fdeaea;
  --rosa-200:   #f9c4c5;
  --rosa-400:   #f49b9d;
  --rosa-600:   #c96065;
  --rosa-800:   #8a3a3e;

  --celeste-50:  #eef5fd;
  --celeste-200: #c0d8f9;
  --celeste-400: #7aaee8;
  --celeste-600: #3a78c9;
  --celeste-800: #1a4a8a;

  /* Aliases legibles */
  --accent:  var(--tierra-600);   /* botones, links activos  */
  --accent-dark: var(--tierra-800);
  --accent-light: var(--tierra-100);

  --blue: #7aaee8;   /* mantiene compatibilidad con código existente */
  --red:  #c96065;   /* mantiene compatibilidad  */

  --text:  var(--tierra-900);
  --muted: var(--tierra-400);
  --white: #fff;

  --radius: 8px;
  --shadow: 0 4px 16px rgba(91,58,27,.10);
  --border: 1px solid rgba(139,90,43,.15);

  --header-h: 72px;
  --gap: 16px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* que use todo el ancho real */
.page{
  width: 100%;
}

/* links prolijos */
a{
  color: inherit;
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

/* Esta clase se agrega vía JS al body cuando abrimos un modal */
body.no-scroll {
  overflow: hidden;
  height: 100vh; /* Asegura que no se mueva nada */
}