/* ============================================================
   VÉRTICE — plataforma de operaciones (marca tecnológica ficticia, demo aislada)
   Identidad "Instrumentación nocturna": grafito, texto frío, acento lima,
   interfaz de producto construida en HTML/CSS y movimiento de señal y pulso.
   Plantilla page-vertice · clase de cuerpo .vertice-frame
   ============================================================ */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700;
	src:url('fonts/vertice/spacegrotesk/spacegrotesk-var.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap;
	src:url('fonts/vertice/barlow/barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap;
	src:url('fonts/vertice/barlow/barlow-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap;
	src:url('fonts/vertice/barlow/barlow-600.woff2') format('woff2'); }

.vertice-frame {
	--vx-bg:#0a0d12; --vx-bg2:#0e131b; --vx-panel:#131925; --vx-panel2:#19212f;
	--vx-line:rgba(255,255,255,.09); --vx-line2:rgba(255,255,255,.18);
	--vx-text:#e9edf4; --vx-muted:#9aa4b7; --vx-lime:#c6f432; --vx-lime-d:#9fc61f; --vx-blue:#5cc8ff;
	--vx-red:#ff6b6b;
	--vx-head:'Space Grotesk','Archivo',Helvetica,sans-serif;
	--vx-body:'Barlow',-apple-system,'Helvetica Neue',Arial,sans-serif;
	--vx-mono:ui-monospace,'SF Mono','Cascadia Code',Consolas,Menlo,monospace;
	--vx-gut:clamp(1.2rem,4.5vw,3rem); --vx-max:1240px;
	--vx-ease:cubic-bezier(.22,.61,.36,1);
}
.vertice-frame, .vertice-frame body { background:var(--vx-bg); color:var(--vx-text); }
.vertice-frame body { font-family:var(--vx-body); line-height:1.65; font-size:1rem; -webkit-font-smoothing:antialiased; }
.vertice-frame * { box-sizing:border-box; }
.vertice-frame ::selection { background:var(--vx-lime); color:#0a0d12; }
.vertice-frame a { color:inherit; }
.vertice-frame :focus-visible { outline:2px solid var(--vx-lime); outline-offset:3px; }
.vertice-frame .wp-site-blocks { overflow:clip; }
html.hm-lock-vx { overflow:hidden; }

/* ---------- Estructura de contenido a ancho completo ---------- */
.vertice-frame .vertice-main { padding:0; margin:0; max-width:none; }
.vertice-frame .vertice-main .wp-block-post-content,
.vertice-frame .vertice-main .entry-content { max-width:none !important; width:auto !important; margin-inline:0 !important; padding:0 !important; }
.vertice-frame .vertice-main .wp-block-post-content > * { max-width:none !important; margin-inline:0 !important; }
.vx-wrap { max-width:var(--vx-max); margin-inline:auto; padding-inline:var(--vx-gut); width:100%; }
.vx-wrap--narrow { max-width:820px; }
.vx-sec { padding-block:clamp(3.4rem,8vw,6.2rem); border-top:1px solid var(--vx-line); }
.vx-sec--alt { background:var(--vx-bg2); }

/* ---------- Tipografía ---------- */
.vx-eyebrow { font:600 .72rem/1 var(--vx-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--vx-lime); margin:0 0 1.1rem; display:flex; align-items:center; gap:.7rem; }
.vx-eyebrow::before { content:""; width:.5rem; height:.5rem; background:var(--vx-lime); flex:none; }
.vx-h1 { font:600 clamp(2.5rem,6.2vw,5rem)/1.02 var(--vx-head); letter-spacing:-.025em; margin:0 0 1.3rem; color:var(--vx-text); text-wrap:balance; }
.vx-h2 { font:600 clamp(1.8rem,3.8vw,2.8rem)/1.08 var(--vx-head); letter-spacing:-.02em; margin:0 0 1rem; color:var(--vx-text); text-wrap:balance; }
.vx-h3, .vx-card h3 { font:600 1.28rem/1.2 var(--vx-head); letter-spacing:-.01em; margin:0 0 .5rem; color:var(--vx-text); }
.vx-lede { font-size:1.12rem; line-height:1.65; color:var(--vx-muted); max-width:46rem; margin:0 0 1.6rem; }
.vx-fine { font-size:.82rem; color:var(--vx-muted); margin:1.2rem 0 0; }
.vx-demo-note { font-size:.8rem; color:var(--vx-muted); padding-block:1.6rem 2.4rem; margin:0; border-top:1px solid var(--vx-line); }
.vx-mt { margin-top:2rem; }

/* ---------- Botones ---------- */
.vx-btns { display:flex; flex-wrap:wrap; gap:.8rem; }
.vx-btn, .vertice-cta {
	position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.7rem; min-height:48px; padding:0 1.5rem;
	font:600 .8rem/1 var(--vx-mono); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; cursor:pointer;
	color:#0a0d12; background:var(--vx-lime); border:1px solid var(--vx-lime); border-radius:3px;
	background-image:linear-gradient(110deg,transparent 0 35%,rgba(255,255,255,.55) 50%,transparent 65% 100%); background-size:250% 100%; background-position:120% 0; background-repeat:no-repeat;
	transition:background-position .8s var(--vx-ease), box-shadow .5s ease, translate .2s ease;
}
.vx-btn:hover, .vertice-cta:hover, .vx-btn:focus-visible { background-position:-20% 0; box-shadow:0 0 0 4px rgba(198,244,50,.18); color:#0a0d12; }
.vx-btn:active, .vertice-cta:active { translate:0 1px; }
.vx-btn--ghost { background-color:transparent; background-image:none; color:var(--vx-text); border-color:var(--vx-line2); }
.vx-btn--ghost:hover, .vx-btn--ghost:focus-visible { background-image:none; color:var(--vx-lime); border-color:var(--vx-lime); box-shadow:none; }
.vx-link { display:inline-flex; align-items:center; gap:.6rem; min-height:44px; font:600 .8rem/1 var(--vx-mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--vx-lime); }
.vx-link i { font-style:normal; transition:translate .4s var(--vx-ease); }
.vx-link:hover i { translate:5px 0; }
.vx-link .vx-back, .vx-link:hover .vx-back { translate:0 0; }
.vx-link:hover .vx-back { translate:-5px 0; }

/* ---------- Cabecera / pie ---------- */
.vertice-header { position:sticky; top:0; z-index:90; background:rgba(10,13,18,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--vx-line); }
.vertice-header-inner { max-width:var(--vx-max); margin-inline:auto; padding:.6rem var(--vx-gut); display:flex; align-items:center; gap:1.6rem; min-height:64px; }
.vertice-wordmark { display:inline-flex; align-items:center; gap:.7rem; font:600 1.1rem/1 var(--vx-head); letter-spacing:.16em; text-decoration:none; color:var(--vx-text); }
.vertice-wm-icon { width:18px; height:18px; background:var(--vx-lime); clip-path:polygon(50% 0,100% 100%,0 100%); flex:none; }
.vertice-nav { display:flex; gap:.2rem; margin-left:auto; }
.vertice-nav a { display:inline-flex; align-items:center; min-height:44px; padding:0 .8rem; font:500 .92rem/1 var(--vx-body); color:var(--vx-muted); text-decoration:none; position:relative; transition:color .3s ease; }
.vertice-nav a::after { content:""; position:absolute; left:.8rem; right:.8rem; bottom:.55rem; height:2px; background:var(--vx-lime); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--vx-ease); }
.vertice-nav a:hover, .vertice-nav a[aria-current="page"] { color:var(--vx-text); }
.vertice-nav a:hover::after, .vertice-nav a[aria-current="page"]::after { transform:scaleX(1); }
.vertice-toggle { display:none; width:46px; height:46px; margin-left:auto; border:1px solid var(--vx-line2); border-radius:3px; background:transparent; cursor:pointer; position:relative; }
.vertice-toggle span { position:absolute; left:13px; right:13px; height:2px; background:var(--vx-text); transition:transform .45s var(--vx-ease), top .45s var(--vx-ease); }
.vertice-toggle span:first-child { top:18px; } .vertice-toggle span:last-child { top:26px; }
.vertice-toggle[aria-expanded="true"] span:first-child { top:22px; transform:rotate(45deg); }
.vertice-toggle[aria-expanded="true"] span:last-child { top:22px; transform:rotate(-45deg); }
.vertice-footer { background:var(--vx-bg2); border-top:1px solid var(--vx-line); }
.vertice-footer-inner { max-width:var(--vx-max); margin-inline:auto; padding:clamp(2.6rem,6vw,4.2rem) var(--vx-gut) 1.6rem; }
.vertice-footer-top { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,2fr); gap:2.4rem; }
.vertice-footer-tag { color:var(--vx-muted); max-width:24rem; margin:1rem 0 0; }
.vertice-footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.vertice-foot-title { font:600 .72rem/1 var(--vx-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--vx-lime); margin:0 0 .8rem; }
.vertice-footer-cols a { display:flex; align-items:center; min-height:40px; color:var(--vx-muted); text-decoration:none; transition:color .3s ease; }
.vertice-footer-cols a:hover { color:var(--vx-text); }
.vertice-footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem; margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid var(--vx-line); }
.vertice-footer-bottom p { margin:0; font-size:.82rem; color:var(--vx-muted); }
.vertice-footer-bottom a { color:var(--vx-text); }

/* ---------- Hero + interfaz de producto ---------- */
.vx-hero { padding-block:clamp(2.6rem,6vw,5rem) clamp(3rem,7vw,5.6rem); background:radial-gradient(60% 60% at 80% 10%,rgba(198,244,50,.07),transparent 70%), var(--vx-bg); }
.vx-hero-in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
.vx-head { padding-block:clamp(2.4rem,6vw,4.4rem) clamp(2rem,4vw,3rem); background:radial-gradient(50% 80% at 90% 0%,rgba(198,244,50,.06),transparent 70%), var(--vx-bg); }
.vx-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; font:500 .74rem/1 var(--vx-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--vx-muted); margin-bottom:1.8rem; }
.vx-crumbs a { color:var(--vx-muted); text-decoration:none; display:inline-flex; align-items:center; min-height:32px; }
.vx-crumbs a:hover { color:var(--vx-lime); }
.vx-ui { background:var(--vx-panel); border:1px solid var(--vx-line2); border-radius:10px; overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(198,244,50,.04); }
.vx-ui-bar { display:flex; align-items:center; gap:.8rem; padding:.65rem .9rem; border-bottom:1px solid var(--vx-line); background:var(--vx-panel2); }
.vx-dots { display:flex; gap:.35rem; } .vx-dots i { width:9px; height:9px; border-radius:50%; background:var(--vx-line2); }
.vx-ui-title { font:500 .74rem/1 var(--vx-mono); color:var(--vx-muted); }
.vx-live { margin-left:auto; display:inline-flex; align-items:center; gap:.45rem; font:500 .7rem/1 var(--vx-mono); color:var(--vx-lime); text-transform:uppercase; letter-spacing:.1em; }
.vx-live i { width:7px; height:7px; border-radius:50%; background:var(--vx-lime); }
.vx-ui-body { display:grid; grid-template-columns:130px minmax(0,1fr); min-height:300px; }
.vx-ui-side { display:flex; flex-direction:column; gap:.2rem; padding:.8rem; border-right:1px solid var(--vx-line); }
.vx-ui-side button, .vx-dev-tabs button { font:500 .84rem/1 var(--vx-body); color:var(--vx-muted); background:transparent; border:1px solid transparent; border-radius:5px; text-align:left; padding:0 .8rem; min-height:44px; cursor:pointer; transition:background-color .3s ease,color .3s ease,border-color .3s ease; }
.vx-ui-side button:hover, .vx-dev-tabs button:hover { color:var(--vx-text); }
.vx-ui-side button[aria-selected="true"], .vx-dev-tabs button[aria-selected="true"] { background:rgba(198,244,50,.1); color:var(--vx-lime); border-color:rgba(198,244,50,.3); }
.vx-ui-main { padding:1.1rem 1.2rem; min-width:0; }
.vx-pane[hidden] { display:none; }
.vx-pane-k { font:600 .7rem/1 var(--vx-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--vx-muted); margin:0 0 1rem; }
.vx-nodes { display:flex; align-items:center; margin-bottom:1.3rem; }
.vx-n { font:500 .74rem/1 var(--vx-mono); padding:.7rem .75rem; border:1px solid var(--vx-line2); border-radius:5px; background:var(--vx-panel2); white-space:nowrap; }
.vx-n--hot { border-color:var(--vx-lime); color:var(--vx-lime); }
.vx-ln { flex:1; min-width:8px; height:1px; background:var(--vx-line2); position:relative; overflow:hidden; }
.vx-ln::after { content:""; position:absolute; left:-30%; top:0; width:30%; height:100%; background:var(--vx-lime); }
.vx-log, .vx-table { list-style:none; margin:0; padding:0; font:400 .78rem/1.4 var(--vx-mono); color:var(--vx-muted); }
.vx-log li { display:flex; align-items:center; gap:.6rem; padding:.55rem 0; border-top:1px solid var(--vx-line); }
.vx-log i, .vx-table i { width:7px; height:7px; border-radius:50%; flex:none; display:inline-block; margin-right:.5rem; }
.vx-log i { margin:0; }
i.ok { background:var(--vx-lime); } i.run { background:var(--vx-blue); }
.vx-table { width:100%; border-collapse:collapse; }
.vx-table th { text-align:left; font-weight:500; color:var(--vx-muted); padding:.4rem .5rem .6rem 0; border-bottom:1px solid var(--vx-line2); }
.vx-table td { padding:.6rem .5rem .6rem 0; border-bottom:1px solid var(--vx-line); color:var(--vx-text); }
.vx-code { margin:0; padding:1.1rem 1.2rem; background:#080b10; border:1px solid var(--vx-line); border-radius:8px; overflow-x:auto; font:400 .82rem/1.65 var(--vx-mono); color:#cfd6e3; tab-size:2; }
.vx-code code { font:inherit; white-space:pre; }
.c-k { color:var(--vx-lime); } .c-s { color:var(--vx-blue); } .c-c { color:#6e788c; }

/* ---------- Rejillas y tarjetas ---------- */
.vx-grid { display:grid; gap:clamp(.9rem,2vw,1.3rem); margin-top:1.8rem; }
.vx-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.vx-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.vx-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.vx-card, .vx-sc { position:relative; display:flex; flex-direction:column; gap:.4rem; padding:1.5rem; background:var(--vx-panel); border:1px solid var(--vx-line); border-radius:10px; text-decoration:none; color:var(--vx-text); transition:border-color .5s ease, background-color .5s ease, translate .6s var(--vx-ease); overflow:hidden; }
.vx-card::before, .vx-sc::before { content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:var(--vx-lime); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--vx-ease); }
a.vx-card:hover, .vx-sc:hover { border-color:var(--vx-line2); background:var(--vx-panel2); }
a.vx-card:hover::before, .vx-sc:hover::before { transform:scaleX(1); }
.vx-card p { margin:0; color:var(--vx-muted); font-size:.98rem; }
.vx-card-n { font:600 .74rem/1 var(--vx-mono); color:var(--vx-lime); letter-spacing:.1em; margin-bottom:.6rem; display:block; }
.vx-sc-k { font:600 .7rem/1 var(--vx-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--vx-lime); }
.vx-sc-t { font:600 1.2rem/1.25 var(--vx-head); margin:.3rem 0; } .vx-sc-t b { font-weight:600; color:var(--vx-lime); }
.vx-sc-d { color:var(--vx-muted); font-size:.96rem; flex:1; }
.vx-sc-go { margin-top:.8rem; font:600 .76rem/1 var(--vx-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--vx-text); display:inline-flex; gap:.5rem; align-items:center; min-height:32px; }
.vx-sc-go i { font-style:normal; transition:translate .4s var(--vx-ease); } .vx-sc:hover .vx-sc-go i { translate:5px 0; }
.vx-sc[hidden] { display:none; }
.vx-row-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; }

