/* ============================================================
   base.css — reset, tipografía, layout y motivos compartidos
   (eyebrows mono, punto de acento, cards con línea superior, rise,
   botones que invierten, flechas SVG). Línea de diseño de la app.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ── Layout ─────────────────────────────────────────────── */
.wrap { width: min(1180px, 92vw); margin: 0 auto; }

.section {
  position: relative;
  padding: clamp(72px, 11vh, 140px) 0;
  border-top: 1px solid var(--rule);
}
.section--flush { border-top: none; }

/* ── Eyebrows mono ──────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 10.5px;
  color: var(--ink-faint);
}
.eyebrow--veta { color: var(--veta); }

/* Código de sección estilo expediente: 01 — … */
.sec-code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
.sec-code b { color: var(--veta); font-weight: 600; }
.sec-code::after { content: ""; width: 46px; height: 1px; background: var(--rule-strong); }

/* ── Títulos + punto de acento ──────────────────────────── */
.h-xl {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.04;
  font-size: clamp(44px, 9vw, 116px);
}
.h-lg {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-size: clamp(28px, 4.4vw, 50px);
}
.h-md { font-weight: 600; font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -0.005em; }
.dot { color: var(--veta); }

.lede {
  color: var(--ink-soft);
  font-size: clamp(15px, 1.5vw, 19px);
  max-width: 62ch;
  line-height: 1.6;
}
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.mono  { font-family: var(--font-mono); }

/* ── Card genérica con línea de acento superior ─────────── */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 22px;
  transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent, var(--veta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--rule-strong);
  background: var(--panel-hi);
}
.card:hover::before { transform: scaleX(1); }

/* Card "próxima" / en desarrollo */
.card--soon {
  border: 1px dashed rgba(255, 255, 255, 0.07);
  background: transparent;
}
.card--soon .card-body { opacity: 0.45; }
.card--soon:hover { transform: none; border-color: rgba(255, 255, 255, 0.12); background: transparent; }
.card--soon:hover::before { transform: scaleX(0); }
.tag-soon {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ── Botón firma (invierte en hover, flecha que se desplaza) ─ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 14px 26px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn--xl { font-size: clamp(17px, 2vw, 21px); padding: 18px 36px; }
/* CTA protagónico del hero: acento cobre, invierte a cobre sólido */
.btn--hero {
  border-color: var(--veta);
  color: var(--ink);
  background: var(--veta-soft);
  box-shadow: 0 0 0 0 var(--veta-glow);
  animation: heroPulse 3.4s var(--ease) infinite;
}
.btn--hero:hover {
  background: var(--veta);
  color: #1a0f08;
  border-color: var(--veta);
}
@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--veta-glow); }
  50%      { box-shadow: 0 0 0 10px rgba(224, 120, 64, 0); }
}

/* Flecha SVG fina (M2 7 L12 7 / M8 3 L12 7 L8 11) */
.arrow { width: 16px; height: 14px; flex: none; }

/* ── Animación de entrada: rise ─────────────────────────── */
.rise { opacity: 0; transform: translateY(12px); }
.rise.in { animation: rise .8s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* ── Navegación lateral por puntos (scroll-spy) ─────────── */
.dotnav {
  position: fixed;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex; flex-direction: column; gap: 14px;
}
.dotnav a {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--ink-faint);
  transition: color .3s var(--ease);
}
.dotnav a .d {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--ink-soft);
  transition: all .3s var(--ease);
}
/* Label oculto por defecto; aparece al hover y SIEMPRE en el punto activo (así, al
   entrar, "Inicio" —s00 activo— ya se ve y se nota que la nav es clickeable). */
.dotnav a .lbl { opacity: 0; transform: translateX(6px); transition: all .3s var(--ease); font-weight: 500; }
.dotnav a:hover { color: var(--ink-soft); }
.dotnav a:hover .lbl { opacity: 1; transform: translateX(0); }
.dotnav a.active { color: var(--veta); }
.dotnav a.active .lbl { opacity: 1; transform: translateX(0); }
.dotnav a.active .d { background: var(--veta); border-color: var(--veta); box-shadow: 0 0 0 4px var(--veta-soft); }

/* ── Utilidades ─────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.stack-sm > * + * { margin-top: 10px; }
.divider { height: 1px; background: var(--rule); border: none; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; animation: none; }
  .btn--hero { animation: none; }
  * { transition-duration: .001ms !important; }
}