/* assets/css/viaje.css — piezas COMPARTIDAS de los viajes de scroll-scrub de cursos.html: hero, botones, mensaje fx
   que se escribe, .reveal, cursor/ripple, marco que viaja (.viaje-ghost) y el flujo vertical de móvil. El contenido de
   cada herramienta vive en su propio par assets/js/viaje-*.js + assets/css/viaje-*.css (xl, bi, ofi, ia, pa, auto).
   --viaje-nav-h lo fija en vivo ViajeEngine (mide el nav) — el valor de abajo es solo el default antes de que corra. */
:root{ --viaje-nav-h:130px; --teal:#14b8a6; --amber:#dfb35a; }
 /* verde-azulado = "bien", ámbar = atención (semáforos de marca); base.css no los define */.mono{ font-family:'JetBrains Mono',monospace; }
.disp{ font-family:'Space Grotesk',sans-serif; }


/* a pantalla completa: cursos.html lo monta dentro de un .wrap angosto (1120px) */.viaje-root{ position:relative; width:100vw; margin-left:calc(50% - 50vw); }




/* fx= barra de fórmula — mensajes de cada escena, tipo "se va escribiendo" */.formula-msg{ position:relative; z-index:3; display:inline-flex; align-items:stretch; border:1px solid var(--blue-dim); border-radius:6px; background:var(--panel); overflow:hidden; max-width:92vw; }
.formula-msg-fx{ font-family:var(--mono); font-weight:700; font-style:italic; font-size:14px; color:var(--blue-bright); background:var(--blue-soft); padding:14px 16px; border-right:1px solid var(--blue-dim); display:flex; align-items:center; flex:none; }
.formula-msg-text{ font-family:var(--display); font-weight:600; font-size:clamp(16px,2.4vw,24px); color:var(--text); padding:14px 20px; white-space:nowrap; overflow:hidden; display:inline-block; clip-path:inset(0 100% 0 0); }
.formula-msg-cursor{ display:inline-block; width:2px; height:1em; background:var(--blue-bright); margin-left:2px; vertical-align:-3px; animation:blink-cursor 1s step-end infinite; }
.reveal{ opacity:0; }
.viaje-msg{ font-family:var(--display); font-weight:600; font-size:clamp(20px,3vw,32px); text-align:center; max-width:760px; line-height:1.3; position:relative; z-index:3; }


/* ---- ESCENA CAPTURA (oscura) ---- */

/* ---- ESCENA ORGANIZA (oscura, split) ---- */



/* cursor y ripple de los viajes */.cursor-ico{ position:absolute; z-index:10; width:20px; height:20px; color:#fff; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); top:0; left:0; }
.click-ripple{ position:absolute; width:26px; height:26px; border-radius:50%; border:2px solid var(--teal); z-index:9; top:0; left:0; transform:scale(0); opacity:0; }



/* ---- fallback sin pin/scrub: teléfono táctil real, reduced-motion, o si GSAP no cargó ---- */

@media (prefers-reduced-motion: reduce){.reveal{ opacity:1 !important; transform:none !important; }
 }


/* ---- hero de la herramienta (reemplaza el header genérico de cursos.html) ---- */.viaje-hero{ position:relative; min-height:calc(100vh - var(--viaje-nav-h)); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 16px; gap:22px; }
.viaje-hero-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--blue-bright); text-transform:uppercase; }
.viaje-hero-title{ font-family:var(--display); font-weight:700; font-size:clamp(32px,6vw,58px); margin:0; max-width:820px; line-height:1.15; }
.viaje-hero-title .accent{ color:var(--blue-bright); position:relative; display:inline-block; }
.viaje-hero-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.selector-box{ position:absolute; inset:-9px -12px; border:1.5px solid var(--blue-bright); border-radius:2px; pointer-events:none; z-index:2; box-shadow:0 0 0 3px var(--blue-soft); opacity:0; transform:translate(-90px,-14px) scale(.6); animation:selReveal .75s cubic-bezier(.34,1.56,.64,1) .9s forwards; }

@keyframes selReveal{ 60%{ opacity:1; } to{ opacity:1; transform:translate(0,0) scale(1); } }.selector-box::after{ content:''; position:absolute; width:7px; height:7px; background:var(--blue-bright); right:-4px; bottom:-4px; border-radius:1px; box-shadow:0 0 6px var(--blue-bright); }
.selector-label{ position:absolute; top:-22px; left:-1px; font-family:var(--mono); font-size:10px; color:var(--blue-bright); background:var(--bg); padding:1px 4px; letter-spacing:.5px; white-space:nowrap; }
.viaje-root.viaje-flujo .viaje-hero{ min-height:0; padding:56px 16px 24px; }


/* Top 5 (barras horizontales) y mapa de cobertura */


