@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap');
@font-face {
  font-family: 'Aloevera';
  src: url('../assets/fonts/AloeveraDisplay-Bold.woff2') format('woff2'),
       url('../assets/fonts/AloeveraDisplay-Bold.woff') format('woff'),
       url('../assets/fonts/AloeveraDisplay-Regular.woff') format('woff'),
       url('../assets/fonts/AloeveraDisplay-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#ffffff;--bg2:#f7f7f5;--bg3:#f0f0ec;
  --txt:#111111;--txt2:#555555;--txt3:#999999;
  --teal:#3a8f8c;--teal-bg:#e6f4f3;
  --border:#e0e0e0;--border2:#cccccc;
  --card:#ffffff;
}
body.dark{
  --bg:#0e0e0e;--bg2:#161616;--bg3:#1e1e1e;
  --txt:#f0f0f0;--txt2:#a0a0a0;--txt3:#555555;
  --teal:#4db3af;--teal-bg:#0f2928;
  --border:#2a2a2a;--border2:#3a3a3a;
  --card:#161616;
}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--txt);overflow-x:hidden;cursor:none;transition:background .4s,color .4s;}
#cur{position:fixed;pointer-events:none;z-index:9999;mix-blend-mode:difference;}
#cur-inner{width:12px;height:12px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:width .15s,height .15s;}
body.pulling #cur-inner{width:36px;height:36px;}

nav{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 2.5rem;position:fixed;top:0;width:100%;z-index:300;backdrop-filter:blur(12px);background:rgba(255,255,255,0.01);border-bottom:.5px solid transparent;transition:border-color .3s;}
body.dark nav{background:rgba(14,14,14,0.01);}
nav ul{display:flex;gap:1.5rem;list-style:none;align-items:center;}
nav a{font-size:12px;color:var(--txt);text-decoration:none;letter-spacing:.12em;text-transform:uppercase;opacity:.5;transition:opacity .2s;}
nav a:hover{opacity:1;}
.nav-btn{background:none;border:.5px solid var(--border2);color:var(--txt);font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .7rem;cursor:pointer;transition:all .2s;opacity:.7;}
.nav-btn:hover{opacity:1;background:var(--bg2);}

#sticky-wrap{height:500vh;position:relative;}
#sticky-scene{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg);transition:background .4s;}
canvas#c{position:absolute;inset:0;width:100%;height:100%;}

.hero-divider{position:absolute;bottom:0;left:0;right:0;height:5px;background:var(--teal);z-index:2;}
.hero-divider-line{position:absolute;bottom:5px;left:0;right:0;height:.5px;background:var(--border);}

#ui{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:2.5rem;z-index:2;}
#challenge-box{text-align:center;margin-bottom:.8rem;transition:opacity .4s;}
#challenge-text{font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt2);margin-bottom:.6rem;}
#progress-row{display:flex;align-items:center;justify-content:center;gap:.5rem;}
.prog-dot{width:12px;height:13px;border-radius:50%;border:1.5px solid var(--border2);transition:all .4s;}
.prog-dot.done-b{background:var(--txt);border-color:var(--txt);}
.prog-dot.done-t{background:var(--teal);border-color:var(--teal);}
#hint-box{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);margin-top:.5rem;}

