/*
 * Rednodo, home latam.rednodo.com
 * Sección "Del primer contacto a los ingresos" (.rnf). Todo está prefijado con .rnf y no toca estilos globales.
 * Ver rednodo-home-handoff/HANDOFF.md.
 */
.rnf{
  --rnf-blue:#007CBF; --rnf-sky:#20A8F2; --rnf-deep:#0E3AA9; --rnf-tint:#D9EAFF;
  --rnf-ink:#1A1A1A; --rnf-bg:#FFFFFF;
  --rnf-length:440vh; --rnf-offset:0px;
  position:relative; background:var(--rnf-bg); color:var(--rnf-ink);
}
.rnf *,.rnf *::before,.rnf *::after{box-sizing:border-box}

/* Base sin JS: lista simple y legible.
   opacity/transform: anulan el estado inicial del reveal global (.main-content section h2, h3, p) */
.rnf .rnf-stage{position:relative;padding:96px 24px}
.rnf .rnf-canvas{display:none}
.rnf .rnf-title{margin:0 auto 56px;max-width:13em;text-align:center;font-family:"Poppins SemiBold","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:clamp(32px,5.4vw,76px);line-height:1.06;letter-spacing:-.025em;color:var(--rnf-ink);opacity:1;transform:none;text-wrap:balance}
.rnf .rnf-title span{color:inherit;font:inherit;letter-spacing:inherit}
/* La i de "primer": su punto es un elemento propio, para que el punto azul del hero pueda posarse ahí */
.rnf .rnf-iwrap{position:relative;display:inline-block}
.rnf .rnf-i{display:inline-block;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent .2912em,#000 .2912em);mask-image:linear-gradient(to bottom,transparent 0,transparent .2912em,#000 .2912em)}
.rnf .rnf-title .rnf-tittle{position:absolute;left:.14em;top:.1788em;width:.1625em;height:.1625em;margin:-.08125em 0 0 -.08125em;border-radius:50%;background:currentColor;transition:opacity .2s}
.rnf.has-dot .rnf-title .rnf-tittle{opacity:0}
.rnf .rnf-steps{list-style:none;margin:0 auto;padding:0;max-width:640px;display:grid;gap:48px}
.rnf .rnf-step{margin:0;padding:0}
.rnf .rnf-word{margin:0 0 10px;font-family:"Poppins SemiBold","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:clamp(28px,2.9vw,44px);line-height:1.05;letter-spacing:-.02em;color:var(--rnf-ink);opacity:1;transform:none}
.rnf .rnf-desc{margin:0;max-width:30ch;font-family:"Open Sans Regular","Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:16px;line-height:1.5;color:var(--rnf-ink);opacity:1;transform:none}

/* Descripciones al tamaño de los p del sitio (16px; 15px desde 1380px) */
@media (max-width:1380px){.rnf .rnf-desc{font-size:15px}}

/* Con JS: escena fija ligada al scroll */
.rnf.is-ready .rnf-track{position:relative;height:var(--rnf-length)}
.rnf.is-ready .rnf-stage{position:sticky;top:var(--rnf-offset);height:calc(100vh - var(--rnf-offset));height:calc(100svh - var(--rnf-offset));padding:0;overflow:hidden}
.rnf.is-ready .rnf-canvas{display:block;position:absolute;top:0;left:0;width:100%;height:100%}
.rnf.is-ready .rnf-head{position:absolute;top:0;left:0;right:0;padding:0 20px;transform-origin:50% 50%;will-change:transform;pointer-events:none}
.rnf.is-ready .rnf-title{margin:0 auto}
.rnf.is-ready .rnf-steps{position:absolute;top:0;left:0;right:0;bottom:0;max-width:none;display:block;pointer-events:none}
.rnf.is-ready .rnf-step{position:absolute;top:0;left:0;padding:0}
.rnf.is-ready .rnf-word{margin:0 0 10px;font-size:clamp(28px,min(2.5vw,4.4vh),40px);opacity:0;will-change:transform,opacity}
.rnf.is-ready .rnf-desc{max-width:34ch;opacity:0;will-change:transform,opacity}
/* Título: se acomoda arriba a la izquierda, sobre la columna de texto */
.rnf.is-ready.is-desk .rnf-head{right:auto;padding:0;transform-origin:0 0}
.rnf.is-ready.is-desk .rnf-title{margin:0;text-align:left}

/* Compacto (mobile, tablet o contenedor angosto): un paso visible por vez */
.rnf.is-compact{--rnf-length:380vh}
.rnf.is-ready.is-compact .rnf-step{display:block;left:0;right:0;width:auto;padding:0 28px;text-align:center;transform:none;opacity:0;will-change:transform,opacity}
.rnf.is-ready.is-compact .rnf-word{margin:0 0 10px;text-align:center;opacity:1;font-size:32px}
.rnf.is-ready.is-compact .rnf-desc{margin:0 auto;max-width:30ch;opacity:1;font-size:15px}
/* Compacto apaisado: embudo a la izquierda, texto a la derecha */
.rnf.is-ready.is-split .rnf-step{right:32px;padding:0;text-align:left}
.rnf.is-ready.is-split .rnf-word{text-align:left}
.rnf.is-ready.is-split .rnf-desc{margin:0}

/* Movimiento reducido: composición final, sin recorrido */
.rnf.is-ready.is-static .rnf-track{height:auto}
.rnf.is-ready.is-static .rnf-stage{position:relative;top:0;height:100vh;height:100svh;min-height:640px}
.rnf.is-ready.is-static.is-compact .rnf-stage{height:auto;min-height:0;padding:0 0 72px}
.rnf.is-ready.is-static.is-compact .rnf-canvas{position:relative;height:78vh;height:78svh}
.rnf.is-ready.is-static.is-compact .rnf-steps{position:relative;display:grid;gap:36px;padding:0}
.rnf.is-ready.is-static.is-compact .rnf-step{position:static;opacity:1;transform:none}