/* Scroll film: additive to the public home, using its existing brand tokens. */
.ts-journey {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #0a0a0a;
}
.ts-journey video, .ts-journey-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  left: 22%;
  mask-image: linear-gradient(90deg, transparent, #000 15%);
}
.ts-journey video { opacity: 0; }
.ts-journey[data-ready="true"] video { opacity: 1; }
.ts-journey::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0a0a0af2 0%, #0a0a0ace 29%, #0a0a0a55 63%, #0a0a0a22 100%);
}
body[data-ts-journey] main > section {
  min-height: 92svh;
  display: flex;
  align-items: center;
}
body[data-ts-journey] .hero { min-height: calc(100svh - 64px); }
body[data-ts-journey] .foot { background: #0a0a0a; }
/* Keep foreground type stable and legible as the camera moves behind it. */
body[data-ts-journey] .ts-reveal.ts-fx {
  transform: translateY(24px);
  filter: none;
}
body[data-ts-journey] .ts-reveal.ts-in { transform: none; animation: none; }
body[data-ts-journey] .problem-card,
body[data-ts-journey] .step,
body[data-ts-journey] .agent,
body[data-ts-journey] .plan { background: #121212df !important; }
.ts-journey-controls {
  position: fixed;
  top: 80px;
  right: 22px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px 10px 18px;
  border: 1px solid #ffffff24;
  border-radius: 30px;
  background: #0a0a0aeb;
  color: var(--ink);
  font: 10px var(--mono);
  letter-spacing: 0.08em;
}
.ts-journey-status { display: flex; align-items: center; gap: 9px; }
.ts-journey-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #10b981; }
.ts-journey-controls button {
  width: 34px; height: 34px; padding: 0; border: 1px solid #ffffff30;
  border-radius: 50%; background: transparent; color: #fafaf7; cursor: pointer;
  display: grid; place-items: center;
}
.ts-journey-controls button:hover { border-color: #10b981; }
.ts-journey-controls button:focus-visible { outline: 2px solid #10b981; outline-offset: 4px; }
.ts-journey-controls[hidden] { display: none; }
body[data-ts-journey] .bridge { background: #0a0a0abb !important; }
@media (max-width: 760px) {
  .ts-journey video, .ts-journey-poster { left: 0; height: 42svh; object-position: center; mask-image: linear-gradient(180deg, #000 55%, transparent); }
  .ts-journey::after { background: linear-gradient(180deg, #0a0a0a30 0%, #0a0a0aab 30%, #0a0a0ae8 70%); }
  body[data-ts-journey] main > section { min-height: 100svh; }
  body[data-ts-journey] .hero { padding-top: 200px; }
  .ts-journey-controls { top: 80px; right: 10px; padding: 5px 6px 5px 12px; font-size: 8px; gap: 10px; }
  body[data-ts-journey] section { padding-bottom: max(var(--section-y), 100px); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-ts-journey] main > section { min-height: 0; }
  body[data-ts-journey] .hero { padding-top: clamp(56px, 8vw, 104px); }
}
@media print {
  .ts-journey, .ts-journey-controls { display: none !important; }
  body[data-ts-journey] main > section { min-height: 0; }
}

/* Labels are projected from measured locations in the shot, not a static HUD. */
.ts-office-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.ts-office-overlay[hidden] { display: none; }
.ts-core { position: absolute; width: 0; height: 0; }
.ts-core-light, .ts-core-ring {
  position: absolute; width: var(--core-size); height: var(--core-size);
  left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 50%;
}
.ts-core-light { background: radial-gradient(circle, #b4ffdfbb 0%, #10b98180 42%, #10b98100 70%); mix-blend-mode: screen; animation: tsCoreLight 1.8s ease-in-out infinite; }
.ts-core-ring { border: 1px solid #79ffd4a8; animation: tsCoreSignal 1.8s ease-out infinite; }
.ts-core-name {
  position: absolute; left: 0; bottom: calc(var(--core-size) / 2 + 16px);
  transform: translateX(-50%); color: #d8fff0; font: 500 12px var(--mono);
  letter-spacing: .24em; padding: 5px 9px; text-shadow: 0 1px 8px #000;
  border-bottom: 1px solid #10b98180; background: #0a0a0a80;
}
.ts-core-name::after { content: ''; position: absolute; height: 12px; width: 1px; left: 50%; top: 100%; background: #10b98180; }
@keyframes tsCoreLight { 0%,100% { opacity: .15; } 45% { opacity: 1; } }
@keyframes tsCoreSignal { 0% { opacity: .8; transform: translate(-50%,-50%) scale(.85); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.65); } }
.ts-office-overlay.is-paused * { animation-play-state: paused !important; }
.ts-office-leader { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ts-office-leader path { fill: none; stroke: #10b98199; stroke-width: 1; }
.ts-office-leader circle { fill: #a1ffdc; stroke: #10b981; stroke-width: 5; paint-order: stroke; }
body.ts-office-live #agentes { display: block; height: 520svh; min-height: 0; padding: 0; }
body.ts-office-live #agentes > .shell { position: sticky; top: 64px; height: calc(100svh - 64px); padding-top: 68px; }
body.ts-office-live #agentes .section-head { max-width: 510px; margin: 0; }
body.ts-office-live #agentes .section-head .lede { font-size: 16px; max-width: 43ch; }
body.ts-office-live #agentes .agents { position: absolute; inset: 0; display: block; overflow: clip; pointer-events: none; }
body.ts-office-live #agentes .agent {
  position: absolute; left: var(--pad-x); top: 58%; width: min(360px, 37vw);
  padding: 22px 24px 22px 0; border: 0; border-top: 1px solid #10b98170; border-radius: 0;
  background: linear-gradient(90deg, #0a0a0ae6, #0a0a0a00) !important;
  box-shadow: none !important; backdrop-filter: none;
  transform-origin: 0 0;
  transform: translate(var(--card-x,0px), var(--card-y,0px)) scale(var(--card-scale,1)) !important;
  opacity: var(--card-opacity,0) !important; filter: none !important;
  transition: none !important; animation: none !important;
}
body.ts-office-live #agentes .agent .label { font-size: 14px; letter-spacing: .04em; }
body.ts-office-live #agentes .agent p { color: #f2f2ee; font-size: 19px; line-height: 1.6; }
@media (max-width: 760px) {
  body.ts-office-live #agentes { height: 480svh; padding: 0; }
  body.ts-office-live #agentes > .shell { padding-top: 32svh; }
  body.ts-office-live #agentes .section-head { max-width: 100%; }
  body.ts-office-live #agentes .section-head .h-section { font-size: 28px; max-width: 300px; }
  body.ts-office-live #agentes .section-head .lede { font-size: 14px; max-width: 34ch; }
  body.ts-office-live #agentes .agent { top: 74%; width: calc(100% - var(--pad-x) * 2); padding-top: 16px; }
  body.ts-office-live #agentes .agent p { font-size: 17px; max-width: 34ch; }
  .ts-core-name { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce), print {
  .ts-office-overlay { display: none !important; }
  body.ts-office-live #agentes { height: auto; padding-block: var(--section-y); }
  body.ts-office-live #agentes > .shell { position: static; height: auto; padding-top: 0; }
  body.ts-office-live #agentes .agents { position: static; display: grid; }
  body.ts-office-live #agentes .agent { position: static; width: auto; transform: none !important; opacity: 1 !important; }
}
/* Keep the browser from anchoring to a later section as the film initializes. */
body[data-ts-journey] { overflow-anchor: none; }

/* With the mobile menu, pause belongs in the header away from page copy. */
@media (max-width: 900px) {
  .ts-journey-controls { top: 11px; right: calc(var(--pad-x) + 56px); z-index: 60; padding: 0; border: 0; background: transparent; }
  .ts-journey-status { display: none; }
  .ts-journey-controls button { width: 44px; height: 44px; }
}
@media (max-width: 760px) and (max-height: 650px) {
  body.ts-office-live #agentes > .shell { padding-top: 20svh; }
  body.ts-office-live #agentes .section-head .h-section { font-size: 24px; }
  body.ts-office-live #agentes .section-head .lede { font-size: 13px; }
  body.ts-office-live #agentes .agent { top: 64%; }
  body.ts-office-live #agentes .agent p { font-size: 16px; }
}
/* A short landscape viewport reads as a normal list instead of clipping text. */
@media (max-height: 500px) {
  .ts-office-overlay { display: none; }
  body.ts-office-live #agentes { height: auto; padding-block: 72px; }
  body.ts-office-live #agentes > .shell { position: static; height: auto; padding-top: 0; }
  body.ts-office-live #agentes .section-head { max-width: none; margin-bottom: 32px; }
  body.ts-office-live #agentes .agents { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; }
  body.ts-office-live #agentes .agent { position: static; width: auto; transform: none !important; opacity: 1 !important; }
  body.ts-office-live #agentes .agent p { font-size: 16px; }
}
@media (max-width: 760px) {
  .ts-core-name { bottom: auto; top: calc(var(--core-size) / 2 + 12px); }
  .ts-core-name::after { top: auto; bottom: 100%; }
}

/* Large monitors need their own composition, not a 1240px page under a full-screen film. */
@media (min-width: 1440px) and (min-height: 650px) {
  body[data-ts-journey] { --max: min(2240px, 94vw); }
  body[data-ts-journey] .nav-inner { padding-block: 8px; }
  body[data-ts-journey] .nav-logo svg { height: 48px; }
  body[data-ts-journey] .nav-links { font-size: 16px; gap: clamp(26px, 1.7vw, 42px); }
  body[data-ts-journey] .hero h1 { font-size: clamp(76px, 4.8vw, 112px); max-width: min(46vw, 1040px); }
  body[data-ts-journey] .hero-sub { font-size: clamp(20px, 1.15vw, 25px); max-width: min(40vw, 880px); }
  body[data-ts-journey] .hero .label { font-size: 13px; }
  body[data-ts-journey] .hero .btn { font-size: 17px; padding: 18px 30px; }
  body[data-ts-journey] .hero-micro { font-size: 14px; max-width: 58ch; }
  body[data-ts-journey] .h-section { font-size: clamp(48px, 3.3vw, 72px); }
  body[data-ts-journey] .lede { font-size: clamp(19px, 1.05vw, 23px); }
  body.ts-office-live #agentes .section-head { max-width: min(43vw, 760px); }
  body.ts-office-live #agentes .section-head .lede { font-size: clamp(18px, 1.05vw, 23px); }
  body.ts-office-live #agentes .agent { width: min(440px, 32vw); }
  body.ts-office-live #agentes .agent .label { font-size: 16px; }
  body.ts-office-live #agentes .agent p { font-size: clamp(21px, 1.2vw, 26px); }
  .ts-journey::after { background: linear-gradient(90deg, #0a0a0af5 0%, #0a0a0aed 35%, #0a0a0a99 49%, #0a0a0a22 67%, #0a0a0a11 100%); }
  .ts-core-name { font-size: 14px; }
}