/* ACT 3 · Lo que podemos hacer juntos en Estados Unidos. Scoped under #act-03; tokens only. */

#act-03 { background: var(--paper); }
#act-03 .screen > .wrap > .kicker { margin-bottom: 22px; }
#act-03 .screen > .wrap > .h-1 + .lead { margin-top: 18px; }
#act-03 .a3-y { color: var(--yellow); }

/* 1 · Opener */
#act-03 .a3-open__title { font-size: clamp(40px, 5.6vw, 86px); }
#act-03 .a3-open__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: clamp(22px, 3vh, 32px);
  border-top: 2px solid var(--orange);
}
#act-03 .a3-open__row .lead { max-width: 22em; }
#act-03 .a3-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#act-03 .a3-level {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: -.01em;
  line-height: 1.2;
}
#act-03 .a3-level__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 800;
  font-size: 16px;
}
#act-03 .a3-level:nth-child(3) .a3-level__n { background: var(--orange); color: var(--paper); }

/* 2 · El mercado existe (pinned) */
#act-03 .a3-market { position: relative; }
#act-03 .a3-market__pin {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  background: var(--paper);
}
#act-03 .a3-market__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}
#act-03 .a3-market__copy .kicker { margin-bottom: 18px; }
#act-03 .a3-market__lead { margin-top: 14px; max-width: 26em; font-size: clamp(16px, 1.3vw, 20px); }
#act-03 .a3-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 24px; margin-top: clamp(22px, 3.5vh, 36px); }
#act-03 .a3-stat b { font-size: clamp(34px, 3.4vw, 52px); }
#act-03 .a3-stat span { font-size: 13px; line-height: 1.4; max-width: 20em; }
#act-03 .a3-stat--accent b { color: var(--orange); }
#act-03 .a3-market__source { margin-top: 20px; max-width: 42em; line-height: 1.45; }

#act-03 .a3-map { margin: 0; }
#act-03 .a3-map__svg { width: 100%; height: auto; overflow: visible; }
#act-03 .a3-map__dots circle { fill: var(--ink); opacity: .13; }
#act-03 .a3-map__dots circle.is-near { fill: var(--orange); opacity: .5; }
#act-03 .a3-map__meridian-line { fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .75; }
#act-03 .a3-map__meridian-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  fill: var(--orange);
}
#act-03 .a3-city__dot { fill: var(--orange); }
#act-03 .a3-city__halo {
  fill: var(--orange);
  opacity: .35;
  transform-box: fill-box;
  transform-origin: center;
  animation: a3-pulse 2.6s var(--ease-out) infinite;
}
#act-03 .a3-city:nth-child(2) .a3-city__halo { animation-delay: -.5s; }
#act-03 .a3-city:nth-child(3) .a3-city__halo { animation-delay: -1s; }
#act-03 .a3-city:nth-child(4) .a3-city__halo { animation-delay: -1.5s; }
#act-03 .a3-city:nth-child(5) .a3-city__halo { animation-delay: -2s; }
@keyframes a3-pulse {
  0% { transform: scale(.7); opacity: .55; }
  100% { transform: scale(3.2); opacity: 0; }
}
#act-03 .a3-city__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  fill: var(--ink);
  paint-order: stroke fill;
  stroke: var(--paper);
  stroke-width: 6px;
  stroke-linejoin: round;
}
#act-03 .a3-map__caption {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.3vw, 20px);
  letter-spacing: -.01em;
  color: var(--ink);
}

/* 3 · Nivel 1 */
#act-03 .a3-l1 { background: var(--off); }
#act-03 .a3-l1 .card { background: var(--paper); }
#act-03 .a3-l1__title { max-width: 22ch; }
#act-03 .a3-fronts { margin-top: clamp(30px, 5vh, 52px); }
#act-03 .a3-front { display: flex; flex-direction: column; gap: 12px; }
#act-03 .a3-front .h-3 { margin-bottom: 0; }
#act-03 .a3-front__eq { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
#act-03 .a3-front__eq span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Flow (shared by Nivel 1 and Nivel 3) */
#act-03 .a3-flow { margin-top: clamp(36px, 6vh, 64px); }
#act-03 .a3-flow__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -.01em;
}
#act-03 .a3-flow__track { position: relative; --cols: 5; --inset: calc(100% / var(--cols) / 2); }
#act-03 .a3-flow__rail {
  position: absolute;
  top: 10px;
  left: var(--inset);
  width: calc(100% - 2 * var(--inset));
  height: 8px;
  overflow: visible;
}
#act-03 .a3-flow__base, #act-03 .a3-flow__draw { fill: none; stroke-width: 2; stroke-linecap: round; }
#act-03 .a3-flow__base { stroke: var(--mute); opacity: .35; }
#act-03 .a3-flow__draw { stroke: var(--orange); stroke-dasharray: 1; stroke-dashoffset: 0; }
#act-03 .a3-flow__steps { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 18px; }
#act-03 .a3-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 42px;
  text-align: center;
}
#act-03 .a3-step__node {
  position: absolute;
  top: 0;
  left: 50%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: var(--orange);
  border: 7px solid var(--off);
  box-shadow: 0 0 0 2px var(--orange);
}
#act-03 .a3-step__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.2; letter-spacing: -.01em; }
#act-03 .a3-step__d { font-size: 13.5px; line-height: 1.45; color: var(--gray); max-width: 22em; }
#act-03 .a3-step .num { font-size: 12px; }

