/* ==========================================================================
   GROUNDLESS — MOBILE.CSS (CLEAN & UNIFIED)
   Only responsive overrides (NO base styles).
   Breakpoints: <= 980 / <= 900 / <= 760 / <= 600 / <= 560 / <= 480
   ========================================================================== */


/* =========================================================
   <= 980px (tablet/desktop chico) — ajustes generales responsive
   (esto estaba disperso en overrides viejo)
   ========================================================= */
@media (max-width: 980px){

  /* FOOTER: si en desktop usa grid, en 1 columna */
  #gl-12-footer .gl-footer-bar{
    grid-template-columns: 1fr !important;
  }
  #gl-12-footer .gl-footer-modules{
    grid-template-columns: 1fr !important;
  }

  /* MÉTODO (page): hero */
  @media (max-width: 920px){
  body[data-page="metodo"] #gl-method-hero > .gl-method-shell{
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
}
  .gl-method-title{
    font-size: 32px;
  }
  .gl-method-hero-structure{
    border-left: none;
    border-top: 1px solid rgba(147,168,95,0.25);
    padding-left: 0;
    padding-top: 30px;
  }

  /* MÉTODO (page): secciones/grids */
  .gl-method-problem-grid{ grid-template-columns: 1fr; }
  .gl-method-mini-diagram{ grid-template-columns: 1fr; }
  .gl-method-h2{ font-size: 24px; }

  .gl-map-diagram{ grid-template-columns: 1fr; }
  .gl-map-aside{
    position: relative;
    top: 0;
  }

  .gl-triad{ grid-template-columns: 1fr; }
  .gl-stair{ grid-template-columns: 1fr; }
  .gl-state-grid{ grid-template-columns: 1fr; }

  .gl-compare{ grid-template-columns: 1fr; }
  .gl-tool-def-grid{ grid-template-columns: 1fr; }
  .gl-state-tools-grid{ grid-template-columns: 1fr; }
  .gl-st-tool-row{ grid-template-columns: 1fr; }

  .gl-water-grid{ grid-template-columns: 1fr; }
  .gl-failure-grid{ grid-template-columns: 1fr; }

  .gl-gov-grid{ grid-template-columns: 1fr; }
  .gl-log-row{ grid-template-columns: 1fr; }

  .gl-close-list{ grid-template-columns: 1fr; }
  .gl-close-cta{
    flex-direction: column;
    align-items: stretch;
  }
  .gl-close-btn{ width: 100%; }
}


/* =========================================================
   <= 900px (mobile core) — stacking + navegación + touch
   ========================================================= */
