/* ═══════════════════════════════════════════════════
   styles.css
   Los colores, tamaños y fuentes se definen en
   config.js y se inyectan como CSS variables al init.
   Para cambiar el tema edita CONFIG en config.js.
═══════════════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* CSS custom properties — valores inyectados desde config.js via main.js */
:root {
  --color-bg:          #111318;
  --color-bg-surface:  #16191f;
  --color-bg-hover:    #1d2029;
  --color-bg-hover-2:    #1b1c20;
  --color-border:      #252830;
  --color-border-soft: #30353f;
  --color-text:        #f0f0f0;
  --color-text-muted:  #555b6a;
  --color-text-muted-2:  #7b7b7d;
  --color-text-soft:   #8892a4;
  --color-accent:      #4ade80;
  --color-accent-dark: #16a34a;
  --font-display: 'Raleway', sans-serif;
  --font-body:    'Inter', sans-serif;
  --radius:        16px;
  --radius-sm:     8px;
  --max-w:         1100px;
  --section-pad:   8rem 3rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html { scroll-behavior:smooth; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}
@media (hover:none) { body { cursor:auto; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CURSOR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#cur {
  position:fixed; z-index:9999; pointer-events:none;
  width:10px; height:10px;
  background:var(--color-accent); border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .2s, height .2s;
  mix-blend-mode:difference;
  isolation:isolate;
}
#cur.big { width:50px; height:50px; }
@media (hover:none) { #cur { display:none; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#loader {
  position:fixed; inset:0; background:var(--color-bg); z-index:8000;
  display:flex; align-items:center; justify-content:center;
}
.l-text {
  font-family:var(--font-display); font-size:1rem;
  font-weight:800; letter-spacing:.3em; text-transform:uppercase;
  color:var(--color-text-muted);
}
.l-text span { color:var(--color-accent); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAV
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 3rem;
  opacity:0;
}
.n-logo {
  font-family:var(--font-display); font-size:.9rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-text); text-decoration:none;
}
.n-center { display:flex; gap:2rem; list-style:none; align-items:center; }
.n-center a {
  font-size:.78rem; font-weight:400; letter-spacing:.06em;
  color:var(--color-text-soft); text-decoration:none;
  transition:color .2s; cursor:none;
}
.n-center a:hover { color:var(--color-text); }

.lang-toggle {
  display:flex; align-items:center;
  border:1px solid var(--color-border-soft);
  border-radius:100px; overflow:hidden;
  font-family:var(--font-display); font-size:.65rem; font-weight:700;
  letter-spacing:.1em;
}
.lang-btn {
  padding:.35rem .75rem; cursor:none;
  color:var(--color-text-muted);
  transition:background .2s, color .2s; user-select:none;
}
.lang-btn.active { background:var(--color-accent); color:var(--color-bg); }
.lang-sep { width:1px; background:var(--color-border-soft); align-self:stretch; }

.n-cta {
  font-family:var(--font-display); font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-bg); background:var(--color-accent);
  padding:.55rem 1.4rem; border-radius:100px;
  text-decoration:none; cursor:none; transition:opacity .2s;
}
.n-cta:hover { opacity:.85; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section {
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--section-pad);
  border-bottom:1px solid var(--color-border);
  position:relative; overflow:hidden;
}
.s-inner { max-width:var(--max-w); margin:0 auto; width:100%; }
.s-label {
  font-size:.7rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--color-text-muted);
  margin-bottom:1.5rem;
  display:flex; align-items:center; gap:.75rem;
}
.s-label::before {
  content:''; display:block; width:24px; height:1px;
  background:var(--color-text-muted);
}
.rv { opacity:0; transform:translateY(28px); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#hero { border-bottom:1px solid var(--color-border); }

.hero-bg {
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;
}
.hero-bg svg {
  position:absolute; right:-10%; top:50%;
  transform:translateY(-50%); opacity:.06; width:700px; height:700px;
}
.hero-bg-ring { fill:none; stroke:var(--color-accent); stroke-width:1; }
#hero::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(74,222,128,.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 15% 20%, rgba(74,222,128,.03) 0%, transparent 60%);
}
#hero .s-inner { position:relative; z-index:1; }

