/* =========================================================
   Groundless — overrides.css (AGRESIVO / ONE PASS)
   Decisión estética:
   - Texto largo = tinta neutra (negro/crema según tema)
   - Verde = acento (kickers, labels, tags, links, números)
   - Aumento de legibilidad + jerarquía (sin tocar módulos)
   Reversible: borrar overrides.css
========================================================= */

/* ---------------- 0) TYPO SYSTEM (global) ---------------- */
:root{
  /* escala */
  --ov-body: 17px;
  --ov-line: 1.68;

  --ov-h1: clamp(40px, 3.4vw, 58px);
  --ov-h2: clamp(28px, 2.3vw, 42px);
  --ov-h3: clamp(20px, 1.7vw, 30px);

  --ov-lead: 18px;
  --ov-small: 14px;

  /* ritmo */
  --ov-measure: 70ch;     /* ancho de lectura */
  --ov-radius: 24px;

  /* sombras: un poco más “pro” */
  --ov-shadow-soft: 0 14px 44px rgba(0,0,0,.18);
  --ov-shadow-hard: 0 22px 70px rgba(0,0,0,.32);

  /* acento */
  --ov-accent: rgba(147,168,95,.92);
  --ov-accent-2: rgba(67,81,2,.92);

  /* tintas (dark default) */
  --ov-ink: rgba(232,221,204,.92);
  --ov-ink-dim: rgba(232,221,204,.78);
  --ov-ink-soft: rgba(232,221,204,.62);

  /* links (dark) */
  --ov-link: color-mix(in oklab, var(--ov-accent) 62%, var(--ov-ink));
  --ov-link-hover: color-mix(in oklab, var(--ov-accent) 78%, var(--ov-ink));
}

/* Light mood (paper + ink) */
html[data-theme="light"]{
  --ov-ink: rgba(14,18,14,.92);
  --ov-ink-dim: rgba(14,18,14,.74);
  --ov-ink-soft: rgba(14,18,14,.56);

  --ov-accent: rgba(48,86,1,.92);
  --ov-accent-2: rgba(24,54,1,.92);

  --ov-shadow-soft: 0 16px 52px rgba(14,18,14,.10);
  --ov-shadow-hard: 0 26px 78px rgba(14,18,14,.14);

  --ov-link: rgba(24,54,1,.92);
  --ov-link-hover: rgba(48,86,1,.92);
}

/* Base typography lift */
body{
  font-size: var(--ov-body);
  line-height: var(--ov-line);
  letter-spacing: -0.01em;
  text-rendering: geometricPrecision;
}

/* Jerarquía */
h1{ font-size: var(--ov-h1); letter-spacing: -0.03em; }
h2{ font-size: var(--ov-h2); letter-spacing: -0.02em; }
h3{ font-size: var(--ov-h3); letter-spacing: -0.015em; }

h1, h2, h3{
  font-weight: 720;
}

/* Párrafos: legibilidad */
p, li{
  line-height: var(--ov-line);
}

.primary-text{
  max-width: var(--ov-measure) !important;
  color: var(--ov-ink-dim) !important;
  font-size: 1em !important;
}

.secondary-text{
  max-width: var(--ov-measure) !important;
  color: var(--ov-ink-soft) !important;
  font-size: 1em !important;
}

/* Lead (sin tener que cambiar HTML) */
.hero-text p,
#gl-4-gis-strip .gis-desc{
  font-size: var(--ov-lead) !important;
  line-height: 1.7 !important;
}

/* ---------------- 1) LINK SYSTEM (editorial) ---------------- */
a{
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover{
  opacity: 1;
}

/* Links “intencionales”: subrayado + verde */
a[href]:not(.btn-primary):not(.btn-outline):not(.gl-btn):not(.nav-link):not(.nav-cta){
  color: var(--ov-link);
  text-decoration: underline;
}
a[href]:not(.btn-primary):not(.btn-outline):not(.gl-btn):not(.nav-link):not(.nav-cta):hover{
  color: var(--ov-link-hover);
}

/* ---------------- 2) ACCENT PLACEMENT (verde donde suma) ---------------- */
.section-label,
.hero-label,
.r-kicker,
.gis-panel-title,
.method-mini-k,
.case-subtitle,
.gl-chip,
.gl-badge,
.stat-number{
  color: var(--ov-accent) !important;
}

/* Evitar verde en texto largo (si hay <b>) */
p b, li b,
.primary-text b,
.secondary-text b{
  color: var(--ov-ink) !important;
  font-weight: 750;
}

/* ---------------- 3) CARDS / SURFACES (premium rápido) ---------------- */
.gl-card,
.gl-box,
.image-card{
  border-radius: var(--ov-radius) !important;
}

/* Dark: más profundidad, menos “lavado” */
html:not([data-theme="light"]) .gl-card,
html:not([data-theme="light"]) .gl-box{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, rgba(6,16,4,.78) 78%, transparent),
      color-mix(in oklab, rgba(6,16,4,.62) 72%, transparent)
    ) !important;
  border-color: color-mix(in oklab, var(--ov-accent) 18%, var(--gl-border-2)) !important;
  box-shadow: var(--ov-shadow-hard) !important;
}

