/* =============================================================
   design-cascade.css

   Concatenation of every CSS file the original CARTON AI FACTORY
   design loads on a fresh page, in the EXACT order declared in
   `design/CARTON AI FACTORY.html`. Lets WordPress mirror the
   design's global cascade so every section emits identical
   typography, spacing, color, animation tokens — no matter
   which block triggers it.

   Order:
     core.css → pages.css → home.css → platform.css → stack.css →
     solutions.css → industries.css → caso.css → tool.css →
     elevation.css → redesign.css → artdirection.css → recursos.css →
     about.css → legal.css → contacto.css

   chrome.css enqueues AFTER this file, so any WordPress-only
   override (sticky header, mobile nav, full-bleed tone tweaks…)
   still wins. Block-level style.css files enqueue last per WP
   per-block convention, so block-specific tweaks (Alpine x-cloak,
   inner gutters, etc.) also win.
   ============================================================= */


/* ---------- core.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Core (tokens, temas, base, chrome)
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Archivo', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background .5s ease, color .5s ease;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- Tokens base ---------- */
:root {
  --accent: #5b8cff;
  --accent-soft: #5b8cff22;
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* dirección: infra (por defecto) */
  --radius: 3px;
  --sec-pad: clamp(72px, 9vw, 132px);
  --measure: 56ch;
  --display-tight: -0.03em;
  --grid-deco: block;
}

/* ---------- Tema oscuro ---------- */
[data-theme="dark"] {
  --bg: #08090a;
  --surface: #0d0e11;
  --surface-2: #131418;
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.20);
  --text: #f3f3f1;
  --text-dim: #9c9d99;
  --text-faint: #66675f;
  --viz-line: rgba(255,255,255,0.11);
  --viz-ring: rgba(255,255,255,0.045);
  --raise: rgba(255,255,255,0.018);
  --nav-bg: rgba(8,9,10,0.72);
}

/* ---------- Tema claro ---------- */
[data-theme="light"] {
  --bg: #f5f4ef;
  --surface: #ffffff;
  --surface-2: #efeee7;
  --border: rgba(18,19,24,0.13);
  --border-strong: rgba(18,19,24,0.26);
  --text: #14151a;
  --text-dim: #585a61;
  --text-faint: #9a9b96;
  --viz-line: rgba(18,19,24,0.14);
  --viz-ring: rgba(18,19,24,0.05);
  --raise: rgba(18,19,24,0.022);
  --nav-bg: rgba(245,244,239,0.78);
}

/* ---------- Dirección: editorial ---------- */
[data-dir="editorial"] {
  --radius: 0px;
  --sec-pad: clamp(96px, 12vw, 176px);
  --measure: 50ch;
  --display-tight: -0.035em;
  --grid-deco: none;
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.section { padding: var(--sec-pad) 0; position: relative; }
.tone-raise { background: var(--raise); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.page-shell { animation: pageIn .5s var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Reveal (base; la animación de entrada vive en elevation.css) ---------- */
.reveal { opacity: 1; }

/* ---------- Tipografía global ---------- */
.block-head { margin-bottom: clamp(40px, 5vw, 68px); }
.block-head-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.block-title {
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 540;
  letter-spacing: var(--display-tight);
  line-height: 1.03;
  max-width: 20ch;
  text-wrap: balance;
}
.block-lead { color: var(--text-dim); font-size: clamp(16px, 1.4vw, 19px); max-width: 44ch; line-height: 1.6; }

/* ---------- Kicker ---------- */
.kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.kicker-idx { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent); letter-spacing: .1em; }
.kicker-line { width: 28px; height: 1px; background: var(--border-strong); }
.kicker-text { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--text-dim); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--radius);
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
  transition: all .35s var(--ease); white-space: nowrap;
}
.btn-arrow { display: inline-flex; transition: transform .35s var(--ease); }
.btn:hover .btn-arrow { transform: translate(2px, -2px); }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: var(--accent); color: #fff; }
.btn-ghost { border: 1px solid var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); background: var(--raise); }
.btn-line { padding: 12px 0; color: var(--text); border-bottom: 1px solid var(--border-strong); border-radius: 0; }
.btn-line:hover { border-color: var(--accent); color: var(--accent); }
.btn-full { width: 100%; justify-content: center; }

/* ---------- NAV ---------- */
.nav { position: sticky; top: 0; z-index: 80; transition: all .4s var(--ease); border-bottom: 1px solid transparent; }
.nav-scrolled { background: var(--nav-bg); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--border); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: var(--radius); display: grid; place-items: center; position: relative; transition: border-color .3s; }
.brand:hover .brand-mark { border-color: var(--accent); }
.brand-mark-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 0 var(--accent-soft); animation: brandPulse 3s var(--ease) infinite; }
@keyframes brandPulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 5px transparent; } }
.brand-word { display: flex; flex-direction: column; line-height: 1; gap: 2px; text-align: left; }
.brand-word-1 { font-size: 14px; font-weight: 640; letter-spacing: .04em; }
.brand-word-2 { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .26em; color: var(--text-dim); }

.nav-links { display: flex; gap: 6px; }
.nav-link { position: relative; padding: 8px 14px; font-size: 14px; color: var(--text-dim); border-radius: var(--radius); transition: color .25s, background .25s; }
.nav-link:hover { color: var(--text); }
.nav-link-active { color: var(--text); }
.nav-link-active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1.5px; background: var(--accent); border-radius: 2px; }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 13.5px; font-weight: 500; color: var(--bg); background: var(--text); border-radius: var(--radius); transition: all .3s var(--ease); }
.nav-cta:hover { background: var(--accent); color: #fff; }
.nav-cta svg { transition: transform .3s var(--ease); }
.nav-cta:hover svg { transform: translate(2px,-2px); }

.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-burger span { width: 20px; height: 1.5px; background: var(--text); transition: .3s; }
.nav-burger.is-open span:first-child { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:last-child { transform: translateY(-6.5px) rotate(-45deg); }
.nav-mobile { display: none; flex-direction: column; padding: 12px clamp(20px,5vw,56px) 22px; background: var(--nav-bg); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); gap: 4px; }
.nav-mobile-link { text-align: left; padding: 12px 0; font-size: 18px; border-bottom: 1px solid var(--border); }
.nav-mobile-link.active { color: var(--accent); }
.nav-mobile-cta { margin-top: 14px; padding: 14px; background: var(--text); color: var(--bg); border-radius: var(--radius); font-weight: 500; }

/* ---------- HERO ---------- */
.hero { position: relative; padding-top: clamp(48px, 7vw, 88px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; min-height: min(78vh, 760px); padding-bottom: clamp(40px,6vw,72px); }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; color: var(--text-dim); padding: 7px 13px; border: 1px solid var(--border); border-radius: 100px; margin-bottom: 28px; }
.hero-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.hero-title { font-size: clamp(40px, 6.4vw, 84px); font-weight: 560; letter-spacing: var(--display-tight); line-height: 0.99; text-wrap: balance; }
.hero-em { color: var(--accent); font-style: normal; }
.hero-sub { margin-top: clamp(22px,2.6vw,30px); font-size: clamp(17px,1.5vw,20px); color: var(--text-dim); max-width: 50ch; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: clamp(20px,4vw,46px); margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--border); }
.hero-stat { display: flex; flex-direction: column; gap: 5px; }
.hero-stat-n { font-size: 16px; font-weight: 560; letter-spacing: -.01em; }
.hero-stat-l { font-size: 11px; color: var(--text-faint); letter-spacing: .04em; }

/* hero inner pages */
.hero-inner-page { padding-top: clamp(70px, 9vw, 120px); padding-bottom: clamp(20px,3vw,40px); }
.page-title { font-size: clamp(38px, 5.6vw, 72px); font-weight: 560; letter-spacing: var(--display-tight); line-height: 1.0; text-wrap: balance; margin-bottom: 26px; }
.page-lead { font-size: clamp(17px,1.5vw,20px); color: var(--text-dim); max-width: 56ch; line-height: 1.55; }

/* marquee */
.hero-marquee { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; padding: 13px 0; }
.hero-marquee-track { display: flex; white-space: nowrap; font-size: 11px; letter-spacing: .26em; color: var(--text-faint); animation: marquee 38s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- VIZ (sistema vivo) ---------- */
.hero-viz { position: relative; height: clamp(380px, 46vw, 540px); }
.viz { position: relative; width: 100%; height: 100%; }
.viz-canvas { position: absolute; inset: 0; }
.viz-node { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); white-space: nowrap; transition: border-color .3s, transform .3s; animation: nodeFloat 7s var(--ease) infinite; }
.viz-node:nth-child(3){ animation-delay: -1.2s; } .viz-node:nth-child(4){ animation-delay: -2.4s; }
.viz-node:nth-child(5){ animation-delay: -3.6s; } .viz-node:nth-child(6){ animation-delay: -4.8s; }
@keyframes nodeFloat { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%, calc(-50% - 5px)); } }
.viz-node-core { padding: 12px 16px; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft), 0 8px 40px -12px var(--accent-soft); background: var(--surface); z-index: 3; }
.viz-node-pin { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.viz-node-core .viz-node-pin { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.viz-node-body { display: flex; flex-direction: column; gap: 1px; }
.viz-node-label { font-size: 12.5px; font-weight: 560; letter-spacing: -.01em; }
.viz-node-sub { font-size: 9px; color: var(--text-faint); letter-spacing: .04em; }
.viz-node-core .viz-node-label { font-size: 14px; }
.viz-node-status { font-size: 9px; color: var(--accent); border: 1px solid var(--accent-soft); padding: 2px 6px; border-radius: 100px; letter-spacing: .1em; }
.viz-readout { position: absolute; left: 0; bottom: -6px; display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--text-faint); letter-spacing: .08em; }
.viz-readout-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--border); }
.footer-cta { border-bottom: 1px solid var(--border); padding: clamp(72px,10vw,136px) 0; background: var(--raise); }
.footer-cta-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px,5vw,56px); }
.footer-cta-title { font-size: clamp(32px,5vw,62px); font-weight: 560; letter-spacing: var(--display-tight); line-height: 1.02; margin: 10px 0 18px; text-wrap: balance; }
.footer-cta-sub { color: var(--text-dim); font-size: clamp(16px,1.4vw,19px); max-width: 50ch; margin-bottom: 34px; }
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-main { max-width: var(--maxw); margin: 0 auto; padding: clamp(48px,6vw,76px) clamp(20px,5vw,56px); display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px,4vw,56px); }
.footer-brand .brand { margin-bottom: 18px; }
.footer-tagline { color: var(--text-dim); font-size: 15px; max-width: 30ch; margin-bottom: 22px; }
.footer-meta { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--text-faint); letter-spacing: .05em; }
.footer-col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer-head { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--text-faint); margin-bottom: 4px; }
.footer-col button { font-size: 14px; color: var(--text-dim); transition: color .25s; text-align: left; }
.footer-col button:hover { color: var(--accent); }
.footer-static { font-size: 14px; color: var(--text-dim); }
.footer-bottom { max-width: var(--maxw); margin: 0 auto; padding: 22px clamp(20px,5vw,56px); border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); letter-spacing: .05em; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-viz { height: 420px; order: -1; }
  .block-head-split { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-mobile { display: flex; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .viz-node, .brand-mark-dot, .hero-marquee-track { animation: none; }
}

/* ---------- pages.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Estilos de secciones / páginas
   ============================================================ */

/* ---------- HOME · cambio de modelo ---------- */
.shift { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.shift-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px,4vw,48px); padding: clamp(22px,3vw,34px) 0; border-bottom: 1px solid var(--border); }
.shift-from, .shift-to { display: flex; flex-direction: column; gap: 8px; }
.shift-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); }
.shift-to .shift-tag { color: var(--accent); }
.shift-text { font-size: clamp(17px,1.8vw,23px); letter-spacing: -.01em; line-height: 1.2; }
.shift-from .shift-text { color: var(--text-dim); }
.shift-arrow { color: var(--text-faint); display: grid; place-items: center; }
@media (max-width: 680px){
  .shift-row { grid-template-columns: 1fr; gap: 14px; }
  .shift-arrow { transform: rotate(90deg); justify-self: start; }
}

/* ---------- HOME · pilares ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pillar { background: var(--bg); padding: clamp(24px,2.6vw,34px); display: flex; flex-direction: column; gap: 14px; transition: background .35s; min-height: 230px; }
.pillar:hover { background: var(--surface); }
.pillar-n { font-size: 11px; color: var(--accent); letter-spacing: .1em; }
.pillar-t { font-size: 20px; font-weight: 560; letter-spacing: -.01em; }
.pillar-d { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }
@media (max-width: 880px){ .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .pillars { grid-template-columns: 1fr; } }

/* ---------- HOME · stack ---------- */
.stack-layer { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stack-orq { display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: var(--accent-soft); border-bottom: 1px solid var(--border); font-size: 11px; letter-spacing: .12em; color: var(--text); text-transform: uppercase; }
.stack-orq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.stack-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.stack-item { padding: clamp(22px,2.4vw,32px) 22px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; transition: background .3s; min-height: 150px; }
.stack-item:last-child { border-right: none; }
.stack-item:hover { background: var(--raise); }
.stack-item-name { font-size: 16px; font-weight: 560; letter-spacing: -.01em; }
.stack-item-role { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.stack-note { padding: 14px 22px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-faint); letter-spacing: .06em; background: var(--raise); }
@media (max-width: 860px){ .stack-grid { grid-template-columns: 1fr 1fr; } .stack-item { border-bottom: 1px solid var(--border); } .stack-item:nth-child(2n){ border-right: none; } }
@media (max-width: 520px){ .stack-grid { grid-template-columns: 1fr; } .stack-item { border-right: none; } }

/* ---------- HOME · fases ---------- */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,40px); }
.phase { position: relative; padding-top: 26px; border-top: 2px solid var(--text); }
.phase::before { content:''; position: absolute; top: -2px; left: 0; width: 36px; height: 2px; background: var(--accent); }
.phase-step { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); }
.phase-t { font-size: clamp(22px,2.4vw,30px); font-weight: 560; letter-spacing: -.02em; margin: 12px 0 12px; }
.phase-d { font-size: 15px; color: var(--text-dim); line-height: 1.55; max-width: 36ch; }
.capabilities-cta { margin-top: clamp(36px,4vw,56px); }
@media (max-width: 760px){ .phases { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- SOLUCIONES · dominios ---------- */
.domains { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,24px); }
.domain { border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(26px,2.6vw,36px); display: flex; flex-direction: column; gap: 16px; transition: border-color .35s, transform .35s, background .35s; }
.domain:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.domain-top { display: flex; justify-content: space-between; align-items: center; }
.domain-tag { font-size: 11px; letter-spacing: .14em; color: var(--accent); border: 1px solid var(--accent-soft); padding: 4px 10px; border-radius: 100px; }
.domain-idx { font-size: 11px; color: var(--text-faint); }
.domain-title { font-size: clamp(20px,2vw,26px); font-weight: 560; letter-spacing: -.015em; }
.domain-desc { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }
.domain-points { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--border); }
.domain-points li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--text); }
.domain-bullet { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
@media (max-width: 840px){ .domains { grid-template-columns: 1fr; } }

/* ---------- SOLUCIONES · gobierno ---------- */
.govern { border-top: 1px solid var(--border); }
.govern-row { display: grid; grid-template-columns: 60px 1fr; gap: clamp(18px,3vw,42px); padding: clamp(22px,2.8vw,32px) 0; border-bottom: 1px solid var(--border); align-items: start; }
.govern-n { font-size: 12px; color: var(--accent); padding-top: 4px; }
.govern-body { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(16px,3vw,48px); align-items: start; }
.govern-t { font-size: clamp(19px,2vw,26px); font-weight: 540; letter-spacing: -.015em; }
.govern-d { font-size: 15px; color: var(--text-dim); line-height: 1.6; }
@media (max-width: 720px){ .govern-body { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- SOLUCIONES · criterios ---------- */
.criteria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 26px; }
.criteria-card { background: var(--bg); padding: clamp(22px,2.4vw,30px); display: flex; flex-direction: column; gap: 10px; min-height: 180px; transition: background .3s; }
.criteria-card:hover { background: var(--surface); }
.criteria-dim { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); }
.criteria-t { font-size: 19px; font-weight: 560; letter-spacing: -.01em; }
.criteria-d { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.stack-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--raise); }
.stack-strip-label { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--accent); }
.stack-strip-items { font-size: 13px; color: var(--text-dim); letter-spacing: .04em; }
@media (max-width: 880px){ .criteria { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .criteria { grid-template-columns: 1fr; } }

/* ---------- INDUSTRIAS · selector ---------- */
.usecases { display: grid; grid-template-columns: 280px 1fr; gap: clamp(20px,3vw,44px); }
.usecase-tabs { display: flex; flex-direction: column; gap: 4px; }
.usecase-tab { text-align: left; padding: 16px 18px; border: 1px solid transparent; border-radius: var(--radius); display: flex; flex-direction: column; gap: 5px; transition: all .3s var(--ease); position: relative; }
.usecase-tab:hover { background: var(--raise); }
.usecase-tab.active { background: var(--surface); border-color: var(--border); }
.usecase-tab.active::before { content:''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--accent); }
.usecase-tab-label { font-size: 15.5px; font-weight: 540; letter-spacing: -.01em; }
.usecase-tab-domain { font-size: 10px; color: var(--text-faint); letter-spacing: .1em; }
.usecase-tab.active .usecase-tab-domain { color: var(--accent); }
.usecase-panel { display: flex; flex-direction: column; gap: 16px; }
.usecase-card { border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(24px,2.6vw,32px); opacity: 0; animation: caseIn .5s var(--ease) forwards; transition: border-color .3s; }
.usecase-card:hover { border-color: var(--border-strong); }
@keyframes caseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.usecase-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.usecase-card-t { font-size: clamp(19px,2vw,25px); font-weight: 560; letter-spacing: -.015em; max-width: 22ch; }
.usecase-impact { font-size: 12px; color: var(--accent); border: 1px solid var(--accent-soft); padding: 5px 11px; border-radius: 100px; white-space: nowrap; }
.usecase-card-d { font-size: 15px; color: var(--text-dim); line-height: 1.6; max-width: 56ch; }
.usecase-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); gap: 14px; }
.usecase-horizon { font-size: 11px; color: var(--text-faint); letter-spacing: .06em; }
.usecase-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--text); }
.usecase-link svg { transition: transform .3s var(--ease); }
.usecase-link:hover { color: var(--accent); } .usecase-link:hover svg { transform: translate(2px,-2px); }
@media (max-width: 760px){ .usecases { grid-template-columns: 1fr; } .usecase-tabs { flex-direction: row; flex-wrap: wrap; } .usecase-tab { flex: 1 1 140px; } }

/* ---------- INDUSTRIAS · piloto ---------- */
.pilot-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pilot-step { padding: clamp(24px,2.6vw,34px); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; min-height: 200px; transition: background .3s; }
.pilot-step:last-child { border-right: none; }
.pilot-step:hover { background: var(--raise); }
.pilot-n { font-size: 12px; color: var(--accent); letter-spacing: .1em; }
.pilot-t { font-size: clamp(20px,2.2vw,27px); font-weight: 560; letter-spacing: -.02em; }
.pilot-d { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
@media (max-width: 840px){ .pilot-track { grid-template-columns: 1fr 1fr; } .pilot-step:nth-child(2){ border-right: none; } .pilot-step:nth-child(-n+2){ border-bottom: 1px solid var(--border); } }
@media (max-width: 480px){ .pilot-track { grid-template-columns: 1fr; } .pilot-step { border-right: none; border-bottom: 1px solid var(--border); } }

/* ---------- CONTACTO ---------- */
.contacto-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px,6vw,88px); align-items: start; min-height: 60vh; }
.contacto-title { font-size: clamp(34px,4.4vw,56px); }
.contacto-steps { display: flex; flex-direction: column; gap: 0; margin-top: 40px; border-top: 1px solid var(--border); }
.contacto-steps li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-faint); letter-spacing: .04em; transition: color .3s; }
.contacto-steps li.active { color: var(--text); }
.contacto-steps li.filled { color: var(--text-dim); }
.contacto-step-n { font-size: 11px; color: var(--accent); }
.contacto-steps li.filled .contacto-step-n::after { content:' ✓'; }

