:root {
  --nav-h: 72px;
  --accent-1: #6a11cb;
  --accent-2: #2575fc;
  --accent-cyan: #00f5ff;
}

/* Reset */
* { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }

/* Fondo general animado */
body {
  font-family: "Inter", "Poppins", sans-serif;
  color: #EAEAEA;
  line-height: 1.6;
  padding-top: var(--nav-h);
  overflow-x: hidden;
  background: linear-gradient(-45deg, #0d0d26, #1a1a40, #2a2a72, #1a1a40);
  background-size: 400% 400%;
  animation: moverGradiente 18s ease infinite;
}
@keyframes moverGradiente {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Particles container */
#particles-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(15,15,25,0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.nav-inner {
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.nav-left { font-weight:700; letter-spacing:.4px; }
.nav-links { display:flex; gap:18px; align-items:center; }
.nav-links a {
  color: #EAEAEA; text-decoration:none; font-weight:600;
  padding:8px 10px; border-radius:6px;
  transition: color .2s ease, transform .2s ease;
}
.nav-links a:hover { color: var(--accent-cyan); transform: translateY(-2px); }

/* HERO */
.hero {
  min-height: 60vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 40px 20px;
  gap: 18px;
}
.hero-gif {
  width: min(520px, 86%);
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}

/* Título principal: mantiene efecto gradient de texto */
.hero-title {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 800;
  text-transform:uppercase;
  letter-spacing: 3px;
  margin: 0;
  background: linear-gradient(90deg, #00f5ff, #ff00c8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}

/* Separadores */
.separator {
  width:min(860px,85%);
  height:2px;
  margin:36px auto;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), rgba(106,17,203,0.75), rgba(37,117,252,0.75), rgba(255,255,255,0.06), transparent);
}
.title-separator {
  width:140px; height:4px; margin:12px 0 22px 0;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  border-radius:6px;
}

/* -------------------------
   Recuadro estilizado para títulos (usable en hero y secciones)
   ------------------------- */
.section-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);      /* sutil por defecto */
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  margin: 8px 0 18px 0;
  backdrop-filter: blur(6px);
}

/* Variante más marcada (si quieres fondo con color) */
.section-box.strong {
  background: linear-gradient(135deg, rgba(106,17,203,0.85), rgba(37,117,252,0.85));
  border: 1px solid rgba(255,255,255,0.12);
  color: #ffffff;
}

/* Si quieres un nombre de clase específico para hero (compatibilidad con HTML previo) */
.hero-box { /* permite que si usas .hero-box en HTML funcione igual */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  margin: 8px 0 18px 0;
  backdrop-filter: blur(6px);
}

/* Tools */
.tools-section { padding:40px 20px; display:flex; justify-content:center; }
.tools-container { display:flex; gap:48px; flex-wrap:wrap; }
.tool { display:flex; flex-direction:column; align-items:center; gap:10px; }
.tool-icon { width:72px; border-radius:8px; }
.tool-name { font-weight:700; }

/* Mi trabajo */
.full-black {
  width:100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.full-black::before,
.full-black::after {
  content:"";
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  animation: moverCirculos 14s linear infinite;
}
.full-black::before { width: 320px; height: 320px; top:-120px; left:-120px; }
.full-black::after { width: 240px; height: 240px; bottom:-100px; right:-100px; }
@keyframes moverCirculos {
  0% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(40px,-40px) rotate(180deg); }
  100% { transform: translate(0,0) rotate(360deg); }
}

.trabajo-inner { max-width:1400px; margin:0 auto; padding:0 40px; }
.video-item {
  display:flex; gap:28px; margin:28px 0; padding:18px;
  background: rgba(255,255,255,0.02);
  border-radius:12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
}
.video-item.reverse { flex-direction: row-reverse; }
.video-media {
  width: 720px; max-width: calc(100vw - 420px);
  border-radius:10px; background:#000;
}
.video-info { flex:1; }
.video-info h3 { color: var(--accent-cyan); margin-bottom:12px; }

/* REELS */
#reels {
  padding: 60px 20px;
  text-align: center;
}
.reels-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.reel-card {
  flex: 1 1 280px;
  max-width: 320px;
  display: flex;
  justify-content: center;
}
.reel-card iframe {
  width: 100%;
  height: 560px;
  border-radius: 12px;
  border: none;
  overflow: hidden;
}

/* CONTACTO */
.contact-section {
  padding: 80px 20px;
  text-align: center;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.contact-grid {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.contact-card {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  background: rgba(255,255,255,0.08);
}
.contact-card img {
  width: 128px;
  height: 128px;
  object-fit: contain;
}
.contact-card span {
  color: #f1f1f1;
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Fade-in */
.fade-in {
  opacity:0;
  animation: fadeIn 1.4s ease forwards;
  animation-delay: 1s;
}
@keyframes fadeIn {
  from { opacity:0; transform: translateY(12px); }
  to   { opacity:1; transform: translateY(0); }
}
.fade-text {
  font-size:1.2rem;
  color:#f1f1f1;
  margin-top:10px;
  animation: fadeIn 1.4s ease forwards;
}