/*!
 * Creators MX — landing.css · Portada 2.5
 * Rediseño integral de la página de inicio según las maquetas de referencia:
 * fondo con brillos y arcos de luz, escenario de tarjetas de cristal con
 * profundidad, notas manuscritas, indicador de scroll y encabezado de
 * "dos caminos". Base = tema claro; el bloque [data-theme="dark"] replica
 * la versión oscura (la que carga siempre por defecto).
 * Depende de: app.css (nav/base), v24.css (secciones), Caveat (Google Fonts).
 */

/* =========================================================================
   0 · Tokens de la portada
   ========================================================================= */
body.cmx-screen-landing {
  --l-bg: #f7f4ff;
  --l-text: #16082b;
  --l-muted: #5d5470;
  --l-card: rgba(255, 255, 255, .78);
  --l-card-line: rgba(124, 58, 237, .14);
  --l-card-shadow: 0 24px 60px -18px rgba(76, 29, 149, .22), 0 6px 18px rgba(76, 29, 149, .08);
  --l-glass-blur: 18px;
  --l-accent: #7c3aed;
  --l-accent-2: #8b5cf6;
  --l-cyan: #22d3ee;
  --l-magenta: #d946ef;
  --l-grad-text: linear-gradient(92deg, #a855f7 4%, #818cf8 48%, #22d3ee 96%);
  --l-grad-btn: linear-gradient(135deg, #8b5cf6, #7c3aed 55%, #6d28d9);
  --l-note: #7c3aed;
  --l-radius: 24px;
  background: var(--l-bg) !important;
  color: var(--l-text);
  overflow-x: hidden;
}
[data-theme="dark"] body.cmx-screen-landing {
  --l-bg: #080210;
  --l-text: #f5f1ff;
  --l-muted: #a79fc0;
  --l-card: rgba(24, 12, 48, .58);
  --l-card-line: rgba(168, 132, 255, .16);
  --l-card-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(168, 132, 255, .05), 0 8px 30px rgba(124, 58, 237, .12);
  --l-note: #c4a5ff;
  background: var(--l-bg);
}

/* Capa de contenido por encima del fondo fijo.
   v24.css forzaba color #fff en toda la portada (diseño oscuro fijo anterior);
   aquí el color depende del tema. */
body.cmx-screen-landing .cmx24-landing { position: relative; z-index: 1; color: var(--l-text); width: 100%; max-width: none; padding: 0 0 70px; }
body.cmx-screen-landing .cmx24-landing > *:not(.cmx25-bg):not(.cmx25-hero) { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
body.cmx-screen-landing .cmx24-faq-section .cmx24-center a { color: var(--l-accent); }
[data-theme="dark"] body.cmx-screen-landing .cmx24-faq-section .cmx24-center a { color: #c4a5ff; }
body.cmx-screen-landing main,
body.cmx-screen-landing .cmx-app-main { position: relative; z-index: 1; }

/* =========================================================================
   1 · Fondo: brillos, arcos de luz y estrellas
   ========================================================================= */
.cmx25-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cmx25-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.cmx25-g1 { width: 62vw; height: 62vw; left: -18vw; top: -24vw; background: radial-gradient(circle, rgba(168, 85, 247, .32), transparent 68%); }
.cmx25-g2 { width: 54vw; height: 54vw; right: -16vw; top: 4vh; background: radial-gradient(circle, rgba(217, 70, 239, .22), transparent 68%); }
.cmx25-g3 { width: 70vw; height: 70vw; left: 12vw; bottom: -40vh; background: radial-gradient(circle, rgba(99, 102, 241, .2), transparent 70%); }

.cmx25-arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmx25-arc { stroke-width: 2.2; stroke-linecap: round; fill: none; opacity: .5; }
.cmx25-arcs path { stroke: rgba(168, 85, 247, .35); }
.cmx25-arc-b { stroke: rgba(217, 70, 239, .28); stroke-width: 1.4; }
.cmx25-arc-c { stroke: rgba(34, 211, 238, .22); stroke-width: 1.6; }
@keyframes cmx25ArcFlow { to { stroke-dashoffset: -2400; } }
.cmx25-arc { stroke-dasharray: 340 1860; animation: cmx25ArcFlow 26s linear infinite; }
.cmx25-arc-b { animation-duration: 34s; animation-delay: -8s; }
.cmx25-arc-c { animation-duration: 30s; animation-delay: -14s; }

/* Estrellas: solo tienen sentido sobre fondo oscuro */
.cmx25-stars { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 28% 64%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 44% 12%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 58% 42%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 78%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 82% 26%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 91% 58%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 8% 84%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 36% 90%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 63% 6%, rgba(255,255,255,.7) 50%, transparent 51%);
}
@keyframes cmx25Twinkle { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
[data-theme="dark"] .cmx25-stars { opacity: .6; animation: cmx25Twinkle 6s ease-in-out infinite; }
[data-theme="dark"] .cmx25-g1 { opacity: .8; background: radial-gradient(circle, rgba(124, 58, 237, .5), transparent 66%); }
[data-theme="dark"] .cmx25-g2 { opacity: .7; background: radial-gradient(circle, rgba(217, 70, 239, .38), transparent 66%); }
[data-theme="dark"] .cmx25-g3 { opacity: .65; background: radial-gradient(circle, rgba(59, 40, 160, .45), transparent 70%); }
[data-theme="dark"] .cmx25-arcs path { stroke: rgba(196, 165, 255, .5); }
[data-theme="dark"] .cmx25-arc-b { stroke: rgba(232, 121, 249, .42); }
[data-theme="dark"] .cmx25-arc-c { stroke: rgba(103, 232, 249, .35); }

/* =========================================================================
   2 · Navegación en la portada (siempre oscura, igual que en toda la app)
   ========================================================================= */
body.cmx-screen-landing .cmx-nav {
  background: rgba(10, 4, 22, .72);
  border-bottom-color: rgba(168, 132, 255, .14);
  box-shadow: 0 10px 34px -18px rgba(0, 0, 0, .8);
}
body.cmx-screen-landing .cmx-nav .nav-link { font-weight: 700; border-radius: 999px; padding: 9px 16px; transition: color .2s ease, background .2s ease; }
body.cmx-screen-landing .cmx-nav .nav-link:hover { color: #fff; background: rgba(168, 132, 255, .12); }
body.cmx-screen-landing .cmx-nav .nav-link.active { color: #fff; background: rgba(168, 132, 255, .16); box-shadow: inset 0 0 0 1px rgba(168, 132, 255, .24); }
body.cmx-screen-landing .cmx-nav .nav-login {
  background: var(--l-grad-btn); color: #fff !important; border-radius: 999px;
  padding: 11px 22px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 10px 26px -8px rgba(124, 58, 237, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.3), box-shadow .22s ease;
}
body.cmx-screen-landing .cmx-nav .nav-login::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .22s ease; }
body.cmx-screen-landing .cmx-nav .nav-login:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px rgba(124, 58, 237, .65), inset 0 1px 0 rgba(255, 255, 255, .25); }
body.cmx-screen-landing .cmx-nav .nav-login:hover::after { transform: translateX(4px); }

/* =========================================================================
   3 · Hero: rejilla, copy y llamados
   ========================================================================= */
.cmx25-hero {
  display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  gap: clamp(20px, 3vw, 44px); align-items: center;
  width: 100%; max-width: min(1400px, 100%); margin: 0 auto;
  padding: clamp(18px, 3.5vh, 44px) clamp(18px, 3vw, 36px) clamp(6px, 1.5vh, 16px);
  min-height: calc(100vh - var(--nav-h, 64px) - 104px);
}
.cmx25-copy { position: relative; z-index: 2; }

.cmx25-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  color: var(--l-accent);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(124, 58, 237, .22);
  box-shadow: 0 6px 20px -8px rgba(124, 58, 237, .3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cmx25-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--l-magenta); box-shadow: 0 0 10px 2px rgba(217, 70, 239, .55); animation: cmx25Pulse 2.4s ease-in-out infinite; }
@keyframes cmx25Pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .7; } }
[data-theme="dark"] .cmx25-pill { color: #e6d9ff; background: rgba(30, 14, 58, .6); border-color: rgba(168, 132, 255, .28); }

.cmx25-h1 {
  margin: 22px 0 18px; font-weight: 900;
  font-size: clamp(2.3rem, 4.1vw, 3.7rem);
  line-height: 1.02; letter-spacing: -.028em; color: var(--l-text);
}
.cmx25-grad {
  background: var(--l-grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: cmx25GradShift 7s ease-in-out infinite;
}
@keyframes cmx25GradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.cmx25-sub { max-width: 37rem; font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.65; color: var(--l-muted); margin: 0 0 26px; }

.cmx25-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.cmx25-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 16px;
  font-weight: 800; font-size: 1rem; text-decoration: none;
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.35), box-shadow .25s ease, background .25s ease;
  will-change: transform;
}
.cmx25-btn-ic { display: inline-flex; }
.cmx25-btn-arrow { display: inline-block; transition: transform .25s ease; }
.cmx25-btn:hover .cmx25-btn-arrow { transform: translateX(5px); }
body.cmx-app .cmx25-btn-solid {
  color: #fff; background: var(--l-grad-btn);
  box-shadow: 0 16px 34px -10px rgba(124, 58, 237, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.cmx25-btn-solid:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -10px rgba(124, 58, 237, .65), inset 0 1px 0 rgba(255, 255, 255, .3); }
body.cmx-app .cmx25-btn-glass {
  color: var(--l-text);
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(124, 58, 237, .18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px -14px rgba(76, 29, 149, .3);
}
.cmx25-btn-glass:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .85); box-shadow: 0 16px 34px -14px rgba(76, 29, 149, .4); }
[data-theme="dark"] body.cmx-app .cmx25-btn-glass { color: #f1eaff; background: rgba(34, 18, 66, .55); border-color: rgba(168, 132, 255, .24); }
[data-theme="dark"] .cmx25-btn-glass:hover { background: rgba(46, 26, 86, .7); }

/* Fila de confianza */
.cmx25-trust { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 16px; margin-bottom: 26px; }
.cmx25-trust-item { display: flex; align-items: center; gap: 9px; }
.cmx25-trust-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  color: var(--l-accent);
  background: rgba(124, 58, 237, .1);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .16);
}
.cmx25-trust-item:first-child .cmx25-trust-ic { color: #059669; background: rgba(16, 185, 129, .12); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .2); }
.cmx25-trust-item b { display: block; font-size: .8rem; color: var(--l-text); white-space: nowrap; }
.cmx25-trust-item small { display: block; font-size: .7rem; color: var(--l-muted); white-space: nowrap; }
[data-theme="dark"] .cmx25-trust-ic { color: #cdb6ff; background: rgba(139, 92, 246, .16); box-shadow: inset 0 0 0 1px rgba(168, 132, 255, .22); }
[data-theme="dark"] .cmx25-trust-item:first-child .cmx25-trust-ic { color: #6ee7b7; background: rgba(16, 185, 129, .14); }


.cmx25-login { font-size: .9rem; color: var(--l-muted); }
.cmx25-login a { color: var(--l-accent); font-weight: 700; text-decoration: none; }
.cmx25-login a:hover { text-decoration: underline; }
[data-theme="dark"] .cmx25-login a { color: #c4a5ff; }

/* =========================================================================
   4 · Escenario de tarjetas (columna derecha)
   ========================================================================= */
.cmx25-stage {
  position: relative; z-index: 1;
  height: clamp(500px, 64vh, 640px);
  perspective: 1400px;
  --tiltX: 0deg; --tiltY: 0deg;
}
.cmx25-card {
  position: absolute;
  background: var(--l-card);
  border: 1px solid var(--l-card-line);
  border-radius: var(--l-radius);
  box-shadow: var(--l-card-shadow);
  backdrop-filter: blur(var(--l-glass-blur)); -webkit-backdrop-filter: blur(var(--l-glass-blur));
  transform: rotate(var(--rot, 0deg)) translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: box-shadow .3s ease;
  will-change: transform;
}
.cmx25-card:hover { box-shadow: 0 34px 80px -20px rgba(76, 29, 149, .35), 0 10px 26px rgba(76, 29, 149, .12); }
[data-theme="dark"] .cmx25-card:hover { box-shadow: 0 36px 90px -22px rgba(0, 0, 0, .75), 0 0 34px -6px rgba(139, 92, 246, .28); }

.cmx25-card[data-float="1"] { animation: cmx25FloatA 6.5s ease-in-out infinite; }
.cmx25-card[data-float="2"] { animation: cmx25FloatB 7.5s ease-in-out infinite; animation-delay: -2s; }
.cmx25-card[data-float="3"] { animation: cmx25FloatC 5.8s ease-in-out infinite; animation-delay: -3.4s; }
@keyframes cmx25FloatA { 0%, 100% { margin-top: 0; } 50% { margin-top: -12px; } }
@keyframes cmx25FloatB { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
@keyframes cmx25FloatC { 0%, 100% { margin-top: 0; } 50% { margin-top: -15px; } }

/* — Tarjeta engagement — */
.cmx25-eng { left: -5%; top: 8%; width: 174px; padding: 16px 16px 12px; --rot: -6deg; color: var(--l-accent); z-index: 2; }
.cmx25-eng-bars { width: 30px; height: 24px; display: block; margin-bottom: 10px; }
.cmx25-eng-num { display: block; font-size: 1.62rem; font-weight: 900; letter-spacing: -.02em; color: var(--l-text); }
.cmx25-eng small { display: block; margin-top: 2px; font-size: .76rem; line-height: 1.3; color: var(--l-muted); }
.cmx25-eng-line { width: 100%; height: 42px; margin-top: 10px; display: block; }
[data-theme="dark"] .cmx25-eng { color: #cdb6ff; }

/* — Tarjeta foto de creadora — */
.cmx25-photo { left: 13%; top: 3%; width: min(300px, 50%); padding: 12px 12px 16px; margin: 0; --rot: -3deg; z-index: 3; }
.cmx25-photo-frame { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 4.6; box-shadow: 0 14px 30px -12px rgba(20, 6, 48, .35); }
.cmx25-photo-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transform-origin: 58% 26%; display: block; }
.cmx25-photo figcaption { padding: 13px 6px 0; }
.cmx25-photo figcaption b { display: block; font-size: 1.04rem; font-weight: 800; color: var(--l-text); }
.cmx25-photo figcaption > small { display: block; margin-top: 3px; font-size: .76rem; color: var(--l-muted); }
.cmx25-photo-nets { display: flex; flex-wrap: wrap; gap: 8px; margin: 11px 0 10px; }
.cmx25-netchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: rgba(124, 58, 237, .07); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .1); font-size: .8rem; font-weight: 800; color: var(--l-text); }
[data-theme="dark"] .cmx25-netchip { background: rgba(139, 92, 246, .13); box-shadow: inset 0 0 0 1px rgba(168, 132, 255, .16); }
.cmx25-netic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; color: #fff; }
.cmx25-netic svg { width: 13px; height: 13px; }
.cmx25-netic-ig { background: radial-gradient(circle at 30% 110%, #fdc468 8%, #f75568 42%, #b52a94 72%, #4f5bd5); }
.cmx25-netic-tt { background: #0f0f14; box-shadow: -1px 0 0 rgba(37, 244, 238, .8), 1px 1px 0 rgba(254, 44, 85, .8); }
.cmx25-netic-yt { background: #ff0033; }
.cmx25-verified { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: .78rem; font-weight: 800; color: #047857; background: rgba(16, 185, 129, .13); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .25); }
[data-theme="dark"] .cmx25-verified { color: #6ee7b7; background: rgba(16, 185, 129, .15); }

/* — Tarjeta match — */
.cmx25-match { right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 15px 18px; --rot: 0deg; z-index: 4; }
.cmx25-match-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 13px; font-size: 1.15rem; color: #fff; background: var(--l-grad-btn); box-shadow: 0 8px 20px -6px rgba(124, 58, 237, .55); }
.cmx25-match b { display: block; font-size: 1rem; font-weight: 900; color: var(--l-text); }
.cmx25-match small { display: block; font-size: .76rem; color: var(--l-muted); }
.cmx25-match-chev { font-size: 1.5rem; line-height: 1; color: var(--l-muted); margin-left: 4px; }

/* — Tarjeta campaña — */
.cmx25-camp { right: 0; top: 23%; width: min(290px, 43%); display: grid; grid-template-columns: 1fr 74px; gap: 12px; padding: 17px; --rot: 2deg; z-index: 3; }
.cmx25-camp-live { display: inline-flex; align-items: center; gap: 7px; width: max-content; padding: 5px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #047857; background: rgba(16, 185, 129, .13); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .25); }
.cmx25-camp-live i { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px 2px rgba(16, 185, 129, .6); animation: cmx25Pulse 2s ease-in-out infinite; }
[data-theme="dark"] .cmx25-camp-live { color: #6ee7b7; }
.cmx25-camp-main b { display: block; margin-top: 9px; font-size: 1.02rem; font-weight: 900; color: var(--l-text); letter-spacing: -.01em; }
.cmx25-camp-main > small { display: block; margin-top: 2px; font-size: .74rem; white-space: nowrap; color: var(--l-muted); }
.cmx25-camp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cmx25-camp-tags span { padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--l-muted); background: rgba(124, 58, 237, .07); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .12); }
[data-theme="dark"] .cmx25-camp-tags span { color: #cbc2e6; background: rgba(139, 92, 246, .12); box-shadow: inset 0 0 0 1px rgba(168, 132, 255, .16); }
.cmx25-camp-fee { display: block; margin-top: 10px; font-size: 1.16rem; font-weight: 900; color: var(--l-accent); }
[data-theme="dark"] .cmx25-camp-fee { color: #c4a5ff; }
.cmx25-camp-progress { margin-top: 9px; }
.cmx25-camp-bar { height: 7px; border-radius: 999px; overflow: hidden; background: rgba(124, 58, 237, .12); }
[data-theme="dark"] .cmx25-camp-bar { background: rgba(139, 92, 246, .18); }
.cmx25-camp-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #d946ef); box-shadow: 0 0 12px rgba(168, 85, 247, .6); transition: width 1.2s cubic-bezier(.25, .8, .3, 1); }
.cmx25-camp-progress em { display: block; margin-top: 5px; font-style: normal; font-size: .72rem; text-align: right; color: var(--l-muted); }
.cmx25-camp-img { display: block; border-radius: 15px; overflow: hidden; align-self: stretch; box-shadow: 0 10px 22px -10px rgba(20, 6, 48, .35); }
.cmx25-camp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* — Avatares — */
.cmx25-avatars { right: 3%; top: 77%; display: flex; align-items: center; gap: 9px; padding: 13px 16px; --rot: 3deg; z-index: 4; }
.cmx25-avatars img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 12px rgba(20, 6, 48, .25), 0 0 0 2px rgba(255, 255, 255, .8); }
[data-theme="dark"] .cmx25-avatars img { box-shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 0 0 2px rgba(60, 34, 110, .9); }
.cmx25-avatar-plus { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 2px dashed rgba(124, 58, 237, .4); color: var(--l-accent); font-size: 1.2rem; font-weight: 700; }
[data-theme="dark"] .cmx25-avatar-plus { border-color: rgba(196, 165, 255, .45); color: #c4a5ff; }

/* — Notas manuscritas — */
.cmx25-note {
  position: absolute; z-index: 5; pointer-events: none;
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 1.28rem; font-weight: 700; line-height: 1.12;
  color: var(--l-note); transform: rotate(-7deg) translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
.cmx25-note svg { position: absolute; width: 44px; height: 32px; color: inherit; }
.cmx25-note-left { left: -8%; top: 63%; }
.cmx25-note-left svg { right: -40px; bottom: -26px; }
.cmx25-note-right { right: -2%; top: 89%; transform: rotate(-5deg) translate3d(var(--px, 0px), var(--py, 0px), 0); text-align: right; }
.cmx25-note-right svg { left: -42px; top: -20px; transform: scaleX(-1) rotate(10deg); }

/* =========================================================================
   5 · Indicador de scroll
   ========================================================================= */
.cmx25-scroll { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 30px; color: var(--l-muted); position: relative; z-index: 1; }
.cmx25-mouse { width: 24px; height: 38px; border: 2px solid currentColor; border-radius: 14px; display: flex; justify-content: center; opacity: .75; }
.cmx25-mouse i { width: 3.5px; height: 8px; margin-top: 6px; border-radius: 3px; background: currentColor; animation: cmx25Wheel 1.8s ease-in-out infinite; }
@keyframes cmx25Wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.cmx25-scroll small { font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.cmx25-scroll-chev { font-size: 1.1rem; line-height: .4; animation: cmx25Chev 1.8s ease-in-out infinite; }
@keyframes cmx25Chev { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(5px); opacity: 1; } }

/* =========================================================================
   6 · Sección "Cómo funciona": dos caminos
   ========================================================================= */
.cmx25-paths { display: grid; grid-template-columns: minmax(275px, 1fr) minmax(0, 1.7fr) minmax(275px, 1fr); align-items: center; gap: clamp(16px, 3vw, 40px); margin-bottom: clamp(28px, 5vh, 48px); }
.cmx25-paths-head { text-align: center; }
.cmx25-paths-head h2 { margin: 16px 0 10px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 900; letter-spacing: -.025em; color: var(--l-text); }
.cmx25-paths-head p { margin: 0; color: var(--l-muted); font-size: 1.02rem; }
.cmx25-pill-sm { font-size: .68rem; padding: 8px 15px; }
.cmx25-path {
  display: flex; align-items: center; gap: 13px; padding: 18px 20px;
  border-radius: 22px; text-decoration: none;
  background: var(--l-card); border: 1px solid var(--l-card-line);
  box-shadow: var(--l-card-shadow);
  backdrop-filter: blur(var(--l-glass-blur)); -webkit-backdrop-filter: blur(var(--l-glass-blur));
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s ease;
}
.cmx25-path-left { transform: rotate(-3deg); }
.cmx25-path-right { transform: rotate(3deg); }
.cmx25-path:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 30px 66px -18px rgba(124, 58, 237, .4); }
.cmx25-path-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 15px; flex: 0 0 auto; color: var(--l-accent); background: rgba(124, 58, 237, .1); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .16); }
[data-theme="dark"] .cmx25-path-ic { color: #cdb6ff; background: rgba(139, 92, 246, .16); box-shadow: inset 0 0 0 1px rgba(168, 132, 255, .22); }
.cmx25-path-txt b { display: block; font-size: .95rem; font-weight: 800; color: var(--l-text); white-space: nowrap; }
.cmx25-path-txt small { display: block; margin-top: 1px; font-size: .76rem; color: var(--l-muted); white-space: nowrap; }
.cmx25-path-chev { margin-left: auto; font-size: 1.5rem; color: var(--l-muted); transition: transform .25s ease; }
.cmx25-path:hover .cmx25-path-chev { transform: translateX(4px); color: var(--l-accent); }

/* =========================================================================
   7 · Restyle de las secciones existentes (v24) en la portada
   ========================================================================= */
body.cmx-screen-landing .cmx24-landing .cmx-section-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--l-accent); background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(124, 58, 237, .22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] body.cmx-screen-landing .cmx24-landing .cmx-section-pill { color: #e6d9ff; background: rgba(30, 14, 58, .6); border-color: rgba(168, 132, 255, .28); }
body.cmx-screen-landing .cmx24-section-head h2 { font-weight: 900; letter-spacing: -.02em; color: var(--l-text); }
body.cmx-screen-landing .cmx24-section-head p { color: var(--l-muted); }

body.cmx-screen-landing .cmx24-landing .cmx-card,
body.cmx-screen-landing .cmx24-steps article,
body.cmx-screen-landing .cmx24-faq details,
body.cmx-screen-landing .cmx24-stats {
  background: var(--l-card); border: 1px solid var(--l-card-line);
  box-shadow: var(--l-card-shadow);
  backdrop-filter: blur(var(--l-glass-blur)); -webkit-backdrop-filter: blur(var(--l-glass-blur));
}
body.cmx-screen-landing .cmx24-landing .cmx-card,
body.cmx-screen-landing .cmx24-steps article { border-radius: 22px; transition: transform .3s cubic-bezier(.2, .9, .3, 1.25), box-shadow .3s ease; }
body.cmx-screen-landing .cmx24-landing .cmx-card:hover,
body.cmx-screen-landing .cmx24-steps article:hover { transform: translateY(-5px); box-shadow: 0 30px 66px -18px rgba(124, 58, 237, .35); }
[data-theme="dark"] body.cmx-screen-landing .cmx24-landing .cmx-card:hover,
[data-theme="dark"] body.cmx-screen-landing .cmx24-steps article:hover { box-shadow: 0 34px 76px -20px rgba(0, 0, 0, .7), 0 0 30px -8px rgba(139, 92, 246, .3); }

body.cmx-screen-landing .cmx24-switcher-nav { border-radius: 999px; padding: 5px; background: rgba(124, 58, 237, .08); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .12); }
[data-theme="dark"] body.cmx-screen-landing .cmx24-switcher-nav { background: rgba(139, 92, 246, .12); box-shadow: inset 0 0 0 1px rgba(168, 132, 255, .16); }
body.cmx-screen-landing .cmx24-switch-btn { border-radius: 999px; font-weight: 800; color: var(--l-muted); }
body.cmx-screen-landing .cmx24-switch-btn.is-active { background: var(--l-grad-btn); color: #fff; box-shadow: 0 8px 22px -8px rgba(124, 58, 237, .6); }

body.cmx-screen-landing .cmx24-tags span { border-radius: 999px; background: var(--l-card); border: 1px solid var(--l-card-line); color: var(--l-muted); transition: transform .25s ease, color .25s ease, border-color .25s ease; }
body.cmx-screen-landing .cmx24-tags span:hover { transform: translateY(-3px); color: var(--l-accent); border-color: rgba(124, 58, 237, .4); }
[data-theme="dark"] body.cmx-screen-landing .cmx24-tags span:hover { color: #c4a5ff; border-color: rgba(196, 165, 255, .4); }

body.cmx-screen-landing .cmx24-cta {
  border-radius: 30px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 45%, #c026d3 100%);
  box-shadow: 0 34px 80px -20px rgba(109, 40, 217, .55);
}
body.cmx-screen-landing .cmx24-cta::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .22), transparent 42%), radial-gradient(circle at 82% 86%, rgba(34, 211, 238, .25), transparent 46%); pointer-events: none; }
body.cmx-screen-landing .cmx24-cta > * { position: relative; }

/* — Campañas privadas: esqueletos difuminados + mensaje con candado — */
.cmx25-camp-locked {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px);
  align-items: center; padding: clamp(22px, 3vw, 34px);
  background: var(--l-card); border: 1px solid var(--l-card-line); border-radius: 26px;
  box-shadow: var(--l-card-shadow);
  backdrop-filter: blur(var(--l-glass-blur)); -webkit-backdrop-filter: blur(var(--l-glass-blur));
  position: relative; overflow: hidden;
}
.cmx25-lock-cards { display: flex; gap: 14px; justify-content: center; filter: blur(1px); }
.cmx25-lock-card {
  flex: 1; max-width: 150px; padding: 14px; border-radius: 16px;
  background: rgba(124, 58, 237, .07); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .12);
  display: grid; gap: 9px; transform: rotate(-2deg);
}
.cmx25-lock-card:nth-child(2) { transform: rotate(1.5deg) translateY(10px); }
.cmx25-lock-card:nth-child(3) { transform: rotate(-1deg); }
.cmx25-lock-card i { display: block; height: 9px; border-radius: 6px; background: rgba(124, 58, 237, .22); }
.cmx25-lock-card i:nth-child(2) { width: 72%; }
.cmx25-lock-card .cmx25-lock-fee { width: 46%; height: 12px; background: linear-gradient(90deg, rgba(139, 92, 246, .5), rgba(217, 70, 239, .5)); }
[data-theme="dark"] .cmx25-lock-card { background: rgba(139, 92, 246, .1); box-shadow: inset 0 0 0 1px rgba(168, 132, 255, .16); }
[data-theme="dark"] .cmx25-lock-card i { background: rgba(196, 165, 255, .26); }
.cmx25-lock-msg { text-align: left; }
.cmx25-lock-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 12px;
  color: var(--l-accent); background: rgba(124, 58, 237, .1); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .18);
}
[data-theme="dark"] .cmx25-lock-ic { color: #cdb6ff; background: rgba(139, 92, 246, .16); box-shadow: inset 0 0 0 1px rgba(168, 132, 255, .24); }
.cmx25-lock-msg b { display: block; font-size: 1.22rem; font-weight: 900; letter-spacing: -.015em; color: var(--l-text); }
.cmx25-lock-msg p { margin: 8px 0 16px; font-size: .95rem; line-height: 1.6; color: var(--l-muted); max-width: 30rem; }
.cmx25-lock-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cmx25-lock-alt { font-weight: 700; font-size: .9rem; color: var(--l-accent); text-decoration: none; }
.cmx25-lock-alt:hover { text-decoration: underline; }
[data-theme="dark"] .cmx25-lock-alt { color: #c4a5ff; }
@media (max-width: 820px) {
  .cmx25-camp-locked { grid-template-columns: 1fr; }
  .cmx25-lock-cards { order: 2; }
  .cmx25-lock-msg { text-align: center; }
  .cmx25-lock-msg p { margin-inline: auto; }
  .cmx25-lock-actions { justify-content: center; }
}

/* =========================================================================
   8 · Animaciones de aparición (reveal)
   ========================================================================= */
[data-reveal], [data-reveal-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .3, 1), transform .8s cubic-bezier(.2, .7, .3, 1); will-change: opacity, transform; }
[data-reveal].is-in, [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: .05s; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .15s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .25s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .35s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .45s; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: .55s; }
html:not(.cmx25-js) [data-reveal], html:not(.cmx25-js) [data-reveal-stagger] > * { opacity: 1; transform: none; }

/* =========================================================================
   9 · Responsive
   ========================================================================= */
@media (max-width: 1120px) {
  .cmx25-stage { height: clamp(460px, 56vh, 560px); }
  .cmx25-eng { left: -1%; }
  .cmx25-note-left { left: -2%; }
}
@media (max-width: 960px) {
  .cmx25-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 34px; }
  .cmx25-copy { text-align: center; }
  .cmx25-sub { margin-left: auto; margin-right: auto; }
  .cmx25-actions, .cmx25-trust { justify-content: center; }
  .cmx25-stage { height: 440px; max-width: 560px; margin: 8px auto 0; }
  .cmx25-note { display: none; }
  .cmx25-eng { left: 0; top: 6%; }
  .cmx25-photo { left: 12%; top: 0; width: 54%; }
  .cmx25-match { right: 0; top: 2%; }
  .cmx25-camp { right: 0; top: 30%; width: 56%; }
  .cmx25-avatars { right: 4%; top: 74%; }
  .cmx25-paths { grid-template-columns: 1fr; }
  .cmx25-paths-head { order: -1; }
  .cmx25-path-left, .cmx25-path-right { transform: rotate(0); max-width: 420px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
  .cmx25-h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .cmx25-stage { height: auto; max-width: 420px; display: flex; flex-direction: column; gap: 16px; perspective: none; }
  .cmx25-card { position: static; --rot: 0deg; transform: none !important; animation: none; }
  /* En móvil la tarjeta con foto se veía mal: se ocultan foto y engagement y
     quedan la coincidencia, la campaña, los avatares y la nota manuscrita. */
  .cmx25-eng, .cmx25-photo { display: none; }
  .cmx25-match { display: flex; width: 100%; }
  .cmx25-match-chev { margin-left: auto; }
  .cmx25-camp { width: 100%; grid-template-columns: 1fr 84px; }
  .cmx25-avatars { display: flex; width: 100%; justify-content: center; }
  .cmx25-note-right {
    display: block; position: static; transform: none; order: 9;
    text-align: center; font-size: 1.35rem; margin-top: -2px;
  }
  .cmx25-note-right svg { display: none; }
  .cmx25-btn { width: 100%; justify-content: center; }
  .cmx25-trust { grid-template-columns: 1fr; justify-items: center; justify-content: center; gap: 12px; }
}

/* =========================================================================
   10 · Accesibilidad: movimiento reducido
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .cmx25-arc, .cmx25-stars, .cmx25-pill i, .cmx25-camp-live i,
  .cmx25-mouse i, .cmx25-scroll-chev, .cmx25-grad,
  .cmx25-card[data-float="1"], .cmx25-card[data-float="2"], .cmx25-card[data-float="3"] { animation: none !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cmx25-card, .cmx25-btn, .cmx25-path { transition: none !important; }
}