/* ═══════════════════════════════════════════════════════
   base.css — Reset, variables, fundacion global
   Cargado por TODAS las paginas
   ═══════════════════════════════════════════════════════ */

/* #region Reset y configuración base */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

html {
  scroll-behavior: smooth;
  background: var(--bg-deep);
  overscroll-behavior: none;
}

:root {
  /* Colores de acento */
  --accent: #00d4ff;
  --dark-accent: #0ea5e9;
  --purple-accent: #7c3aed;
  --accent-glow:        rgba(0, 212, 255, 0.3);
  --accent-glow-strong: rgba(0, 212, 255, 0.5);
  --accent-subtle:      rgba(0, 212, 255, 0.15);
  --accent-faint:       rgba(0, 212, 255, 0.2);
  --purple-subtle:      rgba(124, 58, 237, 0.15);
  --accent-border:      rgba(0, 212, 255, 0.12);
  --section-border:     rgba(0, 212, 255, 0.08);
  --white-faint:  rgba(255, 255, 255, 0.1);
  --white-border: rgba(255, 255, 255, 0.3);
  --white-semi:   rgba(255, 255, 255, 0.4);

  /* Sombras (escala ascendente de opacidad) */
  --shadow-xs: rgba(0, 0, 0, 0.15);
  --shadow-sm: rgba(0, 0, 0, 0.2);
  --shadow-md: rgba(0, 0, 0, 0.3);
  --shadow-lg: rgba(0, 0, 0, 0.5);
  --shadow-xl: rgba(0, 0, 0, 0.6);

  /* Fondo navbar */
  --bg-nav:         rgba(8, 12, 20, 0.6);
  --bg-nav-scrolled: rgba(8, 12, 20, 0.9);

  /* Colores de iconos por categoría */
  --icon-sky:    #38bdf8;
  --icon-green:  #34d399;
  --icon-orange: #fb923c;
  --icon-yellow: #fbbf24;
  --icon-pink:   #f472b6;
  --icon-purple: #c084fc;
  --color-azure: #60a5fa;
  --color-m365:  #4ade80;

  /* Colores de fondo */
  --bg-deep:     #0a0e1a;
  --bg-section:  #0f1629;
  --bg-elevated: #1c2740;
  --bg-footer:   #060810;
  --bg-nav-menu: #100d30;
  --bg-faq-end:  #1a2040;

  /* Colores de texto */
  --text-primary:    #e2e8f0;
  --text-muted:      #94a3b8;
  --text-faint:      #64748b;
  --text-nav-mobile: #f7eded;

  /* Fondo interior de tarjetas */
  --card-inner: linear-gradient(135deg, #111827 0%, #1a2234 100%);

  /* Radios de borde */
  --radius-section: 20px;
  --radius-card:    15px;
  --radius-lg:      25px;
  --radius-full:    50px;

  /* Efectos glass */
  --glass-blur:      blur(20px) saturate(180%) brightness(1.1);
  --glass-blur-menu: blur(80px);

  /* Fondos de tarjetas de servicios */
  --service-red:     linear-gradient(135deg, #1a0a0a 0%, #2d1515 100%);
  --service-teal:    linear-gradient(135deg, #0a1a1a 0%, #0f2828 100%);
  --service-pink:    linear-gradient(135deg, #1a0a15 0%, #2d1028 100%);
  --service-orange:  linear-gradient(135deg, #1a0f0a 0%, #2d1e10 100%);
  --service-purple:  linear-gradient(135deg, #0f0a20 0%, #1e1040 100%);
  --service-magenta: linear-gradient(135deg, #1a0a1a 0%, #2d1040 100%);
  --service-blue:    linear-gradient(135deg, #0a0f1e 0%, #0f1a38 100%);

  /* Fondos de tarjetas de proceso */
  --process-pink:  linear-gradient(135deg, #1a0a15 0%, #3b1f35 100%);
  --process-aqua:  linear-gradient(135deg, #0a1a18 0%, #0f2828 100%);
  --process-peach: linear-gradient(135deg, #1a0f0a 0%, #3b2810 100%);
  --process-blue:  linear-gradient(135deg, #0a0f1a 0%, #101f3b 100%);

  /* Fondos de tarjetas de contacto */
  --contact-purple: linear-gradient(135deg, #100a1e 0%, #1a1040 100%);
  --contact-red:    linear-gradient(135deg, #1e0a0a 0%, #2d1010 100%);
  --contact-teal:   linear-gradient(135deg, #0a1a1e 0%, #0f2028 100%);

  /* Transiciones reutilizables */
  --transition-transform:   transform 0.3s ease;
  --transition-color:       color 0.3s ease;
  --transition-card:        transform 0.3s ease, box-shadow 0.3s ease;
  --transition-interactive: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;

  /* Sombras compuestas */
  --shadow-card-sm: 0 6px 15px var(--shadow-lg);

  /* Escala de z-index */
  --z-navbar:    1000;
  --z-hamburger: 1001;
  --z-preloader: 9999;
}

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-section) 100%);
  min-height: 100vh;
  overscroll-behavior: none;
  overflow-x: hidden;
}

/* #endregion */

/* #region Sections base */

.section {
  padding: 2.5rem 2rem;
  max-width: 1500px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(45deg, var(--accent), var(--purple-accent));
  border-radius: 2px;
}

/* #endregion */

/* #region Section cards (patrón compartido) */

.section-card {
  background: var(--bg-section);
  border-radius: var(--radius-section);
  padding: 2rem 1.5rem;
  margin: 0rem;
  box-shadow: 0 10px 30px var(--shadow-lg);
  border: 1px solid var(--section-border);
}

.faq {
  overflow: hidden;
}

.contact {
  text-align: center;
}

/* #endregion */

/* #region Card base (patrón compartido) */

.skill-category,
.project-card {
  background: var(--card-inner);
  border: 1px solid var(--accent-border);
  transition: var(--transition-card);
}

.skill-category:hover,
.project-card:hover {
  transform: none;
}

.cta-button:hover,
.project-link:hover,
.contact-link:hover,
.social-links a:hover {
  transform: translateY(-3px);
}

/* #endregion */

/* #region Utility classes */

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* #endregion */

/* #region Animaciones */

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(-20px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

@keyframes spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* #endregion */

/* #region Accesibilidad */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* #endregion */

/* #region Responsive — Sections base */

@media (max-width: 768px) {
  .section {
    padding: 3rem 1rem;
  }

  .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
}

/* #endregion */