/* ============================================================
   Sistema de diseño · irvingsoriano.com
   Nace del tablero "Dame la Vida": mismos tokens, mismo lenguaje.
   ============================================================ */
:root{
  --bg-base:#0A0A0A; --bg-surface:#141414; --bg-surface-2:#1C1C1C; --bg-lane:#0F0F0F; --bg-input:#070707;
  --border-default:#262626; --border-strong:#3A3A3A;
  --text-primary:#EDEDED; --text-secondary:#A3A3A3; --text-muted:#6B6B6B;
  --silver:#D4D4D4; --silver-dim:rgba(212,212,212,.10);
  --color-error:#E5484D; --color-warn:#E2A336; --color-ok:#7FB89A; --color-link:#9DB4CF;
  /* áreas (de la paleta del tablero) */
  --data:#5B8DEF; --ux:#B79CC9; --web:#7FB89A; --ai:#E2A336; --foto:#D9928B; --tool:#9DB4CF; --cloud:#CDB08A;
  --font-display:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px;
  --shadow-card:0 6px 24px rgba(0,0,0,.45);
  --transition-base:all 180ms ease-out;
  color-scheme:dark;
}
*{box-sizing:border-box}
*::selection{background:rgba(212,212,212,.22);color:#fff}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{background:var(--bg-base)}
body{
  margin:0; color:var(--text-secondary);
  font:15px/1.6 var(--font-body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  background:radial-gradient(1200px 500px at 15% -10%, rgba(255,255,255,.045), transparent 60%), var(--bg-base);
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--text-primary); line-height:1.08; letter-spacing:-.01em; margin:0; font-weight:800}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
:focus-visible{outline:2px solid var(--silver); outline-offset:2px}
canvas#sky{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none}
.wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; display:grid; gap:20px}
.eyebrow{font:600 11px/1.3 var(--font-display); letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted)}
.motto{font:italic 500 13px/1.2 var(--font-display); letter-spacing:.04em; color:var(--text-muted)}
.lead{font-size:17px; color:var(--text-secondary); max-width:64ch}

/* ---------- HEADER / NAV (del tablero) ---------- */
header.top{
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center;
  background:linear-gradient(135deg, rgba(22,22,22,.30), rgba(12,12,12,.16) 60%);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border:1px solid var(--border-default); border-radius:var(--radius-xl);
  padding:18px 24px; box-shadow:var(--shadow-card);
}
.brand{display:flex; align-items:center; gap:16px; min-width:0}
.logo{width:46px; height:auto; display:block; filter:drop-shadow(0 0 14px rgba(255,255,255,.08))}
.brand h1{font:300 clamp(22px,3.4vw,34px)/1 var(--font-display); color:var(--text-primary); letter-spacing:.01em}
.brand .eyebrow{margin:0 0 7px}
.brand .motto{margin:8px 0 0}
.head-right{display:flex; align-items:center; gap:12px; justify-self:end}
.lang{display:inline-flex; border:1px solid var(--border-strong); border-radius:99px; overflow:hidden}
.lang button{padding:7px 12px; font:700 12px/1 var(--font-display); color:var(--text-muted)}
.lang button[aria-pressed="true"]{background:var(--silver); color:#0A0A0A}
.nav{grid-column:1/-1; display:flex; justify-content:center}
.seg2{display:flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--bg-input); border:1px solid var(--border-default); border-radius:var(--radius-md)}
.seg2 a{
  height:38px; padding:0 18px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:8px;
  font:700 13.5px var(--font-display); color:var(--text-muted); transition:var(--transition-base); white-space:nowrap;
}
.seg2 a:hover{color:var(--text-primary)}
.seg2 a[aria-current="page"]{background:var(--bg-surface-2); color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--border-strong)}
.burger{display:none; width:40px; height:40px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); align-items:center; justify-content:center}
.burger svg{width:20px; height:20px; stroke:var(--text-primary); fill:none; stroke-width:2; stroke-linecap:round}

/* ---------- BOTONES / CHIPS ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 20px; border-radius:99px; font:700 14px var(--font-display); border:1px solid transparent; transition:var(--transition-base); white-space:nowrap}
.btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.btn.primary{background:var(--silver); color:#0A0A0A}
.btn.primary:hover{background:#fff; transform:translateY(-1px); box-shadow:0 10px 28px rgba(212,212,212,.18)}
.btn.ghost{background:transparent; color:var(--text-primary); border-color:var(--border-strong)}
.btn.ghost:hover{border-color:var(--silver); background:var(--bg-surface-2)}
.chip{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 15px; border-radius:99px; border:1px solid var(--border-strong); font:700 13px var(--font-display); color:var(--text-primary); transition:var(--transition-base)}
.chip:hover{border-color:var(--c,var(--silver)); background:color-mix(in oklab, var(--c,var(--silver)) 10%, transparent)}
.chip.solid{background:var(--c,var(--silver)); border-color:var(--c,var(--silver)); color:#0A0A0A}
.chip svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- SECCIONES / PANELES ---------- */
.panel{background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-xl); padding:clamp(22px,3vw,36px)}
.sect-head{max-width:70ch}
.sect-head .eyebrow{margin-bottom:12px}
.sect-head h2{font-size:clamp(24px,3.6vw,38px); font-weight:900}
.sect-head p{margin-top:14px}
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease-out, transform .6s ease-out}
.reveal.in{opacity:1; transform:none}

/* ---------- PÁGINA ---------- */
.page{display:grid; gap:36px; padding:24px 0 80px}
.pagehead{display:grid; gap:12px}
.pagehead .eyebrow{color:var(--acc,var(--text-muted))}
.pagehead h2{font-size:clamp(28px,5vw,48px); font-weight:900; color:#fff}

/* ---------- lanes tipo tablero ---------- */
.lanes{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.lane{background:var(--bg-lane); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:16px; display:grid; gap:12px; align-content:start}
.lane-h{display:flex; align-items:center; gap:9px; font:700 12px var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary)}
.lane-h .dot{width:9px; height:9px; border-radius:50%; background:var(--c,var(--text-muted))}

/* ---------- card de proyecto ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{position:relative; display:flex; flex-direction:column; background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:20px; overflow:hidden; transition:var(--transition-base)}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--c,var(--border-strong)); opacity:.9}
.card:hover{transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--shadow-card)}
.card-top{display:flex; align-items:center; gap:9px; margin-bottom:13px}
.card-top .dot{width:9px; height:9px; border-radius:50%; background:var(--c)}
.card-area{font:700 10.5px var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--c)}
.card-flag{margin-left:auto; font:700 9.5px var(--font-display); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); border:1px solid var(--border-strong); padding:4px 8px; border-radius:99px}
.card h3{font-size:18px; margin:0 0 7px; font-weight:800}
.card p{margin:0 0 16px; font-size:13.5px; color:var(--text-secondary); flex:1}
.card-foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.card-foot a{display:inline-flex; align-items:center; gap:6px; font:700 12.5px var(--font-display); color:var(--text-secondary); transition:color .15s}
.card-foot a:hover{color:var(--text-primary)}
.card-foot svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.card-lang{margin-left:auto; font:600 11.5px var(--font-display); color:var(--text-muted); display:inline-flex; align-items:center; gap:6px}

/* ---------- filtros (seg tipo tablero) ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px}
.filters button{height:36px; padding:0 15px; border-radius:99px; border:1px solid var(--border-default); background:var(--bg-surface); font:700 12.5px var(--font-display); color:var(--text-secondary); transition:var(--transition-base)}
.filters button[aria-pressed="true"]{border-color:var(--text-primary); background:var(--text-primary); color:#0A0A0A}
.filters button:hover:not([aria-pressed="true"]){border-color:var(--border-strong); color:var(--text-primary)}

/* ---------- camino / road (firma del tablero) ---------- */
.road{position:relative; padding-left:38px}
.road::before{content:""; position:absolute; left:13px; top:6px; bottom:6px; width:3px; border-radius:99px; background:linear-gradient(var(--data),var(--foto),var(--ux),var(--silver)); opacity:.5}
.road-node{position:relative; padding:0 0 34px}
.road-node:last-child{padding-bottom:0}
.road-node::before{content:""; position:absolute; left:-32px; top:3px; width:15px; height:15px; border-radius:50%; background:var(--bg-base); border:3px solid var(--c); box-shadow:0 0 0 4px rgba(10,10,10,.8)}
.road-node .yr{font:700 12px var(--font-display); letter-spacing:.06em; color:var(--c)}
.road-node h3{font-size:18px; margin:7px 0 3px}
.road-node .where{color:var(--text-secondary); font-size:14px}
.road-node .note{color:var(--text-muted); font-size:12.5px; margin-top:3px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--border-default); margin-top:10px; padding:26px 0; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; color:var(--text-muted); font:600 12.5px var(--font-display)}

/* ---------- responsive ---------- */
@media (max-width:860px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  header.top{grid-template-columns:auto 1fr; padding:16px}
  .head-right{grid-column:1/-1; justify-self:start}
  .nav .seg2{display:none; width:100%}
  .nav .seg2.open{display:grid; grid-auto-flow:row}
  .nav .seg2.open a{height:44px; justify-content:flex-start}
  .burger{display:inline-flex}
  .cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} .reveal{opacity:1; transform:none}}