@charset "UTF-8";
/* =========================================================
   RISELATAM — CUSTOM SCSS GLOBAL
   Version: 1.1

   Alcance:
   - Estructura general de T4
   - Header y navegación
   - Formularios y login
   - Controles comunes de RS Membership
   - Componentes generales actualmente utilizados

   Cada landing y módulo tendrá su propio CSS.
   ========================================================= */
/* 01. VARIABLES DE MARCA */
:root {
  --rise-blue: #2F4DA2;
  --rise-blue-deep: #16255B;
  --rise-yellow: #FBDC4B;
  --rise-orange: #F2903D;
  --rise-ink: #1B1D24;
  --rise-white: #FFFFFF;
  --rise-warm-white: #F7F6F2;
  --rise-transition: 0.25s ease;
}
/* 02. HEADER T4 */
#t4-header {
  background-color: var(--rise-white);
  border-bottom: 0;
}
.not-at-top #t4-header.t4-sticky {
  background-color: var(--rise-white);
  box-shadow: 0 3px 12px rgba(22, 37, 91, 0.08);
}
/* 03. LOGOTIPOS T4 */
#t4-header img.logo-img {
  max-width: 100%;
  object-fit: contain;
}
#t4-header img.logo-img-sm {
  max-width: 100%;
  object-fit: contain;
}
/* 04. NAVEGACIÓN GENERAL */
#t4-header i.fa.fa-bars.toggle-bars {
  font-size: 28px;
  line-height: 1;
  margin: 0;
  color: var(--rise-ink);
  transition: color var(--rise-transition);
}
#t4-header i.fa.fa-bars.toggle-bars:hover {
  color: var(--rise-blue);
}
#t4-header .t4-offcanvas-toggle {
  align-items: center;
  justify-content: center;
}
/* 05. HEADER MÓVIL */
@media (max-width: 767.98px) {
  #t4-header .t4-row.row {
    align-items: center;
  }
  #t4-header .t4-col.logo, #t4-header .t4-col.top-ico, #t4-header .t4-col.offcanvas-toggle {
    display: flex;
    align-items: center;
  }
  #t4-header .t4-col.logo {
    justify-content: flex-start;
  }
  #t4-header .t4-col.top-ico, #t4-header .t4-col.offcanvas-toggle {
    justify-content: flex-end;
  }
  #t4-header .navbar-brand.logo-image.logo-control, #t4-header .navbar-brand.logo-image.logo-control > a {
    display: flex;
    align-items: center;
    line-height: 1;
    margin: 0;
    padding: 0;
  }
  #t4-header img.logo-img-sm.d-block.d-sm-none {
    margin-top: 0;
  }
  #t4-header .t4-offcanvas-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
  #t4-header i.fa.fa-bars.toggle-bars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
  }
}
/* 06. OFF-CANVAS T4 */
.t4-offcanvas .t4-off-canvas-header {
  background-color: var(--rise-blue-deep);
  color: var(--rise-white);
}
.t4-offcanvas .t4-off-canvas-body .t4-module {
  margin-top: 10px;
  margin-bottom: 0;
}
/* 07. FORMULARIOS GENERALES */
.form-control {
  max-width: 100%;
}
.form_login .form-group {
  margin: 10px;
}
/* 08. REGISTRO Y RS MEMBERSHIP */
/* Checkbox de aceptación */
input#rsm_checkbox_agree0 {
  border-color: var(--rise-ink);
}
/* Botón de registro o compra heredado */
button.btn.btn-success.btn.float-end.mb-3 {
  display: block;
  width: 100%;
  padding: 20px;
  font-size: 22px;
  font-weight: 600;
}
/* Los términos legales no se ocultan globalmente. */
/* Los módulos de membresía tampoco se ocultan aquí. */
/* =========================================================
   08B. COMPATIBILIDAD DE REGISTRO Y COMPRA
   ========================================================= */
/* Ancho de las botoneras de formularios */
.formControls.btn-group {
  width: 100%;
}
/* Alineación de controles de formularios heredados */
form:not(.form-no-margin) .control-group .controls {
  margin-left: 0 !important;
}
form.form-horizontal .control-group .controls {
  margin-left: 0 !important;
}
/* Casillas de registro, compra y contacto */
.form-check-input[type="checkbox"], .contact .email-copy > input[type='checkbox'][type="checkbox"] {
  border-radius: 0.25em;
  font-size: 20px;
  border-color: var(--rise-ink);
}
/* 09. ACCESIBILIDAD */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--rise-blue);
  outline-offset: 3px;
}
/* 10. NOTIFICACIONES DEL HEADER */
/* Se incorpora el bloque funcional actualmente utilizado
   por el módulo de notificaciones. */
/* =========================================================
   08. JOMSOCIAL NOTIFICATIONS - HITLIVE CUSTOM ICONS
   Tres iconos: notificaciones, amigos y mensajes.
   Color base fijo + hover primary #2F4DA2.
   ========================================================= */