/* ---------- Arquitectura ---------- */
.vx-arch { margin-top:1.6rem; }
.vx-arch-row { display:flex; align-items:center; }
.vx-arch-n { font:600 .84rem/1 var(--vx-mono); color:var(--vx-text); background:var(--vx-panel); border:1px solid var(--vx-line2); border-radius:6px; padding:0 1.1rem; min-height:56px; cursor:pointer; transition:border-color .4s ease,color .4s ease,background-color .4s ease; }
.vx-arch-n:hover { border-color:var(--vx-lime); }
.vx-arch-n[aria-pressed="true"] { border-color:var(--vx-lime); color:var(--vx-lime); background:rgba(198,244,50,.08); }
.vx-arch-l { flex:1; min-width:10px; height:1px; background:var(--vx-line2); position:relative; overflow:hidden; }
.vx-arch-l::after { content:""; position:absolute; left:-30%; width:30%; height:100%; background:var(--vx-lime); top:0; }
.vx-arch-panel { margin-top:1.4rem; padding:1.4rem 1.5rem; background:var(--vx-panel); border:1px solid var(--vx-line); border-left:3px solid var(--vx-lime); border-radius:6px; }
.vx-arch-t { font:600 1.2rem/1 var(--vx-head); margin:0 0 .5rem; } .vx-arch-d { margin:0; color:var(--vx-muted); max-width:46rem; }

