/* ==========================================================================
   veritec-arquitectura.css — Layout page-scoped: Veritec Arquitectura
   Enlazado SOLO por case-studies/veritec-arquitectura.html (después de
   archify-frame.css). Namespace va-*.
   Rediseño UX: grid único dentro de .container — intro 2 col, diagrama como
   superficie destacada (frame + caption), resultados como tarjetas métricas.
   Todos los colores/tipografías via tokens de main.css (light/dark auto).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Page flow: archify-frame.css fija viewport full sin scroll; esta página
   scrollea (contexto SEO Fase 0). Override integral del wrapper.
   --------------------------------------------------------------------------- */
.archify-body {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

/* ---------------------------------------------------------------------------
   Ritmo vertical de bandas: intro y resultados (archify-context) + diagrama
   comparten la misma escala (2.5rem por banda → 5rem entre bloques).
   --------------------------------------------------------------------------- */
.archify-context {
  padding: 2.5rem 0;
}

.archify-context--results {
  padding: 2.5rem 0 4rem;
}

.archify-context h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.archify-context p {
  color: var(--color-body);
  max-width: 65ch;
  margin: 0;
}

.archify-context a {
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Intro en 2 columnas (≥992px): "El desafío" | "Qué muestra este diagrama".
   Grid estira ambas columnas a la misma altura; mobile apila.
   --------------------------------------------------------------------------- */
.va-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2.5rem;
  column-gap: 3rem;
}

@media (min-width: 992px) {
  .va-intro-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Diagrama como superficie destacada: dentro del container (mismo grid que
   el texto), altura reservada (sin CLS), borde/redondeado/sombra tokenizados.
   --------------------------------------------------------------------------- */
.va-diagram {
  padding: 2.5rem 0;
}

.va-frame-shell {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background-color: var(--color-bg);
  overflow: hidden; /* recorta el iframe al radio */
}

.va-frame-shell iframe {
  display: block;
  width: 100%;
  height: min(70vh, 640px);
  border: 0;
  background-color: var(--color-bg);
}

.va-frame-caption {
  margin: 0.75rem 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------------
   Resultados: 3 tarjetas métricas (auto-fit → 3 col desktop, 1 col mobile).
   Métrica destacada (--color-primary-text, AA en ambos temas) + descripción
   exacta debajo. Patrón superficie de hs-panel (bg-alt light / bg dark).
   --------------------------------------------------------------------------- */
.va-results-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.va-result-card {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

[data-bs-theme="dark"] .va-result-card {
  background-color: var(--color-bg);
}

.va-result-metric {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-text);
  letter-spacing: -0.01em;
  line-height: var(--line-height-snug);
}

.va-result-desc {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-body);
  line-height: var(--line-height-relaxed);
}

/* ---------------------------------------------------------------------------
   CTA final: patrón btn-outline-custom del sitio (hero.css), centrado.
   (specificidad .archify-context .va-cta para no ser pisado por la regla
   p { margin: 0 } de arriba)
   --------------------------------------------------------------------------- */
.archify-context .va-cta {
  margin: 2.5rem 0 0;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Mobile: iframe más bajo (touch), ritmo compacto.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .archify-context,
  .va-diagram {
    padding: 2rem 0;
  }

  .archify-context--results {
    padding: 2rem 0 3rem;
  }

  .va-frame-shell iframe {
    height: 60vh;
  }
}