/* Kids Hero Run — landing de producción. Base: diseno/index.html (paleta y tipografías del arte oficial). */
:root {
  /* --blue y derivados ahora son el morado de la marca */
  --ink: #2E1A3D;
  --text-muted: #4A3A57;
  --text-soft: #6B5C78;
  --blue: #7A3683;
  --blue-dark: #5E2766;
  --yellow: #FFD401;
  --yellow-soft: #FFF6C2;
  --blue-soft: #F3ECF5;
  --dots: #E7D9EC;
  --line: #EBE3EE;
  --input-line: #D6C6DD;
  --orange: #E94E1B;
  --orange-kids: #F86400;
  --pink: #D60B52;
  --green: #3AAA35;
  --cyan: #02ABFD;
  --magenta: #C1008F;
  --lila: #F4EEF6;
  --white: #FFFFFF;
  --danger: #B42318;
  --ok-bg: #DDF5E6;
  --ok-text: #0B5B2E;
  --font-display: 'Baloo 2', 'Bakso Sapi', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --starburst: polygon(50% 0%, 61% 25%, 88% 12%, 75% 39%, 100% 50%, 75% 61%, 88% 88%, 61% 75%, 50% 100%, 39% 75%, 12% 88%, 25% 61%, 0% 50%, 25% 39%, 12% 12%, 39% 25%);
}

* { box-sizing: border-box; }
img { display: block; max-width: 100%; height: auto; }
button, input, select { max-width: 100%; }
fieldset { min-inline-size: 0; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
}

a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

.container { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.container--narrow { max-width: 1120px; }
.container--faq { max-width: 820px; }

.display {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: 1px;
  line-height: 1;
}

.eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--blue);
}

.muted { color: var(--text-muted); }

.dots {
  background-color: var(--white);
  background-image: radial-gradient(var(--dots) 1.6px, transparent 1.6px);
  background-size: 18px 18px;
}

.starburst { clip-path: var(--starburst); background: var(--yellow); }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--white); }
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__logo { width: auto; height: 64px; }
.brand__tag { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; line-height: 1.4; color: var(--blue); }
.pase__logo { width: auto; height: 46px; }
.correo__logo { flex-shrink: 0; width: auto; height: 64px; }
.nav { display: flex; flex-wrap: wrap; gap: 24px; font-weight: 700; font-size: 15px; }
.nav a { color: var(--ink); text-decoration: none; }
.header-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px;
  border: 2px solid var(--ink); border-radius: 12px;
  font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
  background: var(--white); color: var(--ink);
}
.btn:hover { color: var(--ink); }
.btn--primary { background: var(--blue); color: var(--white); box-shadow: 3px 3px 0 var(--ink); }
.btn--primary:hover { color: var(--white); background: var(--blue-dark); }
.btn--dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--dark:hover { color: var(--white); }
.btn--lg {
  min-height: 56px; padding: 0 28px; border-width: 3px; border-radius: 14px;
  font-size: 18px; font-weight: 900; box-shadow: 4px 4px 0 var(--ink);
}
.btn--block { display: flex; width: 100%; }
.btn--link { border: 0; background: transparent; color: var(--blue); padding: 0; }
.btn--danger-link { border: 0; background: transparent; color: var(--danger); padding: 0 16px; }
.btn--dashed {
  min-height: 56px; border: 2px dashed var(--blue); border-radius: 16px;
  background: var(--blue-soft); color: var(--blue); font-weight: 900; font-size: 17px;
}

.icon-btn {
  width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--white); font-size: 24px; font-weight: 900; color: var(--ink); cursor: pointer;
}
.icon-btn--yellow { background: var(--yellow); }

/* ---------- Pills y chips ---------- */
.pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--yellow); font-weight: 800; font-size: 14px;
}
.tag { padding: 6px 12px; border-radius: 999px; background: var(--blue-soft); font-size: 14px; font-weight: 800; }
.tag--yellow { background: var(--yellow-soft); }

.stat {
  display: flex; flex-direction: column; min-width: 96px;
  padding: 12px 18px; border: 2px solid var(--ink); border-radius: 14px; background: var(--white);
}
.stat__value { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--blue); }
.stat__label { font-size: 13px; font-weight: 700; color: var(--text-muted); }

