/* =========================================================
   Groundless — style.css (Unified / Refactor Pass)
   Contrato:
   - globals.css: tokens + resets + base layout
   - style.css: look & feel + componentes + módulos (sin @media)
   - mobile.css: SOLO responsive (@media)
   - overrides.css: último recurso
   ========================================================= */

/* =========================================================
   TOPBAR (GL-0) — Site-wide component (DESKTOP BASE)
   - Sin @media (mobile va en mobile.css)
   - Sin inline styles
   ========================================================= */

#gl-0-topbar.gl-topbar{
  position: sticky;
  top: 0;
  z-index: 9999;
  isolation: isolate;
}

#gl-0-topbar .topbar-shell{
  margin: 4px auto 0;
  width: min(1180px, calc(100% - 28px));
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--gl-border-2);
  background: rgba(6,16,4,.42);
  box-shadow: var(--gl-shadow-2);
  backdrop-filter: blur(10px);
  transition: transform var(--gl-t-med), box-shadow var(--gl-t-med);
}

#gl-0-topbar .topbar-content{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
}

/* Logo */
#gl-0-topbar .logo{
  padding: 6px 10px;
  border-radius: 999px;
}
#gl-0-topbar .logo img{
  height: 20px;
  width: auto;
  opacity: .98;
  display: block;
}

/* Nav desktop */
#gl-0-topbar .nav-menu{
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
}

#gl-0-topbar .nav-link{
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: .1px;
  background: rgba(6,16,4,.16);
  border: 1px solid rgba(147,168,95,.10);
  color: rgba(232,221,204,.92);
  transition: transform var(--gl-t-fast), background var(--gl-t-fast), border-color var(--gl-t-fast), color var(--gl-t-fast);
}
#gl-0-topbar .nav-link:hover{
  background: rgba(47,81,1,.14);
  border-color: rgba(147,168,95,.26);
  transform: translateY(-1px);
  color: rgba(232,221,204,.98);
}
#gl-0-topbar .nav-link[aria-current="page"]{
  background: rgba(47,81,1,.18);
  border-color: rgba(147,168,95,.26);
}

/* Separador */
#gl-0-topbar .nav-sep{
  height: 24px;
  width: 1px;
  background: rgba(147,168,95,.18);
  margin: 0 6px 0 2px;
}

/* CTA */
#gl-0-topbar .nav-cta{
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: .2px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(147,168,95,.16);
  transition: transform var(--gl-t-fast), box-shadow var(--gl-t-fast), filter var(--gl-t-fast), background var(--gl-t-fast), border-color var(--gl-t-fast);
}

#gl-0-topbar .nav-cta-primary{
  position: relative;
  isolation: isolate;
  font-weight: 900;
  padding: 9px 18px;
  color: var(--gl-bg);
  background: linear-gradient(135deg, rgba(147,168,95,.96), rgba(67,81,2,.96));
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 14px 36px rgba(0,0,0,.48), inset 0 0 0 1px rgba(232,221,204,.10);
}
#gl-0-topbar .nav-cta-primary::before{
  content:"";
  position:absolute;
  inset:-28%;
  border-radius: 999px;
  background:
    radial-gradient(55% 55% at 50% 45%, rgba(232,221,204,.22), transparent 62%),
    radial-gradient(55% 55% at 50% 55%, rgba(147,168,95,.26), transparent 68%);
  filter: blur(22px);
  opacity:.55;
  z-index:-1;
  pointer-events:none;
  animation: glTopbarPulse 6.2s ease-in-out infinite;
}
@keyframes glTopbarPulse{
  0%,100%{ opacity:.45; transform: translateY(0); }
  50%{ opacity:.78; transform: translateY(-1px); }
}
#gl-0-topbar .nav-cta-primary:hover{
  transform: translateY(-2px);
  filter: saturate(118%);
  box-shadow: 0 18px 46px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.28);
}

#gl-0-topbar .nav-cta-shop{
  background: rgba(6,16,4,.22);
  color: rgba(232,221,204,.92);
  font-weight: 800;
}
#gl-0-topbar .nav-cta-shop:hover{
  background: rgba(47,81,1,.14);
  border-color: rgba(147,168,95,.28);
  transform: translateY(-1px);
}

/* Toggle (mobile lo habilita) */
#gl-0-topbar .nav-toggle{
  justify-self: end;
  display: none;
  width: 44px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(147,168,95,.16);
  background: rgba(6,16,4,.22);
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
}
#gl-0-topbar .nav-toggle span{
  display:block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgba(232,221,204,.86);
}

/* Drawer (mobile lo usa) */
#gl-0-topbar .nav-drawer[hidden]{ display:none; }

#gl-0-topbar .nav-drawer{
  width: min(1180px, calc(100% - 28px));
  margin: 10px auto 0;
  border-radius: 22px;
  border: 1px solid rgba(147,168,95,.18);
  background: rgba(6,16,4,.42);
  box-shadow: var(--gl-shadow-2);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
#gl-0-topbar .nav-drawer-inner{
  display:flex;
  flex-direction: column;
  padding: 10px;
  gap: 8px;
}
#gl-0-topbar .nav-drawer-inner a{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(147,168,95,.14);
  background: rgba(10,34,1,.26);
  color: rgba(232,221,204,.92);
  text-decoration: none;
  font-weight: 850;
}
#gl-0-topbar .nav-drawer-inner a:hover{
  background: rgba(10,34,1,.34);
  border-color: rgba(147,168,95,.22);
  transform: translateY(-1px);
}
#gl-0-topbar .nav-drawer-sep{
  height: 1px;
  width: 100%;
  background: rgba(147,168,95,.14);
  border-radius: 999px;
  margin: 4px 2px;
}

/* =========================================================
   TOPBAR — Compact fit when nav grows (keeps identity)
   Triggered by container width, no JS.
   ========================================================= */

/* Si tu stack no soporta container queries, salteá esta y usá la opción 2 */
#gl-0-topbar .topbar-shell{
  container-type: inline-size;
}

/* Cuando la topbar se “achica”, compactamos espaciados */
@container (max-width: 1120px){
  #gl-0-topbar .nav-menu{ gap: 10px; }

  #gl-0-topbar .nav-link{
    padding: 7px 11px;
    font-size: 13px;
  }

  #gl-0-topbar .nav-cta{
    padding: 7px 13px;
    font-size: 13px;
  }

  #gl-0-topbar .nav-cta-primary{
    padding: 8px 16px;
  }

  #gl-0-topbar .nav-sep{ margin: 0 4px 0 2px; }
}

