/* General Styles */
/* Variables */
:root {
  --dark-blue: #1a2332;
  --darker-blue: #0f1419;
  --text-white: #ffffff;
  --text-gray: #9ca3af;
  --text-light-gray: #d1d5db;
  --accent-mind: #2D7B87;
  --mind-hover: #00f0ff;
}

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

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-white);
  background-color: var(--darker-blue);
  overflow-x: hidden;
}

section {
  color: var(--text-light);
  /* Establecer mismo padding a todas las secciones */
  padding: clamp(70px, 7vw, 120px) 24px;
  position: relative;
}

/* Excluimos hero, x ser un section y evitar problemas con bg */
section:not(.hero)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(0, 217, 255, 0.2) 50%,
      transparent);
}

h1,
h2,
h3 {
  user-select: none;
}

/* H1 - Hero */
.hero h1 {
  font-size: clamp(2.1rem, 6vw, 5rem);
}

/* H2 - Todos los títulos de secciones (consistentes entre sí) */
.section-title,
.about-title,
.did-title,
.reviews-title,
.contact-title {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
}