.rd-page--menus { background: var(--rd-crema); }
.rd-m-bloque { padding: 18vh 24px; text-align: center; }
body.weilo-rd .rd-m-titulo { font-family: var(--rd-font-display); font-weight: 400; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.15; max-width: 820px; margin: 0 auto 2.5rem; color: var(--rd-negro); }
.rd-m-bloque .rd-texto { margin-inline: auto; }

.rd-como { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; width: min(1450px, calc(100vw - 62px)); margin: 5rem auto 0; }
/* Cards con la foto a sangre completa y texto superpuesto sobre un degradado
 * inferior (mockup Figma 490x645, Jose 2026-08-05). */
.rd-como__card { position: relative; aspect-ratio: 490 / 645; overflow: hidden; background: var(--rd-negro); color: var(--rd-blanco); text-align: center; }
.rd-como__media { position: absolute; inset: 0; }
.rd-como__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-como__card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.78)); pointer-events: none; }
.rd-como__texto { position: absolute; left: 0; right: 0; bottom: 78px; z-index: 2; font-size: 14px; line-height: 1.5; padding: 0 1.6rem; margin: 0; }
.rd-como__titulo { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2; margin: 0; font-family: var(--rd-font-text); font-weight: 600; font-size: 17px; letter-spacing: 3px; text-transform: uppercase; }
/* Compra en dos pantallas (mockup Jose 2026-08-05): el fondo va PEGADO
 * (sticky 100vh) mientras las dos pantallas de contenido pasan por encima —
 * el efecto parallax de fondo fijo. OJO: requiere overflow-x CLIP (no hidden)
 * en los ancestros, ya garantizado en tokens.css. */
.rd-m-compra { position: relative; }
.rd-m-compra__fondo { position: sticky; top: 0; height: 100vh; z-index: 0; }
.rd-m-compra__fondo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-m-compra__fondo .rd-fullbleed__overlay { z-index: 1; }
.rd-m-compra__pantalla { position: relative; z-index: 2; height: 100vh; display: flex; align-items: center; padding: 0 clamp(24px, 7vw, 110px); }
.rd-m-compra__pantalla--intro { margin-top: -100vh; justify-content: center; text-align: center; color: var(--rd-blanco); }
.rd-m-compra__pantalla--card { justify-content: flex-end; padding-top: 6vh; padding-bottom: 6vh; height: auto; min-height: 100vh; }
.rd-compra { position: relative; z-index: 2; background: var(--rd-crema); color: var(--rd-negro); width: min(620px, 92vw); padding: 3.4rem 3rem 2.8rem; display: flex; flex-direction: column; gap: 1.3rem; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.rd-compra__titulo { font-family: var(--rd-font-display); font-size: clamp(34px, 3.6vw, 54px); line-height: 1.05; margin: 0; }
.rd-compra__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; } /* margin 0: Astra main.min.css mete 0 0 1.5em 3em a las ul */
.rd-compra__lista li { display: flex; align-items: center; gap: .6rem; }
.rd-compra__precio { font-family: var(--rd-font-display); font-size: 34px; }
.rd-compra__cta { background: var(--rd-gris); color: var(--rd-cream); text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; padding: 18px 0; text-align: center; font-weight: 500; }
.rd-compra__nota { font-size: 13px; opacity: .75; }

/* Caja parallax VARIEDADES (mockup Jose 2026-08-05): texto centrado sobre la
 * foto, aparece con fade al entrar en viewport. */
.rd-m-heroe { position: relative; height: 110vh; overflow: hidden; color: var(--rd-blanco); }
.rd-m-heroe__media { position: absolute; inset: -12% 0; }
.rd-m-heroe__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-m-heroe .rd-fullbleed__overlay { z-index: 1; }
.rd-m-heroe__contenido {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
}
.rd-m-heroe__titulo { font-family: var(--rd-font-display); font-weight: 400; font-size: clamp(34px, 4.5vw, 58px); line-height: 1.07; margin: 1.2rem 0 0; max-width: 900px; }
.rd-m-heroe__texto { margin-top: 2rem; max-width: 700px; font-family: var(--rd-font-text); font-weight: 300; font-size: 19px; line-height: 1.6; }
@media (max-width: 767px) {
  .rd-m-heroe { height: 95vh; }
  .rd-m-heroe__texto { font-size: 16px; }
}
.rd-compra a.rd-compra__cta:hover { color: var(--rd-cream); }