.hero-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:5rem;
}
.hero-tag {
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-text-muted); padding-top:.25rem;
}
.hero-status {
  display:flex; align-items:center; gap:.5rem;
  font-size:.72rem; color:var(--color-text-soft);
  border:1px solid var(--color-border); padding:.4rem .9rem; border-radius:100px;
}
.dot-g {
  width:6px; height:6px; border-radius:50%;
  background:var(--color-accent); flex-shrink:0;
  box-shadow:0 0 6px var(--color-accent);
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.hero-name {
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 7vw, 8rem);
  font-weight:800; line-height:1.05; letter-spacing:-.03em;
  color:var(--color-text);
}
.hero-name .ln { overflow:hidden; display:block; }
.hero-name .ln span { display:block; transform:translateY(110%); line-height:normal; }

.hero-tw-wrap { display:block; opacity:0; }
.hero-tw-static { color:var(--color-text); }
.hero-tw-dynamic {
  color:var(--color-accent);
  border-right:3px solid var(--color-accent);
  padding-right:2px;
  animation:caret .75s step-end infinite;
  white-space:nowrap;
}
@keyframes caret { 0%,100%{border-color:var(--color-accent)} 50%{border-color:transparent} }

.hero-bottom {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top:4rem; gap:2rem; flex-wrap:wrap;
}
.hero-desc {
  font-size:1rem; line-height:1.75; color:var(--color-text-soft);
  max-width:38ch; opacity:0; transform:translateY(16px);
}
.hero-actions { display:flex; gap:1rem; align-items:center; opacity:0; transform:translateY(16px); flex-wrap:wrap; }
.hl {
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-text-soft); text-decoration:none;
  border-bottom:1px solid var(--color-border); padding-bottom:.15rem;
  cursor:none; transition:color .2s, border-color .2s;
}
.hl:hover { color:var(--color-text); border-color:var(--color-text-soft); }
.hero-cta-mobile {
  display:none;
  font-family:var(--font-display); font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-bg); background:var(--color-accent);
  padding:.6rem 1.5rem; border-radius:100px;
  text-decoration:none; transition:opacity .2s;
}
.hero-cta-mobile:hover { opacity:.85; }

/* Glass cube */
#cube-wrap {
  position:absolute; right:6%; top:50%; transform:translateY(-50%);
  width:200px; height:200px; pointer-events:none; perspective:600px; z-index:2;
}
.cube {
  width:120px; height:120px;
  position:absolute; top:50%; left:50%;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(20deg) rotateY(30deg);
}
.face {
  position:absolute; width:120px; height:120px;
  background:rgba(74,222,128,.04);
  border:1px solid rgba(74,222,128,.2);
  border-radius:4px; backdrop-filter:blur(4px);
}
.face::before {
  content:''; position:absolute; inset:0; border-radius:4px;
  background:linear-gradient(135deg, rgba(255,255,255,.07) 0%, transparent 60%);
}
.face-front  { transform:translateZ(60px); }
.face-back   { transform:translateZ(-60px) rotateY(180deg); }
.face-left   { transform:translateX(-60px) rotateY(-90deg); }
.face-right  { transform:translateX(60px)  rotateY(90deg); }
.face-top    { transform:translateY(-60px) rotateX(90deg); }
.face-bottom { transform:translateY(60px)  rotateX(-90deg); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SERVICES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--color-border);
  margin-top:4rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius); overflow:hidden;
}
.services-grid-row2 {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--color-border);
  border:1px solid var(--color-border); border-top:none;
  overflow:hidden; border-radius:0 0 var(--radius) var(--radius);
}
.svc {
  background:var(--color-bg-surface); padding:2.5rem 2rem;
  transition:background .3s;
}
.svc:hover { background:var(--color-bg-hover-2); }
.svc-num {
  font-family:var(--font-display); font-size:.68rem; font-weight:700;
  letter-spacing:.15em; color:var(--color-text-muted); margin-bottom:2rem;
}
.svc-name {
  font-family:var(--font-display); font-size:1.25rem; font-weight:700;
  margin-bottom:.75rem; line-height:1.25;
}
.svc-desc { font-size:.82rem; line-height:1.7; color:var(--color-text-soft); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EXPERIENCE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.exp-list { margin-top:4rem; }
.exp-row {
  display:grid; grid-template-columns:1fr auto;
  align-items:start; gap:2rem; padding:2rem .9rem;;
  border-top:1px solid var(--color-border);
  transition:border-color .2s; cursor:default;
}
.exp-row:last-child { border-bottom:1px solid var(--color-border); }
.exp-row:hover { border-top-color:var(--color-text-soft); background-color: var(--color-bg-hover-2); }
.exp-role {
  font-family:var(--font-display);
  font-size:clamp(1rem,2.5vw,1.5rem);
  font-weight:700; margin-bottom:.3rem; transition:color .2s;
}
.exp-row:hover .exp-role { color:var(--color-accent); }
.exp-co { font-size:.78rem; color:var(--color-text-soft); letter-spacing:.06em; }
.exp-desc { color: var(--color-text-soft); margin:1rem 0; font-size:.88rem;}
.exp-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.75rem; }
.etag {
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .55rem; border-radius:3px;
  border:1px solid var(--color-border); color:var(--color-text-muted-2);
}
.exp-period {
  font-size:.72rem; color:var(--color-text-muted);
  letter-spacing:.06em; white-space:nowrap; padding-top:.3rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROJECTS CAROUSEL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#projects { min-height:auto; padding:6rem 3rem; }
.carousel-outer {
  margin-top:3rem; overflow:hidden; cursor:grab;
  padding-right:2rem; margin-right:-2rem;
}
.carousel-outer:active { cursor:grabbing; }
.carousel-track { display:flex; gap:1.2rem; width:max-content; will-change:transform; }
.proj-card {
  width:320px; height:380px; flex-shrink:0;
  border-radius:var(--radius); position:relative; overflow:hidden;
  border:1px solid var(--color-border);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.8rem; transition:transform .3s, box-shadow .3s;
  cursor:pointer;
}
.proj-card:hover { transform:translateY(-6px); box-shadow:0 24px 48px rgba(0,0,0,.4); }
.proj-card::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:32px 32px;
}
.proj-card::after {
  content:''; position:absolute;
  width:200px; height:200px; border-radius:50%;
  top:-60px; right:-60px;
  background:radial-gradient(circle,rgba(74,222,128,.12),transparent 70%);
  pointer-events:none;
}
/* Background images set inline by JS from config */

