/* ===========================================================================
   PerimetroX — marketing.css (rediseño "Signal & Control", home)
   EXTENSIÓN de assets/styles.css (cárgalo ANTES). Reutiliza tokens (:root),
   .glass, .card-hover, .icon-badge, .kicker, .section-head, .h-display,
   .lead. Aquí solo viven los componentes nuevos de index.html: hero (mapa
   de superficie), punto ciego, capas de análisis, stepper genérico y
   paquetes/confianza.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Hero: línea de confianza
   -------------------------------------------------------------------------- */
.trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 600;
  /* El hero tiene fondo oscuro (burdeos): var(--text-muted) es un gris pensado
     para fondo claro y quedaba casi ilegible aquí. Mismo tono que .hero-sub. */
  color: rgba(255, 255, 255, 0.86);
}
.trust-line li { display: inline-flex; align-items: center; gap: 7px; }
.trust-line svg { width: 17px; height: 17px; color: var(--teal); flex: none; }

/* ---------------------------------------------------------------------------
   Stepper genérico (mapa de superficie del hero + "Cómo funciona").
   Por defecto TODO el contenido está visible (sin JS): una lista simple de
   tarjetas. Cuando app.js activa el stepper (.is-interactive), aparecen las
   pestañas inyectadas y solo se muestra la tarjeta activa.
   -------------------------------------------------------------------------- */
.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.step-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-solid);
  padding: 16px 18px;
}
.step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}
.step-num { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; font-weight: 700; color: var(--text-dim); }
.step-icon { display: inline-flex; color: var(--brand); }
.step-icon svg { width: 18px; height: 18px; }
.step-desc { margin: 0; font-size: 0.87rem; line-height: 1.55; color: var(--text-muted); }

.step-tabs { display: none; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.is-interactive .step-tabs { display: flex; }
.step-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.step-tab .step-num { color: inherit; opacity: 0.6; }
.step-tab .step-icon { color: inherit; }
.step-tab.active { background: var(--brand-dark); border-color: var(--brand-dark); color: #ffffff; }
.step-tab.active .step-num { opacity: 0.85; }
.step-tab:hover { border-color: var(--line-strong); }

.is-interactive .step-item { display: none; }
.is-interactive .step-item.step-item-active {
  display: block;
  animation: stepFade 0.3s var(--ease);
}
@keyframes stepFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Mapa de superficie (hero): rediseño "riel conectado" — es lo primero que
   se ve al abrir la página, así que el stepper genérico de arriba (pills de
   texto plano) se sobreescribe aquí con un anillo decorativo, un riel de 9
   nodos numerados conectados por líneas, y una tarjeta activa tipo "glass"
   con glow, en vez de una caja blanca plana. Todo queda bajo .xm para no
   afectar el stepper de "Cómo funciona" (fondo claro), que reusa las mismas
   clases .step-tabs/.step-tab/.step-item.
   -------------------------------------------------------------------------- */
.xm { position: relative; isolation: isolate; }
.xm-ring {
  position: absolute;
  inset: 4% 4%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(4, 216, 245, 0.14);
  background: conic-gradient(from 0deg, transparent 0% 84%, rgba(4, 216, 245, 0.9) 92%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  opacity: 0.65;
  animation: xmSpin 10s linear infinite;
}
.xm::before {
  content: "";
  position: absolute;
  inset: -30px -18px auto -18px;
  height: 200px;
  background: radial-gradient(closest-side, rgba(4, 216, 245, 0.14), transparent 72%);
  filter: blur(22px);
  pointer-events: none;
  z-index: -1;
}
@keyframes xmSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .xm-ring { animation: none; } }

/* Riel de 9 nodos numerados conectados — reemplaza las pills de texto */
.xm .step-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 22px;
  padding: 4px 2px;
}
.xm .step-tab {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  font-size: 0;
}
.xm .step-tab .step-icon { display: none; }
.xm .step-tab::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  margin: 0 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.25s var(--ease);
}
.xm .step-tab:last-child::after { content: none; }
.xm .step-tab .step-num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.xm .step-tab:hover .step-num { border-color: rgba(4, 216, 245, 0.55); color: #ffffff; }
.xm .step-tab.active .step-num {
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  border-color: transparent;
  color: #072024;
  transform: scale(1.14);
  box-shadow: 0 0 0 5px rgba(4, 216, 245, 0.16), 0 10px 22px -8px rgba(4, 216, 245, 0.70);
}
@media (prefers-reduced-motion: no-preference) {
  .xm .step-tab.active .step-num { animation: xmPulse 2.4s ease-out infinite; }
}
@keyframes xmPulse {
  0% { box-shadow: 0 0 0 5px rgba(4, 216, 245, 0.16), 0 10px 22px -8px rgba(4, 216, 245, 0.70); }
  60% { box-shadow: 0 0 0 9px rgba(4, 216, 245, 0), 0 10px 22px -8px rgba(4, 216, 245, 0.70); }
  100% { box-shadow: 0 0 0 5px rgba(4, 216, 245, 0), 0 10px 22px -8px rgba(4, 216, 245, 0.70); }
}

/* Tarjeta activa: glass con glow, sobre el fondo oscuro del hero */
.xm .step-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.xm .step-head {
  align-items: center;
  gap: 14px;
  font-size: 1.08rem;
  color: #ffffff;
  margin-bottom: 10px;
}
.xm .step-num { display: none; }
.xm .step-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  background: linear-gradient(135deg, rgba(4, 216, 245, 0.22), rgba(4, 154, 237, 0.12));
  border: 1px solid rgba(4, 216, 245, 0.38);
}
.xm .step-icon svg { width: 21px; height: 21px; }
.xm .step-desc { color: rgba(255, 255, 255, 0.80); font-size: 0.93rem; }
@media (max-width: 480px) {
  .xm .step-tab .step-num { width: 24px; height: 24px; font-size: 10.5px; }
}

/* Cómo funciona: fila de 5 en escritorio (sin JS, las 5 tarjetas visibles a
   la vez); en cuanto el stepper activa .is-interactive solo queda 1 tarjeta
   visible, así que vuelve a una sola columna para que ocupe el ancho
   completo y quede centrada — si no, la tarjeta activa se queda encogida en
   su columna original de 1/5 (a menudo la más a la izquierda). */
.hif .step-list-row { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
  .hif .step-list-row { grid-template-columns: 1fr; }
}
.is-interactive .step-list-row { grid-template-columns: 1fr; }
.hif.is-interactive .step-tabs { justify-content: center; }
.hif.is-interactive .step-item.step-item-active {
  max-width: 640px;
  margin-inline: auto;
  padding: 26px 30px;
  text-align: center;
}
.hif.is-interactive .step-item.step-item-active .step-head { justify-content: center; }

/* ---------------------------------------------------------------------------
   Punto ciego
   -------------------------------------------------------------------------- */
.blindspot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blindspot-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel-solid);
  padding: 26px 24px;
}
.blindspot-card h3 { font-family: "Space Grotesk", sans-serif; font-size: 1.08rem; margin: 16px 0 8px; }
.blindspot-card p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 860px) {
  .blindspot-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Qué analiza — capas expandibles (<details> nativo, sin JS)
   -------------------------------------------------------------------------- */
.layer-list { display: grid; gap: 12px; }
.layer-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-solid);
}
.layer-card summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.layer-card summary::-webkit-details-marker { display: none; }
.layer-card summary::after {
  content: "";
  width: 9px; height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.layer-card[open] summary::after { transform: rotate(225deg); }
.layer-title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1rem; }
.layer-card p { margin: 0 16px 18px 76px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }
@media (max-width: 640px) {
  .layer-card p { margin-left: 16px; }
}

/* ---------------------------------------------------------------------------
   Resultado — etiquetas de confianza/cobertura/comparación/descargas
   -------------------------------------------------------------------------- */
.rw-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.rw-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.rw-tag svg { width: 15px; height: 15px; color: var(--cyan); }

/* ---------------------------------------------------------------------------
   Paquetes y confianza
   -------------------------------------------------------------------------- */
.confidence-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.confidence-card { display: flex; gap: 16px; align-items: flex-start; padding: 26px 24px; text-decoration: none; color: inherit; }
.confidence-card h3 { font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; margin: 0 0 6px; color: var(--text); }
.confidence-card p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 720px) {
  .confidence-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Mega-menú de Recursos: enlace "ver todos"
   -------------------------------------------------------------------------- */
/* .nav-drop-all vive en styles.css (global): el mega-menú de Recursos se
   comparte en el header de todas las páginas, no solo index.html. */