/* UNIPROFIT · sitio de la empresa (uniprofit.app). Reglas de diseño: docs/MARCA.md § 8c. */
@font-face { font-family: 'Geist'; src: url('/panel/fuentes/Geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/panel/fuentes/SpaceGrotesk.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/panel/fuentes/GeistMono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
/* ===== Tokens ===== */
:root {
  --verde:#22e58c; --verde-c:#0fa968; --tinta:#06140d; --negro:#0a0a0a; --blanco:#fafafa;
  --sup:#0f0f10; --sup2:#161617; --borde:#232325; --borde2:#2e2e31;
  --txt:#ededed; --txt2:#a1a1a1; --txt3:#707070;
  /* escala de Fibonacci (razón áurea) para espacios */
  --f1:5px; --f2:8px; --f3:13px; --f4:21px; --f5:34px; --f6:55px; --f7:89px; --f8:144px;
  --margen:clamp(20px,5vw,72px); --gap:clamp(16px,2vw,34px);
  --seccion:clamp(89px,11vw,144px);
  --radio:16px; --radio-s:10px;
  --t:var(--txt); --t2:var(--txt2); --t3:var(--txt3); --b:var(--borde); --b2:var(--borde2); --s:var(--sup); --s2:var(--sup2); --fondo:var(--negro);
}
[data-tema="claro"] { --t:#171717; --t2:#5f5f5f; --t3:#8f8f8f; --b:#e6e6e6; --b2:#d4d4d4; --s:#ffffff; --s2:#f2f2f2; --fondo:var(--blanco); --acento:var(--verde-c); }
[data-tema="oscuro"] { --acento:var(--verde); }

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--negro); color: var(--txt); font: 400 17px/1.6 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.m { width: 1.25em; height: 1.25em; fill: currentColor; stroke: none; flex: none; }
.salto { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.salto:focus { left: 8px; }

.cont { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--margen); }
.seccion { padding: var(--seccion) 0; position: relative; background: var(--fondo); color: var(--t); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }

/* ===== Tipografía ===== */
h1, h2, h3, .marca-txt { font-family: 'Space Grotesk', 'Geist', sans-serif; font-weight: 700; }
h1 { font-size: clamp(40px, 6.4vw, 84px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
h2 { font-size: clamp(30px, 4vw, 56px); line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
h3 { font-size: clamp(21px, 2vw, 28px); line-height: 1.2; letter-spacing: -.02em; }
.lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--t2); max-width: 36em; text-wrap: pretty; }
.eyebrow { font: 600 11px/1 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); display: inline-flex; align-items: center; gap: 10px; }
.mono { font-family: 'Geist Mono', monospace; }
.centro { text-align: center; margin-left: auto; margin-right: auto; }
.suave { color: var(--t2); }

/* frases con palabras que se encienden al hacer scroll */
.pal .w { opacity: calc(.2 + .8 * var(--o, 0)); }
.pal b .w, .pal .w.b { color: var(--t); }

/* ===== Botones ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 var(--f4); border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid var(--b2); color: var(--t); transition: border-color .2s, background .2s, transform .2s; white-space: nowrap; }
.btn:hover { border-color: var(--t2); }
.btn.pri { background: var(--t); color: var(--fondo); border-color: var(--t); }
.btn.pri:hover { background: color-mix(in srgb, var(--t) 88%, var(--fondo)); }
.btn svg.i { width: 18px; height: 18px; transition: transform .2s; }
.btn:hover svg.i { transform: translateX(3px); }
.btn.chico { min-height: 38px; padding: 0 var(--f3); font-size: 14px; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--f3); }

/* ===== Cabecera ===== */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; color: #ededed; transition: background .3s, color .3s, border-color .3s; border-bottom: 1px solid transparent; }
.hdr .cont { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.hdr.fondo { background: rgba(10,10,10,.82); }
body.hdr-claro .hdr { color: #171717; }
body.hdr-claro .hdr.fondo { background: rgba(250,250,250,.86); }
.marca { display: inline-flex; align-items: center; gap: 10px; font: 700 21px/1 'Space Grotesk', sans-serif; letter-spacing: -.04em; }
.marca svg { width: 28px; height: 28px; flex: none; }
/* 320 px: el isotipo se achicaba hasta casi desaparecer para hacerle lugar al botón */
@media (max-width: 360px) { .marca { font-size: 18px; gap: 8px; } .marca svg { width: 24px; height: 24px; } .hdr .btn.chico { font-size: 13px; padding: 0 11px; } }
/* UniProfit (21/10/2026): con «Ingresar» y «Registrarse gratis» en la barra, en celular queda solo el isotipo. */
@media (max-width: 520px) { .hdr .marca-txt { display: none; } .hdr .nav { gap: 8px; } .hdr .btn.chico { font-size: 13px; padding: 0 12px; } }
.marca .p { color: var(--verde); }
body.hdr-claro .hdr .marca .p { color: var(--verde-c); }
.nav { display: flex; align-items: center; gap: var(--f5); font-size: 14.5px; }
.nav a:not(.btn) { opacity: .72; transition: opacity .2s; }
.nav a:not(.btn):hover { opacity: 1; }
/* hasta 900 px los enlaces no entran en una línea (a 768 "Quiénes somos" se partía): queda sólo el botón */
@media (max-width: 900px) { .nav a:not(.btn) { display: none; } }

/* ===== Reveal ===== */
[data-r] { opacity: 0; transform: translateY(13px); }
[data-r].in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }

[data-ap] { opacity: 0; }
[data-ap].in { opacity: 1; transition: opacity .9s ease var(--d, 0s); }

/* ===== Degradé de tema (negro ⇄ blanco) ===== */
.degrade { height: clamp(144px, 26vh, 260px); position: relative; }
.degrade.oc { background: linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 10%, #1b1b1b 28%, #4b4b4b 50%, #a6a6a6 72%, #e9e9e9 90%, #fafafa 100%); }
.degrade.co { background: linear-gradient(0deg, #0a0a0a 0%, #0d0d0d 10%, #1b1b1b 28%, #4b4b4b 50%, #a6a6a6 72%, #e9e9e9 90%, #fafafa 100%); }

/* ===== Estado ===== */
.estado { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); }
.estado i { width: 7px; height: 7px; border-radius: 50%; background: var(--acento, var(--verde)); }
.estado.dev i { background: transparent; border: 1.5px dashed var(--t3); }
.estado.ok { color: var(--t); }
.estado.ok i { animation: latido 2.4s ease-in-out infinite; }
@keyframes latido { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento, var(--verde)) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }

/* ===== Pestañas ===== */
.tab-lista { display: flex; gap: var(--f2); }
.tab { position: relative; display: flex; align-items: center; gap: var(--f3); text-align: left; transition: color .2s, background .2s, border-color .2s; }
.tab[aria-selected="false"] { color: var(--t2); }
.tab[aria-selected="true"] { color: var(--t); }
[role="tabpanel"][hidden] { display: none; }
.tab .barra { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; overflow: hidden; border-radius: 2px; }
.tab[aria-selected="true"] .barra { background: var(--b); }
.tab[aria-selected="true"] .barra::after { content: ''; display: block; height: 100%; width: calc(var(--tp, 0) * 100%); background: var(--acento, var(--verde)); }

/* ===== Marquesina ===== */
.marq { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marq-fila { display: flex; gap: var(--f3); width: max-content; animation: marq 46s linear infinite; }
.marq-fila.inv { animation-direction: reverse; animation-duration: 58s; }
.marq:hover .marq-fila { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(calc(-50% - var(--f3) / 2)); } }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 var(--f4); border: 1px solid var(--b); border-radius: 999px; background: var(--s); color: var(--t); font-size: 15px; white-space: nowrap; }
.pill svg.i { color: var(--acento, var(--verde)); width: 18px; height: 18px; }

/* ===== Pie ===== */
.pie { background: var(--negro); color: var(--txt); }
.pie .cont { padding-top: var(--f7); padding-bottom: var(--f5); }
.pie-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.pie-marca { grid-column: 1 / span 5; display: grid; gap: var(--f4); align-content: start; }
.pie-marca p { color: var(--txt2); font-size: 15px; max-width: 26em; }
.pie-col { grid-column: span 2; }
.pie-col:nth-of-type(2) { grid-column: 7 / span 2; }
.pie-col ul { list-style: none; padding: 0; margin-top: var(--f4); display: grid; gap: var(--f3); font-size: 15px; color: var(--txt2); }
.pie-col a:hover { color: var(--txt); }
.pie-col .apagado { color: var(--txt3); display: flex; align-items: center; gap: 8px; }
.pie-base { margin-top: var(--f7); padding-top: var(--f4); display: flex; justify-content: space-between; gap: var(--f4); flex-wrap: wrap; font: 400 12px/1.6 'Geist Mono', monospace; color: var(--txt3); }
@media (max-width: 900px) { .pie-marca, .pie-col, .pie-col:nth-of-type(2) { grid-column: 1 / -1; } .pie-col ul { margin-top: var(--f3); } }

/* ===== Movimiento reducido: no se apaga nada (decisión del dueño, 1/10/2026; ver empresa.js) ===== */
/* ===== Producto en HTML: tarjetas "de verdad" (no capturas) ===== */
.ui { background: var(--s); border: 1px solid var(--b); border-radius: var(--radio); color: var(--t); font-size: 14px; line-height: 1.45; overflow: hidden; position: relative; }
.ui-top { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--b); }
.ui-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); color: var(--t); font: 700 13px/1 'Space Grotesk', sans-serif; flex: none; }
.ui-av.iso { background: var(--verde); color: #06140d; }
.ui-av.iso svg { width: 20px; height: 20px; }
.ui-t { font-weight: 600; font-size: 14px; }
.ui-s { color: var(--t2); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.ui-s i { width: 6px; height: 6px; border-radius: 50%; background: var(--acento, var(--verde)); }
.ui-cuerpo { padding: 16px; display: grid; gap: 10px; align-content: start; }
.ui-pie { padding: 12px 16px; border-top: 1px solid var(--b); display: flex; align-items: center; gap: 10px; color: var(--t3); font-size: 13px; }
.ui-pie .campo { color: var(--t2); flex: 1; height: 36px; border-radius: 999px; background: var(--s2); display: flex; align-items: center; padding: 0 14px; }
.ui-pie .env { width: 36px; height: 36px; border-radius: 50%; background: var(--t); color: var(--fondo); display: grid; place-items: center; }
.ui-pie .env svg.i { width: 16px; height: 16px; }

.bur { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; position: relative; }
.bur small { display: block; margin-top: 4px; font-size: 11px; opacity: .55; text-align: right; }
.bur.c { background: var(--s2); border-bottom-left-radius: 5px; justify-self: start; }
.bur.a { background: var(--t); color: var(--fondo); border-bottom-right-radius: 5px; justify-self: end; }
.bur.nueva { animation: surge .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes surge { from { opacity: 0; transform: translateY(9px) scale(.98); } }
.escribe { display: inline-flex; gap: 4px; padding: 13px 15px; border-radius: 16px; background: var(--t); border-bottom-right-radius: 5px; justify-self: end; }
.escribe i { width: 6px; height: 6px; border-radius: 50%; background: var(--fondo); opacity: .35; animation: punto 1.1s infinite; }
.escribe i:nth-child(2) { animation-delay: .15s; } .escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%,60%,100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.aviso { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--s); border: 1px solid var(--b); border-radius: 14px; }
.aviso .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--s2); color: var(--acento, var(--verde)); flex: none; }
.aviso .ic svg.i { width: 18px; height: 18px; }
.aviso strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.aviso small { display: block; font-size: 12.5px; color: var(--t2); line-height: 1.35; }
.aviso time { margin-left: auto; font-size: 12px; color: var(--t3); align-self: flex-start; }

