/* =========================================================
   BITSIDEAS — Método en estilo plano técnico (blueprint)
   Retícula de dibujo, cotas, marcas de registro e iconos
   de trazo que se dibujan y se animan al interactuar.
   ========================================================= */
.bp-wrap{
  position:relative;overflow:hidden;isolation:isolate;
  /* Plano claro, lenguaje Fluent: papel neutro, superficies acrílicas y profundidad suave */
  background:linear-gradient(168deg,#fbfcfe 0%,#eef4fa 54%,#f7f9fc 100%);
  color:var(--ink-2);
  --bp-line:color-mix(in srgb,var(--brand-600) 62%,transparent);
  --bp-dim:color-mix(in srgb,var(--brand-600) 26%,transparent);
  --bp-ink:var(--ink);
  --bp-mono:ui-monospace,"Cascadia Mono","Consolas","Segoe UI Mono",monospace;
}
.bp-wrap .h2{color:var(--bp-ink)}
.bp-wrap .lead{color:var(--muted)}
.bp-wrap .eyebrow{color:var(--accent-600)}
.bp-wrap .container{position:relative;z-index:2}

/* Retícula del plano: trama fina y trama gruesa */
.bp-wrap::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 17px,rgba(14,122,171,.07) 17px 18px),
    repeating-linear-gradient(0deg,transparent 0 17px,rgba(14,122,171,.07) 17px 18px),
    repeating-linear-gradient(90deg,transparent 0 89px,rgba(14,122,171,.16) 89px 90px),
    repeating-linear-gradient(0deg,transparent 0 89px,rgba(14,122,171,.16) 89px 90px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 40%,transparent 92%);
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 40%,transparent 92%);
}
/* Marco y cajetín del plano */
.bp-frame{
  position:absolute;inset:26px;z-index:1;pointer-events:none;
  border:1px solid rgba(14,122,171,.18);border-radius:6px;
}
.bp-frame::before,.bp-frame::after{
  content:"";position:absolute;width:34px;height:34px;
  border:1px solid rgba(14,122,171,.36);
}
.bp-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.bp-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.bp-stamp{
  position:absolute;right:34px;bottom:34px;z-index:2;
  font-family:var(--bp-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--brand-600) 45%,transparent);text-align:right;line-height:1.7;
}

/* ---------------- Lista de fases ---------------- */
.bp{position:relative;display:grid;gap:0;margin-top:clamp(40px,5vw,64px)}

/* Eje vertical: guía discontinua y relleno que avanza con el scroll */
.bp__rail{position:absolute;left:47px;top:18px;bottom:32px;width:2px;z-index:0}
.bp__rail::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,var(--bp-dim) 0 7px,transparent 7px 14px);
}
.bp__rail i{
  position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--accent-400),var(--brand-500));
  box-shadow:0 0 12px color-mix(in srgb,var(--accent-500) 55%,transparent);
  transition:height 1.8s var(--ease-out);
}
.bp.is-in .bp__rail i{height:100%}

.bp__step{
  position:relative;display:grid;grid-template-columns:96px 1fr;
  gap:26px;padding:24px 0 34px;align-items:start;
}
.bp__step:last-child{padding-bottom:0}

/* ---------------- Nodo con el icono ---------------- */
.bp__node{
  position:relative;width:96px;height:96px;z-index:2;
  display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--brand-600) 20%,var(--line));border-radius:14px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 1px 2px rgba(43,39,51,.06), 0 6px 16px rgba(43,39,51,.07);
  transition:border-color .45s var(--ease),background .45s var(--ease),
             transform .55s var(--ease-out),box-shadow .5s var(--ease);
}
.bp__step:hover .bp__node,.bp__step:focus-within .bp__node{
  border-color:var(--accent-500);background:#fff;
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-500) 12%,transparent),
             0 10px 24px rgba(43,39,51,.12), 0 24px 48px rgba(43,39,51,.10);
}
/* Marcas de registro en las esquinas del nodo */
.bp__node::before,.bp__node::after{
  content:"";position:absolute;width:13px;height:13px;border:1px solid var(--accent-600);
  opacity:0;transition:opacity .4s var(--ease),transform .5s var(--ease-out);
}
.bp__node::before{top:-5px;left:-5px;border-right:0;border-bottom:0;transform:translate(5px,5px)}
.bp__node::after{bottom:-5px;right:-5px;border-left:0;border-top:0;transform:translate(-5px,-5px)}
.bp__step:hover .bp__node::before,.bp__step:hover .bp__node::after,
.bp__step:focus-within .bp__node::before,.bp__step:focus-within .bp__node::after{opacity:1;transform:none}

.bp__num{
  position:absolute;top:6px;left:9px;
  font-family:var(--bp-mono);font-size:.62rem;letter-spacing:.1em;
  color:color-mix(in srgb,var(--brand-600) 55%,transparent);transition:color .4s var(--ease);
}
.bp__step:hover .bp__num{color:var(--accent-600)}

