/*
 * Rednodo, home latam.rednodo.com
 * Sección "Ocho tentáculos" con el pulpo y las ocho unidades (.rno). Todo está prefijado con .rno y no toca estilos globales.
 * Ver rednodo-home-handoff/HANDOFF.md.
 */
.rno{
  --rno-blue:#007CBF; --rno-sky:#20A8F2; --rno-deep:#0E3AA9; --rno-tint:#D9EAFF; --rno-ink:#1A1A1A; --rno-bg:#FFFFFF;
  --rno-length:960vh; --rno-offset:0px;
  position:relative; background:var(--rno-bg); color:var(--rno-ink);
}
.rno *,.rno *::before,.rno *::after{box-sizing:border-box}
.rno .rno-title,.rno .rno-animal,.rno .rno-name,.rno .rno-lead,.rno .rno-story,.rno .rno-link,.rno .rno-close,.rno .rno-cta{text-transform:none;font-style:normal}
/* El sitio oculta h2, h3 y p de .main-content section hasta su reveal; acá la opacidad la maneja el script */
.rno [data-no-reveal]{opacity:1;transform:none;transition:none}

/* Base sin JS y con movimiento reducido: lista estática */
/* La escena toma el ancho de .container del sitio (80%, máx. 1200px); el script mide la escena, así que todo queda dentro */
.rno .rno-stage{position:relative;width:80%;max-width:1200px;margin:0 auto;padding:120px 0 96px}
@media (max-width:1380px){.rno .rno-stage{padding-top:70px}}
.rno .rno-head{max-width:1100px;margin:0 auto 72px}
.rno .rno-title{margin:0 auto;max-width:15em;text-align:center;font-family:"Poppins SemiBold","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:clamp(30px,4.6vw,68px);line-height:1.08;letter-spacing:-.025em;color:var(--rno-ink);text-wrap:balance}
.rno .rno-title span{font:inherit;letter-spacing:inherit;color:inherit}
.rno .rno-title .rno-hl{color:var(--rno-blue)}
.rno .rno-octo{max-width:560px;margin:0 auto 56px}
.rno .rno-octo video{display:block;width:100%;height:auto;max-width:none;border:0;background:var(--rno-bg);pointer-events:none}
/* Sin borde: según el navegador y la placa de video, el blanco del video no queda exactamente igual al de la página
   y se nota el rectángulo. Los bordes se funden con una máscara dentro del margen de 19px que el video deja alrededor del pulpo */
.rno .rno-octo video{-webkit-mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 4.5%,#000 95.5%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 4.5%,#000 95.5%,transparent);mask-composite:intersect}
.rno .rno-units{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;gap:72px}
.rno .rno-unit{margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.rno .rno-fig{margin:0}
.rno .rno-fig img{display:block;width:100%;height:auto;max-height:420px;border:0;object-fit:contain}
.rno .rno-animal{margin:0 0 8px;font-family:"Poppins Medium","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:18px;line-height:1.3;color:var(--rno-blue)}
.rno .rno-name{margin:0;font-family:"Poppins SemiBold";font-weight:600;font-size:35px;line-height:1.2;color:var(--rno-ink)}
.rno .rno-name a{font:inherit;letter-spacing:inherit;color:inherit;text-decoration:none}
.rno .rno-lead{margin-top: 15px;font-family:"Poppins Regular";font-weight:500;font-size:20px;line-height:1.5;color:var(--rno-ink)}
.rno .rno-story{margin-top: 15px;font-family:"Poppins Regular";font-weight:400;font-size:16px;line-height:1.5;color:var(--rno-ink)}
.rno .rno-link{display:inline-block;margin-top:20px;font-family:"Poppins Medium","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:16px;line-height:1.4;color:var(--rno-blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.rno .rno-outro{margin:88px auto 0;text-align:center}
.rno .rno-close{margin:0 auto;max-width:14em;font-family:"Poppins SemiBold","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:clamp(24px,2.5vw,38px);line-height:1.12;letter-spacing:-.02em;color:var(--rno-ink);text-wrap:balance}
.rno .rno-cta{display:inline-block;margin-top:28px;padding:14px 28px;border-radius:999px;background:var(--rno-blue);color:#FFFFFF;font-family:"Poppins Medium","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:16px;line-height:1.2;text-decoration:none}
.rno .rno-name a:hover,.rno .rno-link:hover{text-decoration-thickness:2px}
.rno .rno-cta:hover{background:#0068A3}
.rno a:focus-visible,.rno button:focus-visible{outline:2px solid var(--rno-blue);outline-offset:4px}

@media (max-width: 1380px) {
	.rno .rno-name { font-size: 28px; }

	.rno .rno-lead { font-size: 16px; }

	.rno .rno-story { font-size: 15px; }

	.rno .rno-link { font-size: 15px; }
}

@media (max-width: 768px) {
    .rno .rno-unit { grid-template-columns: 1fr; gap: 20px; }
}

/* Con JS: escena fija ligada al scroll */
.rno.is-ready .rno-track{position:relative;height:var(--rno-length)}
.rno.is-ready .rno-stage{position:sticky;top:var(--rno-offset);height:calc(100vh - var(--rno-offset));height:calc(100svh - var(--rno-offset));padding:0;overflow:hidden}
.rno.is-ready .rno-octo{position:absolute;margin:0;max-width:none;opacity:0;will-change:transform,opacity}
.rno.is-ready .rno-head{position:absolute;top:0;left:0;right:0;max-width:none;margin:0;padding:0;will-change:transform,opacity;pointer-events:none}
.rno.is-ready .rno-title{max-width:22em;font-size:clamp(26px,3.1vw,46px);line-height:1.12}
.rno.is-ready .rno-units{position:absolute;top:0;left:0;right:0;bottom:0;max-width:none;display:block}
.rno.is-ready .rno-unit{position:absolute;top:0;left:0;right:0;bottom:0;display:block;pointer-events:none}
.rno.is-ready .rno-fig{position:absolute;opacity:0;will-change:transform,opacity}
.rno.is-ready .rno-fig img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:50% 100%}
.rno.is-ready:not(.is-compact) .rno-fig img{object-position:50% 50%}
.rno.is-ready .rno-copy{position:absolute}
.rno.is-ready .rno-copy > *{opacity:0;will-change:transform,opacity}
.rno.is-ready .rno-outro{position:absolute;top:0;left:0;right:0;margin:0;padding:0;opacity:0;pointer-events:none}
.rno.is-ready .rno-ring{display:block;position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.rno.is-ready .rno-ring a{position:absolute;display:block;text-align:center;text-decoration:none;color:var(--rno-ink);opacity:0;will-change:transform,opacity}
.rno.is-ready .rno-ring img{display:block;max-width:none;border:0;object-fit:contain;object-position:50% 100%}
.rno.is-ready .rno-ring span{display:block;margin-top:8px;font-family:"Poppins Medium","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:14px;line-height:1.25}
.rno.is-ready .rno-dots{display:flex;position:absolute;left:50%;bottom:24px;transform:translateX(-50%);gap:4px;opacity:0}
.rno.is-ready .rno-dots button{appearance:none;-webkit-appearance:none;margin:0;border:0;background:none;padding:14px 4px;cursor:pointer}
.rno.is-ready .rno-dots i{display:block;width:28px;height:3px;border-radius:2px;background:var(--rno-tint)}

/* Compacto: hasta 992px de ventana, como el resto del sitio */
.rno.is-compact{--rno-length:900vh}
/* Compacto: la escena va a ancho completo para que la ronda entre alrededor del pulpo; el script deja los textos en el 80% */
.rno.is-ready.is-compact .rno-stage{width:100%}
.rno.is-ready.is-compact .rno-head,.rno.is-ready.is-compact .rno-outro{padding:0 10%}
.rno.is-ready.is-compact .rno-copy{text-align:center}
.rno.is-ready.is-compact .rno-lead,.rno.is-ready.is-compact .rno-story{margin-left:auto;margin-right:auto}
.rno.is-ready.is-compact .rno-animal{font-size:16px;margin-bottom:6px}
.rno.is-ready.is-compact .rno-name{font-size:30px}
.rno.is-ready.is-compact .rno-lead{margin-top:12px;font-size:16px}
.rno.is-ready.is-compact .rno-story{margin-top:10px;font-size:15px;line-height:1.55}
.rno.is-ready.is-compact .rno-link{margin-top:12px;font-size:15px}
.rno.is-ready.is-compact .rno-ring span{margin-top:6px;padding:0 2px;font-size:11.5px;hyphens:auto;-webkit-hyphens:auto}
.rno.is-ready.is-compact .rno-close{font-size:26px}
.rno.is-ready.is-compact .rno-cta{margin-top:20px;padding:12px 20px;font-size:14px;white-space:nowrap}
/* Pantallas bajas: se oculta el párrafo del animal (sigue en la página de cada unidad) */
.rno.is-ready.is-tight .rno-story{display:none}