/* ==========================================================================
   REGENIXCELL JOIN - skin compartido (WRD-5)
   Portado desde la maqueta (docs/jira/WRD-5/spec_assets/REGENIXCELL_JOIN) a
   Bootstrap 5.3 (join ya carga BS5 local; no se carga la BS legacy de la maqueta).
   CSS único y reutilizable para las 4 pantallas del join.
   ========================================================================== */
:root {
  --rx-blue: #3978C5;
  --rx-ochre: #C77A32;
  --rx-yellow: #F2C45E;
  --rx-navy: #172B45;
  --rx-surface: #F5F6F8;
  --rx-white: #FFFFFF;
  --rx-cyan: #28A9ED;
  --rx-text: #172B45;
  --rx-muted: #66788B;
  --rx-border: #D9E4EF;
  --rx-shadow: 0 20px 55px rgba(5, 28, 58, .22);
  --rx-radius: 22px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.join-page {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--rx-text);
  background: #07376d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}
body.join-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: #07376d;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
body.join-page--step1::before { background-image: url('img/backgrounds/bg_join_pantalla_1.png'); }
body.join-page--inner::before { background-image: url('img/backgrounds/bg_join_pantallas_2_a_la_4.png'); }
body.join-page--inner::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 39, 80, .03), rgba(5, 37, 75, .06));
}
a { color: var(--rx-blue); }
a:hover, a:focus { color: #2d64a4; }
button, input, select, textarea { font-family: inherit; }

/* Header y marca ---------------------------------------------------------- */
/* Un único componente de marca para las pantallas 1–4. No crear variantes
   de tamaño/posición por pantalla; cualquier ajuste debe hacerse aquí. */
.rx-header {
  position: relative;
  z-index: 10;
  padding: 34px 4.2vw 0 10vw;
}
.rx-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  margin: 0;
}
.rx-brand-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 408px;
  min-height: 101px;
  padding: 7px 23px;
  background: var(--rx-white);
  border: 1px solid rgba(218, 228, 239, .95);
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(1, 31, 67, .18);
}
.rx-brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.rx-brand-card img { display: block; height: auto; object-fit: contain; }
.rx-brand-icon { width: 91px; flex: 0 0 91px; }
.rx-brand-wording { flex: 1; min-width: 0; padding-top: 2px; }
.rx-brand-wordmark { width: 100%; max-width: 252px; }
.rx-brand-tagline {
  margin-top: 5px;
  color: #536987;
  font-size: 8.6px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .25em;
  white-space: nowrap;
}
.rx-header__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  padding-top: 17px;
}
.rx-pill {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  height: 54px;
  min-height: 54px;
  padding: 0 23px;
  color: var(--rx-white);
  background: rgba(3, 41, 83, .26);
  border: 1px solid rgba(143, 190, 232, .68);
  border-radius: 999px;
  box-shadow: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.rx-pill--user { min-width: 253px; }
.rx-pill--language { min-width: 188px; }
.rx-pill svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
}
.rx-pill__chevron {
  width: 9px;
  height: 9px;
  margin: -4px 1px 0 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Modal de idioma: aislar el skin REGENIXCELL de las reglas naranjas legacy
   de la hoja de estilos legacy, sin afectar los modales del flujo anterior. */
body.join-page #modalLanguage .modal-content {
  color: var(--rx-muted);
  border: 1px solid var(--rx-border);
  border-radius: 12px;
}
body.join-page #modalLanguage .modal-header {
  border-bottom-color: var(--rx-border);
}
body.join-page #modalLanguage .btn-close {
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--rx-blue);
  background: #EAF4FF;
  border: 2px solid var(--rx-blue);
  border-radius: 50%;
  opacity: 1;
}
body.join-page #modalLanguage li a {
  color: var(--rx-muted);
}
body.join-page #modalLanguage li a.active {
  color: var(--rx-blue);
  font-weight: 700;
}
body.join-page #modalLanguage li a:hover,
body.join-page #modalLanguage li a:focus {
  color: var(--rx-white) !important;
  background-color: var(--rx-blue);
  outline: 0;
}

/* Aviso ZipTax: modal Bootstrap nativo ajustado al skin. */
body.join-page .rx-city-verification-modal .modal-dialog {
  max-width: 430px;
  margin-top: 12vh;
}
body.join-page .rx-city-verification-modal .modal-content {
  overflow: hidden;
  color: var(--rx-muted);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 31, 69, .28);
}
body.join-page .rx-city-verification-modal .modal-header {
  justify-content: center;
  padding: 22px 26px 10px;
  color: var(--rx-navy);
  border-bottom: 0;
  text-align: center;
}
body.join-page .rx-city-verification-modal .modal-title {
  width: 100%;
  font-size: 19px;
  font-weight: 750;
}
body.join-page .rx-city-verification-modal .modal-body {
  padding: 4px 26px 22px;
}
body.join-page .rx-city-verification-modal .modal-footer {
  padding: 0 26px 24px;
  border-top: 0;
}
.rx-city-verification-alert {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--rx-muted);
  font-size: 15px;
  line-height: 1.5;
}
.rx-city-verification-alert__icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  color: #A66B00;
  background: #FFF4D6;
  border-radius: 50%;
}
body.join-page .rx-city-verification-modal .rx-city-verification-alert__button {
  min-width: 104px;
  padding: 9px 18px;
  color: var(--rx-white);
  background: var(--rx-blue);
  border-color: var(--rx-blue);
  border-radius: 8px;
  font-weight: 700;
}
body.join-page .rx-city-verification-modal .rx-city-verification-alert__button:hover,
body.join-page .rx-city-verification-modal .rx-city-verification-alert__button:focus {
  color: var(--rx-white);
  background: var(--rx-navy);
  border-color: var(--rx-navy);
}

