/* ==========================================
   PROJECT SHOWCASE — ESTILOS
   Tema: Dark Premium · Glassmorphism
   ========================================== */

/* ── VARIABLES ─────────────────────────── */
:root {
  --bg-primary:   #020204;
  --bg-secondary: #050509;
  --bg-card:      rgba(255,255,255,0.04);
  --bg-card-hover:rgba(255,255,255,0.07);
  --border:       rgba(255,255,255,0.07);
  --border-hover: rgba(6,182,212,0.45);

  /* ↓ Accent: cyan eléctrico — cambia estas líneas para el color */
  --accent:   #06b6d4;
  --accent-2: #22d3ee;
  --accent-3: #f43f5e;
  --gradient: linear-gradient(135deg, #0891b2, #22d3ee);
  --gradient-text: linear-gradient(90deg, #22d3ee, #67e8f9, #0891b2);

  --text-primary:  #f1f5f9;
  --text-secondary:#94a3b8;
  --text-muted:    #64748b;

  --font-main: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;

  --radius:    16px;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --shadow-accent: 0 0 40px rgba(99,102,241,0.15);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --nav-h: 72px;
}

/* ── RESET ──────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
body {
  font-family: var(--font-main);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width:100%; display:block; }
a   { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }

/* ── SCROLLBAR ──────────────────────────── */
::-webkit-scrollbar       { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-primary); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:99px; }

/* ── CURSOR GLOW ────────────────────────── */
.cursor-glow {
  width:420px; height:420px;
  background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
  border-radius:50%;
  position:fixed;
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:0;
}

/* ── GLOBAL BACKGROUND ──────────────────── */
.site-bg {
  position:fixed; inset:0; z-index:-1; overflow:hidden;
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 30%, transparent 80%);
}
.orb {
  position:absolute; border-radius:50%;
  filter:blur(100px); opacity:0.18;
  animation: orbFloat 10s ease-in-out infinite alternate;
}
.orb-1 { width:520px; height:520px; background:radial-gradient(circle,#0891b2,transparent); top:-160px; left:-100px; }
.orb-2 { width:380px; height:380px; background:radial-gradient(circle,#22d3ee,transparent); bottom:0; right:-60px; animation-delay:-5s; opacity:0.12; }
.orb-3 { width:280px; height:280px; background:radial-gradient(circle,#0e7490,transparent); top:50%; left:50%; animation-delay:-2s; opacity:0.07; }
@keyframes orbFloat {
  from { transform:translate(0,0) scale(1); }
  to   { transform:translate(25px,18px) scale(1.06); }
}

/* ── UTILITIES ──────────────────────────── */
.container { max-width:1180px; margin:0 auto; padding:0 24px; }
.section { padding:100px 0; position:relative; }

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── BUTTONS ────────────────────────────── */
.btn-primary, .btn-secondary, .btn-nav {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:99px;
  font-size:0.9rem; font-weight:600;
  transition:var(--transition);
  position:relative; overflow:hidden;
  white-space:nowrap;
}
.btn-primary {
  background:var(--gradient); color:#fff;
  box-shadow:0 4px 20px rgba(99,102,241,0.35);
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0.1); opacity:0;
  transition:opacity var(--transition);
}
.btn-primary:hover::before { opacity:1; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(99,102,241,0.45); }

.btn-secondary {
  border:1.5px solid var(--border); color:var(--text-primary);
  background:var(--bg-card); backdrop-filter:blur(12px);
}
.btn-secondary:hover {
  border-color:var(--border-hover); background:var(--bg-card-hover);
  transform:translateY(-2px);
}

.btn-nav {
  background:var(--gradient); color:#fff;
  padding:9px 20px; font-size:0.85rem;
}
.btn-nav:hover { opacity:0.9; transform:translateY(-1px); }

/* ── REVEAL ─────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── SECTION HEADER ─────────────────────── */
.section-header { text-align:center; margin-bottom:56px; }
.section-tag {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(6,182,212,0.08);
  border:1px solid rgba(6,182,212,0.22);
  color:var(--accent);
  font-size:0.78rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:5px 14px; border-radius:99px; margin-bottom:18px;
}
.section-title {
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  font-weight:800; line-height:1.2; margin-bottom:12px;
}
.section-desc { color:var(--text-secondary); max-width:480px; margin:0 auto; font-size:1rem; }

/* ═════════════════════════════════════════
   NAVBAR
   ═════════════════════════════════════════ */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  transition:background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
  background:rgba(8,8,16,0.85);
  backdrop-filter:blur(20px);
  box-shadow:0 1px 0 var(--border);
}
.nav-container {
  max-width:1180px; margin:0 auto; padding:0 24px;
  height:100%; display:flex; align-items:center;
  justify-content:space-between; gap:24px;
}
.nav-logo {
  font-family:var(--font-mono); font-size:1.25rem; font-weight:500;
  white-space:nowrap;
}
.logo-bracket {
  background:var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:700;
}
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link {
  color:var(--text-secondary); font-size:0.9rem; font-weight:500;
  padding:8px 14px; border-radius:var(--radius-sm);
  transition:color var(--transition), background var(--transition);
}
.nav-link:hover, .nav-link.active-link { color:var(--text-primary); background:var(--bg-card); }

.nav-toggle { display:none; flex-direction:column; gap:5px; padding:4px; }
.nav-toggle span {
  display:block; width:22px; height:2px;
  background:var(--text-primary); border-radius:99px;
  transition:var(--transition);
}

/* ═════════════════════════════════════════
   HERO  (centrado, sin columna imagen)
   ═════════════════════════════════════════ */
.hero {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 60px) 24px 80px;
  position:relative;
}
.hero-content { max-width:740px; }

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(56,189,248,0.08);
  border:1px solid rgba(56,189,248,0.22);
  color:var(--accent-2);
  font-size:0.8rem; font-weight:600;
  padding:7px 16px; border-radius:99px; margin-bottom:28px;
}

.hero-title {
  font-size:clamp(2.8rem, 6vw, 5rem);
  font-weight:900; line-height:1.08; margin-bottom:22px;
  letter-spacing:-0.02em;
}

.hero-subtitle {
  font-size:clamp(1rem, 2vw, 1.3rem);
  color:var(--text-secondary);
  font-family:var(--font-mono);
  margin-bottom:20px;
  min-height:2rem;
}
.typed-cursor {
  display:inline-block;
  animation:blink 1s step-end infinite;
  color:var(--accent); margin-left:2px;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-description {
  color:var(--text-secondary); font-size:1.05rem;
  margin:0 auto 36px; max-width:560px;
}

.hero-actions {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px; margin-bottom:48px;
}

.hero-stats {
  display:flex; align-items:center; justify-content:center; gap:24px;
}
.stat { text-align:center; }
.stat-number {
  font-size:2rem; font-weight:800;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.stat-plus { font-size:1.4rem; font-weight:800; color:var(--accent); }
.stat-label {
  display:block; font-size:0.78rem; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.08em; margin-top:2px;
}
.stat-divider { width:1px; height:40px; background:var(--border); }

/* ═════════════════════════════════════════
   PROJECTS
   ═════════════════════════════════════════ */
.projects { background:var(--bg-secondary); }

.projects-filter {
  display:flex; justify-content:center; gap:8px;
  margin-bottom:48px; flex-wrap:wrap;
}
.filter-btn {
  padding:8px 20px; border-radius:99px;
  font-size:0.875rem; font-weight:500;
  border:1px solid var(--border); color:var(--text-secondary);
  background:var(--bg-card); transition:var(--transition);
}
.filter-btn.active,.filter-btn:hover {
  background:rgba(6,182,212,0.1);
  border-color:var(--border-hover); color:var(--accent);
}

.projects-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:24px;
}

/* Card */
.project-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  transition:var(--transition);
}
.project-card:hover {
  border-color:var(--border-hover);
  transform:translateY(-6px);
  box-shadow:var(--shadow-accent);
}
.project-card.filtered-out { display:none; }

/* Make the whole card a link */
.project-link-wrap {
  display:flex; flex-direction:column; height:100%;
  color:inherit; text-decoration:none;
}

/* Thumbnail */
.project-image {
  position:relative; overflow:hidden; height:200px;
}
.project-img-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; color:rgba(255,255,255,0.45);
  transition:transform var(--transition);
}
.project-card:hover .project-img-placeholder { transform:scale(1.06); }
.project-image img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--transition);
}
.project-card:hover .project-image img { transform:scale(1.06); }

/* Overlay CTA */
.project-overlay {
  position:absolute; inset:0;
  background:rgba(8,8,16,0.72);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--transition);
}
.project-card:hover .project-overlay { opacity:1; }
.project-cta {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gradient); color:#fff;
  padding:11px 22px; border-radius:99px;
  font-size:0.875rem; font-weight:600;
  transform:translateY(8px);
  transition:transform var(--transition);
  box-shadow:0 4px 20px rgba(99,102,241,0.4);
}
.project-card:hover .project-cta { transform:translateY(0); }

.project-featured-badge {
  position:absolute; top:12px; left:12px;
  background:rgba(6,182,212,0.85); backdrop-filter:blur(8px);
  color:#fff; font-size:0.72rem; font-weight:700;
  padding:4px 12px; border-radius:99px;
}

/* Info */
.project-info { padding:20px; flex:1; display:flex; flex-direction:column; }
.project-meta {
  display:flex; justify-content:space-between; margin-bottom:8px;
}
.project-type {
  font-size:0.72rem; color:var(--accent);
  font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
}
.project-year { font-size:0.75rem; color:var(--text-muted); }
.project-title { font-size:1.05rem; font-weight:700; margin-bottom:8px; }
.project-desc {
  font-size:0.875rem; color:var(--text-secondary);
  line-height:1.6; margin-bottom:16px; flex:1;
}

