/* ============================================================
   Espinel Abogados — Base: layout, tipografía, botones, utils
   ============================================================ */

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--ink);
  overflow-x: hidden;
}

/* ── Contenedores ── */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }

main { display: block; }

section { position: relative; }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--ink-2); }

/* ── Corte claro (high-tech) ──
   Voltea los tokens de tema para que TODO componente hijo (eyebrow, cards,
   stats, nodos…) se adapte a fondo claro sin reescribir su CSS. El acento
   pasa a verde profundo (legible) pero los glows siguen siendo neón. */
.section--light {
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(25,240,160,0.12), transparent 60%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  color: #16302A;
  border-block: 1px solid var(--line-energy);
  isolation: isolate;

  /* superficies → claras */
  --ink:           var(--paper-2);
  --ink-2:         var(--paper-2);
  --surface:       var(--paper-2);
  --surface-2:     #ECF4F0;
  --petrol-deep:   #DDE9E4;
  --grad-surface:  linear-gradient(155deg, #FFFFFF, #EEF5F2);

  /* texto → oscuro */
  --text:          #1B342E;
  --text-strong:   #04140E;
  --muted:         #4C625B;
  --muted-2:       #74897F;

  /* líneas → tintadas oscuras */
  --line:          rgba(8, 40, 32, 0.12);
  --line-strong:   rgba(8, 40, 32, 0.20);
  --line-energy:   rgba(10, 160, 106, 0.42);

  /* acento → verde profundo legible; glow se mantiene brillante */
  --energy:        var(--energy-deep);
  --energy-bright: #08B97D;
  --energy-soft:   rgba(10, 160, 106, 0.10);

  --shadow-card:   0 1px 0 rgba(255,255,255,0.7) inset, 0 26px 60px -34px rgba(8,40,32,0.30);
}
/* halo verde suave en la costura superior del corte claro */
.section--light::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--energy-glow), transparent);
  filter: blur(0.5px);
  pointer-events: none;
}

/* ── Skip link ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--energy);
  color: var(--ink);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Tipografía ── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--energy);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--energy);
  opacity: 0.7;
}
.eyebrow--center { justify-content: center; }

h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500; letter-spacing: -0.015em; }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.01em; }
h3, .h3 { font-family: var(--font-ui); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }

.lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  line-height: 1.55;
}

.text-energy { color: var(--energy); }
.text-strong { color: var(--text-strong); }

.section__head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2 { margin-top: 0.9rem; }
.section__head .lead { margin-top: 1.1rem; }

/* Display serif con realce ámbar para palabra clave */
.serif-accent { font-style: italic; color: var(--energy); }

/* ── Botones ── */
.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1;
  padding: 0.95rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t), box-shadow var(--t), color var(--t), border-color var(--t);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--grad-energy);
  color: var(--on-energy);
  box-shadow: 0 10px 30px -12px var(--energy-glow);
}
.btn--primary:hover {
  box-shadow: 0 16px 44px -8px var(--energy-glow);
  filter: brightness(1.06);
}

.btn--ghost {
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--energy);
  background: var(--energy-soft);
  color: var(--text-strong);
}

.btn--link {
  padding: 0;
  background: none;
  color: var(--energy);
  border-radius: 0;
}
.btn--link:hover { transform: none; color: var(--energy-bright); }
.btn--lg { padding: 1.1rem 1.9rem; font-size: 1.02rem; }

/* Flecha animada para enlaces "→" */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--energy);
  font-weight: 600;
}
.arrow-link svg { transition: transform var(--t) var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }

/* Botón con flecha que confirma la interacción (microinteracción NN/g) */
.btn--arrow svg { transition: transform var(--t) var(--ease); }
.btn--arrow:hover svg { transform: translateX(4px); }

/* ── Cards genéricas (glassmorphism + glow eléctrico) ── */
.card {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  transition: border-color var(--t), transform var(--t) var(--ease), box-shadow var(--t);
  overflow: hidden;
  isolation: isolate;
}
/* Brillo de vidrio (sheen) en la esquina superior */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-sheen);
  opacity: 0.8;
  pointer-events: none;
  z-index: -1;
}
.card:hover {
  border-color: var(--line-energy);
  transform: translateY(-4px);
  /* halo eléctrico multicapa (verde H₂ + cian corriente) sobre profundidad */
  box-shadow: var(--glow-electric);
}
/* En cortes claros el vidrio se aclara y el glow conserva el neón */
.section--light .card {
  background: linear-gradient(155deg, rgba(255,255,255,0.85), rgba(238,245,242,0.55));
  border-color: var(--line-strong);
}
.section--light .card:hover {
  box-shadow: 0 0 0 1px var(--line-energy),
              0 0 26px -8px var(--energy-glow),
              0 26px 60px -32px rgba(8,40,32,0.35);
}

/* Etiqueta tipo "tag" mono */
.tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
}

/* ── Línea de corriente (divisor energía animado) ── */
.current-line {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--line-energy) 20%, var(--energy) 50%, var(--line-energy) 80%, transparent);
  position: relative;
  opacity: 0.6;
}
.current-line::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 60px;
  height: 3px;
  border-radius: 3px;
  background: var(--energy);
  filter: blur(2px);
  box-shadow: 0 0 12px var(--energy-glow);
  animation: current-run 4.5s linear infinite;
}
@keyframes current-run {
  0%   { left: -10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 105%; opacity: 0; }
}

/* ── Scroll progress (energía) ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--grad-energy);
  box-shadow: 0 0 12px var(--energy-glow);
  z-index: var(--z-progress);
  transition: width 0.1s linear;
}

/* ── Reveal on scroll ──
   El estado oculto sólo aplica si hay JS (.js en <html>). Sin JS, todo el
   contenido es visible por defecto: el reveal es mejora progresiva, no requisito. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ── Utilidades ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }