/* forma.pixel.ceo · capa del sitio (propuesta mezclada A + B + C aprobada el 2026-10-11), tema claro por defecto.
   Capas: familia/ventana.css (tokens oscuros de code.pixel.ceo) → css/forma.css → este archivo.
   El HTML trae <html data-theme="light"> y js/tema.js solo lo cambia si la persona eligió oscuro.
   Contrastes medidos en MEZCLA.md. */

/* ---------- tokens que forma.css necesita (valores oscuros = los de code.pixel.ceo) ---------- */
:root{
  --sunk:#0c0c10;--chrome:#0d0d11;--dot:#3a3a44;--dot2:#26262e;--stage:#09090c;
  --ok-line:#3ddc9755;--amb-line:#ffc85740;--amb-wash:rgba(255,200,87,.05);
  --vio-wash:rgba(139,108,255,.07);--vio-line:#8b6cff66;
  --shot-sh:0 30px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02) inset;
  --thumb-sh:0 0 0 1px rgba(255,255,255,.06),0 16px 40px -12px rgba(0,0,0,.8);
  --hdr-bg:rgba(6,6,8,.82);--btn-h:#6544df;--lift-line:#3A3A46;
  --grid:rgba(139,108,255,.055);--pin-ring:rgba(114,84,240,.28);
  --aur1:.30;--aur2:.16;--aur3:.12;
}

/* ---------- tema claro de la familia (pixel.ceo + tokens claros de la app Forma) ---------- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F6F5F0;      /* fondo de pixel.ceo, muestreado y confirmado en su site.css */
  --panel:#FFFFFF;   /* panel de la app Forma en claro */
  --el:#EFEDE6;      /* controles, kbd */
  --line:#DDDAD0;--line2:#E8E5DC;
  --t:#15132A;       /* tinta de pixel.ceo · 16,6:1 sobre --bg */
  --ts:#47435F;      /* 8,6:1 */
  --tm:#5E5A7A;      /* 6,0:1 */
  --vio:#6A3DF0;     /* violeta de pixel.ceo; acentos, P, raíl */
  --lav:#5530D6;     /* kicker y enlaces · 6,9:1 (el #B9A8FF del oscuro da 1,9:1 aquí) */
  --btn:#6A3DF0;     /* blanco encima 5,9:1 */
  --ok:#137A55;--amb:#7A5700;--cor:#B42318;
  --lex-a:#00B48C;--lex-b:#2B8FD6;--lex-c:#6A3CF0;--lex-side-near:#0E7A68;--lex-side-far:#3B28A0;
  --lex-glow:rgba(0,180,140,.16);--lex-shadow:rgba(0,150,120,.25);
  --sunk:#F3F1EB;--chrome:#FAF9F6;--dot:#C9C5BA;--dot2:#DCD9D0;--stage:#EFEDE7;
  --ok-line:rgba(19,122,85,.35);--amb-line:rgba(122,87,0,.26);--amb-wash:rgba(217,164,0,.07);
  --vio-wash:rgba(106,61,240,.06);--vio-line:rgba(106,61,240,.38);
  --shot-sh:0 30px 70px -34px rgba(40,30,90,.32),0 1px 0 rgba(255,255,255,.9) inset;
  --thumb-sh:0 0 0 1px rgba(21,19,42,.08),0 14px 32px -14px rgba(40,30,90,.28);
  --hdr-bg:rgba(246,245,240,.94);--btn-h:#5A2FE0;--lift-line:#C9C5BA;
  --grid:rgba(106,61,240,.06);--pin-ring:rgba(106,61,240,.22);
  --aur1:.20;--aur2:.11;--aur3:.11;
}
html[data-theme="light"]{color-scheme:light}
html,body{background:var(--bg)}
.hdr{background:var(--hdr-bg)}
.btn:hover{background:var(--btn-h)}
@media (hover:hover) and (pointer:fine){.lift:hover{border-color:var(--lift-line)}}
[data-theme="light"] .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(40,30,90,.25)}
[data-theme="light"] .btn.g{background:var(--panel);box-shadow:0 1px 2px rgba(40,30,90,.06)}
[data-theme="light"] .fam a.on{background:var(--panel)}
[data-theme="light"] .pie .credit,[data-theme="light"] .fam-card .tx b{color:var(--t)}

/* capturas: una por tema cuando existe la clara; si no, la oscura dentro de su ventana oscura */
[data-theme="light"] .th-d,[data-theme="dark"] .th-l{display:none!important}
.solo-osc.shot,.t-osc{--panel:#101014;--line:#292932;--chrome:#0d0d11;--dot2:#26262e;--t:#F4F4F6;--ts:#A3A3AD;--tm:#868691;--stage:#060608}

/* ---------- conmutador de tema (instantáneo, sin transición) ---------- */
.tema{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r2);color:var(--ts)}
.tema svg{width:14px;height:14px}
.tema:hover{color:var(--t)}
[data-theme="dark"] .tema svg{transform:rotate(180deg)}
.lang{color:var(--ts)}

/* ---------- hero: composición de A, P de B, ventana de C ---------- */
.heroM{position:relative;isolation:isolate;padding:52px 0 0;text-align:center}
.rejilla{position:absolute;left:0;right:0;top:-56px;height:980px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-position:center top;
  -webkit-mask:linear-gradient(180deg,#000 55%,transparent);mask:linear-gradient(180deg,#000 55%,transparent)}
.heroM .hp{position:relative;width:180px;height:166px;margin:0 auto 6px;display:grid;place-items:center}
.heroM .hp .aur{inset:0}.heroM .hp canvas{position:relative}
.aur i:nth-child(1){background:radial-gradient(closest-side,rgba(139,108,255,var(--aur1)),transparent)}
.aur i:nth-child(2){background:radial-gradient(closest-side,rgba(207,116,182,var(--aur2)),transparent)}
.aur i:nth-child(3){background:radial-gradient(closest-side,rgba(101,184,202,var(--aur3)),transparent)}
.pasos-p{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font:500 11.5px/1 var(--mono)}
.pasos-p li{display:flex;align-items:center;gap:7px}
.pasos-p li::before{content:'';width:5px;height:5px;border-radius:1px;background:var(--vio)}
.pasos-p a{color:var(--ts)}
.pasos-p a:hover{color:var(--lav);text-decoration:none}
.pasos-p li.wait{opacity:.35}.pasos-p li.wait::before{background:var(--dot)}
.heroM h1{max-width:900px;margin:20px auto 0}
.heroM h1 em{font-style:normal;color:var(--ts)}
.heroM .lead{margin-top:16px;max-width:640px}
.heroM .acts{display:flex;gap:10px;justify-content:center;margin-top:26px}
.heroM .meta{justify-content:center;margin-top:14px}

.hm-stage{position:relative;max-width:1296px;margin:52px auto 0;padding:0 32px}
.hm-stage::before{content:'';position:absolute;inset:-60px 8% auto;height:420px;z-index:-1;background:radial-gradient(50% 60% at 50% 40%,var(--vio-wash),transparent 70%)}
.hm-win{border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;background:var(--panel);box-shadow:var(--shot-sh)}
.hm-win .tt{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--chrome);font:500 11px var(--mono);color:var(--tm)}
.hm-win .tt i{width:7px;height:7px;border-radius:50%;background:var(--dot2)}
.hm-win .tt span{margin-left:6px}.hm-win .tt .x{margin-left:auto}

/* cortina: la captura del tema de la página abajo; la del otro tema, recortada a la izquierda */
.cortina{position:relative;aspect-ratio:1440/900;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.cortina img{position:absolute;inset:0;width:100%;height:100%;-webkit-user-drag:none}
[data-theme="light"] .cortina .osc,[data-theme="dark"] .cortina .cla{z-index:1;clip-path:inset(0 calc(100% - var(--c)) 0 0)}
.cortina .hdl{position:absolute;z-index:3;top:0;bottom:0;left:var(--c);width:1px;margin-left:-.5px;background:var(--vio);box-shadow:0 0 0 1px rgba(139,108,255,.22)}
.cortina .hdl span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:34px;border-radius:var(--r2);background:var(--panel);border:1px solid var(--vio);display:grid;place-items:center;font:600 12px var(--mono);color:var(--t);box-shadow:0 6px 18px -6px rgba(40,30,90,.45)}
.cortina .hdl:focus-visible{outline:none}.cortina .hdl:focus-visible span{outline:2px solid var(--lav);outline-offset:2px}
.cortina .lab{position:absolute;z-index:3;top:50%;transform:translateY(-50%);font:500 11px/1 var(--mono);padding:5px 7px;border-radius:3px;pointer-events:none}
.cortina .lab b{font-weight:500}
.cortina .lab.l{right:calc(100% - var(--c) + 22px)}
.cortina .lab.r{left:calc(var(--c) + 22px)}
.lab.l,[data-theme="dark"] .lab.r{background:#101014;color:#F4F4F6;border:1px solid #34343F}
.lab.r,[data-theme="dark"] .lab.l{background:#FFFFFF;color:#121216;border:1px solid #DCDCE2}
[data-theme="light"] .lab .td,[data-theme="dark"] .lab .tl{display:none}
.pin{position:absolute;z-index:2;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:var(--btn);color:#fff;font:600 11px/20px var(--mono);text-align:center;box-shadow:0 0 0 3px var(--pin-ring),0 4px 12px rgba(20,16,50,.35)}
.legend{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 24px;text-align:left}
.legend li{display:flex;gap:10px;font-size:13px;color:var(--ts);line-height:1.45}
.legend li b,.legend li.hint::before{flex:none;width:18px;height:18px;border-radius:50%;background:var(--el);border:1px solid var(--line);font:600 10.5px/16px var(--mono);text-align:center;color:var(--lav)}
.legend li.hint::before{content:'‹›';border-radius:3px;border-color:var(--vio-line)}
.legend li strong{color:var(--t);font-weight:500}
.heroM .cap{margin-top:18px}

/* ---------- recorrido (B, compacto) ---------- */
.rail{list-style:none;margin:0;padding:0;position:relative}
.rail::before,.rail::after{content:'';position:absolute;left:9px;top:10px;bottom:60px;width:1px}
.rail::before{background:var(--line)}
.rail::after{background:linear-gradient(180deg,var(--vio),var(--vio) 85%,transparent);transform-origin:top;transform:scaleY(var(--rail,1))}
.paso{display:grid;grid-template-columns:176px minmax(0,320px) minmax(0,1fr);gap:40px;padding:0 0 40px;align-items:start}
.node{position:relative;display:flex;flex-direction:column;gap:12px;padding-left:34px}
.node .dot{position:absolute;z-index:1;left:4px;top:1px;width:11px;height:11px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1.5px var(--vio)}
.paso.last .node .dot{background:var(--vio);box-shadow:0 0 0 1.5px var(--vio),0 0 12px rgba(207,116,182,.55)}
.node .mono{font:500 11.5px/1.2 var(--mono);color:var(--lav)}
.node canvas{margin-left:-10px}
.paso .txt{display:flex;flex-direction:column;gap:12px}
.paso .txt h3{font-size:19px}
.paso .txt p{font-size:14.5px;color:var(--ts)}
.paso .vis{min-width:0}
.paso .vis{display:flex;justify-content:flex-end}
.paso .shot{width:100%;max-width:520px}
.shot.crop-h,.shot.crop-e{max-height:316px}
.shot.crop-q{max-height:268px}
.cap .tag{margin-right:6px}

/* ---------- agente: rejilla compacta, función por función ---------- */
.g6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{border:1px solid var(--line);border-radius:var(--r3);background:var(--panel);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.tile .im{position:relative;height:196px;overflow:hidden;border-bottom:1px solid var(--line);background:var(--stage)}
.tile .im img{display:block;width:100%;height:auto}
.tile:first-child .im img{margin-top:-88px}
.tile .im.mid{display:grid;place-items:center;padding:16px}
.tile .im.mid img{width:auto;max-width:100%;border-radius:3px}
.tile.solo-osc .im{background:#060608;border-bottom-color:#292932}
.tile .tx{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px}
.tile .n{font:500 11px var(--mono);color:var(--lav);display:flex;align-items:center;gap:6px}
.tile h3{font-size:15.5px;letter-spacing:-.01em}
.tile p{font-size:13.5px;color:var(--ts)}

/* ---------- cuenta ---------- */
.cu{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:48px;align-items:start}
.cu .sec-h{margin-bottom:0}
.cu .pts{margin-top:6px}
.acct2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cuenta .cap{margin-top:16px}
[data-theme="light"] .stagebox{background:radial-gradient(60% 70% at 50% 40%,rgba(106,61,240,.06),transparent),var(--stage)}

/* ---------- cierre (C) ---------- */
.cierre{padding:104px 0 96px}
.cierre .cp{position:relative;width:160px;height:150px;margin:0 auto 16px;display:grid;place-items:center}
.cierre .cp .aur{inset:0}.cierre .cp canvas{position:relative}
.cierre h2{font-size:28px}
.cierre .acts{margin-top:22px;display:flex;justify-content:center}

/* ---------- movimiento: solo transform y opacity ---------- */
.js .rv-up{opacity:0;transform:translateY(14px)}
.js .rv-up.in{opacity:1;transform:none;transition:opacity 620ms var(--ease-out) var(--d,0ms),transform 620ms var(--ease-out) var(--d,0ms)}
.js .pin{opacity:0;transform:translate(-50%,-50%) scale(.9)}
.js .in .pin{opacity:1;transform:translate(-50%,-50%);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.js .in .pin:nth-child(n){transition-delay:calc(var(--i,0) * 40ms + 380ms)}
.aur i{animation:pfa 11s var(--ease-io) infinite alternate}
.aur i:nth-child(2){animation-duration:13s}.aur i:nth-child(3){animation-duration:9s;animation-direction:alternate-reverse}
@keyframes pfa{to{transform:translate(-46%,-54%) scale(1.06)}}
.oculto .aur i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .aur i{animation:none}
  .js .rv-up{transform:none}
  .js .rv-up.in{transition:opacity 240ms ease-out}
  .js .pin{transform:translate(-50%,-50%)}
  .js .in .pin{transition:opacity 240ms ease-out}
}

/* ---------- móvil ---------- */
@media (max-width:980px){
  .paso{grid-template-columns:150px minmax(0,1fr);gap:24px 32px}
  .paso .vis{grid-column:2}
  .g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cu{grid-template-columns:minmax(0,1fr);gap:28px}
  .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .heroM{padding-top:32px}
  .heroM .hp{width:140px;height:128px}
  .heroM .hp canvas{transform:scale(.8)}
  .heroM h1{font-size:29px}
  .heroM h1 br{display:none}
  .heroM .acts{flex-direction:column;align-items:stretch}
  .pasos-p{gap:6px 12px;font-size:11px;max-width:330px}
  .hm-stage{padding:0 16px;margin-top:32px}
  .hm-win .tt .x{display:none}
  .hm-win .tt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pin{width:16px;height:16px;font-size:9.5px;line-height:16px;box-shadow:0 0 0 2px var(--pin-ring)}
  .cortina .lab{font-size:9.5px;padding:3px 5px}
  .cortina .lab.l{right:calc(100% - var(--c) + 17px)}.cortina .lab.r{left:calc(var(--c) + 17px)}
  .cortina .hdl span{width:20px;height:28px;font-size:10px}
  .legend{grid-template-columns:minmax(0,1fr);gap:10px}
  .rail::before,.rail::after{left:9px}
  .paso{grid-template-columns:minmax(0,1fr);gap:16px;padding:0 0 52px 34px}
  .paso .vis{grid-column:auto}
  .node{padding-left:0;flex-direction:row;align-items:center;gap:12px}
  .node .dot{left:-30px;top:3px}
  .node canvas{order:-1;margin-left:0}
  .shot.crop-h{max-height:380px}.shot.crop-e{max-height:300px}
  .g6,.acct2{grid-template-columns:minmax(0,1fr)}
  .tile .im{height:180px}
  .cierre{padding:80px 0}
  .cierre h2{font-size:23px}
}

/* compacto: secciones a 104 px, la de code.pixel.ceo es 112–120 */
.pf-mezcla .sec{padding-top:104px}
.fam-card .mini.mini-code{background:#060608;border-color:#292932}
.shot .tt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------- cabecera final: «P / Forma» y selector code · forma · ceo ---------- */
.hdr{border-bottom-color:transparent}
.hdr-fija .hdr{border-bottom-color:var(--line2)}
.fbrand{display:flex;align-items:center;gap:0;font:600 15.5px/1 var(--sans);letter-spacing:-.015em;color:var(--t);white-space:nowrap}
.fbrand:hover{text-decoration:none}
.fbrand .bp{display:flex;align-items:center;gap:9px;margin-right:9px}
.fbrand .bp canvas{display:block;margin:-4px -3px -4px -4px}
.fbrand .bsl{display:block;width:1px;height:16px;background:var(--tm);opacity:.5;transform:rotate(18deg)}
/* mientras la P del hero se ve: solo «Forma», en el sitio exacto donde empieza la marca */
.p-oculta .fbrand{transform:translateX(calc(-1 * var(--bp-w,32px)))}
.p-oculta .fbrand .bp{opacity:0}
.hdr-listo .fbrand{transition:transform 220ms var(--ease-out)}
.hdr-listo .fbrand .bp{transition:opacity 220ms var(--ease-out)}
.fam{font:500 11.5px/1 var(--mono);letter-spacing:0}
.fam a{padding:0 9px}
.hdr .r{gap:12px}
.hdr .wrap{gap:28px}
.nav{gap:22px}
/* menú móvil */
.mpanel{position:absolute;left:0;right:0;top:100%;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 18px 40px -20px rgba(20,16,50,.35)}
.hdr .mpanel .wrap{height:auto;display:flex;flex-direction:column;align-items:stretch;gap:14px;padding-top:6px;padding-bottom:18px;text-align:left}
.mpanel nav:first-child{display:flex;flex-direction:column}
.mpanel nav:first-child a{display:flex;align-items:center;height:44px;font-size:15px;color:var(--t);border-bottom:1px solid var(--line2)}
.mfam{display:flex;gap:6px;font:500 12px/1 var(--mono)}
.mfam a{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r2);color:var(--ts)}
.mfam a i{width:5px;height:5px;border-radius:1px;background:var(--dot)}
.mfam a.on{color:var(--t);background:var(--el)}.mfam a.on i{background:var(--vio)}
.ment{font-size:14px;color:var(--lav)}
@media (min-width:981px){.mpanel{display:none}}
.menu-abierto .menu i{background:transparent;box-shadow:none;position:relative}
.menu-abierto .menu i::before,.menu-abierto .menu i::after{content:'';position:absolute;left:0;top:0;width:12px;height:1px;background:var(--t);transform:rotate(45deg)}
.menu-abierto .menu i::after{transform:rotate(-45deg)}
.skip{z-index:30;color:var(--t)}

/* ---------- novedades ---------- */
.nov .sec-h h1{font-size:34px;line-height:1.12}
.vers{display:flex;flex-direction:column;gap:16px;max-width:780px}
.ver{border:1px solid var(--line);border-radius:var(--r3);background:var(--panel);padding:24px 26px;display:flex;flex-direction:column;gap:12px}
.ver header{display:flex;align-items:center;gap:10px;font:400 12px var(--mono);color:var(--tm)}
.ver .vn{font-size:13px;font-weight:500;color:var(--lav)}
.ver h2{font-size:20px;line-height:1.25}
.ver p{color:var(--ts);font-size:15px}
.ver .pts{font-size:14.5px}
.ver-dl{display:flex;align-items:center;gap:16px;margin-top:6px}
.pag-nov .sec{padding-top:72px}

@media (prefers-reduced-motion:reduce){
  .hdr-listo .fbrand{transition:none}
  .hdr-listo .fbrand .bp{transition:opacity 200ms ease-out}
}
@media (max-width:760px){
  .nov .sec-h h1{font-size:27px}
  .ver{padding:18px}
  .ver-dl{flex-direction:column;align-items:flex-start;gap:10px}
  .pag-nov .sec{padding-top:44px}
}