/* =============================================================
   chrome.css — Site header & footer chrome styles
   Part of: cartonfactory-theme
   ============================================================= */

/* ------------------------------------------------------------- */
/* PLATFORM / INNER PAGE SECTION WRAPPER                          */
/* ------------------------------------------------------------- */

/* Sections on inner pages (plataforma, soluciones, sobre…) use a
   simpler rhythm than the home .chapter — full-bleed band + an
   inner constrained container. tone-raise (the cream board) is
   inherited from the home CSS and works on .plat-section too. */
.plat-section {
	padding-block: clamp(72px, 9vw, 132px);
}
.plat-section > .plat-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding-inline: clamp(20px, 5vw, 56px);
}

/* ------------------------------------------------------------- */
/* PAGE OVERFLOW GUARD                                            */
/* ------------------------------------------------------------- */

/* The full-bleed cream board panels use the
       box-shadow: 0 0 0 100vmax var(--board);
       clip-path:   inset(0 -100vmax);
   trick on .tone-raise. clip-path hides the box-shadow visually, but
   the browser still counts the unclipped shadow toward scroll-overflow,
   which gives the document a phantom horizontal scrollbar. Same hazard
   applies to the .obj-arc decoration that sits with right: -10vw.
   Clipping the document on the X axis is the canonical neutraliser. */
html, body {
  overflow-x: clip;
}

/* ------------------------------------------------------------- */
/* SITE HEADER                                                   */
/* ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(16px, 1.2vw, 22px) clamp(20px, 5vw, 56px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

/* ------------------------------------------------------------- */
/* LOGO + WORDMARK                                               */
/* ------------------------------------------------------------- */

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}

/* Fallback for any logo image that doesn't carry the .site-logo-mark class.
   The specific .site-logo-mark / --lg rules below override this. */
.site-logo > img:not([class]) {
  height: 28px;
  width: auto;
  display: block;
}

.site-wordmark {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* ------------------------------------------------------------- */
/* SITE NAV                                                      */
/* ------------------------------------------------------------- */

.site-nav {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  margin-inline-start: auto;
  flex-wrap: nowrap;
  align-items: center;
}

.site-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--text);
}

/* ------------------------------------------------------------- */
/* HEADER CTA BUTTON                                             */
/* ------------------------------------------------------------- */

.site-cta {
  margin-inline-start: clamp(8px, 1vw, 20px);
  flex-shrink: 0;
}

/* .btn base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: Archivo, system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
  border-radius: var(--radius, 3px);
}

/* .btn-primary */
.btn-primary {
  background: var(--text);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--accent);
  color: #14100b;
}

.btn-primary:hover .btn-arrow {
  transform: translate(2px, -2px);
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 0.25s var(--ease);
}

/* .btn-ghost */
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.btn-ghost:hover {
  border-color: var(--text);
  background: var(--raise, rgba(255, 255, 255, 0.04));
}

/* ------------------------------------------------------------- */
/* SITE FOOTER                                                   */
/* ------------------------------------------------------------- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: clamp(48px, 6vw, 96px) clamp(20px, 5vw, 56px);
}

.site-footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}

@media (max-width: 720px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
  }
}

.site-footer-tagline {
  margin: 12px 0 16px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
}

.site-footer-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-faint);
}

.site-footer-col h4 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  margin-bottom: 14px;
  font-weight: 400;
}

.site-footer-col a {
  display: block;
  color: var(--text-dim);
  text-decoration: none;
  padding: 4px 0;
  font-size: 14px;
  transition: color 0.25s var(--ease);
}

.site-footer-col a:hover {
  color: var(--text);
}

/* ------------------------------------------------------------- */
/* FOOTER BOTTOM / LEGAL ROW                                     */
/* ------------------------------------------------------------- */

.site-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-faint);
  flex-wrap: wrap;
  gap: 16px;
}

.site-legal {
  display: flex;
  align-items: center;
  gap: 0;
}

.site-legal a {
  color: var(--text-faint);
  text-decoration: none;
  margin-inline: 8px;
  transition: color 0.25s var(--ease);
  font-size: 12px;
}

.site-legal a:hover {
  color: var(--text-dim);
}

/* ------------------------------------------------------------- */
/* MOBILE: hide nav links on small viewports (v0.1)              */
/* Alpine mobile nav island to follow in a later round.         */
/* ------------------------------------------------------------- */

@media (max-width: 720px) {
  .site-nav {
    display: none;
  }

  .site-cta {
    display: none;
  }
}

/* ------------------------------------------------------------- */
/* Mono utility used in footer                                   */
/* ------------------------------------------------------------- */

.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ------------------------------------------------------------- */
/* SCROLL PROGRESS BAR                                           */
/* ------------------------------------------------------------- */

.scrollbar-prog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 100;
  background: var(--accent, #e29a56);
  transform-origin: 0 0;
  transform: scaleX(var(--sp, 0));
  pointer-events: none;
  /* Respect reduced motion — still show progress, just no transition */
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  .scrollbar-prog {
    /* Intentionally no transition here — we update --sp every rAF frame */
  }
}

