/* ZyvexWeby — página Sobre Mí */

/* ===================== SECCIÓN ABOUT ===================== */
.about {
  padding: 60px 8%;
  position: relative;
  overflow: hidden;
}

.about .section-header {
  margin-top: 120px;
  margin-bottom: 28px;
  text-align: center;
}

.about .section-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--text) 40%, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.about .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 96px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 22px rgba(6, 182, 212, 0.5);
}

.about-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.about-image {
  width: 100%;
  height: 400px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-glow);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 2px);
  transition: transform 0.3s ease;
}

.about-photo:hover {
  transform: scale(1.03);
}

.about-text p {
  color: var(--text-gray);
  line-height: 1.9;
  margin-bottom: 18px;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}

/* ===================== CODE SNIPPETS DECORATIVOS ===================== */
.about-code-snippet {
  position: absolute;
  font-family: Consolas, 'Fira Code', monospace;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.22);
  white-space: pre;
  pointer-events: none;
  z-index: 0;
}

.about-code-snippet span {
  display: inline-block;
  overflow: hidden;
  border-right: 1px solid rgba(148, 163, 184, 0.5);
  white-space: pre;
  will-change: width;
  animation: aboutTyping 12s steps(120, end) infinite,
             aboutCaret 0.8s steps(1, end) infinite;
}

@keyframes aboutTyping {
  0%   { width: 0 }
  40%  { width: 100% }
  60%  { width: 100% }
  100% { width: 0 }
}

@keyframes aboutCaret {
  50% { border-color: transparent }
}

.about-code-snippet.snippet-1  { top: 16%; left: 4%;   max-width: 260px; }
.about-code-snippet.snippet-2  { top: 20%; right: 6%;  max-width: 320px; }
.about-code-snippet.snippet-3  { bottom: 12%; left: 18%; max-width: 340px; }
.about-code-snippet.snippet-4  { top: 10%; left: 50%;  max-width: 280px; transform: translateX(-50%); }
.about-code-snippet.snippet-5  { top: 45%; right: 10%; max-width: 300px; }
.about-code-snippet.snippet-6  { bottom: 20%; left: 50%; max-width: 320px; transform: translateX(-50%); }
.about-code-snippet.snippet-7  { top: 8%;  left: 20%;  max-width: 300px; }
.about-code-snippet.snippet-8  { top: 30%; right: 2%;  max-width: 280px; }
.about-code-snippet.snippet-9  { top: 50%; left: 10%;  max-width: 320px; }
.about-code-snippet.snippet-10 { top: 35%; left: 60%;  max-width: 300px; transform: translateX(-50%); }
.about-code-snippet.snippet-11 { bottom: 5%; right: 15%; max-width: 340px; }

/* ===================== BANDERAS ===================== */
.flags-vertical {
  padding: 50px 8% 10px;
}

.flags-container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.flags-grid {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.flags-text {
  color: var(--text-gray);
  margin: 8px 0 0 0;
  font-weight: 600;
  font-size: 0.9rem;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .about-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-code-snippet {
    font-size: 10px;
    color: rgba(148, 163, 184, 0.13);
  }

  .about-code-snippet.snippet-7,
  .about-code-snippet.snippet-8,
  .about-code-snippet.snippet-9,
  .about-code-snippet.snippet-10,
  .about-code-snippet.snippet-11 {
    display: none;
  }

  .about-code-snippet.snippet-1  { top: 15%; left: 5%;   max-width: 200px; }
  .about-code-snippet.snippet-2  { top: 25%; right: 5%;  max-width: 220px; }
  .about-code-snippet.snippet-3  { bottom: 15%; left: 10%; max-width: 250px; }
  .about-code-snippet.snippet-4  { top: 8%;  left: 50%;  max-width: 180px; transform: translateX(-50%); }
  .about-code-snippet.snippet-5  { top: 50%; right: 8%;  max-width: 200px; }
  .about-code-snippet.snippet-6  { bottom: 25%; left: 50%; max-width: 220px; transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .about {
    padding: 40px 6% 50px;
  }

  .about .section-header {
    margin-top: 80px;
    margin-bottom: 24px;
  }

  .about-content {
    gap: 32px;
  }

  .about-image {
    height: 320px;
    margin-bottom: 12px;
  }

  .about-photo {
    object-fit: contain;
  }
}

@media (max-width: 480px) {
  .about {
    padding: 30px 5% 40px;
  }

  .about-image {
    height: 260px;
  }

  .flags-vertical {
    padding: 30px 5% 10px;
  }
}