/* ===================================================
   antonioherrera.tech — plantilla de Guías (se carga además de styles.css)
   1) Plantilla: cabecera de guía, índice lateral, barra móvil, paginación
   2) .gc = contenido de la guía: tokens claros para los componentes heredados
   3) Componentes heredados (al final, generados desde las guías originales)
   =================================================== */

/* ---- Paleta semántica de capas/fases (sirve sobre claro y como relleno) ---- */
:root {
  --c-amber: #d97706;  --c-amber-text: #b45309;
  --c-blue:  #2563eb;  --c-blue-text:  #1d4ed8;
  --c-cyan:  #06b6d4;  --c-cyan-text:  #0e7490;
  --c-teal:  #10b981;  --c-teal-text:  #047857;
  --c-red:   #ef4444;  --c-red-text:   #b91c1c;
  --c-green: #22c55e;  --c-green-text: #15803d;
  --c-ink:   #334155;  --c-ink-text:   #334155;
  --c-purple: #a855f7; --c-purple-text: #7e22ce;
}
[data-color="amber"] { --c: var(--c-amber); --c-text: var(--c-amber-text); }
[data-color="blue"]  { --c: var(--c-blue);  --c-text: var(--c-blue-text); }
[data-color="cyan"]  { --c: var(--c-cyan);  --c-text: var(--c-cyan-text); }
[data-color="teal"]  { --c: var(--c-teal);  --c-text: var(--c-teal-text); }
[data-color="red"]   { --c: var(--c-red);   --c-text: var(--c-red-text); }
[data-color="green"] { --c: var(--c-green); --c-text: var(--c-green-text); }
[data-color="ink"]   { --c: var(--c-ink);   --c-text: var(--c-ink-text); }
[data-color="purple"] { --c: var(--c-purple); --c-text: var(--c-purple-text); }

/* ---- Cabecera de la guía/sección ---- */
.guide-head { padding: 40px 0 46px; }
.guide-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; padding: 5px 12px 5px 6px; border-radius: 999px;
  color: #e8edf5; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
}
.guide-pill b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 7px; background: var(--c); color: #fff; font: 700 12px var(--font-head); }
.guide-head h1 { font-size: clamp(34px, 4.8vw, 58px); letter-spacing: -.035em; line-height: 1.05; margin: 18px 0 12px; max-width: 900px; }
.guide-head .lead { max-width: 760px; margin: 0; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font-size: 14px; color: var(--subtle); }
.guide-meta strong { color: var(--text); font-weight: 600; }
.guide-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.guide-tools .btn { padding: 9px 16px; font-size: 14px; }
.guide-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.guide-stats div { padding: 12px 18px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.guide-stats b { display: block; font: 700 26px/1 var(--font-head); color: #fff; }
.guide-stats span { font-size: 13px; color: var(--muted); }

/* ---- Maquetación: índice + contenido ---- */
.guide-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 56px; padding: 44px 0 90px; }
.guide-nav { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 6px; }
.guide-nav .gtitle { display: block; font: 650 15px/1.3 var(--font-head); color: var(--text); margin-bottom: 14px; }
.guide-nav .progress { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin: 6px 0; }
.guide-nav .progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-500), var(--teal-500)); }
.guide-nav small { color: var(--subtle); font-size: 13px; }
.guide-nav h4 { font: 600 12px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); margin: 22px 0 8px; }
.guide-nav ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.guide-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: 14.5px; line-height: 1.3; color: var(--muted); border: 1px solid transparent; }
.guide-nav a:hover { background: var(--surface-2); color: var(--text); }
.guide-nav a[aria-current="page"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); border-color: var(--line); }
.gdot { min-width: 24px; height: 24px; padding: 0 4px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; font: 700 11px var(--font-head); color: #fff; background: var(--c); }

.guide-main { min-width: 0; max-width: 860px; }

/* ---- Barra móvil ---- */
.guide-mobile { display: none; }
@media (max-width: 1000px) {
  .guide-layout { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .guide-nav { display: none; }
  .guide-mobile {
    display: flex; position: sticky; top: 60px; z-index: 40; gap: 10px; align-items: center;
    padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .guide-mobile select { flex: 1; min-width: 0; font: 600 15px var(--font-body); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
  .guide-mobile span { font-size: 14px; color: var(--subtle); white-space: nowrap; }
  .guide-main { padding-top: 28px; }
}
@media (min-width: 1001px) and (max-width: 1100px) { .guide-layout { grid-template-columns: 240px minmax(0,1fr); gap: 36px; } }

/* ---- Bloques de la plantilla ---- */
.guide-related { margin-top: 44px; }
.guide-related h2, .guide-toc h2 { font-size: 22px; margin-bottom: 14px; }
.related-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.related-cards a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.related-cards a:hover { border-color: rgba(6,182,212,.45); transform: translateY(-2px); }
.related-cards small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.related-cards h3 { font-size: 18px; margin: 6px 0 4px; }
.related-cards p { margin: 0; font-size: 15px; color: var(--muted); }

.guide-toc { margin-top: 44px; }
.toc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.toc-cards a { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; transition: border-color .15s, transform .15s; }
.toc-cards a:hover { border-color: var(--c); transform: translateY(-2px); }
.toc-cards b { display: block; font: 650 15.5px/1.3 var(--font-head); margin-bottom: 2px; }
.toc-cards span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; }
.pager a { border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; background: var(--surface); transition: border-color .15s; }
.pager a:hover { border-color: var(--subtle); }
.pager small { color: var(--subtle); font-size: 13px; }
.pager b { display: block; font: 650 17px/1.3 var(--font-head); margin-top: 4px; }
.pager .next { text-align: right; grid-column: 2; }
.guide-main .article-cta { margin-top: 36px; }

/* ---- Hub /guias/ ---- */
.guides-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.guide-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .18s, border-color .18s; }
.guide-card:hover { transform: translateY(-3px); border-color: rgba(6,182,212,.45); }
.guide-card .idea-cover { aspect-ratio: 1200/630; }
.guide-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.guide-card h2 { font-size: 24px; }
.guide-card p { margin: 0; color: var(--muted); }
.guide-card .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--subtle); }
@media (max-width: 860px) { .guides-grid { grid-template-columns: 1fr; } .pager { grid-template-columns: 1fr; } .pager .next { grid-column: auto; } }

/* ===================================================
   2) Contenido de guía (.gc): tokens claros para los componentes heredados
   =================================================== */