/* Máster y la celda A1 en el color de la herramienta (--c lo fija cursos.html; Excel = #22c55e) */.viaje-hero-title .accent{ color:var(--c,#22c55e); }
.selector-box{ border-color:var(--c,#22c55e); box-shadow:0 0 0 3px color-mix(in srgb, var(--c,#22c55e) 16%, transparent); }
.selector-box::after{ background-color:var(--c,#22c55e); box-shadow:0 0 6px var(--c,#22c55e); }
.selector-label{ color:var(--c,#22c55e); }



@keyframes bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(8px); } }

/* ---- hero: más aire entre el titular, los chips y los botones ---- */.viaje-hero{ gap:34px; }
.viaje-hero-title{ max-width:1000px; line-height:1.28; word-spacing:.14em; }
.viaje-hero-chips{ margin-top:4px; }


/* dos botones paralelos: misma medida, misma flecha */.viaje-hero-actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:10px; }
.viaje-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:290px; height:50px; padding:0 24px; border-radius:4px; font-family:var(--body); font-weight:600; font-size:14.5px; border:1.5px solid var(--c,#22c55e); transition:transform .15s ease, background .2s, color .2s; }
.viaje-btn svg{ width:16px; height:16px; flex:none; animation:bounce 1.6s ease-in-out infinite; }
.viaje-btn.solid{ background-color:var(--c,#22c55e); color:#0a0d12; }
.viaje-btn.solid:hover{ background-color:var(--c-bright,#4ade80); border-color:var(--c-bright,#4ade80); transform:translateY(-1px); }
.viaje-btn.ghost{ background-color:transparent; color:var(--text); }
.viaje-btn.ghost:hover{ background-color:color-mix(in srgb, var(--c,#22c55e) 14%, transparent); transform:translateY(-1px); }

@media (max-width:640px){.viaje-btn{ min-width:0; width:100%; }
.viaje-hero-actions{ width:100%; max-width:380px; }
 }


/* ---- dashboard: dos filas altas; líneas y columnas son los protagonistas ---- */
/* modo simple en pantallas chicas: sin pin, filas de alto fijo (los % de barras y treemap necesitan un alto definido) */.viaje-btn{ min-width:300px; }


/* ---- hoja de cálculo: barra de fórmulas fija, números de fila y pestañas (visibles mientras corre el recorrido) ----
   Se muestra con body.viaje-hoja; en modo simple (teléfono, reduced-motion, sin GSAP) no existe y cada
   escena conserva su propio mensaje .viaje-msg. */

/* cuadrícula de la hoja detrás de cada escena: sus líneas coinciden con los números de fila y se desplazan con el scroll */
/* con la hoja activa, el contenido respeta el ancho útil (sin los números de fila de la izquierda) */

/* ---- Captura: solo las funciones, sueltas sobre la cuadrícula de fondo ---- */

/* ---- "Nuestros programas": aire respecto del recorrido y el título como destino de "Ver programas" ---- */.programs-head{ padding-top:20px; margin-bottom:28px; }
.programs-head .builder-title{ margin-bottom:0; }
.viaje-root + .programs-head{ padding-top:140px; }


/* ---- Automatiza: escenario escalado (transform lo aplica viaje.js) ---- */

/* ---- teléfono: escenas en flujo vertical (también en modo estático), todo a la medida del ancho ---- */
@media (max-width:700px){.viaje-flujo .viaje-msg{ max-width:100%; }
.viaje-flujo .formula-msg{ max-width:100%; width:100%; }
.viaje-flujo .formula-msg-fx{ padding:11px 12px; font-size:13px; }
.viaje-flujo .formula-msg-text{ white-space:normal; font-size:16px; line-height:1.35; padding:11px 14px; text-align:left; }


  /* tabla y pivote: uno debajo del otro, a todo el ancho */

  /* dashboard: un recuadro por fila, de ancho completo */

  /* macros: los 12 botones caben en el ancho; el copilot va debajo */
}

@media (max-width:700px){.viaje-flujo .viaje-msg{ order:-1; }
.viaje-flujo .formula-msg-text{ flex:1; min-width:0; }

}

@media (max-width:700px){.viaje-flujo .selector-label{ display:none; }
.viaje-flujo .viaje-hero-title{ line-height:1.35; word-spacing:.06em; }

}


/* marco que viaja entre un objeto y otro en las transiciones de los viajes (lo crea ViajeEngine.morph) */.viaje-ghost{ position:absolute; z-index:5; overflow:hidden; pointer-events:none; opacity:0; border-radius:12px; border:1px solid; border-color:color-mix(in srgb, var(--c,#22c55e) 65%, transparent); background-color:var(--panel); box-shadow:0 12px 40px rgba(0,0,0,.45); }