#reward-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .6s;background:rgba(255,255,255,.92);z-index:10;}
body.dark #reward-overlay{background:rgba(14,14,14,.92);}
#reward-overlay.show{opacity:1;pointer-events:all;}
#reward-card{text-align:center;padding:2.5rem 3rem;border:.5px solid var(--border);background:var(--card);max-width:400px;position:relative;transition:background .4s,border-color .4s;}
#reward-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--teal);}
.rew-pre{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:1.2rem;}
.rew-title{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:.7rem;color:var(--txt);}
.rew-desc{font-size:.82rem;color:var(--txt2);line-height:1.75;margin-bottom:1.5rem;}
.rew-code-wrap{background:var(--bg2);border:.5px dashed var(--border2);padding:.9rem 1.4rem;margin-bottom:1.5rem;cursor:pointer;transition:background .2s;}
.rew-code-wrap:hover{background:var(--bg3);}
.rew-code{font-size:1rem;font-weight:700;letter-spacing:.15em;color:var(--txt);}
.rew-hint-copy{font-size:9px;color:var(--txt3);letter-spacing:.08em;text-transform:uppercase;margin-top:.3rem;}
.rew-copied{font-size:9px;color:var(--teal);display:none;margin-top:.3rem;letter-spacing:.08em;text-transform:uppercase;}
.rew-btns{display:flex;gap:.5rem;justify-content:center;}
.rew-btn{padding:.75rem 1.6rem;background:var(--txt);color:var(--bg);font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:none;transition:opacity .2s;}
.rew-btn:hover{opacity:.8;}
.rew-btn-alt{padding:.75rem 1.2rem;background:transparent;color:var(--txt2);font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:.5px solid var(--border);transition:all .2s;}
.rew-btn-alt:hover{border-color:var(--border2);color:var(--txt);}

#skill-flash{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s;
  max-width: 480px;
  width: 90%;
  padding: 2rem 2.5rem;
  background: var(--bg);
  border: .5px solid var(--border);
  box-shadow: 0 0 0 1px var(--teal) inset;
}
body.dark #skill-flash { background: var(--bg2); }
#skill-flash.show{opacity:1;}
 
.sf-title {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--txt);
  margin-bottom: .5rem;
  line-height: 1.2;
}
.sf-sub {
  font-size: .82rem;
  color: var(--txt2);
  line-height: 1.65;
}
#skill-flash .sf-label{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:500;}
#skill-flash .sf-word{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;letter-spacing:-.02em;margin-top:.3rem;color:var(--txt);}
#skill-flash.show{opacity:1;}

#after{background:var(--bg);transition:background .4s;}

.section{padding:5rem 2.5rem;}
.sec-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem;font-weight:500;}
h2{font-size:1.9rem;font-weight:300;letter-spacing:-.02em;line-height:1.25;color:var(--txt);}

#about-skills{padding:5rem 2.5rem;background:var(--bg2);transition:background .4s;}
.about-intro{margin-bottom:3rem;}
.about-intro p{font-size:.95rem;color:var(--txt2);line-height:1.85;margin-top:1rem;max-width:680px;text-align: justify;}
.about-intro p strong{color:var(--txt);font-weight:500;}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);}
.skill-card{background:var(--card);padding:1.6rem 1.4rem;position:relative;overflow:hidden;transition:background .3s;}
.skill-card:hover{background:var(--txt);}
.skill-card:hover .sc-name{color:var(--bg);}
.skill-card:hover .sc-disc{color:var(--txt3);}
.skill-card:hover .sc-pct{color:var(--teal);}
.skill-card:hover .sc-track{background:rgba(255,255,255,.1);}
.skill-card:hover .sc-fill{background:var(--teal);}
.skill-card:hover .sc-num{color:#444;}
.sc-num{font-size:10px;color:var(--border2);letter-spacing:.1em;margin-bottom:1rem;display:block;transition:color .3s;}
.sc-name{font-size:.9rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.25rem;color:var(--txt);transition:color .3s;}
.sc-disc{font-size:.73rem;color:var(--txt3);line-height:1.55;margin-bottom:1rem;transition:color .3s;}
.sc-track{height:1.5px;background:var(--border);overflow:hidden;margin-bottom:.4rem;transition:background .3s;}
.sc-fill{height:100%;background:var(--txt);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.16,1,.3,1),background .3s;}
.sc-fill.vis{transform:scaleX(1);}
.sc-pct{font-size:11px;color:var(--txt3);font-weight:500;transition:color .3s;}

