/* =============================================================================
   CLIXY - PIEL NUBE DE LA PARTE PUBLICA                              22-09-2026
   =============================================================================
   Se carga la ULTIMA en themes/monoka/views/blocks/head.blade.php, encima de
   clixy.css, landing-refresh.css, register-polish.css, home-polish.css y
   public-header.css, que no se tocan: sin esta hoja la portada vuelve a ser la
   de siempre. Misma estructura; cambian la letra, la paleta y el acabado para
   que la cara publica hable como el panel Nube (clixy-nube.css):
     - Zen Maru Gothic en todo, en lugar de Sora y Karla.
     - Crema, lavado, rosa y rubor; tinta vino; rosa de accion en botones.
     - Vino oscuro como acento, donde lo tenia la portada anterior: la pildora
       de la portada, la de clientes, los iconos de ventajas, la banda de movil
       y los pies (Santiago, 22-09-2026: le gusta ese contraste).
     - Esquinas de almohada, halo rosa y sombra calida.
   Casi todo sale de redefinir los tokens --ck-* (las hojas de la portada los
   usan unas 1.100 veces); el resto son piezas con color propio o !important.
   ========================================================================== */

:root {
  --nube-fuente: "Zen Maru Gothic", "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nube-crema: #FFF7F9;
  --nube-blanco: #FFFFFF;
  --nube-lavado: #FDEEF3;
  --nube-rosa: #F7CFDA;
  --nube-rubor: #F2B8C9;
  --nube-tinta: #3F122B;
  --nube-tinta-2: #754259;
  --nube-suave: #9A5775;
  --nube-enlace: #B71A51;
  --nube-accion: #E02768;
  --nube-accion-2: #D0205F;
  --nube-linea: #F1D6DF;
  --nube-halo: 0 0 0 4px rgba(247, 207, 218, .45);
  --nube-sombra: 0 12px 26px -16px rgba(63, 18, 43, .24);
  --nube-sombra-alta: 0 22px 40px -20px rgba(63, 18, 43, .32);
  --nube-anillo: 0 0 0 4px rgba(224, 39, 104, .18);
  --nube-r-campo: 16px;
  --nube-r-caja: 22px;
  --nube-r-grande: 26px;
  --nube-degradado-accion: linear-gradient(135deg, #E02768 0%, #D0205F 100%);
  --nube-degradado-accion-hover: linear-gradient(135deg, #D0205F 0%, #C91D59 100%);
  --nube-degradado-texto: linear-gradient(100deg, #E02768 0%, #B71A51 100%);
  --nube-sombra-accion: 0 10px 22px -10px rgba(224, 39, 104, .55);

  /* Tokens de la portada, a la paleta Nube. Las tintas (--ck-ink*) ya eran
     las mismas. El rosa polvo #E6B6BB, que tiraba a malva, pasa a rubor. */
  --ck-surface: #FFF7F9;
  --ck-surface-rgb: 255, 247, 249;
  --ck-ground: #FDEEF3;
  --ck-ground-alt: #FBE3EA;
  --ck-veil: #F2B8C9;
  --ck-veil-rgb: 242, 184, 201;
  --ck-warm: #F7CFDA;
  --ck-line: #F1D6DF;
  --ck-line-strong: #F2B8C9;
  --ck-accent: #E02768;
  --ck-accent-rgb: 224, 39, 104;
  --ck-accent-2: #D0205F;
  --ck-accent-2-rgb: 208, 32, 95;
  --ck-focus: #E02768;
  --ck-link: #B71A51;
  --ck-grad-action: linear-gradient(135deg, #E02768 0%, #D0205F 100%);
  --ck-grad-page: linear-gradient(180deg, #FFF7F9 0%, #FDEEF3 50%, #FBE3EA 100%);
  --ck-grad-card: linear-gradient(150deg, #FFFFFF 0%, #FFF7F9 100%);
  --ck-grad-veil: linear-gradient(135deg, #F7CFDA 0%, #F2B8C9 100%);
  --ck-shadow-md: 0 0 0 4px rgba(247, 207, 218, .45), 0 12px 26px -16px rgba(63, 18, 43, .24);
  --ck-shadow-lg: 0 0 0 4px rgba(247, 207, 218, .45), 0 22px 40px -20px rgba(63, 18, 43, .32);
  --ck-shadow-action: 0 10px 22px -10px rgba(224, 39, 104, .55);
  --cx-font-body: var(--nube-fuente);
  --cx-font-heading: var(--nube-fuente);
}

/* 1. Letra. Las hojas de la portada fijan Sora y Karla regla a regla; esto las
      cubre todas salvo los iconos (Font Awesome va en <i> y clases fa-*) y el
      codigo de la documentacion de la API. */
html body *:not(i):not(svg):not(path):not(pre):not(code):not(kbd):not(samp):not(.fa):not(.fas):not(.far):not(.fab):not(.fal) {
  font-family: var(--nube-fuente) !important;
}
html body { background-color: var(--nube-crema); color: var(--nube-tinta); }

/* 2. Portada: fondo y titulares */
html body .clixy-hero {
  background:
    radial-gradient(circle at 8% 12%, rgba(224, 39, 104, .07), transparent 26rem),
    radial-gradient(circle at 92% 14%, rgba(255, 255, 255, .6), transparent 28rem),
    linear-gradient(160deg, #FFF7F9 0%, #FDEEF3 48%, #F7CFDA 100%) !important;
}
/* La pildora "Plataforma lider SMM" conserva su vino (home-polish.css). */
html body .clixy-hero-content h1 { color: var(--nube-tinta); letter-spacing: -.01em; }
html body .clixy-hero-content h1 span,
html body .clixy-section-head h2 span {
  background-image: var(--nube-degradado-texto) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* 3. Tarjetas de beneficios y pasos: blancas, con halo. Las de ventajas del hero
      conservan su diseño de antes, con el filo y los iconos en rosas y vino. */
html body .clixy-bottom-benefits > div,
html body .clixy-step {
  background: var(--nube-blanco) !important;
  border: 0 !important;
  box-shadow: var(--nube-halo), var(--nube-sombra) !important;
}
html body .clixy-bottom-benefits > div { border-radius: var(--nube-r-caja) !important; }
html body .clixy-step { border-radius: var(--nube-r-grande) !important; }
html body .clixy-step::before { display: none !important; }
html body .clixy-bottom-benefits i { color: var(--nube-accion) !important; }
html body .clixy-step-number {
  background: var(--nube-lavado) !important;
  color: var(--nube-tinta) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* 4. La pildora de clientes conserva su vino (home-polish.css). */

/* 5. Acceso */
html body .clixy-login-card {
  background: var(--nube-blanco) !important;
  border: 0 !important;
  border-radius: var(--nube-r-grande) !important;
  box-shadow: var(--nube-halo), var(--nube-sombra-alta) !important;
}
html body .clixy-login-logo {
  background: var(--nube-degradado-accion) !important;
  box-shadow: var(--nube-sombra-accion) !important;
}
html body .clixy-login-card h2 { color: var(--nube-tinta) !important; }
html body .clixy-login-card > p { color: var(--nube-suave) !important; }
/* El marco del campo es el contenedor (.clixy-input-group) y el input va
   transparente dentro, como en clixy.css. Tambien en el acceso y el registro
   de sus propias paginas (.clixy-auth-card, .clixy-register-page). */
html body .clixy-input-group,
html body .clixy-landing .clixy-input-group,
html body .clixy-register-page .clixy-input-group,
html body .clixy-auth-card .clixy-input-group {
  background: var(--nube-blanco) !important;
  border: 1px solid var(--nube-linea) !important;
  border-radius: var(--nube-r-campo) !important;
  box-shadow: none !important;
}
html body .clixy-input-group:hover,
html body .clixy-landing .clixy-input-group:hover,
html body .clixy-register-page .clixy-input-group:hover,
html body .clixy-auth-card .clixy-input-group:hover { border-color: var(--nube-rubor) !important; }
html body .clixy-input-group:focus-within,
html body .clixy-landing .clixy-input-group:focus-within,
html body .clixy-register-page .clixy-input-group:focus-within,
html body .clixy-auth-card .clixy-input-group:focus-within {
  border-color: var(--nube-accion) !important;
  box-shadow: var(--nube-anillo) !important;
}
html body .clixy-input-group input,
html body .clixy-register-page .clixy-input-group input,
html body .clixy-auth-card .clixy-input-group input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--nube-tinta) !important;
  outline: 0 !important;
}
html body .clixy-input-group input::placeholder { color: var(--nube-suave); opacity: 1; }
html body .clixy-input-group i { color: var(--nube-suave) !important; }
html body .clixy-form-row a,
html body .clixy-login-footer a { color: var(--nube-enlace) !important; }

/* 6. Botones principales */
html body .clixy-main-btn {
  background: var(--nube-degradado-accion) !important;
  border: 0 !important;
  border-radius: var(--nube-r-campo) !important;
  box-shadow: var(--nube-sombra-accion) !important;
  color: var(--nube-blanco) !important;
  font-weight: 700 !important;
}
html body .clixy-main-btn:hover,
html body .clixy-main-btn:focus-visible { background: var(--nube-degradado-accion-hover) !important; }
html body .clixy-public-header a { font-weight: 700 !important; }

/* 7. Rotulos de seccion y redes */
html body .clixy-section-kicker {
  background: var(--nube-lavado) !important;
  color: var(--nube-enlace) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: var(--nube-halo) !important;
}
html body .clixy-network {
  background: var(--nube-blanco) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: var(--nube-halo), var(--nube-sombra) !important;
  color: var(--nube-tinta) !important;
}

/* 8. La banda de movil conserva su vino (landing-refresh.css).
   9. El pie va en la seccion 12. */

/* 10. Recuperar y cambiar contraseña y cuenta activada. Seguian con el diseño
       original de la plantilla monoka (monoka.css): foto a pantalla completa
       con velo violeta #5000ca y boton violeta. Pasan a la cara Nube, a juego
       con el registro. Solo CSS: las vistas no se tocan, y la etiqueta que
       flota dentro del campo sigue funcionando igual. */
html body .sign-up-form {
  background: linear-gradient(160deg, #FFF7F9 0%, #FDEEF3 48%, #F7CFDA 100%) !important;
  padding-top: 7rem;
}
html body .sign-up-form::before { display: none !important; }
html body .sign-up-form h1,
html body .sign-up-form .text-white { color: var(--nube-tinta) !important; }
html body .sign-up-form p { color: var(--nube-tinta-2) !important; }
html body .sign-up-form .form-container {
  max-width: 440px;
  padding: 28px 24px 20px !important;
  border-radius: var(--nube-r-grande) !important;
  background: var(--nube-blanco) !important;
  box-shadow: var(--nube-halo), var(--nube-sombra-alta) !important;
}
html body .sign-up-form .form-control-input {
  border: 1px solid var(--nube-linea) !important;
  border-radius: var(--nube-r-campo) !important;
  background: var(--nube-blanco) !important;
  color: var(--nube-tinta) !important;
  box-shadow: none !important;
}
html body .sign-up-form .form-control-input:hover { border-color: var(--nube-rubor) !important; }
html body .sign-up-form .form-control-input:focus {
  border-color: var(--nube-accion) !important;
  box-shadow: var(--nube-anillo) !important;
  outline: 0 !important;
}
html body .sign-up-form .label-control { color: var(--nube-suave) !important; }
html body .sign-up-form .form-control-submit-button,
html body .sign-up-form .btn.btn-primary {
  border: 0 !important;
  border-radius: var(--nube-r-campo) !important;
  background: var(--nube-degradado-accion) !important;
  box-shadow: var(--nube-sombra-accion) !important;
  color: var(--nube-blanco) !important;
  font-weight: 700 !important;
}
html body .sign-up-form .form-control-submit-button:hover,
html body .sign-up-form .form-control-submit-button:focus-visible,
html body .sign-up-form .btn.btn-primary:hover {
  background: var(--nube-degradado-accion-hover) !important;
  color: var(--nube-blanco) !important;
}

/* ---- Segunda vuelta de la portada (22-09-2026): fondo continuo, pie con orilla
        de nubes, pasos unidos, respuesta al tocar y menos trabajo al desplazarse. */

/* 11. Fondo continuo de arriba abajo, crema -> lavado -> rosa, sin rayas entre
       secciones. El pie va pegado a la ultima: su margen dejaba ver una franja
       casi blanca justo antes. */
html body .clixy-hero {
  background:
    radial-gradient(circle at 8% 10%, rgba(224, 39, 104, .07), transparent 26rem),
    radial-gradient(circle at 92% 12%, rgba(255, 255, 255, .7), transparent 28rem),
    linear-gradient(180deg, #FFF7F9 0%, #FDEEF3 100%) !important;
}
html body .clixy-steps {
  background: linear-gradient(180deg, #FDEEF3 0%, #FBE3EA 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .clixy-networks {
  background: linear-gradient(180deg, #FBE3EA 0%, #F7CFDA 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-bottom: clamp(5rem, 8vw, 6.5rem) !important;
}
html body .clixy-steps::before,
html body .clixy-steps::after,
html body .clixy-networks::before,
html body .clixy-networks::after { display: none !important; }

/* 12. Pie en vino, como en la portada anterior, con una orilla de nubes tambien
       en vino que sube desde la ultima seccion (el detalle tierno, con el gatito). */
html body .clixy-footer {
  position: relative;
  margin-top: 0 !important;
  padding: clamp(2.25rem, 4vw, 3rem) 0 1.4rem !important;
  background:
    radial-gradient(ellipse 34rem 18rem at 94% 100%, rgba(224, 39, 104, .2), transparent 66%),
    linear-gradient(180deg, #4A1A35 0%, #3F122B 45%, #2C0C1E 100%) !important;
  border-top: 0 !important;
  color: #F2B8C9 !important;
}
html body .clixy-footer::before {
  content: "";
  position: absolute;
  top: auto;
  right: 0;
  bottom: 100%;
  left: 0;
  z-index: 0;
  height: 46px;
  opacity: 1;
  transform: none;
  background:
    radial-gradient(circle at 36px 46px, #4A1A35 35px, transparent 35.5px) 0 0 / 120px 46px repeat-x,
    radial-gradient(circle at 96px 46px, #4A1A35 24px, transparent 24.5px) 0 0 / 120px 46px repeat-x,
    linear-gradient(#4A1A35, #4A1A35) 0 100% / 100% 8px no-repeat;
  pointer-events: none;
}
html body .clixy-footer-grid { border-bottom: 2px dashed rgba(242, 184, 201, .3) !important; }
html body .clixy-footer-brand img { filter: brightness(1.12) drop-shadow(0 3px 10px rgba(0, 0, 0, .28)) !important; }
html body .clixy-footer-brand p { color: #F2B8C9 !important; font-size: .9rem !important; }
html body .clixy-footer-col h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFF5F8 !important;
  font-size: .74rem !important;
  letter-spacing: .12em;
  opacity: 1 !important;
}
html body .clixy-footer-col h3::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nube-accion);
  box-shadow: 0 0 0 3px rgba(224, 39, 104, .3);
}
html body .clixy-footer-col a { color: #F2B8C9 !important; font-size: .92rem !important; }
html body .clixy-footer-col a::after { height: 2px !important; border-radius: 2px; background: var(--nube-accion) !important; }
html body .clixy-footer-col a:hover,
html body .clixy-footer-col a:focus-visible { color: #FFFFFF !important; }
html body .clixy-footer-base,
html body .clixy-footer-base span { border-top: 0 !important; color: rgba(242, 184, 201, .85) !important; }
html body .clixy-footer-base .clixy-footer-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(242, 184, 201, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: #FFF5F8 !important;
  font-weight: 700;
}
html body .clixy-footer-base .clixy-footer-note::before {
  content: "\f3ed";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .9em;
  color: #F2B8C9;
}

/* 13. Los tres pasos, unidos por una linea de puntos entre tarjeta y tarjeta */
@media (min-width: 992px) {
  html body .clixy-steps-grid { position: relative; }
  html body .clixy-steps-grid::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 8%;
    left: 8%;
    z-index: 0;
    height: 3px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, var(--nube-rubor) 0 10px, transparent 10px 20px);
    pointer-events: none;
  }
  html body .clixy-step { position: relative; z-index: 1; }
}

/* 14. Respuesta al tocar: los botones suben un poco al pasar el raton y todo lo
       pulsable enseña un anillo rosa cuando se llega con el teclado. */
html body .clixy-main-btn { transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important; }
@media (hover: hover) {
  html body .clixy-main-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -12px rgba(224, 39, 104, .6) !important;
  }
}
html body .clixy-main-btn:active { transform: translateY(0); }
html body a:focus-visible,
html body button:focus-visible,
html body select:focus-visible {
  outline: 3px solid rgba(224, 39, 104, .45) !important;
  outline-offset: 2px;
}

/* 15. Menos trabajo al desplazarse. Las tarjetas ya son blancas opacas: su
       desenfoque de fondo (backdrop-filter) no se ve y se recalcula en cada
       fotograma. El fondo fijo del cuerpo obliga a repintar la pagina entera
       al desplazarse en movil. La cabecera conserva su desenfoque en escritorio. */
html body .clixy-feature,
html body .clixy-login-card,
html body .clixy-login-column .clixy-login-card,
html body .clixy-bottom-benefits,
html body .clixy-trust-card,
html body .clixy-landing .clixy-trust-card,
html body .clixy-badge,
html body .clixy-landing .clixy-badge,
html body .clixy-auth-card,
html body .clixy-register-page .clixy-auth-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body,
html body.clixy-unified-public { background-attachment: scroll !important; }
@media (max-width: 991.98px) {
  html body .clixy-nav-inner,
  html body .clixy-public-header .clixy-nav-inner {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255, 255, 255, .96) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .clixy-main-btn { transition: none !important; transform: none !important; }
}

/* El boton flotante de WhatsApp tapaba el final del pie en movil: aire abajo. */
@media (max-width: 767.98px) {
  html body .clixy-footer { padding-bottom: 5.5rem !important; }
}

/* ---- Tercera vuelta de la portada (22-09-2026): color, negritas y movimiento suave. */

/* 16. Mas vida: color, negritas y movimiento suave. El movimiento va dentro de
       prefers-reduced-motion: no-preference y usa translate/rotate sueltos (no
       transform) para no pisar el paralaje de la mascota ni las posiciones que
       ya llevan las piezas. */

/* 16.1 Negritas. Zen Maru a 400 se lee fina sobre rosa: el texto corrido pasa a
        500 y las frases clave llevan <strong> (index.php). */
html body .clixy-landing p,
html body .clixy-footer p,
html body .clixy-networks-foot span { font-weight: 500; }
html body .clixy-landing strong,
html body .clixy-footer strong { font-weight: 700; color: var(--nube-tinta); }
html body .clixy-feature h4,
html body .clixy-step h3,
html body .clixy-bottom-benefits strong { font-weight: 700 !important; color: var(--nube-tinta) !important; }
html body .clixy-hero-content .clixy-lead { font-weight: 600; color: var(--nube-tinta-2); }
html body .clixy-rotator { font-weight: 700 !important; }

/* 16.2 Color: iconos y numeros en circulo con el degradado de accion */
html body .clixy-bottom-benefits i {
  display: inline-grid;
  place-items: center;
  border-radius: 50% !important;
  background: var(--nube-degradado-accion) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px -8px rgba(224, 39, 104, .55) !important;
}
html body .clixy-step-number {
  background: var(--nube-degradado-accion) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px -8px rgba(224, 39, 104, .55), 0 0 0 4px rgba(247, 207, 218, .55) !important;
}
html body .clixy-section-kicker { display: inline-flex; align-items: center; gap: 7px; }
html body .clixy-section-kicker::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nube-accion);
  box-shadow: 0 0 0 3px rgba(224, 39, 104, .15);
}
/* Redes: cada icono en un circulo suave con el color de su marca */
html body .clixy-network i,
html body .clixy-network .clixy-network-svg {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(224, 39, 104, .1);
}
html body .clixy-network--instagram i { background: rgba(225, 48, 108, .12); }
html body .clixy-network--tiktok .clixy-network-svg { background: rgba(0, 0, 0, .07); }
html body .clixy-network--youtube i { background: rgba(255, 0, 0, .1); }
html body .clixy-network--facebook i { background: rgba(24, 119, 242, .12); }
html body .clixy-network--whatsapp i { background: rgba(37, 211, 102, .15); }
html body .clixy-network--twitch i { background: rgba(145, 70, 255, .1); }
html body .clixy-network--twitter i { background: rgba(29, 161, 242, .12); }
html body .clixy-network--telegram i { background: rgba(0, 136, 204, .12); }

/* 16.3 El degradado de las palabras destacadas, un poco mas vivo */
html body .clixy-hero-content h1 span,
html body .clixy-section-head h2 span {
  background-image: linear-gradient(100deg, #E02768 0%, #B71A51 35%, #F06292 65%, #E02768 100%) !important;
  background-size: 220% 100% !important;
}

/* 16.4 Tarjetas: transicion comun. Incluye opacity y transform, que usa la
        aparicion al bajar de clixy-motion.js; si no, esa aparicion saltaria. */
html body .clixy-feature,
html body .clixy-bottom-benefits > div,
html body .clixy-step,
html body .clixy-network {
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), translate .22s ease, box-shadow .22s ease !important;
}

@media (prefers-reduced-motion: no-preference) {
  /* Entrada al cargar: pildora, titular, subtitulo, acceso y banda de movil */
  html body .clixy-hero-content > .clixy-badge,
  html body .clixy-hero-content > h1,
  html body .clixy-hero-content > p,
  html body .clixy-login-card,
  html body .clixy-mobile-panel-intro { animation: nube-entra .7s cubic-bezier(.2, .8, .2, 1) both; }
  html body .clixy-hero-content > h1 { animation-delay: .08s; }
  html body .clixy-login-card { animation-delay: .12s; }
  html body .clixy-hero-content > p { animation-delay: .16s; }

  /* Las palabras destacadas deslizan su degradado despacio */
  html body .clixy-hero-content h1 span,
  html body .clixy-section-head h2 span { animation: nube-brillo-texto 7s ease-in-out infinite alternate; }

  /* La mascota flota; el paralaje sigue en su figura, aqui se mueve la imagen */
  html body .clixy-hero-mascot img { animation: nube-flota 5s ease-in-out infinite; }

  /* Las tarjetas suben un poco al pasar el raton, sin el retraso de su aparicion */
  @media (hover: hover) {
    html body .clixy-feature:hover,
    html body .clixy-bottom-benefits > div:hover,
    html body .clixy-step:hover,
    html body .clixy-network:hover {
      translate: 0 -3px;
      transition-delay: 0s !important;
      box-shadow: var(--nube-halo), var(--nube-sombra-alta) !important;
    }
  }

  /* Las nubes del pie se desplazan despacio */
  html body .clixy-footer::before { animation: nube-deriva 40s linear infinite; }
}
@keyframes nube-entra { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes nube-brillo-texto { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes nube-flota {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  50% { translate: 0 -10px; rotate: 1deg; }
}
@keyframes nube-deriva {
  from { background-position: 0 0, 0 0, 0 100%; }
  to { background-position: 120px 0, 120px 0, 0 100%; }
}

/* 17. Pie de las paginas con general_page.php (FAQ, catalogo, terminos, API y
       cookies): en vino con la orilla de nubes, igual que el de la portada.
       public-header.css lo pinta con body.clixy-unified-public y !important:
       html delante gana a esas reglas. */
html body.clixy-unified-public .footer.dark {
  position: relative;
  background: linear-gradient(180deg, #4A1A35 0%, #3F122B 60%, #2C0C1E 100%) !important;
  border-top: 0 !important;
  color: #F2B8C9 !important;
}
html body.clixy-unified-public .footer.footer_top.dark { margin-top: 64px; }
html body.clixy-unified-public .footer.footer_top.dark::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 46px;
  background:
    radial-gradient(circle at 36px 46px, #4A1A35 35px, transparent 35.5px) 0 0 / 120px 46px repeat-x,
    radial-gradient(circle at 96px 46px, #4A1A35 24px, transparent 24.5px) 0 0 / 120px 46px repeat-x,
    linear-gradient(#4A1A35, #4A1A35) 0 100% / 100% 8px no-repeat;
  pointer-events: none;
}
html body.clixy-unified-public footer.footer.footer_bottom.dark {
  background: #2C0C1E !important;
  border-top: 2px dashed rgba(242, 184, 201, .28) !important;
}
/* h4.title: public-header.css le da crema con ".footer .title" + !important */
html body.clixy-unified-public .footer h4,
html body.clixy-unified-public .footer .title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFF5F8 !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 1 !important;
}
html body.clixy-unified-public .footer h4::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nube-accion);
  box-shadow: 0 0 0 3px rgba(224, 39, 104, .3);
}
html body.clixy-unified-public .footer span,
html body.clixy-unified-public .footer li,
html body.clixy-unified-public .footer p,
html body.clixy-unified-public .footer a { color: #F2B8C9 !important; }
html body.clixy-unified-public .footer a:hover,
html body.clixy-unified-public .footer a:focus-visible { color: #FFFFFF !important; }
html body.clixy-unified-public .footer select {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(242, 184, 201, .3) !important;
  border-radius: 12px !important;
  color: #FFF5F8 !important;
}
html body.clixy-unified-public .footer .btn-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--nube-degradado-accion) !important;
  box-shadow: var(--nube-sombra-accion) !important;
}
html body.clixy-unified-public .footer .btn-icon i { color: #FFFFFF !important; }
@media (prefers-reduced-motion: no-preference) {
  html body.clixy-unified-public .footer.footer_top.dark::before { animation: nube-deriva 40s linear infinite; }
}
@media (max-width: 767.98px) {
  html body.clixy-unified-public footer.footer.footer_bottom.dark { padding-bottom: 5.5rem !important; }
}

/* 18. Politica de cookies: ahora con la cabecera y la piel publicas
       (general_page.php). El texto va en una tarjeta blanca, como terminos, y la
       raya del titulo deja el coral de su <style> por el degradado Nube. */
html body.clixy-cookies-public .page-title h1 { color: var(--nube-tinta); font-weight: 700; }
html body.clixy-cookies-public .page-title .border-line { background: var(--nube-degradado-accion) !important; }
html body.clixy-cookies-public .page-title .border-line::before {
  background: var(--nube-accion) !important;
  box-shadow: 0 0 0 3px rgba(224, 39, 104, .18);
}
html body.clixy-cookies-public .content {
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--nube-r-grande);
  background: #FFFFFF;
  box-shadow: var(--nube-halo), var(--nube-sombra);
  color: var(--nube-tinta-2);
  line-height: 1.7;
}
html body.clixy-cookies-public .content h2,
html body.clixy-cookies-public .content h3 { margin-top: 1.4em; color: var(--nube-tinta); font-weight: 700; }
html body.clixy-cookies-public .content > :first-child { margin-top: 0; }
html body.clixy-cookies-public .content strong,
html body.clixy-cookies-public .content b { color: var(--nube-tinta); }
html body.clixy-cookies-public .content a { color: var(--nube-enlace); font-weight: 700; }
html body.clixy-cookies-public .content li::marker { color: var(--nube-accion); }
html body.clixy-cookies-public .content code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--nube-lavado);
  color: var(--nube-enlace);
}


/* 19. Las demas paginas publicas con la misma vida que la portada (Santiago:
       "se ven algo muertas"): vino oscuro como acento, iconos y numeros en
       rosas, malva y vino, negritas y movimiento suave. faq.css, legal.css y
       api-docs.css se cargan despues de esta hoja: por eso html delante y
       !important en lo que ellas ya pintan. */

/* 19.1 Rotulos en pildora de vino, como "Plataforma lider SMM" */
html body .clixy-faq-kicker,
html body .clixy-legal-eyebrow,
html body .api-docs-eyebrow,
html body .clixy-service-status-kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  width: auto !important;
  padding: 7px 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(112deg, #3F122B 0%, #C91D59 54%, #D0205F 100%) !important;
  box-shadow: 0 10px 22px -12px rgba(63, 18, 43, .55) !important;
  color: #FFF5F8 !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
}
html body .clixy-faq-kicker i,
html body .api-docs-eyebrow i { color: #F7CFDA !important; }

/* 19.2 Tarjetas en vino, como "Mas de 5.000 clientes" */
html body .clixy-faq-help,
html body .clixy-legal-notice {
  border: 0 !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(224, 39, 104, .3), transparent 176px),
    linear-gradient(120deg, #5A2440 0%, #3F122B 58%, #2C0C1E 100%) !important;
  box-shadow: 0 18px 38px -18px rgba(63, 18, 43, .6) !important;
  color: #FFF5F8 !important;
}
html body .clixy-faq-help h2,
html body .clixy-legal-notice strong { color: #FFF5F8 !important; }
html body .clixy-faq-help p,
html body .clixy-legal-notice { color: #F2B8C9 !important; }
html body .clixy-faq-help a {
  border: 0 !important;
  background: linear-gradient(135deg, #E02768 0%, #D0205F 100%) !important;
  box-shadow: 0 10px 22px -10px rgba(224, 39, 104, .7) !important;
  color: #FFFFFF !important;
}

/* 19.3 Catalogo: cabecera de cada categoria en vino, filas que responden */
/* general_page.css la pinta con #result_ajaxSearch y !important: hace falta el mismo id */
html body .clixy-services-results .card-header,
html body.clixy-services-public .clixy-services-page #result_ajaxSearch .card > .card-header {
  border: 0 !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(224, 39, 104, .28), transparent 12rem),
    linear-gradient(120deg, #5A2440 0%, #3F122B 60%, #2C0C1E 100%) !important;
}
html body .clixy-services-results .card-header .card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFF5F8 !important;
  font-weight: 700 !important;
}
html body .clixy-services-results .card-header .card-title::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E02768;
  box-shadow: 0 0 0 3px rgba(224, 39, 104, .3);
}
html body .clixy-services-results .card-header .card-options a { color: #F2B8C9 !important; }
html body .clixy-services-results thead th {
  background: var(--nube-lavado) !important;
  color: var(--nube-tinta) !important;
  font-weight: 700 !important;
}
html body .clixy-services-results tbody tr { transition: background-color .2s ease; }
html body .clixy-services-results tbody tr:hover { background: rgba(253, 238, 243, .9) !important; }
html body .clixy-service-status-icon {
  background: linear-gradient(145deg, #2C0C1E, #5A2440) !important;
  color: #FFF5F8 !important;
  box-shadow: 0 10px 22px -12px rgba(63, 18, 43, .6) !important;
}
html body .clixy-service-status-icon i { color: #FFF5F8 !important; }
html body .clixy-service-status-metrics > span {
  border-left: 4px solid #E02768 !important;
  transition: translate .22s ease, box-shadow .22s ease;
}
html body .clixy-service-status-metrics > span:nth-child(2) { border-left-color: #754259 !important; }
html body .clixy-service-status-metrics > span:nth-child(3) { border-left-color: #3F122B !important; }
html body .clixy-service-status-metrics > span:nth-child(4) { border-left-color: #C91D59 !important; }
html body .clixy-service-status-metrics strong { color: var(--nube-tinta) !important; font-weight: 700 !important; }

/* 19.4 Numeros y pasos en rosas, malva y vino, como los iconos de la portada */
html body .clixy-faq-number,
html body .clixy-legal-number,
html body .api-quickstart-steps li > b {
  border: 0 !important;
  background: linear-gradient(145deg, #C91D59, #E02768) !important;
  box-shadow: 0 8px 18px -10px rgba(63, 18, 43, .55) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
html body .clixy-faq-item:nth-child(4n+2) .clixy-faq-number,
html body .clixy-legal-card:nth-of-type(2n) .clixy-legal-number,
html body .api-quickstart-steps li:nth-child(2) > b { background: linear-gradient(145deg, #754259, #D0205F) !important; }
html body .clixy-faq-item:nth-child(4n+3) .clixy-faq-number,
html body .api-quickstart-steps li:nth-child(3) > b { background: linear-gradient(145deg, #2C0C1E, #5A2440) !important; }
html body .clixy-faq-item:nth-child(4n+4) .clixy-faq-number { background: linear-gradient(145deg, #9A5775, #C91D59) !important; }
html body .api-quickstart-heading > span,
html body .api-docs-tags i { color: #FFFFFF; }
html body .api-quickstart-heading > span {
  background: linear-gradient(145deg, #2C0C1E, #5A2440) !important;
  box-shadow: 0 10px 22px -12px rgba(63, 18, 43, .6) !important;
}

/* 19.5 Negritas y preguntas */
html body .clixy-faq-question,
html body .clixy-legal-item h3,
html body .clixy-legal-summary strong { color: var(--nube-tinta) !important; font-weight: 700 !important; }
html body .clixy-faq-answer,
html body .clixy-legal-item p,
html body .clixy-faq-hero p,
html body .clixy-legal-hero p,
html body .api-docs-hero > p { font-weight: 500; }
html body .clixy-faq-item[open] {
  box-shadow: inset 4px 0 0 #3F122B, var(--nube-halo), var(--nube-sombra) !important;
}

/* 19.6 Recuperar contraseña, registro y cookies: el filo de vino arriba */
html body .sign-up-form .form-container,
html body .clixy-auth-card { box-shadow: inset 0 4px 0 #C91D59, var(--nube-halo), var(--nube-sombra-alta) !important; }
html body.clixy-cookies-public .page-title .border-line { background: linear-gradient(90deg, #3F122B 0%, #C91D59 55%, #E02768 100%) !important; }

/* 19.7 Movimiento suave, solo si el sistema no pide reducirlo */
html body .clixy-faq-item,
html body .clixy-legal-card,
html body .clixy-legal-summary > div,
html body .api-quickstart-steps li { transition: translate .22s ease, box-shadow .22s ease; }
@media (prefers-reduced-motion: no-preference) {
  html body .clixy-faq-hero > *,
  html body .clixy-legal-hero > *,
  html body .api-docs-hero > *,
  html body .clixy-services-toolbar,
  html body .clixy-service-status-center,
  html body .clixy-faq-item,
  html body .clixy-legal-summary > div,
  html body .clixy-auth-card,
  html body .sign-up-form .form-container,
  html body.clixy-cookies-public .page-title { animation: nube-entra .7s cubic-bezier(.2, .8, .2, 1) both; }
  html body .clixy-faq-hero > :nth-child(2),
  html body .clixy-legal-hero > :nth-child(2),
  html body .api-docs-hero > :nth-child(2),
  html body .clixy-service-status-center { animation-delay: .08s; }
  html body .clixy-faq-hero > :nth-child(n+3),
  html body .clixy-legal-hero > :nth-child(n+3),
  html body .api-docs-hero > :nth-child(n+3) { animation-delay: .16s; }
  html body .clixy-faq-item:nth-child(2) { animation-delay: .1s; }
  html body .clixy-faq-item:nth-child(3) { animation-delay: .15s; }
  html body .clixy-faq-item:nth-child(4) { animation-delay: .2s; }
  html body .clixy-faq-item:nth-child(5) { animation-delay: .25s; }
  html body .clixy-faq-item:nth-child(n+6) { animation-delay: .3s; }
  html body .clixy-legal-summary > div:nth-child(2) { animation-delay: .1s; }
  html body .clixy-legal-summary > div:nth-child(3) { animation-delay: .2s; }
  html body .api-docs-hero h1 span {
    background-image: linear-gradient(100deg, #E02768 0%, #B71A51 35%, #F06292 65%, #E02768 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: nube-brillo-texto 7s ease-in-out infinite alternate;
  }
  @media (hover: hover) {
    html body .clixy-faq-item:hover,
    html body .clixy-legal-card:hover,
    html body .clixy-legal-summary > div:hover,
    html body .clixy-service-status-metrics > span:hover,
    html body .api-quickstart-steps li:hover { translate: 0 -3px; }
  }
}

/* 20. Tarjeta de acceso de la portada (22-09-2026) */
/* 20.1 Un solo brillo en el boton. La banda ancha y muy blanca de clixy.css
        (::before) se quedaba parada como un rectangulo palido a la izquierda;
        queda el barrido suave de landing-refresh.css (::after), mas tenue. */
html body .clixy-login-card .clixy-main-btn::before { display: none !important; }
html body .clixy-login-card .clixy-main-btn::after {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 48%, transparent 66%) !important;
}
/* 20.2 Identidad: filo de vino arriba, icono de vino a rosa y "Acceso seguro"
        en pildora de vino tambien en escritorio (en movil ya existia). */
html body .clixy-login-card { box-shadow: inset 0 4px 0 #C91D59, var(--nube-halo), var(--nube-sombra-alta) !important; }
/* home-polish.css lo pinta con .clixy-landing delante y !important */
html body .clixy-landing .clixy-login-logo {
  background: linear-gradient(145deg, #3F122B 0%, #C91D59 70%, #E02768 100%) !important;
  box-shadow: 0 12px 24px -12px rgba(63, 18, 43, .6), 0 0 0 5px rgba(247, 207, 218, .6) !important;
}
html body .clixy-login-card h2::before {
  content: "ACCESO SEGURO";
  display: table;
  margin: 0 auto 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(112deg, #3F122B 0%, #C91D59 54%, #D0205F 100%);
  color: #FFF5F8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
}
/* 20.3 "Crear cuenta ahora" como boton suave: es lo que busca quien llega nuevo */
html body .clixy-login-footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--nube-lavado);
  box-shadow: var(--nube-halo);
  color: var(--nube-enlace) !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color .2s ease, translate .2s ease;
}
html body .clixy-login-footer a:hover { background: #FBE3EA; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html body .clixy-login-footer a:hover { translate: 0 -1px; }
}
/* 20.4 La casilla, en el rosa de la marca */
html body .clixy-checkbox input { accent-color: #E02768; }
/* 20.5 Ver la contraseña: el boton lo crea clixy-motion.js (verContrasena) */
html body .clixy-input-group.clixy-con-ojo,
html body .sign-up-form .form-group.clixy-con-ojo { position: relative; }
html body .clixy-input-group.clixy-con-ojo input,
html body .sign-up-form .form-group.clixy-con-ojo input { padding-right: 52px !important; }
html body .clixy-ver-clave {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  translate: 0 -50%;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nube-suave);
  cursor: pointer;
}
html body .clixy-ver-clave:hover { background: var(--nube-lavado); color: var(--nube-enlace); }
/* El icono de la izquierda del campo va absoluto (.clixy-input-group i): el del
   ojo no debe heredarlo. */
html body .clixy-input-group .clixy-ver-clave i,
html body .clixy-ver-clave i {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 16px !important;
}

/* 21. Mas color en iconos (22-09-2026). Santiago, tras ver las redes a color
       en el panel: "se ve mas viva la web, si puedes añadir mas color asi en
       ciertas partes o iconos hazlo, aplica tambien para el landing page".
       Los acentos de vino se quedan como estaban.
   21.1 Redes que impulsamos: Instagram con su degradado recortado al icono
        (las demas ya llevan su color desde landing-refresh.css) */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  html body .clixy-network--instagram i::before {
    background-image: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
html body .clixy-network--tiktok .clixy-network-svg { color: #111111; }

/* 21.2 Tarjeta de confianza: las tres burbujas con el color de su red */
html body .clixy-landing .clixy-avatar-stack .clixy-social-instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%) !important; }
html body .clixy-landing .clixy-avatar-stack .clixy-social-youtube { background: #FF0000 !important; }
html body .clixy-landing .clixy-avatar-stack .clixy-social-facebook { background: #1877F2 !important; }
html body .clixy-landing .clixy-avatar-stack .clixy-social-avatar,
html body .clixy-landing .clixy-avatar-stack .clixy-social-avatar > i { color: #FFFFFF !important; }

/* 21.3 Ventajas de abajo: cada una en su color (soporte rosa, pagos verde,
        privacidad azul, plataforma naranja) */
html body .clixy-bottom-benefits > div:nth-child(1) i { background: linear-gradient(135deg, #F06292 0%, #E02768 100%) !important; box-shadow: 0 8px 18px -8px rgba(224, 39, 104, .55) !important; }
html body .clixy-bottom-benefits > div:nth-child(2) i { background: linear-gradient(135deg, #40C057 0%, #2B8A3E 100%) !important; box-shadow: 0 8px 18px -8px rgba(43, 138, 62, .55) !important; }
html body .clixy-bottom-benefits > div:nth-child(3) i { background: linear-gradient(135deg, #339AF0 0%, #1864AB 100%) !important; box-shadow: 0 8px 18px -8px rgba(24, 100, 171, .55) !important; }
html body .clixy-bottom-benefits > div:nth-child(4) i { background: linear-gradient(135deg, #FD7E14 0%, #D9480F 100%) !important; box-shadow: 0 8px 18px -8px rgba(217, 72, 15, .55) !important; }

/* Mas negrita (27-09-2026). Santiago, tras subirla en el panel (clixy-nube.css
   17.41): "En el landing page igual, en especial en las letras cuando
   escribimos nuestro correo y contraseña para el login". Zen Maru a 400 es
   fina en pantalla; esta hoja carga 400, 500, 700 y 900. El texto normal
   pasa a 500 y lo que se escribe en los campos de acceso y registro, a 600
   (el texto de ayuda de dentro del campo se queda en 500 y en suave). */
html body { font-weight: 500; }
html body input,
html body textarea,
html body select,
html body button { font-weight: 500; }
html body .clixy-input-group input,
html body .sign-up-form .form-control-input { font-weight: 600 !important; color: var(--nube-tinta) !important; }
html body .clixy-input-group input::placeholder,
html body .sign-up-form .form-control-input::placeholder { font-weight: 500; color: var(--nube-suave); opacity: 1; }

/* =============================================================================
   21. ACCESO Y REGISTRO COMPACTOS (30-09-2026)
   Santiago: "achatar" el cuadro de acceso de la portada y el del registro
   para que entren enteros en pantalla. Solo tamaños y espacios; las vistas no
   cambian. Especificidad alta y !important: por debajo hay cuatro hojas
   (clixy.css, landing-refresh, home-polish, register-polish) con sus tamaños.
   ============================================================================= */

/* 21.1 Portada: tarjeta de acceso */
html body .clixy-landing .clixy-login-column .clixy-login-card { padding: 22px 30px 18px !important; }
html body .clixy-landing .clixy-login-card .clixy-login-logo {
  width: 42px !important; height: 42px !important; font-size: 16px !important;
  margin: 0 auto 8px !important;
  box-shadow: 0 8px 18px -10px rgba(63, 18, 43, .6), 0 0 0 4px rgba(247, 207, 218, .6) !important;
}
html body .clixy-landing .clixy-login-card h2 { font-size: 24px !important; margin-bottom: 2px !important; }
html body .clixy-landing .clixy-login-card h2::before { margin: 0 auto 6px !important; padding: 5px 10px !important; font-size: 9px !important; }
html body .clixy-landing .clixy-login-card > p { margin-bottom: 14px !important; font-size: 14px !important; }
html body .clixy-landing .clixy-login-card .clixy-input-group { height: 48px !important; margin-bottom: 10px !important; }
html body .clixy-landing .clixy-login-card .clixy-form-row { margin: 2px 0 12px !important; }
html body .clixy-landing .clixy-login-card .clixy-main-btn { height: 50px !important; font-size: 16px !important; }
html body .clixy-landing .clixy-login-card .alert-message-reponse:empty { display: none !important; }
/* Google, mas junto */
html body .clixy-login-card .clixy-google,
html body .clixy-auth-card .clixy-google { margin-top: 10px !important; }
html body .clixy-login-card .clixy-google__o,
html body .clixy-auth-card .clixy-google__o { margin: 0 0 8px !important; font-size: 12px !important; }
html body .clixy-login-card .clixy-google__btn,
html body .clixy-auth-card .clixy-google__btn { min-height: 44px !important; padding: 8px 14px !important; font-size: 14.5px !important; border-radius: 12px !important; }
html body .clixy-login-card .clixy-google__legal,
html body .clixy-auth-card .clixy-google__legal { margin-top: 5px !important; font-size: 11.5px !important; }
/* "¿No tienes cuenta? [Crear cuenta ahora]" en una sola linea */
html body .clixy-landing .clixy-login-card .clixy-login-footer {
  margin-top: 12px !important; padding-top: 10px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-wrap: wrap !important; gap: 6px 10px !important; font-size: 14px !important;
}
html body .clixy-landing .clixy-login-card .clixy-login-footer span { display: inline !important; margin: 0 !important; }
html body .clixy-landing .clixy-login-card .clixy-login-footer a { margin-top: 0 !important; padding: 7px 14px !important; font-size: 14px !important; }

/* 21.2 Registro */
html body .clixy-register-page .clixy-auth-logo { min-height: 0 !important; margin-bottom: 6px !important; }
html body .clixy-register-page .clixy-auth-logo img { width: 150px !important; max-height: 66px !important; }
html body .clixy-register-page .clixy-auth-card { padding: 22px 36px 18px !important; }
html body .clixy-register-page .clixy-auth-card h1 { font-size: 26px !important; margin: 0 0 2px !important; }
/* El cuadrado rosa vacio de encima del titulo pasa a pildora, como "Acceso seguro" en la portada */
html body .clixy-register-page .clixy-auth-card h1::before {
  content: "REGISTRO GRATIS" !important;
  position: static !important; display: table !important;
  width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 auto 8px !important; padding: 5px 10px !important;
  border: 0 !important; border-radius: 999px !important;
  background: linear-gradient(112deg, #3F122B 0%, #C91D59 54%, #D0205F 100%) !important;
  box-shadow: none !important; transform: none !important;
  color: #FFF5F8 !important; font-family: inherit !important;
  font-size: 9px !important; font-weight: 700 !important; letter-spacing: .14em !important; line-height: 1 !important;
}
html body .clixy-register-page .clixy-auth-card > p { margin-bottom: 14px !important; font-size: 14px !important; }
html body .clixy-register-page .clixy-auth-card .clixy-input-group { height: 48px !important; margin-bottom: 10px !important; }
/* La zona horaria la elige sola el navegador (script de sign_up.php) y se
   sigue enviando; a la vista ya no hace falta: cada uno ve su hora local. */
html body .clixy-register-page .clixy-select-group { display: none !important; }
html body .clixy-register-page .alert-message-reponse:empty { display: none !important; }
html body .clixy-register-page .clixy-terms { margin: 2px 0 12px !important; font-size: 13px !important; }
html body .clixy-register-page .clixy-main-btn { height: 50px !important; font-size: 16px !important; }
html body .clixy-register-page .clixy-auth-footer { margin-top: 12px !important; padding-top: 10px !important; font-size: 14px !important; }
/* En PC, en dos columnas: nombre con apellido y contraseña con su confirmacion */
@media (min-width: 640px) {
  html body .clixy-register-page #signUpForm { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  html body .clixy-register-page #signUpForm > * { grid-column: 1 / -1; }
  html body .clixy-register-page #signUpForm > .clixy-input-group:has(input[name="first_name"]),
  html body .clixy-register-page #signUpForm > .clixy-input-group:has(input[name="last_name"]),
  html body .clixy-register-page #signUpForm > .clixy-input-group:has(input[name="password"]),
  html body .clixy-register-page #signUpForm > .clixy-input-group:has(input[name="re_password"]) { grid-column: auto; }
}
/* En movil tambien un poco mas junto */
@media (max-width: 639.98px) {
  html body .clixy-register-page .clixy-auth-card { padding: 20px 18px 16px !important; }
  html body .clixy-landing .clixy-login-column .clixy-login-card { padding: 20px 18px 16px !important; }
}

/* =============================================================================
   22. REGISTRO MAS PROFESIONAL (30-09-2026)
   Santiago: "que se vea mas profesional" y el logo "separarlo poquito mas".
   Titulo en vino (el rosa queda para las acciones), campos a 16 px para que
   "Confirmar contraseña" quepa en su columna, terminos como linea limpia y
   tres ventajas ciertas bajo el subtitulo (.clixy-registro-ventajas).
   ============================================================================= */
html body .clixy-register-page .clixy-auth-logo { margin-bottom: 20px !important; }
html body .clixy-register-page .clixy-auth-logo img { width: 170px !important; max-height: 74px !important; }
html body .clixy-register-page .clixy-auth-card h1 {
  color: #3F122B !important; -webkit-text-fill-color: #3F122B !important;
  background: none !important; letter-spacing: -.02em !important;
}
/* La pildora de encima (h1::before) heredaba el color de relleno del titulo y
   quedaba oscura sobre oscuro: se le devuelve su blanco rosado */
html body .clixy-register-page .clixy-auth-card h1::before {
  content: "ÚNETE A CLIXY" !important; /* "Registro gratis" ya va en las ventajas */
  color: #FFF5F8 !important; -webkit-text-fill-color: #FFF5F8 !important;
}
html body .clixy-register-page .clixy-auth-card > p { margin-bottom: 10px !important; color: #7A5566 !important; }
/* Ventajas */
html body .clixy-register-page .clixy-registro-ventajas {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px;
}
html body .clixy-register-page .clixy-registro-ventajas li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: #FFF5F8; border: 1px solid #F3D3DE;
  color: #5B2A40; font-size: 12.5px; font-weight: 700; line-height: 1;
}
html body .clixy-register-page .clixy-registro-ventajas i { color: #C91D59; font-size: 12px; }
html body .clixy-register-page .clixy-registro-ventajas .fa-whatsapp { color: #1FA855; font-size: 13px; }
/* Campos: letra a 16 px e icono algo mas pequeño para que nada se corte en las columnas */
html body .clixy-register-page .clixy-auth-card .clixy-input-group input,
html body .clixy-register-page .clixy-auth-card .clixy-input-group input::placeholder { font-size: 16px !important; }
html body .clixy-register-page .clixy-auth-card .clixy-input-group { padding-left: 12px !important; padding-right: 12px !important; }
html body .clixy-register-page .clixy-auth-card .clixy-input-group i { margin-right: 10px !important; }
/* Terminos: una linea limpia, sin caja de color */
html body .clixy-register-page .clixy-terms {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important;
  width: auto !important; margin: 0 0 14px 2px !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: #6B4A58 !important; font-size: 13px !important; font-weight: 500 !important;
}
html body .clixy-register-page .clixy-terms input { width: 16px !important; height: 16px !important; margin: 0 !important; accent-color: #C91D59 !important; }
html body .clixy-register-page .clixy-terms a { color: #B12A5F !important; font-weight: 700 !important; }
@media (max-width: 639.98px) {
  html body .clixy-register-page .clixy-auth-logo { margin-bottom: 14px !important; }
  html body .clixy-register-page .clixy-registro-ventajas li { font-size: 12px; padding: 5px 9px; }
}

/* ==========================================================================
   23. PULIDO FINAL CON LA GUIA DE APPLE (30-09-2026, skill apple-design)
   Revision pagina a pagina antes de grabar los tutoriales: textos que no se
   leian, letra diminuta en movil, campos que hacian zoom en el iPhone, el
   catalogo publico en fichas en el movil y respuesta inmediata al pulsar.
   ========================================================================== */

/* 23.1 El pie es vino y sus negritas iban en vino (16.1): "Sin cuota mensual"
        no se veia. */
html body .clixy-footer strong { color: #FFF5F8 !important; }

/* 23.2 Banda de movil de la portada: el rotulo iba a 8 px, la frase a 10,5 px
        y su negrita en vino sobre vino. */
@media (max-width: 575.98px) {
  html body .clixy-mobile-panel-intro-kicker { font-size: 10.5px !important; letter-spacing: .12em !important; margin-bottom: 4px !important; }
  html body .clixy-mobile-panel-intro p { font-size: 13px !important; line-height: 1.4 !important; }
  html body .clixy-mobile-panel-intro strong { color: #FFFFFF !important; }
}

/* 23.3 "Al continuar aceptas los terminos" y la "o" de Google: legibles. */
html body .clixy-google__legal,
html body .clixy-login-card .clixy-google__legal,
html body .clixy-auth-card .clixy-google__legal { font-size: 12px !important; color: #7A5566 !important; }
html body .clixy-google__o span { color: #8A6474 !important; }

/* 23.4 Interlineado de titulos: holgado en el texto, justo en los titulos. */
html body .clixy-step h3 { line-height: 1.3 !important; }
html body .clixy-login-card h2 { line-height: 1.2 !important; }

/* 23.5 Respuesta al pulsar. Apple: la respuesta va en el instante de tocar, no
        al soltar. Se usa la propiedad scale, suelta, para no pisar el
        transform del paso del raton. La clase doble gana a home-polish.css. */
html body .clixy-main-btn.clixy-main-btn { transition: transform .24s cubic-bezier(.2, .75, .3, 1), box-shadow .24s ease, filter .24s ease, background-position .45s ease, scale .12s ease-out !important; }
html body .clixy-register-btn.clixy-register-btn { transition: transform .22s cubic-bezier(.2, .75, .3, 1), color .22s ease, box-shadow .22s ease, filter .22s ease, background-position .42s ease, scale .12s ease-out !important; }
html body .clixy-google__btn.clixy-google__btn { transition: box-shadow .2s ease, border-color .2s ease, scale .12s ease-out !important; }
html body .clixy-login-footer a { transition: background-color .2s ease, translate .2s ease, scale .12s ease-out !important; }
html body .sign-up-form .form-control-submit-button,
html body .clixy-description-trigger.clixy-description-trigger { transition: background .2s ease, box-shadow .2s ease, scale .12s ease-out !important; }
html body .clixy-main-btn:active,
html body .clixy-register-btn:active,
html body .clixy-google__btn:active,
html body .clixy-login-footer a:active,
html body .sign-up-form .form-control-submit-button:active,
html body .clixy-description-trigger:active,
html body .clixy-olvido-volver a:active { scale: .97; }
@media (prefers-reduced-motion: reduce) {
  html body .clixy-main-btn:active,
  html body .clixy-register-btn:active,
  html body .clixy-google__btn:active,
  html body .clixy-login-footer a:active,
  html body .sign-up-form .form-control-submit-button:active,
  html body .clixy-description-trigger:active,
  html body .clixy-olvido-volver a:active { scale: none; opacity: .85; }
}

/* 23.6 Con "reducir transparencia" activado en el sistema, cabecera solida. */
@media (prefers-reduced-transparency: reduce) {
  html body .clixy-nav-inner,
  html body .clixy-public-header .clixy-nav-inner {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #FFFFFF !important;
  }
}

/* 23.7 Campos a 16 px en movil: por debajo, el iPhone amplia la pagina al
        tocarlos (recuperar contraseña, catalogo, API y el selector de idioma). */
@media (max-width: 767.98px) {
  html body .sign-up-form .form-control-input,
  html body .clixy-services-page .form-control,
  html body.clixy-unified-public .form-control,
  html body .footer-lang-selector { font-size: 16px !important; }
}

/* 23.8 Recuperar y cambiar contraseña: logo arriba y camino de vuelta
        (Apple: toda pantalla dice donde estoy y como salgo). */
html body .sign-up-form .clixy-olvido-logo { display: block; width: 150px; margin: 0 auto 18px; }
html body .sign-up-form .clixy-olvido-logo img { display: block; width: 100%; height: auto; }
html body .sign-up-form .clixy-olvido-volver { margin: 16px 0 0 !important; text-align: center; }
html body .sign-up-form .clixy-olvido-volver a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  color: #B12A5F !important; font-weight: 700; text-decoration: none !important;
  transition: background-color .2s ease, scale .12s ease-out;
}
html body .sign-up-form .clixy-olvido-volver a:hover { background: rgba(224, 39, 104, .08); }
html body .sign-up-form:has(.clixy-olvido-logo) { padding-top: 3rem !important; }

/* 23.9 Catalogo publico. Minimo y maximo en gris claro (2,3:1): pasan a malva.
        Las cifras de arriba iban una debajo de otra: general_page.css solo
        activaba la rejilla con movimiento reducido. */
html body.clixy-services-public .clixy-services-results .table td.text-muted { color: #754259 !important; }
html body.clixy-services-public .clixy-description-trigger { min-height: 34px; }
html body.clixy-services-public .clixy-service-status-metrics { display: grid !important; grid-template-columns: repeat(4, minmax(76px, 1fr)); }

/* 23.10 Catalogo publico en el movil: cada servicio en una ficha, como en el
         panel. La tabla de escritorio obligaba a leer el nombre en una
         columna de tres palabras. */
@media (max-width: 767.98px) {
  html body.clixy-services-public .clixy-service-status-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  html body.clixy-services-public .clixy-service-status-metrics > span { width: auto !important; min-width: 0 !important; margin: 0 !important; }

  html body.clixy-services-public .clixy-services-results .table-responsive { overflow: visible !important; }
  html body.clixy-services-public .clixy-services-results .table,
  html body.clixy-services-public .clixy-services-results .table tbody { display: block !important; width: 100% !important; }
  html body.clixy-services-public .clixy-services-results .table thead { display: none !important; }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "id id precio"
      "nombre nombre nombre"
      "min max tiempo"
      "desc desc desc";
    gap: 8px;
    padding: 14px 14px 16px !important;
    border-bottom: 1px solid #F6DCE5 !important;
  }
  /* El buscador oculta filas con style="display: none" */
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item[style*="none"] { display: none !important; }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td {
    display: block !important; width: auto !important; max-width: none !important; min-width: 0 !important;
    padding: 0 !important; border: 0 !important; text-align: left !important;
  }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(1) {
    grid-area: id; align-self: center;
    font-size: 12px; font-weight: 700; color: #754259 !important;
  }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(1)::before { content: "ID "; font-weight: 600; }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(2) { grid-area: nombre; }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(3) {
    grid-area: precio; text-align: right !important;
    font-size: 15px; font-weight: 800; color: #3F122B !important; line-height: 1.2;
  }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(3)::after {
    content: "por cada 1000"; display: block; margin-top: 2px;
    font-size: 11.5px; font-weight: 600; color: #7A5566;
  }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(4) { grid-area: min; }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(5) { grid-area: max; }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td.w-15p { grid-area: tiempo; }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(4),
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(5),
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td.w-15p {
    padding: 8px 10px !important; border-radius: 12px; background: #FFF5F8 !important;
    font-size: 13px; font-weight: 700; color: #3F122B !important; line-height: 1.25;
    overflow-wrap: anywhere;
  }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(4)::before,
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(5)::before,
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td.w-15p::before {
    display: block; margin-bottom: 2px;
    font-size: 11px; font-weight: 600; color: #7A5566;
  }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(4)::before { content: "Mínimo"; }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td:nth-child(5)::before { content: "Máximo"; }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td.w-15p::before { content: "Tiempo"; }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td.clixy-service-description-cell { grid-area: desc; }
  html body.clixy-services-public .clixy-services-results .table tbody tr.service-item > td.clixy-service-description-cell:has(.clixy-description-empty) { display: none !important; }
  html body.clixy-services-public .clixy-description-trigger {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
    width: 100%; min-height: 40px;
    border: 1px solid #F3D3DE !important; border-radius: 12px !important;
    background: #FFF5F8 !important; color: #B12A5F !important; font-weight: 700 !important;
  }
  html body.clixy-services-public .clixy-description-trigger i { color: #C91D59 !important; }
  html body.clixy-services-public .clixy-description-trigger span::after { content: " descripción"; }
}

/* 23.11 Aparicion al bajar mas corta (Apple: nada de esperas en el camino del
         usuario). Antes 0,6 s y 18 px: al bajar rapido se veian huecos vacios y
         la linea de puntos de los pasos cruzaba los titulos a medio aparecer. */
html body .clixy-aparece:not(.clixy-aparecido) { transform: translateY(10px); }
html body .clixy-feature,
html body .clixy-bottom-benefits > div,
html body .clixy-step,
html body .clixy-network {
  transition: opacity .35s ease-out, transform .35s cubic-bezier(.2, .8, .2, 1), translate .22s ease, box-shadow .22s ease !important;
}
html body .clixy-section-head.clixy-aparece,
html body .clixy-trust-card.clixy-aparece { transition: opacity .35s ease-out, transform .35s cubic-bezier(.2, .8, .2, 1) !important; }

/* 23.12 La cuarta ventaja del hero llevaba un fondo rosa distinto de las otras
         tres (resto de un diseño anterior). Lo que se ve igual, se pinta igual. */
html body .clixy-landing .clixy-feature:nth-child(4) {
  background: linear-gradient(135deg, rgba(255, 247, 249, .96), rgba(255, 247, 249, .88)) !important;
}

/* 23.13 API publica: los iconos de las pastillas iban en blanco sobre blanco y
         el texto de los tres pasos a 11 px. */
html body .api-docs-tags i { color: #C91D59 !important; }
html body .api-quickstart-steps small { font-size: 12.5px !important; line-height: 1.35 !important; }
html body .api-clave-vacia a { color: #B12A5F !important; font-weight: 700; }

/* 23.14 API publica en el movil. Las tablas de dos columnas se salian por la
         derecha con barra de desplazamiento (la URL y la clave cortadas): cada
         fila pasa a nombre arriba y valor debajo. Las pastillas de arriba no
         son botones: van en linea y no a lo ancho, para no parecerlo. */
@media (max-width: 575.98px) {
  html body .api-documentation .table:not(.d-none) {
    display: block !important; width: 100% !important; overflow: visible !important;
  }
  html body .api-documentation .table thead,
  html body .api-documentation .table tbody { display: block !important; }
  html body .api-documentation .table thead tr:has(th) { display: none !important; }
  html body .api-documentation .table tr {
    display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 3px;
    padding: 10px 14px !important;
  }
  html body .api-documentation .table td,
  html body .api-documentation .table th {
    display: block !important; width: auto !important; min-width: 0 !important;
    padding: 0 !important; border: 0 !important;
    background: none !important; overflow-wrap: anywhere;
  }
  html body .api-documentation .table td:first-child {
    font-size: 12.5px !important; font-weight: 700 !important; color: #754259 !important;
  }
  html body .api-documentation .table tr + tr,
  html body .api-documentation .table tbody tr:first-child { border-top: 1px solid #F6DCE5; }
  html body .api-docs-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  html body .api-docs-tags > span { width: auto !important; flex: 0 0 auto !important; }
}