/* Layout y navegación de pasos ------------------------------------------- */
.rx-main { position: relative; z-index: 1; padding: 20px 24px 54px; }
.rx-shell { width: 100%; max-width: 1060px; margin: 0 auto; }
.rx-shell--narrow { max-width: 760px; }
.rx-shell--success { max-width: 780px; }
.rx-step-area { margin: 0 auto 24px; text-align: center; }
.rx-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 540px);
  margin: 0 auto;
}
.rx-step {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  color: rgba(255, 255, 255, .82);
  background: rgba(1, 44, 91, .36);
  border: 1px solid rgba(174, 205, 235, .75);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 500;
}
.rx-step.is-active {
  color: var(--rx-white);
  background: rgba(4, 54, 105, .86);
  border-color: #F3CC69;
  box-shadow: 0 0 0 4px rgba(242, 196, 94, .12), 0 0 20px rgba(242, 196, 94, .78), inset 0 0 10px rgba(242, 196, 94, .1);
}
.rx-step.is-done {
  color: var(--rx-white);
  background: var(--rx-blue);
  border-color: #83BAF5;
  box-shadow: 0 0 0 3px rgba(57, 120, 197, .18);
}
.rx-step-line {
  flex: 1;
  max-width: 100px;
  height: 1px;
  margin: 0 16px;
  background: rgba(175, 207, 237, .62);
}
.rx-step-line.is-done { background: linear-gradient(90deg, var(--rx-blue), rgba(255, 255, 255, .55)); }
.rx-page-heading {
  max-width: 860px;
  margin: 0 auto 22px;
  color: var(--rx-white);
  text-align: center;
  text-shadow: 0 3px 18px rgba(0, 28, 68, .24);
}
.rx-page-heading h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.rx-page-heading .rx-accent { color: var(--rx-cyan); }
.rx-page-heading p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.55;
}
.rx-context { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.rx-context-pill {
  padding: 7px 12px;
  color: var(--rx-white);
  background: rgba(4, 41, 82, .45);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* Contenedores ------------------------------------------------------------ */
.rx-card {
  background: var(--rx-white);
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: var(--rx-radius);
  box-shadow: var(--rx-shadow);
}
.rx-card--form { padding: 34px 38px 30px; }
.rx-card--legal { padding: 32px 38px 30px; }
.rx-card--success { padding: 42px 44px 38px; text-align: center; }
.rx-card-title { margin: 0 0 8px; color: var(--rx-navy); font-size: 20px; font-weight: 700; }
.rx-card-copy { margin: 0 0 24px; color: var(--rx-muted); line-height: 1.6; }
.rx-section { padding: 22px 0 6px; border-top: 1px solid #EDF2F7; }
.rx-section:first-child { padding-top: 0; border-top: 0; }
.rx-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--rx-navy);
  font-size: 16px;
  font-weight: 700;
}
.rx-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  color: var(--rx-blue);
  background: rgba(57, 120, 197, .1);
  border-radius: 50%;
  font-size: 12px;
}
.rx-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 24px;
  padding: 13px 16px;
  color: #4C6176;
  background: #F7FBFF;
  border: 1px solid #DCE8F3;
  border-radius: 12px;
  font-size: 13px;
}
.rx-info-bar strong { color: var(--rx-navy); }

/* Formularios ------------------------------------------------------------- */
.rx-form .form-group { margin-bottom: 19px; }
.rx-form label { margin-bottom: 7px; color: #2A415B; font-size: 13px; font-weight: 600; }
.rx-required { color: var(--rx-ochre); font-weight: 800; }
.rx-form .form-control {
  height: 46px;
  padding: 10px 13px;
  color: #1C344F;
  background: var(--rx-white);
  border: 1px solid var(--rx-border);
  border-radius: 9px;
  box-shadow: none;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.rx-form textarea.form-control { height: auto; min-height: 92px; resize: vertical; }
.rx-form .form-control:focus { border-color: #7BAEE5; box-shadow: 0 0 0 3px rgba(57, 120, 197, .1); }
.rx-form .has-error .form-control { border-color: var(--rx-border); box-shadow: none; }
.rx-help { margin-top: 6px; color: #7A8998; font-size: 11.5px; line-height: 1.45; }
.rx-error-message { color: #A64C42; }
.rx-form .rx-field-error {
  margin: 6px 0 0;
  color: #B42318;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.rx-field-static {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 13px;
  color: #516579;
  background: #F8FAFC;
  border: 1px solid var(--rx-border);
  border-radius: 9px;
  font-size: 14px;
}

/* Selector de país compartido -------------------------------------------- */
.rx-country-label { display: block; margin-bottom: 8px; color: #334B64; font-size: 13px; font-weight: 700; }
.rx-country-select { position: relative; }
.rx-country-select__button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  color: #233B55;
  background: var(--rx-white);
  border: 1px solid #D7E2ED;
  border-radius: 10px;
  box-shadow: none;
  text-align: left;
}
.rx-country-select__button:focus { outline: 0; border-color: #75ABE4; box-shadow: 0 0 0 3px rgba(57, 120, 197, .12); }
.rx-country-select__button img { width: 28px; height: 18px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.rx-country-name { flex: 1; font-weight: 600; }
.rx-country-select__arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 38px;
  margin-left: auto;
  border-left: 1px solid rgba(151, 191, 225, .36);
}
.rx-country-select__arrow::after {
  content: "";
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.rx-country-select__menu {
  display: none;
  position: absolute;
  top: 58px;
  right: 0;
  left: 0;
  z-index: 30;
  overflow: hidden;
  background: var(--rx-white);
  border: 1px solid #DCE5EE;
  border-radius: 10px;
  box-shadow: 0 16px 30px rgba(23, 43, 69, .15);
}
.rx-country-select.is-open .rx-country-select__menu { display: block; }
.rx-country-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  color: #253D56;
  background: var(--rx-white);
  border: 0;
  font-size: 14px;
  text-align: left;
}
.rx-country-option:hover, .rx-country-option:focus { outline: 0; background: #F1F7FD; }
.rx-country-option img { width: 28px; height: 18px; }

/* Botones ----------------------------------------------------------------- */
.rx-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.rx-actions--center { justify-content: center; }
.btn.rx-btn {
  min-height: 44px;
  padding: 11px 22px;
  border-width: 1px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn.rx-btn:hover { transform: translateY(-1px); }
.btn.rx-btn-primary { color: var(--rx-white); background: var(--rx-ochre); border-color: #B46B2A; box-shadow: 0 9px 20px rgba(199, 122, 50, .22); }
.btn.rx-btn-primary:hover, .btn.rx-btn-primary:focus { color: var(--rx-white); background: #B86E2C; border-color: #A76128; outline: 0; }
.btn.rx-btn-primary[disabled] { opacity: .52; box-shadow: none; transform: none; }
.btn.rx-btn-secondary { color: #35516C; background: var(--rx-white); border-color: #CFDBE6; }
.btn.rx-btn-secondary:hover, .btn.rx-btn-secondary:focus { color: #243E58; background: #F6F9FC; border-color: #B9CAD9; outline: 0; }
.btn.rx-btn-block { width: 100%; }

/* Contraseña y verificación ---------------------------------------------- */
.rx-password-wrap { position: relative; }
.rx-password-wrap .form-control { padding-right: 48px; }
.rx-eye {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #6D8094;
  background: transparent;
  border: 0;
}
.rx-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rx-password-rules { margin: 4px 0 2px; padding: 14px 16px; background: #F7F9FC; border: 1px solid #E2E9F0; border-radius: 10px; }
.rx-password-rules strong { display: block; margin-bottom: 8px; color: #324A63; font-size: 12px; }
.rx-password-rules ul { margin: 0; padding-left: 18px; color: #748494; font-size: 11.5px; line-height: 1.7; }
.rx-password-rules li.is-valid { color: #2E7F56; font-weight: 600; }
.rx-captcha { display: flex; align-items: center; gap: 13px; max-width: 310px; min-height: 78px; padding: 13px 15px; color: #2F3F4F; background: #FAFAFA; border: 1px solid #CBD4DD; border-radius: 5px; }
.rx-captcha input { width: 24px; height: 24px; margin: 0; }
.rx-captcha__copy { flex: 1; font-size: 12px; line-height: 1.3; }
.rx-captcha__badge { color: #6F7B87; font-size: 10px; text-align: center; }
.rx-captcha__badge svg { display: block; width: 28px; height: 28px; margin: 0 auto 2px; fill: none; stroke: #6D8FBD; stroke-width: 1.5; }
.rx-demo-note { margin-top: 7px; color: #8090A0; font-size: 11px; }

/* Términos --------------------------------------------------------------- */
.rx-legal-scroll { height: 330px; overflow-y: auto; padding: 24px 25px; color: #4D6073; background: #FBFCFE; border: 1px solid #DCE5EE; border-radius: 12px; font-size: 13px; line-height: 1.72; scrollbar-color: #91A9C0 #EDF2F7; scrollbar-width: thin; }
.rx-legal-scroll h2 { margin: 0 0 15px; color: var(--rx-navy); font-size: 18px; }
.rx-legal-scroll h3 { margin: 20px 0 8px; color: #274663; font-size: 14px; }
.rx-legal-scroll p { margin: 0 0 14px; }
.rx-terms-check { margin: 20px 0 0; padding: 14px 16px; background: #FAFCFE; border: 1px solid #E0E7EF; border-radius: 10px; }
.rx-terms-check label { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: #344B62; font-size: 13px; font-weight: 600; cursor: pointer; }
.rx-terms-check input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; }

/* Éxito ------------------------------------------------------------------- */
.rx-success-icon { display: flex; align-items: center; justify-content: center; width: 82px; height: 82px; margin: 0 auto 20px; background: rgba(57, 120, 197, .1); border: 1px solid rgba(57, 120, 197, .18); border-radius: 50%; box-shadow: 0 8px 30px rgba(57, 120, 197, .13); }
.rx-success-icon svg { width: 43px; height: 43px; fill: none; stroke: var(--rx-blue); stroke-width: 2; }
.rx-success-heading { margin: 0 0 8px; color: var(--rx-navy); font-size: 23px; font-weight: 700; }
.rx-success-message { max-width: 600px; margin: 0 auto 26px; color: #63778B; font-size: 14px; line-height: 1.65; }
.rx-summary { max-width: 570px; margin: 0 auto 26px; overflow: hidden; background: var(--rx-white); border: 1px solid #E1E8EF; border-radius: 13px; text-align: left; }
.rx-summary__row { display: grid; grid-template-columns: 44% 56%; padding: 12px 16px; border-top: 1px solid #EDF1F5; font-size: 13px; }
.rx-summary__row:first-child { border-top: 0; }
.rx-summary__key { color: #718294; }
.rx-summary__value { color: #2B435B; font-weight: 700; word-break: break-word; }
.rx-success-actions { max-width: 420px; margin: 0 auto; }
.rx-success-actions .rx-btn { margin-bottom: 10px; }
.rx-text-link { display: inline-block; margin-top: 4px; color: #617A92; background: transparent; border: 0; font-size: 12px; text-decoration: underline; }
.rx-text-link:hover { color: var(--rx-blue); }

/* Pantalla 1: afinación contra maqueta aprobada -------------------------- */
.join-page--step1 { min-height: 941px; }
.join-page--step1 .rx-main { padding: 50px 24px 70px; }
.join-page--step1 .rx-shell--narrow { width: 760px; max-width: 760px; margin-right: 0; margin-left: 54%; transform: translateX(-50%); }
.join-page--step1 .rx-step-area { margin-bottom: 57px; }
.join-page--step1 .rx-page-heading { max-width: 760px; margin-bottom: 37px; }
.join-page--step1 .rx-page-heading h1 { font-size: 62px; font-weight: 600; line-height: 1.04; letter-spacing: .018em; }
.join-page--step1 .rx-page-heading p { margin-top: 9px; color: rgba(255, 255, 255, .79); font-size: 23px; font-weight: 300; line-height: 1.35; }
.rx-country-panel { width: 640px; margin: 0 auto; padding: 52px 48px 44px; background: linear-gradient(180deg, rgba(17, 83, 149, .46), rgba(4, 55, 112, .44)); border: 1px solid rgba(121, 178, 224, .86); border-radius: 22px; box-shadow: inset 0 0 24px rgba(111, 178, 232, .035); }
.join-page--step1 .rx-country-label { margin: 0 0 11px; color: var(--rx-white); font-size: 20px; font-weight: 500; line-height: 1.1; }
.join-page--step1 .rx-required { color: #F6C94F; }
.join-page--step1 .rx-country-select__button { height: 74px; padding: 0 0 0 23px; gap: 23px; color: var(--rx-white); background: rgba(1, 45, 93, .48); border-color: rgba(153, 195, 231, .86); border-radius: 13px; box-shadow: inset 0 0 12px rgba(41, 128, 204, .05); font-size: 23px; }
.join-page--step1 .rx-country-select__button:focus { border-color: #9BC7ED; box-shadow: 0 0 0 2px rgba(95, 173, 235, .12); }
.join-page--step1 .rx-country-select__button img { width: 54px; height: 34px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.join-page--step1 .rx-country-name { font-weight: 400; }
.join-page--step1 .rx-country-select__arrow { width: 78px; height: 44px; }
.join-page--step1 .rx-country-select__arrow::after { width: 15px; height: 15px; border-right-width: 3px; border-bottom-width: 3px; }
.join-page--step1 .rx-country-select__menu { top: 82px; border-radius: 13px; }
.rx-actions--step1 { margin-top: 38px; }
.btn.rx-btn--step1 { min-width: 384px; height: 77px; padding: 0 42px; color: #082B59; background: linear-gradient(180deg, #F8DC76 0%, #EFBD49 45%, #C98B20 100%); border: 2px solid #FFE080; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255, 214, 102, .28), 0 0 28px rgba(242, 196, 94, .65), 0 10px 28px rgba(10, 38, 72, .28); font-size: 23px; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 255, 255, .2); }
.btn.rx-btn--step1:hover, .btn.rx-btn--step1:focus { color: #082B59; background: linear-gradient(180deg, #F6D46F 0%, #DDA337 58%, #C8851A 100%); border-color: #FFE899; box-shadow: 0 0 0 1px rgba(255, 214, 102, .32), 0 0 32px rgba(242, 196, 94, .72), 0 12px 30px rgba(10, 38, 72, .3); outline: 0; }
.btn.rx-btn--step1 span { position: relative; top: 2px; margin-left: 30px; font-size: 30px; font-weight: 400; line-height: 0; }

/* Página índice de maqueta ------------------------------------------------ */
.dev-body { padding: 35px 20px; color: var(--rx-navy) !important; background: #EEF3F8 !important; }
.dev-index { max-width: 980px; margin: 0 auto; padding: 32px; background: var(--rx-white); border-radius: 18px; box-shadow: 0 12px 34px rgba(23, 43, 69, .12); }
.dev-index h1 { margin: 0 0 10px; font-size: 28px; }
.dev-index p { color: #687A8C; }
.dev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.dev-link { display: block; padding: 18px; background: #FBFDFF; border: 1px solid #DDE6EF; border-radius: 12px; text-decoration: none; }
.dev-link:hover { background: #F5FAFF; border-color: #8BB5DE; text-decoration: none; }
.dev-link strong { display: block; margin-bottom: 5px; color: var(--rx-navy); }
.dev-link span { color: #6D8092; font-size: 12px; }
.dev-note { margin-top: 24px; padding: 15px; color: #725529; background: #FFF8EA; border: 1px solid #EFDCB2; border-radius: 10px; font-size: 12px; line-height: 1.6; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1200px) {
  .rx-header { padding-right: 4vw; padding-left: 5vw; }
  .rx-brand-card { width: 340px; min-height: 86px; }
  .rx-brand-icon { width: 70px; flex-basis: 70px; }
  .rx-brand-wordmark { max-width: 215px; }
  .rx-brand-tagline { font-size: 7.2px; }
  .rx-header__tools { gap: 12px; }
  .rx-pill { min-width: 0; height: 46px; min-height: 46px; font-size: 13px; }
  .join-page--step1 .rx-shell--narrow { margin-left: 56%; }
}

@media (max-width: 991px) {
  .rx-header { padding: 22px 22px 0; }
  .rx-brand-card { width: 290px; min-height: 74px; padding: 9px 17px; }
  .rx-brand-icon { width: 61px; flex-basis: 61px; }
  .rx-brand-wordmark { max-width: 188px; }
  .rx-brand-tagline { font-size: 6.3px; }
  .rx-header__tools { gap: 10px; padding-top: 9px; }
  .rx-pill { height: 42px; min-height: 42px; padding: 0 14px; }
  .rx-main { padding-right: 18px; padding-left: 18px; }
  .rx-card--form, .rx-card--legal { padding: 28px 28px 26px; }
  .join-page--step1 { min-height: 820px; }
  .join-page--step1 .rx-main { padding-top: 38px; }
  .join-page--step1 .rx-shell--narrow { width: min(760px, 100%); margin: 0 auto; transform: none; }
  .join-page--step1 .rx-page-heading h1 { font-size: 46px; }
  .join-page--step1 .rx-page-heading p { font-size: 19px; }
  .rx-country-panel { width: min(640px, 92vw); }
}

@media (max-width: 767px) {
  body.join-page::before { background-position: 35% top; background-size: auto 100vh; }
  .rx-header { padding: 14px 14px 0; }
  .rx-header__inner { display: block; }
  .rx-brand-card { width: 260px; min-height: 67px; margin: 0 auto; padding: 8px 15px; }
  .rx-brand-icon { width: 55px; flex-basis: 55px; }
  .rx-brand-wordmark { max-width: 168px; }
  .rx-brand-tagline { margin-top: 3px; font-size: 5.6px; }
  .rx-header__tools { justify-content: center; gap: 7px; margin-top: 10px; padding-top: 0; }
  .rx-pill { height: 36px; min-height: 36px; padding: 0 10px; font-size: 11px; }
  .rx-pill--user { max-width: 185px; }
  .rx-pill svg { width: 16px; height: 16px; }
  .rx-main { padding: 24px 12px 35px; }
  .rx-stepper { width: min(100%, 360px); }
  .rx-step { width: 36px; height: 36px; flex-basis: 36px; font-size: 13px; }
  .rx-step-line { max-width: 70px; margin: 0 8px; }
  .rx-page-heading h1 { font-size: 27px; }
  .rx-page-heading p { margin-top: 7px; font-size: 13px; }
  .rx-card--form, .rx-card--legal { padding: 24px 18px 22px; }
  .rx-card--success { padding: 34px 20px 28px; }
  .rx-actions { flex-direction: column-reverse; align-items: stretch; }
  .rx-actions .rx-btn { width: 100%; }
  .rx-summary__row { grid-template-columns: 1fr; gap: 3px; }
  .rx-legal-scroll { height: 300px; padding: 18px; }
  .dev-grid { grid-template-columns: 1fr; }

  .join-page--step1 { min-height: 760px; }
  .join-page--step1 .rx-main { padding: 24px 12px 42px; }
  .join-page--step1 .rx-step-area { margin-bottom: 30px; }
  .join-page--step1 .rx-page-heading { margin-bottom: 28px; }
  .join-page--step1 .rx-page-heading h1 { font-size: 32px; }
  .join-page--step1 .rx-page-heading p { font-size: 15px; }
  .rx-country-panel { width: 100%; padding: 30px 22px; border-radius: 18px; }
  .join-page--step1 .rx-country-label { font-size: 16px; }
  .join-page--step1 .rx-country-select__button { height: 60px; padding-left: 16px; gap: 14px; font-size: 18px; }
  .join-page--step1 .rx-country-select__button img { width: 42px; height: 28px; }
  .join-page--step1 .rx-country-select__arrow { width: 58px; height: 38px; }
  .rx-actions--step1 { margin-top: 28px; }
  .btn.rx-btn--step1 { width: min(360px, 88vw); min-width: 0; height: 62px; font-size: 18px; }
  .btn.rx-btn--step1 span { margin-left: 22px; font-size: 24px; }
}


/* Marca con asset oficial --------------------------------------------------
   El archivo display es sólo un recorte de márgenes del logo original. */
/* Componentes compartidos del registro ----------------------------------- */
.rx-field-row { display: flex; align-items: flex-end; gap: 10px; }
.rx-field-row .form-control { flex: 1 1 auto; min-width: 0; }
.rx-inline-action {
  flex: 0 0 112px;
  height: 33px;
  padding: 0 12px;
  color: #fff;
  background: var(--rx-ochre);
  border: 1px solid #B56A27;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.rx-form .form-control[readonly] {
  color: #507292;
  background: #EDF4FA;
  border-color: #D6E4F0;
}
.rx-address-note { margin: -2px 0 10px; color: #D94149; font-size: 10.5px; line-height: 1.4; }
.rx-address-note--neutral { color: #72869B; }
.rx-form textarea.rx-address-textarea { min-height: 56px; resize: none; }
.rx-info-bar__country { display: inline-flex; align-items: center; gap: 13px; min-width: 0; }
.rx-info-bar__country img { width: 29px; height: 19px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.rx-info-bar__country svg { width: 20px; height: 20px; fill: none; stroke: #1760AE; stroke-width: 1.5; }
.rx-info-bar__chevron { width: 9px; height: 9px; margin: -4px 4px 0 auto; border-right: 1.7px solid #1262BC; border-bottom: 1.7px solid #1262BC; transform: rotate(45deg); }
.rx-section__title--line::after { content: ""; flex: 1; height: 1px; margin-left: 3px; background: #A8C8EA; }
.rx-input-icon { position: relative; }
.rx-input-icon .form-control { padding-right: 38px; }
.rx-input-icon > svg { position: absolute; top: 50%; right: 12px; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: #1666C1; stroke-width: 1.6; pointer-events: none; }
.rx-captcha__badge strong, .rx-captcha__badge small { display: block; }
.rx-captcha__badge strong { color: #4B637D; font-size: 10px; font-weight: 600; }
.rx-captcha__badge small { margin-top: 1px; color: #8B98A6; font-size: 7.5px; white-space: nowrap; }

/* Pantalla 2: registro ---------------------------------------------------- */
body.join-page--step2 {
  min-height: 1660px;
  background-color: #07376d;
  background-image: url('img/backgrounds/bg_join_pantallas_2_a_la_4.png');
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: fixed;
}
body.join-page--step2::before,
body.join-page--step2::after { display: none; }
.join-page--step2 .rx-shell--registration { max-width: 760px; }
.join-page--step2 .rx-step.is-done { font-size: 0; background: rgba(2,70,126,.62); border-color: #29C8F5; box-shadow: none; }
.join-page--step2 .rx-step.is-done::before { content: "✓"; font-size: 17px; font-weight: 600; color: #45D9FF; }
.join-page--step2 .rx-context-pill svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.join-page--step2 .rx-context-pill strong { font-weight: 700; }
.join-page--step2 .rx-info-bar--country { flex-wrap: nowrap; }
.join-page--step2 .rx-form .form-control.rx-address-derived {
  color: #7496B8;
  background: #EAF3F9;
  border-color: #AFCDE7;
  opacity: 1;
}
.join-page--step2 .rx-form .form-control::placeholder { color: #7F9FC2 !important; opacity: 1; }
.join-page--step2 .g-recaptcha > div:nth-child(1) { margin: 0; }

/* Selector de entrega del paso 2. Estas reglas antes las aportaba
   celion.css; deben vivir en el skin activo para no dejar radios sin estilo. */
.delivery-methods {
  display: flex;
  gap: 12px;
}
.delivery-method-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.delivery-method-btn {
  min-width: 170px;
  border: 1px solid #D8D8D8;
  background: #F2F2F2;
  border-radius: 10px;
  color: #222;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  font-weight: 600;
  cursor: pointer;
}
.delivery-method-radio:checked + .delivery-method-btn {
  border-color: #FF7A2C;
  box-shadow: inset 0 0 0 1px #FFC8A7;
  background: #FFF7F1;
}
.delivery-method-icon {
  color: #6F6F6F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
}
.delivery-method-radio:checked + .delivery-method-btn .delivery-method-icon { color: #FF6C20; }
.delivery-method-check { margin-left: auto; color: #FF6C20; opacity: 0; }
.delivery-method-radio:checked + .delivery-method-btn .delivery-method-check { opacity: 1; }
.delivery-inventory-select {
  width: 100%;
  min-height: 50px;
  height: 50px;
  border: 1px solid #CCC;
  border-radius: 12px;
  background: #EFEFEF;
  color: #2B2B2B;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.delivery-inventory-value { color: #222; font-weight: 600; }
.delivery-inventory-arrow { margin-left: auto; color: #555; font-size: 12px; }
.delivery-inventory-help {
  margin: 8px 0 0;
  color: #8A8A8A;
  font-size: 12px;
  line-height: 1.3;
  max-width: 420px;
  background-color: #F4F5F8 !important;
  pointer-events: none;
  opacity: .4;
}

@media (min-width: 992px) {
  .join-page--step2 .rx-header__tools { gap: 13px; padding-top: 10px; }
  .join-page--step2 .rx-pill { height: 44px; min-height: 44px; padding: 0 17px; gap: 10px; font-size: 12.5px; border-color: rgba(159,201,237,.74); }
  .join-page--step2 .rx-pill--user { min-width: 190px; }
  .join-page--step2 .rx-pill--language { min-width: 143px; }
  .join-page--step2 .rx-pill svg { width: 18px; height: 18px; }

  .join-page--step2 .rx-main { padding: 25px 18px 66px; }
  .join-page--step2 .rx-page-heading { max-width: 760px; margin-bottom: 16px; }
  .join-page--step2 .rx-page-heading h1 { font-size: 38px; font-weight: 700; line-height: 1.08; letter-spacing: .025em; }
  .join-page--step2 .rx-page-heading p { margin-top: 7px; font-size: 19px; font-weight: 300; line-height: 1.35; }
  .join-page--step2 .rx-context { gap: 14px; margin-top: 15px; }
  .join-page--step2 .rx-context-pill { display: inline-flex; align-items: center; gap: 9px; min-height: 39px; padding: 0 17px; background: rgba(4,43,88,.42); border-color: rgba(196,221,245,.7); font-size: 12px; font-weight: 400; }

  .join-page--step2 .rx-step-area { margin: 16px auto 15px; }
  .join-page--step2 .rx-stepper { width: 355px; }
  .join-page--step2 .rx-step { width: 38px; height: 38px; flex-basis: 38px; font-size: 15px; }
  .join-page--step2 .rx-step-line { max-width: 64px; margin: 0 9px; background: rgba(164,201,234,.66); }
  .join-page--step2 .rx-step.is-active { background: rgba(118,65,10,.6); border-color: #FFD368; box-shadow: 0 0 0 3px rgba(242,196,94,.13), 0 0 15px rgba(242,196,94,.78); }

  .join-page--step2 .rx-card--form { width: 760px; padding: 22px 31px 24px; border-radius: 14px; box-shadow: 0 18px 45px rgba(0,31,68,.18); }
  .join-page--step2 .rx-info-bar--country { min-height: 46px; margin: 0 0 17px; padding: 10px 14px; color: #1658A6; background: #FBFDFF; border-color: #1680EE; border-radius: 7px; font-size: 13px; }
  .join-page--step2 .rx-info-bar strong { color: #164F96; }
  .join-page--step2 .rx-section { padding: 15px 0 5px; border-top-color: #9FC5E9; }
  .join-page--step2 .rx-section:first-of-type { padding-top: 0; border-top: 0; }
  .join-page--step2 .rx-section__title { gap: 9px; margin: 0 0 11px; color: #0C4A9C; font-size: 19px; font-weight: 700; line-height: 1.1; }
  .join-page--step2 .rx-section--security .rx-section__title { margin-bottom: 10px; }
  .join-page--step2 .rx-form .row { margin-right: -12px; margin-left: -12px; }
  .join-page--step2 .rx-form [class*="col-"] { padding-right: 12px; padding-left: 12px; }
  .join-page--step2 .rx-form .form-group { margin-bottom: 12px; }
  .join-page--step2 .rx-form label { margin-bottom: 5px; color: #0E4A96; font-size: 13px; font-weight: 700; line-height: 1.25; }
  .join-page--step2 .rx-required { color: #E3473F; }
  .join-page--step2 .rx-form .form-control { height: 38px; padding: 7px 12px; color: #204673; border-color: #B7D2EC; border-radius: 6px; font-size: 13px; }
  .join-page--step2 .rx-form textarea.form-control { height: auto; min-height: 70px; padding-top: 10px; }
  .join-page--step2 .rx-form select.form-control { padding-right: 28px; color: #456D95; }
  .join-page--step2 .rx-input-icon > svg { right: 11px; width: 17px; height: 17px; }
  .join-page--step2 .rx-password-wrap .form-control { padding-right: 38px; }
  .join-page--step2 .rx-eye { top: 1px; right: 1px; width: 36px; height: 36px; color: #0E61BC; }
  .join-page--step2 .rx-eye svg { width: 17px; height: 17px; }
  .join-page--step2 .rx-password-rules { min-height: 116px; margin: 0; padding: 12px 14px; background: #EAF5FF; border: 0; border-radius: 6px; }
  .join-page--step2 .rx-password-rules strong { margin-bottom: 6px; color: #0B4C9C; font-size: 11.5px; }
  .join-page--step2 .rx-password-rules ul { list-style: none; margin: 0; padding: 0; color: #0B56A8; font-size: 10.5px; line-height: 1.55; }
  .join-page--step2 .rx-password-rules li { position: relative; padding-left: 22px; }
  .join-page--step2 .rx-password-rules li::before { content: "✓"; position: absolute; left: 0; top: 1px; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; color: #fff; background: #0D66C5; border-radius: 50%; font-size: 9px; font-weight: 700; line-height: 1; }
  .join-page--step2 .rx-section--security { padding-top: 14px; }
  .join-page--step2 .rx-section--security .rx-section__title { font-size: 18px; }
  .join-page--step2 .rx-captcha { width: 380px; max-width: 380px; min-height: 78px; padding: 11px 14px; gap: 12px; border-color: #C5CFD9; border-radius: 4px; }
  .join-page--step2 .rx-captcha input { width: 25px; height: 25px; }
  .join-page--step2 .rx-captcha__copy { font-size: 13px; }
  .join-page--step2 .rx-captcha__badge svg { width: 31px; height: 31px; }
  .join-page--step2 .rx-actions--registration { margin-top: 17px; padding-top: 17px; border-top: 1px solid #9FC5E9; }
  .join-page--step2 .rx-actions--registration .rx-btn { width: 190px; min-height: 46px; padding: 10px 18px; border-radius: 8px; font-size: 14px; }
  .join-page--step2 .rx-actions--registration .rx-btn-secondary { color: #0B4D9E; border: 2px solid #0E5CC1; }
  .join-page--step2 .rx-actions--registration .rx-btn-primary { width: 200px; background: #C77A32; border-color: #B56A27; box-shadow: none; }
}

/* Pantallas 3 y 4: tarjeta central clara --------------------------------- */
.rx-language-switch { display: flex; align-items: center; gap: 13px; padding-top: 15px; color: rgba(255,255,255,.88); font-size: 14px; font-weight: 500; }
.rx-language-switch strong { color: #fff; }
.rx-language-switch a,
.rx-language-switch a:hover,
.rx-language-switch a:focus { color: inherit; text-decoration: none; }
.rx-language-switch__divider { width: 1px; height: 18px; background: rgba(255,255,255,.55); }
.rx-stepper--light { width: min(100%, 520px); }
.rx-stepper--light .rx-step { width: 44px; height: 44px; flex-basis: 44px; color: #49607A; background: #E9EEF5; border: 0; box-shadow: none; font-size: 16px; font-weight: 700; }
.rx-stepper--light .rx-step-line { max-width: none; height: 2px; margin: 0; background: #D9E1EB; }
.rx-stepper--light .rx-step.is-done { color: #fff; background: #1D79C9; border: 0; box-shadow: none; }
.rx-stepper--light .rx-step-line.is-done { background: #1D79C9; }
.rx-stepper--light .rx-step.is-active { color: #fff; background: #D8782B; border: 0; box-shadow: 0 7px 16px rgba(216,120,43,.2); }
.join-page--step3::before,
.join-page--step4::before { background-image: url('img/backgrounds/bg_join_pantallas_2_a_la_4.png'); background-position: left top; background-size: cover; }
.join-page--step3::after,
.join-page--step4::after { display: none; }
.join-page--step3 .rx-main,
.join-page--step4 .rx-main { padding-top: 0; }
.join-page--step3 .rx-shell { max-width: 980px; transform: translateX(3.5%); }
.join-page--step4 .rx-shell { max-width: 760px; transform: translateX(2%); }
.rx-card--flow { border-radius: 14px; box-shadow: 0 18px 48px rgba(0,30,67,.2); }
.rx-flow-heading { margin: 0 auto 23px; text-align: center; }
.rx-flow-heading h1 { margin: 0 0 6px; color: #0A2350; font-size: 30px; font-weight: 700; line-height: 1.15; }
.rx-flow-heading p { margin: 0; color: #687B9A; font-size: 15px; line-height: 1.45; }

/* Documentos legales públicos: estilos aislados de las pantallas del wizard. */
body.join-page--legal { display: flex; flex-direction: column; min-height: 100vh; }
body.join-page--legal .rx-main { width: 100%; flex: 1 0 auto; padding: 44px 24px 58px; }
.join-page--legal .rx-header__inner { max-width: 1180px; margin: 0 auto; }
.rx-legal-wrap { max-width: 1060px; margin: 0 auto; }
.rx-legal-hero { color: #fff; text-align: center; margin: 0 0 30px; }
.rx-legal-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #F4D37C; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.rx-legal-eyebrow::before, .rx-legal-eyebrow::after { content: ''; width: 22px; height: 1px; background: rgba(244,211,124,.65); }
.rx-legal-hero h1 { margin: 13px 0 11px; color: #fff; font-size: clamp(31px, 3.3vw, 45px); font-weight: 700; letter-spacing: .01em; line-height: 1.12; text-shadow: 0 5px 24px rgba(0,28,68,.28); }
.rx-legal-hero h1 span { color: var(--rx-cyan); }
.rx-legal-hero p { max-width: 700px; margin: 0 auto; color: rgba(246,250,255,.82); font-size: 15px; line-height: 1.65; }
.rx-legal-card { overflow: hidden; border-radius: 20px; }
.rx-legal-accent-line { height: 5px; background: linear-gradient(90deg, #3978C5 0 63%, #C77A32 63% 83%, #F2C45E 83%); }
.rx-legal-card-inner { padding: 34px 42px 44px; }
.rx-legal-meta { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 23px; border-bottom: 1px solid #E3EBF3; }
.rx-legal-meta__type { display: flex; align-items: center; gap: 9px; color: #2E5D89; font-size: 13px; font-weight: 700; }
.rx-legal-meta__type svg { width: 17px; height: 17px; stroke: #3978C5; fill: none; stroke-width: 1.8; }
.rx-legal-meta__date { color: #657B90; font-size: 12px; }
.rx-legal-meta__date strong { color: #314A61; }
.rx-legal-operator { margin: 8px 0 0; color: #55728d; font-size: 13px; line-height: 1.7; }
.rx-legal-operator strong { color: #143654; }
.rx-legal-intro { max-width: 875px; padding: 25px 0 3px; color: #455D74; font-size: 15px; line-height: 1.85; }
.rx-legal-intro p { margin: 0 0 15px; }
.rx-legal-toc { margin: 14px 0 5px; padding: 21px 25px; border: 1px solid #e1ebf4; border-radius: 14px; background: #f7faff; }
.rx-legal-toc h2 { margin: 0 0 13px; color: #1a3859; font-size: 15px; font-weight: 700; }
.rx-legal-toc ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 30px; margin: 0; padding-left: 20px; }
.rx-legal-toc li { padding-left: 2px; color: #5280a6; font-size: 12.5px; line-height: 1.75; }
.rx-legal-toc a { color: #315879; text-decoration: none; }
.rx-legal-toc a:hover, .rx-legal-toc a:focus-visible { color: #0b72bc; text-decoration: underline; }
.rx-legal-section { padding: 23px 0 20px; border-bottom: 1px solid #E9EFF5; scroll-margin-top: 18px; }
.rx-legal-section:last-child { padding-bottom: 0; border-bottom: 0; }
.rx-legal-section h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; color: #172B45; font-size: 18px; font-weight: 700; line-height: 1.35; }
.rx-legal-section__number { display: inline-flex; flex: 0 0 35px; width: 35px; height: 35px; align-items: center; justify-content: center; border: 1px solid #D7E7F5; border-radius: 10px; background: #EAF3FC; color: #326FAF; font-size: 12px; font-weight: 700; }
.rx-legal-section p, .rx-legal-section li { color: #4D6174; font-size: 14px; line-height: 1.83; }
.rx-legal-section p { margin: 0 0 11px; }
.rx-legal-section ul, .rx-legal-section ol { margin: 8px 0 12px; padding-left: 23px; }
.rx-legal-section li { padding-left: 4px; margin-bottom: 8px; }
.rx-legal-section li::marker { color: #3978C5; }
.rx-legal-section strong { color: #253F58; }
.rx-legal-section a { color: #1877b3; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rx-legal-intro strong { color: #1c3d5d; }
.rx-legal-related { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; padding: 18px 20px; background: #F4F8FC; border: 1px solid #E1EBF5; border-radius: 12px; }
.rx-legal-related p { margin: 0; color: #4C647A; font-size: 13px; }
.rx-legal-related a { color: #2C72B3; font-size: 13px; font-weight: 700; text-decoration: none; }
.rx-legal-related a:hover, .rx-legal-related a:focus-visible { text-decoration: underline; }
.rx-legal-contact-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 20px 0 18px; }
.rx-legal-contact-grid > div { min-width: 0; padding: 13px 15px; background: #f4f8fc; border: 1px solid #e0eaf4; border-radius: 9px; }
.rx-legal-contact-grid span { display: block; margin-bottom: 5px; color: #667f95; font-size: 11.5px; line-height: 1.4; }
.rx-legal-contact-grid strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.join-page--legal .rx-public-footer { padding-top: 2px; }
@media (max-width: 767px) {
  body.join-page--legal .rx-main { padding: 28px 14px 34px; }
  .join-page--legal .rx-header__inner { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .rx-legal-hero { margin-bottom: 21px; }
  .rx-legal-hero h1 { font-size: 30px; }
  .rx-legal-hero p { font-size: 13px; }
  .rx-legal-card-inner { padding: 21px 19px 26px; }
  .rx-legal-meta { align-items: flex-start; gap: 8px; }
  .rx-legal-section h2 { align-items: flex-start; gap: 10px; font-size: 16px; }
  .rx-legal-section__number { width: 31px; height: 31px; flex-basis: 31px; }
  .rx-legal-section p, .rx-legal-section li { font-size: 13px; }
  .rx-legal-intro { font-size: 13px; }
  .rx-legal-contact-grid { grid-template-columns: 1fr; }
  .rx-legal-toc { padding: 16px 18px; }
  .rx-legal-toc ol { grid-template-columns: 1fr; }
}

/* Pantalla 3 -------------------------------------------------------------- */
.join-page--step3 .rx-card--flow { padding: 35px 47px 28px; }
.join-page--step3 .rx-step-area { margin-bottom: 28px; }
.join-page--step3 .rx-legal-scroll { height: 405px; padding: 22px 28px; color: #354C70; background: #FBFCFE; border-color: #CFD9E5; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.join-page--step3 .rx-legal-scroll h2 { margin: 0 0 10px; color: #122B55; font-size: 15px; }
.join-page--step3 .rx-legal-scroll p { margin: 0 0 18px; }
.join-page--step3 .rx-terms-check { margin: 18px 0 0; padding: 0 0 18px; background: transparent; border: 0; border-bottom: 1px solid #DCE4ED; border-radius: 0; }
.join-page--step3 .rx-terms-check label { align-items: center; color: #30496C; font-size: 14px; font-weight: 400; }
.join-page--step3 .rx-terms-check input { width: 22px; height: 22px; margin: 0; }
.join-page--step3 .rx-actions { margin-top: 16px; }
.join-page--step3 .rx-btn { min-width: 190px; min-height: 51px; border-radius: 8px; }
.join-page--step3 .rx-btn-primary { min-width: 250px; }

/* Pantalla 4 -------------------------------------------------------------- */
.join-page--step4 .rx-card--flow { padding: 30px 37px 31px; text-align: center; }
.join-page--step4 .rx-step-area { margin-bottom: 28px; }
.join-page--step4 .rx-stepper--light { width: min(100%, 500px); }
.rx-success-medallion { display: flex; align-items: center; justify-content: center; width: 132px; height: 132px; margin: 0 auto 18px; background: radial-gradient(circle, #EFF7FF 0 56%, #E4F0FD 57% 69%, transparent 70%); border: 4px solid #F0A53A; border-radius: 50%; box-shadow: 0 10px 26px rgba(240,165,58,.16); }
.rx-success-medallion svg { width: 70px; height: 70px; fill: none; stroke: #0870D3; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.join-page--step4 .rx-flow-heading { margin-bottom: 17px; }
.join-page--step4 .rx-flow-heading h1 { font-size: 34px; }
.join-page--step4 .rx-flow-heading .rx-success-subtitle { color: #667AA0; font-size: 20px; }
.rx-success-copy { max-width: 620px; margin: 0 auto 8px; color: #5F74A0; font-size: 16px; line-height: 1.45; }
.rx-success-copy--small { margin-bottom: 20px; font-size: 13px; }
.rx-summary-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: 650px; margin: 0 auto 18px; padding: 18px 24px; background: #FBFDFF; border: 1px solid #D7E3EF; border-radius: 8px; text-align: left; }
.rx-summary-grid__col { padding: 0 22px; }
.rx-summary-grid__col + .rx-summary-grid__col { border-left: 1px solid #D8E2EC; }
.rx-summary-item { display: flex; align-items: center; gap: 14px; min-height: 62px; }
.rx-summary-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; color: #0D66C5; background: #EAF4FF; border-radius: 50%; }
.rx-summary-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rx-summary-label { display: block; color: #7285A4; font-size: 12px; line-height: 1.2; }
.rx-summary-value { display: block; margin-top: 4px; color: #0A2B66; font-size: 13px; font-weight: 700; line-height: 1.25; word-break: break-word; }
.rx-resend { display: inline-flex; align-items: center; gap: 7px; margin: 0 auto 20px; color: #0B73D2; font-size: 13px; text-decoration: underline; }
.rx-resend svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.join-page--step4 .rx-actions { margin-top: 0; }
.join-page--step4 .rx-btn { min-height: 54px; border-radius: 8px; font-size: 15px; }
.join-page--step4 .rx-btn-secondary { flex: 1 1 48%; }
.join-page--step4 .rx-btn-primary { flex: 1 1 52%; }

/* Footer legal del skin RegenixCell. */
.banner-footer { padding: 2px 0 0; }
.footer-legal-links {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.footer-legal-links a {
  color: #FFFFFF;
  font-weight: 400;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color .16s ease;
}
.footer-legal-links span { color: rgba(255, 255, 255, .72); }
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: #F2C45E;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.copyright-wrapper {
  background: transparent;
  border-top: 0;
  color: rgba(226, 239, 252, .72);
  text-align: center;
  text-shadow: none;
}
.copyright-wrapper .footer-container { padding: 2px 15px 14px; }
.copyright-wrapper p {
  margin: 0;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .025em;
}
@media (min-width: 992px) {
  body.join-page--step1 .footer-wrapper > .footer-container,
  body.join-page--step1 .copyright-wrapper > .footer-container {
    transform: translateX(4%);
  }
}

/* Responsive pasos 2-4 --------------------------------------------------- */
@media (max-width: 991px) {
  body.join-page--step2 { background-size: auto 100vh; }
  .join-page--step2 .rx-shell--registration { width: min(760px, 100%); }
  .join-page--step2 .rx-card--form { width: 100%; }
  .join-page--step2 .rx-context-pill { display: inline-flex; align-items: center; gap: 8px; }
  .join-page--step3 .rx-shell,
  .join-page--step4 .rx-shell { max-width: 94vw; transform: none; }
}
@media (max-width: 767px) {
  .delivery-methods { flex-direction: column; }
  .delivery-method-btn { width: 100%; min-width: 0; }
  .rx-field-row { align-items: stretch; flex-direction: column; gap: 7px; }
  .rx-inline-action { flex-basis: auto; width: 100%; height: 42px; }
  .rx-language-switch { font-size: 12px; }
  .join-page--step3 .rx-card--flow,
  .join-page--step4 .rx-card--flow { padding: 24px 18px; }
  .rx-stepper--light .rx-step { width: 36px; height: 36px; flex-basis: 36px; font-size: 13px; }
  .rx-flow-heading h1 { font-size: 25px; }
  .join-page--step3 .rx-legal-scroll { height: 320px; padding: 18px; }
  .join-page--step3 .rx-actions,
  .join-page--step4 .rx-actions { flex-direction: column; }
  .join-page--step3 .rx-btn,
  .join-page--step4 .rx-btn { width: 100%; min-width: 0; }
  .rx-summary-grid { grid-template-columns: 1fr; padding: 12px 16px; }
  .rx-summary-grid__col { padding: 0; }
  .rx-summary-grid__col + .rx-summary-grid__col { border-top: 1px solid #D8E2EC; border-left: 0; }
  .rx-success-medallion { width: 110px; height: 110px; }
}