/* ===========================================================================
   LANDING CONGELADA — 24-08-2026
   ===========================================================================
   La portada esta aprobada y se revisara en su propia pasada. Mientras tanto
   no debe seguir al panel, que hoy cambia de paleta: sube el croma de la marca
   y las superficies vuelven al blanco.

   Esta hoja SOLO se carga en las paginas publicas (themes/monoka/views/blocks/
   head.blade.php), asi que redeclarar los tokens en body no toca el panel.
   Cuando le llegue el turno a la portada, este bloque se borra entero.
   =========================================================================== */
body {
  --cx-canvas: #F6DFE8;
  --cx-canvas-top: #F8EAEF;
  --cx-canvas-end: #F4D7E2;
  --cx-chrome: #F0D1DD;
  --cx-chrome-line: #E1B7C7;
  --cx-surface: #FAF2F5;
  --cx-surface-sunken: #F5E6E9;
  --cx-line-subtle: #F7EDF0;
  --cx-line: #EEDDE1;
  --cx-line-strong: #DCC6CC;
  --cx-brand: #CA446F;
  --cx-brand-strong: #B7315B;
  --cx-brand-soft: #E17597;
  --cx-brand-pale: #F4BDCF;
  --cx-brand-wash: #FCEFF4;
  --cx-ink: #221E20;
  --cx-ink-soft: #625B5D;
  --cx-ink-faint: #898083;
  --cx-plum: #8E2543;
  --cx-plum-deep: #6A1B31;
  --cx-shell: #89243E;
  --cx-shell-deep: #6E1C32;
  --cx-shell-raised: #9C2A49;
  --cx-warm: #8F6410;
  --cx-warm-vivid: #E0A32E;
  --cx-warm-wash: #FCF3E2;
  --cx-accent: #5A51C9;
  --cx-accent-vivid: #7B72E8;
  --cx-accent-wash: #EEEDFB;
  --cx-teal: #0F7490;
  --cx-teal-vivid: #2AA5C4;
  --cx-teal-wash: #E4F4F9;
  --cx-success: #147A52;
  --cx-danger: #B3261E;
  --cx-warning: #A8620A;
}

/* Clixy landing refresh
   Loaded after clixy.css so the original theme remains easy to maintain. */

:root {
  --landing-ink: #201725;
  --landing-muted: #756a79;
  --landing-pink: #f52b83;
  --landing-pink-dark: #d91f6d;
  --landing-pink-soft: #fff0f7;
  --landing-line: rgba(86, 44, 68, .11);
  --landing-surface: rgba(255, 255, 255, .88);
  --landing-shadow: 0 24px 70px rgba(117, 42, 78, .10);
}

body {
  font-family: "Karla", sans-serif;
  color: var(--landing-ink);
}

.clixy-landing {
  min-height: 100vh;
  color: var(--landing-ink);
  background:
    radial-gradient(circle at 92% 9%, rgba(251, 99, 169, .18), transparent 27%),
    radial-gradient(circle at 5% 38%, rgba(255, 184, 217, .24), transparent 26%),
    radial-gradient(circle at 77% 80%, rgba(208, 190, 255, .18), transparent 31%),
    linear-gradient(145deg, #fff7fb 0%, #fff 46%, #fff2f8 100%);
}

.clixy-landing::before,
.clixy-landing::after,
.clixy-bg-shape {
  opacity: .55;
}

.clixy-landing h1,
.clixy-landing h2,
.clixy-landing h3,
.clixy-landing h4,
.clixy-landing strong,
.clixy-register-btn,
.clixy-main-btn {
  font-family: "Sora", sans-serif;
}

/* Navigation */
.clixy-navbar {
  padding: 22px 0 10px;
}

.clixy-nav-inner {
  min-height: 68px;
  padding: 10px 16px 10px 22px;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 14px 42px rgba(109, 45, 76, .08);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}

.clixy-logo {
  display: inline-flex;
  flex: 0 0 158px;
  align-items: center;
  width: 158px;
  min-height: 46px;
}

.clixy-logo img {
  display: block;
  width: 158px !important;
  max-width: none;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
}

.clixy-nav-collapse {
  gap: 25px;
}

.clixy-nav-collapse ul,
.clixy-nav-collapse .navbar-nav {
  gap: 26px !important;
}

.clixy-nav-collapse a {
  font-size: 15px;
  font-weight: 700;
}

.clixy-register-btn {
  min-height: 44px;
  padding: 10px 21px;
  border-radius: 14px;
  font-size: 14px !important;
  box-shadow: 0 12px 28px rgba(245, 43, 131, .20);
}

/* Hero composition */
.clixy-hero {
  padding: 44px 0 34px;
}

.clixy-hero-row {
  align-items: center !important;
}

.clixy-hero-copy-column .clixy-hero-content {
  padding: 8px 36px 0 0;
}

.clixy-badge {
  min-height: 40px;
  margin-bottom: 22px;
  padding: 8px 16px;
  color: var(--landing-pink-dark);
  border-color: rgba(245, 43, 131, .14);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 26px rgba(117, 42, 78, .07);
  font-family: "Sora", sans-serif;
  font-size: 12px;
  letter-spacing: .075em;
}

.clixy-hero-copy-column .clixy-hero h1,
.clixy-hero-copy-column h1,
.clixy-hero h1 {
  max-width: 610px;
  margin-bottom: 21px;
  color: var(--landing-ink);
  font-size: clamp(48px, 4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.052em;
  text-shadow: none;
}

.clixy-hero h1 span {
  background: linear-gradient(105deg, #ed1f77 5%, #ff4f9c 60%, #bf66da 115%);
  -webkit-background-clip: text;
  background-clip: text;
}

.clixy-hero-copy-column .clixy-hero-content > p,
.clixy-hero-content > p {
  width: auto;
  max-width: 550px;
  margin-bottom: 28px;
  color: var(--landing-muted);
  font-size: 19px;
  line-height: 1.52;
}

.clixy-hero-mascot {
  filter: drop-shadow(0 20px 24px rgba(128, 44, 83, .15));
}

/* Value cards */
.clixy-features-grid {
  gap: 12px;
  margin-bottom: 24px;
}

.clixy-feature {
  min-height: 104px;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--landing-line);
  border-radius: 19px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 28px rgba(101, 40, 70, .055);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.clixy-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 43, 131, .16);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 16px 34px rgba(101, 40, 70, .09);
}

.clixy-feature-icon {
  min-width: 46px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(245, 43, 131, .12);
  border-radius: 14px;
  background: var(--landing-pink-soft);
  box-shadow: none;
  font-size: 19px;
}

.clixy-feature:hover .clixy-feature-icon {
  box-shadow: 0 10px 24px rgba(245, 43, 131, .18);
}

.clixy-feature h4 {
  margin: 1px 0 5px;
  color: var(--landing-ink);
  font-size: 14px;
  line-height: 1.35;
}

.clixy-feature p {
  color: var(--landing-muted);
  font-size: 14px;
  line-height: 1.4;
}

.clixy-trust-card {
  max-width: 500px;
  gap: 20px;
  padding: 13px 18px;
  border: 1px solid var(--landing-line);
  background: rgba(255, 255, 255, .80);
  box-shadow: 0 12px 30px rgba(101, 40, 70, .06);
}

.clixy-avatar-stack span,
.clixy-avatar-stack strong {
  width: 42px;
  height: 42px;
}

/* Login */
.clixy-login-column .clixy-login-card {
  width: 100%;
  max-width: 500px;
  margin: 0 0 0 auto;
  padding: 34px 36px 32px;
  transform: none;
  border: 1px solid rgba(95, 46, 69, .10);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 187, 219, .20), transparent 33%),
    rgba(255, 255, 255, .86);
  box-shadow: var(--landing-shadow);
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
}

.clixy-login-card::before {
  display: none;
}

.clixy-login-logo {
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  font-size: 20px;
  box-shadow: 0 12px 30px rgba(245, 43, 131, .22), 0 0 0 7px rgba(245, 43, 131, .06);
  animation: none;
}

.clixy-login-card h2 {
  margin-bottom: 6px;
  color: var(--landing-ink);
  font-size: 26px;
  letter-spacing: -.035em;
}

.clixy-login-card > p {
  margin-bottom: 23px;
  color: var(--landing-muted);
  font-size: 15px;
}

.clixy-input-group {
  height: 56px;
  margin-bottom: 12px;
  padding: 0 17px;
  border: 1px solid rgba(86, 44, 68, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
}

.clixy-input-group i {
  color: #8a7c85;
  font-size: 16px;
}

.clixy-input-group input {
  min-width: 0;
  font-family: "Karla", sans-serif;
  font-size: 16px;
}

.clixy-input-group:focus-within {
  transform: none;
  border-color: rgba(245, 43, 131, .48);
  box-shadow: 0 0 0 4px rgba(245, 43, 131, .08);
}

.clixy-form-row {
  margin: 10px 0 20px;
  color: #4e444f;
  font-size: 13px;
}

.clixy-form-row a,
.clixy-login-footer a {
  color: var(--landing-pink-dark);
  font-weight: 700;
}

.clixy-main-btn {
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(110deg, #ed277c, #fa4b9a) !important;
  box-shadow: 0 14px 30px rgba(245, 43, 131, .20);
  font-size: 16px;
}

.clixy-main-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(245, 43, 131, .26);
}

.clixy-login-card .clixy-main-btn,
.clixy-login-card .clixy-main-btn:hover,
.clixy-login-card .clixy-main-btn:focus,
.clixy-login-card .clixy-main-btn:focus-visible,
.clixy-login-card .clixy-main-btn:active {
  border-color: var(--landing-pink) !important;
  background: linear-gradient(110deg, #ed277c, #fa4b9a) !important;
  box-shadow: 0 14px 30px rgba(245, 43, 131, .20) !important;
}

.clixy-login-footer {
  margin-top: 22px;
  padding-top: 19px;
  font-size: 14px;
}

.clixy-login-footer span {
  margin-bottom: 7px;
}

/* Closing benefit bar */
.clixy-bottom-benefits {
  margin-top: 34px;
  padding: 14px;
  gap: 8px;
  border: 1px solid rgba(245, 43, 131, .12);
  border-radius: 23px;
  color: var(--landing-ink);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 16px 40px rgba(101, 40, 70, .075);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.clixy-bottom-benefits::before {
  display: none;
}

.clixy-bottom-benefits::after {
  display: none;
}

.clixy-bottom-benefits div {
  grid-template-columns: 42px 1fr;
  gap: 1px 11px;
  padding: 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
}

.clixy-bottom-benefits div:hover {
  transform: none;
  background: var(--landing-pink-soft);
}

.clixy-bottom-benefits i {
  width: 42px;
  height: 42px;
  color: var(--landing-pink);
  background: var(--landing-pink-soft);
  box-shadow: none;
  font-size: 17px;
}

.clixy-bottom-benefits strong {
  color: var(--landing-ink);
  font-family: "Sora", sans-serif;
  font-size: 13px;
}

.clixy-bottom-benefits span {
  color: var(--landing-muted);
  font-size: 12px;
}

/* Desktop composition */
@media (min-width: 1400px) {
  .clixy-landing .container {
    max-width: 1480px !important;
  }

  .clixy-hero-copy-column .clixy-hero-content {
    padding-right: 54px;
  }

  .clixy-hero-mascot {
    top: 30px;
    right: 16px;
    width: 205px;
  }

  .clixy-hero-copy-column .clixy-hero-content > p {
    max-width: calc(100% - 218px);
    font-size: 18px;
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  .clixy-hero-copy-column .clixy-hero-content {
    padding-right: 24px;
  }

  .clixy-hero-copy-column .clixy-hero h1,
  .clixy-hero-copy-column h1 {
    max-width: calc(100% - 132px);
    font-size: clamp(43px, 4.2vw, 56px);
  }

  .clixy-hero-copy-column .clixy-hero-content > p {
    max-width: calc(100% - 158px);
    font-size: 17px;
  }

  .clixy-hero-mascot {
    top: 42px;
    right: -2px;
    width: 155px;
  }
}

/* Tablet and mobile */
@media (max-width: 991.98px) {
  .clixy-navbar {
    padding: 14px 0 6px;
  }

  .clixy-nav-inner {
    min-height: 62px;
    padding: 8px 12px 8px 16px;
    border-radius: 18px;
  }

  .clixy-menu-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--landing-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .74);
    font-size: 18px;
    touch-action: manipulation;
    transition: color .12s ease, border-color .12s ease, background .12s ease, transform .12s ease;
  }

  .clixy-menu-btn:active {
    transform: scale(.94);
  }

  .clixy-menu-btn.is-open {
    color: #fff;
    border-color: var(--landing-pink);
    background: var(--landing-pink);
  }

  .clixy-nav-collapse {
    margin-top: 10px;
    padding: 15px;
    border: 1px solid var(--landing-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 44px rgba(101, 40, 70, .10);
  }

  .clixy-nav-collapse li {
    margin-bottom: 5px;
  }

  .clixy-nav-collapse a:not(.clixy-register-btn) {
    display: flex !important;
    padding: 9px 7px !important;
  }

  .clixy-register-btn {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }

  .clixy-hero {
    padding: 22px 0 28px;
  }

  .clixy-hero-copy-column .clixy-hero-content {
    padding: 0;
  }

  .clixy-login-column .clixy-login-card {
    margin: 12px auto 30px;
  }

  .clixy-hero-copy-column .clixy-hero h1,
  .clixy-hero-copy-column h1,
  .clixy-hero h1 {
    max-width: 650px;
    font-size: clamp(40px, 8vw, 55px);
  }

  .clixy-hero-content > p {
    max-width: 650px;
  }

  .clixy-hero-mascot {
    width: clamp(160px, 28vw, 215px);
    margin: -8px auto 18px;
  }

  .clixy-bottom-benefits {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575.98px) {
  .clixy-landing .container {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .clixy-logo {
    flex-basis: 126px;
    width: 126px;
    min-height: 40px;
  }

  .clixy-logo img {
    width: 126px !important;
    max-width: none;
    max-height: 44px;
  }

  .clixy-hero {
    padding-top: 14px;
  }

  .clixy-login-column .clixy-login-card {
    padding: 26px 19px 24px;
    border-radius: 22px;
  }

  .clixy-login-card h2 {
    font-size: 23px;
  }

  .clixy-form-row {
    align-items: stretch;
    gap: 10px;
  }

  .clixy-form-row a {
    text-align: left;
  }

  .clixy-hero-copy-column .clixy-hero h1,
  .clixy-hero-copy-column h1,
  .clixy-hero h1 {
    font-size: clamp(35px, 11vw, 43px);
    letter-spacing: -.045em;
  }

  .clixy-hero-content > p {
    margin-bottom: 22px;
    font-size: 16px;
  }

  .clixy-badge {
    margin-bottom: 17px;
    font-size: 10px;
  }

  .clixy-features-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .clixy-feature {
    min-height: auto;
    padding: 14px;
  }

  .clixy-trust-card {
    align-items: center;
    gap: 14px;
    border-radius: 19px;
    padding: 13px;
  }

  .clixy-avatar-stack span,
  .clixy-avatar-stack strong {
    width: 36px;
    height: 36px;
    margin-left: -17px;
    font-size: 11px;
  }

  .clixy-avatar-stack span:first-child {
    margin-left: 0;
  }

  .clixy-trust-card h4 {
    font-size: 13px;
  }

  .clixy-trust-card p {
    font-size: 12px;
  }

  .clixy-bottom-benefits {
    grid-template-columns: 1fr;
    margin-top: 24px;
    padding: 8px;
    border-radius: 19px;
  }

  .clixy-bottom-benefits div {
    padding: 10px;
  }
}

/* Landing composition polish: reserve a real lane for the mascot. */
@media (min-width: 992px) {
  .clixy-hero-copy-column .clixy-hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
    grid-template-rows: auto auto auto auto auto;
    column-gap: clamp(20px, 2vw, 34px);
    align-items: center;
    padding-right: 24px;
  }

  .clixy-hero-content > .clixy-badge {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .clixy-hero-content > h1 {
    grid-column: 1;
    grid-row: 2;
  }

  .clixy-hero-copy-column .clixy-hero-content > p {
    grid-column: 1;
    grid-row: 3;
    max-width: 100%;
  }

  .clixy-hero-content > .clixy-hero-mascot {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    justify-self: center;
    width: min(100%, 220px);
    margin: 0;
  }

  .clixy-hero-content > .clixy-features-grid {
    position: relative;
    z-index: 5;
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
  }

  .clixy-hero-content > .clixy-trust-card {
    grid-column: 1 / -1;
    grid-row: 5;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .clixy-hero-copy-column .clixy-hero-content {
    grid-template-columns: minmax(0, 1fr) 172px;
    column-gap: 16px;
  }

  .clixy-hero-content > .clixy-hero-mascot {
    width: 168px;
  }
}

/* More expressive closing benefits without losing the soft landing palette. */
.clixy-bottom-benefits {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(190, 18, 101, .20);
  background:
    radial-gradient(circle at 8% 10%, rgba(244, 44, 145, .13), transparent 15rem),
    radial-gradient(circle at 94% 85%, rgba(126, 87, 232, .12), transparent 17rem),
    linear-gradient(112deg, rgba(250, 234, 244, .97), rgba(247, 219, 237, .95) 48%, rgba(234, 222, 247, .94));
  box-shadow: 0 20px 48px rgba(91, 34, 64, .15), inset 0 1px 0 rgba(255, 255, 255, .82);
}

.clixy-bottom-benefits::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #f42c91, #c61a70 45%, #8b5cf6 72%, #38bdf8);
  box-shadow: 0 4px 16px rgba(229, 0, 125, .20);
}

.clixy-bottom-benefits > div {
  position: relative;
  border: 1px solid rgba(190, 18, 101, .13);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255, 248, 252, .88), rgba(249, 226, 240, .82));
  box-shadow: 0 9px 24px rgba(91, 34, 64, .07), inset 0 1px 0 rgba(255, 255, 255, .85);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.clixy-bottom-benefits > div:nth-child(2) {
  border-color: rgba(139, 92, 246, .17);
  background: linear-gradient(145deg, rgba(253, 248, 255, .92), rgba(238, 226, 252, .84));
}

.clixy-bottom-benefits > div:nth-child(3) {
  border-color: rgba(14, 165, 233, .16);
  background: linear-gradient(145deg, rgba(249, 253, 255, .92), rgba(224, 242, 254, .84));
}

.clixy-bottom-benefits > div:nth-child(4) {
  border-color: rgba(214, 90, 110, .18);
  background: linear-gradient(145deg, rgba(255, 251, 252, .92), rgba(255, 230, 235, .84));
}

.clixy-bottom-benefits > div:hover {
  transform: translateY(-3px);
  border-color: rgba(229, 0, 125, .28);
  background: linear-gradient(145deg, rgba(255, 250, 253, .98), rgba(250, 224, 240, .94));
  box-shadow: 0 14px 30px rgba(91, 34, 64, .13), inset 0 1px 0 #fff;
}

.clixy-bottom-benefits > div > i {
  color: #d41472;
  border: 1px solid rgba(229, 0, 125, .16);
  background: linear-gradient(145deg, #ffe8f4, #f9cfe4);
  box-shadow: 0 8px 18px rgba(190, 18, 101, .12);
}

.clixy-bottom-benefits > div:nth-child(2) > i {
  color: #7c3aed;
  border-color: rgba(124, 58, 237, .15);
  background: linear-gradient(145deg, #f4edff, #e6d8fc);
}

.clixy-bottom-benefits > div:nth-child(3) > i {
  color: #0284c7;
  border-color: rgba(2, 132, 199, .15);
  background: linear-gradient(145deg, #ebf9ff, #d5effb);
}

.clixy-bottom-benefits > div:nth-child(4) > i {
  color: #C0344F;
  border-color: rgba(234, 88, 12, .15);
  background: linear-gradient(145deg, #FFF0F3, #FFD9E0);
}

@media (max-width: 575.98px) {
  .clixy-bottom-benefits {
    padding: 10px;
  }

  .clixy-bottom-benefits > div:hover {
    transform: none;
  }
}

/* =========================================================
   FINAL MOBILE LANDING POLISH
   Adds hierarchy and depth without changing the auth flow.
========================================================= */
@media (max-width: 575.98px) {
  .clixy-navbar {
    position: relative;
    z-index: 30;
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .clixy-nav-inner {
    min-height: 64px;
    padding: 8px 10px 8px 17px;
    border-color: rgba(190, 18, 101, .22);
    border-radius: 19px;
    background:
      radial-gradient(circle at 88% 8%, rgba(229, 0, 125, .13), transparent 9rem),
      linear-gradient(115deg, rgba(255, 248, 252, .98), rgba(250, 234, 244, .96));
    box-shadow: 0 14px 34px rgba(77, 29, 49, .16), inset 0 1px 0 rgba(255, 255, 255, .88);
  }

  .clixy-logo {
    flex-basis: 132px;
    width: 132px;
  }

  .clixy-logo img {
    width: 132px !important;
    transform: none; /* era scale, zoom del PNG antiguo */
    transform-origin: left center;
  }

  .clixy-menu-btn {
    width: 43px;
    height: 43px;
    border-color: rgba(97, 42, 68, .22);
    border-radius: 13px;
    background: rgba(255, 248, 252, .92);
    box-shadow: 0 7px 18px rgba(84, 33, 57, .09), inset 0 1px 0 #fff;
  }

  .clixy-hero {
    padding-top: 17px;
  }

  .clixy-login-column .clixy-login-card {
    isolation: isolate;
    overflow: hidden;
    margin: 8px auto 32px;
    padding: 29px 20px 23px;
    border-color: rgba(190, 18, 101, .24);
    border-radius: 24px;
    background:
      radial-gradient(circle at 93% 4%, rgba(229, 0, 125, .18), transparent 12rem),
      radial-gradient(circle at 3% 98%, rgba(139, 92, 246, .10), transparent 12rem),
      linear-gradient(150deg, rgba(255, 247, 252, .98), rgba(250, 234, 244, .96) 58%, rgba(244, 218, 234, .94));
    box-shadow:
      0 24px 54px rgba(77, 29, 49, .20),
      0 0 0 5px rgba(255, 242, 249, .28),
      inset 0 1px 0 rgba(255, 255, 255, .92);
  }

  .clixy-login-column .clixy-login-card::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    right: 12%;
    left: 12%;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, #f42c91, #d10c70 48%, #9b5de5 76%, #49bce7);
    box-shadow: 0 5px 15px rgba(229, 0, 125, .23);
  }

  .clixy-login-card > h2,
  .clixy-login-card > p,
  .clixy-login-card > form,
  .clixy-login-logo {
    position: relative;
    z-index: 2;
  }

  .clixy-login-logo {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, .84);
    background: linear-gradient(145deg, #f52b91, #d80a71 62%, #b71968);
    box-shadow:
      0 14px 28px rgba(190, 18, 101, .25),
      0 0 0 7px rgba(229, 0, 125, .08),
      inset 0 1px 0 rgba(255, 255, 255, .36);
    animation: clixyMobileStarFloat 4.4s ease-in-out infinite;
  }

  .clixy-login-card h2 {
    margin-bottom: 8px;
    font-size: clamp(22px, 6.3vw, 25px);
    line-height: 1.18;
    letter-spacing: -.045em;
  }

  .clixy-login-card h2::before {
    content: "ACCESO SEGURO";
    display: block;
    margin-bottom: 7px;
    color: #c21869;
    font-family: "Sora", sans-serif;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .18em;
  }

  .clixy-login-card > p {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .clixy-input-group {
    height: 55px;
    margin-bottom: 12px;
    border-color: rgba(174, 74, 128, .22);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255, 252, 254, .96), rgba(252, 240, 247, .94));
    box-shadow: 0 7px 18px rgba(91, 34, 64, .055), inset 0 1px 0 #fff;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
  }

  .clixy-input-group i {
    color: #a36583;
  }

  .clixy-input-group:focus-within {
    transform: translateY(-1px);
    border-color: rgba(229, 0, 125, .58);
    background: #fff8fc;
    box-shadow: 0 0 0 4px rgba(229, 0, 125, .09), 0 11px 24px rgba(91, 34, 64, .09);
  }

  .clixy-input-group:focus-within i {
    color: #d10c70;
  }

  .clixy-form-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 11px 0 19px;
  }

  .clixy-form-row a {
    text-align: right;
  }

  .clixy-login-card .clixy-main-btn {
    min-height: 56px;
    border-radius: 15px;
    letter-spacing: -.01em;
    box-shadow: 0 16px 32px rgba(190, 18, 101, .27) !important;
  }

  .clixy-login-card .clixy-main-btn:active {
    transform: scale(.985);
  }

  .clixy-login-footer {
    margin-top: 20px;
    padding: 18px 12px 2px;
    border-top-color: rgba(174, 74, 128, .16);
    border-radius: 0 0 15px 15px;
    background: linear-gradient(180deg, transparent, rgba(255, 243, 249, .62));
  }

  .clixy-hero-copy-column .clixy-hero-content {
    position: relative;
    padding: 5px 2px 0;
  }

  .clixy-badge {
    min-height: 38px;
    margin-bottom: 14px;
    border-color: rgba(190, 18, 101, .20);
    background: linear-gradient(110deg, rgba(255, 247, 252, .96), rgba(247, 218, 235, .91));
    box-shadow: 0 10px 24px rgba(91, 34, 64, .10);
  }

  .clixy-hero-copy-column .clixy-hero h1,
  .clixy-hero-copy-column h1,
  .clixy-hero h1 {
    position: relative;
    margin-bottom: 16px;
    font-size: clamp(36px, 11.2vw, 44px);
    line-height: .98;
  }

  .clixy-hero-copy-column .clixy-hero-content > p,
  .clixy-hero-content > p {
    max-width: 340px;
    margin-bottom: 24px;
    color: #695662;
    font-size: 16px;
    line-height: 1.45;
  }
}

@media (max-width: 359.98px) {
  .clixy-login-column .clixy-login-card {
    padding-right: 16px;
    padding-left: 16px;
  }

  .clixy-form-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .clixy-form-row a {
    text-align: left;
  }
}

@keyframes clixyMobileStarFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-3px) rotate(4deg); }
}

/* =========================================================
   REGISTER PAGE — MATCH THE APPROVED LANDING IDENTITY
========================================================= */
/* Mobile first impression: identify the product before authentication. */
.clixy-mobile-panel-intro {
  display: none;
}

@media (max-width: 575.98px) {
  .clixy-mobile-panel-intro {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 4px 0 10px;
    padding: 13px 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 18px;
    color: #fff;
    background:
      radial-gradient(circle at 96% 0, rgba(255, 78, 162, .32), transparent 9rem),
      linear-gradient(115deg, #71366f 0%, #a7438b 58%, #db247e 120%);
    box-shadow: 0 14px 30px rgba(91, 39, 83, .21), inset 0 1px 0 rgba(255, 255, 255, .16);
  }

  .clixy-mobile-panel-intro::after {
    position: absolute;
    right: -24px;
    bottom: -35px;
    width: 92px;
    height: 92px;
    border: 15px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    content: "";
    pointer-events: none;
  }

  .clixy-mobile-panel-intro-icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 13px;
    color: #ff77b7;
    background: rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
    font-size: 17px;
  }

  .clixy-mobile-panel-intro > div {
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  .clixy-mobile-panel-intro-kicker {
    display: block;
    margin-bottom: 3px;
    color: #ffd4e7;
    font-family: "Sora", sans-serif;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .15em;
    line-height: 1.1;
  }

  .clixy-mobile-panel-intro h1 {
    margin: 0 0 3px !important;
    color: #fff !important;
    font-family: "Sora", sans-serif;
    font-size: 17px !important;
    font-weight: 800;
    letter-spacing: -.025em !important;
    line-height: 1.15 !important;
  }

  .clixy-mobile-panel-intro p {
    margin: 0 !important;
    color: rgba(255, 255, 255, .76) !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  .clixy-hero-copy-column .clixy-hero-content > .clixy-badge,
  .clixy-hero-copy-column .clixy-hero-content > h1,
  .clixy-hero-copy-column .clixy-hero-content > p {
    display: none !important;
  }

  .clixy-login-column .clixy-login-card {
    margin-top: 6px;
  }
}

.clixy-register-page {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 22px 18px 34px;
  color: var(--landing-ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(229, 0, 125, .10), transparent 27rem),
    radial-gradient(circle at 93% 13%, rgba(255, 225, 236, .42), transparent 29rem),
    radial-gradient(circle at 54% 48%, rgba(255, 244, 250, .34), transparent 33rem),
    radial-gradient(circle at 12% 82%, rgba(229, 0, 125, .06), transparent 28rem),
    radial-gradient(circle at 91% 84%, rgba(172, 139, 211, .09), transparent 30rem),
    linear-gradient(138deg, #dfb1c2 0%, #e8c4cf 38%, #f0d4dc 66%, #dcaabe 100%);
}

.clixy-register-page .clixy-auth-bg {
  position: absolute;
  z-index: -1;
  display: block;
  width: min(34vw, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.clixy-register-page .clixy-auth-bg-1 {
  top: -14%;
  left: -7%;
  border: 1px solid rgba(255, 255, 255, .26);
  background: radial-gradient(circle at 60% 60%, rgba(244, 44, 145, .16), rgba(255, 240, 248, .03) 68%);
}

.clixy-register-page .clixy-auth-bg-2 {
  right: -8%;
  bottom: -19%;
  border: 1px solid rgba(172, 139, 211, .15);
  background: radial-gradient(circle at 35% 35%, rgba(139, 92, 246, .12), rgba(255, 240, 248, .02) 68%);
}

.clixy-register-page .clixy-auth-logo {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  min-height: 104px;
  margin: 0 auto 12px;
}

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

.clixy-register-page .clixy-auth-logo img {
  width: 190px;
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(190, 18, 101, .16));
}

.clixy-register-page .clixy-auth-section {
  width: 100%;
}

.clixy-register-page .clixy-auth-card {
  position: relative;
  overflow: hidden;
  width: min(100%, 620px);
  max-width: 620px;
  padding: 30px 50px 26px;
  border: 1px solid rgba(174, 74, 128, .24);
  border-radius: 32px;
  background:
    radial-gradient(circle at 94% 4%, rgba(229, 0, 125, .16), transparent 18rem),
    radial-gradient(circle at 4% 96%, rgba(139, 92, 246, .08), transparent 17rem),
    linear-gradient(145deg, rgba(255, 244, 250, .97), rgba(250, 234, 244, .95) 58%, rgba(241, 212, 230, .92));
  box-shadow:
    0 28px 74px rgba(77, 29, 49, .18),
    0 0 0 8px rgba(250, 234, 244, .22),
    inset 0 1px 0 rgba(255, 255, 255, .80);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
}

.clixy-register-page .clixy-auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 10%;
  left: 10%;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #f42c91, #c61a70 48%, #8b5cf6 76%, #38bdf8);
  box-shadow: 0 5px 18px rgba(229, 0, 125, .22);
}

.clixy-register-page .clixy-auth-card::after {
  content: "";
  position: absolute;
  right: -72px;
  bottom: -88px;
  width: 210px;
  height: 210px;
  border: 28px solid rgba(229, 0, 125, .035);
  border-radius: 50%;
  pointer-events: none;
}

.clixy-register-page .clixy-auth-card h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 7px;
  color: #231823;
  font-family: "Sora", sans-serif;
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -.045em;
}

.clixy-register-page .clixy-auth-card h1::before {
  content: "\2726";
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 16px;
  background: linear-gradient(145deg, #f42c91, var(--landing-mx-pink) 56%, var(--landing-mx-pink-dark));
  box-shadow: 0 12px 25px rgba(190, 18, 101, .24), 0 0 0 6px rgba(229, 0, 125, .07);
  font-size: 21px;
  line-height: 1;
}

.clixy-register-page .clixy-auth-card > p {
  position: relative;
  z-index: 1;
  max-width: 390px;
  margin: 0 auto 20px;
  color: #756a79;
  font-size: 15px;
  line-height: 1.45;
}

.clixy-register-page #signUpForm,
.clixy-register-page .clixy-auth-footer {
  position: relative;
  z-index: 1;
}

.clixy-register-page .clixy-input-group {
  height: 53px;
  margin-bottom: 11px;
  padding: 0 16px;
  border: 1px solid rgba(174, 74, 128, .20);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 250, 253, .96), rgba(249, 232, 242, .91));
  box-shadow: 0 8px 20px rgba(91, 34, 64, .045), inset 0 1px 0 rgba(255, 255, 255, .90);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.clixy-register-page .clixy-input-group:hover {
  border-color: rgba(229, 0, 125, .30);
  background: #fff7fb;
}

.clixy-register-page .clixy-input-group:focus-within {
  transform: translateY(-1px);
  border-color: var(--landing-mx-pink);
  background: #fff9fc;
  box-shadow: 0 0 0 4px rgba(229, 0, 125, .09), 0 12px 25px rgba(91, 34, 64, .08);
}

.clixy-register-page .clixy-input-group > i {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 11px;
  color: #b04077;
  border: 1px solid rgba(229, 0, 125, .10);
  border-radius: 10px;
  background: rgba(250, 225, 239, .76);
  font-size: 15px;
}

.clixy-register-page .clixy-input-group:focus-within > i {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #f42c91, var(--landing-mx-pink-dark));
  box-shadow: 0 7px 15px rgba(190, 18, 101, .18);
}

.clixy-register-page .clixy-input-group input,
.clixy-register-page .clixy-select-group select {
  min-width: 0;
  color: #332531;
  font-size: 16px;
  font-weight: 600;
}

.clixy-register-page .clixy-input-group input::placeholder {
  color: #a291a0;
  font-weight: 500;
}

.clixy-register-page .clixy-select-group select {
  cursor: pointer;
}

.clixy-register-page .clixy-terms {
  align-items: flex-start;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 13px auto 16px;
  padding: 9px 13px;
  color: #6e5c6a;
  border: 1px solid rgba(174, 74, 128, .13);
  border-radius: 12px;
  background: rgba(255, 245, 251, .58);
  font-size: 14px;
}

.clixy-register-page .clixy-terms input {
  flex: 0 0 auto;
  margin-top: 3px;
  accent-color: var(--landing-mx-pink);
}

.clixy-register-page .clixy-terms a,
.clixy-register-page .clixy-auth-footer a {
  color: var(--landing-mx-pink-dark);
  text-decoration-color: rgba(189, 23, 104, .42);
  text-underline-offset: 3px;
}

.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:active {
  height: 57px;
  color: #fff !important;
  border: 0 !important;
  border-radius: 16px;
  background: linear-gradient(105deg, #f42c91 0%, var(--landing-mx-pink) 56%, var(--landing-mx-pink-dark) 100%) !important;
  box-shadow: 0 15px 32px rgba(190, 18, 101, .25) !important;
  font-family: "Sora", sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.clixy-register-page .clixy-main-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(190, 18, 101, .31) !important;
}

.clixy-register-page .clixy-auth-footer {
  margin-top: 15px;
  padding-top: 15px;
  color: #756a79;
  border-top: 1px solid rgba(174, 74, 128, .13);
  font-size: 14px;
}

@media (max-width: 575.98px) {
  .clixy-register-page {
    padding: 12px 12px 24px;
    background:
      radial-gradient(circle at 8% 5%, rgba(229, 0, 125, .09), transparent 17rem),
      radial-gradient(circle at 94% 29%, rgba(255, 222, 235, .37), transparent 19rem),
      linear-gradient(150deg, #ddaebe 0%, #e8c4cf 54%, #d7a4b7 100%);
  }

  .clixy-register-page .clixy-auth-logo {
    width: 176px;
    min-height: 78px;
    margin-bottom: 7px;
  }

  .clixy-register-page .clixy-auth-logo img {
    width: 160px;
    max-height: 76px;
  }

  .clixy-register-page .clixy-auth-card {
    padding: 24px 16px 22px;
    border-radius: 25px;
    box-shadow: 0 20px 52px rgba(77, 29, 49, .19), 0 0 0 4px rgba(250, 234, 244, .22);
  }

  .clixy-register-page .clixy-auth-card h1 {
    font-size: 27px;
  }

  .clixy-register-page .clixy-auth-card h1::before {
    width: 43px;
    height: 43px;
    margin-bottom: 10px;
    border-radius: 14px;
    font-size: 18px;
  }

  .clixy-register-page .clixy-auth-card > p {
    margin-bottom: 17px;
    font-size: 14px;
  }

  .clixy-register-page .clixy-input-group {
    height: 52px;
    padding: 0 12px;
  }

  .clixy-register-page .clixy-input-group > i {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    margin-right: 9px;
  }

  .clixy-register-page .clixy-terms {
    justify-content: flex-start;
    padding: 8px 9px;
    font-size: 13px;
    text-align: left;
  }

  .clixy-register-page .clixy-main-btn {
    height: 55px;
    font-size: 15px;
  }
}

/* Compact registration composition: centered without falling below the first viewport. */
@media (min-width: 576px) {
  .clixy-register-page {
    justify-content: center;
    padding-top: 14px;
    padding-bottom: 18px;
  }

  .clixy-register-page .clixy-auth-logo {
    width: 176px;
    min-height: 72px;
    margin-bottom: 7px;
    overflow: visible;
  }

  .clixy-register-page .clixy-auth-logo img {
    width: 158px;
    max-height: 70px;
    transform: scale(1.58);
    transform-origin: center;
    filter: contrast(1.08) saturate(1.22) drop-shadow(0 10px 18px rgba(190, 18, 101, .18));
  }

  .clixy-register-page .clixy-auth-card {
    max-width: 600px;
    padding: 22px 46px 18px;
    border-radius: 29px;
  }

  .clixy-register-page .clixy-auth-card h1 {
    margin-bottom: 5px;
    font-size: 28px;
  }

  .clixy-register-page .clixy-auth-card h1::before {
    width: 41px;
    height: 41px;
    margin-bottom: 8px;
    border-radius: 13px;
    font-size: 18px;
  }

  .clixy-register-page .clixy-auth-card > p {
    margin-bottom: 15px;
    font-size: 14px;
  }

  .clixy-register-page .clixy-input-group {
    height: 47px;
    margin-bottom: 8px;
    border-radius: 14px;
  }

  .clixy-register-page .clixy-input-group > i {
    flex-basis: 31px;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    font-size: 14px;
  }

  .clixy-register-page .clixy-terms {
    margin-top: 9px;
    margin-bottom: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .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:active {
    height: 52px;
  }

  .clixy-register-page .clixy-auth-footer {
    margin-top: 11px;
    padding-top: 11px;
  }
}

@media (min-width: 576px) and (max-height: 760px) {
  .clixy-register-page {
    justify-content: flex-start;
  }
}

/* =========================================================
   FINAL PROPORTION PASS
   Tighter rhythm, stronger branding and better first viewport.
========================================================= */

.clixy-logo {
  overflow: visible;
}

.clixy-logo img {
  transform: none; /* era scale, zoom del PNG antiguo */
  transform-origin: left center;
}

.clixy-navbar {
  padding-top: 16px;
  padding-bottom: 7px;
}

.clixy-nav-inner {
  min-height: 66px;
}

.clixy-hero {
  padding-top: 25px;
  padding-bottom: 30px;
}

.clixy-badge {
  margin-bottom: 17px;
}

.clixy-hero-copy-column .clixy-hero h1,
.clixy-hero-copy-column h1,
.clixy-hero h1 {
  margin-bottom: 16px;
}

.clixy-hero-copy-column .clixy-hero-content > p,
.clixy-hero-content > p {
  margin-bottom: 21px;
  color: #6f6271;
  font-size: 18.5px;
  line-height: 1.46;
}

.clixy-features-grid {
  gap: 11px 13px;
  margin-bottom: 18px;
}

.clixy-feature {
  min-height: 94px;
  padding: 14px 15px;
}

.clixy-feature-icon {
  min-width: 44px;
  width: 44px;
  height: 44px;
}

.clixy-feature h4 {
  font-size: 14.5px;
}

.clixy-feature p {
  font-size: 14px;
}

.clixy-trust-card {
  min-height: 66px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.clixy-login-column .clixy-login-card {
  max-width: 490px;
  padding: 32px 35px 29px;
  box-shadow:
    0 24px 62px rgba(145, 48, 94, .13),
    0 0 0 7px rgba(255, 255, 255, .30);
}

.clixy-login-logo {
  margin-bottom: 14px;
}

.clixy-login-card > p {
  margin-bottom: 20px;
}

.clixy-login-footer {
  margin-top: 19px;
  padding-top: 17px;
}

.clixy-bottom-benefits {
  margin-top: 26px;
}

@media (min-width: 1400px) {
  .clixy-hero-copy-column .clixy-hero-content {
    padding-right: 46px;
  }

  .clixy-hero-mascot {
    top: 17px;
    right: 12px;
    width: 210px;
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  .clixy-logo img {
    transform: none; /* era scale, zoom del PNG antiguo */
  }

  .clixy-hero {
    padding-top: 20px;
  }

  .clixy-hero-mascot {
    top: 27px;
  }

  .clixy-login-column .clixy-login-card {
    padding-right: 28px;
    padding-left: 28px;
  }
}

@media (max-width: 991.98px) {
  .clixy-navbar {
    padding-top: 11px;
    padding-bottom: 4px;
  }

  .clixy-logo img {
    transform: none; /* era scale, zoom del PNG antiguo */
  }

  .clixy-hero {
    padding-top: 13px;
  }

  .clixy-login-column .clixy-login-card {
    margin-top: 9px;
    margin-bottom: 24px;
  }

  .clixy-hero-content > p {
    font-size: 17px;
  }
}

@media (max-width: 575.98px) {
  .clixy-logo {
    flex-basis: 120px;
    width: 120px;
  }

  .clixy-logo img {
    width: 120px !important;
    transform: none; /* era scale, zoom del PNG antiguo */
  }

  .clixy-nav-inner {
    min-height: 60px;
  }

  .clixy-hero {
    padding-top: 10px;
  }

  .clixy-login-column .clixy-login-card {
    padding: 24px 18px 22px;
  }

  .clixy-hero-content > p {
    margin-bottom: 18px;
    font-size: 16px;
  }

  .clixy-features-grid {
    margin-bottom: 14px;
  }

  .clixy-feature {
    min-height: 82px;
  }

  .clixy-trust-card {
    min-height: 60px;
  }
}

/* Final logo visibility pass. Keep the original aspect ratio and compensate
   for transparent space inside the uploaded artwork on every viewport. */
.clixy-logo {
  flex-basis: 174px;
  width: 174px;
}

.clixy-logo img {
  width: 174px !important;
  transform: none; /* era scale, zoom del PNG antiguo */
  filter: contrast(1.06) saturate(1.12) drop-shadow(0 7px 14px rgba(116, 6, 54, .10));
}

.clixy-register-page .clixy-auth-logo {
  width: 220px;
  min-height: 94px;
  overflow: visible;
}

.clixy-register-page .clixy-auth-logo img {
  width: 190px;
  max-height: 88px;
  object-fit: contain;
  transform: scale(1.66);
  transform-origin: center;
  filter: contrast(1.08) saturate(1.18) drop-shadow(0 10px 18px rgba(190, 18, 101, .16));
}

@media (max-width: 991.98px) {
  .clixy-logo {
    flex-basis: 150px;
    width: 150px;
  }

  .clixy-logo img {
    width: 150px !important;
    transform: none; /* era scale, zoom del PNG antiguo */
  }
}

@media (max-width: 575.98px) {
  .clixy-logo {
    flex-basis: 138px;
    width: 138px;
  }

  .clixy-logo img {
    width: 138px !important;
    max-height: 48px;
    transform: none; /* era scale, zoom del PNG antiguo */
  }

  .clixy-register-page .clixy-auth-logo {
    width: 190px;
    min-height: 82px;
  }

  .clixy-register-page .clixy-auth-logo img {
    width: 170px;
    max-height: 78px;
    transform: scale(1.58);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clixy-landing *,
  .clixy-landing *::before,
  .clixy-landing *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   COLOR & MOTION LAYER
   More personality without sacrificing readability.
========================================================= */

.clixy-landing {
  background:
    radial-gradient(circle at 8% 14%, rgba(255, 70, 157, .22), transparent 25%),
    radial-gradient(circle at 88% 11%, rgba(255, 116, 183, .28), transparent 28%),
    radial-gradient(circle at 54% 35%, rgba(195, 141, 255, .13), transparent 26%),
    radial-gradient(circle at 10% 76%, rgba(255, 185, 217, .32), transparent 25%),
    radial-gradient(circle at 91% 80%, rgba(136, 207, 255, .15), transparent 28%),
    linear-gradient(145deg, #fff2f8 0%, #fffafd 35%, #fff 57%, #fff0f7 100%);
}

.clixy-landing::before {
  width: 480px;
  height: 480px;
  top: 90px;
  right: -180px;
  opacity: .62;
  background: rgba(255, 68, 154, .22);
}

.clixy-landing::after {
  width: 390px;
  height: 390px;
  left: -150px;
  bottom: 40px;
  opacity: .60;
  background: rgba(204, 129, 255, .16);
}

.clixy-navbar::after {
  height: 2px;
  opacity: .70;
  background: linear-gradient(90deg, transparent 5%, #ff3c91 34%, #c56ee6 58%, #73c6ef 76%, transparent 96%);
  filter: none;
}

.clixy-nav-inner {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .92), rgba(255, 240, 248, .86) 65%, rgba(248, 232, 255, .84));
}

.clixy-nav-inner::before {
  content: "";
  position: absolute;
  top: -80%;
  left: -18%;
  width: 20%;
  height: 260%;
  pointer-events: none;
  opacity: .45;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
  transform: rotate(16deg);
  animation: clixyNavShine 9s ease-in-out infinite;
}

.clixy-badge {
  color: #bd1e64;
  border-color: rgba(245, 43, 131, .20);
  background: linear-gradient(110deg, rgba(255, 255, 255, .94), rgba(255, 226, 241, .88));
  box-shadow: 0 12px 30px rgba(217, 31, 109, .11);
}

.clixy-badge i {
  animation: clixyStarBeat 2.8s ease-in-out infinite;
}

.clixy-hero-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  top: 36px;
  right: -34px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .72;
  background: radial-gradient(circle, rgba(255, 178, 214, .30), rgba(211, 150, 255, .10) 47%, transparent 70%);
  filter: blur(3px);
  animation: clixyAmbientPulse 6s ease-in-out infinite;
}

.clixy-hero-mascot {
  isolation: isolate;
}

.clixy-hero-mascot::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -2;
  width: 92%;
  aspect-ratio: 1;
  left: 4%;
  top: 10%;
  border: 1px solid rgba(255, 67, 151, .16);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .90), transparent 28%),
    linear-gradient(145deg, rgba(255, 209, 231, .68), rgba(230, 205, 255, .42));
  box-shadow: 0 22px 60px rgba(204, 65, 132, .16);
  animation: clixyMascotHalo 5s ease-in-out infinite;
}

.clixy-hero-mascot::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 72%;
  height: 18px;
  left: 14%;
  bottom: 5%;
  border-radius: 50%;
  background: rgba(125, 42, 83, .14);
  filter: blur(12px);
}

.clixy-hero-mascot img {
  position: relative;
  z-index: 2;
}

.clixy-mascot-orbit {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 12px 28px rgba(111, 38, 73, .20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.clixy-mascot-orbit-instagram {
  top: 15%;
  left: -8%;
  background: linear-gradient(145deg, #a855f7, #f02d82, #ff9d3d);
  animation: clixyOrbitFloatA 4.2s ease-in-out infinite;
}

.clixy-mascot-orbit-heart {
  top: 42%;
  right: -8%;
  color: #f52b83;
  background: rgba(255, 255, 255, .90);
  animation: clixyOrbitFloatB 3.8s ease-in-out infinite;
}

.clixy-mascot-orbit-growth {
  right: 2%;
  bottom: 12%;
  color: #fff;
  background: linear-gradient(145deg, #58bce8, #8e76ef);
  animation: clixyOrbitFloatA 4.6s .4s ease-in-out infinite;
}

.clixy-feature {
  position: relative;
  overflow: hidden;
}

.clixy-feature::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  right: -45px;
  bottom: -55px;
  border-radius: 50%;
  opacity: .42;
  pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}

.clixy-feature:nth-child(1) {
  border-color: rgba(245, 43, 131, .16);
  background: linear-gradient(135deg, rgba(255, 255, 255, .90), rgba(255, 231, 243, .76));
}

.clixy-feature:nth-child(1)::after {
  background: #ff8fbe;
}

.clixy-feature:nth-child(2) {
  border-color: rgba(151, 94, 225, .15);
  background: linear-gradient(135deg, rgba(255, 255, 255, .90), rgba(241, 232, 255, .75));
}

.clixy-feature:nth-child(2) .clixy-feature-icon {
  color: #8d54d7;
  border-color: rgba(141, 84, 215, .14);
  background: #f3eaff;
}

.clixy-feature:nth-child(2)::after {
  background: #c49bf5;
}

.clixy-feature:nth-child(3) {
  border-color: rgba(214, 90, 110, .16);
  background: linear-gradient(135deg, rgba(255, 255, 255, .90), rgba(255, 233, 237, .74));
}

.clixy-feature:nth-child(3) .clixy-feature-icon {
  color: #C94F63;
  border-color: rgba(201, 79, 99, .16);
  background: #FFF0F3;
}

.clixy-feature:nth-child(3)::after {
  background: #FFB6C2;
}

.clixy-feature:nth-child(4) {
  border-color: rgba(66, 161, 211, .14);
  background: linear-gradient(135deg, rgba(255, 255, 255, .90), rgba(229, 246, 255, .75));
}

.clixy-feature:nth-child(4) .clixy-feature-icon {
  color: #3198cd;
  border-color: rgba(49, 152, 205, .14);
  background: #e8f7ff;
}

.clixy-feature:nth-child(4)::after {
  background: #8bd7fa;
}

.clixy-feature:hover::after {
  opacity: .65;
  transform: scale(1.28);
}

.clixy-trust-card {
  background:
    linear-gradient(110deg, rgba(255, 255, 255, .92), rgba(255, 230, 242, .83) 62%, rgba(241, 229, 255, .78));
}

.clixy-login-column .clixy-login-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 102, 173, .22), transparent 30%),
    radial-gradient(circle at 5% 92%, rgba(196, 128, 238, .13), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 239, 247, .90));
  border-color: rgba(231, 68, 139, .16);
  box-shadow:
    0 28px 75px rgba(145, 48, 94, .14),
    0 0 0 8px rgba(255, 255, 255, .32);
}

.clixy-login-card::before {
  content: "";
  display: block;
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -80px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .55;
  background: linear-gradient(145deg, rgba(255, 74, 157, .30), rgba(197, 110, 230, .18));
  filter: blur(28px);
  animation: clixyLoginGlow 7s ease-in-out infinite;
}

.clixy-input-group {
  background: rgba(255, 255, 255, .80);
}

.clixy-input-group:hover {
  border-color: rgba(245, 43, 131, .25);
  background: rgba(255, 255, 255, .96);
}

.clixy-login-card .clixy-main-btn {
  position: relative;
  overflow: hidden;
}

.clixy-login-card .clixy-main-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .28) 45%, transparent 65%);
  transform: translateX(-120%);
  animation: clixyButtonShine 4.8s ease-in-out infinite;
}

.clixy-bottom-benefits {
  background:
    linear-gradient(110deg, rgba(255, 255, 255, .90), rgba(255, 224, 240, .82) 45%, rgba(235, 228, 255, .78) 73%, rgba(226, 246, 255, .76));
  border-color: rgba(226, 73, 143, .16);
}

@keyframes clixyNavShine {
  0%, 68%, 100% { left: -22%; }
  82% { left: 112%; }
}

@keyframes clixyStarBeat {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.16) rotate(8deg); }
}

@keyframes clixyAmbientPulse {
  0%, 100% { transform: scale(.94); opacity: .55; }
  50% { transform: scale(1.08); opacity: .82; }
}

@keyframes clixyMascotHalo {
  0%, 100% { transform: rotate(-3deg) scale(.96); }
  50% { transform: rotate(3deg) scale(1.04); }
}

@keyframes clixyOrbitFloatA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg); }
  50% { transform: translate3d(0, -9px, 0) rotate(5deg); }
}

@keyframes clixyOrbitFloatB {
  0%, 100% { transform: translate3d(0, -3px, 0) rotate(5deg); }
  50% { transform: translate3d(0, 7px, 0) rotate(-5deg); }
}

@keyframes clixyLoginGlow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-22px, 18px, 0) scale(1.16); }
}

@keyframes clixyButtonShine {
  0%, 64%, 100% { transform: translateX(-120%); }
  78% { transform: translateX(120%); }
}

@media (max-width: 991.98px) {
  .clixy-hero-content::before {
    width: 330px;
    height: 330px;
    top: 110px;
    right: auto;
    left: 50%;
    margin-left: -165px;
  }

  .clixy-mascot-orbit {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .clixy-login-column .clixy-login-card {
    box-shadow: 0 20px 54px rgba(145, 48, 94, .13), 0 0 0 5px rgba(255, 255, 255, .28);
  }

  .clixy-feature::after {
    right: -54px;
    bottom: -62px;
  }

  .clixy-mascot-orbit-instagram {
    left: -3%;
  }

  .clixy-mascot-orbit-heart {
    right: -2%;
  }
}

/* =========================================================
   DUSTY ROSE + BLUSH IDENTITY
   Landing palette shared with the approved dashboard.
========================================================= */
:root {
  --landing-mx-pink: #e5007d;
  --landing-mx-pink-dark: #bd1768;
  --landing-pastel-pink: #faeaf4;
  --landing-pastel-pink-deep: #f1d4e6;
  --landing-beige: #faeaf4;
  --landing-beige-light: #fff4fa;
  --landing-warm-line: rgba(174, 74, 128, .22);
  --landing-warm-shadow: 0 24px 64px rgba(77, 29, 49, .14);
  --landing-canvas: #e7bfcc;
  --landing-canvas-deep: #d9a6b8;
}

body {
  background: var(--landing-canvas);
}

.clixy-landing {
  background:
    radial-gradient(circle at 8% 12%, rgba(229, 0, 125, .10), transparent 27rem),
    radial-gradient(circle at 93% 13%, rgba(255, 225, 236, .42), transparent 29rem),
    radial-gradient(circle at 54% 48%, rgba(255, 244, 250, .34), transparent 33rem),
    radial-gradient(circle at 12% 82%, rgba(229, 0, 125, .06), transparent 28rem),
    radial-gradient(circle at 91% 84%, rgba(172, 139, 211, .09), transparent 30rem),
    linear-gradient(138deg, #dfb1c2 0%, #e8c4cf 38%, #f0d4dc 66%, #dcaabe 100%);
}

.clixy-landing::before {
  opacity: .24;
  background: rgba(229, 0, 125, .16);
}

.clixy-landing::after {
  opacity: .30;
  background: rgba(239, 190, 211, .25);
}

.clixy-navbar::after {
  opacity: .78;
  background: linear-gradient(90deg, transparent 5%, var(--landing-mx-pink) 34%, #ca68bb 58%, #6ac4e4 76%, transparent 96%);
}

.clixy-nav-inner {
  border-color: rgba(174, 74, 128, .20);
  background:
    radial-gradient(circle at 92% 0%, rgba(229, 0, 125, .12), transparent 16rem),
    linear-gradient(105deg, rgba(255, 244, 250, .97), rgba(250, 234, 244, .95) 66%, rgba(241, 212, 230, .92));
  box-shadow: 0 16px 42px rgba(77, 29, 49, .12), inset 0 1px 0 rgba(255, 255, 255, .62);
}

.clixy-nav-collapse a:not(.clixy-register-btn) {
  color: #3c2a33;
}

.clixy-register-btn,
.clixy-register-btn:hover,
.clixy-register-btn:focus {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(105deg, #f42b91 0%, var(--landing-mx-pink) 58%, var(--landing-mx-pink-dark) 100%) !important;
  box-shadow: 0 13px 28px rgba(190, 18, 101, .24) !important;
}

.clixy-badge {
  color: var(--landing-mx-pink-dark);
  border-color: rgba(229, 0, 125, .18);
  background: linear-gradient(110deg, rgba(255, 244, 250, .97), rgba(245, 214, 232, .92));
  box-shadow: 0 12px 30px rgba(132, 60, 80, .10);
}

.clixy-hero h1 span {
  background: linear-gradient(105deg, var(--landing-mx-pink-dark) 3%, #f02a8c 58%, #b653bb 112%);
  -webkit-background-clip: text;
  background-clip: text;
}

.clixy-hero-content::before {
  background: radial-gradient(circle, rgba(245, 181, 208, .38), rgba(225, 179, 199, .16) 47%, transparent 70%);
}

.clixy-hero-mascot::before {
  border-color: rgba(229, 0, 125, .16);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 245, 251, .94), transparent 28%),
    linear-gradient(145deg, rgba(250, 218, 237, .82), rgba(235, 195, 219, .60));
  box-shadow: 0 22px 60px rgba(136, 53, 81, .16);
}

.clixy-feature {
  box-shadow: 0 12px 30px rgba(91, 53, 60, .08), inset 0 1px 0 rgba(255, 255, 255, .62);
}

.clixy-feature:nth-child(1) {
  border-color: rgba(229, 0, 125, .18);
  background: linear-gradient(135deg, rgba(255, 244, 250, .96), rgba(247, 216, 234, .90));
}

.clixy-feature:nth-child(1)::after {
  background: #ed72ab;
}

.clixy-feature:nth-child(2) {
  border-color: rgba(173, 115, 191, .16);
  background: linear-gradient(135deg, rgba(250, 234, 244, .96), rgba(235, 219, 244, .86));
}

.clixy-feature:nth-child(3) {
  border-color: rgba(213, 83, 147, .17);
  background: linear-gradient(135deg, rgba(255, 240, 248, .96), rgba(244, 207, 229, .86));
}

.clixy-feature:nth-child(4) {
  border-color: rgba(76, 158, 191, .17);
  background: linear-gradient(135deg, rgba(250, 234, 244, .96), rgba(221, 236, 246, .82));
}

.clixy-feature:hover {
  border-color: rgba(229, 0, 125, .25);
  background-color: #faeaf4;
  box-shadow: 0 18px 38px rgba(91, 53, 60, .12);
}

.clixy-feature-icon {
  color: var(--landing-mx-pink);
  border-color: rgba(229, 0, 125, .14);
  background: #fce3ee;
}

.clixy-trust-card {
  border-color: var(--landing-warm-line);
  background: linear-gradient(110deg, rgba(255, 243, 250, .96), rgba(250, 226, 240, .92) 62%, rgba(238, 207, 226, .88));
  box-shadow: 0 14px 34px rgba(92, 52, 62, .10), inset 0 1px 0 rgba(255, 255, 255, .60);
}

.clixy-avatar-stack strong {
  background: linear-gradient(135deg, #f52b91, var(--landing-mx-pink-dark));
}

.clixy-login-column .clixy-login-card {
  border-color: rgba(174, 74, 128, .24);
  background:
    radial-gradient(circle at 94% 5%, rgba(229, 0, 125, .17), transparent 19rem),
    radial-gradient(circle at 2% 96%, rgba(191, 102, 151, .16), transparent 18rem),
    linear-gradient(145deg, rgba(255, 244, 250, .97), rgba(250, 234, 244, .95) 56%, rgba(241, 212, 230, .92));
  box-shadow: var(--landing-warm-shadow), 0 0 0 8px rgba(250, 234, 244, .25), inset 0 1px 0 rgba(255, 255, 255, .68);
}

.clixy-login-card::before {
  background: linear-gradient(145deg, rgba(229, 0, 125, .26), rgba(218, 135, 174, .17));
}

.clixy-login-logo {
  background: linear-gradient(135deg, #f42c91, var(--landing-mx-pink));
  box-shadow: 0 13px 30px rgba(190, 18, 101, .24), 0 0 0 7px rgba(229, 0, 125, .07);
}

.clixy-input-group {
  border-color: rgba(174, 74, 128, .24);
  background: linear-gradient(180deg, rgba(255, 249, 253, .97), rgba(249, 232, 242, .95));
}

.clixy-input-group:hover {
  border-color: rgba(229, 0, 125, .30);
  background: #fff5fb;
}

.clixy-input-group:focus-within {
  border-color: var(--landing-mx-pink);
  box-shadow: 0 0 0 4px rgba(229, 0, 125, .10), 0 10px 24px rgba(103, 52, 68, .08);
}

.clixy-form-row a,
.clixy-login-footer a {
  color: var(--landing-mx-pink-dark);
}

.clixy-main-btn,
.clixy-main-btn:hover,
.clixy-main-btn:focus,
.clixy-login-card .clixy-main-btn,
.clixy-login-card .clixy-main-btn:hover,
.clixy-login-card .clixy-main-btn:focus,
.clixy-login-card .clixy-main-btn:active {
  border-color: transparent !important;
  background: linear-gradient(105deg, #f42c91 0%, var(--landing-mx-pink) 58%, var(--landing-mx-pink-dark) 100%) !important;
  box-shadow: 0 15px 32px rgba(190, 18, 101, .25) !important;
}

.clixy-bottom-benefits {
  border-color: rgba(229, 0, 125, .18);
  background:
    linear-gradient(110deg, rgba(255, 243, 250, .96), rgba(249, 220, 236, .92) 46%, rgba(239, 210, 230, .90) 73%, rgba(223, 225, 244, .82));
  box-shadow: 0 18px 44px rgba(91, 51, 62, .11);
}

.clixy-bottom-benefits div:hover {
  background: rgba(255, 241, 249, .78);
}

.clixy-bottom-benefits i {
  color: var(--landing-mx-pink);
  background: #fbe1ec;
}

@media (max-width: 991.98px) {
  .clixy-nav-collapse {
    border-color: var(--landing-warm-line);
    background: linear-gradient(160deg, rgba(255, 244, 250, .98), rgba(246, 219, 235, .98));
    box-shadow: 0 18px 44px rgba(93, 50, 63, .13);
  }

  .clixy-menu-btn {
    border-color: rgba(174, 74, 128, .28);
    background: rgba(255, 241, 249, .90);
  }

  .clixy-menu-btn.is-open {
    color: #fff;
    border-color: var(--landing-mx-pink);
    background: var(--landing-mx-pink);
  }
}

@media (max-width: 575.98px) {
  .clixy-landing {
    background:
      radial-gradient(circle at 8% 5%, rgba(229, 0, 125, .09), transparent 17rem),
      radial-gradient(circle at 94% 29%, rgba(255, 222, 235, .37), transparent 19rem),
      radial-gradient(circle at 38% 88%, rgba(255, 245, 251, .30), transparent 22rem),
      linear-gradient(150deg, #ddaebe 0%, #e8c4cf 54%, #d7a4b7 100%);
  }

  .clixy-login-column .clixy-login-card {
    box-shadow: 0 20px 52px rgba(77, 29, 49, .18), 0 0 0 5px rgba(250, 234, 244, .25);
  }
}

/* Final layout overrides: keep the mascot centered in a dedicated, collision-free lane. */
@media (min-width: 992px) {
  .clixy-hero-copy-column .clixy-hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
    grid-template-rows: auto auto auto auto auto;
    column-gap: clamp(20px, 2vw, 34px);
    align-items: center;
    padding-right: 24px;
  }

  .clixy-hero-content > .clixy-badge {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .clixy-hero-content > h1 {
    grid-column: 1;
    grid-row: 2;
  }

  .clixy-hero-copy-column .clixy-hero-content > p {
    grid-column: 1;
    grid-row: 3;
    max-width: 100%;
  }

  .clixy-hero-content > .clixy-hero-mascot {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    justify-self: center;
    width: min(100%, 220px);
    margin: 0;
  }

  .clixy-hero-content > .clixy-features-grid {
    position: relative;
    z-index: 5;
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
  }

  .clixy-hero-content > .clixy-trust-card {
    grid-column: 1 / -1;
    grid-row: 5;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .clixy-hero-copy-column .clixy-hero-content {
    grid-template-columns: minmax(0, 1fr) 172px;
    column-gap: 16px;
  }

  .clixy-hero-content > .clixy-hero-mascot {
    width: 168px;
  }
}

/* Final benefit-bar treatment. */
/* Mobile cascade lock: keep this after the identity layers. */
@media (max-width: 575.98px) {
  .clixy-nav-inner {
    border-color: rgba(190, 18, 101, .22);
    background:
      radial-gradient(circle at 88% 8%, rgba(229, 0, 125, .13), transparent 9rem),
      linear-gradient(115deg, rgba(255, 248, 252, .98), rgba(250, 234, 244, .96));
    box-shadow: 0 14px 34px rgba(77, 29, 49, .16), inset 0 1px 0 rgba(255, 255, 255, .88);
  }

  .clixy-login-column .clixy-login-card {
    border-color: rgba(190, 18, 101, .24);
    background:
      radial-gradient(circle at 93% 4%, rgba(229, 0, 125, .18), transparent 12rem),
      radial-gradient(circle at 3% 98%, rgba(139, 92, 246, .10), transparent 12rem),
      linear-gradient(150deg, rgba(255, 247, 252, .98), rgba(250, 234, 244, .96) 58%, rgba(244, 218, 234, .94));
    box-shadow:
      0 24px 54px rgba(77, 29, 49, .20),
      0 0 0 5px rgba(255, 242, 249, .28),
      inset 0 1px 0 rgba(255, 255, 255, .92);
  }

  .clixy-login-logo {
    border-color: rgba(255, 255, 255, .84);
    background: linear-gradient(145deg, #f52b91, #d80a71 62%, #b71968);
    box-shadow: 0 14px 28px rgba(190, 18, 101, .25), 0 0 0 7px rgba(229, 0, 125, .08), inset 0 1px 0 rgba(255, 255, 255, .36);
  }

  .clixy-input-group {
    border-color: rgba(174, 74, 128, .22);
    background: linear-gradient(180deg, rgba(255, 252, 254, .96), rgba(252, 240, 247, .94));
    box-shadow: 0 7px 18px rgba(91, 34, 64, .055), inset 0 1px 0 #fff;
  }

  .clixy-input-group:focus-within {
    border-color: rgba(229, 0, 125, .58);
    background: #fff8fc;
    box-shadow: 0 0 0 4px rgba(229, 0, 125, .09), 0 11px 24px rgba(91, 34, 64, .09);
  }

  .clixy-badge {
    border-color: rgba(190, 18, 101, .20);
    background: linear-gradient(110deg, rgba(255, 247, 252, .96), rgba(247, 218, 235, .91));
    box-shadow: 0 10px 24px rgba(91, 34, 64, .10);
  }
}

.clixy-bottom-benefits {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(190, 18, 101, .20);
  background:
    radial-gradient(circle at 8% 10%, rgba(244, 44, 145, .13), transparent 15rem),
    radial-gradient(circle at 94% 85%, rgba(126, 87, 232, .12), transparent 17rem),
    linear-gradient(112deg, rgba(250, 234, 244, .97), rgba(247, 219, 237, .95) 48%, rgba(234, 222, 247, .94));
  box-shadow: 0 20px 48px rgba(91, 34, 64, .15), inset 0 1px 0 rgba(255, 255, 255, .82);
}

.clixy-bottom-benefits::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #f42c91, #c61a70 45%, #8b5cf6 72%, #38bdf8);
  box-shadow: 0 4px 16px rgba(229, 0, 125, .20);
}

.clixy-bottom-benefits > div {
  position: relative;
  border: 1px solid rgba(190, 18, 101, .13);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255, 248, 252, .90), rgba(249, 226, 240, .84));
  box-shadow: 0 9px 24px rgba(91, 34, 64, .07), inset 0 1px 0 rgba(255, 255, 255, .85);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.clixy-bottom-benefits > div:nth-child(2) {
  border-color: rgba(139, 92, 246, .17);
  background: linear-gradient(145deg, rgba(253, 248, 255, .94), rgba(238, 226, 252, .86));
}

.clixy-bottom-benefits > div:nth-child(3) {
  border-color: rgba(14, 165, 233, .16);
  background: linear-gradient(145deg, rgba(249, 253, 255, .94), rgba(224, 242, 254, .86));
}

.clixy-bottom-benefits > div:nth-child(4) {
  border-color: rgba(214, 90, 110, .18);
  background: linear-gradient(145deg, rgba(255, 251, 252, .94), rgba(255, 230, 235, .86));
}

.clixy-bottom-benefits > div:hover {
  transform: translateY(-3px);
  border-color: rgba(229, 0, 125, .28);
  background: linear-gradient(145deg, rgba(255, 250, 253, .98), rgba(250, 224, 240, .94));
  box-shadow: 0 14px 30px rgba(91, 34, 64, .13), inset 0 1px 0 #fff;
}

.clixy-bottom-benefits > div > i {
  color: #d41472;
  border: 1px solid rgba(229, 0, 125, .16);
  background: linear-gradient(145deg, #ffe8f4, #f9cfe4);
  box-shadow: 0 8px 18px rgba(190, 18, 101, .12);
}

.clixy-bottom-benefits > div:nth-child(2) > i {
  color: #7c3aed;
  border-color: rgba(124, 58, 237, .15);
  background: linear-gradient(145deg, #f4edff, #e6d8fc);
}

.clixy-bottom-benefits > div:nth-child(3) > i {
  color: #0284c7;
  border-color: rgba(2, 132, 199, .15);
  background: linear-gradient(145deg, #ebf9ff, #d5effb);
}

.clixy-bottom-benefits > div:nth-child(4) > i {
  color: #C0344F;
  border-color: rgba(234, 88, 12, .15);
  background: linear-gradient(145deg, #FFF0F3, #FFD9E0);
}

@media (max-width: 575.98px) {
  .clixy-bottom-benefits {
    padding: 10px;
  }

  .clixy-bottom-benefits > div:hover {
    transform: none;
  }
}

/* ==========================================================================
   PUENTE AL SISTEMA DE DISENO — la cara publica y el producto, una sola marca.

   La landing tenia su propio universo: paleta --clixy-*, rosa #ff2f8b y un
   lienzo rosa polvoriento (#E7BFCC). El panel, tras varias pasadas, acabo en
   porcelana crema con el rosa como FIRMA y no como escenario, y en un rosa
   distinto (#CB336F). Eran dos marcas.

   La palanca es que toda la landing consume su color a traves de ocho
   variables. Reapuntandolas a los tokens del panel se retina la pagina
   entera sin tocar ninguna de sus 2.600 reglas.

   Aqui el lienzo SI se ve —esto es una landing, no un panel cubierto de
   tarjetas—, asi que los campos de color rinden de verdad.
   ========================================================================== */

:root {
  --clixy-pink:   var(--cx-brand);        /* era #ff2f8b, magenta encendido */
  --clixy-pink-2: var(--cx-brand-soft);   /* era #ff63b5 */
  --clixy-pink-3: var(--cx-brand-pale);   /* era #ff91cf */
  --clixy-soft:   var(--cx-brand-wash);   /* era #fff4fa */
  --clixy-soft-2: #F6E1EA;                /* era #ffe3f2; un paso mas hondo */
  --clixy-dark:   var(--cx-ink);          /* era #101828, azulado */
  --clixy-muted:  var(--cx-ink-soft);     /* era #667085, azulado */
}

/* --- El suelo deja de ser rosa ---------------------------------------- */
body {
  background:
    radial-gradient(ellipse 58rem 32rem at 88% -10%, rgba(var(--cx-brand-rgb), .13), transparent 60%),
    radial-gradient(ellipse 52rem 32rem at 6% 2%, rgba(var(--cx-accent-rgb), .11), transparent 62%),
    radial-gradient(ellipse 60rem 34rem at 98% 82%, rgba(var(--cx-accent-rgb), .09), transparent 64%),
    radial-gradient(ellipse 46rem 28rem at 2% 92%, rgba(var(--cx-brand-rgb), .05), transparent 62%),
    linear-gradient(178deg, #FDF7F8 0%, #FBEFF2 46%, var(--cx-canvas-warm, #FCF2F5) 100%) !important;
  background-attachment: fixed !important;
}

/* La guarda movil va AQUI, pegada a su regla, y no en otra seccion: en el
   panel esta misma pareja se separo y tres pasadas posteriores volvieron a
   dejar el fondo fijo en movil, donde se rompe al desplazar. */
@media (max-width: 991.98px) {
  body {
    background-attachment: scroll !important;
  }
}

/* --- Segunda y tercera capa de variables -------------------------------
   La landing no tenia una paleta, tenia tres superpuestas de pasadas
   sucesivas: --clixy-* (arriba), --landing-* y --landing-mx-*. Cada pasada
   anadio la suya sin retirar la anterior. Se reapuntan todas al mismo
   sitio; asi deja de haber tres definiciones de "el rosa de Clixy". */
:root {
  --landing-ink:               var(--cx-ink);
  --landing-muted:             var(--cx-ink-soft);
  --landing-pink:              var(--cx-brand);        /* era #f52b83 */
  --landing-pink-dark:         var(--cx-brand-strong);
  --landing-pink-soft:         var(--cx-brand-wash);
  --landing-line:              var(--cx-line);
  --landing-shadow:            var(--cx-shadow-lg);

  --landing-mx-pink:           var(--cx-brand);        /* era #e5007d */
  --landing-mx-pink-dark:      var(--cx-brand-strong);
  --landing-pastel-pink:       var(--cx-brand-wash);
  --landing-pastel-pink-deep:  #F6E1EA;
  --landing-beige:             #FBEFF2;             /* fijado: la landing no sigue al panel */
  /* Fijado al valor literal: la landing esta aprobada y no sigue al panel. */
  --landing-beige-light:       #FAECF1;
  --landing-warm-line:         var(--cx-line);
  --landing-warm-shadow:       var(--cx-shadow-lg);
  --landing-canvas:            #FBEFF2;             /* fijado: la landing no sigue al panel */
  --landing-canvas-deep:       var(--cx-canvas-warm, #FCF2F5);
}

/* --- El lienzo del hero, que iba en hexadecimales fijos ----------------
   Mismo reparto que en el panel: el color entra por las esquinas y el
   centro queda limpio para que respire el contenido. Aqui si se ve. */
.clixy-landing {
  background:
    radial-gradient(ellipse 54rem 30rem at 90% -8%, rgba(var(--cx-brand-rgb), .14), transparent 60%),
    radial-gradient(ellipse 48rem 30rem at 4% 6%, rgba(var(--cx-accent-rgb), .12), transparent 62%),
    radial-gradient(ellipse 40rem 26rem at 12% 88%, rgba(var(--cx-brand-rgb), .05), transparent 62%),
    radial-gradient(ellipse 52rem 32rem at 96% 78%, rgba(var(--cx-accent-rgb), .10), transparent 64%),
    radial-gradient(ellipse 34rem 22rem at 58% 46%, rgba(42, 165, 196, .06), transparent 60%),
    linear-gradient(172deg, #FDF7F8 0%, #FBEFF2 44%, var(--cx-canvas-warm, #FCF2F5) 100%) !important;
}

/* Los dos velos rosas sobre el lienzo ya no tienen que compensar nada. */
.clixy-landing::before {
  opacity: .18 !important;
  background: rgba(var(--cx-brand-rgb), .10) !important;
}

.clixy-landing::after {
  opacity: .20 !important;
  background: rgba(var(--cx-accent-rgb), .09) !important;
}

/* La franja bajo la cabecera vive en public-header.css, que cargan las
   cuatro paginas publicas y carga la ultima. La copia que habia aqui llevaba
   !important, y un !important de especificidad (0,1,1) le gana a una regla
   normal de (0,2,1): la portada mostraba una franja y FAQ/terminos otra.
   Retirada; el dueno es uno. */

/* La banda de beneficios era otra masa rosa, ahora la mas saturada de la
   pagina. Sobre porcelana no necesita fondo propio: basta una superficie
   apenas elevada que sostenga las cuatro tarjetas. */
.clixy-bottom-benefits {
  border: 1px solid var(--cx-line-subtle) !important;
  background:
    radial-gradient(circle at 6% 8%, rgba(var(--cx-brand-rgb), .07), transparent 16rem),
    radial-gradient(circle at 96% 92%, rgba(var(--cx-accent-rgb), .06), transparent 18rem),
    linear-gradient(110deg, rgba(255, 253, 254, .96), rgba(252, 242, 245, .92)) !important;
  box-shadow: var(--cx-shadow-sm) !important;
}

/* ==========================================================================
   MOVIMIENTO DEL HERO Y APARICIONES

   El primer intento escribia el subtitulo entero letra a letra: vaciaba la
   linea y tardaba casi un segundo en empezar, de modo que quedaba un hueco
   en blanco y, si el DOM tardaba, se veia el texto aparecer y desaparecer.

   Ahora hay una parte fija que no se toca y solo rota la ultima palabra.
   Nunca existe un instante con la linea vacia, y el efecto se lee como algo
   intencionado en vez de como una carga a medias.
   ========================================================================== */

/* Oculto a la vista, presente para lectores de pantalla y rastreadores. No
   se usa display:none ni visibility:hidden porque ambos lo retirarian
   tambien del arbol de accesibilidad, que es lo que hay que evitar. */
.clixy-sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La palabra que rota se destaca: es la que cambia, y si fuera del mismo
   color que el resto pareceria que la frase se corrompe sola. */
.clixy-landing .clixy-hero-content > p .clixy-rotator {
  display: inline-block;
  color: var(--cx-brand-strong);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.clixy-landing .clixy-hero-content > p .clixy-rotator-activo::after {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  content: "";
  vertical-align: -.14em;
  border-radius: 1px;
  background: var(--cx-brand);
  animation: clixyCaret 1.05s steps(1, end) infinite;
}

@keyframes clixyCaret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* --- Aparicion escalonada al llegar --------------------------------------
   Solo se aplica desde JS y solo a lo que esta bajo el pliegue, asi que si
   el script no corre nada queda oculto. */
.clixy-aparece {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.22, .9, .3, 1),
              transform .62s cubic-bezier(.22, .9, .3, 1);
}

.clixy-aparecido {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .clixy-landing .clixy-hero-content > p .clixy-rotator-activo::after {
    display: none;
    animation: none;
  }

  .clixy-aparece,
  .clixy-aparecido {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* El subtitulo es un item de un grid cuyos items se dimensionan al
   contenido. Al partir la frase en dos spans, la caja se ajusto al primero
   (166px) y expulso al rotador a una segunda linea. Con max-content la caja
   mide lo que mide la frase SIN partir, contando ya el ancho reservado para
   la palabra mas larga; el tope al 100% deja que envuelva en pantallas
   estrechas, que ahi si es lo correcto. */
.clixy-landing .clixy-hero-content > p {
  display: flex;
  flex-wrap: wrap;
  gap: .32em;
  align-items: baseline;
  width: max-content;
  max-width: 100%;
}

/* ==========================================================================
   SECCIONES NUEVAS — la pagina deja de acabarse en el hero.

   Quien no conocia el producto no tenia forma de saber que se hace aqui
   antes de decidir registrarse, y quien llegaba buscando UNA red concreta
   no la veia nombrada en ningun sitio.

   Todo se apoya en los tokens: ni un color suelto.
   ========================================================================== */

.clixy-steps,
.clixy-networks {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

/* --- Cabecera de seccion ---------------------------------------------- */
.clixy-section-head {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}

.clixy-section-kicker {
  display: inline-block;
  margin-bottom: .75rem;
  padding: .34rem .85rem;
  color: var(--cx-brand-strong);
  font-family: var(--cx-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(var(--cx-brand-rgb), .22);
  border-radius: var(--cx-r-pill);
  background: var(--cx-brand-wash);
}

.clixy-section-head h2 {
  margin: 0 0 .7rem;
  color: var(--cx-ink);
  font-family: var(--cx-font-heading);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
}

/* El acento va en la palabra que importa, no en el titular entero: si todo
   es rosa, el rosa deja de significar nada. */
.clixy-section-head h2 span {
  color: var(--cx-brand-strong);
}

.clixy-section-head > p {
  margin: 0;
  color: var(--cx-ink-soft);
  font-size: clamp(.95rem, 1.6vw, 1.06rem);
  line-height: 1.6;
}

/* --- Tres pasos -------------------------------------------------------- */
.clixy-steps-grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.clixy-step {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-lg);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--cx-brand-rgb), .07), transparent 12rem),
    linear-gradient(150deg, var(--cx-surface-raised), #FEFDFD);
  box-shadow: var(--cx-shadow-sm);
  transition: transform .3s cubic-bezier(.22, .9, .3, 1), box-shadow .3s ease, border-color .3s ease;
}

.clixy-step:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--cx-brand-rgb), .3);
  box-shadow: var(--cx-shadow-md);
}

.clixy-step-number {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 1rem;
  place-items: center;
  color: var(--cx-on-brand);
  font-family: var(--cx-font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  border-radius: 14px;
  background: var(--cx-grad-brand);
  box-shadow: 0 8px 18px rgba(var(--cx-brand-rgb), .26);
}

.clixy-step h3 {
  margin: 0 0 .5rem;
  color: var(--cx-ink);
  font-family: var(--cx-font-heading);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.015em;
}

.clixy-step p {
  margin: 0;
  color: var(--cx-ink-soft);
  font-size: .93rem;
  line-height: 1.6;
}

/* --- Redes -------------------------------------------------------------
   Cada pastilla lleva el color de su red, igual que el filtro del panel:
   un solo codigo de color entre la web publica y el producto. */
.clixy-network-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.clixy-network {
  display: flex;
  gap: .6rem;
  align-items: center;
  padding: .9rem 1rem;
  color: var(--cx-ink);
  font-family: var(--cx-font-body);
  font-size: .92rem;
  font-weight: 700;
  border: 1px solid rgba(var(--red), .26);
  border-radius: var(--cx-r-md);
  background: rgba(var(--red), .075);
  transition: transform .26s cubic-bezier(.22, .9, .3, 1), background .26s ease, border-color .26s ease;
}

.clixy-network:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--red), .46);
  background: rgba(var(--red), .15);
}

.clixy-network i {
  color: rgb(var(--red));
  font-size: 1.15rem;
}

.clixy-network--instagram { --red: 225, 48, 108; }
.clixy-network--tiktok    { --red: 66, 68, 82; }
.clixy-network--youtube   { --red: 255, 0, 51; }
.clixy-network--facebook  { --red: 24, 119, 242; }
.clixy-network--whatsapp  { --red: 32, 185, 88; }
.clixy-network--twitch    { --red: 145, 70, 255; }
.clixy-network--twitter   { --red: 29, 155, 240; }
.clixy-network--telegram  { --red: 34, 158, 217; }

.clixy-networks-foot {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.clixy-networks-foot > span {
  color: var(--cx-ink-faint);
  font-size: .88rem;
}

/* El CTA de estas secciones no debe heredar el ancho completo que tiene
   dentro de la tarjeta de acceso. */
.clixy-networks-foot .clixy-main-btn {
  width: auto;
  min-width: 15rem;
}

/* El SVG de TikTok ocupa el sitio del <i> y toma el color de su red. */
.clixy-network .clixy-network-svg {
  flex: 0 0 auto;
  color: rgb(var(--red));
}

/* El CTA de estas secciones es un <a>: heredaba el subrayado de los enlaces
   de la landing y salia como un enlace, no como un boton. */
.clixy-networks-foot .clixy-main-btn,
.clixy-networks-foot .clixy-main-btn:hover,
.clixy-networks-foot .clixy-main-btn:focus {
  text-decoration: none !important;
}

/* ==========================================================================
   PIE DE PAGINA

   El primer intento repartia OCHO enlaces en cuatro columnas: "Legal"
   ocupaba una columna entera para un solo enlace y quedaba medio pie
   vacio. El problema no era exceso de contenido sino un contenedor pensado
   para tres veces mas, que es lo que hacia que se leyera desordenado.

   Se reagrupa en dos bloques —marca y enlaces— y los enlaces van juntos,
   no repartidos. Menos alto, menos hueco y nada suelto.
   ========================================================================== */

.clixy-footer {
  position: relative;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(2.25rem, 4vw, 3rem) 0 clamp(1.1rem, 2vw, 1.4rem);
  color: var(--cx-shell-ink);
  background:
    radial-gradient(ellipse 40rem 20rem at 12% 0%, rgba(255, 255, 255, .06), transparent 62%),
    radial-gradient(ellipse 34rem 18rem at 94% 100%, rgba(var(--cx-brand-rgb), .16), transparent 66%),
    linear-gradient(165deg, var(--cx-shell-raised) 0%, var(--cx-shell) 46%, var(--cx-shell-deep) 100%);
}

.clixy-footer-grid {
  display: flex;
  gap: clamp(1.75rem, 5vw, 4rem);
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: clamp(1.4rem, 2.5vw, 1.9rem);
  border-bottom: 1px solid var(--cx-shell-line);
}

/* --- Marca ------------------------------------------------------------- */
.clixy-footer-brand {
  max-width: 21rem;
  flex: 1 1 16rem;
}

.clixy-footer-brand img {
  height: auto;
  margin-bottom: .7rem;
  /* El logo es rosa sobre claro; sobre ciruela pide algo de luz para no
     hundirse en el fondo. */
  filter: brightness(1.12) drop-shadow(0 3px 10px rgba(0, 0, 0, .28));
}

.clixy-footer-brand p {
  margin: 0;
  color: var(--cx-shell-ink-soft);
  font-size: .86rem;
  line-height: 1.6;
}

/* --- Enlaces, juntos y no repartidos ----------------------------------- */
.clixy-footer-links {
  display: flex;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  flex-wrap: wrap;
}

.clixy-footer-col {
  display: flex;
  flex-direction: column;
  gap: .48rem;
}

.clixy-footer-col h3 {
  margin: 0 0 .28rem;
  color: var(--cx-shell-ink);
  font-family: var(--cx-font-heading);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .82;
}

.clixy-footer-col a {
  position: relative;
  width: fit-content;
  color: var(--cx-shell-ink-soft);
  font-size: .87rem;
  text-decoration: none;
  transition: color .2s ease;
}

/* Subrayado que crece desde la izquierda: dice "esto se puede pulsar" sin
   desplazar el enlace, que es lo que hacia temblar la columna. */
.clixy-footer-col a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: var(--cx-brand-pale);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s cubic-bezier(.22, .9, .3, 1);
}

.clixy-footer-col a:hover,
.clixy-footer-col a:focus-visible { color: #FFFFFF; }
.clixy-footer-col a:hover::after,
.clixy-footer-col a:focus-visible::after { transform: scaleX(1); }

/* --- Base -------------------------------------------------------------- */
.clixy-footer-base {
  display: flex;
  gap: .5rem 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(.9rem, 2vw, 1.2rem);
  color: var(--cx-shell-ink-soft);
  font-size: .8rem;
}

.clixy-footer-note {
  color: var(--cx-brand-pale);
  font-weight: 600;
}

@media (max-width: 575.98px) {
  /* En movil las tres agrupaciones en fila dejan columnas de una palabra. */
  .clixy-footer-links { gap: 1.5rem 2.25rem; }
  .clixy-footer-base { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .clixy-footer-col a,
  .clixy-footer-col a::after { transition: none; }
  .clixy-footer-col a::after { display: none; }
}

/* ==========================================================================
   INTRO DE MOVIL — al sistema.

   En movil el diseno oculta el titular y el subtitulo del hero y los
   sustituye por esta tarjeta, asi que es LO PRIMERO que ve la mayoria del
   trafico de un panel SMM. Se habia quedado en la rampa rosa/morada
   anterior mientras el resto de la pagina ya era porcelana y ciruela: el
   unico elemento fuera de sistema, y justo el mas visto.

   Se pasa a ciruela, que es lo que hace de ancla oscura en esta pagina,
   con el rosa como acento y no como masa.
   ========================================================================== */

@media (max-width: 575.98px) {
  .clixy-mobile-panel-intro {
    border-color: rgba(255, 255, 255, .12) !important;
    background:
      radial-gradient(circle at 96% 0, rgba(var(--cx-brand-rgb), .34), transparent 13rem),
      linear-gradient(122deg, var(--cx-shell-raised) 0%, var(--cx-shell) 58%, var(--cx-shell-deep) 100%) !important;
    box-shadow: 0 12px 28px rgba(74, 25, 50, .26) !important;
  }

  .clixy-mobile-panel-intro-icon {
    color: var(--cx-on-brand) !important;
    background: var(--cx-grad-brand) !important;
    box-shadow: 0 6px 14px rgba(var(--cx-brand-rgb), .34) !important;
  }

  .clixy-mobile-panel-intro-kicker {
    color: var(--cx-brand-pale) !important;
  }

  .clixy-mobile-panel-intro h1 { color: #FFFFFF !important; }
  .clixy-mobile-panel-intro p  { color: var(--cx-shell-ink-soft) !important; }

  /* La fila de "mantener sesion iniciada" partia en dos lineas y dejaba la
     casilla descuadrada respecto a su texto. */
  /* A 390px los dos textos compiten por la misma linea y parten LOS DOS:
     "Mantener sesion / iniciada" y "Olvidaste tu / contrasena". Apilarlos
     da a cada uno su linea entera y deja de verse roto. */
  .clixy-landing .clixy-form-row {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    align-items: flex-start;
  }

  .clixy-landing .clixy-checkbox {
    display: flex;
    gap: .45rem;
    align-items: center;
    line-height: 1.25;
  }

  .clixy-landing .clixy-checkbox input { flex: 0 0 auto; }
}

/* En movil el boton flotante de WhatsApp se sienta sobre la esquina inferior
   derecha y tapaba la ultima linea del pie. Se reserva su hueco en vez de
   mover el boton, que esta donde tiene que estar. */
@media (max-width: 767.98px) {
  .clixy-footer { padding-bottom: 5.5rem; }
  .clixy-footer-base { gap: .6rem; }
  body.clixy-unified-public .footer { padding-bottom: 5.5rem !important; }
}