/* =====================================================================
   RDI Landings 0.2.0 — LA CARA DE MALE
   Derivado de nuestro src/componentes/campana.css (el molde de las 15 landings de campaña, sacado de la landing que
   Male diseñó a mano) y de preventa.css. TODO cuelga de .rl--male: el <main> de una landing que usa bloques de Male
   (en el editor, cada bloque de Male trae su propio .rl--male). Las landings viejas no se enteran.

   Colores y letras: var(--token, respaldo) de rdi-shell/assets/rdi-marca.css. Si esa hoja no carga, quedan los
   respaldos, que son los mismos valores.
   Tamaños en px (no rem): el sitio tiene la letra base en 17 px (Astra) y en rem todo saldría un 6 % más grande.

   Diferencias con campana.css, a propósito (hallazgos de la comparación del 15-oct):
   · Botones grandes en el rosa de Male #F25C92 con el texto a 19 px en negrita (blanco sobre #F25C92 pide >= 19 px
     negrita), también los de comprar (nada de lila en botones). Lo chico en rosa (rótulos, chapitas, números) va en #E20857.
   · El comienzo con el degradé original de Male (rosa, verde agua y lila).
   · La barra fija del celular vive ADENTRO de .rl--male (en el molde quedaba afuera y salía como enlace subrayado).
   · Con más de tres tarjetas, el carrusel no aplasta la tarjeta de la suscripción en el celular y las flechas no
     tapan texto.
   · El borde de color de cada versión va por versión (1.º verde agua, 2.º amarillo, 3.º lila), no por lugar en la
     fila: con la suscripción primera, Canva vuelve a ser verde agua como en el diseño de Male.
   · Fotos sin recortar (object-fit: contain).
   ===================================================================== */

