/* Shared Monoka public header: Home, FAQ and API use this exact component. */
.clixy-public-header,
.clixy-public-header * { box-sizing: border-box; }

.clixy-public-header.clixy-navbar {
  position: relative;
  z-index: 50;
  width: 100%;
  padding: 16px 0 8px;
  background: transparent;
  font-family: "Karla", sans-serif;
}

.clixy-public-header.clixy-navbar::after {
  content: "";
  display: block;
  width: min(1420px, calc(100% - 60px));
  height: 2px;
  margin: 14px auto 0;
  opacity: .78;
  background: linear-gradient(90deg, transparent 5%, #f00083 34%, #ca68bb 58%, #6ac4e4 76%, transparent 96%);
}

.clixy-public-header .clixy-nav-inner {
  position: relative;
  display: flex;
  width: calc(100% - 60px);
  max-width: none !important;
  min-height: 82px;
  margin: 0 auto;
  padding: 8px 28px 8px 34px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% -35%, rgba(238, 37, 132, .24), transparent 21rem),
    radial-gradient(circle at 68% 140%, rgba(195, 117, 211, .12), transparent 22rem),
    linear-gradient(108deg, rgba(255, 251, 253, .98) 0%, rgba(255, 239, 247, .97) 48%, rgba(247, 211, 231, .95) 100%);
  box-shadow:
    0 14px 34px rgba(96, 35, 67, .13),
    0 3px 10px rgba(240, 0, 131, .06),
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(183, 69, 124, .08);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}

.clixy-public-header .clixy-nav-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .42), transparent 35%, rgba(255, 255, 255, .12) 68%, transparent);
}

.clixy-public-header .clixy-nav-inner > * {
  position: relative;
  z-index: 1;
}

.clixy-public-header .clixy-logo {
  display: inline-flex;
  width: 150px;
  min-height: 58px;
  flex: 0 0 150px;
  align-items: center;
  overflow: visible;
}

.clixy-public-header .clixy-logo img {
  display: block;
  /* 24-08: fuera el transform: scale. Era el zoom que compensaba el relleno
     transparente del PNG antiguo (700x473 con la marca en solo 437x168). El
     archivo actual ya viene recortado, asi que el escalado solo inflaba: el
     logo salia a 350x142 reales dentro de una cabecera de 110px. */
  width: 150px !important;
  max-width: none !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));
}

.clixy-public-header .clixy-nav-collapse {
  display: flex !important;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
}

.clixy-public-header .navbar-nav {
  display: flex;
  flex-direction: row !important;
  margin: 0 !important;
  padding: 0;
  align-items: center;
  gap: 30px;
  list-style: none;
}

.clixy-public-header .nav-item { margin: 0; list-style: none; }

.clixy-public-header .nav-link {
  position: relative;
  display: inline-flex;
  padding: 9px 0 !important;
  color: #2f2029 !important;
  font-family: "Sora", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
}

.clixy-public-header .nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f52b83, #d20d70);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}

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

.clixy-public-header .nav-link:hover::after,
.clixy-public-header .nav-item.active .nav-link::after { transform: scaleX(1); }

.clixy-public-header a.clixy-public-action {
  position: relative;
  display: inline-flex !important;
  min-height: 54px;
  padding: 12px 28px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0 !important;
  border-radius: 16px;
  color: #fff !important;
  background: linear-gradient(105deg, #f42b91 0%, #f00083 58%, #c61367 100%) !important;
  box-shadow: 0 13px 28px rgba(226, 27, 121, .24) !important;
  font-family: "Sora", sans-serif;
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}

.clixy-public-header a.clixy-public-action::before,
.clixy-public-header a.clixy-public-action::after {
  content: none !important;
  display: none !important;
}

.clixy-public-header a.clixy-public-action > span:first-child {
  color: #fff !important;
}

.clixy-public-header a.clixy-public-action:hover,
.clixy-public-header a.clixy-public-action:focus {
  color: #fff !important;
  background: linear-gradient(105deg, #f42b91 0%, #f00083 58%, #c61367 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(226, 27, 121, .30) !important;
}

.clixy-public-header .clixy-public-user-icon {
  position: relative;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  color: #fff;
}

.clixy-public-header .clixy-public-user-icon::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.clixy-public-header .clixy-public-user-icon::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 1px;
  left: 2px;
  height: 8px;
  border-radius: 8px 8px 3px 3px;
  background: currentColor;
}

.clixy-public-header .clixy-menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  padding: 11px 10px;
  flex: 0 0 44px;
  border: 1px solid rgba(174, 74, 128, .28);
  border-radius: 13px;
  color: #3b2632;
  background: rgba(255, 241, 249, .90);
  cursor: pointer;
}

.clixy-public-header .clixy-menu-btn span {
  display: block;
  width: 21px;
  height: 2px;
  margin: 4px auto;
  border-radius: 3px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.clixy-public-header .clixy-menu-btn.is-open { color: #fff; border-color: #f00083; background: #f00083; }
.clixy-public-header .clixy-menu-btn.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.clixy-public-header .clixy-menu-btn.is-open span:nth-child(2) { opacity: 0; }
.clixy-public-header .clixy-menu-btn.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

body.clixy-unified-public .page.p-t-70 { padding-top: 0 !important; }

@media (max-width: 991.98px) {
  .clixy-public-header.clixy-navbar { padding-top: 10px; }
  .clixy-public-header.clixy-navbar::after { width: calc(100% - 30px); margin-top: 12px; }
  .clixy-public-header .clixy-nav-inner {
    width: calc(100% - 30px);
    min-height: 74px;
    padding: 8px 14px 8px 18px;
    flex-wrap: wrap;
    border-radius: 19px;
    isolation: isolate;
  }
  .clixy-public-header .clixy-logo {
    position: relative;
    z-index: 1;
    width: 132px;
    min-height: 50px;
    flex-basis: 132px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .clixy-public-header .clixy-logo img { width: 132px !important; max-height: 55px; transform: none; }
  .clixy-public-header .clixy-menu-btn {
    position: relative;
    z-index: 20;
    display: block;
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .clixy-public-header .clixy-menu-btn::before {
    content: "";
    position: absolute;
    inset: -7px;
  }
  .clixy-public-header .clixy-nav-collapse {
    display: none !important;
    width: 100%;
    margin-top: 8px;
    padding: 14px;
    flex: 0 0 100%;
    border: 1px solid rgba(174, 74, 128, .20);
    border-radius: 16px;
    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-public-header .clixy-nav-collapse.show { display: block !important; }
  .clixy-public-header .navbar-nav {
    display: flex;
    flex-direction: column !important;
    align-items: stretch;
    gap: 4px;
  }
  .clixy-public-header .nav-item + .nav-item { margin-top: 4px; }
  .clixy-public-header .nav-link { display: flex; padding: 10px 8px !important; }
  .clixy-public-header .nav-link::after { display: none; }
  .clixy-public-header a.clixy-public-action { width: 100%; min-height: 48px; margin-top: 10px; }
}

@media (max-width: 575.98px) {
  .clixy-public-header .clixy-nav-inner { width: calc(100% - 20px); padding-left: 14px; }
  .clixy-public-header.clixy-navbar::after { width: calc(100% - 20px); }
  .clixy-public-header .clixy-logo { width: 118px; flex-basis: 118px; }
  .clixy-public-header .clixy-logo img { width: 118px !important; max-height: 49px; transform: none; }
}

/* Shared plum identity for every public Clixy page. */
.clixy-public-header.clixy-navbar::after {
  height: 3px;
  opacity: .90;
  background: linear-gradient(90deg, transparent 4%, #7e3578 24%, #c2469a 43%, #f00083 66%, #ff5aaa 80%, transparent 96%);
}

.clixy-public-header .clixy-nav-inner {
  border-color: rgba(126, 53, 120, .17);
  background:
    radial-gradient(circle at 93% -35%, rgba(240, 0, 131, .23), transparent 21rem),
    linear-gradient(108deg, rgba(255, 253, 254, .98), rgba(253, 238, 247, .97) 58%, rgba(247, 219, 237, .96));
  box-shadow:
    0 15px 36px rgba(101, 40, 95, .15),
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -2px 0 rgba(126, 53, 120, .10);
}

.clixy-public-header .nav-link {
  color: #7e3578 !important;
}

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

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

.clixy-public-header a.clixy-public-action:hover,
.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-public-header .clixy-menu-btn {
  color: #7e3578;
  border-color: rgba(126, 53, 120, .24);
  background: rgba(255, 251, 253, .92);
}

.clixy-public-header .clixy-menu-btn.is-open {
  border-color: #873a7f;
  background: linear-gradient(145deg, #873a7f, #c2469a);
}

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

/* Shared public-header microinteractions. */
.clixy-public-header .clixy-logo,
.clixy-public-header .nav-link,
.clixy-public-header a.clixy-public-action,
.clixy-public-header .clixy-menu-btn {
  transition: transform .22s cubic-bezier(.2, .75, .3, 1), color .22s ease,
    box-shadow .22s ease, filter .22s ease, background-position .42s ease !important;
}

.clixy-public-header a.clixy-public-action {
  background-size: 190% 100% !important;
  background-position: 0 50% !important;
}

@media (hover: hover) and (pointer: fine) {
  .clixy-public-header .clixy-logo:hover {
    transform: translateY(-2px) scale(1.025);
    filter: saturate(1.18) drop-shadow(0 7px 12px rgba(240, 0, 131, .16));
  }

  .clixy-public-header .nav-link:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
  }

  .clixy-public-header a.clixy-public-action:hover {
    background-position: 100% 50% !important;
    transform: translateY(-3px);
    filter: saturate(1.12) brightness(1.07);
  }

  .clixy-public-header .clixy-menu-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 24px rgba(101, 40, 95, .17);
  }
}

.clixy-public-header .nav-link:active,
.clixy-public-header a.clixy-public-action:active,
.clixy-public-header .clixy-menu-btn:active {
  transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
  .clixy-public-header .clixy-logo,
  .clixy-public-header .nav-link,
  .clixy-public-header a.clixy-public-action,
  .clixy-public-header .clixy-menu-btn {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   CTA DE LA CABECERA — el mismo boton que en el resto del producto.

   Esta hoja carga la ultima y tenia DOS reglas !important encadenadas para
   el mismo boton (una terminando en #f00083 y otra en #e21b79), asi que el
   CTA publico se quedaba en la rampa morada mientras el resto de la landing
   ya habia pasado al degradado de marca.
   ========================================================================== */

/* El prefijo .clixy-landing no es decorativo: la regla que hay que vencer
   vive en home-polish.css y es .clixy-landing .clixy-public-header
   a.clixy-public-action, es decir (0,3,1). Sin ese prefijo esta se queda en
   (0,2,1) y, siendo ambas !important, gana la mas especifica aunque la otra
   cargue antes. Con (0,3,1) empatan y decide el orden de carga, que aqui si
   nos favorece porque esta hoja es la ultima. */
.clixy-landing .clixy-public-header a.clixy-public-action,
.clixy-landing .clixy-public-header .clixy-register-btn,
.clixy-public-header a.clixy-public-action,
.clixy-public-header .clixy-register-btn {
  background: var(--cx-grad-brand) !important;
  box-shadow: 0 10px 24px rgba(var(--cx-brand-rgb), .28) !important;
}

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

/* ==========================================================================
   LIENZO BASE DE LAS PAGINAS PUBLICAS

   El layout general_page sirve FAQ, terminos, la documentacion de la API y
   el catalogo publico. Cada una habia acabado con su propio fondo, de tres
   pasadas distintas, asi que la portada era porcelana y estas seguian en
   rosa o en blanco pelado.

   Esto es la base comun. Las paginas que declaran el suyo propio con mas
   especificidad siguen mandando; esta regla solo evita que alguna se quede
   sin nada.
   ========================================================================== */

body.clixy-unified-public {
  background:
    radial-gradient(ellipse 54rem 30rem at 90% -8%, rgba(var(--cx-brand-rgb), .12), transparent 60%),
    radial-gradient(ellipse 48rem 30rem at 4% 6%, rgba(var(--cx-accent-rgb), .10), transparent 62%),
    radial-gradient(ellipse 40rem 26rem at 10% 88%, rgba(var(--cx-brand-rgb), .05), transparent 62%),
    radial-gradient(ellipse 52rem 32rem at 96% 80%, rgba(var(--cx-accent-rgb), .08), transparent 64%),
    linear-gradient(172deg, #FDF7F8 0%, #FBEFF2 46%, var(--cx-canvas-warm, #FCF2F5) 100%);
  background-attachment: fixed;
}

/* La guarda movil va pegada a su regla, no en otra seccion. */
@media (max-width: 991.98px) {
  body.clixy-unified-public {
    background-attachment: scroll;
  }
}


/* ==========================================================================
   CABECERA PEGAJOSA Y COMPACTA AL BAJAR

   La landing ha pasado de una pantalla a cinco. Con la cabecera en flujo
   normal, quien llegaba al pie ya no tenia forma de navegar sin volver
   arriba a mano.

   La clase is-scrolled la pone clixy-motion.js. Si el script no corre, la
   cabecera se queda pegada pero sin compactar: sigue siendo utilizable.
   ========================================================================== */

.clixy-public-header.clixy-navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: padding .28s cubic-bezier(.22, .9, .3, 1);
}

.clixy-public-header .clixy-nav-inner {
  transition:
    min-height .28s cubic-bezier(.22, .9, .3, 1),
    padding .28s cubic-bezier(.22, .9, .3, 1),
    box-shadow .28s ease,
    border-radius .28s ease;
}

.clixy-public-header.is-scrolled {
  padding-top: 8px;
  padding-bottom: 4px;
}

.clixy-public-header.is-scrolled .clixy-nav-inner {
  min-height: 66px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 18px;
  /* Gana cuerpo al despegarse del contenido, que es cuando lo necesita. */
  box-shadow:
    0 18px 40px rgba(96, 35, 67, .19),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}

.clixy-public-header.is-scrolled .clixy-logo img {
  /* Al compactarse la cabecera el logo ENCOGE un punto. Antes crecia un 62%,
     que es justo lo contrario de lo que dice el gesto. */
  transform: scale(.93);
  transition: transform .28s cubic-bezier(.22, .9, .3, 1);
}

/* La franja decorativa estorba cuando la cabecera esta pegada al contenido. */
.clixy-public-header.is-scrolled.clixy-navbar::after {
  opacity: 0;
  transition: opacity .28s ease;
}

/* Los anclas del pie llevan a secciones de esta misma pagina. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .clixy-public-header.clixy-navbar,
  .clixy-public-header .clixy-nav-inner,
  .clixy-public-header .clixy-logo img,
  .clixy-public-header.clixy-navbar::after {
    transition: none;
  }
}

/* ==========================================================================
   ALTURA DEL DOCUMENTO — condicion para que la cabecera se pegue.

   monoka.css declara `body, html { height: 100% }`. Eso encierra la caja del
   body en la altura de la ventana, y un elemento sticky solo se pega dentro
   de la caja de su padre: pasados los ~825px la cabecera dejaba de pegarse y
   desaparecia. En pantalla parecia que sticky no funcionaba; en realidad
   funcionaba y se le habia acabado el contenedor.

   min-height conserva la intencion original —al menos una pantalla de alto—
   y deja que el body crezca con el contenido. Se limita a las paginas que
   montan esta cabecera para no alterar el resto del producto.
   ========================================================================== */

html:has(.clixy-public-header),
html:has(.clixy-public-header) body {
  height: auto;
  min-height: 100%;
}

/* ==========================================================================
   PIE HEREDADO — el mismo de la landing.

   FAQ, terminos y la documentacion de la API montan el pie de SmartPanel:
   fondo gris, logo de 59px y enlaces en negro plano. Con la landing ya en
   ciruela, pasar de la portada a la FAQ mostraba dos pies distintos.

   No se sustituye el marcado, solo se viste: ahi vive el telefono, el
   correo y el horario reales, y eso hay que conservarlo intacto.
   ========================================================================== */

body.clixy-unified-public .footer,
body.clixy-unified-public .footer.dark {
  color: var(--cx-shell-ink) !important;
  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%) !important;
  border-top: 0 !important;
}

body.clixy-unified-public .footer .title,
body.clixy-unified-public .footer h4 {
  color: var(--cx-shell-ink) !important;
  font-family: var(--cx-font-heading);
  font-size: .78rem !important;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .82;
}

body.clixy-unified-public .footer,
body.clixy-unified-public .footer p,
body.clixy-unified-public .footer li,
body.clixy-unified-public .footer span {
  color: var(--cx-shell-ink-soft) !important;
  font-size: .88rem;
}

body.clixy-unified-public .footer a {
  color: var(--cx-shell-ink-soft) !important;
  text-decoration: none !important;
  transition: color .2s ease;
}

body.clixy-unified-public .footer a:hover,
body.clixy-unified-public .footer a:focus-visible {
  color: #FFFFFF !important;
}

/* El logo salia a 59px, casi ilegible. */
body.clixy-unified-public .footer img {
  /* width:auto tomaba el tamano intrinseco y se quedaba en 59px. */
  width: 148px !important;
  max-width: 100% !important;
  height: auto !important;
  filter: brightness(1.12) drop-shadow(0 3px 10px rgba(0, 0, 0, .28));
}

/* El selector de idioma era un control nativo blanco sobre ciruela. */
body.clixy-unified-public .footer select {
  padding: .4rem .7rem;
  color: var(--cx-shell-ink) !important;
  border: 1px solid var(--cx-shell-line) !important;
  border-radius: 10px;
  background: rgba(255, 255, 255, .09) !important;
  font-size: .85rem;
}

body.clixy-unified-public .footer select option { color: var(--cx-ink); }

@media (prefers-reduced-motion: reduce) {
  body.clixy-unified-public .footer a { transition: none; }
}
/* ==========================================================================
   CABECERA PUBLICA — la pildora y la franja, iguales en las cuatro paginas

   La pildora era rosa sobre rosa: un unico radial magenta y un degradado de
   blanco a rosa. Se le anaden periwinkle abajo y un toque turquesa arriba
   para darle profundidad sin aclararla ni oscurecerla, y salen del paso
   rgba(240,0,131) y rgba(126,53,120), que no son del sistema (el segundo es
   matiz 306, morado).

   Con los duplicados de home-polish.css:231-246 ya borrados, la cadena
   simple basta y el resultado deja de depender del orden de carga. La parada
   final rgba(247,219,237,.96) se conserva sin tocar: es la que sostiene los
   enlaces de navegacion.
   ========================================================================== */
.clixy-public-header .clixy-nav-inner {
  border-color: rgba(var(--cx-accent-rgb), .18);
  background:
    radial-gradient(circle at 93% -35%, rgba(var(--cx-brand-rgb), .22), transparent 21rem),
    radial-gradient(circle at 6% 150%, rgba(var(--cx-accent-rgb), .16), transparent 20rem),
    radial-gradient(circle at 52% -60%, rgba(127, 211, 230, .12), transparent 16rem),
    linear-gradient(108deg, #FEFDFD 0%, var(--cx-brand-wash) 58%, rgba(247, 219, 237, .96) 100%);
  box-shadow:
    0 15px 36px rgba(var(--cx-plum-rgb), .15),
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -2px 0 rgba(var(--cx-accent-rgb), .10);
}

/* SUSTITUYE al bloque de la linea 487 de este mismo fichero. La franja es el
   unico sitio del sitio donde caben las tres familias sin ruido, y es el
   adorno mas visible: se cierra en turquesa. Puramente decorativo. */
.clixy-public-header.clixy-navbar::after {
  opacity: .8;
  background: linear-gradient(90deg,
    transparent 4%,
    var(--cx-brand-strong) 22%,
    var(--cx-brand) 38%,
    var(--cx-brand-soft) 54%,
    var(--cx-accent-vivid) 72%,
    var(--cx-teal-light) 88%,
    transparent 97%);
}

/* ==========================================================================
   FAQ — filas del acordeon, tres tintes en rotacion

   Las ocho filas eran el mismo blanco rosado al 92%: el bloque mas grande de
   la pagina sin un solo cambio de tono. El :not([open]) deja intacta la fila
   abierta, que es la que comunica el estado con su gradiente y su barra.

   ESPECIFICIDAD: la regla a vencer, .clixy-faq-item (0,1,0), vive en un
   <style> EN LINEA de app/modules/client/views/faq/index.php:343, o sea
   DESPUES de esta hoja en el documento: empatar no basta, hace falta ser
   estrictamente mas especifico. Estas cadenas son (0,4,1).
   ========================================================================== */
body.clixy-faq-public .clixy-faq-item:not([open]):nth-child(3n+1) {
  border-color: rgba(var(--cx-brand-rgb), .20);
  background:
    radial-gradient(circle at 98% 0%, rgba(var(--cx-brand-rgb), .07), transparent 12rem),
    var(--cx-brand-wash);
}

body.clixy-faq-public .clixy-faq-item:not([open]):nth-child(3n+2) {
  border-color: rgba(var(--cx-accent-rgb), .20);
  background:
    radial-gradient(circle at 98% 0%, rgba(var(--cx-accent-rgb), .08), transparent 12rem),
    var(--cx-accent-wash);
}

body.clixy-faq-public .clixy-faq-item:not([open]):nth-child(3n) {
  border-color: rgba(15, 116, 144, .18);
  background:
    radial-gradient(circle at 98% 0%, rgba(15, 116, 144, .07), transparent 12rem),
    var(--cx-teal-wash);
}

/* El numero y el chevron van con la fila obligatoriamente: si se tine la fila
   y no se retinan estos dos, el malva #b94f9c —que ademas no es del sistema—
   choca contra el lavado turquesa. La regla a batir ya es (0,3,0) y esta en
   el <style> en linea posterior; estas son (0,5,1) y (0,4,2). */
body.clixy-faq-public .clixy-faq-item:not([open]):nth-child(3n+1) .clixy-faq-number {
  color: var(--cx-on-brand);
  background: var(--cx-brand-strong);
}

body.clixy-faq-public .clixy-faq-item:not([open]):nth-child(3n+2) .clixy-faq-number {
  color: var(--cx-on-brand);
  background: var(--cx-accent);
}

body.clixy-faq-public .clixy-faq-item:not([open]):nth-child(3n) .clixy-faq-number {
  color: var(--cx-on-brand);
  background: var(--cx-teal);
}

body.clixy-faq-public .clixy-faq-item:nth-child(3n+1) .clixy-faq-chevron { background: rgba(var(--cx-brand-rgb), .12); }
body.clixy-faq-public .clixy-faq-item:nth-child(3n+2) .clixy-faq-chevron { background: rgba(var(--cx-accent-rgb), .12); }
body.clixy-faq-public .clixy-faq-item:nth-child(3n)   .clixy-faq-chevron { background: rgba(15, 116, 144, .12); }

body.clixy-faq-public .clixy-faq-item:nth-child(3n+1) .clixy-faq-chevron::before,
body.clixy-faq-public .clixy-faq-item:nth-child(3n+1) .clixy-faq-chevron::after {
  background: var(--cx-brand-strong);
}

body.clixy-faq-public .clixy-faq-item:nth-child(3n+2) .clixy-faq-chevron::before,
body.clixy-faq-public .clixy-faq-item:nth-child(3n+2) .clixy-faq-chevron::after {
  background: var(--cx-accent);
}

body.clixy-faq-public .clixy-faq-item:nth-child(3n) .clixy-faq-chevron::before,
body.clixy-faq-public .clixy-faq-item:nth-child(3n) .clixy-faq-chevron::after {
  background: var(--cx-teal);
}

/* El panel de cierre de la FAQ, el que lleva el CTA, iba de blanco a un
   gris-malva #EDE1EB (matiz 312): lee como sucio, no como rosa. */
body.clixy-faq-public .clixy-faq-help {
  border-color: rgba(var(--cx-accent-rgb), .22);
  background:
    radial-gradient(circle at 96% 0%, rgba(var(--cx-brand-rgb), .12), transparent 14rem),
    radial-gradient(circle at 2% 100%, rgba(127, 211, 230, .16), transparent 15rem),
    linear-gradient(120deg, var(--cx-accent-wash) 0%, var(--cx-brand-wash) 58%, var(--cx-surface-sunken) 100%);
}

/* ==========================================================================
   TERMINOS — la pagina que se quedo fuera del sistema

   body.clixy-terms-public la pone el layout (general_page.php:5) y hasta hoy
   NINGUNA hoja definia una sola regla para ella: el gancho existia sin nadie
   al otro lado. Todo el aspecto de /terms vive en un <style> en linea con su
   propia paleta --legal-*, que es una QUINTA definicion del rosa de Clixy
   ademas de las del panel, la landing, la FAQ y el registro.

   Remapear las cuatro variables arregla de golpe titular, pildora, cuerpo de
   texto, punto del eyebrow, barra del aviso y enlaces de contacto sin tocar
   un solo selector de componente, y SUBE el contraste del cuerpo (de 5,53:1
   a 6,58:1). Nada baja.
   ========================================================================== */
body.clixy-terms-public .clixy-legal-page {
  --legal-pink: var(--cx-brand);
  --legal-pink-dark: var(--cx-brand-strong);
  --legal-ink: var(--cx-ink);
  --legal-muted: var(--cx-ink-soft);
}

/* Tres promesas distintas pintadas del mismo blanco. Tres tintes las
   convierten en tres cosas de un vistazo. (0,3,2) contra la (0,1,1) del
   <style> en linea posterior. */
body.clixy-terms-public .clixy-legal-summary div:nth-child(1) {
  border-color: rgba(var(--cx-brand-rgb), .22);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--cx-brand-rgb), .08), transparent 10rem),
    var(--cx-brand-wash);
}

body.clixy-terms-public .clixy-legal-summary div:nth-child(2) {
  border-color: rgba(var(--cx-accent-rgb), .22);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--cx-accent-rgb), .09), transparent 10rem),
    var(--cx-accent-wash);
}

body.clixy-terms-public .clixy-legal-summary div:nth-child(3) {
  border-color: rgba(15, 116, 144, .20);
  background:
    radial-gradient(circle at 100% 0%, rgba(15, 116, 144, .08), transparent 10rem),
    var(--cx-teal-wash);
}

/* Los dos .clixy-legal-card son la 2a y la 3a <section> del <main> (la 1a es
   .clixy-legal-summary), asi que :nth-of-type(1)/(2) apuntarian al sitio
   equivocado. El combinador + no depende de cuantos hermanos haya delante. */
body.clixy-terms-public .clixy-legal-card {
  border-color: rgba(var(--cx-brand-rgb), .20);
  background:
    radial-gradient(circle at 99% 0%, rgba(var(--cx-brand-rgb), .09), transparent 18rem),
    linear-gradient(150deg, #FEFDFD 0%, var(--cx-brand-wash) 100%);
  box-shadow: var(--cx-shadow-md), inset 4px 0 0 var(--cx-brand);
}

body.clixy-terms-public .clixy-legal-card + .clixy-legal-card {
  border-color: rgba(var(--cx-accent-rgb), .20);
  background:
    radial-gradient(circle at 99% 0%, rgba(var(--cx-accent-rgb), .10), transparent 18rem),
    linear-gradient(150deg, #FEFDFD 0%, var(--cx-accent-wash) 100%);
  box-shadow: var(--cx-shadow-md), inset 4px 0 0 var(--cx-accent);
}

body.clixy-terms-public .clixy-legal-card-header {
  border-bottom-color: rgba(var(--cx-brand-rgb), .18);
}

/* El aviso "Importante" es enfasis de MARCA, no un estado: no entra en la
   regla del ambar/verde/rojo/azul, asi que tenirlo no destruye informacion.
   Solo cambia el color del borde izquierdo, no su grosor. */
body.clixy-terms-public .clixy-legal-notice {
  color: var(--cx-ink-soft);
  border-left-color: var(--cx-brand);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--cx-brand-rgb), .10), transparent 12rem),
    linear-gradient(105deg, var(--cx-brand-wash) 0%, var(--cx-surface-sunken) 100%);
}

/* ==========================================================================
   PIE — la costura que faltaba

   Los dos pies ya son coherentes entre si (misma ciruela, mismos tokens); lo
   que les falta es el remate: la banda oscura arranca de golpe contra el
   lienzo rosa. Una franja de 3px con las tres familias cierra el sitio en
   simetria con la de la cabecera.

   La franja va la PRIMERA de la pila, o sea encima. Se usa la posicion y el
   tamano del shorthand background para limitarla: es pintura, no geometria,
   y no altera ni el flujo ni la caja.

   La regla del pie unificado (public-header.css:597) es (0,2,1) CON
   !important, asi que hay que llevar !important y subir la cadena: de ahi
   .footer_top, que ademas evita que la franja salga tambien en el pie
   inferior. El .clixy-footer de la landing viene de landing-refresh.css:3090
   sin !important y esta hoja carga despues.
   ========================================================================== */
body.clixy-unified-public .footer.footer_top,
.clixy-footer {
  background:
    linear-gradient(90deg,
      var(--cx-brand) 0%,
      var(--cx-brand-soft) 26%,
      var(--cx-accent-vivid) 58%,
      var(--cx-teal-light) 100%) top left / 100% 3px no-repeat,
    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%) !important;
}