/* Hallmark · genre: atmospheric · macrostructure: Bento Grid · theme: eclipse-dark (custom · near-black canvas + single warm orange) · enrichment: E-B hand-built SVG charts + CSS eclipse canvas · nav: N5 floating-pill · footer: Ft2 inline
 * paper oklch(15% 0.008 265) near-black · accent oklch(74% 0.17 52) warm orange (single)
 * surfaces: semi-transparent white films + backdrop blur · display: Space Grotesk · body: Inter · label: JetBrains Mono
 * content from /Presenta/ (real): 3 pilares · ecosistema · casos reales · contacto
 * pre-emit critique: P5 H5 E5 S4 R5 V5 · rotated from: Cobalt light (Bento)
 * slop-test 2026-07-22: contrast pass (40–41, ink-faint bumped to L64=5.84:1) · nav N5 · footer Ft2 · slop pass (42–45) · honest pass (46, real case metrics) · chrome pass (47) · tokens pass (48) · responsive pass (49) · icons pass (30, custom SVG) · mobile pass (34,49,50–57) · gate 14 pass (nav underline → transform)
 */
@import url("tokens.css");

/* ————————————————————————————— Reset ————————————————————————————— */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Eclipse canvas — a dark disk with a warm orange rim in the top-right, a soft ambient bloom, and two faint concentric rings. Fixed, static (atmospheric: the canvas is the design). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 94% -60px, transparent 0 168px, var(--color-accent) 173px, oklch(74% 0.17 52 / 0.12) 210px, transparent 300px),
    radial-gradient(42% 44% at 93% 0%, oklch(74% 0.17 52 / 0.14), transparent 62%),
    radial-gradient(circle at 34% 40%, transparent 0 300px, oklch(100% 0 0 / 0.035) 301px, transparent 303px),
    radial-gradient(circle at 34% 40%, transparent 0 430px, oklch(100% 0 0 / 0.025) 431px, transparent 433px),
    var(--color-paper-deep);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 2.5rem, 1160px); margin-inline: auto; }

/* Concept colour coding — BI / IA / RPA — used everywhere these appear */
.c-bi  { color: var(--color-bi); }
.c-ia  { color: var(--color-ia); }
.c-rpa { color: var(--color-rpa); }
.c-bi, .c-ia, .c-rpa { font-weight: 600; }

.mono-label {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-strong);
}

/* ————————————————————————————— Nav · N5 floating pill ————————————————————————————— */
.nav { position: fixed; inset: var(--space-sm) 0 auto 0; z-index: var(--z-nav); display: flex; justify-content: center; pointer-events: none; }
.nav__pill {
  pointer-events: auto; display: flex; align-items: center; gap: var(--space-md);
  width: min(100% - 2rem, 1080px); padding: 9px 10px 9px 18px;
  background: var(--color-nav-bg); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: var(--text-lg); white-space: nowrap; }
.brand__mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--color-accent); color: var(--color-accent-ink); flex: none; box-shadow: var(--shadow-accent); }
.nav__links { display: flex; gap: var(--space-md); margin-left: auto; font-size: var(--text-sm); color: var(--color-ink-dim); }
.nav__links a { position: relative; padding: 4px 2px; transition: color var(--dur-short) var(--ease-out); }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.nav__links a:hover, .nav__links a:focus-visible { color: var(--color-ink); }
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }

/* ————————————————————————————— Buttons (8 states) ————————————————————————————— */
.btn {
  --_bg: transparent; --_fg: var(--color-ink); --_bd: var(--color-hairline);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  white-space: nowrap; cursor: pointer; border: 1px solid var(--_bd);
  padding: 11px 20px; border-radius: var(--radius-md); background: var(--_bg); color: var(--_fg);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform 90ms var(--ease-out), box-shadow var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.btn--primary { --_bg: var(--color-accent); --_fg: var(--color-accent-ink); --_bd: transparent; box-shadow: var(--shadow-accent); }
.btn--primary:hover, .btn--primary.is-hover { --_bg: var(--color-accent-strong); }
.btn--wa { --_bg: var(--color-wa); --_fg: var(--color-wa-ink); --_bd: transparent; box-shadow: var(--shadow-wa); }
.btn--wa:hover, .btn--wa.is-hover { --_bg: var(--color-wa-strong); }
.btn--wa svg { flex: none; }
.btn--ghost { background: var(--color-surface); box-shadow: var(--shadow-sm); }
.btn--ghost:hover, .btn--ghost.is-hover { --_bd: var(--color-ink-faint); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[data-state="loading"] { color: transparent; position: relative; pointer-events: none; }
.btn[data-state="loading"]::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--color-accent-ink); border-top-color: transparent; animation: spin 0.7s linear infinite; }
.btn[data-state="error"]  { --_bg: var(--color-danger);  --_fg: var(--color-accent-ink); --_bd: transparent; box-shadow: none; }
.btn[data-state="success"]{ --_bg: var(--color-success); --_fg: var(--color-accent-ink); --_bd: transparent; box-shadow: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ————————————————————————————— Hero (fixed-height, centered) ————————————————————————————— */
.hero { position: relative; text-align: center; padding: calc(var(--space-3xl) + 10px) 0 var(--space-xl); }
.hero::before { content: ""; position: absolute; inset: 0; bottom: 40%; z-index: -1; pointer-events: none; background: radial-gradient(55% 60% at 50% 0%, var(--color-accent-soft), transparent 72%); }
.hero .mono-label { display: inline-block; margin-bottom: var(--space-md); }
.hero h1 { font-size: var(--text-display); font-weight: 600; max-width: 16ch; margin: 0 auto var(--space-md); }
.hero__sub { max-width: 54ch; margin: 0 auto var(--space-lg); color: var(--color-ink-dim); font-size: var(--text-lg); }
.hero__cta { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }

/* Hero visual · hand-built analytics card (not fake UI chrome) */
.showcase { position: relative; margin-top: var(--space-xl); background: var(--color-surface); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-lg); }
.showcase__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); text-align: left; }
.showcase__head h3 { font-size: var(--text-lg); font-weight: 600; }
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--font-mono); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-dim); }
.chart-legend span { display: inline-flex; align-items: center; gap: 8px; }
.chart-legend i { width: 18px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.lg-crit { background: var(--color-zone-crit); }
.lg-mid  { background: var(--color-zone-mid); }
.lg-opt  { background: var(--color-zone-opt); }
.lg-band { background: var(--color-zone-opt-soft); border: 1px solid var(--color-zone-opt); }
.lg-fc { height: 0 !important; border-top: 2px dashed var(--color-zone-opt); border-radius: 0; }
.lg-meta { height: 0 !important; border-top: 1.5px dashed var(--color-ink-dim); border-radius: 0; }

/* Chart interactivity — bar entrance + hover/focus tooltip */
.chart .bar { transform-box: fill-box; transform-origin: center bottom; }
.js .showcase:not(.in-view) .chart .bar { transform: scaleY(0); }
.showcase.in-view .chart .bar { transform: scaleY(1); transition: transform 620ms var(--ease-out); transition-delay: calc(var(--i, 0) * 42ms); }
.chart .hit { cursor: pointer; fill: transparent; }
.chart .hit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
  background: var(--color-nav-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--color-hairline); border-radius: var(--radius-md);
  padding: 8px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-dim);
  min-width: 128px; box-shadow: var(--shadow-md);
}
.chart-tip.is-visible { opacity: 1; transform: none; }
.chart-tip b { display: block; font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--color-ink); margin-bottom: 3px; }
.chart-tip span { display: block; }
.chart-tip strong { color: var(--color-accent); font-size: 12px; }
.chart-tip .tip-z { color: var(--color-ink-faint); margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .chart .bar { transform: none !important; }
  .showcase.in-view .chart .bar { transition: none; }
}

/* ————————————————————————————— Section scaffold ————————————————————————————— */
.section { padding: var(--space-2xl) 0; }
.section__head { max-width: 42ch; margin-bottom: var(--space-xl); }
.section__head .mono-label { display: block; margin-bottom: var(--space-sm); }
.section__head h2 { font-size: var(--text-2xl); font-weight: 600; }
.section__head p { margin-top: var(--space-sm); color: var(--color-ink-dim); font-size: var(--text-lg); }

/* ————————————————————————————— Pillars flow (BI → IA → RPA) ————————————————————————————— */
.flow-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); margin-bottom: var(--space-lg); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-faint); }
.flow-ribbon b { font-weight: 600; }
.flow-ribbon .sep { color: var(--color-ink-faint); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
/* each pillar carries a concept colour via --pc; default falls back to accent */
.pillar { --pc: var(--color-accent); --pc-soft: var(--color-accent-soft); --pc-line: var(--color-accent-line);
  position: relative; background: var(--color-surface); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--color-hairline); border-top: 2px solid var(--pc-line); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.pillar:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--pc-line); }
.pillar--bi  { --pc: var(--color-bi);  --pc-soft: var(--color-bi-soft);  --pc-line: var(--color-bi-line); }
.pillar--ia  { --pc: var(--color-ia);  --pc-soft: var(--color-ia-soft);  --pc-line: var(--color-ia-line); }
.pillar--rpa { --pc: var(--color-rpa); --pc-soft: var(--color-rpa-soft); --pc-line: var(--color-rpa-line); }
.pillar__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.pillar__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--pc); }
.pillar__verb { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc); background: var(--pc-soft); border: 1px solid var(--pc-line); padding: 4px 10px; border-radius: var(--radius-pill); }
.pillar h3 { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-2xs); }
.pillar__lead { color: var(--color-ink); font-size: var(--text-base); margin-bottom: var(--space-sm); }
.pillar__desc { color: var(--color-ink-dim); font-size: var(--text-sm); margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-hairline-2); }