.contacto-form { border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(28px,3.4vw,44px); background: var(--surface); min-height: 380px; }
.form-step { animation: caseIn .4s var(--ease); }
.form-step-label { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); display: block; margin-bottom: 24px; }
.form-q { font-size: 18px; font-weight: 540; margin-bottom: 18px; }

.intent-list { display: flex; flex-direction: column; gap: 10px; }
.intent { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); text-align: left; transition: all .3s var(--ease); }
.intent:hover { border-color: var(--border-strong); background: var(--raise); }
.intent.selected { border-color: var(--accent); background: var(--accent-soft); }
.intent-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex-shrink: 0; margin-top: 3px; transition: .3s; position: relative; }
.intent.selected .intent-radio { border-color: var(--accent); }
.intent.selected .intent-radio::after { content:''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.intent-body { display: flex; flex-direction: column; gap: 4px; }
.intent-t { font-size: 16px; font-weight: 540; }
.intent-d { font-size: 13.5px; color: var(--text-dim); }

.domain-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; }
.domain-chip { padding: 11px 18px; border: 1px solid var(--border); border-radius: 100px; font-size: 14px; color: var(--text-dim); transition: all .25s; }
.domain-chip:hover { border-color: var(--border-strong); color: var(--text); }
.domain-chip.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 13px; font-weight: 500; color: var(--text-dim); display: flex; gap: 8px; align-items: center; }
.field-opt { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .1em; }
.field input, .field textarea { width: 100%; padding: 13px 15px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 15px; transition: border-color .25s; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input.err, .field textarea.err { border-color: #e8623c; }
.field-err { font-size: 11px; color: #e8623c; }

.form-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; gap: 16px; }
.form-back { font-size: 14px; color: var(--text-dim); transition: color .25s; }
.form-back:hover { color: var(--text); }

.contacto-done { text-align: center; max-width: 620px; margin: 0 auto; padding-top: 4vh; }
.contacto-done-mark { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--accent); display: grid; place-items: center; margin: 0 auto 30px; }
.contacto-done-mark span { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 24px var(--accent); animation: brandPulse 2.4s infinite; }
.contacto-done .page-lead { margin: 0 auto; }
.contacto-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }
.contacto-summary div { display: flex; flex-direction: column; gap: 6px; padding: 16px 24px; border: 1px solid var(--border); border-radius: var(--radius); }
.contacto-summary span { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); }
.contacto-summary b { font-size: 15px; font-weight: 540; }
@media (max-width: 820px){ .contacto-grid { grid-template-columns: 1fr; } }

/* ---------- home.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Home (bloques 02–10)
   ============================================================ */

/* ---------- 02 · El problema ---------- */
.problema { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px,6vw,92px); align-items: start; }
.statement-title { font-size: clamp(32px,4.6vw,60px); font-weight: 560; letter-spacing: var(--display-tight); line-height: 1.02; text-wrap: balance; }
.statement-dim { color: var(--text-faint); }
.statement-lead { margin-top: clamp(22px,2.4vw,30px); color: var(--text-dim); font-size: clamp(16px,1.4vw,19px); max-width: 46ch; line-height: 1.6; }
.problema-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.friction { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: clamp(20px,2.4vw,28px) 0; border-bottom: 1px solid var(--border); }
.friction-n { font-size: 11px; color: var(--accent); letter-spacing: .1em; padding-top: 3px; }
.friction-t { font-size: clamp(16px,1.5vw,19px); font-weight: 540; letter-spacing: -.01em; }
.friction-d { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-top: 7px; max-width: 42ch; }
@media (max-width: 860px){ .problema { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- 03 · Pull-quote ---------- */
.pullquote { margin: clamp(56px,7vw,96px) auto 0; max-width: 24ch; text-align: center; font-size: clamp(26px,3.6vw,46px); font-weight: 500; letter-spacing: var(--display-tight); line-height: 1.08; text-wrap: balance; }
.pullquote-em { color: var(--accent); }

/* ---------- 05 · Cómo funciona (pipeline) ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px,3vw,40px); }
.process-step { position: relative; padding-top: 34px; border-top: 1px solid var(--border-strong); }
.process-node { position: absolute; top: -4.5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.process-n { font-size: 11px; color: var(--text-faint); letter-spacing: .12em; }
.process-t { font-size: clamp(20px,2.2vw,28px); font-weight: 560; letter-spacing: -.02em; margin: 10px 0 12px; }
.process-d { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; max-width: 30ch; }
@media (max-width: 820px){ .process { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 480px){ .process { grid-template-columns: 1fr; } }

/* ---------- 06 · KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.kpi { background: var(--bg); padding: clamp(26px,3vw,40px); display: flex; flex-direction: column; gap: 14px; min-height: 190px; justify-content: flex-end; transition: background .35s; }
.kpi:hover { background: var(--surface); }
.kpi-n { font-size: clamp(36px,4.8vw,62px); font-weight: 560; letter-spacing: -.03em; line-height: 0.95; }
.kpi-l { font-size: 12px; color: var(--text-faint); letter-spacing: .04em; line-height: 1.45; }
@media (max-width: 820px){ .kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px){ .kpis { grid-template-columns: 1fr; } }

/* ---------- 07 · Casos ---------- */
.block-lead-action { display: flex; align-items: flex-end; height: 100%; }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,22px); }
.case { text-align: left; border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(24px,2.6vw,32px); display: flex; flex-direction: column; gap: 18px; min-height: 230px; transition: border-color .35s, transform .35s; background: var(--bg); }
.case:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.case-top { display: flex; justify-content: space-between; align-items: center; }
.case-ind { font-size: 13.5px; color: var(--text-dim); }
.case-dom { font-size: 10px; color: var(--accent); border: 1px solid var(--accent-soft); padding: 3px 9px; border-radius: 100px; letter-spacing: .1em; }
.case-t { font-size: clamp(19px,2vw,24px); font-weight: 560; letter-spacing: -.015em; flex: 1; line-height: 1.15; }
.case-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--border); }
.case-impact { font-size: 12px; color: var(--text); letter-spacing: .02em; }
.case-arrow { color: var(--text-faint); transition: transform .3s var(--ease), color .3s; }
.case:hover .case-arrow { color: var(--accent); transform: translate(2px,-2px); }
@media (max-width: 800px){ .cases { grid-template-columns: 1fr; } }

/* ---------- 08 · Gobernanza + consola ---------- */
.gov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; }
.gov-lead { margin-bottom: 34px; }
.gov-points { display: flex; flex-direction: column; gap: 22px; }
.gov-point { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.gov-point-mark { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); margin-top: 7px; }
.gov-point-t { font-size: 16px; font-weight: 540; letter-spacing: -.01em; }
.gov-point-d { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-top: 4px; }

.console { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.console-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--raise); }
.console-dots { display: flex; gap: 6px; }
.console-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.console-title { font-size: 11px; color: var(--text-dim); letter-spacing: .08em; flex: 1; }
.console-live { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--accent); letter-spacing: .12em; }
.console-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.6s steps(2) infinite; }
.console-body { padding: 20px 18px; font-size: 12px; line-height: 1.85; min-height: 290px; }
.console-line { display: grid; grid-template-columns: 62px 116px 1fr; gap: 12px; opacity: 0; animation: lineIn .5s var(--ease) forwards; }
@keyframes lineIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.console-t { color: var(--text-faint); }
.console-who { letter-spacing: .02em; }
.who-ok { color: oklch(0.7 0.12 165); }
.who-hold { color: oklch(0.78 0.13 75); }
.who-sign { color: var(--accent); }
.console-msg { color: var(--text-dim); }
.console-cursor { color: var(--accent); animation: blink 1.1s steps(2) infinite; margin-top: 6px; font-weight: 700; }
@media (max-width: 920px){ .gov-grid { grid-template-columns: 1fr; } }
@media (max-width: 460px){ .console-line { grid-template-columns: 54px 1fr; } .console-msg { grid-column: 1 / -1; padding-left: 66px; } }

/* ---------- 09 · Clientes (plate / contact sheet) ---------- */
.clients-plate { margin-top: clamp(36px,4vw,56px); border: 1px solid var(--border-strong); background: #e8e1d2; }
.clients-plate-cap {
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: #847a60; border-bottom: 1px solid rgba(60,50,30,.18);
}
.clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.client-cell {
  display: grid; place-items: center;
  padding: clamp(26px,3.6vw,46px) clamp(16px,2vw,30px);
  min-height: clamp(104px,12vw,148px);
  border-right: 1px solid rgba(60,50,30,.13); border-bottom: 1px solid rgba(60,50,30,.13);
}
.client-cell:nth-child(3n) { border-right: none; }
.client-cell:nth-last-child(-n+3) { border-bottom: none; }
.client-wm {
  font-size: clamp(18px,2vw,24px); font-weight: 600; letter-spacing: -0.01em;
  color: #2a2620; opacity: .42; text-align: center; line-height: 1.05;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.client-cell:hover .client-wm { opacity: 1; transform: scale(1.04); }
@media (max-width: 760px) {
  .clients-grid { grid-template-columns: 1fr 1fr; }
  .client-cell:nth-child(3n) { border-right: 1px solid rgba(60,50,30,.13); }
  .client-cell:nth-child(2n) { border-right: none; }
  .client-cell:nth-last-child(-n+3) { border-bottom: 1px solid rgba(60,50,30,.13); }
  .client-cell:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 440px) {
  .clients-grid { grid-template-columns: 1fr; }
  .client-cell { border-right: none !important; }
}

/* ---------- 10 · Conversión final ---------- */
.conversion { padding: clamp(92px,12vw,172px) 0; text-align: center; border-top: 1px solid var(--border); }
.conversion-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 28px; }
.conversion-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.conversion-title { font-size: clamp(34px,5.6vw,74px); font-weight: 560; letter-spacing: var(--display-tight); line-height: 1.02; max-width: 18ch; margin: 0 auto; text-wrap: balance; }
.conversion-sub { color: var(--text-dim); font-size: clamp(16px,1.4vw,19px); max-width: 50ch; margin: 26px auto 38px; line-height: 1.55; }
.conversion-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- platform.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Plataforma
   ============================================================ */

/* ---------- Hero anti-posicionamiento ---------- */
.plat-anti { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.plat-anti-item { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 100px; padding: 8px 14px; letter-spacing: .04em; }
.plat-anti-x { color: var(--text-faint); font-size: 10px; }

/* ---------- 02 · Arquitectura ---------- */
.arch { display: grid; grid-template-columns: 1fr 220px; gap: 14px; align-items: stretch; }
.arch-stack { display: flex; flex-direction: column; gap: 10px; }
.arch-layer { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 18px; padding: clamp(20px,2.4vw,28px) clamp(20px,2.4vw,28px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); transition: border-color .35s, transform .35s; }
.arch-layer:hover { border-color: var(--border-strong); transform: translateX(3px); }
.arch-core { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft), 0 14px 50px -20px var(--accent-soft); background: var(--surface); }
.arch-idx { font-size: 11px; color: var(--text-faint); letter-spacing: .1em; }
.arch-core .arch-idx { color: var(--accent); }
.arch-label { font-size: clamp(17px,1.8vw,22px); font-weight: 560; letter-spacing: -.015em; }
.arch-sub { font-size: 11px; color: var(--text-faint); letter-spacing: .04em; text-align: right; }
.arch-rail { border: 1px dashed var(--border-strong); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px 18px; background: linear-gradient(180deg, var(--accent-soft), transparent); }
.arch-rail-text { font-size: 12px; color: var(--text); letter-spacing: .1em; line-height: 1.7; writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; }
.arch-rail-note { font-size: 10px; color: var(--text-faint); letter-spacing: .06em; max-width: 16ch; }
@media (max-width: 760px){
  .arch { grid-template-columns: 1fr; }
  .arch-rail { flex-direction: row; padding: 16px; }
  .arch-rail-text { writing-mode: horizontal-tb; transform: none; }
  .arch-layer { grid-template-columns: 40px 1fr; }
  .arch-sub { display: none; }
}

/* ---------- 03 · Orquestación ---------- */
.orq-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.orq-step { background: var(--surface); padding: clamp(24px,2.6vw,34px); display: flex; flex-direction: column; gap: 12px; min-height: 200px; transition: background .3s; }
.orq-step:hover { background: var(--surface-2); }
.orq-n { font-size: 11px; color: var(--accent); letter-spacing: .1em; }
.orq-t { font-size: clamp(19px,2vw,24px); font-weight: 560; letter-spacing: -.015em; }
.orq-d { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
@media (max-width: 820px){ .orq-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .orq-steps { grid-template-columns: 1fr; } }

/* ---------- 04 · Conectividad ---------- */
.connect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,2vw,20px); }
.connect-item { border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(22px,2.4vw,30px); transition: border-color .3s, transform .3s; }
.connect-item:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.connect-plug { display: block; width: 14px; height: 14px; border: 1.5px solid var(--accent); border-radius: 3px; position: relative; margin-bottom: 18px; }
.connect-plug::after { content: ''; position: absolute; inset: 3px; background: var(--accent); border-radius: 1px; }
.connect-t { font-size: 17px; font-weight: 560; letter-spacing: -.01em; margin-bottom: 8px; }
.connect-d { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
@media (max-width: 760px){ .connect-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .connect-grid { grid-template-columns: 1fr; } }

/* ---------- 05 · Matriz de permisos ---------- */
.matrix { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.matrix-row { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); border-bottom: 1px solid var(--border); }
.matrix-row:last-child { border-bottom: none; }
.matrix-head { background: var(--raise); }
.matrix-cell { padding: 16px 18px; display: flex; align-items: center; border-right: 1px solid var(--border); font-size: 13px; }
.matrix-cell:last-child { border-right: none; }
.matrix-head .matrix-cell { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); }
.matrix-rowlabel { font-weight: 540; letter-spacing: -.01em; color: var(--text); }
.matrix-head .matrix-rowlabel { color: var(--text-faint); }
.perm { font-size: 11px; letter-spacing: .04em; padding: 4px 10px; border-radius: 100px; border: 1px solid transparent; }
.perm-auto { color: oklch(0.72 0.12 165); border-color: oklch(0.72 0.12 165 / 0.3); }
.perm-aprob { color: oklch(0.78 0.13 75); border-color: oklch(0.78 0.13 75 / 0.3); }
.perm-bloq { color: var(--text-faint); border-color: var(--border); }
@media (max-width: 680px){
  .matrix-row { grid-template-columns: 1.2fr repeat(4, 1fr); }
  .matrix-cell { padding: 12px 8px; font-size: 11px; }
  .perm { padding: 3px 6px; font-size: 9px; }
}

/* ---------- 06 · Observabilidad ---------- */
.obs-panel { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.obs-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--raise); font-size: 11px; color: var(--text-dim); letter-spacing: .08em; }
.obs-live { display: flex; align-items: center; gap: 7px; color: var(--accent); }
.obs-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.6s steps(2) infinite; }
.obs-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px,3vw,40px); padding: clamp(26px,3vw,40px); }
.obs-metric { display: flex; flex-direction: column; gap: 16px; }
.obs-metric-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.obs-metric-t { font-size: 14px; color: var(--text); white-space: nowrap; }
.obs-metric-v { font-size: 14px; color: var(--text); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.obs-metric-sub { color: var(--text-faint); font-size: 11px; font-style: normal; }
.obs-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.obs-bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 1s var(--ease); }
@media (max-width: 600px){ .obs-metrics { grid-template-columns: 1fr; } }

/* ---------- 07 · Router (model routing interactivo) ---------- */
.router { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; align-items: stretch; }
.router-inputs, .router-output { padding: clamp(26px,3vw,38px); display: flex; flex-direction: column; gap: 18px; }
.router-output { background: var(--raise); }
.router-head { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); }
.router-row { display: flex; flex-direction: column; gap: 8px; }
.router-label { font-size: 11px; color: var(--text-dim); letter-spacing: .06em; }
.router-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; width: fit-content; }
.router-opt { padding: 9px 16px; font-size: 13px; color: var(--text-dim); border-right: 1px solid var(--border); transition: all .25s; }
.router-opt:last-child { border-right: none; }
.router-opt:hover { color: var(--text); background: var(--raise); }
.router-opt.active { background: var(--accent); color: #fff; }
.router-criteria { font-size: 10px; color: var(--text-faint); letter-spacing: .06em; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); }

.router-engine { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--bg); }
.router-engine-line { flex: 1; width: 1px; background: linear-gradient(var(--accent-soft), var(--accent), var(--accent-soft)); }
.router-engine-node { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.router-engine-node .mono { font-size: 9px; color: var(--text-dim); letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.router-engine-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft), 0 0 16px var(--accent); animation: brandPulse 2.4s infinite; }

.router-stack { display: flex; flex-direction: column; gap: 8px; }
.router-tool { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid var(--border); border-radius: var(--radius); animation: caseIn .4s var(--ease); }
.router-tool.primary { border-color: var(--accent); background: var(--accent-soft); }
.router-tool-name { font-size: 14px; font-weight: 540; letter-spacing: -.01em; }
.router-tool-tier { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.router-tool.primary .router-tool-tier { color: var(--accent); }
.router-notes { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border); }
.router-note { display: grid; grid-template-columns: 80px 1fr; gap: 12px; font-size: 13px; color: var(--text-dim); align-items: start; }
.router-note-k { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); padding-top: 3px; }
@media (max-width: 820px){
  .router { grid-template-columns: 1fr; }
  .router-engine { flex-direction: row; border: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 14px; }
  .router-engine-line { width: auto; height: 1px; flex: 1; background: linear-gradient(90deg, var(--accent-soft), var(--accent), var(--accent-soft)); }
  .router-engine-node { flex-direction: row; }
}

/* ---------- 09 · Tools grid ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.tool-card { padding: clamp(22px,2.4vw,30px) 20px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; min-height: 230px; transition: background .3s; min-width: 0; }
.tool-card:last-child { border-right: none; }
.tool-card:hover { background: var(--raise); }
.tool-card-link { text-align: left; cursor: pointer; }
.tool-card-cta { font-size: 10px; color: var(--accent); letter-spacing: .06em; opacity: 0; transform: translateX(-4px); transition: all .3s var(--ease); margin-top: 4px; }
.tool-card-link:hover .tool-card-cta { opacity: 1; transform: none; }
/* scope reforzado: evita que .tool-name de la página de detalle (tool.css, clamp 40-84px)
   se aplique a las tarjetas de la rejilla y desborde las columnas */
.tools-grid .tool-name { font-size: 15.5px; font-weight: 560; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.tool-name { font-size: 15.5px; font-weight: 560; letter-spacing: -.01em; }
.tool-role { font-size: 13px; color: var(--text-dim); line-height: 1.5; flex: 1; }
.tool-when { padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.tool-when-label { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.tool-when-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-tag { font-size: 10px; color: var(--accent); border: 1px solid var(--accent-soft); padding: 3px 8px; border-radius: 100px; letter-spacing: .04em; }
@media (max-width: 900px){ .tools-grid { grid-template-columns: 1fr 1fr; } .tool-card { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 0; } .tool-card:nth-child(2n){ border-right: none; } }
@media (max-width: 480px){ .tools-grid { grid-template-columns: 1fr; } .tool-card { border-right: none; } }

/* ---------- stack.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Stack (página insignia del ecosistema)
   Reutiliza el sistema editorial "dossier"; solo añade el
   masthead, la constelación de orquestación y la matriz.
   ============================================================ */

/* ---------- Masthead ---------- */
.page-stack { padding-top: clamp(28px, 4vw, 52px); }
.sk-mast { padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(48px, 7vw, 96px); }
.sk-mast-rule {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
  padding-bottom: 18px; border-bottom: 1px solid var(--text);
}
.sk-mast-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 80px); align-items: center;
  margin-top: clamp(36px, 5vw, 64px);
}
.sk-mast-idx {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .2em; color: var(--orange);
}
.sk-mast-idx::before { content: ''; width: 26px; height: 1px; background: var(--orange); }
.sk-mast-title {
  font-size: clamp(32px, 4.6vw, 62px); font-weight: 470; letter-spacing: -0.035em;
  line-height: 1.02; margin-top: 22px; text-wrap: balance;
}
.sk-mast-sub {
  margin-top: clamp(22px, 2.6vw, 30px); font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-dim); line-height: 1.6; max-width: 52ch;
}