.linea { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--b); font-size: 13.5px; }
.linea:last-of-type { border-bottom: 0; }
.linea span:last-child { color: var(--t); font-variant-numeric: tabular-nums; }
.linea.tot { font-weight: 600; font-size: 15px; padding-top: 13px; }
.btn-ui { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 10px; background: var(--t); color: var(--fondo); font-weight: 600; font-size: 13.5px; margin-top: 8px; }
.btn-ui svg.i { width: 16px; height: 16px; }
.etq { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--b2); font-size: 11.5px; color: var(--t2); }
.fila-ui { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--b); }
.fila-ui:last-child { border-bottom: 0; }
.fila-ui .grow { flex: 1; min-width: 0; }
.fila-ui strong { font-weight: 600; font-size: 13.5px; display: block; }
.fila-ui small { color: var(--t2); font-size: 12px; display: block; }

/* esqueletos (lo que todavía está en desarrollo) */
.sk { height: 9px; border-radius: 5px; background: var(--s2); }
.sk.s { width: 38%; } .sk.m { width: 62%; } .sk.l { width: 86%; }
.ui.dev { border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--t) 4.5%, transparent) 9px 10px), var(--s); }
.cinta { position: absolute; top: 14px; right: 14px; z-index: 2; }
.cinta .etq { background: var(--s); }

/* flotantes inclinadas */
.flota { transform-style: preserve-3d; will-change: transform; }

/*#BASE*/