.rl--male {
  --c2-texto:        #5A4E66;   /* el gris violáceo de Male */
  --c2-texto-suave:  #8A7D96;
  --c2-papel:        #FFFFFF;
  --c2-papel-tibio:  #FFF7FB;
  --c2-sombra:       0 4px 18px rgba(145, 115, 165, .12);
  --c2-radio:        var(--radio-bloque, 20px);
  --c2-titulo:       var(--compra, #9173A5);        /* lila de títulos (manual de marca) */
  --c2-rosa:         var(--rincon-pink, #F25C92);    /* el rosa de Male: botones grandes */
  --c2-rosa-apretado: var(--rincon-fuchsia, #E61F67);
  --c2-rosa-chico:   var(--texto-rosa, #E20857);     /* lo chico en rosa (blanco encima 4,77) */
  --c2-lila-boton:   var(--compra-boton, #7B5F8E);   /* comprar suelto (blanco encima 5,43) */
  --c2-lila-activo:  var(--compra-boton-activo, #745788);
  --c2-amarillo-base: var(--marca-amarillo-base, #FAE9B5);
  --c2-amarillo:     var(--marca-amarillo-focal, #F2C230);
  --c2-verde-base:   var(--marca-verde-base, #C8FFFD);
  --c2-verde:        var(--marca-verde-focal, #87E6E2);
  --c2-lila-base:    var(--compra-borde, #DCC3EB);
  --c2-rosa-suave:   var(--rincon-pink-soft, #FAC4D8);
  --c2-rosa-claro:   var(--rincon-pink-light, #F79DBE);
  --c2-letra:        var(--font-text, 'Natom Pro', 'natom-pro', 'Baloo 2', system-ui, sans-serif);
  --c2-cartel:       var(--font-display, 'Benny Black', 'Baloo 2', system-ui, sans-serif);
  --c2-precio:       var(--font-precio, 'Natom Pro', 'natom-pro', 'Baloo 2', system-ui, sans-serif);
  /* En el lienzo de las landings no hay barra de abajo del shell: la barra fija se apoya en el borde. Si algún día
     la landing lleva el shell, toma su alto. */
  --rlm-abajo: 0px;

  font-family: var(--c2-letra);
  color: var(--c2-texto);
  background: var(--c2-papel);
  font-size: 16px;
  line-height: 1.55;
}
body.rdi-shell-activo .rl--male { --rlm-abajo: var(--rdi-shell-barra-alto, 0px); }
.rl--male *, .rl--male *::before, .rl--male *::after { box-sizing: border-box; }
.rl--male img { max-width: 100%; height: auto; display: block; }
.rl--male .rlm, .rl--male .rlm-piel { margin: 0; }

.rl--male .rlm h1, .rl--male .rlm h2, .rl--male .rlm h3, .rl--male .rlm-piel h2 {
  font-family: var(--c2-cartel);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 .45em;
  color: var(--c2-titulo);   /* nunca en negro */
}
.rl--male h1 em, .rl--male h2 em, .rl--male h3 em { font-style: normal; color: var(--c2-rosa); }
.rl--male .rlm p { margin: 0 0 1em; }
.rl--male .rlm a { text-decoration-thickness: 1px; }

.rl--male .camp2-wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.rl--male .camp2-sec { padding: 40px 0; background: var(--c2-papel); }
.rl--male .camp2-sec--tinte, .rl--male .rlm-tinte { background: var(--c2-papel-tibio); }
.rl--male .camp2-centro { text-align: center; }

.rl--male .camp2-kicker {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 0 .6em;
  font-family: var(--c2-letra); font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--c2-rosa-chico);
}
.rl--male .camp2-kicker--izq { justify-content: flex-start; }
.rl--male .camp2-h2 { font-size: clamp(24px, 5vw, 35px); }
.rl--male .camp2-bajada { font-size: 16px; max-width: 60ch; margin-bottom: 0; }
.rl--male .camp2-centro .camp2-bajada { margin-left: auto; margin-right: auto; }
.rl--male .rdi-ico { display: inline-block; flex: none; vertical-align: middle; }

/* ------------------------------------------------------------------ botones
   Macizos, en pastilla, texto blanco. El !important del color es a propósito (molde de Male): una regla de enlaces
   del tema pisaba el blanco y el texto quedaba rosa sobre rosa. NO SACARLO. */
.rl--male .camp2-cta,
.rl--male a.camp2-cta,
.rl--male a.camp2-cta:visited,
.rl--male a.camp2-cta:hover,
.rl--male a.camp2-cta:focus { color: #FFFFFF !important; text-decoration: none !important; }
.rl--male .camp2-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 54px; padding: 13px 28px; margin: 0;
  border: 0; border-radius: var(--radio-pastilla, 999px);
  font-family: var(--c2-letra); font-weight: 800; font-size: 19px; line-height: 1.2; text-align: center; text-transform: none; letter-spacing: 0;
  background: var(--c2-rosa) !important;           /* 19 px negrita: blanco sobre #F25C92 se lee */
  box-shadow: 0 6px 16px rgba(242, 92, 146, .30);
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.rl--male .camp2-cta:hover { background: var(--c2-rosa-apretado) !important; transform: translateY(-2px); }
.rl--male .camp2-cta:active { transform: translateY(1px); }
.rl--male .camp2-cta:focus-visible { outline: 3px solid var(--c2-titulo); outline-offset: 3px; }
.rl--male .camp2-cta--ancho { width: 100%; }
/* comprar suelto: el MISMO rosa macizo (Nahuel, 16-oct-2026: Male no quiere botones violetas; es la combinación que usa
   Feli en el sitio para comprar). Se distingue de «Suscribirme» por el texto y porque la tarjeta de la suscripción va
   primera, con su insignia y su borde. La clase queda para medir y por si algún día cambia. */
.rl--male .camp2-cta--compra { background: var(--c2-rosa) !important; box-shadow: 0 6px 16px rgba(242, 92, 146, .30); }
.rl--male .camp2-cta--compra:hover { background: var(--c2-rosa-apretado) !important; }

.rl--male a.camp2-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; font-size: 16px; color: var(--c2-lila-boton);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ comienzo
   El DEGRADÉ ORIGINAL DE MALE, con los valores exactos de su souvenirsdivertidos.html (.rdi-souv-hero): rosa arriba a
   la izquierda, verde agua arriba a la derecha y lila abajo (Nahuel, 16-oct-2026: «respetar el diseño de Male al
   máximo»; reemplaza la regla anterior del comienzo en rosa Rincón). */
.rl--male .camp2-hero {
  background:
    radial-gradient(700px 380px at 8% -10%, var(--rincon-pink-soft, #FAC4D8) 0%, rgba(250, 196, 216, 0) 58%),
    radial-gradient(620px 360px at 96% 8%, var(--marca-verde-base, #C8FFFD) 0%, rgba(200, 255, 253, 0) 55%),
    linear-gradient(180deg, #FFFFFF 0%, var(--marca-lila-base, #DCC3EB) 100%);
  padding: 34px 0 38px;
}
.rl--male .camp2-hero__grid { display: grid; gap: 22px; align-items: center; }
.rl--male .camp2-hero h1 { font-size: clamp(29px, 7vw, 46px); margin-bottom: .35em; overflow-wrap: anywhere; }
.rl--male .camp2-hero__sub { font-size: clamp(16px, 3.2vw, 18px); max-width: 42ch; margin-bottom: 1.1em; text-wrap: pretty; }
.rl--male .camp2-hero__acciones { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.rl--male .camp2-hero__foto {
  margin: 0 auto; max-width: 400px; width: 100%;
  background: #FFFFFF; padding: 9px; border-radius: var(--c2-radio); box-shadow: var(--c2-sombra);
}
.rl--male .camp2-hero__foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--radio-tarjeta, 16px); background: #FFFFFF; }
.rl--male .camp2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.rl--male .camp2-chips li {
  margin: 0; padding: 7px 14px; border-radius: var(--radio-pastilla, 999px);
  background: #FFFFFF; color: var(--c2-texto); font-size: 13px; font-weight: 700; line-height: 1.3;
  box-shadow: 0 2px 8px rgba(145, 115, 165, .12);
}
.rl--male .camp2-chips li.camp2-chip--susc { background: var(--c2-rosa-chico); color: #FFFFFF; }   /* chico: #E20857 */
.rl--male .camp2-chips li.camp2-chip--susc a, .rl--male .camp2-chips li.camp2-chip--susc a:visited, .rl--male .camp2-chips li.camp2-chip--susc a:hover {
  color: #FFFFFF !important; text-decoration: none !important; display: inline-block; }
.rl--male .camp2-chips li.camp2-chip--susc:hover { background: var(--texto-rosa-fondo, #BE1856); }
.rl--male .camp2-chips li.camp2-chip--susc a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; border-radius: 999px; }
.rl--male .camp2-chips li.camp2-chip--estrellas { background: var(--c2-amarillo-base); color: #7A5F0D; }

/* la preventa con fecha: se apaga sola (la saca el servidor y la saca el JS el día que llega) */
.rl--male .rlm-preventa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 14px 0 18px; padding: 14px 18px;
  border-radius: var(--radio-bloque, 20px); background: #FFFFFF; border: 1.5px solid #FFFFFF;
  box-shadow: 0 6px 18px rgba(190, 24, 86, .14);
  color: var(--rincon-dark, #3A3A3A); font-size: 15px; line-height: 1.5;
}
.rl--male .rlm-preventa__eti {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--radio-pastilla, 999px);
  background: var(--c2-rosa-chico); color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.rl--male .rlm-preventa__texto { flex: 1 1 240px; }
.rl--male .rlm-preventa__texto strong { color: var(--c2-rosa-chico); }
.rl--male .rlm-preventa__cuenta:empty { display: none; }
.rl--male .rlm-preventa__cuenta {
  display: inline-flex; padding: 5px 12px; border-radius: var(--radio-pastilla, 999px);
  background: var(--compra-bg, #FAF6FD); border: 1px solid var(--c2-lila-base); color: var(--c2-lila-boton);
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ------------------------------------------------------------------ carruseles (opciones) */
.rl--male .camp2-carru { position: relative; margin-top: 22px; }
.rl--male .camp2-carrusel-hint { margin: 2px 0 0; font-size: 13px; color: var(--c2-texto-suave); text-align: center; }
.rl--male button.camp2-carru__btn {
  display: none; position: absolute; top: 40%; z-index: 2;
  width: 46px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--c2-rosa); color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(242, 92, 146, .35);
  line-height: 1; cursor: pointer;
}
.rl--male button.camp2-carru__btn:hover, .rl--male button.camp2-carru__btn:focus { background: var(--c2-rosa-apretado); color: #FFFFFF !important; }
.rl--male button.camp2-carru__btn[disabled] { opacity: .35; cursor: default; }
.rl--male .camp2-carru__btn--izq { left: 0; }
.rl--male .camp2-carru__btn--der { right: 0; }

/* ------------------------------------------------------------------ tres pasos, temario, qué incluye */
.rl--male .camp2-tercios { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
.rl--male .camp2-paso {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px; border-radius: var(--c2-radio); background: #FFFFFF; box-shadow: 0 2px 10px rgba(145, 115, 165, .09);
}
.rl--male .camp2-paso__ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--radio-tarjeta, 16px); display: grid; place-items: center; }
.rl--male .camp2-paso:nth-child(3n+1) .camp2-paso__ico { background: var(--c2-rosa-suave); color: var(--c2-rosa-chico); }
.rl--male .camp2-paso:nth-child(3n+2) .camp2-paso__ico { background: var(--c2-amarillo-base); color: #8A6508; }
.rl--male .camp2-paso:nth-child(3n+3) .camp2-paso__ico { background: var(--c2-verde-base); color: #2E7A77; }
.rl--male .rlm .camp2-paso h3 { font-size: 18px; margin-bottom: .25em; color: var(--c2-lila-boton); }
.rl--male .rlm .camp2-paso p { margin: 0; font-size: 15px; }

.rl--male .camp2-temario { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 8px; }
.rl--male .camp2-temario li {
  display: flex; gap: 9px; align-items: flex-start; margin: 0;
  padding: 11px 14px; border-radius: var(--radio-chico, 12px); background: #FFFFFF;
  font-size: 15px; box-shadow: 0 2px 8px rgba(145, 115, 165, .07);
}
.rl--male .camp2-temario li .rdi-ico { color: var(--c2-rosa-chico); margin-top: 2px; }
.rl--male .camp2-incluye { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.rl--male .camp2-incluye li {
  display: flex; gap: 11px; align-items: flex-start; margin: 0;
  padding: 13px 15px; border-radius: var(--radio-tarjeta, 16px); background: #FFFFFF;
  font-size: 15px; box-shadow: 0 2px 8px rgba(145, 115, 165, .08);
}
.rl--male .camp2-incluye .rdi-ico { color: var(--c2-titulo); margin-top: 2px; }
.rl--male .camp2-incluye b { color: var(--c2-lila-boton); }
.rl--male .camp2-sec--tinte .camp2-temario li, .rl--male .camp2-sec--tinte .camp2-incluye li { background: #FFFFFF; }

/* ------------------------------------------------------------------ beneficios */
.rl--male .camp2-beneficios { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0; padding: 0; }
.rl--male .camp2-beneficios li {
  display: flex; gap: 11px; align-items: flex-start; margin: 0;
  padding: 16px 18px; border-radius: var(--radio-bloque, 20px); background: #FFFFFF; font-size: 15px; line-height: 1.5;
}
.rl--male .camp2-beneficios .rdi-ico { color: var(--c2-rosa-chico); margin-top: 1px; }
.rl--male .camp2-beneficios b { color: var(--c2-lila-boton); }

/* ------------------------------------------------------------------ elegí por dónde empezás */
.rl--male .camp2-ayuda-elegir {
  list-style: none; max-width: 780px; margin: 22px auto 0; padding: 18px 22px;
  background: #FFFFFF; border: 1.5px solid var(--c2-rosa-suave); border-radius: var(--radio-bloque, 20px);
}
.rl--male .camp2-ayuda-elegir li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 6px 0; font-size: 15px; line-height: 1.55; }
.rl--male .camp2-ayuda-elegir .rdi-ico { color: var(--c2-rosa-chico); margin-top: 2px; }

.rl--male .camp2-elegir { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
.rl--male .camp2-opcion {
  display: flex; flex-direction: column; min-width: 0;
  padding: 24px 20px 22px; border-radius: var(--radio-bloque, 20px); background: #FFFFFF;
  box-shadow: var(--c2-sombra); border-top: 8px solid var(--c2-verde);
}
.rl--male .camp2-opcion--v1 { border-top-color: var(--c2-verde); }
.rl--male .camp2-opcion--v2 { border-top-color: var(--c2-amarillo); }
.rl--male .camp2-opcion--v3 { border-top-color: var(--c2-lila-base); }
/* la portada oficial va COMPLETA, sin recortar: trae el título y el sello del programa */
.rl--male .camp2-opcion__portada { margin: -24px -20px 16px; overflow: hidden; border-radius: 12px 12px 0 0; }
.rl--male .camp2-opcion__portada img, .rl--male .camp2-portada-susc { width: 100%; height: auto; display: block; object-fit: contain; }
.rl--male .rlm .camp2-opcion h3 { font-size: 22px; margin-bottom: .2em; }
.rl--male .camp2-opcion__para { font-size: 15px; margin-bottom: 14px; }
.rl--male .camp2-opcion__precio { margin: 2px 0 12px; font-family: var(--c2-precio); font-size: 22px; font-weight: 700; color: var(--c2-texto); }   /* el texto de Male (#5A4E66), no lila */
.rl--male .camp2-opcion__precio del { opacity: .6; font-weight: 400; font-size: 17px; }
.rl--male .camp2-opcion__precio ins { text-decoration: none; }
.rl--male .camp2-ficha { list-style: none; padding: 0; margin: 0 0 16px; font-size: 14px; }
.rl--male .camp2-ficha li { display: flex; gap: 8px; margin: 0; padding: 7px 0; border-bottom: 1px dashed var(--c2-rosa-suave); }
.rl--male .camp2-ficha li:last-child { border-bottom: 0; }
.rl--male .camp2-ficha strong { flex: 0 0 auto; color: var(--c2-lila-boton); }
.rl--male .camp2-opcion .camp2-cta { margin-top: auto; }
.rl--male a.camp2-opcion__info {
  display: block; margin-top: 9px; text-align: center; font-size: 14px; color: var(--c2-texto);
  text-decoration: underline; text-underline-offset: 3px;
}
.rl--male a.camp2-opcion__info:hover { color: var(--c2-lila-boton); }

/* la suscripción: primera, del mismo tamaño, distinta por el color y el borde */
.rl--male .camp2-opcion--susc { border-top-color: var(--c2-rosa); background: var(--susc-bg, #FFF5F9); }
.rl--male .rlm .camp2-opcion--susc h3 { color: var(--c2-rosa-chico); }
.rl--male .camp2-susc__eti {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin: 0 0 12px; padding: 4px 12px; border-radius: var(--radio-pastilla, 999px);
  background: var(--c2-rosa-chico); color: #FFFFFF; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}
.rl--male .camp2-susc__precio { margin: 0 0 2px; font-family: var(--c2-precio); font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--c2-rosa-chico); }
.rl--male .camp2-susc__precio small { font-family: var(--c2-letra); font-size: 15px; font-weight: 400; color: var(--c2-texto); }
.rl--male .camp2-susc__anual { margin: 4px 0 14px; font-size: 14px; }
.rl--male .camp2-susc__chapa {
  display: inline-block; margin-right: 6px; padding: 3px 11px; border-radius: var(--radio-pastilla, 999px);
  background: #FFFFFF; border: 1.5px solid var(--susc-borde, #FAC4D8); color: var(--c2-rosa-chico); font-weight: 700;
}
.rl--male .camp2-susc__cuenta { margin: 0 0 14px; padding: 11px 14px; border-radius: var(--radio-chico, 12px); background: #FFFFFF; font-size: 14px; line-height: 1.5; }
.rl--male .camp2-susc__cuenta strong { color: var(--c2-rosa-chico); }
.rl--male a.camp2-susc__comofunciona {
  display: inline-flex; align-items: center; justify-content: center; min-height: 24px; margin-top: 10px;
  font-size: 14px; color: var(--c2-texto); text-decoration: underline; text-underline-offset: 3px;
}
.rl--male a.camp2-susc__comofunciona:hover { color: var(--c2-rosa-chico); }

/* con más de tres tarjetas: carrusel. En TODOS los anchos sin columna explícita (en el molde la primera columna
   quedaba en 1fr y aplastaba la tarjeta de la suscripción en el celular). */
.rl--male .camp2-elegir--carru {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80vw, 300px);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px;
  scrollbar-color: var(--c2-rosa-claro) var(--c2-rosa-suave); scrollbar-width: thin; scroll-behavior: smooth;
}
.rl--male .camp2-elegir--carru .camp2-opcion { scroll-snap-align: start; }

/* La imagen de la suscripción cuando el producto no tiene portada propia: mosaico de portadas reales, sin números */
.rl--male .rlm-mosaico {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; aspect-ratio: 3 / 2; padding: 4px;
  background: var(--c2-rosa-suave);
}
.rl--male .rlm-mosaico img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; background: #FFFFFF; }

/* EN EL CELULAR, «Elegí por dónde empezás» es un carrusel horizontal (Nahuel, 16-oct): una tarjeta casi entera por
   pantalla y un pedacito de la siguiente asomando; se desliza con el dedo, con el teclado (flechas, con el foco en la
   fila) o con los puntitos. Cada tarjeta se lee completa: el carrusel es horizontal, nada de scroll vertical adentro. */
.rl--male .rlm-puntos { display: none; }
@media (max-width: 768px) {
  .rl--male .camp2-elegir, .rl--male .camp2-elegir--carru {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; align-items: start;
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 4px;
    padding: 4px 4px 12px; margin-left: -4px; margin-right: -4px; scrollbar-width: none;
  }
  .rl--male .camp2-elegir::-webkit-scrollbar { display: none; }
  .rl--male .camp2-elegir .camp2-opcion { scroll-snap-align: start; }
  .rl--male .camp2-elegir:focus-visible { outline: 3px solid var(--c2-titulo); outline-offset: 4px; border-radius: 12px; }
  .rl--male .camp2-carrusel-hint { display: none; }
  .rl--male .rlm-puntos { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
  /* la caja de ayuda va DEBAJO de las tarjetas en el celular: primero se ve qué se puede elegir */
  .rl--male .rlm-elegir .camp2-wrap { display: flex; flex-direction: column; }
  .rl--male .rlm-elegir .camp2-ayuda-elegir { order: 5; margin: 18px 0 0; }
  .rl--male .rlm-elegir .camp2-igual { order: 6; }
  .rl--male button.rlm-punto {
    display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  }
  .rl--male button.rlm-punto::before {
    content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c2-rosa-suave); transition: width .2s ease, background-color .2s ease;
  }
  .rl--male button.rlm-punto[aria-current="true"]::before { width: 22px; border-radius: 999px; background: var(--c2-rosa); }
  .rl--male button.rlm-punto:focus-visible { outline: 2px solid var(--c2-titulo); border-radius: 50%; }
}

.rl--male .camp2-igual {
  margin-top: 20px; padding: 14px 18px; border-radius: var(--radio-tarjeta, 16px);
  background: var(--c2-rosa-suave); color: #7A2B4C; font-size: 15px; text-align: center;
}
.rl--male .camp2-igual p { margin: 0; }

/* ------------------------------------------------------------------ es para vos / cómo es cursar */
.rl--male .camp2-lista { list-style: none; display: grid; gap: 8px; margin: 16px 0 0; padding: 0; }
.rl--male .camp2-lista li {
  display: flex; gap: 9px; align-items: flex-start; margin: 0;
  padding: 11px 14px; border-radius: var(--radio-chico, 12px); background: #FFFFFF;
  font-size: 15px; box-shadow: 0 2px 8px rgba(145, 115, 165, .07);
}
.rl--male .camp2-lista--check li .rdi-ico { color: var(--c2-rosa-chico); margin-top: 2px; }
.rl--male .camp2-lista--pasos { counter-reset: rlm; }
.rl--male .camp2-lista--pasos li { counter-increment: rlm; align-items: center; }
.rl--male .camp2-lista--pasos li::before {
  content: counter(rlm); flex: 0 0 auto; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c2-rosa-chico); color: #FFFFFF; font-family: var(--c2-cartel); font-size: 14px;
}

/* ------------------------------------------------------------------ cierre */
.rl--male .camp2-cierre {
  padding: 46px 0 54px; text-align: center;
  background: linear-gradient(180deg, var(--c2-rosa-suave) 0%, var(--c2-lila-base) 100%);
}
.rl--male .rlm.camp2-cierre h2 { font-size: clamp(24px, 5.4vw, 37px); }
.rl--male .camp2-cierre .camp2-bajada { margin: 0 auto; }
.rl--male .camp2-cierre__botones { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 22px; }
.rl--male .camp2-cierre__botones .camp2-cta { width: 100%; max-width: 340px; }
.rl--male .rlm p.camp2-salida { max-width: 460px; margin: 22px auto 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--c2-texto); }
.rl--male .camp2-salida a { color: var(--c2-rosa-chico); font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------------------ la barra fija del celular
   Adentro de .rl--male: le llegan las reglas del botón (en el molde no, y se veía como enlace subrayado). */
.rl--male .camp2-sticky {
  position: fixed; left: 0; right: 0; bottom: var(--rlm-abajo, 0px); z-index: 60;
  display: flex; gap: 8px; align-items: center;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--c2-rosa-suave);
  box-shadow: 0 -6px 18px rgba(145, 115, 165, .14);
  transform: translateY(130%); transition: transform .25s ease;
}
.rl--male .camp2-sticky[hidden] { display: none; }
.rl--male .camp2-sticky.se-ve { transform: translateY(0); }
.rl--male .camp2-sticky .camp2-cta { flex: 1; min-height: 50px; padding: 11px 16px; font-size: 19px; }
.rl--male button.camp2-sticky__cerrar {
  flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid var(--c2-rosa-suave); border-radius: 50%; background: #FFFFFF; color: var(--c2-texto); cursor: pointer;
}
@media (min-width: 900px) { .rl--male .camp2-sticky { display: none !important; } }
/* El WhatsApp (WP WhatsApp Chat, el único flotante que queda en estas landings) sube en el celular para no tapar la
   barra fija. Va colgado del body porque el plugin lo imprime afuera del <main>. Su contenedor fijo es
   .qlwapp__container--bottom-* con bottom:0 (style.css 8.5.1 del plugin, leído el 16-oct). */
@media (max-width: 899px) {
  /* 0.2.3: sube SOLO mientras la barra se ve (clase que pone rl-male.js); si no, queda abajo y no tapa el pie */
  body.rdi-landing--male .qlwapp__container--bottom-right,
  body.rdi-landing--male .qlwapp__container--bottom-left { transition: bottom .25s ease; }
  body.rdi-landing--male.rlm-barra-visible .qlwapp__container--bottom-right,
  body.rdi-landing--male.rlm-barra-visible .qlwapp__container--bottom-left { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
}

/* ------------------------------------------------------------------ editor: el aviso de lo que falta */
.rl--male .rl-falta { margin: 0; }

/* =====================================================================
   LA PIEL DE MALE para los bloques de 0.1.0 (solo adentro de .rl--male)
   ===================================================================== */
.rl--male .rlm-piel { padding: 40px 0; background: var(--c2-papel); color: var(--c2-texto); font-family: var(--c2-letra); }
.rl--male .rlm-piel.rlm-tinte { background: var(--c2-papel-tibio); }
.rl--male .rlm-piel .rl-contenedor { max-width: 1080px; padding: 0 18px; }
.rl--male .rlm-piel .rl-texto { max-width: 780px; color: var(--c2-texto); font-size: 16px; }
.rl--male .rlm-piel .rl-titulo, .rl--male .rlm-piel .rl-seccion__titulo {
  margin: 0 0 .45em; font-family: var(--c2-cartel); font-weight: 400; font-size: clamp(24px, 5vw, 35px); line-height: 1.12;
  color: var(--c2-titulo); text-align: center;
}
.rl--male .rlm-piel .rl-titulo em, .rl--male .rlm-piel .rl-seccion__titulo em { font-style: normal; color: var(--c2-rosa); }

/* Fotos: carrusel sin nombre ni número, fotos ENTERAS (sin recortar) en su tarjeta blanca */
.rl--male .rlm-piel__cab { margin-bottom: 4px; }
.rl--male .rlm-piel__pie { margin-top: 20px; }
.rl--male .rlm-piel--fotos .rl-fotos__pista { gap: 12px; grid-auto-columns: min(62vw, 230px); padding: 6px 2px 14px; }
.rl--male .rlm-piel--fotos .rl-fotos__slide {
  overflow: hidden; border-radius: var(--c2-radio); background: #FFFFFF; box-shadow: 0 2px 10px rgba(145, 115, 165, .10);
}
.rl--male .rlm-piel--fotos .rl-fotos__img { aspect-ratio: 1 / 1; object-fit: contain; border-radius: 0; background: var(--c2-papel-tibio); }
.rl--male .rlm-piel--fotos .rl-fotos__flecha { background: var(--c2-rosa); color: #FFFFFF; box-shadow: 0 4px 12px rgba(242, 92, 146, .35); }
.rl--male .rlm-piel--fotos .rl-fotos__flecha:hover { background: var(--c2-rosa-apretado); color: #FFFFFF; }

/* Sección: tildes de la casa en tarjetitas, pastillas como las chapitas */
.rl--male .rlm-piel--seccion .rl-checks { display: grid; grid-template-columns: 1fr; gap: 8px; }
.rl--male .rlm-piel--seccion .rl-checks li {
  margin: 0; padding: 11px 14px 11px 40px; border-radius: var(--radio-chico, 12px); background: #FFFFFF;
  font-size: 15px; box-shadow: 0 2px 8px rgba(145, 115, 165, .07);
}
.rl--male .rlm-piel--seccion .rl-checks li::before {
  content: ''; left: 13px; top: 13px; width: 18px; height: 18px; border-radius: 0; background: var(--c2-rosa-chico);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.6'/%3E%3Cpath d='M8.6 12.2l2.3 2.3 4.5-4.7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.6'/%3E%3Cpath d='M8.6 12.2l2.3 2.3 4.5-4.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rl--male .rlm-piel--seccion .rl-pastillas { justify-content: center; }
.rl--male .rlm-piel--seccion .rl-pastilla { padding: 7px 14px; background: #FFFFFF; color: var(--c2-texto); font-size: 14px; font-weight: 700; box-shadow: 0 2px 8px rgba(145, 115, 165, .12); }

/* Preguntas: tarjetas blancas con el + rosa */
.rl--male .rlm-piel--preguntas .rl-pregunta { margin: 0 0 8px; overflow: hidden; border-radius: var(--radio-tarjeta, 16px); background: #FFFFFF; box-shadow: 0 2px 8px rgba(145, 115, 165, .08); }
.rl--male .rlm-piel--preguntas .rl-pregunta summary { min-height: 48px; padding: 14px 18px; font-size: 16px; font-weight: 700; color: var(--c2-lila-boton); }
.rl--male .rlm-piel--preguntas .rl-pregunta[open] summary { background: var(--c2-papel-tibio); }
.rl--male .rlm-piel--preguntas .rl-pregunta__mas { background: transparent; color: var(--c2-rosa); }
.rl--male .rlm-piel--preguntas .rl-pregunta p { padding: 10px 18px 15px; font-size: 15px; color: var(--c2-texto); }

/* Testimonios: las reseñas, tarjetas blancas (van antes de la venta: prueba, después decisión) */
.rl--male .rlm-piel--testimonios .rl-testimonios { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
.rl--male .rlm-piel--testimonios .rl-testimonio { padding: 18px; border-radius: var(--radio-bloque, 20px); background: #FFFFFF; text-align: left; box-shadow: 0 2px 10px rgba(145, 115, 165, .09); }
.rl--male .rlm-piel--testimonios .rl-testimonio__texto { font-size: 15px; color: var(--c2-texto); }
.rl--male .rlm-piel--testimonios .rl-testimonio__nombre { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--c2-titulo); }

/* ------------------------------------------------------------------ se acomoda */
@media (min-width: 560px) {
  .rl--male .camp2-incluye { grid-template-columns: repeat(2, 1fr); }
  .rl--male .camp2-temario { grid-template-columns: repeat(2, 1fr); }
  .rl--male .rlm-piel--seccion .rl-checks { grid-template-columns: repeat(2, 1fr); }
  .rl--male .rlm-piel--testimonios .rl-testimonios { grid-template-columns: repeat(2, 1fr); }
  .rl--male .camp2-cierre__botones { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .rl--male .camp2-cierre__botones .camp2-cta { width: auto; }
}
@media (min-width: 820px) {
  .rl--male { font-size: 17px; }
  .rl--male .camp2-sec, .rl--male .rlm-piel { padding: 56px 0; }
  .rl--male .camp2-hero { padding: 46px 0 50px; }
  .rl--male .camp2-hero__grid { grid-template-columns: 1.1fr .9fr; gap: 44px; }
  .rl--male .camp2-hero__foto { margin: 0 0 0 auto; }
  .rl--male .camp2-tercios { grid-template-columns: repeat(3, 1fr); }
  .rl--male .camp2-paso { flex-direction: column; }
  .rl--male .camp2-temario { grid-template-columns: repeat(3, 1fr); }
  .rl--male .rlm-piel--seccion .rl-checks { grid-template-columns: repeat(3, 1fr); }
  /* «Elegí»: el reparto de las tarjetas en la compu va por cantidad (n2, n3 y el carrusel con flechas: al final del archivo) */
  .rl--male .rlm-piel--testimonios .rl-testimonios { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* «Es para vos si…» seguido de «Cómo es cursar»: en la compu, lado a lado (como en el diseño de Male). */
@supports selector(:has(+ *)) {
  @media (min-width: 820px) {
    .rl.rl--male { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rl.rl--male > * { grid-column: 1 / -1; min-width: 0; }
    .rl.rl--male > .rlm-paravos:has(+ .rlm-pasos) { grid-column: 1; }
    .rl.rl--male > .rlm-paravos + .rlm-pasos { grid-column: 2; }
    .rl--male .rlm-paravos:has(+ .rlm-pasos) .camp2-wrap { max-width: 560px; margin: 0 0 0 auto; padding-right: 20px; }
    .rl--male .rlm-paravos + .rlm-pasos .camp2-wrap { max-width: 560px; margin: 0 auto 0 0; padding-left: 20px; }
  }
}

/* La pantalla baja (1536x730, la de Nahuel): que el bloque siguiente no quede con el título solo. */
@media (min-width: 820px) and (max-height: 820px) {
  .rl--male .camp2-hero { padding: 32px 0 36px; }
  .rl--male .camp2-sec, .rl--male .rlm-piel { padding: 40px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rl--male *, .rl--male .camp2-sticky { transition: none !important; animation: none !important; }
  .rl--male .camp2-elegir--carru { scroll-behavior: auto; }
}

.rl--male .camp2-opcion--susc:focus { outline: none; }

/* =====================================================================
   RONDA DE FIDELIDAD A MALE (16-oct-2026, aprobada por Nahuel) — ver CAMBIOS-LANDINGS.md
   ===================================================================== */

/* La foto del comienzo sin franjas vacías: el marco blanco de Male toma la proporción de la foto (sin recortar). */
.rl--male .camp2-hero__foto { width: fit-content; max-width: min(400px, 100%); }
.rl--male .camp2-hero__foto img { width: auto; max-width: 100%; height: auto; max-height: 440px; aspect-ratio: auto; object-fit: contain; margin: 0 auto; }

/* Chapitas del comienzo con el texto lila de Male (el lila apretado, que se lee a 13 px). */
.rl--male .camp2-chips li { color: var(--c2-lila-boton); }

/* El cuadradito pastel con un ícono de la casa adentro, rotando rosa / amarillo / verde agua / lila (como Male). */
.rl--male .rlm-ico { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; }
.rl--male .rlm-ico .rdi-ico { margin: 0 !important; }
.rl--male .rlm-ico--1 { background: var(--c2-rosa-suave); color: var(--c2-rosa-chico); }
.rl--male .rlm-ico--2 { background: var(--c2-amarillo-base); color: #8A6508; }
.rl--male .rlm-ico--3 { background: var(--c2-verde-base); color: #2E7A77; }
.rl--male .rlm-ico--4 { background: var(--c2-lila-base); color: var(--c2-lila-boton); }
.rl--male .camp2-paso .rlm-ico { width: 48px; height: 48px; }
.rl--male .camp2-incluye.rlm-grilla li { align-items: center; }
.rl--male .camp2-incluye.rlm-grilla .rdi-ico { color: inherit; margin: 0; }

/* El trío: cada verbo con lo del temario que le toca, en renglones cortos con tilde. */
.rl--male .rlm-trio__lista { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.rl--male .rlm-trio__lista li { display: flex; gap: 7px; align-items: flex-start; margin: 0; font-size: 14.5px; line-height: 1.45; }
.rl--male .rlm-trio__lista .rdi-ico { color: var(--c2-rosa-chico); margin-top: 2px; }
.rl--male .camp2-paso .rlm-pastillas { justify-content: flex-start; margin-top: 8px; }

/* Pastillas (cosas cortas y muchas), como las chapitas del comienzo. */
.rl--male .rlm-pastillas { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; }
.rl--male .rlm-pastillas li { margin: 0; padding: 8px 15px; border-radius: 999px; background: #FFFFFF; color: var(--c2-lila-boton); font-size: 14px; font-weight: 700; line-height: 1.3; box-shadow: 0 2px 8px rgba(145, 115, 165, .12); }
.rl--male .rlm-grupo { margin-top: 22px; text-align: center; }
.rl--male .rlm-grupo__t { margin: 0 auto !important; max-width: 60ch; font-weight: 700; color: var(--c2-lila-boton); }
.rl--male .rlm-grupo .rlm-pastillas { margin-top: 10px; }
.rl--male .rlm-numerados { max-width: 780px; margin: 22px auto 0; }
.rl--male .rlm-lista .camp2-igual, .rl--male .rlm-lista .camp2-igual { max-width: 780px; margin-left: auto; margin-right: auto; }

/* Las reseñas como en Male: estrellas (solo con puntaje real), cita entre comillas y nombre en lila. */
.rl--male .rlm-piel--testimonios .rl-testimonio__texto p::before { content: '“'; }
.rl--male .rlm-piel--testimonios .rl-testimonio__texto p::after { content: '”'; }
.rl--male .rlm-piel--testimonios .camp2-estrellas { margin-bottom: 6px; }
.rl--male .rlm-estrella-vacia { color: var(--c2-rosa-suave); }
.rl--male .rlm-piel--testimonios .camp2-rating { display: flex; width: fit-content; margin: 10px auto 0 !important; }

@media (min-width: 820px) {
  .rl--male .rlm-grilla--3, .rl--male .rlm-grilla--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .rl--male .rlm-grilla--4 { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   RONDA 2 DE FIDELIDAD (16-oct-2026)
   ===================================================================== */
/* B1: grillas de nombres cortos con las columnas justas y la última fila centrada; las de frases, a 2 columnas */
.rl--male .rlm-grilla--cortos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rl--male .rlm-grilla--cortos > li { flex: 0 1 calc(50% - 5px); }
@media (min-width: 820px) {
  .rl--male .rlm-grilla--cortos { gap: 12px; }
  .rl--male .rlm-col-2 > li { flex-basis: calc(50% - 6px); max-width: 420px; }
  .rl--male .rlm-col-3 > li { flex-basis: calc(33.333% - 8px); }
  .rl--male .rlm-col-4 > li { flex-basis: calc(25% - 9px); }
  .rl--male .rlm-col-5 > li { flex-basis: calc(20% - 10px); }
  .rl--male .rlm-col-1 > li { flex-basis: min(420px, 100%); }
}
.rl--male .rlm-grilla--frases { display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px) { .rl--male .rlm-grilla--frases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px) { .rl--male .rlm-grilla--frases.rlm-grilla--frases { grid-template-columns: repeat(2, 1fr); } }
.rl--male .camp2-incluye li > span, .rl--male .camp2-temario li > span, .rl--male .rlm-trio__lista li > span,
.rl--male .camp2-lista li > span, .rl--male .camp2-opcion__para, .rl--male .camp2-bajada, .rl--male .camp2-igual p { text-wrap: pretty; }

/* 0.2.2 (17-10, Felipe: «¿por qué quedan así las cards?»): la tarjeta de la suscripción es la más alta y estira a las
   demás; con el precio al pie quedaba un hueco entre la descripción y el precio. Ahora el precio y la ficha siguen a la
   descripción, que reserva 3 renglones (así los precios quedan parejos entre tarjetas), y solo el botón va al pie. */
.rl--male .camp2-opcion:not(.camp2-opcion--susc) .camp2-opcion__para { line-height: 1.5; min-height: 4.5em; }
.rl--male .camp2-opcion:not(.camp2-opcion--susc) .camp2-opcion__precio { margin-top: 0; }
.rl--male .camp2-opcion:not(.camp2-opcion--susc) .camp2-cta { margin-top: auto; }

/* B3: «Cómo es cursar» sola: centrada y a 780 px, como las preguntas */
.rl--male .rlm-pasos.rlm-sola .camp2-wrap { max-width: 780px; }
.rl--male .rlm-pasos.rlm-sola .rlm-columna > .camp2-kicker, .rl--male .rlm-pasos.rlm-sola .rlm-columna > .camp2-h2 { text-align: center; justify-content: center; }

/* B5: el precio anual sin partirse */
.rl--male .camp2-susc__anual { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rl--male .camp2-susc__anual > span { white-space: nowrap; }
.rl--male .camp2-susc__chapa { margin-right: 0; }

/* B6: pastillas dentro de una tarjeta blanca: fondo tibio, sin sombra */
.rl--male .camp2-paso .rlm-pastillas li { background: var(--c2-papel-tibio); box-shadow: none; font-size: 13px; }

/* B7: los números de los círculos a 16 px en un círculo de 30 */
.rl--male .camp2-lista--pasos li::before { width: 30px; height: 30px; font-size: 16px; }

/* B8: el cierre con 4 o 5 botones en filas de a 2 centradas, como el par de Male */
.rl--male .camp2-cierre__botones { max-width: 700px; margin-left: auto; margin-right: auto; }

/* =====================================================================
   CONTRASTES WCAG AA (revisión del 16-oct): dentro de la paleta de Male
   ===================================================================== */
/* comienzo: arriba a la izquierda el degradé es casi #FAC4D8 */
.rl--male .rlm-comienzo h1 { color: var(--compra-boton, #7B5F8E); }                 /* 3,6 sobre #FAC4D8 (título grande) */
.rl--male .rlm-comienzo h1 em { color: var(--texto-rosa-fondo, #BE1856); }          /* 4,0 */
.rl--male .rlm-comienzo .camp2-kicker { color: #A0124A; }                            /* rótulo chico: 5,2 */
.rl--male .rlm-comienzo a.camp2-link { color: #6B4F80; }                             /* 4,6 */
/* la palabra en rosa de los títulos sobre el rosado tibio */
.rl--male .camp2-sec--tinte h2 em, .rl--male .rlm-tinte h2 em { color: var(--rincon-fuchsia, #E61F67); }   /* 4,2 */
/* cierre (degradé rosa → lila): título, su parte en rosa, enlaces */
.rl--male .rlm.camp2-cierre h2 { color: var(--compra-boton-activo, #745788); }      /* 3,8 sobre #DCC3EB */
.rl--male .rlm.camp2-cierre h2 em { color: var(--texto-rosa-fondo, #BE1856); }      /* 3,8 */
.rl--male .camp2-cierre .camp2-salida a, .rl--male .camp2-cierre .rlm-relacionados a { color: #7A2B4C; text-decoration: underline; }   /* 5,7 */

/* la barra fija oculta no se puede enfocar ni la lee el lector de pantalla */
.rl--male .camp2-sticky { visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.rl--male .camp2-sticky.se-ve { visibility: visible; transition: transform .25s ease, visibility 0s; }

/* =====================================================================
   «ELEGÍ» EN LA COMPU: HASTA 3 TARJETAS + CARRUSEL (Male y Nahuel, 16-oct)
   La suscripción primera y las versiones de la más vendida a la menos vendida (orden fijo en los datos). Se ven 3;
   si hay más, siguen en carrusel con flechas que corren de a una tarjeta. En el celular, el carrusel de siempre.
   ===================================================================== */
/* 0.2.2: la flecha es un ícono (el carácter ‹ › quedaba corrido dentro del círculo) */
.rl--male button.camp2-carru__btn svg { display: block; width: 22px; height: 22px; stroke-width: 2.6; }
@media (min-width: 769px) {
  .rl--male .camp2-elegir { overflow: visible; grid-auto-flow: row; }
  .rl--male .camp2-elegir--n2 { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
  .rl--male .camp2-elegir--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rl--male .camp2-elegir.camp2-elegir--carru {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3);
    gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: 4px 2px 14px; scrollbar-width: none;
  }
  .rl--male .camp2-elegir--carru::-webkit-scrollbar { display: none; }
  .rl--male .camp2-elegir--carru .camp2-opcion { scroll-snap-align: start; }
  .rl--male .camp2-elegir--carru:focus-visible { outline: 3px solid var(--c2-titulo); outline-offset: 4px; border-radius: 12px; }
  .rl--male .camp2-carru--con-flechas { padding: 0 34px; }            /* las flechas no tapan texto de las tarjetas */
  .rl--male .camp2-carru--con-flechas button.camp2-carru__btn { display: grid; place-items: center; }
  .rl--male .camp2-carru--con-flechas .camp2-carru__btn--izq { left: -12px; }
  .rl--male .camp2-carru--con-flechas .camp2-carru__btn--der { right: -12px; }
}

/* =====================================================================
   0.2.3 — EL CIERRE DE LA PÁGINA CON EL LOGO (Felipe, 17-10: «esta franja blanca se ve mal; cerrar con el logo de
   Rincón de manera estética» y después «capaz el rosa del sitio»): el rosa y la letra blanca del pie del sitio
   (rdi-shell, #F25C92), con el logo blanco y los legales.
   ===================================================================== */
body.rdi-landing--male .rlm-pie {
  margin: 0; padding: 32px 16px 34px; text-align: center; background: #F25C92; color: #FFFFFF;
  font: 400 15px/1.7 'natom-pro', 'Natom Pro', 'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
body.rdi-landing--male .rlm-pie__logo { display: inline-block; }
body.rdi-landing--male .rlm-pie__logo img { display: block; width: 140px; height: auto; margin: 0 auto 14px; }
body.rdi-landing--male .rlm-pie__legales { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0 0 6px; }
body.rdi-landing--male .rlm-pie a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }   /* como el pie del sitio */
body.rdi-landing--male .rlm-pie a:hover, body.rdi-landing--male .rlm-pie a:focus { color: #FFE3EE; }
body.rdi-landing--male .rlm-pie__copy { margin: 0; }
@media (max-width: 768px) {
  body.rdi-landing--male .rlm-pie { padding-bottom: 92px; }   /* que el WhatsApp flotante no tape los legales */
  body.rdi-landing--male .rlm-pie__logo img { width: 120px; }
}