/* Portada "Un día que fluye" (cauxe.02, 2026-10-01): vuelo ligado al scroll + texto sobre la imagen. */
.vuelo { position: relative; height: 540vh; background: #050914; }
.vuelo-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.vuelo-poster, .vuelo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vuelo-canvas { opacity: 0; transition: opacity .6s ease; }
.vuelo.ready .vuelo-canvas { opacity: 1; }
.vuelo-shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(5,9,20,.55) 100%), linear-gradient(180deg, rgba(5,9,20,.45) 0%, transparent 22%, transparent 70%, rgba(5,9,20,.6) 100%); }
.vuelo-frame i { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(234,241,255,.55); pointer-events: none; }
.vuelo-frame i:nth-child(1) { top: 92px; left: 24px; border-top-width: 1px; border-left-width: 1px; }
.vuelo-frame i:nth-child(2) { top: 92px; right: 24px; border-top-width: 1px; border-right-width: 1px; }
.vuelo-frame i:nth-child(3) { bottom: 24px; left: 24px; border-bottom-width: 1px; border-left-width: 1px; }
.vuelo-frame i:nth-child(4) { bottom: 24px; right: 24px; border-bottom-width: 1px; border-right-width: 1px; }
.vuelo-line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.06); }
.vuelo-line span { display: block; width: 100%; height: calc(var(--vp, 0) * 100%); background: linear-gradient(180deg, #3b82f6, #22d3ee); box-shadow: 0 0 12px rgba(34,211,238,.7); }
.vuelo-ring { position: absolute; right: 40px; bottom: 40px; width: 40px; height: 40px; transform: rotate(-90deg); }
.vuelo-ring circle { fill: none; stroke: rgba(234,241,255,.18); stroke-width: 1; }
.vuelo-ring .arc { stroke: #22d3ee; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--vp, 0) * 100); }
.vuelo-tag { position: absolute; left: 56px; bottom: 50px; font: 500 11px/1 var(--font-mono); letter-spacing: .28em; text-transform: uppercase; color: rgba(234,241,255,.8); transition: opacity .4s ease; }
.vt { position: absolute; margin: 0; color: #eaf1ff; text-transform: uppercase; pointer-events: none; opacity: 0; will-change: transform, opacity, filter;
  font: 300 clamp(36px, 6vw, 96px)/.95 var(--font-display); letter-spacing: -.01em; text-shadow: 0 2px 30px rgba(5,9,20,.45); max-width: 12ch; }
.vt-a { left: clamp(24px, 6vw, 96px); bottom: clamp(90px, 16vh, 160px); }
.vt-b { right: clamp(24px, 6vw, 96px); top: clamp(110px, 20vh, 200px); text-align: right; }
.vt-end { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; max-width: none; padding: 0 16px; font-size: inherit; text-transform: none; }
.vt-end.on { pointer-events: auto; }
.vt-end-title { margin: 0; font: 300 clamp(40px, 6.5vw, 108px)/.95 var(--font-display); text-transform: uppercase; }
.vt-end-sub { margin: 22px auto 30px; font: 400 clamp(15px, 1.4vw, 19px)/1.5 var(--font-body); color: #c4d3ef; text-transform: none; }
.vt-end-actions { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: center; }
.vt-wa { font: 600 .82rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #eaf1ff; }
.vt-wa:hover { color: #22d3ee; }
@media (max-width: 720px) {
  .vuelo { height: 420vh; }
  .vt-a, .vt-b { left: 20px; right: 20px; text-align: left; max-width: none; }
  .vt-a, .vt-b { top: 96px; bottom: auto; }
  .vuelo-tag { left: 24px; bottom: 40px; }
  .vuelo-ring { right: 20px; bottom: 28px; }
  .vuelo-frame i:nth-child(n) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vuelo { height: auto; }
  .vuelo-stage { position: relative; height: 100vh; }
  .vuelo-canvas, .vuelo-line, .vuelo-ring, .vuelo-tag, .vt:not(.vt-end) { display: none; }
  .vt-end { opacity: 1; pointer-events: auto; }
}

/* Apertura con el concepto (2026-10-01): sistemas que se unen, en lugar de la palabra CAUXE. Logo al cierre. */
.vt-intro { opacity: 1; left: 0; right: 0; top: 50%; transform: translateY(-50%); max-width: none; text-align: center; padding: 0 16px; font-size: inherit; text-transform: none; }
.vt-mods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-bottom: 26px; }
.vt-mods span { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(125,211,252,.45); background: rgba(5,9,20,.38); backdrop-filter: blur(8px);
  font: 500 clamp(11px, 1vw, 13px)/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: #eaf1ff;
  opacity: 0; transform: translateY(14px); animation: vtMod .7s cubic-bezier(.2,.7,.2,1) forwards; }
.vt-mods span:nth-child(2) { animation-delay: .25s; } .vt-mods span:nth-child(3) { animation-delay: .5s; }
.vt-mods span:nth-child(4) { animation-delay: .75s; } .vt-mods span:nth-child(5) { animation-delay: 1s; }
.vt-intro-title { display: block; font: 300 clamp(38px, 6.2vw, 104px)/.95 var(--font-display); text-transform: uppercase; opacity: 0; animation: vtMod 1s 1.3s cubic-bezier(.2,.7,.2,1) forwards; }
.vt-intro-sub { display: block; margin-top: 18px; font: 400 clamp(15px, 1.4vw, 19px)/1.5 var(--font-body); color: #c4d3ef; opacity: 0; animation: vtMod 1s 1.7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes vtMod { to { opacity: 1; transform: none; } }
.vt-logo { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px; font: 700 clamp(34px, 4vw, 56px)/1 var(--font-display); letter-spacing: -.04em; text-transform: none; }
.vt-logo svg { width: 1.2em; height: 1.2em; }
@media (prefers-reduced-motion: reduce) {
  .vt-intro { display: none; }
  .vt-mods span, .vt-intro-title, .vt-intro-sub { animation: none; opacity: 1; transform: none; }
}

/* Textos funcionales del vuelo (2026-10-01): etiqueta del módulo + lo que hace, en cada tramo. */
.vt-beat { max-width: 15ch; text-transform: none; font-size: clamp(30px, 4.4vw, 70px); line-height: 1.02; font-weight: 400; letter-spacing: -.02em; }
.vt-beat .vt-lab { display: block; margin-bottom: 14px; font: 500 clamp(11px, 1vw, 13px)/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: #67e8f9; text-shadow: 0 1px 10px rgba(5,9,20,.9), 0 0 2px rgba(5,9,20,.8); }
.vt-beat .vt-line { display: block; }
.vt-b.vt-beat { max-width: 14ch; }
@media (max-width: 720px) { .vt-beat { font-size: clamp(28px, 8vw, 40px); max-width: none; } }

/* v4 (2026-10-01): el nombre del módulo va en grande y lo que hace debajo, para que se entienda qué es cada parte de CAUXE. */
.vt-beat { max-width: 16ch; font: 600 clamp(32px, 4.6vw, 76px)/1 var(--font-display); letter-spacing: -.02em; text-transform: none; }
.vt-beat .vt-lab { margin: 0; font: inherit; letter-spacing: inherit; text-transform: none; color: #eaf1ff; text-shadow: 0 2px 30px rgba(5,9,20,.6); }
.vt-beat .vt-line { margin-top: 16px; max-width: 30ch; font: 400 clamp(16px, 1.5vw, 21px)/1.45 var(--font-body); color: #d6e2f7; text-shadow: 0 1px 12px rgba(5,9,20,.9); }
.vt-b.vt-beat .vt-line { margin-left: auto; }
.vt-beat .vt-lab::before { content: ""; display: block; width: 44px; height: 2px; margin-bottom: 18px; background: linear-gradient(90deg, #3b82f6, #22d3ee); }
.vt-b.vt-beat .vt-lab::before { margin-left: auto; }
@media (max-width: 720px) {
  .vt-beat { font-size: clamp(28px, 8.4vw, 40px); max-width: none; }
  .vt-b.vt-beat .vt-line, .vt-b.vt-beat .vt-lab::before { margin-left: 0; }
}
.vt-beat::before { content: ""; position: absolute; inset: -40px -60px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(5,9,20,.55), rgba(5,9,20,.25) 60%, transparent); }

/* v5 (2026-10-01): diferenciadores. Eyebrow con el área, beneficio en grande y una línea de apoyo. */
.vt-beat { max-width: 17ch; }
.vt-beat .vt-eye { display: block; margin-bottom: 16px; font: 500 clamp(11px, 1vw, 13px)/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: #67e8f9; text-shadow: 0 1px 10px rgba(5,9,20,.9); }
.vt-beat .vt-lab::before { display: none; }
.vt-beat .vt-eye::before { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 2px; margin-right: 12px; background: linear-gradient(90deg, #3b82f6, #22d3ee); }
.vt-end .vt-end-title { font-size: clamp(32px, 4.8vw, 80px); line-height: 1.02; }

/* v6 (2026-10-01): cierre solo con el logo, limpio, sin fondo ni brillo. */
.vt-end-logo .vt-logo { margin: 0; font-size: clamp(56px, 8vw, 128px); gap: .22em; }
/* Imagen más limpia: menos velo oscuro sobre el video y un fondo más suave detrás del texto. */
.vuelo-shade { background: radial-gradient(130% 95% at 50% 45%, transparent 50%, rgba(5,9,20,.32) 100%), linear-gradient(180deg, rgba(5,9,20,.32) 0%, transparent 18%, transparent 78%, rgba(5,9,20,.42) 100%); }
.vt-beat::before { background: radial-gradient(closest-side, rgba(5,9,20,.42), rgba(5,9,20,.16) 60%, transparent); }

/* v7 (2026-10-02): animación a la mitad de duración y cierre con «Contáctanos» sobre el satélite. */
.vuelo { height: 270vh; }
@media (max-width: 720px) { .vuelo { height: 210vh; } }
.vt-end-cta { top: auto; bottom: clamp(70px, 12vh, 130px); transform: none; }
.vt-end-cta .vt-end-title { margin-bottom: 22px; font-size: clamp(28px, 3.6vw, 56px); text-transform: none; font-weight: 600; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
/* La tarjeta de la asesora no aparece mientras corre la animación de la portada. */
body.en-vuelo .greet { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
/* v10 (2026-10-02): CAUXE grande al inicio, tipos de negocio como botones y subtítulo del cierre. */
.vt-hero { max-width: 20ch; }
.vt-hero .vt-brand { display: block; margin-bottom: 10px; font: 800 clamp(56px, 8.4vw, 132px)/.9 var(--font-display); letter-spacing: -.03em; color: #fff; text-shadow: 0 4px 40px rgba(5,9,20,.55); }
.vt-hero .vt-lab { font-size: clamp(24px, 3vw, 46px); line-height: 1.08; }
.vt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 34em; }
.vt-chips span { padding: 7px 14px; border-radius: 999px; font: 500 clamp(12px, 1vw, 15px)/1.2 var(--font-body); color: #eaf1ff; background: rgba(59,130,246,.22); border: 1px solid rgba(147,197,253,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vt-hero .vt-line { margin-top: 16px; font-weight: 600; color: #fff; }
.vt-end-cta .vt-end-sub { margin: -8px auto 22px; max-width: 34ch; font: 400 clamp(15px, 1.4vw, 20px)/1.45 var(--font-body); color: #d6e2f7; text-shadow: 0 1px 12px rgba(5,9,20,.9); }
@media (max-width: 720px) {
  .vt-hero .vt-brand { font-size: clamp(48px, 15vw, 72px); }
  .vt-hero .vt-lab { font-size: clamp(22px, 6.4vw, 30px); }
  .vt-chips { gap: 6px; margin-top: 14px; }
  .vt-chips span { padding: 6px 11px; font-size: 12px; }
}
.vt-end-cta::before { content: ""; position: absolute; inset: -50px 12%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(5,9,20,.62), rgba(5,9,20,.3) 65%, transparent); pointer-events: none; }
/* v8 (2026-10-02): vuelo original más largo y etiqueta con el negocio de cada escena. */
.vuelo { height: 460vh; }
@media (max-width: 720px) { .vuelo { height: 360vh; } }
.vuelo-tag { top: clamp(84px, 13vh, 120px); bottom: auto; left: clamp(24px, 6vw, 96px); padding: 9px 16px; border-radius: 999px; font: 600 clamp(12px, 1vw, 14px)/1 var(--font-body); letter-spacing: .04em; text-transform: none; color: #eaf1ff; background: rgba(59,130,246,.24); border: 1px solid rgba(147,197,253,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.vuelo-tag:empty { padding: 0; border: 0; }
.vuelo-tag::before { content: "CAUXE conecta · "; color: #93c5fd; }
.vuelo-tag:empty::before { content: none; }
@media (max-width: 720px) { .vuelo-tag { top: auto; bottom: 92px; left: 20px; } }
/* v13 (2026-10-05, replanteo del equipo): intro de marca limpia, historia operativa de una acción a la vez y cierre que
   converge en CAUXE. Estética mínima: mucho aire, tipografía limpia, luz sutil. La v11-v12 está en archivo/portada-cauxe02/textos-vuelo-v14.html. */
.vuelo { height: 500vh; }
@media (max-width: 720px) { .vuelo { height: 390vh; } }
/* Intro: fondo oscuro sobre el vuelo, solo el título de marca. */
.vuelo-intro { position: absolute; inset: 0; z-index: 1; background: #050914; pointer-events: none; overflow: hidden; }
.vi-glow { position: absolute; left: 50%; top: 50%; width: 70vmax; height: 70vmax; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(59,130,246,.18), rgba(59,130,246,.05) 55%, transparent); animation: vi-breathe 6s ease-in-out infinite; }
.vi-line { position: absolute; left: 50%; top: calc(50% + clamp(70px, 9vw, 130px)); width: min(520px, 70vw); height: 1px; transform: translateX(-50%) scaleX(0); background: linear-gradient(90deg, transparent, #60a5fa, transparent); box-shadow: 0 0 14px rgba(96,165,250,.9); animation: vi-draw 1.8s .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes vi-breathe { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: .8; } }
@keyframes vi-draw { to { transform: translateX(-50%) scaleX(1); } }
.vt-mark { z-index: 2; }
.vm-name { display: block; font: 700 clamp(64px, 11vw, 168px)/.9 var(--font-display); letter-spacing: -.035em; color: #fff; text-shadow: 0 0 60px rgba(59,130,246,.35); }
.vm-sub { display: block; margin-top: clamp(22px, 3vw, 40px); font: 300 clamp(20px, 2.3vw, 34px)/1.25 var(--font-body); letter-spacing: -.005em; color: #c4d3ef; }
.vt-mark .vm-name { animation: vtMod 1.1s .1s cubic-bezier(.2,.7,.2,1) both; }
.vt-mark .vm-sub { animation: vtMod 1.1s .7s cubic-bezier(.2,.7,.2,1) both; }
/* Hilo conductor: "CAUXE conecta · negocio", pequeño. */
.vf-tag { position: absolute; z-index: 3; top: clamp(84px, 13vh, 120px); left: clamp(24px, 6vw, 96px); opacity: 0; transform: translateY(-6px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.vf-tag.on { opacity: 1; transform: none; }
.vf-tag .vuelo-tag { position: static; display: inline-block; opacity: 1 !important; padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 500 clamp(11px, .95vw, 13px)/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(5,9,20,.95); }
.vf-tag .vuelo-tag::before { content: "CAUXE conecta · "; color: #93c5fd; }
/* Historia: la acción anterior (pequeña), la conexión de luz y la acción actual (grande). */
.vf-flow { position: absolute; z-index: 3; left: clamp(24px, 6vw, 96px); right: clamp(24px, 6vw, 96px); bottom: clamp(64px, 12vh, 120px); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.vf-flow.on { opacity: 1; }
.vf-flow::before { content: ""; position: absolute; left: calc(-1 * clamp(24px, 6vw, 96px)); right: 40%; bottom: -60px; height: 260px; z-index: -1; background: radial-gradient(60% 70% at 20% 70%, rgba(5,9,20,.6), transparent 75%); }
.vf-stage { display: flex; align-items: center; gap: 0; min-height: clamp(70px, 9vw, 120px); }
.vf-prev { font: 400 clamp(15px, 1.4vw, 20px)/1 var(--font-body); color: rgba(234,241,255,.55); text-shadow: 0 1px 12px rgba(5,9,20,.95); white-space: nowrap; animation: vf-leave .7s cubic-bezier(.2,.7,.2,1) both; }
.vf-link { position: relative; flex: none; width: clamp(56px, 7vw, 110px); height: 1px; margin: 0 clamp(14px, 1.6vw, 24px); background: rgba(147,197,253,.25); }
.vf-link::before { content: ""; position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, rgba(96,165,250,.2), #93c5fd); box-shadow: 0 0 10px rgba(96,165,250,.9); animation: vf-grow .5s .1s ease-out both; }
.vf-link::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(96,165,250,.95); animation: vf-travel .55s .05s ease-in both; }
.vf-link em { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); white-space: nowrap; font: 500 9px/1 var(--font-mono); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #93c5fd; text-shadow: 0 1px 8px rgba(5,9,20,.95); animation: vf-whisper 2.2s .15s ease both; }
.vf-cur { display: flex; flex-direction: column; gap: 8px; animation: vf-arrive .7s .42s cubic-bezier(.2,.7,.2,1) both; }
.vf-flow.first .vf-cur { animation-delay: .1s; }
.vf-cur b { font: 300 clamp(38px, 4.6vw, 72px)/1 var(--font-display); letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 30px rgba(5,9,20,.6), 0 0 40px rgba(59,130,246,.25); white-space: nowrap; }
.vf-cur small { font: 400 clamp(13px, 1.1vw, 16px)/1.2 var(--font-body); color: #c4d3ef; text-shadow: 0 1px 12px rgba(5,9,20,.95); }
.vf-dots { display: flex; gap: 6px; margin-top: 18px; }
.vf-dots i { width: 14px; height: 2px; border-radius: 2px; background: rgba(234,241,255,.22); transition: background .4s ease, box-shadow .4s ease; }
.vf-dots i.on { background: #60a5fa; box-shadow: 0 0 8px rgba(96,165,250,.8); }
@keyframes vf-leave { from { opacity: 1; transform: translateX(28px) scale(1.5); transform-origin: left center; filter: blur(0); } to { opacity: 1; transform: none; } }
@keyframes vf-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vf-travel { from { left: 0; opacity: 1; } 90% { opacity: 1; } to { left: 100%; opacity: 0; } }
@keyframes vf-whisper { 0% { opacity: 0; } 25%, 70% { opacity: .9; } 100% { opacity: .35; } }
@keyframes vf-arrive { from { opacity: 0; transform: translateX(-18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
/* Cierre: los negocios convergen en una idea y después en la marca. */
.vt-conv .vt-end-title { max-width: 15ch; margin: 0 auto; font-weight: 300; text-transform: none; letter-spacing: -.02em; font-size: clamp(34px, 5vw, 80px); }
.vc-list { display: block; margin-bottom: 22px; font: 500 clamp(10px, .9vw, 12px)/1.6 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: #93c5fd; }
.vt-conv-b .vt-end-title { font-weight: 600; }
.vt-end-cta .vm-name { text-transform: none; }
.vt-end-cta .vt-end-sub { margin-top: 18px; font: 300 clamp(20px, 2.2vw, 32px)/1.3 var(--font-body); color: #eaf1ff; }
@media (max-width: 720px) {
  .vf-flow { left: 20px; right: 20px; bottom: 96px; }
  .vf-stage { flex-direction: column; align-items: flex-start; min-height: 0; }
  .vf-link { width: 1px; height: 30px; margin: 10px 0 10px 8px; }
  .vf-link::before { transform-origin: top; animation-name: vf-grow-y; }
  .vf-link::after { top: 0; left: -3px; margin-left: 0; animation-name: vf-travel-y; }
  .vf-link em { left: 14px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .vf-cur b { font-size: clamp(34px, 10vw, 46px); white-space: normal; }
  .vf-prev { font-size: 15px; }
  .vc-list { letter-spacing: .14em; }
}
@keyframes vf-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vf-travel-y { from { top: 0; opacity: 1; } 90% { opacity: 1; } to { top: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .vuelo-intro, .vt-mark, .vt-conv, .vf-tag, .vf-flow { display: none; }
}
/* v14 (2026-10-05, pedido del equipo): la intro abre con la X de CAUXE del final (fotograma 1176) y el título al lado,
   en lugar del título solo sobre fondo oscuro. */
.vuelo-intro::before { content: ""; position: absolute; inset: 0; background: #050914 url("../vuelo/d/1176.webp?v=9") center / cover no-repeat; transform: translateX(14vw) scale(1.04); animation: vi-push 14s ease-out both; }
.vuelo-intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,9,20,.92) 0%, rgba(5,9,20,.55) 32%, transparent 55%); }
@keyframes vi-push { from { transform: translateX(14vw) scale(1.12); opacity: 0; } 12% { opacity: 1; } to { transform: translateX(14vw) scale(1.04); } }
.vi-glow, .vi-line { display: none; }
.vt-mark { left: clamp(24px, 6vw, 96px); right: auto; width: min(36vw, 520px); padding: 0; text-align: left; }
.vt-mark .vm-name { font-size: clamp(54px, 6.6vw, 112px); }
.vt-mark .vm-sub { margin-top: clamp(14px, 1.6vw, 24px); font-size: clamp(20px, 2vw, 32px); color: #eaf1ff; text-shadow: 0 2px 20px rgba(5,9,20,.9); }
@media (max-width: 720px) {
  .vuelo-intro::before { background-image: url("../vuelo/m/1176.webp?v=9"); transform: none; animation-name: vi-push-m; }
  .vuelo-intro::after { background: linear-gradient(0deg, rgba(5,9,20,.95) 0%, rgba(5,9,20,.7) 24%, transparent 46%); }
  @keyframes vi-push-m { from { transform: scale(1.1); opacity: 0; } 12% { opacity: 1; } to { transform: scale(1); } }
  .vt-mark { top: auto !important; bottom: 92px; left: 20px; right: 20px; width: auto; }
  .vt-mark .vm-name { font-size: clamp(46px, 14vw, 64px); }
  .vt-mark .vm-sub { font-size: 19px; }
}
/* v15 (2026-10-05): escena universal. En lugar de "CAUXE conecta · negocio", arriba va la idea: "Una acción. Todo el proceso." */
.vf-tag.title .vuelo-tag { font: 300 clamp(26px, 3vw, 46px)/1.1 var(--font-display); letter-spacing: -.02em; text-transform: none; }
.vf-tag.title .vuelo-tag::before { content: none; }
@media (max-width: 720px) { .vf-tag.title .vuelo-tag { font-size: 26px; } }
/* 2026-10-05: el equipo pidió quitar las barritas de progreso bajo cada palabra. */
.vf-dots { display: none; }
/* v16 (2026-10-05, pedido del equipo): intro blanca y minimalista en dos momentos seguidos (nunca juntos):
   CAUXE con su frase → zoom continuo a la X → sistema conectado → vuelo. El zoom lo mueve assets/js/vuelo.js (paintIntro).
   La intro v14-v15 (X sobre el planeta) está en archivo/portada-cauxe02/intro-v15-planeta.html. */
.vuelo .vuelo-intro { background: #f9fafc; z-index: 4; }
.vuelo .vuelo-intro::before, .vuelo .vuelo-intro::after { content: none; display: none; }
.vi-f { position: absolute; left: 50%; top: 50%; display: block; will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-composite: intersect; }
.vi-f img { display: block; width: 100%; height: auto; }
.vi-f1 { width: min(100vw, 1672px); margin: calc(min(100vw, 1672px) * -400 / 1672 / 2) 0 0 calc(min(100vw, 1672px) / -2); }
.vi-f2 { width: min(100vw, 1672px, 82vh * 1672 / 520); margin: calc(min(100vw, 1672px, 82vh * 1672 / 520) * -520 / 1672 / 2) 0 0 calc(min(100vw, 1672px, 82vh * 1672 / 520) / -2); opacity: 0; }
/* El título sigue en el HTML (h1 para buscadores y lectores de pantalla), pero lo que se ve es la imagen del momento 1. */
.vuelo .vt-mark { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap; padding: 0; margin: 0; }
@media (max-width: 720px) {
  .vi-f1 { width: 178vw; margin: calc(178vw * -400 / 1672 / 2) 0 0 -89vw; }
  .vi-f2 { width: min(100vw, 86vh * 760 / 1344); margin: calc(min(100vw, 86vh * 760 / 1344) * -1344 / 760 / 2) 0 0 calc(min(100vw, 86vh * 760 / 1344) / -2); }
  .vi-f2 { -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
}
/* La intro ocupa el primer 20% del recorrido; la sección crece para que el vuelo dure lo mismo que antes (500vh / 390vh). */
.vuelo { height: 565vh; }
@media (max-width: 720px) { .vuelo { height: 437vh; } }
.vi-f1 { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 20%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 20%, #000 84%, transparent); }
.vi-f2 { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent); }
@media (max-width: 720px) { .vi-f2 { -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); } }
/* 2026-10-05 (pedido del equipo): el final queda sin textos, solo la imagen y el botón Contáctanos; sin sombra detrás. */
.vt-end-cta::before { content: none; }
/* v17 (2026-10-05, pedido del equipo): zoom físico a la X, fondo blanco puro, sin círculos, máscaras ni viñetas.
   Las posiciones las calcula paintIntro (assets/js/vuelo.js). v16 en archivo/portada-cauxe02/intro-v16/. */
.vuelo .vuelo-intro { background: #fff; }
.vi-f1, .vi-x { position: absolute; left: 0; top: 0; display: block; max-width: none; transform-origin: 0 0; will-change: transform; }
.vi-f1 { width: min(100vw, 1672px); height: auto; margin: 0; -webkit-mask-image: none; mask-image: none; }
.vi-x { width: 985px; height: 818px; transform-origin: 50% 50%; mix-blend-mode: multiply; }
.vi-sys { position: absolute; left: 50%; top: 50%; width: min(100vw, 82vh * 1672 / 520, 1672px); aspect-ratio: 1672 / 520; transform: translate(-50%, -50%); }
.vi-piece { position: absolute; display: block; max-width: none; opacity: 0; will-change: transform, opacity; }
.vi-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vi-lines path { fill: none; stroke: #3b82f6; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px rgba(59,130,246,.45)); }
.vi-lines circle { fill: #3b82f6; opacity: 0; transition: opacity .3s ease; filter: drop-shadow(0 0 4px rgba(59,130,246,.8)); }
.vuelo { height: 589vh; }
@media (max-width: 720px) {
  .vi-f1 { width: 178vw; margin: 0; }
  .vi-sys { width: min(100vw, 86vh * 760 / 1344); aspect-ratio: 760 / 1344; }
  .vuelo { height: 455vh; }
}
/* 2026-10-05 (pedido del equipo): "CAUXE conecta" se queda legible durante la pausa (antes bajaba a .35 a los 2.2 s). */
@keyframes vf-whisper-hold { 0% { opacity: 0; } 30%, 100% { opacity: .9; } }
.vf-link em { animation: vf-whisper-hold 1s .15s ease both; }
/* v19 (2026-10-05, pedido del equipo): "CAUXE conecta" y la palabra un poco más grandes, misma tipografía y estilo; la sección
   es ~20% más larga para que cada negocio tenga tiempo de mostrar todas sus acciones. Antes: 9px, clamp(38px, 4.6vw, 72px), 589vh/455vh. */
@media (min-width: 721px) {
  .vf-link em { font-size: clamp(11px, .85vw, 13px); bottom: 11px; letter-spacing: .2em; }
  .vf-link { width: clamp(72px, 8vw, 130px); }
  .vf-cur b { font-size: clamp(42px, 5.2vw, 82px); }
}
.vuelo { height: 707vh; }
@media (max-width: 720px) { .vuelo { height: 546vh; } .vf-link em { font-size: 11px; } .vf-cur b { font-size: clamp(36px, 11vw, 50px); } }
/* 2026-10-07: la palabra y la X aparecen juntas, ya en su lugar, cuando ambas imágenes cargaron (vuelo.js agrega .vi-ready).
   Antes se veían en su posición sin acomodar durante los primeros segundos. */
.vuelo-intro .vi-f1, .vuelo-intro .vi-x { opacity: 0; transition: opacity .35s ease; }
.vuelo-intro.vi-ready .vi-f1, .vuelo-intro.vi-ready .vi-x { opacity: 1; }

/* 2026-10-07 (pedido del equipo): "Pymes y grandes empresas" pasa a ser lo destacado, en la letra fuerte de la marca;
   "Cauxe se adapta a tu negocio" arriba, más pequeño y sin mayúsculas. Antes: título delgado (300) y etiqueta mono pequeña. */
.vt-conv .vc-lead { margin: 0 0 14px; font: 600 clamp(20px, 2.4vw, 38px)/1.15 var(--font-display); letter-spacing: -.02em; color: #eaf1ff; text-transform: none; text-shadow: 0 2px 18px rgba(5, 9, 20, .85); }
.vt-conv .vt-end-title.vc-big {
  max-width: 14ch; margin: 0 auto; font: 800 clamp(42px, 5.6vw, 96px)/1 var(--font-display); letter-spacing: -.035em; text-transform: none;
  background: linear-gradient(100deg, #ffffff 0%, #dbeafe 30%, #7dd3fc 62%, #67e8f9 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 22px rgba(5, 9, 20, .85)) drop-shadow(0 0 30px rgba(34, 211, 238, .25));
}

/* 2026-10-08 (pedido del equipo): tarjetas del sistema en HTML nítido, estilo Zolutium (antes eran recortes de imagen).
   Las medidas usan --k = 1 px de la composición original, así crecen y se achican junto con la X. */
.vi-sys { container-type: inline-size; --k: calc(100cqw / 1672); }
.vi-cardbox { display: flex; align-items: center; }
.vi-card { box-sizing: border-box; width: 100%; min-height: calc(var(--k) * 112); position: relative; display: flex; align-items: center; gap: calc(var(--k) * 16); padding: calc(var(--k) * 18) calc(var(--k) * 20);
  background: rgba(255,255,255,.92); border: 1px solid rgba(37,99,235,.14); border-radius: calc(var(--k) * 20);
  box-shadow: 0 14px 34px -14px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.05); backdrop-filter: blur(8px); color: #0f172a; font-family: inherit; }
.vi-card .vc-ic { flex: none; display: grid; place-items: center; width: calc(var(--k) * 54); height: calc(var(--k) * 54); border-radius: calc(var(--k) * 15);
  background: linear-gradient(135deg, #2563eb, #38bdf8); box-shadow: 0 8px 18px -8px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.vi-card .vc-ic svg { width: 54%; height: 54%; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vi-card-aut .vc-ic svg path { fill: #fff; stroke: none; }
.vi-card .vc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--k) * 5); }
.vi-card .vc-tx b { font-size: calc(var(--k) * 21); font-weight: 750; letter-spacing: -.01em; line-height: 1.1; color: #0b1324; }
.vi-card .vc-tx small { font-size: calc(var(--k) * 14.5); font-weight: 500; line-height: 1.3; color: #64748b; }
.vi-card .vc-side { flex: none; display: flex; align-items: flex-end; align-self: flex-end; }
.vi-card .vc-side em { position: absolute; top: calc(var(--k) * 14); right: calc(var(--k) * 16); }
.vi-card .vc-side em { font-style: normal; font-size: calc(var(--k) * 12.5); font-weight: 700; color: #1d4ed8; background: #eff6ff;
  border: 1px solid #dbeafe; padding: calc(var(--k) * 3) calc(var(--k) * 9); border-radius: 99px; }
.vi-card .vc-mini { width: calc(var(--k) * 52); height: calc(var(--k) * 42); overflow: visible; }
.vc-mini rect { fill: #bfdbfe; } .vc-mini .hi { fill: #2563eb; stroke: #2563eb; }
.vc-mini .ln { fill: none; stroke: #60a5fa; stroke-width: 2.6; stroke-linecap: round; }
.vc-mini .a1 { fill: #93c5fd; stroke: #fff; stroke-width: 2; } .vc-mini .a2 { fill: #3b82f6; stroke: #fff; stroke-width: 2; } .vc-mini .a3 { fill: #1d4ed8; stroke: #fff; stroke-width: 2; }
.vc-mini .ring { fill: none; stroke: #dbeafe; stroke-width: 6; } .vi-card-fin .vc-mini .hi { fill: none; stroke-width: 6; stroke-linecap: round; }
@media (max-width: 720px) {
  .vi-sys { --k: calc(100cqw / 760); }
  .vi-card { padding: calc(var(--k) * 16) calc(var(--k) * 16); gap: calc(var(--k) * 12); border-radius: calc(var(--k) * 20); }
  .vi-card .vc-ic { width: calc(var(--k) * 50); height: calc(var(--k) * 50); }
  .vi-card { min-height: calc(var(--k) * 104); }
  .vi-card .vc-tx b { font-size: calc(var(--k) * 25); } .vi-card .vc-tx small { font-size: calc(var(--k) * 19); }
  .vi-card .vc-side { display: none; }
  .vi-card .vc-side em { display: none; } .vi-card .vc-mini { width: calc(var(--k) * 44); height: calc(var(--k) * 36); }
}

/* v20 (2026-10-08, pedido del equipo): mensaje breve de cada etapa bajo la etiqueta "CAUXE conecta · negocio". */
.vf-tag::after { content: attr(data-msg); display: block; max-width: min(520px, 80vw); margin-top: 14px; padding-left: 14px; border-left: 2px solid #2f6bff;
  font: 400 clamp(17px, 1.55vw, 24px)/1.35 var(--font-display, inherit); letter-spacing: -.01em; color: #f4f7ff; text-shadow: 0 2px 18px rgba(5,9,20,.75); }
.vf-tag[data-msg=""]::after { content: none; }
/* Red de la fábrica: Cauxe al centro y las áreas del negocio unidas por líneas cobalto con pulsos de datos. */
.vf-net { position: absolute; z-index: 2; right: clamp(120px, 10vw, 170px); top: 50%; width: min(420px, 34vw); aspect-ratio: 4 / 3; transform: translateY(-50%) scale(.96);
  opacity: 0; transition: opacity .8s ease, transform .8s ease; pointer-events: none; }
.vf-net.on { opacity: 1; transform: translateY(-50%); }
.vf-net svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vn-l { fill: none; stroke: rgba(47,107,255,.55); stroke-width: 1.6; }
.vn-p { fill: none; stroke: #7fb0ff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 14 400; stroke-dashoffset: 414; filter: drop-shadow(0 0 4px #2f6bff);
  animation: vn-flow 2.4s linear infinite; }
@keyframes vn-flow { to { stroke-dashoffset: 0; } }
.vn-hub { fill: rgba(10,20,48,.82); stroke: #2f6bff; stroke-width: 2; filter: drop-shadow(0 0 10px rgba(47,107,255,.8)); }
.vn-x { fill: #fff; font: 800 20px/1 var(--font-body, sans-serif); text-anchor: middle; }
.vn-n { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  font: 600 clamp(11px, .85vw, 13px)/1 var(--font-body, sans-serif); color: rgba(226,236,255,.7); background: rgba(8,16,40,.62); border: 1px solid rgba(47,107,255,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color .5s ease, border-color .5s ease, box-shadow .5s ease, background .5s ease; }
.vn-n i { width: 7px; height: 7px; border-radius: 50%; background: rgba(127,176,255,.4); transition: background .5s ease, box-shadow .5s ease; }
.vn-n.on { color: #fff; border-color: #2f6bff; background: rgba(20,45,120,.7); box-shadow: 0 0 18px rgba(47,107,255,.45); }
.vn-n.on i { background: #7fb0ff; box-shadow: 0 0 8px #7fb0ff; }
@media (max-width: 720px) {
  .vf-tag::after { font-size: 16px; margin-top: 10px; max-width: calc(100vw - 48px); }
  .vf-net { right: 50%; top: 23%; width: min(330px, 84vw); transform: translate(50%, 0) scale(.96); }
  .vf-net.on { transform: translate(50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .vn-p { animation: none; } }

/* 2026-10-08 (pedido del equipo): escena "Todos los negocios" entre la X y la playa, y la sección más larga para darle su
   tramo (antes 707vh / 546vh). "Cauxe conecta" más grande (antes 11–13px en mayúsculas mono). Copia en archivo/portada-cauxe02/vuelo-v21/ */
.vuelo { height: 1157vh; } /* 3.ª vuelta (scroll, 9 negocios): antes 947vh / 746vh */
@media (max-width: 720px) { .vuelo { height: 926vh; } }
.vuelo-acc { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 2.4vh, 26px);
  padding: clamp(70px, 10vh, 110px) clamp(16px, 5vw, 80px) clamp(40px, 7vh, 80px); background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(47, 107, 255, .16), transparent 70%), #060010;
  opacity: 0; visibility: hidden; color: #fff; }
.va-eye { margin: 0; font: 600 clamp(11px, 1vw, 14px)/1.4 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: #8fb3ff; text-align: center; }
.va-title { margin: 0; font: 800 clamp(40px, 6.4vw, 104px)/1 var(--font-display); letter-spacing: -.035em; text-align: center;
  background: linear-gradient(100deg, #fff 10%, #c7d8ff 55%, #5b8cff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Escena de negocios, 2.ª vuelta: un negocio a la vez, legible, y ficha con el flujo al tocarlo. */
.vb { --cob: #2f6bff; --esm: 16, 185, 129; justify-content: center; }
.vb .va-title { font-size: clamp(30px, 4vw, 60px); }
.vb-stage { position: relative; width: min(980px, 100%); min-height: clamp(220px, 34vh, 320px); display: grid; place-items: center; }
.vb-biz { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 760px; padding: 28px 34px; text-align: center; border-radius: 22px;
  border: 1px solid rgba(var(--esm), .28); background: radial-gradient(ellipse 80% 90% at 50% 100%, rgba(47, 107, 255, .22), transparent 70%), rgba(10, 14, 40, .6); box-shadow: 0 30px 80px -40px rgba(47, 107, 255, .8);
  transition: opacity .45s ease, transform .45s ease, border-color .3s; }
.vb-biz:hover, .vb-biz:focus-visible { border-color: rgba(var(--esm), .7); }
.vb-biz:focus-visible { outline: 2px solid rgb(var(--esm)); outline-offset: 4px; }
.vb-biz.out { opacity: 0; transform: translateY(-14px); }
.vb-biz.in { animation: vb-in .8s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes vb-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.vb-name { font: 800 clamp(38px, 5.4vw, 84px)/1 var(--font-display); letter-spacing: -.03em; color: #fff; }
.vb-say { font: 400 clamp(17px, 1.6vw, 24px)/1.4 var(--font-display, inherit); color: #dbe6ff; max-width: 40ch; }
.vb-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; font: 600 clamp(13px, 1vw, 15px)/1 var(--font-body, inherit); color: rgb(110, 231, 183); }
.vb-more i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; background: rgba(var(--esm), .18); border: 1px solid rgba(var(--esm), .5); animation: vb-plus 2.4s ease-in-out infinite; }
@keyframes vb-plus { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--esm), .45); } 50% { box-shadow: 0 0 0 8px rgba(var(--esm), 0); } }
.vb-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 980px; }
.vb-dots button { all: unset; cursor: pointer; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(143, 179, 255, .2); font: 600 12px/1 var(--font-body, inherit); color: rgba(219, 230, 255, .55); transition: all .4s ease; }
.vb-dots button:hover { color: #fff; border-color: rgba(143, 179, 255, .5); }
.vb-dots button.on { color: #fff; border-color: var(--cob); background: rgba(47, 107, 255, .28); }
.vb-dots button:focus-visible { outline: 2px solid rgb(var(--esm)); outline-offset: 2px; }
.vb.open .vb-biz { opacity: 0; pointer-events: none; }
.vb-panel { position: absolute; inset: 0; margin: auto; width: min(900px, 100%); height: fit-content; max-height: 100%; overflow: auto; box-sizing: border-box; padding: clamp(20px, 2.6vw, 34px); border-radius: 22px; text-align: left;
  border: 1px solid rgba(var(--esm), .45); background: linear-gradient(160deg, rgba(var(--esm), .16), rgba(10, 16, 46, .94) 45%), #0a1030; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
  opacity: 0; transform: scale(.97); transition: opacity .35s ease, transform .35s ease; }
.vb-panel.in { opacity: 1; transform: none; }
.vb-x { all: unset; position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; font-size: 22px; color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.vb-x:hover { border-color: rgb(var(--esm)); }
.vb-k { font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: rgb(110, 231, 183); }
.vb-panel h3 { margin: 8px 0 6px; font: 800 clamp(28px, 3vw, 42px)/1.05 var(--font-display); color: #fff; }
.vb-lead { margin: 0 0 10px; font-size: clamp(16px, 1.4vw, 20px); color: #eaf1ff; }
.vb-pain { margin: 0 0 18px; font-size: 15px; color: #b9c7e6; }
.vb-pain b { color: #fff; }
.vb-fh { margin: 0 0 12px; font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: #8fb3ff; }
.vb-flow { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 12px; }
.vb-flow li { position: relative; display: flex; align-items: center; opacity: 0; animation: vb-in .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.2s + var(--k) * .35s); }
.vb-flow li span { padding: 10px 16px; border-radius: 12px; font: 700 clamp(13px, 1.1vw, 16px)/1 var(--font-display); color: #fff; background: rgba(47, 107, 255, .22); border: 1px solid rgba(47, 107, 255, .6); text-transform: uppercase; letter-spacing: .03em; }
.vb-flow li + li::before { content: ""; width: clamp(18px, 2.4vw, 34px); height: 2px; margin: 0 4px; background: linear-gradient(90deg, rgba(var(--esm), .25), rgba(var(--esm), .9), rgba(var(--esm), .25)); background-size: 200% 100%; animation: vb-data 2.4s linear infinite; }
@keyframes vb-data { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.vb-act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vb-next { all: unset; cursor: pointer; padding: 10px 16px; border-radius: 999px; font: 600 14px/1 var(--font-body, inherit); color: #fff; border: 1px solid rgba(var(--esm), .55); background: rgba(var(--esm), .12); }
.vb-next:hover { background: rgba(var(--esm), .25); }
@media (max-width: 720px) {
  .vb { gap: 14px; padding-top: 84px; }
  .vb-stage { min-height: 52vh; }
  .vb-biz { padding: 22px 18px; }
  .vb-dots { gap: 6px; }
  .vb-dots button { padding: 6px 10px; font-size: 11px; }
  .vb-flow li span { padding: 8px 11px; }
  .vb-flow li + li::before { width: 12px; }
  .vb-panel { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) { .vb-biz.in, .vb-flow li { animation: none; opacity: 1; } .vb-more i, .vb-flow li + li::before { animation: none; } }
@media (min-width: 721px) {
  .vf-link em { font: 600 clamp(18px, 1.5vw, 24px)/1 var(--font-display); letter-spacing: -.005em; text-transform: none; color: #bcd3ff; bottom: 14px; }
  .vf-link { width: clamp(170px, 15vw, 240px); }
}
@media (max-width: 720px) { .vf-link em { font: 600 17px/1 var(--font-display); letter-spacing: 0; text-transform: none; color: #bcd3ff; } }
/* La ficha y el negocio comparten la misma celda: la escena crece con la ficha y nada queda cortado. */
.vb-stage > .vb-biz, .vb-stage > .vb-panel { grid-area: 1 / 1; }
.vb-panel { position: relative; inset: auto; max-height: none; overflow: visible; }
@media (max-width: 720px) {
  .vb.open .va-eye { display: none; }
  .vb.open .va-title { font-size: 26px; }
  .vb-panel h3 { font-size: 26px; }
  .vb-lead { font-size: 15px; } .vb-pain { font-size: 13.5px; margin-bottom: 12px; }
  .vb-flow { margin-bottom: 14px; }
}

/* 2026-10-08: encabezado minimalista de la escena inicial del vuelo, en la misma letra que "Mensaje" (display 300):
   De inicio a final / Sistema operativo para todo tipo de negocio / PYMES Y GRANDES EMPRESAS, con un detalle cobalto. */
.vf-tag.head .vuelo-tag { display: flex; flex-direction: column; align-items: flex-start; text-transform: none; letter-spacing: 0; }
.vf-tag.head .vuelo-tag::before { content: none; }
.vf-tag.head .vh-a { font: 300 clamp(16px, 1.3vw, 20px)/1.2 var(--font-display); letter-spacing: -.005em; color: rgba(255, 255, 255, .78); }
.vf-tag.head .vh-b { margin-top: 12px; max-width: 18ch; font: 400 clamp(30px, 3.4vw, 54px)/1.06 var(--font-display); letter-spacing: -.025em; color: #fff; text-shadow: 0 2px 30px rgba(5, 9, 20, .55); }
.vf-tag.head .vh-c { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; font: 500 clamp(11px, .85vw, 13px)/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.vf-tag.head .vh-c::before { content: ""; width: 28px; height: 2px; background: #2f6bff; }
.vf-tag.head::after { content: none; }
@media (max-width: 720px) { .vf-tag.head .vh-b { font-size: 28px; } .vf-tag.head .vh-c { letter-spacing: .18em; } }
/* Legibilidad sobre tomas claras: sombra suave detrás del encabezado, sin recuadro. */
.vf-tag.head::before { content: ""; position: absolute; z-index: -1; left: -14vw; top: -120px; width: min(980px, 120vw); height: calc(100% + 220px); pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 30% 45%, rgba(5, 9, 20, .62), rgba(5, 9, 20, .3) 55%, transparent 80%); }
.vf-tag.head .vh-a, .vf-tag.head .vh-c { text-shadow: 0 1px 14px rgba(5, 9, 20, .9); }

/* 2026-10-08 (3.ª vuelta, pedido del equipo): la escena de negocios pasa a tonos claros, sobria y moderna: fondo blanco,
   texto oscuro completo (nunca cortado), detalles en azul cobalto y verde esmeralda. Versión oscura en
   archivo/portada-cauxe02/vuelo-v23-titulo/vuelo-escena-oscura.css */
.vuelo-acc.vb { background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(47, 107, 255, .07), transparent 70%), #f7f9fc; color: #0b1324; }
.vb .va-eye { color: #2f5bd3; }
.vb .va-title { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #0b1324; -webkit-text-fill-color: #0b1324; }
.vb-biz { background: #fff; border: 1px solid #e3e8f2; box-shadow: 0 24px 60px -30px rgba(15, 23, 42, .25), 0 2px 6px rgba(15, 23, 42, .04); }
.vb-biz:hover, .vb-biz:focus-visible { border-color: #0047ab; }
.vb-biz::before { content: ""; display: block; width: 36px; height: 3px; border-radius: 2px; background: #0047ab; margin-bottom: 4px; }
.vb-name { color: #0b1324; overflow-wrap: anywhere; hyphens: none; }
.vb-say { color: #475569; }
.vb-more { color: #047857; }
.vb-more i { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .45); color: #047857; }
.vb-dots button { color: #64748b; border-color: #dfe5ef; background: #fff; }
.vb-dots button:hover { color: #0b1324; border-color: #94a3b8; }
.vb-dots button.on { color: #fff; background: #0047ab; border-color: #0047ab; }
.vb-panel { background: #fff; border: 1px solid #e3e8f2; box-shadow: 0 40px 90px -40px rgba(15, 23, 42, .35); }
.vb-x { color: #0b1324; border-color: #dfe5ef; }
.vb-k { color: #047857; }
.vb-panel h3 { color: #0b1324; }
.vb-lead { color: #1e293b; }
.vb-pain { color: #64748b; } .vb-pain b { color: #0b1324; }
.vb-fh { color: #2f5bd3; }
.vb-flow li span { color: #0b1324; background: #f1f5fd; border-color: #c9d6f2; }
.vb-flow li + li::before { background: linear-gradient(90deg, rgba(16, 185, 129, .2), rgba(16, 185, 129, .85), rgba(16, 185, 129, .2)); background-size: 200% 100%; }
.vb-next { color: #065f46; border-color: rgba(16, 185, 129, .5); background: rgba(16, 185, 129, .08); }
.vb-next:hover { background: rgba(16, 185, 129, .16); }
@media (max-width: 720px) { .vb-name { font-size: clamp(30px, 9vw, 40px); } }
@media (max-width: 720px) { .vb-more { font-size: 12.5px; gap: 8px; } .vb-more i { width: 22px; height: 22px; } }

/* 2026-10-08 (pedido del equipo): texto fijo, pequeño y elegante, arriba durante todo el vuelo. */
.vf-tag.fixed .vuelo-tag { display: flex; flex-direction: column; align-items: flex-start; text-transform: none; letter-spacing: 0; }
.vf-tag.fixed .vuelo-tag::before { content: none; }
.vf-tag.fixed::after { content: none; }
.vf-tag.fixed .vh-k { font: 600 clamp(12px, .9vw, 14px)/1 var(--font-mono); letter-spacing: .28em; text-transform: uppercase; color: #93c5fd; }
.vf-tag.fixed .vh-b { margin-top: 10px; max-width: 24ch; font: 300 clamp(20px, 1.75vw, 28px)/1.2 var(--font-display); letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 18px rgba(5, 9, 20, .85); }
.vf-tag.fixed .vh-c { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font: 500 clamp(10px, .75vw, 12px)/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 12px rgba(5, 9, 20, .9); }
.vf-tag.fixed .vh-c::before { content: ""; width: 22px; height: 1px; background: #2f6bff; }
.vf-tag.fixed::before { content: ""; position: absolute; z-index: -1; left: -14vw; top: -110px; width: min(760px, 110vw); height: calc(100% + 200px); pointer-events: none; background: radial-gradient(55% 55% at 30% 50%, rgba(5, 9, 20, .5), transparent 75%); }
@media (max-width: 720px) { .vf-tag.fixed .vh-b { font-size: 19px; max-width: 20ch; } .vf-tag.fixed .vh-c { letter-spacing: .16em; } }

/* 2026-10-08 (3.ª vuelta, pedido del equipo): escena controlada por scroll, fondo blanco uniforme y cobalto solo como acento. */
.vuelo-acc.vb { background: #fff; color: #0b1324; }
.vb .va-title { color: #0b1324; -webkit-text-fill-color: #0b1324; }
.vb-biz { background: #fff; border: 1px solid #e6eaf1; box-shadow: 0 18px 50px -34px rgba(15, 23, 42, .28); }
.vb-biz:hover, .vb-biz:focus-visible { border-color: rgba(0, 71, 171, .55); }
.vb-biz.out { opacity: 0; transform: translateY(-10px); transition: opacity .28s ease, transform .28s ease; }
.vb-biz.in { animation: vb-in .55s cubic-bezier(.22, 1, .36, 1) both; }
.vb-say { color: #334155; }
.vb-more { color: #0047ab; }
.vb-more i { background: rgba(0, 71, 171, .06); border-color: rgba(0, 71, 171, .35); color: #0047ab; animation: none; }
.vb-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 8px; margin-top: 2px; }
.vb-chips b { padding: 6px 11px; border: 1px solid #dfe5ef; border-radius: 8px; background: #fff; font: 600 clamp(11px, .85vw, 13px)/1 var(--font-mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: #0b1324; }
.vb-chips i { position: relative; width: clamp(12px, 1.6vw, 22px); height: 1px; background: rgba(0, 71, 171, .3); overflow: hidden; }
.vb-chips i::after { content: ""; position: absolute; top: -1px; left: -6px; width: 6px; height: 3px; border-radius: 2px; background: rgba(0, 71, 171, .75); animation: vbChip 2.2s linear infinite; }
@keyframes vbChip { to { left: 100%; } }
.vb-dots button { color: #64748b; border-color: #e3e8f0; background: #fff; }
.vb-dots button.done { color: #334155; border-color: rgba(0, 71, 171, .25); }
.vb-dots button.on { color: #0047ab; background: #fff; border-color: #0047ab; box-shadow: inset 0 0 0 1px #0047ab; }
.vb-bar { width: min(560px, 80%); height: 2px; border-radius: 2px; background: #eef1f6; overflow: hidden; }
.vb-bar i { display: block; height: 100%; background: #0047ab; transform-origin: left; transform: scaleX(0); }
.vb-panel { background: #fff; border: 1px solid #e6eaf1; box-shadow: 0 30px 70px -40px rgba(15, 23, 42, .35); }
.vb-k { color: #0047ab; }
.vb-fh { color: #0047ab; }
.vb-flow li span { color: #0b1324; background: #fff; border-color: #d5deee; }
.vb-flow li + li::before { background: linear-gradient(90deg, rgba(0, 71, 171, .15), rgba(0, 71, 171, .7), rgba(0, 71, 171, .15)); background-size: 200% 100%; }
@media (max-width: 720px) { .vb-chips b { font-size: 10px; padding: 5px 8px; } .vb-chips i { width: 8px; } .vb-dots { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; } .vb-dots::-webkit-scrollbar { display: none; } .vb-dots button { flex: none; } }
@media (prefers-reduced-motion: reduce) { .vb-chips i::after { animation: none; } }
/* 2026-10-08 (pedido del equipo): más color dentro de la escena de negocios, sobre el mismo fondo blanco.
   Versión anterior en archivo/portada-cauxe02/negocios-blanco-v1/vuelo.css */
.vb-biz::before { width: 56px; height: 4px; background: linear-gradient(90deg, #0047ab, #10b981, #7c3aed); }
.vb-name { background: linear-gradient(90deg, #0b1324 0%, #0b1324 55%, #0047ab 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.vb-chips b { border: 0; color: #fff; box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .5); }
.vb-chips b:nth-of-type(5n+1) { background: #0047ab; }
.vb-chips b:nth-of-type(5n+2) { background: #10b981; }
.vb-chips b:nth-of-type(5n+3) { background: #7c3aed; }
.vb-chips b:nth-of-type(5n+4) { background: #0ea5e9; }
.vb-chips b:nth-of-type(5n+5) { background: #f59e0b; }
.vb-chips i { background: linear-gradient(90deg, rgba(0, 71, 171, .5), rgba(16, 185, 129, .5)); }
.vb-chips i::after { background: #10b981; }
.vb-more { margin-top: 8px; padding: 12px 20px 12px 22px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #0047ab, #2f6bff 55%, #10b981); box-shadow: 0 12px 26px -12px rgba(0, 71, 171, .75); transition: transform .25s ease, box-shadow .25s ease; }
.vb-more i { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .55); color: #fff; animation: vb-plus 2.4s ease-in-out infinite; }
.vb-biz:hover .vb-more, .vb-biz:focus-visible .vb-more { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(0, 71, 171, .85); }
.vb-dots button.on { color: #fff; background: linear-gradient(90deg, #0047ab, #2f6bff); border-color: transparent; box-shadow: 0 8px 18px -10px rgba(0, 71, 171, .8); }
.vb-dots button.done { color: #047857; border-color: rgba(16, 185, 129, .45); background: #f0fdf7; }
.vb-bar i { background: linear-gradient(90deg, #0047ab, #10b981, #7c3aed); }
.vb-k { color: #10b981; }
.vb-flow li:nth-child(5n+1) span { background: #0047ab; color: #fff; border-color: #0047ab; }
.vb-flow li:nth-child(5n+2) span { background: #10b981; color: #fff; border-color: #10b981; }
.vb-flow li:nth-child(5n+3) span { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.vb-flow li:nth-child(5n+4) span { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }
.vb-flow li:nth-child(5n+5) span { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.vb-act .btn-primary { background: linear-gradient(90deg, #0047ab, #2f6bff 55%, #10b981); color: #fff; border: 0; box-shadow: 0 12px 26px -12px rgba(0, 71, 171, .75); }
@media (max-width: 720px) { .vb-more { padding: 10px 14px 10px 16px; } }
.vb-act .vb-wa { background: #25d366; color: #fff; border: 0; box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .8); }
.vb-act .vb-wa:hover { background: #1fbe5b; }
/* 2026-10-12 (pedido del equipo): tonos más profesionales (azul marino, cobalto y un acento esmeralda) y más interacción:
   los pasos se encienden en orden como un dato que recorre el flujo, la tarjeta se inclina y una luz sigue al cursor, y el botón
   tiene un brillo que la cruza. Versión de colores vivos en archivo/portada-cauxe02/negocios-color-v2/ */
.vb-stage { perspective: 1400px; }
.vb-biz { position: relative; overflow: hidden; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
  border-color: #e3e8f1; box-shadow: 0 30px 70px -42px rgba(11, 19, 36, .45), 0 1px 2px rgba(11, 19, 36, .05); }
.vb-biz::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(47, 107, 255, .09), transparent 60%); }
.vb-biz:hover::after { opacity: 1; }
.vb-biz > * { position: relative; z-index: 1; }
.vb-biz:hover { border-color: rgba(0, 71, 171, .35); box-shadow: 0 40px 80px -40px rgba(0, 47, 120, .45), 0 1px 2px rgba(11, 19, 36, .05); }
.vb-biz.out { transform: translateY(-10px); }
.vb-biz::before { width: 48px; height: 3px; background: linear-gradient(90deg, #0b1f4d, #0047ab 60%, #10b981); }
.vb-name { background: linear-gradient(100deg, #0b1324 0%, #0b1324 40%, #1d4ed8 50%, #0b1324 60%, #0b1324 100%); background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.vb-biz.in .vb-name { animation: vbShine 1.6s .25s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes vbShine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.vb-say { color: #475569; }
/* Flujo: cada paso entra apagado y se enciende en orden; la línea se llena antes de llegar al siguiente. */
.vb-chips { row-gap: 10px; }
.vb-chips b, .vb-chips b:nth-of-type(n) { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border: 1px solid #d9e1ee; border-radius: 10px; background: #fff; color: #64748b; box-shadow: none;
  transition: transform .25s ease, box-shadow .25s ease; animation: vbLit .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.45s + var(--k) * .42s); }
.vb-chips b em { font-style: normal; font-size: .85em; padding: 3px 5px; border-radius: 5px; background: #eef2f8; color: #64748b; animation: vbLitN .5s ease both; animation-delay: inherit; }
@keyframes vbLit { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; color: #0b1324; border-color: rgba(0, 71, 171, .45); box-shadow: 0 8px 18px -12px rgba(0, 71, 171, .6); } }
@keyframes vbLitN { to { background: #0047ab; color: #fff; } }
.vb-chips b:last-of-type { animation-name: vbLitEnd; }
.vb-chips b:last-of-type em { animation-name: vbLitNEnd; }
@keyframes vbLitEnd { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; color: #fff; background: #0b1f4d; border-color: #0b1f4d; box-shadow: 0 10px 22px -12px rgba(11, 31, 77, .8); } }
@keyframes vbLitNEnd { to { background: #10b981; color: #fff; } }
.vb-biz.in { animation-fill-mode: backwards; }
.vb-chips i, .vb-chips i:nth-of-type(n) { width: clamp(14px, 1.8vw, 26px); height: 2px; border-radius: 2px; background: #e2e8f0; overflow: hidden; }
.vb-chips i::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0047ab, #2f6bff); transform: scaleX(0); transform-origin: left;
  animation: vbFill .42s linear both; animation-delay: calc(.45s + (var(--k) - 1) * .42s + .1s); }
@keyframes vbFill { to { transform: scaleX(1); } }
.vb-chips i::after { top: -1px; height: 4px; background: #10b981; box-shadow: 0 0 8px #10b981; animation-delay: calc(.45s + var(--k) * .42s + .4s); }
/* Botón: tonos cobalto con un brillo que lo cruza cada pocos segundos. */
.vb-more { position: relative; overflow: hidden; background: linear-gradient(90deg, #0b1f4d, #0047ab 55%, #1d5fd6); box-shadow: 0 14px 28px -14px rgba(0, 47, 120, .8); }
.vb-more::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: vbSweep 3.6s 1.4s ease-in-out infinite; }
@keyframes vbSweep { 0% { left: -40%; } 45%, 100% { left: 130%; } }
.vb-more i { background: #10b981; border-color: #10b981; animation: vb-plus 2.4s ease-in-out infinite; transition: transform .3s ease; }
.vb-biz:hover .vb-more i { transform: rotate(90deg); }
/* Píldoras y barra: cobalto sobrio. */
.vb-dots button { transition: color .3s ease, background .3s ease, border-color .3s ease, transform .2s ease; }
.vb-dots button:hover { transform: translateY(-1px); }
.vb-dots button.on { background: #0b1f4d; box-shadow: 0 8px 18px -10px rgba(11, 31, 77, .8); }
.vb-dots button.done { color: #0047ab; border-color: rgba(0, 71, 171, .25); background: #f3f6fc; }
.vb-bar i { background: linear-gradient(90deg, #0b1f4d, #0047ab, #10b981); }
/* Ficha abierta: pasos en la misma familia de color. */
.vb-k { color: #0047ab; }
.vb-flow li:nth-child(n) span { background: #fff; color: #0b1324; border-color: rgba(0, 71, 171, .35); }
.vb-flow li:nth-child(n) span { animation: vbFlowLit .5s ease both; animation-delay: calc(.35s + var(--k) * .35s); }
@keyframes vbFlowLit { to { background: #0047ab; color: #fff; border-color: #0047ab; } }
.vb-flow li:last-child span { animation-name: vbFlowEnd; }
@keyframes vbFlowEnd { to { background: #0b1f4d; color: #fff; border-color: #0b1f4d; box-shadow: 0 0 0 3px rgba(16, 185, 129, .35); } }
.vb-act .btn-primary { background: linear-gradient(90deg, #0b1f4d, #0047ab 55%, #1d5fd6); box-shadow: 0 14px 28px -14px rgba(0, 47, 120, .8); }
@media (max-width: 720px) { .vb-chips b, .vb-chips b:nth-of-type(n) { padding: 5px 8px 5px 6px; gap: 5px; } .vb-chips i, .vb-chips i:nth-of-type(n) { width: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .vb-biz { transform: none; }
  .vb-chips b, .vb-chips b em, .vb-chips i::before, .vb-name, .vb-more::after, .vb-flow li span { animation: none !important; }
  .vb-chips b { color: #0b1324; } .vb-chips i::before { transform: none; } .vb-more::after { display: none; }
}
/* 2026-10-13 (pedido del equipo): en lugar de la X sola con cuatro tarjetas y "ORDENA. CONTROLA. DECIDE.", la intro termina en
   la X con las píldoras girando (la órbita de #ecosistema, movida aquí por vuelo.js). Versión anterior en archivo/portada-cauxe02/intro-x-sola-v1/ */
.vuelo-intro.has-orb .vi-sys { display: none; }
.vi-orb { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 84px 16px 24px; box-sizing: border-box; transform-origin: 50% 45%; }
.vi-orb[hidden] { display: none; }
.vi-orb .eco-stage { width: min(1180px, 100%); }
.vi-orb .orb-say.below { margin-top: 12px; }
.vi-orb .orb-rail { margin-top: 10px; }
@media (max-height: 820px) and (min-width: 721px) { .vi-orb .orb-scene { height: clamp(380px, 60vh, 520px); } } /* 2026-10-14: antes 54vh; anillo-altura-v1 */
@media (max-width: 720px) { .vi-orb { padding-top: 76px; } }
/* La intro siempre es blanca: la órbita usa aquí sus colores claros en ambos temas. */
.vi-orb .eco-stage, [data-theme="light"] .vi-orb .eco-stage { background: transparent; border-color: transparent; }
.vi-orb .eco-stage::before { content: none; }
.vi-orb .orb-say b { color: #0b1a33; }
.vi-orb .orb-say span { color: #334155; }
.vi-orb .orb-rail span { background: #fff; color: #334155; border-color: rgba(0, 71, 171, .2); }
.vi-orb .orb-rail span.on { color: #065f46; background: rgba(16, 185, 129, .12); border-color: #34d399; }
.vi-orb .orb-rail span.hub { color: #fff; }
.vi-orb .orb-rail span.hub { background: linear-gradient(135deg, #0047ab, #10b981); border-color: transparent; }
@media (max-width: 720px) { .vi-orb .orb-rail { display: none; } .vi-orb { justify-content: flex-start; padding-top: 84px; } }
/* 2026-10-13 (pedido del equipo): del hotel al satélite el vuelo se reproduce solo como video en un tramo fijo de 160 vh.
   Antes 1157vh / 926vh (el vuelo avanzaba con el scroll). */
.vuelo { height: 856vh; }
@media (max-width: 720px) { .vuelo { height: 747vh; } }
/* 2026-10-13 (2.ª vuelta, pedido del equipo): la portada completa se reproduce sola como video; ya no necesita recorrido de scroll.
   Antes 856vh / 747vh. */
/* 2026-10-13 (3.ª vuelta, pedido del equipo): vuelve el scroll hasta el hotel; desde el hotel, video. Antes: calc(100svh + 140px)
   con toda la portada como video (archivo/portada-cauxe02/vuelo-v28-todo-video/). */
.vuelo { height: 856vh; }
@media (max-width: 720px) { .vuelo { height: 747vh; } }
/* 2026-10-13 (pedido del equipo): título de la escena de negocios con la solución en lugar de "Todos los negocios". */
.vb .va-title.va-title-sol { max-width: 22ch; margin-inline: auto; text-align: center; font-size: clamp(24px, 3vw, 44px); line-height: 1.12; }
.vb .va-title-sol span { display: block; margin-top: 8px; font-size: .55em; font-weight: 600; letter-spacing: .01em; color: #0047ab; -webkit-text-fill-color: #0047ab; }
@media (max-width: 720px) { .vb .va-title.va-title-sol { font-size: 22px; } }
/* 2026-10-13 (pedido del equipo): la escena de negocios pasa a 3 pasos de scroll controlados (240 vh / 210 vh en vez de 450 / 380).
   Antes 856vh / 747vh (archivo/portada-cauxe02/vuelo-v29-negocios-scroll-libre/). */
.vuelo { height: 646vh; }
@media (max-width: 720px) { .vuelo { height: 577vh; } }
/* 2026-10-13 (pedido del equipo): en pantallas bajas la tarjeta del negocio subía y tapaba "para pymes y grandes empresas".
   Título, tarjeta y espacios se ajustan a la altura de la pantalla para que nada se encime. Antes: archivo/portada-cauxe02/negocios-titulo-espacio-v1/ */
@media (min-width: 721px) {
  .vuelo-acc.vb { justify-content: center; padding: 78px 0 18px; box-sizing: border-box; gap: clamp(10px, 2vh, 22px); }
  .vb .va-title.va-title-sol { font-size: clamp(24px, min(3vw, 4.6vh), 44px); max-width: 26ch; letter-spacing: -.015em; }
  .vb .va-title-sol span { margin-top: .35em; font-size: .52em; }
  .vb-stage { min-height: 0; }
  .vb-biz { gap: clamp(8px, 1.5vh, 14px); padding: clamp(16px, 2.6vh, 28px) clamp(22px, 2.4vw, 34px); }
  .vb-name { font-size: clamp(34px, min(5.4vw, 8.4vh), 84px); }
  .vb-say { font-size: clamp(15px, min(1.6vw, 2.6vh), 24px); }
}
@media (min-width: 721px) and (max-height: 640px) {
  .vb-chips { display: none; }
  .vb-more { margin-top: 2px; padding: 9px 16px 9px 18px; }
}
/* 2026-10-13 (pedido del equipo): se agrega el tramo fijo del anillo de la X (150 vh / 135 vh, 3 pasos de scroll controlados).
   Antes 646vh / 577vh (archivo/portada-cauxe02/vuelo-v30-anillo-scroll-libre/). */
.vuelo { height: 796vh; }
@media (max-width: 720px) { .vuelo { height: 712vh; } }
/* 2026-10-14 (pedido del equipo): la escena de negocios vuelve a avanzar solo con el scroll (360 vh / 340 vh, un negocio cada ~40 vh).
   Antes 796vh / 712vh (archivo/portada-cauxe02/negocios-3-pasos-giro-solo/). */
.vuelo { height: 916vh; }
@media (max-width: 720px) { .vuelo { height: 842vh; } }
/* 2026-10-14 (2.ª vuelta, pedido del equipo): el tramo del anillo crece a 200 vh / 180 vh para que gire despacio.
   Antes 916vh / 842vh (archivo/portada-cauxe02/anillo-scroll-ida-vuelta/). */
.vuelo { height: 966vh; }
@media (max-width: 720px) { .vuelo { height: 887vh; } }
/* 2026-10-14 (pedido del equipo): en celular el diagrama de la X (escena de la fábrica) chocaba con el texto de arriba.
   Ahora empieza debajo de ese texto y su tamaño se ajusta al espacio libre antes de las palabras de abajo.
   Antes: archivo/portada-cauxe02/diagrama-x-celular-v1/ */
@media (max-width: 720px) {
  .vf-net { top: 212px; width: min(330px, 84vw, calc((100svh - 452px) * 1.333)); }
}

/* 2026-10-14 (pedido del equipo: el título negro se veía simple): el nombre del negocio va en degradado de color con brillo y
   cada 10 s cambia de tono (cobalto, esmeralda, índigo, turquesa, rubí), siempre oscuros para leerse sobre fondo claro.
   Un destello recorre la palabra en cada cambio. Versión anterior: archivo/portada-cauxe02/titulo-negocio-color-v1/ */
@property --vb-c1 { syntax: "<color>"; inherits: false; initial-value: #0047ab; }
@property --vb-c2 { syntax: "<color>"; inherits: false; initial-value: #2563eb; }
@property --vb-c3 { syntax: "<color>"; inherits: false; initial-value: #06b6d4; }
.vb-name {
  background-image: linear-gradient(100deg, transparent 0%, transparent 42%, rgba(255, 255, 255, .7) 50%, transparent 58%, transparent 100%),
    linear-gradient(95deg, var(--vb-c1) 0%, var(--vb-c2) 55%, var(--vb-c3) 100%);
  background-size: 250% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--vb-c2) 28%, transparent));
  animation: vbTone 50s linear infinite, vbGlint 10s ease-in-out infinite;
}
.vb-biz.in .vb-name { animation: vbTone 50s linear infinite, vbGlint 10s ease-in-out infinite; }
/* 2026-10-14 (pedido del equipo): el nombre sigue cambiando de color, pero solo en degradados de azul (antes también
   esmeralda, índigo-rosa, turquesa y rubí: archivo/portada-cauxe02/negocios-celular-desplegable-v1/vuelo.css). */
@keyframes vbTone {
  0% { --vb-c1: #0047ab; --vb-c2: #2563eb; --vb-c3: #06b6d4; }
  16% { --vb-c1: #0047ab; --vb-c2: #2563eb; --vb-c3: #06b6d4; }
  20% { --vb-c1: #1e3a8a; --vb-c2: #3b82f6; --vb-c3: #38bdf8; }
  36% { --vb-c1: #1e3a8a; --vb-c2: #3b82f6; --vb-c3: #38bdf8; }
  40% { --vb-c1: #0b1f4d; --vb-c2: #0047ab; --vb-c3: #60a5fa; }
  56% { --vb-c1: #0b1f4d; --vb-c2: #0047ab; --vb-c3: #60a5fa; }
  60% { --vb-c1: #1d4ed8; --vb-c2: #0284c7; --vb-c3: #22d3ee; }
  76% { --vb-c1: #1d4ed8; --vb-c2: #0284c7; --vb-c3: #22d3ee; }
  80% { --vb-c1: #312e81; --vb-c2: #2563eb; --vb-c3: #0ea5e9; }
  96% { --vb-c1: #312e81; --vb-c2: #2563eb; --vb-c3: #0ea5e9; }
  100% { --vb-c1: #0047ab; --vb-c2: #2563eb; --vb-c3: #06b6d4; }
}
@keyframes vbGlint { 0%, 78% { background-position: 100% 0, 0 0; } 96%, 100% { background-position: 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .vb-name, .vb-biz.in .vb-name { animation: none !important; } }

/* 2026-10-14 (pedido del equipo): franja de industrias en loop sobre el vuelo, del hotel al restaurante.
   Vidrio azul noche con un filo de luz cobalto → esmeralda; la franja original sigue debajo del vuelo. */
.vf-ind { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 13px 0;
  background: linear-gradient(180deg, rgba(6,12,28,.42), rgba(6,12,28,.72)); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0; transform: translateY(100%); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.vf-ind::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #3b82f6 25%, #2dd4bf 55%, #10b981 75%, transparent); opacity: .85; }
.vf-ind.on { opacity: 1; transform: none; }
.vf-ind-track { display: flex; gap: 48px; width: max-content; padding-right: 48px; animation: marquee 36s linear infinite; animation-play-state: paused; }
.vf-ind.on .vf-ind-track { animation-play-state: running; }
.vf-ind-track span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: rgba(226,236,255,.9); font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: .01em; }
.vf-ind-track svg { width: 18px; height: 18px; color: #5eead4; filter: drop-shadow(0 0 6px rgba(45,212,191,.45)); }
.vuelo:has(.vf-ind.on) .vuelo-ring { bottom: 64px; transition: bottom .5s ease; }
@media (max-width: 720px) {
  .vf-ind { padding: 10px 0; }
  .vf-ind-track { gap: 32px; padding-right: 32px; animation-duration: 28s; }
  .vf-ind-track span { font-size: .82rem; gap: 8px; }
  .vf-ind-track svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .vf-ind-track { animation: none; } }
/* En celular la barra de Llamar / WhatsApp / Demo ocupa el borde de abajo: la franja va justo encima y los pasos suben un poco. */
@media (max-width: 640px) {
  .vf-ind { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .vuelo:has(.vf-ind) .vf-flow { bottom: 124px; }
  .vuelo:has(.vf-ind.on) .vuelo-ring { opacity: 0; }
}
/* 2026-10-14 (pedido del equipo): en celular se quita el vuelo del hotel al satélite (160 vh menos: 887vh → 727vh).
   Antes: archivo/portada-cauxe02/vuelo-celular-con-video-v1/ */
@media (max-width: 720px) { .vuelo { height: 727vh; } }
/* 2026-10-14 (pedido del equipo): vuelo de computadora como video real a 24 fps, encima del canvas y debajo de los textos. */
.vuelo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .35s ease; pointer-events: none; background: #050914; }
.vuelo-video.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vuelo-video { display: none; } }
/* 2026-10-14 (3.ª vuelta): en celular vuelve el tramo del video (solo satélite → X), así que la sección recupera sus 160 vh (727vh → 887vh). */
@media (max-width: 720px) { .vuelo { height: 887vh; } }
/* 2026-10-14 (pedido del equipo): tarjeta de negocios manual e interactiva. Se arrastra de lado (sigue al dedo o al mouse y
   gira en 3D), tiene flechas a los costados y cada cambio gira la tarjeta hacia el lado del movimiento.
   Antes: archivo/portada-cauxe02/negocios-manual-v1/ */
.vb .vb-stage { perspective: 1100px; }
.vb .vb-biz { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.vb .vb-biz.drag { transform: translateX(var(--sw, 0px)) rotateY(var(--swr, 0deg)); transition: none; cursor: grabbing; }
.vb .vb-biz.out[data-dir="1"] { opacity: 0; transform: translateX(-70px) rotateY(32deg); transition: opacity .28s ease, transform .28s ease; }
.vb .vb-biz.out[data-dir="-1"] { opacity: 0; transform: translateX(70px) rotateY(-32deg); transition: opacity .28s ease, transform .28s ease; }
.vb .vb-biz.in[data-dir="1"] { animation: vbTurnIn .7s cubic-bezier(.22, 1, .36, 1) backwards; }
.vb .vb-biz.in[data-dir="-1"] { animation: vbTurnInR .7s cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes vbTurnIn { from { opacity: 0; transform: translateX(70px) rotateY(-32deg); } to { opacity: 1; transform: none; } }
@keyframes vbTurnInR { from { opacity: 0; transform: translateX(-70px) rotateY(32deg); } to { opacity: 1; transform: none; } }
.vb-arr { all: unset; box-sizing: border-box; position: absolute; z-index: 3; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid #e3e8f2; color: #0047ab; box-shadow: 0 14px 30px -16px rgba(0, 47, 120, .55); transition: transform .25s ease, box-shadow .25s ease, opacity .3s ease; }
.vb-arr svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vb-arr:hover { transform: scale(1.08); box-shadow: 0 18px 34px -14px rgba(0, 71, 171, .7); border-color: #0047ab; }
.vb-arr:focus-visible { outline: 2px solid #10b981; outline-offset: 3px; }
.vb-arr-prev { left: 0; }
.vb-arr-next { right: 0; }
.vb.open .vb-arr { opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
  .vb-arr { width: 38px; height: 38px; margin-top: -19px; background: rgba(255, 255, 255, .92); }
  .vb-arr svg { width: 18px; height: 18px; }
  .vb-arr-prev { left: -10px; }
  .vb-arr-next { right: -10px; }
}
@media (prefers-reduced-motion: reduce) { .vb .vb-biz.in[data-dir] { animation: none; } }

/* 2026-10-14 (pedido del equipo): en celular la escena de negocios sale del vuelo (887vh → 547vh) y es un desplegable
   debajo de la portada (.vbm, lo arma vuelo.js). Antes: archivo/portada-cauxe02/negocios-celular-desplegable-v1/ */
@media (max-width: 720px) {
  .vuelo { height: 547vh; }
  .vuelo-acc.vb { display: none !important; }
}
.vbm { padding: 44px 0 36px; background: #f7f9fc; }
.vbm-k { margin: 0 0 8px; text-align: center; font: 600 11px/1 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: #0047ab; }
.vbm-t { margin: 0; text-align: center; font: 800 clamp(24px, 6.6vw, 30px)/1.15 var(--font-display); letter-spacing: -.02em; color: #0b1a33; }
.vbm-t span { display: block; margin-top: 6px; font: 600 15px/1.3 var(--font-body, inherit); letter-spacing: 0; color: #0047ab; }
.vbm-hint { margin: 10px 0 18px; text-align: center; font-size: 14px; color: #475569; }
.vbm-list { display: grid; gap: 10px; }
.vbm-item { border-radius: 18px; background: #fff; border: 1px solid #e3e8f2; box-shadow: 0 10px 30px -22px rgba(15, 23, 42, .35); transition: border-color .3s ease, box-shadow .3s ease; }
.vbm-item.open { border-color: rgba(0, 71, 171, .45); box-shadow: 0 22px 44px -26px rgba(0, 47, 120, .55); }
.vbm-h { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vbm-h:focus-visible { outline: 2px solid #10b981; outline-offset: -2px; border-radius: 18px; }
.vbm .vbm-h .vb-name { font: 800 clamp(22px, 6.4vw, 28px)/1.1 var(--font-display); letter-spacing: -.02em; }
.vbm-h i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #eef3ff; border: 1px solid #d5e0f7; transition: transform .3s ease, background .3s ease; }
.vbm-h i::before { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid #0047ab; border-bottom: 2px solid #0047ab; transform: rotate(45deg); }
.vbm-item.open .vbm-h i { transform: rotate(180deg); background: #0047ab; }
.vbm-item.open .vbm-h i::before { border-color: #fff; }
.vbm-p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.22, 1, .36, 1); }
.vbm-item.open .vbm-p { grid-template-rows: 1fr; }
.vbm-in { overflow: hidden; min-height: 0; padding: 0 18px; }
.vbm-item.open .vbm-in { padding-bottom: 18px; }
.vbm-say { margin: 0 0 12px; font-size: 16px; line-height: 1.45; color: #0b1a33; }
.vbm-flow { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vbm-flow li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 999px; font: 700 12px/1 var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .03em; color: #0b1a33; background: #f1f5ff; border: 1px solid #d5e0f7; }
.vbm-flow li em { font-style: normal; padding: 3px 5px; border-radius: 6px; font-size: 10px; color: #fff; background: #0047ab; }
.vbm-pain { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: #475569; }
.vbm-pain b { color: #0b1a33; }
.vbm-act { display: flex; flex-wrap: wrap; gap: 8px; }
.vbm-wa { color: #fff !important; background: #10b981 !important; border-color: #10b981 !important; }
@media (min-width: 721px) { .vbm { display: none; } }
@media (prefers-reduced-motion: reduce) { .vbm-p, .vbm-h i { transition: none; } }
/* 2026-10-14: con GSAP cargado el panel del desplegable se anima por alto (vuelo.js); sin GSAP queda la transición CSS de arriba. */
.vbm.vbm-gsap .vbm-p { display: block; height: 0; overflow: hidden; transition: none; }
.vbm.vbm-gsap .vbm-item.open .vbm-p { height: auto; }

/* 2026-10-14 (pedido del equipo): negocios en celular como libro (lo arma vuelo.js). Portada + una página por negocio que
   gira sobre el lomo; "Abrir módulo" despliega los pasos. Antes (desplegable): archivo/portada-cauxe02/libro-negocios-v1/ */
.vbk .vbm-t { margin-bottom: 22px; }
.vbk-book { position: relative; perspective: 1600px; margin: 0 4px 0 10px; transition: none; }
.vbk-book::before { content: ""; position: absolute; z-index: 5; left: -10px; top: 6px; bottom: 6px; width: 12px; border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, #0b1f4d, #0047ab 70%, #2563eb); box-shadow: inset -2px 0 4px rgba(0, 0, 0, .25); }
.vbk-page { position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; padding: 26px 22px 46px 26px; border-radius: 4px 18px 18px 4px;
  background: linear-gradient(90deg, #eef2fa 0, #fff 18px, #fff 100%); border: 1px solid #e3e8f2;
  box-shadow: 3px 3px 0 -1px #fff, 3px 3px 0 0 #dfe6f3, 6px 6px 0 -1px #fff, 6px 6px 0 0 #d5def0, 0 24px 50px -30px rgba(0, 47, 120, .55);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; visibility: hidden; }
.vbk-page.on { visibility: visible; }
.vbk-k { display: block; font: 600 11px/1 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: #0047ab; }
.vbk .vbk-page .vb-name { display: block; margin: 10px 0 8px; font: 800 clamp(30px, 9vw, 40px)/1.05 var(--font-display); letter-spacing: -.03em; }
.vbk-say { margin: 0 0 16px; font-size: 16px; line-height: 1.45; color: #0b1a33; }
.vbk-open, .vbk-start { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; cursor: pointer;
  font: 700 14px/1 var(--font-body, inherit); color: #fff; background: linear-gradient(90deg, #0b1f4d, #0047ab); box-shadow: 0 12px 26px -14px rgba(0, 71, 171, .8); -webkit-tap-highlight-color: transparent; }
.vbk-open i, .vbk-start i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; background: #10b981; color: #fff; transition: transform .3s ease; }
.vbk-open.on i { transform: rotate(45deg); }
.vbk-open:focus-visible, .vbk-start:focus-visible { outline: 2px solid #10b981; outline-offset: 3px; }
.vbk-mod { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #d5e0f7; }
.vbk-fh { margin: 0 0 10px; font: 600 11px/1 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: #475569; }
.vbk-num { position: absolute; right: 18px; bottom: 16px; font: 600 11px/1 var(--font-mono, monospace); color: #94a3b8; }
.vbk-cover { background: radial-gradient(120% 90% at 100% 0, rgba(37, 99, 235, .35), transparent 60%), linear-gradient(150deg, #0b1f4d, #0047ab 70%, #1d4ed8); border-color: #0b1f4d; color: #fff; }
.vbk-cover .vbk-k { color: #93c5fd; }
.vbk-ct { margin: 14px 0 10px; font: 800 clamp(30px, 9vw, 40px)/1.05 var(--font-display); letter-spacing: -.03em; color: #fff; }
.vbk-cs { margin: 0 0 20px; font-size: 15px; line-height: 1.45; color: #dbe6ff; }
.vbk-cover .vbk-start { background: #fff; color: #0b1f4d; }
.vbk-swipe { display: block; margin-top: 16px; font-size: 12px; color: #93c5fd; }
.vbk-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 4px 12px; }
.vbk-nav button { all: unset; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; font-size: 26px; line-height: 1; color: #0047ab; background: #fff; border: 1px solid #d5e0f7; box-shadow: 0 10px 22px -16px rgba(0, 47, 120, .6); }
.vbk-nav button:disabled { opacity: .35; cursor: default; }
.vbk-pos { font: 600 13px/1 var(--font-body, inherit); color: #475569; }
.vbk-idx { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.vbk-idx::-webkit-scrollbar { display: none; }
.vbk-idx button { all: unset; flex: none; padding: 7px 12px; border-radius: 999px; font: 600 12px/1 var(--font-body, inherit); color: #475569; background: #fff; border: 1px solid #e3e8f2; cursor: pointer; }
.vbk-idx button.on { color: #fff; background: #0047ab; border-color: #10b981; }

/* 2026-10-14 (pedido del equipo): en computadora los negocios también salen del vuelo (966vh → 606vh) y pasan a una galería
   de libros debajo de la portada (.bzg, lo arma vuelo.js). Antes: archivo/portada-cauxe02/negocios-tarjeta-computadora-v1/ */
@media (min-width: 721px) {
  .vuelo { height: 606vh; }
  .vuelo-acc.vb { display: none !important; }
}
.bzg { padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); background: #f7f9fc; }
.bzg .vbm-t { font-size: clamp(28px, 3.2vw, 40px); }
.bzg-hint { margin: 10px 0 28px; text-align: center; color: #50607a; font-size: 15px; }
.bzg-row { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; height: clamp(440px, 62vh, 540px); }
.bzg-item { position: relative; flex: 1 1 0; min-width: 0; border-radius: 16px; overflow: hidden; background: linear-gradient(165deg, #0b2a6b 0%, #0a1838 70%, #060d22 100%); box-shadow: 0 18px 40px -22px rgba(6, 16, 50, .55); transition: flex-grow .6s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
.bzg-item:nth-child(3n+2) { background: linear-gradient(165deg, #0d3a8a 0%, #0a1d48 70%, #060d22 100%); }
.bzg-item:nth-child(3n) { background: linear-gradient(165deg, #0f4c9e 0%, #0b2152 70%, #060d22 100%); }
.bzg.has-open .bzg-item.on { flex-grow: 9.2; } /* ≈ 52 % del ancho con 9 negocios (expandRatio 0.52) */
.bzg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.7); opacity: .55; transform: scale(1.12); transition: filter .6s, opacity .6s, transform .8s cubic-bezier(.22, 1, .36, 1); }
.bzg-item:hover .bzg-img { opacity: .7; }
.bzg-item.on .bzg-img { filter: none; opacity: .14; } /* abierta: la imagen queda casi transparente detrás del texto */
.bzg-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 13, 34, .1) 30%, rgba(6, 13, 34, .75) 100%); pointer-events: none; }
.bzg-item.on::after { background: linear-gradient(160deg, rgba(10, 30, 80, .55), rgba(6, 13, 34, .92)); }
.bzg-spine { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 18px 0 20px; border: 0; background: none; color: #fff; cursor: pointer; font: inherit; transition: opacity .3s; }
.bzg-spine:focus-visible { outline: 2px solid #5aa2ff; outline-offset: -4px; border-radius: 16px; }
.bzg-n { font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .12em; opacity: .75; }
.bzg-name { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 clamp(18px, 1.7vw, 24px)/1 var(--font-display); letter-spacing: .01em; white-space: nowrap; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.bzg-plus { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55); font-style: normal; font-size: 18px; line-height: 1; transition: background .3s, transform .3s; }
.bzg-item:hover .bzg-plus { background: #2f6bff; border-color: #2f6bff; transform: rotate(90deg); }
.bzg-item.on .bzg-spine { opacity: 0; pointer-events: none; }
.bzg-page { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3vw, 40px); color: #fff; overflow: auto; }
.bzg-page[hidden] { display: none; }
.bzg-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.bzg-x:hover { background: rgba(255, 255, 255, .2); }
.bzg-k { font: 600 11px/1 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: #8fc1ff; }
.bzg-h { margin: 10px 0 8px; font: 800 clamp(28px, 2.8vw, 40px)/1.05 var(--font-display); letter-spacing: -.02em; background: linear-gradient(90deg, #ffffff, #9cc8ff 60%, #5aa2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bzg-say { margin: 0 0 18px; max-width: 46ch; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.bzg-fh { margin: 0 0 10px; font: 700 12px/1 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: #8fc1ff; }
.bzg-flow { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bzg-flow li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 14px; }
.bzg-flow em { font: 700 11px/1 var(--font-mono, monospace); font-style: normal; color: #8fc1ff; }
.bzg-pain { margin: 0 0 20px; max-width: 52ch; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.bzg-pain b { color: #fff; }
.bzg-act { display: flex; flex-wrap: wrap; gap: 10px; }
[data-theme="light"] .bzg { background: #f7f9fc; }
@media (max-width: 1000px) { .bzg-row { gap: 6px; } .bzg.has-open .bzg-item.on { flex-grow: 12; } .bzg-say { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .bzg-item, .bzg-img { transition: none; } }

/* 2026-10-14 (arreglo, pedido del equipo): en celular no aparece nada del vuelo del hotel. Sin el encabezado "Sistema operativo
   que se adapta…", sin los pasos de las escenas y sin la franja de industrias; la portada de respaldo es el planeta. */
@media (max-width: 720px) {
  .vuelo .vf-tag, .vuelo .vf-flow, .vuelo .vf-ind { display: none !important; }
}

/* 2026-10-14 (corrección del equipo): los libros de negocios vuelven DENTRO del vuelo, después del anillo (EXTRA 150 / 120 vh).
   Alto del vuelo: computadora 606 → 756vh, celular 547 → 667vh. Antes: archivo/portada-cauxe02/negocios-libros-fuera-del-vuelo-v1/ */
.vuelo { height: 756vh; }
@media (max-width: 720px) { .vuelo { height: 667vh; } }
.vuelo-acc.bzg { padding: clamp(84px, 11vh, 112px) 0 clamp(20px, 4vh, 44px); justify-content: center; gap: 0; color: #0b1324;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(47, 107, 255, .07), transparent 70%), #f7f9fc; }
.vuelo-acc.bzg > .container { width: 100%; }
.vuelo-acc.bzg .bzg-hint { margin: 8px 0 clamp(14px, 2.4vh, 26px); }
.vuelo-acc.bzg .bzg-row { height: clamp(260px, calc(100vh - 330px), 520px); height: clamp(260px, calc(100svh - 330px), 520px); }
@media (min-width: 721px) { .vuelo-acc.bzg .bzg-row { margin-inline: clamp(24px, 6.5vw, 96px); } }
.bzg.static { position: relative; opacity: 1; visibility: visible; padding: 56px 0; }
.bzg.static .bzg-row { height: 480px; }
@media (max-width: 720px) {
  .vuelo-acc.bzg { padding: 76px 0 104px; }
  .vuelo-acc.bzg .vbm-t { font-size: 21px; }
  .vuelo-acc.bzg .vbm-t span { font-size: 13px; }
  .vuelo-acc.bzg .bzg-hint { font-size: 13px; margin: 6px 0 12px; }
  .vuelo-acc.bzg .bzg-row { height: calc(100vh - 290px); height: calc(100svh - 290px); min-height: 240px; }
  .bzg-row { gap: 4px; position: relative; }
  .bzg-item { border-radius: 10px; }
  .bzg-spine { padding: 10px 0 12px; }
  .bzg-n { font-size: 9px; letter-spacing: .04em; }
  .bzg-name { font-size: 14px; }
  .bzg-plus { width: 22px; height: 22px; font-size: 14px; }
  .bzg.has-open .bzg-item.on { position: absolute; inset: 0; z-index: 5; border-radius: 14px; }
  .bzg-page { padding: 22px 18px; justify-content: flex-start; }
  .bzg-h { font-size: 28px; }
  .bzg-say { font-size: 14px; margin-bottom: 12px; }
  .bzg-flow { gap: 6px; margin-bottom: 12px; }
  .bzg-flow li { font-size: 12px; padding: 5px 9px 5px 6px; }
  .bzg-pain { font-size: 13px; margin-bottom: 14px; }
  .bzg-x { top: 10px; right: 10px; width: 32px; height: 32px; }
}
/* 2026-10-14 (pedido del equipo): el anillo de la X ya no se recorre con scroll, gira solo y la portada queda fija un momento
   corto. Alto del vuelo: computadora 756 → 636vh, celular 667 → 557vh. Antes: archivo/portada-cauxe02/anillo-scroll-trabado-v1/ */
.vuelo { height: 636vh; }
@media (max-width: 720px) { .vuelo { height: 557vh; } }
/* 2026-10-14 (4.ª vuelta, pedido del equipo): intro más corta y, en celular, la portada termina en los negocios (sin satélite).
   Alto del vuelo: computadora 636 → 615vh, celular 557 → 381vh. Antes: archivo/portada-cauxe02/negocios-libros-v2-satelite/ */
.vuelo { height: 615vh; }
@media (max-width: 720px) { .vuelo { height: 381vh; } }
/* Negocios en los tonos de la X: azul noche con filo de neón cian y la foto de cada negocio teñida de azul, con su propia
   transparencia. Antes: franjas azul marino con fotos en gris. */
.bzg-item { background: linear-gradient(180deg, #0c2a6e 0%, #08183f 55%, #050c22 100%); box-shadow: 0 18px 40px -22px rgba(6, 16, 50, .55), inset 0 0 0 1px rgba(56, 160, 255, .22); }
.bzg-item:nth-child(3n+2) { background: linear-gradient(180deg, #0f3d9a 0%, #0a1f52 55%, #050c22 100%); }
.bzg-item:nth-child(3n) { background: linear-gradient(180deg, #1466d6 0%, #0b2a72 50%, #050c22 100%); }
.bzg-item::before { content: ""; position: absolute; z-index: 1; left: 0; top: 12%; bottom: 12%; width: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, transparent, #38bdf8 30%, #1f8fff 70%, transparent); opacity: .55; box-shadow: 0 0 10px #1f8fff; transition: opacity .3s; }
.bzg-item:hover::before, .bzg-item.on::before { opacity: 1; }
.bzg-img { filter: grayscale(1) brightness(.85) sepia(1) hue-rotate(180deg) saturate(3.2); opacity: .5; }
.bzg-item:nth-child(2n) .bzg-img { opacity: .4; }
.bzg-item:nth-child(3n) .bzg-img { opacity: .32; }
.bzg-item:hover .bzg-img { opacity: .66; }
.bzg-item.on .bzg-img { filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(3); opacity: .16; }
.bzg-item::after { background: linear-gradient(180deg, rgba(8, 26, 70, .05) 25%, rgba(5, 12, 34, .8) 100%); }
.bzg-item.on::after { background: linear-gradient(160deg, rgba(14, 50, 130, .55), rgba(5, 12, 34, .93)); }
.bzg-item.on { box-shadow: 0 24px 50px -24px rgba(31, 143, 255, .55), inset 0 0 0 1px rgba(56, 189, 248, .45); }
.bzg-n { color: #7cc7ff; opacity: .9; }
.bzg-plus { border-color: rgba(124, 199, 255, .65); }
.bzg-item:hover .bzg-plus { background: #1f8fff; border-color: #1f8fff; box-shadow: 0 0 14px rgba(31, 143, 255, .8); }
.bzg-k, .bzg-fh, .bzg-flow em { color: #7cc7ff; }
.bzg-h { background: linear-gradient(90deg, #ffffff, #8fd0ff 55%, #1f8fff); -webkit-background-clip: text; background-clip: text; }
/* 2026-10-14 (pedido del equipo): en celular nada del vuelo (ni satélite, ni planeta, ni video) y las franjas de negocios se unen
   con la franja de industrias por líneas de luz que bajan a un solo cauce. Antes: archivo/portada-cauxe02/celular-sin-union-v1/ */
@media (max-width: 720px) {
  .vuelo .vuelo-poster, .vuelo .vuelo-canvas, .vuelo .vuelo-video, .vuelo .vuelo-shade { display: none !important; }
  .vuelo .vuelo-stage { background: #f7f9fc; }
  .bzg-join { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 96px; overflow: visible; pointer-events: none; }
  .bzg-jl { fill: none; stroke: url(#bzgJ); stroke-width: 1.4; opacity: .55; }
  .bzg-jf { fill: none; stroke: #38bdf8; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 10 150; animation: bzgFlow 2.1s linear infinite; filter: drop-shadow(0 0 3px #1f8fff); }
  .bzg-jd { fill: #38bdf8; filter: drop-shadow(0 0 6px #1f8fff); animation: bzgDot 2.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes bzgFlow { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
@keyframes bzgDot { 50% { transform: scale(1.6); opacity: .7; } }
/* 2026-10-14 (pedido del equipo): fichas de negocio completas (problema, todo lo que hace Cauxe por módulo y resultado).
   El contenido baja desde arriba y se desplaza dentro de la ficha. Anterior: archivo/portada-cauxe02/fichas-negocios-v1/ */
.bzg-page { justify-content: flex-start; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(124, 199, 255, .4) transparent; padding-right: clamp(56px, 5vw, 70px); }
.bzg-page .bzg-flow { margin-bottom: 14px; }
.bzg-pains { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.bzg-pains li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.bzg-pains li::before { content: "✕"; position: absolute; left: 0; top: 0; font-size: 11px; color: #7cc7ff; }
.bzg-mods { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bzg-mods li { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(124, 199, 255, .18); font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .8); }
.bzg-mods b { display: block; margin-bottom: 3px; font: 700 12px/1.2 var(--font-body); letter-spacing: .02em; color: #9fd6ff; }
.bzg-res { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(120deg, rgba(31, 143, 255, .22), rgba(56, 189, 248, .08)); border: 1px solid rgba(56, 189, 248, .35); font-size: 14px; line-height: 1.5; color: #fff; }
.bzg-res b { color: #7cc7ff; }
@media (max-width: 1100px) { .bzg-mods { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .bzg-page { padding: 20px 16px 22px; }
  .bzg-page .bzg-h { padding-right: 40px; }
  .bzg-pains li { font-size: 13px; }
  .bzg-mods li { padding: 9px 11px; font-size: 12.5px; }
  .bzg-res { font-size: 13px; }
  .bzg-act { flex-direction: column; align-items: stretch; }
}
@media (max-width: 720px) { /* celular: la ficha abierta ocupa toda la pantalla para leerla cómoda */
  .bzg.has-open .bzg-item.on { position: fixed; inset: 0; z-index: 140; border-radius: 0; }
  .bzg.has-open .bzg-item.on .bzg-page { padding: max(18px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
  .bzg.has-open .bzg-item.on .bzg-x { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 5; background: rgba(5, 12, 34, .7); }
}
.bzg-page { padding-bottom: 44px; -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); }
@media (max-width: 720px) { .bzg.has-open .bzg-item.on { z-index: 1000; } .bzg.has-open .bzg-item.on .bzg-page { padding-top: max(56px, env(safe-area-inset-top)); -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 720px) { body.bzg-full :is(#nav, .mbar, .dock, .greet, .rail) { visibility: hidden; } body.bzg-full { overflow: hidden; } }

/* 2026-10-21 (pedido del equipo): (1) los nombres largos ("Servicios profesionales") pasan a dos líneas para leerse
   completos; (2) la ficha abierta tiene una animación por dentro y colores más llamativos: fondo de luces que se mueven,
   etapas que entran una a una con su propio color y un brillo que las recorre en bucle, módulos que aparecen en cascada.
   Antes: archivo/portada-cauxe02/negocios-fotos-ficha-v1/ */
.bzg-name { white-space: normal; max-height: calc(100% - 96px); line-height: 1.05; text-align: center; }
.bzg-img { opacity: .5; }
.bzg-page::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; opacity: .9;
  background: radial-gradient(circle at 20% 25%, rgba(34, 211, 238, .28), transparent 40%), radial-gradient(circle at 80% 30%, rgba(167, 139, 250, .26), transparent 42%), radial-gradient(circle at 55% 85%, rgba(16, 185, 129, .2), transparent 45%);
  animation: bzgAurora 9s ease-in-out infinite alternate; }
.bzg-page { isolation: isolate; }
@keyframes bzgAurora { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(4%, -3%) rotate(8deg); } 100% { transform: translate(-3%, 4%) rotate(-6deg); } }
.bzg-k { background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bzg-h { background: linear-gradient(90deg, #ffffff 0%, #67e8f9 40%, #a78bfa 75%, #f472b6 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: bzgShift 6s ease-in-out infinite alternate; }
@keyframes bzgShift { to { background-position: 100% 0; } }
.bzg-flow li { --cc: #22d3ee; border-color: color-mix(in srgb, var(--cc) 55%, transparent); background: color-mix(in srgb, var(--cc) 16%, transparent); }
.bzg-flow li:nth-child(2) { --cc: #a78bfa; } .bzg-flow li:nth-child(3) { --cc: #34d399; } .bzg-flow li:nth-child(4) { --cc: #fbbf24; }
.bzg-flow li:nth-child(5) { --cc: #f472b6; } .bzg-flow li:nth-child(6) { --cc: #60a5fa; }
.bzg-flow em { color: var(--cc); }
.bzg-item.on .bzg-flow:not(.pill-nav) li { animation: bzgChip .5s cubic-bezier(.22, 1, .36, 1) both; } /* 2026-10-21: el brillo en bucle lo reemplaza PillNav (pill-nav.js) */
.bzg-flow li:nth-child(1) { animation-delay: .15s, 1s; } .bzg-flow li:nth-child(2) { animation-delay: .27s, 1.5s; } .bzg-flow li:nth-child(3) { animation-delay: .39s, 2s; }
.bzg-flow li:nth-child(4) { animation-delay: .51s, 2.5s; } .bzg-flow li:nth-child(5) { animation-delay: .63s, 3s; } .bzg-flow li:nth-child(6) { animation-delay: .75s, 3.5s; }
@keyframes bzgChip { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@keyframes bzgGlow { 0%, 70%, 100% { box-shadow: none; } 80% { box-shadow: 0 0 0 1px var(--cc), 0 0 22px -2px var(--cc); background: color-mix(in srgb, var(--cc) 34%, transparent); } }
.bzg-item.on .bzg-k, .bzg-item.on .bzg-say { animation: bzgUp .5s ease both; }
.bzg-item.on .bzg-h { animation: bzgUp .5s ease both, bzgShift 6s ease-in-out .5s infinite alternate; }
.bzg-item.on .bzg-say { animation-delay: .08s; }
@keyframes bzgUp { from { opacity: 0; transform: translateY(12px); } }
.bzg-mods li { border-color: color-mix(in srgb, var(--cc, #7cc7ff) 35%, transparent); }
.bzg-mods li:nth-child(4n+1) { --cc: #22d3ee; } .bzg-mods li:nth-child(4n+2) { --cc: #a78bfa; } .bzg-mods li:nth-child(4n+3) { --cc: #34d399; } .bzg-mods li:nth-child(4n) { --cc: #f472b6; }
.bzg-mods b { color: var(--cc, #9fd6ff); }
.bzg-item.on .bzg-mods li { animation: bzgUp .45s ease both; animation-delay: calc(.6s + var(--m, 0) * 60ms); }
.bzg-res { background: linear-gradient(120deg, rgba(34, 211, 238, .22), rgba(167, 139, 250, .18), rgba(244, 114, 182, .14)); border-color: rgba(167, 139, 250, .45); }
.bzg-pains li::before { color: #f472b6; }
@media (prefers-reduced-motion: reduce) { .bzg-page::before, .bzg-item.on .bzg-flow li, .bzg-item.on .bzg-h, .bzg-item.on .bzg-k, .bzg-item.on .bzg-say, .bzg-item.on .bzg-mods li { animation: none; } }

/* 2026-10-21 (pedido del equipo): PillNav en las etapas de cada negocio (assets/js/pill-nav.js). Barra de vidrio,
   píldoras que se llenan desde abajo al pasar el mouse, relleno de color que salta con rebote a la etapa activa y un
   punto que la marca. Antes: archivo/portada-cauxe02/pillnav-fluidglass-v1/ */
.bzg-flow.pill-nav { position: relative; display: inline-flex; align-self: flex-start; max-width: 100%; padding: 6px 6px 14px; border-radius: 22px; gap: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 30px -18px rgba(0, 0, 0, .7); }
.pill-nav li { position: relative; z-index: 1; overflow: hidden; cursor: pointer; isolation: isolate; transition: color .25s, border-color .25s; }
.pill-nav li::before { content: ""; position: absolute; left: 50%; bottom: -120%; z-index: -1; width: 160%; aspect-ratio: 1; border-radius: 50%; translate: -50% 0; background: var(--cc); opacity: .35; transform: scale(0); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.pill-nav li:hover::before, .pill-nav li:focus-visible::before { transform: scale(1); }
.pill-nav li:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pill-nav li.active { color: #fff; border-color: transparent; background: transparent; }
.pill-nav li.active em { color: #fff; }
.pn-fill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; opacity: 0; pointer-events: none; background: var(--ac, #22d3ee);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 0 24px -2px var(--ac, #22d3ee); transition: background .3s, box-shadow .3s; }
.pn-dot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--ac, #22d3ee); box-shadow: 0 0 10px var(--ac, #22d3ee); pointer-events: none; }
.pill-nav.pn-in li { animation: pnIn .5s cubic-bezier(.34, 1.45, .64, 1) both; animation-delay: calc(.12s + var(--pi, 0) * 70ms); }
@keyframes pnIn { from { opacity: 0; transform: translateY(12px) scale(.6); } }
@media (prefers-reduced-motion: reduce) { .pill-nav.pn-in li { animation: none; } .pill-nav li::before { transition: none; } }