.bp__ico{width:60px;height:60px;overflow:visible;display:block}
.bp__ico *{
  fill:none;stroke:var(--bp-line);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.bp__step:hover .bp__ico *{stroke:var(--accent-600)}
.bp__ico *{transition:stroke .4s var(--ease)}

/* Línea guía del nodo hacia la ficha */
.bp__lead{
  position:absolute;top:47px;left:96px;height:1px;width:26px;
  background:var(--bp-dim);z-index:1;transform-origin:0 50%;transform:scaleX(0);
  transition:transform .5s var(--ease-out),background .4s var(--ease);
}
.bp__step:hover .bp__lead{transform:scaleX(1);background:var(--accent-500)}

/* ---------------- Ficha de la fase ---------------- */
.bp__plate{
  position:relative;padding:22px 26px 24px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--brand-600) 12%,var(--line));
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .55s var(--ease-out);
}
.bp__step:hover .bp__plate,.bp__step:focus-within .bp__plate{
  border-color:color-mix(in srgb,var(--accent-500) 42%,transparent);background:#fff;
  transform:translateX(5px);box-shadow:0 8px 20px rgba(43,39,51,.08), 0 20px 44px rgba(43,39,51,.08);
}
.bp__meta{
  display:block;font-family:var(--bp-mono);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in srgb,var(--brand-600) 70%,transparent);margin-bottom:9px;
}
.bp__plate h3{
  font-family:var(--font-light);font-weight:300;font-size:clamp(1.5rem,2.6vw,2rem);
  letter-spacing:.01em;color:var(--bp-ink);margin-bottom:10px;
}
.bp__plate p{color:var(--muted);font-size:.97rem;line-height:1.62;max-width:62ch}

/* Cota inferior, como una acotación de plano */
.bp__dim{
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  font-family:var(--bp-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-600);
}
.bp__dim i{
  display:block;width:0;height:1px;background:currentColor;position:relative;
  transition:width .6s var(--ease-out);
}
.bp__step:hover .bp__dim i{width:46px}
.bp__dim i::before,.bp__dim i::after{
  content:"";position:absolute;top:-3px;width:1px;height:7px;background:currentColor;
}
.bp__dim i::before{left:0}
.bp__dim i::after{right:0}

/* =========================================================
   Iconos técnicos animados
   ========================================================= */
.bp__ico [class^="bpx"]{stroke-dasharray:var(--l,160);stroke-dashoffset:var(--l,160);
  transition:stroke-dashoffset 1.2s var(--ease-out)}
.bp__step.is-in .bp__ico [class^="bpx"]{stroke-dashoffset:0}

/* 1 · Diagnóstico — la lupa recorre las barras medidas */
.bpx-axis{--l:80}
.bpx-bars{--l:70}
.bp-lens{transform-origin:32px 32px}
.bp__step.is-in .bp-lens{animation:bpScan 5.5s var(--ease) infinite}
.bp__step:hover .bp-lens{animation-duration:2.4s}
@keyframes bpScan{0%,100%{transform:translateX(-9px)}50%{transform:translateX(11px)}}

/* 2 · Prueba de concepto — el cubo se ensambla */
.bp-cube > *{transition:transform .7s var(--ease-out)}
.bp-cube .bpx-top{transform:translateY(-9px)}
.bp-cube .bpx-left{transform:translate(-8px,5px)}
.bp-cube .bpx-right{transform:translate(8px,5px)}
.bp__step:hover .bp-cube > *,.bp__step:focus-within .bp-cube > *{transform:none}
.bpx-top{--l:96}.bpx-left{--l:86}.bpx-right{--l:86}

/* 3 · Despliegue — el cohete sube y el empuje parpadea */
.bp-rocket{transition:transform .6s var(--ease-out)}
.bp__step:hover .bp-rocket{transform:translateY(-5px)}
.bpx-body{--l:120}.bpx-fins{--l:44}.bpx-base{--l:40}
.bp-thrust{stroke:var(--accent-600);stroke-dasharray:4 5;opacity:0}
.bp__step.is-in .bp-thrust{opacity:1;animation:bpThrust .7s linear infinite}
@keyframes bpThrust{to{stroke-dashoffset:-18}}

/* 4 · Evolución — el bucle gira y la tendencia se traza */
.bp-loop{transform-origin:32px 32px}
.bp__step.is-in .bp-loop{animation:bpSpin 9s linear infinite}
.bp__step:hover .bp-loop{animation-duration:3s}
@keyframes bpSpin{to{transform:rotate(360deg)}}
.bpx-loop{--l:105}.bpx-trend{--l:64}
.bpx-trend{stroke:var(--accent-600)}
.bp__step:hover .bpx-trend{animation:bpRedraw 1s var(--ease-out)}
@keyframes bpRedraw{from{stroke-dashoffset:64}to{stroke-dashoffset:0}}

/* ---------------- Responsive ---------------- */
@media (max-width:760px){
  .bp__step{grid-template-columns:1fr;gap:16px;padding-bottom:28px}
  .bp__rail,.bp__lead{display:none}
  .bp__node{width:74px;height:74px}
  .bp__ico{width:46px;height:46px}
  .bp-stamp{display:none}
  .bp-frame{inset:14px}
}
@media (prefers-reduced-motion:reduce){
  .bp-lens,.bp-loop,.bp-thrust{animation:none}
  .bp__ico [class^="bpx"]{stroke-dashoffset:0}
  .bp__rail i{height:100%;transition:none}
}