/* ---------- Desarrolladores ---------- */
.vx-dev { margin-top:1.6rem; }
.vx-dev-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }

/* ---------- Flujo / fases / pasos ---------- */
.vx-flow { list-style:none; margin:1.8rem 0 1.6rem; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; counter-reset:fl; }
.vx-flow li { counter-increment:fl; position:relative; padding:1.6rem 1rem 0 0; border-top:1px solid var(--vx-line2); display:flex; flex-direction:column; gap:.4rem; }
.vx-flow li::before { content:counter(fl,decimal-leading-zero); position:absolute; top:-.6rem; left:0; font:600 .72rem/1 var(--vx-mono); color:var(--vx-lime); background:var(--vx-bg); padding-right:.6rem; }
.vx-flow b { font:600 1.1rem/1.1 var(--vx-head); } .vx-flow span { color:var(--vx-muted); font-size:.94rem; }
.vx-phases { list-style:none; margin:0; padding:0; border-top:1px solid var(--vx-line2); }
.vx-phase { display:grid; grid-template-columns:5rem minmax(0,1fr); gap:1rem; padding:1.6rem 0; border-bottom:1px solid var(--vx-line); }
.vx-phase p { margin:.3rem 0 0; color:var(--vx-muted); max-width:44rem; }
.vx-mods { display:grid; gap:0; }
.vx-mod { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:2rem; padding:2.2rem 0; border-bottom:1px solid var(--vx-line); }
.vx-mod:first-child { padding-top:0; } .vx-mod:last-child { border-bottom:0; }
.vx-list { margin:0; padding:0; list-style:none; display:grid; gap:.6rem; }
.vx-list li { padding:.8rem 0 .8rem 1.6rem; border-top:1px solid var(--vx-line); position:relative; color:var(--vx-text); }
.vx-list li::before { content:""; position:absolute; left:0; top:1.25rem; width:.55rem; height:.55rem; background:var(--vx-lime); }
.vx-case { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(1.6rem,4vw,3.4rem); }
.vx-steps { margin:0; padding:0; list-style:none; display:grid; gap:.7rem; counter-reset:st; }
.vx-steps li { counter-increment:st; display:flex; gap:.9rem; align-items:flex-start; color:var(--vx-muted); }
.vx-steps li::before { content:counter(st); flex:none; width:1.6rem; height:1.6rem; border:1px solid var(--vx-line2); border-radius:50%; display:grid; place-items:center; font:600 .74rem/1 var(--vx-mono); color:var(--vx-lime); }
.vx-steps--big li { padding:1rem 1.1rem; background:var(--vx-panel); border:1px solid var(--vx-line); border-radius:8px; color:var(--vx-text); font-size:1.05rem; align-items:center; position:relative; }
.vx-steps--big li span { display:none; }
.vx-tags { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0; }
.vx-tags li { font:500 .78rem/1 var(--vx-mono); padding:.6rem .8rem; border:1px solid var(--vx-line2); border-radius:999px; color:var(--vx-text); }
.vx-note { border-top:1px solid var(--vx-line2); }
.vx-note:last-of-type { border-bottom:1px solid var(--vx-line2); }
.vx-note summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px; cursor:pointer; list-style:none; font:600 1.25rem/1.25 var(--vx-head); padding:.6rem 0; }
.vx-note summary::-webkit-details-marker { display:none; }
.vx-note summary i { font:400 1.6rem/1 var(--vx-mono); color:var(--vx-lime); transition:rotate .5s var(--vx-ease); flex:none; }
.vx-note[open] summary i { rotate:45deg; }
.vx-note p { margin:0 0 1.4rem; color:var(--vx-muted); max-width:44rem; }

