/* ==========================================================================
   CLICOMPUTER MÉXICO — Base Styles
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--navbar-height);-webkit-text-size-adjust:100%}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background-color: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

::selection { background-color: rgba(75,163,217,0.3); color: var(--text-primary); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-canvas); }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
* { scrollbar-width: thin; scrollbar-color: var(--border-default) var(--bg-canvas); }

/* Typography */
h1,h2,h3,h4,h5,h6 { font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--text-primary);letter-spacing:-0.02em }
h1{font-size:var(--fs-4xl)}h2{font-size:var(--fs-3xl)}h3{font-size:var(--fs-2xl)}
h4{font-size:var(--fs-xl)}h5{font-size:var(--fs-lg)}h6{font-size:var(--fs-md)}
p { color: var(--text-secondary); line-height: var(--lh-relaxed); margin-bottom: var(--space-md); }
a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--brand-primary-light); }
img { max-width: 100%; height: auto; display: block; }

/* Utilities */
.text-gradient { background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text }
.text-brand { color: var(--brand-primary); }
.glass-card { background:var(--bg-overlay);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg) }
.glow-border { position:relative;border:1px solid var(--border-default);border-radius:var(--radius-lg);transition:border-color var(--transition-base),box-shadow var(--transition-base) }
.glow-border:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-glow); }

.section-padding { padding: var(--space-5xl) 0; }
.section-padding-sm { padding: var(--space-3xl) 0; }
.section-header { text-align: center; margin-bottom: var(--space-4xl); }
.section-header h2 { margin-bottom: var(--space-md); }
.section-header p { max-width:600px;margin-left:auto;margin-right:auto;font-size:var(--fs-md) }

.section-badge {
  display:inline-flex;align-items:center;gap:var(--space-sm);
  padding:var(--space-xs) var(--space-md);
  background:rgba(75,163,217,0.1);border:1px solid rgba(75,163,217,0.2);
  border-radius:var(--radius-full);color:var(--brand-primary);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);margin-bottom:var(--space-lg);
}

.section-divider { width:60px;height:3px;background:var(--gradient-brand);border-radius:var(--radius-full);margin:var(--space-lg) auto }

/* Animations */
.fade-in-up { opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease }
.fade-in-up.visible { opacity:1;transform:translateY(0) }
.fade-in-left { opacity:0;transform:translateX(-30px);transition:opacity .6s ease,transform .6s ease }
.fade-in-left.visible { opacity:1;transform:translateX(0) }
.fade-in-right { opacity:0;transform:translateX(30px);transition:opacity .6s ease,transform .6s ease }
.fade-in-right.visible { opacity:1;transform:translateX(0) }
.scale-in { opacity:0;transform:scale(.9);transition:opacity .5s ease,transform .5s ease }
.scale-in.visible { opacity:1;transform:scale(1) }

.stagger-children>*:nth-child(1){transition-delay:0ms}
.stagger-children>*:nth-child(2){transition-delay:100ms}
.stagger-children>*:nth-child(3){transition-delay:200ms}
.stagger-children>*:nth-child(4){transition-delay:300ms}
.stagger-children>*:nth-child(5){transition-delay:400ms}
.stagger-children>*:nth-child(6){transition-delay:500ms}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .fade-in-up,.fade-in-left,.fade-in-right,.scale-in{opacity:1;transform:none}
}

/* Background Patterns */
.bg-dots-pattern { background-image:radial-gradient(circle,var(--border-default) 1px,transparent 1px);background-size:24px 24px }
.bg-grid-pattern { background-image:linear-gradient(var(--border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px);background-size:40px 40px }
.bg-gradient-radial { background: var(--gradient-bg-radial); }