:root {
  --negro: #000; --tinta: #F5F5F7; --gris: #86868B; --linea: rgba(255,255,255,.12);
  --rojo: #FF4D2E; --amarillo: #FFC400; --verde: #19D3A2; --violeta: #7B61FF; --rosa: #FF5FA2; --lima: #C8FF3D; --cian: #2EC5FF;
  --f: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; --m: 'JetBrains Mono', ui-monospace, monospace;
  --suave: cubic-bezier(.2,.9,.1,1);
}
:root[data-theme="light"] { color-scheme: dark }
* { box-sizing: border-box }
html { background: #000; -webkit-font-smoothing: antialiased }
body { margin: 0; background: #000; color: var(--tinta); font: 400 17px/1.5 var(--f); overflow-x: hidden }
a { color: inherit }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.wrap { width: min(1200px, calc(100% - 32px)); margin-inline: auto }
.mono { font-family: var(--m); font-size: 12px; letter-spacing: .12em; text-transform: uppercase }

/* ---------- navegación ---------- */
.nav { position: fixed; z-index: 50; inset: 0 0 auto; height: 52px; display: flex; align-items: center; background: rgba(0,0,0,.6); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255,255,255,.08) }
.nav .wrap { display: flex; align-items: center; gap: 28px }
.logo { font-weight: 700; letter-spacing: -.02em; text-decoration: none; font-size: 17px; display: flex; gap: 7px; align-items: center }
.logo i { width: 14px; height: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px } .logo i b { border-radius: 1.5px } .logo i b:nth-child(1) { background: var(--rojo) } .logo i b:nth-child(2) { background: var(--amarillo) } .logo i b:nth-child(3) { background: var(--verde) } .logo i b:nth-child(4) { background: var(--violeta) }
.logo small { font-weight: 500; color: var(--gris); font-size: 14px }
.nav nav { display: flex; gap: 24px; margin-left: auto; font-size: 13px; color: rgba(245,245,247,.8) }
.nav nav a { text-decoration: none } .nav nav a:hover { color: #fff }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; background: #fff; color: #000; font: 600 15px/1 var(--f); text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--suave), background-color .2s }
.btn:hover { transform: scale(1.03) } .btn.chico { min-height: 32px; padding: 0 14px; font-size: 13px }
.btn.linea { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4) }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px }
@media (max-width: 760px) { .nav nav { display: none } .nav .btn { margin-left: auto } }

/* ---------- héroe cinemático con objeto 3D ---------- */
.heroe { position: relative; height: 400vh }
.heroe-fijo { position: sticky; top: 0; height: 100vh; overflow: hidden }
#escena { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.cap { position: absolute; left: 0; right: 0; bottom: 9vh; text-align: center; padding-inline: 16px; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--suave), transform .6s var(--suave); pointer-events: none }
.cap.on { opacity: 1; transform: none; pointer-events: auto }
.cap h1, .cap h2 { text-shadow: 0 2px 30px rgba(0,0,0,.6); margin: 0; font-weight: 700; font-size: clamp(44px, 8vw, 112px); line-height: .95; letter-spacing: -.045em }
.cap p { margin: 18px auto 0; max-width: 34em; color: var(--gris); font-size: clamp(17px, 1.6vw, 21px); font-weight: 500 }
.cap p b { color: var(--tinta); font-weight: 600 }
.cap .acc { display: flex; gap: 12px; justify-content: center; margin-top: 26px }
.cap-0 { top: 11vh; bottom: auto } .cap-0 h1 { font-size: clamp(40px, 6.4vw, 96px) }
.hud { position: absolute; z-index: 2; top: 72px; left: 16px; right: 16px; display: flex; justify-content: space-between; color: var(--gris); pointer-events: none }
.hud b { color: var(--tinta); font-weight: 500 }
.barra-h { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 22px; height: 2px; background: rgba(255,255,255,.12) }
.barra-h i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: #fff }
.colores-h { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; justify-content: center; gap: 6px }
.colores-h span { width: 8px; height: 8px; border-radius: 50%; opacity: .25; transition: opacity .3s, transform .3s }
.esq { position: absolute; z-index: 2; width: 26px; height: 26px; border: 1.5px solid rgba(255,255,255,.45); pointer-events: none }
.esq.tl { left: 16px; top: 96px; border-right: 0; border-bottom: 0 } .esq.tr { right: 16px; top: 96px; border-left: 0; border-bottom: 0 } .esq.bl { left: 16px; bottom: 40px; border-right: 0; border-top: 0 } .esq.br { right: 16px; bottom: 40px; border-left: 0; border-top: 0 }
.lect { position: absolute; z-index: 2; left: 34px; top: 50%; transform: translateY(-50%); display: grid; gap: 22px; pointer-events: none }
.lect small { display: block; color: var(--gris); font-size: 10px; margin-bottom: 4px } .lect b { font-size: 22px; font-weight: 500; letter-spacing: 0; color: #fff }
.lect div { border-left: 2px solid var(--c); padding-left: 12px }
.vivo { position: absolute; z-index: 2; right: 34px; top: 112px; color: #2EC5FF; animation: late 1.6s steps(2) infinite } @keyframes late { 50% { opacity: .35 } }
.cons { position: absolute; z-index: 2; right: 34px; top: 140px; width: 330px; font-size: 11px; line-height: 1.8; letter-spacing: .06em; text-transform: none; color: rgba(255,255,255,.7); pointer-events: none; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
.cons p { margin: 0; animation: entra .4s var(--suave) } .cons p b { color: #2EC5FF; font-weight: 500 } .cons p em { font-style: normal; color: #FFC400 }
.cons .cur { display: inline-block; width: 7px; height: 13px; background: #fff; vertical-align: middle; animation: late 1s steps(2) infinite }
@media (max-width: 1100px) { .lect, .cons { display: none } .vivo { right: 16px } } @media (max-width: 700px) { .vivo, .esq { display: none } }
.colores-h span.on { opacity: 1; transform: scale(1.3) }

/* ---------- declaración con palabras que se encienden ---------- */
.decl { padding: 22vh 0 }
.decl p { margin: 0; font-weight: 700; font-size: clamp(36px, 5.8vw, 84px); line-height: 1.02; letter-spacing: -.04em; max-width: 15ch }
.decl span { color: #2a2a2d; transition: color .35s }
.decl span.on { color: var(--c, #fff) }

/* ---------- formatos: pista horizontal de bloques de color ---------- */
.formatos { position: relative; height: 520vh }
.formatos-fijo { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center }
.formatos-cab { position: absolute; top: 76px; left: 0; right: 0 }
.formatos-cab .wrap { display: flex; justify-content: space-between; align-items: end; gap: 24px }
.formatos-cab h2 { margin: 0; font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -.04em; line-height: 1 }
.formatos-cab .mono { color: var(--gris) }
.pista { display: flex; gap: 20px; padding-left: max(16px, calc((100vw - 1200px) / 2)); will-change: transform; margin-top: 60px }
.fmt { flex: 0 0 min(78vw, 560px); height: min(62vh, 560px); border-radius: 28px; background: var(--c); color: #000; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden }
.fmt .mono { font-weight: 600 }
.fmt h3 { margin: 0; font-size: clamp(48px, 6.4vw, 96px); line-height: .9; letter-spacing: -.05em; font-weight: 800 }
.fmt p { margin: 12px 0 0; font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; max-width: 26em; color: rgba(0,0,0,.72) }
.fmt .dib { position: absolute; right: 7%; top: 12%; width: 38%; aspect-ratio: 1 }
.fmt .dib * { vector-effect: non-scaling-stroke }

/* ---------- datos (sección suiza) ---------- */
.datos { padding: 18vh 0; border-top: 1px solid var(--linea) }
.datos-cab { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px }
.datos-cab h2 { margin: 0; font-size: clamp(40px, 5.4vw, 76px); line-height: .95; letter-spacing: -.045em }
.datos-cab p { margin: 0; color: var(--gris); font-size: 19px; font-weight: 500 }
.reticula { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea) }
.celda { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 22px; min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; position: relative }
.c3 { grid-column: span 3 } .c4 { grid-column: span 4 } .c5 { grid-column: span 5 } .c7 { grid-column: span 7 } .c8 { grid-column: span 8 } .c12 { grid-column: span 12 }
.celda .mono { color: var(--gris) }
.num { font: 500 clamp(44px, 5vw, 72px)/1 var(--m); letter-spacing: -.04em; color: var(--c, #fff) }
.delta { font: 500 12px var(--m); color: var(--c) }
.barras { display: grid; gap: 14px }
.barras div { display: grid; grid-template-columns: 90px 1fr 46px; gap: 14px; align-items: center; font: 500 13px var(--m) }
.barras s { display: block; height: 10px; background: rgba(255,255,255,.08); text-decoration: none; position: relative; overflow: hidden }
.barras s::after { content: ''; position: absolute; inset: 0; background: var(--c); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--suave) }
.vis .barras s::after { transform: scaleX(var(--v)) }
.registro { list-style: none; margin: 0; padding: 0; font: 400 13px/1.4 var(--m); display: grid; gap: 10px; height: 172px; overflow: hidden; align-content: start }
.registro li { display: grid; grid-template-columns: 64px 10px 1fr; gap: 10px; align-items: baseline; animation: entra .5s var(--suave) }
.registro li i { width: 8px; height: 8px; border-radius: 50%; background: var(--c) }
.registro time { color: var(--gris) }
@keyframes entra { from { opacity: 0; transform: translateY(-10px) } }
.linea-t { width: 100%; height: 120px }
.nota-d { margin-top: 14px; color: var(--gris) }

/* ---------- especificaciones ---------- */
.specs { padding: 16vh 0; border-top: 1px solid var(--linea) }
.specs h2 { margin: 0 0 48px; font-size: clamp(40px, 5.4vw, 76px); letter-spacing: -.045em; line-height: .95 }
.spec { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--linea) }
.spec dt { font-weight: 600; font-size: 19px }
.spec dd { margin: 0; color: rgba(245,245,247,.82); font-size: 17px; display: flex; flex-wrap: wrap; gap: 8px 10px }
.spec dd span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); font-size: 14px; font-weight: 500 }

/* ---------- pasos ---------- */
.pasos { padding: 16vh 0; border-top: 1px solid var(--linea) }
.pasos ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--linea) }
.pasos li { padding: 28px 22px 10px 0; border-right: 1px solid var(--linea); padding-left: 22px }
.pasos li:first-child { padding-left: 0 } .pasos li:last-child { border-right: 0 }
.pasos b { display: block; font: 500 clamp(56px, 6vw, 88px)/1 var(--m); letter-spacing: -.05em; color: var(--c); margin-bottom: 24px }
.pasos h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.02em }
.pasos p { margin: 0; color: var(--gris) }
.pasos h2 { margin: 0 0 48px; font-size: clamp(40px, 5.4vw, 76px); letter-spacing: -.045em; line-height: .95 }

/* ---------- cierre ---------- */
.cta { margin: 0 16px 16px; border-radius: 32px; padding: 18vh 0; text-align: center; background: var(--cta, var(--lima)); color: #000; transition: background-color .6s }
.cta h2 { margin: 0; font-size: clamp(48px, 8vw, 120px); line-height: .92; letter-spacing: -.05em; font-weight: 800 }
.cta p { margin: 22px auto 34px; max-width: 30em; font-size: 20px; font-weight: 500; color: rgba(0,0,0,.7) }
.cta .btn { background: #000; color: #fff } .cta .btn.linea { background: transparent; color: #000; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.5) }
.cta .acc { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
footer { padding: 40px 0 60px; color: var(--gris); font-size: 13px }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap }
footer a { text-decoration: none } footer a:hover { color: #fff }

/* aparición general */
.rv { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--suave), transform .9s var(--suave) }
.rv.vis { opacity: 1; transform: none }

@media (max-width: 900px) {
  .datos-cab { grid-template-columns: 1fr } .c3, .c4, .c5 { grid-column: span 6 } .c7, .c8 { grid-column: span 12 }
  .spec { grid-template-columns: 1fr; gap: 12px } .pasos ol { grid-template-columns: 1fr 1fr } .pasos li { padding-left: 0 !important; border-right: 0; border-bottom: 1px solid var(--linea) }
}
@media (max-width: 560px) { .c3, .c4, .c5 { grid-column: span 12 } .pasos ol { grid-template-columns: 1fr } .formatos-cab .wrap { flex-direction: column; align-items: start } }
@media (prefers-reduced-motion: reduce) {
  .heroe { height: auto } .heroe-fijo { position: relative; height: 100vh } .cap { transition: none }
  .formatos { height: auto } .formatos-fijo { position: static; height: auto; padding: 120px 0 60px } .pista { flex-wrap: wrap; transform: none !important; padding-inline: 16px } .fmt { flex-basis: 100% }
  .rv { opacity: 1; transform: none; transition: none } .decl span { color: var(--c, #fff) }
}

/* =================== v2 · glass, más secciones, transiciones =================== */
body { transition: background-color 1s var(--suave) }
.vid { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.35) }
.nav { top: 10px; left: 50%; right: auto; transform: translateX(-50%); width: min(1220px, calc(100% - 20px)); height: 56px; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); background: rgba(12,12,16,.5) }
.nav .wrap { width: 100%; padding: 0 8px 0 20px }
.nav nav a { position: relative } .nav nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--c, #fff); transform: scaleX(0); transition: transform .3s var(--suave) } .nav nav a:hover::after, .nav nav a.act::after { transform: none }
.sec { position: relative; padding: clamp(100px, 14vw, 180px) 0; overflow: hidden }
.aur { position: absolute; inset: 0; pointer-events: none; z-index: 0 }
.aur i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; animation: flota 14s ease-in-out infinite }
@keyframes flota { 50% { transform: translate(var(--dx, 60px), var(--dy, -50px)) scale(1.15) } }
.sec > .wrap { position: relative; z-index: 1 }
.eti { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; margin-bottom: 26px }
.eti i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--cian)); box-shadow: 0 0 12px var(--c, var(--cian)) }
.h2 { margin: 0; font-size: clamp(42px, 6vw, 88px); line-height: .94; letter-spacing: -.05em; font-weight: 800 }
.h2 .c { color: var(--c) }
.lead { margin: 22px 0 0; max-width: 36em; color: rgba(245,245,247,.68); font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; line-height: 1.45 }
/* palabras que suben */
.tt .pw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em }
.tt .pw > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--suave); transition-delay: calc(var(--k) * 45ms) }
.tt.vis .pw > span { transform: none }
/* tarjetas de vidrio que se enfocan */
.gl { opacity: 0; transform: translateY(50px) scale(.96); filter: blur(14px); transition: opacity .9s var(--suave), transform 1s var(--suave), filter .9s var(--suave); transition-delay: calc(var(--d, 0) * 90ms) }
.gl.vis { opacity: 1; transform: none; filter: none }
/* barrido de colores entre capítulos */
.barrido { display: flex; height: 6px; margin: 0 }
.barrido i { flex: 1; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--suave); transition-delay: calc(var(--k) * 60ms) }
.barrido.vis i { transform: none }
/* cortina de entrada */
#cortina { position: fixed; inset: 0; z-index: 200; display: flex; pointer-events: none }
#cortina i { flex: 1; background: var(--c); transform-origin: top; animation: cort 1.1s var(--suave) forwards; animation-delay: calc(.15s + var(--k) * 70ms) }
@keyframes cort { to { transform: scaleY(0) } }