/* ---------- Figura / constelación ---------- */
.sk-figure { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.sk-figure-cap {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 13px clamp(16px, 2vw, 22px); border-bottom: 1px solid var(--border);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.sk-orbit { position: relative; width: 100%; aspect-ratio: 1 / 0.92; }
.sk-orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-orbit-ring { fill: none; stroke: var(--brown-soft); stroke-width: 0.25; opacity: .4; vector-effect: non-scaling-stroke; }
.sk-orbit-ring-2 { opacity: .22; stroke-dasharray: 1 2; }
.sk-orbit-edge { stroke: var(--brown-soft); stroke-width: 1; opacity: .5; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }

.sk-orbit-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  padding: 16px 20px; min-width: 124px;
  background: var(--surface); border: 1px solid var(--orange); border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--orange-soft), 0 18px 60px -22px var(--orange-soft); z-index: 3;
}
.sk-orbit-core-pin { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); }
.sk-orbit-core-label { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.sk-orbit-core-sub { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

.sk-orbit-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  padding: 9px 13px; min-width: 96px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sk-orbit-node:hover { border-color: var(--orange); transform: translate(-50%, calc(-50% - 3px)); box-shadow: 0 16px 40px -22px rgba(0,0,0,.6); z-index: 4; }
.sk-orbit-node-code { font-size: 9px; letter-spacing: .14em; color: var(--orange); }
.sk-orbit-node-name { font-size: 13px; font-weight: 560; letter-spacing: -0.01em; white-space: nowrap; }
.sk-orbit-node-layer { font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }

/* ---------- Matriz comparativa ---------- */
.sk-matrix { margin-top: clamp(34px, 4vw, 52px); border-top: 1px solid var(--text); }
.sk-matrix-head,
.sk-matrix-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) repeat(5, minmax(0, 0.7fr)) minmax(120px, 1fr);
  align-items: center; gap: clamp(8px, 1.4vw, 20px);
}
.sk-matrix-head { padding: 0 0 12px; border-bottom: 1px solid var(--border); }
.sk-matrix-corner, .sk-matrix-stage, .sk-matrix-auto {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.sk-matrix-stage { text-align: center; }
.sk-matrix-auto { text-align: right; }
.sk-matrix-row {
  width: 100%; text-align: left; padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--border); transition: background .35s var(--ease);
}
.sk-matrix-row:hover { background: var(--raise); }
.sk-matrix-tool { display: flex; flex-direction: column; gap: 3px; padding-left: 18px; position: relative; min-width: 0; }
.sk-matrix-dot { position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--sig, var(--orange)); }
.sk-matrix-tool-name { font-size: clamp(15px, 1.5vw, 18px); font-weight: 560; letter-spacing: -0.015em; }
.sk-matrix-tool-role { font-size: 10.5px; letter-spacing: .04em; color: var(--text-faint); }
.sk-matrix-cell { display: flex; justify-content: center; }
.sk-matrix-bar { width: 100%; max-width: 52px; height: 6px; border-radius: 100px; background: var(--border); transition: background .35s var(--ease); }
.sk-matrix-cell.on .sk-matrix-bar { background: var(--sig, var(--orange)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sig, var(--orange)) 30%, transparent); }
.sk-matrix-row:hover .sk-matrix-cell.on .sk-matrix-bar { background: var(--orange); }
.sk-matrix-meter { display: flex; align-items: center; gap: 9px; }
.sk-matrix-meter-track { position: relative; flex: 1; height: 8px; border-radius: 100px; background: var(--border); overflow: hidden; }
.sk-matrix-meter-fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--brown-soft), var(--orange)); }
.sk-matrix-meter-v { flex: none; min-width: 18px; text-align: right; font-size: 10px; color: var(--text-faint); }

/* ---------- Puentes ---------- */
.sk-bridge { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: clamp(34px, 4vw, 48px); }
.sk-bridge-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--text); padding: 12px 0;
  border-bottom: 1px solid var(--border-strong); transition: color .3s, border-color .3s;
}
.sk-bridge-link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.sk-bridge-link:hover { color: var(--orange-deep); border-color: var(--orange); }
[data-theme="dark"] .sk-bridge-link:hover { color: var(--orange); }
.sk-bridge-link:hover svg { transform: translate(3px, -3px); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .sk-mast-grid { grid-template-columns: 1fr; }
  .sk-mast-figure { order: -1; max-width: 460px; }
}
@media (max-width: 760px) {
  .sk-matrix-head { display: none; }
  .sk-matrix-row { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
  .sk-matrix-cell { justify-content: flex-start; }
  .sk-matrix-bar { max-width: none; }
  .sk-orbit-node { min-width: 80px; padding: 7px 9px; }
  .sk-orbit-node-name { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-orbit-node, .sk-orbit-node:hover { transform: translate(-50%, -50%); }
}

/* ---------- solutions.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Soluciones (hub modular)
   ============================================================ */

/* ---------- Mapa del sistema ---------- */
.sysmap { display: flex; flex-direction: column; gap: 0; }
.sysmap-tier { display: flex; flex-direction: column; gap: 12px; }
.sysmap-tier-label { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); }
.sysmap-verticals-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.sysmod { text-align: left; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); transition: all .35s var(--ease); position: relative; overflow: hidden; }
.sysmod::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--sig); opacity: 0; transition: opacity .35s; }
.sysmod:hover { border-color: color-mix(in oklch, var(--sig) 50%, var(--border)); transform: translateY(-2px); }
.sysmod.active { border-color: var(--sig); box-shadow: 0 0 0 1px var(--sig), 0 16px 50px -24px var(--sig); background: var(--surface); }
.sysmod.active::before { opacity: 1; }

.sysmod-v { padding: clamp(20px,2.4vw,28px); display: flex; flex-direction: column; gap: 14px; min-height: 168px; }
.sysmod-glyph { width: 34px; height: 34px; color: var(--sig); display: grid; place-items: center; border: 1px solid color-mix(in oklch, var(--sig) 30%, transparent); border-radius: var(--radius); }
.sysmod-glyph svg { width: 20px; height: 20px; }
.sysmod-tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sig); }
.sysmod-title { font-size: clamp(17px,1.8vw,21px); font-weight: 560; letter-spacing: -.015em; margin-top: auto; }

/* conectores entre tiers */
.sysmap-connect { display: grid; grid-template-columns: repeat(5, 1fr); height: 28px; align-items: center; justify-items: center; padding: 0 2%; }
.sysmap-tick { width: 1px; height: 100%; background: linear-gradient(var(--border-strong), transparent); }

.sysmap-horizontals { gap: 10px; }
.sysmod-h { display: grid; grid-template-columns: 52px minmax(180px, 1fr) 2fr; align-items: center; gap: clamp(16px,3vw,40px); padding: clamp(16px,2vw,22px) clamp(20px,2.4vw,28px); }
.sysmod-h .sysmod-glyph { width: 40px; height: 40px; }
.sysmod-h .sysmod-glyph svg { width: 22px; height: 22px; }
.sysmod-h-body { display: flex; flex-direction: column; gap: 5px; }
.sysmod-h .sysmod-title { margin-top: 0; }
.sysmod-h-line { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }
@media (max-width: 760px){
  .sysmap-verticals-row { grid-template-columns: 1fr; }
  .sysmap-connect { display: none; }
  .sysmap-horizontals { margin-top: 12px; }
  .sysmod-h { grid-template-columns: 44px 1fr; }
  .sysmod-h-line { display: none; }
}

/* ---------- Panel de detalle ---------- */
.sol-detail { margin-top: 28px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; border: 1px solid var(--border); border-top: 2px solid var(--sig); border-radius: var(--radius); overflow: hidden; animation: solSwap .45s var(--ease); }
@keyframes solSwap { from { transform: translateY(10px); } to { transform: none; } }
.sol-detail-main { padding: clamp(28px,3.4vw,46px); display: flex; flex-direction: column; }
.sol-detail-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.sol-detail-glyph { width: 48px; height: 48px; color: var(--sig); border: 1px solid color-mix(in oklch, var(--sig) 32%, transparent); border-radius: var(--radius); display: grid; place-items: center; flex-shrink: 0; background: color-mix(in oklch, var(--sig) 8%, transparent); }
.sol-detail-glyph svg { width: 26px; height: 26px; }
.sol-detail-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--sig); }
.sol-detail-title { font-size: clamp(24px,3vw,38px); font-weight: 560; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; }
.sol-detail-line { font-size: clamp(17px,1.8vw,21px); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 16px; max-width: 40ch; }
.sol-detail-desc { font-size: 15px; color: var(--text-dim); line-height: 1.6; max-width: 52ch; }
.sol-detail-actions { margin-top: auto; padding-top: 32px; }
.sol-deep { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--text); padding: 12px 0; border-bottom: 1px solid var(--sig); transition: gap .3s, color .3s; }
.sol-deep:hover { color: var(--sig); gap: 14px; }

.sol-detail-side { padding: clamp(28px,3.4vw,46px); background: var(--raise); border-left: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.sol-caps-label { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); display: block; margin-bottom: 18px; }
.sol-caps ul { display: flex; flex-direction: column; gap: 13px; }
.sol-caps li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--text); }
.sol-cap-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sig); flex-shrink: 0; }
.sol-outcome { display: flex; flex-direction: column; gap: 8px; padding-top: 26px; border-top: 1px solid var(--border); }
.sol-outcome-v { font-size: clamp(34px,4vw,52px); font-weight: 560; letter-spacing: -.03em; line-height: 0.95; color: var(--sig); }
.sol-outcome-l { font-size: 11px; color: var(--text-faint); letter-spacing: .04em; line-height: 1.4; }
@media (max-width: 820px){ .sol-detail { grid-template-columns: 1fr; } .sol-detail-side { border-left: none; border-top: 1px solid var(--border); } }

/* ---------- Cómo se combinan ---------- */
.combine { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,40px); }
.combine-step { position: relative; padding-top: 30px; border-top: 1px solid var(--border-strong); }
.combine-step::before { content: ''; position: absolute; top: -1px; left: 0; width: 34px; height: 2px; background: var(--accent); }
.combine-n { font-size: 11px; color: var(--text-faint); letter-spacing: .12em; }
.combine-t { font-size: clamp(20px,2.2vw,27px); font-weight: 560; letter-spacing: -.02em; margin: 10px 0 12px; }
.combine-d { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; max-width: 32ch; }
@media (max-width: 760px){ .combine { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- industries.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Industrias (briefs operativos)
   ============================================================ */

/* ---------- 02 · Por qué cambia la operación ---------- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.why-card { background: var(--bg); padding: clamp(26px,3vw,40px); display: flex; flex-direction: column; gap: 12px; min-height: 220px; transition: background .35s; }
.why-card:hover { background: var(--surface); }
.why-n { font-size: 11px; color: var(--accent); letter-spacing: .12em; }
.why-t { font-size: clamp(19px,2vw,24px); font-weight: 560; letter-spacing: -.015em; }
.why-d { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }
@media (max-width: 820px){ .why { grid-template-columns: 1fr; } }

/* ---------- 03+04 · Consola de industrias ---------- */
.ind-console { display: grid; grid-template-columns: 270px 1fr; gap: clamp(18px,2.4vw,28px); align-items: start; }

.ind-rail { display: flex; flex-direction: column; gap: 4px; }
.ind-rail-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid transparent; border-radius: var(--radius); text-align: left; transition: all .3s var(--ease); position: relative; }
.ind-rail-item:hover { background: var(--bg); }
.ind-rail-item.active { background: var(--bg); border-color: var(--border); }
.ind-rail-item.active::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--accent); border-radius: 2px; }
.ind-code { font-size: 12px; letter-spacing: .12em; color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 9px; transition: all .3s; }
.ind-rail-item.active .ind-code { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.ind-rail-body { display: flex; flex-direction: column; gap: 2px; }
.ind-rail-name { font-size: 15px; font-weight: 540; letter-spacing: -.01em; }
.ind-rail-dom { font-size: 10px; color: var(--text-faint); letter-spacing: .08em; }
.ind-rail-arrow { color: var(--text-faint); opacity: 0; transform: translateX(-4px); transition: all .3s; }
.ind-rail-item.active .ind-rail-arrow { opacity: 1; transform: none; color: var(--accent); }

/* --- ficha / brief --- */
.ind-detail { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg); animation: solSwap .45s var(--ease); }
.ind-detail-head { display: flex; align-items: flex-start; gap: clamp(18px,2.4vw,28px); padding: clamp(24px,3vw,38px); border-bottom: 1px solid var(--border); }
.ind-code-lg { font-size: clamp(28px,3.4vw,44px); font-weight: 500; letter-spacing: .06em; color: var(--accent); border: 1px solid var(--accent-soft); border-radius: var(--radius); padding: 14px 18px; line-height: 1; flex-shrink: 0; background: var(--accent-soft); }
.ind-detail-meta { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); }
.ind-detail-name { font-size: clamp(24px,3vw,38px); font-weight: 560; letter-spacing: -.02em; line-height: 1.05; margin: 6px 0 10px; }
.ind-detail-context { font-size: clamp(15px,1.5vw,18px); color: var(--text-dim); line-height: 1.45; max-width: 50ch; }

.ind-detail-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ind-pains, .ind-cases { padding: clamp(24px,2.8vw,34px); }
.ind-pains { border-right: 1px solid var(--border); }
.ind-col-label { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); display: block; margin-bottom: 18px; }
.ind-pains ul { display: flex; flex-direction: column; gap: 16px; }
.ind-pains li { display: grid; grid-template-columns: auto 1fr; gap: 13px; font-size: 14.5px; color: var(--text); line-height: 1.5; align-items: start; }
.ind-pain-n { font-size: 11px; color: var(--text-faint); padding-top: 3px; }

.ind-case-list { display: flex; flex-direction: column; gap: 10px; }
.ind-case { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .3s, transform .3s; }
.ind-case:hover { border-color: var(--border-strong); transform: translateX(3px); }
.ind-case-t { font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; }
.ind-case-o { font-size: 11px; color: var(--accent); border: 1px solid var(--accent-soft); padding: 4px 10px; border-radius: 100px; white-space: nowrap; }

.ind-detail-foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); background: var(--raise); }
.ind-foot-col { padding: clamp(22px,2.6vw,30px); }
.ind-foot-col:first-child { border-right: 1px solid var(--border); }
.ind-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ind-chip { font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); padding: 6px 11px; border-radius: 100px; letter-spacing: .03em; }
.ind-chip-kpi { color: var(--text); border-color: var(--border-strong); }

.ind-note { margin-top: 18px; font-size: 11px; color: var(--text-faint); letter-spacing: .05em; text-align: center; }

@media (max-width: 920px){
  .ind-console { grid-template-columns: 1fr; }
  .ind-rail { flex-direction: row; flex-wrap: wrap; }
  .ind-rail-item { flex: 1 1 150px; grid-template-columns: auto 1fr; }
  .ind-rail-arrow { display: none; }
}
@media (max-width: 620px){
  .ind-detail-grid, .ind-detail-foot { grid-template-columns: 1fr; }
  .ind-pains { border-right: none; border-bottom: 1px solid var(--border); }
  .ind-foot-col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
  .ind-detail-head { flex-direction: column; gap: 16px; }
}

/* ---------- 05 · Cómo se implanta ---------- */
.implant { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px,2.6vw,36px); }
.implant-step { position: relative; padding-top: 30px; }
.implant-line { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--border); }
.implant-step::before { content: ''; position: absolute; top: -3.5px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.implant-n { font-size: 11px; color: var(--text-faint); letter-spacing: .12em; }
.implant-t { font-size: clamp(18px,1.9vw,23px); font-weight: 560; letter-spacing: -.015em; margin: 10px 0 10px; }
.implant-d { font-size: 14px; color: var(--text-dim); line-height: 1.55; max-width: 28ch; }
@media (max-width: 820px){ .implant { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 460px){ .implant { grid-template-columns: 1fr; } }

/* ---------- 06 · Confianza ---------- */
.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.trust-card { background: var(--bg); padding: clamp(26px,3vw,40px); display: flex; flex-direction: column; gap: 14px; transition: background .35s; }
.trust-card:hover { background: var(--surface); }
.trust-check { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); display: grid; place-items: center; }
.trust-t { font-size: clamp(18px,1.9vw,23px); font-weight: 560; letter-spacing: -.015em; }
.trust-d { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; max-width: 44ch; }
@media (max-width: 720px){ .trust { grid-template-columns: 1fr; } }

/* ---------- caso.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Caso de uso / BOFU
   ============================================================ */

/* ---------- Switcher de plantilla ---------- */
.case-switch-wrap { padding-top: clamp(20px,3vw,32px); }
.case-switch { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.case-switch-label { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); }
.case-switch-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.case-pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius); transition: all .25s var(--ease); }
.case-pill:hover { border-color: var(--border-strong); }
.case-pill.active { border-color: var(--accent); background: var(--accent-soft); }
.case-pill-code { font-size: 10px; letter-spacing: .1em; color: var(--text-faint); }
.case-pill.active .case-pill-code { color: var(--accent); }
.case-pill-name { font-size: 13px; color: var(--text-dim); }
.case-pill.active .case-pill-name { color: var(--text); }
@media (max-width: 640px){ .case-pill-name { display: none; } .case-pill-code { font-size: 12px; } }

/* ---------- Hero del caso ---------- */
.hero-caso { padding-top: clamp(28px,4vw,52px); animation: solSwap .45s var(--ease); }
.caso-tagrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.caso-code { font-size: 11px; letter-spacing: .14em; color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-soft); padding: 6px 11px; border-radius: var(--radius); }
.caso-title { font-size: clamp(30px,4.4vw,58px); max-width: 20ch; margin-bottom: 22px; }
.caso-promise { font-size: clamp(17px,1.7vw,21px); color: var(--text); max-width: 56ch; line-height: 1.5; }
.caso-promise-mark { color: var(--accent); font-size: 12px; letter-spacing: .04em; margin-right: 6px; white-space: nowrap; }
.caso-meta { display: flex; flex-wrap: wrap; gap: 0; margin-top: 34px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; width: fit-content; }
.caso-meta-item { display: flex; flex-direction: column; gap: 5px; padding: 14px 22px; border-right: 1px solid var(--border); }
.caso-meta-item:last-child { border-right: none; }
.caso-meta-k { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); }
.caso-meta-v { font-size: 15px; font-weight: 540; letter-spacing: -.01em; }
@media (max-width: 520px){ .caso-meta { width: 100%; } .caso-meta-item { flex: 1; } }

/* ---------- 02 · Qué pasa hoy ---------- */
.today { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,22px); }
.today-card { border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(24px,2.6vw,32px); border-top: 2px solid oklch(0.66 0.16 35); transition: transform .3s, border-color .3s; }
.today-card:hover { transform: translateY(-3px); }
.today-n { font-size: 11px; color: oklch(0.7 0.15 35); letter-spacing: .1em; }
.today-t { font-size: clamp(17px,1.8vw,21px); font-weight: 560; letter-spacing: -.015em; margin: 12px 0 10px; }
.today-d { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
@media (max-width: 800px){ .today { grid-template-columns: 1fr; } }

/* ---------- 03 · Equipo de agentes ---------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.team-card { background: var(--bg); padding: clamp(22px,2.4vw,30px); display: flex; flex-direction: column; gap: 11px; min-height: 200px; transition: background .3s; }
.team-card:hover { background: var(--surface); }
.team-orq { background: var(--surface); }
.team-orq .team-tag { color: var(--accent); }
.team-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); }
.team-n { font-size: clamp(18px,1.9vw,23px); font-weight: 560; letter-spacing: -.015em; }
.team-r { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
@media (max-width: 880px){ .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .team { grid-template-columns: 1fr; } }

/* ---------- 04 · Secuencia operativa ---------- */
.flow { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.flow-lanes { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--raise); }
.flow-lane-tag { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); }
.flow-lane-tag::before { content: ''; width: 8px; height: 8px; border-radius: 2px; }
.flow-lane-tag.sys::before { background: var(--text-faint); }
.flow-lane-tag.agt::before { background: var(--accent); }
.flow-lane-tag.hum::before { background: oklch(0.76 0.13 75); }
.flow-play { margin-left: auto; font-size: 11px; letter-spacing: .06em; color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; font-family: 'JetBrains Mono', monospace; transition: all .25s; }
.flow-play:hover { color: var(--text); border-color: var(--border-strong); }