.proj-hint {
  position:absolute; bottom:1.8rem; right:1.8rem; z-index:2;
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.3);
  display:flex; align-items:center; gap:.35rem;
  opacity:0; transform:translateY(4px);
  transition:opacity .25s, transform .25s; pointer-events:none;
}
.proj-hint::before { content:''; display:block; width:14px; height:1px; background:rgba(255,255,255,.3); }
.proj-card:hover .proj-hint { opacity:1; transform:translateY(0); }
.proj-subtitle { font-size:1rem; line-height:1.6; color:var(--color-text-soft); margin-top:.5rem; }

.proj-card-inner { position:relative; z-index:1; }
.proj-tag {
  display:inline-block;
  font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.25);
  color:var(--color-accent); padding:.2rem .6rem; border-radius:100px;
  margin-bottom:1rem;
}
.proj-name {
  font-family:var(--font-display); font-size:1.25rem; font-weight:800;
  line-height:1.2; margin-bottom:.6rem; color:#fff;
}
.proj-desc { font-size:.78rem; line-height:1.6; color:rgba(255,255,255,.55); }
.proj-stack { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:1rem; }
.proj-stack span {
  font-size:.58rem; letter-spacing:.06em;
  color:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.1);
  padding:.15rem .45rem; border-radius:3px;
}