.gc {
  --bg: #ffffff;
  --surface: #ffffff; --surface2: #ffffff; --surface3: #eef1f5;
  --text: #0f172a; --text2: #475569; --text3: #64748b;
  --border: #e2e6ec; --border2: #cbd5e1; --line: #e2e6ec;
  --accent: #0e7490; --accent-dim: rgba(6,182,212,.10); --accent-glow: rgba(6,182,212,.35);
  --amber: #b45309; --amber-dim: rgba(217,119,6,.10); --amber-glow: rgba(217,119,6,.35);
  --blue: #1d4ed8;  --blue-dim: rgba(37,99,235,.08);  --blue-glow: rgba(37,99,235,.30);
  --teal: #047857;  --teal-dim: rgba(16,185,129,.10); --teal-glow: rgba(16,185,129,.30);
  --red: #b91c1c;   --red-dim: rgba(239,68,68,.08);   --red-glow: rgba(239,68,68,.30);
  --green: #15803d; --green-dim: rgba(34,197,94,.10); --green-glow: rgba(34,197,94,.30);
  --purple: #7c3aed;
  --gate-bg: #f0fdf4; --gate-border: rgba(21,128,61,.25); --gate-text: #15803d;
  --code-bg: #0b0f17;
  font-size: 16px; line-height: 1.7; color: var(--text);
}
/* Iconos Tabler (sprite SVG) */
.gc svg.ti { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Bloques que siguen siendo oscuros (diagramas y código): se restauran los tokens oscuros */
.gc .ov-wrap, .gc .cw {
  --surface: #121826; --surface2: #121826; --surface3: #222b3b;
  --text: #e8edf5; --text2: #a3afc2; --text3: #7c889b;
  --border: rgba(255,255,255,.08); --border2: rgba(255,255,255,.14);
  --accent: #22d3ee; --amber: #f59e0b; --blue: #60a5fa; --teal: #34d399; --red: #f87171; --green: #4ade80;
}
.gc .ov-wrap { background: var(--ink-950) !important; border-radius: var(--radius-lg) !important; padding: clamp(16px, 3vw, 28px) !important; position: relative; overflow: hidden; }
.gc .ov-wrap svg { width: 100%; height: auto; display: block; }


/* ===================================================
   3) Componentes heredados
   =================================================== */
/* ---- Componentes de contenido heredados de las guías (generado una vez desde el HTML original) ---- */
.gc .section{margin-bottom:1.75rem}
.gc .sec-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:.75rem;display:flex;align-items:center;gap:8px}
.gc .sec-title.amber{color:var(--amber)}
.gc .sec-title.blue{color:var(--blue)}
.gc .sec-title.teal{color:var(--teal)}
.gc .sec-title.red{color:var(--red)}
.gc .sec-title.green{color:var(--green)}
.gc .sec-title::after{content:'';flex:1;height:1px;background:var(--border2)}
.gc .section p{font-size:14px;color:var(--text2);line-height:1.8;margin-bottom:.75rem}
.gc .section p:last-child{margin-bottom:0}
.gc .cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:1rem}
.gc .card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:1rem;transition:border-color .15s}
.gc .card:hover{border-color:var(--border2)}
.gc .card-icon{font-size:20px;margin-bottom:8px}
.gc .card-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:5px}
.gc .card-desc{font-size:12px;color:var(--text2);line-height:1.6}
.gc .card.amber-b{border-left:2px solid var(--amber)}
.gc .card.amber-b .card-title{color:var(--amber)}
.gc .card.blue-b{border-left:2px solid var(--blue)}
.gc .card.blue-b .card-title{color:var(--blue)}
.gc .card.teal-b{border-left:2px solid var(--teal)}
.gc .card.teal-b .card-title{color:var(--teal)}
.gc .card.red-b{border-left:2px solid var(--red)}
.gc .card.red-b .card-title{color:var(--red)}
.gc .card.green-b{border-left:2px solid var(--green)}
.gc .card.green-b .card-title{color:var(--green)}
.gc .card.cyan-b{border-left:2px solid var(--accent)}
.gc .card.cyan-b .card-title{color:var(--accent)}
.gc .gate-box{background:var(--gate-bg);border:1px solid var(--gate-border);border-radius:10px;padding:1.25rem;margin-top:2rem}
.gc .gate-title{font-size:13px;font-weight:700;color:var(--gate-text);margin-bottom:.75rem}
.gc .gate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px}
.gc .gate-item{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:rgba(74,222,128,.8);line-height:1.4}
.gc .gcheck{width:15px;height:15px;border-radius:50%;background:var(--gate-text);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;margin-top:1px}
.gc .steps-list{list-style:none}
.gc .step-item{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.gc .step-item:last-child{border-bottom:none}
.gc .step-num{width:28px;height:28px;border-radius:8px;background:var(--accent-dim);border:1px solid var(--accent-glow);color:var(--accent);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gc .step-text strong{font-size:13px;font-weight:600;color:var(--text);display:block;margin-bottom:2px}
.gc .step-text span{font-size:12px;color:var(--text2)}
.gc .mental-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.gc .mcard{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:1rem;position:relative;overflow:hidden;transition:border-color .15s}
.gc .mcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.gc .mcard.c1::before{background:var(--accent)}
.gc .mcard.c2::before{background:var(--green)}
.gc .mcard.c3::before{background:var(--blue)}
.gc .mcard.c4::before{background:var(--amber)}
.gc .mcard.c5::before{background:var(--purple)}
.gc .mcard.c6::before{background:var(--red)}
.gc .mcard.c7::before{background:var(--teal)}
.gc .mcard.c8::before{background:#94a3b8}
.gc .mcard.c1:hover{border-color:rgba(34,211,238,.3)}
.gc .mcard.c2:hover{border-color:rgba(74,222,128,.3)}
.gc .mcard.c3:hover{border-color:rgba(96,165,250,.3)}
.gc .mcard.c4:hover{border-color:rgba(245,158,11,.3)}
.gc .mcard.c6:hover{border-color:rgba(248,113,113,.3)}
.gc .mcard.c7:hover{border-color:rgba(52,211,153,.3)}
.gc .mnum{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.gc .mcard.c1 .mnum{color:var(--accent)}
.gc .mcard.c2 .mnum{color:var(--green)}
.gc .mcard.c3 .mnum{color:var(--blue)}
.gc .mcard.c4 .mnum{color:var(--amber)}
.gc .mcard.c5 .mnum{color:var(--purple)}
.gc .mcard.c6 .mnum{color:var(--red)}
.gc .mcard.c7 .mnum{color:var(--teal)}
.gc .mcard.c8 .mnum{color:#94a3b8}
.gc .mtitle{font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px}
.gc .mitems{list-style:none;font-size:12px;color:var(--text2);line-height:1.7}
.gc .mresult{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.gc .mcard.c1 .mresult{color:var(--accent)}
.gc .mcard.c2 .mresult{color:var(--green)}
.gc .mcard.c3 .mresult{color:var(--blue)}
.gc .mcard.c4 .mresult{color:var(--amber)}
.gc .mcard.c6 .mresult{color:var(--red)}
.gc .mcard.c7 .mresult{color:var(--teal)}
.gc .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:2rem}
.gc .stat-box{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:1.25rem;text-align:center}
.gc .stat-box.accent{background:var(--accent-dim);border-color:var(--accent-glow)}
.gc .stat-box.amber{background:var(--amber-dim);border-color:var(--amber-glow)}
.gc .stat-num{font-size:32px;font-weight:700;color:var(--text);line-height:1}
.gc .stat-box.accent .stat-num{color:var(--accent)}
.gc .stat-box.amber .stat-num{color:var(--amber)}
.gc .stat-lbl{font-size:11px;color:var(--text2);margin-top:5px;text-transform:uppercase;letter-spacing:.06em}
.gc .ci{font-family:'SF Mono',Consolas,monospace;font-size:12px;background:var(--surface3);padding:2px 7px;border-radius:4px;color:var(--accent);border:1px solid var(--border2)}
.gc details.xp{background:var(--surface2);border:1px solid var(--border);border-radius:8px;margin-top:10px;overflow:hidden;transition:border-color .2s}
.gc details.xp[open]{border-color:var(--border2)}
.gc details.xp summary{cursor:pointer;padding:9px 14px;font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.03em;list-style:none;display:flex;align-items:center;gap:8px;user-select:none;transition:background .12s}
.gc details.xp summary::-webkit-details-marker{display:none}
.gc details.xp summary .xarrow{font-size:14px;transition:transform .25s;display:inline-block}
.gc details.xp[open] summary .xarrow{transform:rotate(90deg)}
.gc details.xp[open] summary{border-bottom:1px solid var(--border);background:rgba(34,211,238,.04)}
.gc .xbody{padding:14px 16px;font-size:12px;color:var(--text2);line-height:1.75}
.gc .xbody ul{list-style:none;margin-top:6px}
.gc .xbody ul li{padding:2px 0 2px 14px;position:relative}
.gc .xbody ul li::before{content:'·';position:absolute;left:0;color:var(--text3)}
.gc .xbody strong{color:var(--text);font-weight:600}
.gc .xgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.gc .xcol h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:5px}
.gc .role-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.25rem}
.gc .rpill{font-size:11px;padding:3px 10px;border-radius:20px;background:var(--surface3);color:var(--text2);border:1px solid var(--border2);display:inline-flex;align-items:center;gap:5px}
.gc .rpill i{font-size:12px}
.gc .tl-wrap{overflow-x:auto;padding:1rem 0;margin-bottom:1.5rem;scrollbar-width:thin}
.gc .tl-row{display:flex;align-items:center;min-width:max-content}
.gc .tl-step{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.gc .tl-num{width:38px;height:38px;border-radius:50%;background:var(--blue-dim);border:2px solid var(--blue);color:var(--blue);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:8px;position:relative;z-index:1;box-shadow:0 0 10px var(--blue-glow)}
.gc .tl-label{font-size:11px;font-weight:600;color:var(--text);text-align:center;max-width:90px;line-height:1.3}
.gc .tl-sub{font-size:10px;color:var(--text3);text-align:center;max-width:90px;margin-top:2px;line-height:1.3}
.gc .tl-line{flex:1;height:2px;min-width:28px;position:relative;overflow:hidden;background:rgba(96,165,250,.15);margin-bottom:28px}
.gc .tl-line::after{content:'';position:absolute;top:0;left:-60%;width:60%;height:100%;background:linear-gradient(90deg,transparent,var(--blue),transparent);animation:tlFlow 2.2s linear infinite}
@keyframes tlFlow{0%{left:-60%}100%{left:160%}}
.gc .pipe-wrap{overflow-x:auto;padding:1.25rem 0 1.5rem;margin-bottom:1rem;scrollbar-width:thin}
.gc .pipe-row{display:flex;align-items:stretch;gap:0;min-width:max-content;position:relative}
.gc .pipe-node{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 12px;text-align:center;flex-shrink:0;width:108px;transition:border-color .2s,box-shadow .2s;cursor:default}
.gc .pipe-node:hover{border-color:var(--red-glow);box-shadow:0 0 12px var(--red-dim)}
.gc .pipe-node .p-icon{font-size:22px;color:var(--red);margin-bottom:6px;display:block}
.gc .pipe-node .p-name{font-size:11px;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.3}
.gc .pipe-node .p-desc{font-size:10px;color:var(--text3);line-height:1.4}
.gc .pipe-conn{display:flex;align-items:center;flex-shrink:0;width:28px;position:relative}
.gc .pipe-conn-line{width:100%;height:2px;background:rgba(248,113,113,.2);position:relative;overflow:hidden}
.gc .pipe-conn-line::after{content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--red),transparent);animation:pipeGlow 1.8s linear infinite}
.gc .pipe-conn:nth-child(2) .pipe-conn-line::after{animation-delay:0s}
.gc .pipe-conn:nth-child(4) .pipe-conn-line::after{animation-delay:.22s}
.gc .pipe-conn:nth-child(6) .pipe-conn-line::after{animation-delay:.44s}
.gc .pipe-conn:nth-child(8) .pipe-conn-line::after{animation-delay:.66s}
.gc .pipe-conn:nth-child(10) .pipe-conn-line::after{animation-delay:.88s}
.gc .pipe-conn:nth-child(12) .pipe-conn-line::after{animation-delay:1.1s}
.gc .pipe-conn:nth-child(14) .pipe-conn-line::after{animation-delay:1.3s}
@keyframes pipeGlow{0%{left:-40%}100%{left:140%}}
.gc .ag-list{list-style:none}
.gc .ag-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.gc .ag-item:last-child{border-bottom:none}
.gc .ag-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.gc .ag-body strong{font-size:13px;font-weight:600;color:var(--text);display:block;margin-bottom:2px}
.gc .ag-body span{font-size:12px;color:var(--text2);line-height:1.5}
.gc .ag-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:8px;vertical-align:middle}
.gc .badge-core{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-glow)}
.gc .badge-sec{background:rgba(148,163,184,.1);color:#94a3b8;border:1px solid rgba(148,163,184,.2)}
.gc .mat-grid{display:flex;flex-direction:column;gap:10px}
.gc .mat-level{background:var(--surface2);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.gc .mat-level:hover{border-color:var(--border2)}
.gc .mat-level.l0.open,.gc .mat-level.l0:hover{border-color:#94a3b8}
.gc .mat-level.l1.open,.gc .mat-level.l1:hover{border-color:var(--blue)}
.gc .mat-level.l2.open,.gc .mat-level.l2:hover{border-color:var(--amber)}
.gc .mat-level.l3.open,.gc .mat-level.l3:hover{border-color:var(--accent)}
.gc .mat-level.l4.open,.gc .mat-level.l4:hover{border-color:var(--green);box-shadow:0 0 16px rgba(74,222,128,.1)}
.gc .mat-header{display:flex;align-items:center;gap:14px;padding:14px 16px}
.gc .mat-badge{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;flex-shrink:0;letter-spacing:-.02em}
.gc .l0 .mat-badge{background:rgba(148,163,184,.1);color:#94a3b8}
.gc .l1 .mat-badge{background:var(--blue-dim);color:var(--blue)}
.gc .l2 .mat-badge{background:var(--amber-dim);color:var(--amber)}
.gc .l3 .mat-badge{background:var(--accent-dim);color:var(--accent)}
.gc .l4 .mat-badge{background:var(--green-dim);color:var(--green)}
.gc .mat-info h3{font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px}
.gc .mat-info p{font-size:12px;color:var(--text2)}
.gc .mat-arrow{margin-left:auto;font-size:16px;color:var(--text3);transition:transform .25s}
.gc .mat-level.open .mat-arrow{transform:rotate(90deg)}
.gc .mat-body{display:none;padding:0 16px 16px;border-top:1px solid var(--border);margin-top:0}
.gc .mat-level.open .mat-body{display:block}
.gc .mat-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.gc .mat-col h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:6px}
.gc .mat-col ul{list-style:none;font-size:12px;color:var(--text2);line-height:1.7}
.gc .mat-col ul li{padding-left:12px;position:relative}
.gc .mat-col ul li::before{content:'·';position:absolute;left:0;color:var(--text3)}
.gc .mat-progress{display:flex;gap:4px;margin-top:12px}
.gc .mat-pip{flex:1;height:4px;border-radius:2px;background:var(--surface3)}
.gc .l0.open .mat-pip:nth-child(1){background:#94a3b8}
.gc .l1.open .mat-pip:nth-child(-n+2){background:var(--blue)}
.gc .l2.open .mat-pip:nth-child(-n+3){background:var(--amber)}
.gc .l3.open .mat-pip:nth-child(-n+4){background:var(--accent)}
.gc .l4.open .mat-pip{background:var(--green)}
.gc .cmp-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--border);margin-bottom:1.5rem}
.gc .cmp-tbl{width:100%;border-collapse:collapse;font-size:12px}
.gc .cmp-tbl th{padding:10px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border2);text-align:left}
.gc .cmp-tbl td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.5;color:var(--text2)}
.gc .cmp-tbl tr:last-child td{border-bottom:none}
.gc .cmp-tbl tr:hover td{background:rgba(255,255,255,.02)}
.gc .cmp-tbl th.ph{color:var(--text3);background:var(--surface3);width:120px}
.gc .cmp-tbl td.ph{color:var(--text);font-weight:600;background:var(--surface2)}
.gc .cmp-tbl th.sdd{color:var(--accent);background:rgba(34,211,238,.05)}
.gc .cmp-tbl td.sdd{background:rgba(34,211,238,.02)}
.gc .cmp-tbl th.trad{color:var(--teal);background:rgba(52,211,153,.05)}
.gc .cmp-tbl td.trad{background:rgba(52,211,153,.02)}
.gc .tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;gap:3px;vertical-align:middle}
.gc .tc{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(34,211,238,.2)}
.gc .tt{background:var(--teal-dim);color:var(--teal);border:1px solid rgba(52,211,153,.2)}
.gc .scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1rem}
.gc .scope-box{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:1rem}
.gc .scope-box.in{border-left:2px solid var(--green)}
.gc .scope-box.out{border-left:2px solid var(--red)}
.gc .scope-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px}
.gc .scope-box.in .scope-lbl{color:var(--green)}
.gc .scope-box.out .scope-lbl{color:var(--red)}
.gc .scope-list{list-style:none;font-size:12px;color:var(--text2)}
.gc .scope-list li{padding:2px 0 2px 14px;position:relative}
.gc .scope-list li::before{content:'·';position:absolute;left:0;color:var(--text3)}
.gc .input-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:1.25rem}
.gc .inp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:5px 12px;border-radius:20px;background:var(--blue-dim);border:1px solid var(--blue-glow);color:var(--blue)}
.gc .inp-chip i{font-size:14px}
.gc .out-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:.75rem}
.gc .out-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;padding:4px 11px;border-radius:20px;background:var(--surface3);border:1px solid var(--border2);color:var(--text2)}
.gc .out-chip i{font-size:12px;color:var(--accent)}
.gc .feedback-strip{background:var(--surface2);border:1px solid var(--green-glow);border-radius:10px;padding:1rem 1.25rem;display:flex;align-items:center;gap:12px;margin-top:1.5rem}
.gc .feedback-strip i{font-size:24px;color:var(--green)}
.gc .feedback-text strong{font-size:13px;font-weight:600;color:var(--green);display:block;margin-bottom:2px}
.gc .feedback-text span{font-size:12px;color:var(--text2)}
.gc .ov-wrap{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:1.25rem;margin-bottom:2rem}
.gc .ov-layer{cursor:pointer;transition:opacity .15s}
.gc .ov-layer:hover{opacity:.82}
.gc .ov-layer:hover rect{stroke-width:2}
@media(max-width:780px){
.gc .scope-grid{grid-template-columns:1fr}
.gc .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:580px){
.gc .stats{grid-template-columns:1fr 1fr}
}
/* ---- Componentes propios de SDD Lifecycle ---- */
.gc .cw{background:var(--code-bg);border:1px solid var(--border2);border-radius:10px;overflow:hidden;margin-bottom:1rem}
.gc .cw-bar{background:#0e0e1a;padding:8px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.gc .cw-dots{display:flex;gap:5px}
.gc .cw-dot{width:10px;height:10px;border-radius:50%}
.gc .cw-dot.r{background:#ff5f57}
.gc .cw-dot.y{background:#ffbd2e}
.gc .cw-dot.g{background:#28ca41}
.gc .cw-lbl{font-size:11px;color:var(--text3);font-family:'SF Mono','Consolas',monospace}
.gc .cw-body{padding:1rem 1.25rem;font-family:'SF Mono','Consolas','Courier New',monospace;color:#cdd6f4;line-height:1.85;overflow-x:auto;white-space:pre;font-size:12.5px}
.gc .kw{color:#cba6f7}
.gc .str{color:#a6e3a1}
.gc .cm{color:#45475a;font-style:italic}
.gc .op{color:#89dceb}
.gc .num{color:#fab387}
.gc .cmd{color:#89b4fa}
.gc .key{color:#f9e2af}
.gc .card.good{border-left:2px solid #4ade80}
.gc .card.bad{border-left:2px solid #f87171}
.gc .card.good .card-title{color:#4ade80}
.gc .card.bad .card-title{color:#f87171}
.gc .mcard.c5 .mresult{color:#c084fc}
.gc .mcard.c8 .mresult{color:#94a3b8}
.gc .cmd-table{width:100%;border-collapse:collapse;font-size:13px}
.gc .cmd-table th{text-align:left;padding:8px 12px;background:var(--surface3);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);border-bottom:1px solid var(--border2)}
.gc .cmd-table td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text2)}
.gc .cmd-table td:first-child{color:var(--text)}
.gc .cmd-table tr:last-child td{border-bottom:none}
.gc .cmd-table tr:hover td{background:var(--accent-dim)}
.gc .flow-row{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:1rem;font-size:13px;color:var(--text2);text-align:center;line-height:2.5}
.gc .ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gc .ba-label{font-size:11px;font-weight:700;text-transform:uppercase;margin-bottom:8px}

/* ===================================================
   4) Ajustes sobre los componentes heredados (legibilidad y contraste)
   =================================================== */
/* Reset: las guías originales anulaban márgenes y rellenos globales (* {margin:0;padding:0}) */
.gc .section { padding: 0; }
.gc ul, .gc ol { margin: 0; padding: 0; }
.gc p { margin: 0; }
.gc h3, .gc h4 { letter-spacing: normal; }
/* Citas de principio (cajas gate sin checklist, con texto en cursiva inline) */
.gc .gate-box > div[style*="italic"] { color: #14532d !important; font: 600 clamp(18px, 2vw, 21px)/1.45 var(--font-head) !important; font-style: normal !important; letter-spacing: -.01em; }

/* Legibilidad: los componentes originales usaban 11–13 px */
.gc .section { margin-bottom: 2.25rem; }
.gc .section p, .gc .section > p { font-size: 16.5px; line-height: 1.75; }
.gc .sec-title { font-size: 12.5px; color: var(--accent); }
.gc .sec-title::after { background: var(--border); }
.gc .card { padding: 1.1rem 1.15rem; box-shadow: var(--shadow); border-radius: 14px; }
.gc .card-title { font-size: 15.5px; }
.gc .card-desc, .gc .mitems, .gc .scope-list, .gc .xbody, .gc .mat-col ul, .gc .ag-body span, .gc .step-text span, .gc .cmd-table, .gc .cmp-tbl { font-size: 14.5px; }
.gc .step-text strong, .gc .ag-body strong, .gc .mtitle, .gc .mat-info h3 { font-size: 15.5px; }
.gc .mcard, .gc .scope-box, .gc .stat-box, .gc .mat-level, .gc details.xp, .gc .flow-row, .gc .pipe-node { box-shadow: var(--shadow); border-radius: 14px; }
.gc .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gc .stat-num { font-family: var(--font-head); letter-spacing: -.03em; }
.gc .stat-lbl { font-size: 12px; }
.gc .gate-box { border-radius: 16px; padding: 1.25rem 1.4rem; }
.gc .gate-title { font-size: 15px; display: flex; gap: 8px; align-items: center; }
.gc .gate-title .gate-progress { margin-left: auto; }
.gc .gate-item { font-size: 14.5px; color: #166534; }
.gc .ci { font-size: 13.5px; }
.gc .cw-body { font-size: 13.5px; }
.gc .cw-lbl { font-size: 12px; }
.gc .cm { color: #7f849c; }
.gc .rpill, .gc .inp-chip, .gc .out-chip { font-size: 13px; }
.gc .tl-label { font-size: 13px; } .gc .tl-sub { font-size: 12px; }
.gc .pipe-node .p-name { font-size: 12.5px; } .gc .pipe-node .p-desc { font-size: 11.5px; }
.gc .card.good { border-left-color: var(--green); } .gc .card.good .card-title { color: var(--green); }
.gc .card.bad  { border-left-color: var(--red); }   .gc .card.bad  .card-title { color: var(--red); }
.gc .mcard.c7::before { background: var(--teal); } .gc .mcard.c8::before { background: #94a3b8; }
.gc .cmp-tbl tr:hover td { background: var(--surface3); }
.gc details.xp summary { font-size: 14px; }
.gc a:not(.btn) { color: var(--accent); }

/* Quality gates como checklist interactivo (JS en main.js) */
.gc .gate-item.is-check { cursor: pointer; border-radius: 8px; padding: 4px 6px; margin: -4px -6px; transition: background .12s; }
.gc .gate-item.is-check:hover { background: rgba(21,128,61,.06); }
.gc .gate-item.is-check .gcheck { background: transparent; border: 2px solid var(--gate-text); color: transparent; width: 18px; height: 18px; }
.gc .gate-item.is-check.done .gcheck { background: var(--gate-text); color: #fff; }
.gc .gate-item.is-check.done { color: #166534; }
.gc .gate-item.is-check:not(.done) { color: var(--text2); }
.gate-progress { font-size: 13px; font-weight: 600; color: var(--subtle); white-space: nowrap; }

/* ---- Impresión / PDF ---- */
@media print {
  .topbar, .footer, .guide-nav, .guide-mobile, .guide-tools, .pager, .article-cta, .mobile-cta, #back-to-top, .skip-link, .guide-related, .share-bar { display: none !important; }
  .guide-head { background: #fff !important; color: #000 !important; padding: 0 0 16px; }
  .guide-head *, .guide-head .lead { color: #000 !important; }
  .guide-layout { display: block; padding: 0; }
  .gc .ov-wrap, .gc .cw { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gc .mat-body { display: block !important; }
  body { background: #fff; }
}

/* ===================================================
   5) Visualizaciones de portada: mapa vivo (Modelo) y workflow (SDD)
   =================================================== */
.gmap, .gwf {
  --g-amber:#f59e0b; --g-blue:#60a5fa; --g-cyan:#22d3ee; --g-teal:#34d399; --g-red:#f87171; --g-green:#4ade80; --g-ink:#94a3b8; --g-purple:#c084fc;
  --d-text:#e8edf5; --d-muted:#a3afc2; --d-subtle:#7c889b; --d-line:rgba(255,255,255,.09);
  position: relative; margin: 8px 0 40px; border-radius: var(--radius-lg); background: var(--ink-950); color: var(--d-text);
  overflow: hidden; isolation: isolate;
}
.gmap::before, .gwf::before { content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(700px 420px at 85% -10%, rgba(34,211,238,.16), transparent 60%), radial-gradient(600px 400px at 0% 110%, rgba(74,222,128,.10), transparent 60%); }
.gmap::after, .gwf::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 40px 40px; -webkit-mask-image: linear-gradient(180deg,#000,transparent 90%); mask-image: linear-gradient(180deg,#000,transparent 90%); }
.gmap [data-color="amber"], .gwf [data-color="amber"] { --c: var(--g-amber); }
.gmap [data-color="blue"],  .gwf [data-color="blue"]  { --c: var(--g-blue); }
.gmap [data-color="cyan"],  .gwf [data-color="cyan"]  { --c: var(--g-cyan); }
.gmap [data-color="teal"],  .gwf [data-color="teal"]  { --c: var(--g-teal); }
.gmap [data-color="red"],   .gwf [data-color="red"]   { --c: var(--g-red); }
.gmap [data-color="purple"], .gwf [data-color="purple"] { --c: var(--g-purple); }
.gmap [data-color="green"], .gwf [data-color="green"] { --c: var(--g-green); }
.gmap-defs { position: absolute; }
.gc .gmap a, .gc .gwf a.gwf-phase { color: inherit; text-decoration: none; }

/* ---- Mapa vivo ---- */
.gmap { padding: 30px 74px 30px 28px; }
.gmap-head, .gwf-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.gmap-head > span:first-child, .gwf-head > span { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--g-cyan); }
.gmap-live { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color: var(--d-muted); }
.gmap-live i { width:8px; height:8px; border-radius:50%; background: var(--g-green); animation: gm-ping 2s infinite; }
@keyframes gm-ping { 0% { box-shadow:0 0 0 0 rgba(74,222,128,.6); } 70%,100% { box-shadow:0 0 0 8px rgba(74,222,128,0); } }
.gmap-row { display:grid; gap:16px; }
.gmap-row.two { grid-template-columns: 1fr 1fr; }
.gmap-layer { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:16px 18px; border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), var(--ink-900); border:1px solid var(--d-line);
  transition: transform .25s, border-color .25s, box-shadow .25s, opacity .3s, filter .3s; overflow:hidden; }
.gmap-layer::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition: opacity .25s;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); }
.gmap-layer::after { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.gmap-badge { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font:700 15px var(--font-head); color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.gmap-body { display:block; min-width:0; }
.gmap-kicker { display:block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--c); margin-bottom:3px; }
.gmap-title { display:block; font:650 17px/1.25 var(--font-head); letter-spacing:-.01em; color: var(--d-text); }
.gmap-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.gmap-chips span { font-size:12px; line-height:1.4; padding:3px 9px; border-radius:999px; color: var(--d-muted); background: rgba(255,255,255,.04); border:1px solid var(--d-line); transition: all .25s; }
.gmap-go { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color: var(--d-subtle); border:1px solid var(--d-line); transition: all .25s; }
.gmap-go svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gmap-layer:hover, .gmap-layer:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 65%, transparent); outline:none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent), 0 18px 50px -12px color-mix(in srgb, var(--c) 45%, transparent); }
.gmap-layer:hover::before, .gmap-layer:focus-visible::before { opacity:1; }
.gmap-layer:hover .gmap-chips span, .gmap-layer:focus-visible .gmap-chips span { color: var(--d-text); border-color: color-mix(in srgb, var(--c) 35%, transparent); }
.gmap-layer:hover .gmap-go, .gmap-layer:focus-visible .gmap-go { background: var(--c); color: var(--ink-950); border-color: transparent; transform: translateX(3px); }
.gmap.focus .gmap-layer:not(.on) { opacity:.38; filter: saturate(.5); }
.gmap-link { height:40px; position:relative; }
.gmap-link svg, .gmap-loop svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.gmap-link path, .gmap-loop path, .gwf-return path { fill:none; stroke-width:2; vector-effect: non-scaling-stroke; }
.gmap-link .base { stroke: rgba(255,255,255,.10); }
.gmap-link .flow { stroke: url(#gmap-grad); stroke-dasharray: 3 9; stroke-linecap: round; animation: gm-flow 1.2s linear infinite; opacity:.75; transition: opacity .3s, stroke-width .3s; }
.gmap.focus .gmap-link .flow { opacity:.12; }
.gmap.focus .gmap-link.on .flow { opacity:1; stroke-width:3; animation-duration:.6s; }
.gmap.focus .gmap-link.on .flow.off { opacity:.12; stroke-width:2; }
@keyframes gm-flow { to { stroke-dashoffset: -24; } }
.gmap-loop { position:absolute; right:22px; width:48px; pointer-events:none; transition: opacity .3s; }
.gmap-loop::before { content:""; position:absolute; left:-2px; top:-6px; border:6px solid transparent; border-right:8px solid var(--g-green); border-left:0; filter: drop-shadow(0 0 6px var(--g-green)); }
.gmap-loop .base { stroke: rgba(74,222,128,.18); }
.gmap-loop .flow { stroke: var(--g-green); stroke-dasharray: 3 9; stroke-linecap: round; animation: gm-flow 1.6s linear infinite reverse; }
.gmap-loop span { position:absolute; right:-8px; top:50%; transform: translateY(-50%) rotate(90deg); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--g-green); white-space:nowrap; background: var(--ink-950); padding:2px 8px; border-radius:6px; }
.gmap.focus .gmap-loop { opacity:.25; }
.gmap.focus.loop-on .gmap-loop { opacity:1; }
.gmap-legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; font-size:12.5px; color: var(--d-muted); }
.gmap-legend i { display:inline-block; width:22px; height:2px; margin-right:6px; vertical-align:middle; background: repeating-linear-gradient(90deg, var(--g-cyan) 0 3px, transparent 3px 9px); }
.gmap-legend i.g { background: repeating-linear-gradient(90deg, var(--g-green) 0 3px, transparent 3px 9px); }

/* ---- Workflow horizontal ---- */
.gwf { padding: 24px 22px 22px; }
.gwf-head small { font-size:12.5px; color: var(--d-muted); }
.gwf-scroll { overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px; scrollbar-width:thin; }
.gwf-track { min-width:760px; display:grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); position:relative; }
.gwf-stage { grid-row:1; border-top:2px solid var(--c); padding:8px 6px 0; margin:0 4px 18px; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--c); }
.gwf-stage small { display:block; min-height:2.6em; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color: var(--d-subtle); margin-top:2px; }
.gwf-rail { grid-row:2; grid-column:1/-1; position:relative; height:46px; pointer-events:none; }
.gwf-rail::before { content:""; position:absolute; left:3.8%; right:3.8%; top:22px; height:2px; background: rgba(255,255,255,.10); border-radius:2px; }
.gwf-rail::after { content:""; position:absolute; left:3.8%; right:3.8%; top:21px; height:4px; border-radius:4px; background: var(--rail); opacity:.85;
  -webkit-mask: repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 18px); mask: repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 18px);
  -webkit-mask-size:200% 100%; mask-size:200% 100%; animation: gwf-run 1.4s linear infinite; }
@keyframes gwf-run { to { -webkit-mask-position:-36px 0; mask-position:-36px 0; } }
.gwf-phase { grid-row:2/4; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 2px 8px; min-width:0; scroll-snap-align:center; outline:none; }
.gwf-node { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font:700 16px var(--font-head); color: var(--c);
  background: var(--ink-900); border:2px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 0 6px var(--ink-950);
  transition: transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s; }
.gwf-lbl { margin-top:10px; font-size:12px; font-weight:600; line-height:1.25; color: var(--d-text); max-width:100%; transition: opacity .25s; }
.gwf-gate { margin-top:7px; font-size:0; gap:0; line-height:1.3; color: var(--d-subtle); display:flex; gap:5px; align-items:baseline; justify-content:center; transition: opacity .25s; }
.gwf-gate::before { content:""; flex-shrink:0; width:8px; height:8px; transform: rotate(45deg); border:1.5px solid var(--c); border-radius:1px; }
.gwf-phase:hover .gwf-node, .gwf-phase:focus-visible .gwf-node, .gwf-phase.sel .gwf-node { transform: scale(1.14); background: var(--c); color: var(--ink-950);
  box-shadow: 0 0 0 6px var(--ink-950), 0 0 0 8px color-mix(in srgb, var(--c) 45%, transparent), 0 0 36px 6px color-mix(in srgb, var(--c) 55%, transparent); }
.gwf.hovering .gwf-phase:not(:hover):not(.sel) .gwf-lbl, .gwf.hovering .gwf-phase:not(:hover):not(.sel) .gwf-gate { opacity:.5; }
.gwf.hovering .gwf-phase:not(:hover):not(.sel) .gwf-node { border-color: color-mix(in srgb, var(--c) 30%, transparent); color: color-mix(in srgb, var(--c) 60%, transparent); }
.gwf-return { grid-row:4; grid-column:2/-1; height:46px; position:relative; margin-top:2px; }
.gwf-return svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.gwf-return .base { stroke: rgba(74,222,128,.18); }
.gwf-return .flow { stroke: var(--g-green); stroke-dasharray:3 9; stroke-linecap:round; animation: gm-flow 1.6s linear infinite; }
.gwf-return span { position:absolute; left:50%; bottom:-4px; transform: translateX(-50%); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--g-green); background: var(--ink-950); padding:2px 10px; border-radius:6px; white-space:nowrap; }
.gwf-detail { margin-top:18px; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; padding:18px 20px; border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); transition: border-color .25s; }
.gwf-big { width:58px; height:58px; border-radius:16px; display:grid; place-items:center; font:700 22px var(--font-head); background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.gwf-dt { display:block; font:650 19px/1.25 var(--font-head); color: var(--d-text); }
.gc .gwf-ds { margin:4px 0 0; color: var(--d-muted); font-size:15px; line-height:1.5; }
.gwf-dg { display:inline-block; margin-top:8px; font-size:12.5px; font-weight:600; color: var(--c); }
.gc .gwf-detail .gwf-da { background: var(--c); color: var(--ink-950); white-space:nowrap; }

/* ---- Barra compacta en cada capa/fase ---- */
.guide-mini { background: var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 16px 16px; box-shadow: var(--shadow); margin-bottom:28px; }
.guide-mini-top { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color: var(--subtle); margin-bottom:10px; }
.guide-mini-top b { color: var(--text); font-weight:600; }
.guide-mini-track { display:grid; grid-template-columns: repeat(var(--n), 1fr); gap:4px; align-items:center; }
.guide-mini-track a { --c: var(--c-cyan); display:block; height:8px; border-radius:6px; background: var(--surface-2); position:relative; transition: transform .15s, opacity .15s; }
.guide-mini-track a[data-color="amber"] { --c: var(--c-amber); }
.guide-mini-track a[data-color="blue"]  { --c: var(--c-blue); }
.guide-mini-track a[data-color="teal"]  { --c: var(--c-teal); }
.guide-mini-track a[data-color="red"]   { --c: var(--c-red); }
.guide-mini-track a[data-color="green"] { --c: var(--c-green); }
.guide-mini-track a.done { background: var(--c); opacity:.55; }
.guide-mini-track a.cur { height:14px; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.guide-mini-track a:hover { opacity:1; }
.guide-mini-track a:hover::after { content: attr(data-tip); position:absolute; bottom: calc(100% + 8px); left:50%; transform: translateX(-50%);
  background: var(--ink-950); color:#fff; font-size:12px; padding:5px 9px; border-radius:8px; white-space:nowrap; z-index:5; pointer-events:none; }
.guide-mini-track a:first-child:hover::after { left:0; transform:none; }
.guide-mini-track a:last-child:hover::after { left:auto; right:0; transform:none; }

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .gmap { padding: 22px 16px; }
  .gmap-row.two { grid-template-columns: 1fr; }
  .gmap-link { height: 26px; }
  .gmap-loop, .gmap-go { display: none; }
  .gmap-layer { grid-template-columns: auto 1fr; }
  /* Workflow → línea de tiempo vertical */
  .gwf { padding: 22px 16px; }
  .gwf-scroll { overflow: visible; }
  .gwf-track { display: block; min-width: 0; position: relative; }
  .gwf-track::before { content:""; position:absolute; left:23px; top:40px; bottom:20px; width:2px; background: rgba(255,255,255,.10); }
  .gwf-rail, .gwf-return, .gwf-detail, .gwf-head small { display: none; }
  .gwf-stage { margin: 18px 0 10px; padding-left: 0; position: relative; background: var(--ink-950); }
  .gwf-stage:first-of-type { margin-top: 0; }
  .gwf-phase { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; text-align: left; align-items: center; padding: 6px 0; }
  .gwf-node { width: 46px; height: 46px; font-size: 16px; grid-row: 1 / 3; }
  .gwf-lbl { margin: 0; max-width: none; font-size: 15px; }
  .gwf-gate { margin: 2px 0 0; justify-content: flex-start; font-size: 12.5px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .gmap-link .flow, .gmap-loop .flow, .gwf-rail::after, .gwf-return .flow, .gmap-live i { animation: none !important; }
}

/* ===================================================
   6) Guías en directo (laboratorio): cabecera viva, pulso, bitácora y "Próximamente"
   =================================================== */
.live-row { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-top:4px; }
.live-pill { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; color:#fecaca; background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.45); }
.live-pill i { width:8px; height:8px; border-radius:50%; background:#ef4444; animation: live-ping 1.6s infinite; }
.live-pill.sm { font-size:10.5px; padding:3px 9px; color:#b91c1c; background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.3); }
@keyframes live-ping { 0% { box-shadow:0 0 0 0 rgba(239,68,68,.7); } 70%,100% { box-shadow:0 0 0 9px rgba(239,68,68,0); } }
.live-meta { font-size:14px; color:var(--muted); }
.live-meta b { color:#fff; font-weight:600; }
.guide-head .live-row + h1 { margin-top:16px; }
.live-tiles { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-top:28px; max-width:980px; }
.live-tile { padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.live-tile b { display:block; font:700 30px/1 var(--font-head); letter-spacing:-.03em; color:#fff; }
.live-tile span { font-size:13px; color:var(--muted); }
.live-tile small { display:block; margin-top:6px; font-size:12px; color:#6ee7b7; }
.live-note { margin:10px 0 0; font-size:12.5px; color:var(--subtle); }

/* Aviso de laboratorio */
.gc .lab-notice { display:block; margin:0 0 28px; padding:16px 20px; border-radius:16px; font-size:15px; line-height:1.6; color:var(--text2);
  background:linear-gradient(135deg, rgba(168,85,247,.08), rgba(6,182,212,.06)); border:1px solid rgba(168,85,247,.28); }
.gc .lab-notice strong { display:block; color:#6b21a8; font-family:var(--font-head); font-size:16.5px; margin-bottom:4px; }

/* Vídeo (próximamente o publicado) */
.gc .lab-video { display:grid; grid-template-columns:300px 1fr; gap:32px; align-items:center; margin:0 0 36px; padding:22px; border-radius:var(--radius-lg);
  background:var(--ink-950); color:#e8edf5; position:relative; overflow:hidden; }
.gc .lab-video::before { content:""; position:absolute; right:-140px; top:-180px; width:520px; height:420px; background:radial-gradient(closest-side, rgba(168,85,247,.22), transparent); }
.lab-video-frame { position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden; background:#121826; border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 50px rgba(0,0,0,.45); }
.lab-video-frame video { display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.gc .lab-chapters { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:4px; }
.gc .lab-chapters button { all:unset; box-sizing:border-box; width:100%; display:flex; gap:12px; align-items:baseline; padding:7px 10px; border-radius:10px; cursor:pointer; color:#d5dde9; font-size:15px; }
.gc .lab-chapters button:hover, .gc .lab-chapters button.on { background:rgba(255,255,255,.07); color:#fff; }
.gc .lab-chapters button:focus-visible { outline:2px solid #c4b5fd; outline-offset:1px; }
.gc .lab-chapters time { font:600 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color:#c4b5fd; min-width:34px; }
.gc .lab-video-text { position:relative; }
.gc .lab-video-text .eyebrow { color:#c4b5fd; }
.gc .lab-video-text h2 { font:700 26px/1.2 var(--font-head); letter-spacing:-.02em; color:#fff; margin:6px 0 10px; }
.gc .lab-video-text p { color:#a3afc2; font-size:16px; }

/* Preguntas */
.lab-questions { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.lab-q { position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 18px 16px 22px; box-shadow:var(--shadow); }
.lab-q::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c); }
.lab-q b { display:block; font:650 16.5px/1.35 var(--font-head); color:var(--text); margin-bottom:10px; }
.lab-q span { font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text); }

/* Pulso: semanas en columnas */
.pulse { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px 18px; box-shadow:var(--shadow); }
.pulse-scroll { overflow-x:auto; padding-top:18px; }
.pulse-grid { display:grid; grid-auto-flow:column; grid-auto-columns:20px; gap:5px; min-width:max-content; }
.pw { display:grid; grid-template-rows:repeat(7, 20px); gap:5px; position:relative; }
.pw[data-m]::before { content:attr(data-m); position:absolute; top:-18px; left:0; font-size:11px; color:var(--text3); text-transform:capitalize; }
.pc { display:block; width:20px; height:20px; border-radius:5px; background:var(--surface3); }
.pc.out { background:transparent; }
.pc.design { background:repeating-linear-gradient(135deg, rgba(168,85,247,.35) 0 3px, rgba(168,85,247,.12) 3px 6px); }
.pc.l1 { background:#a5f3fc; } .pc.l2 { background:#22d3ee; } .pc.l3 { background:#0891b2; } .pc.l4 { background:#155e75; }
.pulse-legend { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin-top:14px; font-size:13px; color:var(--text2); }
.pulse-legend span { display:inline-flex; align-items:center; gap:4px; }
.pulse-legend .pc { width:12px; min-width:12px; height:12px; display:inline-block; }
.pulse-total { margin-left:auto; }
.pulse-total b { color:var(--text); }

/* Bitácora */
.gc .log { list-style:none; margin:0; padding:0 0 0 28px; position:relative; }
.gc .log::before { content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg, #a855f7, var(--border) 40%); }
.log-entry { position:relative; padding:0 0 24px; --c:#94a3b8; }
.log-entry[data-color="amber"] { --c:var(--c-amber); } .log-entry[data-color="cyan"] { --c:var(--c-cyan); } .log-entry[data-color="blue"] { --c:var(--c-blue); }
.log-entry[data-color="green"] { --c:var(--c-green); } .log-entry[data-color="purple"] { --c:#a855f7; }
.log-entry::before { content:""; position:absolute; left:-25px; top:6px; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--c); }
.log-entry.is-new::before { background:#a855f7; border-color:#e9d5ff; box-shadow:0 0 0 6px rgba(168,85,247,.2); }
.log-top { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:13px; color:var(--text3); }
.log-top .chip { font-size:10.5px; }
.log-new { font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:#a855f7; color:#fff; }
.gc .log-entry h3 { font:650 19px/1.3 var(--font-head); margin:6px 0 4px; color:var(--text); }
.gc .log-entry p { font-size:15.5px; color:var(--text2); }
.gc .log-entry .log-why { margin-top:6px; font-size:15px; color:var(--text); }
.gc .log-entry .log-why::before { content:"Por qué → "; font-weight:600; color:#7c3aed; }

/* "Próximamente" */
.soon-tag { font-style:normal; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:999px;
  color:#7c3aed; background:rgba(168,85,247,.1); border:1px solid rgba(168,85,247,.25); white-space:nowrap; }
.guide-nav .is-soon { display:flex; align-items:center; gap:10px; padding:7px 10px; font-size:14.5px; line-height:1.3; color:var(--subtle); flex-wrap:wrap; cursor:default; }
.guide-nav .is-soon .gdot { opacity:.55; }
.guide-nav .is-soon .soon-tag { margin-left:auto; }
.toc-cards .is-soon { display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px dashed var(--line); border-radius:14px; padding:14px 16px; opacity:.85; }
.toc-cards .is-soon b { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font:650 15.5px/1.3 var(--font-head); margin-bottom:2px; }
.toc-cards .is-soon span:not(.gdot) { font-size:13.5px; color:var(--muted); line-height:1.4; }
.gmap-layer.is-soon { cursor:default; }
.gmap-layer.is-soon .gmap-go { opacity:.35; }
.gmap .soon-tag { margin-left:6px; color:#d8b4fe; background:rgba(168,85,247,.16); border-color:rgba(168,85,247,.4); letter-spacing:.08em; }

@media (max-width: 900px) {
  .live-tiles { grid-template-columns:repeat(2, 1fr); }
  .gc .lab-video { grid-template-columns:1fr; }
  .lab-video-frame { max-width:360px; width:100%; margin:0 auto; }
  .pulse-total { margin-left:0; }
}
@media (prefers-reduced-motion: reduce) { .live-pill i { animation:none; } }

/* Franja de fases bajo el pulso */
.pulse-bands { position: relative; height: 22px; margin-top: 8px; }
.pb { position: absolute; top: 0; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 700 11px var(--font-head); color: #fff; background: var(--c, #64748b); cursor: default; }
.pb[data-color="ink"] { --c: #64748b; } .pb[data-color="blue"] { --c: var(--c-blue); } .pb[data-color="cyan"] { --c: var(--c-cyan); }
.pb[data-color="purple"] { --c: #a855f7; } .pb[data-color="green"] { --c: var(--c-green); } .pb[data-color="amber"] { --c: var(--c-amber); }
.pulse-phases { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; color: var(--text2); }
.pulse-phases li { display: inline-flex; align-items: center; gap: 6px; }
.pulse-phases b { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font: 700 11px var(--font-head); color: #fff; background: var(--c, #64748b); }
.pulse-phases li[data-color="ink"] { --c: #64748b; } .pulse-phases li[data-color="blue"] { --c: var(--c-blue); } .pulse-phases li[data-color="cyan"] { --c: var(--c-cyan); }
.pulse-phases li[data-color="purple"] { --c: #a855f7; } .pulse-phases li[data-color="green"] { --c: var(--c-green); }

/* ---- Capturas reales y avisos (guía Claude desde cero) ---- */
.gc .shot { margin: 14px 0 26px; }
.gc .shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(15,23,42,.12); background: #0c0c0c; }
.gc .shot figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.gc .shot figcaption b { color: var(--text); }
.gc .note { margin: 14px 0 22px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid var(--c, var(--accent)); background: var(--surface); font-size: 15px; line-height: 1.6; color: var(--text2); }
.gc .note strong { color: var(--text); }
.gc .note[data-color="amber"] { background: rgba(245,158,11,.06); }
.gc .os-label { display: inline-block; margin: 10px 0 6px; font: 600 13px var(--font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.gc .sources { font-size: 14px; color: var(--muted); }
.gc .sources a { color: var(--accent); }
.gc .gwf-phase.is-soon { opacity: .45; cursor: default; }
.guide-mini-track a[data-color="purple"] { --c: var(--c-purple); }
.guide-mini-track span.is-soon { display:block; height:8px; border-radius:6px; background: var(--surface-2); opacity:.5; }
.gc .card.purple-b { border-left: 2px solid var(--c-purple); }
.gc .card.purple-b .card-title { color: var(--c-purple-text); }