/* problema */
.prob-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px }
.prob { border-radius: 28px; padding: 32px; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between }
.prob .ic { width: 60px; height: 60px; border-radius: 18px; background: var(--c); color: #000; display: grid; place-items: center; font-weight: 900; font-size: 26px; box-shadow: 0 0 40px color-mix(in srgb, var(--c) 50%, transparent) }
.prob h3 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.035em; line-height: 1 }
.prob p { margin: 12px 0 0; color: rgba(245,245,247,.62) }
.prob small { font: 500 12px var(--m); letter-spacing: .14em; color: var(--c) }

/* máquina */
.maq { display: grid; grid-template-columns: 1fr 60px 1.15fr 60px 1fr; align-items: center; margin-top: 70px }
.doc { border-radius: 24px; padding: 24px; height: 340px; position: relative; overflow: hidden }
.doc .l { height: 9px; border-radius: 99px; background: rgba(255,255,255,.22); margin: 15px 0 } .doc .l.r { background: var(--amarillo) }
.doc .sc { position: absolute; left: 0; right: 0; height: 3px; background: var(--cian); box-shadow: 0 0 30px 6px var(--cian); animation: scan 2.4s ease-in-out infinite alternate }
@keyframes scan { from { top: 10% } to { top: 90% } }
.fl { position: relative; height: 2px; background: rgba(255,255,255,.18) } .fl i { position: absolute; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 20px var(--c); animation: viaja 1.4s linear infinite } @keyframes viaja { from { left: 0 } to { left: 100% } }
.pas { display: grid; gap: 12px } .pas div { border-radius: 16px; padding: 16px 20px; display: flex; justify-content: space-between; font-weight: 600 } .pas b { font-family: var(--m); color: var(--c) } .pas .act { box-shadow: 0 0 0 1.5px var(--c), 0 0 40px color-mix(in srgb, var(--c) 35%, transparent) }
.sal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 340px } .sal span { border-radius: 16px; background: var(--c); color: #000; font-weight: 800; padding: 14px; display: flex; align-items: flex-end; font-size: 17px; letter-spacing: -.02em }
.consola2 { margin-top: 22px; border-radius: 20px; padding: 20px 24px; font: 400 14px/1.85 var(--m) }
.consola2 b { color: var(--cian); font-weight: 500 } .consola2 em { font-style: normal; color: var(--amarillo) }
.pasos4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px }
.pasos4 > div { border-radius: 22px; padding: 24px } .pasos4 b { display: block; font: 500 48px/1 var(--m); letter-spacing: -.05em; color: var(--c); margin-bottom: 18px } .pasos4 h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.02em } .pasos4 p { margin: 0; color: rgba(245,245,247,.62); font-size: 15px }

/* confianza */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center }
.cit { border-radius: 22px; padding: 22px 24px; margin-bottom: 14px }
.cit small { font: 500 11px var(--m); letter-spacing: .14em; color: var(--c) } .cit p { margin: 8px 0 12px; font-size: 20px; font-weight: 600; line-height: 1.3 }
.ref { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.1); font: 500 11px var(--m); letter-spacing: .1em } .ref i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde) }
.ventajas { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px } .ventajas li { display: flex; gap: 14px; font-size: 18px; font-weight: 500 } .ventajas li::before { content: ''; flex: none; width: 10px; height: 10px; margin-top: 9px; border-radius: 3px; background: var(--c); transform: rotate(45deg) }

/* estilos de video */
.est-g { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; margin-top: 56px }
.est { aspect-ratio: 3/4; border-radius: 14px; position: relative; overflow: hidden; background: var(--b); transition: transform .4s var(--suave) }
.est:hover { transform: translateY(-6px) rotate(-1.5deg) }
.est span { position: absolute; left: 8px; bottom: 8px; right: 8px; font: 600 10px/1.2 var(--m); letter-spacing: .06em; color: var(--t, #fff) }
.est::before { content: ''; position: absolute; inset: 22% 22% 40%; border-radius: var(--r, 50%); background: var(--f); transform: rotate(var(--g, 0deg)); animation: late2 4s ease-in-out infinite; animation-delay: calc(var(--k) * -.3s) }
@keyframes late2 { 50% { transform: rotate(calc(var(--g, 0deg) + 25deg)) scale(.85) } }
.marca { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px }
.marca > div { border-radius: 22px; padding: 24px } .marca h3 { margin: 10px 0 6px; font-size: 21px; letter-spacing: -.02em } .marca p { margin: 0; color: rgba(245,245,247,.62); font-size: 15px }
.swatch { display: flex; gap: 6px } .swatch i { width: 26px; height: 26px; border-radius: 8px; background: var(--c) }

/* plataforma extra */
.plat2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-top: 18px }
.app { border-radius: 24px; padding: 22px; display: grid; gap: 14px }
.app .fila { display: flex; gap: 14px; align-items: center; border-radius: 16px; padding: 14px; background: rgba(255,255,255,.05) }
.anillo { --p: 75; width: 64px; height: 64px; border-radius: 50%; flex: none; background: conic-gradient(var(--verde) calc(var(--p) * 1%), rgba(255,255,255,.1) 0); -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%); mask: radial-gradient(circle, transparent 56%, #000 57%) }
.cursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px } .cursos div { height: 120px; border-radius: 14px; background: var(--c); color: #000; padding: 12px; font-weight: 700; display: flex; flex-direction: column; justify-content: space-between; font-size: 15px; line-height: 1.1 } .cursos s { text-decoration: none; height: 6px; border-radius: 99px; background: rgba(0,0,0,.2); overflow: hidden } .cursos s i { display: block; height: 100%; width: var(--v); background: #000 }
.herr { list-style: none; margin: 0; padding: 22px; border-radius: 24px; display: grid; gap: 10px; align-content: start }
.herr li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.05); font-weight: 600 } .herr li i { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--c); display: grid; place-items: center; color: #000; font-style: normal; font-weight: 800 }
.herr li small { display: block; font-weight: 500; color: rgba(245,245,247,.55); font-size: 13px }

/* comparación */
.comp { margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.comp > div { border-radius: 28px; padding: 34px } .comp h3 { margin: 0 0 20px; font-size: 28px; letter-spacing: -.03em }
.comp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px } .comp li { display: flex; gap: 12px; font-size: 18px; font-weight: 500 } .comp .a li { color: rgba(245,245,247,.55) } .comp .a li::before { content: '×'; color: var(--rojo); font-weight: 800 } .comp .b { background: var(--violeta) !important; border-color: transparent !important } .comp .b li::before { content: '✓'; color: var(--lima); font-weight: 800 }

/* soluciones */
.sol-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 60px }
.sol { border-radius: 24px; padding: 24px; min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; transition: transform .4s var(--suave) }
.sol:hover { transform: translateY(-6px) } .sol::before { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--c); filter: blur(30px); opacity: .55 }
.sol small { font: 500 11px var(--m); letter-spacing: .14em; color: var(--c); position: relative } .sol h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.03em; position: relative } .sol p { margin: 0; color: rgba(245,245,247,.62); font-size: 15px; position: relative }

