/* =========================================================
   MÉTODO GROUNDLESS — CSS (metodo.css)
   Scope: SOLO página Método
   Regla: nada “global” fuera de body[data-page="metodo"] y .gl-*
   Contrato:
   - Sin hardcodes
   - Sin @media (responsive va en mobile.css)
========================================================= */

/* =========================================================
   Theme aliases (scoped)
   Deriva TODO de tokens globales (globals.css)
========================================================= */
body[data-page="metodo"]{
  /* Core */

  --m-bg: var(--gl-bg);
  --m-fg: var(--gl-fg);
  --m-fg-dim: var(--gl-fg-dim);
  --m-fg-soft: var(--gl-fg-soft);

  --m-accent: var(--gl-accent);
  --m-accent-strong: var(--gl-accent-strong);

  --m-s0: var(--gl-surface-0);
  --m-s1: var(--gl-surface-1);
  --m-s2: var(--gl-surface-2);
  --m-s3: var(--gl-surface-3);

  --m-b1: var(--gl-border-1);
  --m-b2: var(--gl-border-2);
  --m-b3: var(--gl-border-3);

  --m-sh1: var(--gl-shadow-1);
  --m-sh2: var(--gl-shadow-2);

  --m-r: var(--gl-r-2);

  /* Método: “tintes” derivados (sin hardcode) */
  --m-tint: color-mix(in oklab, var(--m-accent) 18%, transparent);
  --m-tint-strong: color-mix(in oklab, var(--m-accent) 28%, transparent);
  --m-line: color-mix(in oklab, var(--m-accent) 22%, transparent);

  /* Cards */
  --m-card-bg: linear-gradient(135deg,
    color-mix(in oklab, var(--m-s2) 68%, transparent),
    color-mix(in oklab, var(--m-s1) 64%, transparent)
  );

  --m-card-bg-accent: linear-gradient(135deg,
    color-mix(in oklab, var(--m-s3) 72%, transparent),
    color-mix(in oklab, var(--m-s2) 62%, transparent)
  );

  /* Neutral panel (diagram/frames) */
  --m-panel-bg: color-mix(in oklab, var(--m-s1) 62%, transparent);
  --m-panel-bg-2: color-mix(in oklab, var(--m-s0) 22%, transparent);

  /* TOC */
  --m-toc-card: color-mix(in oklab, var(--m-s1) 72%, transparent);
  --m-toc-border: color-mix(in oklab, var(--m-accent) 22%, transparent);
  --m-toc-border-strong: color-mix(in oklab, var(--m-accent) 34%, transparent);
  --m-toc-text: color-mix(in oklab, var(--m-fg) 86%, transparent);
  --m-toc-text-dim: color-mix(in oklab, var(--m-fg) 62%, transparent);
  --m-toc-accent: var(--m-accent-strong);
}

/* =========================================================
   Helpers mínimos (solo Método)
========================================================= */
body[data-page="metodo"] .gl-method-shell{
max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}




/* =========================================================
   MÉTODO — HERO (Base / Desktop)
   Fondo gobernado por globals.css
   ========================================================= */

body[data-page="metodo"] #gl-method-hero > .gl-method-shell{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 44px;
  align-items: center;
}

/* Layout 2 columnas */
body[data-page="metodo"] .gl-method-shell{
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
}

/* Columna izquierda */
body[data-page="metodo"] .gl-method-hero-content{
  min-width: 0;
}

body[data-page="metodo"] .gl-method-title{
  font-size: clamp(34px, 3.2vw, 46px);
  line-height: 1.14;
  font-weight: 620;
  letter-spacing: -0.6px;
  color: var(--m-fg);
  margin: 0;
  max-width: 740px;
}

body[data-page="metodo"] .gl-method-subtitle{
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--m-fg-dim);
  max-width: 640px;
}

body[data-page="metodo"] .gl-method-divider{
  width: 64px;
  height: 2px;
  margin: 30px 0 26px;
  background: color-mix(in oklab, var(--m-accent) 44%, transparent);
  border-radius: 999px;
}

body[data-page="metodo"] .gl-method-intro{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.75;
  max-width: 640px;
  color: color-mix(in oklab, var(--m-fg) 82%, transparent);
}

body[data-page="metodo"] .gl-method-hero-nav{
  margin-top: 34px;
}

body[data-page="metodo"] .gl-method-anchor{
  display: inline-flex;
  gap: 8px;
  align-items: center;

  font-size: 13px;
  letter-spacing: 0.6px;
  text-decoration: none;

  color: var(--m-accent-strong);
  opacity: .92;
  transition: opacity .2s ease, transform .2s ease;
}

body[data-page="metodo"] .gl-method-anchor:hover{
  opacity: .78;
  transform: translateY(1px);
}

/* Columna derecha */
body[data-page="metodo"] .gl-method-hero-structure{
  margin: 0;
  padding: 0 0 0 40px;
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 22px;

  border-left: 1px solid var(--m-line);
}

body[data-page="metodo"] .gl-method-layer{
  margin: 0;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;

  color: color-mix(in oklab, var(--m-fg) 62%, transparent);
  line-height: 1.35;
}

/* =========================================================
   BLOQUE 2 — PROBLEMA (Base / Desktop)
   ========================================================= */

body[data-page="metodo"] .gl-method-problem{
  padding: 90px 0;
  position: relative;
  z-index: 2;
}

/* Shell single (compat) — si quedó en algún bloque viejo */
body[data-page="metodo"] .gl-method-shell-single{
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

/* Grid 2 columnas */
body[data-page="metodo"] .gl-method-problem-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: stretch;
  margin-top: 26px;
}

/* Card system (page-specific, estable) */
body[data-page="metodo"] .gl-method-card{
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 26px;
  min-width: 0;
}

body[data-page="metodo"] .gl-method-card-accent{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}

/* Typography interna */
body[data-page="metodo"] .gl-method-h3{
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  margin: 0 0 14px;
}

