/* Small final proportion pass for the Monoka home/login page. */
.clixy-landing .clixy-logo {
  flex-basis: 188px;
  width: 188px;
}

.clixy-landing .clixy-logo img {
  /* Mismo caso que en public-header.css: el scale era el zoom sobre el
     relleno transparente del PNG antiguo. Con el archivo recortado solo
     inflaba, y aqui ademas se sumaba al de la otra hoja. */
  width: 150px !important;
  max-height: 62px;
  object-fit: contain;
  object-position: left center;
  transform: none;
  transform-origin: left center;
  filter: brightness(.82) contrast(1.18) saturate(1.30) drop-shadow(0 3px 7px rgba(116, 6, 54, .10));
}

@media (min-width: 992px) {
  .clixy-landing .clixy-hero {
    padding-top: 18px;
    padding-bottom: 22px;
  }

  .clixy-landing .clixy-features-grid {
    gap: 10px 12px;
    margin-bottom: 14px;
  }

  .clixy-landing .clixy-feature {
    min-height: 86px;
    padding: 12px 14px;
  }

  .clixy-landing .clixy-trust-card {
    min-height: 60px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .clixy-landing .clixy-login-column .clixy-login-card {
    max-width: 480px;
    padding: 28px 34px 25px;
  }

  .clixy-landing .clixy-login-logo {
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
  }

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

  .clixy-landing .clixy-input-group {
    height: 53px;
    margin-bottom: 10px;
  }

  .clixy-landing .clixy-form-row {
    margin-top: 8px;
    margin-bottom: 16px;
  }

  .clixy-landing .clixy-login-card .clixy-main-btn {
    min-height: 53px;
    height: 53px;
  }

  .clixy-landing .clixy-login-footer {
    margin-top: 16px;
    padding-top: 14px;
  }

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

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

  .clixy-landing .clixy-logo img {
    width: 132px !important;
    max-height: 55px;
    transform: none;
  }
}

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

  .clixy-landing .clixy-logo img {
    width: 118px !important;
    max-height: 49px;
    transform: none;
  }
}