@media (max-width: 900px){

  

  html, body{
    width: 100%;
    overflow-x: hidden;
  }
  #gl-portal{
    width: 100%;
    overflow-x: hidden;
  }

  /* Container: un solo criterio */
  .container{
    padding-left: var(--gl-pad) !important;
    padding-right: var(--gl-pad) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ajuste de padding vertical general */
  section{
    padding: 32px 0 16px !important;
  }

 /* =========================================================
   TOPBAR (GL-0) — Mobile only (contract-compliant)
   ========================================================= */

@media (max-width: 920px){

  /* En mobile ocultamos el nav horizontal y mostramos el toggle */
  #gl-0-topbar .nav-menu{ display: none; }
  #gl-0-topbar .nav-toggle{ display: inline-flex; }

  /* Shell: menos “pill” para que respire en pantallas chicas */
  #gl-0-topbar .topbar-shell{
    width: calc(100% - 18px);
    border-radius: 22px;
  }

  /* Drawer: debajo del shell, no fixed (más predecible) */
  #gl-0-topbar .nav-drawer{
    width: calc(100% - 18px);
    margin: 10px auto 0;
  }
}
@media (max-width: 980px){
  body[data-page="metodo"] #gl-method-estados .gl-state-grid{
    grid-template-columns: 1fr;
  }
}


  /* =========================================================
     STACK SYSTEM (para layouts desktop 2 col / grids)
     ========================================================= */
  :is(
    .two-col-layout,
    .mosaic-layout,
    .cases-layout,
    .hero-main,
    .contact-main,
    .manual-home-content,
    .manual-system-card,
    .gis-strip,
    .faq-layout,
    .blog-two-col,
    .blog-split-layout,
    .products-grid,
    .gl2-proof,
    .gl2-pillars
  ){
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Reset de anchos mínimos que rompen mobile */
  :is(
    .content-card,
    .hero-stats-card,
    .image-card,
    .mosaic-sidebar,
    .case-featured,
    .case-gallery,
    .method-text,
    .method-card,
    .gis-left,
    .gis-right,
    .manual-left-col,
    .manual-right-col,
    .manual-system-left,
    .manual-system-right,
    .contact-text,
    .contact-card,
    .process-card,
    .gl2-card,
    .gl2-media,
    .gl-product-card
  ){
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  /* Botones full width (touch) */
  :is(
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .product-btn,
    .manual-download-btn,
    .hero-buttons a,
    .stats-actions a,
    .method-actions a,
    .gis-actions a,
    .contact-card-actions a,
    .cases-actions a
  ){
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px !important;
  }
/* =========================================================
   MÉTODO — BASE DE COMPONENTES (HEAD + CARDS)
   Restaura: títulos corridos + contenedores faltantes
   ========================================================= */

body[data-page="metodo"] .gl-method-block-head{
  margin-bottom: 22px;
  max-width: 980px;
}

body[data-page="metodo"] .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-lead{
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--m-fg-dim);
  max-width: 820px;
}

/* Base de superficie tipo card/panel (sin hardcodes) */
body[data-page="metodo"] .gl-frame-card,
body[data-page="metodo"] .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);
  min-width: 0;
}

/* Variante accent si la usás */
body[data-page="metodo"] .gl-state-card-accent{
  border-color: var(--m-b3);
  background: var(--m-card-bg-accent);
}

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

body[data-page="metodo"] .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);
}

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

body[data-page="metodo"] .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-state-h3{
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: color-mix(in oklab, var(--m-fg) 92%, transparent);
}

/* =========================================================
   BLOQUE 6 — ESTADOS (layout explícito)
   ========================================================= */

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

body[data-page="metodo"] #gl-method-estados .gl-frame-card{
  margin-top: 18px;
}

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;
}

/* 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);
}
  /* =========================================================
     HOME — HERO
     ========================================================= */
  #gl-1-hero{
    padding-top: 12px !important;
  }
  .hero-text h1{
    font-size: 34px !important;
    line-height: 1.10 !important;
  }
  .hero-text p{
    font-size: 16px !important;
  }
  .hero-buttons{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Chips estado */
  .hero-state-chips{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .state-chip-link{
    width: 100% !important;
    justify-content: center !important;
  }

  /* =========================================================
     GIS STRIP
     ========================================================= */
  #gl-4-gis-strip .gis-strip{
    padding: 24px !important;
    flex-direction: column !important;
  }
  #gl-4-gis-strip .gis-left,
  #gl-4-gis-strip .gis-right{
    width: 100% !important;
    min-width: 0 !important;
  }
  #gl-4-gis-strip .gis-title{
    font-size: 26px !important;
  }
  #gl-4-gis-strip .gis-microgrid{
    grid-template-columns: 1fr !important;
  }
  #gl-4-gis-strip .gis-actions{
    flex-direction: column !important;
  }

  /* =========================================================
     MANUAL HOME (Recursos)
     ========================================================= */
  #gl-8-recursos .manual-home-content{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    padding: 24px !important;
  }
  #gl-8-recursos .manual-right-col{
    width: 100% !important;
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--gl-border) !important;
    padding-top: 20px !important;
  }
  #gl-8-recursos .manual-features{
    grid-template-columns: 1fr !important;
  }
  #gl-8-recursos .manual-download-btn{
    width: 100% !important;
  }

  /* =========================================================
     GL-2 QUIÉNES (media)
     ========================================================= */
  #gl-2-quienes .gl2-media{
    display: none !important; /* en mobile, fuera */
  }

  /* =========================================================
     PRODUCTOS
     ========================================================= */
  .products-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  #gl-13-productos .gl-custom-block{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    text-align: left !important;
  }
  #gl-13-productos .gl-custom-right{
    width: 100% !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* =========================================================
     FAQ
     ========================================================= */
  #gl-faq-groundless .faq-layout{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  #gl-faq-groundless .faq-item{
    padding: 20px !important;
  }
  #gl-faq-groundless .faq-cta{
    flex-direction: column !important;
  }
  /* =========================================================
     CONTACTO
     ========================================================= */