/* =========================================================
   HOME — HERO  #gl-1-hero
   Router explícito v3 — Volumen restaurado (FINAL LOCK)
   Contrato:
   - Solo HOME / HERO
   - Sin tocar tokens
   - Dark default + Light tune
   ========================================================= */

body[data-page="home"] #gl-1-hero{
  position: relative;
  z-index: 2;
  padding: 56px 0 86px;
}

/* Card principal */
body[data-page="home"] #gl-1-hero .hero-card{
  border-radius: 30px;
  border: 1px solid var(--m-b2);
  background: var(--m-card-bg);
  box-shadow: 0 28px 88px var(--m-sh2);
  overflow: hidden;
  position: relative;
  isolation: isolate;

  /* Background image (swapable) */
  --gl-hero-bg: url("https://lh3.googleusercontent.com/d/11R3T5dA9EQeLw7o_Uot3i9nxjdVl-Zi7");
}

/* Imagen midground */
body[data-page="home"] #gl-1-hero .hero-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  z-index: 0;
  pointer-events:none;

  background-image: var(--gl-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* dark default */
  opacity: .42;
  filter: saturate(.85) contrast(1.06) brightness(.72);
  transform: scale(1.03);
}

/* Overlays de volumen (dark default) */
body[data-page="home"] #gl-1-hero .hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  z-index: 1;
  pointer-events:none;

  background:
    /* lift suave arriba-izq (zona lectura) */
    radial-gradient(1200px 520px at 14% -12%,
      color-mix(in oklab, var(--m-accent) 14%, transparent) 0%,
      transparent 62%),

    /* peso abajo-der (asienta) */
    radial-gradient(980px 560px at 78% 118%,
      color-mix(in oklab, black 24%, transparent) 0%,
      transparent 62%),

    /* viñeta central controlada (mantiene foco texto + panel) */
    radial-gradient(1050px 720px at 50% 58%,
      transparent 0%,
      rgba(0,0,0,.18) 70%,
      rgba(0,0,0,.32) 100%),

    /* caída vertical (no ensucia, solo “asienta”) */
    linear-gradient(180deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.08) 46%,
      rgba(0,0,0,.14) 100%);

  opacity: .92;
}

/* Contenido */
body[data-page="home"] #gl-1-hero .hero-content{
  position: relative;
  z-index: 2;
  padding: 36px 36px;
}

body[data-page="home"] #gl-1-hero .hero-main{
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 22px;
  align-items: start;
}

/* ===== IZQUIERDA ===== */

body[data-page="home"] #gl-1-hero .hero-text{
  position: relative;
  z-index: 2; /* asegura que siempre quede por encima del halo local */
  min-width: 0;
}

/* Halo local (agarre del título sin “sombra dura”) */
body[data-page="home"] #gl-1-hero .hero-text::before{
  content:"";
  position:absolute;
  inset:-40px -80px -40px -120px;
  z-index: 1;
  pointer-events:none;

  background:
    radial-gradient(640px 420px at 28% 36%,
      rgba(0,0,0,.30),
      transparent 72%
    );
  filter: blur(30px);
  opacity: .80;
}

body[data-page="home"] #gl-1-hero .hero-text > *{
  position: relative;
  z-index: 2; /* texto arriba del halo */
}

body[data-page="home"] #gl-1-hero .hero-text h1{
  margin: 0 0 14px;
  font-size: clamp(38px, 3.2vw, 54px);
  line-height: 1.03;
  letter-spacing: -0.022em;
  color: color-mix(in oklab, var(--m-fg) 98%, #f5f2e8 4%);
  text-shadow: 0 14px 44px rgba(0,0,0,.22);
}

body[data-page="home"] #gl-1-hero .hero-text h4{
  margin: 0;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 650;
  color: color-mix(in oklab, var(--m-fg) 88%, transparent);
}

body[data-page="home"] #gl-1-hero .hero-text h4 b{
  font-weight: 850;
  color: color-mix(in oklab, var(--m-fg) 94%, transparent);
}

body[data-page="home"] #gl-1-hero .hero-router-line{
  margin-top: 14px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  line-height: 1.2;
}

body[data-page="home"] #gl-1-hero .hero-router-strong{
  color: color-mix(in oklab, var(--m-fg) 92%, transparent);
  font-weight: 900;
}

body[data-page="home"] #gl-1-hero .hero-router-dim{
  color: color-mix(in oklab, var(--m-fg) 76%, transparent);
  font-weight: 800;
}

body[data-page="home"] #gl-1-hero .stats-footnote{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--m-line) 86%, transparent);
  font-size: 12.5px;
  line-height: 1.55;
  color: color-mix(in oklab, var(--m-fg) 70%, transparent);
}

body[data-page="home"] #gl-1-hero .stats-footnote b{
  color: color-mix(in oklab, var(--m-fg) 86%, transparent);
  font-weight: 850;
}

/* ===== DERECHA ===== */

body[data-page="home"] #gl-1-hero .hero-stats-card{
  border-radius: 24px;
  border: 1px solid color-mix(in oklab, var(--m-b2) 100%, transparent);
  background: color-mix(in oklab, var(--m-panel-bg) 95%, black 6%);
  box-shadow: 0 14px 44px var(--m-sh2);
  padding: 16px;
  position: relative;
  min-width: 0;

  /* separa del fondo sin volverse “vidrio brillante” */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body[data-page="home"] #gl-1-hero .hero-stats-card::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:18px;
  border:1px solid color-mix(in oklab, var(--m-fg) 7%, transparent);
  pointer-events:none;
  opacity:.68;
}

body[data-page="home"] #gl-1-hero .stats-grid{
  display:grid;
  gap:10px;
}

body[data-page="home"] #gl-1-hero .stat-item{
  display:block;
  text-decoration:none;
  border-radius:18px;
  border:1px solid color-mix(in oklab, var(--m-b1) 92%, transparent);
  background: color-mix(in oklab, var(--m-panel-bg) 76%, transparent);
  padding:12px;
  transition: border-color .14s ease, filter .14s ease, transform .14s ease;
}

