/* Movimiento del sitio de Proxemp. Todo es mejora: sin la clase .js-mov (JavaScript apagado o "reducir movimiento") la pagina se ve completa y quieta. */
:root { --curva: cubic-bezier(.22, .7, .2, 1); }

/* ---- Aparece al bajar ---- */
.js-mov [data-a] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .75s var(--curva), transform .75s var(--curva); transition-delay: calc(var(--i, 0) * 90ms); will-change: opacity, transform; }
.js-mov [data-a="izq"] { transform: translate3d(-28px, 0, 0); }
.js-mov [data-a].visto { opacity: 1; transform: none; will-change: auto; }

/* Titulares de seccion: una raya cian que se dibuja despues de que aparece el texto. */
.seccion h2 { position: relative; padding-bottom: .9rem; }
.seccion h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: var(--cian); }
.clara h2::after, .clara-2 h2::after { background: var(--electrico); }
.js-mov .seccion h2::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s .35s var(--curva); }
.js-mov .seccion h2.visto::after { transform: none; }

/* ---- Portada ---- */
/* El titular entra palabra por palabra, como si lo destaparan. */
.js-mov .pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.js-mov .pal > span { display: inline-block; transform: translateY(112%); transition: transform .85s var(--curva); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.js-mov .portada h1.listo .pal > span { transform: none; }

/* La cuadricula del fondo avanza muy despacio: da profundidad sin distraer. */
.portada-oscura::before { animation: rejilla 90s linear infinite; }
@keyframes rejilla { to { background-position: 56px 112px, 112px 56px; } }

/* Los telefonos flotan apenas; el de atras sigue al puntero (la posicion la pone el script). */
.tel-frente { animation: sube .9s cubic-bezier(.2, .7, .2, 1) both, flota 8s 1.2s ease-in-out infinite; }
.tel-atras { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -10px); transition: translate .5s var(--curva); }
@keyframes flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* El mensaje de la portada cuenta lo que pasa: sin senal -> vuelve la senal. */
.chip-sin-senal { transition: opacity .25s, transform .25s, border-color .4s; }
.chip-sin-senal.cambia { opacity: 0; transform: translateY(6px); }
.chip-sin-senal .punto { transition: background-color .4s, box-shadow .4s; animation: late 2.4s ease-in-out infinite; }
.chip-sin-senal.conectado { border-color: rgba(31, 168, 85, .65); }
.chip-sin-senal.conectado .punto { background: #34D17A; box-shadow: 0 0 0 4px rgba(52, 209, 122, .22); }
@keyframes late { 50% { transform: scale(1.18); } }

/* ---- Barra de avance (arriba de todo) ---- */
.progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--electrico), var(--cian)); pointer-events: none; }

/* ---- Barra superior fija, solo en pantalla ancha, al salir de la portada ---- */
.barra-sup { display: none; }
@media (min-width: 960px) {
  .barra-sup { position: fixed; left: 0; right: 0; top: 0; z-index: 50; display: block; background: rgba(6, 18, 38, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea-oscura); transform: translateY(-110%); transition: transform .45s var(--curva); }
  .barra-sup.visible { transform: none; }
  .barra-sup .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .6rem; }
  .barra-sup .marca img { height: 26px; }
  .barra-sup nav { display: flex; align-items: center; gap: .25rem; }
  .barra-sup nav a { color: var(--luz); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .55rem 1rem; border-radius: 10px; }
  .barra-sup nav a:hover { background: rgba(255, 255, 255, .07); }
  .barra-sup nav a.boton { color: #fff; min-height: 42px; margin-left: .5rem; }
}
/* En la portada y en la barra, la raya del enlace se dibuja al pasar el puntero. */
.nav a:not(.boton), .barra-sup nav a:not(.boton) { position: relative; }
.nav a:not(.boton)::after, .barra-sup nav a:not(.boton)::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .35rem; height: 2px; background: var(--cian); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--curva); }
.nav a:not(.boton):hover::after, .barra-sup nav a:not(.boton):hover::after { transform: scaleX(1); }

/* ---- Botones y tarjetas ---- */
.boton { transition: background-color .15s, border-color .15s, color .15s, transform .2s var(--curva), box-shadow .2s var(--curva); }
.boton:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .22); }
.boton:active { transform: translateY(0) scale(.98); box-shadow: none; }
.boton-electrico:hover { box-shadow: 0 10px 26px rgba(0, 102, 255, .45); }
.precio-plan { transition: box-shadow .3s var(--curva), border-color .3s; }
.precio-plan:hover { box-shadow: 0 18px 40px rgba(11, 31, 59, .16); border-color: var(--electrico); }
.precio-plan.destacado:hover { border-color: var(--cian); box-shadow: 0 18px 44px rgba(0, 102, 255, .35); }
.precio-plan .valor.cambia, .precio-plan .periodo.cambia { animation: cambia-precio .45s var(--curva); }
@keyframes cambia-precio { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Las pantallas del producto se inclinan un poco hacia el puntero (la inclinacion la pone el script). */
.pantallas .tel { transition: transform .4s var(--curva), box-shadow .4s var(--curva); }
.pantallas .tel.inclina { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px); box-shadow: 0 30px 56px rgba(11, 31, 59, .3); }

/* ---- Un dia de cobro: la linea se llena a medida que se baja ---- */
.dia { position: relative; }
.dia::after { content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: calc(var(--prog, 0) * 100%); background: var(--electrico); }
.dia li::before { transition: background-color .35s, box-shadow .35s, transform .35s var(--curva); }
.dia li.activo::before { background: var(--electrico); box-shadow: 0 0 0 6px rgba(0, 102, 255, .18); transform: scale(1.12); }
.dia li time { transition: color .35s; }
.dia li:not(.activo) time { color: var(--tinta-suave); }

