/* ==========================================================================
   Training2Work · MOVIMIENTO
   Las animaciones de entrada solo existen bajo html.motion, que no se pone
   si el sistema pide reducir movimiento. Solo transform, opacity y clip-path.
   ========================================================================== */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); }

/* Barra de progreso de lectura */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; background: linear-gradient(90deg, var(--teal), var(--yellow)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* Cabecera al hacer scroll */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 41, 79, .08); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }

/* ---------- Entradas al hacer scroll ---------- */
.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.motion .reveal.is-in { opacity: 1; transform: none; }
.motion .reveal--clip { opacity: 1; transform: none; clip-path: inset(0 0 100% 0 round 16px); transition: clip-path 1.1s var(--ease-out); }
.motion .reveal--clip.is-in { clip-path: inset(0 0 0 0 round 16px); }
.motion .reveal--clip img { transform: scale(1.08); transition: transform 1.6s var(--ease-out); }
.motion .reveal--clip.is-in img { transform: none; }
.motion .chips > .reveal { transform: translateY(10px) scale(.92); transition-delay: calc(var(--i, 0) * 45ms); }
.motion .chips > .reveal.is-in { transform: none; }

/* Titulares palabra a palabra */
.t-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.t-words .wi { display: inline-block; }
.motion .t-words .wi { transform: translateY(105%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--w, 0) * 45ms); }
.motion .t-words.is-in .wi { transform: none; }
.motion .t-words .hl { background: linear-gradient(var(--yellow), var(--yellow)) 0 0 / 0% 100% no-repeat; transition: background-size .7s var(--ease-io) .5s; }
.motion .t-words.is-in .hl { background-size: 100% 100%; }

/* ---------- Hero: entrada al cargar (CSS puro, no espera a JavaScript) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes rise-clip { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(40px); } to { opacity: 1; clip-path: inset(-10% -10% -20% -10%); transform: none; } }
@keyframes float-in { from { opacity: 0; transform: perspective(1200px) translate3d(60px, 30px, 0) rotateY(-14deg) rotate(2deg); } to { opacity: 1; transform: perspective(1200px) rotate(-2deg); } }
@keyframes float-in-flat { from { opacity: 0; transform: perspective(1200px) translate3d(60px, 30px, 0) rotateY(-14deg); } to { opacity: 1; transform: perspective(1200px); } }
@keyframes wipe { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mark-in { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: .06; transform: none; } }

.motion .hero__top > *, .motion .hero__copy > * { animation: rise .9s var(--ease-out) both; }
.motion .hero__top > :nth-child(2) { animation-delay: .08s; }
.motion .hero__copy > :nth-child(1) { animation-delay: .12s; }
.motion .hero__copy > :nth-child(2) { animation-delay: .2s; }
.motion .hero__copy > :nth-child(3) { animation-delay: .3s; }
.motion .hero__copy > :nth-child(4) { animation-delay: .4s; }
.motion .hero__copy > :nth-child(5) { animation-delay: .48s; }
.motion .hero__copy > :nth-child(6) { animation-delay: .56s; }
.motion .hero__copy > :nth-child(7) { animation-delay: .64s; }
.motion .hero h1, .motion .hero .hero__h { animation-name: rise-clip; animation-duration: 1.1s; }
.motion .hero .hl { background: linear-gradient(var(--yellow), var(--yellow)) 0 0 / 0% 100% no-repeat; animation: wipe .8s var(--ease-io) .75s both; }
.motion .hero__media { animation: fade .6s ease .25s both; }
.motion .hero__media .shot { animation: float-in 1.3s var(--ease-out) .3s both; }
.motion .hero__media .candidate { animation: float-in-flat 1.3s var(--ease-out) .3s both; }
.motion .hero .watermark { animation: mark-in 1.6s var(--ease-out) both; }

/* Inclinación del hero con el cursor */
.motion .hero__media .shot, .motion .hero__media .candidate { transition: transform .5s var(--ease-out); }
.motion .hero.is-tilting .hero__media .shot { animation: none; transform: perspective(1200px) rotateY(calc(var(--tx, 0) * 10deg)) rotateX(calc(var(--ty, 0) * -8deg)) rotate(-2deg); }
.motion .hero.is-tilting .hero__media .candidate { animation: none; transform: perspective(1200px) rotateY(calc(var(--tx, 0) * 10deg)) rotateX(calc(var(--ty, 0) * -8deg)); }

/* Marca de agua con desplazamiento suave */
.motion .watermark { translate: 0 var(--py, 0px); }

/* ---------- Paneles de pestañas: entrada al cambiar ---------- */
.motion [role=tabpanel]:not(.hero__inner) > * { animation: rise .6s var(--ease-out) both; }
.motion [role=tabpanel]:not(.hero__inner) > :nth-child(2) { animation-delay: .06s; }
.motion [role=tabpanel]:not(.hero__inner) > :nth-child(3) { animation-delay: .12s; }
.motion .role-panel .grid > * { animation: rise .7s var(--ease-out) both; }
.motion .role-panel .grid > :nth-child(2) { animation-delay: .08s; }
.motion .role-panel .grid > :nth-child(3) { animation-delay: .16s; }