/* ------------------------------------------------------------- */
/* TWEAKS PANEL (Alpine island)                                  */
/* ------------------------------------------------------------- */

/* x-cloak hides until Alpine initialises */
[x-cloak] {
  display: none !important;
}

.cf-tweaks {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Gear / settings toggle button */
.cf-tweaks-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius, 3px);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.cf-tweaks-toggle:hover,
.cf-tweaks-toggle[aria-expanded="true"] {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--text);
}

.cf-tweaks-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Panel */
.cf-tweaks-panel {
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius, 3px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  /* Alpine transition helpers */
  transform-origin: bottom right;
}

/* Panel enter/leave transitions */
.cf-tweaks-panel--enter,
.cf-tweaks-panel--leave {
  transition: opacity 0.15s var(--ease, ease), transform 0.15s var(--ease, ease);
}

.cf-tweaks-panel--enter-start,
.cf-tweaks-panel--leave-end {
  opacity: 0;
  transform: scale(0.95) translateY(4px);
}

.cf-tweaks-panel--enter-end,
.cf-tweaks-panel--leave-start {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cf-tweaks-panel--enter,
  .cf-tweaks-panel--leave {
    transition: none;
  }
}

/* Section grouping */
.cf-tweaks-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf-tweaks-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  font-weight: 400;
}

/* Radio buttons */
.cf-tweaks-radios {
  display: flex;
  gap: 4px;
}

.cf-tweaks-radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border-radius: var(--radius, 3px);
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
  user-select: none;
}

.cf-tweaks-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cf-tweaks-radio:has(input:checked) {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.cf-tweaks-radio:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.cf-tweaks-radio:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Accent swatches */
.cf-tweaks-swatches {
  display: flex;
  gap: 6px;
}

.cf-tweaks-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  flex-shrink: 0;
}

.cf-tweaks-swatch:hover {
  transform: scale(1.12);
}

.cf-tweaks-swatch.is-active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg);
}

.cf-tweaks-swatch:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- */
/* HOME TOOL-CARD GRID — make wp:columns of tool-cards align     */
/* ------------------------------------------------------------- */

.cf-tool-grid .wp-block-column {
  display: flex;
}

.cf-tool-grid .wp-block-column > * {
  width: 100%;
}

.cf-tool-grid .tool-card {
  display: flex;
  width: 100%;
  height: 100%;
}

.cf-tool-grid .tool-card-link {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Second row of tool-cards: visually slightly recessed */
.cf-tool-grid--row2 {
  margin-top: calc(-1 * var(--wp--preset--spacing--40, 24px));
}

/* ------------------------------------------------------------- */
/* SINGLE CASO — editorial chrome                                */
/* ------------------------------------------------------------- */

.caso-hero {
  padding-block-start: clamp(28px, 4vw, 52px);
}

.caso-title {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 640;
  font-size: clamp(36px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: var(--display-tight, -0.03em);
  max-width: 20ch;
  text-wrap: balance;
  margin-block: clamp(20px, 2vw, 32px) clamp(16px, 1.4vw, 24px);
}

.caso-lead {
  color: var(--text-dim);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
  max-width: 50ch;
  margin-bottom: clamp(40px, 5vw, 80px);
}

/* Meta stat-strip inside the hero */
.caso-meta-strip {
  margin-block: clamp(24px, 3vw, 40px);
}

/* Body content vertical rhythm */
.single-caso .wp-block-post-content > * + * {
  margin-block-start: clamp(24px, 2vw, 40px);
}

/* "Otros casos" section spacing */
.otros-casos-lead {
  margin-bottom: clamp(20px, 2vw, 32px);
}

/* ------------------------------------------------------------- */
/* MOBILE NAV                                                     */
/* ------------------------------------------------------------- */

.site-mobile-nav { display: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 719px) {
  .site-mobile-nav { display: inline-flex; margin-inline-start: auto; }
  .site-nav, .site-cta { display: none !important; }
}

.site-mobile-nav-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text);
  line-height: 0;
  transition: border-color .25s var(--ease);
}
.site-mobile-nav-toggle:hover, .site-mobile-nav-toggle:focus-visible {
  border-color: var(--text);
  outline: none;
}

