/* ============================================================
   Alkimia · base.css
   Variables, reset, tipografía global, primitivos, scaffold
   Mobile-first — los breakpoints min-width expanden a desktop
   ============================================================ */

:root {
  /* Verdes */
  --ink:        #0B1611;
  --forest:     #14352A;
  --bottle:     #1C4636;
  --moss:       #2A5A47;
  --sage:       #4A7861;

  /* Dorados */
  --gold:       #C9A24B;
  --gold-soft:  #D9B96A;
  --gold-deep:  #8F6F2A;

  /* Crema */
  --bone:       #F1E7CC;
  --paper:      #E6D9B5;
  --paper-line: #C9B98A;

  /* Estados */
  --rust:       #B85C3A;
  --leaf:       #6FA86F;

  /* Fuentes */
  --serif-display: "Cinzel", "Times New Roman", serif;
  --serif-alt:     "Marcellus", "Times New Roman", serif;
  --serif-body:    "Lora", Georgia, serif;
  --mono:          "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Layout */
  --col-w:      1160px;
  --col-narrow: 820px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--forest);
  color: var(--bone);
  font-family: var(--serif-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 960px) {
  html, body { font-size: 17px; }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

/* ============================================================
   Primitivos de layout
   ============================================================ */
.col        { max-width: var(--col-w);      margin: 0 auto; padding: 0 20px; }
.col-narrow { max-width: var(--col-narrow); margin: 0 auto; padding: 0 20px; }

@media (min-width: 600px) {
  .col, .col-narrow { padding: 0 32px; }
}

/* Kicker */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: ""; width: 28px; height: 1px; background: var(--gold);
}
@media (min-width: 960px) {
  .kicker             { font-size: 12px; letter-spacing: 0.22em; gap: 14px; }
  .kicker::before     { width: 36px; }
}
section.bone .kicker         { color: var(--gold-deep); }
section.bone .kicker::before { background: var(--gold-deep); }

/* Display heading */
.display {
  font-family: var(--serif-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--bone);
}
section.bone .display { color: var(--ink); }

.alt-display {
  font-family: var(--serif-alt);
  font-weight: 400;
}

/* Lede */
.body-lede {
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--bone);
  opacity: 0.88;
}
@media (min-width: 960px) {
  .body-lede { font-size: 21px; }
}
section.bone .body-lede         { color: var(--ink); opacity: 0.85; }
.body-lede em                   { font-style: italic; color: var(--gold-soft); }
section.bone .body-lede em      { color: var(--gold-deep); }
.body-lede strong               { font-weight: 500; opacity: 1; }

/* ============================================================
   Botones
   ============================================================ */
.btn {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .15s ease, background .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease;
  border-radius: 4px;
  text-decoration: none;
}
@media (min-width: 960px) {
  .btn { font-size: 13px; padding: 16px 26px; gap: 12px; }
}
.btn .arr {
  font-family: var(--serif-body);
  font-size: 16px;
  line-height: 1;
  transition: transform .2s ease;
}
@media (min-width: 960px) {
  .btn .arr { font-size: 17px; }
}
.btn:hover .arr        { transform: translateX(3px); }
.btn:focus-visible     { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

.btn-primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold-deep);
  box-shadow: inset 0 -2px 0 var(--gold-deep);
}
.btn-primary:hover  { background: var(--gold-soft); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--bone);
  border-color: var(--moss);
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold-soft); }
section.bone .btn-secondary       { color: var(--ink); border-color: var(--paper-line); }
section.bone .btn-secondary:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

.btn-large { padding: 18px 28px; font-size: 13px; }
@media (min-width: 960px) {
  .btn-large { padding: 22px 36px; font-size: 15px; }
}

/* Microcopy */
.micro {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 14px;
}
@media (min-width: 960px) {
  .micro { font-size: 11px; letter-spacing: 0.18em; margin-top: 16px; }
}
section.bone .micro { color: var(--gold-deep); }

/* ============================================================
   Scaffold de secciones
   ============================================================ */
section {
  position: relative;
  padding: 80px 0;
  background: var(--forest);
}
@media (min-width: 960px) {
  section { padding: 128px 0; }
}
section.bone { background: var(--bone); color: var(--ink); }
section.ink  { background: var(--ink);  color: var(--bone); }

.hairline {
  height: 1px;
  background: var(--gold);
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.2,.7,.1,1);
}
.hairline.is-in         { transform: scaleX(1); }
section.bone .hairline  { background: var(--gold-deep); opacity: 0.6; }

/* Animación de aparición en scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1),
              transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }