/* ═══════════════════════════════════════════════════════════════════════════
 * Criba landing — gramática Barragán compartida
 *
 * Single source of truth para: tokens, topbar context-aware, walls,
 * componentes reusables, keyframes, lead modal, a11y.
 *
 * Cada página linkea este archivo y agrega solo styles ESPECÍFICOS inline.
 *
 * Plan: docs/roadmap/plans/2026-05-landing-grammar-pages-hermanas.md (Fase 0)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── TOKENS ───────── */
:root {
  /* Legacy dark-mode (cohabita hasta que todas las páginas migren) */
  --ink: #0a0a0c;
  --bone: #e8e4dc;
  --stone-100: #d4d0c8;
  --stone-200: #b5b0a6;
  --stone-300: #8a8580;
  --stone-400: #847f73;
  --stone-500: #3a3630;
  --accent: #3b82f6;
  /* Paleta cálida Barragán (gramática v2) */
  --cream: #f1e5cf;
  --cream-deep: #e5d6bb;
  --rose: #dcb4a6;
  --bordeaux: #4a2520;
  --ink-warm: #2e1a17;
  /* Tipografías */
  --serif: 'EB Garamond', Georgia, serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --sans: 'IBM Plex Sans', -apple-system, sans-serif;
}

/* ───────── RESET + BASE ───────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Grain global */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); }
a { text-decoration: none; transition: color .3s; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .15s; } .reveal-d2 { transition-delay: .3s; } .reveal-d3 { transition-delay: .45s; }

/* ───────── A11Y ───────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: 8px; left: 8px; background: var(--accent); color: var(--ink); padding: 12px 18px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; transform: translateY(-150%); transition: transform .2s cubic-bezier(.2,.6,.2,1); z-index: 200; }
.skip-link:focus { transform: translateY(0); outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
:focus:not(:focus-visible) { outline: none; }
main:focus { outline: none; }

/* ───────── TOPBAR · context-aware ───────── */
/* data-wall-ctx en body define backdrop + color cuando topbar.scrolled */
/* Transición lenta (.7s curva exponencial) — el color del topbar fluye con el muro, no salta. */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; backdrop-filter: blur(0); background: transparent; border-bottom: 1px solid transparent; color: var(--ink-warm); transition: background .7s cubic-bezier(.2,.6,.2,1), border-color .7s cubic-bezier(.2,.6,.2,1), color .7s cubic-bezier(.2,.6,.2,1), backdrop-filter .7s cubic-bezier(.2,.6,.2,1); }
.topbar.scrolled { backdrop-filter: blur(14px); background: rgba(241,229,207,.86); border-bottom-color: rgba(46,26,23,.12); color: var(--ink-warm); }
body[data-wall-ctx="cream"] .topbar.scrolled { background: rgba(241,229,207,.86); border-bottom-color: rgba(46,26,23,.12); color: var(--ink-warm); }
body[data-wall-ctx="rose"] .topbar.scrolled { background: rgba(220,180,166,.86); border-bottom-color: rgba(46,26,23,.14); color: var(--ink-warm); }
body[data-wall-ctx="bordeaux"] .topbar.scrolled { background: rgba(74,37,32,.88); border-bottom-color: rgba(241,229,207,.10); color: var(--cream); }
/* Topbar antes de scrolled — también respeta contexto si el hero ya es bordeaux */
body[data-wall-ctx="bordeaux"] .topbar:not(.scrolled) { color: var(--cream); }

.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.topbar-logo { display: flex; align-items: center; gap: 12px; }
/* El <a> del wordmark recibe color default del navegador (azul); forzar currentColor para que herede del .topbar (ink-warm/cream según wall ctx). */
.topbar-logo a { color: currentColor; }
.topbar-logo .name { font-size: 22px; letter-spacing: .18em; font-weight: 500; color: currentColor; }
.topbar-logo .sep { width: 1px; height: 14px; background: currentColor; opacity: .28; }
.topbar-logo .sub { color: currentColor; opacity: .55; font-size: 10px; }

/* Mark del topbar.
 * La bar (rectángulo) es currentColor — sigue el color del topbar (ink-warm sobre cream/rose, cream sobre bordeaux).
 * La firma (dot azul) queda accent en todos los contextos — es la signature del brand, no cambia. */
.topbar-mark { display: block; flex-shrink: 0; width: 22px; height: 22px; color: currentColor; }
.topbar-mark .bar { fill: currentColor; transition: fill .7s cubic-bezier(.2,.6,.2,1); }
.topbar-mark .firma { fill: var(--accent); transform-origin: center; transform-box: fill-box; animation: firma-pulse 4.5s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes firma-pulse { 0%, 100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .topbar-mark .firma { animation: none; opacity: 1; transform: none; } }

.topbar nav { display: flex; align-items: center; gap: 32px; }
.topbar nav a { color: currentColor; opacity: .65; font-size: 10px; transition: opacity .3s; }
.topbar nav a:hover { opacity: 1; }
.cta-nav { padding: 8px 16px !important; border: 1px solid rgba(59,130,246,.6); background: rgba(59,130,246,.08); color: currentColor !important; opacity: 1 !important; transition: all .3s; }
.cta-nav:hover { background: rgba(59,130,246,.2); box-shadow: 0 0 20px rgba(59,130,246,.3); }

/* ───────── WALLS — primitivas de plano de color comprometido ───────── */
.wall-rose { background: var(--rose); color: var(--ink-warm); padding: 22vh 6vw; min-height: 100vh; position: relative; overflow: hidden; }
.wall-rose::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(255,230,200,.20) 0%, transparent 28%, transparent 70%, rgba(74,37,32,.10) 100%); }
.wall-rose .wrap { max-width: 1100px; position: relative; z-index: 2; padding: 0; }
.wall-rose-line { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(34px,5.4vw,82px); line-height: 1.08; margin-bottom: .55em; color: var(--ink-warm); max-width: 22ch; }
.wall-rose-line:last-child { margin-bottom: 0; }
.wall-rose-line .accent { color: var(--accent); font-style: normal; font-weight: 500; }
.wall-rose-line.problema { margin-bottom: 1.4em; max-width: 24ch; }
.wall-rose-line.problema::after { content: ''; display: block; width: 48px; height: 1px; background: rgba(46,26,23,.32); margin-top: .6em; }

.wall-bordeaux { background: var(--bordeaux); color: var(--cream); padding: 160px 0; position: relative; overflow: hidden; }
.wall-bordeaux::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(220,180,166,.10), transparent 60%); }
.wall-bordeaux .wrap { position: relative; z-index: 2; }

.wall-cream-cta { padding: 180px 0 160px; position: relative; overflow: hidden; background: var(--cream); color: var(--ink-warm); }
.wall-cream-cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 12% 6%, rgba(245,215,175,.28), transparent 55%); }
.wall-cream-cta .wrap { position: relative; z-index: 2; text-align: center; }
.wall-cream-cta h2 { font-family: var(--serif); font-size: clamp(44px,7vw,96px); font-weight: 500; font-style: italic; line-height: 1.06; color: var(--ink-warm); max-width: 1000px; margin: 0 auto 56px; text-align: center; }
.wall-cream-cta h2 .accent { color: var(--accent); font-style: normal; font-weight: 500; }

.wall-bordeaux-footer { padding: 80px 0 48px; background: var(--bordeaux); color: var(--cream); position: relative; overflow: hidden; }
.wall-bordeaux-footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(220,180,166,.08), transparent 60%); }
.wall-bordeaux-footer .wrap { position: relative; z-index: 2; }

/* Wall-cream catalog override block — para pages que tengan catálogo de status pills + line-chips + compare en cream */
.wall-cream-catalogo { background: var(--cream); color: var(--ink-warm); padding: 160px 0; position: relative; overflow: hidden; border-top: 1px solid rgba(74,37,32,.18); }
.wall-cream-catalogo::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 12% 6%, rgba(245,215,175,.25), transparent 55%); }
.wall-cream-catalogo .wrap { position: relative; z-index: 2; }

/* ───────── COMPONENTES REUSABLES ───────── */

/* Footer grammar */
.footer-grammar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid rgba(241,229,207,.14); }
.footer-brand-mark { display: inline-flex; align-items: center; gap: 11px; color: var(--cream); font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: .18em; text-decoration: none; }
.footer-brand-mark svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--cream); }
.footer-brand-mark svg .bar { fill: currentColor; }
.footer-brand-mark svg .firma { fill: var(--accent); transform-origin: center; transform-box: fill-box; animation: firma-pulse 4.5s cubic-bezier(.4,0,.6,1) infinite; }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a { color: rgba(241,229,207,.62); font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; transition: color .3s; }
.footer-links a:hover { color: var(--cream); }
.footer-bottom-grammar { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(241,229,207,.55); }
.footer-bottom-grammar .glyphs { display: inline-flex; align-items: flex-end; gap: 7px; cursor: default; }
.footer-bottom-grammar .glyph { height: 18px; width: auto; color: rgba(241,229,207,.7); }
.footer-bottom-grammar .glyph rect, .footer-bottom-grammar .glyph circle { fill: currentColor; }
@media (max-width: 720px) {
  .footer-grammar { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-bottom-grammar { flex-direction: column; gap: 16px; align-items: flex-start; }
}

/* CTA buttons — dark mode legacy default + filled accent + secondary */
.cta-btn { display: inline-flex; align-items: center; gap: 14px; padding: 18px 30px; background: transparent; color: var(--bone); border: 1px solid rgba(232,228,220,.4); font-family: var(--mono); font-size: 11px; letter-spacing: .2em; cursor: pointer; transition: all .4s cubic-bezier(.2,.6,.2,1); }
.cta-btn .arrow { display: inline-block; width: 24px; height: 1px; background: var(--bone); transition: all .3s; }
.cta-btn:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); box-shadow: 0 0 40px rgba(59,130,246,.5); }
.cta-btn:hover .arrow { background: var(--ink); transform: translateX(6px); }
.cta-btn-secondary { border-color: rgba(232,228,220,.18); color: var(--stone-200); padding: 18px 26px; }
.cta-btn-secondary .arrow { background: var(--stone-200); }
.cta-btn-secondary:hover { background: rgba(232,228,220,.05); color: var(--bone); border-color: rgba(232,228,220,.4); box-shadow: none; }
.cta-btn-secondary:hover .arrow { background: var(--bone); transform: translateX(6px); }
.cta-btn-filled { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.cta-btn-filled .arrow { background: var(--ink); }
.cta-btn-filled:hover { background: #4f8df5; color: var(--ink); border-color: #4f8df5; box-shadow: 0 0 32px rgba(59,130,246,.4); }
.cta-btn-filled:hover .arrow { background: var(--ink); }
/* Override en cream context — cta-btn-secondary lee en cream */
.wall-cream-cta .cta-btn-secondary,
.wall-cream-catalogo .cta-btn-secondary { border-color: rgba(46,26,23,.32); color: var(--ink-warm); }
.wall-cream-cta .cta-btn-secondary .arrow,
.wall-cream-catalogo .cta-btn-secondary .arrow { background: var(--ink-warm); }
.wall-cream-cta .cta-btn-secondary:hover,
.wall-cream-catalogo .cta-btn-secondary:hover { background: rgba(46,26,23,.05); border-color: rgba(46,26,23,.5); color: var(--ink-warm); }
.wall-cream-cta .cta-btn-secondary:hover .arrow,
.wall-cream-catalogo .cta-btn-secondary:hover .arrow { background: var(--ink-warm); }

/* CTA primary — placa bordeaux plana (Barragán: plano de color sólido, sin gradiente ni volumen) */
.obsidian-cta { display: inline-flex; align-items: center; gap: 14px; padding: 20px 32px; font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--cream); background: var(--bordeaux); border: 0; text-decoration: none; cursor: pointer; transition: background .4s cubic-bezier(.2,.6,.2,1), transform .4s cubic-bezier(.2,.6,.2,1); }
.obsidian-cta:hover { background: var(--ink-warm); transform: translateY(-1px); }
.obsidian-cta:active { transform: translateY(0); }
.obsidian-cta .arrow { display: inline-block; width: 14px; height: 1px; background: var(--cream); transition: transform .35s cubic-bezier(.2,.6,.2,1); }
.obsidian-cta:hover .arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .obsidian-cta:hover { transform: none; } }

