/* Cómo funciona: árbol del proceso que se dibuja con código (SVG + DOM) */
.tree { position: relative; margin-top: clamp(48px, 6vw, 80px); }

/* Conectores: capa decorativa encima, sin interceptar el puntero */
.tree-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 2;
}
.tree-lines path { fill: none; stroke-linecap: round; }
.tree-branch { stroke: url(#tree-grad); stroke-width: 1.5; }
.tree-spine, .tree-tick { stroke: #4A3B31; stroke-width: 1.25; }
.tree-trail { stroke: var(--sol); stroke-width: 2; opacity: .85; }
.tree-pulse { opacity: 0; transition: opacity .35s ease; }
.tree-pulse.is-on { opacity: 1; transition-duration: .12s; }

/* Raíz */
.tree-root {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px; width: max-content; margin: 0 auto;
  padding: 13px 22px 13px 18px; border-radius: 999px;
  background: #17120F; box-shadow: inset 0 0 0 1px var(--linea);
  font: 600 1.0625rem/1 var(--display); letter-spacing: -.01em; color: var(--ceniza);
  transition: color .6s ease, box-shadow .6s ease;
}
.tree-root::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--ember); opacity: 0; transition: opacity .6s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tree-root-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--borde-campo); transition: background .6s ease, box-shadow .6s ease;
}
.tree-root.is-on { color: var(--hueso); box-shadow: inset 0 0 0 1px transparent, 0 0 44px -8px rgba(252, 74, 3, .55); animation: tree-breathe 3.6s ease-in-out .6s infinite; }
.tree-root.is-on::before { opacity: 1; }
.tree-root.is-on .tree-root-dot { background: var(--sol); box-shadow: 0 0 0 4px rgba(255, 138, 18, .16), 0 0 12px 2px rgba(252, 74, 3, .8); }
@keyframes tree-breathe {
  50% { box-shadow: inset 0 0 0 1px transparent, 0 0 64px -6px rgba(252, 74, 3, .75); }
}

/* Pasos: círculo y título en una fila, descripción y hojas sangradas */
.tree .steps {
  margin: clamp(96px, 9vw, 132px) 0 0;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(20px, 2.4vw, 36px);
}
.tree .steps > li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-content: start;
}
.tree .step-n { grid-column: 1; grid-row: 1; }
/* En escritorio, título, descripción y hojas se alinean entre columnas */
@media (min-width: 961px) {
  @supports (grid-template-rows: subgrid) {
    .tree .steps { grid-template-rows: auto auto auto; row-gap: 0; }
    .tree .steps > li { grid-row: span 3; grid-template-rows: subgrid; }
  }
}
.tree .step-n::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 138, 18, .55); opacity: 0;
}
.tree .steps > li.is-ping .step-n::after { animation: tree-ping .8s ease-out; }
@keyframes tree-ping {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 138, 18, .6); }
  100% { opacity: 0; box-shadow: 0 0 0 12px rgba(255, 138, 18, 0); }
}
.tree .steps h3 {
  grid-column: 2; grid-row: 1; align-self: center; margin: 0;
  font-size: clamp(1.0625rem, 1.55vw, 1.375rem); line-height: 1.15; overflow-wrap: anywhere;
}
.tree .steps p { grid-column: 2; margin-top: 10px; font-size: .9375rem; line-height: 1.55; max-width: 30ch; }
.tree .steps > li > :is(h3, p) { transition: opacity .6s ease; }
.tree.is-js .steps > li:not(.is-on) > :is(h3, p) { opacity: .4; }

/* Hojas: palabras clave */
.tree-leaves {
  grid-column: 2; list-style: none; margin: 22px 0 0 -10px; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.tree-leaves li {
  padding: 8px 13px; border-radius: 10px; max-width: 100%;
  background: #17120F; box-shadow: inset 0 0 0 1px var(--linea);
  font: 500 .875rem/1.3 var(--body); color: var(--hueso);
  transition: opacity .45s ease, transform .5s cubic-bezier(.2, .9, .3, 1.25), box-shadow .5s ease, color .5s ease;
}
.tree.is-js .tree-leaves li { opacity: 0; transform: translateX(-10px) scale(.94); }
.tree.is-js .tree-leaves li.is-in { opacity: 1; transform: none; }
.tree .tree-leaves li.is-hit {
  color: #fff; transition-duration: .15s;
  box-shadow: inset 0 0 0 1px var(--sol), 0 0 22px -2px rgba(252, 74, 3, .55);
}

/* Escritorio angosto: columnas más compactas para que nada se parta */
@media (min-width: 961px) and (max-width: 1180px) {
  .tree .steps { column-gap: 18px; }
  .tree .steps > li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; }
  .tree .step-n { width: 36px; height: 36px; font-size: .875rem; }
  .tree .steps h3 { font-size: 1rem; overflow-wrap: normal; }
  .tree .steps p { font-size: .875rem; }
  .tree-leaves { margin-left: -4px; }
  .tree-leaves li { padding: 7px 10px; font-size: .8125rem; white-space: nowrap; }
}

.is-paused .tree *, .is-paused .tree *::before, .is-paused .tree *::after { animation-play-state: paused !important; }

/* Tableta y móvil: raíz arriba a la izquierda y tronco por la izquierda */
@media (max-width: 960px) {
  .tree-root { margin: 0; }
  .tree .steps {
    grid-template-columns: minmax(0, 1fr); row-gap: 44px;
    margin-top: 40px; padding-left: 52px; max-width: 640px;
  }
  .tree .steps h3 { font-size: 1.375rem; }
  .tree .steps p { max-width: 42ch; }
}
@media (max-width: 560px) {
  .tree .steps { padding-left: 44px; row-gap: 40px; }
  .tree .steps > li { column-gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tree-root.is-on { animation: none; }
  .tree-leaves li, .tree .steps > li > :is(h3, p) { transition: none; }
}