.joms-notifications.hitlive-notifications-icons {
  --hitlive-notif-icon-size: 26px;
  --hitlive-notif-base-color: #1B1D24;
  --hitlive-notif-hover-color: #2F4DA2;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  background: none !important;
  margin: 0 !important;
  padding: 0 10px !important;
  height: 44px !important;
  line-height: 1 !important;
  text-align: center;
  vertical-align: middle;
  color: var(--hitlive-notif-base-color) !important;
}
/* Cada item: campana, amigos, mensajes */
.joms-notifications.hitlive-notifications-icons .hitlive-notification-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px;
  text-decoration: none !important;
  line-height: 1 !important;
  min-width: 26px;
  min-height: 44px;
  position: relative;
  color: var(--hitlive-notif-base-color) !important;
  transition: color 0.2s ease, opacity 0.2s ease;
}
/* Iconos Material */
.joms-notifications.hitlive-notifications-icons .hitlive-notification-icon, .joms-notifications.hitlive-notifications-icons i.material-icons {
  font-family: 'Material Icons' !important;
  font-size: var(--hitlive-notif-icon-size) !important;
  line-height: 1 !important;
  color: currentColor !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  font-weight: normal !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
/* Contadores */
.joms-notifications.hitlive-notifications-icons .hitlive-notification-count {
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: currentColor !important;
  position: relative;
  top: 0;
  margin-left: 1px;
  min-width: 0;
}
/* Hover forzado al primary de la plantilla */
.joms-notifications.hitlive-notifications-icons .hitlive-notification-item:hover, .joms-notifications.hitlive-notifications-icons .hitlive-notification-item:focus, .joms-notifications.hitlive-notifications-icons .hitlive-notification-item:active {
  color: var(--hitlive-notif-hover-color) !important;
  opacity: 1 !important;
}
/* Refuerzo para evitar que Bootstrap/T4/JomSocial pinte el hover azul */
.joms-notifications.hitlive-notifications-icons .hitlive-notification-item:hover i, .joms-notifications.hitlive-notifications-icons .hitlive-notification-item:focus i, .joms-notifications.hitlive-notifications-icons .hitlive-notification-item:active i, .joms-notifications.hitlive-notifications-icons .hitlive-notification-item:hover span, .joms-notifications.hitlive-notifications-icons .hitlive-notification-item:focus span, .joms-notifications.hitlive-notifications-icons .hitlive-notification-item:active span {
  color: var(--hitlive-notif-hover-color) !important;
}
/* Evita que estilos antiguos de SVG/JomSocial afecten este módulo */
.joms-notifications.hitlive-notifications-icons svg, .joms-notifications.hitlive-notifications-icons .joms-icon {
  display: none !important;
}
/* =========================================================
   RISELATAM — HEADER v1.3

   - Alineación vertical
   - Logotipo azul sobre fondo claro
   - Logotipo blanco sobre fondo sticky
   - Contraste de navegación y controles

   No afecta formularios ni contenido del Home.
   ========================================================= */
/* 11. ALINEACIÓN GENERAL DEL HEADER */
#t4-header .t4-row.row {
  align-items: center;
}
#t4-header .t4-col {
  align-self: center;
}
#t4-header .t4-megamenu .navbar-nav {
  align-items: center;
}
#t4-header .t4-megamenu .navbar-nav > li > a, #t4-header .t4-megamenu .navbar-nav > li > .nav-link {
  display: inline-flex;
  align-items: center;
  line-height: 1.25;
}
#t4-header .t4-col.top-ico .btn {
  margin-top: 0;
  margin-bottom: 0;
}
/* 12. DIMENSIÓN Y CONTENEDOR DEL LOGOTIPO */
#t4-header .navbar-brand.logo-image.logo-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
}
#t4-header .navbar-brand.logo-image.logo-control img.logo-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 58px;
  object-fit: contain;
}
#t4-header .navbar-brand.logo-image.logo-control img.logo-img-sm {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
}
/* 13. LOGOTIPO BLANCO AL HACER SCROLL */
/* La imagen original permanece en el DOM.
   El logotipo blanco se superpone únicamente
   cuando T4 activa el estado sticky. */
#t4-header .navbar-brand.logo-image.logo-control::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/riselatam/brand/rise-logo-blanco.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.not-at-top #t4-header.t4-sticky .navbar-brand.logo-image.logo-control img.logo-img, .not-at-top #t4-header.t4-sticky .navbar-brand.logo-image.logo-control img.logo-img-sm {
  opacity: 0;
}
.not-at-top #t4-header.t4-sticky .navbar-brand.logo-image.logo-control::after {
  opacity: 1;
}
/* 14. HEADER STICKY AZUL PROFUNDO */
.not-at-top #t4-header.t4-sticky {
  background-color: var(--rise-blue-deep) !important;
  border-bottom: 0;
  box-shadow: 0 4px 16px rgba(22, 37, 91, 0.18);
}
/* Navegación principal: solo enlaces del primer nivel */
.not-at-top #t4-header.t4-sticky .t4-megamenu .navbar-nav > li > a, .not-at-top #t4-header.t4-sticky .t4-megamenu .navbar-nav > li > .nav-link {
  color: var(--rise-white) !important;
}
.not-at-top #t4-header.t4-sticky .t4-megamenu .navbar-nav > li > a:hover, .not-at-top #t4-header.t4-sticky .t4-megamenu .navbar-nav > li > a:focus, .not-at-top #t4-header.t4-sticky .t4-megamenu .navbar-nav > li > .nav-link:hover, .not-at-top #t4-header.t4-sticky .t4-megamenu .navbar-nav > li > .nav-link:focus {
  color: var(--rise-yellow) !important;
}
/* Botón Login del header */
.not-at-top #t4-header.t4-sticky .t4-col.top-ico .btn {
  background-color: var(--rise-yellow);
  border-color: var(--rise-yellow);
  color: var(--rise-blue-deep);
}
.not-at-top #t4-header.t4-sticky .t4-col.top-ico .btn:hover, .not-at-top #t4-header.t4-sticky .t4-col.top-ico .btn:focus {
  background-color: var(--rise-white);
  border-color: var(--rise-white);
  color: var(--rise-blue-deep);
}
/* Icono hamburguesa */
.not-at-top #t4-header.t4-sticky i.fa.fa-bars.toggle-bars {
  color: var(--rise-white) !important;
}
.not-at-top #t4-header.t4-sticky i.fa.fa-bars.toggle-bars:hover {
  color: var(--rise-yellow) !important;
}
/* 15. REFUERZO DE ALINEACIÓN MÓVIL */
@media (max-width: 767.98px) {
  #t4-header .t4-col.logo, #t4-header .t4-col.top-ico, #t4-header .t4-col.offcanvas-toggle {
    align-self: center;
  }
  #t4-header .navbar-brand.logo-image.logo-control {
    min-height: 44px;
  }
}
/* FIN — RISELATAM HEADER v1.3 */
/* =========================================================
   RISELATAM — HEADER v1.4
   Ajuste de iconos JomSocial en sticky oscuro
   ========================================================= */
.not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons, .not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons a, .not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons i, .not-at-top #t4-header.t4-sticky .joms-toolbar--desktop a, .not-at-top #t4-header.t4-sticky .joms-toolbar--desktop i, .not-at-top #t4-header.t4-sticky .joms-icon-notification, .not-at-top #t4-header.t4-sticky .joms-icon-users, .not-at-top #t4-header.t4-sticky .joms-icon-envelope {
  color: var(--rise-white) !important;
  fill: var(--rise-white) !important;
  transition: color var(--rise-transition), fill var(--rise-transition);
}
.not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons a:hover, .not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons a:focus, .not-at-top #t4-header.t4-sticky .joms-toolbar--desktop a:hover, .not-at-top #t4-header.t4-sticky .joms-toolbar--desktop a:focus, .not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons i:hover, .not-at-top #t4-header.t4-sticky .joms-toolbar--desktop i:hover {
  color: var(--rise-yellow) !important;
  fill: var(--rise-yellow) !important;
}
/* =========================================================
   RISELATAM — OFFCANVAS LOGO v1.5
   ========================================================= */
