/* ================================================================
  DiseñaThor - Estilos de la página de portafolio
  Archivo: assets/css/pages/portafolio.css
  Uso: página pública /portafolio
================================================================ */

/* ── VARIABLES ── */
:root {
  --color-cyan:       #00FFFF;
  --color-turquesa:   #40E0D0;
  --color-morado:     #8000FF;
  --color-fucsia:     #FF00FF;
  --color-blanco:     #FFFFFF;
  --color-negro:      #000000;
  --gradient-primary:     linear-gradient(135deg, var(--color-cyan), var(--color-fucsia));
  --gradient-secondary:   linear-gradient(135deg, var(--color-morado), var(--color-turquesa));
  --gradient-electric:    linear-gradient(90deg, var(--color-cyan), var(--color-morado), var(--color-fucsia), var(--color-cyan));
  --gradient-dark:        linear-gradient(135deg, #0a0a1a, #12003a);
  --bg-dark:          #050510;
  --bg-card:          #0d0d2b;
  --bg-card-hover:    #12123d;
  --bg-surface:       rgba(255,255,255,0.04);
  --bg-surface-hover: rgba(255,255,255,0.08);
  --border-color:     rgba(0, 255, 255, 0.15);
  --border-hover:     rgba(0, 255, 255, 0.4);
  --text-primary:     #FFFFFF;
  --text-secondary:   rgba(255, 255, 255, 0.7);
  --text-muted:       rgba(255, 255, 255, 0.45);
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Open Sans', sans-serif;
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   2rem;
  --fs-3xl:   2.5rem;
  --fs-4xl:   3rem;
  --fs-5xl:   3.75rem;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 9999px;
  --shadow-glow-cyan:   0 0 30px rgba(0, 255, 255, 0.3);
  --shadow-card:        0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-card-hover:  0 16px 60px rgba(0, 255, 255, 0.15);
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --navbar-height: 72px;
  --container-max: 1280px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-body); background-color:var(--bg-dark); color:var(--text-primary); line-height:1.6; overflow-x:hidden; cursor:none; }
input, textarea, select, button, a, details, summary { cursor:none; }
img, svg { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ── CURSOR ── */
.cursor-dot { width:8px; height:8px; background:var(--color-cyan); border-radius:50%; position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:background var(--transition-fast), transform var(--transition-fast); box-shadow:0 0 10px var(--color-cyan); }
.cursor-ring { width:36px; height:36px; border:2px solid rgba(0,255,255,0.5); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:transform 0.12s ease, width var(--transition-base), height var(--transition-base), border-color var(--transition-base); }
body.cursor-hover .cursor-dot { transform:translate(-50%,-50%) scale(0.5); background:var(--color-fucsia); }
body.cursor-hover .cursor-ring { width:56px; height:56px; border-color:rgba(255,0,255,0.6); }

/* ── CANVAS ── */
.particle-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:0.4; }

/* ── CONTAINER ── */
.container { max-width:var(--container-max); margin:0 auto; padding:0 var(--space-lg); position:relative; z-index:1; }

/* ── TIPOGRAFÍA ── */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:700; line-height:1.2; color:var(--text-primary); }
.text-gradient, .title-gradient { background:var(--gradient-electric); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:300% auto; animation:gradientShift 6s linear infinite; }
@keyframes gradientShift { 0%{background-position:0% center;} 100%{background-position:-300% center;} }
.text-center { text-align:center; }

/* ── BOTONES ── */
.btn { display:inline-flex; align-items:center; gap:var(--space-xs); padding:0.75rem 1.75rem; border-radius:var(--radius-full); font-family:var(--font-heading); font-weight:600; font-size:var(--fs-sm); letter-spacing:0.02em; border:none; cursor:pointer; transition:all var(--transition-base); position:relative; overflow:hidden; text-decoration:none; }
.btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); transition:left 0.5s ease; }
.btn:hover::before { left:100%; }
.btn-primary { background:var(--gradient-primary); color:var(--color-negro); font-weight:700; box-shadow:0 4px 20px rgba(0,255,255,0.25); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,255,255,0.4); }
.btn-lg { padding:1rem 2.25rem; font-size:var(--fs-base); }

