/* ==========================================================================
   CAUXE PRO — capa de conversión e interacción sobre la base original
   ========================================================================== */

/* ---------- Anuncio con teléfono ---------- */
.announce-call { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border-strong); color: var(--text); font-weight: 600; }
.announce-call svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 6px; color: var(--cyan); }

/* ---------- Hero: prueba y microcompromisos ---------- */
.hero-assure { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; color: var(--muted); font-size: .88rem; }
.hero-assure span { display: inline-flex; align-items: center; gap: 8px; }
.hero-assure span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: rgba(34,211,238,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/60% no-repeat; }
.btn-play { display: inline-flex; align-items: center; gap: 12px; margin-left: 6px; color: var(--text); font-weight: 600; font-size: .95rem; background: none; border: 0; cursor: pointer; padding: 0; }
.btn-play i { position: relative; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-play i::before { content: ""; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.btn-play i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(34,211,238,.5); animation: ring 2.4s infinite; }
.btn-play small { display: block; color: var(--muted); font-weight: 400; font-size: .8rem; }

/* ---------- Banda de prueba social ---------- */
.proofbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 28px; padding: 26px 0 0; color: var(--muted); font-size: .92rem; }
.proofbar .faces { display: flex; }
.proofbar .faces span { width: 34px; height: 34px; border-radius: 50%; margin-left: -10px; display: grid; place-items: center; font: 700 .7rem var(--font-display); color: #03101f; background: var(--grad); box-shadow: 0 0 0 3px var(--bg); }
.proofbar .faces span:first-child { margin-left: 0; }
.proofbar .faces span:nth-child(2) { background: linear-gradient(120deg,#7dd3fc,#3b82f6); }
.proofbar .faces span:nth-child(3) { background: linear-gradient(120deg,#34d399,#22d3ee); }
.proofbar .faces span:nth-child(4) { background: linear-gradient(120deg,#fbbf24,#f87171); }
.proofbar b { color: var(--text); }
.proofbar .stars { color: var(--amber); letter-spacing: 2px; }
.proofbar a { color: var(--sky); font-weight: 600; }

/* ---------- CTA contextual entre secciones ---------- */
.cta-inline { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 56px); padding: 22px 26px; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(100deg, rgba(59,130,246,.10), rgba(34,211,238,.04) 60%, transparent); }
.cta-inline p { margin: 0; color: var(--text); font-weight: 500; }
.cta-inline p small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.cta-inline .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-inline.center { justify-content: center; text-align: center; }

/* ---------- Se adapta a tu negocio ---------- */
.adapt { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.adapt-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 28px; }
.adapt-tabs button { height: 40px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; font-size: .88rem; font-weight: 500; color: var(--muted); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--border); transition: all .3s var(--ease); }
.adapt-tabs button:hover { color: var(--text); }
.adapt-tabs button[aria-selected="true"] { color: #03101f; background: var(--grad); box-shadow: 0 10px 30px -12px rgba(34,211,238,.8); }
.adapt-points { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 14px; }
.adapt-points li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; color: var(--muted); }
.adapt-points li b { display: block; color: var(--text); font-weight: 600; }
.adapt-points .n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 600 .8rem var(--font-mono); color: var(--cyan); background: rgba(34,211,238,.08); box-shadow: inset 0 0 0 1px rgba(34,211,238,.25); }

.config { position: relative; border-radius: 26px; padding: 26px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--border-strong); box-shadow: var(--shadow); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.config-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.config-head b { color: var(--text); font-family: var(--font-display); font-size: 1rem; }
.config-live { display: inline-flex; align-items: center; gap: 8px; color: var(--green); }
.config-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
.config-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mod { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid var(--border); transition: all .5s var(--ease); }
.mod svg { width: 22px; height: 22px; color: var(--dim); flex: none; transition: color .5s; }
.mod span { font-size: .88rem; color: var(--dim); transition: color .5s; line-height: 1.3; }
.mod .tg { margin-left: auto; width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.08); position: relative; flex: none; transition: background .5s; }
.mod .tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--dim); transition: all .5s var(--ease); }
.mod.on { background: rgba(34,211,238,.07); border-color: rgba(34,211,238,.35); }
.mod.on svg { color: var(--cyan); }
.mod.on span { color: var(--text); }
.mod.on .tg { background: var(--grad); }
.mod.on .tg::after { left: 17px; background: #fff; }
.config-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .85rem; color: var(--muted); }
.config-foot b { color: var(--text); font-family: var(--font-mono); }

/* ---------- Pasos de implementación ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 40px; }
.steps-line { position: absolute; left: 0; right: 0; top: 0; height: 120px; width: 100%; pointer-events: none; overflow: visible; }
.steps-line path { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.steps-line .track { stroke: rgba(148,180,255,.14); }
.steps-line .draw { stroke: url(#steps-grad); filter: drop-shadow(0 0 8px rgba(34,211,238,.6)); }
.step { position: relative; padding: 26px; }
.step-num { position: absolute; right: 14px; top: 0; font: 800 5.5rem/1 var(--font-display); color: rgba(148,180,255,.07); pointer-events: none; }
.step-dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px; background: #0b1733; box-shadow: inset 0 0 0 1px var(--border-strong); transition: all .6s var(--ease); }
.step-dot svg { width: 20px; height: 20px; color: var(--dim); transition: color .6s; }
.step.lit .step-dot { background: var(--grad); box-shadow: 0 0 0 6px rgba(34,211,238,.12), 0 10px 30px -8px rgba(34,211,238,.8); }
.step.lit .step-dot svg { color: #03101f; }
.step h3 { font-size: 1.15rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .93rem; }
.step .time { display: inline-block; margin-top: 14px; font: 500 .75rem var(--font-mono); color: var(--cyan); letter-spacing: .06em; }

/* ---------- Testimonios multiformato ---------- */
.proof-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; margin-bottom: 40px; }
.proof-nums div { background: var(--bg-2); padding: 24px; text-align: center; }
.proof-nums b { display: block; font: 700 clamp(1.6rem, 3vw, 2.3rem)/1.1 var(--font-display); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; }
.proof-nums span { color: var(--muted); font-size: .85rem; }

.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--border); margin-bottom: 30px; }
.tabs button { height: 38px; padding: 0 18px; border-radius: 999px; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: .88rem; font-weight: 500; transition: all .3s; }
.tabs button[aria-selected="true"] { background: rgba(255,255,255,.1); color: var(--text); }
.tab-center { text-align: center; }

.vfeature { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: stretch; }
.vplayer { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; border: 1px solid var(--border-strong); cursor: pointer; background: #0b1733; padding: 0; color: inherit; text-align: left; }
.vplayer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform 1.2s var(--ease), opacity .6s; }
.vplayer:hover img { transform: scale(1.04); opacity: .7; }
.vplayer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5,9,20,.9)); }
.vplayer .play { position: absolute; left: 50%; top: 45%; z-index: 2; width: 78px; height: 78px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 20px 50px -10px rgba(34,211,238,.8); transition: transform .4s var(--ease); }
.vplayer:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.vplayer .play::before { content: ""; border-left: 20px solid #03101f; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; }
.vplayer .play::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(34,211,238,.6); animation: ring 2.4s infinite; }
.vplayer .cap { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 2; }
.vplayer .cap b { display: block; font: 700 clamp(1.05rem, 2vw, 1.35rem)/1.25 var(--font-display); color: #fff; }
.vplayer .cap small { color: var(--muted); }
.vtag { position: absolute; top: 16px; left: 16px; z-index: 2; font: 500 .7rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(5,9,20,.7); border: 1px solid var(--border-strong); color: var(--sky); backdrop-filter: blur(8px); }
.vside { display: grid; gap: 14px; }
.vside .vplayer { aspect-ratio: auto; min-height: 140px; }
.vside .vplayer .play { width: 50px; height: 50px; top: 40%; }
.vside .vplayer .play::before { border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; margin-left: 4px; }
.vside .vplayer .cap b { font-size: .98rem; }

.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: 28px; padding: 10px; background: linear-gradient(160deg, rgba(125,211,252,.35), rgba(59,130,246,.15)); cursor: pointer; border: 0; transition: transform .5s var(--ease); }
.reel:hover { transform: translateY(-6px) rotate(-.6deg); }
.reel-screen { position: relative; height: 100%; border-radius: 20px; overflow: hidden; background: #070e22; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; text-align: left; }
.reel-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.reel-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,9,20,.2), rgba(5,9,20,.95)); }
.reel-screen > * { position: relative; z-index: 1; }
.reel-screen .notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 70px; height: 18px; border-radius: 999px; background: #000; z-index: 2; }
.reel-screen b { font: 700 1rem/1.25 var(--font-display); color: #fff; }
.reel-screen small { color: var(--muted); font-size: .78rem; }
.reel .play { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 2; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.reel .play::before { content: ""; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }

.reviews { columns: 3 300px; column-gap: 18px; }
.reviews .card { break-inside: avoid; margin: 0 0 18px; }

.slot-note { display: block; margin-top: 18px; text-align: center; font: 500 .72rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* ---------- Acompañamiento ---------- */
.support { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.support .card { padding: 26px; }
.support .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; background: rgba(59,130,246,.12); box-shadow: inset 0 0 0 1px rgba(59,130,246,.3); }
.support .ico svg { width: 22px; height: 22px; color: var(--sky); }
.support h3 { font-size: 1.05rem; margin-bottom: 8px; }
.support p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,.025); transition: border-color .3s, background .3s; }
.faq-list details[open] { border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.04); }
.faq-list summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; position: relative; font-weight: 600; color: var(--text); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2px solid var(--sky); border-bottom: 2px solid var(--sky); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-list details p { margin: 0; padding: 0 22px 20px; color: var(--muted); }

/* ---------- Dock flotante ---------- */
.dock { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; transition: transform .3s var(--ease), opacity .3s; }
.fab svg { width: 26px; height: 26px; }
.fab:hover { transform: scale(1.08); }
.fab-call { background: var(--grad); color: #03101f; box-shadow: 0 14px 40px -8px rgba(34,211,238,.7); }
.fab-call::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cyan); animation: ring 2.4s infinite; }
.fab-call svg { animation: wiggle 4s ease-in-out infinite; }
@keyframes wiggle { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-14deg); } 93% { transform: rotate(12deg); } 96% { transform: rotate(-8deg); } }
.fab-wa { background: #25d366; box-shadow: 0 14px 40px -8px rgba(37,211,102,.6); width: 52px; height: 52px; }
.fab-wa svg { width: 26px; height: 26px; }
.fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab-menu a { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 14px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--text); background: rgba(8,15,34,.95); border: 1px solid var(--border-strong); box-shadow: var(--shadow); backdrop-filter: blur(14px); opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; transition: all .35s var(--ease); }
.fab-menu a svg { width: 18px; height: 18px; color: var(--cyan); }
.dock.open .fab-menu a { opacity: 1; transform: none; pointer-events: auto; }
.dock.open .fab-menu a:nth-child(2) { transition-delay: .04s; }
.dock.open .fab-menu a:nth-child(3) { transition-delay: .08s; }
.dock.open .fab-call::after { display: none; }

.greet { position: fixed; right: 92px; bottom: 30px; z-index: 81; max-width: 290px; display: flex; gap: 12px; align-items: flex-start; padding: 14px 38px 14px 14px; border-radius: 18px; background: #f8fbff; color: #0b1733; box-shadow: 0 20px 60px -15px rgba(0,0,0,.7); font-size: .9rem; line-height: 1.4; opacity: 0; transform: translateX(12px); pointer-events: none; transition: all .5s var(--ease); }
.greet.show { opacity: 1; transform: none; pointer-events: auto; }
.greet::after { content: ""; position: absolute; right: -7px; bottom: 20px; width: 14px; height: 14px; background: #f8fbff; transform: rotate(45deg); }
.greet .av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #03101f; font: 700 .75rem var(--font-display); }
.greet b { display: block; }
.greet a { color: #1d4ed8; font-weight: 700; }
.greet button { position: absolute; top: 8px; right: 10px; border: 0; background: none; color: #5f6f91; font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 4px; }

.rail { position: fixed; right: 20px; top: 50%; z-index: 75; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.rail a { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(8,15,34,.8); border: 1px solid var(--border-strong); color: var(--muted); backdrop-filter: blur(12px); transition: all .3s var(--ease); }
.rail a svg { width: 19px; height: 19px; }
.rail a:hover, .rail a.active { color: #03101f; background: var(--grad); border-color: transparent; }
.rail a span { position: absolute; right: 54px; top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; padding: 6px 12px; border-radius: 10px; font-size: .8rem; font-weight: 600; color: var(--text); background: rgba(8,15,34,.95); border: 1px solid var(--border-strong); opacity: 0; pointer-events: none; transition: all .25s var(--ease); }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: translateY(-50%); }

.demo-pill { position: fixed; left: 20px; bottom: 20px; z-index: 79; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 8px; border-radius: 999px; background: rgba(8,15,34,.92); border: 1px solid var(--border-strong); box-shadow: var(--shadow); backdrop-filter: blur(14px); font-weight: 600; font-size: .9rem; color: var(--text); opacity: 0; transform: translateY(20px); pointer-events: none; transition: all .5s var(--ease); }
.demo-pill i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #03101f; }
.demo-pill i svg { width: 18px; height: 18px; }
.demo-pill small { display: block; font-weight: 400; color: var(--muted); font-size: .75rem; line-height: 1.1; }
.demo-pill.show { opacity: 1; transform: none; pointer-events: auto; }

.mbar { display: none; }

/* ---------- Modal de video ---------- */
.vmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(3,6,15,.86); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.vmodal.open { opacity: 1; pointer-events: auto; }
.vmodal-box { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #070e22; border: 1px solid var(--border-strong); display: grid; place-items: center; text-align: center; }
.vmodal-box.vertical { width: min(380px, 100%); aspect-ratio: 9 / 16; }
.vmodal-box video, .vmodal-box iframe { width: 100%; height: 100%; border: 0; }
.vmodal-empty { padding: 30px; display: grid; gap: 10px; justify-items: center; }
.vmodal-empty b { font: 700 1.3rem var(--font-display); }
.vmodal-empty p { color: var(--muted); max-width: 40ch; margin: 0; }
.vmodal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.1); color: #fff; font-size: 1.3rem; }

/* ---------- Magnetismo e inclinación ---------- */
.magnetic { will-change: transform; }
.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .rail { display: none; }
  .support { grid-template-columns: repeat(2, 1fr); }
  .reels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .adapt, .faq, .vfeature { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); padding-top: 0; }
  .steps-line { display: none; }
  .proof-nums { grid-template-columns: repeat(2, 1fr); }
  .vside { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .announce-call { display: none; }
  .steps, .support, .config-grid { grid-template-columns: 1fr; }
  .vside { grid-template-columns: 1fr; }
  .reels { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .reel { border-radius: 22px; padding: 7px; }
  .reel-screen { border-radius: 16px; padding: 12px; }
  .reel-screen b { font-size: .85rem; }
  .demo-pill, .greet { display: none; }
  .dock { bottom: 84px; right: 14px; }
  .fab { width: 54px; height: 54px; }
  .fab-wa { display: none; }
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(5,9,20,.94); border-top: 1px solid var(--border-strong); backdrop-filter: blur(16px); }
  .mbar a { height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: .86rem; font-weight: 600; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text); }
  .mbar a svg { width: 18px; height: 18px; }
  .mbar a.wa svg { color: #25d366; }
  .mbar a.demo { background: var(--grad); color: #03101f; box-shadow: none; }
  body { padding-bottom: 70px; }
  .cta-inline { padding: 20px; }
  .cta-inline .btns, .cta-inline .btns .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fab-call svg { animation: none; }
  .tilt { transform: none; }
}

/* ---------- Ajustes ---------- */
.adapt > *, .faq > *, .vfeature > * { min-width: 0; }
.proofbar .faces span { margin-left: -8px; font-size: .62rem; }
.proofbar .faces span:first-child { margin-left: 0; }
@media (max-width: 640px) {
  .adapt .btn, .cta-inline .btn { white-space: normal; height: auto; min-height: 50px; padding-block: 12px; text-align: center; }
  .proofbar { font-size: .85rem; text-align: center; }
}
@media (max-width: 640px) {
  .dock { display: none; }
  .vfeature > .vplayer { aspect-ratio: 4 / 5; }
  .vside .vplayer { aspect-ratio: 16 / 11; }
  .vplayer .play, .vside .vplayer .play { top: 34%; }
}

/* ---------- Ronda 3: títulos de sección más legibles ---------- */
.eyebrow { font-size: .95rem; font-weight: 600; letter-spacing: .12em; }
.eyebrow::before { width: 32px; height: 2px; }

/* ---------- Ronda 3: caos → cauce, en bucle y con los productos al final ---------- */
.chaos { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.prod-node {
  position: absolute; left: 50%; top: 50%; z-index: 1; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; font: 600 .82rem var(--font-body); color: var(--text);
  background: rgba(8, 15, 34, .92); border: 1px solid rgba(34, 211, 238, .45);
  box-shadow: 0 0 24px -6px rgba(34, 211, 238, .55);
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--k, 1) * 36px)) rotate(calc(-1 * var(--a))) scale(.5);
  opacity: 0; transition: transform 1.1s var(--ease), opacity .8s var(--ease);
}
.chaos.merged .prod-node {
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--k, 1) * 175px)) rotate(calc(-1 * var(--a)));
  opacity: 1;
}
.chaos.merged .prod-node:nth-of-type(n) { transition-delay: calc(1.2s + var(--i, 0) * .09s); }
.chaos .chaos-ring { transition: border-color 1s, box-shadow 1s; }
.chaos.merged .chaos-ring:not(.r2) { border-color: rgba(34, 211, 238, .45); box-shadow: 0 0 60px -20px rgba(34, 211, 238, .5); }
.chaos-replay {
  margin-left: 10px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--sky); font: 500 .78rem var(--font-mono); cursor: pointer;
}
.chaos-replay:hover { border-color: var(--cyan); }
@media (max-width: 640px) { .prod-node { font-size: .72rem; padding: 6px 10px; } }
[data-theme="light"] .chaos .prod-node { color: #eaf1ff; }
@media (max-width: 640px) {
  .chaos-core { width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 26px; }
  .chaos-core span { font-size: 1.3rem; }
  .chaos.merged .prod-node { transform: translate(-50%, -50%) rotate(var(--a)) translateX(max(calc(var(--k, 1) * 175px), 128px)) rotate(calc(-1 * var(--a))); }
}
.product p strong { color: var(--text); font-weight: 700; }

/* ---------- Ronda 4: llamadas a la acción por sección ---------- */
.cta-row {
  grid-column: 1 / -1; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 48px); padding: 18px 22px; border-radius: 18px;
  border: 1px solid var(--border); background: linear-gradient(100deg, rgba(59,130,246,.08), rgba(34,211,238,.03));
}
.cta-row p { margin: 0; font-weight: 600; color: var(--text); font-size: 1rem; }
.cta-row .btns { display: flex; gap: 10px; flex-wrap: wrap; }
[data-theme="light"] .cta-row { background: #fff; box-shadow: 0 18px 40px -30px rgba(20,45,100,.35); }
@media (max-width: 640px) {
  .cta-row { padding: 18px; }
  .cta-row .btns, .cta-row .btns .btn { width: 100%; justify-content: center; }
}

/* ---------- Ronda 4: WhatsApp más visible ---------- */
.fab-wa { width: 64px; height: 64px; }
.fab-wa svg { width: 34px; height: 34px; }
.fab-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ring 2.4s infinite; }
@media (max-width: 640px) {
  .mbar a.wa { background: #25d366; color: #fff; box-shadow: none; }
  .mbar a.wa svg { color: #fff; width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .fab-wa::after { animation: none; } }

/* ---------- Ronda 5: prueba junto a los botones y contacto en el pie ---------- */
.cta-proof { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 500 .8rem var(--font-mono); color: var(--green); letter-spacing: .02em; }
.cta-proof::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; flex: none; }
.announce-wa svg { color: #25d366; }
.footer-contact {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  margin-top: 44px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--border);
  background: linear-gradient(100deg, rgba(59,130,246,.08), rgba(34,211,238,.03));
}
.footer-contact span { font-weight: 600; margin-right: auto; }
.footer-contact .btn svg { width: 16px; height: 16px; }
[data-theme="light"] .footer-contact { background: #fff; }
@media (max-width: 640px) {
  .footer-contact span { width: 100%; }
  .footer-contact .btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   Ronda 6 — Beneficios, 3 pasos y asesora en el aviso (cauxe.02)
   ========================================================================== */
.hero-benefits { margin: 18px 0 0; font-size: .92rem; color: var(--muted); letter-spacing: .01em; }
.hero-benefits b { color: var(--text); font-weight: 700; }

.benefit-band .center { text-align: center; }
.benefit-band .eyebrow { justify-content: center; }
.benefit-title { font-size: clamp(2.4rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -.035em; margin: 18px auto 28px; }
.fade-text { background: linear-gradient(180deg, var(--text) 10%, color-mix(in srgb, var(--text) 25%, transparent) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.benefit-list { list-style: none; counter-reset: b; padding: 0; margin: 0 auto 34px; max-width: 980px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.benefit-list li { counter-increment: b; position: relative; padding: 20px 20px 20px 62px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2); color: var(--muted); font-size: .98rem; line-height: 1.5; }
.benefit-list li::before { content: counter(b); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #03101f; font: 700 .85rem var(--font-display); }
.benefit-list b { color: var(--text); }
.benefit-band .btns, .center-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.badge-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--grad); color: #03101f; font: 700 .8rem var(--font-display); letter-spacing: .02em; }
.three-title { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; }
.three-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; min-height: 420px; margin-bottom: 40px; }
.three-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.three-line path { fill: none; stroke: url(#three-grad); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(34, 211, 238, .45)); transition: stroke-dashoffset 2.4s var(--ease); }

.tstep { position: relative; z-index: 1; }
.tstep:nth-child(2) { align-self: end; }
.tstep:nth-child(3) { align-self: center; margin-top: -40px; }
.tstep:nth-child(4) { align-self: start; }
.tnum { position: absolute; right: 8%; top: -40px; font: 800 9rem/1 var(--font-display); color: var(--text); opacity: .06; z-index: -1; }
.tcheck { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 0 0 6px rgba(34, 211, 238, .12), 0 10px 30px -8px rgba(34, 211, 238, .6); margin-bottom: 18px; }
.tcheck svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tstep h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 10px; }
.tstep p { color: var(--muted); margin: 0 0 12px; max-width: 34ch; }
.tstep small { font: 600 .82rem var(--font-mono, monospace); color: var(--cyan); letter-spacing: .04em; }

/* Aviso con asesora */
.greet { max-width: 330px; padding: 16px 40px 16px 16px; border-radius: 16px; align-items: center; }
.greet .av { position: relative; width: 52px; height: 52px; background: none; }
.greet .av img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #22d3ee; }
.greet .av .on { position: absolute; right: 0; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; border: 2px solid #f8fbff; }
.greet b { margin-bottom: 3px; }
.greet-btns { display: flex; gap: 8px; margin-top: 10px; }
.greet-btns a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #fff !important; background: linear-gradient(120deg, #2563eb, #0891b2); }
.greet-btns a.g-wa { background: #25d366; color: #05321a !important; }
.greet-btns svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .benefit-list { grid-template-columns: 1fr; }
  .three-steps { grid-template-columns: 1fr; min-height: 0; gap: 34px; padding-left: 8px; }
  .three-line { display: none; }
  .tstep, .tstep:nth-child(n) { align-self: auto; margin-top: 0; }
  .tnum { font-size: 6rem; top: -20px; }
}
.greet { max-width: 370px; align-items: flex-start; }
.greet-btns a { white-space: nowrap; }
.greet-btns svg { display: block; flex: none; }
.greet-btns a.g-wa svg { fill: currentColor; }


/* Tarjeta de la asesora también en celular, sobre la barra inferior */
@media (max-width: 640px) {
  .greet { display: flex; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); max-width: none; padding: 12px 36px 12px 12px; gap: 10px; font-size: .84rem; }
  .greet::after { display: none; }
  .greet .av, .greet .av img { width: 44px; height: 44px; }
  .greet-btns { margin-top: 8px; }
  .greet-btns a { padding: 6px 11px; font-size: .78rem; }
}
@media (max-width: 640px) {
  .greet .gtxt { display: none; }
  .greet b { font-size: .86rem; }
}
/* Tarjeta sin botones internos: solo foto, saludo y texto */
.greet { max-width: 330px; }
@media (max-width: 640px) {
  .greet .gtxt { display: inline; }
  .greet { left: auto; right: 12px; max-width: 300px; }
}
.greet-btns[hidden] { display: none; }
@media (max-width: 640px) { .greet { width: calc(100% - 24px); max-width: 320px; box-sizing: border-box; } }

/* ==========================================================================
   Ronda 7 — Composición densa: tablero al lado del texto y menos espacio vacío
   ========================================================================== */
/* El bloque de botones va siempre al final: así el tablero queda al lado del texto */
.split > .cta-row { order: 3; }
.section { padding: clamp(20px, 2.5vw, 32px) 0; }
#neocrm .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 3.5vw, 48px); align-items: center; }
#neocrm .dash { width: 100%; }
#neocrm .dash-body { padding: clamp(18px, 2vw, 28px); }
#neocrm .chart { height: clamp(120px, 14vw, 190px); }
@media (max-width: 900px) {
  #neocrm .split { grid-template-columns: 1fr; }
}

/* CTA en banda (estilo 1) */
.cta-band-wrap, .cta-pick-wrap { padding: clamp(12px, 2vw, 24px) 0; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(22px, 3vw, 34px) clamp(22px, 3.5vw, 44px); border-radius: 22px; background: linear-gradient(115deg, #1d4ed8 0%, #0891b2 60%, #0e7490 100%); box-shadow: 0 30px 70px -30px rgba(37, 99, 235, .7); position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events: none; }
.cta-band-txt { display: grid; gap: 6px; max-width: 640px; color: #eaf6ff; }
.cta-band-txt b { font: 700 clamp(1.25rem, 2.2vw, 1.7rem)/1.2 var(--font-display); color: #fff; }
.cta-band .btns { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.btn-light { background: #fff; color: #0b2a55; }
.btn-light:hover { transform: translateY(-2px); }
.btn-wa { background: #25d366; color: #05321a; }
.btn-wa svg { fill: currentColor; }

/* CTA de elección (estilo 2) */
.cta-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--border-strong); border-radius: 22px; background: var(--surface-2); }
.cta-pick h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 10px 0 8px; }
.cta-pick p { color: var(--muted); margin: 0; }
.pick-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pick-opts a { display: grid; gap: 6px; padding: 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.pick-opts a b { font: 700 1.05rem var(--font-display); color: var(--text); }
.pick-opts a b::after { content: " →"; color: var(--cyan); }
.pick-opts a span { color: var(--muted); font-size: .88rem; line-height: 1.4; }
.pick-opts a:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 16px 40px -20px rgba(34, 211, 238, .6); }
@media (max-width: 900px) {
  .cta-pick { grid-template-columns: 1fr; }
  .pick-opts { grid-template-columns: 1fr; }
}
[data-theme="light"] .pick-opts a { background: #fff; }
/* Ronda 8 — aún menos espacio vacío */
.section-head { margin-bottom: clamp(24px, 3vw, 40px); }
#wischat .split { align-items: start; }
.cta-row { margin-top: clamp(20px, 2.5vw, 32px); }
/* Cifras debajo del inicio */
.stats-strip { margin-top: 18px; margin-bottom: 8px; }
.stats-strip .hero-stats { margin-top: 0; }
.ch5 { left: -24px; bottom: 4%; animation-delay: -2.2s; }

/* ==========================================================================
   Cierre con contador en vivo (cauxe.02)
   ========================================================================== */
.closer-wrap { display: grid; justify-items: center; text-align: center; gap: 22px; }
.live-count { display: flex; align-items: center; gap: 18px; padding: 16px 24px; border-radius: 18px; border: 1px solid var(--border-strong); background: var(--surface-2); }
.lc-dot { width: 14px; height: 14px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: lcPulse 1.8s infinite; flex: none; }
@keyframes lcPulse { 70% { box-shadow: 0 0 0 12px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.lc-body { display: grid; gap: 8px; text-align: left; }
.lc-title { display: flex; align-items: center; gap: 8px; font: 600 .78rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lc-title svg { width: 16px; height: 16px; fill: var(--cyan); }
.lc-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lc-row small { display: block; font: 600 .72rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.lc-row b { font: 700 1.25rem var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
.lc-spark { width: 120px; height: 36px; }
.lc-spark polyline { fill: none; stroke: #22c55e; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.closer-title { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: -.035em; }
.closer .btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lc-note { font-size: .8rem; color: var(--dim); margin: 0; }
@media (max-width: 640px) {
  .live-count { padding: 14px 16px; gap: 12px; }
  .lc-row { gap: 14px; }
  .lc-spark { width: 80px; }
}
.closer-sec .closer-wrap { padding: clamp(28px, 4vw, 48px) 0 clamp(32px, 4vw, 48px); }

/* ===== Ronda 9: demo por Google Meet o presencial ===== */
.meet-modes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.meet-modes span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.04); font-size: .88rem; font-weight: 600; }
.meet-modes svg { width: 16px; height: 16px; color: var(--cyan); fill: none; stroke: currentColor; stroke-width: 2; }
.meet-note { font-size: .88rem; color: var(--muted); margin-top: 12px; }
.modality { border: 0; padding: 0; margin: 0; min-width: 0; }
.modality legend { font-size: .84rem; color: #cbd5e1; font-weight: 500; margin-bottom: 7px; padding: 0; }
.mod-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mod-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.03); cursor: pointer; transition: border-color .2s, background .2s; }
.field .mod-opt input { width: 16px; height: 16px; padding: 0; flex: none; border: 0; box-shadow: none; accent-color: var(--cyan); margin-top: 3px; }
.mod-opt b { display: block; font-size: .92rem; }
.mod-opt small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; margin-top: 2px; }
.mod-opt:has(input:checked) { border-color: var(--cyan); background: rgba(34,211,238,.08); }
@media (max-width: 560px) { .mod-opts { grid-template-columns: 1fr; } }
[data-theme="light"] .modality legend { color: var(--text); }
[data-theme="light"] .mod-opt, [data-theme="light"] .meet-modes span { background: #fff; }
.field label .opt { color: var(--muted); font-weight: 400; }
.form-assure { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .82rem; color: var(--muted); }
.form-assure span { white-space: nowrap; }

/* ===== Ronda 10: verbo "fluir" en el inicio ===== */
.hero-flow { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; margin: 4px 0 10px; color: var(--text, #fff); }
.flow-word { display: inline-block; background: linear-gradient(90deg, var(--cyan), #60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; transition: opacity .35s ease, transform .35s ease, filter .35s ease; }
.flow-word.out { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
.flow-word.in { opacity: 0; transform: translateY(10px); filter: blur(4px); transition: none; }

/* ===== Ronda 11: ecosistema CAUXE (carrusel interactivo, reemplaza la animación orbital) ===== */
.problem-grid.solo { grid-template-columns: 1fr; max-width: 980px; }
.problem-grid.solo .pain-list { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .problem-grid.solo .pain-list { grid-template-columns: 1fr; } }

.eco-title .eco-word { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; text-wrap: balance; white-space: nowrap; font-size: .92em; min-height: 1.1em; color: var(--cyan); transition: opacity .3s ease, transform .3s ease, filter .3s ease; }
.eco-word.out { opacity: 0; transform: translateY(-8px); filter: blur(4px); }

.eco-stage { position: relative; display: grid; grid-template-columns: 1fr 0fr; transition: grid-template-columns .6s var(--ease); border-radius: 28px; border: 1px solid var(--border); overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(34, 211, 238, .12), transparent 70%), radial-gradient(ellipse 80% 60% at 50% 110%, rgba(59, 130, 246, .18), transparent 70%), linear-gradient(180deg, rgba(8, 15, 34, .9), rgba(5, 9, 20, .95)); }
.eco-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(148, 180, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 180, 255, .06) 1px, transparent 1px); background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.eco-stage.open { grid-template-columns: 1fr minmax(320px, 440px); }

.flex-carousel { position: relative; width: 100%; height: clamp(460px, 62vh, 600px); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: contain; outline: none; }
.flex-carousel canvas { position: absolute; inset: 0; }
.flex-carousel[data-hover='open'] { cursor: pointer; }
.flex-carousel[data-hover='close'] { cursor: zoom-out; }
.flex-carousel[data-dragging] { cursor: grabbing; }
.flex-carousel:focus-visible { box-shadow: inset 0 0 0 2px rgba(34, 211, 238, .55); }

.eco-caption { position: absolute; left: 0; right: 0; top: calc(50% + var(--flex-carousel-half) * var(--flex-carousel-lift, 1) + 14px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 16px; pointer-events: none; text-align: center; opacity: 0; transition: opacity .6s ease; }
.eco-carousel.revealed .eco-caption { opacity: 1; }
.eco-stage.open .eco-caption { opacity: 0; }
.eco-cap-title { display: flex; flex-direction: column; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text); animation: ecoIn .5s var(--ease); }
.eco-cap-title small { font-family: var(--font-mono); font-weight: 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-top: 4px; }
.eco-cap-count { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
@keyframes ecoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.eco-panel { position: relative; min-width: 0; overflow: auto; max-height: clamp(460px, 62vh, 600px); padding: 28px 26px; border-left: 1px solid var(--border); background: linear-gradient(180deg, rgba(10, 18, 40, .92), rgba(6, 11, 26, .96)); opacity: 0; transform: translateX(24px); transition: opacity .45s ease .15s, transform .5s var(--ease) .15s; }
.eco-panel.show { opacity: 1; transform: none; }
.eco-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .04); color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.eco-close:hover { border-color: var(--cyan); color: var(--cyan); }
.eco-kicker { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.eco-panel h3 { font-size: 1.6rem; margin: 6px 0 4px; }
.eco-lead { color: var(--text); font-weight: 600; margin: 0 0 12px; }
.eco-bullets { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 7px; }
.eco-bullets li { position: relative; padding-left: 22px; color: var(--muted); font-size: .92rem; }
.eco-bullets li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 3px; background: var(--grad); box-shadow: 0 0 12px rgba(34, 211, 238, .6); }
.eco-flow-head { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.eco-flow { list-style: none; padding: 0; margin: 0 0 18px; position: relative; display: grid; gap: 10px; }
.eco-flow::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--cyan), var(--blue)); transform-origin: top; animation: ecoLine 1.2s var(--ease) both .3s; }
.eco-flow li { position: relative; display: flex; align-items: center; gap: 12px; font-size: .92rem; color: var(--text); opacity: 0; animation: ecoIn .5s var(--ease) both; animation-delay: calc(.35s + var(--k) * .22s); }
.eco-flow li span { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: .75rem; font-weight: 700; color: #04121f; background: var(--grad); box-shadow: 0 0 0 4px rgba(34, 211, 238, .12), 0 0 18px rgba(34, 211, 238, .45); z-index: 1; }
@keyframes ecoLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.eco-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; }
.eco-links small { width: 100%; color: var(--muted); font-size: .78rem; }
.eco-link { border: 1px solid var(--border-strong); background: rgba(34, 211, 238, .06); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: .8rem; cursor: pointer; transition: border-color .2s, background .2s; }
.eco-link:hover { border-color: var(--cyan); background: rgba(34, 211, 238, .14); }
.eco-cta { display: flex; flex-wrap: wrap; gap: 8px; }

.eco-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.eco-tab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 8px 14px; font-size: .86rem; font-weight: 600; cursor: pointer; transition: all .25s ease; }
.eco-tab:hover { color: var(--text); border-color: var(--border-strong); }
.eco-tab[aria-pressed="true"] { color: var(--text); border-color: var(--cyan); background: rgba(34, 211, 238, .1); box-shadow: 0 0 24px -8px rgba(34, 211, 238, .6); }
.eco-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); transition: background .25s, box-shadow .25s; }
.eco-tab[aria-pressed="true"] .eco-dot { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.eco-diff { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 22px; text-align: center; }
.eco-diff p { margin: 0; color: var(--muted); max-width: 640px; }
.eco-diff b { color: var(--text); }

.eco-fallback { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px; height: auto; cursor: default; }
.eco-fallback .eco-caption { display: none; }
.eco-card { flex: 0 0 min(240px, 70%); scroll-snap-align: center; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: #0a1228; padding: 0; cursor: pointer; text-align: left; color: var(--text); }
.eco-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.eco-card span { display: flex; flex-direction: column; padding: 10px 14px 14px; font-weight: 700; }
.eco-card small { font-family: var(--font-mono); font-size: .66rem; color: var(--cyan); font-weight: 500; }

@media (max-width: 860px) {
  .eco-stage, .eco-stage.open { grid-template-columns: 1fr; }
  .flex-carousel { height: 440px; }
  .eco-panel { border-left: 0; border-top: 1px solid var(--border); max-height: none; transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
  .eco-flow::before, .eco-flow li, .eco-cap-title { animation: none; opacity: 1; }
}
[data-theme="light"] .eco-stage { background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(34, 211, 238, .14), transparent 70%), linear-gradient(180deg, #0b1733, #07112a); }
[data-theme="light"] .eco-stage .eco-cap-title { color: #eaf1ff; }
[data-theme="light"] .eco-panel { background: #fff; }
[data-theme="light"] .eco-flow li, [data-theme="light"] .eco-lead { color: var(--text); }
@media (min-width: 861px) {
  .eco-panel { padding: 22px 22px 20px; }
  .eco-panel h3 { font-size: 1.4rem; margin: 4px 0 2px; }
  .eco-lead { margin-bottom: 8px; font-size: .95rem; }
  .eco-bullets { gap: 4px; margin-bottom: 12px; }
  .eco-bullets li, .eco-flow li { font-size: .86rem; }
  .eco-flow { gap: 6px; margin-bottom: 12px; }
  .eco-flow li span { width: 24px; height: 24px; font-size: .7rem; }
  .eco-flow::before { left: 11px; }
  .eco-links { margin-bottom: 12px; }
}

/* ===== Ronda 13: palabras en órbita alrededor de la X, fondo oscuro ===== */
.orb-scene { position: relative; height: clamp(460px, 60vh, 580px); overflow: hidden; outline: none; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.orb-scene.dragging { cursor: grabbing; }
.orb-scene:focus-visible { box-shadow: inset 0 0 0 2px rgba(34, 211, 238, .5); }
.orb-glow { position: absolute; left: 50%; top: 50%; width: min(560px, 80%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .35) 0%, rgba(34, 211, 238, .08) 45%, transparent 70%); pointer-events: none; }
.orb-ring { position: absolute; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(125, 211, 252, .28); box-shadow: 0 0 40px -10px rgba(34, 211, 238, .35); pointer-events: none; z-index: 2; }
.orb-x { position: absolute; left: 50%; top: 50%; width: clamp(150px, 22vw, 250px); height: auto; transform: translate(-50%, -54%); z-index: 6; pointer-events: none; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(59, 130, 246, .35)); animation: orbFloat 6s ease-in-out infinite; }
@keyframes orbFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.orb-word { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px 14px 16px; white-space: nowrap; cursor: pointer;
  border-radius: 16px; border: 1px solid rgba(125, 211, 252, .28); color: #eaf1ff; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: -.01em;
  background: linear-gradient(160deg, rgba(20, 36, 72, .95), rgba(8, 15, 34, .95)); box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08); will-change: transform; transition: border-color .25s, box-shadow .25s, background .25s; }
.orb-word svg { width: 20px; height: 20px; color: var(--cyan); flex: none; }
.orb-word i { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(34, 211, 238, .14); color: var(--cyan); font-size: .95rem; font-weight: 700; }
.orb-word:hover, .orb-word.is-selected { border-color: var(--cyan); background: linear-gradient(160deg, rgba(29, 78, 216, .95), rgba(8, 15, 34, .95)); box-shadow: 0 16px 40px -14px rgba(37, 99, 235, .7), inset 0 1px 0 rgba(255, 255, 255, .12); }
.orb-word:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.orb-word.is-front::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 2px solid rgba(34, 211, 238, .6); animation: ctPulse 1.8s ease-out infinite; pointer-events: none; }
@keyframes ctPulse { from { opacity: .9; transform: scale(.96); } to { opacity: 0; transform: scale(1.1); } }

.eco-stage .eco-hint { position: absolute; z-index: 30; left: 50%; top: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(37, 99, 235, .18); border: 1px solid rgba(96, 165, 250, .45); color: #eaf1ff; font-size: .84rem; font-weight: 600; pointer-events: none; transition: opacity .4s, transform .4s; }
.eco-stage .eco-hint.done { opacity: 0; transform: translate(-50%, -8px); }
.eco-hand { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2563eb; animation: ecoTap 1.4s ease-in-out infinite; }
.eco-hand svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ecoTap { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(3px) scale(.9); } }
.eco-stage .eco-motto { position: absolute; z-index: 30; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center; font-family: var(--font-display); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: clamp(.9rem, 1.5vw, 1.15rem); color: #eaf1ff; pointer-events: none; }
.eco-stage .eco-motto b { color: #60a5fa; }
.eco-stage .eco-panel { max-height: clamp(460px, 60vh, 580px); }
@media (max-width: 860px) {
  .orb-scene { height: 420px; }
  .orb-word { padding: 10px 12px; gap: 7px; font-size: .95rem; }
  .orb-word svg { width: 16px; height: 16px; }
  .eco-stage .eco-hint { font-size: .74rem; }
  .eco-stage .eco-panel { max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .orb-x, .orb-word.is-front::after, .eco-hand { animation: none; } }
[data-theme="light"] .eco-stage .eco-panel { background: linear-gradient(180deg, rgba(10, 18, 40, .96), rgba(6, 11, 26, .98)); }
[data-theme="light"] .eco-stage .eco-panel h3, [data-theme="light"] .eco-stage .eco-lead, [data-theme="light"] .eco-stage .eco-flow li { color: #eaf1ff; }
[data-theme="light"] .eco-stage .eco-bullets li { color: #93a3c4; }

/* ===== Ronda 14 · Ecosistema sin recuadro: la animación flota sobre el fondo de la página ===== */
.eco-stage, [data-theme="light"] .eco-stage { background: none; border: 0; border-radius: 0; overflow: visible; }
.eco-stage::before { display: none; }
.orb-scene { cursor: default; }
.orb-glow { width: min(420px, 70%); background: radial-gradient(circle, rgba(37, 99, 235, .22) 0%, rgba(34, 211, 238, .05) 45%, transparent 68%); }
.orb-word { cursor: pointer; }
.orb-word span { transition: transform .25s var(--ease); }
.orb-word:hover span { transform: translateY(-2px); }
.orb-word.is-front i { animation: orbPlus 1.6s ease-in-out infinite; }
@keyframes orbPlus { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 211, 238, .5); } 50% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(34, 211, 238, 0); } }
.orb-say { position: absolute; z-index: 30; left: 50%; bottom: 18px; width: min(560px, 92%); margin: 0; transform: translate(-50%, 8px); text-align: center; pointer-events: none; opacity: 0; transition: opacity .35s ease, transform .35s ease; }
.orb-say.in { opacity: 1; transform: translate(-50%, 0); }
.orb-say b { display: block; font-family: var(--font-display); font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--cyan); letter-spacing: .01em; }
.orb-say span { display: block; margin-top: 4px; font-size: clamp(.95rem, 1.5vw, 1.1rem); color: var(--text); }
.eco-stage.open .orb-say { opacity: 0; }
@media (max-width: 560px) { .orb-say { bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .orb-word.is-front i { animation: none; } }
.orb-scene { height: clamp(420px, 54vh, 520px); }
@media (max-width: 560px) { .orb-scene { height: 400px; } }

/* ===== Ronda 15 · "Incluye" en los paneles de la X (detalle que antes estaba en las tarjetas de productos) ===== */
.eco-incl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 14px; }
.eco-incl small { width: 100%; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #93a3c4; }
.eco-incl span { padding: 4px 10px; border-radius: 999px; font-size: .78rem; color: #cfe3ff; background: rgba(34, 211, 238, .08); border: 1px solid rgba(125, 211, 252, .22); }
.eco-stage { align-items: center; }
.eco-stage .eco-panel { max-height: none; }

/* ===== Ronda 16 · Cursor de fluido (splash-cursor.js): no bloquea clics ===== */
.splash-cursor { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; display: block; }

/* ===== Ronda 17 · Módulos de Finance como tarjetas que giran (flip-cards.js) ===== */
.flip { position: relative; min-height: 190px; perspective: 1100px; cursor: pointer; outline: none; border-radius: 22px; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; --go: 0; --gx: 50%; --gy: 50%; }
.flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.flip-face { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 24px; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--border); color: var(--text); background: linear-gradient(160deg, rgba(22, 36, 70, .92), rgba(8, 14, 30, .96)); box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .45); }
.flip-front .mi { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(34, 211, 238, .1); color: var(--cyan); margin-bottom: 16px; }
.flip-front .mi svg { width: 22px; height: 22px; }
.flip-front h3 { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -.01em; }
.flip-back { transform: rotateY(180deg); border-color: rgba(34, 211, 238, .45); background: linear-gradient(160deg, rgba(29, 78, 216, .5), rgba(8, 14, 30, .96)); }
.flip-back h3 { margin: 0 0 8px; font-size: .95rem; color: var(--cyan); }
.flip-back p { margin: 0; font-size: .98rem; line-height: 1.5; color: #eaf1ff; }
.flip-cue { position: absolute; right: 16px; bottom: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--cyan); background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .3); animation: flipCue 3s ease-in-out infinite; }
.flip-cue svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes flipCue { 0%, 70%, 100% { transform: rotate(0); } 85% { transform: rotate(180deg); } }
.flip-glare { position: absolute; inset: 0; pointer-events: none; opacity: var(--go); transition: opacity .25s ease; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .9), transparent 55%); mix-blend-mode: soft-light; }
.flip:hover .flip-face { border-color: rgba(34, 211, 238, .5); }
.flip:focus-visible .flip-face { box-shadow: 0 0 0 2px var(--cyan), 0 20px 44px -20px rgba(0, 0, 0, .45); }
@media (max-width: 560px) {
  .modules.flip-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .flip { min-height: 200px; }
  .flip-face { padding: 16px; }
  .flip-back p { font-size: .86rem; }
  .flip-cue { right: 10px; bottom: 10px; width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .flip-cue { animation: none; } }
[data-theme="light"] .flip-face { background: #fff; border-color: rgba(20, 45, 100, .12); color: #0b1733; box-shadow: 0 1px 2px rgba(20, 45, 100, .05), 0 18px 40px -30px rgba(20, 45, 100, .35); }
[data-theme="light"] .flip-front .mi { background: rgba(8, 145, 178, .1); }
[data-theme="light"] .flip-back { background: linear-gradient(160deg, #1d4ed8, #0b1733); border-color: transparent; }

/* ===== Ronda 18 · Problema/solución como tarjetas que giran: frente = solución CAUXE, atrás = problema ===== */
.pain-flip .flip { min-height: 230px; }
.pain-flip .flip-face { justify-content: flex-start; padding: 26px; }
.pain-flip .pf-tag { align-self: flex-start; margin-bottom: 16px; padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pain-flip .flip-face .mi { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px; }
.pain-flip .flip-face .mi svg { width: 22px; height: 22px; }
.pain-flip .flip-face h3 { margin: 0 0 6px; font-size: clamp(1.15rem, 1.7vw, 1.35rem); }
.pain-flip .flip-face p { margin: 0; font-size: .98rem; line-height: 1.45; }
.pain-flip .flip-front { border-color: rgba(34, 211, 238, .4); background: linear-gradient(160deg, rgba(29, 78, 216, .45), rgba(8, 14, 30, .96)); }
.pain-flip .flip-front .pf-tag { color: #67e8f9; background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .35); }
.pain-flip .flip-front .mi { background: rgba(34, 211, 238, .12); color: var(--cyan); }
.pain-flip .flip-front h3 { color: #fff; }
.pain-flip .flip-front p { color: #cfe3ff; }
.pain-flip .flip-back { border-color: rgba(248, 113, 113, .35); background: linear-gradient(160deg, rgba(127, 29, 29, .35), rgba(8, 14, 30, .96)); }
.pain-flip .flip-back .pf-tag { color: #fca5a5; background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .35); }
.pain-flip .flip-back .mi { background: rgba(248, 113, 113, .12); color: var(--red, #f87171); }
.pain-flip .flip-back h3 { color: #fecaca; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.pain-flip .flip-back p { color: #cbd5e1; }
[data-theme="light"] .pain-flip .flip-front { background: linear-gradient(160deg, #1d4ed8, #0b1733); border-color: transparent; }
[data-theme="light"] .pain-flip .flip-back { background: linear-gradient(160deg, #7f1d1d, #1f0b0b); border-color: transparent; }
@media (max-width: 860px) { .pain-flip .flip { min-height: 200px; } }
@media (max-width: 1100px) { .eco-title .eco-word { white-space: normal; } } /* 2026-10-14: antes solo hasta 520px */
/* v2 de las tarjetas del problema (2026-10-05): 6 tarjetas con textos de dos o tres líneas. */
.pain-flip .flip { min-height: 252px; }
@media (max-width: 860px) { .pain-flip .flip { min-height: 196px; } }

/* v19 (2026-10-05): Wischat, ecosistema de IA alrededor del chat. Nueve nodos pequeños conectados al teléfono por una línea de luz,
   con su indicador AI; entran uno a uno cuando aparece la sección. El chat sigue siendo el protagonista. */
.ai-nodes .channel { gap: 7px; padding: 6px 10px 6px 12px; font-size: .74rem; opacity: 0; translate: 0 8px;
  transition: opacity .6s ease, translate .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.35s + var(--d) * .14s); }
.reveal.in .ai-nodes .channel { opacity: 1; translate: 0 0; }
.ai-nodes .channel i { width: 6px; height: 6px; box-shadow: 0 0 8px currentColor; animation: ai-pulse 2.4s ease-in-out infinite; animation-delay: calc(var(--d) * -.3s); }
.ai-nodes .channel b { font: 600 .56rem/1 var(--font-mono, monospace); letter-spacing: .08em; padding: 3px 5px; border-radius: 5px; color: #7dd3fc; background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.25); }
.ai-nodes .channel::after { content: ""; position: absolute; top: 50%; width: 26px; height: 1px; background: linear-gradient(90deg, rgba(96,165,250,.7), rgba(96,165,250,0)); box-shadow: 0 0 6px rgba(96,165,250,.6); }
.ai-nodes .ch1, .ai-nodes .ch3, .ai-nodes .ch5, .ai-nodes .ch7, .ai-nodes .ch9 { right: auto; bottom: auto; }
.ai-nodes .ch2, .ai-nodes .ch4, .ai-nodes .ch6, .ai-nodes .ch8 { left: auto; bottom: auto; }
.ai-nodes .ch1::after, .ai-nodes .ch3::after, .ai-nodes .ch5::after, .ai-nodes .ch7::after, .ai-nodes .ch9::after { left: 100%; }
.ai-nodes .ch2::after, .ai-nodes .ch4::after, .ai-nodes .ch6::after, .ai-nodes .ch8::after { right: 100%; transform: scaleX(-1); }
.ai-nodes .ch1 { left: -46px; top: 12%; } .ai-nodes .ch3 { left: -64px; top: 30%; } .ai-nodes .ch5 { left: -52px; top: 48%; }
.ai-nodes .ch7 { left: -38px; top: 66%; } .ai-nodes .ch9 { left: -58px; top: 84%; }
.ai-nodes .ch2 { right: -50px; top: 20%; } .ai-nodes .ch4 { right: -36px; top: 38%; } .ai-nodes .ch6 { right: -62px; top: 56%; }
.ai-nodes .ch8 { right: -44px; top: 74%; }
.ai-hub { position: absolute; left: 50%; top: -14px; translate: -50% 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  font: 600 .64rem/1 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: #e0f2fe;
  background: rgba(8,15,34,.92); border: 1px solid rgba(56,189,248,.35); box-shadow: 0 0 24px -6px rgba(56,189,248,.6); opacity: 0; transition: opacity .6s .2s ease; }
.reveal.in .ai-hub { opacity: 1; }
.ai-hub i { width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 10px #38bdf8; animation: ai-pulse 2s ease-in-out infinite; }
@keyframes ai-pulse { 50% { opacity: .45; } }
[data-theme="light"] .ai-hub { background: #fff; color: #0b1a3a; }
[data-theme="light"] .ai-nodes .channel b { color: #0369a1; }
@media (prefers-reduced-motion: reduce) { .ai-nodes .channel, .ai-hub { opacity: 1; translate: none; transition: none; } }

/* 2026-10-07 (pedido del equipo): franja de partners Meta / WhatsApp junto a los CTA, como prueba de confianza. */
.cta-partners { display: block; height: 34px; width: auto; margin-top: 12px; border-radius: 8px; }
.cta-band-txt .cta-partners { margin-top: 16px; }
@media (max-width: 520px) { .cta-partners { height: auto; width: 100%; max-width: 340px; } }

/* 2026-10-07: configurador para pymes y grandes empresas (14 negocios que rotan cada 3 s). */
.adapt-tabs .adapt-group { flex-basis: 100%; margin-top: 6px; font: 500 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.adapt-tabs .adapt-group:first-child { margin-top: 0; }
.adapt-tabs button { height: 36px; padding: 0 14px; font-size: .84rem; }
.adapt-points.swap li { animation: adaptIn .5s var(--ease) both; }
.adapt-points.swap li:nth-child(2) { animation-delay: .07s; } .adapt-points.swap li:nth-child(3) { animation-delay: .14s; }
@keyframes adaptIn { from { opacity: 0; transform: translateY(8px); } }
.cfg-size { margin-left: 6px; padding: 3px 8px; border-radius: 999px; font: 500 .66rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.3); vertical-align: middle; }
/* Alto fijo para que el cambio de negocio no mueva la página. */
#adapt-points { min-height: 15.5em; align-content: start; }
@media (max-width: 520px) { #adapt-points { min-height: 19em; } }
/* 2026-10-07 (pedido del equipo): franja de partners en vector, logos más grandes y el mismo aire arriba y abajo. */
.partners { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; padding: 12px 18px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(148,180,255,.18); line-height: 1; }
.partners svg { width: 34px; height: 34px; flex: none; display: block; }
.partners .pt-logos { display: inline-flex; align-items: center; gap: 8px; }
.partners .pt-meta { width: 56px; height: 28px; }
.partners .pt-txt { font: 700 .72rem/1.2 var(--font-body, system-ui); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-align: left; }
.partners .pt-txt small { display: block; font-weight: 500; font-size: .62rem; letter-spacing: .08em; color: rgba(234,241,255,.7); }
.partners .pt-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.2); }
.cta-band-txt .partners { align-self: flex-start; width: fit-content; margin-top: 18px; background: rgba(3,16,31,.35); }
[data-theme="light"] .cta-row .partners { background: #0b1222; }
@media (max-width: 520px) { .partners { gap: 8px 10px; padding: 12px 14px; } .partners svg { width: 30px; height: 30px; } .partners .pt-meta { width: 48px; height: 24px; } .partners .pt-sep { display: none; } }
/* 2026-10-07 (2.ª vuelta, pedido del equipo): sin barra oscura; logos sueltos más grandes, con un halo animado alrededor y un brillo
   que los recorre, para que se lean como partners oficiales. */
.partners { position: relative; isolation: isolate; gap: 10px 16px; padding: 14px 20px; background: transparent !important; border: 0; border-radius: 18px; }
.partners::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--pt-a, 0deg), rgba(34,211,238,.05), #22d3ee, #a78bfa, #25d366, rgba(34,211,238,.05) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pt-spin 4s linear infinite; filter: drop-shadow(0 0 8px rgba(34,211,238,.6)); }
.partners::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: pt-shine 3.2s ease-in-out infinite; }
@property --pt-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pt-spin { to { --pt-a: 360deg; } }
@keyframes pt-shine { 0%, 30% { background-position: -150% 0; } 70%, 100% { background-position: 150% 0; } }
.partners .pt-label { flex-basis: 100%; font: 600 .66rem/1 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: #67e8f9; }
.partners svg { width: 44px; height: 44px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
.partners .pt-logos { gap: 10px; }
.partners .pt-meta { width: 70px; height: 36px; }
.partners .pt-txt { font-size: .78rem; }
.partners .pt-txt small { font-size: .66rem; }
.partners .pt-sep { background: rgba(255,255,255,.25); }
[data-theme="light"] .partners .pt-txt { color: #0b1a3a; }
[data-theme="light"] .partners .pt-txt small { color: #475569; }
[data-theme="light"] .partners .pt-label { color: #0891b2; }
.cta-band-txt .partners .pt-txt, .cta-band-txt .partners .pt-txt small { color: #fff; }
.cta-band-txt .partners .pt-label { color: #e0f2fe; }
@media (max-width: 520px) { .partners svg { width: 38px; height: 38px; } .partners .pt-meta { width: 60px; height: 30px; } }
@media (prefers-reduced-motion: reduce) { .partners::before, .partners::after { animation: none; } }
.partners { width: fit-content; max-width: 100%; }
.partners .pt-g { display: inline-flex; align-items: center; gap: 12px; }
@media (max-width: 520px) { .partners .pt-g { flex-wrap: wrap; } }

/* 2026-10-07: menos CTAs seguidos; los bloques ocultos con hidden no deben mostrarse */
.cta-row[hidden], .btns[hidden] { display: none !important; }

/* 2026-10-07: tarjetas Con/Sin CAUXE en celular: el texto quedaba pegado abajo y cortado.
   Ícono arriba a la derecha, contenido centrado y aire parejo arriba y abajo.
   Antes: min-height 196px, contenido alineado arriba con el ícono en su propia fila. */
@media (max-width: 860px) {
  .pain-flip .flip { min-height: 240px; }
  .pain-flip .flip-face { justify-content: center; padding: 24px 22px; }
  .pain-flip .pf-tag { margin-bottom: 14px; }
  .pain-flip .flip-face .mi { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; margin: 0; }
  .pain-flip .flip-face h3 { margin-bottom: 8px; padding-right: 8px; }
}

/* 2026-10-07: el panel de cada módulo se abre como ventana desde la palabra o la X (ecosistema.js).
   Mientras anima se apagan las transiciones CSS para que el tamaño final sea el real desde el primer cuadro. */
.eco-stage.eco-pop, .eco-stage.eco-pop .eco-panel { transition: none !important; }
.eco-stage .eco-panel { border-radius: 22px; transform-origin: 0 0; will-change: transform; }
.eco-beam { position: absolute; z-index: 40; width: 3px; margin-left: -1.5px; border-radius: 3px; pointer-events: none; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(103, 232, 249, 0), #67e8f9 30%, #3b82f6); box-shadow: 0 0 14px rgba(34, 211, 238, .8), 0 0 28px rgba(59, 130, 246, .5); }
@media (max-width: 860px) {
  .eco-stage .eco-panel { overflow: visible; margin-top: 14px; border: 1px solid rgba(34, 211, 238, .35); box-shadow: 0 0 0 1px rgba(34, 211, 238, .08), 0 24px 60px -24px rgba(34, 211, 238, .45); }
  .eco-stage .eco-panel::before { content: ""; position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); background: inherit; border-left: 1px solid rgba(34, 211, 238, .35); border-top: 1px solid rgba(34, 211, 238, .35); }
}

/* 2026-10-07 (2.ª vuelta, pedido del equipo): el panel del módulo es una ventana que flota sobre la X, centrada en la pantalla,
   con fondo oscurecido. Crece desde la palabra tocada. Antes se abría al lado (computadora) o debajo (celular). */
.eco-modal-host { display: contents; }
.eco-stage.open { grid-template-columns: 1fr; }
.eco-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(3, 7, 18, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s ease; }
.eco-scrim.in { opacity: 1; }
.eco-modal-host .eco-panel, .eco-modal-host .eco-panel.show {
  position: fixed; z-index: 1001; inset: 0; margin: auto; width: min(560px, calc(100% - 24px)); height: fit-content; max-height: min(84vh, 760px);
  overflow: auto; overscroll-behavior: contain; padding: 26px 24px 22px; border: 1px solid rgba(34, 211, 238, .4); border-radius: 22px; opacity: 1; transform: none;
  background: linear-gradient(180deg, rgba(12, 22, 48, .98), rgba(6, 11, 26, .99));
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .08), 0 30px 90px -20px rgba(0, 0, 0, .8), 0 0 60px -10px rgba(34, 211, 238, .35);
}
.eco-modal-host .eco-panel::before { content: none; }
.eco-modal-host .eco-close { position: sticky; top: 0; float: right; z-index: 2; width: 36px; height: 36px; margin: -8px -6px 0 8px; border-radius: 50%; font-size: 1.3rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); cursor: pointer; }
html.eco-modal-open .dock, html.eco-modal-open .greet, html.eco-modal-open .rail { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .eco-modal-host .eco-panel, .eco-modal-host .eco-panel.show { max-height: calc(100dvh - 96px); padding: 22px 18px 18px; } }

/* "Se conecta con": botones verde claro (más claros que el verde de WhatsApp) y letra legible */
.eco-link, [data-theme="light"] .eco-link { background: #bbf7d0; border: 1px solid #86efac; color: #064e3b; font-weight: 700; font-size: .85rem; padding: 7px 14px; }
.eco-link:hover, [data-theme="light"] .eco-link:hover { background: #dcfce7; border-color: #4ade80; color: #064e3b; }
.eco-links small, [data-theme="light"] .eco-stage .eco-links small { color: #cbd5e1; font-size: .8rem; }

/* 2026-10-07: franja "Ya fluyen con Cauxe" animada (antes: iniciales, estrellas y una frase). */
.flowbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 26px; padding: 26px 0 0; font-size: .92rem; color: var(--muted); }
.fb-head { display: flex; align-items: center; gap: 12px; }
.fb-head b { display: block; color: var(--text); font-family: var(--font-display); font-size: 1rem; }
.fb-head small { display: block; font-size: .78rem; color: var(--muted); }
.fb-live { position: relative; width: 12px; height: 12px; flex: none; border-radius: 50%; background: #22c55e; }
.fb-live::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #22c55e; opacity: 0; animation: fbPing 1.8s ease-out infinite; }
@keyframes fbPing { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.fb-track { position: relative; display: flex; align-items: center; gap: 12px; width: min(560px, 100%); height: 52px; padding: 0 10px 0 16px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border-strong); }
.fb-river { position: absolute; left: 16px; right: 52px; bottom: 7px; height: 2px; border-radius: 2px; background: rgba(34, 211, 238, .12); overflow: hidden; }
.fb-river i { position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, #22d3ee, #3b82f6); transform: translateX(-100%); }
.flowbar.go .fb-river i { animation: fbRiver 3s linear infinite; }
@keyframes fbRiver { to { transform: translateX(260%); } }
.fb-list { position: relative; flex: 1; height: 100%; margin: 0; padding: 0; list-style: none; }
.fb-list li { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; opacity: 0; transform: translateY(100%); transition: transform .55s var(--ease), opacity .4s; }
.fb-list li.on { opacity: 1; transform: none; }
.fb-list li.out { opacity: 0; transform: translateY(-100%); }
.fb-list svg { width: 18px; height: 18px; flex: none; color: var(--cyan); }
.fb-list b { color: var(--text); font-weight: 700; }
.fb-list span { overflow: hidden; text-overflow: ellipsis; }
.fb-ok { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(34, 197, 94, .14); border: 1px solid rgba(34, 197, 94, .45); }
.fb-ok svg { width: 18px; height: 18px; fill: none; stroke: #22c55e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.fb-ok.tick svg { animation: fbTick .6s var(--ease) forwards; }
.fb-ok.tick { animation: fbPop .6s var(--ease); }
@keyframes fbTick { to { stroke-dashoffset: 0; } }
@keyframes fbPop { 40% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(34, 197, 94, .15); } }
.fb-link { color: var(--sky); font-weight: 600; }
[data-theme="light"] .fb-track { background: #fff; border-color: rgba(15, 35, 75, .12); box-shadow: 0 8px 24px -16px rgba(15, 35, 75, .35); }
[data-theme="light"] .fb-list svg { color: #0284c7; }
[data-theme="light"] .fb-ok svg { stroke: #16a34a; }
@media (max-width: 640px) {
  .flowbar { flex-direction: column; gap: 12px; }
  .fb-head { text-align: left; }
  .fb-list li { gap: 8px; font-size: .86rem; }
  .fb-list span { white-space: normal; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) { .fb-live::after, .flowbar.go .fb-river i { animation: none; } }

/* 2026-10-07 (3.ª vuelta, pedido del equipo): en celular la X queda visible arriba, por encima del fondo oscurecido,
   y la ventana sale pegada debajo de la palabra elegida, con una flecha. El "+" de esa palabra pasa a "−" y al tocarlo se cierra. */
.orb-word.is-selected i { background: #22d3ee; color: #03101f; font-size: 1.1rem; box-shadow: 0 0 0 4px rgba(34, 211, 238, .25); }
@media (max-width: 860px) {
  .eco-stage.open { position: relative; z-index: 1001; }
  .eco-modal-host .eco-panel, .eco-modal-host .eco-panel.show {
    inset: auto 10px 10px; top: var(--eco-top, 200px); width: auto; height: auto; max-height: none; margin: 0; z-index: 1002;
    border-color: rgba(34, 211, 238, .6);
  }
  .eco-modal-host .eco-panel { padding-top: 18px; }
  .eco-modal-host .eco-pin { position: fixed; z-index: 1003; left: 50%; top: calc(var(--eco-top, 200px) - 7px); width: 16px; height: 16px; margin-left: -8px; transform: rotate(45deg); background: #0c1630; border-left: 1px solid rgba(34, 211, 238, .6); border-top: 1px solid rgba(34, 211, 238, .6); pointer-events: none; }
  html.eco-modal-open .mbar { opacity: 0; pointer-events: none; }
  html.eco-modal-open .nav { opacity: .25; pointer-events: none; transition: opacity .3s; }
}
.eco-pin[hidden] { display: none; }
@media (min-width: 861px) { .eco-modal-host .eco-pin { display: none; } }

/* 2026-10-07 (pedido del equipo): cuando la línea llega a un paso, su número grande también se enciende (antes solo el círculo). */
.step-num { transition: color .6s var(--ease), text-shadow .6s var(--ease), -webkit-text-stroke-color .6s; }
.step.lit .step-num {
  background: linear-gradient(120deg, #60a5fa, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(34, 211, 238, .45)); opacity: .9; animation: stepNumOn .8s var(--ease);
}
@keyframes stepNumOn { from { opacity: 0; transform: scale(.85); } to { opacity: .9; transform: none; } }
[data-theme="light"] .step.lit .step-num { background: linear-gradient(120deg, #2563eb, #0891b2); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 14px rgba(37, 99, 235, .3)); }
@media (prefers-reduced-motion: reduce) { .step.lit .step-num { animation: none; } }

/* 2026-10-07 (pedido del equipo): en celular el tipo de negocio y su configuración quedan juntos.
   Orden: título → pestañas en una fila deslizable → tarjeta de configuración (compacta, 2 columnas) → puntos → botón.
   Antes: pestañas arriba, luego los puntos y el botón, y la tarjeta muy abajo. */
@media (max-width: 900px) {
  .adapt { display: flex; flex-direction: column; gap: 0; }
  .adapt > div:first-child { display: contents; }
  .adapt > div > .eyebrow { order: 1; align-self: flex-start; }
  .adapt > div > h2 { order: 2; }
  .adapt > div > p { order: 3; margin-bottom: 0; }
  .adapt .adapt-tabs { order: 4; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 18px -16px 12px; padding: 4px 16px 8px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
  .adapt .adapt-tabs::-webkit-scrollbar { display: none; }
  .adapt .adapt-tabs button { flex: none; }
  .adapt .adapt-group { flex: none; align-self: center; padding: 0 2px 0 8px; white-space: nowrap; }
  .adapt .adapt-group:first-child { padding-left: 0; }
  .adapt #config { order: 5; margin-bottom: 26px; padding: 18px 16px; transform: none !important; }
  .adapt #adapt-points { order: 6; min-height: 0; }
  .adapt > div > .btn { order: 7; }
  .adapt .config-head { flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .adapt .config-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .adapt .mod { gap: 8px; padding: 10px; border-radius: 13px; font-size: .8rem; line-height: 1.2; }
  .adapt .mod svg { width: 18px; height: 18px; }
  .adapt .mod .tg { transform: scale(.82); transform-origin: right center; margin-left: auto; }
}
@media (max-width: 900px) {
  .adapt { min-width: 0; max-width: 100%; }
  .adapt .adapt-tabs { width: calc(100% + 32px); max-width: calc(100% + 32px); min-width: 0; }
  .adapt #config, .adapt #adapt-points { min-width: 0; max-width: 100%; }
}
@media (max-width: 900px) {
  .adapt .config-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .adapt .mod { min-width: 0; }
  .adapt .mod span { min-width: 0; overflow-wrap: anywhere; }
}

/* 2026-10-08 · Ecosistema v3: palabras sin ícono y cadena conectada Prospecto → Dashboard en azul cobalto.
   Versión anterior en archivo/portada-cauxe02/ecosistema-v2/ */
.orb-word { gap: 12px; padding: 13px 16px 13px 20px; }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.eco-chain { transition: --p .55s cubic-bezier(.65, 0, .35, 1); --cob: #2f6bff; --cob-d: #0047ab; --p: 0; margin: clamp(22px, 3vw, 34px) auto 0; max-width: 1180px; text-align: center; }
.chain-head { margin: 0 0 18px; font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--muted); }
.chain-head b { color: var(--text); }
.chain-track { position: relative; }
.chain-track ol { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.chain-line, .chain-dot { position: absolute; pointer-events: none; }
.chain-line { left: 6.25%; right: 6.25%; top: 21px; height: 2px; background: linear-gradient(90deg, var(--cob) calc(var(--p) * 100%), rgba(47, 107, 255, .2) calc(var(--p) * 100%)); }
.chain-dot { top: 16px; left: calc(6.25% + var(--p) * 87.5%); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(47, 107, 255, .35), 0 0 22px 4px var(--cob); }
.chain-track button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 2px; border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; }
.chain-track .cn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(47, 107, 255, .45); background: var(--bg); font-family: var(--font-mono); font-size: .78rem; font-weight: 700; color: var(--muted); transition: all .25s var(--ease); }
.chain-track b { font-family: var(--font-display); font-size: clamp(.86rem, 1.05vw, 1rem); line-height: 1.25; text-transform: uppercase; letter-spacing: .02em; transition: color .25s; }
.chain-track li.done .cn { border-color: var(--cob); color: #fff; background: var(--cob-d); }
.chain-track li.on .cn { border-color: #fff; color: #fff; background: var(--cob); box-shadow: 0 0 0 6px rgba(47, 107, 255, .22), 0 0 30px rgba(47, 107, 255, .8); transform: scale(1.1); }
.chain-track li.on b, .chain-track li.done b { color: var(--text); }
.chain-track button:hover b { color: var(--text); }
.chain-track button:focus-visible { outline: 2px solid var(--cob); outline-offset: 4px; border-radius: 10px; }
.chain-cap { min-height: 3.2em; margin: 18px auto 0; max-width: 640px; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--text); opacity: 0; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease; }
.chain-cap.in { opacity: 1; transform: none; }
.chain-cap b { display: block; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cob); margin-bottom: 4px; }
[data-theme="light"] .chain-cap b { color: var(--cob-d); }
@media (max-width: 860px) {
  .chain-track ol { grid-template-columns: 1fr; gap: 6px; text-align: left; }
  .chain-track button { flex-direction: row; gap: 14px; }
  .chain-track .cn { width: 36px; height: 36px; font-size: .72rem; flex: none; }
  .chain-line { left: 17px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; background: linear-gradient(180deg, var(--cob) calc(var(--p) * 100%), rgba(47, 107, 255, .2) calc(var(--p) * 100%)); }
  .chain-dot { left: 18px; top: calc(18px + var(--p) * (100% - 36px)); margin-top: -6px; }
  .chain-cap { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .eco-chain, .chain-track .cn { transition: none; } }
.orb-word { font-size: clamp(.92rem, 1.2vw, 1.12rem); }
@media (max-width: 560px) {
  .orb-scene { height: 450px; }
  .orb-word { padding: 8px 10px 8px 12px; gap: 6px; font-size: .8rem; border-radius: 12px; }
  .orb-word span { white-space: normal; max-width: 8.2em; line-height: 1.15; text-align: left; }
  .orb-word i { width: 18px; height: 18px; font-size: .8rem; }
  .orb-x { width: 130px; }
}

/* 2026-10-08: los números 1-2-3 se encienden en verde esmeralda mientras la línea avanza. Antes: archivo/portada-cauxe02/ajustes-2026-10-08b/tres-pasos.css */
.tnum { transition: color .6s ease, opacity .6s ease, text-shadow .6s ease; }
.three-steps.in .tnum { color: #10b981; opacity: .75; text-shadow: 0 0 36px rgba(16, 185, 129, .55); }
.three-steps.in .tstep:nth-of-type(1) .tnum { transition-delay: .2s; }
.three-steps.in .tstep:nth-of-type(2) .tnum { transition-delay: 1.1s; }
.three-steps.in .tstep:nth-of-type(3) .tnum { transition-delay: 2s; }
@media (prefers-reduced-motion: reduce) { .tnum { transition: none; } }
/* 2026-10-08: producto de Cauxe bajo cada concepto de la X; "Desarrollo 360" como dato destacado. */
.orb-word span { display: flex; flex-direction: column; }
.orb-word span small { margin-top: 3px; font: 600 .62em/1.1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #7fb0ff; }
.stat-num.stat-word { white-space: nowrap; }

/* 2026-10-08: el producto de Cauxe forma parte del título de cada píldora */
.orb-word span .ow-brand { display: block; margin-bottom: 3px; font: 700 .8em/1.1 var(--font-display); font-style: normal; letter-spacing: .02em; color: #34d399; text-shadow: 0 0 12px rgba(16, 185, 129, .35); }
.orb-word.is-selected span .ow-brand, .orb-word:hover span .ow-brand { color: #6ee7b7; }
.eco-panel h3 .ow-brand { display: block; font-style: normal; font-size: .6em; letter-spacing: .04em; color: #34d399; margin-bottom: 4px; }
.orb-word span { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
@media (max-width: 560px) { .orb-word span .ow-brand { font-size: .74em; white-space: nowrap; } }

/* 2026-10-08: títulos narrativos bajo la X y riel del ecosistema (Wischat · NeoCRM 360 · Cauxe Finance · BISOFT → Cauxe) */
.orb-say b { font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: #fff; }
.orb-rail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; margin: 18px auto 0; max-width: 760px; padding: 0 12px; }
.orb-rail span { padding: 7px 12px; border: 1px solid rgba(127, 176, 255, .22); border-radius: 999px; font: 600 .78rem/1 var(--font-display); letter-spacing: .02em; color: #9fb4d8; background: rgba(10, 18, 40, .6); transition: color .4s ease, border-color .4s ease, box-shadow .4s ease, background .4s ease; }
.orb-rail span.on { color: #fff; border-color: #34d399; background: rgba(16, 185, 129, .14); box-shadow: 0 0 18px -4px rgba(16, 185, 129, .7); }
.orb-rail span.hub { color: #fff; border-color: rgba(47, 107, 255, .7); background: linear-gradient(135deg, rgba(0, 71, 171, .55), rgba(16, 185, 129, .35)); }
.orb-rail i { position: relative; width: 26px; height: 1px; background: rgba(127, 176, 255, .35); overflow: hidden; }
.orb-rail i::after { content: ""; position: absolute; top: -1px; left: -8px; width: 8px; height: 3px; border-radius: 2px; background: #34d399; animation: railPulse 2.4s linear infinite; }
.orb-rail i:nth-of-type(2)::after { animation-delay: .6s; } .orb-rail i:nth-of-type(3)::after { animation-delay: 1.2s; } .orb-rail i.to::after { animation-delay: 1.8s; }
.orb-rail i.to { width: 38px; background: linear-gradient(90deg, rgba(127, 176, 255, .35), rgba(47, 107, 255, .8)); }
@keyframes railPulse { to { left: 100%; } }
[data-theme="light"] .orb-rail span { background: #fff; color: #334155; border-color: rgba(0, 71, 171, .2); }
[data-theme="light"] .orb-rail span.on { color: #065f46; background: rgba(16, 185, 129, .12); }
[data-theme="light"] .orb-rail span.hub { color: #fff; }
[data-theme="light"] .orb-say b { color: #0b1a33; }
@media (max-width: 560px) { .orb-rail { row-gap: 8px; } .orb-rail span { font-size: .7rem; padding: 6px 9px; } .orb-rail i { width: 12px; } .orb-rail i.to { width: 18px; } }
@media (prefers-reduced-motion: reduce) { .orb-rail i::after { animation: none; } }

/* 2026-10-08 (SEO): resumen en texto de lo que conecta Cauxe (debajo de la X). Discreto, para leer y enlazar. */
.eco-map { max-width: 1180px; margin: clamp(30px, 4vw, 48px) auto 0; padding-top: clamp(22px, 3vw, 30px); border-top: 1px solid var(--border); text-align: left; }
.eco-map-title { font-family: var(--font-body); font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0; }
.eco-map-flow { margin: 10px 0 18px; text-align: center; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; color: var(--text); }
.eco-map ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 22px; }
.eco-map li { font-size: .86rem; line-height: 1.5; color: var(--muted); }
.eco-map li b { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.eco-map a { color: var(--sky); text-decoration: underline; text-decoration-color: rgba(125, 211, 252, .35); text-underline-offset: 2px; }
[data-theme="light"] .eco-map a { color: #2563eb; }
@media (max-width: 1000px) { .eco-map ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .eco-map ul { grid-template-columns: 1fr; } }
.faq-list details p a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="light"] .faq-list details p a { color: #2563eb; }

/* 2026-10-08: frase bajo la X fuera del anillo (antes absoluta dentro de la escena y se montaba con la píldora del frente). */
.orb-say.below { position: relative; left: auto; bottom: auto; z-index: 1; width: min(640px, 92%); min-height: 4.6em; margin: 22px auto 0; transform: translateY(6px); }
.orb-say.below.in { transform: none; }
.eco-stage.open ~ .orb-say.below { opacity: 0; }
@media (max-width: 560px) { .orb-say.below { min-height: 5.6em; margin-top: 16px; } }

/* 2026-10-08 (pedido del equipo): fichas de la X en fondo blanco, con la solución destacada en el título,
   checks y botones de color. Versión oscura en archivo/portada-cauxe02/fichas-x-oscuras/ */
.eco-modal-host .eco-panel, .eco-modal-host .eco-panel.show, [data-theme="light"] .eco-stage .eco-panel, .eco-stage .eco-panel {
  background: #fff; color: #0b1324; border: 1px solid #e3e8f2; box-shadow: 0 30px 80px -30px rgba(15, 23, 42, .45), 0 0 0 1px rgba(0, 71, 171, .06); }
.eco-modal-host .eco-close, .eco-close { color: #0b1324; background: #f1f5f9; border: 1px solid #e2e8f0; }
.eco-close:hover { color: #0047ab; border-color: #0047ab; }
.eco-panel .eco-kicker { color: #0047ab; }
.eco-panel h3, [data-theme="light"] .eco-stage .eco-panel h3 { color: #0b1324; font-size: 1.25rem; font-weight: 700; }
.eco-panel h3 .ow-brand.pb { display: block; margin: 2px 0 4px; font: 800 clamp(1.7rem, 3vw, 2.2rem)/1.05 var(--font-display); letter-spacing: -.02em;
  background: linear-gradient(90deg, #0047ab, #10b981); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
.eco-panel .eco-lead, [data-theme="light"] .eco-stage .eco-lead { color: #1e293b; }
.eco-panel .eco-bullets li, [data-theme="light"] .eco-stage .eco-bullets li { color: #475569; padding-left: 28px; }
.eco-panel .eco-bullets li::before { content: "✓"; top: .1em; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: #fff; background: #10b981; box-shadow: 0 4px 10px -3px rgba(16, 185, 129, .7); }
.eco-panel .eco-incl small, .eco-panel .eco-flow-head, .eco-panel .eco-links small, [data-theme="light"] .eco-stage .eco-links small { color: #64748b; }
.eco-panel .eco-incl span { color: #0047ab; background: #eef4ff; border-color: #c7d7f5; font-weight: 600; }
.eco-panel .eco-flow li, [data-theme="light"] .eco-stage .eco-flow li { color: #0b1324; }
.eco-panel .eco-flow li span { color: #fff; background: linear-gradient(135deg, #0047ab, #2f6bff); box-shadow: 0 0 0 4px rgba(0, 71, 171, .12); }
.eco-panel .eco-flow::before { background: linear-gradient(180deg, #0047ab, #10b981); }
.eco-panel .eco-link, [data-theme="light"] .eco-panel .eco-link { background: #fff; border: 1.5px solid #0047ab; color: #0047ab; font-weight: 700; }
.eco-panel .eco-link:hover, [data-theme="light"] .eco-panel .eco-link:hover { background: #0047ab; color: #fff; border-color: #0047ab; }
.eco-panel .eco-cta .btn-primary { background: linear-gradient(90deg, #0047ab, #2f6bff 55%, #10b981); color: #fff; border: 0; box-shadow: 0 10px 24px -10px rgba(0, 71, 171, .7); }
.eco-panel .eco-cta .eco-wa { background: #25d366; color: #fff; border: 0; box-shadow: 0 10px 24px -12px rgba(37, 211, 102, .8); }
.eco-panel .eco-cta .eco-wa:hover { background: #1fbe5b; }
@media (max-width: 860px) { .eco-modal-host .eco-pin { background: #fff; border-left-color: #e3e8f2; border-top-color: #e3e8f2; } .eco-modal-host .eco-panel, .eco-modal-host .eco-panel.show { border-color: #e3e8f2; } }
/* 2026-10-08: anillo más alto (ver ecosistema.js) para que ninguna píldora tape a otra. */
.orb-scene { height: clamp(470px, 62vh, 580px); }
@media (max-width: 560px) { .orb-scene { height: 540px; } }
/* 2026-10-08: la tarjeta de la asesora se aparta cuando quedaría encima de un texto (pro.js) y vuelve sola. */
.greet.show.tuck, .demo-pill.show.tuck { opacity: 0; transform: translateX(16px); pointer-events: none; }
/* 2026-10-13 (pedido del equipo): la X del anillo es la X original de Cauxe (azul marino y cielo con neón) y cada 20 s se
   enciende y crece un poco. Versión anterior en archivo/portada-cauxe02/orbita-v8-antes/ */
.orb-x { width: clamp(170px, 21vw, 270px); filter: drop-shadow(0 18px 30px rgba(11, 31, 77, .35)) drop-shadow(0 0 18px rgba(56, 189, 248, .35));
  animation: orbFloat 6s ease-in-out infinite, orbIgnite 20s 4s ease-in-out infinite; }
@keyframes orbIgnite {
  0%, 84%, 100% { scale: 1; filter: drop-shadow(0 18px 30px rgba(11, 31, 77, .35)) drop-shadow(0 0 18px rgba(56, 189, 248, .35)) brightness(1); }
  89% { scale: 1.12; filter: drop-shadow(0 18px 30px rgba(11, 31, 77, .35)) drop-shadow(0 0 34px rgba(56, 189, 248, .95)) drop-shadow(0 0 70px rgba(37, 99, 235, .7)) brightness(1.22) saturate(1.2); }
  93% { scale: 1.08; filter: drop-shadow(0 18px 30px rgba(11, 31, 77, .35)) drop-shadow(0 0 26px rgba(56, 189, 248, .8)) drop-shadow(0 0 50px rgba(37, 99, 235, .5)) brightness(1.12); }
}
.orb-glow { animation: orbGlow 20s 4s ease-in-out infinite; }
@keyframes orbGlow { 0%, 84%, 100% { opacity: .7; scale: 1; } 89% { opacity: 1; scale: 1.25; } }
@media (max-width: 560px) { .orb-x { width: 150px; } }
@media (prefers-reduced-motion: reduce) { .orb-x, .orb-glow { animation: none; } }
/* Celular: anillo horizontal con píldoras compactas para que no se monten. */
@media (max-width: 560px) {
  .orb-word { padding: 6px 8px 6px 9px; gap: 4px; font-size: .68rem; border-radius: 10px; }
  .orb-word span { max-width: 7.4em; }
  .orb-word .ow-brand { font-size: .78em; }
  .orb-word i { display: none; }
  .orb-x { width: 128px; }
}
@media (max-width: 560px) { .orb-word span, .orb-word span .ow-brand { white-space: normal; } .orb-word span { max-width: 8em; } }

/* 2026-10-13: las 8 funciones del mapa como tarjetas-botón con animación; API + integraciones destacada.
   Versión anterior en archivo/portada-cauxe02/mapa-8-funciones-v1/. */
@property --em-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.eco-map .em-grid { gap: 14px; }
.em-card { position: relative; display: block; padding: 18px 18px 16px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); overflow: hidden; isolation: isolate; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .3s, box-shadow .3s; transition-delay: calc(var(--i) * 70ms), calc(var(--i) * 70ms), 0s, 0s; }
[data-theme="light"] .em-card { background: linear-gradient(180deg, #fff, #f6f8ff); box-shadow: 0 1px 2px rgba(15, 30, 80, .06); }
.eco-map.in .em-card { opacity: 1; transform: none; }
.em-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(47, 107, 255, .13) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.em-card:hover, .em-card:focus-within { transform: translateY(-4px); border-color: rgba(47, 107, 255, .55); box-shadow: 0 14px 34px -14px rgba(47, 107, 255, .45); transition-delay: 0s; }
.em-card:hover::before, .em-card:focus-within::before { transform: translateX(120%); }
.em-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #2f6bff; background: rgba(47, 107, 255, .1); border: 1px solid rgba(47, 107, 255, .22); margin-bottom: 12px; transition: transform .35s var(--ease), background .3s, color .3s; }
.em-ic svg { width: 20px; height: 20px; }
.em-card:hover .em-ic { transform: rotate(-6deg) scale(1.08); background: #2f6bff; color: #fff; }
.eco-map .em-card b { margin: 0 0 6px; }
.em-go { display: inline-flex; align-items: center; gap: 6px; color: var(--text) !important; text-decoration: none !important; font-weight: 650; }
.em-go::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.em-go:focus-visible { outline: none; }
.em-card:has(.em-go:focus-visible) { outline: 2px solid #2f6bff; outline-offset: 3px; }
.em-arr { width: 15px; height: 15px; flex: none; color: #2f6bff; opacity: .55; transition: transform .3s var(--ease), opacity .3s; }
.em-card:hover .em-arr { transform: translateX(4px); opacity: 1; }
.em-card > a, .em-card p a { position: relative; z-index: 1; }
/* API destacada: tarjeta oscura tipo consola, borde con luz giratoria y pestañas como el bloque de código. */
.em-card.em-api { border-color: transparent; background: linear-gradient(160deg, #0b1733, #10224a 60%, #0a1430) padding-box, conic-gradient(from var(--em-a), rgba(47, 107, 255, .2), #22d3ee, #2f6bff, rgba(47, 107, 255, .2) 40%, rgba(47, 107, 255, .2)) border-box; border: 1.5px solid transparent; color: #a9b8d8; box-shadow: 0 18px 40px -18px rgba(34, 211, 238, .45); animation: emSpin 6s linear infinite; }
[data-theme="light"] .em-card.em-api { background: linear-gradient(160deg, #0b1733, #10224a 60%, #0a1430) padding-box, conic-gradient(from var(--em-a), rgba(47, 107, 255, .2), #22d3ee, #2f6bff, rgba(47, 107, 255, .2) 40%, rgba(47, 107, 255, .2)) border-box; }
.em-api .em-go { color: #fff !important; }
.em-api .em-arr { color: #22d3ee; opacity: 1; }
.em-api .em-ic { color: #22d3ee; background: rgba(34, 211, 238, .12); border-color: rgba(34, 211, 238, .35); box-shadow: 0 0 18px rgba(34, 211, 238, .35); }
.em-api:hover .em-ic { background: #22d3ee; color: #0b1733; }
.em-api::before { background: linear-gradient(110deg, transparent 30%, rgba(34, 211, 238, .16) 50%, transparent 70%); }
.em-tabs { display: flex; gap: 6px; margin: 4px 0 10px; padding: 5px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(125, 211, 252, .14); font-family: var(--font-mono); font-size: .8rem; font-weight: 600; }
.em-tabs i { position: relative; flex: 1; text-align: center; font-style: normal; padding: 7px 8px; border-radius: 8px; color: #8a9bc2; animation: emTab 6s infinite; }
.em-tabs i:nth-child(2) { animation-delay: 2s; }
.em-tabs i:nth-child(3) { animation-delay: 4s; }
@keyframes emTab { 0%, 30% { color: #fff; background: rgba(255, 255, 255, .09); box-shadow: inset 0 2px 0 #22d3ee, 0 0 18px rgba(34, 211, 238, .35); } 36%, 100% { color: #8a9bc2; background: transparent; box-shadow: inset 0 2px 0 transparent; } }
.em-api:hover { box-shadow: 0 22px 48px -16px rgba(34, 211, 238, .6); }
@keyframes emSpin { to { --em-a: 360deg; } }
@media (max-width: 560px) { .em-card { padding: 14px 14px 13px; } .em-ic { float: left; width: 32px; height: 32px; margin: -5px 12px 0 0; } .em-ic svg { width: 17px; height: 17px; } .eco-map .em-card b { margin: 0 0 9px; } .em-tabs { clear: left; } }
@media (prefers-reduced-motion: reduce) { .em-card { opacity: 1; transform: none; transition: none; } .em-card.em-api, .em-tabs i { animation: none; } .em-tabs i:first-child { color: #fff; background: rgba(255, 255, 255, .09); box-shadow: inset 0 2px 0 #22d3ee; } }
/* 2026-10-14: enlaces legibles dentro de las tarjetas oscuras (API, CRM, ERP). */
.eco-map .em-card.em-api a:not(.em-go), [data-theme] .eco-map .em-card.em-api a:not(.em-go) { color: #7dd3fc; text-decoration-color: rgba(125, 211, 252, .45); }
/* 2026-10-14: con 9 conceptos los títulos largos (p. ej. Automatización De Toda La Mensajería) pasan a dos líneas para no taparse. */
@media (min-width: 561px) { .orb-word > span { white-space: normal; max-width: 11.5em; } }
/* 2026-10-14 (pedido del equipo): pestañas cURL / Node.js / Python de Developers en verde esmeralda para que resalten.
   Antes: texto gris y la activa con línea cian (archivo/portada-cauxe02/developers-pestanas-v1/). */
.code-tabs { gap: 8px; padding: 12px 12px 10px; }
.code-tab { border-radius: 999px; padding: 8px 16px; font-weight: 700; color: #6ee7b7; background: rgba(16, 185, 129, .1); border: 1px solid rgba(52, 211, 153, .45); transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.code-tab:hover { background: rgba(16, 185, 129, .22); color: #d1fae5; }
.code-tab[aria-selected="true"] { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-color: #34d399; box-shadow: 0 6px 18px -6px rgba(16, 185, 129, .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
.code-tab:focus-visible { outline: 2px solid #34d399; outline-offset: 2px; }

/* 2026-10-14 (pedido del equipo): la píldora de al frente, bajo la X, brilla en verde esmeralda como invitando a tocarla
   (un poco más grande, desde ecosistema.js) y su título verde brilla. El riel de soluciones se puede tocar y gira el anillo.
   Versión anterior: archivo/portada-cauxe02/anillo-clic-scroll-v1/ */
.orb-word.is-front { border-color: rgba(52, 211, 153, .85); box-shadow: 0 0 0 1px rgba(52, 211, 153, .35), 0 0 28px -2px rgba(16, 185, 129, .55), 0 18px 44px -16px rgba(16, 185, 129, .6); }
.orb-word.is-front::after { border-color: rgba(52, 211, 153, .75); animation: ctPulse 1.8s ease-out infinite; }
.orb-word.is-front span .ow-brand { color: #6ee7b7; text-shadow: 0 0 10px rgba(52, 211, 153, .85), 0 0 22px rgba(16, 185, 129, .55); animation: owGlow 2.2s ease-in-out infinite; }
.orb-word.is-front i { background: rgba(16, 185, 129, .22); color: #6ee7b7; }
@keyframes owGlow { 50% { text-shadow: 0 0 14px rgba(110, 231, 183, 1), 0 0 30px rgba(16, 185, 129, .7); } }
.orb-rail span[role="button"] { cursor: pointer; }
.orb-rail span[role="button"]:hover { border-color: #34d399; color: #fff; box-shadow: 0 0 14px -4px rgba(16, 185, 129, .7); }
[data-theme="light"] .orb-rail span[role="button"]:hover, .vi-orb .orb-rail span[role="button"]:hover { color: #065f46; }
.vi-orb .orb-rail span.hub[role="button"]:hover, .orb-rail span.hub[role="button"]:hover { color: #fff; }
.orb-rail span[role="button"]:focus-visible { outline: 2px solid #34d399; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .orb-word.is-front span .ow-brand { animation: none; } }

/* 2026-10-14 (pedido del equipo): botón WhatsApp de la barra fija del celular en verde esmeralda, con un anillo de luz que
   gira alrededor y un pulso suave que invita a tocarlo. En tema claro antes quedaba casi invisible (fondo claro).
   Versión anterior: archivo/portada-cauxe02/barra-whatsapp-v1/ */
@property --wa-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html .mbar a.wa, html[data-theme="light"] .mbar a.wa {
  position: relative; isolation: isolate; color: #fff; font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(135deg, #10b981 0%, #059669 60%, #047857 100%);
  box-shadow: 0 8px 22px -8px rgba(16, 185, 129, .75), inset 0 1px 0 rgba(255, 255, 255, .28);
  text-shadow: 0 1px 1px rgba(4, 47, 34, .35);
}
html .mbar a.wa svg { color: #fff; width: 21px; height: 21px; filter: drop-shadow(0 1px 1px rgba(4, 47, 34, .35)); }
/* anillo de luz que recorre el borde */
html .mbar a.wa::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 17px; padding: 2px;
  background: conic-gradient(from var(--wa-ang), rgba(110, 231, 183, 0) 0deg, #6ee7b7 70deg, #a7f3d0 110deg, rgba(110, 231, 183, 0) 180deg, rgba(110, 231, 183, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: waRing 2.6s linear infinite;
}
/* pulso suave hacia afuera */
html .mbar a.wa::after {
  content: ""; position: absolute; inset: -3px; z-index: -2; border-radius: 17px; border: 2px solid rgba(52, 211, 153, .7);
  animation: waPulse 2.6s ease-out infinite; pointer-events: none;
}
html .mbar a.wa:active { transform: scale(.97); }
@keyframes waRing { to { --wa-ang: 360deg; } }
@keyframes waPulse { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.12, 1.35); } }
@media (prefers-reduced-motion: reduce) { html .mbar a.wa::before, html .mbar a.wa::after { animation: none; } }
/* 2026-10-14 (pedido del equipo): tarjetas oscuras por tono. Mensajería y cobranza en verde esmeralda; inventario, automatización
   y dashboard en tres tonos distintos (ámbar, violeta y rosa). Antes eran tarjetas claras. Versión anterior: archivo/portada-cauxe02/mapa-tonos-v1/ */
.em-card.em-api.em-esm { --tc: #34d399; --tc2: #10b981; --tbg1: #052e22; --tbg2: #064e3b; --tbg3: #03241b; --tl: #a7f3d0; }
.em-card.em-api.em-amb { --tc: #fbbf24; --tc2: #f59e0b; --tbg1: #2a1a05; --tbg2: #3f2a08; --tbg3: #1f1404; --tl: #fde68a; }
.em-card.em-api.em-vio { --tc: #a78bfa; --tc2: #8b5cf6; --tbg1: #1b1240; --tbg2: #2a1b5e; --tbg3: #140d30; --tl: #ddd6fe; }
.em-card.em-api.em-ros { --tc: #f472b6; --tc2: #ec4899; --tbg1: #2e0a20; --tbg2: #4a0f33; --tbg3: #22071a; --tl: #fbcfe8; }
.em-card.em-api:is(.em-esm, .em-amb, .em-vio, .em-ros), [data-theme="light"] .em-card.em-api:is(.em-esm, .em-amb, .em-vio, .em-ros) {
  background: linear-gradient(160deg, var(--tbg1), var(--tbg2) 60%, var(--tbg3)) padding-box,
    conic-gradient(from var(--em-a), color-mix(in srgb, var(--tc) 22%, transparent), var(--tc), var(--tc2), color-mix(in srgb, var(--tc) 22%, transparent) 40%, color-mix(in srgb, var(--tc) 22%, transparent)) border-box;
  color: color-mix(in srgb, var(--tl) 70%, #cbd5e1); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--tc) 55%, transparent);
}
.em-api:is(.em-esm, .em-amb, .em-vio, .em-ros) .em-arr { color: var(--tc); }
.em-api:is(.em-esm, .em-amb, .em-vio, .em-ros) .em-ic { color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); border-color: color-mix(in srgb, var(--tc) 40%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 40%, transparent); }
.em-api:is(.em-esm, .em-amb, .em-vio, .em-ros):hover .em-ic { background: var(--tc); color: var(--tbg1); }
.em-api:is(.em-esm, .em-amb, .em-vio, .em-ros):hover { border-color: transparent; box-shadow: 0 22px 48px -16px color-mix(in srgb, var(--tc) 70%, transparent); }
.em-api:is(.em-esm, .em-amb, .em-vio, .em-ros)::before { background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--tc) 18%, transparent) 50%, transparent 70%); }
.eco-map .em-card.em-api:is(.em-esm, .em-amb, .em-vio, .em-ros) a:not(.em-go), [data-theme] .eco-map .em-card.em-api:is(.em-esm, .em-amb, .em-vio, .em-ros) a:not(.em-go) { color: var(--tl); text-decoration-color: color-mix(in srgb, var(--tl) 45%, transparent); }
.em-card.em-api.em-amb { animation-delay: -1.5s; } .em-card.em-api.em-vio { animation-delay: -3s; } .em-card.em-api.em-ros { animation-delay: -4.5s; } .em-card.em-api.em-esm + .em-esm { animation-delay: -3s; }

/* 2026-10-14 (pedido del equipo): Wischat. El chat cierra la venta con un aviso verde; los canales de alrededor también se ven
   en celular (debajo del teléfono, en una cuadrícula ordenada) y hacen un remolino cada ~10 s (main.js).
   Versión anterior: archivo/portada-cauxe02/wischat-chat-remolino-v1/ */
.msg.done { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #ecfdf5; background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 0 0 3px rgba(16, 185, 129, .22), 0 10px 26px -10px rgba(16, 185, 129, .8); }
.msg.done .done-ic { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #047857; font-size: .7rem; }
.ai-nodes .channel { will-change: transform; }
@media (max-width: 900px) {
  #wischat .split > .reveal:first-child { display: flex; flex-direction: column; align-items: center; }
  #wischat .ai-nodes { position: relative; inset: auto; order: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 7px; margin-top: 46px; width: 100%; max-width: 420px; padding: 0 4px; box-sizing: border-box; }
  #wischat .ai-nodes .channel { display: inline-flex; position: relative; left: auto; right: auto; top: auto; bottom: auto; justify-content: center; white-space: nowrap; font-size: .7rem; padding: 6px 8px 6px 9px; animation: none; }
  #wischat .ai-nodes .channel::after { display: none; }
  #wischat .ai-nodes .ai-hub { top: -34px; }
  #wischat .phone { order: 1; }
}
@media (max-width: 380px) { #wischat .ai-nodes .channel { font-size: .66rem; } }

/* 2026-10-14 (pedido del equipo): dashboard NeoCRM 360 para todo tipo de empresa. Pestañas por tipo de empresa, línea de
   crecimiento en los azules de la X (antes esmeralda → morado → azul: archivo/portada-cauxe02/dashboard-tonos-v1/) que se redibuja en cada cambio, punto vivo al final y barras del proceso en los mismos tonos.
   Versión anterior: archivo/portada-cauxe02/dashboard-neocrm-v1/ */
.dash-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); }
.dash-tabs button { flex: 1; min-width: max-content; padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 .8rem var(--font-body); cursor: pointer; transition: color .3s, background .3s, box-shadow .3s; }
.dash-tabs button:hover { color: var(--text); }
.dash-tabs button[aria-selected="true"] { color: #fff; background: linear-gradient(120deg, #0b2a6b, #1466d6 55%, #1f8fff); box-shadow: 0 8px 20px -10px rgba(31, 143, 255, .8), inset 0 0 0 1px rgba(56, 189, 248, .35); }
.dash-live { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 0 0 rgba(56, 189, 248, .6); animation: dashLive 2s ease-out infinite; vertical-align: middle; }
@keyframes dashLive { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, .6); } 80%, 100% { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); } }
#dash .chart path.line { filter: drop-shadow(0 4px 10px rgba(31, 143, 255, .5)); }
#dash .dash-dot { fill: #1f8fff; stroke: #fff; stroke-width: 2; opacity: 0; transition: opacity .4s 2.2s; vector-effect: non-scaling-stroke; }
#dash.in .dash-dot { opacity: 1; animation: dashDot 1.8s ease-in-out 2.4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dashDot { 50% { transform: scale(1.5); } }
#dash .stage-fill { background: linear-gradient(90deg, #1466d6, #1f8fff 60%, #38bdf8); box-shadow: 0 0 12px -2px rgba(31, 143, 255, .6); }
#dash .kpi .up { color: #38bdf8; } /* 2026-10-14: antes verde */
#dash .kpi, #dash .dv-title, #dash .stage-val { transition: opacity .3s ease, transform .3s ease; }
#dash.dv-swap .kpi, #dash.dv-swap .dv-title, #dash.dv-swap .stage-val { opacity: 0; transform: translateY(4px); }
#dash.dv-swap .chart path.line { stroke-dashoffset: 800; transition: none; }
#dash.dv-swap .chart path.area { opacity: 0; transition: none; }
#dash.dv-swap .stage-fill { width: 0; transition: none; }
[data-theme="light"] .dash-tabs { background: rgba(15, 35, 75, .04); }
@media (max-width: 560px) { .dash-tabs { display: grid; grid-template-columns: 1fr 1fr; } .dash-tabs button { padding: 7px 8px; font-size: .74rem; } }
#dash .chart { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .dash-live, #dash.in .dash-dot { animation: none; } }
/* 2026-10-14 (2.ª vuelta, pedido del equipo): Inventario, Automatización y Dashboard en un mismo tono, en la gama azul y verde de la
   marca (antes ámbar, violeta y rosa: archivo/portada-cauxe02/mapa-tonos-v2/). Borde de luz que va de verde agua a azul. */
.em-card.em-api.em-bv { --tc: #2dd4bf; --tc2: #3b82f6; --tbg1: #062a33; --tbg2: #0b3a52; --tbg3: #061e33; --tl: #99f6e4; }
.em-card.em-api.em-bv, [data-theme="light"] .em-card.em-api.em-bv {
  background: linear-gradient(160deg, var(--tbg1), var(--tbg2) 60%, var(--tbg3)) padding-box,
    conic-gradient(from var(--em-a), rgba(45, 212, 191, .22), #2dd4bf, #3b82f6, rgba(59, 130, 246, .22) 40%, rgba(45, 212, 191, .22)) border-box;
  color: color-mix(in srgb, var(--tl) 70%, #cbd5e1); box-shadow: 0 18px 40px -18px rgba(45, 212, 191, .5);
}
.em-api.em-bv .em-arr { color: var(--tc); }
.em-api.em-bv .em-ic { color: var(--tc); background: rgba(45, 212, 191, .14); border-color: rgba(45, 212, 191, .4); box-shadow: 0 0 18px rgba(45, 212, 191, .4); }
.em-api.em-bv:hover .em-ic { background: linear-gradient(135deg, #2dd4bf, #3b82f6); color: #062a33; }
.em-api.em-bv:hover { border-color: transparent; box-shadow: 0 22px 48px -16px rgba(59, 130, 246, .6); }
.em-api.em-bv::before { background: linear-gradient(110deg, transparent 30%, rgba(45, 212, 191, .18) 50%, transparent 70%); }
.eco-map .em-card.em-api.em-bv a:not(.em-go), [data-theme] .eco-map .em-card.em-api.em-bv a:not(.em-go) { color: var(--tl); text-decoration-color: rgba(153, 246, 228, .45); }
.em-card.em-api.em-bv:nth-child(7) { animation-delay: -2s; } .em-card.em-api.em-bv:nth-child(8) { animation-delay: -4s; }
/* 2026-10-14 (pedido del equipo: nada cortado): en celular la tarjeta de cifras se salía por la derecha porque
   "Desarrollo 360" no podía partirse y ensanchaba la primera columna. Ahora las dos columnas miden lo mismo y la frase
   puede ir en dos líneas. Antes: archivo/portada-cauxe02/libro-negocios-v1/pro.css */
@media (max-width: 720px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats > div { padding: 18px 16px; min-width: 0; }
  .stat-num.stat-word { white-space: normal; line-height: 1.1; }
  .stat-num { font-size: clamp(1.4rem, 6.4vw, 1.9rem); }
}

/* 2026-10-14 (scroll-fx.js): en celular una línea vertical une los pasos de implementación y se dibuja con el scroll */
@media (max-width: 640px) {
  .steps.has-vline > .step { padding-left: 84px; }
  .steps.has-vline .step-dot { position: absolute; left: 18px; top: 22px; margin: 0; }
  .steps.has-vline::before, .steps.has-vline::after { content: ""; position: absolute; left: 40px; top: 45px; bottom: 90px; width: 2px; border-radius: 2px; pointer-events: none; }
  .steps.has-vline::before { background: rgba(148, 180, 255, .14); }
  .steps.has-vline::after { background: linear-gradient(180deg, #3B82F6, #22D3EE); box-shadow: 0 0 10px rgba(34, 211, 238, .6); transform-origin: top; transform: scaleY(var(--sp, 0)); }
  .steps.has-vline > .step { z-index: 1; }
}

/* 2026-10-14 (pedido del equipo): "Qué conecta Cauxe" con colores más profesionales, las 8 tarjetas en la misma paleta azul.
   Sin esmeralda ni azul-verde, y el cian neón pasa a azul corporativo. Versión anterior en archivo/portada-cauxe02/mapa-tonos-v3/ */
.em-card.em-api, [data-theme="light"] .em-card.em-api { background: linear-gradient(160deg, #0c1a3a, #102a5c 60%, #0a1530) padding-box, conic-gradient(from var(--em-a), rgba(59, 130, 246, .18), #93c5fd, #3b82f6, rgba(59, 130, 246, .18) 40%, rgba(59, 130, 246, .18)) border-box; box-shadow: 0 18px 40px -20px rgba(37, 99, 235, .45); }
.em-api .em-arr { color: #93c5fd; }
.em-api .em-ic { color: #93c5fd; background: rgba(59, 130, 246, .14); border-color: rgba(147, 197, 253, .35); box-shadow: none; }
.em-api:hover .em-ic { background: #3b82f6; color: #fff; }
.em-api::before { background: linear-gradient(110deg, transparent 30%, rgba(147, 197, 253, .12) 50%, transparent 70%); }
.em-api:hover { box-shadow: 0 22px 48px -18px rgba(37, 99, 235, .6); }
.eco-map .em-card.em-api a:not(.em-go), [data-theme] .eco-map .em-card.em-api a:not(.em-go) { color: #bfdbfe; text-decoration-color: rgba(191, 219, 254, .45); }
.em-tabs { border-color: rgba(147, 197, 253, .16); }
@keyframes emTab { 0%, 30% { color: #fff; background: rgba(255, 255, 255, .09); box-shadow: inset 0 2px 0 #60a5fa; } 36%, 100% { color: #8a9bc2; background: transparent; box-shadow: inset 0 2px 0 transparent; } }
.em-card.em-api:nth-child(2) { animation-delay: -.75s; } .em-card.em-api:nth-child(3) { animation-delay: -1.5s; } .em-card.em-api:nth-child(4) { animation-delay: -2.25s; }
.em-card.em-api:nth-child(5) { animation-delay: -3s; } .em-card.em-api:nth-child(6) { animation-delay: -3.75s; } .em-card.em-api:nth-child(7) { animation-delay: -4.5s; } .em-card.em-api:nth-child(8) { animation-delay: -5.25s; }

/* 2026-10-14 (pedido del equipo): motion graphics "17 herramientas → 1 cauce" en El problema (assets/js/cauce-mg.js).
   Panel azul noche como la X; herramientas sueltas en gris pizarra, resultados en azul de la X con neón cian. */
.cauce-mg { position: relative; margin: 28px 0 34px; aspect-ratio: 2 / 1; max-height: 560px; width: 100%; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 60% 70% at 60% 52%, rgba(31, 143, 255, .16), transparent 70%), linear-gradient(160deg, #0a1838 0%, #060d22 60%, #040916 100%);
  box-shadow: 0 30px 70px -40px rgba(6, 20, 60, .8), inset 0 0 0 1px rgba(56, 160, 255, .18); }
.cauce-mg::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(124, 199, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 199, 255, .06) 1px, transparent 1px); background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); }
.cauce-mg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmg-l { position: absolute; top: 5%; margin: 0; font: 600 13px/1.3 var(--font-body); color: #9fb3d6; letter-spacing: .01em; }
.cmg-l b { display: block; font: 700 11px/1 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: #7cc7ff; margin-bottom: 5px; }
.cmg-l1 { left: 4%; } .cmg-l1 b { color: #8a9ab8; }
.cmg-l2 { right: 4%; text-align: right; opacity: 0; }
.cmg-tool, .cmg-out { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity; pointer-events: none; }
.cmg-tool { padding: 6px 11px; border-radius: 9px; font: 600 12px/1 var(--font-mono, monospace); color: #c7d2e6; background: rgba(30, 41, 66, .92); border: 1px solid rgba(148, 163, 184, .28); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7); transition: border-color .4s, color .4s; }
.cmg-tool.flow { color: #dbeeff; border-color: rgba(56, 189, 248, .7); background: rgba(14, 50, 120, .92); }
.cmg-out { opacity: 0; padding: 9px 14px; border-radius: 12px; font: 700 13.5px/1 var(--font-display); color: #fff; background: linear-gradient(120deg, #0b2a6b, #1466d6 60%, #1f8fff); border: 1px solid rgba(56, 189, 248, .45); transition: box-shadow .5s; }
.cmg-out.on { box-shadow: 0 0 0 1px rgba(56, 189, 248, .5), 0 10px 26px -8px rgba(31, 143, 255, .75); }
.cmg-x { position: absolute; left: 0; top: 0; height: auto; transform-origin: 50% 42%; pointer-events: none; scale: var(--p, 1);
  filter: drop-shadow(0 0 calc(10px + 30px * var(--g, 0)) rgba(31, 143, 255, calc(.25 + var(--g, 0)))); }
@media (max-width: 639px) {
  .cauce-mg { aspect-ratio: 5 / 8; max-height: none; margin: 22px 0 28px; border-radius: 20px; }
  .cmg-l { top: 3%; font-size: 12px; } .cmg-l1 { left: 50%; transform: translateX(-50%); text-align: center; width: 92%; }
  .cmg-l1 b { display: inline; margin: 0 6px 0 0; }
  .cmg-l2 { top: 3%; left: 50%; right: auto; transform: translateX(-50%); text-align: center; width: 92%; }
  .cmg-l2 b { display: inline; margin: 0 6px 0 0; }
  .cmg-tool { font-size: 10.5px; padding: 5px 8px; }
  .cmg-out { font-size: 11.5px; padding: 7px 10px; }
}

/* 2026-10-14 (pedido del equipo): "Qué conecta Cauxe" en degradado del azul más fuerte al gris, tarjeta por tarjeta; cada una
   crece y se enciende (con su botón) al pasar por el centro con el scroll y se abre al tocarla con el diferenciador.
   Anterior: archivo/portada-cauxe02/mapa-tarjetas-v4/ */
.em-grid > .em-card:nth-child(1) { --c1: #1a6ff0; --c2: #0b2a6b; }
.em-grid > .em-card:nth-child(2) { --c1: #1762d8; --c2: #0c2762; }
.em-grid > .em-card:nth-child(3) { --c1: #1d56bd; --c2: #0e245a; }
.em-grid > .em-card:nth-child(4) { --c1: #244b9f; --c2: #112250; }
.em-grid > .em-card:nth-child(5) { --c1: #2e4584; --c2: #152045; }
.em-grid > .em-card:nth-child(6) { --c1: #39426c; --c2: #181e3a; }
.em-grid > .em-card:nth-child(7) { --c1: #42475d; --c2: #1b1f2e; }
.em-grid > .em-card:nth-child(8) { --c1: #4b5060; --c2: #1e2129; }
.em-card.em-api, [data-theme="light"] .em-card.em-api { background: linear-gradient(160deg, var(--c1), var(--c2) 75%) padding-box, conic-gradient(from var(--em-a), rgba(59, 130, 246, .18), #93c5fd, #3b82f6, rgba(59, 130, 246, .18) 40%, rgba(59, 130, 246, .18)) border-box; cursor: pointer;
  transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .3s, box-shadow .45s, scale .5s var(--ease), filter .45s; transition-delay: calc(var(--i) * 70ms), calc(var(--i) * 70ms), 0s, 0s, 0s, 0s; }
.em-card.em-api .em-tabs i, .em-card.em-api p, .em-card.em-api { color: #dbe6f7; }
.em-card.lit, .em-card.open { scale: 1.035; z-index: 2; filter: brightness(1.12) saturate(1.08); box-shadow: 0 0 0 1px rgba(125, 199, 255, .55), 0 22px 50px -18px rgba(31, 143, 255, .7); }
.em-card.lit .em-ic { background: #1f8fff; color: #fff; box-shadow: 0 0 16px rgba(31, 143, 255, .7); }
.em-btn { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(147, 197, 253, .45); background: rgba(255, 255, 255, .06); color: #cfe3ff; transition: background .35s, box-shadow .35s, transform .35s var(--ease), border-color .35s; }
.em-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.em-card.lit .em-btn { background: #1f8fff; border-color: #7cc7ff; color: #fff; box-shadow: 0 0 0 4px rgba(31, 143, 255, .2), 0 0 18px rgba(31, 143, 255, .8); }
.em-card.open .em-btn { transform: rotate(45deg); background: #1f8fff; color: #fff; }
.em-btn:focus-visible { outline: 2px solid #7cc7ff; outline-offset: 2px; }
.em-card.em-api > b { padding-right: 40px; }
.em-more { position: relative; z-index: 2; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(147, 197, 253, .22); cursor: default; animation: emMore .45s var(--ease); }
.em-more[hidden] { display: none; }
@keyframes emMore { from { opacity: 0; transform: translateY(-6px); } }
.em-lead { margin: 0 0 10px; color: #fff !important; font-weight: 600; font-size: .92rem; line-height: 1.45; }
.em-why { margin: 0 0 6px; font: 700 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #7cc7ff !important; }
.em-more ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; }
.em-more li { position: relative; padding-left: 16px; font-size: .86rem; line-height: 1.45; color: #dbe6f7; }
.em-more li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 8px #1f8fff; }
.em-more li b { display: inline !important; color: #fff; font-weight: 700; margin: 0 !important; }
.em-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.eco-map .em-card .em-act a.em-link { color: #bfe0ff; font-weight: 600; font-size: .85rem; text-decoration: none; }
.eco-map .em-card .em-act a.btn { color: #03101f; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .em-card.lit { scale: 1; filter: none; } .em-more { animation: none; } }
.eco-map .em-more ul { grid-template-columns: 1fr; }
.em-card.em-api .em-go { display: inline; }
.em-card.em-api .em-go .em-arr { display: inline-block; vertical-align: -2px; margin-left: 6px; }
@media (min-width: 1001px) { .em-grid > .em-card.open { grid-column: span 2; } }
/* 2026-10-15 (pedido del equipo): anillo en círculo completo con todas las píldoras visibles; la de abajo (al frente) brilla e
   invita a abrirla, y la X crece y se enciende cada 8 s (antes cada 20 s), sin cambiar su diseño.
   Versión anterior: archivo/portada-cauxe02/anillo-circulo-v1/ */
.orb-word { transition: border-color .35s, box-shadow .35s, background .35s; }
.orb-word.is-front { border-color: rgba(52, 211, 153, .9); background: linear-gradient(160deg, rgba(29, 78, 216, .96), rgba(8, 15, 34, .96));
  box-shadow: 0 0 0 1px rgba(52, 211, 153, .4), 0 0 34px rgba(16, 185, 129, .55), 0 18px 44px -14px rgba(37, 99, 235, .8), inset 0 1px 0 rgba(255, 255, 255, .14); }
.orb-word.is-front::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 48%, transparent 66%); background-size: 260% 100%; animation: orbSheen 2.6s ease-in-out infinite; }
@keyframes orbSheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }
.orb-x { animation: orbFloat 6s ease-in-out infinite, orbIgnite 8s 2s ease-in-out infinite; }
@keyframes orbIgnite {
  0%, 74%, 100% { scale: 1; filter: drop-shadow(0 18px 30px rgba(11, 31, 77, .35)) drop-shadow(0 0 18px rgba(56, 189, 248, .35)) brightness(1); }
  82% { scale: 1.14; filter: drop-shadow(0 18px 30px rgba(11, 31, 77, .35)) drop-shadow(0 0 34px rgba(56, 189, 248, .95)) drop-shadow(0 0 70px rgba(37, 99, 235, .7)) brightness(1.25) saturate(1.2); }
  90% { scale: 1.06; filter: drop-shadow(0 18px 30px rgba(11, 31, 77, .35)) drop-shadow(0 0 26px rgba(56, 189, 248, .8)) drop-shadow(0 0 50px rgba(37, 99, 235, .5)) brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) { .orb-x, .orb-word.is-front::before { animation: none; } }
/* 2026-10-15 (pedido del equipo): la X siempre en el centro exacto del anillo; ecosistema.js fija su posición y tamaño.
   Antes: translate(-50%, -54%) y flotaba 8 px arriba y abajo. Versión anterior: archivo/portada-cauxe02/anillo-x-centro-v1/ */
.orb-x { transform: translate(-50%, -50%); transform-origin: 0 0; } /* así al crecer cada 8 s lo hace desde su centro */
@keyframes orbFloat { 0%, 100% { translate: 0 0; } } /* ya no flota: queda fija en el centro */
/* 2026-10-15 (pedido del equipo): los botones del dashboard cambian de color. El encendido lleva un degradado de azules y cian
   de Cauxe que fluye y una barra que se llena hasta que pasa al siguiente (cada 3 s). Antes: degradado fijo.
   Versión anterior: archivo/portada-cauxe02/dashboard-botones-v1/ */
.dash-tabs button { position: relative; overflow: hidden; }
.dash-tabs button[aria-selected="true"] { background: linear-gradient(110deg, #0047ab, #1466d6, #1f8fff, #22d3ee, #1f8fff, #1466d6, #0047ab); background-size: 300% 100%; animation: dashTabFlow 3s ease-in-out infinite alternate; }
.dash-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgba(255, 255, 255, .85); transform-origin: 0 50%; animation: dashTabBar 3s linear; }
@keyframes dashTabFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes dashTabBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .dash-tabs button[aria-selected="true"], .dash-tabs button[aria-selected="true"]::after { animation: none; } }
/* 2026-10-15: el punto final de la línea del dashboard cambia de tono junto con la línea (azules y cian de Cauxe). */
#dash.in .dash-dot { animation: dashDot 1.8s ease-in-out 2.4s infinite, dashDotTone 8s linear infinite; }
@keyframes dashDotTone { 0%, 100% { fill: #1466d6; } 25% { fill: #1f8fff; } 50% { fill: #22d3ee; } 75% { fill: #38bdf8; } }
@media (prefers-reduced-motion: reduce) { #dash.in .dash-dot { animation: none; } }
/* 2026-10-15 (pedido del equipo): logo oficial del SRI a color (tomado de sri.gob.ec) en la tarjeta de Facturación y en el
   sello "certificada por el SRI", sobre fondo blanco para que se lea igual en tema claro y oscuro. Anterior: archivo/portada-cauxe02/logo-sri-v1/ */
.flip-front .mi.mi-sri, [data-theme="light"] .flip-front .mi.mi-sri { background: #fff; box-shadow: 0 0 0 1px rgba(15, 35, 75, .08), 0 6px 16px -8px rgba(0, 0, 0, .35); }
.mi.mi-sri img { width: 74%; height: auto; display: block; }
.badge-sri.has-logo::before { display: none; }
.badge-sri .sri-logo { width: auto; height: 20px; padding: 3px 6px; margin-right: 8px; border-radius: 6px; background: #fff; vertical-align: middle; box-sizing: content-box; }
/* 2026-10-15 (pedido del equipo): comparativa interactiva con colores estratégicos. Cauxe en azules que brillan, ✓ en verde,
   parcial en ámbar, ✗ en gris rojizo; marcador con barras; filas que entran una a una y se abren con "Con Cauxe: …".
   En celular cada fila es una tarjeta. Lógica en assets/js/compare.js. Anterior: archivo/portada-cauxe02/comparativa-v1/ */
.cmp-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 18px; }
.cmp-bar { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 4px 6px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255, 255, 255, .03); }
.cmp-bar .cmp-name { font: 700 .92rem var(--font-display); color: var(--muted); }
.cmp-bar .cmp-num { font: 800 1.5rem var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.cmp-bar small { color: var(--muted); font-size: .78rem; }
.cmp-track { grid-column: 1 / -1; order: 9; height: 8px; border-radius: 99px; background: rgba(148, 163, 184, .16); overflow: hidden; }
.cmp-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #64748b, #94a3b8); transition: width 1.2s cubic-bezier(.22, 1, .36, 1) .2s; }
#comparativa.cmp-in .cmp-track i { width: var(--cmp); }
.cmp-bar.us { border-color: rgba(56, 189, 248, .55); background: linear-gradient(135deg, rgba(0, 71, 171, .35), rgba(31, 143, 255, .14)); box-shadow: 0 0 0 1px rgba(56, 189, 248, .25), 0 14px 40px -18px rgba(31, 143, 255, .8); }
.cmp-bar.us .cmp-name { color: #7dd3fc; }
.cmp-bar.us .cmp-track i { background: linear-gradient(90deg, #0047ab, #1f8fff, #22d3ee); box-shadow: 0 0 14px rgba(34, 211, 238, .7); }
/* Tabla */
#comparativa .table-wrap { border-radius: 20px; }
#comparativa .compare .cmp-row td { transition: background .3s, color .3s; }
#comparativa .compare .cmp-row { cursor: pointer; outline: none; }
#comparativa .compare .cmp-row:focus-visible td:first-child { box-shadow: inset 3px 0 0 #22d3ee; }
#comparativa .compare .cmp-row.open td { background: rgba(31, 143, 255, .08); }
#comparativa .compare .cmp-row.open td.us { background: linear-gradient(180deg, rgba(31, 143, 255, .32), rgba(34, 211, 238, .16)); }
#comparativa .compare td.yes { color: #10b981; font-weight: 800; font-size: 1.1rem; }
#comparativa .compare td.partial { color: #f59e0b; font-weight: 700; }
#comparativa .compare td.no { color: #94a3b8; opacity: .75; }
#comparativa .compare td.us.yes { color: #fff; }
#comparativa .compare thead th.us { position: relative; color: #fff; background: linear-gradient(120deg, #0047ab, #1466d6, #1f8fff, #22d3ee, #1f8fff, #0047ab); background-size: 300% 100%; animation: cmpUs 6s ease-in-out infinite alternate; letter-spacing: .02em; }
#comparativa .compare td.us { background: linear-gradient(180deg, rgba(0, 71, 171, .28), rgba(31, 143, 255, .14)); box-shadow: inset 1px 0 0 rgba(56, 189, 248, .35), inset -1px 0 0 rgba(56, 189, 248, .35); }
#comparativa .compare td.us.yes { text-shadow: 0 0 12px rgba(34, 211, 238, .9); }
@keyframes cmpUs { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.cmp-why { display: block; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; font-size: .84rem; line-height: 1.45; color: #cbd5e1; transition: max-height .4s ease, opacity .3s ease, margin .3s ease; }
.cmp-why b { color: #38bdf8; }
#comparativa .cmp-row.open .cmp-why { max-height: 120px; opacity: 1; margin-top: 8px; }
/* Entrada: filas una a una y ✓ de Cauxe que aparecen con un golpe de luz */
#comparativa .cmp-row { opacity: 0; transform: translateY(14px); transition: opacity .5s ease calc(var(--i) * 110ms + .2s), transform .5s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 110ms + .2s); }
#comparativa.cmp-in .cmp-row { opacity: 1; transform: none; }
#comparativa.cmp-in .cmp-row td.us.yes { animation: cmpPop .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * 110ms + .5s) both; }
@keyframes cmpPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
[data-theme="light"] .cmp-bar { background: #fff; }
[data-theme="light"] .cmp-bar.us { background: linear-gradient(135deg, #0047ab, #1466d6 60%, #1f8fff); }
[data-theme="light"] .cmp-bar.us .cmp-name, [data-theme="light"] .cmp-bar.us .cmp-num, [data-theme="light"] .cmp-bar.us small { color: #fff; }
[data-theme="light"] .cmp-why { color: #334155; }
[data-theme="light"] .cmp-why b { color: #0047ab; }
[data-theme="light"] #comparativa .compare td.us { background: linear-gradient(180deg, rgba(0, 71, 171, .1), rgba(31, 143, 255, .05)); }
[data-theme="light"] #comparativa .compare td.us.yes { color: #0047ab; text-shadow: none; }
[data-theme="light"] #comparativa .compare td.yes { color: #059669; }
[data-theme="light"] #comparativa .compare td.partial { color: #b45309; }
[data-theme="light"] #comparativa .compare .cmp-row.open td.us { background: linear-gradient(180deg, rgba(31, 143, 255, .2), rgba(34, 211, 238, .1)); }
/* Celular: cada fila es una tarjeta con Cauxe destacado y los demás como etiquetas */
@media (max-width: 720px) {
  .cmp-board { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cmp-bar { padding: 10px 12px; }
  .cmp-bar { grid-template-columns: 1fr auto; }
  .cmp-bar .cmp-name { grid-column: 1 / -1; font-size: .84rem; }
  .cmp-bar .cmp-num { font-size: 1.2rem; }
  .cmp-bar small { justify-self: start; }
  #comparativa .table-wrap { overflow: visible; border: 0; background: none; }
  #comparativa table.compare { min-width: 0; display: block; }
  #comparativa .compare thead { display: none; }
  #comparativa .compare tbody { display: grid; gap: 10px; }
  #comparativa .compare .cmp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255, 255, 255, .03); }
  [data-theme="light"] #comparativa .compare .cmp-row { background: #fff; }
  #comparativa .compare .cmp-row td { border: 0; padding: 6px 8px; border-radius: 10px; font-size: .8rem; background: rgba(148, 163, 184, .08); }
  #comparativa .compare .cmp-row td::before { content: attr(data-label); display: block; font: 600 .68rem var(--font-body); color: var(--muted); margin-bottom: 2px; text-shadow: none; }
  #comparativa .compare .cmp-row td:first-child { grid-column: 1 / -1; background: none; padding: 0 0 4px; font: 700 .95rem var(--font-display); color: var(--text); }
  #comparativa .compare .cmp-row td:first-child::before { content: none; }
  #comparativa .compare .cmp-row td.us { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .45); }
  #comparativa .compare .cmp-row td.us::before { margin: 0; color: #7dd3fc; font-weight: 700; font-size: .8rem; }
  #comparativa .compare .cmp-row td.us { font-size: 1.15rem; padding: 8px 12px; }
  [data-theme="light"] #comparativa .compare .cmp-row td.us::before { color: #0047ab; }
  #comparativa .cmp-row .cmp-why { max-height: none; opacity: 1; margin-top: 6px; font: 400 .8rem/1.4 var(--font-body); }
  #comparativa .compare .cmp-row.open td { background: rgba(148, 163, 184, .08); }
  #comparativa .compare .cmp-row.open td:first-child { background: none; }
}
@media (prefers-reduced-motion: reduce) { #comparativa .cmp-row { opacity: 1; transform: none; transition: none; } #comparativa .compare thead th.us, #comparativa.cmp-in .cmp-row td.us.yes { animation: none; } .cmp-track i { transition: none; } }
/* 2026-10-15 (pedido del equipo: "elimina totalmente esta sección del celular"): "Resultados que se notan" (#beneficios) no se
   muestra en celular; en computadora sigue igual. Versión anterior: archivo/portada-cauxe02/beneficios-celular-v1/ */
@media (max-width: 720px) { #beneficios { display: none !important; } }
/* 2026-10-15 (pedido del equipo): el chat de Wischat se lee como un chat real: el cliente a la izquierda,
   Cauxe (IA) responde a la derecha. Antes las dos burbujas iban a la izquierda: archivo/portada-cauxe02/chat-lados-v1/ */
.msg.bot { align-self: flex-end; border-top-left-radius: 16px; border-top-right-radius: 4px; }
.msg.in { border-top-left-radius: 4px; }
/* 2026-10-15 (pedido del equipo): reverso de las tarjetas de Cauxe Finance con "Así lo automatiza Cauxe". */
.finance .flip-back .fb-tag { display: inline-block; margin-bottom: 6px; font: 600 .62rem var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #a5f3fc; }
.finance .flip-back p { font-size: .9rem; line-height: 1.45; }
.finance .flip { min-height: 214px; }
@media (max-width: 720px) { .finance .flip { min-height: 236px; } .finance .flip-back { padding: 14px; } .finance .flip-back h3 { margin-bottom: 4px; font-size: .88rem; } .finance .flip-back p { font-size: .8rem; line-height: 1.4; } }
.finance .flip-back h3, [data-theme="light"] .finance .flip-back h3 { color: #67e8f9; }
/* 2026-10-15 (pedido del equipo): el bloque "Hablemos" deja la foto de montaña oscura y usa la paleta de Cauxe
   (azul de marca a cian, con brillos y la X de fondo), igual en tema claro y oscuro. Antes: archivo/portada-cauxe02/contacto-diseno-v1/ */
.contact-info { isolation: isolate; background: linear-gradient(150deg, #1d4ed8 0%, #1240a8 38%, #0b2a6b 70%, #0a1a3f 100%); }
.contact-info::before { background: url("../img/x-cauxe-neon.webp") right -60px bottom -40px / 340px auto no-repeat; opacity: .16; }
.contact-info::after { background: radial-gradient(circle at 92% 6%, rgba(34, 211, 238, .45), transparent 42%), radial-gradient(circle at 0% 100%, rgba(56, 189, 248, .28), transparent 50%); }
.contact-info .eyebrow { color: #a5f3fc; }
.contact-info .eyebrow::before { background: #67e8f9; }
.contact-info h2 .grad-text { background: linear-gradient(100deg, #a5f3fc, #67e8f9 50%, #e0f2fe); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contact-info > p, .contact-info .meet-note { color: #dbeafe; }
.contact-info .meet-modes span, [data-theme="light"] .contact-info .meet-modes span { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(6px); }
.contact-info .meet-modes svg { color: #a5f3fc; }
.contact-info .contact-list small { color: #bfdbfe; }
.contact-info .contact-list a, .contact-info .contact-list div { color: #fff; }
.contact-info .ci { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #a5f3fc; }
.contact-info .sys-status { color: #d1fae5; background: rgba(16, 185, 129, .18); border-color: rgba(110, 231, 183, .45); }
@media (max-width: 720px) { .contact-info::before { background-size: 220px auto; background-position: right -40px bottom -30px; } }
.form > *, .form fieldset { min-width: 0; min-inline-size: 0; } /* 2026-10-15: en celular el formulario se salía 13 px por la derecha */
@media (max-width: 560px) { #contact-form .btn { white-space: normal; max-width: 100%; text-align: center; padding-inline: 16px; } }
/* 2026-10-15 (pedido del equipo): en celular se quita la tarjeta de la asesora Valeria y el botón flotante de llamada,
   porque estorbaban; la barra inferior (Llamar · WhatsApp · Demo gratis) ya cubre el contacto. En computadora siguen igual.
   Antes se mostraban (reglas en archivo/portada-cauxe02/asesora-celular-v1/). */
@media (max-width: 640px) { html .greet, html .dock { display: none !important; } }
/* 2026-10-15 (pedido del equipo): la opción de llamar solo en celular. En computadora (mouse) se ocultan todos los botones y
   enlaces de llamada y el botón flotante de llamada con su menú; los números del bloque de contacto quedan como texto
   (son también WhatsApp). Antes se mostraban en todas partes: archivo/portada-cauxe02/llamar-solo-celular/ */
@media (hover: hover) and (pointer: fine) {
  a[href^="tel:"]:not(.contact-list a), .fab-call, .fab-menu { display: none !important; }
  .contact-list a[href^="tel:"] { pointer-events: none; color: inherit; text-decoration: none; }
}

/* 2026-10-15 (pedido del equipo: tonos más bonitos en "17 herramientas → 1 cauce"): cada herramienta y cada resultado
   toma el color de su afluente (--c, lo pone cauce-mg.js); fondo con brillos cian y violeta. Antes: archivo/portada-cauxe02/cauce-mg-tonos-v1/ */
.cauce-mg { background: radial-gradient(ellipse 45% 55% at 60% 52%, rgba(34, 211, 238, .16), transparent 70%), radial-gradient(ellipse 40% 50% at 22% 70%, rgba(139, 92, 246, .12), transparent 70%), radial-gradient(ellipse 40% 45% at 88% 25%, rgba(45, 212, 191, .1), transparent 70%), linear-gradient(160deg, #0a1838 0%, #070f28 55%, #050a1c 100%); }
.cmg-tool.flow { color: #eaf6ff; border-color: var(--c, #38bdf8); background: color-mix(in srgb, var(--c, #38bdf8) 22%, #0b1733); box-shadow: 0 0 16px -4px var(--c, #38bdf8); }
.cmg-out { background: linear-gradient(120deg, #0b2a6b, #1466d6 55%, color-mix(in srgb, var(--c, #1f8fff) 80%, #1f8fff)); border-color: color-mix(in srgb, var(--c, #38bdf8) 70%, transparent); }
.cmg-out.on { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c, #38bdf8) 60%, transparent), 0 10px 28px -8px var(--c, #1f8fff); }
.cmg-l2 b { background: linear-gradient(90deg, #22d3ee, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 2026-10-21 (pedido del equipo): en "Una oportunidad entra. Cauxe hace el resto." cada número se enciende en su
   propio color (--cc lo pone ecosistema.js), y el punto, la línea y el texto de abajo toman el color de la etapa activa.
   Antes todo en azul cobalto: archivo/portada-cauxe02/tipografia-y-colores-v1/ */
.chain-track li.done .cn { border-color: var(--cc, var(--cob)); background: color-mix(in srgb, var(--cc, var(--cob)) 78%, #000); }
.chain-track li.on .cn { border-color: #fff; background: var(--cc, var(--cob)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cc, var(--cob)) 28%, transparent), 0 0 32px color-mix(in srgb, var(--cc, var(--cob)) 85%, transparent); }
.chain-track li:not(.on):not(.done) .cn { border-color: color-mix(in srgb, var(--cc, var(--cob)) 50%, transparent); }
.chain-line { background: linear-gradient(90deg, #3b82f6, var(--cc, var(--cob)) calc(var(--p) * 100%), rgba(47, 107, 255, .2) calc(var(--p) * 100%)); }
.chain-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc, var(--cob)) 40%, transparent), 0 0 22px 4px var(--cc, var(--cob)); transition: box-shadow .3s; }
.chain-cap b, [data-theme="light"] .chain-cap b { color: color-mix(in srgb, var(--cc, var(--cob)) 85%, var(--text)); }
@media (max-width: 860px) {
  .chain-line { background: linear-gradient(180deg, #3b82f6, var(--cc, var(--cob)) calc(var(--p) * 100%), rgba(47, 107, 255, .2) calc(var(--p) * 100%)); }
}

/* 2026-10-21 (pedido del equipo: "más llamativa"): brillo que cruza cada resultado, frase "Con Cauxe" más grande
   y la X con más resplandor. Antes: archivo/portada-cauxe02/tipografia-y-colores-v1/ */
.cmg-out { overflow: hidden; }
.cmg-out::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); }
.cmg-out.on::after { animation: cmgShine 2.6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes cmgShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.cmg-l2 { font-size: 15px; color: #e6f3ff; }
.cmg-l2 b { font-size: 12px; }
.cmg-x { filter: drop-shadow(0 0 calc(14px + 40px * var(--g, 0)) rgba(34, 211, 238, calc(.3 + var(--g, 0)))) drop-shadow(0 0 calc(30px * var(--g, 0)) rgba(139, 92, 246, calc(.6 * var(--g, 0)))); }
@media (max-width: 639px) { .cmg-l2 { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .cmg-out.on::after { animation: none; } }

/* 2026-10-21 (pedido del equipo): algunos títulos toman el estilo de "+Ventas, cartera al día y atención 24/7.":
   inicio en degradado azul, centro oscuro y final gris que se desvanece (.fade-text), letra apretada y pesada.
   Títulos anteriores: archivo/portada-cauxe02/titulos-estilo-ventas-v1/ */
.tri-title { font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
.page-hero h1 .fade-text { padding-bottom: .06em; }

/* 2026-10-21 (pedido del equipo): FluidGlass en el título final (assets/js/fluid-glass.js). El lienzo dibuja el título
   encima del h2 real, con espacio arriba y abajo para que la lente se mueva. Antes: archivo/portada-cauxe02/pillnav-fluidglass-v1/ */
.fg-wrap { position: relative; width: min(100%, 980px); padding: clamp(40px, 7vw, 90px) clamp(8px, 3vw, 40px); cursor: none; touch-action: pan-y; }
.fg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fg-wrap.fg-on .closer-title, .fg-wrap.fg-on .closer-title .gradient-text { color: transparent; -webkit-text-fill-color: transparent; background: none; animation: none; }
.fg-wrap .closer-title { margin: 0; }
@media (hover: none) { .fg-wrap { cursor: auto; } }

/* 2026-10-21 (pedido del equipo): chat del agente de ventas (Dialogflow CX Messenger, assets/js/chat.js).
   Colores y letra de Cauxe, modo oscuro/claro, y encima del botón de WhatsApp para no chocar con él ni con la tarjeta de Valeria. */
df-messenger.cx-chat {
  position: fixed; z-index: 82; right: 20px; bottom: 100px;
  --df-messenger-font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --df-messenger-primary-color: #2563eb;
  --df-messenger-chat-bubble-background: #2563eb;
  --df-messenger-chat-bubble-icon-color: #fff;
  --df-messenger-chat-bubble-size: 56px;
  --df-messenger-chat-window-height: min(540px, calc(100vh - 230px));
  --df-messenger-chat-window-width: 380px;
  --df-messenger-chat-border-radius: 18px;
  --df-messenger-titlebar-background: linear-gradient(120deg, #0b1733, #1e3a8a);
  --df-messenger-titlebar-font-color: #fff;
  --df-messenger-titlebar-subtitle-font-color: #bfdbfe;
  --df-messenger-titlebar-icon-width: 28px; --df-messenger-titlebar-icon-height: 28px;
  --df-messenger-chat-background: #0b1226;
  --df-messenger-font-color: #e6edf9;
  --df-messenger-message-bot-background: #16213f;
  --df-messenger-message-user-background: #2563eb;
  --df-messenger-message-user-font-color: #fff;
  --df-messenger-message-bot-font-color: #e6edf9;
  --df-messenger-message-border-radius: 14px;
  --df-messenger-input-box-background: #0f1a36;
  --df-messenger-input-background: #0f1a36;
  --df-messenger-input-font-color: #e6edf9;
  --df-messenger-input-placeholder-font-color: #8fa3c7;
  --df-messenger-send-icon-color: #22d3ee;
  --df-messenger-send-icon-color-hover: #60a5fa;
  --df-messenger-chips-background: #16213f;
  --df-messenger-chips-font-color: #e6edf9;
  --df-messenger-chips-border-color: rgba(125,211,252,.35);
  --df-messenger-card-background: #16213f;
  --df-messenger-card-font-color: #e6edf9;
  --df-messenger-link-font-color: #67e8f9;
}
html[data-theme="light"] df-messenger.cx-chat {
  --df-messenger-chat-background: #f3f6fc;
  --df-messenger-font-color: #0b1733;
  --df-messenger-message-bot-background: #fff;
  --df-messenger-message-bot-font-color: #0b1733;
  --df-messenger-input-box-background: #fff;
  --df-messenger-input-background: #fff;
  --df-messenger-input-font-color: #0b1733;
  --df-messenger-input-placeholder-font-color: #64748b;
  --df-messenger-send-icon-color: #2563eb;
  --df-messenger-chips-background: #fff;
  --df-messenger-chips-font-color: #0b1733;
  --df-messenger-chips-border-color: #c7d6f2;
  --df-messenger-card-background: #fff;
  --df-messenger-card-font-color: #0b1733;
  --df-messenger-link-font-color: #1d4ed8;
}
@media (max-width: 860px) { df-messenger.cx-chat { right: 14px; bottom: 162px; } }
@media (max-width: 640px) { df-messenger.cx-chat { right: 12px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); --df-messenger-chat-bubble-size: 52px; --df-messenger-chat-window-width: calc(100vw - 24px); --df-messenger-chat-window-height: calc(100svh - 240px); } }
html.cx-open .greet { display: none !important; }
html.eco-modal-open df-messenger.cx-chat { opacity: 0; pointer-events: none; }