.t4-offcanvas .t4-off-canvas-header {
  background-color: var(--rise-blue-deep);
  padding: 18px 24px;
  min-height: 82px;
}
.t4-offcanvas .t4-off-canvas-header .navbar-brand, .t4-offcanvas .t4-off-canvas-header .navbar-brand > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.t4-offcanvas .t4-off-canvas-header .navbar-brand {
  position: relative;
  max-width: 150px;
}
.t4-offcanvas .t4-off-canvas-header .navbar-brand::before {
  content: "";
  display: block;
  width: 132px;
  height: 42px;
  background-image: url("/images/riselatam/brand/rise-logo-blanco.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.t4-offcanvas .t4-off-canvas-header .navbar-brand img.logo-img, .t4-offcanvas .t4-off-canvas-header .navbar-brand img.logo-img-sm {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}
.t4-offcanvas .t4-off-canvas-header .btn-close, .t4-offcanvas .t4-off-canvas-header .close, .t4-offcanvas .t4-off-canvas-header button.close, .t4-offcanvas .t4-off-canvas-header .t4-off-canvas-close {
  color: var(--rise-white);
  opacity: 1;
}
.t4-offcanvas .t4-off-canvas-header .btn-close:hover, .t4-offcanvas .t4-off-canvas-header .close:hover, .t4-offcanvas .t4-off-canvas-header button.close:hover, .t4-offcanvas .t4-off-canvas-header .t4-off-canvas-close:hover {
  color: var(--rise-sand);
}
/* =========================================================
   RISELATAM — ICON COLORS v1.6
   Azul oficial en header claro.
   Blanco en sticky oscuro.
   ========================================================= */
/* Header claro: iconos JomSocial */
#t4-header .joms-notifications.hitlive-notifications-icons {
  --hitlive-notif-base-color: var(--rise-blue);
  --hitlive-notif-hover-color: var(--rise-blue-deep);
}
#t4-header .joms-notifications.hitlive-notifications-icons, #t4-header .joms-notifications.hitlive-notifications-icons a, #t4-header .joms-notifications.hitlive-notifications-icons i, #t4-header .joms-toolbar--desktop a, #t4-header .joms-toolbar--desktop i {
  color: var(--rise-blue) !important;
}
#t4-header .joms-notifications.hitlive-notifications-icons a:hover, #t4-header .joms-notifications.hitlive-notifications-icons a:focus, #t4-header .joms-notifications.hitlive-notifications-icons a:hover i, #t4-header .joms-notifications.hitlive-notifications-icons a:focus i {
  color: var(--rise-blue-deep) !important;
}
/* Header claro: hamburguesa */
#t4-header i.fa.fa-bars.toggle-bars {
  color: var(--rise-blue) !important;
}
#t4-header i.fa.fa-bars.toggle-bars:hover {
  color: var(--rise-blue-deep) !important;
}
/* Sticky oscuro: conservar contraste blanco */
.not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons {
  --hitlive-notif-base-color: var(--rise-white);
  --hitlive-notif-hover-color: var(--rise-yellow);
}
.not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons, .not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons a, .not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons i, .not-at-top #t4-header.t4-sticky .joms-toolbar--desktop a, .not-at-top #t4-header.t4-sticky .joms-toolbar--desktop i {
  color: var(--rise-white) !important;
}
.not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons a:hover, .not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons a:hover i, .not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons a:focus, .not-at-top #t4-header.t4-sticky .joms-notifications.hitlive-notifications-icons a:focus i {
  color: var(--rise-yellow) !important;
}
.not-at-top #t4-header.t4-sticky i.fa.fa-bars.toggle-bars {
  color: var(--rise-white) !important;
}
.not-at-top #t4-header.t4-sticky i.fa.fa-bars.toggle-bars:hover {
  color: var(--rise-yellow) !important;
}
/* =========================================================
   RISELATAM — OFFCANVAS REAL LOGO v1.7

   T4 markup:
   .t4-off-canvas-header > a > img.logo-img
   .t4-off-canvas-header > a > img.logo-img-sm
   ========================================================= */
.t4-offcanvas .t4-off-canvas-header {
  background-color: var(--rise-blue-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 110px;
  padding: 12px 20px;
}
/* El enlace real del logotipo */
.t4-offcanvas .t4-off-canvas-header > a {
  position: relative;
  display: flex;
  flex: 0 1 186px;
  align-items: center;
  justify-content: flex-start;
  width: 186px;
  max-width: calc(100% - 42px);
  height: 74px;
  min-height: 74px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/* Logo blanco oficial de RiseLatam */
.t4-offcanvas .t4-off-canvas-header > a::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("/images/riselatam/brand/rise-logo-blanco.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
/* Ocultar solo las imágenes originales del off-canvas */
.t4-offcanvas .t4-off-canvas-header > a > img.logo-img, .t4-offcanvas .t4-off-canvas-header > a > img.logo-img-sm {
  display: none !important;
}
/* Botón de cierre, sin modificar el header principal */
.t4-offcanvas .t4-off-canvas-header > .js-offcanvas-close {
  color: #ffffff !important;
  opacity: 1;
  flex: 0 0 auto;
  margin: 0;
}
.t4-offcanvas .t4-off-canvas-header > .js-offcanvas-close:hover {
  color: var(--rise-yellow) !important;
}
/* =========================================================
   RISELATAM — OFFCANVAS HEIGHT v1.8

   Ajuste fino para igualar visualmente la franja azul
   del menú off-canvas con la altura del header general.
   ========================================================= */
.t4-offcanvas .t4-off-canvas-header {
  min-height: 84px;
  padding: 12px 20px;
}
.t4-offcanvas .t4-off-canvas-header > a {
  flex: 0 1 168px;
  width: 168px;
  max-width: calc(100% - 48px);
  height: 48px;
  min-height: 48px;
}
.t4-offcanvas .t4-off-canvas-header > a::before {
  background-size: contain;
  background-position: left center;
}
.t4-offcanvas .t4-off-canvas-header > .js-offcanvas-close {
  align-self: center;
  line-height: 1;
}