/* Light: paper card */
html[data-theme="light"] .gl-card,
html[data-theme="light"] .gl-box{
  background: rgba(255,255,255,.80) !important;
  border-color: rgba(24,54,1,.14) !important;
  box-shadow: var(--ov-shadow-soft) !important;
}

/* Hover: micro lift consistente */
.gl-card--hover:hover,
.gl-box:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--ov-accent) 26%, var(--gl-border-2)) !important;
}

/* Dividers: más finos y elegantes */
.gl-divider,
.divider-full{
  opacity: .85;
}

/* ---------------- 4) BUTTONS (sobrios + consistentes) ---------------- */
.btn-primary,
.btn-outline,
.gl-btn,
.gl-btn--primary{
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: .15px !important;
  min-height: 48px !important;
}

/* Primary: dark */
html:not([data-theme="light"]) .btn-primary,
html:not([data-theme="light"]) .gl-btn--primary{
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--ov-accent) 82%, #000),
    color-mix(in oklab, var(--ov-accent-2) 86%, #000)
  ) !important;
  color: rgba(6,10,6,.94) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Primary: light */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .gl-btn--primary{
  background: linear-gradient(135deg, rgba(48,86,1,.96), rgba(24,54,1,.96)) !important;
  color: rgba(248,246,240,.96) !important;
  border-color: rgba(24,54,1,.18) !important;
}

/* Outline: limpia */
.btn-outline{
  background: color-mix(in oklab, var(--gl-surface-1) 70%, transparent) !important;
}
html[data-theme="light"] .btn-outline{
  background: rgba(255,255,255,.88) !important;
  color: var(--ov-ink-dim) !important;
  border-color: rgba(24,54,1,.14) !important;
}

/* ---------------- 5) TOPBAR (white-friendly, dark stays moody) ---------------- */
html[data-theme="light"] #gl-0-topbar .topbar-shell{
  background: rgba(255,255,255,.74) !important;
  border-color: rgba(24,54,1,.14) !important;
  box-shadow: var(--ov-shadow-soft) !important;
}

html[data-theme="light"] #gl-0-topbar .nav-link{
  background: rgba(255,255,255,.66) !important;
  border-color: rgba(24,54,1,.10) !important;
  color: var(--ov-ink-dim) !important;
}

html[data-theme="light"] #gl-0-topbar .nav-link:hover{
  background: rgba(48,86,1,.10) !important;
  border-color: rgba(48,86,1,.18) !important;
  color: var(--ov-ink) !important;
}

/* ---------------- 6) ACCESSIBILITY polish ---------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--ov-accent) 26%, transparent) !important;
  outline-offset: 3px !important;
}

/* ---------------- 7) SCROLLBAR (premium small detail) ---------------- */
*{
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--ov-accent) 28%, transparent) transparent;
}
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--ov-accent) 22%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background: color-mix(in oklab, var(--ov-accent) 32%, transparent);
  background-clip: padding-box;
}

/* ---------------- 8) SMALL FIXES: lectura y densidad ---------------- */
/* Kicker/tags: más “tight” */
.section-label,
.hero-label,
.gl-chip{
  letter-spacing: .9px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}

/* Títulos clave más contundentes */
#gl-4-gis-strip .gis-title,
.hero-text h1{
  font-weight: 760 !important;
}

/* Mantener measure razonable en bloques densos */
#gl-6-metodo .method-text-card .primary-text,
#gl-11-contacto .contact-mini-note{
  max-width: var(--ov-measure) !important;
}
/* =========================================================
   HOME — CASOS (carousel)
   Ajuste 1: bajar altura imagen (mismo ancho)
   + base estable para el carrusel
   ========================================================= */

#gl-9-casos .case-image .carousel-wrapper{
  position: relative;
}

#gl-9-casos .case-image .carousel-images{
  position: relative;
  width: 100%;
  /* ↓ Ajustá solo este valor si querés más/menos alto */
  height: clamp(280px, 34vw, 460px);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(147,168,95,.16);
}

/* Cada imagen ocupa el “marco” */
#gl-9-casos .case-image .carousel-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  opacity: 0;
  transform: scale(1.01);
  transition: opacity .22s ease, transform .35s ease;
  pointer-events: none;
}