body[data-page="home"] #gl-1-hero .stat-item:hover{
  border-color: var(--m-b3);
  transform: translateY(-1px);
  filter: brightness(1.015);
}

body[data-page="home"] #gl-1-hero .stat-item--primary{
  border-color: color-mix(in oklab, var(--m-b3) 78%, transparent);
  background: color-mix(in oklab, var(--m-panel-bg) 72%, transparent);
}

body[data-page="home"] #gl-1-hero .stat-value{
  margin:0 0 6px;
  font-size:14.5px;
  font-weight:850;
  line-height:1.25;
  color: color-mix(in oklab, var(--m-fg) 90%, transparent);
}

body[data-page="home"] #gl-1-hero .stat-desc{
  margin:0;
  font-size:12.75px;
  line-height:1.6;
  color: color-mix(in oklab, var(--m-fg) 70%, transparent);
}

body[data-page="home"] #gl-1-hero .stats-label{
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: color-mix(in oklab, var(--m-fg) 80%, transparent);
}

/* ===== LIGHT MODE (calibración sin “lavar”) ===== */

html[data-theme="light"] body[data-page="home"] #gl-1-hero .hero-card::after{
  opacity: .24;
  filter: saturate(.75) contrast(1.02) brightness(1.12);
}

/* Overlay en light: aire + lectura, sin “gris sucio” */
html[data-theme="light"] body[data-page="home"] #gl-1-hero .hero-card::before{
  opacity: .92;
  background:
    radial-gradient(1200px 520px at 14% -12%,
      color-mix(in oklab, var(--m-accent) 10%, transparent) 0%,
      transparent 62%),

    radial-gradient(1050px 720px at 50% 58%,
      transparent 0%,
      rgba(255,255,255,.18) 70%,
      rgba(255,255,255,.28) 100%),

    linear-gradient(180deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.08) 46%,
      rgba(255,255,255,.16) 100%);
}

/* En light: el halo pasa a ser “crema” (no negro) */
html[data-theme="light"] body[data-page="home"] #gl-1-hero .hero-text::before{
  background:
    radial-gradient(640px 420px at 28% 36%,
      rgba(255,255,255,.52),
      transparent 72%
    );
  opacity: .78;
  filter: blur(28px);
}

html[data-theme="light"] body[data-page="home"] #gl-1-hero .hero-text h1{
  text-shadow: none;
}

/* =========================================================
   11) GIS STRIP (GL-4)
   Scope: Home
   Rol: Router de DIAGNÓSTICO (no del ecosistema)
   - 1 CTA fuerte (GIS)
   - 2 rutas finas (método / recursos)
   - Panel entregable se mantiene pero no compite
   ========================================================= */

#gl-4-gis-strip{ padding: 26px 0 10px; }

/* Frame principal */
#gl-4-gis-strip .gis-strip{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 32px;
  border-radius: var(--gl-radius);
  border: 1px solid var(--gl-border-2);
  background: linear-gradient(135deg, rgba(0,0,0,.16), rgba(0,0,0,.09));
  box-shadow: var(--gl-shadow-2);
  align-items: stretch;
  overflow: hidden;
}

/* Profundidad (más “cara”, menos blur-barato) */
#gl-4-gis-strip .gis-strip::before{
  content:"";
  position:absolute;
  inset:-30%;
  pointer-events:none;
  background:
    radial-gradient(48% 58% at 18% 28%, rgba(147,168,95,.12), transparent 62%),
    radial-gradient(46% 58% at 86% 70%, rgba(67,81,2,.10), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 58%);
  filter: blur(18px); /* ↓ blur */
  opacity: .92;
}

#gl-4-gis-strip .gis-left,
#gl-4-gis-strip .gis-right{ position: relative; z-index: 1; }

#gl-4-gis-strip .gis-left{
  flex: 3;
  min-width: 320px;
}

#gl-4-gis-strip .gis-right{
  flex: 2;
  min-width: 280px;
  display: flex;
}

/* Kicker */
#gl-4-gis-strip .gis-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gl-fg-dim);
  font-weight: 800;
  padding: 7px 11px;
  border: 1px solid var(--gl-border-1);
  border-radius: var(--gl-r-pill);
  background: rgba(0,0,0,.12);
}

/* Título / texto */
#gl-4-gis-strip .gis-title{
  font-size: 30px;
  font-weight: 780;
  color: var(--gl-fg);
  margin: 14px 0 12px 0;
  line-height: 1.12;
  letter-spacing: -0.2px;
}

#gl-4-gis-strip .gis-desc{
  font-size: 16px;
  color: var(--gl-fg-dim);
  line-height: 1.65;
  margin: 0 0 16px 0;
  max-width: 70ch;
}
#gl-4-gis-strip .gis-desc b{
  color: var(--gl-accent-strong);
  font-weight: 780;
}

/* Acciones */
#gl-4-gis-strip .gis-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px 0;
}

/* Router line (coherente con Hero) */
#gl-4-gis-strip .gis-router-line{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.2;
}

#gl-4-gis-strip .gis-router-strong{
  color: color-mix(in oklab, var(--gl-fg) 92%, transparent);
  font-weight: 900;
}
#gl-4-gis-strip .gis-router-dim{
  color: color-mix(in oklab, var(--gl-fg) 70%, transparent);
  font-weight: 800;
}

/* Links finos (sin competir) */
#gl-4-gis-strip .gis-secondary-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px 0;
}

#gl-4-gis-strip .gis-link{
  font-size: 13px;
  line-height: 1.4;
  color: var(--gl-fg-soft);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--gl-border-1) 70%, transparent);
  padding-bottom: 2px;
  transition: color var(--gl-t-fast), border-color var(--gl-t-fast), transform var(--gl-t-fast);
}
#gl-4-gis-strip .gis-link:hover{
  color: color-mix(in oklab, var(--gl-fg) 86%, transparent);
  border-color: color-mix(in oklab, var(--gl-fg) 22%, transparent);
  transform: translateY(-1px);
}
#gl-4-gis-strip .gis-link-sep{
  color: color-mix(in oklab, var(--gl-fg) 40%, transparent);
}

/* Nota inferior (pill + texto) */
#gl-4-gis-strip .gis-note{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--gl-fg-soft);
}

#gl-4-gis-strip .gis-note-pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--gl-r-pill);
  border: 1px solid var(--gl-border-1);
  background: rgba(0,0,0,.12);
  color: var(--gl-fg-dim);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Panel derecho (contenedor) — lo calmamos */
#gl-4-gis-strip .gis-panel{
  width: 100%;
  border-radius: var(--gl-r-3);
  border: 1px solid color-mix(in oklab, var(--gl-border-1) 92%, transparent);
  background: rgba(0,0,0,.12);
  box-shadow: var(--gl-shadow-1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#gl-4-gis-strip .gis-panel-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(147,168,95,.10);
}

#gl-4-gis-strip .gis-panel-title{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gl-accent-strong);
  font-weight: 850;
}

#gl-4-gis-strip .gis-panel-sub{
  font-size: 12px;
  color: var(--gl-fg-soft);
}

/* Microgrid chips */
#gl-4-gis-strip .gis-microgrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Chips — menos hover, menos “juguete”, más sistema */
#gl-4-gis-strip .gis-chip{
  border-radius: var(--gl-r-2);
  border: 1px solid var(--gl-border-1);
  background: rgba(0,0,0,.10);
  padding: 14px;
  transition: border-color var(--gl-t-fast), background var(--gl-t-fast);
}
#gl-4-gis-strip .gis-chip:hover{
  background: rgba(0,0,0,.14);
  border-color: var(--gl-border-2);
}

/* Top row inside chip: title + tag */
#gl-4-gis-strip .gis-chip-top{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

#gl-4-gis-strip .gis-chip b{
  font-size: 14px;
  color: var(--gl-fg);
  letter-spacing: .2px;
}

#gl-4-gis-strip .gis-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 9px;
  border-radius: var(--gl-r-pill);
  border: 1px solid rgba(147,168,95,.16);
  background: rgba(0,0,0,.12);
  color: var(--gl-fg-soft);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

#gl-4-gis-strip .gis-chip span{
  display:block;
  font-size: 13px;
  color: var(--gl-fg-dim);
  line-height: 1.55;
}

/* Footer line */
#gl-4-gis-strip .gis-footerline{
  padding-top: 12px;
  border-top: 1px solid rgba(147,168,95,.10);
  font-size: 13px;
  line-height: 1.6;
  color: var(--gl-fg-soft);
}

/* Light theme (mantener) */
html[data-theme="light"] #gl-4-gis-strip .gis-strip{
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  border-color: var(--gl-border-2);
}

html[data-theme="light"] #gl-4-gis-strip .gis-kicker,
html[data-theme="light"] #gl-4-gis-strip .gis-note-pill,
html[data-theme="light"] #gl-4-gis-strip .gis-panel,
html[data-theme="light"] #gl-4-gis-strip .gis-tag,
html[data-theme="light"] #gl-4-gis-strip .gis-chip{
  background: rgba(255,255,255,.78);
}


/* =========================================================
   09) HOME — CASOS REALES (GL-9)
   Rol: prueba silenciosa (no CTA, no show, no “portfolio”)
   ========================================================= */

#gl-9-casos{
  padding: 88px 0;
}

#gl-9-casos .cases-subline{
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gl-fg-dim);
  max-width: 78ch;
}

/* Layout general */
#gl-9-casos .cases-layout{
  margin-top: 26px;
  display: grid;
  gap: 24px;
}

/* Card principal */
#gl-9-casos .case-featured{
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px; /* ↓ menos “cargado” */
}

/* Header sobrio */
#gl-9-casos .case-head{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#gl-9-casos .case-kicker{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--gl-fg-dim);
  padding: 7px 10px;
  border-radius: var(--gl-r-pill);
  border: 1px solid var(--gl-border-1);
  background: color-mix(in oklab, var(--gl-surface-0) 70%, transparent);
}

#gl-9-casos .case-proofline{
  font-size: 14px;
  line-height: 1.6;
  color: var(--gl-fg-soft);
}
#gl-9-casos .case-proofline b{
  color: var(--gl-fg);
}

/* Stats: 2 tiles, más finas (menos “panel dentro de panel”) */
#gl-9-casos .case-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

#gl-9-casos .case-stat{
  padding: 16px;
  border-radius: var(--gl-r-2);
  border: 1px solid color-mix(in oklab, var(--gl-border-1) 75%, transparent);
  background: color-mix(in oklab, var(--gl-surface-1) 84%, transparent);
  box-shadow: var(--gl-shadow-1);

  display: flex;
  flex-direction: column;
  gap: 8px;
}

#gl-9-casos .stat-number{
  font-size: 20px;
  line-height: 1.15;
  font-weight: 750;
  color: var(--gl-accent-strong);
}

#gl-9-casos .stat-label{
  font-size: 13px;
  line-height: 1.4;
  color: var(--gl-fg-dim);
}

#gl-9-casos .stat-note{
  font-size: 13px;
  line-height: 1.65;
  color: var(--gl-fg-soft);
}
#gl-9-casos .stat-note b{
  color: var(--gl-fg);
  font-weight: 750;
}

/* ---------- Carousel (simple, sin zoom) ---------- */
#gl-9-casos .case-image{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#gl-9-casos .carousel-wrapper{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--gl-border-1) 70%, transparent);
  background: color-mix(in oklab, var(--gl-surface-0) 70%, transparent);
}

/* altura controlada: premium + menos scroll */
#gl-9-casos .carousel-images{
  position: relative;
  width: 100%;
  height: clamp(280px, 28vw, 420px);
}

#gl-9-casos .carousel-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  

  opacity: 0;
  transform: scale(1.01);
  transition: opacity .18s ease, transform .28s ease;
  will-change: opacity, transform;
  user-select: none;
  -webkit-user-drag: none;
}

#gl-9-casos .carousel-image.active{
  opacity: 1;
  transform: scale(1.00);

}

/* Flechas: más chicas, más “silenciosas” */
#gl-9-casos .carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;

  border: 1px solid color-mix(in oklab, var(--gl-border-1) 75%, transparent);
  background: color-mix(in oklab, var(--gl-surface-0) 55%, transparent);
  color: color-mix(in oklab, var(--gl-fg) 86%, transparent);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, filter .14s ease;
}

#gl-9-casos .carousel-prev{ left: 14px; }
#gl-9-casos .carousel-next{ right: 14px; }

#gl-9-casos .carousel-btn:hover{
  transform: translateY(-50%) translateY(-1px);
  border-color: var(--gl-border-3);
  background: color-mix(in oklab, var(--gl-surface-1) 72%, transparent);
  filter: brightness(1.03);
}