.hamburger {
  display: inline-flex; flex-direction: column; gap: 4px;
  width: 18px; height: 14px; justify-content: center;
}
.hamburger > span {
  display: block; width: 100%; height: 1.5px; background: currentColor; border-radius: 1px;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.site-mobile-nav-toggle[aria-expanded="true"] .hamburger > span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.site-mobile-nav-toggle[aria-expanded="true"] .hamburger > span:nth-child(2) {
  opacity: 0;
}
.site-mobile-nav-toggle[aria-expanded="true"] .hamburger > span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.site-mobile-nav-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(86vw, 360px); height: 100dvh;
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  box-shadow: -20px 0 60px rgba(0,0,0,0.35);
  padding: clamp(80px, 12vh, 120px) clamp(28px, 6vw, 40px) clamp(28px, 6vw, 40px);
  z-index: 60;
  display: flex; flex-direction: column;
}
.site-mobile-nav-panel nav {
  display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 22px);
}
.site-mobile-nav-panel nav a {
  color: var(--text);
  font-family: Archivo, system-ui, sans-serif;
  font-size: clamp(22px, 4.6vw, 28px);
  font-weight: 540;
  letter-spacing: var(--display-tight);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.site-mobile-nav-panel nav a:hover { color: var(--accent); }
.site-mobile-nav-panel nav a.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(20px, 4vh, 32px);
  padding: 14px 22px;
  background: var(--text); color: var(--bg);
  border-radius: var(--radius);
  font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.01em;
  width: max-content;
}
.site-mobile-nav-panel nav a.btn-primary:hover { background: var(--accent); color: #14100b; }

html.cf-no-scroll, html.cf-no-scroll body { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .site-mobile-nav-panel, .hamburger > span { transition: none; }
}

/* ------------------------------------------------------------- */
/* SINGLE-HERRAMIENTA — tool page editorial chrome               */
/* ------------------------------------------------------------- */

.tool-title {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 640;
  font-size: clamp(40px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: var(--display-tight);
  max-width: 18ch;
  text-wrap: balance;
  margin-block: clamp(20px, 2vw, 32px) clamp(12px, 1vw, 20px);
}

.tool-role {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 24px;
}

.tool-lead {
  color: var(--text-dim);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
  max-width: 50ch;
  margin-bottom: clamp(40px, 5vw, 80px);
}

.single-herramienta .wp-block-post-content > * + * {
  margin-block-start: clamp(24px, 2vw, 40px);
}

/* ------------------------------------------------------------- */
/* ARTICLE (editorial) — single-articulo                         */
/* ------------------------------------------------------------- */

.articulo-title {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 640;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: var(--display-tight);
  max-width: 22ch;
  text-wrap: balance;
  margin-block: clamp(20px, 2vw, 32px) 8px;
}

.articulo-lead {
  color: var(--text-dim);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  max-width: 56ch;
  margin-block: clamp(20px, 2vw, 28px) clamp(36px, 4vw, 56px);
  font-style: italic;
}

.single-articulo .wp-block-post-content {
  max-width: 64ch;
  margin-inline: auto;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.7;
}

.single-articulo .wp-block-post-content > * + * { margin-block-start: clamp(20px, 1.8vw, 32px); }

.single-articulo .wp-block-post-content h2 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 540;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.15;
  margin-block-start: clamp(40px, 4vw, 64px);
}

.single-articulo .wp-block-post-content h3 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 540;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.2;
}

/* ------------------------------------------------------------- */
/* LEGAL PAGES — single-pagina-legal                             */
/* ------------------------------------------------------------- */

.legal-title {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 540;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  margin-block: clamp(20px, 2vw, 32px) clamp(20px, 2vw, 32px);
}

.single-pagina-legal .wp-block-post-content {
  max-width: 64ch;
  margin-inline: auto;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-dim);
}

.single-pagina-legal .wp-block-post-content > * + * { margin-block-start: 18px; }

.single-pagina-legal .wp-block-post-content h2 {
  color: var(--text);
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 540;
  font-size: clamp(20px, 1.8vw, 26px);
  margin-block-start: clamp(32px, 3.5vw, 48px);
}

/* ------------------------------------------------------------- */
/* ARCHIVES — list grids for CPT archives                          */
/* ------------------------------------------------------------- */
.archive-title {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 540;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.04;
  letter-spacing: var(--display-tight);
  max-width: 22ch;
  text-wrap: balance;
  margin-block-end: clamp(20px, 2vw, 32px);
}

.cf-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  list-style: none;
  padding: 0;
}

.archive-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.archive-card:hover { transform: translateY(-2px); border-color: var(--accent); }

.archive-card-title {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 540;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.18;
}
.archive-card-title a { color: var(--text); text-decoration: none; }
.archive-card-title a:hover { color: var(--accent); }

.archive-card-lead {
  color: var(--text-dim);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  margin: 0;
}

.archive-card-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-top: auto;
}
.archive-card-meta a { color: var(--accent); text-decoration: none; }

/* Pagination */
.wp-block-query-pagination {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  margin-block-start: clamp(32px, 4vw, 56px);
  padding-block-start: clamp(20px, 2vw, 32px);
  border-block-start: 1px solid var(--border);
}
.wp-block-query-pagination a { color: var(--text-dim); text-decoration: none; }
.wp-block-query-pagination a:hover { color: var(--text); }
.wp-block-query-pagination-numbers .current { color: var(--accent); }

/* ------------------------------------------------------------- */
/* PLATAFORMA PAGE — pillar paragraphs                           */
/* ------------------------------------------------------------- */

.platform-pillar {
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: 18px;
  margin-block: clamp(20px, 2vw, 28px);
  color: var(--text-dim);
}
.platform-pillar strong { color: var(--text); }

/* ------------------------------------------------------------- */
/* RECURSOS HUB — category grid helpers                          */
/* ------------------------------------------------------------- */

.cf-category-grid .wp-block-column { display: flex; }
.cf-category-grid .wp-block-column > * { width: 100%; }
.category-card-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-top: 8px;
  display: block;
}

/* ------------------------------------------------------------- */
/* CHAPTER + TONE-RAISE — sectioning rhythm                       */
/* ------------------------------------------------------------- */

