/* Hallmark · pre-emit critique: P5 H5 E4 S4 R5 V4 */
/* Hallmark · genre: modern-minimal · macrostructure: Split Studio (home) + Narrative Workflow (industria)
 * theme: custom "Papel Indigo" · vibe: "minimal chileno, papel blanco, morado de marca"
 * paper: oklch(99.4% 0.0015 285) · accent: oklch(43% 0.252 285) = #5000D0
 * display+body: Figtree · mono: JetBrains Mono · nav: N11 mega-menu · footer: Ft1 mast-headed
 * axes: paper-band=light / display-style=geometric-sans / accent-hue=cool
 * enrichment: Tier B — embudo SVG hecho a mano
 */
/* Hallmark · genre: modern-minimal · theme: custom "Papel Índigo"
 * paper: oklch(99.4% 0.0015 285) light · display: geometric-sans (Figtree) · accent: cool-violet 285
 * Tokens compartidos — home + industria. Este archivo será la base de main.css en el theme.
 */
:root {
  /* — Papel e ink — */
  --color-paper:      oklch(99.4% 0.0015 285);
  --color-paper-2:    oklch(97.6% 0.0060 292);
  --color-paper-3:    oklch(95.2% 0.0110 292);
  --color-ink:        oklch(16.4% 0.0147 291);
  --color-ink-2:      oklch(38.0% 0.0240 292);
  --color-muted:      oklch(53.0% 0.0230 293);
  --color-rule:       oklch(92.3% 0.0136 295);
  --color-rule-2:     oklch(87.0% 0.0180 293);

  /* — Acento: el morado del logo — */
  --color-accent:      oklch(45.1% 0.2545 290.3);  /* #6001D4 — morado del logo */
  --color-accent-deep: oklch(37.0% 0.2160 290.3);
  --color-accent-soft: oklch(96.4% 0.0215 292);
  --color-accent-line: oklch(84.0% 0.0720 292);
  --color-on-accent:   oklch(99.5% 0 0);
  --color-focus:       oklch(45.1% 0.2545 290.3);

  /* — Tipografía — */
  --font-display: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --text-display-s: clamp(2.1rem, 1.4rem + 3.1vw, 3.4rem);
  --text-display:   clamp(2.3rem, 1.55rem + 3.2vw, 3.6rem);

  /* — Espacio (4pt) — */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-4xl: 7.5rem;

  --page-max:    76rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;

  --rule-hair: 1px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 140ms;
  --dur-mid:   240ms;
  --dur-long:  380ms;

  --z-nav: 400;
  --z-panel: 420;
  --z-float: 300;
}
/* ═══ BASE ═══ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 120ms !important; scroll-behavior: auto !important; }
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
  overflow-wrap: anywhere;
  min-width: 0;
}
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-xs); }
::selection { background: var(--color-accent); color: var(--color-on-accent); }

.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }
.lede { font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem); color: var(--color-ink-2); line-height: 1.6; max-width: 34ch; }
.muted { color: var(--color-muted); }
.rule { border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin: 0; }

/* ═══ BOTONES ═══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 46px; padding: 0.7rem 1.35rem;
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 600;
  letter-spacing: -0.01em; white-space: nowrap; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn--accent:hover, .btn--accent.is-hover { background: var(--color-accent-deep); }
.btn--outline { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); }
.btn--outline:hover, .btn--outline.is-hover { border-color: var(--color-ink); background: var(--color-paper-2); }
.btn--ghost { background: transparent; color: var(--color-accent); padding-inline: 0.25rem; }
.btn--ghost:hover { color: var(--color-accent-deep); }
.btn--sm { min-height: 40px; padding: 0.5rem 1rem; font-size: var(--text-sm); }
.btn--block { width: 100%; }

.tlink { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent-line); padding-bottom: 2px;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.tlink:hover { border-color: var(--color-accent); }
.tlink svg { transition: transform var(--dur-short) var(--ease-out); }
.tlink:hover svg { transform: translateX(3px); }

/* ═══ NAV · N11 mega-menu ═══ */
.nav { position: sticky; top: 0; z-index: var(--z-nav); background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(16px) saturate(150%); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__inner { max-width: var(--page-max); margin-inline: auto; padding: 0.75rem var(--page-gutter);
  display: flex; align-items: center; gap: var(--space-lg); }
.nav__brand { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 800;
  font-size: 1.0625rem; letter-spacing: -0.03em; white-space: nowrap; }
.nav__brand b { color: var(--color-accent); font-weight: 800; }
.nav__center { display: flex; align-items: center; gap: 0.125rem; margin-left: auto; }
.nav__link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--color-ink-2); white-space: nowrap;
  background: none; border: 0; font-family: inherit; cursor: pointer; border-radius: var(--radius-sm);
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--color-ink); background: var(--color-paper-3); }
.nav__caret { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-short) var(--ease-out); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(-135deg) translate(-2px, -2px); }
.nav__right { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.5rem; }
.nav__burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--color-rule-2); border-radius: var(--radius-sm); cursor: pointer; }
.nav__burger span { display: block; width: 17px; height: 1.6px; background: var(--color-ink); border-radius: 2px; position: relative; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.6px; background: var(--color-ink); border-radius: 2px; }
.nav__burger span::before { top: -5px; } .nav__burger span::after { top: 5px; }