.flow-track { padding: clamp(18px,2.4vw,30px) clamp(20px,3vw,40px); display: flex; flex-direction: column; }
.flow-step { position: relative; display: block; text-align: left; padding: 14px 0 14px 38px; transition: opacity .4s; }
.flow-spine { position: absolute; left: 9px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.flow-step:first-child .flow-spine { top: 50%; }
.flow-step:last-child .flow-spine { bottom: 50%; }
.flow-node { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-strong); transition: all .35s var(--ease); z-index: 2; }
.flow-agt .flow-node { border-color: var(--accent); }
.flow-hum .flow-node { border-color: oklch(0.76 0.13 75); }
.flow-step.done .flow-node { background: var(--text-faint); border-color: var(--text-faint); }
.flow-step.active .flow-node { transform: translateY(-50%) scale(1.35); box-shadow: 0 0 0 5px var(--accent-soft); }
.flow-agt.active .flow-node { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft), 0 0 16px var(--accent); }
.flow-hum.active .flow-node { background: oklch(0.76 0.13 75); border-color: oklch(0.76 0.13 75); box-shadow: 0 0 0 5px oklch(0.76 0.13 75 / 0.22); }
.flow-sys.active .flow-node { background: var(--text); border-color: var(--text); }

.flow-body { display: flex; flex-direction: column; gap: 7px; opacity: .5; transition: opacity .35s; }
.flow-step.active .flow-body, .flow-step.done .flow-body { opacity: 1; }
.flow-step:hover .flow-body { opacity: .85; }
.flow-meta { display: flex; align-items: center; gap: 10px; }
.flow-actor { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; padding: 3px 9px; border-radius: 100px; border: 1px solid transparent; font-family: 'JetBrains Mono', monospace; }
.flow-actor.sys { color: var(--text-dim); border-color: var(--border); }
.flow-actor.agt { color: var(--accent); border-color: var(--accent-soft); }
.flow-actor.hum { color: oklch(0.78 0.13 75); border-color: oklch(0.78 0.13 75 / 0.3); }
.flow-tag { font-size: 10px; color: var(--text-faint); letter-spacing: .06em; }
.flow-i { font-size: 10px; color: var(--text-faint); margin-left: auto; }
.flow-action { font-size: clamp(15px,1.6vw,18px); letter-spacing: -.01em; line-height: 1.3; }
@media (max-width: 560px){ .flow-i { display: none; } }

/* ---------- 05 · Integraciones ---------- */
.integra { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.integra-orq { display: flex; align-items: center; gap: 12px; padding: 15px 22px; background: var(--accent-soft); border-bottom: 1px solid var(--border); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.integra-orq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.integra-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.integra-item { display: flex; align-items: center; gap: 12px; padding: clamp(20px,2.2vw,26px) 20px; border-right: 1px solid var(--border); transition: background .3s; }
.integra-item:last-child { border-right: none; }
.integra-item:hover { background: var(--raise); }
.integra-plug { width: 12px; height: 12px; border: 1.5px solid var(--accent); border-radius: 3px; position: relative; flex-shrink: 0; }
.integra-plug::after { content: ''; position: absolute; inset: 3px; background: var(--accent); border-radius: 1px; }
.integra-name { font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; }
.integra-note { padding: 14px 22px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-faint); letter-spacing: .05em; background: var(--raise); }
@media (max-width: 860px){ .integra-grid { grid-template-columns: 1fr 1fr; } .integra-item { border-bottom: 1px solid var(--border); } .integra-item:nth-child(2n){ border-right: none; } }
@media (max-width: 460px){ .integra-grid { grid-template-columns: 1fr; } .integra-item { border-right: none; } }

/* ---------- 06 · KPIs ---------- */
.caso-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.caso-kpi { background: var(--bg); padding: clamp(26px,3vw,40px); display: flex; flex-direction: column; gap: 12px; min-height: 170px; justify-content: flex-end; transition: background .35s; }
.caso-kpi:hover { background: var(--surface); }
.caso-kpi-v { font-size: clamp(32px,4vw,52px); font-weight: 560; letter-spacing: -.03em; line-height: 0.95; color: var(--accent); }
.caso-kpi-l { font-size: 12px; color: var(--text-faint); letter-spacing: .04em; line-height: 1.4; }
@media (max-width: 820px){ .caso-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px){ .caso-kpis { grid-template-columns: 1fr; } }

/* ---------- 07 · Guardrails ---------- */
.guards { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.guards-head { display: grid; grid-template-columns: 1fr 1fr; background: var(--raise); border-bottom: 1px solid var(--border); }
.guards-head span { padding: 13px 22px; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); }
.guards-head span:first-child { border-right: 1px solid var(--border); }
.guards-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.guards-row:last-child { border-bottom: none; }
.guards-risk, .guards-ctrl { display: flex; align-items: flex-start; gap: 12px; padding: clamp(18px,2.2vw,26px) 22px; font-size: 14.5px; line-height: 1.45; }
.guards-risk { border-right: 1px solid var(--border); color: var(--text-dim); }
.guards-risk-mark { width: 7px; height: 7px; border-radius: 2px; background: oklch(0.66 0.16 35); margin-top: 6px; flex-shrink: 0; }
.guards-ctrl { color: var(--text); }
.guards-ctrl-mark { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
@media (max-width: 620px){
  .guards-head, .guards-row { grid-template-columns: 1fr; }
  .guards-risk { border-right: none; border-bottom: 1px dashed var(--border); }
  .guards-head span:first-child { border-right: none; }
  .guards-head { grid-template-columns: 1fr; } .guards-head span:last-child { display: none; }
}

/* ---------- 08 · Cómo empezar ---------- */
.startpath { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.startpath-step { padding: clamp(24px,2.8vw,36px); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; min-height: 200px; position: relative; transition: background .3s; }
.startpath-step:last-child { border-right: none; background: var(--accent-soft); }
.startpath-step:hover { background: var(--raise); }
.startpath-step:last-child:hover { background: var(--accent-soft); }
.startpath-w { font-size: 11px; color: var(--accent); letter-spacing: .08em; }
.startpath-t { font-size: clamp(19px,2vw,25px); font-weight: 560; letter-spacing: -.02em; }
.startpath-d { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
@media (max-width: 840px){ .startpath { grid-template-columns: 1fr 1fr; } .startpath-step:nth-child(2){ border-right: none; } .startpath-step:nth-child(-n+2){ border-bottom: 1px solid var(--border); } }
@media (max-width: 460px){ .startpath { grid-template-columns: 1fr; } .startpath-step { border-right: none; border-bottom: 1px solid var(--border); } }

/* ---------- tool.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Página de herramienta (editorial)
   --sig se define por herramienta en el root .page-herramienta
   ============================================================ */

/* ---------- Navegador de stack ---------- */
.toolnav-wrap { padding-top: clamp(20px,3vw,30px); }
.toolnav { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.toolnav-label { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); }
.toolnav-items { display: flex; flex-wrap: wrap; gap: 6px; }
.toolnav-item { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid var(--border); border-radius: 100px; font-size: 13px; color: var(--text-dim); transition: all .25s var(--ease); }
.toolnav-item:hover { border-color: var(--border-strong); color: var(--text); }
.toolnav-item.active { border-color: var(--sig); color: var(--text); background: color-mix(in oklch, var(--sig) 10%, transparent); }
.toolnav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); transition: all .25s; }
.toolnav-item.active .toolnav-dot { background: var(--sig); box-shadow: 0 0 8px var(--sig); }
@media (max-width: 640px){ .toolnav-item { font-size: 12px; padding: 8px 12px; } }

/* ---------- Hero ---------- */
.hero-tool { padding-top: clamp(32px,4.5vw,60px); animation: solSwap .45s var(--ease); }
.tool-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); padding: 7px 13px; border: 1px solid var(--border); border-radius: 100px; margin-bottom: 26px; }
.tool-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 8px var(--sig); }
.tool-name { font-size: clamp(40px,6vw,84px); font-weight: 580; letter-spacing: -.03em; line-height: 0.98; }
.tool-positioning { font-size: clamp(20px,2.4vw,30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.18; max-width: 24ch; margin: 22px 0 30px; color: var(--text); text-wrap: balance; }
.tool-positioning::before { content: ''; display: block; width: 48px; height: 2px; background: var(--sig); margin-bottom: 22px; }
.tool-rolerow { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; padding-top: 28px; border-top: 1px solid var(--border); max-width: 760px; }
.tool-role-badge { font-size: 11px; letter-spacing: .08em; color: var(--sig); border: 1px solid color-mix(in oklch, var(--sig) 35%, transparent); background: color-mix(in oklch, var(--sig) 8%, transparent); padding: 8px 13px; border-radius: var(--radius); white-space: nowrap; }
.tool-roledef { font-size: clamp(15px,1.5vw,18px); color: var(--text-dim); line-height: 1.55; }
@media (max-width: 620px){ .tool-rolerow { grid-template-columns: 1fr; gap: 14px; } .tool-role-badge { white-space: normal; width: fit-content; } }

/* ---------- 02 · Papel en el stack ---------- */
.rol-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px,4vw,64px); align-items: center; }
.rol-points { display: flex; flex-direction: column; gap: 18px; }
.rol-points li { display: flex; align-items: flex-start; gap: 14px; font-size: clamp(16px,1.7vw,20px); letter-spacing: -.01em; line-height: 1.35; }
.rol-point-mark { width: 8px; height: 8px; border-radius: 2px; background: var(--sig); margin-top: 9px; flex-shrink: 0; }

/* Visual-firma 1 · posición en el flujo */
.flowpos { border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(24px,3vw,34px); background: var(--bg); }
.flowpos-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; height: 150px; }
.flowpos-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; justify-content: flex-end; height: 100%; position: relative; }
.flowpos-bar { width: 100%; height: 30%; background: var(--border); border-radius: 3px 3px 0 0; transition: all .5s var(--ease); }
.flowpos-stage.on .flowpos-bar { height: 100%; background: linear-gradient(180deg, var(--sig), color-mix(in oklch, var(--sig) 30%, transparent)); box-shadow: 0 0 24px -6px var(--sig); }
.flowpos-name { font-size: 10px; color: var(--text-faint); letter-spacing: .04em; text-align: center; line-height: 1.3; }
.flowpos-stage.on .flowpos-name { color: var(--text); }
.flowpos-tag { position: absolute; top: -2px; font-size: 9px; color: var(--sig); letter-spacing: .1em; text-transform: uppercase; }
.flowpos-spread .flowpos-track { position: relative; }
.flowpos-spread .flowpos-stage .flowpos-bar { height: 46%; background: color-mix(in oklch, var(--sig) 22%, var(--border)); }
.flowpos-spread .flowpos-stage.on .flowpos-bar { box-shadow: 0 0 30px -6px var(--sig); }
.flowpos-note { margin-top: 20px; font-size: 11px; color: var(--text-faint); letter-spacing: .04em; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 820px){ .rol-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- 03 · Dónde encaja ---------- */
.fits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.fit-card { background: var(--bg); padding: clamp(26px,3vw,38px); display: flex; flex-direction: column; gap: 12px; min-height: 220px; transition: background .35s; }
.fit-card:hover { background: var(--surface); }
.fit-n { font-size: 11px; color: var(--sig); letter-spacing: .1em; }
.fit-t { font-size: clamp(18px,1.9vw,23px); font-weight: 560; letter-spacing: -.015em; }
.fit-d { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }
@media (max-width: 820px){ .fits { grid-template-columns: 1fr; } }

/* ---------- 04 · Qué aporta + autonomía ---------- */
.aporta-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px,3vw,40px); align-items: start; }
.brings { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bring { background: var(--bg); padding: clamp(20px,2.2vw,26px) clamp(22px,2.4vw,28px); transition: background .3s; }
.bring:hover { background: var(--surface); }
.bring-k { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--sig); }
.bring-t { font-size: 18px; font-weight: 560; letter-spacing: -.015em; margin: 8px 0 6px; }
.bring-d { font-size: 14px; color: var(--text-dim); line-height: 1.5; }

.autonomy { border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(24px,3vw,32px); background: var(--surface); position: sticky; top: 90px; }
.autonomy-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.autonomy-label { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); }
.autonomy-ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-faint); letter-spacing: .06em; }
.autonomy-track { position: relative; height: 6px; background: var(--border); border-radius: 3px; margin-bottom: 22px; }
.autonomy-fill { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, color-mix(in oklch, var(--sig) 30%, transparent), var(--sig)); border-radius: 3px; transition: width .8s var(--ease); }
.autonomy-knob { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--sig); border: 3px solid var(--surface); transform: translate(-50%,-50%); box-shadow: 0 0 0 1px var(--sig), 0 0 16px var(--sig); transition: left .8s var(--ease); }
.autonomy-desc { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
@media (max-width: 820px){ .aporta-grid { grid-template-columns: 1fr; } .autonomy { position: static; } }

/* ---------- 05 · Relación con ecosistema ---------- */
.relations { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.relations-core { display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: color-mix(in oklch, var(--sig) 9%, transparent); border-bottom: 1px solid var(--border); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.relations-core-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 10px var(--sig); }
.relations-list { display: flex; flex-direction: column; }
.relation { display: grid; grid-template-columns: 220px 1fr; gap: clamp(16px,3vw,40px); padding: clamp(20px,2.4vw,28px) 22px; border-bottom: 1px solid var(--border); align-items: center; position: relative; }
.relation:last-child { border-bottom: none; }
.relation-line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--sig); opacity: .3; }
.relation-tool { font-size: clamp(16px,1.7vw,20px); font-weight: 540; letter-spacing: -.01em; }
.relation-how { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }
@media (max-width: 640px){ .relation { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- 06 · Límites ---------- */
.limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,22px); }
.limit-row { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: clamp(22px,2.4vw,30px); border: 1px solid var(--border); border-radius: var(--radius); border-top: 2px solid var(--text-faint); align-items: start; }
.limit-mark { width: 9px; height: 9px; border: 1.5px solid var(--text-faint); border-radius: 50%; margin-top: 6px; position: relative; }
.limit-mark::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 5px; height: 1.5px; background: var(--text-faint); }
.limit-t { font-size: 16px; font-weight: 560; letter-spacing: -.01em; margin-bottom: 7px; }
.limit-d { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
@media (max-width: 800px){ .limits { grid-template-columns: 1fr; } }

/* ---------- 07 · Gobierno ---------- */
.govtool { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.govtool-item { background: var(--bg); padding: clamp(20px,2.2vw,28px); display: flex; flex-direction: column; gap: 10px; min-height: 180px; transition: background .3s; }
.govtool-item:hover { background: var(--surface); }
.govtool-n { font-size: 11px; color: var(--sig); letter-spacing: .1em; }
.govtool-t { font-size: 16px; font-weight: 560; letter-spacing: -.01em; }
.govtool-d { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
@media (max-width: 900px){ .govtool { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .govtool { grid-template-columns: 1fr; } }

/* ---------- 08 · Dominios ---------- */
.dom-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.dom-chip { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; border: 1px solid var(--border); border-radius: var(--radius); font-size: clamp(15px,1.6vw,18px); font-weight: 500; letter-spacing: -.01em; transition: all .3s var(--ease); }
.dom-chip:hover { border-color: var(--sig); transform: translateY(-2px); }
.dom-chip-idx { font-size: 11px; color: var(--sig); letter-spacing: .08em; }

/* ---------- 09 · Tesis / modelo operativo ---------- */
.thesis-block { max-width: 920px; }
.thesis-text { font-size: clamp(22px,2.8vw,38px); font-weight: 500; letter-spacing: -.02em; line-height: 1.22; text-wrap: balance; margin: 18px 0 30px; }
.thesis-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--text); padding: 12px 0; border-bottom: 1px solid var(--sig); transition: gap .3s, color .3s; }
.thesis-link:hover { color: var(--sig); gap: 14px; }

/* ---------- elevation.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Capa de elevación
   Sistema arquitectónico, tipografía con carácter, motion medido.
   Se carga la última: refina el conjunto sin reescribir páginas.
   ============================================================ */

/* ---------- Refinamiento cromático: negros más profundos ---------- */
[data-theme="dark"] {
  --bg: #050506;
  --surface: #0c0d10;
  --surface-2: #131419;
  --border: rgba(255,255,255,0.085);
  --border-strong: rgba(255,255,255,0.20);
  --hair: rgba(255,255,255,0.055);
  --raise: rgba(255,255,255,0.014);
  --nav-bg: rgba(5,5,6,0.66);
}
[data-theme="light"] {
  --hair: rgba(18,19,24,0.07);
}

::selection { background: var(--accent); color: #fff; }

html { -webkit-font-smoothing: antialiased; }
body { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; letter-spacing: -0.006em; }

/* Figuras tabulares y alineadas en todo lo monoespaciado y numérico */
.mono, .kpi-n, .caso-kpi-v, .sol-outcome-v, .hero-stat-n,
.matrix-cell, .obs-metric-v, .ind-code-lg, .autonomy-track {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.mono { letter-spacing: 0.02em; }

/* ---------- Motion: entrada por @keyframes (robusta, dirigida por reloj) ---------- */
:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes revealRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes revealWipe { from { clip-path: inset(0 104% 0 -2%); } to { clip-path: inset(0 -2% 0 -2%); } }
@keyframes lineDraw { from { width: 0; } to { width: 40px; } }
/* Estado base SIEMPRE visible. El estado oculto es estático y la entrada usa
   @keyframes (su valor computado depende del reloj, no del pintado): aunque el
   entorno no produzca frames, a los <1s el contenido queda en su estado final.
   Y si la animación nunca se arma (sin rAF), el contenido permanece visible. */
.reveal { opacity: 1; transform: none; clip-path: none; filter: none; }
.reveal-play { animation: revealRise .9s var(--ease) both; }

/* ---------- Estructura arquitectónica: rieles de columna ---------- */
.rails {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--maxw), calc(100% - 2 * clamp(20px, 5vw, 56px)));
  z-index: 0; pointer-events: none; display: flex; justify-content: space-between;
}
.rails span { width: 1px; height: 100%; background: var(--hair); }
.rails span:nth-child(2), .rails span:nth-child(3) { opacity: 0; } /* reservados para densidad puntual */
@media (max-width: 760px) { .rails { display: none; } }

/* el contenido va por encima de los rieles */
.nav, .page-shell, .footer { position: relative; z-index: 2; }
.nav { z-index: 80; }

/* ---------- Tipografía con carácter ---------- */
.hero-title, .page-title, .tool-name, .conversion-title, .statement-title, .footer-cta-title {
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 0.95;
}
.hero-title { font-weight: 760; }
.tool-name { font-weight: 800; letter-spacing: -0.045em; }
.hero-em { font-weight: inherit; }

.block-title { font-weight: 600; letter-spacing: -0.032em; }
.thesis-text, .pullquote { font-weight: 500; letter-spacing: -0.025em; }

/* Cifras grandes: más tensión */
.kpi-n, .caso-kpi-v, .sol-outcome-v { font-weight: 600; letter-spacing: -0.04em; }

/* ---------- Kicker como marca de registro ---------- */
.kicker { gap: 16px; }
.kicker-idx {
  font-size: 10px; color: var(--accent); letter-spacing: .14em;
  border: 1px solid var(--accent-soft); padding: 4px 8px; border-radius: 3px;
  background: color-mix(in oklch, var(--accent) 7%, transparent);
}
.kicker-line { width: 40px; background: var(--border-strong); }
.kicker-text { letter-spacing: .22em; font-size: 10.5px; }

/* ---------- Navegación más afilada + estado operativo ---------- */
.nav-inner { height: 66px; }
.nav { border-bottom: 1px solid transparent; }
.nav-scrolled { border-bottom-color: var(--hair); background: var(--nav-bg); }
.nav-links { gap: 2px; }
.nav-link { font-size: 13.5px; letter-spacing: -0.005em; }
.nav-link-active::after { height: 2px; bottom: 0; }
.brand-word-1 { letter-spacing: .06em; font-weight: 680; }
.brand-word-2 { letter-spacing: .28em; }
.nav-cta { letter-spacing: -0.005em; border-radius: 3px; }

/* ---------- Botones: más precisos ---------- */
.btn { border-radius: 3px; letter-spacing: -0.008em; padding: 14px 24px; transition: all .45s var(--ease); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { border-color: var(--border-strong); }

/* ---------- Secciones: hairline superior animado en bloques 'raise' ---------- */
.tone-raise { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }

/* divisor de registro al inicio de cada cabecera de bloque */
.block-head { position: relative; }

/* ---------- Hero: más tensión y aire ---------- */
.hero-kicker { letter-spacing: .24em; font-size: 10px; padding: 8px 14px; }
.hero-sub { letter-spacing: -0.008em; }
.hero-stat-n { letter-spacing: -0.015em; }

/* ---------- Footer: cierre más editorial ---------- */
.footer-cta-title { font-weight: 680; }
.footer-bottom { border-top-color: var(--hair); }

/* ---------- Microcomposición: marcas de esquina en tarjetas clave ---------- */
.viz-node-core, .sol-detail, .ind-detail, .flow, .router, .console, .obs-panel, .relations, .matrix {
  position: relative;
}

/* ---------- Foco accesible coherente ---------- */
a:focus-visible, button:focus-visible {
  outline: 1px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}

/* ============================================================
   FIRMA DE MOTION — "el sistema se dibuja"
   Apoyado en .reveal / .reveal-in (fiable, sobrevive remontajes).
   ============================================================ */

/* La línea del kicker se traza al entrar */
.reveal-play .kicker-line { animation: lineDraw .9s var(--ease) .15s both; }

/* Titulares: revelado por barrido lateral (precisión, "impreso") */
.reveal-play > .block-title,
.reveal-play > .hero-title,
.reveal-play > .page-title,
.reveal-play > .tool-name,
.reveal-play > .conversion-title,
.reveal-play > .statement-title,
.reveal-play > .footer-cta-title,
.reveal-play > .thesis-text {
  animation: revealWipe 1.05s var(--ease) both;
}

/* ---------- Respeto a reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-play, .reveal-play * { animation: none !important; }
}

/* ---------- Blindaje extra: pestaña oculta = sin animación ---------- */
html.tab-hidden .reveal-play, html.tab-hidden .reveal-play * { animation: none !important; }

/* ---------- redesign.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Rediseño "Dossier operativo"
   Dirección editorial: margen manuscrito, filas reguladas,
   tipografía de criterio, sobriedad enterprise. Carga la última.
   ============================================================ */

/* ---------- Navegación sobria (versalitas espaciadas) ---------- */
.nav-inner { height: 72px; }
.nav-links { gap: 0; }
.nav-link {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
  padding: 8px 16px;
}
.nav-link:hover { color: var(--text); background: transparent; }
.nav-link-active { color: var(--text); }
.nav-link-active::after { left: 16px; right: 16px; height: 1px; background: var(--accent); }
.brand-word-1 { font-size: 13px; letter-spacing: .12em; }
.brand-mark { border-radius: 0; }
.brand-mark-dot { border-radius: 0; width: 7px; height: 7px; }
.nav-cta {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; background: transparent; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 0; padding: 11px 16px;
}
.nav-cta:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.nav-cta svg { display: none; }
.nav-scrolled { background: var(--nav-bg); border-bottom-color: var(--border); }

/* ---------- Tipografía editorial ---------- */
.hm-display {
  font-weight: 480; letter-spacing: -0.04em; line-height: 0.96; text-wrap: balance;
}
.hm-em { font-style: normal; position: relative; white-space: nowrap; }
.hm-em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.08em;
  height: 2px; background: var(--accent);
}

/* índice colgado en el margen (manuscrito) */
.hm-idx {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em;
  color: var(--text-faint); text-transform: uppercase;
}

/* ---------- HERO / LEDE ---------- */
.hm-lede { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(40px, 6vw, 80px); }
.hm-dateline {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-faint);
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.hm-dateline span:nth-child(2) { color: var(--text-dim); }

.hm-thesis-wrap {
  display: grid; grid-template-columns: 132px 1fr; gap: 0;
  margin-top: clamp(48px, 8vw, 104px);
}
.hm-thesis-idx { padding-top: 14px; }
.hm-thesis {
  font-size: clamp(38px, 6.6vw, 104px); font-weight: 480;
  letter-spacing: -0.042em; line-height: 0.97; max-width: 15ch;
}
.hm-lede-foot {
  display: grid; grid-template-columns: 132px minmax(0,1fr) minmax(0,1fr);
  gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px);
  align-items: end;
}
.hm-lede-sub {
  grid-column: 2; font-size: clamp(15px, 1.4vw, 18px); color: var(--text-dim);
  line-height: 1.6; max-width: 42ch;
}
.hm-lede-side { grid-column: 3; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hm-toc { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.hm-toc-item {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: baseline;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em;
  color: var(--text-dim); text-align: left; padding: 7px 0; border-top: 1px solid var(--border);
  transition: color .3s, padding-left .3s var(--ease);
}
.hm-toc-item:hover { color: var(--text); padding-left: 6px; }
.hm-toc-num { color: var(--accent); }
.hm-toc-go { color: var(--text-faint); }

@media (max-width: 860px) {
  .hm-thesis-wrap { grid-template-columns: 1fr; }
  .hm-thesis-idx { display: none; }
  .hm-lede-foot { grid-template-columns: 1fr; gap: 28px; }
  .hm-lede-sub, .hm-lede-side { grid-column: 1; }
}

/* ---------- Figura técnica (la viz como figura con pie) ---------- */
.hm-figure { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--border-strong); }
.hm-figure-cap {
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--border);
}
.hm-figure-stage { height: clamp(320px, 42vw, 460px); position: relative; overflow: hidden; }
.hm-figure-stage .viz { position: absolute; inset: 0; }

/* ---------- Capítulo con margen manuscrito ---------- */
.chapter { padding: clamp(72px, 9vw, 140px) 0; }
.chapter-grid { display: grid; grid-template-columns: 132px 1fr; gap: 0; }
.chapter-mark { display: flex; flex-direction: column; gap: 10px; }
.chapter-no {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .1em; color: var(--accent);
}
.chapter-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-faint); writing-mode: vertical-rl;
  margin-top: 8px; height: 120px;
}
.chapter-body { min-width: 0; }
.chapter-lead {
  font-size: clamp(24px, 3.4vw, 44px); font-weight: 480; letter-spacing: -0.03em;
  line-height: 1.08; max-width: 24ch; text-wrap: balance;
}
.chapter-note {
  font-size: clamp(15px, 1.4vw, 18px); color: var(--text-dim); line-height: 1.6;
  max-width: 52ch; margin-top: 26px;
}
@media (max-width: 860px) {
  .chapter-grid { grid-template-columns: 1fr; gap: 24px; }
  .chapter-label { writing-mode: horizontal-tb; height: auto; }
  .chapter-mark { flex-direction: row; align-items: center; gap: 14px; }
}

