/* ── Container ───────────────────────────────────────────── */
/* Custom element: envuelve y centra el contenido de header, footer y
   secciones a --max-width, con el "colchón" de --page-gutter a los lados. */
inner-wrap {
  display: block;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .02rem;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color            var(--dur-short) var(--ease-out),
    border-color     var(--dur-short) var(--ease-out);
}
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-outline {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn-outline:hover { border-color: var(--color-ink); color: var(--color-ink); }
.btn-outline-white {
  background: transparent;
  border-color: oklch(from var(--color-paper) l c h / 0.45);
  color: var(--color-paper);
}
.btn-outline-white:hover { border-color: var(--color-paper); }

/* ── Link-CTA (red arrow pattern from teimas.com DNA) ───── */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  cursor: pointer;
  transition:
    gap   var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}
/* Flecha "→": antes era un <svg> repetido en cada enlace; ahora vive aquí,
   como máscara CSS que hereda el color del texto (igual que antes hacía
   stroke="currentColor"). */
.link-cta::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  transition: background-color var(--dur-short) var(--ease-out);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10h12M10 4l6 6-6 6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10h12M10 4l6 6-6 6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.link-cta:hover { gap: var(--space-sm); color: var(--color-accent-hover); }
.link-cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.link-cta-white { color: oklch(from var(--color-paper) l c h / 0.75); }
.link-cta-white:hover { color: var(--color-paper); }

/* ── Section divider (numbered, animated sweep) ──────────── */
section-divider {
  display: block;
  position: relative;
  z-index: 1;
}
divider-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
}
divider-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-ink-2);
  white-space: nowrap;
  flex-shrink: 0;
}
divider-line {
  display: block;
  flex: 1;
  height: 1px;
  background: var(--color-ink);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--dur-long) var(--ease-out);
}
divider-line.visible { transform: scaleX(1); }

/* ── Reveal animation ────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   var(--dur-long) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
}
[data-reveal].visible { opacity: 1; transform: none; }
[data-reveal]:nth-child(2) { transition-delay: 80ms;  }
[data-reveal]:nth-child(3) { transition-delay: 160ms; }
[data-reveal]:nth-child(4) { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: opacity 120ms; }
  divider-line { transform: scaleX(1); }
}

/* ── Sections ────────────────────────────────────────────── */
.section {
  padding: var(--space-3xl) var(--page-gutter);
}
.section-gray { background: var(--color-paper-2); }
.section-dark {
  background: var(--color-ink);
  color: var(--color-paper);
}
.section-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}
.section-h2 {
  font-size: var(--text-display-s);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.section-body {
  font-size: var(--text-md);
  color: var(--color-ink-2);
  max-width: 50ch;
  line-height: 1.65;
  margin-top: var(--space-lg);
}