/* ————————————————————————————— Casos de éxito (real metrics) ————————————————————————————— */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.case { background: var(--color-surface); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.case:hover { border-color: var(--color-accent-line); background: var(--color-surface-2); }
.case__tag { display: inline-flex; align-self: flex-start; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-strong); margin-bottom: var(--space-sm); }
.case p { color: var(--color-ink-dim); font-size: var(--text-sm); }
.case__concepts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-sm); }
.chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid; }
.chip--bi  { color: var(--color-bi);  border-color: var(--color-bi-line);  background: var(--color-bi-soft); }
.chip--ia  { color: var(--color-ia);  border-color: var(--color-ia-line);  background: var(--color-ia-soft); }
.chip--rpa { color: var(--color-rpa); border-color: var(--color-rpa-line); background: var(--color-rpa-soft); }
.case__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-hairline-2); font-variant-numeric: tabular-nums; }
.case__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--color-accent); letter-spacing: -0.03em; line-height: 1; }
.case__lbl { display: block; color: var(--color-ink-faint); font-size: var(--text-xs); margin-top: 6px; }

/* ————————————————————————————— Benefits (asymmetric split) ————————————————————————————— */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-2xl); align-items: start; }
.benefits { display: grid; gap: var(--space-lg); }
.benefit { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-hairline-2); }
.benefit:last-child { border-bottom: 0; padding-bottom: 0; }
.benefit__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent-strong); padding-top: 3px; }
.benefit h3 { font-size: var(--text-lg); font-weight: 600; }
.benefit p { color: var(--color-ink-dim); margin-top: 4px; }

/* ————————————————————————————— Methodology (numbered rail) ————————————————————————————— */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); counter-reset: step; }
.step { position: relative; padding-top: var(--space-md); border-top: 2px solid var(--color-accent-line); }
.step__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent-strong); letter-spacing: 0.1em; }
.step h3 { font-size: var(--text-lg); font-weight: 600; margin: var(--space-2xs) 0; }
.step p { color: var(--color-ink-dim); font-size: var(--text-sm); }

/* ————————————————————————————— Closing CTA (contrast band) ————————————————————————————— */
.close-band { background: var(--color-surface-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--color-accent-line); color: var(--color-ink); border-radius: var(--radius-lg); padding: var(--space-2xl) var(--space-lg); text-align: center; position: relative; overflow: hidden; }
.close-band::after { content: ""; position: absolute; inset: auto 0 -60% 0; height: 120%; background: radial-gradient(50% 70% at 50% 100%, var(--color-accent-soft), transparent 70%); pointer-events: none; }
.close-band > * { position: relative; }
.close-band h2 { color: var(--color-ink); font-size: var(--text-display-s); max-width: 18ch; margin: 0 auto var(--space-md); }
.close-band p { color: var(--color-ink-dim); max-width: 46ch; margin: 0 auto var(--space-lg); font-size: var(--text-lg); }
.contact-line { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); justify-content: center; align-items: center; margin-top: var(--space-lg); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-dim); }
.contact-line strong { color: var(--color-ink); font-weight: 600; }
.contact-line .sep { color: var(--color-accent); }
.contact-line a { color: var(--color-wa); font-weight: 600; }
.footer__meta a[href*="wa.me"] { color: var(--color-wa); }

/* ————————————————————————————— Footer · Ft2 inline ————————————————————————————— */
.footer { border-top: 1px solid var(--color-hairline); padding: var(--space-lg) 0; margin-top: var(--space-2xl); }
.footer__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.footer .brand { font-size: var(--text-base); }
.footer__meta { color: var(--color-ink-faint); font-size: var(--text-sm); }
.footer__meta a:hover { color: var(--color-accent-strong); }

/* ————————————————————————————— Entrance ————————————————————————————— */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.revealed [data-reveal] { opacity: 1; transform: none; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.revealed [data-reveal="2"] { transition-delay: 70ms; }
.revealed [data-reveal="3"] { transition-delay: 140ms; }
.revealed [data-reveal="4"] { transition-delay: 210ms; }

/* ————————————————————————————— Responsive ————————————————————————————— */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-xl); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: 1fr; }
  .cases { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nav__links { display: none; }
  .steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .revealed [data-reveal] { transition: opacity 120ms linear; transition-delay: 0 !important; }
  .btn[data-state="loading"]::after { animation: none; }
}