/* Indicador deslizante */
.has-ink { position: relative; }
.tab-ink { position: absolute; left: 0; top: 0; pointer-events: none; transition: transform .45s var(--ease-out), width .45s var(--ease-out), height .45s var(--ease-out); }
.seg .tab-ink { background: var(--yellow); border-radius: 10px; z-index: 0; }
.seg.has-ink [role=tab] { position: relative; z-index: 1; }
.seg.has-ink [role=tab][aria-selected=true] { background: transparent; }
.tabs .tab-ink { border-bottom: 2px solid var(--yellow); }
.tabs.has-ink [role=tab][aria-selected=true] { border-bottom-color: transparent; }

/* Job Tracker: avance automático con barra de tiempo */
@keyframes jt-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.jt__tab { position: relative; overflow: hidden; }
.jt.is-auto .jt__tab[aria-selected=true]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(0); }
.jt.is-auto.is-playing .jt__tab[aria-selected=true]::after { animation: jt-progress 6.5s linear forwards; }
.jt.is-auto.is-paused .jt__tab[aria-selected=true]::after { animation-play-state: paused; }

/* ---------- Microinteracciones ---------- */
/* Botones: brillo que cruza y flecha que avanza */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after, .btn--navy::after, .btn--teal::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease-out); }
.btn--primary:hover::after, .btn--navy:hover::after, .btn--teal:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }
.link-arrow .ico, .btn .ico { transition: transform .25s var(--ease-out); }
.link-arrow:hover .ico { transform: translateX(4px); }

/* Tarjetas: elevación y luz que sigue al cursor */
.card { position: relative; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease; }
.motion .card.reveal.is-in { transition: opacity .8s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease; }
.card::after, .jt__tab::before, .cta-block::after, .calc__tool::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(17, 181, 183, .13), transparent 60%); }
.card--navy::after, .card--line::after, .calc__tool::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(17, 181, 183, .22), transparent 60%); }
.cta-block { position: relative; overflow: hidden; }
.cta-block::after { background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35), transparent 60%); }
.calc__tool { position: relative; }
@media (hover: hover) {
  .card:hover::after, .jt__tab:hover::before, .cta-block:hover::after, .calc__tool:hover::after { opacity: 1; }
  .grid > .card:hover, .grid > li.card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -18px rgba(0, 41, 79, .28); border-color: color-mix(in srgb, var(--teal-text) 40%, var(--border)); }
  .card--line:hover { border-color: rgba(17, 181, 183, .55); }
  .card:hover .icon-badge { transform: rotate(-8deg) scale(1.08); }
  a.chip:hover { transform: translateY(-2px); }
}
.icon-badge { transition: transform .45s var(--ease-out); }
a.chip { transition: transform .25s var(--ease-out), border-color .15s, background-color .15s, opacity .8s var(--ease-out); }

/* El problema: línea que se dibuja y número que entra */
.problem-list li { position: relative; border-top-color: transparent; }
.problem-list li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--border); transform-origin: 0 50%; }
.motion .problem-list li::before { transform: scaleX(0); transition: transform 1.1s var(--ease-out) calc(var(--i, 0) * 120ms + .1s); }
.motion .problem-list li.is-in::before { transform: none; }
.motion .problem-list .numbered { display: inline-block; transform: translateX(-12px); opacity: 0; transition: transform .8s var(--ease-out) calc(var(--i, 0) * 120ms + .25s), opacity .8s ease calc(var(--i, 0) * 120ms + .25s); }
.motion .problem-list li.is-in .numbered { transform: none; opacity: 1; }

/* Cifras: línea superior que crece */
.community-stats > div, .stat { position: relative; }
.motion .community-stats > div.reveal, .motion .stat.reveal { border-top-color: transparent; }
.motion .community-stats > div.reveal::before, .motion .stat.reveal::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: currentColor; opacity: .35; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease-out) .2s; }
.motion .community-stats > div.reveal.is-in::before, .motion .stat.reveal.is-in::before { transform: none; }

/* Franja de empresas en movimiento continuo */
.marquee { overflow: hidden; flex: 1 1 420px; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee__track .trust__names { flex-wrap: nowrap; padding-right: 26px; white-space: nowrap; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.trust__logos:has(.marquee) { flex: 1 1 640px; min-width: 0; flex-wrap: nowrap; }
@media (max-width: 900px) { .trust__logos:has(.marquee) { flex-wrap: wrap; } .marquee { flex-basis: 100%; } }

/* Preguntas frecuentes: apertura suave (navegadores compatibles) */
.faq { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease-out), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq summary { transition: color .2s ease; }
.faq summary:hover { color: var(--teal-text); }
.faq summary::after { transition: transform .35s var(--ease-out); }

/* Capturas del Job Tracker: ligero zoom al pasar */
.jt__panels .shot img { transition: transform .8s var(--ease-out); }
.jt__panels .shot:hover img { transform: scale(1.03); }

/* Vídeo: pulso del botón de reproducción */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(249, 178, 15, .55); } 100% { box-shadow: 0 0 0 22px rgba(249, 178, 15, 0); } }
.motion .video-cover__play { animation: pulse 2.2s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track, .video-cover__play { animation: none !important; }
  .card, .btn, .tab-ink, .site-header, .icon-badge, a.chip { transition: none !important; }
  .btn::after, .card::after { display: none; }
  .card:hover, a.chip:hover { transform: none !important; }
}