/* ---- Video de 10 segundos ---- */
.video-bloque { display: grid; gap: 2rem; align-items: center; margin-top: 3.5rem; padding: 2rem 1.25rem; background: var(--medianoche); color: var(--luz); border-radius: 20px; }
.video-bloque h3 { font-size: 1.5rem; font-weight: 800; color: #fff; }
.video-bloque p { margin-top: .75rem; color: var(--luz-suave); max-width: 32rem; }
.video-marco { position: relative; width: min(100%, 300px); margin-inline: auto; aspect-ratio: 9 / 16; overflow: hidden; border: 8px solid #0F2447; border-radius: 34px; background: #02060E; box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 224, 255, .18); }
.video-marco video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-pausa { margin-top: 1.25rem; min-height: 44px; padding: 0 1.1rem; font: inherit; font-weight: 600; color: var(--luz); background: transparent; border: 2px solid var(--linea-oscura); border-radius: 10px; cursor: pointer; }
.video-pausa:hover { border-color: var(--cian); }
@media (min-width: 760px) {
  .video-bloque { grid-template-columns: 1fr 300px; gap: 3rem; padding: 2.5rem 3rem; }
  .video-bloque .video-marco { order: 2; }
}

/* ---- Preguntas: la respuesta aparece suave al abrir ---- */
.preguntas details[open] p { animation: abre .4s var(--curva); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.preguntas summary::after { transition: transform .3s var(--curva); }

@media (prefers-reduced-motion: reduce) {
  .tel-frente, .tel-atras, .chip-sin-senal .punto, .portada-oscura::before { animation: none; translate: none; }
  .tel-frente { animation: none; }
  .boton, .precio-plan, .pantallas .tel, .barra-sup, .chip-sin-senal { transition: none; }
  .boton:hover { transform: none; }
  .preguntas details[open] p, .precio-plan .valor.cambia, .precio-plan .periodo.cambia { animation: none; }
}

/* ---- Cinta de capacidades (corre sola; con "menos movimiento" queda quieta y en varias lineas) ---- */
.cinta { overflow: hidden; background: #071533; border-block: 1px solid rgba(0, 224, 255, .18); padding-block: .85rem; }
.cinta-pista { display: flex; width: max-content; gap: 2.6rem; padding-inline: 1.3rem; animation: cinta 46s linear infinite; }
.cinta-pista span { flex: none; display: inline-flex; align-items: center; gap: 2.6rem; font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A9BBD8; white-space: nowrap; }
.cinta-pista span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 10px rgba(0, 224, 255, .7); }
.cinta:hover .cinta-pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---- De un cobro a la contabilidad: grafico que se dibuja al llegar ---- */
.flujo { margin-top: 3.5rem; }
.flujo .subtitulo { margin-top: 0; }
.bajada-flujo { max-width: 46rem; margin-top: .6rem; color: var(--tinta-suave); }
.flujo-pasos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2.6rem; position: relative; }
.paso { position: relative; }
.paso .etiqueta { display: inline-block; margin-bottom: .7rem; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--electrico); }
.tarjeta-f { position: relative; display: grid; gap: .4rem; align-content: center; min-height: 10.5rem; padding: 1.3rem 1.4rem; background: #fff; border: 1px solid var(--linea-clara); border-radius: 20px; box-shadow: 0 18px 40px rgba(11, 31, 59, .1); }
.tarjeta-f .monto { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.tarjeta-f > span { color: var(--tinta-suave); font-weight: 600; font-size: .95rem; }
.tarjeta-f ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tarjeta-f li { display: flex; gap: .6rem; align-items: center; font-weight: 600; color: var(--tinta); }
.tarjeta-f li::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--electrico) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M5 10.5l3.2 3.2L15 7%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 80% no-repeat; }
.barras { display: flex; align-items: flex-end; gap: .55rem; height: 4.4rem; }
.barras i { flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--cian), var(--electrico)); height: 100%; transform-origin: bottom; }
.barras i:nth-child(1) { height: 38%; } .barras i:nth-child(2) { height: 58%; } .barras i:nth-child(3) { height: 46%; } .barras i:nth-child(4) { height: 88%; }
/* conectores: una linea entre pasos con una moneda que viaja (vertical en celular, horizontal en pantalla ancha) */
.paso:not(:last-child)::after { content: ""; position: absolute; left: 1.6rem; top: calc(100% - .2rem); width: 3px; height: 2.4rem; border-radius: 3px; background: repeating-linear-gradient(180deg, var(--electrico) 0 6px, transparent 6px 12px); opacity: .55; }
.js-mov .flujo .paso { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.js-mov .flujo.corre .paso { opacity: 1; transform: none; }
.js-mov .flujo.corre .paso:nth-child(2) { transition-delay: .55s; } .js-mov .flujo.corre .paso:nth-child(3) { transition-delay: 1.1s; }
.js-mov .flujo .tarjeta-f li { opacity: 0; transform: translateX(-12px); transition: opacity .5s, transform .5s; }
.js-mov .flujo.corre .tarjeta-f li { opacity: 1; transform: none; }
.js-mov .flujo.corre .tarjeta-f li:nth-child(1) { transition-delay: 1.0s; } .js-mov .flujo.corre .tarjeta-f li:nth-child(2) { transition-delay: 1.25s; } .js-mov .flujo.corre .tarjeta-f li:nth-child(3) { transition-delay: 1.5s; }
.js-mov .flujo .barras i { transform: scaleY(0); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.js-mov .flujo.corre .barras i { transform: scaleY(1); }
.js-mov .flujo.corre .barras i:nth-child(1) { transition-delay: 1.6s; } .js-mov .flujo.corre .barras i:nth-child(2) { transition-delay: 1.75s; } .js-mov .flujo.corre .barras i:nth-child(3) { transition-delay: 1.9s; } .js-mov .flujo.corre .barras i:nth-child(4) { transition-delay: 2.05s; }
.js-mov .flujo.corre .paso-balance .tarjeta-f { animation: late 2.4s 2.3s ease-in-out infinite; }
@keyframes late { 50% { box-shadow: 0 18px 40px rgba(11, 31, 59, .1), 0 0 0 7px rgba(0, 102, 255, .12); } }
@media (min-width: 880px) {
  .flujo-pasos { grid-template-columns: repeat(3, 1fr); gap: 3.2rem; }
  .paso:not(:last-child)::after { left: calc(100% + .35rem); top: 4.4rem; width: 2.5rem; height: 3px; background: repeating-linear-gradient(90deg, var(--electrico) 0 6px, transparent 6px 12px); }
  .js-mov .flujo.corre .paso:not(:last-child)::before { content: ""; position: absolute; z-index: 2; left: calc(100% + .1rem); top: calc(4.4rem - 5px); width: 13px; height: 13px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 14px rgba(0, 224, 255, .9); animation: viaja 1.8s 1.3s ease-in-out infinite; }
}
@keyframes viaja { 0% { transform: translateX(-8px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(2.8rem); opacity: 0; } }

/* ---- Botones con atraccion suave hacia el puntero (solo con mouse) ---- */
.boton.iman { transform: translate(var(--mx, 0px), var(--my, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .cinta-pista { animation: none; flex-wrap: wrap; width: auto; row-gap: .6rem; }
  .js-mov .flujo .paso, .js-mov .flujo .tarjeta-f li, .js-mov .flujo .barras i { opacity: 1; transform: none; transition: none; }
}

/* ---- Tambien en su computadora: marco de laptop con pantallas reales ---- */
.escritorio { margin-top: 3.5rem; }
.escritorio .subtitulo { margin-top: 0; }
.laptop { position: relative; max-width: 62rem; margin: 2.4rem auto 0; padding-inline: 4%; }
.laptop::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -1.2rem; height: 2.4rem; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 102, 255, .38), rgba(0, 102, 255, 0) 70%); filter: blur(10px); pointer-events: none; }
.laptop-tapa { position: relative; padding: 2.2% 2.2% 3.6%; background: linear-gradient(180deg, #14223d, #0A1226); border: 2px solid #2A3A58; border-radius: 22px 22px 8px 8px; box-shadow: 0 30px 60px rgba(11, 31, 59, .35), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.laptop-camara { position: absolute; left: 50%; top: 1.1%; width: .55rem; height: .55rem; margin-left: -.275rem; border-radius: 50%; background: #1c2c4a; box-shadow: inset 0 0 0 2px #0e1830; }
.laptop-pantalla { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: #fff; }
/* cada pantalla son dos capas: la barra lateral queda fija y el contenido se desplaza (como en la app de verdad) */
.laptop-pantalla .vista { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.laptop-pantalla .vista[data-corte] { transition-duration: .15s; }
.laptop-pantalla .vista.activa { opacity: 1; }
.vista img { display: block; width: 100%; height: auto; }
.v-base { position: absolute; left: 0; top: 0; }
.v-mov { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 19.44%); }
.v-mov img { transform: translateY(0); transition: transform var(--dur, 2.4s) cubic-bezier(.45, 0, .25, 1); will-change: transform; }
.vista.baja .v-mov img { transform: translateY(-25%); }
/* cursor y clic: solo aparecen cuando el JS dirige la demostracion */
.cursor, .clic { position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); pointer-events: none; opacity: 0; }
.cursor { z-index: 3; width: clamp(16px, 2.7%, 30px); aspect-ratio: 1; transform: translate(-17%, -10%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); transition: left var(--mueve, 1.1s) cubic-bezier(.4, 0, .2, 1), top var(--mueve, 1.1s) cubic-bezier(.4, 0, .2, 1), opacity .4s ease; }
.cursor svg { display: block; width: 100%; height: 100%; }
.laptop-pantalla.guion .cursor { opacity: 1; }
.clic { z-index: 2; width: clamp(26px, 4.2%, 46px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--electrico); background: rgba(0, 102, 255, .22); transform: translate(-50%, -50%) scale(.3); }
.clic.suena { animation: clic .65s ease-out; }
@keyframes clic { 0% { opacity: .95; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
.laptop-pantalla::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 38%); pointer-events: none; }
.laptop-base { position: relative; height: 1.15rem; width: 112%; margin-left: -6%; background: linear-gradient(180deg, #D5DDEB, #9AA8C0 70%, #7F8DA6); border-radius: 0 0 22px 22px / 0 0 14px 14px; box-shadow: 0 10px 24px rgba(11, 31, 59, .25); }
.laptop-muesca { position: absolute; left: 50%; top: 0; width: 16%; height: .5rem; margin-left: -8%; background: linear-gradient(180deg, #8996AD, #B6C1D4); border-radius: 0 0 10px 10px; }
/* pestanas: solo se muestran si el JS las puede mover */
.laptop-pestanas { display: none; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 2.2rem; }
.js-pestanas .laptop-pestanas { display: flex; }
.pestana { font: inherit; font-weight: 700; font-size: .95rem; color: var(--tinta); background: #fff; border: 1px solid var(--linea-clara); border-radius: 999px; padding: .55rem 1.1rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pestana:hover { border-color: var(--electrico); }
.pestana.activa { background: var(--electrico); border-color: var(--electrico); color: #fff; }
.pestana:focus-visible { outline: 3px solid var(--marino); outline-offset: 2px; }
.js-mov .escritorio .laptop-tapa { transform-origin: 50% 100%; transform: perspective(1500px) rotateX(-58deg); opacity: 0; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), opacity .8s ease; }
.js-mov .escritorio.abre .laptop-tapa { transform: none; opacity: 1; }
.js-mov .escritorio .laptop-base { opacity: 0; transform: scaleX(.7); transition: opacity .6s .15s, transform .9s .15s cubic-bezier(.2, .8, .2, 1); }
.js-mov .escritorio.abre .laptop-base { opacity: 1; transform: none; }
@media (max-width: 640px) { .laptop { padding-inline: 0; } .laptop-tapa { border-radius: 14px 14px 6px 6px; } .laptop-base { width: 104%; margin-left: -2%; } }
@media (prefers-reduced-motion: reduce) {
  .js-mov .escritorio .laptop-tapa, .js-mov .escritorio .laptop-base { transform: none; opacity: 1; transition: none; }
  .laptop-pantalla .vista, .v-mov img, .cursor { transition: none; }
  .cursor, .clic { display: none; }
}