/* ---------- Filtros ---------- */
.vx-filters { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.vx-chip { font:500 .8rem/1 var(--vx-mono); color:var(--vx-muted); background:transparent; border:1px solid var(--vx-line2); border-radius:999px; padding:0 1.1rem; min-height:44px; cursor:pointer; transition:all .4s ease; }
.vx-chip:hover { color:var(--vx-text); border-color:var(--vx-text); }
.vx-chip.is-on { color:#0a0d12; background:var(--vx-lime); border-color:var(--vx-lime); }
.vx-count { margin-left:auto; font:500 .76rem/1 var(--vx-mono); color:var(--vx-muted); }

/* ---------- Formulario ---------- */
.vx-contact { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr); gap:clamp(2rem,5vw,4rem); }
.vx-form { display:grid; gap:1.2rem; }
.vx-field { display:grid; gap:.45rem; }
.vx-field label { font:600 .72rem/1 var(--vx-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--vx-muted); }
.vx-field input, .vx-field select, .vx-field textarea { font:inherit; color:var(--vx-text); background:var(--vx-panel); border:1px solid var(--vx-line2); border-radius:6px; padding:.8rem 1rem; min-height:48px; width:100%; transition:border-color .3s ease, box-shadow .4s ease; }
.vx-field textarea { min-height:140px; resize:vertical; }
.vx-field select option { background:var(--vx-panel); }
.vx-field input:focus, .vx-field select:focus, .vx-field textarea:focus { outline:none; border-color:var(--vx-lime); box-shadow:0 0 0 3px rgba(198,244,50,.16); }
.vx-field [aria-invalid="true"] { border-color:var(--vx-red); box-shadow:0 0 0 3px rgba(255,107,107,.16); }
.vx-err { margin:0; color:var(--vx-red); font-size:.92rem; } .vx-ok { margin:0; padding:1rem 1.2rem; background:rgba(198,244,50,.08); border:1px solid rgba(198,244,50,.35); border-radius:6px; font-size:.95rem; }
.vx-err[hidden], .vx-ok[hidden] { display:none; }
.vx-form .vx-btn { justify-self:start; }
.vx-aside { padding:1.6rem; background:var(--vx-panel); border:1px solid var(--vx-line); border-radius:10px; align-self:start; }
.vx-cta { background:linear-gradient(180deg,var(--vx-bg2),var(--vx-bg)); }
.vx-cta-in { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.6rem 3rem; }
.vx-cta .vx-lede { margin:0; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
	.vx-hero-in { grid-template-columns:minmax(0,1fr); }
	.vx-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.vx-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.vx-flow { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:1.8rem; }
	.vx-case, .vx-contact, .vx-mod { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 860px) {
	.vertice-toggle { display:block; }
	.vertice-cta { display:none; }
	.vertice-nav { position:fixed; inset:64px 0 0 0; flex-direction:column; gap:0; margin:0; padding:1.2rem var(--vx-gut) 2rem; background:rgba(10,13,18,.98); transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity .4s ease, transform .5s var(--vx-ease), visibility .4s; overflow:auto; }
	.vertice-header[data-open] .vertice-nav { opacity:1; visibility:visible; transform:none; }
	.vertice-nav a { min-height:60px; font:600 1.5rem/1 var(--vx-head); color:var(--vx-text); border-bottom:1px solid var(--vx-line); padding:0 .2rem; }
	.vertice-nav a::after { display:none; }
	.vertice-footer-top { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 620px) {
	.vx-grid--2, .vx-grid--3, .vx-grid--4, .vx-flow { grid-template-columns:minmax(0,1fr); }
	.vx-ui-body { grid-template-columns:minmax(0,1fr); }
	.vx-ui-side { flex-direction:row; border-right:0; border-bottom:1px solid var(--vx-line); overflow-x:auto; }
	.vx-ui-side button { text-align:center; flex:1; }
	.vx-nodes { flex-wrap:wrap; gap:.4rem; } .vx-ln { display:none; }
	.vx-arch-row { flex-direction:column; align-items:stretch; }
	.vx-arch-l { width:1px; height:14px; min-width:0; flex:none; margin-inline:auto; }
	.vx-arch-l::after { display:none; }
	.vx-btns .vx-btn { width:100%; }
	.vertice-footer-cols { grid-template-columns:minmax(0,1fr); gap:1rem; }
	.vx-phase { grid-template-columns:3rem minmax(0,1fr); }
	.vx-count { margin-left:0; width:100%; }
}

/* ---------- Movimiento: señal y pulso (solo sin reducción de movimiento) ---------- */
@media (prefers-reduced-motion: no-preference) {
	html.vx-m .vx-r { opacity:0; clip-path:inset(0 calc(100% - .3px) 0 0); translate:0 14px; transition:clip-path 1.1s var(--vx-ease), opacity .7s ease, translate 1s var(--vx-ease); transition-delay:calc(var(--i,0) * 90ms); }
	html.vx-m .vx-r.is-in { opacity:1; clip-path:inset(0 0 0 0); translate:0 0; }
	html.vx-m .vx-h1 .vx-w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; }
	html.vx-m .vx-h1 .vx-wi { display:inline-block; transform:translateY(105%); transition:transform 1s var(--vx-ease); transition-delay:calc(var(--i,0) * 80ms + 100ms); }
	html.vx-m.vx-in .vx-h1 .vx-wi { transform:none; }
	html.vx-m .vx-hero .vx-ui { opacity:0; translate:0 30px; transition:opacity 1s ease .4s, translate 1.2s var(--vx-ease) .4s; }
	html.vx-m.vx-in .vx-hero .vx-ui { opacity:1; translate:0 0; }
	.vx-live i { animation:vx-pulse 1.8s ease-in-out infinite; }
	@keyframes vx-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(198,244,50,.5); } 50% { box-shadow:0 0 0 6px rgba(198,244,50,0); } }
	.vx-ln::after, .vx-arch-l::after { animation:vx-signal 2.4s linear infinite; }
	.vx-ln:nth-of-type(2)::after { animation-delay:.4s; } .vx-ln:nth-of-type(4)::after { animation-delay:.8s; }
	@keyframes vx-signal { from { left:-30%; } to { left:100%; } }
	.vx-log li.is-new { animation:vx-row .8s var(--vx-ease) both; }
	@keyframes vx-row { from { opacity:0; translate:0 -8px; } to { opacity:1; translate:0 0; } }
	.vx-pane:not([hidden]) { animation:vx-pane .6s var(--vx-ease) both; }
	@keyframes vx-pane { from { opacity:0; translate:0 8px; } to { opacity:1; translate:0 0; } }
	@media (hover: hover) and (pointer: fine) { a.vx-card:hover, .vx-sc:hover { translate:0 -3px; } }
}
@media (prefers-reduced-motion: reduce) { .vertice-nav, .vx-chip, .vx-card { transition:none; } }