body[data-page="metodo"] .gl-method-p{
  font-size: 15px;
  line-height: 1.8;
  color: color-mix(in oklab, var(--m-fg) 82%, transparent);
  margin: 0 0 14px;
}

body[data-page="metodo"] .gl-method-list{
  margin: 14px 0 12px;
  padding-left: 18px;
  color: var(--m-fg-dim);
}

body[data-page="metodo"] .gl-method-list li{
  margin: 10px 0;
  line-height: 1.65;
  font-size: 14px;
}

body[data-page="metodo"] .gl-method-note{
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--m-fg-soft);
}

/* Mini-diagrama */
body[data-page="metodo"] .gl-method-mini-diagram{
  margin-top: 28px;
  border-radius: 18px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

body[data-page="metodo"] .gl-mini-col{
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--m-accent) 18%, transparent);
  background: var(--m-panel-bg-2);
  padding: 14px;
  min-width: 0;
}

body[data-page="metodo"] .gl-mini-tag{
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--m-fg) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--m-fg) 18%, transparent);
  border-radius: 999px;
  padding: 6px 10px;
  margin-bottom: 12px;
}

body[data-page="metodo"] .gl-mini-tag-good{
  color: var(--m-accent-strong);
  border-color: color-mix(in oklab, var(--m-accent) 24%, transparent);
}

body[data-page="metodo"] .gl-mini-flow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--m-fg-dim);
  font-size: 13px;
  line-height: 1.5;
}

body[data-page="metodo"] .gl-mini-flow span{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--m-accent) 16%, transparent);
  background: var(--m-panel-bg);
  white-space: nowrap;
}

body[data-page="metodo"] .gl-mini-arrow{
  display: inline-block;
  width: 18px;
  height: 1px;
  background: color-mix(in oklab, var(--m-accent) 30%, transparent);
  position: relative;
  flex: 0 0 auto;
}

body[data-page="metodo"] .gl-mini-arrow::after{
  content: "";
  position: absolute;
  right: -2px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid color-mix(in oklab, var(--m-accent) 30%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--m-accent) 30%, transparent);
  transform: rotate(45deg);
}

/* =========================================================
   BLOQUE 3 — MAPA 6 CAPAS
========================================================= */
body[data-page="metodo"] .gl-method-map{
  padding: 95px 0;
  position: relative;
  z-index: 2;
}

body[data-page="metodo"] .gl-map-diagram{
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 26px;
  align-items: start;
  margin-top: 26px;
}

body[data-page="metodo"] .gl-map-stack{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body[data-page="metodo"] .gl-map-layer{
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 18px;
}

body[data-page="metodo"] .gl-map-layer-top{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

body[data-page="metodo"] .gl-map-num{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--m-accent) 22%, transparent);
  background: var(--m-panel-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--m-accent-strong);
  font-size: 12px;
  letter-spacing: 1px;
}

body[data-page="metodo"] .gl-map-title{
  font-size: 15px;
  font-weight: 600;
  color: color-mix(in oklab, var(--m-fg) 90%, transparent);
  line-height: 1.35;
}

body[data-page="metodo"] .gl-map-desc{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--m-fg) 68%, transparent);
}

body[data-page="metodo"] .gl-map-aside{ position: sticky; top: 110px; }

body[data-page="metodo"] .gl-map-aside-card{
  border-radius: 18px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 18px;
}

body[data-page="metodo"] .gl-map-aside-title{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  margin-bottom: 10px;
}

body[data-page="metodo"] .gl-map-aside-p{
  font-size: 14px;
  line-height: 1.75;
  color: var(--m-fg-dim);
}

body[data-page="metodo"] .gl-map-aside-rule{
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--m-fg-soft);
  border-top: 1px solid var(--m-line);
  padding-top: 12px;
}

/* Accordion */
body[data-page="metodo"] .gl-accordion{
  margin-top: 26px;
  border-radius: 18px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  overflow: hidden;
}

body[data-page="metodo"] .gl-acc-item{ border-top: 1px solid var(--m-line); }
body[data-page="metodo"] .gl-acc-item:first-child{ border-top: none; }

body[data-page="metodo"] .gl-acc-sum{
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  user-select: none;
}
body[data-page="metodo"] .gl-acc-sum::-webkit-details-marker{ display:none; }

body[data-page="metodo"] .gl-acc-k{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  border: 1px solid color-mix(in oklab, var(--m-accent) 20%, transparent);
  border-radius: 999px;
  padding: 6px 10px;
}

body[data-page="metodo"] .gl-acc-t{
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--m-fg) 80%, transparent);
}

body[data-page="metodo"] .gl-acc-i{
  width: 12px;
  height: 12px;
  border-right: 1px solid color-mix(in oklab, var(--m-fg) 55%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--m-fg) 55%, transparent);
  transform: rotate(45deg);
  transition: transform .25s ease, opacity .25s ease;
  opacity: .75;
}
body[data-page="metodo"] details[open] .gl-acc-i{
  transform: rotate(-135deg);
  opacity: .95;
}

body[data-page="metodo"] .gl-acc-body{ padding: 0 18px 18px; }
body[data-page="metodo"] .gl-method-next{ margin-top: 26px; }

/* =========================================================
   BLOQUE 4 — GOBERNABILIDAD (Triada + Lazo de control)
   Base/Desktop
   ========================================================= */

body[data-page="metodo"] #gl-method-gobernar{
  padding: 95px 0;
  position: relative;
  z-index: 2;
}