#work-sec{background:#0a0a0a;padding:5rem 2.5rem;transition:background .4s;}
.wlabel{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:1.2rem;font-weight:500;}
h2.wh{color:#f0f0f0;}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#1a1a1a;margin-top:3rem;}
.pgrid a {text-decoration: none;}
.pc{background:#111111;padding:2rem 1.5rem;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;position:relative;overflow:hidden;transition:background .4s;}
.pc-cover{position:absolute;inset:0;background:var(--teal);transform:scaleY(0);transform-origin:bottom;transition:transform .4s cubic-bezier(.16,1,.3,1);}
.pc:hover .pc-cover{transform:scaleY(1);}
.pc-num{font-size:10px;color:#444;letter-spacing:.1em;position:relative;z-index:1;}
.pc-title{font-size:1rem;font-weight:700;color:#f0f0f0;margin:1rem 0 .4rem;text-transform:uppercase;position:relative;z-index:1;transition:color .3s;}
.pc:hover .pc-title{color:#fff;}
.pc-tag{display:flex;gap:.4rem;flex-wrap:wrap;position:relative;z-index:1;}
.pc-tag span{font-size:10px;border:.5px solid #2a2a2a;padding:3px 8px;border-radius:20px;color:#666;transition:all .3s;}
.pc:hover .pc-tag span{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.7);}

#contact-sec{padding:7rem 2.5rem;text-align:center;position:relative;overflow:hidden;background:var(--bg);transition:background .4s;}
.contact-geo{position:absolute;inset:0;pointer-events:none;}
.cpre{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem;font-weight:500;position:relative;z-index:1;}
.ch{font-size:clamp(2.5rem,6vw,5rem);font-weight:300;letter-spacing:-.03em;line-height:1.05;position:relative;z-index:1;color:var(--txt);}
.ch strong{font-weight:700;}
.cdesc{font-size:.9rem;color:var(--txt2);margin:1.5rem auto;max-width:300px;line-height:1.8;position:relative;z-index:1;}
.cta{display:inline-flex;align-items:center;gap:.7rem;margin-top:2rem;padding:.9rem 2rem;background:var(--teal);color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:transform .2s,background .2s;position:relative;z-index:1;}
.cta:hover{transform:scale(1.03);background:#2d7370;}

/* ── MANIFIESTO ─────────────────────────────────────────────── */
#manifesto-sec {
  position: relative;
  height: 100vh;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
 
canvas#mcanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
 
#manifesto-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
}
 
.m-label {
  display: block;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 500;
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s ease;
}
 
.m-line {
  font-family: 'Aloevera', 'DM Sans', sans-serif;
  font-size: clamp(1.8rem, 5vw, 4rem);
  font-weight: 700;
  color: #f0f0f0;
  line-height: 1.15;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s ease;
}
 
#m-line2 {
  color: var(--teal);
  transition-delay: .25s;
}
 
/* estado visible — añadido por JS al entrar en viewport */
#manifesto-sec.m-visible .m-label {
  opacity: 1;
  transform: translateY(0);
}
#manifesto-sec.m-visible .m-line {
  opacity: 1;
  transform: translateY(0);
}

/* ── NAV ADAPTATIVO ─────────────────────────────────────────── */
nav.nav-light a,
nav.nav-light .nav-btn {
  color: #f0f0f0;
  font-size: 12px;
}

nav.nav-light svg rect,
nav.nav-light svg circle,
nav.nav-light svg polygon {
  fill: #f0f0f0;
}
nav.nav-light svg circle[fill="none"] {
  fill: none;
  stroke: #f0f0f0;
}
nav.nav-light .nav-logo img {
  filter: invert(1);
}
body.dark nav .nav-logo img {
  filter: invert(1);
}

nav.nav-light .nav-btn {
  border-color: rgba(240,240,240,.3);
}

nav.nav-light .nav-btn:hover {
  background: rgba(240,240,240,.1);
}

nav.nav-link{
  font-size: 12px;
}

#welcome-box {
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  pointer-events: none;
  transition: opacity .8s ease;
}
#welcome-box.hidden { opacity: 0; }
#welcome-line1 {
  font-size: 24px;
  font-weight: 500;
  color: var(--txt);
  letter-spacing: .04em;
}
#welcome-line2 {
  font-size: 18px;
  color: var(--txt3);
  letter-spacing: .1em;
}