.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-panel);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  background: color-mix(in oklch, var(--color-paper) 97%, transparent); backdrop-filter: blur(20px) saturate(160%);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  box-shadow: 0 26px 50px -30px oklch(16.4% 0.0147 291 / 0.28);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), visibility var(--dur-mid); }
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega__inner { max-width: var(--page-max); margin-inline: auto; padding: var(--space-xl) var(--page-gutter) var(--space-lg);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem var(--space-xl); }
.mega__head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  padding-bottom: var(--space-sm); margin-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.mega__item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0.75rem; align-items: start;
  padding: 0.6rem 0.7rem; border-radius: var(--radius-sm);
  transition: background-color var(--dur-short) var(--ease-out); }
.mega__item:hover { background: var(--color-accent-soft); }
.mega__item svg { color: var(--color-accent); margin-top: 2px; }
.mega__item b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.015em; }
.mega__item i { display: block; font-style: normal; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.45; }
.scrim { position: fixed; inset: 0; z-index: var(--z-float); background: oklch(16.4% 0.0147 291 / 0.22);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-mid), visibility var(--dur-mid); }
.scrim.is-active { opacity: 1; visibility: visible; }

@media (max-width: 62rem) {
  .nav__center, .nav__right .btn { display: none; }
  .nav__burger { display: flex; }
  .nav__right { margin-left: auto; }
}

/* ═══ SECCIONES ═══ */
.sec { padding-block: var(--space-3xl); }
.sec--tight { padding-block: var(--space-2xl); }
.sec--wide { padding-block: var(--space-4xl); }
.sec--tinted { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.sec__head { max-width: 46rem; margin-bottom: var(--space-2xl); display: grid; gap: var(--space-sm); }
.sec__head h2 { font-size: var(--text-4xl); }
.sec__head p { color: var(--color-muted); max-width: 52ch; font-size: var(--text-base); }

/* ═══ HERO · H2 split diptych ═══ */
.hero { padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem) var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: 6.4fr 5fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { font-size: var(--text-display); font-weight: 800; letter-spacing: -0.042em; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero__lede { margin-top: var(--space-lg); font-size: clamp(1.0625rem, 0.98rem + 0.5vw, 1.3125rem);
  color: var(--color-ink-2); line-height: 1.55; max-width: 40ch; }
.hero__ctas { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: 0.625rem; }
.hero__note { margin-top: var(--space-lg); display: flex; align-items: center; gap: 0.5rem; }
.hero__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; }

/* panel de prueba — sin chrome falso */
.proof { border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); background: var(--color-paper); overflow: hidden; }
.proof__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: 0.75rem 1rem; border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.proof__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center;
  padding: 0.85rem 1rem; border-bottom: var(--rule-hair) solid var(--color-rule); }