/* Chapter wrappers add vertical rhythm to each section */
.chapter {
  padding-block: var(--sec-pad);
}

/* Even chapters become a full-bleed "board" (cream) panel that
   rewrites its local tokens — all descendants (text, borders, surfaces)
   automatically inherit the warm light palette via CSS variable cascade.
   Ported from design/css/artdirection.css lines 89-114. */
.tone-raise {
  position: relative;
  background: var(--board);
  color: #1c1913;
  /* full-bleed without affecting layout: 100vmax box-shadow extends the
     cream beyond the constrained container width */
  box-shadow: 0 0 0 100vmax var(--board);
  clip-path: inset(0 -100vmax);

  /* token flip — descendants render dark text on cream surface */
  --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;
}

/* Warm hairline that separates the board panel from the sapphire above */
.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: 0.5;
  pointer-events: none;
  z-index: 1;
}

/* ------------------------------------------------------------- */
/* LOGO SIZING — header (compact) + footer (large)                */
/* ------------------------------------------------------------- */

/* Use specificity .site-logo img.site-logo-mark to beat the fallback above
   (0,2,1 > 0,1,1). Aspect-ratio preserved via height:auto. */
.site-logo img.site-logo-mark {
  display: block;
  width: auto;
  height: 40px;
  object-fit: contain;
}

.site-logo--footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-decoration: none;
}

.site-logo img.site-logo-mark--lg {
  width: auto;
  height: 100px;
  margin-bottom: 6px;
}

.site-footer-tagline {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
  margin: 4px 0 14px;
  max-width: 28ch;
}

.site-footer-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ------------------------------------------------------------- */
/* SCROLL-TEXT — kinetic word-by-word reveal                       */
/* ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .cf-kinetic-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
  }
  .cf-kinetic-word > span {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .6s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--cf-i, 0) * 45ms);
  }
  .is-revealed .cf-kinetic-word > span {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================================
   HOME chapter-grid system (ported from design/css/home.css)
   ============================================================ */

.chapter-grid {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
	max-width: var(--maxw);
	margin: 0 auto;
	padding-inline: clamp(20px, 5vw, 56px);
}
@media (max-width: 900px) {
	.chapter-grid { grid-template-columns: 1fr; gap: 24px }
}

.chapter-mark {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: sticky;
	top: clamp(80px, 12vh, 120px);
}
.chapter-no {
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 640;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--accent);
}
.chapter-label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--text-faint);
}

.chapter-body {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3vw, 44px);
}

.chapter-head--split {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: end;
}
@media (max-width: 720px) {
	.chapter-head--split { grid-template-columns: 1fr; gap: 24px }
}

.chapter-lead {
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 540;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.06;
	letter-spacing: var(--display-tight);
	color: var(--text);
	max-width: 22ch;
	text-wrap: balance;
	margin: 0;
}

.chapter-note {
	color: var(--text-dim);
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.55;
	max-width: 60ch;
	margin: 0;
}

.prose {
	color: var(--text-dim);
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.7;
	max-width: 64ch;
}
.prose p { margin-block: 0 18px }
.prose p:last-child { margin-bottom: 0 }
.prose strong { color: var(--text); font-weight: 540 }

.lead-xl {
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.45;
	color: var(--text);
	max-width: 60ch;
	margin: 0;
}

/* ledger-shift: 3-column ledger row (idx | antes | ahora)
   Canonical rule lives further down — kept here just as a placeholder
   for the modifier `.ledger-row--shift` alias used in some templates. */
.ledger-row.ledger-row--shift {
	grid-template-columns: 56px 1fr 1fr;
	gap: clamp(20px, 4vw, 56px);
	align-items: baseline;
}
.shift-was, .ledger-row--shift > :nth-child(2) {
	color: var(--text-faint);
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.5;
}
.shift-now, .ledger-row--shift > :nth-child(3) {
	color: var(--text);
	font-size: clamp(14px, 1.05vw, 17px);
	line-height: 1.5;
	font-weight: 500;
}

/* moves: 4 step process — number + heading + small kicker + body */
.moves {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--border);
}
.move {
	display: grid;
	grid-template-columns: 80px 1.4fr 2fr;
	gap: clamp(20px, 2.4vw, 36px);
	padding-block: clamp(18px, 2vw, 28px);
	border-bottom: 1px solid var(--border);
	align-items: baseline;
}
@media (max-width: 720px) {
	.move { grid-template-columns: 1fr; gap: 6px }
}
.move-no {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--accent);
	padding-top: 6px;
}
.move-h {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 540;
	font-size: clamp(18px, 1.6vw, 22px);
	color: var(--text);
}
.move-h small {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--text-faint);
}
.move-body {
	color: var(--text-dim);
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.6;
}

/* results: 4-column grid of big figure + small caption */
.results {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
	padding-block: clamp(20px, 2vw, 32px);
}
@media (max-width: 720px) {
	.results { grid-template-columns: 1fr 1fr }
}
.result {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-block: 12px;
	border-top: 1px solid var(--border);
}
.result-fig {
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 640;
	font-size: clamp(36px, 4.5vw, 56px);
	line-height: 1;
	letter-spacing: var(--display-tight);
	color: var(--accent);
}
.result-cap {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-dim);
	line-height: 1.4;
	max-width: 28ch;
}