/* ============ Maqueta D (v2) · página de la EMPRESA: visión, quiénes somos, ecosistema y, adentro, el Agente IA ============ */
.lg-wa { color: #25D366 !important; } .lg-tg { color: #26A5E4 !important; } .lg-mp { color: #00B1EA; }
.bm { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.04em; white-space: nowrap; color: var(--t); }
.bm .p { color: var(--verde-c); } [data-tema="oscuro"] .bm .p { color: var(--verde); }
.eco-ic { width: 46px; height: 46px; border-radius: 13px; border: 1px solid var(--b2); display: grid; place-items: center; background: var(--s2); flex: none; }
.eco-ic svg { width: 22px; height: 22px; }

/* ---------- hero: el mapa del ecosistema ---------- */
.hero-d { padding: calc(68px + var(--f7)) 0 var(--f7); overflow: clip; position: relative; background: var(--negro); }
.hero-d > canvas.red-izq { position: absolute; left: 0; top: 0; width: 56%; height: 100%; z-index: 0; mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in; }
.hero-d::after { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 55% at 20% 46%, rgba(10,10,10,.55), transparent 72%); pointer-events: none; z-index: 1; }
.hero-d .grid { position: relative; z-index: 2; pointer-events: none; }
.hero-d .grid > * { pointer-events: auto; }
.hero-d .grid {  align-items: center; row-gap: var(--f6); }
.hd-txt { grid-column: 1 / span 6; display: grid; gap: var(--f4); justify-items: start; }
.hd-txt h1 { font-size: clamp(38px, 4.9vw, 70px); line-height: 1; letter-spacing: -.04em; }
.hd-txt h1 span { display: block; white-space: nowrap; }
.hd-txt h1 .l2 { background: linear-gradient(180deg, #d9d9d9 20%, #6a6a6a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hd-txt .lead { max-width: 33em; }
.hd-txt .acciones { margin-top: var(--f3); }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--f2); margin-top: var(--f3); }
.etiquetas span { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font: 500 12px/1 'Geist Mono', monospace; letter-spacing: .04em; color: var(--txt2); border: 1px solid var(--borde2); background: rgba(10,10,10,.6); }
.etiquetas svg { width: 14px; height: 14px; color: var(--verde); }
/* ---- el cerebro ---- */
.hd-mapa { grid-column: 7 / span 6; perspective: 1500px; }
.cerebro { position: relative; width: 100%; max-width: 660px; aspect-ratio: 1 / 1; margin-inline: auto; opacity: 0; transform: rotateX(16deg) scale(.88); transition: opacity 1.2s ease, transform 1.8s cubic-bezier(.2,.7,.2,1); }
.cerebro.vivo { opacity: 1; transform: none; }
.cerebro::before { content: ''; position: absolute; inset: -22%; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.5) 45%, transparent 92%); -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.5) 45%, transparent 92%); pointer-events: none; }
.cerebro canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.cerebro::after { content: ''; position: absolute; left: 50%; top: 46%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(34,229,140,.13) 0%, rgba(34,229,140,.07) 28%, rgba(34,229,140,.025) 55%, rgba(34,229,140,.008) 78%, rgba(34,229,140,0) 100%); opacity: 0; transition: opacity 2s ease .4s; }
.cerebro.vivo::after { opacity: 1; }
.cerebro svg.cn { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.cn .ln { fill: none; stroke: #2f2f35; stroke-width: .17; }
.cn .ln.ok { stroke: rgba(34,229,140,.4); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1) var(--d, 1s), stroke .3s, stroke-width .3s; }
.cerebro.vivo .cn .ln.ok { stroke-dashoffset: 0; }
.cn .ln.dev { stroke-dasharray: .5 1.3; opacity: 0; transition: opacity 1s ease var(--d, 1s); }
.cerebro.vivo .cn .ln.dev { opacity: 1; }
.cn .ln.on { stroke: var(--verde); stroke-width: .3; }
.cn .pulso { fill: #22e58c; }
.cer-lb { position: absolute; left: 50%; top: 66%; translate: -50% 0; text-align: center; z-index: 3; pointer-events: none; }
.cer-lb b { display: block; font: 700 17px/1 'Space Grotesk', sans-serif; letter-spacing: -.03em; color: var(--txt); }
.cer-lb b .p { color: var(--verde); }
.cer-lb > span { display: block; margin-top: 6px; font: 600 9.5px/1 'Geist Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--txt3); }
.nc { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 15px 8px 8px; border-radius: 15px; background: linear-gradient(150deg, #1d1d21, #111113); border: 1px solid #2f2f35; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 22px 40px -24px #000; cursor: pointer; text-align: left; opacity: 0;
  transform: translate3d(0, 24px, 0) rotateX(20deg) scale(.9); transition: opacity .8s ease var(--d), transform .9s cubic-bezier(.2,.7,.2,1) var(--d), border-color .25s; }
.cerebro.vivo .nc { opacity: 1; transform: translate3d(calc(var(--mx, 0) * var(--k, 8) * -1px), calc(var(--my, 0) * var(--k, 8) * -1px), 0); }
.cerebro.listo .nc { transition: border-color .25s, transform .18s linear; }
.nc:hover, .nc:focus-visible { border-color: var(--txt); z-index: 30; }
.nc .ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #1b1b20; border: 1px solid #303036; flex: none; overflow: hidden; }
.nc .ico svg { width: 60%; height: auto; overflow: visible; }
.nc .ico.mp svg { width: 78%; height: auto; }
.nc b { display: block; font: 600 14px/1.15 'Geist', sans-serif; color: var(--txt); white-space: nowrap; }
.nc small { display: block; font-size: 11.5px; line-height: 1.2; color: var(--txt3); margin-top: 3px; white-space: nowrap; }
.nc.dev { border-style: dashed; background: #101012; }
.nc.dev b { color: var(--txt2); }
.nc.dev .ico svg [stroke] { stroke: #6f6f76; }
.det { position: absolute; width: 258px; padding: 14px; border-radius: 16px; background: rgba(20,20,23,.97); border: 1px solid #34343a; box-shadow: 0 30px 60px -28px #000; opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .2s ease, transform .2s ease; pointer-events: none; z-index: 40; cursor: default; }
.det.r { left: calc(100% + 14px); top: 50%; margin-top: -60px; } .det.l { right: calc(100% + 14px); top: 50%; margin-top: -60px; } .det.u { bottom: calc(100% + 14px); left: 50%; margin-left: -129px; }
.nc:hover .det, .nc:focus-visible .det { opacity: 1; transform: none; }
.det .e { font: 600 10px/1 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); margin-bottom: 8px; display: block; }
.nc.dev .det .e { color: var(--txt3); }
.det .t { color: var(--txt); font-size: 14px; line-height: 1.45; white-space: normal; font-weight: 400; margin-bottom: 11px; display: block; }
.det .ui { font-size: 12.5px; background: #111113; }
.det .ui-cuerpo { padding: 10px; gap: 7px; } .det .bur { font-size: 12.5px; padding: 8px 11px; max-width: 92%; }
.det .aviso { padding: 9px 11px; gap: 10px; background: #111113; } .det .aviso .ic { width: 30px; height: 30px; overflow: hidden; } .det .aviso strong { font-size: 12.5px; } .det .aviso small { font-size: 11.5px; margin: 0; white-space: normal; color: var(--txt2); }
.det .aviso .ic.mp svg { width: 24px; height: 24px; }
.det .cam { display: block; margin: -4px 0 11px; font-size: 12.5px; line-height: 1.4; color: var(--txt3); white-space: normal; font-weight: 400; }
.nc.dev .ico.mp svg { filter: grayscale(1) opacity(.55); }
.det .linea { padding: 6px 0; font-size: 12.5px; }
.det .sk { background: #1b1b1f; }
@media (max-width: 1100px) { .hd-txt { grid-column: 1 / -1; } .hd-mapa { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .nc { padding: 6px 10px 6px 6px; gap: 7px; border-radius: 12px; }
  .nc .ico { width: 28px; height: 28px; border-radius: 9px; } .nc b { font-size: 12px; } .nc small { display: none; } .det { display: none; }
  .nc.izq { --x: 25% !important; } .nc.der { --x: 78% !important; } .cer-lb b { font-size: 14px; } .cer-lb span { font-size: 8px; }
}


/* ---- hero en celular: la animación va en la primera pantalla, justo debajo del titular ---- */
.lg-m { display: none; }
@media (max-width: 1100px) {
  .hero-d > canvas.red-izq { width: 100%; height: 52%; mask-image: linear-gradient(180deg, #000 45%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-composite: add; -webkit-mask-composite: source-over; }
  .hero-d { padding: calc(68px + var(--f5)) 0 var(--f6); }
  .hero-d .grid { row-gap: 0; }
  .hd-txt { display: contents; }
  .hd-txt > * { grid-column: 1 / -1; justify-self: center; text-align: center; }
  .hd-txt .eyebrow { order: 1; }
  .hd-txt h1 { order: 2; margin-top: var(--f3); }
  .hd-txt .lead { order: 3; margin-top: var(--f3); }
  .hd-mapa { order: 4; margin-top: var(--f4); }
  .hd-txt .acciones { order: 5; justify-content: center; margin-top: var(--f4); }
  .hd-txt .etiquetas { order: 6; justify-content: center; }
}
@media (max-width: 640px) {
  .lg-d { display: none; } .lg-m { display: inline; }
  .hd-txt h1 { font-size: clamp(36px, 10.4vw, 48px); }
  .hd-txt .lead { font-size: 16.5px; max-width: 22em; }
  .hd-mapa { margin-inline: calc(var(--margen) * -1); width: calc(100% + var(--margen) * 2); }
  .cerebro { max-width: 520px; aspect-ratio: 1 / 1.04; }
  .hd-txt .acciones { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .hd-txt .acciones .btn { justify-content: center; }
  .hd-txt .etiquetas { margin-top: var(--f4); }
}

/* ---------- visión ---------- */
.vision .pal { font: 700 clamp(32px, 4.8vw, 68px)/1.08 'Space Grotesk', sans-serif; letter-spacing: -.04em; max-width: 14em; margin: var(--f5) auto 0; text-align: center; text-wrap: balance; }
.vision .sub-v { max-width: 34em; margin: var(--f4) auto 0; text-align: center; color: var(--t2); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; text-wrap: balance; }
.vision .sub-v b { color: var(--t); font-weight: 600; }
.vision .pal b { font-weight: 700; }
.navb { margin: var(--f7) auto 0; max-width: 1040px; }
.navb-cap { display: flex; justify-content: space-between; align-items: end; gap: var(--f4); flex-wrap: wrap; margin-bottom: var(--f4); }
.navb-cap h3 { font: 700 clamp(22px, 2.5vw, 34px)/1.15 'Space Grotesk', sans-serif; letter-spacing: -.03em; }
.navb-cap p { color: var(--t2); font-size: 15px; max-width: 24em; }
.navb-v { border: 1px solid var(--b2); border-radius: 20px; background: var(--s); overflow: hidden; box-shadow: 0 40px 80px -50px rgba(0,0,0,.35); }
.tabs-b { display: flex; align-items: flex-end; gap: 3px; padding: 11px 12px 0; background: var(--s2); border-bottom: 1px solid var(--b); overflow: hidden; min-height: 52px; }
.tb-pts { display: flex; gap: 6px; margin: 0 10px 14px 0; flex: none; } .tb-pts i { width: 10px; height: 10px; border-radius: 50%; background: var(--b2); }
/* La historia de las pestañas va con --t (el avance propio del recuadro, data-tramo en empresa.js), 0 → 1:
   0–.15 se ven las nueve · .15–.59 se cierran de a una, como en un navegador: primero se apaga el nombre (y el ícono)
   y recién después el marco vacío se achica de a poco y las de al lado se corren solas; así nunca se ve un nombre
   cortado y el movimiento sigue siendo fluido (2/10: apagarlas enteras dejaba huecos y se cerraban de golpe) · .45–.55 se va
   "Nueve lugares…" · .55–.78 entran las tres: primero crece el ancho y el contenido se enciende cuando ya entra ·
   .66–.80 entra el panel ordenado (el caos ya se fue del todo: nunca están los dos a media luz). Pedido del dueño, 1/10. */
.tabx { --a: clamp(0, calc((var(--t, 0) - .15 - var(--i) * .03) / .2), 1);
  --nom: clamp(0, calc(1 - var(--a) * 4), 1); /* el nombre se apaga en el primer cuarto de su tramo */
  --anc: clamp(0, calc((1 - var(--a)) / .7), 1); /* el marco se achica después, en el resto */
  display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border-radius: 10px 10px 0 0; background: var(--s); border: 1px solid var(--b); border-bottom: 0; font-size: 12.5px; color: var(--t2); white-space: nowrap; overflow: hidden; min-width: 0;
  flex: 0 1 auto; max-width: calc(var(--anc) * var(--wn, 190px)); opacity: clamp(0, calc(var(--anc) * 4), 1); }
.tabx:not(.fin) > * { opacity: var(--nom); }
.tabx svg { width: 15px; height: 15px; flex: none; }
.tabx .tn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tabx:not(.fin) { padding-inline: calc(var(--anc) * 10px); gap: calc(var(--anc) * 7px);
  /* cerrada del todo no ocupa nada: ni sus bordes ni la separación con la siguiente (si no, las tres nuevas quedaban
     corridas 45 px y en el celular la última se cortaba) */
  border-inline-width: calc(clamp(0, var(--anc) * 50, 1) * 1px); margin-right: calc((clamp(0, var(--anc) * 50, 1) - 1) * 3px); }
.tabx.fin { --w: clamp(0, calc((var(--t, 0) - .55 - var(--j) * .05) / .08), 1); --tx: clamp(0, calc((var(--t, 0) - .63 - var(--j) * .05) / .05), 1);
  flex: 0 1 calc(var(--w) * 262px); max-width: calc(var(--w) * 262px); opacity: clamp(0, calc(var(--w) * 3), 1); padding: 0 calc(var(--w) * 14px); gap: 9px; }
.tabx.fin > * { opacity: var(--tx); }
.tabx.fin .iso { width: 20px; height: 20px; flex: none; }
.tabx.fin .wm-t { font: 700 13.5px/1 'Space Grotesk', sans-serif; letter-spacing: -.04em; color: var(--t); }
.tabx.fin .wm-t b { color: var(--verde-c); font-weight: 700; }
.tabx.fin .sep { width: 1px; height: 18px; background: var(--b2); flex: none; font-style: normal; }
.tabx.fin .un { font: 600 13px/1 'Geist', sans-serif; color: var(--t); letter-spacing: -.01em; }
.tabx.fin.on { border-color: var(--b2); }
.tabx.fin.dev { border-style: dashed; background: transparent; }
.tabx.fin.dev .iso { filter: grayscale(1) opacity(.5); } .tabx.fin.dev .wm-t, .tabx.fin.dev .wm-t b { color: var(--t3); } .tabx.fin.dev .un { color: var(--t2); font-weight: 500; }
.tabx.fin .estado { margin-left: 2px; } .tabx.fin .estado i { width: 6px; height: 6px; }
/* tableta y computadora chica: sin los tres puntos y más justas, para que los nueve nombres entren enteros */
@media (min-width: 961px) and (max-width: 1100px) {
  .tb-pts { display: none; }
  .tabx { font-size: 12px; padding: 0 8px; gap: 6px; }
  .tabx:not(.fin) { padding-inline: calc(var(--anc) * 8px); gap: calc(var(--anc) * 6px); }
}
@media (max-width: 960px) { /* las nueve, sólo con su ícono; las tres, sin la palabra UNIPROFIT */
  .tb-pts { display: none; } .tabs-b { gap: 3px; padding: 10px 10px 0; min-height: 46px; }
  .tabx:not(.fin) { gap: 0; height: 34px; flex: 0 1 calc(var(--anc) * 36px); max-width: calc(var(--anc) * 36px); padding-inline: calc(var(--anc) * 10px); justify-content: center; }
  .tabx:not(.fin) .tn { display: none; }
  .tabx:not(.fin) svg { width: 16px; height: 16px; }
  .tabx.fin .wm-t, .tabx.fin .sep { display: none; }
  .tabx.fin { flex: 0 0 auto; height: 34px; max-width: calc(var(--w) * 130px); padding: 0 calc(var(--w) * 10px); gap: 6px; }
  .tabx.fin .iso { width: 17px; height: 17px; } .tabx.fin .un { font-size: 12.5px; }
}
/* celulares angostos (320–380): Tienda y Gestión sin el isotipo, para que las tres entren sin cortarse */
@media (max-width: 380px) {
  .tabx.fin.dev .iso { display: none; }
  .tabx.fin { padding: 0 calc(var(--w) * 8px); }
}
.cuerpo-b { position: relative; min-height: clamp(290px, 31vw, 370px); }
.caos { position: absolute; inset: 0; display: grid; place-items: start center; text-align: center; padding: var(--f6) var(--f5) var(--f5); opacity: calc(1 - (var(--t, 0) - .45) * 10); }
.caos b { display: block; font: 700 clamp(22px, 2.6vw, 34px)/1.15 'Space Grotesk', sans-serif; letter-spacing: -.03em; }
.caos span { color: var(--t2); font-size: 15.5px; display: block; margin-top: 10px; }
.orden { position: absolute; inset: 0; padding: var(--f4); display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--f3); --o: clamp(0, calc((var(--t, 0) - .66) * 7), 1); opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 14px)); }
.orden .col { display: grid; gap: var(--f3); align-content: start; }
.orden .tit { font: 600 11px/1 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.orden .fila-ui { padding: 9px 0; }
.orden .dev-b { border: 1px dashed var(--b2); border-radius: 12px; padding: 14px; display: grid; gap: 10px; background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--t) 4.5%, transparent) 9px 10px); }
/* celular: el recuadro más bajo (entra entero en la pantalla y así la historia dura más scroll) y el panel ordenado
   compacto: las dos columnas, sin las rayitas de Tienda y Gestión */
@media (max-width: 760px) {
  .cuerpo-b { min-height: 384px; }
  .orden { grid-template-columns: 1fr; align-content: start; gap: var(--f3); padding: var(--f3) 16px; }
  .orden .col { gap: var(--f2); }
  .orden .fila-ui { padding: 6px 0; } .orden .aviso { padding: 9px 12px; } .orden .aviso .ic { width: 30px; height: 30px; }
  .orden .dev-b { padding: 9px 12px; gap: 0; } .orden .dev-b .sk { display: none; }
}

/* ---------- cuatro ideas ---------- */
.cab-c { text-align: center; display: grid; justify-items: center; gap: var(--f4); }
.cab-c h2 { max-width: 15em; } .cab-c .lead { max-width: 38em; }
.ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--f7); }
.idea { border: 1px solid var(--b); border-radius: 28px; background: var(--s); padding: clamp(21px, 2.6vw, 36px); display: grid; gap: var(--f4); align-content: start; transition: border-color .25s; }
.idea:hover { border-color: var(--b2); }
.idea .anim { height: 210px; border-radius: 18px; background: var(--s2); border: 1px solid var(--b); position: relative; overflow: hidden; display: grid; place-items: center; }
.idea .num { font: 600 11px/1 'Geist Mono', monospace; letter-spacing: .14em; color: var(--t3); }
.idea h3 { font: 700 clamp(24px, 2.4vw, 32px)/1.1 'Space Grotesk', sans-serif; letter-spacing: -.03em; }
.idea p { color: var(--t2); font-size: 16.5px; max-width: 31em; }
@media (max-width: 860px) { .ideas { grid-template-columns: 1fr; margin-top: var(--f6); } }
.conv { width: 82%; height: 88%; }
.conv .l { stroke: var(--verde-c); stroke-width: 1.3; stroke-dasharray: 3 5; fill: none; animation: fluye 2.6s linear infinite; opacity: .7; }
.conv .nd { fill: var(--s); stroke: var(--b2); stroke-width: 1.2; }
.conv .nd2 circle { fill: var(--t); animation: enciende 4.2s ease-in-out infinite; }
.conv .nd2 circle:nth-child(2) { animation-delay: .6s; } .conv .nd2 circle:nth-child(3) { animation-delay: 1.2s; } .conv .nd2 circle:nth-child(4) { animation-delay: 1.8s; }
.conv .nd2 circle:nth-child(5) { animation-delay: 2.4s; } .conv .nd2 circle:nth-child(6) { animation-delay: 3s; } .conv .nd2 circle:nth-child(7) { animation-delay: 3.6s; }
.conex { width: 82%; display: grid; gap: 10px; }
.cx { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; background: var(--s); border: 1px solid var(--b); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 500; }
.cx svg { width: 22px; height: 22px; }
.sw { width: 40px; height: 23px; border-radius: 999px; background: var(--b2); position: relative; animation: swbg 9s infinite; animation-delay: var(--d); }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; animation: swdot 9s infinite; animation-delay: var(--d); }
/* fluye, aro y flota se usaban pero nunca se definieron (se perdieron al pasar la maqueta a public/, 1/10/2026):
   "Todo conectado", el aro de "Una IA que aprende" y las insignias que flotan estaban quietos */
@keyframes fluye { to { stroke-dashoffset: 32; } } /* hacia el centro: todo llega a UNIPROFIT */
@keyframes aro { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@keyframes flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes enciende { 0%, 70%, 100% { fill: var(--t); r: 2.6px; } 80% { fill: var(--verde-c); r: 4px; } }
@keyframes swbg { 0%, 8% { background: var(--b2); } 14%, 88% { background: var(--verde-c); } 96%, 100% { background: var(--b2); } }
@keyframes swdot { 0%, 8% { transform: none; } 14%, 88% { transform: translateX(17px); } 96%, 100% { transform: none; } }
.tareas { width: 84%; display: grid; gap: 8px; }
.tarea { display: grid; grid-template-columns: 22px 1fr auto; gap: 11px; align-items: center; background: var(--s); border: 1px solid var(--b); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.tarea .ck { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--b2); display: grid; place-items: center; animation: ckbg 9s infinite; animation-delay: var(--d); }
.tarea .ck svg { width: 14px; height: 14px; stroke: #fff; opacity: 0; animation: ckop 9s infinite; animation-delay: var(--d); }
.tarea small { font: 600 9.5px/1 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
@keyframes ckbg { 0%, 8% { background: transparent; border-color: var(--b2); } 14%, 88% { background: var(--verde-c); border-color: var(--verde-c); } 96%, 100% { background: transparent; border-color: var(--b2); } }
@keyframes ckop { 0%, 8% { opacity: 0; } 14%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.aprende { position: relative; width: 100%; height: 100%; }
.aprende .nuc { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; translate: -50% -50%; border-radius: 50%; background: var(--t); color: var(--fondo); display: grid; place-items: center; z-index: 2; }
.aprende .nuc svg { width: 28px; height: 28px; }
.aprende .nuc::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--verde-c); animation: aro 3s ease-out infinite; }
.aprende .ch { position: absolute; left: 50%; top: 50%; padding: 0 12px; height: 28px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--s); border: 1px solid var(--b2); font-size: 12.5px; font-weight: 500; white-space: nowrap; animation: vuela 6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes vuela { 0% { transform: translate(var(--x), var(--y)) translate(-50%, -50%); opacity: 0; } 12% { opacity: 1; } 55% { transform: translate(0, 0) translate(-50%, -50%) scale(.7); opacity: 1; } 70%, 100% { transform: translate(0, 0) translate(-50%, -50%) scale(.2); opacity: 0; } }

/* ---------- ecosistema ---------- */
.eco-d { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--f7); }
.ec { border: 1px solid var(--b); border-radius: 28px; background: var(--s); padding: clamp(21px, 2.6vw, 38px); position: relative; overflow: hidden; display: grid; align-content: space-between; gap: var(--f5); transition: border-color .25s, transform .25s; }
.ec:hover { border-color: var(--b2); transform: translateY(-3px); }
.ec.ag { grid-column: span 6; } .ec.ti, .ec.ge { grid-column: span 3; }
.ec .cab { display: flex; align-items: center; justify-content: space-between; gap: var(--f3); margin-bottom: var(--f4); }
.ec h3 { font: 700 clamp(28px, 2.8vw, 40px)/1.05 'Space Grotesk', sans-serif; letter-spacing: -.035em; }
.ec .tag { color: var(--t); font-weight: 600; font-size: 17px; margin-top: var(--f2); }
.ec p { color: var(--t2); font-size: 16px; margin-top: var(--f3); max-width: 30em; }
.ec ul { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: var(--f4); font-size: 15.5px; }
.ec li { display: flex; gap: 10px; align-items: center; } .ec li svg { width: 18px; height: 18px; color: var(--verde-c); }
/* lo que todavía no existe va dicho, pero apagado y con "(en camino)" (decisión del dueño, 1/10/2026) */
.ec li.camino { color: var(--t2); } .ec li.camino svg { color: var(--t3); } .ec li em { font-style: normal; color: var(--t3); white-space: nowrap; }
/* tarjeta del Agente: los logos van arriba, en su fila, y el botón queda solo (al lado se caían a otra línea) */
.ag-pie { display: grid; gap: var(--f4); justify-items: start; }
.funciona { display: flex; align-items: center; gap: var(--f3); color: var(--t2); }
.funciona span { font: 600 11px/1 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin-right: 3px; white-space: nowrap; }
.funciona svg { width: 24px; height: 24px; }
@media (max-width: 640px) { .ag-pie { justify-items: stretch; } .ag-pie .btn { width: 100%; } }
.ec.dev { border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--t) 4.5%, transparent) 9px 10px), var(--s); }
.ec.dev h3 { color: var(--t2); } .ec.dev li svg { color: var(--t3); }
.una-red { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--f3) var(--f5); margin-top: var(--f5); color: var(--t2); font: 500 12.5px/1 'Geist Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.una-red span { display: inline-flex; align-items: center; gap: 9px; } .una-red svg { width: 16px; height: 16px; color: var(--verde-c); }
@media (max-width: 1100px) { .ec.ag { grid-column: span 12; } .ec.ti, .ec.ge { grid-column: span 6; } }
@media (max-width: 640px) { .ec.ti, .ec.ge { grid-column: span 12; } }

/* ---------- quiénes somos: todo visible al bajar (sin clics), con una imagen del emprendedor ---------- */
#quienes { display: grid; align-content: center; overflow-x: clip; }
.qs-top { display: grid; gap: var(--f3); }
.qs-top h2 { max-width: 14em; font-size: clamp(32px, 4.7vw, 66px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.qs-top h2 em { font-style: normal; color: var(--t3); }
.qs-g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4.5vw, 72px); margin-top: var(--f5); align-items: stretch; }
.qs-izq { display: grid; gap: var(--f4); align-content: start; }
.qs-izq .txt { display: grid; gap: var(--f3); }
.qs-izq .txt p { color: var(--t2); font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.6; max-width: 31em; text-wrap: pretty; }
.qs-izq .txt p b { color: var(--t); font-weight: 600; }
.cree { list-style: none; padding: 0; margin: 0; display: grid; }
.cree li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: clamp(12px, 1.3vw, 17px) 0; border-top: 1px solid var(--b); color: var(--t2); }
.cree li:last-child { border-bottom: 1px solid var(--b); }
.cree li i { font: 600 11px/2.1 'Geist Mono', monospace; letter-spacing: .12em; font-style: normal; color: var(--verde); }
.cree li span { font: 600 clamp(17px, 1.55vw, 21px)/1.32 'Geist', sans-serif; letter-spacing: -.015em; }
.cree li b { color: var(--t); font: 700 clamp(21px, 2vw, 27px)/1.15 'Space Grotesk', sans-serif; letter-spacing: -.03em; }
.qs-g { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.gran { position: relative; margin: 0; container-type: inline-size; display: grid; align-content: center; justify-items: end; min-height: 400px; }
.gran .wm { position: relative; z-index: 3; display: flex; align-items: center; gap: .24em; font-size: 14.2cqw; white-space: nowrap; margin-right: 0; opacity: 0; transform: translateY(18px) scale(.97); filter: blur(10px); }
.gran .wm svg { width: 1.5em; height: 1.5em; flex: none; }
.gran .wm b { display: block; font: 700 1em/1 'Space Grotesk', sans-serif; letter-spacing: -.045em; color: #ededed; -webkit-text-stroke: .028em currentColor; }
.gran .wm b .p { color: #22e58c; }
.gran.go .wm { animation: aparece 1.3s cubic-bezier(.2,.7,.2,1) .1s forwards; }
@keyframes aparece { to { opacity: 1; transform: none; filter: blur(0); } }
.gran .blk { display: grid; justify-items: start; width: max-content; position: relative; z-index: 3; }
.gran .sub { position: relative; z-index: 3; margin-top: 2.4cqw; padding-left: .2em; font: 600 10.5px/1.4 'Geist Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--t3); opacity: 0; }
.gran.go .sub { animation: aparece2 .9s ease 1s forwards; }
@keyframes aparece2 { to { opacity: 1; } }
@media (max-width: 960px) { .qs-g { grid-template-columns: minmax(0, 1fr); } .gran { min-height: 0; padding: var(--f5) 0 var(--f4); } .gran .wm { font-size: 12.4cqw; } .gran { justify-items: center; } }
#quienes > canvas.red-q { position: absolute; left: 30%; top: 0; width: 70%; height: 100%; z-index: 0; mask-image: linear-gradient(90deg, transparent 0%, #000 35%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; -webkit-mask-composite: source-in; }
#quienes > .cont { position: relative; z-index: 1; }
@media (max-width: 960px) { #quienes > canvas.red-q { left: 0; width: 100%; height: 40%; top: auto; bottom: 0; } }

/* ---------- el Agente IA, por dentro (acá viven las ventanas flotantes) ---------- */
.ag-cab { text-align: center; display: grid; justify-items: center; gap: var(--f4); }
.ag-cab h2 { max-width: 14em; } .ag-cab .lead { max-width: 40em; }
.escena { position: relative; height: clamp(470px, 46vw, 610px); margin-top: var(--f6); perspective: 1500px; }
.fl { position: absolute; left: var(--cx); top: var(--cy); width: var(--w); z-index: var(--z, 1);
  transform: translate3d(calc(var(--mx, 0) * var(--k, 10) * 1px), calc(var(--my, 0) * var(--k, 10) * 1px + (var(--p, 0) - .3) * var(--v, -90) * 1px), 0) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) rotateZ(var(--rz, 0deg)); }
.fl .ui, .fl .aviso { background: #121214; border-color: #34343a; color: #ededed; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -30px rgba(0,0,0,.9); }
.fl.f1 { --cx: 14%; --cy: 4%; --w: clamp(280px, 30vw, 388px); --ry: 9deg; --rx: 4deg; --rz: -1.5deg; --v: -70; --k: 12; --z: 3; }
.fl.f2 { --cx: 55%; --cy: 0%; --w: clamp(250px, 24vw, 326px); --ry: -11deg; --rx: 5deg; --rz: 1.5deg; --v: -130; --k: 18; --z: 2; }
.fl.f3 { --cx: 65%; --cy: 46%; --w: clamp(260px, 27vw, 350px); --ry: -9deg; --rx: 3deg; --rz: 1deg; --v: -40; --k: 8; --z: 4; }
.fl.f4 { --cx: 3%; --cy: 55%; --w: clamp(250px, 24vw, 320px); --ry: 12deg; --rx: 3deg; --rz: -2deg; --v: -110; --k: 16; --z: 5; }
.fl.f5 { --cx: 36%; --cy: 68%; --w: clamp(250px, 25vw, 330px); --ry: 5deg; --rx: -2deg; --rz: 0deg; --v: -20; --k: 6; --z: 6; }
.badge-l { position: absolute; z-index: 7; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: rgba(18,18,20,.94); border: 1px solid #3a3a40; animation: flota 5.2s ease-in-out infinite; animation-delay: var(--ad, 0s); transition: transform .25s, border-color .25s; }
.badge-l svg { width: 26px; height: 26px; }
.badge-l.lg-mp svg { width: 32px; height: 32px; }
.badge-l:hover { transform: scale(1.12) rotate(-4deg); border-color: currentColor; }
.fl .badge-l { top: -20px; right: -16px; } .fl .badge-l.izq { right: auto; left: -16px; }
@media (max-width: 760px) {
  .escena { height: 590px; margin-top: var(--f5); }
  .fl.f1 { --cx: 5%; --cy: 0%; --w: 82%; --ry: 6deg; --rx: 3deg; }
  .fl.f2, .fl.f4 { display: none; }
  .fl.f3 { --cx: 14%; --cy: 57%; --w: 82%; --ry: -6deg; }
  .fl.f5 { --cx: 4%; --cy: 79%; --w: 78%; --ry: 4deg; }
}
.filas-ag { margin-top: var(--f5); }
.fila-ag { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; padding: var(--f7) 0; }
.fila-ag .tx { grid-column: 1 / span 5; display: grid; gap: var(--f4); align-content: center; }
.fila-ag .vs { grid-column: 7 / span 6; }
.fila-ag.inv .tx { grid-column: 8 / span 5; order: 2; } .fila-ag.inv .vs { grid-column: 1 / span 6; order: 1; }
.fila-ag h3 { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.08; letter-spacing: -.035em; }
.fila-ag .tx > p { color: var(--t2); font-size: 17px; max-width: 28em; }
.fila-ag ul { list-style: none; padding: 0; display: grid; gap: 12px; font-size: 16px; }
.fila-ag li { display: flex; gap: 12px; align-items: flex-start; } .fila-ag li svg { width: 20px; height: 20px; color: var(--verde); margin-top: 2px; }
.num-r { font: 600 12px/1 'Geist Mono', monospace; letter-spacing: .14em; color: var(--verde); }
/* fila de algo que todavía no existe (03 · Cobros): dicha, pero apagada y con "(en camino)" */
.fila-ag.camino .num-r { color: var(--t3); } .fila-ag.camino h3 em { font-style: normal; color: var(--t3); white-space: nowrap; }
.fila-ag.camino .etq { white-space: nowrap; flex: none; }
.fila-ag.camino li svg { color: var(--t3); }
.fila-ag.camino .ui.dev { background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(237,237,237,.035) 9px 10px), var(--s); }
.fila-ag.camino .lg-mp svg, .fila-ag.camino .pi.mp svg { filter: grayscale(1) opacity(.55); }
@media (max-width: 960px) { .fila-ag { padding: var(--f6) 0; row-gap: var(--f5); } .fila-ag .tx, .fila-ag .vs, .fila-ag.inv .tx, .fila-ag.inv .vs { grid-column: 1 / -1; order: initial; } .fila-ag .tx { order: 1; } .fila-ag .vs { order: 2; } }
.campo-ens { min-height: 66px; padding: 13px 15px; border-radius: 13px; border: 1px solid var(--b2); background: var(--s2); font-size: 15px; line-height: 1.5; }
.campo-ens .car { display: inline-block; width: 2px; height: 1.1em; background: var(--t); vertical-align: -2px; margin-left: 1px; animation: parp 1s steps(1) infinite; }
@keyframes parp { 50% { opacity: 0; } }
.guardado { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(34,229,140,.45); color: var(--verde); font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .3s; width: fit-content; }
.guardado.on { opacity: 1; } .guardado svg { width: 15px; height: 15px; }
.sep { font: 600 11px/1 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.sep::after { content: ''; flex: 1; border-top: 1px solid var(--b); }
.chat-m { display: grid; gap: 10px; min-height: 150px; align-content: start; }
.pastillas { display: flex; flex-wrap: wrap; gap: var(--f2); margin-top: var(--f3); }
.pastillas .etq { height: 30px; padding: 0 12px; font-size: 13px; }
[data-sec] [data-s] { opacity: .22; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
[data-sec] [data-s].on { opacity: 1; transform: none; }
.logos-fila { display: flex; gap: var(--f3); flex-wrap: wrap; margin-bottom: var(--f3); }
.lchip { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 12px; border-radius: 14px; border: 1px solid var(--b2); background: var(--s); font-weight: 600; font-size: 15px; } /* quietos (decisión del dueño, 1/10/2026): flotan sólo las insignias de "por dentro" */
.lchip svg { width: 24px; height: 24px; }
.fila-conv { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--b); }
.fila-conv:last-child { border-bottom: 0; }
.fila-conv svg.m, .fila-conv svg.i { width: 26px; height: 26px; }
.fila-conv strong { display: block; font-size: 14px; } .fila-conv small { color: var(--t2); font-size: 12.5px; }
.fila-conv .resp { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--verde); }
.fila-conv .resp i { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }
.paso-p { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--b); border-radius: 14px; background: var(--s2); }
.paso-p + .paso-p { margin-top: var(--f3); }
.paso-p .pi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--b2); color: var(--t2); } .paso-p .pi svg { width: 21px; height: 21px; }
.paso-p strong { display: block; font-size: 14.5px; } .paso-p small { color: var(--t2); font-size: 12.5px; }
.paso-p .pi.mp svg { width: 30px; height: 30px; }
.paso-p .ok { color: var(--verde); width: 22px; height: 22px; }
.res-sal { display: grid; gap: var(--f3); align-content: center; }
.dudas { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--f4); align-items: center; }
.dudas .res-sal .aviso { background: var(--s2); }
@media (max-width: 640px) { .dudas { grid-template-columns: 1fr; } }
.pers-d { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--f7); }
.pers-c { border: 1px solid var(--b); border-radius: 24px; background: var(--s); padding: var(--f5); display: grid; gap: var(--f3); align-content: start; transition: border-color .25s, transform .25s; }
.pers-c:hover { border-color: var(--b2); transform: translateY(-3px); }
.pers-c h3 { font-size: 24px; line-height: 1.15; } .pers-c p { color: var(--t2); font-size: 16px; }
.pers-c .quien { font: 600 11px/1 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); }
@media (max-width: 960px) { .pers-d { grid-template-columns: 1fr; margin-top: var(--f6); } }

/* ---------- cierre ---------- */
.cierre-c { text-align: center; padding: calc(var(--seccion) * 1.1) 0; position: relative; overflow: clip; }
.cierre-c canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; mask-image: radial-gradient(65% 75% at 50% 50%, #000, transparent); }
.cierre-c .cont { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--f4); }
.cierre-c h2 { font-size: clamp(38px, 6.6vw, 92px); line-height: 1; letter-spacing: -.04em; max-width: 10em; }
.cierre-c .acciones { justify-content: center; margin-top: var(--f4); }
.cierre-c .nodo-iso { width: clamp(70px, 9vw, 110px); }

/* ---------- estilos que antes iban en línea (la CSP de "/" no los admite) ---------- */
html .e1.e1 { padding-bottom: var(--f7); }
html .e2.e2 { --d:.05s; }
html .e3.e3 { --d:.1s; }
html .e4.e4 { --d:.15s; }
html .e5.e5 { --d:.2s; }
html .e6.e6 { --x:22%;--y:13%;--d:1.0s;--k:8; }
html .e7.e7 { --x:78%;--y:13%;--d:1.15s;--k:9; }
html .e8.e8 { gap:0; }
html .e9.e9 { --x:13%;--y:47%;--d:1.3s;--k:9; }
html .e10.e10 { --x:87%;--y:47%;--d:1.45s;--k:8; }
html .e11.e11 { --x:22%;--y:81%;--d:1.6s;--k:8; }
html .e12.e12 { gap:0;padding:2px 10px; }
html .e13.e13 { --x:78%;--y:81%;--d:1.75s;--k:9; }
html .e14.e14 { --x:50%;--y:94%;--d:1.9s;--k:6; }
html .e15.e15 { padding-top: var(--f6); padding-bottom: var(--f7); }
html .e16.e16 { display:grid;justify-items:center; }
html .e17.e17 { --i:0; }
html .e18.e18 { --i:1; }
html .e19.e19 { --i:2; }
html .e20.e20 { --i:3; }
html .e21.e21 { --i:4; }
html .e22.e22 { --i:5; }
html .e23.e23 { --i:6; }
html .e24.e24 { --i:7; }
html .e25.e25 { --i:8; }
html .e26.e26 { --j:0; }
html .e27.e27 { --j:1; }
html .e28.e28 { --j:2; }
html .e29.e29 { width:24px;height:24px; }
html .e30.e30 { --d:.06s; }
html .e31.e31 { --d:0s; }
html .e32.e32 { --d:1.2s; }
html .e33.e33 { --d:2.4s; }
html .e34.e34 { --d:1s; }
html .e35.e35 { --d:2s; }
html .e36.e36 { --d:3s; }
html .e37.e37 { --x:-130px;--y:-52px;--d:0s; }
html .e38.e38 { --x:130px;--y:-46px;--d:1.1s; }
html .e39.e39 { --x:-122px;--y:54px;--d:2.2s; }
html .e40.e40 { --x:126px;--y:56px;--d:3.3s; }
html .e44.e44 { --d:.08s; }
html .e45.e45 { --d:.16s; }
html .e46.e46 { padding-top: var(--f6); padding-bottom: var(--f6); }
html .e47.e47 { --ad:.4s; }
html .e48.e48 { --d:.25s; }
html .e49.e49 { --ad:1.3s; }
html .e50.e50 { width:17px;height:17px; }
html .e51.e51 { --d:.4s; }
html .e53.e53 { --d:.55s; }
html .e54.e54 { gap:0;padding:6px 16px; }
html .e55.e55 { width:16px;height:16px; }
html .e56.e56 { --d:.7s; }
html .e57.e57 { --ad:3s; }
html .e58.e58 { margin-top:var(--f3);display:flex;gap:8px;align-items:center;color:var(--t3);font-size:13px; }
html .e59.e59 { width:15px;height:15px; }
html .e61.e61 { color:var(--t); }
html .e64.e64 { gap:0;padding:4px 16px; }
html .e65.e65 { background:var(--t); }
html .e66.e66 { margin-left:auto;display:flex; }
html .e67.e67 { width:30px;height:30px; }
html .e68.e68 { background:var(--s);border-color:rgba(34,229,140,.4); }

/* QR de Data Fiscal (ARCA) en el pie */
.qr-fiscal { display: inline-block; margin-top: var(--f4); line-height: 0; border-radius: 6px; overflow: hidden; opacity: .92; transition: opacity .2s; }
.qr-fiscal:hover { opacity: 1; }
.qr-fiscal img { width: 72px; height: auto; }

/* En el celular el fundido entre el hero oscuro y la visión clara dejaba un hueco de más de media pantalla (1/10/2026):
   menos aire abajo del hero, un fundido más corto y menos aire arriba de la visión */
@media (max-width: 640px) {
  html .e1.e1 { padding-bottom: var(--f5); }
  .degrade { height: 104px; }
  html .e15.e15 { padding-top: var(--f5); }
  /* "Tu tiempo, primero": las cuatro tareas entran enteras, una línea cada una */
  .tareas { width: 92%; gap: 6px; }
  .tarea { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 9px; padding: 8px 10px; font-size: 13.5px; line-height: 1.2; border-radius: 10px; }
  .tarea .ck { width: 20px; height: 20px; border-radius: 6px; } .tarea .ck svg { width: 12px; height: 12px; }
  .tarea small { font-size: 8.5px; letter-spacing: .08em; }
}

/* Celular: tocar una tarjeta del cerebro abre su detalle en un panel que sube desde abajo de la pantalla (en la
   computadora sale al pasar el mouse; acá .det está oculto y tocarlas no hacía nada, 1/10/2026). Lo arma empresa.js
   con el contenido del .det de la tarjeta. */
.det.det-m { display: none; }
@media (max-width: 640px) {
  .det.det-m { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); top: auto; width: auto; max-width: 440px; margin: 0 auto; padding: 16px 18px 18px; z-index: 60; color: var(--txt); opacity: 0; transform: translateY(24px); transition: opacity .22s ease, transform .26s cubic-bezier(.2,.7,.2,1); pointer-events: none; box-shadow: 0 -10px 60px -12px rgba(0,0,0,.8); }
  .det.det-m.on { opacity: 1; transform: none; pointer-events: auto; }
  .det-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--txt2); font: 400 24px/1 'Geist', sans-serif; cursor: pointer; }
  .det.det-m .t { padding-right: 26px; }
  .det.det-m.dev .e { color: var(--txt3); }
  .nc.abierta { border-color: var(--txt); z-index: 30; }
}

/* Celular: las cuatro burbujas de "Una IA que aprende" se cortaban contra el borde de la tarjeta (salían a ±130 px) */
@media (max-width: 640px) {
  html .e37.e37 { --x: -88px; } html .e38.e38 { --x: 84px; } html .e39.e39 { --x: -84px; } html .e40.e40 { --x: 86px; }
}