/* ---------- Tarjetas ---------- */
.card { border: 2px solid var(--ink); border-radius: 20px; padding: 24px; background: var(--white); }
.card--hero { border-width: 3px; border-radius: 24px; box-shadow: 8px 8px 0 var(--ink); padding: 32px; }
.card--soft { background: var(--blue-soft); }
.stack { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; }

.check-list { display: flex; flex-direction: column; gap: 10px; font-weight: 700; font-size: 15px; }
.check-list span { display: flex; align-items: center; gap: 10px; }

/* ---------- Landing ---------- */
/* Fondo lila con manchas de color, como el arte oficial */
.hero {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 104% -4%, var(--magenta) 0 150px, transparent 151px),
    radial-gradient(circle at 93% 4%, var(--yellow) 0 150px, transparent 151px),
    radial-gradient(circle at -4% 44%, rgba(248, 100, 0, .22) 0 130px, transparent 131px),
    radial-gradient(circle at 103% 92%, rgba(58, 170, 53, .85) 0 120px, transparent 121px),
    radial-gradient(circle at -3% 104%, rgba(2, 171, 253, .55) 0 110px, transparent 111px),
    linear-gradient(180deg, #EFE6F2 0%, var(--lila) 45%, #FBF9FB 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(122, 54, 131, .14) 1.4px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(115deg, transparent 55%, #000 100%);
          mask-image: linear-gradient(115deg, transparent 55%, #000 100%);
}
.hero__inner { position: relative; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 40px 28px; align-items: center; padding-block: 56px 64px;
}
.hero__copy { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero__title { font-size: clamp(46px, 5.4vw, 70px); line-height: 1.02; letter-spacing: 0; }
.hero__title span { color: var(--orange); }
.hero__lead { margin: 0; max-width: 540px; font-size: 18px; line-height: 1.65; color: var(--text-muted); }
.hero__art { min-width: 0; }
.hero__art { display: flex; flex-direction: column; align-items: center; }
.hero__art img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.hero__art .hero__logo { position: relative; width: 52%; max-width: 320px; aspect-ratio: auto; margin-top: -12%; filter: drop-shadow(0 10px 18px rgba(46, 26, 61, .18)); }
.hero__stats .stat { border: 0; background: var(--blue-soft); padding: 12px 20px; }
.hero__aside { grid-column: 1 / -1; min-width: 0; position: relative; }
.price-burst {
  position: absolute; top: -48px; right: 24px; z-index: 2;
  width: 120px; height: 120px; transform: rotate(8deg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 0.95; text-align: center;
}
.hero__aside .card {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas: "title counter action" "list total link";
  gap: 20px 28px; align-items: center; padding: 36px 28px 28px;
  border-width: 2px; box-shadow: 6px 6px 0 var(--ink);
}
.hero__signup-title { grid-area: title; }
.hero__aside .check-list { grid-area: list; font-size: 14px; }
.hero__aside .counter { grid-area: counter; flex-wrap: wrap; justify-content: center; text-align: center; }
.hero__aside .total { grid-area: total; border-top: 1px solid var(--line); padding-top: 16px; }
.hero__aside .hero__acciones { grid-area: action; display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.hero__aside .btn--primary { padding-inline: 16px; }
.hero__aside .hero__consulta { grid-area: link; align-self: start; line-height: 1.6; }
.check-list svg, .pill svg, .btn svg, .secure svg, .brand > svg { flex-shrink: 0; }
.counter {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px; border-radius: 16px; background: var(--blue-soft);
}
.counter__value { font-family: var(--font-display); font-weight: 800; font-size: 36px; min-width: 32px; text-align: center; }
.total { display: flex; align-items: baseline; justify-content: space-between; }
.total__value { font-family: var(--font-display); font-weight: 800; font-size: 44px; letter-spacing: 1px; color: var(--blue); }

.section { padding-block: 88px; overflow-x: clip; }
.section--soft { background: var(--blue-soft); }
.section-head { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.section-head h2 { font-size: 56px; }
.grid-auto { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid-steps { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.feature {
  display: flex; flex-direction: column; gap: 14px; padding: 24px;
  border-color: var(--line); box-shadow: 0 8px 28px rgba(14, 26, 58, 0.04);
}
.feature__art {
  display: flex; justify-content: center; align-items: center;
  width: 100%; aspect-ratio: 4 / 3; margin-bottom: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 16px;
}
.feature__art img { width: 100%; height: 100%; object-fit: contain; }
.feature__art--wallet { background: linear-gradient(180deg, var(--white), #FAF6FB); border-radius: 12px 12px 0 0; }
.feature__art svg { width: 100%; height: 100%; }
/* Calcomanías de héroes: decoran los encabezados de sección */
.con-sticker { position: relative; }
.sticker {
  position: absolute; z-index: 1; width: 132px; height: auto; pointer-events: none;
  transform: rotate(var(--giro, 0deg));
  filter: drop-shadow(3px 0 0 #FFFFFF) drop-shadow(-3px 0 0 #FFFFFF) drop-shadow(0 3px 0 #FFFFFF) drop-shadow(0 -3px 0 #FFFFFF) drop-shadow(0 8px 10px rgba(46, 26, 61, .22));
}
.sticker--super { --giro: 9deg; top: -36px; right: max(0px, calc(50% - 400px)); }
.sticker--veloz { --giro: -8deg; top: -30px; left: max(0px, calc(50% - 420px)); }
.sticker--guerrera { --giro: 7deg; top: -64px; right: -24px; }
.js-anim .sticker { animation: sticker-flota 5s ease-in-out infinite; }
@keyframes sticker-flota { 0%, 100% { transform: rotate(var(--giro)) translateY(0); } 50% { transform: rotate(var(--giro)) translateY(-6px); } }
@media (max-width: 720px) {
  .sticker { width: 78px; }
  .sticker--super { top: -58px; right: -4px; }
  .sticker--veloz { top: -58px; left: -4px; }
  .sticker--guerrera { top: -78px; right: -4px; }
}
.feature__icon {
  width: 72px; height: 72px; border-radius: 18px; background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center;
}
.feature__icon--yellow { background: var(--yellow-soft); }
.feature h3, .step h3 { margin: 0; font-size: 22px; font-weight: 900; }
.feature p, .step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-muted); }
.step { background: var(--white); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.step h3 { font-size: 20px; }
.step p { font-size: 15px; }
.step__num {
  width: 52px; height: 52px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 28px;
}
.step__num--blue { background: var(--blue); color: var(--white); }

.event { background: var(--blue); color: var(--white); }
.event__inner { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding-block: 80px; }
.event__intro { flex: 1 1 360px; display: flex; flex-direction: column; gap: 12px; }
.event__intro h2 { font-size: 56px; }
.event__intro .eyebrow, .event-fact__label { color: var(--yellow); }
.event__intro p { margin: 0; font-size: 18px; line-height: 1.55; color: #F0E6F3; }
.event__facts { flex: 2 1 520px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.event-fact { border: 2px solid var(--white); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.event-fact__label { font-size: 13px; font-weight: 800; letter-spacing: 1px; }
.event-fact__value { font-size: 20px; font-weight: 900; }

.faq details { border: 2px solid var(--ink); border-radius: 16px; padding: 20px 24px; }
.faq summary { font-weight: 900; font-size: 18px; cursor: pointer; }
.faq p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-muted); }

.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding-block: 32px; font-size: 14px; color: var(--text-muted);
}
.site-footer strong { color: var(--ink); }
.organizan { display: flex; flex-wrap: wrap; gap: 20px 40px; }
.organizan__grupo { display: flex; flex-direction: column; gap: 10px; }
.organizan__label { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--blue); }
.organizan__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.organizan__logos img { width: auto; height: 44px; }
.organizan__logos img + img { padding-left: 28px; border-left: 2px solid var(--line); }

/* ---------- Sección ElevateHub (identidad de elevatehub-web: negro + rojo del logo) ---------- */
.elevate { background: #0A0A0A; color: #F2F2F2; }
.elevate__inner { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.elevate__logo { width: 260px; max-width: 100%; height: auto; }
.elevate__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #9A9A9A; }
.elevate__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E4322B; }
.elevate h2 { margin: 0; font-size: 44px; line-height: 1.05; color: #FFFFFF; }
.elevate h2 span { color: #E4322B; }
.elevate__texto { margin: 0; font-size: 18px; line-height: 1.55; color: #C9C9C9; }
.elevate__texto strong { color: #FFFFFF; }
.elevate__pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.elevate__pilar { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; background: #0A0A0A; }
.elevate__pilar strong { font-size: 14px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: #FFFFFF; }
.elevate__pilar span { font-size: 14px; line-height: 1.5; color: #9A9A9A; }
.elevate__link { align-self: flex-start; padding: 14px 24px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #FFFFFF; font-weight: 800; text-decoration: none; }
.elevate__link:hover { border-color: #E4322B; color: #E4322B; }
@media (max-width: 860px) {
  .elevate__inner { grid-template-columns: minmax(0, 1fr); }
  .elevate h2 { font-size: 34px; }
  .elevate__pilares { grid-template-columns: minmax(0, 1fr); }
}
[hidden] { display: none !important; }
.note { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.note svg { flex: none; margin-top: 2px; }
@media (max-width: 640px) {
  .nav { display: none; }
  .section-head h2, .event__intro h2 { font-size: 42px; }
  .price-burst { width: 92px; height: 92px; font-size: 16px; top: -38px; right: 10px; }
}
/* ---------- Ajustes de ancho y composición móvil ---------- */
main, .site-footer { overflow-wrap: anywhere; }
.stack, .card, .step, .event__intro, .event__facts { min-width: 0; }
.btn { text-align: center; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 4px;
}
@media (max-width: 960px) {
  .hero__inner { gap: 32px 24px; }
  .hero__aside .card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "title counter" "list total" "action link";
  }
  .hero__aside .hero__acciones { margin-top: 0; }
  .hero__aside .hero__consulta { align-self: center; }
  .price-burst { top: -56px; }
}

@media (max-width: 720px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 36px 48px; }
  .hero__title { font-size: clamp(42px, 9vw, 64px); }
  .hero__art { width: 100%; max-width: 560px; justify-self: center; }
  .hero__aside { margin-top: 24px; }
  .hero__aside .card { display: flex; gap: 20px; padding: 28px; align-items: stretch; }
  .hero__aside .counter { justify-content: space-between; text-align: left; }
  .hero__aside .total { border-top: 0; padding-top: 0; }
  .hero__aside .hero__consulta { align-self: stretch; }
}
@media (max-width: 480px) {
  .container { padding-inline: 20px; }
  .site-header__inner { gap: 18px; }
  .header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 10px; }
  .header-actions .btn { font-size: 13px; padding-inline: 8px; }
  .hero__copy { gap: 20px; }
  .hero__copy .pill { font-size: 12px; line-height: 1.5; padding: 8px 12px; }
  .hero__lead { font-size: 17px; }
  .hero__stats .stat { flex: 1; min-width: 0; padding: 12px 8px; }
  .hero__stats .stat__value { font-size: 22px; white-space: nowrap; }
  .organizan__logos { gap: 10px 14px; }
  .organizan__logos img { height: 32px; }
  .organizan__logos img + img { padding-left: 14px; }
  .hero {
    background:
      radial-gradient(circle at 108% -2%, var(--magenta) 0 70px, transparent 71px),
      radial-gradient(circle at 98% 2%, var(--yellow) 0 64px, transparent 65px),
      radial-gradient(circle at 104% 97%, rgba(58, 170, 53, .85) 0 70px, transparent 71px),
      radial-gradient(circle at -6% 99%, rgba(2, 171, 253, .55) 0 64px, transparent 65px),
      linear-gradient(180deg, #EFE6F2 0%, var(--lila) 45%, #FBF9FB 100%);
  }
  .hero__aside .card { padding: 28px 20px 22px; }
  .hero__signup-title { padding-right: 30px; }
  .hero__aside .counter { justify-content: center; text-align: center; }
  .hero__aside .btn--lg { font-size: 16px; }
  .price-burst { top: -38px; }
  .section { padding-block: 56px; }
  .event__inner { padding-block: 48px; }
  .card, .summary { padding: 20px; }
  .card--hero { box-shadow: 5px 5px 0 var(--ink); }
  .feature { padding: 24px; }
  .feature__art { max-height: 240px; }
  .faq details { padding: 18px; }
}
/* =====================================================================
   EFECTO WOW
   ===================================================================== */
:root { --red: #D60B52; --green: #3AAA35; --purple: #951B81; --orange: #F86400; }

/* ---------- Microinteracciones ---------- */
.btn { transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.btn--primary:active, .btn--lg:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.icon-btn { transition: transform .12s ease; }
.icon-btn:active { transform: scale(.9); }
.counter { position: relative; }
.pop-mas {
  position: absolute; right: 12px; top: -6px; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 1px; color: var(--blue);
  animation: pop-mas .9s ease-out forwards;
}
@keyframes pop-mas {
  0% { opacity: 0; transform: translateY(8px) scale(.6); }
  25% { opacity: 1; transform: translateY(-6px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-38px) scale(1); }
}
.hero__title { animation: titulo-pop .9s cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: left bottom; }
@keyframes titulo-pop {
  0% { opacity: 0; transform: scale(.7) rotate(-4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.js-anim [data-reveal] { opacity: 0; transform: translateY(28px) rotate(-1.5deg) scale(.97); transition: opacity .55s ease, transform .55s cubic-bezier(.2, 1.3, .4, 1); }
.js-anim [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Cuenta regresiva ---------- */
.cuenta { background: var(--yellow); border-block: 3px solid var(--ink); }
.cuenta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; padding-block: 22px; }
.cuenta__label { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: 1px; }
.cuenta__boxes { display: flex; gap: 10px; }
.cuenta__box {
  min-width: 76px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 14px; background: var(--white);
  box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column; align-items: center;
}
.cuenta__num { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.cuenta__unit { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--text-muted); }

/* ---------- La ruta del héroe ---------- */
.ruta { overflow: hidden; }
.ruta__mapa { position: relative; border: 3px solid var(--ink); border-radius: 24px; padding: 24px 16px 8px; background-color: var(--white); background-image: radial-gradient(var(--dots) 1.6px, transparent 1.6px); background-size: 18px 18px; }
.ruta__mapa svg { display: block; width: 100%; height: auto; overflow: visible; }
.ruta__hito circle { transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), fill .2s; transform-box: fill-box; transform-origin: center; }
.ruta__hito.is-hit circle { fill: var(--yellow); transform: scale(1.35); }
.ruta__hito text { font-family: var(--font-body); font-weight: 900; font-size: 22px; fill: var(--ink); }
.ruta__metros { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; }
.ruta__metros strong { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.ruta__metros span { font-weight: 800; font-size: 18px; color: var(--text-muted); }
.ruta__chips { display: none; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ruta__chips span { padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--white); }
.ruta__chips span.is-hit { background: var(--yellow); }
@media (max-width: 640px) {
  .ruta__hito text { display: none; }
  .ruta__chips { display: flex; }
  .ruta__metros strong { font-size: 56px; }
  .cuenta__box { min-width: 64px; }
  .cuenta__num { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-anim [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Producción: precio en dos monedas, estado de la inscripción, accesibilidad ---------- */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--white); font-weight: 800; }
.skip-link:focus { top: 8px; color: var(--white); }
.total { flex-wrap: wrap; gap: 4px 12px; }
.total__usd { width: 100%; text-align: right; font-weight: 800; font-size: 15px; color: var(--ink); }
.total__nota { width: 100%; margin: 0; text-align: right; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.precio-unidad { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.cupos { align-self: center; padding: 4px 12px; border-radius: 999px; background: var(--yellow-soft); font-size: 14px; font-weight: 800; }
.estado-cerrado { margin: 0; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--yellow-soft); font-weight: 900; text-align: center; }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; pointer-events: none; }
.faq a { font-weight: 800; }
@media (max-width: 720px) {
  .total__usd, .total__nota { text-align: left; }
}