/* =====================================================================
   PARITY OVERRIDES — match design/css/redesign.css exactly
   ===================================================================== */

/* ---- ACT buttons — the real CTA style (NOT pill .btn) ---- */
.act {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--text); padding: 14px 0; background: transparent;
	border: 0; border-bottom: 1px solid var(--text);
	text-decoration: none; cursor: pointer;
	transition: gap .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.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(--accent); border-color: var(--accent); }
.act svg { width: 13px; height: 13px; }
.closing-actions {
	display: flex; flex-wrap: wrap; gap: 28px;
	margin-top: clamp(32px, 4vw, 52px); align-items: center;
}

/* ---- CHAPTER-GRID — 132px sticky mark + body, rotated vertical label ---- */
.chapter-grid {
	grid-template-columns: 132px 1fr;
	gap: 0;
}
.chapter-mark {
	display: flex; flex-direction: column; gap: 10px;
	position: relative;
	top: auto;
}
.chapter-no {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13px; letter-spacing: 0.1em;
	color: var(--accent);
	font-weight: 400;
	line-height: 1;
	position: relative; z-index: 1;
}
/* Ghost numeral marks — ring below the index + halo orange dot beside it.
   Ported verbatim from design/css/artdirection.css 208-223. These are the
   tiny editorial cues that distinguish a "chapter mark" from a plain label. */
.chapter-mark::before {
	content: '';
	position: absolute;
	left: -8px; top: 34px;
	width: 64px; height: 64px;
	border: 1px solid var(--brown-soft);
	border-radius: 50%;
	opacity: 0.35;
	pointer-events: none;
}
.chapter-mark::after {
	content: '';
	position: absolute;
	left: 20px; top: 0;
	width: 7px; height: 7px;
	background: var(--accent);
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--accent-soft);
}
@media (max-width: 860px) {
	.chapter-mark::before,
	.chapter-mark::after { display: none; }
}
.chapter-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--text-faint);
	writing-mode: vertical-rl;
	margin-top: 8px; height: 120px;
}
.chapter-body { min-width: 0; }
.chapter-lead {
	/* Bumped vs design-cascade's clamp(24, 3.4vw, 44): the design's
	   chapter-lead reads larger in the original due to a heavier render;
	   match that perceived presence with a wider clamp + slightly more
	   weight so inner-page section titles don't look diminutive. */
	font-size: clamp(28px, 4vw, 56px); font-weight: 540;
	letter-spacing: -0.03em; line-height: 1.06;
	max-width: 24ch; text-wrap: balance;
	margin: 0;
}
.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 }
}

/* ---- PROSE / LEAD-XL ---- */
.prose { max-width: 60ch; }
.prose p { font-size: clamp(16px, 1.45vw, 19px); line-height: 1.66; color: var(--text-dim); margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.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;
	margin: 24px 0 0;
}

/* ---- LEDGER (real design) ---- */
.ledger {
	margin-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--text);
	display: flex; flex-direction: column;
}
.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);
	grid-template-columns: 56px minmax(0,1.1fr) minmax(0,1.4fr);
}
.ledger-row:hover { background: var(--raise); }
.ledger-row-label, .ledger-no {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px; letter-spacing: 0.1em; color: var(--text-faint);
	padding-top: 6px; text-transform: uppercase;
}
.ledger-row-content { display: contents; }
.ledger-row-title {
	font-size: clamp(19px, 2vw, 27px); font-weight: 520;
	letter-spacing: -0.02em; line-height: 1.1; color: var(--text);
	margin: 0;
}
.ledger-row-desc, .ledger-body {
	font-size: 15px; color: var(--text-dim); line-height: 1.62;
	max-width: 46ch; margin: 0;
}

/* Ledger variant: ledger-shift = antes/ahora */
.ledger-shift .ledger-row {
	grid-template-columns: 56px 1fr 1fr;
}
.ledger-shift .ledger-row .ledger-row-title {
	color: var(--text-faint); font-size: clamp(16px,1.7vw,21px);
	font-weight: 480; letter-spacing: -0.01em; line-height: 1.25;
	position: relative; padding-left: 22px;
}
.ledger-shift .ledger-row .ledger-row-title::before {
	content: ""; position: absolute; left: 0; top: 0.7em;
	width: 12px; height: 1px; background: var(--text-faint);
}
.ledger-shift .ledger-row .ledger-row-desc {
	color: var(--text); font-size: clamp(16px,1.7vw,21px); font-weight: 480;
	letter-spacing: -0.01em; line-height: 1.25;
	position: relative; padding-left: 22px;
	font-family: Archivo, system-ui, sans-serif; max-width: none;
}
.ledger-shift .ledger-row .ledger-row-desc::before {
	content: ""; position: absolute; left: 0; top: 0.58em;
	width: 8px; height: 8px; background: var(--accent);
}