.carousel-nav { display:flex; gap:.75rem; margin-top:1.5rem; justify-content:flex-end; }
.c-btn {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--color-border-soft);
  background:transparent; cursor:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--color-text-soft); font-size:.9rem;
  transition:border-color .2s, color .2s, background .2s;
}
.c-btn:hover { border-color:var(--color-accent); color:var(--color-accent); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SKILLS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.skills-split {
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; margin-top:4rem; align-items:start;
}
.skill-group { margin-bottom:2.5rem; }
.sg-title {
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--color-text); margin-bottom:1rem; font-weight:600;
}
.sg-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.sc {
  font-size:.75rem; color:var(--color-text-muted-2);
  border:1px solid var(--color-border);
  padding:.35rem .8rem; border-radius:6px;
  transition:border-color .2s, color .2s; cursor:default;
}
.sc:hover { border-color:var(--color-accent); color:var(--color-accent); }
.achievement {
  padding:1.5rem; border:1px solid var(--color-border);
  border-radius:var(--radius); margin-bottom:.75rem; transition:border-color .2s;
}
.achievement:hover { border-color:var(--color-text-soft); }
.ach-icon { font-size:1.1rem; margin-bottom:.6rem; }
.ach-text { font-size:.82rem; line-height:1.6; color:var(--color-text-soft); }
.ach-text strong { color:var(--color-text); font-weight:500; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTACT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#contact { min-height:auto; padding:8rem 3rem; border-bottom:none; }
.contact-big {
  font-family:var(--font-display);
  font-size:clamp(2.5rem,7vw,7rem);
  font-weight:800; line-height:.95; letter-spacing:-.03em;
}
.contact-big .ln { overflow:hidden; display:block; }
.contact-big .ln span { display:block; transform:translateY(110%); line-height:normal; }
.contact-big em { font-style:normal; color:var(--color-accent); }
.contact-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:4rem; flex-wrap:wrap; gap:2rem;
}
.contact-email {
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1rem,2vw,1.3rem);
  color:var(--color-text-soft); text-decoration:none;
  border-bottom:1px solid var(--color-border); padding-bottom:.25rem;
  cursor:none; transition:color .2s, border-color .2s;
}
.contact-email:hover { color:var(--color-text); border-color:var(--color-text); }
.contact-actions { display:flex; gap:1rem; align-items:center; }
.btn-main {
  font-family:var(--font-display); font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  background:var(--color-accent); color:var(--color-bg);
  padding:.75rem 2rem; border-radius:100px;
  text-decoration:none; cursor:none; transition:opacity .2s;
}
.btn-main:hover { opacity:.85; }
.btn-ghost {
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-text-soft); text-decoration:none; cursor:none; transition:color .2s;
}
.btn-ghost:hover { color:var(--color-text); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
footer {
  padding:1.5rem 3rem;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--color-border);
}
footer p { font-size:.7rem; color:var(--color-text-muted); letter-spacing:.06em; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROJECT MODAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(5,8,15,.85); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem; opacity:0; pointer-events:none;
}
#modal-overlay.is-open { pointer-events:all; }
#modal-box {
  background:var(--color-bg-surface);
  border:1px solid var(--color-border-soft);
  border-radius:var(--radius);
  width:100%; max-width:680px; max-height:90vh;
  overflow-y:auto; position:relative;
  opacity:0; transform:translateY(32px) scale(.97);
  scrollbar-width:thin; scrollbar-color:var(--color-border-soft) transparent;
}
#modal-box::-webkit-scrollbar { width:4px; }
#modal-box::-webkit-scrollbar-thumb { background:var(--color-border-soft); border-radius:2px; }
.modal-header {
  height:180px; position:relative; overflow:hidden; flex-shrink:0;
  border-radius:var(--radius) var(--radius) 0 0;
  display:flex; align-items:flex-end; padding:1.8rem;
}
.modal-header::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:32px 32px;
}
.modal-header::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,8,15,.7) 0%, transparent 60%);
}
.modal-header-content { position:relative; z-index:1; }
.modal-tag {
  display:inline-block;
  font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.3);
  color:var(--color-accent); padding:.2rem .6rem; border-radius:100px; margin-bottom:.6rem;
}
.modal-title {
  font-family:var(--font-display); font-size:clamp(1.4rem,4vw,1.9rem);
  font-weight:800; line-height:1.1; color:#fff;
}
.modal-close {
  position:absolute; top:1rem; right:1rem; z-index:10;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:none; transition:background .2s, color .2s;
}
.modal-close:hover { background:rgba(255,255,255,.15); color:#fff; }
.modal-body { padding:2rem; }
.modal-section { margin-bottom:2rem; }
.modal-section:last-child { margin-bottom:0; }
.modal-section-label {
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--color-text-muted); margin-bottom:.75rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--color-border);
}
.modal-text { font-size:.88rem; line-height:1.75; color:var(--color-text-soft); }
.modal-highlights { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.modal-highlights li {
  font-size:.85rem; line-height:1.65; color:var(--color-text-soft);
  display:flex; gap:.75rem;
}
.modal-highlights li::before { content:'→'; color:var(--color-accent); flex-shrink:0; font-size:.8rem; margin-top:.05em; }
.modal-stack { display:flex; flex-wrap:wrap; gap:.4rem; }
.modal-chip {
  font-size:.72rem; color:var(--color-text-soft);
  border:1px solid var(--color-border); padding:.3rem .75rem; border-radius:6px;
  transition:border-color .2s, color .2s;
}
.modal-chip:hover { border-color:var(--color-accent); color:var(--color-accent); }
.modal-meta { display:flex; gap:2rem; flex-wrap:wrap; margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--color-border); }
.modal-meta-key { font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:.2rem; }
.modal-meta-val { font-family:var(--font-display); font-size:.9rem; font-weight:600; color:var(--color-text); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PERSONAL PROJECTS — SUBSECCIÓN + MOSAICO
   Vive dentro de #projects, debajo del carrusel.
   Los tiles se arman en main.js desde personal-projects.json;
   el tamaño de cada uno (normal|wide|tall|big) viene del propio
   JSON o de CONFIG.personalProjects.sizePattern (cíclico).
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pm-subsection { margin-top:5rem; padding-top:4rem; border-top:1px solid var(--color-border); }
.pm-eyebrow {
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-text-muted); margin-bottom:.75rem;
}
.pm-heading {
  font-family:var(--font-display); font-size:clamp(1.5rem,3.2vw,2.2rem);
  font-weight:800; letter-spacing:-.02em; line-height:1.15; margin-bottom:.6rem;
}
.pm-subtitle { font-size:.95rem; line-height:1.6; color:var(--color-text-soft); max-width:640px; }

