/* Site-wide 21st.dev ports — Inducta tokens only.
   Footer 7, glass blog cards, lime spotlight, legal TOC, float CTA hide. */

.dk-footer.site-foot-21{padding:48px 0 56px;background:rgba(255,255,255,.62)}
.dk-footer.site-foot-21 .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4.5vw,56px)}
.foot-top{
  display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:clamp(28px,5vw,64px);
  align-items:start;padding-bottom:28px;
}
.foot-brand img{height:17px;width:auto;display:block}
.foot-brand p{
  margin:14px 0 12px;max-width:34ch;font-size:14.5px;line-height:1.55;color:var(--muted);
}
.foot-brand a.mail{
  font-family:'Geist Mono',monospace;font-size:12px;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line-2);
}
.foot-col .k{
  font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 14px;
}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col a{
  font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;
  width:max-content;
}
.foot-col a:hover{color:var(--ink);box-shadow:inset 0 -.35em 0 var(--yl,#D9FF45)}
.foot-bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 22px;
  padding-top:22px;border-top:1px solid var(--line);
}
.foot-bar p{
  margin:0;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.04em;
  color:var(--faint);line-height:1.65;
}
.foot-bar a{color:var(--ink-2);text-underline-offset:3px}
.foot-bar a:hover{color:var(--ink)}
@media(max-width:720px){
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}

#floatCta.is-foot-hide{
  opacity:0 !important;
  pointer-events:none !important;
  transform:translate(-50%,18px) !important;
}

/* Glass Blog Card #10598 — light, no fake authors */
.guide.gcard-21{
  position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  overflow:hidden;border:1px solid rgba(255,255,255,.9);border-radius:22px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 16px 40px rgba(12,29,46,.08);
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s,border-color .28s;
}
.guide.gcard-21:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 70px rgba(12,29,46,.14),0 0 0 1px rgba(217,255,69,.35);
}
.gcard-21 .guide-media{height:210px;background-size:cover;background-repeat:no-repeat;position:relative;transform:scale(1.02);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.gcard-21:hover .guide-media{transform:scale(1.08)}
.gcard-21 .guide-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(255,255,255,.96) 100%)}
.gcard-21 .g-open{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(243,245,247,.22);backdrop-filter:blur(2px);opacity:0;transition:opacity .28s;
}
.gcard-21:hover .g-open{opacity:1}
.gcard-21 .g-open span{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  background:#D9FF45;color:#0C1D2E;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:13.5px;
  box-shadow:0 10px 24px rgba(180,214,20,.4);
}
.gcard-21 .guide-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.gcard-21 .guide-tag{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:500}
.gcard-21 h2{font-size:clamp(20px,2.2vw,26px);font-weight:700;line-height:1.22;letter-spacing:-.03em;color:var(--ink)}
.gcard-21 p{font-size:15px;line-height:1.6;color:var(--muted);flex:1}
.gcard-21 .guide-go{font-family:'Geist Mono',monospace;font-size:12.5px;color:var(--ink);margin-top:8px}

/* Spotlight Card #2220 — lime wash, light glass */
[data-spot]{position:relative;overflow:hidden}
[data-spot]>.spot-wash{
  pointer-events:none;position:absolute;inset:0;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(217,255,69,.22),transparent 72%);
}
[data-spot]:hover>.spot-wash{opacity:1}
/* Tree connectors sit outside .nd — do not clip them */
#stage [data-spot]{overflow:visible}
#stage [data-spot]>.spot-wash{border-radius:inherit}

/* Glass CTA #25647 — light lime ring */
.cta-glass-21{
  position:relative;border-radius:28px;padding:clamp(28px,4vw,48px);
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.92);
  box-shadow:0 20px 50px rgba(12,29,46,.08),0 0 0 1px rgba(217,255,69,.28);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
#agenda.cta-glass-21 [class*="text-white"]{color:var(--ink)!important}
#agenda.cta-glass-21 .dark-surface{background:rgba(255,255,255,.72);border-color:var(--line,#E3E9EF)}
#agenda.cta-glass-21 .border-white\/10{border-color:var(--line,#E3E9EF)}
.cta-glass-21::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 180deg,transparent 40%,#D9FF45 60%,transparent 80%);
  opacity:.35;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;-webkit-mask-composite:xor;padding:1px;
}

/* Legal TOC #18113 — active lime rail */
.legal-toc a.is-on{
  color:var(--ink);font-weight:600;
  box-shadow:inset 3px 0 0 #D9FF45;
}

/* Agendar glass calendar chrome (Glass Calendar #5113, light) */
.panel.cal-21{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 24px 60px rgba(12,29,46,.1);
}
.panel.cal-21 .day.is-available::after{background:#D9FF45}
.panel.cal-21 .step-pill.is-active{background:#fff;box-shadow:inset 0 -2px 0 #D9FF45}

/* Hover Testimonial #6433 + Minimal Quote #9638 — objection cards, no fake avatars */
.qcard-21{
  position:relative;border-radius:22px;padding:22px 22px 20px;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.92);
  box-shadow:0 14px 36px rgba(12,29,46,.06);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.qcard-21 .qmark{
  display:block;font-family:'Inter Tight',sans-serif;font-size:42px;line-height:.7;
  color:#D9FF45;margin-bottom:10px;
}
.qcard-21 .q{font-family:'Inter Tight',sans-serif;font-weight:800;letter-spacing:-.03em;color:var(--ink,#0C1D2E);font-size:18px;line-height:1.25}
.qcard-21.is-lime{
  background:#D9FF45;border-color:rgba(12,29,46,.08);
  box-shadow:0 16px 40px rgba(180,214,20,.28);
}
.qcard-21.is-lime .qmark{color:rgba(12,29,46,.35)}
.qcard-21.is-lime p{color:#0C1D2E}

/* How It Works Timeline #19863 + Feature Bento — numbered process cells */
.step-21{
  position:relative;border-radius:20px;padding:20px 20px 18px;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.92);
  box-shadow:0 12px 32px rgba(12,29,46,.06);
}
.step-21 .step-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;margin-bottom:10px;
  background:#F3F5F7;border:1px solid #E3E9EF;
  font-family:'Geist Mono',monospace;font-size:11px;font-weight:600;color:#0C1D2E;
}
.step-21.is-lime{background:#D9FF45;border-color:rgba(12,29,46,.08)}
.step-21.is-lime .step-n{background:#0C1D2E;color:#D9FF45;border-color:#0C1D2E}
.step-21.is-lime h3,.step-21.is-lime p{color:#0C1D2E}

.ink-cell-21{background:#0C1D2E !important;color:#fff !important;border-color:#0C1D2E !important}
.lime-cell-21{background:#D9FF45 !important;color:#0C1D2E !important;border-color:rgba(12,29,46,.08) !important}

/* Diagnóstico tree chrome — glass + lime boss, no transform (scroll owns it) */
#stage .nd{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(12,29,46,.07);
}
#stage .nd.boss{
  background:#fff;
  box-shadow:0 14px 40px rgba(217,255,69,.22),0 0 0 1px rgba(217,255,69,.5);
}
#stage .nd.boss::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 140deg,transparent 35%,#D9FF45 58%,transparent 78%);
  opacity:.4;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;-webkit-mask-composite:xor;padding:1px;
}

/* Basic Accordion #24849 — light, plus/minus, no dark */
.acc-21{display:flex;flex-direction:column;gap:12px}
.acc-21 .acc-item{
  border-radius:20px;padding:0 22px;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.92);
  box-shadow:0 12px 32px rgba(12,29,46,.06);
}
.acc-21 .acc-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:20px 0;font-family:'Inter Tight',sans-serif;font-weight:700;
  letter-spacing:-.03em;color:#0C1D2E;font-size:17px;line-height:1.3;
}
.acc-21 .acc-item summary::-webkit-details-marker{display:none}
.acc-21 .acc-plus{
  flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:#F3F5F7;border:1px solid #E3E9EF;font-size:18px;line-height:1;color:#0C1D2E;
}
.acc-21 .acc-item[open] .acc-plus{background:#D9FF45;border-color:rgba(12,29,46,.08)}
.acc-21 .acc-item[open] .acc-plus::after{content:"–"}
.acc-21 .acc-item:not([open]) .acc-plus::after{content:"+"}
.acc-21 .acc-body{padding:0 0 20px;font-size:14.5px;line-height:1.65;color:#44566A}

.calc-out[data-spot]{
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.92);
  box-shadow:0 10px 26px rgba(12,29,46,.05);
}

[data-magnetic]{display:inline-flex}

/* Reading Progress #23553 — lime fill, page scroll */
.read-prog-21{
  position:fixed;top:0;left:0;right:0;z-index:90;height:3px;
  background:rgba(12,29,46,.06);pointer-events:none;
}
.read-prog-21>i{
  display:block;height:100%;width:0;background:#D9FF45;
  transform-origin:left center;will-change:width;
}
.read-prog-21 .read-meta{
  display:none;
}

/* Article TOC #18113 — sticky rail, lime active */
.article-toc{
  position:fixed;right:clamp(12px,2.4vw,36px);top:108px;z-index:24;
  width:196px;display:none;flex-direction:column;gap:6px;
  padding:14px 0 14px 14px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.92);
  border-radius:16px;box-shadow:0 12px 32px rgba(12,29,46,.06);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.article-toc .k{
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#67788B;margin:0 12px 8px 0;
}
.article-toc a{
  display:block;padding:6px 12px 6px 10px;margin-right:8px;
  font-size:13px;line-height:1.35;color:#44566A;text-decoration:none;
  border-left:3px solid transparent;
}
.article-toc a:hover{color:#0C1D2E}
.article-toc a.is-on{color:#0C1D2E;font-weight:600;border-left-color:#D9FF45}
@media(min-width:1180px){
  .article-21 .article-toc{display:flex}
  /* web-next (2026-09-16): el lugar del índice se reserva en la sección, no dentro de la columna, para que el texto use su
     ancho completo y quede centrado a la izquierda del índice. */
  body.article-21 section{padding-right:236px}
}

/* Astryx Blockquote #17211 — lime rail + glass */
.pull-21{
  margin:28px 0;padding:20px 22px 20px 24px;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.92);
  border-left:3px solid #D9FF45;border-radius:0 18px 18px 0;
  box-shadow:0 12px 32px rgba(12,29,46,.05);
  font-family:'Inter Tight',sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(18px,2.1vw,22px);line-height:1.35;color:#0C1D2E;
}

/* Gate timeline #19863 — numbered rail, not a stacked list */
.gate-21{list-style:none;margin-top:clamp(26px,3vw,38px);padding:0;display:flex;flex-direction:column}
.gate-21 .gate-item{
  display:flex;gap:16px;position:relative;padding:0 0 22px;
}
.gate-21 .gate-item:last-child{padding-bottom:0}
.gate-21 .gate-item:not(:last-child)::before{
  content:"";position:absolute;left:13px;top:30px;bottom:-2px;width:1px;background:#E3E9EF;
}
.gate-21 .gate-item .step-n{margin:2px 0 0;flex:none;position:relative;z-index:1;background:#fff}
.gate-21 .gate-item:last-child .step-n{background:#D9FF45;border-color:rgba(12,29,46,.08)}

/* Stepper #766 — Concilium proceso chrome, Inducta tokens only */
.demo-shell.step-shell-21{
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.92);
  box-shadow:0 20px 50px rgba(12,29,46,.08);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.step-shell-21 .demo-step-pill.active{
  border-color:rgba(217,255,69,.7);
  background:linear-gradient(180deg,rgba(217,255,69,.22),#fff);
  box-shadow:0 10px 26px rgba(180,214,20,.16);
}
.step-shell-21 .demo-step-pill.active .num{background:#0C1D2E;color:#D9FF45}
.step-shell-21 .demo-step-pill.done .num{background:#D9FF45;color:#0C1D2E}
.step-shell-21 .demo-stage-head .st-ico{background:#D9FF45;color:#0C1D2E}
.step-shell-21 .demo-bar>span{background:#D9FF45}
.step-shell-21 .demo-field .v.ai{color:#0C1D2E}
.step-shell-21 .demo-seq-node:not(:last-child)::before{background:#D9FF45;opacity:.55}
.step-shell-21 .demo-seq-ico.email,
.step-shell-21 .demo-seq-ico.li{background:rgba(217,255,69,.18);border-color:rgba(217,255,69,.45);color:#0C1D2E}
.step-shell-21 .demo-msg.us .demo-bubble{background:rgba(217,255,69,.18);border-color:rgba(217,255,69,.4)}
.step-shell-21 .demo-typing span{background:#0C1D2E}
.step-shell-21 .demo-outcome{
  color:#0C1D2E;
  background:#D9FF45;
  box-shadow:0 16px 40px rgba(180,214,20,.28);
}
.step-shell-21 .demo-outcome .oh{color:rgba(12,29,46,.55)}
.step-shell-21 .demo-outcome .oh .material-symbols-outlined{color:#0C1D2E}
.step-shell-21 .demo-outcome .osub{color:#0C1D2E}
.step-shell-21 .demo-om{background:rgba(255,255,255,.55);border-color:rgba(12,29,46,.08)}
.step-shell-21 .demo-om .k{color:#44566A}
.step-shell-21 .demo-btn-primary{background:#D9FF45;color:#0C1D2E}

/* Glass Cards #8106 — runtime / Claude referral, no peach */
.runtime,.claude-panel{
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:0 16px 40px rgba(12,29,46,.07) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.runtime .rt-name,.claude-panel .rt-name{color:#0C1D2E !important}
.runtime img.rt-logo{box-shadow:0 8px 20px rgba(12,29,46,.1) !important}
.claude-button{
  background:#D9FF45 !important;color:#0C1D2E !important;
  box-shadow:0 10px 24px rgba(180,214,20,.35);
}

/* Qualifier board — glass tiles, click logic unchanged */
.qual-item[data-spot]{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 10px 24px rgba(12,29,46,.05);
}
.qual-item.is-on{box-shadow:0 0 0 1px rgba(217,255,69,.55),0 12px 28px rgba(180,214,20,.18)}

/* Guide roster / brain / dirección — glass over generic stacked cards */
.agent[data-spot],.brain-card[data-spot],.lead-agent[data-spot],.sources[data-spot]{
  background:rgba(255,255,255,.82);
  border-color:rgba(255,255,255,.92);
  box-shadow:0 12px 32px rgba(12,29,46,.06);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.lead-agent[data-spot]{background:rgba(255,255,255,.88)}

/* Demo chrome only — lead rows, enrich cards, chat frames. Step JS untouched. */
.demo-lead-row,.demo-enrich-card,.demo-field,.demo-seq-body .prev{
  background:rgba(255,255,255,.86) !important;
  border-color:rgba(255,255,255,.94) !important;
  box-shadow:0 8px 20px rgba(12,29,46,.05);
}
.demo-avatar,.demo-msg.them .who{background:#0C1D2E;color:#fff}
.demo-stage{
  background:rgba(243,245,247,.72);
  border-color:rgba(255,255,255,.92);
}

@media(prefers-reduced-motion:reduce){
  .gcard-21,.gcard-21 .guide-media,[data-spot]>.spot-wash{transition:none}
  .gcard-21:hover,.gcard-21:hover .guide-media{transform:none}
  .read-prog-21>i{transition:none}
}

/* Firma del autor (web-next, 2026-09-16): foto, nombre y cargo. Sustituye la firma exportada de Canva. */
.author-21{display:flex;align-items:center;justify-content:center;gap:14px;margin:40px auto 0;text-align:left}
.author-21 img{width:56px;height:56px;border-radius:999px;object-fit:cover;display:block;flex:none;
  box-shadow:0 0 0 1px rgba(12,29,46,.08),0 8px 20px rgba(12,29,46,.08)}
.author-21 .author-name{margin:0;font-weight:600;font-size:15px;line-height:1.3;color:#0C1D2E}
.author-21 .author-role{margin:2px 0 0;font-size:13px;line-height:1.3;color:#67788B}
.author-21.stack{flex-direction:column;text-align:center;margin:0 auto;gap:12px}
.author-21.stack img{width:132px;height:132px}