/* UNEXTI — movimiento y transiciones (usa tokens.css y site.css) */
:root { --ux-ease: cubic-bezier(.2, .7, .2, 1); --ux-ciclo: 7s; }

/* Encabezado, botones y tarjetas */
.site-header { transition: box-shadow .3s var(--ux-ease); }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(14, 31, 61, .08); }
.btn { transition: background .2s, color .2s, border-color .2s, transform .2s var(--ux-ease), box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(14, 31, 61, .18); }
.card, .person { transition: opacity .7s var(--ux-ease), transform .3s var(--ux-ease), box-shadow .3s var(--ux-ease); }
.card:hover, .person:hover { transform: translateY(-4px); box-shadow: var(--ux-shadow); }

/* Aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ux-ease), transform .7s var(--ux-ease); }
.reveal.in { opacity: 1; transform: none; }

/* Portada: entrada y marca de agua */
.hero-copy > * { animation: subir .8s var(--ux-ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: .1s; }
.hero-copy > *:nth-child(3) { animation-delay: .2s; }
.hero-copy > *:nth-child(4) { animation-delay: .3s; }
.hero::before { animation: flotar 14s ease-in-out infinite; }
@keyframes subir { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes flotar { 0%, 100% { transform: translateY(-50%); } 50% { transform: translate(-10px, -53%); } }

/* Portada: esquema del método */
.hero-flow { position: relative; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 28px 28px 24px; animation: subir .9s .35s var(--ux-ease) both; }
.flow-node { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1px solid transparent; }
.flow-node small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #8FA3C4; }
.flow-node b { display: block; font-family: var(--ux-font-display); color: #fff; font-size: 17px; line-height: 1.3; }
.flow-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #5B6F93; justify-self: center; }
.flow-line { position: relative; height: 34px; margin-left: 29px; width: 2px; background: rgba(255, 255, 255, .14); }
.flow-line i { position: absolute; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ux-rojo); opacity: 0; }

.hero-flow.play .n1 { animation: activo-1 var(--ux-ciclo) var(--ux-ease) infinite; }
.hero-flow.play .n2 { animation: activo-2 var(--ux-ciclo) var(--ux-ease) infinite; }
.hero-flow.play .n3 { animation: activo-3 var(--ux-ciclo) var(--ux-ease) infinite; }
.hero-flow.play .n1 .flow-dot { animation: punto-1 var(--ux-ciclo) var(--ux-ease) infinite; }
.hero-flow.play .n2 .flow-dot { animation: punto-2 var(--ux-ciclo) var(--ux-ease) infinite; }
.hero-flow.play .n3 .flow-dot { animation: punto-3 var(--ux-ciclo) var(--ux-ease) infinite; }
.hero-flow.play .l1 i { animation: baja-1 var(--ux-ciclo) var(--ux-ease) infinite; }
.hero-flow.play .l2 i { animation: baja-2 var(--ux-ciclo) var(--ux-ease) infinite; }

@keyframes activo-1 { 0%, 2% { background: transparent; border-color: transparent; } 8%, 28% { background: rgba(225, 38, 45, .12); border-color: rgba(225, 38, 45, .5); } 36%, 100% { background: transparent; border-color: transparent; } }
@keyframes activo-2 { 0%, 38% { background: transparent; border-color: transparent; } 44%, 56% { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); } 62%, 100% { background: transparent; border-color: transparent; } }
@keyframes activo-3 { 0%, 66% { background: transparent; border-color: transparent; } 72%, 94% { background: rgba(143, 176, 232, .16); border-color: rgba(143, 176, 232, .6); } 100% { background: transparent; border-color: transparent; } }
@keyframes punto-1 { 0%, 2%, 36%, 100% { background: transparent; border-color: #5B6F93; } 8%, 28% { background: #E1262D; border-color: #E1262D; } }
@keyframes punto-2 { 0%, 38%, 62%, 100% { background: transparent; border-color: #5B6F93; } 44%, 56% { background: #FFFFFF; border-color: #FFFFFF; } }
@keyframes punto-3 { 0%, 66%, 100% { background: transparent; border-color: #5B6F93; } 72%, 94% { background: #8FB0E8; border-color: #8FB0E8; } }
@keyframes baja-1 { 0%, 28% { top: 0; opacity: 0; } 30% { opacity: 1; } 40% { top: calc(100% - 10px); opacity: 1; } 43%, 100% { top: calc(100% - 10px); opacity: 0; } }
@keyframes baja-2 { 0%, 56% { top: 0; opacity: 0; } 58% { opacity: 1; } 68% { top: calc(100% - 10px); opacity: 1; } 71%, 100% { top: calc(100% - 10px); opacity: 0; } }

/* Etapas: flujo de proceso */
.stage-arrow { position: relative; height: 2px; background: var(--ux-acero); clip-path: none; }
.stage-arrow::before { content: ""; position: absolute; right: -2px; top: -5px; border-left: 9px solid var(--ux-acero); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.stage-arrow::after { content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ux-rojo); opacity: 0; }
.stages.play .stage-asis { animation: brillo-asis var(--ux-ciclo) var(--ux-ease) infinite; }
.stages.play .stage-arrow:nth-child(2)::after { animation: recorre-1 var(--ux-ciclo) var(--ux-ease) infinite; }
.stages.play .decision-dot { animation: decide var(--ux-ciclo) var(--ux-ease) infinite; }
.stages.play .stage-arrow:nth-child(4)::after { animation: recorre-2 var(--ux-ciclo) var(--ux-ease) infinite; }
.stages.play .stage-tobe { animation: brillo-tobe var(--ux-ciclo) var(--ux-ease) infinite; }

@keyframes brillo-asis { 0%, 2% { box-shadow: 0 0 0 0 rgba(225, 38, 45, 0); } 10%, 26% { box-shadow: 0 0 0 6px rgba(225, 38, 45, .14), 0 12px 28px rgba(225, 38, 45, .12); } 36%, 100% { box-shadow: 0 0 0 0 rgba(225, 38, 45, 0); } }
@keyframes recorre-1 { 0%, 26% { left: 0; opacity: 0; } 29% { opacity: 1; } 40% { left: calc(100% - 12px); opacity: 1; } 43%, 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes decide { 0%, 40% { transform: scale(1); box-shadow: 0 0 0 0 rgba(27, 55, 104, 0); } 47% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(27, 55, 104, .12); } 56%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(27, 55, 104, 0); } }
@keyframes recorre-2 { 0%, 54% { left: 0; opacity: 0; } 57% { opacity: 1; } 68% { left: calc(100% - 12px); opacity: 1; } 71%, 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes brillo-tobe { 0%, 68% { box-shadow: 0 0 0 0 rgba(27, 55, 104, 0); } 76%, 92% { box-shadow: 0 0 0 6px rgba(44, 81, 150, .18), 0 14px 32px rgba(14, 31, 61, .22); } 100% { box-shadow: 0 0 0 0 rgba(27, 55, 104, 0); } }

/* Pasos: la línea roja se completa al aparecer */
.step::before { border-top-color: transparent; }
.step::after { content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 48px; background: var(--ux-rojo); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ux-ease) .25s; }
.step.reveal.in::after, .step:not(.reveal)::after { transform: scaleX(1); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .stage-arrow { width: 2px; height: 40px; justify-self: center; }
  .stage-arrow::before { right: -5px; top: auto; bottom: -2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--ux-acero); border-bottom: 0; }
  .stage-arrow::after { left: -4px; top: 0; }
  .stages.play .stage-arrow:nth-child(2)::after { animation-name: baja-1; }
  .stages.play .stage-arrow:nth-child(4)::after { animation-name: baja-2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}