/* ---------- Ledger (filas reguladas, sin cajas) ---------- */
.ledger { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--text); }
.ledger-row {
  display: grid; align-items: start; gap: clamp(20px, 4vw, 56px);
  padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--border);
  transition: background .4s var(--ease);
}
.ledger-row:hover { background: var(--raise); }
.ledger-no {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .1em;
  color: var(--text-faint); padding-top: 6px;
}
.ledger-title { font-size: clamp(19px, 2vw, 27px); font-weight: 520; letter-spacing: -0.02em; line-height: 1.1; }
.ledger-body { font-size: 15px; color: var(--text-dim); line-height: 1.62; max-width: 46ch; }

/* — variante: cambio de modelo (antes → con carton) — */
.ledger-shift .ledger-row { grid-template-columns: 56px 1fr 1fr; }
.shift-was { color: var(--text-faint); font-size: clamp(16px,1.7vw,21px); letter-spacing: -.01em; line-height: 1.25; position: relative; padding-left: 22px; }
.shift-was::before { content: ''; position: absolute; left: 0; top: .7em; width: 12px; height: 1px; background: var(--text-faint); }
.shift-now { color: var(--text); font-size: clamp(16px,1.7vw,21px); letter-spacing: -.01em; line-height: 1.25; position: relative; padding-left: 22px; }
.shift-now::before { content: ''; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; background: var(--accent); }

/* — variante: principios (nº grande, título, cuerpo) — */
.ledger-principles .ledger-row { grid-template-columns: 56px minmax(0,1.1fr) minmax(0,1.4fr); }

/* — variante: stack (código, nombre, rol, criterio) — */
.ledger-stack { border-top: 1px solid var(--text); }
.ledger-stack-head {
  display: grid; grid-template-columns: 90px 1.1fr 1.6fr auto; gap: clamp(16px,3vw,40px);
  padding: 14px 0; border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint);
}
.ledger-stack-row {
  display: grid; grid-template-columns: 90px 1.1fr 1.6fr auto; gap: clamp(16px,3vw,40px);
  align-items: center; padding: clamp(20px,2.4vw,30px) 0; border-bottom: 1px solid var(--border);
  text-align: left; width: 100%; transition: background .4s var(--ease);
}
.ledger-stack-row:hover { background: var(--raise); }
.ledger-stack-code { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .08em; color: var(--accent); }
.ledger-stack-name { font-size: clamp(17px,1.8vw,22px); font-weight: 540; letter-spacing: -.015em; }
.ledger-stack-role { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.ledger-stack-go {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap; transition: color .3s, transform .3s var(--ease);
}
.ledger-stack-row:hover .ledger-stack-go { color: var(--accent); transform: translateX(4px); }
.ledger-stack-orq {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text); display: flex; align-items: center; gap: 12px; margin-bottom: 4px;
}
.ledger-stack-orq::before { content: ''; width: 7px; height: 7px; background: var(--accent); }
@media (max-width: 760px) {
  .ledger-shift .ledger-row { grid-template-columns: 1fr; gap: 12px; }
  .ledger-principles .ledger-row { grid-template-columns: 1fr; gap: 10px; }
  .ledger-stack-head { display: none; }
  .ledger-stack-row { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .ledger-stack-role { grid-column: 1 / -1; }
}

/* ---------- Figuras de resultado (editorial, sin cajas) ---------- */
.results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--text); margin-top: clamp(40px,5vw,60px); }
.result { padding: clamp(28px,3vw,44px) clamp(18px,2vw,28px) clamp(22px,2.4vw,30px) 0; border-right: 1px solid var(--border); }
.result:last-child { border-right: none; }
.result-fig { font-size: clamp(40px,5vw,76px); font-weight: 460; letter-spacing: -0.045em; line-height: 0.9; }
.result-cap { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; color: var(--text-faint); line-height: 1.5; margin-top: 18px; max-width: 22ch; }
@media (max-width: 820px) { .results { grid-template-columns: 1fr 1fr; } .result:nth-child(2){border-right:none;} .result:nth-child(-n+2){border-bottom:1px solid var(--border); padding-bottom:24px; margin-bottom:0;} }
@media (max-width: 460px) { .results { grid-template-columns: 1fr; } .result { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 24px; } }

/* ---------- Cierre full-bleed ---------- */
.closing { padding: clamp(80px,11vw,168px) 0; border-top: 1px solid var(--border); }
.closing-grid { display: grid; grid-template-columns: 132px 1fr; }
.closing-title { font-size: clamp(34px,5.4vw,82px); font-weight: 470; letter-spacing: -0.04em; line-height: 0.98; max-width: 16ch; text-wrap: balance; }
.closing-actions { display: flex; flex-wrap: wrap; gap: 28px; margin-top: clamp(32px,4vw,52px); align-items: center; }
@media (max-width: 860px) { .closing-grid { grid-template-columns: 1fr; } }

/* ---------- CTAs de regla (no píldoras rellenas) ---------- */
.act {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text); padding: 14px 0;
  border-bottom: 1px solid var(--text); transition: gap .3s var(--ease), color .3s, border-color .3s;
}
.act:hover { gap: 18px; color: var(--accent); border-color: var(--accent); }
.act-ghost { color: var(--text-dim); border-bottom-color: var(--border-strong); }
.act-ghost:hover { color: var(--text); border-color: var(--text); }
.act svg { width: 13px; height: 13px; }

/* ============================================================
   Componentes de PROFUNDIDAD de contenido (editorial)
   ============================================================ */

/* Párrafo guía / prosa de argumento */
.prose { max-width: 60ch; }
.prose p { font-size: clamp(16px, 1.45vw, 19px); line-height: 1.66; color: var(--text-dim); }
.prose p + p { margin-top: 1.1em; }
.prose strong { color: var(--text); font-weight: 560; }
.lead-xl {
  font-size: clamp(22px, 2.6vw, 34px); font-weight: 460; letter-spacing: -0.025em;
  line-height: 1.22; color: var(--text); max-width: 26ch; text-wrap: balance;
}

/* Definición a dos columnas: no es X / es Y */
.contrast { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--text); }
.contrast-col { padding: clamp(24px, 2.8vw, 36px) clamp(20px, 2.4vw, 36px) clamp(24px, 2.8vw, 36px) 0; }
.contrast-col + .contrast-col { border-left: 1px solid var(--border); padding-left: clamp(24px, 3vw, 48px); }
.contrast-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }
.contrast-col.is-now .contrast-tag { color: var(--accent); }
.contrast-list { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.contrast-list li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; font-size: clamp(15px,1.4vw,17px); line-height: 1.45; color: var(--text-dim); }
.contrast-col.is-now .contrast-list li { color: var(--text); }
.contrast-list li::before { content: '—'; color: var(--text-faint); }
.contrast-col.is-now .contrast-list li::before { content: ''; width: 7px; height: 7px; background: var(--accent); margin-top: .5em; }
@media (max-width: 720px) { .contrast { grid-template-columns: 1fr; } .contrast-col + .contrast-col { border-left: none; border-top: 1px solid var(--border); padding-left: 0; } }

/* Movimientos del modelo operativo (índice + texto, alterna) */
.moves { margin-top: clamp(40px,5vw,64px); display: flex; flex-direction: column; }
.move { display: grid; grid-template-columns: 64px minmax(0,1fr) minmax(0,1.3fr); gap: clamp(18px,3vw,48px); padding: clamp(26px,3vw,40px) 0; border-top: 1px solid var(--border); align-items: start; }
.move:first-child { border-top: 1px solid var(--text); }
.move-no { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); letter-spacing: .08em; padding-top: 6px; }
.move-h { font-size: clamp(20px,2.2vw,29px); font-weight: 520; letter-spacing: -0.02em; line-height: 1.08; }
.move-h small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-top: 10px; }
.move-body { font-size: 15px; line-height: 1.64; color: var(--text-dim); }
.move-body strong { color: var(--text); font-weight: 540; }
@media (max-width: 760px) { .move { grid-template-columns: 1fr; gap: 12px; } }

/* Objeciones / por qué Carton */
.objections { margin-top: clamp(40px,5vw,64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--text); }
.objection { padding: clamp(26px,3vw,38px) clamp(20px,2vw,32px) clamp(26px,3vw,38px) 0; border-right: 1px solid var(--border); }
.objection:last-child { border-right: none; }
.objection-q { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; color: var(--text-faint); line-height: 1.5; margin-bottom: 16px; }
.objection-q::before { content: '« '; }
.objection-q::after { content: ' »'; }
.objection-a { font-size: clamp(15px,1.45vw,18px); line-height: 1.55; color: var(--text); }
.objection-a strong { color: var(--accent); font-weight: 560; }
@media (max-width: 820px) { .objections { grid-template-columns: 1fr; } .objection { border-right: none; border-bottom: 1px solid var(--border); } .objection:last-child { border-bottom: none; } }

/* FAQ — acordeón sobrio */
.faq { margin-top: clamp(36px,4vw,56px); border-top: 1px solid var(--text); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 24px;
  align-items: center; padding: clamp(22px,2.4vw,30px) 0; cursor: pointer;
  font-size: clamp(17px,1.7vw,22px); font-weight: 500; letter-spacing: -0.015em; color: var(--text);
}
.faq-sign { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-sign::before, .faq-sign::after { content: ''; position: absolute; background: var(--accent); transition: transform .35s var(--ease), opacity .35s; }
.faq-sign::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-sign::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item.open .faq-sign::after { transform: scaleY(0); opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .5s var(--ease); }
.faq-item.open .faq-a { max-height: 320px; }
.faq-a-inner { padding: 0 0 clamp(24px,2.6vw,32px) 0; max-width: 64ch; font-size: clamp(15px,1.4vw,17px); line-height: 1.66; color: var(--text-dim); }
.faq-a-inner strong { color: var(--text); font-weight: 540; }

/* ---------- artdirection.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Dirección de arte "Kraft & Sapphire"
   ------------------------------------------------------------
   Capa que se carga LA ÚLTIMA. No reescribe contenido ni
   estructura: reconstruye el sistema cromático, introduce
   paneles alternos (sapphire / board), objetos editoriales,
   acentos cálidos (naranja operativo + marrón material) y
   un motion medido. Concepto: "carton" = material/board.
   ============================================================ */

/* ============================================================
   1 · SISTEMA CROMÁTICO — tokens cálidos
   ============================================================ */
:root {
  /* familia material (marca) */
  --orange:        #e29a56;   /* light orange — señal operativa */
  --orange-deep:   #c6792d;
  --orange-soft:   rgba(226,154,86,0.15);
  --brown:         #8b560b;   /* MacCay — ámbar cálido premium */
  --brown-soft:    #b4832f;
  --brown-deep:    #543607;
  --gray:          #a9a9a9;   /* gris neutro de la referencia */

  /* board / soft gray (paneles claros) — gris cálido neutro */
  --board:         #e0ddd5;
  --board-2:       #d2cfc6;
  --board-raise:   #e9e6df;

  /* sapphire (paneles oscuros) */
  --sapphire:      #0a0a0b;
  --sapphire-2:    #141416;

  --accent-soft:   var(--orange-soft);
}

/* ---------- Tema oscuro: sapphire + blanco cálido ---------- */
[data-theme="dark"] {
  --bg:            #0a0a0b;
  --surface:       #141416;
  --surface-2:     #1d1d1f;
  --border:        rgba(233,229,216,0.10);
  --border-strong: rgba(233,229,216,0.22);
  --hair:          rgba(233,229,216,0.06);
  --raise:         rgba(233,229,216,0.022);
  --text:          #f4efe5;
  --text-dim:      #a6a39a;
  --text-faint:    #6b6760;
  --viz-line:      rgba(233,229,216,0.12);
  --viz-ring:      rgba(226,154,86,0.05);
  --nav-bg:        rgba(10,10,11,0.74);
}

/* ---------- Tema claro: board gris cálido ---------- */
[data-theme="light"] {
  --bg:            #e0ddd5;
  --surface:       #e9e6df;
  --surface-2:     #d2cfc6;
  --border:        rgba(24,22,16,0.14);
  --border-strong: rgba(24,22,16,0.28);
  --hair:          rgba(24,22,16,0.08);
  --raise:         rgba(24,22,16,0.03);
  --text:          #1c1913;
  --text-dim:      #5e594f;
  --text-faint:    #8d887c;
  --viz-line:      rgba(24,22,16,0.16);
  --viz-ring:      rgba(139,86,11,0.07);
  --nav-bg:        rgba(224,221,213,0.80);
}

::selection { background: var(--orange); color: #14100b; }

/* ============================================================
   2 · GRANO / TEXTURA — riqueza de superficie (mata el "flat AI")
   ============================================================ */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] body::after { opacity: .05; }

/* ============================================================
   3 · PANELES ALTERNOS A SANGRE — board sobre sapphire
   Cada .tone-raise se vuelve un panel "board" cálido a sangre
   completa, reescribiendo sus tokens locales (cascada) para que
   todo el contenido descendiente cambie de registro cromático.
   ============================================================ */
.tone-raise {
  position: relative;
  /* full-bleed board panel — box-shadow spread is bulletproof (no z-index traps) */
  background: var(--board);
  color: var(--text);
  box-shadow: 0 0 0 100vmax var(--board);
  clip-path: inset(0 -100vmax);
  /* flip de tokens locales → board */
  --bg:            var(--board);
  --surface:       var(--board-raise);
  --surface-2:     var(--board-2);
  --border:        rgba(28,22,15,0.14);
  --border-strong: rgba(28,22,15,0.30);
  --hair:          rgba(28,22,15,0.08);
  --raise:         rgba(28,22,15,0.04);
  --text:          #1c1913;
  --text-dim:      #615c52;
  --text-faint:    #918c80;
}
/* hairline cálido que separa board de sapphire */
.tone-raise::after {
  content: '';
  position: absolute; left: 0; right: 0; top: -0.5px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brown-soft) 18%, var(--brown-soft) 82%, transparent);
  opacity: .5; pointer-events: none;
}

