/* #reto — momento firma. El lienzo ocupa toda la sección para que la línea
   de oro salga exactamente por el borde inferior, al centro. */
#reto { padding: 0; overflow: hidden; overflow: clip; background: var(--marfil); }

#reto .reto__lienzo { position: relative; pointer-events: none; }
#reto .reto__svg { display: block; width: 100%; height: 100%; overflow: hidden; }

#reto .reto__wrap { position: relative; z-index: 2; }
#reto .reto__lead { max-width: 25em; margin-top: clamp(16px, 2.4vh, 28px); }

#reto .reto__dolores {
  margin: clamp(20px, 3.4vh, 40px) 0 0; padding: 0;
  list-style: none;
  max-width: 460px;
}
#reto .reto__dolor {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: clamp(44px, 6.2vh, 56px);
  padding-block: 8px;
  font-size: var(--t-desc, 1.0625rem); line-height: var(--lh-desc, 1.47);
  letter-spacing: -.008em;
  color: var(--tinta);
}
#reto .reto__flecha { flex: none; width: var(--ico-s); height: var(--ico-s); color: var(--oro); }
#reto .reto__regla {
  position: absolute; inset: auto 0 0;
  height: 1px; background: var(--hilo);
  transform-origin: 0 50%;
}

/* Escritorio: una pantalla exacta, fija durante el pin */
@media (min-width: 900px) {
  #reto { height: 100vh; height: 100svh; min-height: 620px; }
  #reto .reto__lienzo { position: absolute; inset: 0; }
  #reto .reto__wrap { height: 100%; }
  #reto .reto__texto {
    display: flex; flex-direction: column; justify-content: center;
    height: 100%; padding-top: var(--nav-h);
  }
  #reto .titular { font-size: min(var(--t-h2), 8.6vh); }
}

/* Móvil: texto arriba y lienzo a sangre, sin pin */
@media (max-width: 899px) {
  #reto { display: flex; flex-direction: column; padding-top: var(--seccion); }
  #reto .reto__wrap { order: 1; }
  #reto .reto__lienzo {
    order: 2; width: 100%; height: clamp(480px, 128vw, 520px); margin-top: 8px;
    -webkit-mask-image: linear-gradient(#000 92%, transparent);
    mask-image: linear-gradient(#000 92%, transparent);
  }
  #reto .reto__lienzo.es-linea { -webkit-mask-image: none; mask-image: none; }
}

/* Escritorio con poca altura: sin pin, la sección crece con su texto */
@media (min-width: 900px) and (max-height: 619px) {
  #reto { height: auto; min-height: 0; }
  #reto .reto__wrap { height: auto; }
  #reto .reto__texto { height: auto; padding-block: var(--seccion); }
}

/* Con movimiento reducido sólo queda la línea: no hace falta tanto lienzo */
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  #reto .reto__lienzo { height: 360px; }
}