/* Footer of card */
.project-footer {
  display:flex; align-items:center;
  justify-content:space-between; gap:8px;
  margin-top:auto;
}
.project-tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag {
  font-size:0.7rem; font-weight:500;
  padding:3px 9px; border-radius:99px;
  background:rgba(6,182,212,0.08);
  border:1px solid rgba(6,182,212,0.2);
  color:#67e8f9;
}

.project-links-small { display:flex; gap:6px; flex-shrink:0; }
.icon-link {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm);
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text-secondary);
  font-size:1rem; cursor:pointer;
  transition:var(--transition);
}
.icon-link:hover {
  background:rgba(6,182,212,0.1);
  border-color:var(--border-hover);
  color:var(--accent);
}

/* ═════════════════════════════════════════
   CONTACT MINI BANNER
   ═════════════════════════════════════════ */
.contact-mini { padding:80px 0; }
.contact-mini-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:56px 48px;
  display:flex; align-items:center;
  justify-content:space-between; gap:32px;
  backdrop-filter:blur(12px);
  position:relative; overflow:hidden;
}
.contact-mini-card::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(99,102,241,0.08), transparent);
  pointer-events:none;
}
.contact-mini-text h2 {
  font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:800; margin-bottom:8px;
}
.contact-mini-text p { color:var(--text-secondary); font-size:1rem; }
.contact-mini-actions { display:flex; gap:14px; flex-shrink:0; flex-wrap:wrap; }

/* ═════════════════════════════════════════
   FOOTER
   ═════════════════════════════════════════ */
.footer {
  background:var(--bg-primary);
  border-top:1px solid var(--border);
  padding:32px 0;
}
.footer-content {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.footer-text {
  font-size:0.85rem; color:var(--text-muted);
  display:flex; align-items:center; gap:5px;
}

/* Social links */
.social-links { display:flex; gap:10px; }
.social-link {
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm);
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--text-secondary); font-size:1.15rem;
  transition:var(--transition);
}
.social-link:hover {
  background:rgba(6,182,212,0.1);
  border-color:var(--border-hover);
  color:var(--accent);
  transform:translateY(-2px);
}

/* ═════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════ */
@media (max-width:768px) {
  .contact-mini-card {
    flex-direction:column; text-align:center;
    padding:40px 28px;
  }
  .contact-mini-actions { justify-content:center; }
  .projects-grid { grid-template-columns:1fr; }
}

@media (max-width:640px) {
  .section { padding:72px 0; }

  /* Mobile nav */
  .nav-links {
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:rgba(8,8,16,0.96);
    backdrop-filter:blur(20px);
    flex-direction:column; padding:20px;
    gap:4px;
    transform:translateY(-110%); opacity:0;
    transition:transform 0.4s ease, opacity 0.4s ease;
    border-bottom:1px solid var(--border);
  }
  .nav-links.open { transform:translateY(0); opacity:1; }
  .nav-link {
    padding:14px; border-radius:var(--radius-sm);
    width:100%; text-align:center; font-size:1rem;
  }
  .btn-nav { width:100%; justify-content:center; margin-top:8px; }
  .nav-toggle { display:flex; }

  .hero-stats { flex-wrap:wrap; gap:16px; }
  .footer-content { flex-direction:column; align-items:flex-start; gap:20px; }
}