#gl-9-casos .carousel-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 2px 0 0;
}

#gl-9-casos .carousel-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--gl-border-1) 75%, transparent);
  background: color-mix(in oklab, var(--gl-surface-0) 55%, transparent);
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
#gl-9-casos .carousel-dot.active{
  background: color-mix(in oklab, var(--gl-accent-strong) 55%, transparent);
  border-color: color-mix(in oklab, var(--gl-accent-strong) 55%, transparent);
  transform: scale(1.1);
}

/* Footnote */
#gl-9-casos .case-footnote{
  font-size: 14px;
  line-height: 1.7;
  color: var(--gl-fg-dim);
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--gl-border-1) 70%, transparent);
}
#gl-9-casos .case-footnote b{
  color: var(--gl-fg);
}

/* Divider full */
#gl-9-casos .divider-full{
  margin-top: 64px;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gl-border-2), transparent);
}




/* =========================================================
   HOME — MÉTODO (Router)  #gl-6-metodo
   Estrategia A: 1 idea + 1 decisión + 1 CTA (router puro)
   ========================================================= */

#gl-6-metodo{
  position: relative;
  z-index: 2;
  padding: 88px 0;
}

/* Shell: layout + fondo ambiental */
#gl-6-metodo .two-col-layout{
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  overflow: visible;
  padding: 0;

  /* knobs */
  --gl-metodo-photo-opacity: 0.09;
  --gl-metodo-overlay: 0.30;
}

/* Foto ambiental */
#gl-6-metodo .two-col-layout::before{
  content:"";
  position:absolute;
  inset: -10px;
  z-index: 0;
  pointer-events:none;

  background-image: url("https://lh3.googleusercontent.com/d/1B4o8lbZSowKNNch4Xz9c5631V8C0qs0m");
  background-size: cover;
  background-position: center;
  opacity: var(--gl-metodo-photo-opacity);
  filter: saturate(1.02) contrast(1.02);
  transform: scale(1.02);
}

/* Overlay token-driven */
#gl-6-metodo .two-col-layout::after{
  content:"";
  position:absolute;
  inset: -10px;
  z-index: 0;
  pointer-events:none;

  background:
    radial-gradient(1200px 560px at 18% 0%,
      color-mix(in oklab, var(--gl-accent) 16%, transparent),
      transparent 62%),
    radial-gradient(900px 520px at 90% 20%,
      color-mix(in oklab, var(--gl-accent-strong) 10%, transparent),
      transparent 60%),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--gl-surface-3) var(--gl-metodo-overlay), transparent),
      color-mix(in oklab, var(--gl-surface-2) calc(var(--gl-metodo-overlay) - 0.12), transparent) 55%,
      color-mix(in oklab, var(--gl-surface-3) calc(var(--gl-metodo-overlay) + 0.03), transparent)
    );
}

/* Card real */
#gl-6-metodo .method-wrap{
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 22px;

  padding: 26px;
  overflow: hidden;
  align-items: start;
}

/* Izquierda */
#gl-6-metodo .method-left{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#gl-6-metodo .method-left h3{
  margin: 0;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -0.6px;
  color: var(--gl-fg);
  font-weight: 650;
}

#gl-6-metodo .method-left .primary-text{
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gl-fg-dim);
  max-width: 72ch;
}

/* 3 filas tipográficas */
#gl-6-metodo .method-dl{
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

#gl-6-metodo .method-dl-row{
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in oklab, var(--gl-border-1) 62%, transparent);
}

#gl-6-metodo .method-dl dt{
  margin: 0;
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--gl-accent-strong);
}

#gl-6-metodo .method-dl dd{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gl-fg-dim);
}

/* CTA único, dominante */
#gl-6-metodo .method-cta{
  margin-top: 12px;
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Derecha: refuerzo simple (no panel “informativo”) */
#gl-6-metodo .method-right{
  border-radius: var(--gl-r-2);
  border: 1px solid color-mix(in oklab, var(--gl-border-1) 70%, transparent);
  background: color-mix(in oklab, var(--gl-surface-1) 78%, transparent);
  box-shadow: var(--gl-shadow-1);
  padding: 16px;
}

#gl-6-metodo .method-right-kicker{
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gl-accent-strong);
  margin: 0 0 10px;
}

#gl-6-metodo .method-right-title{
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.2px;
  color: var(--gl-fg);
  font-weight: 650;
  margin: 0 0 10px;
}

#gl-6-metodo .method-right-sub{
  font-size: 14px;
  line-height: 1.7;
  color: var(--gl-fg-dim);
  margin: 0 0 14px;
}

/* Regla: 1 línea memorable (reduce “resistencia técnica”) */
#gl-6-metodo .method-right-rule{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--gl-border-1) 62%, transparent);
}

#gl-6-metodo .method-rule-pill{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gl-accent-strong);
  border: 1px solid color-mix(in oklab, var(--gl-border-1) 72%, transparent);
  background: color-mix(in oklab, var(--gl-surface-0) 86%, transparent);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}

#gl-6-metodo .method-rule-text{
  font-size: 13px;
  line-height: 1.6;
  color: var(--gl-fg-dim);
}


/* =========================================================
   07) PROCESS — Home services block
   Scope: Home
   ========================================================= */

#gl-7-como-trabajamos .process-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

#gl-7-como-trabajamos .process-card{
  padding: 20px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Micro-kicker para que el ojo “lea” el orden */
#gl-7-como-trabajamos .process-kicker{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gl-accent-strong);
  opacity: .9;
}

/* Título con un grain más fino */
#gl-7-como-trabajamos .process-title{
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -0.2px;
  font-weight: 650;
  color: var(--gl-fg);
}

#gl-7-como-trabajamos .process-desc{
  font-size: 14px;
  line-height: 1.65;
  color: var(--gl-fg-dim);
}

/* Subline + link sutil (no botón) */
#gl-7-como-trabajamos .services-subline{
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gl-fg-dim);
  max-width: 64ch;
}

#gl-7-como-trabajamos .services-link{
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--gl-border-1) 75%, transparent);
  background: color-mix(in oklab, var(--gl-surface-1) 82%, transparent);
  color: var(--gl-fg);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  transition: transform var(--gl-t-fast), border-color var(--gl-t-fast), background var(--gl-t-fast);
}
#gl-7-como-trabajamos .services-link:hover{
  transform: translateY(-1px);
  border-color: var(--gl-border-3);
  background: color-mix(in oklab, var(--gl-surface-2) 88%, transparent);
}


