/* ENGINE styles: loader, nav, progress, hero, cierre, placeholders. Tokens only. */

/* Theme-dependent chrome colors follow the act in view (main.js toggles body.theme-*) */
body.theme-light { --nav-fg: var(--ink); --nav-mute: var(--mute); --nav-accent: var(--orange); }
body.theme-dark { --nav-fg: var(--off); --nav-mute: var(--mute); --nav-accent: var(--yellow); }
body { --nav-fg: var(--off); --nav-mute: var(--mute); --nav-accent: var(--yellow); }

/* Loader */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 22px;
  background: var(--ink); color: var(--off);
}
.loader__logo { width: 72px; height: auto; }
.loader__bar { width: 168px; height: 2px; border-radius: 2px; background: var(--line-dark); overflow: hidden; }
.loader__bar i { display: block; width: 100%; height: 100%; background: var(--yellow); transform-origin: left center; transform: scaleX(0); }
.loader__label { font: 700 11px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }

/* Scroll progress */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--nav-accent); transform-origin: left center; transform: scaleX(0); will-change: transform; transition: background .4s var(--ease-out); }

/* Fixed nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding-inline: var(--gutter);
  font-family: var(--font-display); color: var(--nav-fg);
  transition: color .4s var(--ease-out);
}
.nav::before, .nav::after {
  content: ''; position: absolute; inset: 0 0 -28px; pointer-events: none; z-index: -1;
  transition: opacity .5s var(--ease-out);
}
.nav::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 72%, transparent), transparent); opacity: 0; }
.nav::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 78%, transparent), transparent); opacity: 0; }
body.theme-dark .nav::before { opacity: 1; }
body.theme-light .nav::after { opacity: 1; }

.nav__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.nav__brand img { height: 30px; width: auto; padding: 3px; border-radius: 7px; background: transparent; transition: background .4s var(--ease-out); }
body.theme-dark .nav__brand img { background: var(--off); }

.nav__acts { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--nav-mute);
  transition: color .3s var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--nav-fg); outline: none; }
.nav__link.is-active { color: var(--nav-fg); }
.nav__num { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--nav-mute); transition: color .3s var(--ease-out); }
.nav__link.is-active .nav__num { color: var(--nav-accent); }
.nav__link::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--nav-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform .45s var(--ease-out);
}
.nav__link.is-active::after { transform: scaleX(1); }
.nav__meta { justify-self: end; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--nav-mute); white-space: nowrap; }

/* Hero */
.hero { position: relative; background: var(--bg); color: var(--fg); }
.hero__pin { position: relative; height: 100vh; min-height: 620px; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The hero timeline (main.js) slides the canvas right as the text morphs into the sphere, so the
   cloud ends clear of the headline; at scroll 0 the "TALENT TO WIN" text must stay centered. */
.hero__pin::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 50%, color-mix(in srgb, var(--ink) 55%, transparent) 100%);
}
.hero__content {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; gap: 22px; max-width: min(640px, 54%);
  margin-left: max(var(--gutter), calc((100% - var(--max)) / 2));
}
.hero__title { font-size: clamp(40px, 5.6vw, 88px); }
.hero__lead { max-width: 26em; }
/* Talent2Win identity in the portada: accents in their teal/blue, both logos on white plates. */
.hero { --accent: var(--t2w-teal); --accent-2: var(--t2w-blue); }
.hero__brands { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.hero__brand { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; padding: 10px 16px; height: 60px; }
.hero__brand img { display: block; height: 34px; width: auto; }
.hero__brand--t2w img { height: 30px; }
.hero__times { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--t2w-teal); }
.hero__pin::after { background: radial-gradient(ellipse 70% 65% at 62% 50%, transparent 45%, color-mix(in srgb, var(--t2w-blue) 18%, var(--ink)) 100%); }
.hero__copy > * { will-change: transform, opacity; }
.hero__hint {
  position: absolute; left: 50%; bottom: 30px; z-index: 2; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 700 11px/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--fg-2);
}
.hero__arrow { position: relative; width: 1px; height: 34px; background: var(--accent); animation: hero-bounce 1.7s var(--ease-in-out) infinite; }
.hero__arrow::after {
  content: ''; position: absolute; bottom: 0; left: -4px; width: 9px; height: 9px;
  border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); transform: rotate(45deg);
}
@keyframes hero-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
.hero__meta {
  position: absolute; left: var(--gutter); bottom: 30px; z-index: 2;
  display: grid; gap: 4px; font: 600 11px/1.4 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.hero__meta b { color: var(--accent); font-weight: 800; }

/* Act placeholders (build.py inserts these when a fragment is missing) */
.act--placeholder .act__inner {
  min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 18px;
  text-align: center; padding: 140px var(--gutter);
}
.act--placeholder .h-1 { max-width: 16ch; }

/* Cierre */
.cierre {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; display: grid; place-items: center; text-align: center;
  padding: 140px var(--gutter); background: var(--bg); color: var(--fg);
}
.cierre__bg {
  position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 30% 42%, color-mix(in srgb, var(--orange) 30%, transparent), transparent 72%),
    radial-gradient(34% 44% at 72% 60%, color-mix(in srgb, var(--yellow) 22%, transparent), transparent 72%),
    radial-gradient(50% 60% at 55% 100%, color-mix(in srgb, var(--ink-3) 90%, transparent), transparent 80%);
  animation: cierre-drift 22s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
@keyframes cierre-drift {
  from { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(4%, 3%, 0) rotate(9deg) scale(1.1); }
}
.cierre__inner { display: grid; gap: 26px; justify-items: center; }
.cierre__inner .lead { max-width: 34em; }
.cierre__plate {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 16px;
  padding: 18px 26px; border-radius: var(--radius); background: var(--off); color: var(--ink);
  font: 800 15px/1.1 var(--font-display); letter-spacing: -.01em;
}
.cierre__plate img { height: 44px; width: auto; }
.cierre__plate small { display: block; margin-top: 4px; font: 600 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }

/* Responsive */
@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__acts { display: none; }
  .hero__content { max-width: none; margin-inline: var(--gutter); top: auto; bottom: 96px; transform: none; }
  .hero__meta { display: none; }
}

/* Reduced motion: no CSS loops */
@media (prefers-reduced-motion: reduce) {
  .hero__arrow, .cierre__bg { animation: none; }
  .nav, .nav__link, .nav__link::after, .nav__num, .progress i { transition: none; }
}