@media (max-width: 980px){
  #gl-11-contacto .contact-hero--with-photo .contact-content{
    padding: 22px;
    background-position: center;
  }

  #gl-11-contacto .contact-main{
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }

  #gl-11-contacto .contact-proof{
    grid-template-columns: 1fr;
  }

  #gl-11-contacto .contact-text h3{
    font-size: 30px;
  }
}

  /* =========================================================
     FOOTER
     ========================================================= */
  #gl-12-footer{
    padding: 20px 0 40px !important;
  }
  #gl-12-footer .gl-footer-bar{
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 16px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  #gl-12-footer .gl-footer-brand{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: rgba(10,34,1,.40) !important;
    border: 1px solid var(--gl-border) !important;
    border-radius: 22px !important;
    padding: 24px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.20) !important;
  }
  #gl-12-footer .gl-footer-brand-actions{
    justify-content: center !important;
    width: 100% !important;
  }
  #gl-12-footer .gl-footer-modules{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  #gl-12-footer .gl-footer-module{
    background: rgba(6,16,4,.55) !important;
    border: 1px solid var(--gl-border) !important;
    border-radius: 18px !important;
    padding: 20px !important;
    min-height: auto !important;
    box-shadow: 0 4px 15px rgba(0,0,0,.20) !important;
  }
  #gl-12-footer .gl-footer-module-title{
    font-size: 13px !important;
    margin-bottom: 14px !important;
    color: var(--gl-sage) !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(147,168,95,0.10) !important;
    padding-bottom: 8px !important;
  }
  #gl-12-footer .gl-footer-links{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #gl-12-footer .gl-footer-links a{
    text-align: center !important;
    padding: 12px !important;
    background: rgba(255,255,255,0.03) !important;
    border-radius: 12px !important;
  }
  #gl-12-footer .gl-footer-bottom{
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
    margin-top: 20px !important;
  }
  #gl-12-footer .gl-footer-meta{
    justify-content: center !important;
    font-size: 12px !important;
  }
  #gl-12-footer .gl-footer-chips{
    justify-content: center !important;
  }

  /* =========================================================
     GL-6 MÉTODO (home sección) — lo que tenías en overrides viejo
     ========================================================= */
  #gl-6-metodo .method-mini{
    grid-template-columns: 1fr !important;
  }
  #gl-6-metodo .method-text{
    padding: 18px !important;
  }
  #gl-6-metodo .method-text h3{
    font-size: 28px !important;
  }
  #gl-6-metodo .method-actions-left{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #gl-6-metodo .method-actions-left a{
    width: 100% !important;
    justify-content: center !important;
  }
  #gl-6-metodo .method-base-link{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: wrap !important;
  }
/* ===============================
   MÉTODO — Responsive (mobile.css)
   SOLO overrides responsive
================================ */

/* <= 1100px: ocultar TOC desktop, mostrar FAB */
@media (max-width: 1100px){
  body[data-page="metodo"] .gl-toc{ display:none; }
  body[data-page="metodo"] .gl-toc-fab{ display:inline-flex; }
}

/* <= 980px: hero 1 columna + bordes */
@media (max-width: 980px){
  body[data-page="metodo"] .gl-method-shell{
    grid-template-columns: 1fr;
    gap: 50px;
  }
  body[data-page="metodo"] .gl-method-title{ font-size: 32px; }
  body[data-page="metodo"] .gl-method-hero-structure{
    border-left: none;
    border-top: 1px solid var(--m-line);
    padding-left: 0;
    padding-top: 30px;
  }

  body[data-page="metodo"] .gl-method-problem-grid{ grid-template-columns: 1fr; }
  body[data-page="metodo"] .gl-method-mini-diagram{ grid-template-columns: 1fr; }
  body[data-page="metodo"] .gl-method-h2{ font-size: 24px; }

  body[data-page="metodo"] .gl-map-diagram{ grid-template-columns: 1fr; }
  body[data-page="metodo"] .gl-map-aside{ position: relative; top: 0; }

  body[data-page="metodo"] .gl-triad{ grid-template-columns: 1fr; }
  body[data-page="metodo"] .gl-stair{ grid-template-columns: 1fr; }
  body[data-page="metodo"] .gl-state-grid{ grid-template-columns: 1fr; }

  body[data-page="metodo"] .gl-compare{ grid-template-columns: 1fr; }
  body[data-page="metodo"] .gl-tool-def-grid{ grid-template-columns: 1fr; }
  body[data-page="metodo"] .gl-state-tools-grid{ grid-template-columns: 1fr; }
  body[data-page="metodo"] .gl-st-tool-row{ grid-template-columns: 1fr; }

  body[data-page="metodo"] .gl-water-grid{ grid-template-columns: 1fr; }
  body[data-page="metodo"] .gl-failure-grid{ grid-template-columns: 1fr; }
  body[data-page="metodo"] .gl-gov-grid{ grid-template-columns: 1fr; }
  body[data-page="metodo"] .gl-log-row{ grid-template-columns: 1fr; }

  body[data-page="metodo"] .gl-no-grid{ grid-template-columns: 1fr; }

  body[data-page="metodo"] .gl-close-list{ grid-template-columns: 1fr; }
  body[data-page="metodo"] .gl-close-cta{
    flex-direction: column;
    align-items: stretch;
  }
  body[data-page="metodo"] .gl-close-btn{ width: 100%; }
}

/* Desktop grande: reservar espacio para TOC */
@media (min-width: 1101px){
  body[data-page="metodo"] #gl-portal{
    padding-left: 270px; /* ancho toc + aire */
  }
}
  /* Ajuste por sección (mantener espaciado lógico) — overrides viejo */
  section,
  #gl-1-hero,
  #gl-2-quienes,
  #gl-3-mosaico,
  #gl-4-gis-strip,
  #gl-5-servicios,
  #gl-6-metodo,
  #gl-7-como-trabajamos,
  #gl-8-videos,
  #gl-8-recursos,
  #gl-9-casos,
  #gl-10-faq,
  #gl-11-contacto,
  #gl-13-productos,
  #gl-faq-groundless{
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}


/* =========================================================
   <= 600px
   ========================================================= */
@media (max-width: 600px){

  

  .hero-text h1{
    font-size: 32px !important;
    line-height: 1.12 !important;
  }

  /* GIS microgrid (overrides viejo) */
  #gl-4-gis-strip .gis-right .gis-microgrid{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  #gl-4-gis-strip .gis-right .gis-chip{
    border-right: 0 !important;
    border-bottom: 1px solid rgba(147,168,95,.18) !important;
  }
  #gl-4-gis-strip .gis-right .gis-chip:last-child{
    border-bottom: 0 !important;
  }

  #gl-4-gis-strip .gis-actions .btn-primary,
  #gl-4-gis-strip .gis-actions .btn-outline{
    width: 100% !important;
  }
}
@media (max-width: 900px){
  .wrap{
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
  }
  .wrap .panel{
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--gl-border-2);
    max-height: none;
  }
  .wrap .canvas{
    height: 60vh;
    border-radius: 0;
    border: none;
  }
}
/* =========================================================
   MÉTODO — Offset layout para TOC fijo (desktop grande)
   Objetivo: que el contenido arranque a la derecha del TOC,
   sin tocar estilos globales y sin !important.
========================================================= */

:root{
  --m-toc-w: 192px;   /* ancho real del panel TOC */
  --m-toc-gap: 18px;  /* aire entre TOC y contenido */
  --m-toc-offset: 0px;
}

/* Solo desktop grande: activamos offset */
@media (min-width: 1101px){
  body[data-page="metodo"]{
    --m-toc-offset: calc(var(--m-toc-w) + var(--m-toc-gap));
  }
}

/* Asegurar box-sizing para que el padding no rompa el ancho */
body[data-page="metodo"] .gl-method-shell,
body[data-page="metodo"] .gl-method-shell-single{
  box-sizing: border-box;
}

/* Empujar el contenido (NO el portal): esto evita que quede debajo del TOC */
@media (min-width: 900px){
  body[data-page="metodo"] .gl-method-shell,
  body[data-page="metodo"] .gl-method-shell-single{
    padding-left: calc(24px + var(--m-toc-offset));
    padding-right: 24px;
    max-width: none; /* importante: anulamos el centering rígido */
    width: min(900px, calc(100% - 48px)); /* mantenemos tu contrato de ancho */
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 768px) {

  .gl-triad-card,
  .gl-state-card,
  .gl-frame-card,
  .gl-compare-col,
  .gl-st-tool,
  .gl-failure-card,
  .gl-gov-card,
  .gl-no-card,
  .gl-water-card,
  .gl-warn-card,
  .gl-recover,
  .gl-close-core,
  .gl-close-bridge,
  .gl-gov-close,
  .gl-water-signal,
  .gl-evidence,
  .gl-leader,
  .gl-state-tools,
  .gl-industry-diagram,
  .gl-degradation,
  .gl-close-list {
    padding: 22px 20px;
  }

  .gl-method-shell-single {
    padding: 0 18px;
  }
}
/* Responsive (ESTO luego lo movés a mobile.css si querés respetar el contrato) */
@media (max-width: 980px){
  #gl-6-metodo .method-wrap{
    grid-template-columns: 1fr;
    padding: 22px;
  }
  #gl-6-metodo .method-text-card h3{
    font-size: 32px;
  }
  #gl-6-metodo .method-mini{
    grid-template-columns: 1fr;
  }
  #gl-6-metodo .method-foot{
    grid-template-columns: 1fr;
    justify-items: start;
  }
  #gl-6-metodo .method-foot-link{
    justify-self: start;
  }
}
/* Responsive */
@media (max-width: 980px){
  #gl-12-footer{ padding: 44px 0 28px; }

  #gl-12-footer .footer-core{
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  #gl-12-footer .footer-brand{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #gl-12-footer .footer-logo{ height: 52px; }

  #gl-12-footer .footer-nav{
    justify-content: flex-start;
    gap: 10px;
  }

  #gl-12-footer .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
  }
  @media (max-width: 920px){
  body[data-page="metodo"] .gl-method-problem-grid{
    grid-template-columns: 1fr;
  }

  body[data-page="metodo"] .gl-method-mini-diagram{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  body[data-page="metodo"] .gl-method-card{
    padding: 18px;
  }

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

  body[data-page="metodo"] .gl-mini-flow{
    gap: 8px;
  }

  body[data-page="metodo"] .gl-mini-flow span{
    padding: 7px 9px;
  }
}@media (max-width: 980px){
  body[data-page="metodo"] .gl-triad{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  body[data-page="metodo"] .gl-triad-card{
    padding: 18px;
  }

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

  body[data-page="metodo"] .gl-loop-flow{
    gap: 10px;
  }
}
@media (max-width: 980px){
  body[data-page="metodo"] .gl-stair{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px){
  body[data-page="metodo"] #gl-method-estados{
    padding: 80px 0;
  }
  body[data-page="metodo"] #gl-method-estados .gl-state-grid{
    grid-template-columns: 1fr;
  }
  body[data-page="metodo"] #gl-method-estados .gl-frame-card,
  body[data-page="metodo"] #gl-method-estados .gl-state-card{
    padding: 22px 20px;
  }
}
/* =========================================================
   BLOQUE 7 — INSTRUMENTOS VS VARIABLES (mobile overrides)
   Solo responsive. Respeta el contrato.
   ========================================================= */

@media (max-width: 980px){

  body[data-page="metodo"] #gl-method-instrumentos{
    padding: 80px 0;
  }

  /* Comparativa pasa a 1 columna */
  body[data-page="metodo"] .gl-compare{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Definición operativa 2×2 → 1×4 */
  body[data-page="metodo"] .gl-tool-def-grid{
    grid-template-columns: 1fr;
  }

  /* Tabla conceptual 2 col → 1 col */
  body[data-page="metodo"] .gl-state-tools-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Diagrama de líder: que respire */
  body[data-page="metodo"] .gl-leader-diagram{
    gap: 10px;
  }

  body[data-page="metodo"] .gl-leader-arrow{
    width: 18px;
  }

  /* Filas: etiqueta arriba (K/V stacked) */
  body[data-page="metodo"] .gl-st-tool-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* Padding general un poco más compacto */
  body[data-page="metodo"] .gl-compare-col,
  body[data-page="metodo"] .gl-leader,
  body[data-page="metodo"] .gl-state-tools{
    padding: 22px 18px;
  }

  body[data-page="metodo"] .gl-st-tool{
    padding: 16px 16px;
  }
}

@media (max-width: 560px){

  /* En teléfonos chicos, el diagrama puede envolver */
  body[data-page="metodo"] .gl-leader-node{
    font-size: 12px;
    padding: 9px 10px;
  }

  body[data-page="metodo"] .gl-compare-title,
  body[data-page="metodo"] .gl-leader-title,
  body[data-page="metodo"] .gl-state-tools-title{
    font-size: 11px;
  }
}
/* ===============================
   @media (mobile)
   =============================== */

@media (max-width: 980px){

  body[data-page="metodo"] .gl-degradation{
    gap: 12px;
  }

  body[data-page="metodo"] .gl-deg-step{
    flex: 1 1 240px;
    min-width: 220px;
  }

  body[data-page="metodo"] .gl-failure-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Mobile real: apilar steps y apagar flechas */
@media (max-width: 680px){

  body[data-page="metodo"] #gl-method-fallos{
    padding: 78px 0;
  }

  body[data-page="metodo"] .gl-degradation{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  body[data-page="metodo"] .gl-deg-step{
    min-width: 0;
    width: 100%;
  }

  body[data-page="metodo"] .gl-deg-arrow{
    display: none;
  }

  body[data-page="metodo"] .gl-failure-card{
    padding: 22px 20px;
    border-radius: 16px;
  }
}
/* ===============================
   @media
   =============================== */

/* Tablet: diagrama respira + grid pasa a 2 col */
@media (max-width: 980px){

  body[data-page="metodo"] .gl-industry-diagram{
    gap: 12px;
  }

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

  body[data-page="metodo"] .gl-gov-grid{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* Mobile: diagrama vertical, links off; pilares en 1 col */
@media (max-width: 680px){

  body[data-page="metodo"] #gl-method-arquitectura{
    padding: 78px 0;
  }

  body[data-page="metodo"] .gl-industry-diagram{
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="metodo"] .gl-industry-node{
    width: 100%;
    min-width: 0;
  }

  body[data-page="metodo"] .gl-industry-link{
    display: none;
  }

  body[data-page="metodo"] .gl-gov-grid{
    grid-template-columns: 1fr;
  }

  body[data-page="metodo"] .gl-gov-card{
    padding: 22px 20px;
    border-radius: 16px;
  }

  body[data-page="metodo"] .gl-gov-close{
    padding: 20px;
    border-radius: 16px;
  }

  body[data-page="metodo"] .gl-log-row{
    grid-template-columns: 1fr;
  }
}
/* ===============================
   @media
   =============================== */

/* Tablet: 3 -> 2 columnas */
@media (max-width: 980px){

  body[data-page="metodo"] .gl-no-grid{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* Mobile: 2 -> 1 columna + padding más compacto */
@media (max-width: 680px){

  body[data-page="metodo"] #gl-method-no{
    padding: 78px 0;
  }

  body[data-page="metodo"] .gl-no-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body[data-page="metodo"] .gl-no-card{
    padding: 20px 18px;
    border-radius: 16px;
  }

  body[data-page="metodo"] .gl-no-close{
    padding: 20px;
    border-radius: 16px;
  }
}
/* ===============================
   @media
   =============================== */

/* Tablet */
@media (max-width: 980px){

  body[data-page="metodo"] .gl-close-list{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body[data-page="metodo"] .gl-close-item-accent{
    grid-column: auto;
  }
}

/* Mobile */
@media (max-width: 680px){

  body[data-page="metodo"] #gl-method-cierre{
    padding: 78px 0 92px;
  }

  body[data-page="metodo"] .gl-close-core{
    padding: 22px 18px 18px;
    border-radius: 16px;
  }

  body[data-page="metodo"] .gl-close-bridge{
    padding: 18px;
    border-radius: 16px;
  }

  body[data-page="metodo"] .gl-close-cta{
    gap: 10px;
  }

  body[data-page="metodo"] .gl-close-btn{
    width: 100%;
    justify-content: center;
    padding: 13px 16px;
  }
}
/* Responsive: apila stats */
@media (max-width: 860px){
  #gl-9-casos .case-stats{
    grid-template-columns: 1fr;
  }
  #gl-9-casos .case-featured{
    padding: 20px;
  }
  #gl-9-casos .carousel-images{
    height: clamp(240px, 52vw, 360px);
  }
}
/* Responsive: pasa a stack sin romper */
@media (max-width: 980px){
  #gl-7-como-trabajamos .process-grid{
    grid-template-columns: 1fr;
  }
}
/* ---------- Responsive ---------- */
@media (max-width: 980px){
  #gl-faq-groundless .faq-head{
    grid-template-columns: 1fr;
    align-items: start;
  }
  #gl-faq-groundless .faq-head-actions{
    justify-content: flex-start;
  }
  #gl-faq-groundless .faq-grid{
    grid-template-columns: 1fr;
  }
}
/* ✅ Reserva de espacio: evitamos que el TOC tape contenido */
@media (min-width: 1100px){
  body[data-page="metodo"] .gl-method-shell{
    padding-left: calc(var(--m-toc-w) + var(--m-toc-gap));
  }
}

/* En pantallas chicas, ocultamos el TOC desktop y queda FAB/modal */
@media (max-width: 1099px){
  body[data-page="metodo"] #gl-method-toc.gl-toc{ display: none; }
  body[data-page="metodo"] .gl-method-shell{ padding-left: 0; }
}
/* =========================
   Responsive (solo lo esencial)
   ========================= */
@media (max-width: 640px){
  body[data-page="gis"] .gis-main-layout{ padding: 28px 0 48px; }
  body[data-page="gis"] .gis-title{ font-size: 26px; }
  body[data-page="gis"] .gis-subtitle{ font-size: 14.5px; }
  body[data-page="gis"] .gis-form-card{ padding: 20px; }
  body[data-page="gis"] .gis-result-header{ flex-direction: column; align-items:flex-start; }
  body[data-page="gis"] .gis-score-value{ font-size: 32px; }
}