/* Final visual refinement: clearer hierarchy without changing the layout. */
.clixy-landing {
  background:
    radial-gradient(circle at 51% 34%, rgba(255, 246, 251, .48), transparent 25rem),
    radial-gradient(circle at 7% 12%, rgba(240, 0, 131, .09), transparent 27rem),
    radial-gradient(circle at 94% 12%, rgba(255, 229, 239, .46), transparent 29rem),
    radial-gradient(circle at 12% 84%, rgba(240, 0, 131, .05), transparent 28rem),
    radial-gradient(circle at 91% 84%, rgba(154, 120, 202, .08), transparent 30rem),
    linear-gradient(138deg, #e5b9c9 0%, #edced8 39%, #f3dce3 67%, #dfafc1 100%);
}

.clixy-landing .clixy-hero-mascot::before {
  box-shadow:
    0 24px 64px rgba(126, 46, 75, .15),
    0 0 54px rgba(255, 238, 247, .58),
    inset 0 1px 0 rgba(255, 255, 255, .72);
}

.clixy-landing .clixy-login-column .clixy-login-card {
  border-color: rgba(255, 255, 255, .78);
  background:
    radial-gradient(circle at 94% 5%, rgba(239, 72, 148, .15), transparent 18rem),
    radial-gradient(circle at 4% 98%, rgba(182, 120, 199, .10), transparent 17rem),
    linear-gradient(145deg, rgba(255, 253, 254, .97), rgba(255, 244, 249, .95) 57%, rgba(248, 225, 238, .92));
  box-shadow:
    0 24px 54px rgba(82, 29, 54, .16),
    0 7px 18px rgba(226, 27, 121, .06),
    0 0 0 7px rgba(255, 250, 253, .25),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.clixy-landing .clixy-input-group {
  border-color: rgba(143, 69, 106, .17);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 7px 18px rgba(95, 41, 68, .045), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.clixy-landing .clixy-input-group:hover,
.clixy-landing .clixy-input-group:focus-within {
  border-color: rgba(240, 0, 131, .30);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(240, 0, 131, .07), 0 9px 22px rgba(95, 41, 68, .06);
}

.clixy-landing .clixy-feature {
  border-color: rgba(255, 255, 255, .72);
  box-shadow:
    0 10px 24px rgba(77, 35, 56, .085),
    inset 0 1px 0 rgba(255, 255, 255, .88);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.clixy-landing .clixy-feature:nth-child(1) {
  background: linear-gradient(135deg, rgba(255, 252, 254, .96), rgba(255, 226, 240, .88));
}

.clixy-landing .clixy-feature:nth-child(2) {
  background: linear-gradient(135deg, rgba(255, 252, 254, .96), rgba(238, 228, 250, .88));
}

.clixy-landing .clixy-feature:nth-child(3) {
  /* Era melocoton (28 grados de matiz): en una fila de cuatro pastel era
     la unica que tiraba a amarillo, y a tamano pequeno el ojo no lee
     "calido", lee "descolorida". Pasa a coral, que conserva la
     temperatura y se queda dentro de la familia rosa. */
  background: linear-gradient(135deg, rgba(255, 252, 253, .96), rgba(255, 226, 230, .88));
}

.clixy-landing .clixy-feature:nth-child(4) {
  background: linear-gradient(135deg, rgba(255, 253, 254, .96), rgba(224, 241, 250, .88));
}

.clixy-landing .clixy-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .94);
  box-shadow:
    0 16px 32px rgba(77, 35, 56, .12),
    inset 0 1px 0 #fff;
}

.clixy-landing .clixy-trust-card {
  border-color: rgba(255, 255, 255, .74);
  background: linear-gradient(110deg, rgba(255, 251, 253, .96), rgba(255, 231, 243, .92) 60%, rgba(240, 226, 250, .90));
  box-shadow: 0 12px 28px rgba(77, 35, 56, .10), inset 0 1px 0 rgba(255, 255, 255, .90);
}

.clixy-landing .clixy-avatar-stack .clixy-social-avatar {
  display: grid;
  place-items: center;
  color: #fff;
  border-color: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 14px rgba(77, 35, 56, .13);
  font-size: 15px;
}

.clixy-landing .clixy-avatar-stack .clixy-social-instagram {
  background: linear-gradient(145deg, #7c3aed 4%, #e1306c 53%, #f59e0b 100%);
}

.clixy-landing .clixy-avatar-stack .clixy-social-youtube {
  background: linear-gradient(145deg, #ff3b45, #e00000);
}

.clixy-landing .clixy-avatar-stack .clixy-social-facebook {
  background: linear-gradient(145deg, #3b91ff, #1769d2);
}

@media (prefers-reduced-motion: reduce) {
  .clixy-landing .clixy-feature {
    transition: none;
  }
}

/* Vibrant Clixy plum layer: polished contrast with a lively pink signature. */
.clixy-landing {
  --clixy-navy: #7e3578;
  --clixy-navy-soft: #b94f9c;
  --clixy-navy-muted: #72556f;
  background:
    radial-gradient(circle at 48% 32%, rgba(255, 248, 252, .31), transparent 25rem),
    radial-gradient(circle at 4% 8%, rgba(126, 53, 120, .19), transparent 30rem),
    radial-gradient(circle at 93% 10%, rgba(240, 0, 131, .17), transparent 29rem),
    radial-gradient(circle at 88% 88%, rgba(185, 79, 156, .15), transparent 31rem),
    linear-gradient(138deg, #e0a8c0 0%, #f1c7d8 38%, #f8dce7 67%, #d991b0 100%);
}


.clixy-landing .clixy-public-header .nav-link {
  color: var(--clixy-navy) !important;
}

.clixy-landing .clixy-public-header .nav-link:hover,
.clixy-landing .clixy-public-header .nav-item.active .nav-link {
  color: #c8176c !important;
}

.clixy-landing .clixy-public-header a.clixy-public-action,
.clixy-landing .clixy-public-header a.clixy-public-action:hover,
.clixy-landing .clixy-public-header a.clixy-public-action:focus {
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background: linear-gradient(112deg, #873a7f 0%, #c2469a 68%, #e21b79 128%) !important;
  box-shadow: 0 13px 28px rgba(101, 40, 95, .22), inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}

.clixy-landing .clixy-public-header a.clixy-public-action:hover,
.clixy-landing .clixy-public-header a.clixy-public-action:focus {
  background: linear-gradient(112deg, #98508f 0%, #d455aa 68%, #f42991 128%) !important;
  box-shadow: 0 18px 34px rgba(101, 40, 95, .27), 0 6px 18px rgba(226, 27, 121, .12) !important;
}

.clixy-landing .clixy-badge {
  border-color: rgba(255, 255, 255, .12);
  color: #fff;
  background: linear-gradient(110deg, #873a7f, #c2469a);
  box-shadow: 0 11px 26px rgba(101, 40, 95, .20), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.clixy-landing .clixy-badge i {
  color: #ff4a9b;
}

.clixy-landing .clixy-hero-copy-column .clixy-hero h1,
.clixy-landing .clixy-hero-copy-column h1,
.clixy-landing .clixy-hero h1,
.clixy-landing .clixy-login-card h2,
.clixy-landing .clixy-feature h4,
.clixy-landing .clixy-bottom-benefits strong {
  color: var(--clixy-navy);
}

.clixy-landing .clixy-hero h1 span {
  background: linear-gradient(105deg, #c91267 4%, #f02d86 58%, #9c4fc2 115%);
  -webkit-background-clip: text;
  background-clip: text;
}

.clixy-landing .clixy-hero-copy-column .clixy-hero-content > p,
.clixy-landing .clixy-hero-content > p,
.clixy-landing .clixy-feature p,
.clixy-landing .clixy-login-card > p {
  color: var(--clixy-navy-muted);
}

.clixy-landing .clixy-feature {
  position: relative;
  overflow: hidden;
  border-color: rgba(126, 53, 120, .15);
  box-shadow: 0 11px 26px rgba(101, 40, 95, .09), inset 0 1px 0 rgba(255, 255, 255, .90);
}

.clixy-landing .clixy-feature::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 99px 99px 0;
  background: var(--clixy-navy-soft);
  opacity: .78;
}

.clixy-landing .clixy-feature:nth-child(2)::after,
.clixy-landing .clixy-feature:nth-child(4)::after {
  background: #d21870;
}

.clixy-landing .clixy-feature:nth-child(2) .clixy-feature-icon,
.clixy-landing .clixy-feature:nth-child(4) .clixy-feature-icon {
  color: #fff;
  border-color: rgba(255, 255, 255, .12);
  background: linear-gradient(145deg, #873a7f, #c2469a);
  box-shadow: 0 8px 18px rgba(101, 40, 95, .16);
}

.clixy-landing .clixy-trust-card {
  border-color: rgba(255, 255, 255, .10);
  color: #fff;
  background:
    radial-gradient(circle at 92% 0%, rgba(240, 0, 131, .25), transparent 12rem),
    linear-gradient(110deg, #873a7f, #a65b91 68%, #e21b79);
  box-shadow: 0 14px 31px rgba(101, 40, 95, .22), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.clixy-landing .clixy-trust-card h4,
.clixy-landing .clixy-trust-card p {
  color: #fff;
}

/* 3,77:1 sobre la ciruela de la tarjeta, en 16px negrita, que necesita 4,5.
   Es la cifra que sostiene la prueba social de la portada. brand-pale da
   6,95 y ademas entra en la paleta: ese #ff55a2 no era de ninguna familia
   nuestra. */
.clixy-landing .clixy-trust-card h4 span {
  color: var(--cx-brand-pale);
}

.clixy-landing .clixy-trust-card p {
  opacity: .68;
}

.clixy-landing .clixy-login-column .clixy-login-card {
  border-color: rgba(126, 53, 120, .19);
  background:
    radial-gradient(circle at 96% 4%, rgba(240, 0, 131, .12), transparent 18rem),
    linear-gradient(145deg, rgba(255, 254, 255, .98), rgba(249, 241, 246, .96) 68%, rgba(235, 225, 234, .94));
  box-shadow:
    0 25px 56px rgba(101, 40, 95, .19),
    0 0 0 6px rgba(255, 250, 253, .22),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.clixy-landing .clixy-login-column .clixy-login-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 11%;
  left: 11%;
  display: block;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #7e3578, #a15a91 52%, #f00083);
}

.clixy-landing .clixy-login-logo {
  color: #ff4a9b;
  border-color: rgba(255, 255, 255, .18);
  background: linear-gradient(145deg, #7e3578, #bd4e99);
  box-shadow: 0 13px 28px rgba(101, 40, 95, .22), 0 0 0 7px rgba(91, 64, 101, .07);
}

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

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

.clixy-landing .clixy-input-group:focus-within {
  border-color: rgba(96, 70, 108, .52);
  box-shadow: 0 0 0 4px rgba(91, 64, 101, .08), 0 10px 23px rgba(101, 40, 95, .08);
}

.clixy-landing .clixy-login-card .clixy-main-btn,
.clixy-landing .clixy-login-card .clixy-main-btn:hover,
.clixy-landing .clixy-login-card .clixy-main-btn:focus,
.clixy-landing .clixy-login-card .clixy-main-btn:focus-visible,
.clixy-landing .clixy-login-card .clixy-main-btn:active {
  border-color: #873a7f !important;
  background: linear-gradient(108deg, #873a7f 0%, #c2469a 70%, #f00083 130%) !important;
  box-shadow: 0 14px 30px rgba(101, 40, 95, .23), 0 5px 15px rgba(226, 27, 121, .10) !important;
}

.clixy-landing .clixy-login-footer {
  border-top-color: rgba(126, 53, 120, .13);
}

.clixy-landing .clixy-bottom-benefits {
  border-color: rgba(126, 53, 120, .19);
  box-shadow: 0 20px 48px rgba(101, 40, 95, .15), inset 0 1px 0 rgba(255, 255, 255, .82);
}

.clixy-landing .clixy-bottom-benefits::before {
  background: linear-gradient(90deg, #873a7f, #cc4fa3 38%, #f00083 72%, #ff5aaa);
}

@media (max-width: 991.98px) {
  .clixy-landing .clixy-public-header .clixy-menu-btn {
    color: var(--clixy-navy);
    border-color: rgba(126, 53, 120, .23);
    background: rgba(255, 251, 253, .94);
  }

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

  .clixy-landing .clixy-public-header .clixy-nav-collapse {
    border-color: rgba(126, 53, 120, .19);
    background: linear-gradient(160deg, rgba(255, 252, 254, .99), rgba(249, 228, 241, .98));
    box-shadow: 0 18px 44px rgba(101, 40, 95, .16);
  }
}

@media (max-width: 575.98px) {
  .clixy-landing .clixy-badge {
    box-shadow: 0 9px 21px rgba(101, 40, 95, .18);
  }

  .clixy-landing .clixy-trust-card {
    background:
      radial-gradient(circle at 100% 0%, rgba(240, 0, 131, .22), transparent 10rem),
      linear-gradient(120deg, #873a7f, #aa6099);
  }
}

/* Landing microinteractions. */
@keyframes clixyMascotFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-7px) rotate(.7deg); }
}

.clixy-landing .clixy-hero-mascot {
  animation: clixyMascotFloat 5.8s ease-in-out infinite;
}

.clixy-landing .clixy-feature-icon,
.clixy-landing .clixy-social-avatar,
.clixy-landing .clixy-badge,
.clixy-landing .clixy-trust-card,
.clixy-landing .clixy-login-card,
.clixy-landing .clixy-main-btn {
  transition: transform .24s cubic-bezier(.2, .75, .3, 1), box-shadow .24s ease,
    filter .24s ease, background-position .45s ease !important;
}

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

@media (hover: hover) and (pointer: fine) {
  .clixy-landing .clixy-feature:hover .clixy-feature-icon {
    transform: translateY(-2px) scale(1.10) rotate(-5deg);
    filter: saturate(1.14) brightness(1.06);
  }

  .clixy-landing .clixy-social-avatar:hover {
    z-index: 3;
    transform: translateY(-4px) scale(1.12);
    filter: saturate(1.14) brightness(1.06);
  }

  .clixy-landing .clixy-badge:hover,
  .clixy-landing .clixy-trust-card:hover {
    transform: translateY(-3px);
    filter: saturate(1.10) brightness(1.04);
    box-shadow: 0 19px 39px rgba(101, 40, 95, .24), 0 0 24px rgba(240, 0, 131, .10);
  }

  .clixy-landing .clixy-login-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 31px 68px rgba(101, 40, 95, .22), 0 0 0 7px rgba(255, 250, 253, .27);
  }

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

.clixy-landing .clixy-main-btn:active,
.clixy-landing .clixy-feature:active,
.clixy-landing .clixy-trust-card:active {
  transform: scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  .clixy-landing .clixy-hero-mascot,
  .clixy-landing .clixy-feature-icon,
  .clixy-landing .clixy-social-avatar,
  .clixy-landing .clixy-badge,
  .clixy-landing .clixy-trust-card,
  .clixy-landing .clixy-login-card,
  .clixy-landing .clixy-main-btn {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   CTAs Y ACENTOS — un solo degradado para lo que se pulsa.

   Los botones de la landing corrian una rampa morado->magenta incrustada a
   mano (#873a7f -> #c2469a -> #f00083) que no existe en el sistema y que
   ademas no coincidia entre piezas: el de iniciar sesion terminaba en
   #f00083 y el de registrarse en #e21b79.

   El panel tiene un unico lenguaje para lo que se pulsa, --cx-grad-brand.
   Se adopta aqui, para que el boton de la cara publica y el del producto
   sean reconociblemente el mismo boton.
   ========================================================================== */

.clixy-landing .clixy-login-card .clixy-main-btn,
.clixy-landing .clixy-main-btn,
.clixy-register-btn.clixy-public-action {
  background: var(--cx-grad-brand) !important;
  box-shadow: 0 10px 24px rgba(var(--cx-brand-rgb), .28) !important;
}

.clixy-landing .clixy-login-card .clixy-main-btn:hover,
.clixy-landing .clixy-main-btn:hover,
.clixy-register-btn.clixy-public-action: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;
}

.clixy-landing .clixy-badge,
.clixy-landing .clixy-login-logo {
  background: var(--cx-grad-brand) !important;
}

/* El titular corria hasta un violeta (#9c4fc2) ajeno a la paleta. Se queda
   dentro de la familia rosa, de marca a rosa claro.

   OJO: aqui va background-IMAGE, no el atajo background. Esta pieza es texto
   recortado sobre degradado (background-clip: text + text-fill transparente).
   El atajo reinicia background-clip a border-box, con lo que el degradado
   pasa a pintar la caja y las letras, que son transparentes, desaparecen:
   "PROFESIONAL" se convertia en un rectangulo rosa liso. */
.clixy-landing .clixy-hero-content h1 span {
  background-image: linear-gradient(105deg,
    var(--cx-brand-strong) 4%,
    var(--cx-brand) 52%,
    var(--cx-brand-soft) 108%) !important;
}

/* --- La tarjeta de confianza, en ciruela -------------------------------
   Era otro degradado rosa mas, compitiendo con los botones justo al lado.
   Pasa a la ciruela del shell: da a la landing el ancla oscura que le
   faltaba sobre tanta porcelana, y es literalmente el color de la
   navegacion del producto. Blanco sobre ciruela va a 10,5:1. */
.clixy-landing .clixy-trust-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--cx-brand-rgb), .30), transparent 11rem),
    linear-gradient(120deg, var(--cx-shell-raised) 0%, var(--cx-shell) 58%, var(--cx-shell-deep) 100%) !important;
  box-shadow: 0 18px 42px rgba(74, 25, 50, .26) !important;
}
/* ==========================================================================
   TANDA DE COLOR DE LA PORTADA — VA AL FINAL DE home-polish.css

   AVISO SOBRE ESTA HOJA: home-polish.css NO es la ultima de la cara publica.
   El orden real en themes/monoka/views/blocks/head.blade.php es
   landing-refresh (39) -> register-polish (41) -> home-polish (43) ->
   public-header (45). Comprobado que public-header.css no declara ni un
   selector de los que se tocan aqui, asi que estos bloques mandan; pero
   cualquier cosa de FAQ, terminos, cabecera o pie tiene que ir en
   public-header.css, no aqui.

   POR QUE NINGUNA REGLA TOCA .clixy-landing: su fondo esta declarado ocho
   veces y la que gana no es la ultima del orden de carga sino
   landing-refresh.css:2730, la unica con !important. El rosa saturado de
   home-polish.css:219-229 es codigo muerto desde hace tiempo. Si en una
   pasada anterior alguien escribio ese rosa esperando ver la pagina mas rosa
   y no paso nada, esa es la razon. Aqui se trabaja sobre las secciones y las
   tarjetas, donde no hay competencia.
   ========================================================================== */


/* ==========================================================================
   LAS BANDAS DE SECCION

   Las tres secciones —hero, pasos, redes— comparten exactamente el mismo
   lienzo: por eso la portada se lee plana y "blanca", no hay ni un cambio de
   superficie en toda la pagina. Se establece un ritmo: hero rosa palido ->
   pasos lila -> redes rosa hondo -> pie ciruela.

   Los hilos superiores de 2px son paradas duras del degradado, no bordes: la
   caja no se toca.

   La seccion de redes va en ROSA y no en lila a proposito. Las fichas de red
   son rgba(var(--red), .075), practicamente transparentes: lo que se ve a
   traves de ellas es esta banda. Quedandose en la familia del lienzo el
   desplazamiento de matiz de cada marca es imperceptible; cualquier lila o
   turquesa detras viraria el relleno de WhatsApp, YouTube o Facebook.
   surface-sunken esta a 93% de luz, por encima del minimo de 88 para
   superficies que sostienen texto.
   ========================================================================== */

.clixy-landing .clixy-steps {
  background:
    linear-gradient(180deg, rgba(var(--cx-accent-rgb), .28) 0 2px, transparent 2px),
    radial-gradient(ellipse 44rem 22rem at 8% 4%, rgba(var(--cx-accent-rgb), .09), transparent 66%),
    radial-gradient(ellipse 40rem 20rem at 94% 6%, rgba(var(--cx-brand-rgb), .07), transparent 66%),
    linear-gradient(180deg, var(--cx-accent-wash) 0%, var(--cx-canvas-warm) 100%);
}

.clixy-landing .clixy-networks {
  background:
    linear-gradient(180deg, rgba(var(--cx-brand-rgb), .26) 0 2px, transparent 2px),
    radial-gradient(ellipse 46rem 24rem at 92% 3%, rgba(var(--cx-brand-rgb), .07), transparent 66%),
    radial-gradient(ellipse 38rem 20rem at 6% 6%, rgba(var(--cx-accent-rgb), .07), transparent 66%),
    linear-gradient(180deg, var(--cx-surface-sunken) 0%, var(--cx-canvas-warm) 100%);
}

/* Los dos kickers eran la misma pastilla rosa repetida. Con la familia indigo
   cada seccion tiene su codigo de color y la pastilla salta sobre la banda
   rosa en vez de fundirse con ella. Solo border-color, nunca el shorthand:
   el ancho no se toca. */
.clixy-landing .clixy-networks .clixy-section-kicker {
  color: var(--cx-accent);
  border-color: rgba(var(--cx-accent-rgb), .26);
  background: var(--cx-accent-wash);
}

/* El argumento de cierre iba en --cx-ink-faint, que los propios tokens
   reservan para metadatos y deshabilitado: 3,42:1 a 14px, por debajo de AA.
   Pasa a indigo: legible y con color. */
.clixy-landing .clixy-networks-foot > span {
  color: var(--cx-accent);
}


/* ==========================================================================
   LOS TRES PASOS

   Eran tres tarjetas blancas identicas en fila, la zona mas plana de la
   pagina. La barra superior de 3px es una parada dura del fondo, no un
   border-top: cero geometria.

   Los :hover se reescriben porque .clixy-step:hover (landing-refresh.css:2959)
   es (0,2,0) y quedaria por debajo de estas (0,3,0): perderia su cambio de
   borde. Es la trampa de especificidad tipica de este proyecto.

   Los numeros ademas arreglan un fallo AA vivo en produccion:
   --cx-grad-brand acaba en #E36492 y el blanco encima queda a 3,23:1,
   insuficiente para 17,6px (el umbral de texto grande en negrita es 18,66px y
   no se alcanza). Los hexadecimales son los tokens oscurecidos conservando
   matiz: #4B43AB esta a 244,6 grados, el mismo que --cx-accent, y #0C6076 a
   192,5, dentro de 185-195.
   ========================================================================== */

.clixy-landing .clixy-step:nth-child(1) {
  border-color: rgba(var(--cx-brand-rgb), .20);
  background:
    linear-gradient(180deg, var(--cx-brand) 0 3px, transparent 3px),
    radial-gradient(circle at 100% 0%, rgba(var(--cx-brand-rgb), .10), transparent 12rem),
    linear-gradient(150deg, var(--cx-surface-raised) 0%, var(--cx-brand-wash) 100%);
}

.clixy-landing .clixy-step:nth-child(2) {
  border-color: rgba(var(--cx-accent-rgb), .20);
  background:
    linear-gradient(180deg, var(--cx-accent) 0 3px, transparent 3px),
    radial-gradient(circle at 100% 0%, rgba(var(--cx-accent-rgb), .10), transparent 12rem),
    linear-gradient(150deg, var(--cx-surface-raised) 0%, var(--cx-accent-wash) 100%);
}

.clixy-landing .clixy-step:nth-child(3) {
  border-color: rgba(42, 165, 196, .22);
  background:
    linear-gradient(180deg, var(--cx-teal) 0 3px, transparent 3px),
    radial-gradient(circle at 100% 0%, rgba(42, 165, 196, .10), transparent 12rem),
    linear-gradient(150deg, var(--cx-surface-raised) 0%, var(--cx-teal-wash) 100%);
}

.clixy-landing .clixy-step:nth-child(1):hover { border-color: rgba(var(--cx-brand-rgb), .38); }
.clixy-landing .clixy-step:nth-child(2):hover { border-color: rgba(var(--cx-accent-rgb), .38); }
.clixy-landing .clixy-step:nth-child(3):hover { border-color: rgba(42, 165, 196, .42); }

.clixy-landing .clixy-step:nth-child(1) .clixy-step-number {
  background: linear-gradient(135deg, var(--cx-brand-strong) 0%, var(--cx-brand) 100%);
  box-shadow: 0 8px 18px rgba(var(--cx-brand-rgb), .30);
}

.clixy-landing .clixy-step:nth-child(2) .clixy-step-number {
  background: linear-gradient(135deg, #4B43AB 0%, var(--cx-accent) 100%);
  box-shadow: 0 8px 18px rgba(var(--cx-accent-rgb), .30);
}

.clixy-landing .clixy-step:nth-child(3) .clixy-step-number {
  background: linear-gradient(135deg, #0C6076 0%, var(--cx-teal) 100%);
  box-shadow: 0 8px 18px rgba(15, 116, 144, .30);
}


/* ==========================================================================
   LA TARJETA DE ACCESO

   Es la pieza que el dueno senala: seguia casi blanca. Lavado rosa de blanco
   arriba a #F8E2EB abajo (335,5 grados, en familia) mas un toque indigo en la
   esquina del logo. Fuera #F00083, que no es del sistema.

   Los dos velos radiales van ARRIBA a proposito: abajo estan los enlaces del
   pie de la tarjeta ("Crear cuenta ahora", "Olvidaste tu contrasena") y ese
   borde tiene que quedarse en el tono mas claro posible.

   Los campos eran los rectangulos blancos mas grandes del hero. El :hover y
   el :focus-within existentes (home-polish.css:142-147 y 398-401) son (0,3,0)
   y siguen mandando sobre esta regla (0,2,0): al escribir, el campo sigue
   poniendose blanco puro, que es la senal correcta y no se toca.

   El placeholder va incluido por obligacion: #98A2B3 daba 2,58:1 sobre blanco
   y con el pozo rosa bajaria a 2,30:1. Empeorar un incumplimiento existente
   por tres lineas de color no compensa.

   El sobre y el candado eran los unicos iconos grises de la portada, y en un
   azulado a 216 grados, fuera de las tres familias del sistema.
   ========================================================================== */

.clixy-landing .clixy-login-column .clixy-login-card {
  border-color: rgba(var(--cx-brand-rgb), .22);
  background:
    radial-gradient(circle at 97% 2%, rgba(var(--cx-brand-rgb), .17), transparent 16rem),
    radial-gradient(circle at 3% 8%, rgba(var(--cx-accent-rgb), .13), transparent 15rem),
    linear-gradient(155deg, var(--cx-surface-raised) 0%, var(--cx-brand-wash) 46%, #F8E2EB 100%);
  box-shadow:
    0 25px 56px rgba(var(--cx-plum-rgb), .19),
    0 0 0 6px rgba(var(--cx-brand-rgb), .07),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.clixy-landing .clixy-input-group {
  border-color: rgba(var(--cx-brand-rgb), .22);
  background: linear-gradient(180deg, var(--cx-surface-raised) 0%, var(--cx-brand-wash) 100%);
  box-shadow: 0 6px 16px rgba(var(--cx-plum-rgb), .05), inset 0 1px 0 rgba(255, 255, 255, .94);
}

.clixy-landing .clixy-input-group input::placeholder {
  color: var(--cx-ink-soft);
  opacity: 1;
}

.clixy-landing .clixy-input-group i {
  color: var(--cx-brand-strong);
}


/* ==========================================================================
   LA INSIGNIA Y LA BANDA DE BENEFICIOS

   La insignia era la tercera pastilla rosa seguida en el mismo tercio de
   pantalla (insignia, boton, logo) y ademas fallaba AA: sobre el extremo
   claro de --cx-grad-brand (#E36492) el blanco de 12px queda a 3,23:1. La
   rampa ciruela -> rosa -> indigo mete el tercer color y sube el peor punto a
   6,08:1. La estrella iba en #ff4a9b, a 1,58:1: invisible.
   Lleva !important porque la regla actual (home-polish.css:561) lo lleva.

   La banda de beneficios era blanco roto de punta a punta, la superficie
   grande mas plana de la portada. El comentario que la dejo asi decia "sobre
   porcelana no necesita fondo propio"; el encargo ahora es el contrario.
   border-color en longhand, nunca el shorthand: el ancho no se toca.

   El hilo de la banda gastaba cuatro magentas fuera del sistema (#873a7f,
   #cc4fa3, #f00083, #ff5aaa). Se tokeniza, pero se queda en TRES paradas y
   sin turquesa a proposito: el barrido de paleta completa se reserva para la
   franja de la cabecera. Tres arcoiris en el primer tercio de la pantalla
   —franja, insignia y este hilo— dejan de leerse como sistema.
   ========================================================================== */

.clixy-landing .clixy-badge {
  border-color: rgba(255, 255, 255, .16) !important;
  background: linear-gradient(112deg,
    var(--cx-shell) 0%,
    var(--cx-brand-strong) 54%,
    var(--cx-accent) 100%) !important;
  box-shadow:
    0 11px 26px rgba(var(--cx-plum-rgb), .24),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}

.clixy-landing .clixy-badge i {
  color: var(--cx-brand-pale);
}

.clixy-landing .clixy-bottom-benefits {
  border-color: rgba(var(--cx-brand-rgb), .18) !important;
  background:
    radial-gradient(circle at 5% 6%, rgba(var(--cx-brand-rgb), .13), transparent 17rem),
    radial-gradient(circle at 97% 94%, rgba(var(--cx-accent-rgb), .12), transparent 19rem),
    radial-gradient(circle at 52% 100%, rgba(42, 165, 196, .07), transparent 15rem),
    linear-gradient(110deg,
      var(--cx-brand-wash) 0%,
      var(--cx-canvas-warm) 52%,
      var(--cx-accent-wash) 100%) !important;
  box-shadow: var(--cx-shadow-md) !important;
}

.clixy-landing .clixy-bottom-benefits::before {
  background: linear-gradient(90deg,
    var(--cx-brand) 0%,
    var(--cx-brand-soft) 45%,
    var(--cx-accent-vivid) 100%);
  box-shadow: 0 4px 16px rgba(var(--cx-brand-rgb), .18);
}


/* ==========================================================================
   LAS CUATRO VENTAJAS

   La cuarta iba en un azul a 200,8 grados (y su icono a 200,4), fuera de la
   banda 185-195 que permite el sistema: se leia como "azul de otro sitio" y
   no como el turquesa de la casa. Ademas su barra lateral compartia el
   #d21870 con la segunda.

   La fila de iconos estaba a medias: dos pastillas planas palidas y dos
   degradados rellenos, y los dos rellenos eran el mismo morado fuera del
   sistema (#873a7f -> #c2469a). Rellenas las cuatro, una familia cada una.
   Es donde el sistema autoriza saturar: elementos pequenos.

   Los :hover se reescriben porque .clixy-landing .clixy-feature:hover
   (home-polish.css:177) es (0,3,0), igual que estas reglas, y al ir estas
   despues perderia su cambio de borde.
   ========================================================================== */

.clixy-landing .clixy-feature:nth-child(4) {
  border-color: rgba(42, 165, 196, .20);
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), var(--cx-teal-wash));
}

.clixy-landing .clixy-feature:nth-child(4)::after {
  background: var(--cx-teal-vivid);
}

.clixy-landing .clixy-feature:nth-child(4):hover {
  border-color: rgba(42, 165, 196, .40);
}

.clixy-landing .clixy-feature:nth-child(1) .clixy-feature-icon,
.clixy-landing .clixy-feature:nth-child(2) .clixy-feature-icon,
.clixy-landing .clixy-feature:nth-child(3) .clixy-feature-icon,
.clixy-landing .clixy-feature:nth-child(4) .clixy-feature-icon {
  color: var(--cx-on-brand);
  border-color: rgba(255, 255, 255, .18);
}

.clixy-landing .clixy-feature:nth-child(1) .clixy-feature-icon {
  background: linear-gradient(145deg, var(--cx-brand-strong), var(--cx-brand));
  box-shadow: 0 8px 18px rgba(var(--cx-brand-rgb), .26);
}

.clixy-landing .clixy-feature:nth-child(2) .clixy-feature-icon {
  background: linear-gradient(145deg, #4B43AB, var(--cx-accent));
  box-shadow: 0 8px 18px rgba(var(--cx-accent-rgb), .26);
}

.clixy-landing .clixy-feature:nth-child(3) .clixy-feature-icon {
  background: linear-gradient(145deg, var(--cx-shell-deep), var(--cx-shell-raised));
  box-shadow: 0 8px 18px rgba(var(--cx-plum-rgb), .26);
}

.clixy-landing .clixy-feature:nth-child(4) .clixy-feature-icon {
  background: linear-gradient(145deg, #0C6076, var(--cx-teal));
  box-shadow: 0 8px 18px rgba(15, 116, 144, .26);
}