.proof__row:last-child { border-bottom: 0; }
.proof__who { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.015em; }
.proof__meta { font-size: var(--text-sm); color: var(--color-muted); }
.proof__tag { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: var(--radius-xs); background: var(--color-accent-soft); color: var(--color-accent-deep); white-space: nowrap; }
.proof__foot { padding: 0.75rem 1rem; background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }

@media (max-width: 56rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .hero__lede { max-width: 46ch; }
}

/* ═══ TIRA DE INDUSTRIAS (hairline, sin cajas) ═══ */
.strip { border-block: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.strip__inner { max-width: var(--page-max); margin-inline: auto; padding: 0 var(--page-gutter);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 6.5rem), 1fr)); }
.strip__cell { padding: 0.9rem 0.5rem; text-align: center; border-right: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.strip__cell:last-child { border-right: 0; }

/* ═══ SPLIT STUDIO — bloques diptico ═══ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split--rev .split__text { order: 2; }
.split h2 { font-size: var(--text-4xl); }
.split p { color: var(--color-ink-2); margin-top: var(--space-md); max-width: 42ch; }
@media (max-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .split--rev .split__text { order: 0; }
}

.checks { margin-top: var(--space-lg); display: grid; gap: 0.6rem; }
.checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0.65rem; align-items: start;
  font-size: var(--text-base); color: var(--color-ink-2); }
.checks svg { color: var(--color-accent); margin-top: 5px; }

/* ═══ ÍNDICE DE INDUSTRIAS ═══ */
.inds { border-bottom: var(--rule-hair) solid var(--color-rule); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.ind { display: grid; gap: 0.45rem; align-content: start; padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule); position: relative;
  transition: background-color var(--dur-short) var(--ease-out); }
.ind:hover { background: var(--color-accent-soft); }
.ind__top { display: flex; align-items: center; gap: 0.55rem; color: var(--color-accent); }
.ind h3 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.02em; }
.ind p { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; max-width: 30ch; }
.ind__metric { margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-ink-2); }
.ind__metric b { color: var(--color-accent); font-weight: 600; }
.ind__go { position: absolute; right: var(--space-lg); bottom: var(--space-lg); color: var(--color-accent);
  opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.ind:hover .ind__go, .ind:focus-visible .ind__go { opacity: 1; transform: none; }
@media (hover: none) { .ind__go { opacity: 1; transform: none; } }
.ind:hover { padding-left: var(--space-md); }

/* ═══ MÉTRICAS ═══ */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden; background: var(--color-paper); }
.metric { padding: var(--space-lg); border-right: var(--rule-hair) solid var(--color-rule); }
.metric:last-child { border-right: 0; }
.metric__n { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.metric__l { margin-top: 0.5rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.metric__d { margin-top: 0.2rem; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; }
.metrics--stack { grid-template-columns: minmax(0, 1fr); }
.metrics--stack .metric { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.metrics--stack .metric:last-child { border-bottom: 0; }
.metrics--stack .metric { display: grid; grid-template-columns: 9.75rem minmax(0, 1fr); gap: 0.25rem var(--space-md); align-items: baseline; }
.metrics--stack .metric__l { margin-top: 0; grid-column: 2; }
.metrics--stack .metric__d { grid-column: 2; }
.metrics--stack .metric__n { grid-row: 1 / span 2; }
@media (max-width: 52rem) { .metric { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); } .metric:last-child { border-bottom: 0; } }

/* ═══ TESTIMONIOS ═══ */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-lg); }
.quote { display: grid; align-content: start; gap: var(--space-md); padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.quote blockquote { margin: 0; font-size: var(--text-base); line-height: 1.6; color: var(--color-ink); }
.quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem var(--space-md);
  padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.quote figcaption b { display: block; font-weight: 600; color: var(--color-ink); }
.quote figcaption > span:first-child { min-width: 0; }
.quote figcaption span { color: var(--color-muted); }
.quote__kpi { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pending { display: inline-block; padding: 0.05rem 0.4rem; border-radius: var(--radius-xs);
  background: var(--color-paper-3); color: var(--color-muted); font-size: 0.8125rem; }

/* ═══ CTA FINAL ═══ */
.cta { border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); overflow: hidden;
  display: grid; grid-template-columns: 1.1fr minmax(0, 1fr); }
.cta__left { padding: clamp(1.75rem, 4vw, 3rem); background: var(--color-accent); color: var(--color-on-accent); }
.cta__left h2 { font-size: var(--text-display-s); color: var(--color-on-accent); }
.cta__left p { margin-top: var(--space-md); color: color-mix(in oklch, var(--color-on-accent) 82%, var(--color-accent)); max-width: 34ch; }
.cta__left .checks li { color: color-mix(in oklch, var(--color-on-accent) 88%, var(--color-accent)); }
.cta__left .checks svg { color: var(--color-on-accent); }
.cta__right { padding: clamp(1.75rem, 4vw, 3rem); background: var(--color-paper); }
@media (max-width: 56rem) { .cta { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: 0.35rem; margin-bottom: var(--space-md); }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 0.6rem 0.75rem; font: inherit; font-size: var(--text-base);
  color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-rule-2); border-radius: var(--radius-sm);
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--color-accent); outline-offset: 1px; }
.field textarea { min-height: 88px; resize: vertical; }
.field[data-state="error"] input { border-color: oklch(52% 0.19 25); }
.field__err { font-size: var(--text-sm); color: oklch(48% 0.19 25); }