.pm-mosaic {
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:150px; grid-auto-flow:dense; gap:1rem; margin-top:3rem;
}
.pm-item {
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--color-border); cursor:pointer;
  grid-column:span 1; grid-row:span 1;
  background-size:cover; background-position:center;
  transform-style:preserve-3d; perspective:600px;
}
.pm-item[data-size="wide"] { grid-column:span 2; }
.pm-item[data-size="tall"] { grid-row:span 2; }
.pm-item[data-size="big"]  { grid-column:span 2; grid-row:span 2; }
.pm-item::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(5,8,15,.92) 0%, rgba(5,8,15,.35) 55%, rgba(5,8,15,.15) 100%);
  transition:opacity .3s;
}
.pm-item::after {
  content:''; position:absolute; inset:0; z-index:1; opacity:0;
  background:radial-gradient(circle at 30% 20%, rgba(74,222,128,.18), transparent 60%);
  transition:opacity .35s;
}
.pm-item:hover::after { opacity:1; }
.pm-item .pm-inner {
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; padding:1.1rem 1.2rem;
}
.pm-year {
  position:absolute; top:1rem; left:1.1rem; z-index:2;
  font-size:.6rem; letter-spacing:.12em; color:rgba(255,255,255,.55);
}
.pm-name {
  font-family:var(--font-display); font-weight:800; color:#fff;
  font-size:clamp(.95rem,1.4vw,1.15rem); line-height:1.2; margin-bottom:.3rem;
}
.pm-tagline {
  font-size:.72rem; line-height:1.5; color:rgba(255,255,255,.6);
  max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease;
}
.pm-item:hover .pm-tagline { max-height:3.5em; opacity:1; }
.pm-hint {
  position:absolute; bottom:1rem; right:1.1rem; z-index:2;
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.35);
  opacity:0; transform:translateY(4px); transition:.25s;
}
.pm-item:hover .pm-hint { opacity:1; transform:translateY(0); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PERSONAL PROJECT MODAL
   Diseño propio (distinto al modal-overlay de arriba),
   mismos tokens de color/tipografía del sitio.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#pm-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(5,8,15,.85); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem; opacity:0; pointer-events:none;
}
#pm-overlay.is-open { pointer-events:all; }
#pm-box {
  background:var(--color-bg-surface); border:1px solid var(--color-border-soft);
  border-radius:var(--radius); width:100%; max-width:920px; max-height:88vh;
  overflow-y:auto; position:relative; opacity:0; transform:translateY(24px) scale(.97);
  scrollbar-width:thin; scrollbar-color:var(--color-border-soft) transparent;
}
#pm-box::-webkit-scrollbar { width:4px; }
#pm-box::-webkit-scrollbar-thumb { background:var(--color-border-soft); border-radius:2px; }
.pm-close {
  position:absolute; top:1rem; right:1rem; z-index:10;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7); font-size:1rem; cursor:none;
  display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s;
}
.pm-close:hover { background:rgba(255,255,255,.15); color:#fff; }

.pm-grid { display:grid; grid-template-columns:280px 1fr; min-height:420px; }
.pm-side {
  background:
    radial-gradient(circle at 20% 0%, rgba(74,222,128,.14), transparent 55%),
    var(--color-bg-hover);
  border-right:1px solid var(--color-border);
  padding:2.2rem 1.8rem;
  /* Se estira a la misma altura que #pm-main (columna derecha) para
     que el fondo/borde no se vea cortado cuando la galería es larga. */
}
.pm-side-sticky {
  /* El contenido real vive acá, pegado arriba y fijo (sticky) mientras
     se hace scroll — así los botones Code/Demo quedan siempre a la
     vista, sin importar qué tan alto sea .pm-side por fuera. */
  display:flex; flex-direction:column;
  position:sticky; top:2.2rem;
}
.pm-index {
  font-family:var(--font-display); font-weight:900; font-size:3.2rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(74,222,128,.55); letter-spacing:-.02em;
  margin-bottom:1rem;
}
.pm-kicker {
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-accent); margin-bottom:.6rem;
}
.pm-title {
  font-family:var(--font-display); font-weight:800; font-size:1.5rem; line-height:1.15;
  color:#fff; margin-bottom:1.4rem;
}
.pm-meta { display:flex; flex-direction:column; gap:.9rem; }
.pm-meta-key { font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:.15rem; }
.pm-meta-val { font-family:var(--font-display); font-size:.85rem; font-weight:600; color:var(--color-text); }
.pm-links { display:flex; gap:.6rem; margin-top:1.6rem; flex-wrap:wrap; }
.pm-link {
  font-size:.7rem; font-weight:600; letter-spacing:.04em; text-decoration:none;
  padding:.55rem 1rem; border-radius:100px; transition:.2s; display:inline-flex; align-items:center; gap:.4rem;
  cursor:none;
}
.pm-link.primary { background:var(--color-accent); color:#0b0d10; }
.pm-link.primary:hover { opacity:.85; }
.pm-link.ghost { border:1px solid var(--color-border-soft); color:var(--color-text-soft); }
.pm-link.ghost:hover { border-color:var(--color-accent); color:var(--color-accent); }
.pm-link-icon { flex-shrink:0; }

.pm-main { padding:2.2rem 2rem; }
.pm-desc { font-size:.88rem; line-height:1.75; color:var(--color-text-soft); margin:0 0 1.8rem; }
.pm-section-label {
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--color-text-muted);
  margin-bottom:.9rem; padding-bottom:.5rem; border-bottom:1px solid var(--color-border);
}
.pm-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin-bottom:1.8rem; }
.pm-gitem { border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--color-border); cursor:zoom-in; position:relative; }
.pm-gitem img { width:100%; height:120px; object-fit:cover; display:block; transition:transform .35s ease; }
.pm-gitem:hover img { transform:scale(1.06); }
.pm-gitem::after {
  content:'⤢'; position:absolute; top:.5rem; right:.5rem; z-index:2;
  width:24px; height:24px; border-radius:50%;
  background:rgba(5,8,15,.55); color:#fff; font-size:.7rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s; pointer-events:none;
}
.pm-gitem:hover::after { opacity:1; }
.pm-gcap { font-size:.68rem; color:var(--color-text-soft); padding:.5rem .6rem; background:var(--color-bg); }
.pm-stack { display:flex; flex-wrap:wrap; gap:.4rem; }
.pm-chip {
  font-size:.72rem; color:var(--color-text-soft); border:1px solid var(--color-border);
  padding:.3rem .75rem; border-radius:6px; transition:.2s;
}
.pm-chip:hover { border-color:var(--color-accent); color:var(--color-accent); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PERSONAL PROJECT LIGHTBOX
   Visor de imagen de la galería, por encima del modal
   (z-index 2500 > 2000) para poder verla en grande.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#pm-lightbox {
  position:fixed; inset:0; z-index:2500;
  background:rgba(5,8,15,.94); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:3rem 2rem; opacity:0; pointer-events:none;
}
#pm-lightbox.is-open { pointer-events:all; }
.pm-lightbox-img {
  max-width:90vw; max-height:78vh; object-fit:contain;
  border-radius:var(--radius-sm); box-shadow:0 40px 90px rgba(0,0,0,.55);
  opacity:0; transform:scale(.96); cursor:default;
}
.pm-lightbox-loader {
  position:absolute; top:50%; left:50%; z-index:2505;
  width:52px; height:52px; margin:-26px 0 0 -26px;
  display:grid; place-items:center;
  opacity:0; pointer-events:none;
  transform:scale(.92);
  transition:opacity .2s ease, transform .2s ease;
}
.pm-lightbox-loader::before {
  content:'';
  width:100%;
  height:100%;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.14);
  border-top-color:var(--color-accent);
  animation:pmSpin .8s linear infinite;
}
#pm-lightbox.is-loading .pm-lightbox-loader {
  opacity:1;
  transform:scale(1);
}