/* En tema claro invertimos: los paneles raise se vuelven sapphire */
[data-theme="light"] .tone-raise {
  background: var(--sapphire);
  color: var(--text);
  box-shadow: 0 0 0 100vmax var(--sapphire);
  --bg:            var(--sapphire);
  --surface:       var(--sapphire-2);
  --surface-2:     #1a2531;
  --border:        rgba(238,231,219,0.12);
  --border-strong: rgba(238,231,219,0.24);
  --hair:          rgba(238,231,219,0.07);
  --raise:         rgba(238,231,219,0.03);
  --text:          #f3eee4;
  --text-dim:      #a89e8e;
  --text-faint:    #6d6557;
}

/* ============================================================
   4 · ACENTO — naranja operativo + marrón material
   ============================================================ */
/* La línea bajo el término clave del hero: trazo material grueso */
.hm-em::after {
  height: .34em !important; bottom: .04em !important;
  background: var(--orange) !important;
  opacity: .9; z-index: -1; border-radius: 1px;
}
.hm-em { color: var(--text); }

/* índice de capítulo: pasa a marrón material con punto */
.chapter-no, .hm-idx, .kicker-idx, .move-no, .ledger-no,
.ledger-stack-code, .hm-toc-num { color: var(--orange) !important; }

/* la etiqueta vertical lateral del capítulo: marrón tenue */
.chapter-label, .kicker-text { color: var(--text-faint); }

/* glifo de nodo en el kicker — iconografía de sistema consistente */
.kicker-glyph { width: 16px; height: 16px; color: var(--orange); flex-shrink: 0; opacity: .9; }

/* ---------- Botones / CTA de regla ---------- */
.act { border-bottom-color: var(--text); }
.act:hover { color: var(--orange-deep); border-color: var(--orange); }
[data-theme="dark"] .act:hover { color: var(--orange); }

.nav-cta:hover { background: var(--orange) !important; color: #14100b !important; border-color: var(--orange) !important; }
.btn-primary:hover { background: var(--orange); color: #14100b; }
.nav-link-active::after { background: var(--orange) !important; }

/* ---------- Ledger / stack: borde-arista naranja al pasar ---------- */
.ledger { border-top-color: var(--text); }
.ledger-row, .ledger-stack-row, .move, .moves { position: relative; }
.ledger-row::before, .ledger-stack-row::before {
  content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: var(--orange); transform: scaleY(0); transform-origin: top;
  transition: transform .4s var(--ease);
}
.ledger-row:hover::before, .ledger-stack-row:hover::before { transform: scaleY(1); }
.ledger-row:hover, .ledger-stack-row:hover { background: var(--raise); }

/* viñeta "ahora/es" en marrón→naranja */
.shift-now::before { background: var(--orange) !important; }
.contrast-col.is-now .contrast-list li::before { background: var(--orange) !important; }
.contrast-col.is-now .contrast-tag { color: var(--orange-deep) !important; }
[data-theme="dark"] .contrast-col.is-now .contrast-tag { color: var(--orange) !important; }
.ledger-stack-orq::before { background: var(--orange) !important; }
.ledger-stack-row:hover .ledger-stack-go { color: var(--orange) !important; }

/* objeción: respuesta destacada en naranja */
.objection-a strong { color: var(--orange-deep) !important; }
[data-theme="dark"] .objection-a strong { color: var(--orange) !important; }
.objections { border-top-color: var(--text); }

/* FAQ — signo en naranja */
.faq-sign::before, .faq-sign::after { background: var(--orange) !important; }
.faq { border-top-color: var(--text); }

/* resultados: primera cifra material en naranja */
.results { border-top-color: var(--text); }
.result:first-child .result-fig { color: var(--orange); }

/* prosa: el strong cálido */
.prose strong { color: var(--text); }
.lead-xl { color: var(--text); }

/* ============================================================
   5 · OBJETOS EDITORIALES — formas con presencia
   ============================================================ */
/* --- numeral fantasma gigante por capítulo (marca de página) --- */
.chapter-mark { position: relative; }
.chapter-mark .chapter-no {
  position: relative; z-index: 1;
  font-size: 13px;
}
.chapter-mark::before {
  content: '';
  position: absolute; left: -8px; top: 34px;
  width: 64px; height: 64px;
  border: 1px solid var(--brown-soft);
  border-radius: 50%;
  opacity: .35;
  pointer-events: none;
}
.chapter-mark::after {
  content: '';
  position: absolute; left: 20px; top: 0;
  width: 7px; height: 7px; background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--orange-soft);
}
@media (max-width: 860px) {
  .chapter-mark::before, .chapter-mark::after { display: none; }
}

/* --- HERO: campo de objetos detrás de la figura --- */
.hm-lede { position: relative; }
.hm-lede > * { position: relative; z-index: 1; }

/* disco material marrón — gran presencia, esquina superior derecha */
.hm-objects { position: absolute; inset: 0; z-index: 0 !important; pointer-events: none; overflow: visible; }
.hm-objects > span { position: absolute; display: block; }
.obj-disc {
  right: 2vw; top: 13vh;
  width: clamp(190px, 22vw, 320px); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, var(--brown-soft), var(--brown) 56%, var(--brown-deep) 100%);
  box-shadow: 0 44px 130px -40px rgba(0,0,0,.75);
  animation: deco-float 15s var(--ease) infinite;
}
/* anillo naranja fino que orbita el disco */
.obj-ring {
  right: 9vw; top: 8vh;
  width: clamp(120px, 15vw, 215px); aspect-ratio: 1;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  opacity: .55;
  animation: deco-float 19s var(--ease) -5s infinite reverse;
}
@media (max-width: 860px) {
  .obj-disc { right: -8vw; top: 6vh; width: 150px; }
  .obj-ring, .hm-objects .obj-dots { display: none; }
}

/* mapa de nodos — gráfico de orquestación (agentes coordinados) */
.obj-nodemap {
  position: absolute; left: 1.5vw; bottom: 9vh;
  width: clamp(120px, 13vw, 180px); height: auto;
  overflow: visible; opacity: .9;
  animation: deco-float 17s var(--ease) -3s infinite;
}
.obj-nodemap .nm-orbit { stroke: var(--brown-soft); stroke-width: 1; opacity: .35; }
.obj-nodemap .nm-edge { stroke: var(--brown-soft); stroke-width: 1; opacity: .5; stroke-dasharray: 2 4; }
.obj-nodemap .nm-node { fill: var(--brown); }
.obj-nodemap .nm-core { fill: var(--orange); transform-origin: 65px 65px; animation: nm-pulse 3.4s var(--ease) infinite; }
@keyframes nm-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .7; } }
@media (max-width: 860px) { .obj-nodemap { display: none; } }

/* campo de semitono (puntos) en el flanco izquierdo */
.hm-figure { position: relative; }
.hm-objects .obj-dots {
  left: -1vw; bottom: 15vh;
  width: clamp(110px, 14vw, 180px); height: clamp(110px, 14vw, 180px);
  background-image: radial-gradient(var(--brown-soft) 1.5px, transparent 1.5px);
  background-size: 13px 13px;
  opacity: .5;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 78%);
  mask-image: linear-gradient(135deg, #000, transparent 78%);
}

/* marca de registro (cruz) en la esquina de la figura */
.hm-figure-cap { position: relative; }
.hm-figure-cap::after {
  content: '';
  position: absolute; right: 0; top: -22px;
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--orange),var(--orange)) center/100% 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) center/1.5px 100% no-repeat;
  opacity: .8;
}

/* --- CIERRE: gran arco material a sangre (elementos reales) --- */
.closing { position: relative; overflow: hidden; }
.closing > * { position: relative; z-index: 1; }
.closing-objects { position: absolute; inset: 0; z-index: 0 !important; pointer-events: none; }
.closing-objects > span { position: absolute; display: block; }
.obj-arc {
  right: -10vw; bottom: -22vw;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  border-radius: 50%;
  border: clamp(20px, 3vw, 42px) solid var(--brown);
  opacity: .16;
}
.obj-cluster {
  right: 5vw; bottom: 14vh;
  width: 96px; height: 96px;
  background-image: radial-gradient(var(--orange) 1.6px, transparent 1.6px);
  background-size: 15px 15px;
  opacity: .4;
}
@media (max-width: 860px) { .obj-cluster { display: none; } }

/* --- objeto en el panel de resultados (célula/módulo) --- */

/* ============================================================
   6 · MOTION — medido, premium (nada teatral)
   ============================================================ */
/* ScrollText — revelado palabra a palabra ligado al scroll */
.st-w {
  display: inline-block;
  opacity: 0.16;
  transform: translateY(0.34em);
  will-change: opacity, transform;
}
.closing-title .st-w { opacity: 0.18; }

/* Cabecera de capítulo en dos columnas: texto + diagrama de marca */
.chapter-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.82fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
}
.chapter-head-main { min-width: 0; }
.chapter-aside { display: flex; justify-content: center; padding-top: 6px; }
.chapter-aside .chap-diagram { width: 100%; max-width: 340px; height: auto; }
.cd-cap { fill: var(--text-faint); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.cd-lbl { fill: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .06em; }
.cd-tag { fill: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .05em; }
@media (max-width: 920px) {
  .chapter-head--split { grid-template-columns: 1fr; gap: 30px; }
  .chapter-aside { justify-content: flex-start; padding-top: 0; }
  .chapter-aside .chap-diagram { max-width: 300px; }
}

@keyframes deco-float {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(0,-16px,0); }
}

/* barra de progreso de scroll — hilo material naranja→marrón */
.scrollbar-prog {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 90;
  width: 100%; transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, var(--brown), var(--orange));
  pointer-events: none;
}

/* marquee del hero (si existe) en cálido */
.hero-marquee-track { color: var(--text-faint); }

/* micro: TOC del hero, deslizar con barra material */
.hm-toc-item { position: relative; }
.hm-toc-item::before {
  content: ''; position: absolute; left: -10px; top: 50%; width: 4px; height: 0;
  background: var(--orange); transform: translateY(-50%);
  transition: height .3s var(--ease);
}
.hm-toc-item:hover::before { height: 60%; }
.hm-toc-item:hover .hm-toc-go { color: var(--orange); }

/* la viz: punto de lectura cálido */
.viz-readout-dot { background: var(--orange) !important; }
.viz-node-core { border-color: var(--orange) !important; box-shadow: 0 0 0 1px var(--orange-soft), 0 12px 50px -16px var(--orange-soft) !important; }
.viz-node-core .viz-node-pin { background: var(--orange) !important; box-shadow: 0 0 10px var(--orange) !important; }
.viz-node-status { color: var(--orange) !important; border-color: var(--orange-soft) !important; }

/* ============================================================
   7 · NAV / FOOTER — chrome cálido
   ============================================================ */
.brand-mark { border-color: var(--border-strong); }
.brand:hover .brand-mark { border-color: var(--orange); }
.brand-mark-dot { background: var(--orange) !important; }
.brand-word-2 { color: var(--text-faint); }

/* ---------- Logo de marca (imagen cartón, sin fondo) ---------- */
.brand { display: inline-flex; align-items: center; gap: 0; }
.brand-logo { height: 54px; width: auto; display: block; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.brand:hover .brand-logo { opacity: .8; }
.nav-inner { height: 86px; }
.footer-brand .brand { margin-bottom: 22px; }
.footer-brand .brand-logo { height: 112px; }
@media (max-width: 720px) {
  .brand-logo { height: 44px; }
  .footer-brand .brand-logo { height: 78px; }
}

.footer { position: relative; isolation: isolate; }
.footer-cta { background: transparent; position: relative; }
.footer-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--raise);
}
.footer-col button:hover { color: var(--orange) !important; }
.footer-cta-title em, .closing-title em { color: var(--orange); font-style: normal; }

/* ============================================================
   STACK STICKY DECK — baraja de orquestación (scroll apilado)
   ============================================================ */
.stack-deck { margin-top: 38px; display: flex; flex-direction: column; }
.stack-card {
  position: sticky; top: calc(98px + var(--i) * 18px);
  width: 100%; text-align: left; display: flex; flex-direction: column;
  min-height: clamp(300px, 50vh, 440px);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--orange) 42%, transparent), 0 -1px 0 rgba(0,0,0,.4), 0 38px 72px -40px rgba(0,0,0,.82);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.stack-card + .stack-card { margin-top: 26px; }
.stack-card:hover { border-color: var(--orange); box-shadow: inset 3px 0 0 var(--orange), 0 -1px 0 rgba(0,0,0,.4), 0 38px 72px -40px rgba(0,0,0,.82); }
.stack-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 62px; padding: 0 clamp(20px, 2.6vw, 36px); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--raise), transparent); }
.stack-card-idx { font-size: 12px; letter-spacing: .1em; color: var(--orange); }
.stack-card-name { font-size: clamp(17px, 1.9vw, 23px); font-weight: 580; letter-spacing: -0.02em; }
.stack-card-code { font-size: 11px; letter-spacing: .12em; color: var(--text-faint); border: 1px solid var(--border-strong); padding: 5px 11px; border-radius: 100px; white-space: nowrap; }
.stack-card-body { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(20px, 2.4vw, 30px); padding: clamp(26px, 3.2vw, 44px) clamp(20px, 2.6vw, 36px); overflow: hidden; }
.stack-card-watermark { position: absolute; right: 6px; bottom: -34px; font-size: clamp(96px, 14vw, 200px); font-weight: 700; letter-spacing: -0.05em; line-height: .8; color: var(--text); opacity: .04; pointer-events: none; user-select: none; }
.stack-card-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.stack-card-text { display: flex; flex-direction: column; gap: 15px; }
.stack-card-claim { font-size: clamp(22px, 2.9vw, 38px); font-weight: 480; letter-spacing: -0.028em; line-height: 1.12; color: var(--text); max-width: 20ch; text-wrap: balance; }
.stack-card-role { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; max-width: 46ch; }
.stack-card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.stack-card-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); border: 1px solid var(--border); padding: 5px 11px; border-radius: 100px; }
.stack-card-side { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cardviz { width: clamp(118px, 12vw, 158px); height: auto; }
.cardviz-core { transform-origin: 80px 70px; animation: nm-pulse 3.2s var(--ease) infinite; }
.stack-card-metric { display: flex; flex-direction: column; gap: 5px; }
.stack-card-metric-v { font-size: clamp(30px, 3.6vw, 50px); font-weight: 500; letter-spacing: -0.04em; line-height: .9; color: var(--orange); }
.stack-card-metric-l { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); max-width: 18ch; line-height: 1.4; }
.stack-card-go { position: relative; z-index: 1; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); transition: color .3s, transform .3s var(--ease); }
.stack-card:hover .stack-card-go { color: var(--orange); transform: translateX(5px); }
@media (max-width: 720px) { .stack-card-content { grid-template-columns: 1fr; gap: 24px; } .stack-card-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } }
@media (max-width: 600px) { .stack-card { min-height: 280px; top: calc(80px + var(--i) * 14px); } }
@media (prefers-reduced-motion: reduce) { .stack-card { position: static; } .stack-card + .stack-card { margin-top: 16px; } }

/* ============================================================
   8 · RAILES — adaptan a marrón muy tenue
   ============================================================ */
.rails span { background: var(--hair); }

/* ============================================================
   9 · TIPOGRAFÍA — un punto más de carácter en los grandes títulos
   ============================================================ */
.hm-thesis, .closing-title, .chapter-lead { text-wrap: balance; }
.hm-thesis { font-weight: 470; }

/* refuerzo de contraste de los grandes números de resultado */
.result-fig { color: var(--text); }

/* reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .hm-thesis-wrap::after, .hm-thesis-wrap::before { animation: none; }
}

/* ---------- recursos.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Recursos · sistema editorial
   "El Cuaderno operativo" — hub, categoría y artículo.
   ADN editorial propio dentro de la marca. Carga tras artdirection.
   ============================================================ */

/* ---------- objetos decorativos (elementos reales) ---------- */
.rc-objects { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.rc-objects > span { position: absolute; display: block; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.rc-masthead { position: relative; padding-top: clamp(24px, 3.5vw, 46px); padding-bottom: clamp(44px, 6vw, 84px); }
.rc-masthead > *:not(.rc-objects) { position: relative; z-index: 1; }
.rc-mast-rule {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-faint);
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.rc-mast-rule span:nth-child(2) { color: var(--text-dim); }
.rc-mast-grid {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 80px);
  align-items: end; margin-top: clamp(40px, 6vw, 88px);
}
.rc-mast-title {
  font-size: clamp(40px, 6.6vw, 100px); font-weight: 470;
  letter-spacing: -0.042em; line-height: 0.96; text-wrap: balance;
}
.rc-mast-side { display: flex; flex-direction: column; gap: 26px; }
.rc-mast-lede { font-size: clamp(15px, 1.4vw, 18px); color: var(--text-dim); line-height: 1.62; max-width: 44ch; }
.rc-mast-actions { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
@media (max-width: 860px) {
  .rc-mast-grid { grid-template-columns: 1fr; gap: 30px; align-items: start; }
}

/* ============================================================
   PIEZA PRINCIPAL (featured)
   ============================================================ */
.rc-featured-wrap { padding-bottom: clamp(40px, 5vw, 70px); }
.rc-featured {
  display: grid; grid-template-columns: 1.05fr 1.1fr; gap: 0;
  width: 100%; text-align: left; border-top: 1px solid var(--text);
  transition: background .4s var(--ease);
}
.rc-featured:hover { background: var(--raise); }
.rc-featured-media {
  position: relative; min-height: 340px; overflow: hidden;
  border-right: 1px solid var(--border);
  background:
    repeating-linear-gradient(135deg, var(--surface) 0 11px, transparent 11px 22px),
    var(--surface-2);
}
.rc-featured-tag {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
  border: 1px solid var(--border-strong); background: var(--bg); padding: 6px 11px; border-radius: 100px;
}
.rc-featured-fig {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint);
}
.rc-featured-body { padding: clamp(28px, 3.4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.rc-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 20px; }
.rc-meta-cat { color: var(--orange); text-transform: uppercase; letter-spacing: .12em; }
.rc-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }
.rc-featured-title { font-size: clamp(26px, 3.4vw, 46px); font-weight: 500; letter-spacing: -0.032em; line-height: 1.04; text-wrap: balance; }
.rc-featured-dek { font-size: clamp(16px, 1.5vw, 19px); color: var(--text-dim); line-height: 1.55; margin-top: 18px; max-width: 46ch; }
.rc-byline { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: 11px; letter-spacing: .04em; color: var(--text-dim); }
.rc-byline-mark { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--brown-soft), var(--brown-deep)); flex-shrink: 0; }
.rc-byline-sep { color: var(--text-faint); }
.rc-featured-go, .rc-spot-go, .rc-cluster-go { display: inline-flex; align-items: center; gap: 8px; color: var(--orange); margin-left: auto; transition: gap .3s var(--ease); }
.rc-featured:hover .rc-featured-go { gap: 12px; }
.rc-featured-go svg, .rc-spot-go svg { width: 12px; height: 12px; }
@media (max-width: 760px) {
  .rc-featured { grid-template-columns: 1fr; }
  .rc-featured-media { border-right: none; border-bottom: 1px solid var(--border); min-height: 220px; }
  .rc-byline { flex-wrap: wrap; }
  .rc-featured-go { margin-left: 0; }
}

/* ============================================================
   ENCABEZADOS DE BANDA (margen 132px, como capítulos)
   ============================================================ */
.rc-band-head { display: grid; grid-template-columns: 132px 1fr; gap: 0; margin-bottom: clamp(34px, 4vw, 56px); align-items: start; }
.rc-band-title { font-size: clamp(24px, 3.2vw, 42px); font-weight: 480; letter-spacing: -0.03em; line-height: 1.06; max-width: 22ch; text-wrap: balance; }
.rc-band-note { font-size: clamp(15px, 1.4vw, 18px); color: var(--text-dim); line-height: 1.6; max-width: 52ch; margin-top: 22px; }
@media (max-width: 860px) {
  .rc-band-head { grid-template-columns: 1fr; gap: 18px; }
}

.rc-start, .rc-directory, .rc-archive, .rc-clusters, .rc-downloads, .rc-twin, .rc-funnel,
.rc-cathead, .rc-catlist, .rc-siblings, .rc-catlead-wrap { padding-top: clamp(60px, 7vw, 104px); padding-bottom: clamp(60px, 7vw, 104px); }

/* ============================================================
   EMPIEZA AQUÍ
   ============================================================ */