/* Mark 7×7 con 3D extrusion + breathing + firma pulse + parallax wrap */
.cta-brandmark-wrap { display: inline-block; margin-bottom: 64px; transform: perspective(800px) rotateX(0) rotateY(0); transition: transform .6s cubic-bezier(.2,.6,.2,1); will-change: transform; }
.cta-brandmark { display: block; width: clamp(160px,16vw,220px); height: auto; filter: drop-shadow(0 8px 20px rgba(74,37,32,.22)); animation: mark-breathing 8s ease-in-out infinite; transform-origin: center; }
@keyframes mark-breathing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.014); } }
.cta-brandmark .firma-circle { transform-origin: center; transform-box: fill-box; animation: firma-pulse-cta 4.5s ease-in-out infinite; }
@keyframes firma-pulse-cta { 0%, 100% { opacity: .86; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .cta-brandmark { animation: none; }
  .cta-brandmark .firma-circle { animation: none; opacity: 1; transform: none; }
  .cta-brandmark-wrap { transform: none !important; }
}

/* CTA stack/row + trial + enterprise links */
.cta-stack { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.wall-cream-cta .cta-trial { font-family: var(--mono); font-size: 9px; color: rgba(46,26,23,.5); letter-spacing: .18em; text-transform: uppercase; }
.wall-cream-cta .cta-enterprise { font-family: var(--mono); color: rgba(46,26,23,.62); font-size: 10px; letter-spacing: .18em; margin-top: 12px; border-bottom: 1px solid rgba(46,26,23,.3); padding-bottom: 2px; text-transform: uppercase; }
.wall-cream-cta .cta-enterprise:hover { color: var(--ink-warm); border-bottom-color: var(--ink-warm); }
@media (max-width: 640px) {
  .cta-row { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-row .obsidian-cta, .cta-row .cta-btn { width: 100%; justify-content: space-between; padding: 18px 24px; }
}

/* Line chips (status por línea de crédito) */
.line-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.line-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(232,228,220,.1); background: rgba(232,228,220,.02); font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--stone-300); text-transform: uppercase; }
.line-chip .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.line-chip[data-state="done"] { border-color: rgba(52,211,153,.4); color: #34d399; background: rgba(52,211,153,.04); }
.line-chip[data-state="done"] .dot { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,.5); }
.line-chip[data-state="in-progress"] { border-color: rgba(251,191,36,.3); color: #e3a73a; }
.line-chip[data-state="in-progress"] .dot { background: #fbbf24; }
.line-chip[data-state="planned"] { border-color: rgba(232,228,220,.12); color: var(--stone-400); }
.line-chip[data-state="planned"] .dot { background: transparent; border: 1px solid var(--stone-400); }
.line-chip[data-state="spec"] { border-color: rgba(251,191,36,.3); color: #e3a73a; background: rgba(251,191,36,.04); }
.line-chip[data-state="spec"] .dot { background: #fbbf24; }
.line-chip[data-state="not-applicable"] { border-color: rgba(232,228,220,.08); color: var(--stone-400); opacity: .72; }
.line-chip[data-state="not-applicable"] .dot { background: transparent; border: 1px dashed var(--stone-400); }
/* Cream context overrides */
.wall-cream-catalogo .line-chip { border-color: rgba(46,26,23,.15); background: rgba(46,26,23,.03); color: rgba(46,26,23,.62); }
.wall-cream-catalogo .line-chip[data-state="done"] { border-color: rgba(29,138,92,.5); color: #1d8a5c; background: rgba(52,211,153,.08); }
.wall-cream-catalogo .line-chip[data-state="done"] .dot { background: #1d8a5c; box-shadow: 0 0 6px rgba(29,138,92,.4); }
.wall-cream-catalogo .line-chip[data-state="in-progress"] { border-color: rgba(156,94,31,.45); color: #9c5e1f; background: rgba(217,150,87,.06); }
.wall-cream-catalogo .line-chip[data-state="in-progress"] .dot { background: #c46a3c; }
.wall-cream-catalogo .line-chip[data-state="planned"] { border-color: rgba(46,26,23,.18); color: rgba(46,26,23,.5); }
.wall-cream-catalogo .line-chip[data-state="planned"] .dot { background: transparent; border-color: rgba(46,26,23,.5); }
.wall-cream-catalogo .line-chip[data-state="spec"] { border-color: rgba(156,94,31,.45); color: #9c5e1f; background: rgba(217,150,87,.06); }
.wall-cream-catalogo .line-chip[data-state="spec"] .dot { background: #c46a3c; }
.wall-cream-catalogo .line-chip[data-state="not-applicable"] { border-color: rgba(46,26,23,.12); color: rgba(46,26,23,.4); opacity: .78; }
.wall-cream-catalogo .line-chip[data-state="not-applicable"] .dot { background: transparent; border-color: rgba(46,26,23,.4); }

/* Compare table (manual vs Criba) */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(232,228,220,.08); margin-bottom: 48px; }
.compare-head { padding: 18px 24px; border-bottom: 1px solid rgba(232,228,220,.08); font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; background: rgba(232,228,220,.02); }
.compare-head.bad { color: #a48a82; }
.compare-head.good { color: #34d399; border-left: 1px solid rgba(232,228,220,.08); }
.compare-row { display: contents; }
.compare-cell { padding: 18px 24px; font-size: 14px; line-height: 1.6; color: var(--stone-200); border-bottom: 1px solid rgba(232,228,220,.06); }
.compare-cell.good { border-left: 1px solid rgba(232,228,220,.08); background: rgba(52,211,153,.015); }
.compare-row:last-child .compare-cell { border-bottom: none; }
/* Cream context overrides */
.wall-cream-catalogo .compare { border-color: rgba(46,26,23,.15); }
.wall-cream-catalogo .compare-head { border-bottom-color: rgba(46,26,23,.15); background: rgba(46,26,23,.04); }
.wall-cream-catalogo .compare-head.bad { color: #8b4f3d; }
.wall-cream-catalogo .compare-head.good { color: #1d8a5c; border-left-color: rgba(46,26,23,.15); }
.wall-cream-catalogo .compare-cell { color: rgba(46,26,23,.78); border-bottom-color: rgba(46,26,23,.1); }
.wall-cream-catalogo .compare-cell.good { border-left-color: rgba(46,26,23,.15); background: rgba(52,211,153,.05); }
.wall-cream-catalogo .compare-cell code { color: rgba(46,26,23,.72); background: rgba(46,26,23,.06); padding: 1px 6px; border-radius: 2px; font-size: 12.5px; }
@media (max-width: 900px) {
  .compare { grid-template-columns: 1fr; }
  .compare-head.good { border-left: none; border-top: 1px solid rgba(232,228,220,.08); }
  .compare-cell.good { border-left: none; border-top: 1px solid rgba(232,228,220,.06); }
}

/* Flow 6 steps (Agente de Expediente) */
.flow-6 { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid rgba(232,228,220,.1); border-left: 1px solid rgba(232,228,220,.1); margin-bottom: 32px; }
.flow-step { padding: 32px 28px; border-right: 1px solid rgba(232,228,220,.1); border-bottom: 1px solid rgba(232,228,220,.1); background: rgba(232,228,220,.02); display: flex; flex-direction: column; gap: 14px; min-height: 220px; }
.flow-num { font-family: var(--mono); font-size: 11px; letter-spacing: .25em; color: var(--accent); }
.flow-title { font-family: var(--serif); font-size: 26px; color: var(--bone); font-style: italic; line-height: 1.15; letter-spacing: .005em; }
.flow-desc { font-size: 13px; color: var(--stone-200); line-height: 1.65; flex: 1; }
.flow-footnote { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--stone-300); line-height: 1.65; max-width: 780px; margin-top: 0; }
/* Cream context overrides */
.wall-cream-catalogo .flow-6 { border-top-color: rgba(46,26,23,.15); border-left-color: rgba(46,26,23,.15); }
.wall-cream-catalogo .flow-step { border-right-color: rgba(46,26,23,.15); border-bottom-color: rgba(46,26,23,.15); background: rgba(46,26,23,.025); }
.wall-cream-catalogo .flow-num { color: rgba(46,26,23,.45); }
.wall-cream-catalogo .flow-title { color: var(--ink-warm); }
.wall-cream-catalogo .flow-desc { color: rgba(46,26,23,.7); }
.wall-cream-catalogo .flow-footnote { color: rgba(46,26,23,.65); }
@media (max-width: 900px) { .flow-6 { grid-template-columns: repeat(2,1fr); } }

/* Acto (agent card pattern — catálogo) */
.catalogo-head { max-width: 820px; margin-bottom: 64px; }
.catalogo-head h2 { font-size: clamp(32px,4.6vw,60px); font-style: italic; font-weight: 400; line-height: 1.15; color: var(--bone); margin-bottom: 20px; }
.catalogo-head .sub { font-size: 16px; color: var(--stone-200); line-height: 1.65; max-width: 640px; }
.acto { margin-top: 120px; padding-top: 80px; border-top: 1px solid rgba(232,228,220,.1); }
.acto:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.acto-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.acto-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .25em; color: var(--accent); display: flex; align-items: center; gap: 12px; text-transform: uppercase; }
.acto-eyebrow .line { width: 24px; height: 1px; background: var(--accent); }
.acto-status-pill { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 8px 16px; border: 1px solid; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; background: rgba(232,228,220,.02); }
.acto-status-pill .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.acto[data-status="done"] .acto-status-pill { border-color: rgba(52,211,153,.4); color: #34d399; background: rgba(52,211,153,.04); }
.acto[data-status="done"] .acto-status-pill .dot { background: #34d399; box-shadow: 0 0 10px rgba(52,211,153,.6); }
.acto[data-status="roadmap"] .acto-status-pill { border-color: rgba(232,228,220,.2); color: var(--stone-300); }
.acto[data-status="roadmap"] .acto-status-pill .dot { background: transparent; border: 1px solid var(--stone-300); }
.acto[data-status="spec"] .acto-status-pill { border-color: rgba(251,191,36,.4); color: #e3a73a; background: rgba(251,191,36,.04); }
.acto[data-status="spec"] .acto-status-pill .dot { background: #fbbf24; }
.acto-pitch { font-family: var(--serif); font-size: clamp(28px,3.6vw,46px); font-style: italic; font-weight: 400; line-height: 1.2; color: var(--bone); max-width: 780px; margin-bottom: 28px; }
.acto-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.acto-cta .cta-btn { padding: 18px 28px; }
/* Cream context overrides */
.wall-cream-catalogo .catalogo-head h2 { color: var(--ink-warm); }
.wall-cream-catalogo .catalogo-head .sub { color: rgba(46,26,23,.65); }
.wall-cream-catalogo .acto { border-top-color: rgba(74,37,32,.18); }
.wall-cream-catalogo .acto-pitch { color: var(--ink-warm); }
.wall-cream-catalogo .acto-status-pill { background: rgba(46,26,23,.04); }
.wall-cream-catalogo .acto[data-status="done"] .acto-status-pill { border-color: rgba(29,138,92,.5); color: #1d8a5c; background: rgba(52,211,153,.08); }
.wall-cream-catalogo .acto[data-status="done"] .acto-status-pill .dot { background: #1d8a5c; box-shadow: 0 0 8px rgba(29,138,92,.45); }
.wall-cream-catalogo .acto[data-status="roadmap"] .acto-status-pill { border-color: rgba(46,26,23,.25); color: rgba(46,26,23,.62); }
.wall-cream-catalogo .acto[data-status="roadmap"] .acto-status-pill .dot { background: transparent; border-color: rgba(46,26,23,.5); }
.wall-cream-catalogo .acto[data-status="spec"] .acto-status-pill { border-color: rgba(156,94,31,.5); color: #9c5e1f; background: rgba(217,150,87,.08); }
.wall-cream-catalogo .acto[data-status="spec"] .acto-status-pill .dot { background: #c46a3c; }
.wall-cream-catalogo .acto--teaser .acto-pitch { margin-bottom: 28px; max-width: 680px; }
.wall-cream-catalogo .acto--teaser .line-chips { margin-bottom: 28px; }
@media (max-width: 900px) {
  .acto { margin-top: 80px; padding-top: 60px; }
  .acto-cta { flex-direction: column; align-items: stretch; }
  .acto-cta .cta-btn { width: 100%; justify-content: space-between; }
}

/* Pipeline label */
.pipeline { margin-bottom: 48px; }
.pipeline-label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--stone-300); text-transform: uppercase; margin-bottom: 20px; }
.wall-cream-catalogo .pipeline-label { color: rgba(46,26,23,.6); }

/* Metric block */
.metric { padding: 24px 28px; border-left: 3px solid var(--accent); background: rgba(59,130,246,.04); margin-bottom: 32px; }
.metric-label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; }
.metric-text { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--bone); max-width: 760px; }
.metric-text strong { font-style: normal; color: var(--bone); font-weight: 500; }
.acto[data-status="roadmap"] .metric { border-left-color: var(--stone-300); background: rgba(232,228,220,.025); }
.acto[data-status="roadmap"] .metric-label { color: var(--stone-300); }
.acto[data-status="spec"] .metric { border-left-color: #fbbf24; background: rgba(251,191,36,.04); }
.acto[data-status="spec"] .metric-label { color: #e3a73a; }
/* Cream context */
.wall-cream-catalogo .metric { background: rgba(59,130,246,.07); border-left-color: var(--accent); }
.wall-cream-catalogo .metric-text { color: var(--ink-warm); }
.wall-cream-catalogo .metric-text strong { color: var(--ink-warm); }

/* Evidence scanline keyframe (used by wall-bordeaux evidence pattern) */
@keyframes evidence-scanline { 0% { top: -2px; opacity: 0; } 8% { opacity: .55; } 92% { opacity: .55; } 100% { top: calc(100% + 2px); opacity: 0; } }

/* ───────── LEAD MODAL — paleta cálida Barragán ───────── */
.lead-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(46,26,23,.55); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.lead-overlay.open { display: flex; opacity: 1; }
.lead-modal { position: relative; width: 90%; max-width: 440px; background: var(--cream); border: 1px solid rgba(74,37,32,.18); padding: 56px 48px; box-shadow: 0 24px 60px rgba(46,26,23,.28); animation: modalIn .4s cubic-bezier(.2,.6,.2,1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.lead-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: rgba(46,26,23,.5); font-size: 20px; cursor: pointer; padding: 4px 8px; transition: color .3s; }
.lead-close:hover { color: var(--ink-warm); }
.lead-modal .modal-eyebrow { color: var(--accent); font-size: 10px; letter-spacing: .2em; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }
.lead-modal .modal-eyebrow .line { width: 20px; height: 1px; background: var(--accent); }
.lead-modal h3 { font-size: 28px; font-weight: 500; color: var(--ink-warm); margin-bottom: 12px; line-height: 1.2; }
.lead-modal .modal-desc { font-size: 14px; color: rgba(46,26,23,.7); line-height: 1.6; margin-bottom: 32px; }
.lead-modal input { width: 100%; padding: 14px 16px; margin-bottom: 10px; background: rgba(46,26,23,.04); border: 1px solid rgba(46,26,23,.15); color: var(--ink-warm); font-family: var(--sans); font-size: 13px; outline: none; transition: border-color .3s; }
.lead-modal input::placeholder { color: rgba(46,26,23,.4); }
.lead-modal input:focus { border-color: rgba(59,130,246,.5); }
.lead-modal button[type=submit] { width: 100%; padding: 16px; background: var(--bordeaux); color: var(--cream); border: 1px solid var(--bordeaux); font-family: var(--mono); font-size: 11px; letter-spacing: .2em; cursor: pointer; transition: all .4s; margin-top: 6px; }
.lead-modal button[type=submit]:hover { background: var(--ink-warm); border-color: var(--ink-warm); box-shadow: 0 10px 28px rgba(46,26,23,.28); }
.lead-modal .modal-note { text-align: center; margin-top: 20px; font-size: 9px; color: rgba(46,26,23,.45); }
.lead-modal .modal-error { margin-top: 14px; padding: 12px 14px; background: rgba(156,94,31,.08); border: 1px solid rgba(156,94,31,.35); color: #9c5e1f; font-family: var(--mono); font-size: 11px; line-height: 1.5; display: none; }
.lead-modal .modal-error.show { display: block; }
.lead-modal .modal-error a { color: #9c5e1f; border-bottom: 1px solid rgba(156,94,31,.4); }
.lead-modal button[type=submit][disabled] { opacity: .5; cursor: wait; }