/* ===== TOKENS ===== */
:root{
  --cream:#f6f1e7;
  --cream-2:#efe8d9;
  --ink:#332b39;
  --ink-soft:#615868;
  --violet:#6e4fa2;      /* morado primario de marca */
  --violet-2:#8b6bc0;    /* violeta medio */
  --lilac:#c5a8e0;       /* lavanda del logo */
  --lilac-soft:#e7ddf3;  /* lavanda muy claro */
  --clay:#b98a5e;        /* dorado cálido (acento) */
  --line:rgba(51,43,57,.12);
  --shadow:0 18px 50px -24px rgba(51,43,57,.45);
  --r:18px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Jost",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden}
/* compensa el header fijo al saltar a una sección */
.hero,.section{scroll-margin-top:90px}
#inicio{scroll-margin-top:100vh}   /* "Inicio" va arriba del todo, sin salto */
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0}
em{font-style:italic}

.eyebrow{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--violet-2);font-weight:500;margin:0 0 .9rem;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.6rem;border-radius:100px;font-weight:500;font-size:.95rem;
  letter-spacing:.02em;cursor:pointer;transition:.28s ease;border:1px solid transparent;
}
.btn--solid{background:var(--violet);color:var(--cream)}
.btn--solid:hover{background:var(--ink);transform:translateY(-2px)}
.btn--ghost{border-color:var(--violet);color:var(--violet)}
.btn--ghost:hover{background:var(--violet);color:var(--cream);transform:translateY(-2px)}