/* 4 · Nivel 2 */
#act-03 .a3-l2__title { max-width: 20ch; }
#act-03 .a3-l2__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  gap: 0 12px;
  align-items: stretch;
  margin-top: clamp(30px, 5vh, 52px);
}
#act-03 .a3-side { display: flex; flex-direction: column; gap: 16px; padding: 30px 32px; }
#act-03 .a3-side .h-3 { margin-bottom: 0; font-size: clamp(19px, 1.7vw, 24px); }
#act-03 .a3-ticks { display: grid; gap: 10px; }
#act-03 .a3-ticks li { position: relative; padding-left: 24px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; color: var(--ink); }
#act-03 .a3-ticks li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); }
#act-03 .a3-side--clients .a3-ticks li::before { background: var(--yellow); }
#act-03 .a3-l2__link { display: flex; align-items: center; justify-content: center; }
#act-03 .a3-l2__link svg { width: 48px; height: auto; overflow: visible; }
#act-03 .a3-l2__arrow { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* 5 · Nivel 3 */
#act-03 .a3-l3 { background: var(--off); }
#act-03 .a3-l3__title { max-width: 24ch; font-size: clamp(30px, 3.8vw, 54px); }
#act-03 .a3-flow--l3 .a3-step__d { max-width: 24em; }
#act-03 .a3-l3__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 32px;
  align-items: center;
  margin-top: clamp(32px, 5vh, 56px);
  padding: 26px 32px;
}
#act-03 .a3-l3__note-k { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); white-space: nowrap; }
#act-03 .a3-l3__note .h-3 { margin: 0; max-width: none; font-size: clamp(18px, 1.8vw, 26px); }

/* 6 · Cómo nos relacionamos: siete garantías (compact labels) + por qué funciona */
#act-03 .a3-guar__title { max-width: 18ch; }
#act-03 .a3-g__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(18px, 2.5vw, 36px);
  margin-top: clamp(26px, 4vh, 44px);
}
#act-03 .a3-g {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
#act-03 .a3-g__n {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
}
#act-03 .a3-g strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); letter-spacing: -.01em; line-height: 1.25; }

#act-03 .a3-why { margin-top: clamp(32px, 5vh, 56px); }
#act-03 .a3-why__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -.01em;
}
#act-03 .a3-reason { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; }
#act-03 .a3-reason .h-3 { margin-bottom: 0; }
#act-03 .a3-reason .body { font-size: 14.5px; line-height: 1.45; color: var(--gray); }
#act-03 .a3-reason__big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--orange);
  margin-bottom: 6px;
}

/* 7 · Próximos pasos */
#act-03 .a3-next { background: var(--off); }
#act-03 .a3-next .card { background: var(--paper); }
#act-03 .a3-next__title { max-width: 18ch; }
#act-03 .a3-next__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(30px, 5vh, 52px); }
#act-03 .a3-nx { display: flex; flex-direction: column; gap: 12px; }
#act-03 .a3-nx .num { font-size: 15px; }
#act-03 .a3-nx__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.25; letter-spacing: -.01em; }
#act-03 .a3-next__meta { margin-top: clamp(28px, 4vh, 44px); font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }

/* Responsive */
@media (max-width: 960px) {
  #act-03 .a3-open__row { grid-template-columns: 1fr; }
  #act-03 .a3-levels { grid-template-columns: 1fr; }
  #act-03 .a3-market__pin { height: auto; min-height: 100vh; overflow: visible; padding-block: clamp(72px, 10vh, 140px); }
  #act-03 .a3-market__grid { grid-template-columns: 1fr; gap: 32px; }
  #act-03 .a3-flow__rail { display: none; }
  #act-03 .a3-flow__steps { grid-template-columns: 1fr; gap: 20px; }
  #act-03 .a3-step { align-items: flex-start; text-align: left; padding: 0 0 0 44px; }
  #act-03 .a3-step__node { left: 0; top: 2px; margin-left: 0; }
  #act-03 .a3-l2__grid { grid-template-columns: 1fr; gap: 16px; }
  #act-03 .a3-l2__link { display: none; }
  #act-03 .a3-g__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #act-03 .a3-l3__note { grid-template-columns: 1fr; }
  #act-03 .a3-next__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #act-03 .a3-g__list { grid-template-columns: 1fr; }
}

/* Reduced motion: no pin, no pulse; everything visible and static. */
@media (prefers-reduced-motion: reduce) {
  #act-03 .a3-market__pin { height: auto; min-height: 100vh; overflow: visible; padding-block: clamp(72px, 10vh, 140px); }
  #act-03 .a3-city__halo { animation: none; opacity: .25; transform: scale(1.8); }
}
#act-03.is-reduced .a3-market__pin { height: auto; min-height: 100vh; overflow: visible; padding-block: clamp(72px, 10vh, 140px); }
#act-03.is-reduced .a3-city__halo { animation: none; opacity: .25; transform: scale(1.8); }