/* Hero */
.rd-hero { position: relative; height: 100vh; overflow: hidden; }
.rd-hero__media { position: absolute; inset: -10% 0; }
.rd-hero__media video, .rd-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.rd-hero__titulo {
  position: absolute; left: 50%; top: 55%; transform: translateX(-50%);
  width: min(1026px, 90vw); margin: 0; color: var(--rd-blanco);
  font-family: var(--rd-font-display); font-weight: 400; font-size: clamp(52px, 7.3vw, 110px); line-height: .93;
}
/* Qué es Weilo */
.rd-que { display: grid; grid-template-columns: 746fr 766fr; background: var(--rd-terracota); color: var(--rd-blanco); }
.rd-que__foto { margin: 0; min-height: 100vh; position: relative; overflow: hidden; }
/* cover absoluto: la foto llena su columna y no puede desbordar la seccion
 * (el pin GSAP anterior la empujaba sobre el footer al des-pinnear) */
.rd-que__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-que__texto { padding: 94px clamp(24px, 5vw, 88px); display: flex; flex-direction: column; }
.rd-que__titulo { font-family: var(--rd-font-display); font-weight: 400; font-size: clamp(32px, 3.3vw, 50px); line-height: 1.07; margin: 0 0 auto; }
.rd-que__texto .rd-texto { margin-top: 4rem; }
.rd-que__flecha { margin-top: 3rem; }

/* Nav de secciones superpuesto al final de la caja "Qué es Weilo" (mockup
 * de Jose 2026-08-05): la píldora pisa foto+terracota, no va debajo. El
 * margin-top:150px global es para páginas donde la píldora es el primer
 * elemento (libra el nav fijo); aquí se anula y se solapa. */
.rd-page--home .rd-secciones { margin-top: -160px; margin-bottom: 4rem; position: relative; z-index: 10; }
/* que el texto/flecha no queden bajo la píldora */
.rd-que__texto { padding-bottom: 200px; }