/* Triada: 3 columnas */
body[data-page="metodo"] .gl-triad{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Card base (si tu “sistema común” ya lo define, esto igual es seguro) */
body[data-page="metodo"] .gl-triad-card{
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 22px;
  min-width: 0;
}

body[data-page="metodo"] .gl-triad-card-accent{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}

/* Top */
body[data-page="metodo"] .gl-triad-top{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

body[data-page="metodo"] .gl-triad-tag{
  display: inline-block;
  width: fit-content;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  border-radius: 999px;
  padding: 6px 10px;
}

body[data-page="metodo"] .gl-triad-h3{
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: color-mix(in oklab, var(--m-fg) 92%, transparent);
}

/* Regla */
body[data-page="metodo"] .gl-triad-rule{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--m-line);
  font-size: 13px;
  line-height: 1.65;
  color: var(--m-fg-dim);
}

/* Accordion (details/summary) */
body[data-page="metodo"] .gl-mini-acc{
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  overflow: hidden;
}

body[data-page="metodo"] .gl-mini-sum{
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 13px;
  color: color-mix(in oklab, var(--m-fg) 82%, transparent);
}

body[data-page="metodo"] .gl-mini-sum::-webkit-details-marker{ display:none; }

body[data-page="metodo"] .gl-mini-i{
  width: 10px;
  height: 10px;
  border-right: 1px solid color-mix(in oklab, var(--m-accent) 42%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--m-accent) 42%, transparent);
  transform: rotate(135deg);
  transition: transform .2s ease;
  flex: 0 0 auto;
  margin-left: 10px;
}

body[data-page="metodo"] details[open] > summary .gl-mini-i{
  transform: rotate(-45deg);
}

body[data-page="metodo"] .gl-mini-body{
  padding: 0 14px 14px;
}

/* Lazo de control */
body[data-page="metodo"] .gl-loop{
  margin-top: 22px;
  border-radius: 18px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 18px;
}

body[data-page="metodo"] .gl-loop-head{
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

body[data-page="metodo"] .gl-loop-title{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
}

body[data-page="metodo"] .gl-loop-sub{
  font-size: 14px;
  line-height: 1.65;
  color: var(--m-fg-dim);
}

/* Flujo: nodos + links */
body[data-page="metodo"] .gl-loop-flow{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="metodo"] .gl-loop-node{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  color: var(--m-fg-dim);
  font-size: 13px;
  white-space: nowrap;
}

body[data-page="metodo"] .gl-loop-link{
  width: 22px;
  height: 1px;
  background: color-mix(in oklab, var(--m-accent) 28%, transparent);
  position: relative;
  flex: 0 0 auto;
}

body[data-page="metodo"] .gl-loop-link::after{
  content:"";
  position:absolute;
  right: -2px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid color-mix(in oklab, var(--m-accent) 28%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--m-accent) 28%, transparent);
  transform: rotate(45deg);
}

body[data-page="metodo"] .gl-loop-foot{
  margin-top: 12px;
}
/* Header narrativo con ancho controlado */
body[data-page="metodo"] #gl-method-gobernar .gl-method-block-head{
  max-width: 760px;
  margin-bottom: 42px;
}
/* =========================================================
   BLOQUE 5 — JERARQUÍA DE INTERVENCIÓN
   (Escalera + error típico + recuperación)
   ========================================================= */

body[data-page="metodo"] #gl-method-jerarquia{
  padding: 95px 0;
  position: relative;
  z-index: 2;
}

/* Layout 2 columnas (izq escalera / der error + recover) */
body[data-page="metodo"] .gl-stair{
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: start;
}

/* Columnas (heredan tu sistema card/panel si ya lo definiste) */
body[data-page="metodo"] .gl-stair-col{
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 26px;
  min-width: 0;
}

body[data-page="metodo"] .gl-stair-title{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  margin: 0 0 10px;
}

body[data-page="metodo"] .gl-stair-sub{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--m-fg-dim);
}

/* Steps */
body[data-page="metodo"] .gl-step{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;

  border-radius: 14px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 14px;
  margin: 12px 0;
}

body[data-page="metodo"] .gl-step-k{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);

  border: 1px solid color-mix(in oklab, var(--m-accent) 18%, transparent);
  background: var(--m-panel-bg-2);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}

body[data-page="metodo"] .gl-step-t{
  font-size: 14px;
  line-height: 1.55;
  color: color-mix(in oklab, var(--m-fg) 86%, transparent);
}

body[data-page="metodo"] .gl-step-t span{
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--m-fg-dim);
}

body[data-page="metodo"] .gl-step-accent{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}

/* Regla columna izquierda */
body[data-page="metodo"] .gl-stair-rule{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--m-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--m-fg-dim);
}

/* Warn card (derecha) */
body[data-page="metodo"] .gl-warn-card{
  border-radius: 14px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 16px;
  margin-top: 10px;
}

body[data-page="metodo"] .gl-warn-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

body[data-page="metodo"] .gl-warn-tag{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  border: 1px solid color-mix(in oklab, var(--m-accent) 18%, transparent);
  background: var(--m-panel-bg-2);
  border-radius: 999px;
  padding: 6px 10px;
}

body[data-page="metodo"] .gl-warn-icon{
  opacity: .85;
}

/* Warn rule */
body[data-page="metodo"] .gl-warn-rule{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--m-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--m-fg-dim);
}

/* Recover */
body[data-page="metodo"] .gl-recover{
  margin-top: 16px;
  border-radius: 14px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 16px;
}

body[data-page="metodo"] .gl-recover-title{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
}
/* =========================================================
   BLOQUE 7 — INSTRUMENTOS VS VARIABLES  (#gl-method-instrumentos)
   Base (desktop). Mobile va en mobile.css.
   ========================================================= */

body[data-page="metodo"] #gl-method-instrumentos{
  padding: 95px 0;
  position: relative;
  z-index: 2;
}

/* --- Comparativa (2 columnas) --- */
body[data-page="metodo"] .gl-compare{
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: stretch;
}

body[data-page="metodo"] .gl-compare-col{
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 28px 32px;
  box-sizing: border-box;
}

body[data-page="metodo"] .gl-compare-col-accent{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}

body[data-page="metodo"] .gl-compare-title{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  margin-bottom: 14px;
}

/* --- Definición operativa (grid 2×2) --- */
body[data-page="metodo"] .gl-tool-def-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