/* ═══ FOOTER · Ft1 mast-headed ═══ */
.foot { border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); padding-block: var(--space-2xl); }
.foot__inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-lg); }
.foot__mark { font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.03em; }
.foot__mark b { color: var(--color-accent); }
.foot__tag { font-size: var(--text-sm); color: var(--color-muted); margin-top: 0.2rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-sm); }
.foot__links a { color: var(--color-muted); white-space: nowrap; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.foot__links a:hover { color: var(--color-ink); border-color: var(--color-rule-2); }
.foot__legal { width: 100%; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm); color: var(--color-muted); }

/* ═══ NARRATIVE WORKFLOW (página de industria) ═══ */
.stages { counter-reset: stage; border-top: var(--rule-hair) solid var(--color-rule); }
.stage { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--space-lg); align-items: start; padding-block: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule); }
.stage__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em; padding-top: 0.3rem; }
.stage h3 { font-size: var(--text-2xl); }
.stage p { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-base); max-width: 44ch; }
.stage__aside { font-size: var(--text-sm); color: var(--color-muted); border-left: 2px solid var(--color-accent-line);
  padding-left: var(--space-md); }
.stage__aside b { display: block; color: var(--color-ink); font-weight: 600; margin-bottom: 0.2rem; }
@media (max-width: 56rem) {
  .stage { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .stage__n { padding-top: 0; }
  .stage__aside { margin-top: var(--space-sm); }
}

/* ═══ PRECIOS ═══ */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-lg); align-items: start; }
.plan { padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.plan--pick { border-color: var(--color-accent); }
.plan__badge { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
.plan__price { margin-top: 0.6rem; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.plan__per { font-size: var(--text-sm); color: var(--color-muted); }
.plan .checks { margin-block: var(--space-lg); }
.plan .checks li { font-size: 0.9375rem; }

/* ═══ FAQ ═══ */
.faq { border-top: var(--rule-hair) solid var(--color-rule); max-width: 48rem; }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-md); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-accent); font-size: 1.125rem; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--color-accent); }
.faq p { padding-bottom: var(--space-md); color: var(--color-ink-2); font-size: var(--text-base); max-width: 60ch; }

/* ═══ BREADCRUMB ═══ */
.crumb { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: var(--text-sm); color: var(--color-muted); }
.crumb a { white-space: nowrap; border-bottom: 1px solid transparent; }
.crumb a:hover { color: var(--color-accent); border-color: var(--color-accent-line); }