@keyframes pmSpin {
  to { transform:rotate(360deg); }
}
.pm-lightbox-cap {
  position:absolute; bottom:1.6rem; left:0; right:0; z-index:1;
  text-align:center; font-size:.8rem; color:var(--color-text-soft);
}
.pm-lightbox-actions { position:fixed; top:1.2rem; right:1.2rem; z-index:2510; display:flex; gap:.6rem; }
.pm-lightbox-actions .pm-close { position:static; }
.pm-lightbox-newtab {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75); font-size:.95rem; text-decoration:none;
  display:flex; align-items:center; justify-content:center; transition:.2s; cursor:none;
}
.pm-lightbox-newtab:hover { background:rgba(255,255,255,.15); color:var(--color-accent); }

/* Flechas prev/next del lightbox — navegan la galería del proyecto
   abierto sin cerrar/reabrir. Se ocultan solas si hay 1 sola imagen. */
.pm-lightbox-nav {
  position:fixed; top:50%; transform:translateY(-50%); z-index:2510;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.8); font-size:1rem; cursor:none;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.pm-lightbox-nav:hover { background:rgba(255,255,255,.15); color:var(--color-accent); }
.pm-lightbox-nav.prev { left:1.2rem; }
.pm-lightbox-nav.next { right:1.2rem; }
.pm-lightbox-nav.is-hidden { display:none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width:768px) {
  body { cursor:auto; }
  #cur { display:none; }
  .n-cta { display:none; }
  .hero-cta-mobile { display:inline-flex; align-items:center; gap:.5rem; }
  nav { padding:1.2rem 1.4rem; }
  .n-center li.nav-link { display:none; }
  section { padding:6rem 1.4rem; }
  #projects, #contact { padding:5rem 1.4rem; }
  .hero-name { font-size:clamp(2.2rem, 8.5vw, 4rem); line-height:1.08; }
  .hero-tw-dynamic { border-right-width:2px; }
  .hero-top { flex-direction:column; gap:1.2rem; }
  .hero-bottom { flex-direction:column; align-items:flex-start; }
  .hero-actions { flex-direction:column; align-items:flex-start; gap:.75rem; }
  #cube-wrap { display:none; }
  .services-grid { grid-template-columns:1fr; }
  .services-grid-row2 { grid-template-columns:1fr; }
  .exp-row { grid-template-columns:1fr; gap:.5rem; }
  .exp-period { padding-top:0; }
  .skills-split { grid-template-columns:1fr; gap:3rem; }
  .proj-card { width:280px; height:340px; }
  .contact-row { flex-direction:column; align-items:flex-start; }
  footer { flex-direction:column; gap:.5rem; text-align:center; }
  #modal-overlay { padding:.75rem; align-items:flex-end; }
  #modal-box { max-height:88vh; border-radius:var(--radius) var(--radius) 0 0; }
  .modal-header { height:140px; }
  .modal-body { padding:1.4rem; }
  .modal-meta { gap:1.2rem; }

  .pm-subsection { margin-top:3.5rem; padding-top:3rem; }
  .pm-mosaic { grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .pm-item[data-size="wide"], .pm-item[data-size="big"] { grid-column:span 2; }
  #pm-overlay { align-items:flex-end; padding:.75rem; }
  #pm-box { max-height:92vh; border-radius:var(--radius) var(--radius) 0 0; }
  .pm-grid { grid-template-columns:1fr; }
  .pm-side { border-right:none; border-bottom:1px solid var(--color-border); }
  .pm-side-sticky { position:static; }
  .pm-gallery { grid-template-columns:1fr 1fr; }
  #pm-lightbox { padding:1.2rem; }
  .pm-lightbox-img { max-height:70vh; }
  .pm-lightbox-nav { width:36px; height:36px; font-size:.85rem; }
  .pm-lightbox-nav.prev { left:.6rem; }
  .pm-lightbox-nav.next { right:.6rem; }
}
@media (max-width:480px) {
  .lang-toggle { font-size:.6rem; }
  .proj-card { width:260px; height:320px; }
}