/* =====================================================================
   styles.css — v2 "más movimiento"
   Tailwind cubre layout y espaciado; aquí viven las piezas con identidad.
   ===================================================================== */
:root {
  --ink:#101828; --slate:#475467; --mist:#F6F7FB; --line:#E4E7EE;
  --apps:#5B2E91; --flow:#1D63E8; --data:#0F8A6C; --spark:#F5A524;
  --ease: cubic-bezier(.22,1,.36,1);
}
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }
::selection { background: var(--spark); color: var(--ink); }

/* ---------- Cursor personalizado (solo puntero fino) ---------- */
.cursor { display:none; }
@media (pointer:fine) {
  .cursor { display:block; position:fixed; top:0; left:0; z-index:100; pointer-events:none; }
  .cursor-dot, .cursor-ring { position:absolute; top:0; left:0; border-radius:50%; transform:translate(-50%,-50%); }
  .cursor-dot { width:6px; height:6px; background: var(--ink); }
  .cursor-ring { width:36px; height:36px; border:1.5px solid var(--apps); opacity:.6; transition: width .3s var(--ease), height .3s var(--ease), opacity .3s, background .3s; }
  .cursor.is-hover .cursor-ring { width:64px; height:64px; opacity:.25; background: rgba(91,46,145,.12); }
  .cursor.is-dark .cursor-dot { background:#fff; }
  .cursor.is-dark .cursor-ring { border-color: var(--spark); }
}

/* ---------- Tipografía utilitaria ---------- */
.eyebrow { font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; color:var(--flow); margin-bottom:1rem; }
.section-title { font-family:"Sora",sans-serif; font-weight:800; letter-spacing:-.025em; line-height:1.08; font-size:clamp(1.9rem,4.6vw,3.4rem); }
.section-lead { margin-top:1.25rem; max-width:40rem; color:var(--slate); font-size:1.05rem; }
.section-head { max-width:48rem; }

/* Texto partido en palabras para revelado enmascarado */
[data-split] .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
[data-split] .w > span { display:inline-block; transform:translateY(110%); will-change:transform; }
#hero-title .c { display:inline-block; will-change:transform, opacity; }

/* ---------- Botones ---------- */
.btn-primary,.btn-ghost,.btn-spark { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.4rem; border-radius:999px; font-weight:600; font-size:.95rem; position:relative; overflow:hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.btn-primary { background:var(--ink); color:#fff; }
.btn-ghost { border:1px solid var(--line); color:var(--ink); background:#fff; }
.btn-spark { background:var(--spark); color:var(--ink); }
.btn-primary::before,.btn-spark::before { content:""; position:absolute; inset:0; background:var(--apps); transform:translateY(101%); transition: transform .35s var(--ease); z-index:0; }
.btn-spark::before { background:#fff; }
.btn-primary:hover::before,.btn-spark:hover::before { transform:translateY(0); }
.btn-primary > *,.btn-spark > * { position:relative; z-index:1; }
.btn-primary,.btn-spark { isolation:isolate; }
.btn-primary:hover { box-shadow:0 16px 30px -14px rgba(91,46,145,.6); }
.btn-ghost:hover { border-color:var(--ink); }
.btn-arrow { display:inline-block; transition: transform .3s var(--ease); }
.btn-primary:hover .btn-arrow,.btn-spark:hover .btn-arrow { transform:translateX(4px); }
a:focus-visible,button:focus-visible { outline:3px solid var(--spark); outline-offset:3px; border-radius:8px; }

/* ---------- Nav ---------- */
#header { backdrop-filter:blur(12px); background:rgba(246,247,251,.7); border-bottom:1px solid transparent; transition: border-color .3s, transform .4s var(--ease); }
#header.scrolled { border-bottom-color:var(--line); }
#header.hidden-nav { transform:translateY(-100%); }
.nav-link { position:relative; padding-bottom:2px; transition:color .2s; }
.nav-link::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background:var(--apps); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav-link:hover,.nav-link.active { color:var(--ink); }
.nav-link:hover::after,.nav-link.active::after { transform:scaleX(1); }

/* ---------- Hero ---------- */
.hero-grid { background-image: linear-gradient(to right, rgba(16,24,40,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(16,24,40,.05) 1px, transparent 1px); background-size:48px 48px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%); }
.orb { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; will-change:transform; }
.orb-1 { width:420px; height:420px; background:radial-gradient(circle, rgba(91,46,145,.35), transparent 70%); top:-120px; right:-80px; }
.orb-2 { width:360px; height:360px; background:radial-gradient(circle, rgba(29,99,232,.3), transparent 70%); bottom:-100px; left:-120px; }
.orb-3 { width:260px; height:260px; background:radial-gradient(circle, rgba(245,165,36,.35), transparent 70%); top:40%; left:38%; }
.node { position:absolute; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:1.2rem; color:#fff; background:var(--slate); box-shadow:0 20px 40px -18px rgba(16,24,40,.5); will-change:transform; opacity:0; }
.node-1 { top:16%; left:44%; background:var(--spark); }
.node-2 { top:68%; left:8%; background:var(--data); }
.node-3 { top:22%; right:6%; background:var(--apps); }
.node-4 { bottom:12%; right:30%; background:var(--flow); }
@media (max-width:1023px) { .node-1,.node-3 { display:none; } }
.pulse { animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.scroll-hint { display:block; width:1px; height:36px; background:linear-gradient(var(--slate),transparent); animation:hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* Firma: flujo en vivo, con tilt 3D */
.flow-card { perspective:1200px; }
.flow-card-inner { background:#fff; border:1px solid var(--line); border-radius:22px; padding:1.5rem; box-shadow:0 40px 80px -40px rgba(16,24,40,.35); transform-style:preserve-3d; transition: transform .15s ease-out; }
.flow-steps { position:relative; display:flex; flex-direction:column; gap:.75rem; }
.flow-steps::before { content:""; position:absolute; left:22px; top:24px; bottom:24px; width:2px; background:repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px); }
.flow-step { position:relative; display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-radius:14px; border:1px solid var(--line); background:#fff; transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.flow-step b { display:block; font-size:.92rem; font-weight:600; }
.flow-step small { display:block; font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--slate); margin-top:2px; }
.flow-step > div { flex:1; }
.flow-time { font-family:"IBM Plex Mono",monospace; font-size:.65rem; color:var(--data); opacity:0; transition:opacity .3s; }
.flow-step.is-done .flow-time { opacity:1; }
.flow-icon { flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.1rem; color:#fff; background:var(--slate); position:relative; z-index:1; transition: transform .3s var(--ease); }
.flow-step[data-kind="trigger"] .flow-icon{background:var(--spark)} .flow-step[data-kind="apps"] .flow-icon{background:var(--apps)}
.flow-step[data-kind="data"] .flow-icon{background:var(--data)} .flow-step[data-kind="flow"] .flow-icon{background:var(--flow)}
.flow-step.is-active { border-color:var(--ink); box-shadow:0 10px 30px -18px rgba(16,24,40,.5); transform:translateX(6px); }
.flow-step.is-active .flow-icon { transform:scale(1.1) rotate(-6deg); }
.flow-step.is-active .flow-icon::before { content:""; position:absolute; inset:-3px; border-radius:14px; border:2px solid currentColor; opacity:.35; animation:ring 1s ease-out infinite; }
@keyframes ring { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.5);opacity:0} }
.flow-step.is-done .flow-icon::after { content:"✓"; position:absolute; right:-6px; bottom:-6px; width:18px; height:18px; border-radius:50%; background:var(--data); color:#fff; font-size:.65rem; display:grid; place-items:center; border:2px solid #fff; }

/* ---------- Marquee ---------- */
.marquee-wrap { background:var(--ink); color:#fff; padding:1.1rem 0; transform:rotate(-1.5deg) scale(1.03); margin:1rem 0 -1rem; overflow:hidden; box-shadow:0 20px 50px -30px rgba(16,24,40,.6); }
.marquee { display:flex; width:max-content; gap:0; will-change:transform; animation:marquee 40s linear infinite; }
.marquee:hover { animation-play-state:paused; }
.marquee span { font-family:"Sora",sans-serif; font-weight:700; font-size:clamp(1rem,2.2vw,1.4rem); letter-spacing:-.01em; padding:0 1.4rem; white-space:nowrap; display:inline-flex; align-items:center; gap:1.4rem; }
.marquee span::after { content:""; width:8px; height:8px; border-radius:50%; background:var(--spark); flex:none; }
.marquee span:nth-child(4n+2)::after{background:var(--flow)} .marquee span:nth-child(4n+3)::after{background:var(--data)} .marquee span:nth-child(4n)::after{background:var(--apps)}
@keyframes marquee { to { transform:translateX(-50%); } }

/* ---------- Números ---------- */
.num { background:var(--mist); padding:2rem 1.5rem; position:relative; overflow:hidden; }
.num::before { content:""; position:absolute; inset:0; background:#fff; transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease); }
.num:hover::before { transform:scaleY(1); }
.num > * { position:relative; }
.num-value { font-family:"Sora",sans-serif; font-weight:800; font-size:clamp(2.6rem,6vw,4.2rem); letter-spacing:-.04em; line-height:1; color:var(--ink); }
.num-value sup { font-size:.45em; color:var(--apps); vertical-align:top; margin-left:.05em; }
.num-label { margin-top:.6rem; color:var(--slate); font-size:.9rem; max-width:16rem; }

/* ---------- Historia: pin + scroll horizontal (desktop) ---------- */
.tl-section { background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.tl-section .eyebrow { color:var(--spark); }
.tl-pin { padding:6rem 0 4rem; }
.tl-progress { height:2px; background:rgba(255,255,255,.12); margin-top:2rem; border-radius:2px; overflow:hidden; }
.tl-progress-fill { height:100%; width:100%; background:linear-gradient(90deg,var(--apps),var(--flow),var(--data),var(--spark)); transform-origin:left; transform:scaleX(0); }
.tl-viewport { margin-top:3rem; }
.tl-rail { display:flex; flex-direction:column; gap:1.25rem; padding:0 1.25rem; }
.tl-card { position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:1.75rem; overflow:hidden; backdrop-filter:blur(4px); transition: border-color .4s, transform .4s var(--ease), background .4s; }
.tl-card:hover { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.07); transform:translateY(-6px); }
.tl-year { position:absolute; right:-.1em; top:-.2em; font-family:"Sora",sans-serif; font-weight:800; font-size:7rem; line-height:1; letter-spacing:-.06em; color:rgba(255,255,255,.05); pointer-events:none; user-select:none; }
.tl-kind { font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5rem; }
.tl-kind::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.tl-when { font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:rgba(255,255,255,.5); margin-left:auto; }
.tl-role { font-family:"Sora",sans-serif; font-weight:700; font-size:1.25rem; margin-top:1.1rem; letter-spacing:-.015em; line-height:1.2; }
.tl-org { color:rgba(255,255,255,.6); font-size:.9rem; margin-top:.3rem; }
.tl-story { color:rgba(255,255,255,.75); margin-top:1rem; line-height:1.65; font-size:.95rem; }
.tl-metric { margin-top:1.2rem; padding:.9rem 1rem; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.tl-metric b { display:block; font-family:"Sora",sans-serif; font-weight:800; font-size:1.7rem; letter-spacing:-.03em; color:var(--spark); line-height:1; }
.tl-metric small { display:block; font-size:.75rem; color:rgba(255,255,255,.6); margin-top:.3rem; }
.tl-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.1rem; }
.tl-tags .tag { font-family:"IBM Plex Mono",monospace; font-size:.66rem; padding:.3rem .55rem; border-radius:6px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); }
@media (min-width:1024px) {
  .tl-pin { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:5.5rem 0 3rem; }
  .tl-head { width:100%; }
  .tl-section .section-head { max-width:none; display:flex; align-items:baseline; gap:2rem; }
  .tl-section .section-title { font-size:clamp(1.9rem,3.4vw,2.6rem); }
  .tl-section .eyebrow { margin-bottom:0; flex:none; }
  .tl-progress { margin-top:1.5rem; }
  .tl-viewport { margin-top:2.5rem; overflow:visible; }
  .tl-rail { flex-direction:row; gap:1.5rem; padding-left:max(1.25rem, calc((100vw - 74rem)/2 + 2rem)); padding-right:8vw; will-change:transform; }
  .tl-card { flex:none; width:clamp(380px, 32vw, 460px); display:flex; flex-direction:column; }
  .tl-story { font-size:.9rem; }
  .tl-card[data-kind="result"] { width:clamp(420px, 36vw, 520px); border-color:rgba(245,165,36,.4); }
  .tl-tags { margin-top:auto; padding-top:1.1rem; }
}

/* ---------- Habilidades ---------- */
.bg-word { position:absolute; right:-2vw; top:8%; font-family:"Sora",sans-serif; font-weight:800; font-size:clamp(6rem,22vw,20rem); letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1px rgba(16,24,40,.08); pointer-events:none; user-select:none; line-height:1; }
.skill-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.6rem; position:relative; overflow:hidden; transform-style:preserve-3d; transition: box-shadow .4s, border-color .3s; }
.skill-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--c); }
.skill-card::after { content:""; position:absolute; inset:0; background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--c) 10%, transparent), transparent 40%); opacity:0; transition:opacity .4s; pointer-events:none; }
.skill-card:hover::after { opacity:1; }
.skill-card:hover { box-shadow:0 30px 60px -40px rgba(16,24,40,.5); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.skill-card h3 { font-family:"Sora",sans-serif; font-weight:700; font-size:1.05rem; position:relative; }
.skill-card p { color:var(--slate); font-size:.9rem; margin-top:.35rem; position:relative; }
.skill-chips { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.1rem; position:relative; }
.chip { font-size:.8rem; font-weight:500; padding:.4rem .7rem; border-radius:999px; border:1px solid var(--line); background:#fff; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.chip:hover { background:var(--c); color:#fff; border-color:transparent; transform:translateY(-3px) rotate(-1.5deg); }

/* ---------- Certificaciones / formación ---------- */
.cert-card { display:block; background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.6rem; position:relative; overflow:hidden; transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.cert-card::before { content:""; position:absolute; width:180px; height:180px; border-radius:50%; right:-70px; top:-70px; background:radial-gradient(circle, rgba(91,46,145,.14), transparent 70%); transition:transform .5s var(--ease); }
.cert-card:hover { transform:translateY(-6px); border-color:var(--apps); box-shadow:0 30px 50px -34px rgba(91,46,145,.5); }
.cert-card:hover::before { transform:scale(1.8); }
.cert-badge { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,var(--apps),var(--flow)); font-family:"Sora",sans-serif; font-weight:800; color:#fff; font-size:.9rem; position:relative; }
.cert-name { font-family:"Sora",sans-serif; font-weight:700; margin-top:1rem; line-height:1.3; position:relative; }
.cert-meta { font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--slate); margin-top:.5rem; position:relative; }
.edu-list { display:flex; flex-direction:column; gap:.5rem; }
.edu-list li { display:flex; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; background:#fff; border:1px solid var(--line); border-radius:14px; transition: transform .3s var(--ease), border-color .3s; }
.edu-list li:hover { transform:translateX(6px); border-color:var(--flow); }
.edu-list b { display:block; font-weight:600; font-size:.95rem; }
.edu-list small { display:block; color:var(--slate); font-size:.8rem; margin-top:.15rem; }
.edu-list span { font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--flow); white-space:nowrap; }

/* ---------- Contacto ---------- */
.contact-marquee { position:absolute; top:2rem; left:0; right:0; overflow:hidden; pointer-events:none; }
.contact-marquee div { display:flex; width:max-content; animation:marquee 30s linear infinite; }
.contact-marquee span { font-family:"Sora",sans-serif; font-weight:800; font-size:clamp(4rem,12vw,10rem); letter-spacing:-.05em; line-height:1; white-space:nowrap; padding-right:.4em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.12); }
.contact .eyebrow { color:var(--spark); }
.contact-list { display:flex; flex-direction:column; gap:.75rem; }
.contact-list li { opacity:0; }
.contact-list a,.contact-list div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.3rem; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); transition: background .25s, transform .3s var(--ease), border-color .25s; }
.contact-list a:hover { background:rgba(255,255,255,.08); border-color:var(--spark); transform:translateX(6px); }
.contact-list small { display:block; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.contact-list b { font-weight:600; }
.contact-list .arrow { transition:transform .3s var(--ease); }
.contact-list a:hover .arrow { transform:translate(4px,-4px); }

/* ---------- Estado inicial (GSAP anima) ---------- */
.reveal,.hero-eyebrow,.hero-copy,.hero-cta,.flow-card,.num,.tl-card,.skill-card,.cert-card,.scroll-cue { opacity:0; }

@media (prefers-reduced-motion:reduce) {
  .reveal,.hero-eyebrow,.hero-copy,.hero-cta,.flow-card,.num,.tl-card,.skill-card,.cert-card,.scroll-cue,.contact-list li,.node { opacity:1 !important; transform:none !important; }
  [data-split] .w > span,#hero-title .c { transform:none !important; opacity:1 !important; }
  .pulse,.scroll-hint,.marquee,.contact-marquee div { animation:none; }
  .tl-progress-fill { transform:scaleX(1); }
  .cursor { display:none !important; }
}