/* ═══ WA float ═══ */
.wa { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: var(--z-float);
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1rem; min-height: 46px;
  background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 12px 28px -14px oklch(16.4% 0.0147 291 / 0.6);
  transition: background-color var(--dur-short) var(--ease-out); }
.wa:hover { background: var(--color-accent); }
@media (max-width: 30rem) { .wa span { display: none; } .wa { padding: 0.75rem; } }

/* ═══ Nota del mockup ═══ */
.mock { background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); }
.mock div { max-width: var(--page-max); margin-inline: auto; padding: 0.6rem var(--page-gutter);
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; justify-content: space-between; }
.mock b { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-line); }
.mock a { color: var(--color-paper); border-bottom: 1px solid color-mix(in oklch, var(--color-paper) 40%, transparent); white-space: nowrap; }

/* 2 columnas fijas para bloques de 4 */
.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
@media (max-width: 48rem) { .cards2 { grid-template-columns: minmax(0, 1fr); } }
.card { padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.card h3 { font-size: 1.0625rem; }
.card p { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-base); }

/* ═══ SERVICIOS · página de sitios web ═══ */
.plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 68rem) { .plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .plans--4 { grid-template-columns: minmax(0, 1fr); } }
.plan--once { border-color: var(--color-ink); }
.plan__was { font-size: var(--text-sm); color: var(--color-muted); text-decoration: line-through; }
.plan__save { display: inline-block; margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent-deep);
  background: var(--color-accent-soft); padding: 0.15rem 0.45rem; border-radius: var(--radius-xs); }

/* tabla comparativa */
.spec-scroll { overflow-x: auto; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); }
.spec { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.9375rem; min-width: 40rem; background: var(--color-paper); }
.spec th, .spec td { padding: 0.75rem var(--space-md); text-align: left; border-bottom: var(--rule-hair) solid var(--color-rule); }
.spec thead th { position: sticky; top: 0; background: var(--color-paper-2); font-family: var(--font-display);
  font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.01em; white-space: nowrap; }
.spec thead th:not(:first-child), .spec tbody td { text-align: center; }
.spec th:first-child { width: 26%; }
.spec th:not(:first-child) { width: 18.5%; }
.spec tbody th { font-weight: 500; color: var(--color-ink-2); }
.spec td { text-align: center; font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.spec td.yes { color: var(--color-accent); font-weight: 600; }
.spec td.no { color: var(--color-rule-2); }
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody tr:hover { background: var(--color-accent-soft); }

/* tipos de sitio */
.tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden; }
.tipo { padding: var(--space-lg); border-right: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.tipo:last-child { border-right: 0; }
.tipo svg { color: var(--color-accent); margin-bottom: var(--space-sm); }
.tipo h3 { font-size: 1.0625rem; }
.tipo p { margin-top: 0.4rem; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.55; }
.tipo__for { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-2); }
@media (max-width: 52rem) { .tipo { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); } .tipo:last-child { border-bottom: 0; } }

/* portafolio — placeholders honestos */
.folio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-lg); }
.folio figure { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden; background: var(--color-paper); }
.folio { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.folio a { display: block; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-paper);
  transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.folio a:hover { border-color: var(--color-accent-line); transform: translateY(-2px); }
.folio img { width: 100%; height: auto; aspect-ratio: 760 / 400; object-fit: cover; object-position: top center;
  border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.folio .ph { aspect-ratio: 760 / 400; background: repeating-linear-gradient(135deg,
    var(--color-paper-2) 0 10px, var(--color-paper-3) 10px 20px);
  display: grid; place-items: center; border-bottom: var(--rule-hair) solid var(--color-rule); }
.folio .ph span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-muted); }
.folio__meta { padding: 0.8rem var(--space-md); }
.folio__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.folio__top b { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.015em; }
.folio__rubro { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-accent-deep); background: var(--color-accent-soft); padding: 0.15rem 0.4rem;
  border-radius: var(--radius-xs); white-space: nowrap; flex: none; }
