/* ==========================================
   DESIGN TOKENS & VARIABLES
   ========================================== */
:root {
  --bg: hsl(224, 71%, 4%);
  --card-bg: rgba(10, 14, 28, 0.72);
  --card-border: rgba(99, 102, 241, 0.13);
  --glow-border: rgba(6, 182, 212, 0.35);
  --text-1: hsl(210, 40%, 98%);
  --text-2: hsl(215, 22%, 78%);
  --text-3: hsl(215, 18%, 55%);
  --cyan:  hsl(190, 95%, 50%);
  --violet: hsl(263, 90%, 65%);
  --green: hsl(160, 84%, 39%);
  --orange: hsl(25, 95%, 60%);
  --grad: linear-gradient(135deg, var(--cyan), var(--violet));
  --grad-h: linear-gradient(135deg, var(--violet), var(--cyan));
  --blur: 18px;
  --r-xl: 24px;
  --r-lg: 16px;
  --r-md: 10px;
  --r-sm: 6px;
  --ease: cubic-bezier(.4,0,.2,1);
  --font-h: 'Outfit', sans-serif;
  --font-b: 'Inter', sans-serif;
}

body.light-theme {
  --bg: hsl(210, 28%, 94%);
  --card-bg: rgba(255,255,255,0.88);
  --card-border: rgba(0,0,0,0.07);
  --glow-border: rgba(99,102,241,0.18);
  --text-1: hsl(222, 45%, 10%);
  --text-2: hsl(222, 22%, 35%);
  --text-3: hsl(222, 14%, 55%);
  --cyan: hsl(190, 88%, 38%);
  --violet: hsl(263, 80%, 50%);
  --grad: linear-gradient(135deg, var(--cyan), var(--violet));
  --blur: 10px;
}

/* ── BILINGUAL ────────────────────────────── */
body.lang-es [lang="en"] { display: none !important; }
body.lang-en [lang="es"] { display: none !important; }

/* ── RESET ───────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5.5rem 1rem 4rem;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}

/* ── SCROLLBAR ───────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 3px; }

/* ══════════════════════════════════════════
   SPACE BACKGROUND
══════════════════════════════════════════ */
.stars-bg {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
}
body.light-theme .stars-bg { display: none; }

/* Three css-only star layers */
#stars, #stars2, #stars3 { position: absolute; inset: 0; }

#stars {
  background: radial-gradient(1px 1px at 10% 15%, #fff 0%, transparent 100%),
              radial-gradient(1px 1px at 28% 42%, #fff 0%, transparent 100%),
              radial-gradient(1px 1px at 55% 8%,  #fff 0%, transparent 100%),
              radial-gradient(1px 1px at 72% 65%, #fff 0%, transparent 100%),
              radial-gradient(1px 1px at 88% 30%, #fff 0%, transparent 100%),
              radial-gradient(1px 1px at 40% 80%, #fff 0%, transparent 100%),
              radial-gradient(1px 1px at 62% 55%, #fff 0%, transparent 100%),
              radial-gradient(1px 1px at 17% 70%, #fff 0%, transparent 100%),
              radial-gradient(1px 1px at 93% 85%, #fff 0%, transparent 100%),
              radial-gradient(1px 1px at 5%  50%, #fff 0%, transparent 100%);
  background-size: 600px 600px;
  opacity: .35;
  animation: twinkle1 8s ease-in-out infinite alternate;
}
#stars2 {
  background: radial-gradient(2px 2px at 20% 25%, rgba(6,182,212,.7) 0%, transparent 100%),
              radial-gradient(2px 2px at 60% 10%, rgba(139,92,246,.7) 0%, transparent 100%),
              radial-gradient(2px 2px at 80% 70%, rgba(6,182,212,.7) 0%, transparent 100%),
              radial-gradient(2px 2px at 35% 90%, rgba(139,92,246,.5) 0%, transparent 100%),
              radial-gradient(2px 2px at 50% 45%, #fff 0%, transparent 100%),
              radial-gradient(2px 2px at 15% 55%, #fff 0%, transparent 100%),
              radial-gradient(2px 2px at 90% 20%, #fff 0%, transparent 100%);
  background-size: 800px 800px;
  opacity: .5;
  animation: twinkle2 12s ease-in-out infinite alternate;
}
#stars3 {
  background: radial-gradient(3px 3px at 45% 35%, rgba(6,182,212,.5) 0%, transparent 100%),
              radial-gradient(3px 3px at 75% 80%, rgba(139,92,246,.5) 0%, transparent 100%),
              radial-gradient(2px 2px at 25% 60%, #fff 0%, transparent 100%);
  background-size: 1000px 1000px;
  opacity: .6;
  animation: twinkle1 20s ease-in-out infinite alternate;
}

@keyframes twinkle1 { 0%{opacity:.25} 100%{opacity:.55} }
@keyframes twinkle2 { 0%{opacity:.35} 100%{opacity:.65} }

/* Glow blobs */
.glow-bg { position: fixed; inset:0; z-index:-2; pointer-events:none; }
.glow-circle {
  position: absolute; border-radius: 50%;
  filter: blur(130px); opacity: .07;
}
body.light-theme .glow-circle { opacity: .02; }
.gc-1 { top:-15%; left:-10%; width:55vw; height:55vw; background:var(--violet); animation: gb1 18s ease-in-out infinite alternate; }
.gc-2 { bottom:-15%; right:-10%; width:50vw; height:50vw; background:var(--cyan); animation: gb2 22s ease-in-out infinite alternate; }
@keyframes gb1 { to { transform: translate(8vw, 6vh) scale(1.1); } }
@keyframes gb2 { to { transform: translate(-8vw,-6vh) scale(1.05); } }

/* ══════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════ */
.navbar {
  position: fixed; top:0; left:0; width:100%;
  height: 4.5rem;
  background: rgba(3,7,18,.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--card-border);
  z-index: 99;
  display: flex; justify-content: center; align-items: center;
  padding: 0 1.5rem;
}
body.light-theme .navbar { background: rgba(255,255,255,.82); }

.nav-container { width:100%; max-width:1140px; display:flex; justify-content:space-between; align-items:center; }

.logo {
  font-family: var(--font-h); font-size: 1.5rem; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-decoration: none; letter-spacing: -0.02em;
}

.nav-links { display:flex; gap:2rem; }
.nav-links a {
  color: var(--text-2); text-decoration: none; font-size: .9rem;
  font-weight: 500; position: relative; padding: .3rem 0;
  transition: color .2s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background: var(--grad); border-radius:2px; transition: width .25s var(--ease);
}
.nav-links a:hover { color: var(--text-1); }
.nav-links a:hover::after { width: 100%; }

.nav-controls { display:flex; gap:.6rem; }
.nav-btn {
  background: transparent; border: 1px solid var(--card-border);
  color: var(--text-1); width:36px; height:36px; border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  cursor:pointer; transition: all .2s var(--ease);
}
.nav-btn:hover { border-color: var(--cyan); color: var(--cyan); transform:scale(1.08); }
.lang-label { font-family: var(--font-h); font-weight:700; font-size:.75rem; }

/* sun/moon */
.sun-icon { display:none; } .moon-icon { display:block; }
body.light-theme .sun-icon { display:block; } body.light-theme .moon-icon { display:none; }
.label-es { display:block; } .label-en { display:none; }
body.lang-en .label-es { display:none; } body.lang-en .label-en { display:block; }

/* ══════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════ */
.hero-section {
  display: flex; justify-content: space-between; align-items: center;
  gap: 3rem; padding: 5rem 2rem 4rem;
  position: relative; min-height: 88vh;
  width: 100%; max-width: 1140px;
}

/* Subtle Mars ground line */
.hero-section::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(220, 80, 30, .3) 30%, rgba(6,182,212,.3) 70%, transparent);
}

.hero-content { flex: 1.2; display:flex; flex-direction:column; align-items:flex-start; z-index:2; }

/* Mission badge */
.mission-badge {
  display:inline-flex; align-items:center; gap:.6rem;
  background: rgba(16,185,129,.07);
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 30px; padding: .4rem 1.1rem;
  font-family: var(--font-h); font-weight:700; font-size:.72rem;
  color: hsl(160,100%,65%); letter-spacing:.06em;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 20px rgba(16,185,129,.07), inset 0 1px 0 rgba(255,255,255,.06);
}
body.light-theme .mission-badge { color: hsl(160,70%,30%); background: rgba(16,185,129,.07); }

.pulse-dot {
  width:7px; height:7px; background: hsl(160,100%,50%);
  border-radius:50%; animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { transform:scale(.9); box-shadow: 0 0 0 0 rgba(16,185,129,.7); }
  70% { transform:scale(1.15); box-shadow: 0 0 0 7px rgba(16,185,129,0); }
  100% { transform:scale(.9); box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.hero-welcome {
  font-family: var(--font-h); font-size:2rem; font-weight:700;
  color: var(--text-1); margin-bottom: .3rem;
}

.hero-name {
  font-family: var(--font-h); font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight:800; letter-spacing:-.04em; line-height:1.1; margin-bottom:.8rem;
}
.gradient-text {
  background: var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  display:inline-block; position:relative;
}
/* underline glow on name */
.gradient-text::after {
  content:''; position:absolute; left:0; bottom:-4px; width:100%; height:3px;
  background: var(--grad); border-radius:2px;
  filter: blur(3px); opacity:.6;
}

.hero-title {
  font-size: 1.15rem; font-weight:500; color: var(--text-2); margin-bottom:2.2rem;
}

/* Download button */
.btn {
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.8rem 2rem; font-family:var(--font-h); font-weight:700;
  font-size:.95rem; border-radius:50px; cursor:pointer;
  text-decoration:none; border:none; transition: all .3s var(--ease);
}
.btn-gradient {
  background: var(--grad); color:#fff;
  box-shadow: 0 6px 24px rgba(6,182,212,.25), 0 0 0 0 rgba(6,182,212,.2);
  animation: btnPulse 3s ease-in-out infinite;
}
@keyframes btnPulse {
  0%,100% { box-shadow: 0 6px 24px rgba(6,182,212,.25); }
  50%      { box-shadow: 0 8px 32px rgba(6,182,212,.5), 0 0 0 8px rgba(6,182,212,.06); }
}
.btn-gradient:hover {
  background: var(--grad-h); transform:translateY(-3px) scale(1.02);
  box-shadow: 0 12px 36px rgba(139,92,246,.45);
}

/* Astronaut graphic */
.hero-graphic { flex:.9; position:relative; display:flex; justify-content:center; align-items:center; }

/* Orbit ring behind astronaut */
.hero-graphic::before {
  content:'';
  position:absolute; width:360px; height:360px; border-radius:50%;
  border: 1px solid rgba(6,182,212,.15);
  box-shadow: 0 0 40px rgba(6,182,212,.06), inset 0 0 40px rgba(6,182,212,.06);
  animation: orbitRotate 20s linear infinite;
}
.hero-graphic::after {
  content:'';
  position:absolute; width:260px; height:260px; border-radius:50%;
  border: 1px dashed rgba(139,92,246,.2);
  animation: orbitRotate 12s linear infinite reverse;
}
@keyframes orbitRotate { to { transform: rotate(360deg); } }

.astronaut-img {
  width:100%; max-width:340px; position:relative; z-index:2;
  animation: floatY 5s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(6,182,212,.3));
}
@keyframes floatY {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-14px) rotate(1.5deg); }
}
.astronaut-shadow {
  position:absolute; width:70%; height:30px; bottom:-10px;
  background: radial-gradient(ellipse, rgba(6,182,212,.25) 0%, transparent 70%);
  filter: blur(8px); z-index:1;
  animation: shadowPulse 5s ease-in-out infinite;
}
@keyframes shadowPulse {
  0%,100% { opacity:.6; transform: scaleX(1); }
  50%     { opacity:.3; transform: scaleX(.85); }
}

/* Print header — hidden in web */
.print-header { display:none; }

/* ══════════════════════════════════════════
   MAIN LAYOUT
══════════════════════════════════════════ */
.resume-container {
  width:100%; max-width:1140px;
  display:flex; flex-direction:column; gap:1.5rem; z-index:1;
}
.resume-main {
  display:grid; grid-template-columns:1fr 1.65fr; gap:1.5rem;
}
.main-column-left, .main-column-right {
  display:flex; flex-direction:column; gap:1.5rem;
}

/* ── CARD ─────────────────────────────────── */
.card {
  background: var(--card-bg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  padding: 2.2rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  position: relative; overflow:hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
/* Subtle top gradient accent line */
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--grad); opacity:0; transition: opacity .3s;
}
.card:hover::before { opacity:.8; }
.card:hover {
  border-color: var(--glow-border);
  box-shadow: 0 8px 40px rgba(6,182,212,.1), 0 0 0 1px rgba(6,182,212,.08);
  transform: translateY(-3px);
}

/* Section titles */
.section-title {
  font-family: var(--font-h); font-size:1.5rem; font-weight:700;
  letter-spacing:-.02em; margin-bottom:1.4rem;
  position:relative; display:inline-block; padding-bottom:.5rem;
  color: var(--text-1);
}
.section-title::after {
  content:''; position:absolute; bottom:0; left:0; width:44px; height:3px;
  background: var(--grad); border-radius:3px;
}

/* ══════════════════════════════════════════
   STATS BENTO
══════════════════════════════════════════ */
.summary-section p { color:var(--text-2); font-size:.95rem; text-align:justify; line-height:1.75; }
.stats-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1.6rem;
}
.stat-card {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg); padding:1.2rem .6rem;
  text-align:center; transition: all .3s var(--ease); position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; inset:0;
  background: var(--grad); opacity:0; transition: opacity .3s;
}
.stat-card:hover::before { opacity:.04; }
.stat-card:hover { border-color: var(--cyan); transform:translateY(-3px); box-shadow:0 8px 20px rgba(6,182,212,.1); }
body.light-theme .stat-card { background:rgba(0,0,0,.02); }
.stat-number {
  font-family:var(--font-h); font-size:2.2rem; font-weight:800; display:block;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1.1;
}
.stat-desc { font-size:.7rem; color:var(--text-3); font-weight:600; display:block; margin-top:.3rem; }

/* ══════════════════════════════════════════
   SKILLS
══════════════════════════════════════════ */
.skills-filter { display:flex; gap:.5rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.filter-btn {
  background:transparent; border:1px solid var(--card-border);
  color:var(--text-2); padding:.4rem 1rem; border-radius:30px;
  cursor:pointer; font-size:.78rem; font-weight:600;
  transition: all .2s var(--ease); font-family:var(--font-h);
}
.filter-btn:hover { border-color:var(--cyan); color:var(--text-1); }
.filter-btn.active {
  background:var(--grad); border-color:transparent; color:#fff;
  box-shadow:0 4px 14px rgba(6,182,212,.2);
}

.skills-container { display:flex; flex-direction:column; gap:1.5rem; }
.skill-category h4 {
  font-size:.78rem; font-weight:700; color:var(--cyan);
  margin-bottom:.7rem; letter-spacing:.07em; text-transform:uppercase;
}
.skill-tags { display:flex; flex-wrap:wrap; gap:.45rem; }
.skill-tag {
  background:rgba(255,255,255,.03); border:1px solid var(--card-border);
  color:var(--text-2); padding:.3rem .7rem; border-radius:var(--r-sm);
  font-size:.78rem; font-weight:500; cursor:default;
  transition: all .25s var(--ease);
}
body.light-theme .skill-tag { background:rgba(0,0,0,.03); }
.skill-tag:hover {
  border-color:var(--cyan); color:var(--text-1);
  background:rgba(6,182,212,.06); transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(6,182,212,.1);
}
.skill-tag.highlight {
  border-color:rgba(6,182,212,.3); background:rgba(6,182,212,.07);
  color:var(--text-1);
}
body.light-theme .skill-tag.highlight { background:rgba(6,182,212,.05); }

/* ══════════════════════════════════════════
   EDUCATION
══════════════════════════════════════════ */
.edu-item { display:flex; gap:1rem; margin-bottom:1.3rem; }
.edu-item:last-child { margin-bottom:0; }
.edu-year {
  font-family:var(--font-h); font-size:1rem; font-weight:800;
  color:var(--cyan); background:rgba(6,182,212,.1);
  height:fit-content; padding:.25rem .65rem; border-radius:var(--r-sm);
  border: 1px solid rgba(6,182,212,.2);
}
.edu-details h4 { font-size:.95rem; font-weight:600; color:var(--text-1); }
.edu-details p { font-size:.85rem; color:var(--text-2); }
.edu-extra { font-size:.78rem; color:var(--text-3); display:block; margin-top:.1rem; }

/* ══════════════════════════════════════════
   LANGUAGES
══════════════════════════════════════════ */
.languages-grid { display:flex; flex-direction:column; gap:1.1rem; }
.lang-item { display:flex; flex-direction:column; gap:.3rem; }
.lang-name { font-size:.85rem; font-weight:600; display:flex; justify-content:space-between; }
.lang-level { font-size:.75rem; color:var(--text-3); align-self:flex-end; margin-top:-1.3rem; }
.lang-bar-container { height:6px; background:var(--card-border); border-radius:3px; overflow:hidden; }
.lang-bar { height:100%; background:var(--grad); border-radius:3px; }

/* ══════════════════════════════════════════
   CONTACT
══════════════════════════════════════════ */
.web-contact-list { display:flex; flex-direction:column; gap:.9rem; }
.web-contact-link {
  display:flex; align-items:center; gap:.8rem;
  color:var(--text-2); text-decoration:none; font-size:.9rem;
  padding:.6rem .8rem; border-radius:var(--r-md);
  border:1px solid transparent; transition: all .25s var(--ease);
}
.web-contact-link svg { color:var(--cyan); flex-shrink:0; }
.web-contact-link:hover {
  color:var(--text-1); border-color:var(--card-border);
  background:rgba(6,182,212,.05); transform:translateX(4px);
}

/* ══════════════════════════════════════════
   TIMELINE (Experience)
══════════════════════════════════════════ */
.timeline { position:relative; padding-left:1.8rem; display:flex; flex-direction:column; gap:2.5rem; }
.timeline::before {
  content:''; position:absolute; top:8px; left:5px; width:2px;
  height:calc(100% - 20px);
  background:linear-gradient(to bottom, var(--cyan), var(--violet), transparent);
  opacity:.3;
}

.timeline-item { position:relative; }
.timeline-marker {
  position:absolute; top:6px; left:-2rem;
  width:12px; height:12px; border-radius:50%;
  background:var(--grad);
  border:2px solid var(--bg); box-shadow:0 0 0 3px rgba(6,182,212,.2);
  transition: all .25s var(--ease);
}
.timeline-item:hover .timeline-marker {
  box-shadow: 0 0 0 6px rgba(6,182,212,.15), 0 0 16px rgba(6,182,212,.4);
  transform: scale(1.2);
}

.timeline-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.9rem; flex-wrap:wrap; gap:.5rem; }
.timeline-header h4 { font-size:1.1rem; font-weight:700; color:var(--text-1); }
.timeline-header h5 {
  font-size:.9rem; font-weight:600; margin-top:.1rem;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.timeline-date {
  font-size:.75rem; font-weight:700; color:var(--text-3);
  background:rgba(6,182,212,.07); border:1px solid rgba(6,182,212,.15);
  padding:.2rem .65rem; border-radius:30px;
}

/* Experience cards (frosted inset) */
.timeline-content {
  background:rgba(255,255,255,.015);
  border:1px solid var(--card-border);
  border-radius:var(--r-lg); padding:1.4rem;
  transition: border-color .25s, background .25s;
}
body.light-theme .timeline-content { background:rgba(0,0,0,.015); }
.timeline-item:hover .timeline-content {
  border-color:rgba(6,182,212,.2);
  background:rgba(6,182,212,.025);
}

.timeline-tasks { list-style:none; display:flex; flex-direction:column; gap:.55rem; margin-bottom:1rem; }
.timeline-tasks li { font-size:.875rem; color:var(--text-2); position:relative; padding-left:1.2rem; line-height:1.55; }
.timeline-tasks li::before { content:'✦'; position:absolute; left:0; top:2px; font-size:.7rem; color:var(--cyan); }

.timeline-skills { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.t-skill {
  font-size:.72rem; font-weight:600;
  background:rgba(6,182,212,.08); border:1px solid rgba(6,182,212,.18);
  color:var(--cyan); padding:.15rem .55rem; border-radius:4px;
}

/* ══════════════════════════════════════════
   ACHIEVEMENTS
══════════════════════════════════════════ */
.achievements-list { list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
.achievements-list li {
  display:flex; gap:.85rem; align-items:flex-start;
  background:rgba(255,255,255,.02); border:1px solid var(--card-border);
  border-radius:var(--r-md); padding:1rem;
  transition: all .25s var(--ease);
}
body.light-theme .achievements-list li { background:rgba(0,0,0,.02); }
.achievements-list li:hover {
  border-color:rgba(6,182,212,.25); background:rgba(6,182,212,.04);
  transform:translateX(4px);
}
.ach-icon { font-size:1.5rem; flex-shrink:0; line-height:1.2; }
.ach-text { font-size:.875rem; color:var(--text-2); line-height:1.5; }
.ach-text strong { color:var(--text-1); display:block; margin-bottom:.1rem; }

/* ══════════════════════════════════════════
   COURSES GRID
══════════════════════════════════════════ */
.courses-grid-layout { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:1.1rem; }
.course-category-card {
  background:rgba(255,255,255,.02); border:1px solid var(--card-border);
  border-radius:var(--r-lg); padding:1.3rem;
  transition: all .3s var(--ease); position:relative; overflow:hidden;
}
body.light-theme .course-category-card { background:rgba(0,0,0,.015); }
/* Colored left bar per card */
.course-category-card:nth-child(1) { border-left:3px solid var(--cyan); }
.course-category-card:nth-child(2) { border-left:3px solid var(--violet); }
.course-category-card:nth-child(3) { border-left:3px solid var(--green); }
.course-category-card:nth-child(4) { border-left:3px solid var(--orange); }

.course-category-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.course-category-card:nth-child(1):hover { border-color:var(--cyan); box-shadow:0 8px 24px rgba(6,182,212,.12); }
.course-category-card:nth-child(2):hover { border-color:var(--violet); box-shadow:0 8px 24px rgba(139,92,246,.12); }
.course-category-card:nth-child(3):hover { border-color:var(--green); box-shadow:0 8px 24px rgba(16,185,129,.1); }
.course-category-card:nth-child(4):hover { border-color:var(--orange); box-shadow:0 8px 24px rgba(245,158,11,.1); }

.course-category-card h5 {
  font-family:var(--font-h); font-size:.9rem; font-weight:700;
  margin-bottom:.9rem; border-bottom:1px solid var(--card-border);
  padding-bottom:.5rem; text-transform:uppercase; letter-spacing:.04em;
}
.course-category-card:nth-child(1) h5 { color:var(--cyan); }
.course-category-card:nth-child(2) h5 { color:var(--violet); }
.course-category-card:nth-child(3) h5 { color:var(--green); }
.course-category-card:nth-child(4) h5 { color:var(--orange); }

.course-category-card ul { list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.course-category-card ul li {
  font-size:.8rem; color:var(--text-2); position:relative; padding-left:.9rem;
}
.course-category-card:nth-child(1) ul li::before { content:'✦'; color:var(--cyan); }
.course-category-card:nth-child(2) ul li::before { content:'✦'; color:var(--violet); }
.course-category-card:nth-child(3) ul li::before { content:'✦'; color:var(--green); }
.course-category-card:nth-child(4) ul li::before { content:'✦'; color:var(--orange); }
.course-category-card ul li::before { position:absolute; left:0; font-size:.7rem; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.resume-footer {
  text-align:center; padding:2rem 1rem 1.5rem;
  border-top:1px solid var(--card-border);
  color:var(--text-3); font-size:.78rem; margin-top:2rem;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width:992px) {
  .hero-section { flex-direction:column; min-height:auto; padding:3rem 1rem 2rem; gap:2rem; text-align:center; }
  .hero-content { align-items:center; }
  .hero-graphic::before, .hero-graphic::after { display:none; }
  .resume-main { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  body { padding:5rem .5rem 3rem; }
  .nav-links { display:none; }
  .hero-name { font-size:2.4rem; }
  .hero-welcome { font-size:1.6rem; }
  .card { padding:1.5rem; }
  .courses-grid-layout { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .courses-grid-layout { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr; }
}

/* ── EXTRA COMPONENTS ─────────────────────── */
.btn-outline {
  border: 1px solid var(--card-border); color: var(--text-1);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
}
body.light-theme .btn-outline { background: rgba(0,0,0,.04); }
.btn-outline:hover {
  border-color: var(--violet); color: var(--violet);
  background: rgba(139,92,246,.06); transform: translateY(-3px);
}
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

.hero-accent {
  background: var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  font-weight:700;
}

/* Floating print button (bottom right) */
.fab-print {
  position:fixed; bottom:2rem; right:2rem; z-index:99;
  width:52px; height:52px; border-radius:50%;
  background:var(--grad); color:#fff; border:none;
  display:flex; justify-content:center; align-items:center;
  cursor:pointer; box-shadow:0 8px 24px rgba(6,182,212,.3);
  transition: all .3s var(--ease);
}
.fab-print:hover { transform:scale(1.12) translateY(-2px); box-shadow:0 12px 32px rgba(6,182,212,.45); }

/* ══════════════════════════════════════════
   PRINT / PDF EXPORT
══════════════════════════════════════════ */
@media print {
  @page { size:A4; margin:8mm 10mm; }

  body {
    background:#fff !important; color:#1a1a1a !important;
    padding:0 !important; margin:0 !important;
    font-size:8.5pt !important; line-height:1.3 !important;
  }

  .no-print, .navbar, .hero-section, .stars-bg, .glow-bg,
  .web-contact-section, .skills-filter, .resume-footer { display:none !important; }

  .print-header {
    display:block !important;
    border-bottom:2px solid #cbd5e1 !important;
    padding-bottom:8px !important; margin-bottom:6px !important;
  }
  .header-main-info {
    display:flex !important; align-items:center !important;
    gap:12px !important; flex-wrap:nowrap !important;
  }
  .avatar-container { width:60px !important; height:60px !important; flex-shrink:0 !important; }
  .avatar-img { width:100% !important; height:100% !important; border-radius:50% !important; border:1px solid #cbd5e1 !important; object-fit:cover !important; }
  .title-details h1 { font-size:15pt !important; color:#0f172a !important; font-weight:800 !important; }
  .subtitle { font-size:9pt !important; color:#475569 !important; }
  .tagline .badge { background:#f1f5f9 !important; color:#334155 !important; border:1px solid #e2e8f0 !important; font-size:7pt !important; padding:1px 4px !important; border-radius:30px !important; }
  .contact-grid { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:6px !important; padding-top:6px !important; border-top:1px solid #e2e8f0 !important; margin-top:6px !important; }
  .contact-item { font-size:7.5pt !important; color:#334155 !important; }

  .resume-container { max-width:100% !important; gap:5px !important; }
  .resume-main { display:grid !important; grid-template-columns:1fr 1.65fr !important; gap:10px !important; }
  .main-column-left, .main-column-right { gap:6px !important; }

  .card {
    background:transparent !important; box-shadow:none !important;
    border:none !important; padding:0 !important; margin:0 !important;
    backdrop-filter:none !important; transform:none !important;
    border-radius:0 !important;
  }
  .card::before { display:none !important; }

  .section { margin-bottom:7px !important; }
  .section-title { font-size:9.5pt !important; color:#0f172a !important; border-bottom:1.5px solid #cbd5e1 !important; width:100% !important; padding-bottom:2px !important; margin-bottom:5px !important; }
  .section-title::after { display:none !important; }

  .summary-section p { font-size:8pt !important; line-height:1.35 !important; }
  .stats-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:4px !important; margin-top:5px !important; }
  .stat-card { background:#f8fafc !important; border:1px solid #e2e8f0 !important; padding:4px !important; border-radius:4px !important; }
  .stat-card::before { display:none !important; }
  .stat-number { font-size:11pt !important; background:none !important; -webkit-text-fill-color:initial !important; color:#4f46e5 !important; }
  .stat-desc { font-size:5.5pt !important; color:#64748b !important; }

  .skills-container { gap:5px !important; }
  .skill-category h4 { font-size:7pt !important; margin-bottom:2px !important; }
  .skill-tags { gap:2px !important; }
  .skill-tag { background:#f8fafc !important; border:1px solid #e2e8f0 !important; color:#334155 !important; font-size:6.5pt !important; padding:0 3px !important; }

  .timeline { gap:7px !important; padding-left:10px !important; }
  .timeline::before { left:2px !important; background:#cbd5e1 !important; }
  .timeline-marker { left:-12px !important; width:5px !important; height:5px !important; background:#4f46e5 !important; box-shadow:none !important; border:1px solid #fff !important; }
  .timeline-content { background:transparent !important; border:none !important; padding:0 !important; }
  .timeline-header { margin-bottom:2px !important; }
  .timeline-header h4 { font-size:9pt !important; color:#0f172a !important; }
  .timeline-header h5 { font-size:8pt !important; background:none !important; -webkit-text-fill-color:initial !important; color:#4f46e5 !important; }
  .timeline-date { font-size:7pt !important; padding:0 !important; background:transparent !important; border:none !important; color:#64748b !important; }
  .timeline-tasks { gap:1px !important; margin-bottom:2px !important; }
  .timeline-tasks li { font-size:7.5pt !important; padding-left:6px !important; line-height:1.25 !important; }
  .timeline-tasks li::before { content:'•' !important; color:#4f46e5 !important; font-size:7pt !important; left:0 !important; top:-1px !important; }
  .timeline-skills { gap:2px !important; }
  .t-skill { font-size:6pt !important; background:#f1f5f9 !important; border:1px solid #e2e8f0 !important; color:#475569 !important; padding:0 3px !important; }

  .languages-grid { gap:4px !important; }
  .lang-name { font-size:7.5pt !important; }
  .lang-level { font-size:6.5pt !important; margin-top:-9pt !important; }
  .lang-bar-container { height:3px !important; background:#f1f5f9 !important; }
  .lang-bar { background:#4f46e5 !important; }
  .edu-item { gap:5px !important; margin-bottom:4px !important; }
  .edu-year { font-size:7.5pt !important; padding:0 3px !important; background:#f1f5f9 !important; border:none !important; color:#4f46e5 !important; }
  .edu-details h4 { font-size:8pt !important; }
  .edu-details p { font-size:7pt !important; }
  .edu-extra { font-size:6.5pt !important; }

  .achievements-list { gap:4px !important; }
  .achievements-list li { background:transparent !important; border:none !important; padding:0 !important; gap:5px !important; }
  .ach-icon { font-size:8pt !important; }
  .ach-text { font-size:7.5pt !important; }
  .ach-text strong { display:inline !important; }

  .courses-grid-layout { grid-template-columns:repeat(2,1fr) !important; gap:6px !important; }
  .course-category-card { padding:6px !important; border:1px solid #e2e8f0 !important; border-left-width:2px !important; border-radius:4px !important; }
  .course-category-card h5 { font-size:7.5pt !important; margin-bottom:3px !important; padding-bottom:2px !important; }
  .course-category-card ul { gap:1px !important; }
  .course-category-card ul li { font-size:6.5pt !important; padding-left:6px !important; }
  .course-category-card ul li::before { font-size:6pt !important; }
  .course-category-card:nth-child(1) h5 { color:#0891b2 !important; }
  .course-category-card:nth-child(2) h5 { color:#6d28d9 !important; }
  .course-category-card:nth-child(3) h5 { color:#059669 !important; }
  .course-category-card:nth-child(4) h5 { color:#d97706 !important; }

  .timeline-item, .edu-item, .lang-item, .course-category-card,
  .achievements-list li { page-break-inside:avoid !important; }
}