#gl-9-casos .case-image .carousel-image.active{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  cursor: zoom-in;
}

/* Botones prev/next: que queden “presentes” pero no gigantes */
#gl-9-casos .case-image .carousel-btn{
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 1px solid rgba(147,168,95,.28);
  background: rgba(12, 22, 10, .55);
  backdrop-filter: blur(12px);
  color: rgba(232,221,204,.95);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, opacity .15s ease;
  opacity: .95;
}

#gl-9-casos .case-image .carousel-btn svg{
  width: 26px;
  height: 26px;
}

/* Dots */
#gl-9-casos .case-image .carousel-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

#gl-9-casos .case-image .carousel-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(147,168,95,.22);
  background: rgba(232,221,204,.16);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

#gl-9-casos .case-image .carousel-dot.active{
  background: rgba(147,168,95,.55);
  transform: scale(1.15);
}

/* Mobile: un toque menos alto para no “comerse” la pantalla */
@media (max-width: 720px){
  #gl-9-casos .case-image .carousel-images{
    height: clamp(220px, 56vw, 320px);
    border-radius: 18px;
  }

  #gl-9-casos .case-image .carousel-btn{
    width: 40px;
    height: 40px;
  }

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

/* =========================================================
   Lightbox minimal (click para expandir)
   ========================================================= */

.gl-lightbox{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}

.gl-lightbox[aria-hidden="false"]{ display: flex; }

.gl-lightbox-inner{
  width: min(1200px, 94vw);
  height: min(760px, 86vh);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(147,168,95,.22);
  background: rgba(12,18,10,.55);
  position: relative;
}

.gl-lightbox-inner img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gl-lightbox-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  display: grid;
  place-items: center;
}
/* =========================================
   Inline Zoom elegante (sin lightbox)
   ========================================= */

#gl-9-casos .carousel-images.zoomed{
  cursor: grab;
}

#gl-9-casos .carousel-images.zoomed:active{
  cursor: grabbing;
}

#gl-9-casos .carousel-images.zoomed .carousel-image.active{
  transform: scale(1.6);
  transition: transform .25s ease;
}

#gl-9-casos .carousel-images{
  overflow: hidden;
}

#gl-9-casos .carousel-image{
  transition: transform .25s ease, opacity .22s ease;
}
/* CASOS — quitar cursor lupa */
#gl-9-casos .carousel-image,
#gl-9-casos .carousel-image.active {
  cursor: default !important;
}
/* =========================================================
   HOME — SISTEMAS: Quick Action (2-step) — REEMPLAZO COMPLETO
   - Overlay aparece SOLO cuando JS quita [hidden]
   - Botón compacto, acento verde, sin ensuciar layout
   ========================================================= */

/* Asegurar anclaje dentro de la card */
#gl-13-productos .gl-product-card{
  position: relative;
}

/* Estado cerrado: hidden manda (evita “siempre oscuro”) */
#gl-13-productos .gl-card-quick[hidden]{
  display: none !important;
}

/* Estado abierto (JS quita hidden) */
#gl-13-productos .gl-card-quick:not([hidden]){
  position: absolute;
  inset: 0;
  z-index: 6;

  display: flex;
  align-items: flex-start;   /* cerca del foco visual (arriba) */
  justify-content: center;

  /* Overlay sutil (no “pantalla negra”) */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.40) 0%,
    rgba(0,0,0,.18) 42%,
    rgba(0,0,0,.08) 100%
  );
  backdrop-filter: blur(6px);

  /* Para que el botón quede donde cae el ojo */
  padding-top: 18px;
}

/* Botón compacto, acento verde (token-driven) */
#gl-13-productos .gl-card-quick-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 999px;
  text-decoration: none;

  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .3px;

  /* Verde acentuado sin hardcodear (si existe token) */
  border: 1px solid color-mix(in oklab, var(--gl-accent-strong) 55%, transparent);
  background: color-mix(in oklab, var(--gl-accent-strong) 22%, rgba(0,0,0,.55));
  color: var(--gl-fg);

  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  transition: transform var(--gl-t-fast), filter var(--gl-t-fast), border-color var(--gl-t-fast), background var(--gl-t-fast);
}

#gl-13-productos .gl-card-quick-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: color-mix(in oklab, var(--gl-accent-strong) 70%, transparent);
  background: color-mix(in oklab, var(--gl-accent-strong) 28%, rgba(0,0,0,.55));
}

/* Extra: que se note “modo acción” cuando está abierto (sin romper nada) */
#gl-13-productos .gl-product-card[data-quick-open="1"]{
  outline: 1px solid color-mix(in oklab, var(--gl-accent-strong) 35%, transparent);
  outline-offset: 2px;
}


/* ✅ 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; }
}