body[data-page="metodo"] .gl-tool-def{
  border-radius: 14px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 14px 16px;
  box-sizing: border-box;
}

body[data-page="metodo"] .gl-tool-def-k{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  margin-bottom: 8px;
}

body[data-page="metodo"] .gl-tool-def-v{
  font-size: 13px;
  line-height: 1.65;
  color: var(--m-fg-dim);
}

/* --- Regla de dirección (diagrama) --- */
body[data-page="metodo"] .gl-leader{
  margin-top: 22px;
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 28px 32px;
  box-sizing: border-box;
}

body[data-page="metodo"] .gl-leader-head{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

body[data-page="metodo"] .gl-leader-title{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
}

body[data-page="metodo"] .gl-leader-sub{
  font-size: 14px;
  line-height: 1.7;
  color: var(--m-fg-dim);
  max-width: 980px;
}

body[data-page="metodo"] .gl-leader-diagram{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

body[data-page="metodo"] .gl-leader-node{
  border-radius: 999px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1;
  color: var(--m-fg-dim);
  white-space: nowrap;
}

body[data-page="metodo"] .gl-leader-node-main{
  border-color: var(--m-b3);
  color: var(--m-accent-strong);
}

body[data-page="metodo"] .gl-leader-node-stop{
  border-color: color-mix(in oklab, var(--m-fg) 18%, transparent);
  color: var(--m-fg-soft);
}

body[data-page="metodo"] .gl-leader-arrow{
  width: 26px;
  height: 1px;
  background: color-mix(in oklab, var(--m-accent) 28%, transparent);
  position: relative;
  flex: 0 0 auto;
}
body[data-page="metodo"] .gl-leader-arrow:after{
  content: "";
  position: absolute;
  right: -2px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid color-mix(in oklab, var(--m-accent) 28%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--m-accent) 28%, transparent);
  transform: rotate(45deg);
}

/* --- Instrumento líder por estado (tabla conceptual) --- */
body[data-page="metodo"] .gl-state-tools{
  margin-top: 22px;
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 28px 32px;
  box-sizing: border-box;
}

body[data-page="metodo"] .gl-state-tools-head{
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

body[data-page="metodo"] .gl-state-tools-title{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
}

body[data-page="metodo"] .gl-state-tools-sub{
  font-size: 14px;
  line-height: 1.7;
  color: var(--m-fg-dim);
  max-width: 980px;
}

/* Grid de cards por estado */
body[data-page="metodo"] .gl-state-tools-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* Card */
body[data-page="metodo"] .gl-st-tool{
  border-radius: 16px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 18px 18px;
  box-sizing: border-box;
}

body[data-page="metodo"] .gl-st-tool-accent{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}

/* Header card */
body[data-page="metodo"] .gl-st-tool-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--m-line);
}

body[data-page="metodo"] .gl-st-tool-tag{
  display: inline-flex;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--m-fg) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--m-fg) 16%, transparent);
  background: color-mix(in oklab, var(--m-panel-bg) 70%, transparent);
  padding: 6px 10px;
  border-radius: 999px;
}

body[data-page="metodo"] .gl-st-tool-name{
  font-size: 13px;
  color: color-mix(in oklab, var(--m-fg) 86%, transparent);
}

/* Filas */
body[data-page="metodo"] .gl-st-tool-body{
  display: grid;
  gap: 10px;
}

body[data-page="metodo"] .gl-st-tool-row{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: start;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--m-fg) 10%, transparent);
}

body[data-page="metodo"] .gl-st-tool-row:first-child{
  padding-top: 0;
  border-top: 0;
}

body[data-page="metodo"] .gl-st-tool-k{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--m-fg) 62%, transparent);
}

body[data-page="metodo"] .gl-st-tool-v{
  font-size: 13px;
  line-height: 1.65;
  color: var(--m-fg-dim);
}

body[data-page="metodo"] .gl-st-tool-bad .gl-st-tool-k{
  color: color-mix(in oklab, var(--m-accent-strong) 75%, white);
}
body[data-page="metodo"] .gl-st-tool-bad .gl-st-tool-v{
  color: color-mix(in oklab, var(--m-fg) 82%, transparent);
}

/* --- Nota técnica (details) dentro de gl-state-tools --- */
body[data-page="metodo"] .gl-st-tool-notes{
  margin-top: 16px;
}

/* (si tu .gl-mini-acc ya existe globalmente, esto solo lo termina de “calzar”) */
body[data-page="metodo"] details.gl-mini-acc{
  border-radius: 14px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  overflow: hidden;
}

body[data-page="metodo"] summary.gl-mini-sum{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: color-mix(in oklab, var(--m-fg) 84%, transparent);
  font-size: 13px;
}
body[data-page="metodo"] summary.gl-mini-sum::-webkit-details-marker{ display:none; }

body[data-page="metodo"] .gl-mini-i{
  width: 10px;
  height: 10px;
  border-right: 1px solid color-mix(in oklab, var(--m-fg) 45%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--m-fg) 45%, transparent);
  transform: rotate(45deg);
  transition: transform .18s ease;
  flex: 0 0 auto;
}

body[data-page="metodo"] details[open] .gl-mini-i{
  transform: rotate(225deg);
}

body[data-page="metodo"] .gl-mini-body{
  padding: 0 16px 16px;
  border-top: 1px solid var(--m-line);
}
/* =========================================================
   BLOQUE 8 — LECTURA POR SEÑALES  (#gl-method-lectura)
   Rediseño estructural jerárquico
   ========================================================= */

body[data-page="metodo"] #gl-method-lectura{
  padding: 120px 0;
  position: relative;
  z-index: 2;
}

/* =============================
   MARCO CENTRAL
============================= */

body[data-page="metodo"] .gl-frame-card{
  margin-top: 42px;
  border-radius: 22px;
  border: 1px solid var(--m-b2);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--m-panel-bg) 92%, transparent),
    color-mix(in oklab, var(--m-panel-bg) 85%, transparent)
  );
  padding: 36px 42px;
  box-shadow: 0 24px 70px var(--m-sh2);
}

/* =============================
   JERARQUÍA DE EVIDENCIA
============================= */

body[data-page="metodo"] .gl-evidence{
  margin-top: 80px;
}

body[data-page="metodo"] .gl-evidence-stack{
  margin-top: 28px;
  display: grid;
  gap: 18px;
}

/* Base layer */
body[data-page="metodo"] .gl-evidence-layer{
  border-radius: 18px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 22px 26px;
  transition: transform .2s ease, border-color .2s ease;
}

/* Nivel 01 — fuerte */
body[data-page="metodo"] .gl-evidence-layer-strong{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
  box-shadow: 0 20px 60px var(--m-sh2);
  transform: scale(1.01);
}

/* Nivel 04 — débil */
body[data-page="metodo"] .gl-evidence-layer-weak{
  opacity: .6;
  border-color: color-mix(in oklab, var(--m-fg) 14%, transparent);
}

/* =============================
   CONSUMO HÍDRICO
============================= */

body[data-page="metodo"] .gl-water-signal{
  margin-top: 110px;
  border-radius: 26px;
  border: 1px solid var(--m-b2);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--m-card-bg-accent) 85%, transparent),
    color-mix(in oklab, var(--m-panel-bg) 92%, transparent)
  );
  padding: 48px 56px;
  box-shadow: 0 30px 80px var(--m-sh2);
}

body[data-page="metodo"] .gl-water-grid{
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

body[data-page="metodo"] .gl-water-card{
  border-radius: 18px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 26px 28px;
}

/* =============================
   LAZO DIAGNÓSTICO
============================= */

body[data-page="metodo"] .gl-diagnostic-loop{
  margin-top: 120px;
  padding-top: 40px;
  border-top: 1px solid var(--m-line);
}

body[data-page="metodo"] .gl-loop-flow{
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

body[data-page="metodo"] .gl-loop-node{
  border-radius: 999px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 12px 18px;
  font-size: 13px;
  color: var(--m-fg-dim);
  white-space: nowrap;
}

body[data-page="metodo"] .gl-loop-link{
  width: 26px;
  height: 1px;
  background: color-mix(in oklab, var(--m-accent) 30%, transparent);
}
/* =========================================================
   BLOQUE 8 — Ajuste: Jerarquía de evidencia = 1 contenedor
   (menos cajas, más armonía)
   ========================================================= */

body[data-page="metodo"] .gl-evidence{
  margin-top: 70px;
  border-radius: 22px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 32px 36px;
}

/* Head adentro del mismo contenedor */
body[data-page="metodo"] .gl-evidence-head{
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--m-line);
}

body[data-page="metodo"] .gl-evidence-title{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  margin: 0 0 6px;
}

body[data-page="metodo"] .gl-evidence-sub{
  font-size: 14px;
  line-height: 1.7;
  color: var(--m-fg-dim);
  margin: 0;
  max-width: 980px;
}

/* Stack: ahora son “filas”, no tarjetas */
body[data-page="metodo"] .gl-evidence-stack{
  margin-top: 0;
  display: grid;
  gap: 0;
}

/* Layer base (fila) */
body[data-page="metodo"] .gl-evidence-layer{
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 16px 2px;
}

/* Separadores sutiles entre filas */
body[data-page="metodo"] .gl-evidence-layer + .gl-evidence-layer{
  border-top: 1px solid color-mix(in oklab, var(--m-fg) 10%, transparent);
}

/* Nivel 01: único con “placa” (para que haya jerarquía real sin cajonear todo) */
body[data-page="metodo"] .gl-evidence-layer-strong{
  margin: 0 0 2px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--m-b3);
  background: var(--m-card-bg-accent);
  box-shadow: 0 12px 40px var(--m-sh2);
}

/* Nivel 04: cae en peso */
body[data-page="metodo"] .gl-evidence-layer-weak{
  opacity: .62;
}

/* Tipos internos */
body[data-page="metodo"] .gl-evidence-k{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--m-fg) 70%, transparent);
  margin-bottom: 6px;
}

body[data-page="metodo"] .gl-evidence-v{
  font-size: 13px;
  line-height: 1.65;
  color: var(--m-fg-dim);
}
/* =========================================================
   BLOQUE 9 — PÉRDIDA DE INTERPRETABILIDAD Y RECUPERACIÓN
   (#gl-method-fallos)
   Base (desktop). Incluye @media necesarios.
   ========================================================= */

body[data-page="metodo"] #gl-method-fallos{
  padding: 95px 0;
  position: relative;
  z-index: 2;
}

/* ===============================
   Diagrama de degradación (SIN contenedor exterior)
   =============================== */

body[data-page="metodo"] .gl-degradation{
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;

  /* IMPORTANTE: sin fondo/borde/sombra */
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* Mini contenedores (se quedan) */
body[data-page="metodo"] .gl-deg-step{
  flex: 1 1 220px;
  min-width: 190px;

  border-radius: 16px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 14px 16px;
  box-sizing: border-box;
}

body[data-page="metodo"] .gl-deg-k{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  margin: 0 0 8px;
}

body[data-page="metodo"] .gl-deg-v{
  font-size: 13px;
  line-height: 1.55;
  color: var(--m-fg-dim);
  margin: 0;
}

/* Fase crítica: mismo step pero con acento */
body[data-page="metodo"] .gl-deg-step.gl-deg-critical{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}
body[data-page="metodo"] .gl-deg-step.gl-deg-critical .gl-deg-v{
  color: color-mix(in oklab, var(--m-fg) 90%, transparent);
}

/* Flechas (entre steps) */
body[data-page="metodo"] .gl-deg-arrow{
  width: 26px;
  height: 1px;
  background: color-mix(in oklab, var(--m-accent) 28%, transparent);
  position: relative;
  flex: 0 0 auto;
  opacity: .9;
}

body[data-page="metodo"] .gl-deg-arrow::after{
  content: "";
  position: absolute;
  right: -2px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid color-mix(in oklab, var(--m-accent) 28%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--m-accent) 28%, transparent);
  transform: rotate(45deg);
}

/* ===============================
   Grid de recuperación (2 cards)
   =============================== */

body[data-page="metodo"] .gl-failure-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}

body[data-page="metodo"] .gl-failure-card{
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 26px 28px;
  box-sizing: border-box;
  min-width: 0;
}

body[data-page="metodo"] .gl-failure-card-accent{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}

body[data-page="metodo"] .gl-failure-title{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  margin: 0 0 12px;
}

/* Ajuste fino para listas dentro de estas cards (sin tocar global) */
body[data-page="metodo"] .gl-failure-card .gl-method-list{
  margin: 0;
}

/* =========================================================
   BLOQUE 10 — ARQUITECTURA INDUSTRIAL Y GOBERNANZA
   (#gl-method-arquitectura)
   Base (desktop) + @media necesarios.
   ========================================================= */

body[data-page="metodo"] #gl-method-arquitectura{
  padding: 95px 0;
  position: relative;
  z-index: 2;
}

/* ===============================
   Diagrama: Sala -> Sistema -> Industria
   (sin contenedor exterior, nodos tipo chip-card)
   =============================== */

body[data-page="metodo"] .gl-industry-diagram{
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

body[data-page="metodo"] .gl-industry-node{
  flex: 0 1 260px;
  min-width: 220px;

  border-radius: 16px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 14px 16px;
  box-sizing: border-box;
}

body[data-page="metodo"] .gl-industry-node-accent{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}

body[data-page="metodo"] .gl-industry-k{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  margin: 0 0 8px;
}

body[data-page="metodo"] .gl-industry-v{
  font-size: 13px;
  line-height: 1.55;
  color: var(--m-fg-dim);
  margin: 0;
}

body[data-page="metodo"] .gl-industry-link{
  width: 26px;
  height: 1px;
  background: color-mix(in oklab, var(--m-accent) 28%, transparent);
  position: relative;
  flex: 0 0 auto;
  opacity: .9;
}
body[data-page="metodo"] .gl-industry-link::after{
  content: "";
  position: absolute;
  right: -2px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid color-mix(in oklab, var(--m-accent) 28%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--m-accent) 28%, transparent);
  transform: rotate(45deg);
}

/* ===============================
   3 pilares (cards)
   =============================== */

body[data-page="metodo"] .gl-gov-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

body[data-page="metodo"] .gl-gov-card{
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 26px 26px;
  box-sizing: border-box;
  min-width: 0;
}

body[data-page="metodo"] .gl-gov-card-accent{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}

/* Head */
body[data-page="metodo"] .gl-gov-head{
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

body[data-page="metodo"] .gl-gov-tag{
  display: inline-flex;
  width: fit-content;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--m-fg) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--m-fg) 16%, transparent);
  background: color-mix(in oklab, var(--m-panel-bg) 70%, transparent);
  padding: 6px 10px;
  border-radius: 999px;
}

body[data-page="metodo"] .gl-gov-h3{
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  color: color-mix(in oklab, var(--m-fg) 92%, transparent);
}

/* Regla dentro de card */
body[data-page="metodo"] .gl-gov-rule{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--m-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--m-fg-dim);
}

/* Details dentro de gov card (calzado, sin romper tu global) */
body[data-page="metodo"] .gl-gov-card details.gl-mini-acc{
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  overflow: hidden;
}

body[data-page="metodo"] .gl-gov-card summary.gl-mini-sum{
  list-style: none;
  cursor: pointer;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: color-mix(in oklab, var(--m-fg) 84%, transparent);
  font-size: 13px;
}
body[data-page="metodo"] .gl-gov-card summary.gl-mini-sum::-webkit-details-marker{ display:none; }

body[data-page="metodo"] .gl-gov-card .gl-mini-body{
  padding: 0 14px 14px;
  border-top: 1px solid var(--m-line);
}

/* ===============================
   Formato "log" (Pilar 02)
   =============================== */

body[data-page="metodo"] .gl-log{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

body[data-page="metodo"] .gl-log-row{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: start;

  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--m-fg) 10%, transparent);
  background: color-mix(in oklab, var(--m-panel-bg) 78%, transparent);
  padding: 10px 12px;
}

body[data-page="metodo"] .gl-log-row > span:first-child{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--m-fg) 62%, transparent);
}

body[data-page="metodo"] .gl-log-row > span:last-child{
  font-size: 13px;
  line-height: 1.55;
  color: var(--m-fg-dim);
}

/* ===============================
   Cierre (nota grande)
   =============================== */

body[data-page="metodo"] .gl-gov-close{
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 22px 26px;
  box-sizing: border-box;
}

body[data-page="metodo"] .gl-gov-close .gl-method-p{
  margin: 0 0 10px;
}

/* =========================================================
   BLOQUE 11 — LO QUE NO ES GROUNDLESS  (#gl-method-no)
   Base (desktop) + @media necesarios.
   ========================================================= */

body[data-page="metodo"] #gl-method-no{
  padding: 95px 0;
  position: relative;
  z-index: 2;
}

/* Intro: sin caja grande (solo tipografía y respiración) */
body[data-page="metodo"] .gl-no-intro{
  margin-top: 14px;
  display: grid;
  gap: 8px;
  max-width: 980px;
}

/* Asegurar que los <p> dentro del intro calcen con tu sistema */
body[data-page="metodo"] .gl-no-intro .gl-method-p{
  margin: 0;
}

/* Grid principal */
body[data-page="metodo"] .gl-no-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* Card */
body[data-page="metodo"] .gl-no-card{
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 22px 22px;
  box-sizing: border-box;
  min-width: 0;
}

/* Variante acento (solo una, para no gritar) */
body[data-page="metodo"] .gl-no-card-accent{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}

/* Título de cada NO */
body[data-page="metodo"] .gl-no-h3{
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.25;
  color: color-mix(in oklab, var(--m-fg) 92%, transparent);
}

/* Texto dentro de card: forzamos coherencia aunque no uses gl-method-p */
body[data-page="metodo"] .gl-no-card p{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--m-fg-dim);
}

/* Cierre conceptual: una sola card grande */
body[data-page="metodo"] .gl-no-close{
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 22px 26px;
  box-sizing: border-box;
}

body[data-page="metodo"] .gl-no-close .gl-method-p{
  margin: 0 0 10px;
}
/* =========================================================
   BLOQUE 12 — CIERRE ESTRUCTURAL  (#gl-method-cierre)
   Base (desktop) + @media necesarios.
   ========================================================= */

body[data-page="metodo"] #gl-method-cierre{
  padding: 95px 0 105px;
  position: relative;
  z-index: 2;
}

/* ===== Core (card principal) ===== */
body[data-page="metodo"] .gl-close-core{
  margin-top: 22px;
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 26px 26px 22px;
  box-sizing: border-box;
}

body[data-page="metodo"] .gl-close-title{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  margin: 0 0 8px;
}

body[data-page="metodo"] .gl-close-sub{
  font-size: 14px;
  line-height: 1.7;
  color: var(--m-fg-dim);
  margin: 0 0 16px;
  max-width: 980px;
}

/* Lista (2 columnas, para que respire y se vea “industrial”) */
body[data-page="metodo"] .gl-close-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

/* Item */
body[data-page="metodo"] .gl-close-item{
  border-radius: 14px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 14px 16px;
  box-sizing: border-box;
  min-width: 0;
}

body[data-page="metodo"] .gl-close-item-accent{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}

body[data-page="metodo"] .gl-close-k{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  margin: 0 0 8px;
}

body[data-page="metodo"] .gl-close-v{
  font-size: 13px;
  line-height: 1.65;
  color: var(--m-fg-dim);
}

/* Si querés que el 05 ocupe toda la fila sin tocar HTML:
   hacemos que el último item “rompa” a 2 columnas */
body[data-page="metodo"] .gl-close-item-accent{
  grid-column: 1 / -1;
}

/* ===== Bridge (nota, más baja, no compite) ===== */
body[data-page="metodo"] .gl-close-bridge{
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 18px 20px;
  box-sizing: border-box;
}

body[data-page="metodo"] .gl-close-bridge-title{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  margin: 0 0 10px;
}

/* aseguramos ritmo en párrafos internos */
body[data-page="metodo"] .gl-close-bridge .gl-method-p{
  margin: 0 0 8px;
}
body[data-page="metodo"] .gl-close-bridge .gl-method-note{
  margin: 0;
}

/* ===== CTAs ===== */
body[data-page="metodo"] .gl-close-cta{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Botones coherentes con tu sistema (sin hardcodear colores) */
body[data-page="metodo"] .gl-close-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--m-b2);
  background: var(--m-panel-bg);
  color: color-mix(in oklab, var(--m-fg) 88%, transparent);

  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .2px;

  box-shadow: 0 16px 45px var(--m-sh2);
  transition: transform .14s ease, filter .14s ease, border-color .14s ease;
}

body[data-page="metodo"] .gl-close-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

body[data-page="metodo"] .gl-close-btn-primary{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
  color: color-mix(in oklab, var(--m-fg) 92%, transparent);
}

body[data-page="metodo"] .gl-close-btn-secondary{
  background: var(--m-panel-bg);
}

/* ===== Footer note ===== */
body[data-page="metodo"] .gl-close-footer{
  margin-top: 14px;
}



/* =========================================================
   MÉTODO — TOC (desktop) afinado (no pisa contenido)
   Pegar en metodo.css
   ========================================================= */

body[data-page="metodo"]{
  --m-toc-w: 148px;     /* ancho real del panel */
  --m-toc-gap: 22px;    /* aire entre TOC y contenido */
  --m-toc-top: 92px;    /* distancia desde arriba (debajo de topbar) */
}

/* Panel TOC */
body[data-page="metodo"] #gl-method-toc.gl-toc{
  position: fixed;
  top: var(--m-toc-top);
  left: 18px;
  width: var(--m-toc-w);
  z-index: 50;
  pointer-events: auto;
}

/* Tarjeta interna: menos “glass”, más instrumento */
body[data-page="metodo"] #gl-method-toc .gl-toc-shell{
  border-radius: 22px;
  border: 1px solid var(--m-toc-border);
  background: color-mix(in oklab, var(--m-s1) 86%, transparent);
  box-shadow: var(--m-sh2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px 14px 14px;
}

/* Título */
body[data-page="metodo"] #gl-method-toc .gl-toc-title{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-toc-text-dim);
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--m-b1);
  background: color-mix(in oklab, var(--m-s0) 40%, transparent);
  margin-bottom: 12px;
}

/* Links: más compactos + estado activo claro */
body[data-page="metodo"] #gl-method-toc .gl-toc-nav{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body[data-page="metodo"] #gl-method-toc .gl-toc-link{
  display: block;
  text-decoration: none;
  color: var(--m-toc-text);
  font-size: 13px;
  line-height: 1.2;
  padding: 10px 10px 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

body[data-page="metodo"] #gl-method-toc .gl-toc-link:hover{
  background: color-mix(in oklab, var(--m-s0) 22%, transparent);
  border-color: color-mix(in oklab, var(--m-accent) 18%, transparent);
  transform: translateY(-1px);
}

/* Si tu JS marca active/current, soportamos ambas */
body[data-page="metodo"] #gl-method-toc .gl-toc-link.is-active,
body[data-page="metodo"] #gl-method-toc .gl-toc-link[aria-current="true"]{
  background: color-mix(in oklab, var(--m-accent) 16%, transparent);
  border-color: var(--m-toc-border-strong);
  color: var(--m-fg);
  position: relative;
}

body[data-page="metodo"] #gl-method-toc .gl-toc-link.is-active::before,
body[data-page="metodo"] #gl-method-toc .gl-toc-link[aria-current="true"]::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 99px;
  background: var(--m-accent-strong);
  opacity: .9;
}

/* Footer */
body[data-page="metodo"] #gl-method-toc .gl-toc-foot{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--m-accent) 18%, transparent);
}

body[data-page="metodo"] #gl-method-toc .gl-toc-top{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-decoration: none;
  color: var(--m-toc-text-dim);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--m-b1);
  background: color-mix(in oklab, var(--m-s0) 26%, transparent);
}

body[data-page="metodo"] #gl-method-toc .gl-toc-top:hover{
  color: var(--m-fg);
  border-color: var(--m-toc-border-strong);
}
/* =========================================================
   MÉTODO — FIX DE PADDING INTERNO (SCOPED SOLO A METODO)
   ========================================================= */

body[data-page="metodo"] .gl-triad-card,
body[data-page="metodo"] .gl-state-card,
body[data-page="metodo"] .gl-frame-card,
body[data-page="metodo"] .gl-compare-col,
body[data-page="metodo"] .gl-st-tool,
body[data-page="metodo"] .gl-failure-card,
body[data-page="metodo"] .gl-gov-card,
body[data-page="metodo"] .gl-no-card,
body[data-page="metodo"] .gl-water-card,
body[data-page="metodo"] .gl-warn-card,
body[data-page="metodo"] .gl-recover,
body[data-page="metodo"] .gl-close-core,
body[data-page="metodo"] .gl-close-bridge,
body[data-page="metodo"] .gl-gov-close,
body[data-page="metodo"] .gl-water-signal,
body[data-page="metodo"] .gl-evidence,
body[data-page="metodo"] .gl-leader,
body[data-page="metodo"] .gl-state-tools,
body[data-page="metodo"] .gl-industry-diagram,
body[data-page="metodo"] .gl-degradation,
body[data-page="metodo"] .gl-close-list{
  padding: 28px 32px;
  box-sizing: border-box;
}

body[data-page="metodo"] .gl-triad,
body[data-page="metodo"] .gl-state-grid,
body[data-page="metodo"] .gl-state-tools-grid,
body[data-page="metodo"] .gl-gov-grid,
body[data-page="metodo"] .gl-no-grid,
body[data-page="metodo"] .gl-failure-grid,
body[data-page="metodo"] .gl-water-grid,
body[data-page="metodo"] .gl-compare,
body[data-page="metodo"] .gl-evidence-stack{
  gap: 28px;
}
/* === HARD RESET BLOQUE 2 (si algo lo gridea desde otra hoja) === */
body[data-page="metodo"] #gl-method-problema > .gl-method-shell,
body[data-page="metodo"] #gl-method-problema > .gl-method-shell-single{
  display: block;
  grid-template-columns: none;
  gap: 0;
  align-items: initial;
}
/* =========================================================
   BLOQUE 6 — ESTADOS FISIOLÓGICOS OPERATIVOS (AUTOSUFICIENTE)
   Objetivo: que SIEMPRE se vean los contenedores (no texto flotando)
   ========================================================= */

body[data-page="metodo"] #gl-method-estados{
  padding: 95px 0;
  position: relative;
  z-index: 2;
}

/* Head del bloque (evita “defasado”) */
body[data-page="metodo"] #gl-method-estados .gl-method-block-head{
  max-width: 980px;
  margin: 0 0 22px;
}

body[data-page="metodo"] #gl-method-estados .gl-method-h2{
  margin: 0;
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.6px;
  color: var(--m-fg);
}

body[data-page="metodo"] #gl-method-estados .gl-method-lead{
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--m-fg-dim);
  max-width: 860px;
}

/* --------- Superficies (frame + cards) ---------
   Clave: scope fuerte #gl-method-estados para ganarle a cualquier reset.
*/
body[data-page="metodo"] #gl-method-estados .gl-frame-card,
body[data-page="metodo"] #gl-method-estados .gl-state-card{
  border-radius: 18px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 18px 55px var(--m-sh2);
  padding: 28px 32px;
  box-sizing: border-box;
  min-width: 0;
}

body[data-page="metodo"] #gl-method-estados .gl-state-card-accent{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}

/* Frame interno */
body[data-page="metodo"] #gl-method-estados .gl-frame-title{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
}

body[data-page="metodo"] #gl-method-estados .gl-frame-rule{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--m-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--m-fg-dim);
}

/* Estado head */
body[data-page="metodo"] #gl-method-estados .gl-state-head{
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

body[data-page="metodo"] #gl-method-estados .gl-state-tag{
  display: inline-block;
  width: fit-content;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m-accent-strong);
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  border-radius: 999px;
  padding: 6px 10px;
}

body[data-page="metodo"] #gl-method-estados .gl-state-h3{
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: color-mix(in oklab, var(--m-fg) 92%, transparent);
}

/* Grid 2 columnas desktop */
body[data-page="metodo"] #gl-method-estados .gl-state-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Details (accordion mini) — aseguramos que no quede “plano” */
body[data-page="metodo"] #gl-method-estados .gl-mini-acc{
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  overflow: hidden;
}

body[data-page="metodo"] #gl-method-estados .gl-mini-sum{
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: color-mix(in oklab, var(--m-fg) 82%, transparent);
  font-size: 13px;
}

body[data-page="metodo"] #gl-method-estados .gl-mini-body{
  padding: 0 14px 14px;
}

/* Nav rápida */
body[data-page="metodo"] #gl-method-estados .gl-state-nav{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="metodo"] #gl-method-estados .gl-state-link{
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--m-fg) 80%, transparent);
  border: 1px solid var(--m-b1);
  background: var(--m-panel-bg);
  padding: 10px 12px;
  border-radius: 999px;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}

body[data-page="metodo"] #gl-method-estados .gl-state-link:hover{
  opacity: .92;
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--m-accent) 22%, transparent);
}