/* ==========================================================================
   LIDARTEC.IO — Estilos globales
   Archivo centralizado de CSS para todo el sitio.
   ========================================================================== */

/* --- Base / Reset --- */
body {
  background-color: #0d0e0f;
  color: white;
  font-family: 'Inter', sans-serif;
}

/* --- Material Symbols (Google Icons) --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* --- Grid / Dot Overlays --- */
.grid-overlay {
  background-image: radial-gradient(circle, rgba(161, 250, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.dot-grid {
  background-image: radial-gradient(#474849 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

.scanline-grid {
  background-image: radial-gradient(circle, rgba(71, 72, 73, 0.15) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* --- Scanline Effects --- */
.scanline {
  background: linear-gradient(to bottom, transparent 50%, rgba(161, 250, 255, 0.02) 50%);
  background-size: 100% 4px;
}

.scanline-overlay {
  background: linear-gradient(to bottom, transparent 50%, rgba(161, 250, 255, 0.02) 50%);
  background-size: 100% 4px;
  pointer-events: none;
}

.scanline-overlay-servicios {
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.25) 50%
  ),
  linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.06),
    rgba(0, 255, 0, 0.02),
    rgba(0, 0, 255, 0.06)
  );
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

/* --- HUD Bracket Corners (inicio) --- */
.hud-bracket-tl {
  border-top: 2px solid #a1faff;
  border-left: 2px solid #a1faff;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
}

.hud-bracket-br {
  border-bottom: 2px solid #a1faff;
  border-right: 2px solid #a1faff;
  width: 15px;
  height: 15px;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* --- Corner Bracket (formularios) --- */
.corner-bracket {
  position: relative;
}

.corner-bracket::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid #a1faff;
  border-left: 1px solid #a1faff;
}

.corner-bracket::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid #a1faff;
  border-right: 1px solid #a1faff;
}