/* Final, isolated alignment and logo pass for the Monoka registration page. */
.clixy-register-page {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.clixy-register-page .clixy-auth-logo,
.clixy-register-page .clixy-auth-section,
.clixy-register-page .clixy-auth-card {
  margin-right: auto !important;
  margin-left: auto !important;
  box-sizing: border-box;
}

.clixy-register-page .clixy-auth-logo {
  display: flex;
  width: 244px;
  min-height: 100px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px !important;
  overflow: visible;
}

.clixy-register-page .clixy-auth-logo a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.clixy-register-page .clixy-auth-logo img {
  display: block;
  width: 210px;
  max-width: none;
  max-height: 94px;
  object-fit: contain;
  object-position: center;
  transform: scale(1.82);
  transform-origin: center;
  filter: brightness(.80) contrast(1.20) saturate(1.36) drop-shadow(0 5px 10px rgba(116, 6, 54, .12));
}

.clixy-register-page .clixy-auth-section {
  display: flex;
  width: 100%;
  max-width: 100%;
  padding: 0;
  align-items: flex-start;
  justify-content: center;
}

.clixy-register-page .clixy-auth-card {
  width: min(100%, 600px) !important;
}

@media (max-width: 575.98px) {
  .clixy-register-page {
    padding-right: 14px !important;
    padding-left: 14px !important;
    align-items: center !important;
  }

  .clixy-register-page .clixy-auth-logo {
    width: 204px;
    min-height: 86px;
    margin-bottom: 9px !important;
  }

  .clixy-register-page .clixy-auth-logo img {
    width: 180px;
    max-height: 80px;
    transform: scale(1.68);
  }

  .clixy-register-page .clixy-auth-section {
    width: 100% !important;
    padding: 0 !important;
  }

  .clixy-register-page .clixy-auth-card {
    width: 100% !important;
    max-width: 420px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
}

@media (max-width: 359.98px) {
  .clixy-register-page {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .clixy-register-page .clixy-auth-card {
    padding-right: 13px !important;
    padding-left: 13px !important;
  }
}

/* =========================================================
   CLIXY REGISTER - IDENTIDAD MORA PROFESIONAL
   Mantiene la composicion clara y usa el rosa como acento.
========================================================= */
.clixy-register-page {
  --register-plum: #7e3578;
  --register-plum-soft: #b94f9c;
  --register-plum-muted: #72556f;
  --register-magenta: #f00083;
  --register-pink: #f52b83;
  background:
    radial-gradient(circle at 10% 12%, rgba(126, 53, 120, .22), transparent 28rem),
    radial-gradient(circle at 91% 12%, rgba(240, 0, 131, .18), transparent 26rem),
    radial-gradient(circle at 88% 88%, rgba(185, 79, 156, .20), transparent 28rem),
    linear-gradient(138deg, #e2a9c0 0%, #f3cadb 40%, #f9dfe9 67%, #da93b1 100%);
}

.clixy-register-page .clixy-auth-bg-1 {
  background: rgba(126, 53, 120, .08);
  box-shadow: 0 0 90px rgba(126, 53, 120, .12);
}

.clixy-register-page .clixy-auth-bg-2 {
  background: rgba(240, 0, 131, .07);
  box-shadow: 0 0 90px rgba(240, 0, 131, .10);
}

.clixy-register-page .clixy-auth-logo img {
  filter: brightness(.90) contrast(1.20) saturate(1.42)
    drop-shadow(0 7px 14px rgba(126, 53, 120, .14));
}

.clixy-register-page .clixy-auth-card {
  border-color: rgba(126, 53, 120, .20);
  background:
    radial-gradient(circle at 96% 3%, rgba(240, 0, 131, .16), transparent 18rem),
    radial-gradient(circle at 3% 100%, rgba(185, 79, 156, .12), transparent 17rem),
    linear-gradient(145deg, rgba(255, 253, 254, .98), rgba(250, 241, 247, .97) 62%, rgba(237, 225, 235, .95));
  box-shadow:
    0 28px 68px rgba(101, 40, 95, .20),
    0 0 0 7px rgba(255, 249, 252, .22),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.clixy-register-page .clixy-auth-card::before {
  right: 9%;
  left: 9%;
  height: 4px;
  background: linear-gradient(90deg, #873a7f 0%, #cc4fa3 45%, #f00083 75%, #ff5aaa 100%);
  box-shadow: 0 5px 18px rgba(126, 53, 120, .19);
}

.clixy-register-page .clixy-auth-card::after {
  border-color: rgba(126, 53, 120, .045);
}

.clixy-register-page .clixy-auth-card h1 {
  color: var(--register-plum);
}

.clixy-register-page .clixy-auth-card h1::before {
  color: #ff61a8;
  border-color: rgba(255, 255, 255, .18);
  background: linear-gradient(145deg, #873a7f 0%, #c2469a 66%, #e21b79 115%);
  box-shadow:
    0 13px 28px rgba(101, 40, 95, .23),
    0 0 0 7px rgba(126, 53, 120, .07),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}

.clixy-register-page .clixy-auth-card > p {
  color: var(--register-plum-muted);
}

.clixy-register-page .clixy-input-group {
  border-color: rgba(126, 53, 120, .16);
  background: rgba(255, 255, 255, .90);
  box-shadow:
    0 7px 18px rgba(101, 40, 95, .05),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.clixy-register-page .clixy-input-group:hover {
  border-color: rgba(185, 79, 156, .34);
  background: rgba(255, 253, 254, .96);
}

.clixy-register-page .clixy-input-group > i {
  color: var(--register-plum-soft);
  border-color: rgba(126, 53, 120, .11);
  background: rgba(185, 79, 156, .08);
}

.clixy-register-page .clixy-input-group:focus-within {
  border-color: rgba(185, 79, 156, .64);
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(126, 53, 120, .08),
    0 12px 25px rgba(101, 40, 95, .09);
}

.clixy-register-page .clixy-input-group:focus-within > i {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #873a7f, #c950a2);
  box-shadow: 0 7px 15px rgba(101, 40, 95, .17);
}

.clixy-register-page .clixy-input-group input,
.clixy-register-page .clixy-select-group select {
  color: var(--register-plum);
}

.clixy-register-page .clixy-input-group input::placeholder {
  color: #9a8999;
}

.clixy-register-page .clixy-terms {
  color: #6f5d70;
  border-color: rgba(126, 53, 120, .14);
  background: rgba(255, 252, 254, .68);
}

.clixy-register-page .clixy-terms input {
  accent-color: var(--register-magenta);
}

.clixy-register-page .clixy-terms a,
.clixy-register-page .clixy-auth-footer a {
  color: #c8176c;
  text-decoration-color: rgba(200, 23, 108, .40);
}

.clixy-register-page .clixy-main-btn,
.clixy-register-page .clixy-main-btn:hover,
.clixy-register-page .clixy-main-btn:focus,
.clixy-register-page .clixy-main-btn:focus-visible,
.clixy-register-page .clixy-main-btn:active {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: linear-gradient(108deg, #873a7f 0%, #c2469a 68%, #f00083 128%) !important;
  box-shadow:
    0 15px 32px rgba(101, 40, 95, .24),
    0 5px 15px rgba(226, 27, 121, .10),
    inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}

.clixy-register-page .clixy-main-btn:hover,
.clixy-register-page .clixy-main-btn:focus-visible {
  background: linear-gradient(108deg, #98508f 0%, #d455aa 68%, #ff2f93 128%) !important;
  box-shadow:
    0 19px 38px rgba(101, 40, 95, .28),
    0 7px 18px rgba(226, 27, 121, .13) !important;
}

.clixy-register-page .clixy-auth-footer {
  color: var(--register-plum-muted);
  border-top-color: rgba(126, 53, 120, .13);
}

@media (max-width: 575.98px) {
  .clixy-register-page {
    background:
      radial-gradient(circle at 5% 5%, rgba(126, 53, 120, .15), transparent 18rem),
      radial-gradient(circle at 96% 32%, rgba(240, 0, 131, .11), transparent 19rem),
      linear-gradient(145deg, #dfa0ba 0%, #f1c4d6 56%, #d78fac 100%);
  }

  .clixy-register-page .clixy-auth-card {
    border-color: rgba(126, 53, 120, .19);
    box-shadow:
      0 21px 50px rgba(101, 40, 95, .20),
      0 0 0 4px rgba(255, 249, 252, .20),
      inset 0 1px 0 rgba(255, 255, 255, .94);
  }
}

/* Registration entrance and responsive microinteractions. */
@keyframes clixyRegisterReveal {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes clixyRegisterLogoReveal {
  from { opacity: 0; transform: translateY(-10px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.clixy-register-page .clixy-auth-card {
  animation: clixyRegisterReveal .62s cubic-bezier(.2, .78, .3, 1) both;
}

.clixy-register-page .clixy-auth-logo {
  animation: clixyRegisterLogoReveal .58s .08s cubic-bezier(.2, .78, .3, 1) both;
}

.clixy-register-page .clixy-input-group,
.clixy-register-page .clixy-input-group > i,
.clixy-register-page .clixy-terms,
.clixy-register-page .clixy-main-btn {
  transition: transform .22s cubic-bezier(.2, .75, .3, 1), box-shadow .22s ease,
    border-color .22s ease, filter .22s ease, background-position .44s ease !important;
}

.clixy-register-page .clixy-main-btn {
  background-size: 190% 100% !important;
  background-position: 0 50% !important;
}

@media (hover: hover) and (pointer: fine) {
  .clixy-register-page .clixy-input-group:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 23px rgba(101, 40, 95, .10);
  }

  .clixy-register-page .clixy-input-group:hover > i {
    transform: scale(1.07) rotate(-3deg);
  }

  .clixy-register-page .clixy-terms:hover {
    transform: translateY(-1px);
    border-color: rgba(185, 79, 156, .30);
  }

  .clixy-register-page .clixy-main-btn:hover {
    background-position: 100% 50% !important;
    transform: translateY(-2px);
    filter: saturate(1.13) brightness(1.07);
  }
}

.clixy-register-page .clixy-main-btn:active,
.clixy-register-page .clixy-terms:active {
  transform: scale(.985) !important;
}

@media (prefers-reduced-motion: reduce) {
  .clixy-register-page .clixy-auth-card,
  .clixy-register-page .clixy-auth-logo,
  .clixy-register-page .clixy-input-group,
  .clixy-register-page .clixy-input-group > i,
  .clixy-register-page .clixy-terms,
  .clixy-register-page .clixy-main-btn {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   REGISTRO Y AUTENTICACION — la misma casa que la landing.

   Estas paginas comparten hojas con la landing pero no llevan .clixy-landing,
   sino main.clixy-auth-page, asi que se quedaban fuera del cambio de lienzo:
   la portada ya era porcelana y el registro seguia en rosa saturado. Justo
   la pagina donde se decide una conversion.
   ========================================================================== */

/* #F4EDEA esta a 18 grados de matiz: salmon-beige, no rosa. Es literalmente
   el tono del que venia la queja de "amarilla y apagada", y es la ULTIMA
   parada del lienzo, o sea el color que domina la mitad inferior de la
   pantalla donde se decide la conversion. Se cambia por --cx-canvas-warm, que
   es el mismo papel en la escala pero a 345 grados, y se anade turquesa abajo
   para que el lienzo tenga tres familias y no una.
   El literal rgba(127,211,230) es --cx-teal-light: no existe
   --cx-teal-light-rgb, asi que el canal hay que escribirlo a mano. */
.clixy-auth-page {
  background:
    radial-gradient(ellipse 50rem 30rem at 88% -8%, rgba(var(--cx-brand-rgb), .13), transparent 60%),
    radial-gradient(ellipse 46rem 28rem at 6% 8%, rgba(var(--cx-accent-rgb), .12), transparent 62%),
    radial-gradient(ellipse 34rem 22rem at 50% 108%, rgba(127, 211, 230, .14), transparent 60%),
    radial-gradient(ellipse 40rem 26rem at 96% 86%, rgba(var(--cx-accent-rgb), .09), transparent 64%),
    radial-gradient(ellipse 36rem 24rem at 4% 92%, rgba(var(--cx-brand-rgb), .06), transparent 62%),
    linear-gradient(172deg, var(--cx-canvas-top) 0%, var(--cx-canvas) 46%, var(--cx-canvas-warm) 100%) !important;
}

/* Mismo boton que en la landing y que en el panel. La regla a vencer es
   .clixy-register-page .clixy-main-btn, es decir (0,2,0); se iguala y se
   gana por orden de carga al ir al final de esta misma hoja. */
.clixy-register-page .clixy-main-btn,
.clixy-auth-page .clixy-main-btn {
  background: var(--cx-grad-brand) !important;
  box-shadow: 0 10px 24px rgba(var(--cx-brand-rgb), .28) !important;
}

.clixy-register-page .clixy-main-btn:hover,
.clixy-auth-page .clixy-main-btn:hover {
  background: linear-gradient(135deg, var(--cx-brand-strong), var(--cx-brand)) !important;
  box-shadow: 0 14px 30px rgba(var(--cx-brand-rgb), .36) !important;
}

/* El checkbox de terminos es el control nativo, igual que pasaba en Agregar
   fondos. Mismo remedio: se tine sin sustituirlo. */
.clixy-auth-page input[type="checkbox"] {
  accent-color: var(--cx-brand);
  cursor: pointer;
}


/* La casilla de aceptacion de terminos es el ultimo paso antes del boton de
   registro y era un blanco al 68% sobre una tarjeta tambien blanquecina:
   literalmente no se veia que fuera una caja. En periwinkle se separa de los
   campos y mete la segunda familia en una pagina que es rosa de arriba abajo.
   Empata en (0,2,0) con la regla de la linea 222 y gana por orden dentro de
   la misma hoja. Comprobado que ni home-polish.css ni public-header.css, que
   cargan despues, tocan .clixy-terms bajo .clixy-register-page. */
.clixy-register-page .clixy-terms,
.clixy-auth-page .clixy-terms {
  color: var(--cx-ink-soft);
  border-color: rgba(var(--cx-accent-rgb), .22);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--cx-brand-rgb), .07), transparent 10rem),
    var(--cx-accent-wash);
}

.clixy-register-page .clixy-terms a,
.clixy-auth-page .clixy-terms a {
  color: var(--cx-brand-strong);
  text-decoration-color: rgba(var(--cx-brand-rgb), .45);
}