/* =========================================================
   BITSIDEAS — Por qué nosotros
   Cuatro tarjetas con un mecanismo SVG vivo cada una:
   animación suave en reposo, completa al pasar el cursor.
   ========================================================= */
.why{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin-top:clamp(52px,6vw,80px);position:relative;
}
/* Riel que une las cuatro tarjetas: se dibuja al entrar en pantalla */
.why::before{
  content:"";position:absolute;left:6%;right:6%;top:-26px;height:2px;border-radius:2px;
  background:var(--line);
}
.why::after{
  content:"";position:absolute;left:6%;top:-26px;height:2px;border-radius:2px;width:0;
  background:linear-gradient(90deg,var(--brand-500),var(--accent-400));
  transition:width 1.6s var(--ease-out) .2s;
}
.why.is-in::after{width:88%}

.why__item{
  position:relative;padding:30px 24px 26px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-elev);border:1px solid var(--line);
  transition:transform .55s var(--ease-out),box-shadow .5s var(--ease),border-color .4s var(--ease);
}
/* Halo que aparece desde la esquina superior al activar la tarjeta */
.why__item::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(120% 90% at 12% 0%,color-mix(in srgb,var(--accent-500) 13%,transparent),transparent 62%);
}
.why__item:hover,.why__item:focus-within{
  transform:translateY(-8px);box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb,var(--accent-500) 48%,var(--line));
}
.why__item:hover::before{opacity:1}
.why__item > *{position:relative}

/* Número grande de fondo */
.why__n{
  position:absolute;right:16px;top:8px;z-index:0;
  font-family:var(--font);font-weight:700;font-size:3.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--accent-500) 30%,transparent);
  transition:transform .6s var(--ease-out),-webkit-text-stroke-color .4s var(--ease);
}
.why__item:hover .why__n{
  transform:translateY(-4px) scale(1.08);
  -webkit-text-stroke-color:color-mix(in srgb,var(--accent-500) 62%,transparent);
}

/* ---------- Contenedor del icono ---------- */
.why__ico{
  width:64px;height:64px;margin-bottom:18px;border-radius:18px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent-500) 11%,transparent);
  color:var(--brand-600);
  transition:background .4s var(--ease),color .4s var(--ease),transform .55s var(--ease-out);
}
.why__item:hover .why__ico{
  background:color-mix(in srgb,var(--accent-500) 18%,transparent);
  color:var(--accent-600);transform:translateY(-3px);
}
.why__ico svg{
  width:38px;height:38px;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}

.why__item h3{font-size:1.05rem;margin-bottom:9px;letter-spacing:-.012em}
.why__item p{color:var(--muted);font-size:.92rem;line-height:1.6}

/* =========================================================
   Mecanismo 1 — Engranajes (ingeniería, no reventa)
   ========================================================= */
.m-gear-a{transform-origin:19px 20px;animation:gearCW 14s linear infinite}
.m-gear-b{transform-origin:33px 33px;animation:gearCCW 10s linear infinite}
.why__item:hover .m-gear-a{animation-duration:2.6s}
.why__item:hover .m-gear-b{animation-duration:1.9s}
@keyframes gearCW{to{transform:rotate(360deg)}}
@keyframes gearCCW{to{transform:rotate(-360deg)}}

/* =========================================================
   Mecanismo 2 — Candado que se abre (libres por decisión)
   ========================================================= */
.m-shackle{transform-origin:20px 22px;transition:transform .6s var(--ease-out)}
.why__item:hover .m-shackle{transform:translateY(-3px) rotate(-22deg)}
.m-keyhole{transition:transform .5s var(--ease-out) .1s}
.why__item:hover .m-keyhole{transform:scale(1.25)}
.m-spark{opacity:0;transform-origin:24px 30px}
.why__item:hover .m-spark{animation:sparkOut .8s var(--ease-out) .25s}
@keyframes sparkOut{
  0%{opacity:0;transform:scale(.4)}
  40%{opacity:1}
  100%{opacity:0;transform:scale(1.9)}
}

/* =========================================================
   Mecanismo 3 — Anillo de progreso + birrete (18+ años formando)
   ========================================================= */
.m-ring{
  stroke-dasharray:106;stroke-dashoffset:106;
  transform:rotate(-90deg);transform-origin:24px 24px;
  transition:stroke-dashoffset 1.5s var(--ease-out);
}
.why__item.is-in .m-ring{stroke-dashoffset:32}
.why__item:hover .m-ring{stroke-dashoffset:0;transition-duration:.9s}
.m-cap{transition:transform .55s var(--ease-out)}
.why__item:hover .m-cap{transform:translateY(-3px)}
.m-tassel{transform-origin:33px 18px;transition:transform .6s var(--ease-out)}
.why__item:hover .m-tassel{animation:tassel 1.4s var(--ease) infinite alternate}
@keyframes tassel{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}

/* =========================================================
   Mecanismo 4 — Conexión directa (sin intermediarios)
   ========================================================= */
.m-mid,.m-hop{transition:opacity .45s var(--ease),transform .5s var(--ease-out)}
.why__item:hover .m-mid{opacity:0;transform:scale(.4)}
.why__item:hover .m-hop{opacity:0}
.m-direct{
  stroke-dasharray:22;stroke-dashoffset:22;opacity:0;
  transition:stroke-dashoffset .7s var(--ease-out) .18s,opacity .3s var(--ease) .18s;
}
.why__item:hover .m-direct{stroke-dashoffset:0;opacity:1}
.m-pulse{opacity:0}
.why__item:hover .m-pulse{animation:pulseRun 1.5s var(--ease-out) .5s infinite}
@keyframes pulseRun{
  0%{opacity:0;transform:translateX(0)}
  15%{opacity:1}
  85%{opacity:1}
  100%{opacity:0;transform:translateX(22px)}
}

/* ---------- Cierre del discurso ---------- */
.why-close{
  max-width:62ch;margin:clamp(40px,5vw,66px) auto 0;text-align:center;
  font-size:1.14rem;line-height:1.6;color:var(--ink-2);
}
.why-close strong{
  color:var(--ink);font-weight:600;
  background:linear-gradient(transparent 62%,color-mix(in srgb,var(--accent-500) 32%,transparent) 62%);
  background-size:0% 100%;background-repeat:no-repeat;
  transition:background-size 1.1s var(--ease-out) .3s;
}
.why-close.is-in strong{background-size:100% 100%}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .why{grid-template-columns:repeat(2,1fr)}
  .why::before,.why::after{display:none}
}
@media (max-width:600px){.why{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .m-gear-a,.m-gear-b,.m-pulse,.m-tassel,.m-spark{animation:none}
  .m-ring{stroke-dashoffset:32}
  .m-direct{opacity:1;stroke-dashoffset:0}
}