/* ============================================================
   Auditas — Mapa del sitio (flowchart visual). Página NO enlazada
   todavía desde la navegación (header/footer) — pendiente de
   autorización del cliente; existe en el código para revisión.
   Reutiliza hero V2.1 (sin pills/CTA/icono, igual que politicas.html)
   y un fondo de puntos propio (js/sitemap-dots.js) con auto-loop +
   parallax de mouse combinados.
   ============================================================ */

.stmap-section { position: relative; overflow: hidden; isolation: isolate; }
.stmap-section .sitemap-dots {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.stmap-section .subsection__inner { position: relative; z-index: 1; }

.stmap {
  --line: var(--gray30);
  max-width: 1080px;
  margin-inline: auto;
  position: relative;
}

.stmap__intro {
  text-align: center;
  max-width: 620px;
  margin: 0 auto var(--sp-56);
}
.stmap__intro p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray70);
}

/* ---- Nodo raíz (Inicio) ---- */
.stmap__root {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-8);
}
.stmap__rootcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 40px;
  border-radius: var(--r-l);
  background: var(--blackdit);
  box-shadow: var(--sh-dark);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.stmap__rootcard:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.stmap__rootcard img { height: 26px; width: auto; }
.stmap__rootcard span {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--gray30);
}

/* ---- Tronco vertical que recorre todas las ramas ---- */
.stmap__trunk {
  width: 2px;
  height: 40px;
  margin: 0 auto;
  background: var(--grad-yellow-h);
  opacity: 0.85;
}

/* ---- Rama (grupo de nodos) ---- */
.stmap__branch { position: relative; padding-top: 36px; margin-bottom: var(--sp-56); }
.stmap__branch::before {
  /* línea vertical que baja del tronco hacia el título de la rama */
  content: "";
  position: absolute;
  top: -36px; left: 50%;
  width: 2px; height: 36px;
  background: var(--gray30);
  transform: translateX(-1px);
}
.stmap__branch:first-of-type::before { background: var(--grad-yellow-h); opacity: 0.85; }

.stmap__branchTitle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto var(--sp-28);
  padding: 8px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--gray20);
  background: var(--whitef);
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: 15px;
  color: var(--blackdit);
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
}
.stmap__branchTitle .stmap__count {
  font-family: var(--font-body);
  font-weight: var(--fw-reg);
  font-size: 12px;
  color: var(--gray60);
}

/* Línea que baja del título hacia la cuadrícula de nodos */
.stmap__branch .stmap__grid {
  position: relative;
  padding-top: 30px;
}
.stmap__branch .stmap__grid::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 2px; height: 30px;
  background: var(--gray30);
  transform: translateX(-1px);
}

/* ---- Cuadrícula de nodos hoja ----
   Flexbox con ancho FIJO por tarjeta (no grid auto-fit): con grid,
   "repeat(auto-fit, minmax(min, max-fijo))" cuenta cuántas columnas
   caben usando el TECHO (max) de cada track, no el piso — así que
   una rama con menos tarjetas (p. ej. "Externos", 2) terminaba con
   columnas más anchas que las de una rama con 3+ tarjetas, rompiendo
   la jerarquía visual (confirmado midiendo el ancho real: 360px vs
   235px). Con flexbox + flex-basis fijo + flex-grow:0, cada tarjeta
   mide siempre lo mismo sin importar cuántas haya en la rama; la fila
   sobrante queda como espacio en blanco centrado, no estira tarjetas. */
.stmap__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-16);
}

.stmap__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-m);
  background: var(--whitef);
  border: 1px solid var(--gray20);
  text-decoration: none;
  box-shadow: var(--sh-xs);
  flex: 0 0 220px; /* grow:0 y shrink:0 — ancho siempre fijo, nunca se deforma por fila incompleta */
  min-width: 0; /* sin esto, el texto largo de algunos títulos (p. ej. "Implementación NIAS") empuja la tarjeta más allá de su ancho fijo — mismo bug de min-width:auto ya visto en policies.css */
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.stmap__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-m);
  border-color: var(--yelludit);
}
.stmap__card:hover .stmap__cardIcon { transform: scale(1.12); }
.stmap__cardIcon {
  flex: none;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast) var(--ease-spring);
}
.stmap__cardIcon img { width: 100%; height: 100%; }
.stmap__cardText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stmap__cardText strong {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: 14.5px;
  color: var(--blackdit);
  line-height: 1.3;
}
.stmap__cardText span {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gray60);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .stmap__card, .stmap__grid--services .stmap__card { flex-basis: calc(50% - var(--sp-16) / 2); }
}
@media (max-width: 400px) {
  .stmap__card, .stmap__grid--services .stmap__card { flex-basis: 100%; }
}