.rc-start-list { display: flex; flex-direction: column; border-top: 1px solid var(--text); }
.rc-start-row {
  display: grid; grid-template-columns: 56px 1fr auto auto; gap: clamp(16px, 3vw, 40px);
  align-items: center; width: 100%; text-align: left;
  padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--border);
  position: relative; transition: padding-left .35s var(--ease), background .35s;
}
.rc-start-row::before { content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--orange); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.rc-start-row:hover::before { transform: scaleY(1); }
.rc-start-row:hover { padding-left: 12px; }
.rc-start-n { font-size: 13px; color: var(--orange); letter-spacing: .08em; }
.rc-start-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rc-start-cat { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); }
.rc-start-title { font-size: clamp(18px, 2vw, 26px); font-weight: 520; letter-spacing: -0.02em; line-height: 1.12; }
.rc-start-read { font-size: 11px; color: var(--text-faint); letter-spacing: .06em; white-space: nowrap; }
.rc-start-go { color: var(--text-faint); display: inline-flex; transition: transform .35s var(--ease), color .35s; }
.rc-start-go svg { width: 14px; height: 14px; }
.rc-start-row:hover .rc-start-go { color: var(--orange); transform: translate(3px,-3px); }
@media (max-width: 680px) {
  .rc-start-row { grid-template-columns: 40px 1fr auto; }
  .rc-start-go { display: none; }
}

/* ============================================================
   DIRECTORIO — entrar por eje
   ============================================================ */
.rc-axes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--text); }
.rc-axis { padding: clamp(24px, 2.6vw, 34px) clamp(16px, 2vw, 30px) clamp(24px, 2.6vw, 34px) 0; border-right: 1px solid var(--border); }
.rc-axis:last-child { border-right: none; padding-right: 0; }
.rc-axis-h { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--orange); margin-bottom: 18px; display: block; }
.rc-axis-list { display: flex; flex-direction: column; gap: 2px; }
.rc-axis-list button {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  text-align: left; padding: 9px 0; font-size: clamp(14px, 1.4vw, 16px); color: var(--text);
  border-bottom: 1px solid var(--border); transition: color .25s, padding-left .25s var(--ease);
}
.rc-axis-list button:hover { color: var(--orange); padding-left: 6px; }
.rc-axis-list button.on { color: var(--orange); }
.rc-axis-list button.on::after { content: '●'; font-size: 7px; }
.rc-axis-go { color: var(--text-faint); font-size: 12px; }
@media (max-width: 860px) { .rc-axes { grid-template-columns: 1fr 1fr; } .rc-axis:nth-child(2) { border-right: none; } .rc-axis { padding-right: 0; } }
@media (max-width: 520px) { .rc-axes { grid-template-columns: 1fr; } .rc-axis { border-right: none; } }

/* ============================================================
   ARCHIVO / LEDGER
   ============================================================ */
.rc-archive-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.rc-archive-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--text-faint); display: inline-flex; align-items: center; gap: 12px; }
.rc-archive-kicker::before { content: ''; width: 28px; height: 1px; background: var(--brown-soft); }
.rc-archive-count { font-size: 11px; color: var(--text-faint); letter-spacing: .08em; }
.rc-filter-active { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--orange); border: 1px solid var(--orange); padding: 7px 12px; border-radius: 100px; display: inline-flex; gap: 8px; transition: background .3s; }
.rc-filter-active:hover { background: var(--orange-soft); }

.rc-ledger { border-top: 1px solid var(--text); }
.rc-ledger-row {
  display: grid; grid-template-columns: 48px minmax(0, 2.4fr) 1.1fr 0.8fr auto auto;
  gap: clamp(14px, 2.4vw, 36px); align-items: center; width: 100%; text-align: left;
  padding: clamp(20px, 2.3vw, 28px) 0; border-bottom: 1px solid var(--border);
  position: relative; transition: background .4s var(--ease), padding-left .35s var(--ease);
}
.rc-ledger-row::before { content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--orange); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.rc-ledger-row:hover::before { transform: scaleY(1); }
.rc-ledger-row:hover { padding-left: 12px; }
.rc-l-n { font-size: 12px; color: var(--text-faint); letter-spacing: .08em; }
.rc-l-title { font-size: clamp(16px, 1.7vw, 21px); font-weight: 520; letter-spacing: -0.018em; line-height: 1.15; }
.rc-l-cat { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--orange); }
.rc-l-type { font-size: 11px; color: var(--text-dim); letter-spacing: .04em; }
.rc-l-read { font-size: 11px; color: var(--text-faint); letter-spacing: .06em; white-space: nowrap; }
.rc-l-go { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); white-space: nowrap; transition: color .3s, transform .3s var(--ease); }
.rc-ledger-row:hover .rc-l-go { color: var(--orange); transform: translateX(4px); }
.rc-empty { padding: 32px 0; color: var(--text-faint); font-size: 13px; letter-spacing: .04em; }
@media (max-width: 900px) {
  .rc-ledger-row { grid-template-columns: 40px 1fr auto; gap: 8px 16px; }
  .rc-l-cat { grid-column: 2; }
  .rc-l-type, .rc-l-go { display: none; }
  .rc-l-read { grid-row: 1; }
}

/* ============================================================
   COMPARATIVAS & GUÍAS (twin)
   ============================================================ */
.rc-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rc-spot { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: clamp(30px, 4vw, 56px); background: var(--bg); width: 100%; text-align: left; min-height: 280px; transition: background .35s; position: relative; }
.rc-spot:hover { background: var(--surface); }
.rc-spot-comp { background: linear-gradient(180deg, color-mix(in oklch, var(--orange) 8%, var(--bg)), var(--bg) 55%); }
.rc-spot-guide { background: linear-gradient(180deg, color-mix(in oklch, var(--brown) 10%, var(--bg)), var(--bg) 55%); }
.rc-spot-k { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--orange); }
.rc-spot-guide .rc-spot-k { color: var(--brown-soft); }
.rc-spot-t { font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
.rc-spot-d { font-size: clamp(15px, 1.4vw, 17px); color: var(--text-dim); line-height: 1.55; max-width: 40ch; }
.rc-spot-go { margin-top: auto; margin-left: 0; padding-top: 16px; }
.rc-spot:hover .rc-spot-go { gap: 12px; }
@media (max-width: 720px) { .rc-twin { grid-template-columns: 1fr; } }

/* ============================================================
   CLUSTERS
   ============================================================ */
.rc-cluster-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); }
.rc-cluster { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); width: 100%; text-align: left; transition: transform .35s var(--ease), border-color .35s, background .35s; position: relative; overflow: hidden; }
.rc-cluster::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; border: 1px solid var(--brown-soft); opacity: .3; transition: transform .5s var(--ease); }
.rc-cluster:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.rc-cluster:hover::after { transform: scale(1.25); }
.rc-cluster-count { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); }
.rc-cluster-label { font-size: clamp(19px, 2.1vw, 27px); font-weight: 520; letter-spacing: -0.022em; line-height: 1.1; }
.rc-cluster-note { font-size: 14.5px; color: var(--text-dim); line-height: 1.5; max-width: 34ch; }
.rc-cluster-go { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); margin-top: 6px; transition: color .3s; }
.rc-cluster:hover .rc-cluster-go { color: var(--orange); }
@media (max-width: 720px) { .rc-cluster-grid { grid-template-columns: 1fr; } }

/* ============================================================
   DESCARGABLES
   ============================================================ */
.rc-dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rc-dl { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: clamp(22px, 2.4vw, 30px); background: var(--bg); width: 100%; text-align: left; min-height: 240px; transition: background .35s; }
.rc-dl:hover { background: var(--surface); }
.rc-dl-type { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); border: 1px solid var(--border-strong); padding: 5px 9px; border-radius: 100px; }
.rc-dl-title { font-size: clamp(16px, 1.6vw, 19px); font-weight: 540; letter-spacing: -0.015em; line-height: 1.18; margin-top: 6px; }
.rc-dl-desc { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }
.rc-dl-foot { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); font-size: 10.5px; letter-spacing: .06em; color: var(--text-faint); }
.rc-dl-action { color: var(--orange); text-transform: uppercase; letter-spacing: .1em; transition: transform .3s var(--ease); }
.rc-dl:hover .rc-dl-action { transform: translateY(2px); }
@media (max-width: 900px) { .rc-dl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rc-dl-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FUNNEL CTA
   ============================================================ */
.rc-funnel { position: relative; }
.rc-funnel-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--orange); display: inline-flex; align-items: center; gap: 12px; }
.rc-funnel-kicker::before { content: ''; width: 28px; height: 1px; background: var(--orange); }
.rc-funnel-title { font-size: clamp(28px, 4vw, 56px); font-weight: 480; letter-spacing: -0.035em; line-height: 1.0; max-width: 20ch; text-wrap: balance; margin: 18px 0 clamp(34px, 4vw, 52px); }
.rc-funnel-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 22px); }
.rc-path { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: clamp(24px, 2.8vw, 34px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); width: 100%; text-align: left; transition: transform .35s var(--ease), border-color .35s; }
.rc-path:hover { transform: translateY(-3px); border-color: var(--orange); }
.rc-path-k { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); }
.rc-path-t { font-size: clamp(18px, 2vw, 24px); font-weight: 540; letter-spacing: -0.018em; }
.rc-path-d { font-size: 14px; color: var(--text-dim); line-height: 1.5; max-width: 30ch; }
.rc-path-go { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--orange); margin-top: 6px; transition: gap .3s var(--ease); }
.rc-path-go svg { width: 11px; height: 11px; }
.rc-path:hover .rc-path-go { gap: 12px; }
@media (max-width: 820px) { .rc-funnel-paths { grid-template-columns: 1fr; } }

/* ============================================================
   CATEGORÍA
   ============================================================ */
.rc-crumb { display: flex; align-items: center; gap: 12px; padding-top: clamp(24px, 3vw, 38px); font-size: 11px; letter-spacing: .1em; color: var(--text-faint); }
.rc-crumb button { color: var(--text-dim); transition: color .25s; }
.rc-crumb button:hover { color: var(--orange); }
.rc-crumb-here { color: var(--orange); }

.rc-cathead { position: relative; padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(30px, 4vw, 52px); }
.rc-cathead > *:not(.rc-objects) { position: relative; z-index: 1; }
.rc-cathead-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); padding: 7px 13px; border: 1px solid var(--border); border-radius: 100px; margin-bottom: 26px; }
.rc-cathead-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.rc-cathead-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.rc-cathead-title { font-size: clamp(40px, 6vw, 84px); font-weight: 480; letter-spacing: -0.04em; line-height: 0.98; }
.rc-cathead-side { display: flex; flex-direction: column; gap: 16px; }
.rc-cathead-blurb { font-size: clamp(16px, 1.5vw, 20px); color: var(--text-dim); line-height: 1.55; max-width: 40ch; }
.rc-cathead-count { font-size: 11px; color: var(--text-faint); letter-spacing: .08em; }
.rc-subfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 3vw, 40px); }
.rc-subfilter button { font-size: 11px; letter-spacing: .06em; color: var(--text-dim); border: 1px solid var(--border); padding: 9px 16px; border-radius: 100px; transition: all .25s var(--ease); }
.rc-subfilter button:hover { border-color: var(--border-strong); color: var(--text); }
.rc-subfilter button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
@media (max-width: 760px) { .rc-cathead-grid { grid-template-columns: 1fr; gap: 18px; align-items: start; } }

.rc-catlead-wrap { padding-top: clamp(20px, 2vw, 30px); }
.rc-catlead { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; width: 100%; text-align: left; border-top: 1px solid var(--text); transition: background .4s; }
.rc-catlead:hover { background: var(--raise); }
.rc-catlead-media { position: relative; min-height: 280px; border-right: 1px solid var(--border); background: repeating-linear-gradient(135deg, var(--surface) 0 11px, transparent 11px 22px), var(--surface-2); }
.rc-catlead-body { padding: clamp(26px, 3vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.rc-catlead-title { font-size: clamp(24px, 3vw, 40px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.rc-catlead-dek { font-size: clamp(15px, 1.5vw, 18px); color: var(--text-dim); line-height: 1.55; margin: 16px 0 24px; max-width: 46ch; }
.rc-catlead .rc-featured-go { margin-left: 0; }
@media (max-width: 760px) { .rc-catlead { grid-template-columns: 1fr; } .rc-catlead-media { border-right: none; border-bottom: 1px solid var(--border); min-height: 200px; } }

.rc-sibling-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rc-sibling { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: clamp(22px, 2.4vw, 30px); background: var(--bg); width: 100%; text-align: left; min-height: 150px; transition: background .35s; position: relative; }
.rc-sibling:hover { background: var(--surface); }
.rc-sibling-name { font-size: clamp(16px, 1.7vw, 20px); font-weight: 540; letter-spacing: -0.015em; }
.rc-sibling-blurb { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }
.rc-sibling-go { position: absolute; top: 22px; right: 22px; color: var(--text-faint); transition: color .3s, transform .3s var(--ease); }
.rc-sibling:hover .rc-sibling-go { color: var(--orange); transform: translate(2px,-2px); }
@media (max-width: 760px) { .rc-sibling-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ARTÍCULO
   ============================================================ */
.art-crumb { padding-bottom: 0; }
.art-hero { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(28px, 3.5vw, 48px); max-width: 1000px; }
.art-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.art-tag-type { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); border: 1px solid var(--orange); padding: 6px 12px; border-radius: 100px; }
.art-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); border: 1px solid var(--border); padding: 6px 12px; border-radius: 100px; }
.art-title { font-size: clamp(34px, 5vw, 66px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.0; text-wrap: balance; }
.art-dek { font-size: clamp(18px, 2vw, 25px); font-weight: 400; color: var(--text-dim); line-height: 1.38; margin-top: 24px; max-width: 40ch; letter-spacing: -0.01em; }
.art-byline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; margin-top: clamp(32px, 4vw, 44px); padding-top: 24px; border-top: 1px solid var(--border); }
.art-author { display: flex; align-items: center; gap: 12px; }
.art-author-mark { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--brown-soft), var(--brown) 60%, var(--brown-deep)); flex-shrink: 0; }
.art-author-info { display: flex; flex-direction: column; gap: 3px; }
.art-author-name { font-size: 14px; font-weight: 560; letter-spacing: -0.01em; }
.art-author-role { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); }
.art-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .04em; color: var(--text-faint); flex-wrap: wrap; }

.art-cover-wrap { padding-bottom: clamp(36px, 4vw, 60px); }
.art-cover { position: relative; height: clamp(280px, 40vw, 520px); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.art-cover-stripes { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--surface) 0 13px, transparent 13px 26px); }
.art-cover-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); background: linear-gradient(0deg, var(--bg), transparent); }

/* shell: TOC + cuerpo */
.art-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-bottom: clamp(50px, 6vw, 90px); }
.art-toc-col { position: relative; }
.art-toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
.art-toc-h { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--text-faint); }
.art-toc-prog { height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.art-toc-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--brown), var(--orange)); transform-origin: 0 50%; transition: transform .15s linear; }
.art-toc-list { display: flex; flex-direction: column; gap: 2px; counter-reset: toc; }
.art-toc-list button { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: baseline; width: 100%; text-align: left; padding: 8px 0; font-size: 13px; line-height: 1.35; color: var(--text-dim); border-top: 1px solid var(--border); transition: color .25s, padding-left .25s var(--ease); }
.art-toc-list button span { font-size: 10px; color: var(--orange); }
.art-toc-list button:hover { color: var(--text); padding-left: 4px; }
.art-toc-share { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.art-share { display: flex; gap: 8px; }
.art-share button { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--text-dim); transition: all .25s var(--ease); }
.art-share button:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }
@media (max-width: 880px) {
  .art-shell { grid-template-columns: 1fr; gap: 28px; }
  .art-toc { position: relative; top: 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .art-toc-share { display: none; }
}

/* cuerpo editorial */
.art-body { max-width: 68ch; }
.art-body > .reveal { margin: 0; }
.art-p { font-size: clamp(17px, 1.55vw, 19.5px); line-height: 1.72; color: var(--text); letter-spacing: -0.003em; }
.art-body > .reveal + .reveal .art-p { margin-top: 1.3em; }
.art-body .art-p { margin-bottom: 0; }
.art-body > .reveal:has(.art-p) + .reveal:has(.art-p) { margin-top: 1.3em; }
.art-h2 { font-size: clamp(23px, 2.6vw, 33px); font-weight: 560; letter-spacing: -0.025em; line-height: 1.12; margin: clamp(40px, 4vw, 60px) 0 18px; display: flex; align-items: baseline; gap: 14px; scroll-margin-top: 90px; }
.art-h2-n { font-size: 13px; color: var(--orange); flex-shrink: 0; }
.art-list { margin: 22px 0; display: flex; flex-direction: column; gap: 13px; padding-left: 4px; }
.art-list li { position: relative; padding-left: 26px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; color: var(--text-dim); }
.art-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 9px; height: 2px; background: var(--orange); }
.art-quote { margin: clamp(34px, 4vw, 52px) 0; padding-left: clamp(20px, 3vw, 32px); border-left: 2px solid var(--orange); }
.art-quote blockquote { font-size: clamp(21px, 2.4vw, 29px); font-weight: 460; letter-spacing: -0.02em; line-height: 1.32; color: var(--text); text-wrap: balance; }
.art-quote figcaption { margin-top: 16px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); }
.art-callout { margin: clamp(30px, 3.5vw, 46px) 0; padding: clamp(24px, 3vw, 34px); background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--orange); border-radius: var(--radius); }
.art-callout-k { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--orange); display: block; margin-bottom: 12px; }
.art-callout p { font-size: clamp(18px, 1.9vw, 23px); font-weight: 460; letter-spacing: -0.018em; line-height: 1.32; color: var(--text); text-wrap: balance; }

.art-table { margin: clamp(34px, 4vw, 52px) 0; }
.art-table figcaption { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); margin-bottom: 14px; }
.art-table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.art-table table { width: 100%; border-collapse: collapse; min-width: 480px; }
.art-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); font-weight: 500; padding: 14px 18px; border-bottom: 1px solid var(--border-strong); background: var(--surface); }
.art-table th:not(:first-child) { color: var(--orange); }
.art-table td { font-size: 14.5px; color: var(--text-dim); line-height: 1.5; padding: 15px 18px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
.art-table td:first-child { border-left: none; }
.art-table-rh { color: var(--text) !important; font-weight: 500; }
.art-table tr:last-child td { border-bottom: none; }

.art-framework { margin: clamp(34px, 4vw, 52px) 0; }
.art-framework figcaption { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); margin-bottom: 16px; }
.art-fw-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.art-fw-step { background: var(--bg); padding: clamp(18px, 2vw, 24px); position: relative; }
.art-fw-n { font-size: 11px; color: var(--orange); letter-spacing: .08em; }
.art-fw-arrow { position: absolute; top: 50%; right: -1px; transform: translate(50%,-50%); z-index: 2; color: var(--orange); font-size: 14px; background: var(--bg); padding: 2px; }
.art-fw-t { font-size: 16px; font-weight: 560; letter-spacing: -0.015em; margin: 10px 0 6px; }
.art-fw-d { font-size: 13px; color: var(--text-dim); line-height: 1.45; }
@media (max-width: 720px) { .art-fw-track { grid-template-columns: 1fr 1fr; } .art-fw-arrow { display: none; } }

.art-cta { margin: clamp(34px, 4vw, 52px) 0; padding: clamp(26px, 3vw, 38px); border: 1px solid var(--orange); border-radius: var(--radius); background: var(--orange-soft); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.art-cta-t { font-size: clamp(18px, 1.9vw, 23px); font-weight: 500; letter-spacing: -0.018em; line-height: 1.3; color: var(--text); text-wrap: balance; }

.art-asset { margin: clamp(40px, 5vw, 64px) 0 0; padding: clamp(24px, 3vw, 32px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.art-asset-k { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--orange); display: block; margin-bottom: 16px; }
.art-asset-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.art-asset-t { font-size: clamp(17px, 1.7vw, 20px); font-weight: 560; letter-spacing: -0.015em; }
.art-asset-d { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-top: 6px; max-width: 48ch; }

.art-authornote { display: flex; gap: 16px; align-items: flex-start; margin-top: clamp(36px, 4vw, 52px); padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid var(--border); }
.art-authornote .art-author-mark { width: 44px; height: 44px; }
.art-authornote p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }
.art-authornote strong { color: var(--text); font-weight: 560; }

/* conversión */
.art-convert { position: relative; padding-top: clamp(60px, 7vw, 100px); padding-bottom: clamp(60px, 7vw, 100px); overflow: hidden; }
.art-convert > *:not(.closing-objects) { position: relative; z-index: 1; }
.art-convert-sub { font-size: clamp(16px, 1.5vw, 19px); color: var(--text-dim); line-height: 1.55; max-width: 48ch; margin-top: 16px; }

/* related */
.art-related { padding-top: clamp(50px, 6vw, 84px); padding-bottom: clamp(20px, 3vw, 36px); }
.art-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 22px; }
.art-related-card { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: clamp(24px, 2.6vw, 32px); background: var(--bg); width: 100%; text-align: left; min-height: 200px; transition: background .35s; }
.art-related-card:hover { background: var(--surface); }
.art-related-cat { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); }
.art-related-t { font-size: clamp(17px, 1.8vw, 21px); font-weight: 520; letter-spacing: -0.018em; line-height: 1.15; }
.art-related-foot { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: auto; padding-top: 14px; font-size: 11px; letter-spacing: .06em; color: var(--text-faint); }
.art-related-go { color: var(--orange); text-transform: uppercase; letter-spacing: .1em; transition: transform .3s var(--ease); }
.art-related-card:hover .art-related-go { transform: translateX(4px); }
@media (max-width: 820px) { .art-related-grid { grid-template-columns: 1fr; } }

