/* ============================================================
   ds.css — Sistema de diseño Nicole Taurel Nutrition
   FUENTE ÚNICA de tokens + componentes base. Extraído fielmente
   de landing/index.html. Lo heredan index.html y /herramienta/.
   No re-declarar :root en otras páginas: importar este archivo.
   ============================================================ */
/* ============================================================
   TOKENS — Nicole Taurel Nutrition (from the design system)
   ============================================================ */
:root{
  /* Teal ramp */
  --teal-900:#28383b; --teal-800:#30454a; --teal-700:#394d50; --teal-600:#33474a;
  --teal-500:#6f888c; --teal-400:#97abaf; --teal-200:#bfced1; --teal-100:#d8e0e2;
  /* Cream ramp */
  --cream-50:#f7f3ee; --cream-100:#efe8e1; --cream-200:#e6ddd3; --cream-300:#d9cdbf;
  /* Yellow accent */
  --yellow-500:#f0bf00; --yellow-400:#ffcc00; --yellow-200:#ffe89a;
  --white:#fff; --black:#1a2426;
  /* Semantic */
  --color-bg:var(--cream-100); --color-surface:var(--cream-50);
  --color-surface-blue:var(--teal-200); --color-surface-dark:var(--teal-700);
  --text-primary:var(--teal-700); --text-muted:var(--teal-400);
  --border:var(--cream-200); --border-strong:var(--cream-300);
  --border-on-dark:rgba(255,255,255,.16); --focus-ring:rgba(57,77,80,.4);
  --success:#5b8a72; --danger:#b4584f;
  /* Type */
  --font-display:"Filson Soft","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Canva Sans","Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Radii */
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:28px; --radius-pill:999px;
  /* Elevation (flat brand — overlay shadow only) */
  --shadow-overlay:0 18px 48px -16px rgba(40,56,59,.28);
  --container:1180px;
  --ease:cubic-bezier(.3,.7,.4,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);font-size:16px;line-height:1.5;
  color:var(--text-primary);background:var(--color-bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-primary);margin:0}
h1,h2,h3{text-wrap:balance}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--text-primary);text-decoration:none}
::selection{background:var(--yellow-200);color:var(--teal-900)}
:where(button,a,input,select,textarea):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
.wrap{max-width:var(--container);margin:0 auto;padding-left:28px;padding-right:28px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-400)}

/* ---------------- Button ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;
  padding:0 22px;font-family:var(--font-body);font-weight:700;font-size:15px;line-height:1;
  letter-spacing:.01em;border:1.5px solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.btn:active{transform:scale(.97)}
.btn-sm{height:36px;padding:0 16px;font-size:14px;gap:7px}
.btn-lg{height:52px;padding:0 30px;font-size:17px;gap:10px}
.btn-block{display:flex;width:100%}
.btn-primary{background:var(--teal-700);color:var(--cream-100)}
.btn-primary:hover{background:var(--teal-800)}
.btn-accent{background:var(--yellow-400);color:var(--teal-700)}
.btn-accent:hover{background:var(--yellow-500)}
.btn-ghost{background:transparent;color:var(--teal-700);border-color:var(--border-strong)}
.btn-ghost:hover{background:rgba(57,77,80,.08)}
.btn[disabled]{background:var(--teal-200);color:var(--teal-400);cursor:not-allowed;transform:none}
.btn svg{width:1.1em;height:1.1em}

/* ---------------- Badge ---------------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 11px;
  font-weight:700;font-size:12px;letter-spacing:.01em;border:1.5px solid transparent;
  border-radius:var(--radius-pill);white-space:nowrap}
.badge-accent{background:var(--yellow-400);color:var(--teal-700)}
.badge-dark{background:var(--teal-700);color:var(--cream-100)}
.badge-muted{background:transparent;color:var(--teal-500);border-color:var(--border-strong)}

/* ---------------- Card ---------------- */
.card{padding:22px;border-radius:var(--radius-lg);border:1px solid transparent}
.card-blue{background:var(--teal-200);color:var(--teal-700)}
.card-cream{background:var(--color-surface);color:var(--teal-700);border-color:var(--border)}