/* =========================================================
   13) PRODUCTS — Home (Arquitecturas RDWC)
   - Usa .gl-card como base visual
   - Acá solo layout + comportamiento del módulo
   ========================================================= */

#gl-13-productos{
  padding: 88px 0;
}

/* Grid */
.products-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

/* Card (usa gl-card como base) */
.gl-product-card{
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--gl-t-med);
}

.gl-product-card:hover{
  transform: translateY(-4px);
}

/* Media */
.gl-product-media{
  position: relative;
  height: 260px;
  overflow: hidden;
}

.gl-product-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--gl-t-med);
}

.gl-product-card:hover .gl-product-media img{
  transform: scale(1.04);
}

/* Overlay */
.gl-product-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(6,16,4,.55)
  );
  pointer-events: none;
}

/* Badges */
.gl-product-badges{
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 8px;
}

.gl-badge{
  padding: 6px 10px;
  border-radius: var(--gl-r-pill);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--gl-border-2);
  background: rgba(0,0,0,.35);
  color: var(--gl-fg);
}

.gl-badge-muted{
  opacity: .7;
}

/* Body */
.gl-product-body{
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gl-product-name{
  font-size: 20px;
  font-weight: 650;
  color: var(--gl-fg);
  margin: 0;
}

.gl-product-desc{
  font-size: 14px;
  color: var(--gl-fg-dim);
  line-height: 1.6;
  margin: 0;
}

/* Footer */
.products-footer{
  margin-top: 40px;
  padding: 20px;
  text-align: center;
}

.products-footer p{
  font-size: 14px;
  color: var(--gl-fg-dim);
  margin: 0;
}
/* SISTEMAS — que se sienta “módulo técnico”, no e-commerce */
#gl-13-productos .gl-product-media{
  height: 260px;
  background: color-mix(in oklab, var(--gl-surface-1) 92%, black 4%);
}

#gl-13-productos .gl-product-media img{
  object-fit: contain;            /* clave para sistemas/render */
  padding: 10px 10px 0;
  transform: none;                /* elimina zoom e-commerce */
}

#gl-13-productos .gl-product-card:hover{
  transform: translateY(-2px);    /* más sutil */
}

#gl-13-productos .gl-product-card:hover .gl-product-media img{
  transform: none;                /* asegura no-zoom */
}


/* =========================================================
   HOME — FAQ | #gl-faq-groundless
   Objetivo:
   - Menos scroll (densidad)
   - Misma “presencia” que el resto del Home
   - Header compacto + 2 cards grandes
========================================================= */

#gl-faq-groundless{
  position: relative;
  z-index: 2;
  padding: 72px 0; /* ↓ de 88 para comprimir */
}

#gl-faq-groundless .container{
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

/* Shell principal */
#gl-faq-groundless .faq-shell{
  border-radius: var(--gl-radius);
  border: 1px solid var(--gl-border-2);
  background: linear-gradient(135deg, rgba(0,0,0,.18), rgba(0,0,0,.10));
  box-shadow: var(--gl-shadow-2);
  padding: 28px; /* ↓ */
  overflow: hidden;
  position: relative;
}

#gl-faq-groundless .faq-shell::before{
  content:"";
  position:absolute;
  inset:-35%;
  pointer-events:none;
  background:
    radial-gradient(40% 55% at 16% 34%, rgba(147,168,95,.11), transparent 62%),
    radial-gradient(40% 55% at 86% 62%, rgba(67,81,2,.09), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 56%);
  filter: blur(26px);
  opacity: .9;
}

#gl-faq-groundless .faq-head,
#gl-faq-groundless .faq-grid{
  position: relative;
  z-index: 1;
}

/* ---------- Header compacto (una fila, no columna) ---------- */

#gl-faq-groundless .faq-head{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(147,168,95,.10);
  margin-bottom: 18px;
}

#gl-faq-groundless .faq-kicker{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--gl-r-pill);
  border: 1px solid var(--gl-border-1);
  background: rgba(0,0,0,.14);
  color: var(--gl-accent-strong);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 12px;
}

#gl-faq-groundless .faq-title{
  margin: 0 0 10px;
  font-size: clamp(28px, 2.2vw, 34px);
  line-height: 1.10;
  letter-spacing: -0.6px;
  color: var(--gl-fg);
  font-weight: 750;
}

#gl-faq-groundless .faq-sub{
  margin: 0;
  font-size: 14px;        /* ↓ */
  line-height: 1.6;       /* ↓ */
  color: var(--gl-fg-dim);
  max-width: 62ch;
}

/* Botón alineado al header, no “perdido” abajo */
#gl-faq-groundless .faq-head-actions{
  display: flex;
  justify-content: flex-end;
  align-items: end;
}

/* ---------- Grid de 2 cards grandes ---------- */

#gl-faq-groundless .faq-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px; /* ↓ */
  align-items: stretch;
}

/* Card de grupo */
#gl-faq-groundless .faq-group{
  border-radius: var(--gl-r-3);
  border: 1px solid var(--gl-border-1);
  background: rgba(0,0,0,.12);
  box-shadow: var(--gl-shadow-1);
  padding: 16px; /* ↓ */
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#gl-faq-groundless .faq-group-chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--gl-r-pill);
  border: 1px solid rgba(147,168,95,.16);
  background: rgba(0,0,0,.14);
  color: var(--gl-accent-strong);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 12px;
}

/* Lista interna (en vez de 7 cards separadas) */
#gl-faq-groundless .faq-list{
  display: grid;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(147,168,95,.10);
  background: rgba(0,0,0,.10);
}

/* Row: compacta + divisores */
#gl-faq-groundless .faq-row{
  padding: 14px 14px; /* ↓ */
  border-top: 1px solid rgba(147,168,95,.10);
  transition: background var(--gl-t-fast), border-color var(--gl-t-fast);
}

#gl-faq-groundless .faq-row:first-child{
  border-top: none;
}

#gl-faq-groundless .faq-row:hover{
  background: rgba(0,0,0,.14);
}

#gl-faq-groundless .faq-row h4{
  margin: 0 0 8px;
  font-size: 15px;        /* ↓ */
  line-height: 1.25;
  letter-spacing: -0.2px;
  font-weight: 700;
  color: var(--gl-fg);
}

#gl-faq-groundless .faq-row p{
  margin: 0;
  font-size: 13px;        /* ↓ */
  line-height: 1.65;      /* ↓ */
  color: var(--gl-fg-dim);
}

/* ---------- Light theme (mínimo) ---------- */
html[data-theme="light"] #gl-faq-groundless .faq-shell{
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  border-color: var(--gl-border-2);
}

html[data-theme="light"] #gl-faq-groundless .faq-group,
html[data-theme="light"] #gl-faq-groundless .faq-kicker,
html[data-theme="light"] #gl-faq-groundless .faq-group-chip,
html[data-theme="light"] #gl-faq-groundless .faq-list{
  background: rgba(255,255,255,.78);
}




/* =========================================================
   HOME — Surface System Base
   Unifica respiración, contraste y coherencia visual
   ========================================================= */

:is(
  #gl-1-hero,
  #gl-4-gis-strip,
  #gl-9-casos,
  #gl-6-metodo,
  #gl-7-como-trabajamos,
  #gl-13-productos,
  #gl-faq-groundless,
  #gl-11-contacto
){
  position: relative;
  z-index: 2;
  padding: 88px 0;
}

/* Espaciado uniforme entre secciones */
:is(
  #gl-1-hero,
  #gl-4-gis-strip,
  #gl-9-casos,
  #gl-6-metodo,
  #gl-7-como-trabajamos,
  #gl-13-productos,
  #gl-faq-groundless,
  #gl-11-contacto
) + section{
  margin-top: 0;
}

/* =========================================================
   HOME — CONTACTO  (#gl-11-contacto)
   - 1 CTA fuerte (Typeform)
   - Métodos directos como quick actions (sin competir)
========================================================= */

#gl-11-contacto{
  padding: 88px 0;
}

/* Card contenedora principal del bloque */
#gl-11-contacto .contact-hero{
  position: relative;
  overflow: hidden;
  border-radius: var(--gl-radius);
  border: 1px solid var(--gl-border-2);
  background: var(--gl-surface-2);
  box-shadow: var(--gl-shadow-2);

  /* “tuning knobs” */
  --gl-contact-maxw: 1180px;
  --gl-contact-pad: 28px;

  --gl-contact-photo-opacity: 0.22;
  --gl-contact-overlay-a: 0.38;
  --gl-contact-overlay-b: 0.18;
}

/* Alineación a la grilla general */
#gl-11-contacto .contact-content{
  width: min(var(--gl-contact-maxw), calc(100% - 48px));
  margin: 0 auto;
  padding: var(--gl-contact-pad);
  position: relative;
  z-index: 2;
}

/* Foto ambiental */
#gl-11-contacto .contact-hero--with-photo::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://lh3.googleusercontent.com/d/1B4o8lbZSowKNNch4Xz9c5631V8C0qs0m");
  background-size: cover;
  background-position: right center;
  opacity: var(--gl-contact-photo-opacity);
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  z-index: 0;
  pointer-events: none;
}

/* Overlay de contraste */
#gl-11-contacto .contact-hero--with-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 520px at 18% 0%,
      color-mix(in oklab, var(--gl-accent) 22%, transparent),
      transparent 62%),
    radial-gradient(900px 520px at 88% 20%,
      color-mix(in oklab, var(--gl-fg) 10%, transparent),
      transparent 64%),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--gl-surface-3) var(--gl-contact-overlay-a), transparent),
      color-mix(in oklab, var(--gl-surface-2) var(--gl-contact-overlay-b), transparent) 55%,
      color-mix(in oklab, var(--gl-surface-3) calc(var(--gl-contact-overlay-a) + 0.06), transparent)
    );
  z-index: 1;
  pointer-events: none;
}

/* Layout: 2 columnas */
#gl-11-contacto .contact-main{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 28px;
  align-items: start;
}

/* Izquierda */
#gl-11-contacto .contact-text{
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#gl-11-contacto .contact-mini-note{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gl-fg-dim);
  max-width: 72ch;
}

/* CTA primario: un poco más “decisión” */
#gl-11-contacto .contact-cta-primary{
  box-shadow: 0 18px 40px color-mix(in oklab, var(--gl-shadow-2) 70%, transparent);
}

/* Proof 3 items */
#gl-11-contacto .contact-proof{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

#gl-11-contacto .contact-proof-item{
  border-radius: var(--gl-r-2);
  border: 1px solid var(--gl-border-1);
  background: color-mix(in oklab, var(--gl-surface-0) 86%, transparent);
  padding: 12px 14px;
  box-shadow: var(--gl-shadow-1);
}

#gl-11-contacto .cp-k{
  display: block;
  font-weight: 750;
  color: var(--gl-fg);
}

#gl-11-contacto .cp-v{
  display: block;
  font-size: 13px;
  color: var(--gl-accent-strong);
  margin-top: 2px;
}

/* Tags */
#gl-11-contacto .contact-tags{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#gl-11-contacto .contact-tag{
  padding: 10px 12px;
  border-radius: var(--gl-r-pill);
  border: 1px solid var(--gl-border-1);
  background: color-mix(in oklab, var(--gl-surface-0) 86%, transparent);
  font-size: 14px;
  box-shadow: var(--gl-shadow-1);
}

#gl-11-contacto .contact-tag strong{
  color: var(--gl-accent-strong);
}

/* Derecha */
#gl-11-contacto .contact-card{
  padding: 20px;
}

#gl-11-contacto .contact-card-title{
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--gl-fg);
}

#gl-11-contacto .contact-card-sub{
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--gl-fg-dim);
}

#gl-11-contacto .contact-methods{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Quick actions (mejor “hit area” + affordance) */
#gl-11-contacto .contact-method{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;

  padding: 12px 14px;
  border-radius: var(--gl-r-2);
  border: 1px solid var(--gl-border-1);
  background: color-mix(in oklab, var(--gl-surface-1) 88%, transparent);
  font-size: 14px;
  box-shadow: var(--gl-shadow-1);
  transition: transform var(--gl-t-med), background var(--gl-t-med), border-color var(--gl-t-med), box-shadow var(--gl-t-med);
  text-decoration: none;
}