/* ── DESKTOP: tamaño base mejorado ──────────────────────────── */
.sc-disc { font-size: .82rem; }        /* era .73rem */
.sc-pct  { font-size: 12px; }         /* era 11px */
.sc-num  { font-size: 11px; }         /* era 10px */
.pc-tag span { font-size: 11px; }     /* era 10px */
.pc-num  { font-size: 11px; }         /* era 10px */
.proj-num, .proj-category, .proj-year { font-size: 11px; } /* era 10px */
.spec-label { font-size: 11px; }      /* era 10px */
.spec-val   { font-size: 1rem; }      /* era .9rem */
.pnb-label  { font-size: 11px; }      /* era 10px */
.pnb-title  { font-size: 1rem; }      /* era .95rem */

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {

  body { cursor: auto; }

  /* NAV */
  nav { padding: .9rem 1.2rem; }
  nav ul { gap: .7rem; }
  nav ul li:has(.nav-link) { display: none; }

  /* HERO — ocultar juego en mobile, mostrar aviso */
  #welcome-box { display: none; }
  #challenge-box { display: none; }
  #hint-box {
    font-size: 11px;
    padding: 0 1.5rem;
    text-align: center;
    color: var(--txt3);
    line-height: 1.6;
  }

  /* Reward card */
  #reward-card {
    padding: 1.8rem 1.4rem;
    margin: 1rem;
    max-width: calc(100vw - 2rem);
  }
  .rew-btns { flex-direction: column; }
  .rew-btn, .rew-btn-alt { width: 100%; }

  /* Skill flash */
  #skill-flash { width: calc(100% - 2.4rem); padding: 1.5rem 1.2rem; }
  .sf-title { font-size: 1.2rem; }
  .sf-sub { font-size: .9rem; }

  /* MANIFIESTO — reducir padding vertical */
  #manifesto-sec {
    height: auto;
    min-height: 60vh;
    padding: 4rem 1.5rem;
  }
  .m-line { font-size: clamp(1.4rem, 6vw, 2.2rem); }
  .m-label { margin-bottom: 1.5rem; }

  /* SOBRE MÍ */
  #about-skills { padding: 3rem 1.2rem; }
  h2 { font-size: 1.6rem; }
  .about-intro p { font-size: 1rem; color: var(--txt2); }
  .sec-label { font-size: 11px; }

  /* Skills: 1 columna, más legible */
  .skills-grid { grid-template-columns: 1fr; }
  .skill-card { padding: 1.4rem 1.2rem; }
  .sc-name { font-size: 1rem; }
  .sc-disc { font-size: .85rem; color: var(--txt2); }
  .sc-pct { font-size: 13px; color: var(--txt2); }
  .sc-num { font-size: 11px; }

  /* TRABAJO SELECTO */
  #work-sec { padding: 3rem 1.2rem; }
  h2.wh { font-size: 1.6rem; }
  .wlabel { font-size: 11px; }
  .pgrid { grid-template-columns: 1fr; margin-top: 2rem; }
  .pc { min-height: 140px; padding: 1.5rem 1.2rem; }
  .pc-title { font-size: 1.1rem; }
  .pc-tag span { font-size: 11px; padding: 4px 10px; color: #888; }
  .pc-num { font-size: 11px; color: #555; }

  /* CONTACTO */
  #contact-sec { padding: 4rem 1.2rem; }
  .ch { font-size: clamp(2rem, 10vw, 3rem); }
  .cdesc { font-size: 1rem; color: var(--txt2); }
  .cta { font-size: 11px; padding: .9rem 1.4rem; word-break: break-all; }
  .cpre { font-size: 11px; }
}