/* ═══════════════════════════════════════════════
   CON AMOR — Tokens v5
   Cambia --font-ui para cambiar toda la tipografía
═══════════════════════════════════════════════ */

/* Fuente principal — cambia solo esta línea para actualizar toda la app */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ── Tipografía ── cambia aquí para actualizar todo */
  --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* ── Paleta ─────────────────────────────────── */
  --cream:         #f0ede6;
  --cream-2:       #e8e3d9;
  --cream-3:       #dad4c7;
  --forest:        #1e3a2f;
  --forest-2:      #2d5240;
  --forest-3:      #3d6b52;
  --forest-a08:    rgba(30,58,47,.08);
  --forest-a16:    rgba(30,58,47,.16);
  --forest-a24:    rgba(30,58,47,.24);
  --white:         #fdfcf9;
  --gray:          #8c877e;
  --gray-2:        #b5b0a8;
  --gray-3:        #d4cfc8;
  --red:           #b83228;
  --red-a08:       rgba(184,50,40,.08);
  --amber:         #a87b10;
  --green-wa:      #25d366;

  /* ── Semánticos ─────────────────────────────── */
  --bg:       var(--cream);
  --bg-2:     var(--cream-2);
  --surface:  var(--white);
  --surface-2:#f3f0e9;
  --border:   var(--cream-3);
  --border-2: #c2bbb0;
  --text:     var(--forest);
  --text-2:   #3d5247;
  --text-3:   var(--gray);
  --text-4:   var(--gray-2);

  /* ── Espaciado ──────────────────────────────── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;

  /* ── Radios ─────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 999px;

  /* ── Sombras ────────────────────────────────── */
  --sh-sm: 0 1px 4px rgba(30,58,47,.06);
  --sh-md: 0 4px 16px rgba(30,58,47,.09);
  --sh-lg: 0 12px 40px rgba(30,58,47,.13);
  --sh-xl: 0 24px 64px rgba(30,58,47,.17);

  /* ── Movimiento ─────────────────────────────── */
  --ease:    cubic-bezier(.4,0,.2,1);
  --spring:  cubic-bezier(.22,1,.36,1);
  --t1: 100ms;
  --t2: 200ms;
  --t3: 340ms;

  /* ── Layout ─────────────────────────────────── */
  --nav-h: 56px;
}

/* ── Reset ──────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:15px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { font-family:var(--font-ui); background:var(--bg); color:var(--text); line-height:1.55; min-height:100dvh; overflow-x:hidden; }
img    { display:block; max-width:100%; }
button { cursor:pointer; font-family:var(--font-ui); border:none; background:none; }
a      { text-decoration:none; color:inherit; }
input,textarea,select { font-family:var(--font-ui); }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:99px; }
:focus-visible { outline:2px solid var(--forest); outline-offset:2px; border-radius:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }