/* Nuvakto · versión B · capa de movimiento
   Todo el movimiento cuenta la misma idea de la marca: lo desordenado se alinea. */

/* Barra de progreso de lectura */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--teal); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }

/* Entrada del hero: escalonada, desde un estado visible */
.hero .label, .hero h1, .hero .lead, .hero .cta-row, .hero .hero-note { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.hero h1 { animation-delay: .08s; }
.hero .lead { animation-delay: .18s; }
.hero .cta-row { animation-delay: .28s; }
.hero .hero-note { animation-delay: .38s; }
.shift { animation: rise 1s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes rise { from { transform: translateY(18px); opacity: .01; } to { transform: none; opacity: 1; } }

/* Fondo del hero: las barras del símbolo, grandes, que se enderezan con el scroll */
.hero { position: relative; overflow: hidden; }
.hero-bars { position: absolute; right: -6%; top: 50%; width: 58%; max-width: 820px; transform: translateY(-50%); pointer-events: none; opacity: .5; z-index: 0; }
.hero-bars rect { transform-box: fill-box; transform-origin: center; transition: transform .1s linear; }
.hero .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .hero-bars { width: 120%; right: -40%; top: 72%; opacity: .35; } }

/* Visual en vivo: nuevo pedido desordenado → fila del sistema */
.shift { transition: box-shadow .4s ease; }
.shift-before { position: relative; }
.chip.enter { animation: chipIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.chip.leave { animation: chipOut .6s cubic-bezier(.6, 0, .4, 1) both; }
@keyframes chipIn { from { opacity: 0; transform: translateX(40px) rotate(6deg); } to { opacity: 1; } }
@keyframes chipOut { to { opacity: 0; transform: translateY(90px) scale(.92); } }
.row.new { animation: rowIn .7s cubic-bezier(.2, .8, .2, 1) both; background: linear-gradient(90deg, var(--teal-tint), transparent 70%); background-size: 200% 100%; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-10px); background-position: 0 0; } to { opacity: 1; transform: none; background-position: 100% 0; } }
.kpi strong { display: inline-block; transition: color .3s ease; }
.kpi strong.bump { animation: bump .5s ease; color: var(--teal); }
@keyframes bump { 40% { transform: translateY(-3px); } }
.live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--teal-dark-bg); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-dark-bg); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* Cinta en movimiento: de qué a qué */
.ticker { background: var(--graphite); color: var(--on-graphite); overflow: hidden; border-block: 1px solid #3A424B; }
.ticker-track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: flex; align-items: center; gap: 14px; padding: 18px 28px; font-family: var(--font-mono); font-size: 14px; white-space: nowrap; color: var(--on-graphite-muted); }
.ticker-item b { font-weight: 500; color: var(--on-graphite); }
.ticker-item i { font-style: normal; color: var(--teal-dark-bg); }
.ticker-item::after { content: ""; width: 18px; height: 4px; border-radius: 2px; background: #3A424B; margin-left: 14px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Entradas por scroll: visibles siempre, llegan a su lugar */
.reveal { opacity: 1; transform: translateY(28px); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { transform: none; }
.stagger > * { transform: translateY(24px); opacity: .01; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s ease; }
.stagger.in > * { transform: none; opacity: 1; }
.stagger.in > *:nth-child(2) { transition-delay: .08s; }
.stagger.in > *:nth-child(3) { transition-delay: .16s; }
.stagger.in > *:nth-child(4) { transition-delay: .24s; }
.no-motion .stagger > * { transform: none; opacity: 1; }

/* Tarjetas con vida */
.svc, .pain, .g, .sector { transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s ease, box-shadow .25s ease; }
.svc:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -18px rgba(0, 0, 0, .6); }
.pain:hover, .g:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 18px 32px -20px rgba(31, 35, 40, .35); }
.svc .price strong { transition: color .25s ease; }
.svc:hover .price strong { color: var(--teal-dark-bg); }
.g svg { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.g:hover svg { transform: translateY(-3px) scale(1.08); }

/* Botones: la flecha avanza */
.btn svg { transition: transform .2s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
.btn-primary:hover::after { transform: translateX(120%); }

/* Proceso: la línea se llena con el scroll */
.steps { position: relative; }
.steps-track { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.steps-fill { height: 100%; background: var(--teal); transform-origin: 0 50%; transform: scaleX(0); }
.step { border-top-color: transparent; transition: border-color .3s ease; }
.step .n { transition: color .3s ease; color: var(--ink-muted); }
.step.on .n { color: var(--teal); }
.step h3 { transition: color .3s ease; }
@media (max-width: 1080px) { .steps-track { display: none; } .step { border-top-color: var(--line); } .step.on { border-top-color: var(--teal); } }

/* Barras decorativas en la sección de servicios */
#servicios, #services { position: relative; overflow: hidden; }
.svc-bars { position: absolute; right: -80px; top: 40px; width: 420px; opacity: .9; pointer-events: none; }
.svc-bars rect { transform-box: fill-box; transform-origin: center; }
#servicios .wrap, #services .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .svc-bars { width: 260px; right: -90px; opacity: .5; } }

/* Preguntas: apertura suave */
.faq details p { animation: none; }
.faq details[open] p { animation: faqIn .35s ease both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* Movimiento reducido: todo quieto y visible */
@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { transform: none !important; opacity: 1 !important; }
  .ticker-track { animation: none; }
  .hero-bars rect { transform: none !important; }
}
.svc-bars { right: -200px; top: 24px; width: 400px; opacity: .55; }
@media (max-width: 900px) { .svc-bars { right: -150px; opacity: .35; } }