.folio__desc { margin-top: 0.3rem; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; }
.folio__dom { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-accent); }
.folio figcaption { padding: 0.75rem var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.folio figcaption b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.015em; }
.folio figcaption i { font-style: normal; font-size: var(--text-sm); color: var(--color-muted); }

/* pasos compactos en fila */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); }
.paso__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.paso h3 { margin-top: 0.4rem; font-size: 1.0625rem; }
.paso p { margin-top: 0.35rem; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.55; }

/* incluye siempre — tira */
.incluye { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 11rem), 1fr)); gap: 0; }
.incluye li { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem var(--space-md);
  border-right: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.incluye li:last-child { border-right: 0; }
.incluye svg { color: var(--color-accent); flex: none; }

/* métricas con montos largos */
.metrics--money .metric { grid-template-columns: 10.5rem minmax(0, 1fr); }
.metrics--money .metric__n { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); letter-spacing: -0.03em; }
@media (max-width: 26rem) { .metrics--money .metric { grid-template-columns: minmax(0, 1fr); } .metrics--money .metric__l, .metrics--money .metric__d { grid-column: 1; } }

/* ajustes finos planes + tabla */
.plans { align-items: stretch; }
.plan { display: flex; flex-direction: column; }
.plan .btn { margin-top: auto; }
.plan .checks { margin-bottom: var(--space-lg); }
.spec td.yes svg { margin-inline: auto; }

/* ═══ Añadidos del theme ═══ */
.skip { position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-ink); color: var(--color-paper); padding: 0.75rem 1rem; border-radius: 0 0 var(--radius-sm) 0; }
.skip:focus { left: 0; }
.nav__brand svg { color: var(--color-accent); }
.nav__brand .custom-logo { height: 30px; width: auto; }
.nav__brand img { max-height: 34px; width: auto; }
.nav__call svg { flex: none; }
@media (max-width: 74rem) { .nav__call { display: none; } }

/* cajón móvil */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(88vw, 21rem); z-index: var(--z-panel);
  background: var(--color-paper); border-left: var(--rule-hair) solid var(--color-rule);
  transform: translateX(100%); visibility: hidden; overflow-y: auto;
  box-shadow: -20px 0 50px -30px oklch(16.4% 0.0147 291 / 0.4);
  transition: transform var(--dur-mid) var(--ease-out), visibility var(--dur-mid);
  padding: var(--space-xl) var(--space-lg) var(--space-2xl); display: grid; gap: 0.25rem; align-content: start; }
