/* Efectos de la portada: foco del hero, tarjetas en 3D y terminal del proceso.
   Todo se desactiva con «reducir movimiento» y en pantallas táctiles. */

/* 1 · Foco de luz sobre la cuadrícula del hero */
.hero__spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background-image:linear-gradient(rgba(117,213,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(117,213,255,.5) 1px,transparent 1px),radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(117,213,255,.18),transparent 70%);
  background-size:48px 48px,48px 48px,100% 100%;
  -webkit-mask-image:radial-gradient(220px circle at var(--x,50%) var(--y,50%),#000,transparent 70%);
  mask-image:radial-gradient(220px circle at var(--x,50%) var(--y,50%),#000,transparent 70%)}
.hero.is-lit .hero__spot{opacity:1}
.hero__body{position:relative;z-index:1}

/* 4 · Tarjetas de proyectos que se inclinan en 3D */
.work-card{position:relative}
.work-card.is-tilting{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px);
  transition:transform .12s ease-out,border-color .25s}
.work-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.08),transparent 60%)}
.work-card.is-tilting::after{opacity:1}

/* 5 · Terminal que cuenta el proceso */
.term{margin-top:30px;max-width:440px;border-radius:10px;border:1px solid var(--border-hi);background:#05090f;
  font:13px/1.75 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.term__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--border)}
.term__bar i{width:10px;height:10px;border-radius:50%;background:#2a3446}
.term__bar span{margin-left:auto;font-size:11px;color:var(--ink-3)}
.term__body{padding:14px 16px;min-height:178px;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.term__body .p{color:var(--teal)}
.term__body .ok{color:var(--coral)}
.term__body .dim{color:var(--ink-3)}
.term .caret{display:inline-block;width:7px;height:1.05em;vertical-align:-2px;background:var(--coral);animation:term-blink 1s steps(1) infinite}
@keyframes term-blink{50%{opacity:0}}
.why-steps .why-item__n{display:flex;align-items:center;gap:8px}
.why-steps .why-item__n::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--border-hi);transition:background .3s,box-shadow .3s}
.why-steps.sync .why-item:not(.is-lit){opacity:.38}
.why-steps .why-item.is-lit .why-item__n::before,.why-steps:not(.sync) .why-item__n::before{background:var(--teal);box-shadow:0 0 0 4px rgba(128,232,192,.15)}
@media(max-width:768px){.term{font-size:12px}.term__body{min-height:215px}}

@media (prefers-reduced-motion:reduce){
  .hero__spot{display:none}
  .work-card.is-tilting{transform:none}
  .term .caret{animation:none}
  .why-steps.sync .why-item:not(.is-lit){opacity:1}
}