/* ---- CONTRAST (real design) ---- */
.contrast {
	margin-top: clamp(36px, 4vw, 56px);
	display: grid; grid-template-columns: 1fr 1fr; gap: 0;
	border-top: 1px solid var(--text);
	padding: 0;
}
.contrast::before { display: none; }
.contrast-col {
	padding: clamp(24px, 2.8vw, 36px) clamp(20px, 2.4vw, 36px) clamp(24px, 2.8vw, 36px) 0;
	border-bottom: 1px solid var(--border);
}
.contrast-col + .contrast-col {
	border-left: 1px solid var(--border);
	padding-left: clamp(24px, 3vw, 48px);
}
.contrast-col-kicker, .contrast-tag {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--text-faint);
}
.contrast-col--pos .contrast-col-kicker { color: var(--accent); }
.contrast-col-title { margin-top: 8px; }
.contrast-col-bullets {
	margin-top: 18px; display: flex; flex-direction: column; gap: 14px;
	list-style: none; padding: 0;
}
.contrast-col-bullets 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); padding-left: 0; position: static;
}
.contrast-col--pos .contrast-col-bullets li { color: var(--text); }
.contrast-col-bullets li::before {
	content: "—"; color: var(--text-faint);
	background: transparent !important; width: auto; height: auto;
	top: auto; left: auto; position: static;
}
.contrast-col--pos .contrast-col-bullets li::before {
	content: ""; width: 7px; height: 7px;
	background: var(--accent) !important; margin-top: 0.5em;
}

/* ---- CLOSING (full-bleed cta with chapter-mark + huge title) ---- */
.conversion {
	padding: clamp(80px, 11vw, 168px) 0;
	border-top: 1px solid var(--border);
	background: transparent;
	overflow: visible;
}
.conversion.tone-raise {
	background: transparent; border-bottom: none;
}
.conversion-inner {
	display: grid; grid-template-columns: 132px 1fr; gap: 0;
	max-width: var(--maxw); margin: 0 auto;
	padding-inline: clamp(20px, 5vw, 56px);
	align-items: start;
}
@media (max-width: 860px) {
	.conversion-inner { grid-template-columns: 1fr; gap: 24px }
}
.conversion-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; color: var(--text);
	margin: 0 auto;
}
/* Centered conversion (conversion-cta-centered) — title and surrounding
   slots are centered within .container; asymmetric conversion-cta keeps
   the title left-aligned via the .conversion-body override below. */
.conversion > .container > .conversion-title {
	text-align: center;
}
.conversion-body > .conversion-title {
	margin: 0;
	text-align: left;
}

/* The .rc-objects disc + ring in the /recursos/ masthead inherit a
   deco-float translateY loop from design-cascade.css (.obj-disc /
   .obj-ring). The motion is distracting in this context — keep the
   shapes purely decorative-static here. */
.rc-objects .obj-disc,
.rc-objects .obj-ring {
	animation: none;
}

/* /recursos/ has two padding stacks — the .plat-section template
   wrapper (clamp 72/9vw/132 → ~129px) PLUS each rc-* block
   (clamp 60/7vw/104 → ~100px from design-cascade.css line 2287),
   so content-to-content gaps were ~470px. Keep the rc-* block's
   native padding (it matches the design's recursos.jsx rhythm) and
   zero the outer .plat-section padding ONLY on /recursos/ so other
   pages (industrias/soluciones/plataforma/casos) keep the wider
   .plat-section rhythm they were tuned for. */
.page-recursos > .plat-section,
.page-recursos > .wp-block-group.plat-section {
	padding-block: 0;
}
.page-recursos > .plat-section + .plat-section {
	margin-top: 0;
}
.conversion-lead {
	color: var(--text-dim); font-size: clamp(15px,1.4vw,18px);
	line-height: 1.55; max-width: 42ch; margin-top: 24px;
}
.conversion-cta-row {
	display: flex; flex-wrap: wrap; gap: 28px;
	margin-top: clamp(32px, 4vw, 52px); align-items: center;
}

/* ---- nav-cta (real header CTA — small mono, no fill, hover inverts) ---- */
.nav-cta {
	display: inline-flex;
	align-items: center;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: transparent;
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: 0;
	padding: 11px 16px;
	text-decoration: none;
	transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
	white-space: nowrap;
}
.nav-cta:hover {
	background: var(--accent);
	color: #14100b;
	border-color: var(--accent);
}

/* =====================================================================
   Canonical override (design/css/artdirection.css line 145-146)
   ALL the small mono index labels share the accent color.
   ===================================================================== */
.chapter-no,
.hm-idx,
.kicker-idx,
.move-no,
.ledger-no,
.ledger-row-label,
.ledger-stack-code,
.hm-toc-num {
	color: var(--accent) !important;
}

/* =====================================================================
   chapter-head--split + chapter-aside + chap-diagram
   (ported from design/css/artdirection.css 332-347)
   ===================================================================== */

.chapter-head--split {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
	gap: clamp(30px, 4vw, 64px);
	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;
	display: block;
}
@media (max-width: 860px) {
	.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; }
}

/* SVG text styles inside chap-diagram */
.chap-diagram .cd-cap {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	fill: var(--text-faint);
}
.chap-diagram .cd-lbl {
	font-family: Archivo, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 540;
	letter-spacing: -0.01em;
	fill: var(--text);
}
.chap-diagram .cd-tag {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	fill: #f4efe5;
}