/* pager */
.art-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0 !important; margin-bottom: clamp(40px, 5vw, 70px); }
.art-pager-btn { display: flex; flex-direction: column; gap: 10px; padding: clamp(28px, 3vw, 40px) clamp(20px, 2vw, 28px); background: var(--bg); transition: background .35s; }
.art-pager-prev { text-align: left; align-items: flex-start; }
.art-pager-next { text-align: right; align-items: flex-end; }
.art-pager-btn:hover { background: var(--surface); }
.art-pager-dir { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--orange); }
.art-pager-title { font-size: clamp(16px, 1.7vw, 21px); font-weight: 520; letter-spacing: -0.018em; line-height: 1.2; max-width: 28ch; }
@media (max-width: 640px) { .art-pager { grid-template-columns: 1fr; } .art-pager-next { text-align: left; align-items: flex-start; } }

/* preguntas y respuestas */
.art-faq { padding-top: clamp(50px, 6vw, 90px); padding-bottom: clamp(20px, 3vw, 40px); }
.art-faq-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.art-faq-aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
.art-faq-title { font-size: clamp(24px, 2.8vw, 38px); font-weight: 500; letter-spacing: -0.028em; line-height: 1.08; text-wrap: balance; }
.art-faq-body { min-width: 0; }
.art-faq .faq { margin-top: 0; }
.art-faq .faq-a { transition: max-height .5s var(--ease); }
.art-faq .faq-item.open .faq-a { max-height: 420px; }
@media (max-width: 820px) {
  .art-faq-grid { grid-template-columns: 1fr; gap: 26px; }
  .art-faq-aside { position: relative; top: 0; }
}

/* ============================================================
   BANDA DE STACK — las piezas del ecosistema dentro del Cuaderno
   ============================================================ */
.rc-stack { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(20px, 3vw, 40px); }
.rc-stack-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.4vw, 16px); }
.rc-stack-tool {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left;
  padding: clamp(18px, 1.8vw, 24px); min-height: 150px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rc-stack-tool:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: 0 22px 48px -30px rgba(0,0,0,.65); }
.rc-stack-tool-head { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.rc-stack-tool-code { font-size: 10px; letter-spacing: .14em; color: var(--orange); }
.rc-stack-tool-go { font-size: 13px; color: var(--text-faint); transition: color .3s, transform .3s var(--ease); }
.rc-stack-tool:hover .rc-stack-tool-go { color: var(--orange); transform: translate(3px, -3px); }
.rc-stack-tool-name { font-size: clamp(15px, 1.6vw, 18px); font-weight: 560; letter-spacing: -0.015em; line-height: 1.12; margin-top: auto; }
.rc-stack-tool-role { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.rc-stack-foot { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 900px) { .rc-stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rc-stack-grid { grid-template-columns: 1fr; } .rc-stack-tool { min-height: 0; } }

/* ---------- about.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Sobre nosotros · sistema editorial
   Reutiliza chapter/ledger/moves/contrast; añade momentos propios.
   ============================================================ */

/* hero reutiliza .rc-masthead; ligero ajuste de respiración */
.ab-hero { padding-bottom: clamp(36px, 5vw, 72px); }

/* ============================================================
   PROPÓSITO — statement a margen
   ============================================================ */
.ab-purpose { display: grid; grid-template-columns: 132px 1fr; gap: 0; padding: clamp(60px, 7vw, 112px) 0; align-items: start; }
.ab-purpose-mark { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); padding-top: 20px; }
.ab-purpose-text { font-size: clamp(28px, 4.4vw, 60px); font-weight: 460; letter-spacing: -0.035em; line-height: 1.08; max-width: 20ch; text-wrap: balance; }
@media (max-width: 860px) { .ab-purpose { grid-template-columns: 1fr; gap: 16px; } }

/* ============================================================
   MISIÓN / VISIÓN + posicionamiento
   ============================================================ */
.ab-mvv { padding: clamp(60px, 7vw, 112px) 0; }
.ab-mvv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--text); }
.ab-mvv-block { padding: clamp(30px, 3.4vw, 48px) clamp(24px, 3vw, 48px) clamp(30px, 3.4vw, 48px) 0; }
.ab-mvv-block + .ab-mvv-block { border-left: 1px solid var(--border); padding-left: clamp(28px, 3.4vw, 56px); }
.ab-mvv-k { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); margin-bottom: 22px; }
.ab-mvv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.ab-mvv-text { font-size: clamp(19px, 2vw, 27px); font-weight: 440; letter-spacing: -0.02em; line-height: 1.32; color: var(--text); text-wrap: pretty; }
.ab-mvv-text strong { font-weight: 580; color: var(--text); }
.ab-position { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--border); font-size: clamp(18px, 1.9vw, 25px); font-weight: 440; letter-spacing: -0.015em; line-height: 1.42; color: var(--text-dim); max-width: 56ch; text-wrap: pretty; }
.ab-position strong { color: var(--text); font-weight: 560; }
@media (max-width: 760px) {
  .ab-mvv-grid { grid-template-columns: 1fr; }
  .ab-mvv-block + .ab-mvv-block { border-left: none; border-top: 1px solid var(--border); padding-left: 0; }
}

/* ============================================================
   MANIFIESTO — momento editorial fuerte (panel gris)
   ============================================================ */
.ab-manifesto { padding: clamp(72px, 9vw, 140px) 0; }
.ab-manifesto-head { display: grid; grid-template-columns: 132px 1fr; gap: 0; align-items: start; margin-bottom: clamp(36px, 4vw, 56px); }
.ab-manifesto-title { font-size: clamp(26px, 3.4vw, 46px); font-weight: 480; letter-spacing: -0.03em; line-height: 1.04; max-width: 16ch; text-wrap: balance; }
.ab-manifesto-list { border-top: 1px solid var(--text); }
.ab-manifesto-list li { display: grid; grid-template-columns: 56px 1fr; gap: clamp(16px, 3vw, 40px); align-items: baseline; padding: clamp(22px, 2.8vw, 36px) 0; border-bottom: 1px solid var(--border); transition: background .4s var(--ease), padding-left .35s var(--ease); position: relative; }
.ab-manifesto-list li::before { content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--orange); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.ab-manifesto-list li:hover::before { transform: scaleY(1); }
.ab-manifesto-list li:hover { padding-left: 12px; }
.ab-mf-n { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .08em; color: var(--orange); }
.ab-mf-line { font-size: clamp(20px, 2.5vw, 33px); font-weight: 460; letter-spacing: -0.025em; line-height: 1.18; text-wrap: balance; }
.ab-mf-a { color: var(--text-faint); }
.ab-mf-b { color: var(--text); font-weight: 540; }
@media (max-width: 860px) {
  .ab-manifesto-head { grid-template-columns: 1fr; gap: 18px; }
  .ab-manifesto-list li { grid-template-columns: 40px 1fr; gap: 14px; }
}

/* ============================================================
   POR QUÉ CARTON — diferenciación
   ============================================================ */
.ab-diff { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--text); }
.ab-diff-row { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: clamp(18px, 2.3vw, 28px) 0; border-bottom: 1px solid var(--border); }
.ab-diff-mark { width: 10px; height: 10px; border: 1.5px solid var(--orange); border-radius: 2px; margin-top: 0.5em; flex-shrink: 0; position: relative; }
.ab-diff-mark::after { content: ''; position: absolute; inset: 2px; background: var(--orange-soft); }
.ab-diff-text { font-size: clamp(17px, 1.9vw, 23px); font-weight: 460; letter-spacing: -0.018em; line-height: 1.32; color: var(--text); text-wrap: pretty; }

/* ============================================================
   FIGURA — ilustración kraft "sistema de módulos"
   ============================================================ */
.ab-figure { margin-top: clamp(44px, 5vw, 68px); border-top: 1px solid var(--text); }
.ab-figure img { display: block; width: 100%; max-width: 540px; height: auto; margin: clamp(28px, 3.5vw, 48px) auto clamp(20px, 2.5vw, 32px); }
.ab-figure figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }

/* ---------- legal.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Páginas legales
   Lenguaje editorial: TOC fija + secciones numeradas, sobrio.
   ============================================================ */

.lg-crumb { padding-bottom: 0; }

/* cabecera */
.lg-hero { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(30px, 4vw, 52px); max-width: 900px; border-bottom: 1px solid var(--border); }
.lg-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); padding: 7px 13px; border: 1px solid var(--border); border-radius: 100px; margin-bottom: 24px; }
.lg-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.lg-title { font-size: clamp(34px, 5vw, 64px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.0; text-wrap: balance; }
.lg-intro { font-size: clamp(17px, 1.7vw, 21px); color: var(--text-dim); line-height: 1.5; margin-top: 22px; max-width: 56ch; text-wrap: pretty; }
.lg-updated { display: inline-block; margin-top: 22px; font-size: 11px; letter-spacing: .08em; color: var(--text-faint); }

/* shell */
.lg-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(50px, 6vw, 90px); }
.lg-toc-col { position: relative; }
.lg-toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; }
.lg-toc-h { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--text-faint); }
.lg-toc-docs { display: flex; flex-direction: column; gap: 2px; }
.lg-toc-docs button { display: block; width: 100%; text-align: left; padding: 9px 0; font-size: 14.5px; color: var(--text-dim); border-bottom: 1px solid var(--border); transition: color .25s, padding-left .25s var(--ease); }
.lg-toc-docs button:hover { color: var(--text); padding-left: 5px; }
.lg-toc-docs button.on { color: var(--orange); }
.lg-toc-prog { height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.lg-toc-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--brown), var(--orange)); transform-origin: 0 50%; transition: transform .15s linear; }
.lg-toc-list { display: flex; flex-direction: column; gap: 2px; }
.lg-toc-list button { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: baseline; width: 100%; text-align: left; padding: 7px 0; font-size: 12.5px; line-height: 1.3; color: var(--text-dim); border-top: 1px solid var(--border); transition: color .25s, padding-left .25s var(--ease); }
.lg-toc-list button span { font-size: 10px; color: var(--orange); }
.lg-toc-list button:hover { color: var(--text); padding-left: 4px; }
@media (max-width: 880px) {
  .lg-shell { grid-template-columns: 1fr; gap: 26px; }
  .lg-toc { position: relative; top: 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .lg-toc-list { display: none; }
}

/* cuerpo */
.lg-body { max-width: 70ch; }
.lg-section { margin-bottom: clamp(34px, 4vw, 52px); }
.lg-h2 { font-size: clamp(20px, 2.2vw, 28px); font-weight: 560; letter-spacing: -0.022em; line-height: 1.14; margin-bottom: 16px; display: flex; align-items: baseline; gap: 14px; scroll-margin-top: 90px; }
.lg-h2-n { font-size: 12px; color: var(--orange); flex-shrink: 0; }
.lg-p { font-size: clamp(15.5px, 1.45vw, 17px); line-height: 1.66; color: var(--text-dim); margin-bottom: 1em; }
.lg-p:last-child { margin-bottom: 0; }
.lg-list { margin: 18px 0 4px; display: flex; flex-direction: column; gap: 11px; }
.lg-list li { position: relative; padding-left: 24px; font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.55; color: var(--text-dim); }
.lg-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 9px; height: 2px; background: var(--orange); }

/* tabla (cookies) */
.lg-table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 20px 0 4px; }
.lg-table { width: 100%; border-collapse: collapse; min-width: 460px; }
.lg-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); font-weight: 500; padding: 13px 16px; border-bottom: 1px solid var(--border-strong); background: var(--surface); }
.lg-table td { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; padding: 13px 16px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
.lg-table td:first-child { border-left: none; }
.lg-table-rh { color: var(--text) !important; }
.lg-table tr:last-child td { border-bottom: none; }

/* nota de contacto */
.lg-note { display: flex; gap: 16px; align-items: flex-start; margin-top: clamp(36px, 4vw, 52px); padding-top: clamp(26px, 3vw, 34px); border-top: 1px solid var(--border); }
.lg-note-mark { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--brown-soft), var(--brown) 60%, var(--brown-deep)); flex-shrink: 0; }
.lg-note p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }
.lg-note strong { color: var(--text); font-weight: 560; }

/* enlaces legales en la barra inferior del footer */
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal button { font-size: inherit; letter-spacing: inherit; color: var(--text-faint); transition: color .25s; }
.footer-legal button:hover { color: var(--orange); }

/* ---------- contacto.css ---------- */
/* ============================================================
   CARTON AI FACTORY — Contacto · sistema visual
   Reutiliza rc-masthead / rc-band-head / faq / closing / .field.
   ============================================================ */

.ct-hero { padding-bottom: clamp(32px, 4vw, 60px); }

.ct-routes, .ct-form-wrap, .ct-topics, .ct-channels, .ct-faq {
  padding-top: clamp(58px, 7vw, 100px); padding-bottom: clamp(58px, 7vw, 100px);
}

/* ---------- Rutas de contacto ---------- */
.ct-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 20px); }
.ct-route {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%;
  text-align: left; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
  transition: transform .35s var(--ease), border-color .35s, background .35s; position: relative; overflow: hidden;
}
.ct-route::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--orange); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
}
.ct-route:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.ct-route.on { border-color: var(--orange); }
.ct-route.on::after, .ct-route:hover::after { transform: scaleY(1); }
.ct-route-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.ct-route-n { font-size: 12px; letter-spacing: .1em; color: var(--orange); }
.ct-route-tag { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border-strong); padding: 4px 9px; border-radius: 100px; }
.ct-route-t { font-size: clamp(19px, 2.1vw, 26px); font-weight: 540; letter-spacing: -0.02em; line-height: 1.12; }
.ct-route-d { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; max-width: 42ch; }
.ct-route-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); transition: gap .3s var(--ease), color .3s; }
.ct-route-go svg { width: 11px; height: 11px; }
.ct-route:hover .ct-route-go, .ct-route.on .ct-route-go { color: var(--orange); gap: 12px; }
@media (max-width: 720px) { .ct-route-grid { grid-template-columns: 1fr; } }

/* ---------- Formulario + expectativas (panel gris) ---------- */
.ct-form-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.ct-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--orange-deep); }
.ct-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.ct-form-title { font-size: clamp(24px, 3vw, 40px); font-weight: 480; letter-spacing: -0.03em; line-height: 1.06; margin: 16px 0 clamp(28px, 3vw, 40px); max-width: 18ch; text-wrap: balance; }

.ct-form { display: flex; flex-direction: column; gap: 20px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ct-form .field label { display: block; font-size: 12px; letter-spacing: .02em; color: var(--text-dim); margin-bottom: 9px; }
.ct-form .field input, .ct-form .field textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--radius);
  background: var(--board-raise); border: 1px solid var(--border-strong); color: var(--text);
  font-family: inherit; font-size: 15px; transition: border-color .25s, background .25s;
}
.ct-form .field input::placeholder, .ct-form .field textarea::placeholder { color: var(--text-faint); }
.ct-form .field input:focus, .ct-form .field textarea:focus { outline: none; border-color: var(--orange); background: #fbfaf5; }
.ct-form .field input.err, .ct-form .field textarea.err { border-color: var(--orange-deep); }
.field-err { color: var(--orange-deep); font-size: 11px; letter-spacing: .02em; margin-top: 6px; display: inline-block; }
.field-opt { color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }

.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chip { font-size: 12.5px; letter-spacing: -0.005em; color: var(--text-dim); border: 1px solid var(--border-strong); padding: 9px 15px; border-radius: 100px; background: transparent; transition: all .25s var(--ease); }
.ct-chip:hover { color: var(--text); border-color: var(--text-faint); }
.ct-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.ct-submit { margin-top: 6px; align-self: flex-start; }
@media (max-width: 600px) { .ct-row { grid-template-columns: 1fr; } }

/* aside: expectativas + meta */
.ct-aside { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 32px); position: sticky; top: 96px; }
.ct-aside-h { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--orange-deep); display: block; margin-bottom: 16px; }
.ct-expect { border-top: 1px solid var(--text); padding-top: 22px; }
.ct-expect-list { display: flex; flex-direction: column; gap: 14px; }
.ct-expect-list li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.5; color: var(--text-dim); }
.ct-expect-list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; border: 1.5px solid var(--orange); border-radius: 2px; }
.ct-meta { border-top: 1px solid var(--border); padding-top: 22px; display: flex; flex-direction: column; gap: 0; }
.ct-meta-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ct-meta-row:last-child { border-bottom: none; }
.ct-meta-row span { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); padding-top: 2px; }
.ct-meta-row b { font-weight: 540; color: var(--text); text-align: right; letter-spacing: -0.01em; }
@media (max-width: 860px) { .ct-form-grid { grid-template-columns: 1fr; } .ct-aside { position: relative; top: 0; } }

/* done */
.ct-done { border: 1px solid var(--orange); border-radius: var(--radius); padding: clamp(28px, 3.4vw, 44px); background: var(--orange-soft); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ct-done-mark { width: 42px; height: 42px; border-radius: 50%; background: var(--orange); color: #14100b; display: grid; place-items: center; }
.ct-done-mark svg { width: 16px; height: 16px; }
.ct-done-t { font-size: clamp(22px, 2.6vw, 32px); font-weight: 540; letter-spacing: -0.025em; }
.ct-done-d { font-size: clamp(15px, 1.5vw, 17px); color: var(--text-dim); line-height: 1.6; max-width: 52ch; }
.ct-done-d strong { color: var(--text); font-weight: 560; }

/* ---------- Qué podemos hablar ---------- */
.ct-topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--text); }
.ct-topic { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 36px) clamp(20px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--border); }
.ct-topic:nth-child(odd) { border-right: 1px solid var(--border); padding-right: clamp(24px, 3vw, 48px); }
.ct-topic-mark { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); margin-top: 0.5em; flex-shrink: 0; box-shadow: 0 0 0 4px var(--orange-soft); }
.ct-topic-t { font-size: clamp(16px, 1.7vw, 20px); font-weight: 480; letter-spacing: -0.015em; line-height: 1.32; color: var(--text); text-wrap: pretty; }
@media (max-width: 720px) { .ct-topic-grid { grid-template-columns: 1fr; } .ct-topic:nth-child(odd) { border-right: none; padding-right: 0; } }

/* ---------- Otras vías ---------- */
.ct-channel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ct-channel { display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 2.6vw, 32px); background: var(--bg); transition: background .3s; min-height: 110px; justify-content: center; }
.ct-channel:hover { background: var(--surface); }
.ct-channel-static:hover { background: var(--bg); cursor: default; }
.ct-channel-k { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); }
.ct-channel-v { font-size: clamp(15px, 1.6vw, 19px); font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.ct-channel:not(.ct-channel-static):hover .ct-channel-v { color: var(--orange); }
@media (max-width: 720px) { .ct-channel-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .ct-channel-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.ct-faq-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ct-faq-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.ct-faq-title { font-size: clamp(24px, 2.8vw, 38px); font-weight: 500; letter-spacing: -0.028em; line-height: 1.08; text-wrap: balance; }
.ct-faq-body { min-width: 0; }
.ct-faq .faq { margin-top: 0; }
@media (max-width: 820px) { .ct-faq-grid { grid-template-columns: 1fr; gap: 26px; } .ct-faq-aside { position: relative; top: 0; } }