/* seguridad, piloto, preguntas */
.seg-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 60px }
.seg-g > div { border-radius: 22px; padding: 24px; border-top: 3px solid var(--c) !important } .seg-g b { display: block; font-size: 19px; margin: 0 0 6px; letter-spacing: -.02em } .seg-g p { margin: 0; color: rgba(245,245,247,.62); font-size: 15px }
.pil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 60px }
.pil > div { border-radius: 26px; padding: 30px } .pil b { font: 500 64px/1 var(--m); letter-spacing: -.06em; color: var(--c) } .pil h3 { margin: 22px 0 8px; font-size: 26px; letter-spacing: -.03em } .pil p { margin: 0; color: rgba(245,245,247,.62) }
.faq { margin-top: 56px; display: grid; gap: 12px }
.faq details { border-radius: 20px; padding: 0 24px; transition: background-color .3s }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-size: 19px; font-weight: 600; display: flex; justify-content: space-between; gap: 20px; letter-spacing: -.01em } .faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: '+'; font: 400 26px/1 var(--m); color: var(--c); transition: transform .35s var(--suave) } .faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { margin: 0 0 22px; color: rgba(245,245,247,.7); max-width: 52em }
.pie { border-top: 1px solid var(--linea); padding: 56px 0 60px; color: var(--gris); font-size: 14px }
.pie .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px }
.pie h4 { margin: 0 0 14px; color: #fff; font-size: 14px } .pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px } .pie a { text-decoration: none } .pie a:hover { color: #fff }

@media (max-width: 1000px) {
  .prob-g, .pil, .marca { grid-template-columns: 1fr } .maq { grid-template-columns: 1fr; gap: 16px } .fl { width: 2px; height: 40px; margin: 0 auto } .fl i { left: -6px !important; animation: none } .doc, .sal { height: 240px }
  .pasos4, .seg-g, .sol-g { grid-template-columns: 1fr 1fr } .dos, .plat2, .comp { grid-template-columns: 1fr } .est-g { grid-template-columns: repeat(5, 1fr) } .pie .wrap { grid-template-columns: 1fr 1fr }
}
@media (max-width: 560px) { .pasos4, .seg-g, .sol-g { grid-template-columns: 1fr } .est-g { grid-template-columns: repeat(4, 1fr) } .cursos { grid-template-columns: 1fr 1fr } }
@media (prefers-reduced-motion: reduce) { .gl, .tt .pw > span, .barrido i { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important } #cortina { display: none } .aur i { animation: none } }

.formatos-cab { top: 92px } .pista { margin-top: 170px }
/* cabecera de color por página */
.cab { position: relative; min-height: 88vh; display: flex; align-items: flex-end; padding: 150px 0 80px; background: var(--c); color: #0A0A0D; overflow: hidden }
.cab .wrap { position: relative; z-index: 2 }
.cab .mono { opacity: .7 }
.cab h1 { margin: 18px 0 0; font-size: clamp(56px, 10vw, 160px); line-height: .86; letter-spacing: -.06em; font-weight: 800 }
.cab p { margin: 26px 0 0; max-width: 34em; font-size: clamp(19px, 1.8vw, 24px); font-weight: 500; color: rgba(10,10,13,.75) }
.cab .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px } .cab .chips span { padding: 10px 16px; border-radius: 99px; font-weight: 600; background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
.cab .fig { position: absolute; right: 6%; top: 18%; width: min(36vw, 460px); aspect-ratio: 1; perspective: 1200px; z-index: 1 }
.cab .fig div { position: absolute; inset: 12%; border-radius: 28px; border: 1.5px solid rgba(255,255,255,.75); background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc(var(--i) * 34px)); animation: capa 7s ease-in-out infinite; animation-delay: calc(var(--i) * -.25s) }
.cab .fig div:nth-child(odd) { background: rgba(10,10,13,.12) }
@keyframes capa { 50% { transform: rotateX(54deg) rotateZ(-28deg) translateZ(calc(var(--i) * 46px)) } }
.cab .sombra { position: absolute; right: -10%; bottom: -30%; width: 60vw; height: 60vw; border-radius: 50%; background: rgba(255,255,255,.28); filter: blur(60px) }
.cab h1 .pw > span { transition-duration: 1.1s }
@media (max-width: 800px) { .cab .fig { opacity: .45; right: -10%; top: 10% } }
.teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 60px }
.teaser { border-radius: 28px; padding: 28px; min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; background: var(--c); color: #0A0A0D; transition: transform .45s var(--suave) }
.teaser:hover { transform: translateY(-8px) rotate(-.6deg) } .teaser h3 { margin: 0; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.045em; line-height: .95 } .teaser p { margin: 10px 0 0; font-weight: 500; opacity: .75 } .teaser .mono { opacity: .7 } .teaser .fl2 { font-size: 28px }
@media (max-width: 900px) { .teasers { grid-template-columns: 1fr 1fr } } @media (max-width: 560px) { .teasers { grid-template-columns: 1fr } }
.legal { padding: 150px 0 100px } .legal .doc-l { max-width: 760px } .legal h1 { font-size: clamp(44px, 6vw, 80px); letter-spacing: -.05em; margin: 0 0 30px } .legal .doc-l h2 { font-size: 26px; letter-spacing: -.02em; margin: 40px 0 10px } .legal .doc-l p, .legal .doc-l li { color: rgba(245,245,247,.78) } .legal table { width: 100%; border-collapse: collapse; font-size: 15px } .legal th, .legal td { border-bottom: 1px solid var(--linea); padding: 10px; text-align: left; vertical-align: top } .legal mark { background: rgba(255,196,0,.25); color: #fff; padding: 0 4px; border-radius: 4px }

.menu-b { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; margin-left: 8px }
.menu-b i { width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--suave) }
.menu-on .menu-b i:first-child { transform: translateY(4px) rotate(45deg) } .menu-on .menu-b i:last-child { transform: translateY(-4px) rotate(-45deg) }
@media (max-width: 760px) {
  .menu-b { display: inline-flex }
  .nav nav { display: grid; position: fixed; top: 76px; left: 10px; right: 10px; gap: 4px; padding: 14px; border-radius: 24px; background: rgba(12,12,16,.94); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); font-size: 22px; font-weight: 700; opacity: 0; transform: translateY(-12px) scale(.98); pointer-events: none; transition: opacity .3s var(--suave), transform .4s var(--suave) }
  .nav nav a { padding: 12px 10px; border-radius: 12px; color: #fff } .nav nav a::after { display: none } .nav nav a.act { background: rgba(255,255,255,.08); color: var(--c) }
  .menu-on .nav nav { opacity: 1; transform: none; pointer-events: auto }
}

@media (max-width: 760px) { .nav .btn.chico { white-space: nowrap; padding: 0 12px; font-size: 12px } .logo small { display: none } }

/* =================== v3 · ejemplos, formulario, telón direccional 3D =================== */
.ej-g { display: grid; grid-template-columns: 1fr 300px; gap: 18px; margin-top: 56px; align-items: end }
.ej-g figure, .gal figure { margin: 0; border-radius: 24px; padding: 14px; overflow: hidden }
.ej-g video, .gal video { width: 100%; display: block; border-radius: 14px; background: #000 }
.ej-vid video { aspect-ratio: 16/9 }
.cel { border-radius: 28px; padding: 8px; background: #000; border: 1px solid rgba(255,255,255,.18) } .cel video { aspect-ratio: 9/16; border-radius: 20px !important }
figcaption { padding: 14px 6px 4px; font-weight: 700; font-size: 17px; letter-spacing: -.01em } figcaption .mono { display: block; color: var(--gris); font-size: 11px; margin-bottom: 4px; font-weight: 500 }
.ej-act { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px }
.ej-act > div { border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--c) !important }
.ej-act .mono { color: var(--c) } .ej-act h3 { margin: 0; font-size: 21px; letter-spacing: -.02em } .ej-act audio { width: 100%; height: 40px } .ej-act .btn { align-self: flex-start }
.sub3 { margin: 56px 0 18px; font-size: 26px; letter-spacing: -.03em }
.ej-tarj { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.tj { position: relative; height: 210px; border: 0; padding: 0; background: none; cursor: pointer; perspective: 900px; font: inherit; color: inherit; text-align: left }
.tj > span { position: absolute; inset: 0; border-radius: 22px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; font-size: 19px; font-weight: 700; line-height: 1.2; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s var(--suave) }
.tj .fr { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px) } .tj .fr small { color: var(--c) }
.tj .re { background: var(--c); color: #0A0A0D; transform: rotateY(180deg) } .tj .re small { opacity: .7 }
.tj[aria-pressed="true"] .fr { transform: rotateY(-180deg) } .tj[aria-pressed="true"] .re { transform: none }
.gal { display: grid; grid-template-columns: 1fr 1fr 300px; gap: 16px; margin-top: 56px; align-items: end }
.gal video { aspect-ratio: 16/9 } .gal-v video { aspect-ratio: 9/16 }
.check { list-style: none; counter-reset: c; margin: 0; padding: 26px; border-radius: 26px; display: grid; gap: 12px }
.check li { counter-increment: c; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); color: rgba(245,245,247,.75) }
.check li::before { content: counter(c, decimal-leading-zero); font: 500 20px var(--m); color: var(--lima) } .check b { color: #fff; display: block }
.form { border-radius: 26px; padding: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.form label { display: grid; gap: 8px; font-weight: 600; font-size: 14px } .form .ancho { grid-column: 1 / -1 }
.form input, .form select, .form textarea { font: 500 16px var(--f); color: #fff; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 13px 14px; width: 100% }
.form select option { background: #111; color: #fff } .form textarea { resize: vertical }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--amarillo); outline-offset: 1px; border-color: transparent }
.form [aria-invalid="true"] { border-color: var(--rojo) }
.form .err { grid-column: 1 / -1; margin: 0; color: #FFB4A6; font-weight: 600 } .form .fino { margin: 0; font-size: 13px; color: rgba(245,245,247,.6) } .form .fino a { color: #fff }
.acc2 { display: flex; gap: 10px; flex-wrap: wrap }
.ventajas a { color: inherit; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px }
@media (max-width: 1000px) { .ej-g, .gal { grid-template-columns: 1fr } .ej-tel, .gal-v { max-width: 320px } .ej-act, .ej-tarj { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .ej-act, .ej-tarj, .form { grid-template-columns: 1fr } }
.teasers { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }

/* entradas en 3D */
.gl { transform: perspective(1000px) translateY(60px) rotateX(18deg) scale(.96); transform-origin: 50% 100% }
.gl.vis { transform: none }
.tilt.vis { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important; transition: transform .25s ease-out, opacity .9s var(--suave), filter .9s var(--suave), border-color .3s !important }
.cab .fig { transform: translateY(var(--py, 0px)) rotate(var(--pr, 0deg)) }

/* telón direccional entre páginas */
#cortina { display: none }
#telon { position: fixed; inset: 0; z-index: 300; display: flex; pointer-events: none; perspective: 1600px }
#telon i { flex: 1; background: var(--c); transform: scaleX(0) }
.v-arr #telon, .v-aba #telon, .s-arr #telon, .s-aba #telon { flex-direction: column }
/* llegada: el telón cubre y se retira hacia el lado contrario */
.e-der #telon i { animation: tx-sal .8s var(--suave) both; transform-origin: left; animation-delay: calc((6 - var(--k)) * 45ms) }
.e-izq #telon i { animation: tx-sal .8s var(--suave) both; transform-origin: right; animation-delay: calc(var(--k) * 45ms) }
.e-arr #telon i { animation: ty-sal .8s var(--suave) both; transform-origin: bottom; animation-delay: calc(var(--k) * 45ms) }
.e-aba #telon i { animation: ty-sal .8s var(--suave) both; transform-origin: top; animation-delay: calc((6 - var(--k)) * 45ms) }
@keyframes tx-sal { from { transform: scaleX(1) rotateY(0) } to { transform: scaleX(0) rotateY(70deg) } }
@keyframes ty-sal { from { transform: scaleY(1) rotateX(0) } to { transform: scaleY(0) rotateX(70deg) } }
.e-arr #telon, .e-aba #telon { flex-direction: column }
.e-arr #telon i, .e-aba #telon i { transform: scaleY(0) }
/* salida: el telón entra desde el lado de destino */
.s-der #telon i { animation: tx-ent .5s var(--suave) both; transform-origin: right; animation-delay: calc((6 - var(--k)) * 35ms) }
.s-izq #telon i { animation: tx-ent .5s var(--suave) both; transform-origin: left; animation-delay: calc(var(--k) * 35ms) }
.s-arr #telon i { animation: ty-ent .5s var(--suave) both; transform-origin: top; animation-delay: calc(var(--k) * 35ms) }
.s-aba #telon i { animation: ty-ent .5s var(--suave) both; transform-origin: bottom; animation-delay: calc((6 - var(--k)) * 35ms) }
@keyframes tx-ent { from { transform: scaleX(0) rotateY(-70deg) } to { transform: scaleX(1) rotateY(0) } }
@keyframes ty-ent { from { transform: scaleY(0) rotateX(-70deg) } to { transform: scaleY(1) rotateX(0) } }
.s-der main, .s-izq main, .s-arr main, .s-aba main { transition: transform .5s var(--suave), opacity .5s; opacity: .4 }
.s-der main { transform: perspective(1400px) translateX(-60px) rotateY(6deg) } .s-izq main { transform: perspective(1400px) translateX(60px) rotateY(-6deg) }
.s-arr main { transform: perspective(1400px) translateY(60px) rotateX(-5deg) } .s-aba main { transform: perspective(1400px) translateY(-60px) rotateX(5deg) }
/* contenido que llega desde su lado */
.e-der main { animation: m-der .95s var(--suave) backwards .18s } .e-izq main { animation: m-izq .95s var(--suave) backwards .18s }
.e-arr main { animation: m-arr .95s var(--suave) backwards .18s } .e-aba main { animation: m-aba .95s var(--suave) backwards .18s }
@keyframes m-der { from { transform: perspective(1400px) translateX(90px) rotateY(-9deg); opacity: 0 } }
@keyframes m-izq { from { transform: perspective(1400px) translateX(-90px) rotateY(9deg); opacity: 0 } }
@keyframes m-arr { from { transform: perspective(1400px) translateY(-90px) rotateX(8deg); opacity: 0 } }
@keyframes m-aba { from { transform: perspective(1400px) translateY(90px) rotateX(-8deg); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { #telon { display: none } .e-der main, .e-izq main, .e-arr main, .e-aba main { animation: none } .gl { transform: none } }

/* ajustes de contraste y accesibilidad */
:root { --violeta: #8B73FF }
.logo small { color: rgba(255,255,255,.72) !important }
.cab .mono { opacity: 1 } .cab p { color: #0A0A0D } .cab .chips span { color: #0A0A0D }
.ej-act .mono, .sol small, .cit small, .prob small { color: color-mix(in srgb, var(--c) 55%, #fff) !important }
.fmt p { color: rgba(0,0,0,.86) }
.comp .b, .comp .b h3 { color: #0A0A0D } .comp .b li::before { color: #0A0A0D !important }
.eti { background: rgba(10,10,14,.6) !important }
.herr-t { background: none !important; padding: 0 0 4px !important; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 500 }
.doc-l table { display: block; overflow-x: auto; max-width: 100% }
.nota-d { color: rgba(255,255,255,.62) !important }

.doc .mono { color: rgba(255,255,255,.7) !important }
.nav .logo { color: #fff }
.h2 .c { filter: saturate(1.1) brightness(1.15) }
.fmt:nth-child(4) p, .fmt:nth-child(4) h3, .fmt:nth-child(4) .mono { color: #0A0A0D }
.nav { background: rgba(10,10,14,.74) !important } .nav nav a { color: #fff } .nav nav { color: #fff }
.teaser .mono, .teaser p { opacity: 1 !important; color: #0A0A0D }
.h2 .c { color: color-mix(in srgb, var(--c) 72%, #fff) !important; filter: none }

/* =================== v4 · limpio, suave, transiciones reales =================== */
/* sin marcos ni límites en pantalla */
.hud, .esq, .barra-h, .colores-h, .vivo, .cons { display: none !important }
.lect { left: clamp(24px, 3vw, 48px); gap: 26px; opacity: .9 } .lect-n { margin: 6px 0 0; font-size: 10px; color: rgba(255,255,255,.5); letter-spacing: .12em; max-width: 14em; text-transform: uppercase }
@media (max-width: 1280px) { .lect { display: none } }
/* más aire */
.sec { padding: clamp(120px, 15vw, 220px) 0 }
.wrap { width: min(1180px, calc(100% - 48px)) }
.lead { margin-top: 28px; line-height: 1.55 }
.prob-g, .sol-g, .seg-g, .pil, .teasers, .pasos4, .ej-act, .ej-tarj, .marca, .comp, .plat2 { gap: 24px !important }
.prob-g, .sol-g, .seg-g, .pil, .teasers, .comp { margin-top: 72px !important }
.prob, .sol, .pil > div, .seg-g > div, .teaser { padding: clamp(26px, 2.6vw, 38px) !important }
.maq { margin-top: 80px } .consola2 { margin-top: 28px } .pasos4 { margin-top: 28px }
.est-g { gap: 14px; margin-top: 64px } .marca { margin-top: 28px }
.dos { gap: clamp(40px, 6vw, 96px) }
.datos { padding: clamp(120px, 15vw, 220px) 0 } .datos-cab { margin-bottom: 72px } .plat2 { margin-top: 28px }
.faq { gap: 14px; margin-top: 64px } .faq summary { padding: 26px 0 }
.cab { min-height: 92vh; padding-bottom: 110px } .cab p { margin-top: 30px } .cab .chips { margin-top: 36px }
.formatos-cab { top: 100px } .pista { margin-top: 190px; gap: 28px }
.spec { padding: 30px 0 }
@media (max-width: 760px) { .wrap { width: calc(100% - 32px) } .sec { padding: 110px 0 } }
/* movimiento más suave */
html.lenis, html.lenis body { height: auto } .lenis.lenis-smooth { scroll-behavior: auto !important } .lenis.lenis-stopped { overflow: hidden }
.gl { transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.3s cubic-bezier(.16,1,.3,1), filter 1.1s cubic-bezier(.16,1,.3,1) !important; transition-delay: calc(var(--d, 0) * 110ms) !important }
.tt .pw > span { transition: transform 1.1s cubic-bezier(.16,1,.3,1) !important; transition-delay: calc(var(--k) * 38ms) !important }
.tilt.vis { transition: transform .5s cubic-bezier(.16,1,.3,1), opacity 1.1s, filter 1.1s, border-color .3s !important }
/* transiciones entre páginas: View Transitions (Chrome, Edge) */
@view-transition { navigation: auto }
::view-transition-group(root) { animation-duration: .85s }
.vt.e-der::view-transition-old(root) { animation: vt-a-izq .7s cubic-bezier(.7,0,.2,1) both } .vt.e-der::view-transition-new(root) { animation: vt-de-der .85s cubic-bezier(.16,1,.3,1) both }
.vt.e-izq::view-transition-old(root) { animation: vt-a-der .7s cubic-bezier(.7,0,.2,1) both } .vt.e-izq::view-transition-new(root) { animation: vt-de-izq .85s cubic-bezier(.16,1,.3,1) both }
.vt.e-arr::view-transition-old(root) { animation: vt-a-aba .7s cubic-bezier(.7,0,.2,1) both } .vt.e-arr::view-transition-new(root) { animation: vt-de-arr .85s cubic-bezier(.16,1,.3,1) both }
.vt.e-aba::view-transition-old(root) { animation: vt-a-arr .7s cubic-bezier(.7,0,.2,1) both } .vt.e-aba::view-transition-new(root) { animation: vt-de-aba .85s cubic-bezier(.16,1,.3,1) both }
@keyframes vt-a-izq { to { transform: perspective(1800px) translateX(-35%) rotateY(22deg) scale(.86); opacity: 0; filter: blur(6px) } }
@keyframes vt-a-der { to { transform: perspective(1800px) translateX(35%) rotateY(-22deg) scale(.86); opacity: 0; filter: blur(6px) } }
@keyframes vt-a-aba { to { transform: perspective(1800px) translateY(30%) rotateX(-16deg) scale(.88); opacity: 0; filter: blur(6px) } }
@keyframes vt-a-arr { to { transform: perspective(1800px) translateY(-30%) rotateX(16deg) scale(.88); opacity: 0; filter: blur(6px) } }
@keyframes vt-de-der { from { transform: perspective(1800px) translateX(45%) rotateY(-24deg) scale(.88); opacity: 0 } }
@keyframes vt-de-izq { from { transform: perspective(1800px) translateX(-45%) rotateY(24deg) scale(.88); opacity: 0 } }
@keyframes vt-de-arr { from { transform: perspective(1800px) translateY(-40%) rotateX(18deg) scale(.9); opacity: 0 } }
@keyframes vt-de-aba { from { transform: perspective(1800px) translateY(40%) rotateX(-18deg) scale(.9); opacity: 0 } }
.vt #telon { display: none } .vt.e-der main, .vt.e-izq main, .vt.e-arr main, .vt.e-aba main { animation: none }
/* respaldo en otros navegadores: un solo panel del color de destino */
#telon i:not(:first-child) { display: none } #telon i:first-child { background: var(--tc, #8B73FF) }
.e-der #telon i, .e-izq #telon i { animation-duration: .75s !important; animation-delay: .05s !important }
.e-arr #telon i, .e-aba #telon i { animation-duration: .75s !important; animation-delay: .05s !important }
.s-der #telon i, .s-izq #telon i, .s-arr #telon i, .s-aba #telon i { animation-duration: .45s !important; animation-delay: 0s !important }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important } }
.cta p { color: #0A0A0D !important }

.lg-m { width: 26px; height: 26px; flex: none; display: block } .logo { gap: 9px !important }

.logo { font-weight: 600 !important; letter-spacing: -.035em !important; font-size: 19px !important; text-transform: none } .logo small { font-weight: 400 !important; font-size: 19px !important; letter-spacing: -.03em }
.lg-m { width: 28px; height: 28px }
.pie { color: rgba(255,255,255,.72) !important } .pie .logo { color: #fff }

/* inicio: sin contadores, con invitación a bajar */
.lect { display: none !important }
.baja { position: absolute; z-index: 3; left: 50%; bottom: 34px; transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; color: rgba(255,255,255,.75); transition: opacity .5s, transform .6s cubic-bezier(.16,1,.3,1) }
.baja .mono { font-size: 11px }
.baja i { width: 26px; height: 42px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.55); position: relative }
.baja i::after { content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: baja 1.6s cubic-bezier(.6,0,.3,1) infinite }
@keyframes baja { 0% { transform: translateY(0); opacity: 1 } 70% { transform: translateY(14px); opacity: 0 } 100% { opacity: 0 } }
.baja.off { opacity: 0; transform: translate(-50%, 20px) }
/* escena 3D propia de cada página */
.cab .fig { display: none }
.cab-3d { position: absolute; z-index: 1; right: 0; top: 0; width: 58%; height: 100%; display: block }
@media (max-width: 900px) { .cab-3d { width: 100%; height: 55%; opacity: .6 } }
/* objetos 3D de CSS: uno distinto en cada sección */
.sec .h2 { max-width: min(100%, 880px) }
.obj3d { position: absolute; z-index: 1; top: clamp(18px, 3vw, 44px); right: max(24px, calc((100vw - 1180px) / 2)); width: var(--os, 150px); height: var(--os, 150px); perspective: 700px; pointer-events: none; --oc: #8B73FF }
.obj3d .r { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx3, -18deg)) rotateY(var(--ry3, 0deg)); transition: transform .6s cubic-bezier(.16,1,.3,1) }
.obj3d .g { position: absolute; inset: 0; transform-style: preserve-3d; animation: o-gira 16s linear infinite }
@keyframes o-gira { to { transform: rotateY(360deg) } }
.obj3d i { position: absolute; display: block; transform-style: preserve-3d }
.f { background: color-mix(in srgb, var(--oc) 22%, transparent); border: 1.5px solid var(--oc); box-shadow: inset 0 0 24px color-mix(in srgb, var(--oc) 35%, transparent) }
/* cubo */
.o-cubo i { inset: 25%; } .o-cubo i:nth-child(1) { transform: translateZ(37px) } .o-cubo i:nth-child(2) { transform: rotateY(180deg) translateZ(37px) } .o-cubo i:nth-child(3) { transform: rotateY(90deg) translateZ(37px) } .o-cubo i:nth-child(4) { transform: rotateY(-90deg) translateZ(37px) } .o-cubo i:nth-child(5) { transform: rotateX(90deg) translateZ(37px) } .o-cubo i:nth-child(6) { transform: rotateX(-90deg) translateZ(37px) }
.o-cubo i { border-radius: 10px }
/* capas */
.o-capas .g { animation: o-flota 6s ease-in-out infinite; transform: rotateX(58deg) rotateZ(-35deg) } @keyframes o-flota { 50% { transform: rotateX(52deg) rotateZ(-25deg) } }
.o-capas i { inset: 22%; border-radius: 14px; transform: translateZ(calc(var(--k) * 14px)) }
/* anillos (giroscopio) */
.o-anillos i { inset: 8%; border-radius: 50%; border: 2px solid var(--oc); box-shadow: 0 0 18px color-mix(in srgb, var(--oc) 45%, transparent) }
.o-anillos i:nth-child(2) { inset: 18%; animation: o-ax 7s linear infinite } .o-anillos i:nth-child(3) { inset: 28%; animation: o-az 5s linear infinite; border-color: #fff } .o-anillos i:nth-child(4) { inset: 44%; background: var(--oc); border: 0 }
@keyframes o-ax { to { transform: rotateX(360deg) } } @keyframes o-az { to { transform: rotateX(70deg) rotateZ(360deg) } }
/* pirámide */
.o-piramide i { left: 25%; top: 20%; width: 50%; height: 60%; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform-origin: 50% 100%; background: color-mix(in srgb, var(--oc) 45%, transparent) }
.o-piramide i:nth-child(1) { transform: translateZ(37px) rotateX(30deg) } .o-piramide i:nth-child(2) { transform: rotateY(90deg) translateZ(37px) rotateX(30deg) } .o-piramide i:nth-child(3) { transform: rotateY(180deg) translateZ(37px) rotateX(30deg) } .o-piramide i:nth-child(4) { transform: rotateY(270deg) translateZ(37px) rotateX(30deg); background: var(--oc) }
/* órbita */
.o-orbita .g { animation-duration: 9s } .o-orbita i:nth-child(1) { inset: 34%; border-radius: 50%; background: var(--oc); box-shadow: 0 0 30px var(--oc) }
.o-orbita i:nth-child(n+2) { left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #fff; transform: rotateY(calc(var(--k) * 120deg)) translateZ(64px) }
.o-orbita i:nth-child(n+2)::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--oc) }
/* cilindro de tarjetas */
.o-cartas i { left: 38%; top: 24%; width: 24%; height: 52%; border-radius: 8px; transform: rotateY(calc(var(--k) * 45deg)) translateZ(58px) }
/* hélice de puntos */
.o-helice i { left: 50%; top: 10%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--oc); transform: translateY(calc(var(--k) * 9px)) rotateY(calc(var(--k) * 32deg)) translateZ(46px); box-shadow: 0 0 12px var(--oc) }
.o-helice i:nth-child(even) { background: #fff }
@media (max-width: 760px) { .obj3d { --os: 96px !important; top: 14px; right: 16px; opacity: .85 } .o-cubo i:nth-child(1) { transform: translateZ(24px) } }
@media (prefers-reduced-motion: reduce) { .obj3d .g, .obj3d i { animation: none !important } }
@media (min-width: 901px) { .cab h1 { font-size: clamp(52px, 6.8vw, 118px) } .cab h1, .cab p, .cab .chips { max-width: 50% } .cab-3d { width: 50% } }
/* =================== modo claro =================== */
.tema-b, .idioma-b { height: 40px; min-width: 40px; padding: 0 10px; border-radius: 99px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; display: inline-grid; place-items: center; cursor: pointer; font: 600 13px var(--f); text-decoration: none; margin-left: 4px; transition: background-color .25s }
.tema-b:hover, .idioma-b:hover { background: rgba(255,255,255,.14) } .tema-b svg { width: 18px; height: 18px } .tema-b .sol-i { display: none }
.nav nav { margin-right: 6px }
[data-tema="claro"] { --tinta: #14141B; --gris: #5F5F6B; --linea: rgba(20,20,27,.12); color-scheme: light }
[data-tema="claro"] .tema-b .sol-i { display: block } [data-tema="claro"] .tema-b .luna-i { display: none }
[data-tema="claro"] body { color: #14141B; background-color: #F6F5F2 }
html[data-tema="claro"] { background: #F6F5F2 }
[data-tema="claro"] .nav { background: rgba(255,255,255,.78) !important; border-color: rgba(20,20,27,.1) !important }
[data-tema="claro"] .nav nav a, [data-tema="claro"] .nav nav, [data-tema="claro"] .logo, [data-tema="claro"] .pie .logo { color: #14141B }
[data-tema="claro"] .tema-b, [data-tema="claro"] .idioma-b, [data-tema="claro"] .menu-b { border-color: rgba(20,20,27,.18); background: rgba(20,20,27,.05); color: #14141B }
[data-tema="claro"] .menu-b i { background: #14141B }
[data-tema="claro"] .logo small { color: #5F5F6B !important }
[data-tema="claro"] .lg-m path[fill="#F5F5F7"] { fill: #14141B } [data-tema="claro"] .lg-m path[fill="#B69CFF"] { fill: #6B4DFF } [data-tema="claro"] .lg-m [stroke="#C8FF3D"] { stroke: #6FA800 }
[data-tema="claro"] .btn:not(.linea) { background: #14141B; color: #fff } [data-tema="claro"] .btn.linea { color: #14141B; box-shadow: inset 0 0 0 1.5px rgba(20,20,27,.4) }
[data-tema="claro"] .cta .btn:not(.linea), [data-tema="claro"] .cab .btn { background: #0A0A0D; color: #fff }
[data-tema="claro"] .vid { background: rgba(255,255,255,.62); border-color: rgba(20,20,27,.1); box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(40,30,80,.12) }
[data-tema="claro"] .aur i { opacity: .32 }
[data-tema="claro"] :is(.lead, .prob p, .sol p, .seg-g p, .pil p, .pasos4 p, .marca p, .faq details p, .check li, .medida span, .comp .a li, .spec dd, .datos-cab p, .legal .doc-l p, .legal .doc-l li, .nota-d, .ej-act p, .cap p) { color: rgba(20,20,27,.7) !important }
[data-tema="claro"] .cap p b, [data-tema="claro"] .check b { color: #14141B }
[data-tema="claro"] .cap h1, [data-tema="claro"] .cap h2 { text-shadow: none }
[data-tema="claro"] .baja { color: rgba(20,20,27,.7) } [data-tema="claro"] .baja i { border-color: rgba(20,20,27,.5) } [data-tema="claro"] .baja i::after { background: #14141B }
[data-tema="claro"] .decl span { color: #DAD7D0 } [data-tema="claro"] .decl span.on { color: color-mix(in srgb, var(--c) 72%, #000) } [data-tema="claro"] .decl span.on[style*="F5F5F7"] { color: #14141B }
[data-tema="claro"] .h2 .c { color: color-mix(in srgb, var(--c) 68%, #000) !important }
[data-tema="claro"] :is(.ej-act .mono, .sol small, .cit small, .prob small) { color: color-mix(in srgb, var(--c) 60%, #000) !important }
[data-tema="claro"] .num { color: color-mix(in srgb, var(--c, #14141B) 62%, #000) } [data-tema="claro"] .delta { color: color-mix(in srgb, var(--c) 60%, #000) }
[data-tema="claro"] .barras s { background: rgba(20,20,27,.08) } [data-tema="claro"] .celda .mono, [data-tema="claro"] .registro time { color: #5F5F6B }
[data-tema="claro"] .doc .l { background: rgba(20,20,27,.14) } [data-tema="claro"] .doc .mono, [data-tema="claro"] .doc span { color: #5F5F6B !important } [data-tema="claro"] .doc .l[style*="background:#fff"] { background: #14141B !important }
[data-tema="claro"] .consola2 em { color: #9A7400 } [data-tema="claro"] .consola2 b, [data-tema="claro"] .pas b { filter: brightness(.7) }
[data-tema="claro"] .check li { background: rgba(20,20,27,.04) } [data-tema="claro"] .check li::before { color: #5E8F00 }
[data-tema="claro"] .form input, [data-tema="claro"] .form select, [data-tema="claro"] .form textarea { background: #fff; color: #14141B; border-color: rgba(20,20,27,.18) } [data-tema="claro"] .form select option { background: #fff; color: #14141B } [data-tema="claro"] .form .fino, [data-tema="claro"] .form .fino a { color: rgba(20,20,27,.65) } [data-tema="claro"] .form .err { color: #B42318 }
[data-tema="claro"] .pie { color: rgba(20,20,27,.7) !important; border-color: rgba(20,20,27,.1) } [data-tema="claro"] .pie h4 { color: #14141B }
[data-tema="claro"] .legal mark { color: #14141B; background: rgba(255,196,0,.35) }
[data-tema="claro"] .ap, [data-tema="claro"] .plat2 .vid { background: rgba(12,12,18,.92) !important; color: #F5F5F7; border-color: rgba(20,20,27,.2) !important }
[data-tema="claro"] .plat2 .vid :is(span, small, li, b) { color: inherit }
[data-tema="claro"] .tj .fr { background: rgba(255,255,255,.7); border-color: rgba(20,20,27,.12) } [data-tema="claro"] .tj .fr small { color: color-mix(in srgb, var(--c) 60%, #000) }
[data-tema="claro"] .eti { color: #fff } [data-tema="claro"] .obj3d .f { box-shadow: none }
[data-tema="claro"] .faq summary::after { color: color-mix(in srgb, var(--c) 60%, #000) }
[data-tema="claro"] .spec dd span { border-color: rgba(20,20,27,.15) }
[data-tema="claro"] figcaption .mono { color: #5F5F6B }
[data-tema="claro"] .ventajas a { text-decoration-color: rgba(20,20,27,.35) }
@media (max-width: 760px) { [data-tema="claro"] .nav nav { background: rgba(255,255,255,.96) } [data-tema="claro"] .nav nav a { color: #14141B } }
.nota-legal { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--linea); margin: 0 0 24px; font-weight: 600 }
/* contraste en modo claro */
[data-tema="claro"] .h2 .c, [data-tema="claro"] .decl span.on { color: color-mix(in srgb, var(--c) 52%, #000) !important }
[data-tema="claro"] :is(.ej-act .mono, .sol small, .cit small, .prob small) { color: color-mix(in srgb, var(--c) 48%, #000) !important }
[data-tema="claro"] .pasos4 b, [data-tema="claro"] .pil b { color: color-mix(in srgb, var(--c) 58%, #000) }
[data-tema="claro"] .pas .vid[style*="opacity"] { opacity: .85 !important } [data-tema="claro"] .consola2 em { color: #6E5300 }
[data-tema="claro"] .marca .mono { color: #3A3A44 !important }
.ap-calor i { background: color-mix(in srgb, var(--c) 52%, #101016) !important } .ap-calor em { color: #fff !important }
.pronto { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 99px; font: 600 11px var(--m); letter-spacing: .08em; text-transform: uppercase; background: var(--lima); color: #0A0A0D; vertical-align: middle }
figcaption .mono { color: rgba(255,255,255,.72) }
[data-tema="claro"] .num { color: color-mix(in srgb, var(--c, #14141B) 42%, #000) !important } [data-tema="claro"] .delta { color: color-mix(in srgb, var(--c) 42%, #000) !important }

/* =================== Plataforma por dentro (maqueta interactiva) =================== */
.ap { --ap-b: rgba(255,255,255,.1); --ap-s: rgba(255,255,255,.045); position: relative; margin-top: 64px; display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 720px; border-radius: 28px; overflow: hidden; background: rgba(8,9,12,.72); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); box-shadow: 0 60px 140px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1); font-size: 14px }
.ap-side { padding: 20px 14px; border-right: 1px solid var(--ap-b); display: flex; flex-direction: column; gap: 18px; background: rgba(255,255,255,.02) }
.ap-org { display: flex; gap: 10px; align-items: center; padding: 6px 8px 14px; border-bottom: 1px solid var(--ap-b) } .ap-org b { display: block; font-size: 14px } .ap-org small { color: rgba(255,255,255,.55); font-size: 12px }
.ap-menu { display: grid; gap: 4px }
.ap-nav { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 12px; border: 0; background: none; color: rgba(255,255,255,.72); font: 600 14px var(--f); cursor: pointer; text-align: left; transition: background-color .25s, color .25s, transform .3s cubic-bezier(.16,1,.3,1) }
.ap-nav:hover { background: var(--ap-s); color: #fff; transform: translateX(3px) } .ap-nav.on { background: rgba(200,255,61,.12); color: #C8FF3D; box-shadow: inset 2px 0 0 #C8FF3D }
.ap-celb { margin-top: auto; border: 1px dashed rgba(255,255,255,.2) }
.ap-ic { width: 19px; height: 19px; flex: none }
.ap-main { display: flex; flex-direction: column; min-width: 0 }
.ap-top { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--ap-b) }
.ap-busca { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 40px; border-radius: 12px; background: var(--ap-s); border: 1px solid var(--ap-b); color: rgba(255,255,255,.6); max-width: 440px }
.ap-busca input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font: 500 14px var(--f); outline: none }
.ap-icb { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--ap-b); background: var(--ap-s); color: #fff; display: grid; place-items: center; cursor: pointer; margin-left: auto } .ap-icb i { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #FF4D2E }
.ap-av { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font: 700 12px var(--f); color: #0A0A0D; background: var(--c) }
.ap-views { position: relative; flex: 1; padding: 26px; overflow: hidden }
.ap-v { display: none } .ap-v.on { display: block; animation: ap-entra .55s cubic-bezier(.16,1,.3,1) both }
@keyframes ap-entra { from { opacity: 0; transform: perspective(1200px) translateY(16px) rotateX(6deg) } }
.ap-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px }
.ap-cab h3 { margin: 4px 0 0; font-size: 28px; letter-spacing: -.04em }
.ap-m { font: 500 11px var(--m); letter-spacing: .12em; color: rgba(255,255,255,.55) }
.ap-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; border: 0; background: #C8FF3D; color: #0A0A0D; font: 700 14px var(--f); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .25s cubic-bezier(.16,1,.3,1), filter .2s }
.ap-btn:hover { transform: translateY(-1px); filter: brightness(1.05) } .ap-btn .ap-ic { width: 16px; height: 16px }
.ap-sec { background: var(--ap-s); color: #fff; border: 1px solid rgba(255,255,255,.18) }
.ap-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
.ap-kpi { padding: 16px 16px 12px; border-radius: 16px; background: var(--ap-s); border: 1px solid var(--ap-b); display: grid; gap: 4px }
.ap-kpi span { color: rgba(255,255,255,.62); font-size: 12px; font-weight: 600 } .ap-kpi b { font: 500 30px/1.1 var(--m); letter-spacing: -.04em } .ap-kpi small { color: rgba(255,255,255,.55); font-size: 12px }
.ap-spark { width: 100%; height: 30px }
.ap-g2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; margin-top: 14px }
.ap-card { padding: 18px; border-radius: 16px; background: var(--ap-s); border: 1px solid var(--ap-b); min-width: 0 }
.ap-ct { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px } .ap-ct small { color: rgba(255,255,255,.55) }
.ap-bar { display: grid; grid-template-columns: 80px 1fr 44px; gap: 12px; align-items: center; margin: 12px 0; font-size: 13px } .ap-bar b { font: 500 13px var(--m); text-align: right }
.ap-bar s, .ap-pr s { display: block; height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; text-decoration: none }
.ap-bar s i, .ap-pr s i { display: block; height: 100%; width: var(--v); background: var(--c, #C8FF3D); border-radius: 99px; transform-origin: left; animation: ap-barra 1.2s cubic-bezier(.16,1,.3,1) both }
@keyframes ap-barra { from { transform: scaleX(0) } }
.ap-live { color: #19D3A2; font: 500 11px var(--m); letter-spacing: .1em; animation: ap-late 1.6s steps(2) infinite } @keyframes ap-late { 50% { opacity: .35 } }
.ap-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px } .ap-feed li { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: baseline; font-size: 13px; color: rgba(255,255,255,.75) } .ap-feed i { width: 8px; height: 8px; border-radius: 50%; background: var(--c) } .ap-feed b { color: #fff } .ap-feed time { font: 500 11px var(--m); color: rgba(255,255,255,.66) }
.ap-sug { margin-top: 14px; display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 16px; background: rgba(200,255,61,.07); border: 1px solid rgba(200,255,61,.28) }
.ap-sug p { margin: 3px 0 0; color: rgba(255,255,255,.72) } .ap-sug .ap-btn { margin-left: auto }
.ap-ia { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; font: 700 13px var(--m); background: var(--c, #C8FF3D); color: #0A0A0D }
/* asistente */
.ap-pasos { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.ap-pasos li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ap-s); border: 1px solid var(--ap-b); color: rgba(255,255,255,.55); font-weight: 600; transition: all .35s }
.ap-pasos span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--m); background: rgba(255,255,255,.1) }
.ap-pasos li.on { color: #fff; border-color: #C8FF3D } .ap-pasos li.on span, .ap-pasos li.hecho span { background: #C8FF3D; color: #0A0A0D } .ap-pasos li.hecho { color: rgba(255,255,255,.8) }
.ap-paso { display: none } .ap-paso.on { display: block; animation: ap-entra .5s cubic-bezier(.16,1,.3,1) both }
.ap-drop { display: grid; place-items: center; text-align: center; gap: 6px; padding: 30px; border-radius: 18px; border: 1.5px dashed rgba(255,255,255,.25); background: rgba(255,255,255,.02); cursor: pointer; transition: border-color .25s, background-color .25s } .ap-drop:hover { border-color: #C8FF3D; background: rgba(200,255,61,.05) }
.ap-drop-i { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(200,255,61,.15); color: #C8FF3D } .ap-drop small { color: rgba(255,255,255,.55) }
.ap-file { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--ap-s); border: 1px solid var(--ap-b) } .ap-file small { display: block; color: rgba(255,255,255,.55) }
.ap-pdf { padding: 8px; border-radius: 8px; background: #FF4D2E; color: #0A0A0D; font: 700 11px var(--m) } .ap-ok { margin-left: auto; color: #19D3A2; font-weight: 800 }
.ap-f3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px }
.ap label { display: grid; gap: 6px; font-weight: 600; font-size: 13px; color: rgba(255,255,255,.75) }
.ap select, .ap .ap-form input[type=color] { height: 40px; border-radius: 10px; border: 1px solid var(--ap-b); background: rgba(0,0,0,.35); color: #fff; font: 500 14px var(--f); padding: 0 10px } .ap select option { background: #111 }
.ap .ap-form input[type=color] { padding: 4px; width: 100%; cursor: pointer }
.ap-scan { margin-top: 16px } .ap-scan-b { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: 8px } .ap-scan-b i { display: block; height: 100%; width: 0; background: #C8FF3D; border-radius: 99px; transition: width 1.6s cubic-bezier(.4,0,.2,1) } .ap-scan small { color: rgba(255,255,255,.6) }
.ap-acc { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap }
.ap-p { margin: 0 0 14px; color: rgba(255,255,255,.72) }
.ap-clases { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.ap-clases li { display: grid; grid-template-columns: 18px 32px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--ap-s); border: 1px solid var(--ap-b); animation: ap-entra .5s both; animation-delay: calc(var(--i, 0) * 60ms) }
.ap-clases li:nth-child(1) { --i: 0 } .ap-clases li:nth-child(2) { --i: 1 } .ap-clases li:nth-child(3) { --i: 2 } .ap-clases li:nth-child(4) { --i: 3 } .ap-clases li:nth-child(5) { --i: 4 }
.ap-h { color: rgba(255,255,255,.35); cursor: grab; letter-spacing: -2px } .ap-clases b { font: 500 14px var(--m); color: #C8FF3D } .ap-clases small { display: block; color: rgba(255,255,255,.55); font-size: 12px }
.ap-x { background: none; border: 1px solid var(--ap-b); color: rgba(255,255,255,.8); border-radius: 8px; padding: 6px 10px; font: 600 12px var(--f); cursor: pointer }
.ap-fmts { display: flex; flex-wrap: wrap; gap: 8px }
.ap-fmt { display: inline-flex !important; grid-template-columns: none; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; border: 1px solid var(--ap-b); background: var(--ap-s); cursor: pointer; color: #fff !important; transition: background-color .25s }
.ap-fmt input { accent-color: var(--c); margin: 0 } .ap-fmt:has(input:checked) { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c) }
.ap-sub { display: block; margin: 20px 0 10px; font-size: 13px }
.ap-ests { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px }
.ap-est { aspect-ratio: 4/5; border-radius: 12px; border: 2px solid transparent; background: var(--b); cursor: pointer; position: relative; overflow: hidden; padding: 0; transition: transform .3s cubic-bezier(.16,1,.3,1) } .ap-est:hover { transform: translateY(-3px) }
.ap-est i { position: absolute; inset: 25% 25% 40%; border-radius: 30%; background: var(--f) } .ap-est span { position: absolute; left: 6px; right: 6px; bottom: 6px; font: 600 10px var(--m); color: #fff; mix-blend-mode: difference }
.ap-est.on { border-color: #C8FF3D; box-shadow: 0 0 0 3px rgba(200,255,61,.25) }
.ap-rev { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px }
.ap-prev { aspect-ratio: 16/10; border-radius: 16px; background: #8B73FF; color: #0A0A0D; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; position: relative } .ap-prev .ap-m { color: rgba(0,0,0,.6) } .ap-prev b { font-size: 24px; letter-spacing: -.03em }
.ap-play { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: #0A0A0D; color: #fff; display: grid; place-items: center; font-size: 14px }
.ap-guion { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--ap-s); border: 1px solid var(--ap-b); color: rgba(255,255,255,.85); line-height: 1.5 }
.ap-cita { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 99px; background: rgba(25,211,162,.16); color: #19D3A2; font: 600 10px var(--m); letter-spacing: .08em }
.ap-revisor { display: flex; gap: 10px; align-items: center; margin-top: 14px } .ap-revisor small { display: block; color: rgba(255,255,255,.55) }
/* cursos y personas */
.ap-chips { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap }
.ap-chip { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--ap-b); background: var(--ap-s); color: rgba(255,255,255,.75); font: 600 13px var(--f); cursor: pointer } .ap-chip.on { background: #fff; color: #0A0A0D }
.ap-cursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.ap-curso { border-radius: 16px; overflow: hidden; background: var(--ap-s); border: 1px solid var(--ap-b); transition: transform .35s cubic-bezier(.16,1,.3,1) } .ap-curso:hover { transform: translateY(-4px) }
.ap-curso[hidden] { display: none } .ap-cv { height: 88px; background: var(--c); padding: 12px; display: flex; align-items: flex-start; justify-content: flex-end } .ap-cv span { font: 600 11px var(--m); padding: 4px 8px; border-radius: 99px; background: rgba(0,0,0,.75); color: #fff }
.ap-cb { padding: 14px; display: grid; gap: 6px } .ap-cb small { color: rgba(255,255,255,.55) }
.ap-st { justify-self: start; padding: 3px 10px; border-radius: 99px; font: 600 11px var(--f) } .ap-pub, .ap-ok-st, .ap-ok { } .ap-st.ap-pub, .ap-st.ap-ok { background: rgba(25,211,162,.16); color: #4BE3BA } .ap-st.ap-rev, .ap-st.ap-al { background: rgba(255,196,0,.16); color: #FFD54D } .ap-st.ap-bor { background: rgba(255,255,255,.1); color: rgba(255,255,255,.75) } .ap-st.ap-ri { background: rgba(255,77,46,.16); color: #FF8A73 }
.ap-pr { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center } .ap-pr small { color: rgba(255,255,255,.6); font-size: 12px }
.ap-tools { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap } .ap-tools .ap-busca { max-width: 320px }
.ap-bulk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: rgba(200,255,61,.08); border: 1px solid rgba(200,255,61,.3) } .ap-bulk[hidden] { display: none }
.ap-tabla { overflow-x: auto; border-radius: 16px; border: 1px solid var(--ap-b) }
.ap table { width: 100%; border-collapse: collapse; font-size: 13px }
.ap th { text-align: left; font: 500 11px var(--m); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); padding: 12px 14px; border-bottom: 1px solid var(--ap-b) }
.ap td { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; white-space: nowrap } .ap tbody tr { transition: background-color .2s } .ap tbody tr:hover { background: rgba(255,255,255,.03) }
.ap td:nth-child(2) { display: flex; gap: 10px; align-items: center } .ap td small { display: block; color: rgba(255,255,255,.55) } .ap td .ap-pr { min-width: 140px } .ap td input { accent-color: #C8FF3D; width: 16px; height: 16px }
.ap tr[hidden] { display: none }
/* reportes */
.ap-seg { display: flex; padding: 4px; border-radius: 12px; background: var(--ap-s); border: 1px solid var(--ap-b) } .ap-seg button { border: 0; background: none; color: rgba(255,255,255,.7); padding: 8px 12px; border-radius: 9px; font: 600 13px var(--f); cursor: pointer } .ap-seg button.on { background: #fff; color: #0A0A0D }
.ap-chart { width: 100%; height: 200px; display: block }
.ap-dona-c { display: flex; flex-direction: column } .ap-dona { flex: 1; display: grid; place-items: center }
.ap-dona::before { content: ''; grid-area: 1/1; width: 160px; height: 160px; border-radius: 50%; background: conic-gradient(#2EC5FF 0 74%, rgba(255,255,255,.1) 0); -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%); mask: radial-gradient(circle, transparent 58%, #000 59%) }
.ap-dona span { grid-area: 1/1; font: 500 30px var(--m) }
.ap-mini td, .ap-mini th { padding: 10px 6px } .ap-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--c); margin-right: 8px }
.ap .ap-card + .ap-card, .ap-g2 + .ap-card { margin-top: 14px }
/* marca y ajustes */
.ap-form { display: grid; gap: 12px } .ap-logo { display: flex; gap: 14px; align-items: center } .ap-logo-v { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; text-align: center; font: 700 11px/1.1 var(--m); border: 1.5px dashed rgba(255,255,255,.3); color: rgba(255,255,255,.6) }
.ap-mprev { --c1: #8B73FF; --c2: #FFC400; aspect-ratio: 16/9; border-radius: 16px; background: var(--c1); color: #0A0A0D; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; position: relative; overflow: hidden; transition: background-color .4s }
.ap-mprev .ap-m { color: rgba(0,0,0,.6) } .ap-mprev b { font-size: 24px; letter-spacing: -.03em; max-width: 14em; position: relative } .ap-mprev i { position: absolute; right: -20px; top: -20px; width: 140px; height: 140px; border-radius: 40px; background: var(--c2); transform: rotate(18deg); transition: background-color .4s }
.ap-integ { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px } .ap-integ li { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.03) } .ap-integ small { display: block; color: rgba(255,255,255,.55) } .ap-integ .ap-st { margin-left: auto }
/* colaborador */
.ap-celw { display: grid; grid-template-columns: 320px 1fr; gap: 30px; align-items: center }
.ap-tel { border-radius: 40px; padding: 10px; background: #050507; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 40px 90px rgba(0,0,0,.5); transform: perspective(1200px) rotateY(10deg) rotateX(4deg); transition: transform .6s cubic-bezier(.16,1,.3,1) } .ap-tel:hover { transform: none }
.ap-tel-in { border-radius: 32px; padding: 24px 18px; min-height: 560px; background: #101016; display: grid; gap: 12px; align-content: start }
.ap-th { font-size: 20px; letter-spacing: -.03em }
.ap-cont { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.06) } .ap-cont small { display: block; color: rgba(255,255,255,.55) }
.ap-ring { --p: 60; width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#C8FF3D calc(var(--p) * 1%), rgba(255,255,255,.1) 0); position: relative } .ap-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #16161d } .ap-ring span { position: relative; font: 600 12px var(--m) }
.ap-q { padding: 14px; border-radius: 16px; background: rgba(139,115,255,.14); border: 1px solid rgba(139,115,255,.4); display: grid; gap: 8px }
.ap-q button { text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: #fff; font: 600 13px var(--f); cursor: pointer; transition: all .25s }
.ap-q button.bien { background: #19D3A2; color: #0A0A0D; border-color: transparent } .ap-q button.mal { background: rgba(255,77,46,.25); border-color: #FF4D2E }
.ap-qr { margin: 0; font-size: 13px; color: rgba(255,255,255,.8) }
.ap-mis { display: grid; gap: 8px } .ap-mis div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.05); border-left: 3px solid var(--c); display: grid; gap: 8px } .ap-mis s { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; text-decoration: none } .ap-mis s i { display: block; height: 100%; width: var(--v); background: var(--c) }
.ap-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px } .ap-why li { padding: 16px 18px; border-radius: 16px; background: var(--ap-s); border: 1px solid var(--ap-b); color: rgba(255,255,255,.72) } .ap-why b { color: #fff; display: block; margin-bottom: 2px }
.ap-toast { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 30px); opacity: 0; padding: 12px 18px; border-radius: 14px; background: #fff; color: #0A0A0D; font-weight: 700; box-shadow: 0 20px 50px rgba(0,0,0,.4); transition: all .45s cubic-bezier(.16,1,.3,1); pointer-events: none; max-width: calc(100% - 40px); text-align: center; z-index: 5 }
.ap-toast.on { opacity: 1; transform: translate(-50%, 0) }
/* a tu medida */
.medida { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.medida li { border-radius: 20px; padding: 22px 24px; border-left: 3px solid var(--c) !important; display: grid; gap: 4px } .medida b { font-size: 19px; letter-spacing: -.02em } .medida span { color: rgba(245,245,247,.68) }
@media (max-width: 1000px) {
  .ap { grid-template-columns: 1fr; min-height: 0 } .ap-side { flex-direction: row; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--ap-b); gap: 6px } .ap-org { display: none } .ap-menu { display: flex; gap: 6px } .ap-nav { width: auto; white-space: nowrap; padding: 9px 12px } .ap-nav:hover { transform: none } .ap-celb { margin-top: 0 }
  .ap-kpis { grid-template-columns: 1fr 1fr } .ap-g2, .ap-rev, .ap-celw { grid-template-columns: 1fr } .ap-cursos { grid-template-columns: 1fr 1fr } .ap-f3 { grid-template-columns: 1fr } .ap-ests { grid-template-columns: repeat(3, 1fr) } .ap-pasos { grid-template-columns: 1fr 1fr } .ap-tel { max-width: 320px; margin: 0 auto; transform: none }
}
@media (max-width: 560px) { .ap-views { padding: 18px } .ap-cursos { grid-template-columns: 1fr } .ap-sug { flex-wrap: wrap } .ap-sug .ap-btn { margin-left: 0 } .ap-top .ap-busca { display: none } .ap-cab { flex-wrap: wrap } }
@media (prefers-reduced-motion: reduce) { .ap-v.on, .ap-paso.on, .ap-clases li { animation: none } .ap-bar s i, .ap-pr s i { animation: none } }
/* v2 · copiloto, mapa de conocimiento, brechas, páginas del manual */
.ap-top { flex-wrap: wrap }
.ap-copi { flex: 1; min-width: 260px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 6px; border-radius: 14px; background: rgba(182,156,255,.1); border: 1px solid rgba(182,156,255,.45); box-shadow: 0 0 0 4px rgba(182,156,255,.06), 0 0 30px rgba(182,156,255,.12) }
.ap-copi .ap-ia { width: 32px; height: 32px; --c: #B69CFF; font-size: 15px }
.ap-copi input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font: 500 14px var(--f); outline: none } .ap-copi input::placeholder { color: rgba(255,255,255,.55) }
.ap-copi kbd { font: 500 12px var(--m); padding: 4px 8px; border-radius: 7px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7) }
.ap-sugs { display: flex; gap: 6px } .ap-sugs button { padding: 7px 10px; border-radius: 99px; border: 1px solid var(--ap-b); background: var(--ap-s); color: rgba(255,255,255,.75); font: 600 12px var(--f); cursor: pointer; white-space: nowrap } .ap-sugs button:hover { border-color: #B69CFF; color: #fff }
@media (max-width: 1200px) { .ap-sugs { display: none } }
.ap-resp { margin: -6px 0 16px; padding: 16px 18px; border-radius: 16px; background: rgba(182,156,255,.1); border: 1px solid rgba(182,156,255,.4); animation: ap-entra .5s cubic-bezier(.16,1,.3,1) both }
.ap-resp small { font: 500 11px var(--m); letter-spacing: .1em; color: #CDBBFF } .ap-resp p { margin: 6px 0 10px; line-height: 1.5 } .ap-resp .cur { display: inline-block; width: 8px; height: 15px; background: #CDBBFF; vertical-align: middle; animation: ap-late 1s steps(2) infinite }
.ap-resp ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px } .ap-resp li { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 99px; background: rgba(255,255,255,.06); font-size: 13px } .ap-resp li .ap-av { width: 26px; height: 26px; font-size: 10px; border-radius: 50% }
.ap-col { display: grid; gap: 14px; align-content: start }
.ap-mapa-c { display: flex; flex-direction: column }
.ap-mapa { width: 100%; height: auto; flex: 1; min-height: 260px }
.ap-lk { stroke: rgba(255,255,255,.22); stroke-width: 1.5; stroke-dasharray: 4 6; animation: ap-flujo 2.4s linear infinite; animation-delay: var(--d) } @keyframes ap-flujo { to { stroke-dashoffset: -40 } }
.ap-core { fill: rgba(182,156,255,.18); stroke: #B69CFF; stroke-width: 2; animation: ap-pulso 2.6s ease-in-out infinite; transform-origin: 260px 160px } @keyframes ap-pulso { 50% { transform: scale(1.08) } }
.ap-ct1 { fill: #fff; font: 700 12px var(--f) }
.ap-nd { cursor: pointer; animation: ap-aparece .7s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d); transform-box: fill-box; transform-origin: center } @keyframes ap-aparece { from { opacity: 0; transform: scale(.4) } }
.ap-nd text { fill: rgba(255,255,255,.82); font: 600 11px var(--f) } .ap-nd:hover circle:first-child, .ap-nd:focus circle:first-child { fill-opacity: .4 } .ap-nd:focus { outline: none }
.ap-ley { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,.7) } .ap-ley span { display: flex; align-items: center; gap: 6px } .ap-ley span::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c) }
.ap-calor { display: grid; grid-template-columns: 70px repeat(6, 1fr); gap: 5px; align-items: center; font-size: 11px }
.ap-calor > span { font: 500 10px var(--m); color: rgba(255,255,255,.6); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ap-calor b { font-size: 12px; font-weight: 600 }
.ap-calor i { height: 30px; border-radius: 7px; background: color-mix(in srgb, var(--c) calc(var(--o) * 100%), transparent); display: grid; place-items: center; transition: transform .25s } .ap-calor i:hover { transform: scale(1.12) }
.ap-calor em { font: 600 10px var(--m); font-style: normal; color: #0A0A0D }
.ap-micro { border-color: rgba(25,211,162,.5) !important; background: rgba(25,211,162,.08) !important }
.ap-tem { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: start }
.ap-pags { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 12px; border-radius: 14px; background: var(--ap-s); border: 1px solid var(--ap-b) }
.ap-pags i { aspect-ratio: 3/4; border-radius: 3px; background: var(--c); animation: ap-aparece .4s both; animation-delay: calc(var(--n, 0) * 10ms) }
.ap-clases li { border-left: 3px solid var(--cc) }
@media (max-width: 1000px) { .ap-tem { grid-template-columns: 1fr } .ap-pags { grid-template-columns: repeat(12, 1fr) } }

/* ===== v5 · celular: navegación, scroll natural, menos peso ===== */
html, body { overflow-x: clip }
.res3 { margin-top: 56px } .res-mas { margin: 36px 0 0; font-weight: 600 } .res-mas a { color: var(--cian); text-decoration: none; border-bottom: 1px solid currentColor; padding: 10px 0 }
.sigpag { padding: 0 0 90px } .sigpag .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.sigpag a { display: block; padding: 24px 26px; border-radius: 22px; text-decoration: none; color: inherit; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); transition: background-color .25s, transform .25s var(--suave) }
.sigpag a:hover { background: rgba(255,255,255,.09); transform: translateY(-2px) } .sigpag small { display: block; font: 500 12px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; opacity: .65; margin-bottom: 10px } .sigpag b { font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.03em }
.sigpag .sg-s { text-align: right; border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent) }
[data-tema="claro"] .sigpag a { border-color: rgba(20,20,27,.12); background: rgba(20,20,27,.03) } [data-tema="claro"] .sigpag .sg-s { background: color-mix(in srgb, var(--c) 18%, #fff) }
[data-tema="claro"] .res-mas a { color: #0B6E8C }
.nav-cta { display: none !important }
@media (max-width: 760px) {
  /* barra superior compacta: logo, idioma, tema y menú siempre visibles */
  .nav { width: calc(100% - 16px); height: 54px; top: 8px } .nav .wrap { gap: 6px !important; padding: 0 6px 0 14px !important }
  .nav .logo { margin-right: auto; font-size: 17px } .nav .btn.chico { display: none } .menu-b { margin-left: 2px; width: 42px; height: 42px }
  .tema-b, .idioma-b { height: 42px; min-width: 42px; margin: 0 !important }
  .nav nav { top: 70px; max-height: calc(100dvh - 90px); overflow-y: auto } .nav nav a { padding: 14px 12px; font-size: 17px }
  .nav nav .nav-cta { display: block !important; margin-top: 8px; text-align: center; background: var(--lima) !important; color: #0B0B10 !important; font-weight: 700 }
  /* menos aire muerto y textos que respiran */
  .sec { padding: 84px 0 !important } .wrap { width: calc(100% - 40px) !important }
  .h2 { font-size: clamp(34px, 9.5vw, 48px) !important; line-height: 1.02 !important } .lead { font-size: 17px !important; line-height: 1.55 !important }
  .prob-g, .sol-g, .seg-g, .pil, .teasers, .comp { margin-top: 40px !important; gap: 14px !important }
  .prob, .sol, .pil > div, .seg-g > div, .teaser { padding: 24px !important; border-radius: 22px !important }
  .pil b { font-size: 44px } .pil h3 { margin-top: 14px }
  .sigpag .wrap { grid-template-columns: 1fr } .sigpag .sg-s { order: -1; text-align: left }
  /* cabecera de páginas: el 3D queda detrás del título, no encima */
  .cab { padding-top: 120px !important } .cab-3d { top: 64px !important; height: 300px !important; opacity: .45 !important }
  .cab h1 { position: relative; z-index: 1; font-size: clamp(42px, 12vw, 60px) !important }
  /* objetos 3D por sección: más chicos y quietos (ahorran batería) */
  .obj3d { --os: 72px !important; opacity: .7 } .obj3d .g, .obj3d i { animation-duration: 18s !important }
  /* vidrio más ligero en celular */
  .gl, .vid, .teaser, .prob, .sol { -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
  /* portada: el armado del documento dura menos scroll */
  .heroe { height: 260vh !important }
  /* formatos: carrusel que se desliza con el dedo, sin quedarse "pegado" */
  .formatos { height: auto !important } .formatos-fijo { position: static !important; height: auto !important; padding: 96px 0 40px; display: block !important }
  .formatos-cab { position: static !important; margin-bottom: 22px } .pista { margin-top: 0 !important; transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 18px !important; gap: 14px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain }
  .pista::-webkit-scrollbar { display: none } .pista .fmt { flex: 0 0 84% !important; scroll-snap-align: center }
  /* apariciones más rápidas y sin desenfoque (fluido al deslizar rápido) */
  .gl { filter: none !important; transform: translateY(28px) !important; transition: opacity .5s var(--suave), transform .55s var(--suave) !important; transition-delay: calc(var(--d, 0) * 50ms) !important } .gl.vis { transform: none !important }
  /* pie: enlaces fáciles de tocar */
  .pie a { display: inline-block; padding: 8px 0; min-height: 40px }
  /* plataforma demo: pestañas cómodas */
  #apApp .ap-nav { min-height: 44px !important } .ap-mapa text { font-size: 9px }
}
@media (hover: none) { .tilt { transform: none !important } }
/* ===== v5 · aviso del carrusel y el índice de secciones ===== */
.fz-aviso { position: absolute; left: 50%; bottom: 28px; z-index: 5; transform: translate(-50%, 16px); opacity: 0; display: grid; gap: 8px; justify-items: center; padding: 12px 20px; border-radius: 99px; background: rgba(10,10,14,.78); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; font: 600 14px/1.2 var(--f); white-space: nowrap; pointer-events: none; transition: opacity .4s var(--suave), transform .5s var(--suave) }
.fz-aviso.on { opacity: 1; transform: translate(-50%, 0) } .fz-bar { width: 160px; height: 3px; border-radius: 9px; background: rgba(255,255,255,.18); overflow: hidden } .fz-bar i { display: block; height: 100%; background: var(--amarillo); transform-origin: left; transition: transform .2s linear }
.fz-aviso.mov { position: relative; left: auto; bottom: auto; transform: none; margin: 4px auto 0; width: max-content; max-width: calc(100% - 40px); white-space: normal; text-align: center; font-size: 13px }
.fz-aviso.mov:not(.on) { opacity: .0 }
[data-tema="claro"] .fz-aviso { background: rgba(255,255,255,.9); color: #14141B; border-color: rgba(20,20,27,.12) }
.indice { display: none }
@media (max-width: 760px) {
  .indice { display: block; position: fixed; z-index: 60; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translate(-50%, 90px); transition: transform .45s var(--suave); max-width: calc(100% - 28px) }
  .indice.on { transform: translate(-50%, 0) }
  .ind-b { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(255,255,255,.18); background: rgba(10,10,14,.86); color: #fff; font: 600 14px var(--f); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(0,0,0,.4); max-width: 100%; cursor: pointer }
  .ind-act { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62vw }
  .ind-b[aria-expanded="true"] svg { transform: rotate(180deg) }
  .ind-l { position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); width: min(320px, calc(100vw - 28px)); max-height: 60vh; overflow-y: auto; display: grid; gap: 2px; padding: 8px; border-radius: 20px; background: rgba(12,12,16,.96); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 60px rgba(0,0,0,.5) }
  .ind-l[hidden] { display: none } .ind-l a { padding: 13px 14px; border-radius: 12px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px } .ind-l a[aria-current] { background: rgba(255,255,255,.1); color: var(--lima) } .ind-l .ind-arr { color: rgba(255,255,255,.7); border-top: 1px solid rgba(255,255,255,.1); border-radius: 0 0 12px 12px }
  [data-tema="claro"] .ind-b, [data-tema="claro"] .ind-l { background: rgba(255,255,255,.96); color: #14141B; border-color: rgba(20,20,27,.12) } [data-tema="claro"] .ind-l a { color: #14141B } [data-tema="claro"] .ind-l a[aria-current] { color: #4A6B00; background: rgba(20,20,27,.06) } [data-tema="claro"] .ind-l .ind-arr { color: rgba(20,20,27,.7) }
  .heroe { height: 200vh !important }
  .pie { padding-bottom: 90px !important }
}
@media (prefers-reduced-motion: reduce) { .fz-aviso { display: none } }