/* =====================================================================
   ledger-row vertical accent line on hover
   (ported from design/css/artdirection.css lines 165-172)
   ===================================================================== */

.ledger,
.move,
.moves { position: relative; }

.ledger-row,
.move {
	position: relative;
}

.ledger-row::before,
.move::before {
	content: '';
	position: absolute;
	left: -2px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.4s var(--ease);
	pointer-events: none;
	z-index: 1;
}

.ledger-row:hover::before,
.move:hover::before {
	transform: scaleY(1);
}

.ledger-row:hover,
.move:hover {
	background: var(--raise);
}

/* Tighten the row padding a touch (the design renders denser than my port) */
.ledger-row {
	padding: clamp(18px, 2.2vw, 28px) 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.ledger-row::before,
	.move::before { transition: none; }
}

/* Seam-clean section transitions.
   .chapter is the <section> that carries the tone-raise box-shadow (cream
   board panel). Keeping padding-block on the <section> made the cream
   start *after* the prior sapphire section's padding-bottom — a dead
   strip of "wrong" color. By moving padding INSIDE .chapter-grid, the
   section's border-box collapses onto the content, so the colour flip
   happens immediately at the seam — cream meets sapphire flush. */
.chapter {
	padding-block: 0;
}
.chapter > .chapter-grid {
	padding-block: clamp(48px, 6vw, 92px);
}

/* On the home page (.chapter-grid lives directly inside an alignfull
   .chapter) the .chapter-grid is the container — it provides
   max-width + padding-inline + margin: auto. On inner pages the seed
   wraps the chapter block in .plat-inner, which already supplies that
   container. When both apply, the chapter-mark/title get pushed an
   extra ~56px to the right vs the design. Drop the chapter-grid's
   container behavior whenever it sits inside .plat-inner. */
.plat-inner .chapter-grid {
	max-width: none;
	padding-inline: 0;
	margin-inline: 0;
}

/* Cut the hm-lede bottom padding too — the next chapter has its own
   padding-top, so the lede should not double-pad. */
.hm-lede {
	padding-bottom: clamp(20px, 3vw, 40px) !important;
}

/* Ring labels in ControlDiagram use mixed case (Permisos / Trazas /
   Producción), unlike the LayerDiagram tags (IT / OT / Negocio) which
   are short uppercase codes. Override here. */
.chap-diagram .cd-tag-ring {
	text-transform: none;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.06em;
	fill: var(--text-dim);
}

/* =====================================================================
   STACK-DECK / STACK-CARD — section 05 sticky-stacking cards
   Ported verbatim from design/css/artdirection.css 414-447 +
   design/css/redesign.css 177-181 (ledger-stack-orq)
   ===================================================================== */

/* "Capa de orquestación Carton" label with accent square */
.ledger-stack-orq {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.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);
}

/* Deck of cards. Each card is sticky so they stack as the user scrolls. */
.stack-deck {
	margin-top: 38px;
	display: flex;
	flex-direction: column;
}

.stack-card {
	position: sticky;
	top: calc(98px + var(--i, 0) * 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(--accent) 42%, transparent),
		0 -1px 0 rgba(0, 0, 0, 0.4),
		0 38px 72px -40px rgba(0, 0, 0, 0.82);
	transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
	cursor: pointer;
	font-family: inherit;
	color: inherit;
}
.stack-card + .stack-card { margin-top: 26px; }
.stack-card:hover {
	border-color: var(--accent);
	box-shadow:
		inset 3px 0 0 var(--accent),
		0 -1px 0 rgba(0, 0, 0, 0.4),
		0 38px 72px -40px rgba(0, 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-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--accent);
}
.stack-card-name {
	font-family: Archivo, system-ui, sans-serif;
	font-size: clamp(17px, 1.9vw, 23px);
	font-weight: 580;
	letter-spacing: -0.02em;
	color: var(--text);
}
.stack-card-code {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.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;
}

/* Huge background watermark (the 3-letter code) */
.stack-card-watermark {
	position: absolute;
	right: 6px;
	bottom: -34px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: clamp(96px, 14vw, 200px);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 0.8;
	color: var(--text);
	opacity: 0.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-family: Archivo, system-ui, sans-serif;
	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;
	margin: 0;
}

.stack-card-role {
	font-size: 14.5px;
	color: var(--text-dim);
	line-height: 1.55;
	max-width: 46ch;
	margin: 0;
}

.stack-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 6px;
}

.stack-card-tag {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.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-family: Archivo, system-ui, sans-serif;
	font-size: clamp(30px, 3.6vw, 50px);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.9;
	color: var(--accent);
}
.stack-card-metric-l {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-faint);
	max-width: 18ch;
	line-height: 1.4;
}

.stack-card-go {
	position: relative;
	z-index: 1;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--text-faint);
	transition: color 0.3s, transform 0.3s var(--ease);
	align-self: flex-start;
}
.stack-card:hover .stack-card-go {
	color: var(--accent);
	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, 0) * 14px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.stack-card {
		position: static;
	}
	.stack-card + .stack-card { margin-top: 16px; }
	.cardviz-core { animation: none; }
}