#gl-11-contacto .contact-method:hover{
  transform: translateY(-2px);
  border-color: var(--gl-border-3);
  background: color-mix(in oklab, var(--gl-surface-2) 92%, transparent);
  box-shadow: var(--gl-shadow-2);
}

#gl-11-contacto .contact-method strong{
  color: var(--gl-accent-strong);
  display: block;
  font-weight: 800;
  margin-bottom: 2px;
}

#gl-11-contacto .contact-method span{
  display: block;
  color: var(--gl-fg-dim);
}

/* Flecha sutil a la derecha */
#gl-11-contacto .contact-method em{
  font-style: normal;
  color: color-mix(in oklab, var(--gl-fg) 70%, transparent);
  opacity: .9;
}

/* Responsive */
@media (max-width: 980px){
  #gl-11-contacto .contact-main{
    grid-template-columns: 1fr;
  }
  #gl-11-contacto .contact-proof{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   FOOTER — Groundless Minimal Premium  #gl-12-footer
   (Home + global) — token-driven / dark-light
========================================================= */

#gl-12-footer{
  position: relative;
  width: 100%;
  padding: 54px 0 34px;
  overflow: hidden;
  background: transparent; /* deja respirar el fondo global */
}

/* “Placa” suave (no caja pesada) */
#gl-12-footer::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 18% 8%,
      color-mix(in oklab, var(--gl-accent) 16%, transparent),
      transparent 65%),
    radial-gradient(860px 520px at 92% 10%,
      color-mix(in oklab, var(--gl-accent-strong) 10%, transparent),
      transparent 62%),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--gl-surface-0) 86%, transparent),
      color-mix(in oklab, var(--gl-surface-0) 78%, transparent)
    );
  opacity: .9;
}

#gl-12-footer .container{
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Core layout */
#gl-12-footer .footer-core{
  display:flex;
  align-items: center;          /* clave: logo + nav “inevitables” */
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px;
  border-radius: var(--gl-r-3);
  border: 1px solid var(--gl-border-1);
  background: color-mix(in oklab, var(--gl-surface-1) 86%, transparent);
  box-shadow: var(--gl-shadow-1);
  backdrop-filter: blur(8px);
}

#gl-12-footer .footer-brand{
  display:flex;
  align-items:center;
  gap: 18px;
  min-width: 0;
}

/* Logo sizing + “inevitable presence” */
#gl-12-footer .footer-logo{
  height: 56px;
  width: auto;
  flex: 0 0 auto;
  display:block;
  filter: drop-shadow(0 10px 26px color-mix(in oklab, #000 28%, transparent));
  opacity: .95;
}

/* Swap logos by theme */
#gl-12-footer .footer-logo--light{ display:none; }
html[data-theme="light"] #gl-12-footer .footer-logo--dark{ display:none; }
html[data-theme="light"] #gl-12-footer .footer-logo--light{ display:block; }

/* Tagline */
#gl-12-footer .footer-tagline{
  margin: 0;
  color: var(--gl-fg-dim);
  font-size: 14px;
  line-height: 1.55;
  max-width: 46ch;
}

/* Nav */
#gl-12-footer .footer-nav{
  display:flex;
  align-items:center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

#gl-12-footer .footer-nav a{
  color: var(--gl-fg);
  text-decoration: none;
  font-weight: 650;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  transition: background var(--gl-t-fast), border-color var(--gl-t-fast), transform var(--gl-t-fast);
}

#gl-12-footer .footer-nav a:hover{
  transform: translateY(-1px);
  border-color: var(--gl-border-2);
  background: color-mix(in oklab, var(--gl-surface-0) 86%, transparent);
}

/* Bottom row */
#gl-12-footer .footer-bottom{
  margin-top: 14px;
  padding: 14px 6px 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid color-mix(in oklab, var(--gl-border-1) 75%, transparent);
  color: var(--gl-fg-soft);
}

#gl-12-footer .footer-copy{
  font-size: 13px;
  line-height: 1.45;
}

#gl-12-footer .footer-legal{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
}

#gl-12-footer .footer-legal a{
  color: var(--gl-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .9;
}
#gl-12-footer .footer-legal a:hover{ opacity: 1; }


}
/* =========================================================
   COMPONENT — LIGHTBOX (shared)
   ========================================================= */
.gl-lightbox{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.92);
  padding: 18px;
}
.gl-lightbox[hidden]{ display:none !important; }

.gl-lightbox-card{
  position: relative;
  width: min(1100px, 100%);
  max-height: calc(100vh - 36px);
  border-radius: var(--gl-r-2);
  border: 1px solid var(--gl-border-2);
  background: var(--gl-surface-2);
  box-shadow: 0 24px 80px rgba(0,0,0,.75);
  overflow: hidden;
}

.gl-lightbox-card img{
  width: 100%;
  height: auto;
  max-height: calc(100vh - 36px);
  display: block;
  object-fit: contain;
  background: rgba(0,0,0,.20);
}

.gl-lightbox-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: var(--gl-r-pill);
  border: 1px solid var(--gl-border-2);
  background: rgba(6,16,4,.65);
  color: var(--gl-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--gl-t-fast), background var(--gl-t-fast), border-color var(--gl-t-fast);
}
.gl-lightbox-close:hover{
  background: rgba(10,34,1,.72);
  border-color: var(--gl-border-3);
  transform: scale(1.04);
}

.gl-lightbox-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: var(--gl-r-pill);
  border: 1px solid var(--gl-border-2);
  background: rgba(6,16,4,.55);
  color: var(--gl-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--gl-t-fast), background var(--gl-t-fast), border-color var(--gl-t-fast);
  backdrop-filter: blur(6px);
}
.gl-lightbox-btn:hover{
  background: rgba(10,34,1,.68);
  border-color: var(--gl-border-3);
  transform: translateY(-50%) scale(1.04);
}

.gl-lightbox-prev{ left: 14px; }
.gl-lightbox-next{ right: 14px; }

.gl-lightbox-foot{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.gl-lightbox-pill{
  font-size: 13px;
  color: var(--gl-fg);
  border: 1px solid var(--gl-border-2);
  background: rgba(6,16,4,.55);
  padding: 8px 10px;
  border-radius: var(--gl-r-pill);
}
.gl-lightbox-hint{
  font-size: 12px;
  color: var(--gl-fg-dim);
}
.gl-container{
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
}