/* Página /productos (antes portafolio.ity-tech.com). Se carga DESPUÉS de main.css y components.css.
   Las clases que chocaban con el sitio llevan prefijo pf- (pf-btn, pf-hero, pf-section, pf-grid, pf-eyebrow)
   y las reglas de elementos (h1, p, a…) van dentro de :where(.pf), sin subir su prioridad, para no tocar el menú ni el pie del sitio. */
/* Portafolio ITY Tech · mismo sistema de diseño que ity-tech.com (tokens copiados de su :root).
   Concepto: expediente técnico. Cada producto es una ficha con su evidencia; la bitácora es el único momento interactivo fuerte. */

:root{
  --bg:#0F151C; --bg-deep:#0B1119; --surface:#182230; --surface-2:#1D2836;
  --text:#E9EDF2; --body-c:#BEC9D4; --muted:#97A3B2;
  --amber:#E9A23B; --amber-deep:#C9861F; --critical:#F0876F; --success:#6FCF8F; --proto:#9DB7DD;
  --line:rgba(233,237,242,.12); --line-strong:rgba(233,237,242,.28);
  --font-display:"Space Grotesk","Segoe UI",sans-serif;
  --font-body:"Public Sans","Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","Courier New",monospace;
  --radius:6px; --nav-height:68px; --t:200ms ease-out;
  color-scheme:dark;
}
:where(.pf) img{max-width:100%;height:auto;display:block}
:where(.pf) a{color:var(--amber);text-underline-offset:3px}
:where(.pf) a:hover{color:var(--text)}
:where(.pf) h1,:where(.pf) h2,:where(.pf) h3,:where(.pf) h4{font-family:var(--font-display);color:var(--text);line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.015em}
:where(.pf) h1{font-size:clamp(2.2rem,5.6vw,4.1rem);font-weight:700}
:where(.pf) h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:700}
:where(.pf) h3{font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:700}
:where(.pf) h4{font-size:1.1rem;font-weight:600}
:where(.pf) p{margin:0}
:where(.pf) ul,:where(.pf) ol{margin:0;padding:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pf-eyebrow{font:500 .74rem/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.lede{font-size:1.12rem;max-width:62ch}

/* ---------- nav ---------- */
.pf-btn{display:inline-flex;align-items:center;gap:10px;font:600 .95rem var(--font-body);text-decoration:none;border-radius:var(--radius);padding:12px 20px;border:1px solid transparent;cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t)}
.btn-primary{background:var(--amber);color:var(--bg-deep)}
.btn-primary:hover{background:var(--text);color:var(--bg-deep)}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.pf-btn{min-height:44px}
.btn-sm{padding:8px 14px;font-size:.85rem}
.pf-btn svg{width:16px;height:16px;flex:none}

/* ---------- hero ---------- */
.pf-hero{padding-block:72px 64px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.pf-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 80% at 85% 20%,#000 0%,transparent 70%);opacity:.5;pointer-events:none}
.pf-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:start}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.pf-hero h1 em{font-style:normal;color:var(--amber)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

.index{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 10px;min-width:0}
.index-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.index-head b{font:600 .72rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.index ol{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;counter-reset:ix}
.index li{counter-increment:ix}
.index li a{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);font:600 1.02rem var(--font-display);transition:color var(--t)}
.index li a::before{content:counter(ix,decimal-leading-zero);font:500 .7rem var(--font-mono);color:var(--muted)}
.index li a:hover{color:var(--amber)}
.index-foot{display:flex;flex-wrap:wrap;gap:6px 16px;padding:16px 0 12px;font:500 .72rem var(--font-mono);letter-spacing:.06em;color:var(--amber)}
.index-foot span::before{content:"+ ";color:var(--muted)}

/* ---------- sections ---------- */
.pf-section{padding-block:96px}
.pf-section + .pf-section{border-top:1px solid var(--line)}
.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:48px;max-width:760px}
.band{background:var(--bg-deep)}

/* ---------- product dossiers ---------- */
.dossier{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;padding-block:56px;border-top:1px solid var(--line)}
.dossier:first-of-type{border-top:0;padding-top:0}
.dossier.flip .d-copy{order:2}
.d-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.d-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.d-sector{font:500 .74rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.d-name{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.d-name h3{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.d-copy > p:not([class]){font-size:1.06rem;max-width:56ch}
.feats{list-style:none;display:grid;gap:10px}
.feats li{position:relative;padding-left:22px;font-size:.96rem}
.feats li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--amber)}
.guard{border-left:2px solid var(--amber);padding:4px 0 4px 16px;font-size:.92rem;color:var(--body-c)}
.guard b{display:block;font:600 .7rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
.stack{font:400 .76rem var(--font-mono);color:var(--muted)}

/* mock frame shared */
.mock{background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;min-width:0;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.mock-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.mock-bar span{font:500 .72rem var(--font-mono);color:var(--muted)}
.mock-tag{font:500 .64rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);border-radius:3px;padding:2px 6px}
.mock-body{padding:18px;display:flex;flex-direction:column;gap:18px}
.mock-label{font:500 .68rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* CRM mock: pipeline + plano */
.pipe{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:8px 20px}
.pipe li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;align-items:baseline;min-width:0}
.pipe li b{font:500 .8rem var(--font-body);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe li span{font:500 .7rem var(--font-mono);color:var(--muted)}
.pipe li i{grid-column:1 / -1;height:4px;border-radius:2px;background:var(--bg);position:relative;overflow:hidden}
.pipe li i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--line-strong);border-radius:2px}
.pipe li:nth-child(1){--p:5%}.pipe li:nth-child(2){--p:15%}.pipe li:nth-child(3){--p:30%}.pipe li:nth-child(4){--p:45%}.pipe li:nth-child(5){--p:55%}
.pipe li:nth-child(6){--p:70%}.pipe li:nth-child(7){--p:85%}.pipe li:nth-child(8){--p:95%}.pipe li:nth-child(9){--p:100%}.pipe li:nth-child(10){--p:0%}
.pipe li.hot b{color:var(--amber)}
.pipe li.hot i::after{background:var(--amber)}
.pipe li.won b{color:var(--success)}
.pipe li.won i::after{background:var(--success)}
.pipe li.lost b{color:var(--muted)}
.plano{display:flex;flex-direction:column;gap:6px}
.lots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.lot{height:38px;border-radius:3px;display:flex;align-items:center;justify-content:center;font:500 .7rem var(--font-mono);color:var(--bg-deep)}
.l-d{background:var(--success)}
.l-r{background:var(--amber)}
.l-v{background:#5B6676;color:var(--text)}
.lot.sel{outline:2px solid var(--text);outline-offset:2px}
.street{font:500 .64rem var(--font-mono);letter-spacing:.3em;text-align:center;color:var(--muted);padding:6px 0;border-block:1px dashed var(--line-strong)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.78rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:10px;min-width:0}
.kpi b{display:block;font:600 1.15rem var(--font-mono);color:var(--text)}
.kpi span{font-size:.74rem;color:var(--muted)}
.kpi.alert b{color:var(--critical)}

/* ERP mock: póliza */
.poliza{width:100%;border-collapse:collapse;font-size:.86rem}
.poliza th{font:500 .68rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 6px;border-bottom:1px solid var(--line-strong)}
.poliza td{padding:9px 6px;border-bottom:1px solid var(--line);color:var(--text)}
.poliza td.n,.poliza th.n{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.poliza td small{display:block;color:var(--muted);font:400 .72rem var(--font-mono)}
.poliza tfoot td{font-weight:600;border-bottom:0;border-top:1px solid var(--line-strong)}
.tbl-scroll{overflow-x:auto}
.check{display:flex;gap:10px;align-items:flex-start;background:rgba(111,207,143,.08);border:1px solid rgba(111,207,143,.35);border-radius:4px;padding:10px 12px;font-size:.85rem;color:var(--text)}
.check svg{width:18px;height:18px;flex:none;color:var(--success);margin-top:2px}
.reject{display:flex;gap:10px;align-items:flex-start;background:rgba(240,135,111,.07);border:1px solid rgba(240,135,111,.35);border-radius:4px;padding:10px 12px;font-size:.85rem;color:var(--text)}
.reject svg{width:18px;height:18px;flex:none;color:var(--critical);margin-top:2px}
.reject code,.check code{font:500 .78rem var(--font-mono);color:var(--critical)}
.fel{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 .74rem var(--font-mono);color:var(--muted)}
.fel b{color:var(--text);font-weight:500}

/* Clínicas mock: expediente (claro, como el producto) */
.cx{background:#fff;border-color:var(--line-strong)}
.cx-app{display:grid;grid-template-columns:118px minmax(0,1fr);min-height:100%}
.cx-side{list-style:none;background:#0D2B30;padding:14px 0;display:flex;flex-direction:column;gap:2px}
.cx-side li{font-size:.8rem;color:#B5CBCE;padding:7px 14px}
.cx-side li.on{background:rgba(255,255,255,.08);color:#fff;font-weight:600;box-shadow:inset 3px 0 #4FB3C4}
.cx-main{padding:16px;display:flex;flex-direction:column;gap:12px;background:#F6F8F9;color:#1B2A30;min-width:0}
.cx-pt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.cx-av{width:40px;height:40px;border-radius:9px;background:#B5532F;color:#fff;display:grid;place-items:center;font:700 .9rem var(--font-display);flex:none}
.cx-pt b{display:block;font:700 1.05rem var(--font-display);color:#10181C}
.cx-pt small{font-size:.76rem;color:#5D6B72}
.cx-tags{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.cx-tags span{font-size:.7rem;font-weight:600;border-radius:999px;padding:3px 9px;background:#E3F1F4;color:#0F5E6B}
.cx-tags span.al{background:#FBE4E1;color:#B3261E}
.cx-card{background:#fff;border:1px solid #E1E6E8;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.cx-h{font:600 .66rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#167A8B}
.cx-chart{width:100%;height:auto;display:block}
.cx-chart path{fill:none;stroke-width:1.5}
.cx-chart .p{stroke:#BFDDE3}
.cx-chart .m{stroke:#9CCAD3;stroke-dasharray:4 4}
.cx-chart path.k{stroke:#167A8B;stroke-width:2.5}
.cx-chart g.k{fill:#167A8B}
.cx-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.cx-dl dt{font:500 .64rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#5D6B72}
.cx-dl dd{margin:2px 0 0;font-size:.84rem;font-weight:600;color:#10181C}
.cx-dl code{font:600 .72rem var(--font-mono);background:#E3F1F4;color:#0F5E6B;border-radius:4px;padding:1px 5px}
.cx-ok{font-size:.78rem;color:#1E6B3A;background:#E7F5EC;border:1px solid #BFE3CB;border-radius:6px;padding:8px 10px}
.cx-btns{display:flex;flex-wrap:wrap;gap:8px}
.cx-btns span{font-size:.76rem;font-weight:600;border:1px solid #D3DADD;border-radius:6px;padding:7px 12px;color:#10181C;background:#fff}
.cx-btns span.b1{background:#167A8B;border-color:#167A8B;color:#fff}

/* MiOrden mock: phone ledger */
.phone{max-width:320px;margin:0 auto;width:100%;background:var(--bg-deep);border:1px solid var(--line-strong);border-radius:28px;padding:14px 12px 16px}
.phone-in{background:var(--surface);border-radius:18px;padding:16px 14px;display:flex;flex-direction:column;gap:12px}
.ph-top{display:flex;justify-content:space-between;align-items:baseline}
.ph-top b{font:600 1rem var(--font-display);color:var(--text)}
.ph-top span{font:500 .7rem var(--font-mono);color:var(--muted)}
.budget{display:flex;flex-direction:column;gap:9px}
.budget div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:.82rem;color:var(--text)}
.budget span.mono{color:var(--muted);font-size:.76rem}
.bar{grid-column:1 / -1;height:6px;border-radius:3px;background:var(--bg);overflow:hidden}
.bar i{display:block;height:100%;background:var(--amber);border-radius:3px}
.bar i.ok{background:var(--success)}
.bar i.over{background:var(--critical)}
.w82{width:82%}.w46{width:46%}.w104{width:100%}.w63{width:63%}
.ticket{display:flex;gap:10px;align-items:center;background:var(--bg);border:1px dashed var(--line-strong);border-radius:8px;padding:10px;font-size:.8rem;color:var(--text)}
.ticket svg{width:22px;height:22px;color:var(--amber);flex:none}
.ticket small{display:block;color:var(--muted);font-size:.72rem}
.pantry{display:flex;flex-wrap:wrap;gap:6px}
.pantry span{font-size:.72rem;border-radius:999px;padding:3px 9px;border:1px solid var(--line-strong);color:var(--text)}
.pantry span.low{border-color:var(--critical);color:var(--critical)}
.med{background:var(--bg);border:1px solid rgba(111,207,143,.35);border-left:3px solid var(--success);border-radius:8px;padding:10px;font-size:.8rem;color:var(--text)}
.med b{display:block;font-weight:600}
.med small{display:block;color:var(--muted);font-size:.72rem}

/* ---------- more projects grid ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0;transition:border-color var(--t)}
.card:hover{border-color:var(--line-strong)}
.card p{font-size:.94rem}
.card .feats li{font-size:.88rem}
.card .stack{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:980px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pf-grid{grid-template-columns:minmax(0,1fr)}}

/* soporte e infraestructura */
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.services .card h3{font-size:1.3rem}
.svc-k{font:500 .7rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.svc-link{margin-top:auto;padding-top:12px;min-height:44px;border-top:1px solid var(--line);display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;text-decoration:none}
.svc-link svg{transition:transform var(--t)}
.svc-link:hover svg{transform:translateX(3px)}
@media (max-width:860px){.services{grid-template-columns:minmax(0,1fr)}}

/* websites */
.diffs{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.diffs li{background:var(--bg);padding:22px;display:flex;flex-direction:column;gap:6px}
.diffs b{font:600 1.02rem var(--font-display);color:var(--text)}
.diffs b::before{content:"";display:block;width:18px;height:2px;background:var(--amber);margin-bottom:12px}
.diffs span{font-size:.92rem}
.sub-head{display:flex;flex-direction:column;gap:8px;margin:64px 0 24px}
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pack{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;min-width:0}
.pack:hover{border-color:var(--line-strong)}
.pk-n{font:500 .72rem var(--font-mono);color:var(--amber)}
.pack h4{font-size:1.4rem}
.pack .feats li{font-size:.9rem}
.pk-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.pk-foot span{font:500 .74rem var(--font-mono);color:var(--muted)}
@media (max-width:980px){.diffs,.packs{grid-template-columns:minmax(0,1fr)}}
@media (min-width:641px) and (max-width:980px){.diffs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- differences: vendor questions ---------- */
.qa{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line-strong)}
.qa > li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:16px 48px;padding:28px 0;border-bottom:1px solid var(--line)}
.qa h3{font-size:1.25rem;line-height:1.3}
.qa .q-n{display:block;font:500 .7rem var(--font-mono);letter-spacing:.12em;color:var(--amber);margin-bottom:8px}
.qa .ans{display:flex;flex-direction:column;gap:10px}
.qa .ans > p:first-child{color:var(--text);font-size:1.04rem}
.qa .ans > p:first-child b{color:var(--amber)}
.where{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.where span{font:500 .7rem var(--font-mono);background:var(--surface-2);border-radius:3px;padding:3px 8px;color:var(--body-c)}

/* isolation diagram */
.iso{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:6px}
.iso figure{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:12px;min-width:0}
.iso figcaption{font:500 .7rem var(--font-mono);letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.iso svg{width:100%;height:auto;display:block}
.iso .bad{color:var(--critical)}.iso .good{color:var(--success)}

/* ---------- bitácora demo (the bold moment) ---------- */
.ledger{background:var(--bg-deep);border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;margin-top:40px}
.ledger-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--surface)}
.ledger-head h3{font-size:1.15rem}
.ledger-scroll{overflow-x:auto}
.log{width:100%;border-collapse:collapse;font:400 .82rem var(--font-mono);min-width:720px}
.log th{font-weight:500;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 20px;border-bottom:1px solid var(--line)}
.log td{padding:12px 20px;border-bottom:1px solid var(--line);color:var(--text);vertical-align:top;transition:background 300ms ease-out,color 300ms}
.log td.f{white-space:nowrap}
.log td.id{color:var(--muted);width:44px}
.log td.h{color:var(--amber);white-space:nowrap}
.log td.v{white-space:nowrap;width:150px}
.log td.v span{display:inline-flex;align-items:center;gap:6px;color:var(--success);font-size:.74rem}
.log td.v span::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.log tr{transition:background 300ms ease-out}
.log tr.denied{background:rgba(240,135,111,.14)}
.log tr.broken{background:rgba(240,135,111,.08)}
.log tr.broken td.v span{color:var(--critical)}
.log tr.broken td.d{color:var(--critical)}
.ledger-actions{display:flex;flex-wrap:wrap;gap:10px;padding:16px 20px;border-top:1px solid var(--line)}
.term{margin:0;padding:16px 20px;border-top:1px solid var(--line);font:400 .8rem/1.7 var(--font-mono);color:var(--body-c);background:#080D13;min-height:96px;white-space:pre-wrap;overflow-wrap:anywhere}
.term .p{color:var(--muted)}
.term .err{color:var(--critical)}
.term .ok{color:var(--success)}
.ledger-note{padding:12px 20px 16px;font-size:.8rem;color:var(--muted)}

/* ---------- console mock ---------- */
.console-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:start}
.console-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.console-points{list-style:none;display:flex;flex-direction:column;gap:18px}
.console-points li{display:flex;flex-direction:column;gap:4px}
.console-points b{color:var(--text);font-weight:600}
.tenants{width:100%;border-collapse:collapse;font-size:.84rem}
.tenants th{font:500 .66rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px;border-bottom:1px solid var(--line-strong)}
.tenants td{padding:10px 8px;border-bottom:1px solid var(--line);color:var(--text);white-space:nowrap}
.tenants td.mono{font-size:.78rem}
.health{display:inline-flex;align-items:center;gap:6px;font:500 .72rem var(--font-mono);color:var(--c)}
.health::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.h-ok{--c:var(--success)}.h-warn{--c:var(--amber)}
.who{display:flex;align-items:center;gap:8px;font:500 .72rem var(--font-mono);color:var(--success)}
.prov{list-style:none;display:flex;flex-direction:column;gap:0;counter-reset:p;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.prov li{counter-increment:p;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;font-size:.84rem;color:var(--text);border-bottom:1px solid var(--line);background:var(--bg)}
.prov li:last-child{border-bottom:0}
.prov li::before{content:counter(p);font:500 .72rem var(--font-mono);color:var(--muted)}
.prov li span{font:500 .7rem var(--font-mono);color:var(--success)}
.prov li.once{background:rgba(233,162,59,.08)}
.prov li.once span{color:var(--amber)}

/* ---------- process + contact ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--amber);padding-top:16px}
.steps li::before{content:"0" counter(s);font:600 .8rem var(--font-mono);color:var(--amber)}
.steps p{font-size:.94rem}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}
.cta{margin-top:72px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:48px}
.cta-copy{display:flex;flex-direction:column;gap:16px}
.contact-list{display:flex;flex-direction:column;gap:14px}
.contact-list dt{font:500 .68rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-list dd{margin:2px 0 0;font:500 1.05rem var(--font-mono);color:var(--text);overflow-wrap:anywhere}
.contact-list dd a{color:var(--text);display:inline-block;padding-block:11px;margin-block:-11px}
@media (max-width:760px){.cta{grid-template-columns:minmax(0,1fr);padding:28px 20px}}


/* ---------- responsive ---------- */
@media (max-width:980px){
  .pf-hero .wrap,.dossier,.console-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .dossier.flip .d-copy{order:0}
  .qa > li{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .pf-section{padding-block:64px}
  .pf-hero{padding-block:48px}
  .lots{grid-template-columns:repeat(5,minmax(0,1fr))}
  .iso{grid-template-columns:minmax(0,1fr)}
  .cx-app{grid-template-columns:minmax(0,1fr)}
  .cx-side{display:none}
  .cx-dl{grid-template-columns:minmax(0,1fr)}
  .cx-tags{margin-left:0}
  .kpi b{font-size:1rem}
}

/* ---------- motion: solo con .fx (lo agrega el JS si no hay reduced-motion) ---------- */
/* barra de progreso de lectura (solo navegadores con scroll-timeline) */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--amber);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
@supports (animation-timeline:scroll()){.fx .progress{animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}
/* hero: resplandor que deriva, entrada escalonada, subrayado del énfasis */
.pf-hero::after{content:"";position:absolute;width:680px;height:680px;right:-160px;top:-240px;background:radial-gradient(circle,rgba(233,162,59,.16),transparent 62%);pointer-events:none}
.fx .pf-hero::after{animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-160px,120px) scale(1.2)}}
.fx .hero-copy > *{animation:rise 700ms cubic-bezier(.2,.7,.2,1) both}
.fx .hero-copy > :nth-child(2){animation-delay:90ms}.fx .hero-copy > :nth-child(3){animation-delay:180ms}.fx .hero-copy > :nth-child(4){animation-delay:270ms}
.fx .index{animation:rise 800ms cubic-bezier(.2,.7,.2,1) 150ms both}
.fx .index li,.fx .index-foot{animation:rise 500ms ease-out both}.fx .index-foot{animation-delay:1000ms}
.fx .index li:nth-child(1){animation-delay:355ms}.fx .index li:nth-child(2){animation-delay:410ms}.fx .index li:nth-child(3){animation-delay:465ms}.fx .index li:nth-child(4){animation-delay:520ms}.fx .index li:nth-child(5){animation-delay:575ms}.fx .index li:nth-child(6){animation-delay:630ms}.fx .index li:nth-child(7){animation-delay:685ms}.fx .index li:nth-child(8){animation-delay:740ms}.fx .index li:nth-child(9){animation-delay:795ms}.fx .index li:nth-child(10){animation-delay:850ms}.fx .index li:nth-child(11){animation-delay:905ms}.fx .index li:nth-child(12){animation-delay:960ms}
.pf-hero h1 em{background:linear-gradient(var(--amber),var(--amber)) 0 100%/100% 3px no-repeat;padding-bottom:2px}
.fx .pf-hero h1 em{animation:underline 900ms cubic-bezier(.2,.7,.2,1) 700ms both}
@keyframes underline{from{background-size:0 3px}}
.settled .hero-copy > *,.settled .index,.settled .index li,.settled .index-foot,.settled .pf-hero h1 em{animation:none!important}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
/* luz que sigue al cursor en tarjetas (main.js pone --mx/--my) */
@media (hover:hover){
  .card,.pack,.index,.diffs li{background-image:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(233,162,59,.09),transparent 45%)}
  .card,.pack{transition:border-color var(--t),transform 300ms ease-out}
  .card:hover,.pack:hover,.fx .reveal.in.card:hover,.fx .reveal.in.pack:hover{transform:translateY(-4px);border-color:rgba(233,162,59,.35);transition-delay:0s}
  .mock,.phone{transition:transform 500ms cubic-bezier(.2,.7,.2,1),box-shadow 500ms}
  .mock:hover,.phone:hover{transform:translateY(-6px);box-shadow:0 44px 80px -34px rgba(0,0,0,.75),0 0 0 1px rgba(233,162,59,.22)}
}
/* tarjetas en cuadrícula: entrada escalonada */
.fx .pf-grid .reveal:nth-child(3n+2),.fx .packs .reveal:nth-child(2),.fx .diffs .reveal:nth-child(3n+2),.fx .steps .reveal:nth-child(2){transition-delay:100ms}
.fx .pf-grid .reveal:nth-child(3n),.fx .packs .reveal:nth-child(3),.fx .diffs .reveal:nth-child(3n),.fx .steps .reveal:nth-child(3){transition-delay:200ms}
.fx .steps .reveal:nth-child(4){transition-delay:300ms}
/* mocks que cobran vida al entrar en pantalla */
.fx .reveal .pipe li i::after,.fx .reveal .bar i{transform:scaleX(0);transform-origin:0 50%;transition:transform 1100ms cubic-bezier(.2,.7,.2,1)}
.fx .reveal.in .pipe li i::after,.fx .reveal.in .bar i{transform:none}
.fx .reveal .pipe li:nth-child(1) i::after{transition-delay:220ms}.fx .reveal .pipe li:nth-child(2) i::after{transition-delay:290ms}.fx .reveal .pipe li:nth-child(3) i::after{transition-delay:360ms}.fx .reveal .pipe li:nth-child(4) i::after{transition-delay:430ms}.fx .reveal .pipe li:nth-child(5) i::after{transition-delay:500ms}.fx .reveal .pipe li:nth-child(6) i::after{transition-delay:570ms}.fx .reveal .pipe li:nth-child(7) i::after{transition-delay:640ms}.fx .reveal .pipe li:nth-child(8) i::after{transition-delay:710ms}.fx .reveal .pipe li:nth-child(9) i::after{transition-delay:780ms}.fx .reveal .pipe li:nth-child(10) i::after{transition-delay:850ms}
.fx .reveal .bar i{transition-delay:400ms}
.fx .reveal .lot{opacity:0;transform:scale(.5);transition:opacity 400ms,transform 400ms cubic-bezier(.3,1.5,.5,1)}
.fx .reveal.in .lot{opacity:1;transform:none}
.fx .reveal .lot:nth-child(1){transition-delay:245ms}.fx .reveal .lot:nth-child(2){transition-delay:290ms}.fx .reveal .lot:nth-child(3){transition-delay:335ms}.fx .reveal .lot:nth-child(4){transition-delay:380ms}.fx .reveal .lot:nth-child(5){transition-delay:425ms}.fx .reveal .lot:nth-child(6){transition-delay:470ms}.fx .reveal .lot:nth-child(7){transition-delay:515ms}.fx .reveal .lot:nth-child(8){transition-delay:560ms}.fx .reveal .lot:nth-child(9){transition-delay:605ms}.fx .reveal .lot:nth-child(10){transition-delay:650ms}
.fx .lot.sel{animation:ring 2.2s ease-out 2s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(233,162,59,.7)}70%,100%{box-shadow:0 0 0 10px rgba(233,162,59,0)}}
.fx .reveal .cx-chart path.k{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1600ms ease-out 400ms}
.fx .reveal.in .cx-chart path.k{stroke-dashoffset:0}
.fx .reveal .cx-chart circle{opacity:0;transition:opacity 300ms}
.fx .reveal.in .cx-chart circle{opacity:1}
.fx .reveal.in .cx-chart circle:nth-child(1){transition-delay:500ms}.fx .reveal.in .cx-chart circle:nth-child(2){transition-delay:900ms}.fx .reveal.in .cx-chart circle:nth-child(3){transition-delay:1300ms}.fx .reveal.in .cx-chart circle:nth-child(4){transition-delay:1800ms}
.fx .reveal .prov li{opacity:0;transform:translateX(-10px);transition:opacity 400ms,transform 400ms}
.fx .reveal.in .prov li{opacity:1;transform:none}
.fx .reveal .prov li:nth-child(1){transition-delay:410ms}.fx .reveal .prov li:nth-child(2){transition-delay:570ms}.fx .reveal .prov li:nth-child(3){transition-delay:730ms}.fx .reveal .prov li:nth-child(4){transition-delay:890ms}.fx .reveal .prov li:nth-child(5){transition-delay:1050ms}

.fx .services .reveal:nth-child(2n){transition-delay:100ms}
.fx .health.h-ok::before{animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.log tr.scan{background:rgba(233,162,59,.12)}

.fx .reveal{opacity:0;transform:translateY(18px);transition:opacity 600ms ease-out,transform 600ms ease-out}
.fx .reveal.in{opacity:1;transform:none}
.fx .log tr.denied td{animation:shake 380ms ease-in-out}
@media (max-width:700px){
  .log{min-width:0}
  .log thead{display:none}
  .log tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .log td{padding:0;border:0;width:auto}
  .log td.d{flex-basis:100%;font-size:.86rem}
  .log td.u{color:var(--muted)}
  .log td.v{margin-left:auto;width:auto}
  .ledger-head,.ledger-actions,.term,.ledger-note{padding-left:16px;padding-right:16px}
}
@keyframes shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
.sr-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- barra de secciones (fija bajo el menú del sitio; se desliza de lado) ---------- */
html{scroll-padding-top:calc(var(--nav-height) + 72px)}
.pf-subnav{position:sticky;top:var(--nav-height);z-index:90;background:rgba(11,17,25,.95);border-bottom:1px solid var(--line)}
.pf-subnav ul{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:10px;list-style:none;margin:0;
  mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.pf-subnav ul::-webkit-scrollbar{display:none}
.pf-subnav li{flex:none}
.pf-subnav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;
  font-size:.88rem;white-space:nowrap;color:var(--body-c);text-decoration:none;transition:color var(--t),border-color var(--t)}
.pf-subnav a:hover{color:var(--text);border-color:var(--amber)}
.pf-subnav a.pf-cta{background:var(--amber);border-color:var(--amber);color:var(--bg-deep);font-weight:600}
.pf .pf-hero{padding-block:56px 64px}