/* ---------------- Stat ---------------- */
.stat-v{font-family:var(--font-display);font-weight:800;font-size:34px;line-height:1;color:var(--teal-700);letter-spacing:-.02em}
.stat-u{font-weight:700;font-size:15px;color:var(--teal-400);margin-left:4px}
.stat-l{display:block;font-weight:600;font-size:13px;color:var(--teal-400);margin-top:4px}

/* ---------------- Tabs ---------------- */
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--cream-200);border-radius:var(--radius-pill)}
.tab{display:inline-flex;align-items:center;height:36px;padding:0 18px;border:none;border-radius:var(--radius-pill);
  background:transparent;color:var(--teal-500);font-family:var(--font-body);font-weight:700;font-size:14px;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.tab[aria-selected="true"]{background:var(--teal-700);color:var(--cream-100)}

/* ---------------- DiscountTag ---------------- */
.discount{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 14px;
  background:var(--yellow-400);color:var(--teal-700);font-family:var(--font-display);font-weight:800;
  font-size:15px;letter-spacing:-.01em;border-radius:var(--radius-sm)}
.discount-sm{height:26px;padding:0 12px;font-size:13px}

/* ---------------- ProgressBar ---------------- */
.pbar-track{width:100%;height:10px;background:var(--cream-200);border-radius:var(--radius-pill);overflow:hidden}
.pbar-fill{height:100%;border-radius:var(--radius-pill);background:var(--yellow-400)}

/* ---------------- Timeline ---------------- */
.tl-step{display:flex;gap:16px}
.tl-rail{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.tl-node{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--teal-700);border:3px solid var(--cream-50);box-shadow:0 0 0 1.5px var(--teal-700);
  color:var(--cream-100);font-weight:800;font-size:10px}
.tl-line{flex:1;width:2px;background:var(--teal-400);margin-top:2px;min-height:18px}
.tl-body{flex:1;margin-top:-2px}
.tl-body h4{font-weight:800;font-size:19px;margin:0 0 4px}
.tl-body p{font-size:14.5px;line-height:1.5;color:var(--teal-700)}

/* ---------------- ProgramCard ---------------- */
.program{display:flex;flex-direction:column;gap:18px;padding:26px;border-radius:var(--radius-lg);background:var(--teal-200)}
.program.featured{background:var(--teal-700)}
.program .dur{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-500)}
.program.featured .dur{color:rgba(239,232,225,.72)}
.program h3{font-weight:800;font-size:27px;line-height:1.05;margin:0;color:var(--teal-700)}
.program.featured h3{color:var(--cream-100)}
.program .tag{font-size:14.5px;line-height:1.45;color:var(--teal-500);margin:0}
.program.featured .tag{color:rgba(239,232,225,.72)}
.program .price{font-family:var(--font-display);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--teal-700)}
.program.featured .price{color:var(--cream-100)}
.program .old{font-weight:700;font-size:19px;color:var(--teal-500);text-decoration:line-through}
.program.featured .old{color:rgba(239,232,225,.72)}
.program ul{list-style:none;margin:0;padding:18px 0 0;display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(57,77,80,.14)}
.program.featured ul{border-top-color:var(--border-on-dark)}
.program li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.4;color:var(--teal-700)}
.program.featured li{color:var(--cream-100)}
.program li svg{flex:0 0 auto;margin-top:2px;width:17px;height:17px;stroke:var(--teal-700)}
.program.featured li svg{stroke:var(--yellow-400)}

/* ---------------- Form fields (modal) ---------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:13px;color:var(--teal-700)}
.field .control{display:flex;align-items:center;height:44px;padding:0 14px;background:#fff;
  border:1.5px solid var(--border-strong);border-radius:var(--radius-md);transition:border-color var(--dur-fast) var(--ease)}
.field .control:focus-within{border-color:var(--teal-500)}
.field input,.field select{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:var(--font-body);font-size:15px;color:var(--teal-700)}
.field select{appearance:none;-webkit-appearance:none;height:100%;padding-right:24px;cursor:pointer}
.select-wrap{position:relative}
.select-wrap .caret{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none}
.checkbox{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:15px;color:var(--teal-700)}
.checkbox input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px}
.checkbox .box{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto;
  border-radius:7px;background:#fff;border:1.5px solid var(--border-strong);transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.checkbox input:checked + .box{background:var(--teal-700);border-color:var(--teal-700)}
.checkbox .box svg{opacity:0}
.checkbox input:checked + .box svg{opacity:1}