/* ============================================================
   LEGAL PAGES (.single-pagina-legal)
   Ported verbatim from design/css/legal.css.
   ============================================================ */

.lg-hero { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(30px, 4vw, 52px); max-width: 900px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); 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; margin: 0; }
.lg-updated { display: inline-block; margin-top: 22px; font-size: 11px; letter-spacing: .08em; color: var(--text-faint); }
.lg-body { max-width: 70ch; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); padding-block: clamp(40px, 5vw, 64px); }
.lg-body h2 { font-size: clamp(20px, 2.2vw, 28px); font-weight: 560; letter-spacing: -0.022em; line-height: 1.14; margin-top: clamp(34px, 4vw, 52px); margin-bottom: 16px; scroll-margin-top: 90px; }
.lg-body p { font-size: clamp(15.5px, 1.45vw, 17px); line-height: 1.66; color: var(--text-dim); margin-bottom: 1em; }
.lg-body ul, .lg-body ol { margin: 18px 0 4px; display: flex; flex-direction: column; gap: 11px; padding-left: 0; list-style: none; }
.lg-body ul li, .lg-body ol li { position: relative; padding-left: 24px; font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.55; color: var(--text-dim); }
.lg-body ul li::before, .lg-body ol li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 9px; height: 2px; background: var(--orange); }
.lg-body table { width: 100%; border-collapse: collapse; min-width: 460px; border: 1px solid var(--border); border-radius: var(--radius); margin: 20px 0 4px; overflow: hidden; }
.lg-body 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-body td { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.lg-body tr:last-child td { border-bottom: none; }

/* ============================================================
   KICKER (global)
   Some blocks (tool-*, caso-*, etc.) emit kicker markup inline
   without using the cartonfactory/kicker block, so the block's
   own stylesheet isn't enqueued on those pages. Mirror the
   rules here so .kicker / .kicker-idx / .kicker-line /
   .kicker-glyph / .kicker-text always render correctly.
   ============================================================ */
.kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.kicker-idx { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--accent); letter-spacing: 0.1em; }
.kicker-line { width: 28px; height: 1px; background: var(--border-strong); display: block; flex-shrink: 0; }
.kicker-glyph { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; opacity: 0.9; }
.kicker-text { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-dim); }

/* ============================================================
   BLOCK HEAD (global)
   Several blocks (caso-*, tool-*, etc.) emit `.block-head.block-
   head-split` markup inline. The cartonfactory/block-head-split
   block's stylesheet is only enqueued when that block is rendered,
   so port the rules here so the layout works on every page.
   Verbatim from design/css/core.css lines 90-100.
   ============================================================ */
.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: -0.032em; line-height: 1.03; max-width: 20ch; text-wrap: balance; margin: 0; }
.block-lead { color: var(--text-dim); font-size: clamp(16px, 1.4vw, 19px); max-width: 44ch; line-height: 1.6; margin: 0; }
@media (max-width: 640px) {
	.block-head-split { grid-template-columns: 1fr; gap: clamp(16px, 4vw, 32px); align-items: start; }
	.block-title { max-width: none; }
}

/* ============================================================
   404 — Editorial "pieza no encontrada"
   Sigue el lenguaje del hero del home (dateline + thesis grid)
   pero a escala calmada. NO duplica el hero del home (eso es
   exactamente lo que un 404 NO debe parecer).
   ============================================================ */
.page-404-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 96px) clamp(20px, 5vw, 56px);
	color: var(--text);
}
.page-404-dateline {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-faint);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}
.page-404-dateline span:nth-child(2) { color: var(--orange); }
@media (max-width: 720px) {
	.page-404-dateline span:nth-child(3) { display: none; }
}
.page-404-thesis-wrap {
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: 0;
	margin-top: clamp(40px, 6vw, 72px);
	align-items: start;
}
.page-404-thesis-idx { padding-top: 14px; }
.page-404-idx {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--accent);
	text-transform: uppercase;
}
.page-404-thesis {
	font-family: Archivo, system-ui, sans-serif;
	font-size: clamp(32px, 4.5vw, 64px);
	font-weight: 480;
	letter-spacing: -0.035em;
	line-height: 1.02;
	max-width: 20ch;
	text-wrap: balance;
	margin: 0;
	color: var(--text);
}
.page-404-foot {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 0;
	margin-top: clamp(32px, 4vw, 56px);
	padding-top: 24px;
	border-top: 1px solid var(--border);
}
.page-404-foot::before { content: ""; }
.page-404-sub {
	grid-column: 2;
	color: var(--text-dim);
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.55;
	max-width: 48ch;
	margin: 0 0 24px;
}
.page-404-actions {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
@media (max-width: 720px) {
	.page-404-thesis-wrap { grid-template-columns: 1fr; gap: 16px; }
	.page-404-thesis-idx { padding-top: 0; }
	.page-404-foot { grid-template-columns: 1fr; }
	.page-404-foot::before { display: none; }
	.page-404-sub { grid-column: 1; }
	.page-404-actions { grid-column: 1; }
}