/* ═══════════════════════════════════════════════════
   AyudaTecno – GLASS layer  ✨  premium / sobrio
   - Vidrio esmerilado limpio en superficies (sin saturar color).
   - Refracción óptica real (liquid-glass.js) solo en el panel del hero.
   Carga después de styles.css, con <body class="grid-bg glass-page">.
   ═══════════════════════════════════════════════════ */

/* ── Tinte del vidrio por tema (sobrio, casi neutro) ── */
[data-theme="dark"] {
  --glass-fill:        rgba(255,255,255,0.05);
  --glass-fill-strong: rgba(255,255,255,0.08);
  --glass-stroke:      rgba(255,255,255,0.10);
  --glass-stroke-hi:   rgba(255,255,255,0.18);   /* filo superior */
  --glass-shadow:      0 10px 30px rgba(0,0,0,0.28);
  --glass-blur:        18px;
}
[data-theme="light"] {
  --glass-fill:        rgba(255,255,255,0.55);
  --glass-fill-strong: rgba(255,255,255,0.72);
  --glass-stroke:      rgba(255,255,255,0.7);
  --glass-stroke-hi:   rgba(255,255,255,0.95);
  --glass-shadow:      0 10px 30px rgba(31,45,80,0.12);
  --glass-blur:        18px;
}

/* ── Fondo: un único glow de marca, muy sutil (el vidrio necesita
      algo de variación detrás, sin estridencias) ── */
.glass-page { background: var(--bg); }
.glass-page::before {
  content: ''; position: fixed; inset: 0; z-index: -4; pointer-events: none;
  background: radial-gradient(80% 50% at 50% -10%, rgba(39,170,226,0.10), transparent 60%);
}
[data-theme="light"] .glass-page::before {
  background: radial-gradient(80% 50% at 50% -10%, rgba(39,170,226,0.14), transparent 60%);
}

/* ─────────────────────────────────────────────────
   Mixin de vidrio limpio (sin saturate de color)
   ───────────────────────────────────────────────── */
.hero-dashboard,
.service-card,
.project-card,
.about-stat-card,
.sector-chip,
.contact-form {
  background: var(--glass-fill) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-stroke) !important;
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-stroke-hi);
}

/* Hover: aclara y eleva un punto (sin volver a fondo sólido) */
.service-card:hover,
.project-card:hover,
.about-stat-card:hover,
.sector-chip:hover {
  background: var(--glass-fill-strong) !important;
  border-color: var(--glass-stroke-hi) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.34),
    inset 0 1px 0 var(--glass-stroke-hi) !important;
}
[data-theme="light"] .service-card:hover,
[data-theme="light"] .project-card:hover,
[data-theme="light"] .about-stat-card:hover,
[data-theme="light"] .sector-chip:hover {
  box-shadow:
    0 18px 40px rgba(31,45,80,0.16),
    inset 0 1px 0 var(--glass-stroke-hi) !important;
}

/* Iconito de servicio: sutil, a tono */
.service-icon {
  background: var(--glass-fill-strong) !important;
  border: 1px solid var(--glass-stroke);
  box-shadow: inset 0 1px 0 var(--glass-stroke-hi);
}

/* ── HERO DASHBOARD: la lente estrella (refracción la pone el JS) ── */
.hero-dashboard {
  background: var(--glass-fill) !important;
  border-radius: 22px;
}
/* Brillo especular fijo arriba-izquierda (la "ventana" de luz) */
.hero-dashboard::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.14), transparent 42%);
}
.hero-dashboard > * { position: relative; z-index: 1; }
/* Las filas internas quedan como el diseño original (hairlines),
   NO cajitas de colores. */

/* Filo especular (rim light): el borde que atrapa la luz */
.hero-dashboard::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(135deg,
    var(--glass-stroke-hi), transparent 38%,
    transparent 62%, var(--glass-stroke));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ── Brillo especular que sigue al puntero (lo posiciona liquid-glass.js) ── */
.hero-dashboard, .service-card, .project-card, .about-stat-card { position: relative; overflow: hidden; }
.lg-sheen {
  position: absolute; inset: 0; border-radius: inherit; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity 0.45s ease;
  background: radial-gradient(40% 40% at var(--lg-x,50%) var(--lg-y,30%),
              rgba(255,255,255,0.16), transparent 70%);
  mix-blend-mode: screen;
}
[data-theme="light"] .lg-sheen {
  background: radial-gradient(40% 40% at var(--lg-x,50%) var(--lg-y,30%),
              rgba(255,255,255,0.55), transparent 70%);
  mix-blend-mode: overlay;
}

/* ─────────────────────────────────────────────────
   HEADER de vidrio limpio (sin píldora rara en el nav)
   ───────────────────────────────────────────────── */
.site-header {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-stroke);
  box-shadow: 0 1px 0 var(--glass-stroke-hi) inset;
}
.nav-desktop a {
  padding: 8px 4px;
  transition: color 0.25s;
}
.nav-desktop a:hover { color: var(--accent); }
.nav-desktop a.active { color: var(--text); }

/* Botones secundarios de vidrio sobrio */
.cta-outline,
.theme-toggle, .hamburger, .ip-trigger {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-stroke);
  box-shadow: inset 0 1px 0 var(--glass-stroke-hi);
}

/* Inputs de vidrio sobrio */
.contact-form input,
.contact-form textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--glass-stroke) !important;
}
[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea {
  background: rgba(255,255,255,0.55) !important;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(39,170,226,0.15);
}

.section-divider { opacity: 0.5; }