/* Ajustes tras revisión */
.vertice-cta { white-space: nowrap; }
.vx-btn { white-space: nowrap; }
.vx-nodes { flex-wrap: wrap; row-gap: .5rem; }
.vx-n { padding: .65rem .6rem; font-size: .7rem; }
.vx-ln { min-width: 6px; }
.vx-ui-main { overflow: hidden; }
@media (max-width: 1180px) { .vertice-nav a { padding: 0 .55rem; } .vertice-header-inner { gap: 1rem; } }
/* Fase 3 — objetivos táctiles: enlaces de cabecera, navegación, pie y títulos de tarjeta (mín. 36–44 px) */
body.page-template-page-vertice header a, body.page-template-page-vertice footer a, body.page-template-page-vertice .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 36px; }
body.page-template-page-vertice header .wp-block-navigation-item__content, body.page-template-page-vertice header nav a { min-height: 44px; }
body.page-template-page-vertice .wp-block-navigation__responsive-container-open, body.page-template-page-vertice .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }
body.page-template-page-vertice [class*="-card-name"] a, body.page-template-page-vertice [class*="-card-title"] a, body.page-template-page-vertice [class*="-card"] h3 a { display: inline-block; padding-block: .4rem; }
/* ---- Hero: luz que sigue al puntero sobre la retícula (solo con ratón y sin reducción de movimiento) ---- */
.vx-hero { position: relative; }
.vx-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at var(--vx-gx, 70%) var(--vx-gy, 30%), rgba(198,244,50,.16), transparent 38%), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: auto, 56px 56px, 56px 56px; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); }
.vx-hero > * { position: relative; }

