/* Curanderos Labs. Consultorio: papel, tinta, barro y sello. La misma familia que Farmacina. */

:root {
  --bg: #e6eee7;
  --paper: #e6eee7;
  --paper-light: #f7faf7;
  --ink: #173a2b;
  --text: #173a2b;
  --muted: #607568;
  --ink-soft: #355444;
  --accent: #a38b5c;
  --clay: #a38b5c;
  --green: #173a2b;
  --gold: #cdb67f;
  --sage: #c2d3c5;
  --clay-soft: #dde8df;
  --line: rgba(23, 58, 43, 0.5);
  --shadow: 5px 5px 0 #173a2b;
}

html { color-scheme: light; }
body {
  background:
    radial-gradient(circle at 1px 1px, rgba(31, 46, 41, 0.045) 1px, transparent 0) 0 0 / 22px 22px,
    var(--paper);
}
a { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
a:hover { color: var(--clay); }
::selection { background: var(--gold); color: var(--ink); }

.skip-link { background: var(--ink); color: var(--paper-light); text-decoration: none; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--green);
}
.kicker::before { content: "✳"; color: var(--clay); font-size: 15px; line-height: 1; }
h1, h2, h3 { letter-spacing: -0.04em; text-transform: none; font-weight: 700; }
.lead { color: var(--ink-soft); }

.site-header {
  border-bottom: 2px solid var(--ink);
  background: rgba(243, 236, 218, 0.92);
  backdrop-filter: blur(10px);
}
.brand { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 23px; letter-spacing: 0; color: var(--ink); text-decoration: none; }
.nav a {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none;
  position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: var(--clay);
}
.nav a:hover { color: var(--green); }
.nav a:hover::after { right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .nav a::after { transition: right 0.2s ease; }
}

.hero { position: relative; }
.hero::before {
  content: "✳";
  position: absolute; top: 4%; right: max(12px, var(--pad));
  font-family: var(--serif); font-size: clamp(140px, 22vw, 320px); line-height: 1;
  color: var(--ink); opacity: 0.06; pointer-events: none;
}
.hero .wrap { position: relative; }

.section { border-top: 2px solid var(--ink); }

.btn {
  padding: 14px 18px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--paper-light);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--paper-light); box-shadow: 6px 6px 0 var(--clay); }
.btn.ghost { background: var(--paper-light); color: var(--ink); }
.btn.ghost:hover { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 0.14s ease, box-shadow 0.14s ease; }
  .btn:hover { transform: translate(-2px, -2px); }
}

.card, .step, .domain {
  padding: 22px; border: 2px solid var(--ink); background: var(--paper-light);
  box-shadow: var(--shadow); color: inherit;
}
.steps .step:nth-child(2),
.cards .domain:nth-child(2) { background: var(--sage); }
.steps .step:nth-child(3) { background: var(--clay-soft); }
.card .idx, .steps .n {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--clay);
}
.card p, .step p, .note { font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.domain p { font-size: 17px; line-height: 1.5; color: var(--ink-soft); }

.site-footer { border-top: 2px solid var(--ink); }
.footer-grid p { color: var(--ink-soft); }
.footer-grid a { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.legal { color: var(--muted); }