/* ── SECTION ── */
.section { padding:var(--space-3xl) 0; position:relative; z-index:1; }
.section-tag { display:inline-block; font-family:var(--font-heading); font-size:var(--fs-xs); font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--color-cyan); background:rgba(0,255,255,0.08); border:1px solid rgba(0,255,255,0.25); padding:0.3rem 1rem; border-radius:var(--radius-full); margin-bottom:var(--space-sm); }

/* ── NAVBAR ── */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--navbar-height); display:flex; align-items:center; transition:background var(--transition-base), box-shadow var(--transition-base), backdrop-filter var(--transition-base); }
.navbar .container { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); width:100%; }
.navbar.scrolled { background:rgba(5,5,16,0.85); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--border-color); }
.logo { display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
.logo-svg { width:28px; height:42px; flex-shrink:0; }
.logo-text { font-family:var(--font-heading); font-weight:900; font-size:var(--fs-xl); color:var(--text-primary); line-height:1; }
.logo-accent { background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav-list { display:flex; align-items:center; gap:var(--space-xs); }
.nav-link { font-family:var(--font-heading); font-weight:600; font-size:var(--fs-sm); color:var(--text-secondary); padding:0.5rem 0.75rem; border-radius:var(--radius-sm); transition:color var(--transition-fast), background var(--transition-fast); position:relative; }
.nav-link::after { content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); width:0; height:2px; background:var(--gradient-primary); border-radius:var(--radius-full); transition:width var(--transition-base); }
.nav-link:hover, .nav-link.active { color:var(--text-primary); }
.nav-link:hover::after, .nav-link.active::after { width:60%; }
.nav-cta { margin-left:var(--space-xs); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:0.5rem; }
.hamburger span { display:block; width:24px; height:2px; background:var(--text-primary); border-radius:var(--radius-full); transition:all var(--transition-base); }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ── LANGUAGE SWITCH ── */
.lang-switch {
  position: relative;
}

.lang-switch-btn {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-primary);
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.lang-switch-btn::-webkit-details-marker {
  display: none;
}

.lang-switch[open] .lang-switch-btn {
  border-color: rgba(255, 255, 255, 0.35);
}

.lang-switch-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 150px;
  display: grid;
  gap: 0.25rem;
  padding: 0.35rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(8, 8, 22, 0.95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  z-index: 20;
}

.lang-switch:not([open]) .lang-switch-menu {
  display: none;
}

.lang-switch-menu a {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.lang-switch-menu a:hover,
.lang-switch-menu a[aria-current="page"] {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

/* ── FOOTER ── */
.footer { background:#020209; border-top:1px solid var(--border-color); padding:var(--space-2xl) 0 var(--space-lg); position:relative; z-index:1; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-xs); }
.footer-bottom p { font-size:var(--fs-xs); color:var(--text-muted); }

/* ── SCROLL TOP ── */
.scroll-top { position:fixed; bottom:var(--space-lg); right:var(--space-lg); z-index:500; width:48px; height:48px; border-radius:50%; background:var(--gradient-primary); border:none; color:var(--color-negro); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:translateY(20px); transition:opacity var(--transition-base), transform var(--transition-base); box-shadow:0 4px 20px rgba(0,255,255,0.3); }
.scroll-top.visible { opacity:1; transform:translateY(0); }
.scroll-top:hover { transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,255,255,0.5); }

/* ── LIGHTBOX ── */
.lightbox-overlay { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; padding:var(--space-lg); animation:fadeIn var(--transition-fast); }
.lightbox-overlay[hidden] { display:none; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.lightbox-content { max-width:90vw; max-height:80vh; border-radius:var(--radius-lg); overflow:hidden; position:relative; }
.lightbox-close, .lightbox-prev, .lightbox-next { position:fixed; background:rgba(255,255,255,0.1); border:1px solid var(--border-color); border-radius:50%; color:var(--text-primary); font-size:var(--fs-lg); width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--transition-fast); z-index:2001; }
.lightbox-close { top:var(--space-md); right:var(--space-md); }
.lightbox-prev { left:var(--space-md); top:50%; transform:translateY(-50%); }
.lightbox-next { right:var(--space-md); top:50%; transform:translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background:rgba(0,255,255,0.15); border-color:var(--color-cyan); }

/* ── AOS ── */
[data-aos] { opacity:0; transition:opacity 0.7s ease, transform 0.7s ease; }
[data-aos="fade-up"]    { transform:translateY(40px); }
[data-aos="fade-down"]  { transform:translateY(-40px); }
[data-aos="fade-left"]  { transform:translateX(60px); }
[data-aos="fade-right"] { transform:translateX(-60px); }
[data-aos="zoom-in"]    { transform:scale(0.85); }
[data-aos].aos-animate  { opacity:1; transform:translate(0,0) scale(1); }

/* ── SKELETON ── */
.skeleton { background:linear-gradient(90deg,var(--bg-card) 25%,rgba(255,255,255,0.05) 50%,var(--bg-card) 75%); background-size:200% 100%; animation:skeletonLoad 1.5s ease-in-out infinite; border-radius:var(--radius-md); }
@keyframes skeletonLoad { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ── TOAST ── */
.toast { position:fixed; bottom:var(--space-xl); left:50%; transform:translateX(-50%) translateY(100px); background:var(--bg-card); border-radius:var(--radius-md); padding:var(--space-md) var(--space-xl); display:flex; align-items:center; gap:var(--space-sm); box-shadow:0 8px 32px rgba(0,0,0,0.5); z-index:3000; transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease; opacity:0; font-family:var(--font-heading); font-size:var(--fs-sm); min-width:280px; max-width:90vw; }
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast.success { border-left:3px solid var(--color-cyan); }
.toast.error   { border-left:3px solid var(--color-fucsia); }

/* ── PORTFOLIO FILTERS ── */
.portfolio-filters { display:flex; flex-wrap:wrap; gap:var(--space-xs); justify-content:center; margin-bottom:var(--space-xl); }
.filter-btn, .filter-link { padding:0.5rem 1.25rem; border-radius:var(--radius-full); font-family:var(--font-heading); font-weight:600; font-size:var(--fs-xs); letter-spacing:0.06em; text-transform:uppercase; background:var(--bg-surface); border:1px solid var(--border-color); color:var(--text-secondary); cursor:pointer; transition:all var(--transition-base); position:relative; overflow:hidden; z-index:1; display:inline-flex; align-items:center; justify-content:center; }
.filter-btn::before, .filter-link::before { content:''; position:absolute; inset:-1px; border-radius:inherit; background:var(--gradient-primary); opacity:0; transition:opacity var(--transition-base); z-index:-1; }
.filter-btn:hover, .filter-link:hover { border-color:var(--border-hover); color:var(--text-primary); }
.filter-btn.active { background:transparent; border:1px solid transparent; padding:0.5rem 1.25rem; color:var(--color-negro); box-shadow:0 6px 20px rgba(128,0,255,0.35); }
.filter-btn.active::before { opacity:1; }

/* ── PORTFOLIO GRID ── */
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-md); margin-bottom:var(--space-xl); }
.portfolio-grid--full { grid-template-columns:repeat(3,1fr); }

/* ── PORTFOLIO ITEM ── */
.portfolio-item { position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-color); background:var(--bg-card); cursor:pointer; transition:opacity 0.4s ease, transform 0.4s ease; }
.portfolio-item:hover { transform:translateY(-6px) scale(1.01); border-color:var(--border-hover); box-shadow:var(--shadow-card-hover); }
.portfolio-item.hidden { display:none; }
.portfolio-img-wrap { position:relative; overflow:hidden; aspect-ratio:1/1; }
.portfolio-item--tall .portfolio-img-wrap { aspect-ratio:3/4; }
.portfolio-img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slow); }
.media-fill { width:100%; height:100%; }
.media-fit-cover { object-fit:cover; }
.media-fit-contain { object-fit:contain; }
.portfolio-media-iframe { border:none; }
.portfolio-media-video { background:#000; border-radius:var(--radius-md); }
.portfolio-media-note { color:#fff; padding:1rem; }
.portfolio-placeholder--min-300 { min-height:300px; }
.portfolio-placeholder-icon--lg { font-size:4rem; }
.portfolio-item:hover .portfolio-img { transform:scale(1.08); }
.portfolio-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.portfolio-placeholder[data-cat="elearning"] { background:linear-gradient(135deg,#0a0030 0%,#001a1a 100%); }
.portfolio-placeholder[data-cat="redes"]     { background:linear-gradient(135deg,#1a0020 0%,#000a20 100%); }
.portfolio-placeholder[data-cat="videos"]    { background:linear-gradient(135deg,#001030 0%,#100010 100%); }
.portfolio-placeholder[data-cat="marcas"]    { background:linear-gradient(135deg,#0a001a 0%,#001a10 100%); }
.portfolio-placeholder[data-cat="otros"]     { background:linear-gradient(135deg,#150010 0%,#001510 100%); }
.portfolio-placeholder-icon { font-size:3rem; opacity:0.5; position:relative; z-index:1; }
.portfolio-placeholder::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 25% 25%,rgba(0,255,255,0.1) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(255,0,255,0.1) 0%,transparent 50%); }
.portfolio-placeholder-num { position:absolute; bottom:var(--space-sm); right:var(--space-sm); font-family:var(--font-heading); font-weight:900; color:rgba(255,255,255,0.1); font-size:4rem; line-height:1; }
.portfolio-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.5) 50%,transparent 100%); opacity:0; transition:opacity var(--transition-base); display:flex; flex-direction:column; justify-content:flex-end; padding:var(--space-lg); }
.portfolio-item:hover .portfolio-overlay { opacity:1; }
.overlay-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.7); width:52px; height:52px; border-radius:50%; background:rgba(0,255,255,0.15); border:2px solid rgba(0,255,255,0.5); display:flex; align-items:center; justify-content:center; color:var(--color-cyan); font-size:1.25rem; opacity:0; transition:opacity var(--transition-base), transform var(--transition-bounce); }
.portfolio-item:hover .overlay-icon { opacity:1; transform:translate(-50%,-50%) scale(1); }
.overlay-info { transform:translateY(10px); opacity:0; transition:transform var(--transition-base), opacity var(--transition-base); }
.portfolio-item:hover .overlay-info { transform:translateY(0); opacity:1; }
.overlay-cat { font-family:var(--font-heading); font-size:var(--fs-xs); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-cyan); margin-bottom:4px; }
.portfolio-embedded-badge { display:inline-flex; align-items:center; gap:0.35rem; font-family:var(--font-heading); font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-negro); background:linear-gradient(135deg, rgba(0,255,255,0.95), rgba(64,224,208,0.95)); border:1px solid rgba(0,255,255,0.4); border-radius:var(--radius-full); padding:0.22rem 0.55rem; box-shadow:0 8px 20px rgba(0,255,255,0.18); width:fit-content; }
.portfolio-embedded-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:rgba(5,5,16,0.8); box-shadow:0 0 0 2px rgba(255,255,255,0.15); }
.overlay-title { font-family:var(--font-heading); font-weight:700; font-size:var(--fs-base); color:var(--text-primary); line-height:1.3; }
.portfolio-info { padding:var(--space-md); border-top:1px solid var(--border-color); }
.portfolio-meta-row { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; margin-bottom:var(--space-xs); }
.portfolio-cat-tag { display:inline-block; font-family:var(--font-heading); font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:2px 8px; border-radius:var(--radius-full); margin-bottom:var(--space-xs); }
.cat-tag--elearning { background:rgba(0,255,255,0.1);    color:var(--color-cyan);     border:1px solid rgba(0,255,255,0.2); }
.cat-tag--redes     { background:rgba(255,0,255,0.1);    color:var(--color-fucsia);   border:1px solid rgba(255,0,255,0.2); }
.cat-tag--videos    { background:rgba(128,0,255,0.1);    color:#bf80ff;               border:1px solid rgba(128,0,255,0.2); }
.cat-tag--marcas    { background:rgba(64,224,208,0.1);   color:var(--color-turquesa); border:1px solid rgba(64,224,208,0.2); }
.cat-tag--otros     { background:rgba(255,255,255,0.05); color:var(--text-secondary); border:1px solid var(--border-color); }
.portfolio-name { font-family:var(--font-heading); font-weight:700; font-size:var(--fs-sm); color:var(--text-primary); line-height:1.3; }

/* ── PORTFOLIO PAGE ── */
.portfolio-page-hero { padding:calc(var(--navbar-height) + var(--space-2xl)) 0 var(--space-2xl); text-align:center; background:radial-gradient(ellipse at 30% 50%,rgba(128,0,255,0.15) 0%,transparent 60%),radial-gradient(ellipse at 70% 50%,rgba(0,255,255,0.1) 0%,transparent 60%); }
.portfolio-page-hero h1 { font-size:clamp(var(--fs-3xl),6vw,var(--fs-5xl)); font-weight:900; margin-bottom:var(--space-sm); }
.portfolio-page-hero p { font-size:var(--fs-md); color:var(--text-secondary); max-width:560px; margin:0 auto; }
.portfolio-layout { display:grid; grid-template-columns:220px 1fr; gap:var(--space-xl); align-items:start; padding:var(--space-2xl) 0; }
.portfolio-sidebar { position:sticky; top:calc(var(--navbar-height) + var(--space-lg)); }
.sidebar-title { font-family:var(--font-heading); font-size:var(--fs-xs); font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-md); }
.sidebar-filter { display:flex; align-items:center; gap:var(--space-sm); width:100%; padding:0.6rem 0.75rem; background:none; border:1px solid transparent; border-radius:var(--radius-md); font-family:var(--font-heading); font-weight:600; font-size:var(--fs-sm); color:var(--text-muted); cursor:pointer; text-align:left; transition:all var(--transition-fast); margin-bottom:4px; }
.portfolio-sidebar-divider { height:1px; background:var(--border-color); margin:var(--space-md) 0; }
.portfolio-sidebar-cta { padding:var(--space-md); background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); text-align:center; }
.portfolio-sidebar-cta-copy { font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:var(--space-sm); line-height:1.6; }
.portfolio-sidebar-cta-link { font-size:var(--fs-xs); padding:0.5rem 1rem; }
.portfolio-filters--start { justify-content:flex-start; margin-bottom:var(--space-lg); }
.portfolio-cta-block { padding:var(--space-2xl) 0; }
.portfolio-cta-copy { font-size:var(--fs-md); color:var(--text-secondary); margin-bottom:var(--space-lg); }
.sidebar-filter:hover { background:var(--bg-surface); color:var(--text-primary); border-color:var(--border-color); }
.sidebar-filter.active { background:rgba(0,255,255,0.08); color:var(--color-cyan); border-color:rgba(0,255,255,0.2); }
.sidebar-icon { font-size:1rem; }
.sidebar-count { margin-left:auto; font-size:var(--fs-xs); background:var(--bg-surface); padding:1px 6px; border-radius:var(--radius-full); }
.sidebar-filter.active .sidebar-count { background:rgba(0,255,255,0.15); }

/* ── LIGHTBOX PROYECTO ── */
.lightbox-project { background:var(--bg-card); border-radius:var(--radius-xl); max-width:900px; width:90vw; max-height:85vh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; }
.lightbox-project::-webkit-scrollbar { width:4px; }
.lightbox-project::-webkit-scrollbar-track { background:var(--bg-card); }
.lightbox-project::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:2px; }
.lightbox-img-col { background:var(--bg-dark); display:flex; align-items:center; justify-content:center; min-height:400px; border-radius:var(--radius-xl) 0 0 var(--radius-xl); overflow:hidden; }
.lightbox-img-col .portfolio-placeholder { width:100%; height:100%; min-height:400px; }
.lightbox-info-col { padding:var(--space-xl); display:flex; flex-direction:column; justify-content:center; }
.lightbox-cat-tag { margin-bottom:0; }
.lightbox-badges { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; margin-bottom:var(--space-sm); }
.lightbox-project-title { font-family:var(--font-heading); font-weight:900; font-size:var(--fs-xl); margin-bottom:var(--space-sm); line-height:1.2; }
.lightbox-project-desc { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.7; margin-bottom:var(--space-lg); }
.lightbox-project-client { font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:var(--space-sm); }
.lightbox-project-client strong { color:var(--text-secondary); }
.lightbox-tags { display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-bottom:var(--space-lg); }
.lightbox-tag { font-family:var(--font-heading); font-size:var(--fs-xs); padding:3px 10px; border-radius:var(--radius-full); background:var(--bg-surface); border:1px solid var(--border-color); color:var(--text-muted); }
.lightbox-nav-btns { display:flex; gap:var(--space-sm); margin-top:auto; }
.lightbox-info-col .btn.btn-primary { margin-bottom:var(--space-md); }
.lightbox-nav-btn { flex:1; padding:0.6rem; border-radius:var(--radius-md); background:var(--bg-surface); border:1px solid var(--border-color); color:var(--text-secondary); font-family:var(--font-heading); font-size:var(--fs-xs); font-weight:600; cursor:pointer; transition:all var(--transition-fast); text-align:center; }
.lightbox-nav-btn:hover { background:rgba(0,255,255,0.08); border-color:var(--color-cyan); color:var(--color-cyan); }

/* ── LIGHTBOX DRIVE GALLERY ── */
.lb-gallery { display:flex; flex-direction:column; width:100%; height:100%; }
.lb-gallery-main { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#000; min-height:280px; }
.lb-gallery-main img { width:100%; height:100%; object-fit:contain; display:block; }
.lb-gallery-main-iframe { width:100%; height:100%; border:none; }
.lb-gallery-main-image { width:100%; height:100%; object-fit:contain; display:block; }
.lb-gallery-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.65); border:1px solid rgba(255,255,255,0.25); color:#fff; border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; font-size:1.25rem; line-height:1; transition:background 0.2s,border-color 0.2s; }
.lb-gallery-btn:hover { background:rgba(0,255,255,0.3); border-color:var(--color-cyan); }
.lb-gallery-btn--prev { left:10px; }
.lb-gallery-btn--next { right:10px; }
.lb-gallery-counter { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.65); border-radius:12px; padding:2px 12px; font-size:11px; color:#ccc; font-family:var(--font-heading); pointer-events:none; }
.lb-thumbs { display:flex; gap:4px; padding:6px 8px; background:rgba(0,0,0,0.5); overflow-x:auto; flex-shrink:0; }
.lb-thumbs::-webkit-scrollbar { height:3px; }
.lb-thumbs::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:2px; }
.lb-thumb { width:52px; height:52px; object-fit:cover; border-radius:4px; cursor:pointer; opacity:0.45; transition:opacity 0.2s,border-color 0.2s; border:2px solid transparent; flex-shrink:0; }
.lb-thumb.active { opacity:1; border-color:var(--color-cyan); }
.lb-thumb:hover { opacity:0.8; }
.lb-thumb--video { width:52px; height:52px; border-radius:4px; background:rgba(128,0,255,0.25); border:2px solid transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; color:#bf80ff; flex-shrink:0; opacity:0.55; transition:opacity 0.2s,border-color 0.2s; }
.lb-thumb--video.active { opacity:1; border-color:var(--color-cyan); }
.lb-thumb--video:hover { opacity:0.85; }

.card-3d { transition:transform 0.2s ease, box-shadow 0.2s ease; transform-style:preserve-3d; will-change:transform; }

/* ── MODAL PROYECTO (iframe lightbox) ── */
.project-modal { position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,0.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; padding:var(--space-lg); animation:fadeIn var(--transition-base); }
.project-modal[hidden] { display:none; }
.project-modal-window { position:relative; width:min(1100px,92vw); height:min(800px,90vh); border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--border-hover); box-shadow:0 0 60px rgba(0,255,255,0.15),0 40px 80px rgba(0,0,0,0.6); background:var(--bg-dark); animation:modalSlideIn 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes modalSlideIn { from{opacity:0;transform:scale(0.93) translateY(24px);} to{opacity:1;transform:scale(1) translateY(0);} }
.project-modal-bar { position:absolute; top:0; left:0; right:0; height:48px; background:rgba(5,5,16,0.95); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-md); z-index:1; gap:var(--space-sm); }
.project-modal-bar-dots { display:flex; gap:6px; flex-shrink:0; }
.project-modal-bar-dots span { width:12px; height:12px; border-radius:50%; background:var(--bg-surface); border:1px solid var(--border-color); }
.project-modal-dot--pink { background: rgba(255, 0, 255, 0.4) !important; }
.project-modal-dot--cyan { background: rgba(0, 255, 255, 0.3) !important; }
.project-modal-dot--purple { background: rgba(128, 0, 255, 0.3) !important; }
.project-modal-title { font-family:var(--font-heading); font-size:var(--fs-xs); font-weight:600; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; text-align:center; }
.project-modal-close { width:32px; height:32px; border-radius:50%; background:rgba(255,0,255,0.1); border:1px solid rgba(255,0,255,0.3); color:var(--color-fucsia); font-size:0.875rem; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:all var(--transition-fast); }
.project-modal-close:hover { background:rgba(255,0,255,0.25); border-color:var(--color-fucsia); transform:scale(1.1) rotate(90deg); box-shadow:0 0 16px rgba(255,0,255,0.4); }
.project-modal-iframe { position:absolute; top:48px; left:0; width:100%; height:calc(100% - 48px); border:none; background:var(--bg-dark); transition:opacity var(--transition-base); }
.project-modal-loader { position:absolute; top:48px; left:0; width:100%; height:calc(100% - 48px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-md); background:var(--bg-dark); pointer-events:none; }
.project-modal-loader-ring { width:48px; height:48px; border:3px solid var(--border-color); border-top-color:var(--color-cyan); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.project-modal-loader p { font-family:var(--font-heading); font-size:var(--fs-sm); color:var(--text-muted); }
.btn-open-project { width:100%; justify-content:center; margin-bottom:var(--space-md); }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .portfolio-layout { grid-template-columns:1fr; }
  .portfolio-sidebar { position:static; display:flex; flex-wrap:wrap; gap:var(--space-xs); align-items:center; }
  .sidebar-title { width:100%; }
  .sidebar-filter { width:auto; }
  .lightbox-project { grid-template-columns:1fr; }
  .lightbox-img-col { border-radius:var(--radius-xl) var(--radius-xl) 0 0; min-height:280px; }
}
@media (max-width:768px) {
  :root { --navbar-height:64px; }
  .nav-menu { position:fixed; top:var(--navbar-height); left:0; right:0; background:rgba(5,5,16,0.97); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-bottom:1px solid var(--border-color); padding:var(--space-md); transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform var(--transition-base), opacity var(--transition-base); z-index:999; }
  .nav-menu.open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-list { flex-direction:column; gap:var(--space-xs); }
  .nav-link { display:block; padding:var(--space-sm) var(--space-md); font-size:var(--fs-base); }
  .hamburger { display:flex; }
  .nav-cta { display:none; }
  .lang-switch { margin-left: auto; }
  .lang-switch-menu { right: 0; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .cursor-dot, .cursor-ring { display:none; }
  body { cursor:auto; }
  a, button { cursor:pointer; }
  .section { padding:var(--space-2xl) 0; }
}
@media (max-width:480px) {
  .portfolio-grid, .portfolio-grid--full { grid-template-columns:1fr; }
  .container { padding:0 var(--space-sm); }
}