/* ==========================================================================
   MÓVIL — DOCK INFERIOR, PROGRESO DE LECTURA Y FOCO TÁCTIL (VÉRTICE)
   Pensado para el pulgar: navegación a una mano, indicador que se desliza entre
   páginas y tarjetas que se "encienden" al centrarse en pantalla (el equivalente
   táctil del hover). Solo se activa en pantallas estrechas.
   ========================================================================== */
.vxm-dock, .vxm-prog { display: none; }
@media (max-width: 820px) {
	body.vxm-has-dock { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
	.vxm-prog { display: block; position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: 3px; background: transparent; pointer-events: none; }
	.vxm-prog i { display: block; height: 100%; background: #c6f432; transform: scaleX(0); transform-origin: left; }
	.vxm-dock {
		display: flex; position: fixed; z-index: 90; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		margin: 0; padding: 6px; gap: 2px; background: #0e131b; border: 1px solid #263043; border-radius: 8px;
		box-shadow: 0 14px 34px -10px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.18);
		font-family: var(--vx-mono, monospace); -webkit-tap-highlight-color: transparent; isolation: isolate;
		transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
	}
	.vxm-dock.is-away { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
	.vxm-dock a {
		position: relative; z-index: 1; flex: 1 1 0; min-width: 0; min-height: 52px; display: grid; justify-items: center; align-content: center; gap: 3px;
		padding: 4px 2px; border-radius: calc(8px - 6px); color: #9aa4b7; text-decoration: none; font-size: .64rem; font-weight: 600; letter-spacing: .02em; line-height: 1.1;
		text-transform: none; background: none; border: 0; transition: color .25s ease, scale .2s ease;
	}
	.vxm-dock a:active { scale: .92; }
	.vxm-dock a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
	.vxm-dock a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.vxm-dock a.is-on { color: #c6f432; }
	.vxm-dock a.is-on svg { transform: translateY(-1px) scale(1.12); }
	.vxm-dock a.is-cta { background: #c6f432; color: #0a0d12; flex: 1.15 1 0; border-radius: calc(8px - 6px); }
	.vxm-dock a.is-cta.is-on { color: #0a0d12; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
	.vxm-ind { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: calc(8px - 6px); background: rgba(198,244,50,.16); opacity: 0; pointer-events: none; }
	.vxm-ind.is-go { opacity: 1; transition: transform .5s cubic-bezier(.34,1.3,.64,1), width .5s cubic-bezier(.34,1.3,.64,1); }
	.vxm-dock a:focus-visible { outline: 2px solid #c6f432; outline-offset: -2px; }
	/* Foco táctil: la tarjeta más cercana al centro de la pantalla se enciende. */
	.vx-card, .vx-case { transition: translate .6s cubic-bezier(.22,.61,.36,1), box-shadow .6s ease; }
	.vx-card.vxm-live, .vx-case.vxm-live { translate: 0 -4px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.45); }
	.vx-card img, .vx-case img { transition: scale 1.2s cubic-bezier(.22,.61,.36,1); }
	.vx-card.vxm-live img, .vx-case.vxm-live img { scale: 1.06; }
	@media (prefers-reduced-motion: reduce) { .vxm-dock, .vxm-ind.is-go, .vxm-dock a, .vxm-dock a svg { transition: none; } }
}
@media (hover: none) { .wp-element-button:active, [class*="-btn"]:active, [class*="-cta"]:active { scale: .97; } }


/* ==========================================================================
   ENTRADA — pantalla de carga propia de VÉRTICE (motivo: boot)
   ========================================================================== */
html.vxm-intro-on { overflow: hidden; }
.vxm-intro { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: #0a0d12; color: #e9edf4; font-family: var(--vx-mono, monospace); overflow: hidden; }
.vxm-intro-in { position: relative; z-index: 2; display: grid; justify-items: center; gap: .9rem; padding: 2rem; text-align: center; transition: opacity .4s ease, transform .7s cubic-bezier(.76,0,.24,1); }
.vxm-intro-g { width: clamp(150px, 42vw, 260px); height: auto; color: #c6f432; overflow: visible; }
.vxm-intro-g path, .vxm-intro-g circle[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vxm-draw 1s cubic-bezier(.65,0,.35,1) .1s forwards; }
.vxm-intro-g path[stroke-dasharray="6 8"] { stroke-dasharray: 6 8; stroke-dashoffset: 0; animation: none; clip-path: inset(0 100% 0 0); animation: vxm-wipe 1s ease .1s forwards; }
@keyframes vxm-draw { to { stroke-dashoffset: 0; } }
@keyframes vxm-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes vxm-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.vxm-intro-name { display: block; font-family: var(--vx-mono, monospace); font-size: clamp(2.6rem, 13vw, 5rem); line-height: 1; letter-spacing: -.02em; opacity: 0; animation: vxm-in .8s ease .25s forwards; }
.vxm-intro-tag { display: block; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; opacity: 0; color: #e9edf4; animation: vxm-in .8s ease .45s forwards; }
.vxm-intro-tag { opacity: 0; }
.vxm-intro-by { display: block; margin-top: 1.4rem; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; opacity: 0; animation: vxm-in .8s ease .65s forwards; }
.vxm-intro.is-out .vxm-intro-in { opacity: 0; transform: translateY(-10px); }
@media (prefers-reduced-motion: reduce) { .vxm-intro { display: none; } html.vxm-intro-on { overflow: auto; } }

.vxm-intro { transition: clip-path .7s cubic-bezier(.76,0,.24,1); clip-path: inset(0 0 0 0); }
.vxm-intro.is-out { clip-path: inset(0 0 100% 0); }
.vxm-intro::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; top: 0; background: #c6f432; box-shadow: 0 0 22px 4px rgba(198,244,50,.55); animation: vxm-scan 1.15s linear infinite; z-index: 3; will-change: transform; }
@keyframes vxm-scan { from { transform: translateY(0); } to { transform: translateY(100vh); } }
.vxm-intro-term { display: grid; gap: .45rem; width: min(80vw, 360px); text-align: left; font-size: .76rem; color: #c6f432; }
.vxm-intro-term b { font-weight: 500; opacity: 0; animation: vxm-in .4s ease forwards; } .vxm-intro-term b:nth-child(2) { animation-delay: .3s; } .vxm-intro-term b:nth-child(3) { animation-delay: .6s; }
.vxm-intro-name { letter-spacing: .18em; font-size: clamp(2rem, 10vw, 3.4rem); }


/* Botones primarios: texto oscuro sobre lima en todos los contextos (cabecera incluida). */
body .vx-btn:not(.vx-btn--ghost), body a.vertice-cta, body .vertice-cta { color: #0a0d12; }

@media (max-width: 820px) { .vxm-dock a { font-size: .56rem; letter-spacing: -.02em; } }

/* Móvil: panel de menú completo (la cabecera con backdrop-filter recortaba el panel fijo)
   y acceso visible al catálogo de V&J. */
.vertice-catstrip, .vertice-navcat { display: none; }
@media (max-width: 860px) {
	.vertice-header[data-open] { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0a0d12; }
	.vertice-header[data-open] { position: fixed; inset: 0; z-index: 95; overflow-y: auto; }
	.vertice-header[data-open] .vertice-header-inner { flex-wrap: wrap; align-content: flex-start; }
	.vertice-header[data-open] .vertice-nav { position: static; inset: auto; flex: 0 0 100%; order: 9; height: auto; padding: .6rem 0 2rem; background: transparent; }
	.vertice-nav a.vertice-navcat { display: flex; justify-content: center; margin-top: 1.4rem; min-height: 52px; border: 1px solid var(--vx-lime); border-radius: 3px; color: var(--vx-lime); font: 600 .8rem/1 var(--vx-mono); letter-spacing: .08em; text-transform: uppercase; align-items: center; }
	.vertice-catstrip { display: block; margin: 0; background: #131925; border-bottom: 1px solid var(--vx-line); }
	.vertice-catstrip a { display: flex; align-items: center; gap: .5rem; min-height: 38px; padding: 0 var(--vx-gut); color: var(--vx-lime); text-decoration: none; font: 600 .66rem/1 var(--vx-mono); letter-spacing: .1em; text-transform: uppercase; }
}

@media (max-width: 480px) {
	.vertice-header-inner { gap: .6rem; }
	.vertice-header .vertice-cta { padding: 0 .8rem; font-size: .68rem; letter-spacing: .06em; min-height: 44px; }
	.vertice-toggle { flex: none; }
}