.drawer.is-open { transform: none; visibility: visible; }
.drawer .nav__link { display: flex; padding: 0.7rem 0.75rem; font-size: 1rem; }
.drawer__head { display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--space-md); margin-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.drawer__close { width: 40px; height: 40px; display: grid; place-items: center; background: none;
  border: 1px solid var(--color-rule-2); border-radius: var(--radius-sm); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.drawer__sub { margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.drawer__sub .mono { margin-bottom: 0.5rem; }
.drawer .mega__item { padding: 0.55rem 0.75rem; }
.drawer__cta { margin-top: var(--space-lg); display: grid; gap: 0.5rem; }

/* estados del formulario */
.form__msg { margin-top: var(--space-md); padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.form__msg[data-state="ok"] { background: var(--color-accent-soft); color: var(--color-accent-deep); }
.form__msg[data-state="err"] { background: oklch(96% 0.04 25); color: oklch(45% 0.19 25); }
.btn[data-loading="1"] { opacity: 0.6; pointer-events: none; }
.hp { position: absolute; left: -9999px; }
.plan__save { align-self: start; }
.plan__badge, .plan__was, .plan__price, .plan__per { align-self: start; }

/* contenido de páginas y entradas normales */
.prosa { max-width: 68ch; }
.prosa > * + * { margin-top: var(--space-md); }
.prosa h2 { font-size: var(--text-3xl); margin-top: var(--space-xl); }
.prosa h3 { font-size: var(--text-xl); margin-top: var(--space-lg); }
.prosa ul, .prosa ol { padding-left: 1.2rem; }
.prosa ul { list-style: disc; } .prosa ol { list-style: decimal; }
.prosa li + li { margin-top: 0.35rem; }
.prosa a { color: var(--color-accent); border-bottom: 1px solid var(--color-accent-line); }
.prosa img { border-radius: var(--radius-md); }
.prosa blockquote { border-left: 2px solid var(--color-accent-line); padding-left: var(--space-md); color: var(--color-ink-2); }

/* paginación */
.nav-links { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.page-numbers { display: grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0 0.6rem;
  border: 1px solid var(--color-rule); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; }
.page-numbers.current { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.page-numbers:hover:not(.current) { border-color: var(--color-ink); }

/* plan sin monto publicado */
.plan__quote { align-self: start; margin-top: 0.6rem; font-family: var(--font-display);
  font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; color: var(--color-ink);
  line-height: 1.35; max-width: 24ch; }
.plan__quote::before { content: ""; display: block; width: 26px; height: 2px;
  background: var(--color-accent); margin-bottom: 0.55rem; }
.plan__quote + .checks { margin-top: var(--space-lg); }

/* ═══ Logo ═══ */
.nav__brand img, .foot__mark img { display: block; width: auto; }
.nav__brand img { height: 30px; }
.foot__mark img { height: 26px; }
@media (max-width: 30rem) { .nav__brand img { height: 26px; } }

/* ═══ AUTOMATIZACIONES · diagrama de flujo ═══ */
.flow { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper); padding: clamp(1rem, 3vw, 2rem); overflow-x: auto; }
.flow svg { min-width: 42rem; width: 100%; height: auto; display: block; }
.flow figcaption { margin-top: var(--space-md); }

/* capacidades */
.caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden; }
.cap { padding: var(--space-lg); border-right: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.cap svg { color: var(--color-accent); margin-bottom: var(--space-sm); }
.cap h3 { font-size: 1rem; letter-spacing: -0.018em; }
.cap p { margin-top: 0.35rem; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.55; }
@media (max-width: 52rem) { .cap { border-right: 0; } }

/* antes / después */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden; }
.vs__col { padding: var(--space-lg); }
.vs__col:first-child { background: var(--color-paper-2); border-right: var(--rule-hair) solid var(--color-rule); }
.vs__col h3 { font-size: 1.0625rem; }
.vs__col > .mono { margin-bottom: 0.5rem; }
.vs__col ul { margin-top: var(--space-md); display: grid; gap: 0.7rem; }
.vs__col li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0.6rem;
  font-size: 0.9375rem; line-height: 1.55; }
.vs__col li span:first-child { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.9rem; text-align: center; }
.vs__col--ok li span:first-child { color: var(--color-accent); }
.vs__col--ok { color: var(--color-ink); }
.vs__col--bad { color: var(--color-ink-2); }
@media (max-width: 48rem) {
  .vs { grid-template-columns: minmax(0, 1fr); }
  .vs__col:first-child { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
}

/* casos por rubro */
.casos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-lg); }
.caso { display: grid; align-content: start; gap: 0.5rem; padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.caso__rubro { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-accent); }
.caso h3 { font-size: 1.0625rem; }
.caso p { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.55; }
.caso__trigger { margin-top: var(--space-sm); padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.caso__trigger b { display: block; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.2rem; font-weight: 500; }

/* tarjetas de servicio en la home */
.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-lg); }
.servicio { display: grid; align-content: start; gap: 0.5rem; padding: var(--space-xl);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper);
  transition: border-color var(--dur-short) var(--ease-out); }
.servicio:hover { border-color: var(--color-accent-line); }
.servicio > svg { color: var(--color-accent); margin-bottom: var(--space-xs); }
.servicio h3 { font-size: var(--text-xl); }
.servicio p { color: var(--color-ink-2); font-size: var(--text-base); }
.servicio .checks { margin-top: var(--space-sm); }
.servicio .checks li { font-size: 0.9375rem; }
.servicio .tlink { margin-top: var(--space-md); justify-self: start; }