/* ============================================================
   home.css — Solo para index.html (la portada).
   Todo lo que ves aquí es exclusivo del escritorio interactivo:
   nav, hero, objetos arrastrables, carpetas de proyectos, bio.
   Los tokens de color/tipografía viven en site.css.
   ============================================================ */

nav.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; padding:1.4rem 6vw;
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
  background:linear-gradient(rgba(5,7,6,0.85), rgba(5,7,6,0)); color:var(--gold-bright);
}
nav.site-nav .brand-logo{ display:block; height:84px; }
nav.site-nav .brand-logo img{ height:100%; width:auto; display:block; }
nav.site-nav .brand-logo::after{ content:none; }
nav.site-nav ul{ list-style:none; display:flex; gap:2.2rem; margin:0; padding:0; }
nav.site-nav a{ text-decoration:none; position:relative; padding-bottom:2px; }
nav.site-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .35s ease; }
nav.site-nav a:hover::after{ right:0; }

.hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:30px; height:30px; background:transparent; border:none; padding:0; z-index:70; }
.hamburger span{ display:block; width:100%; height:1.5px; background:var(--gold-bright); transition:transform .3s ease, opacity .3s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:700px){
  .hamburger{ display:flex; }
  nav.site-nav ul{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw, 300px); margin:0;
    background:rgba(5,7,6,0.97); backdrop-filter:blur(10px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:2rem;
    padding:2rem 2.4rem; transform:translateX(100%); transition:transform .4s cubic-bezier(.22,.9,.3,1);
    border-left:1px solid rgba(169,134,63,0.25);
  }
  nav.site-nav ul.open{ transform:translateX(0); }
  nav.site-nav ul a{ font-size:1rem; }
  nav.site-nav .brand-logo{ display:none; }
}

/* ============ ESCRITORIO (HERO) ============ */
.desk-hero{
  position:relative; width:100%; aspect-ratio:4/5;
  background:#000; overflow:hidden;
}
@media (min-width:761px){
  .desk-hero{ height:100vh; aspect-ratio:auto; }
}

.desk-hero .bg{
  position:absolute; inset:0;
  background-image:url('../desk-bg.webp');
  background-size:cover; background-position:center;
}
.desk-hero .vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,0.5) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,0.45) 100%);
}

.hero-copy{
  position:absolute; top:6%; left:0; right:0; z-index:5; text-align:center; pointer-events:none;
}
.hero-copy::before{
  content:""; position:absolute; left:50%; top:35%; transform:translate(-50%,-50%);
  width:130%; height:260%; z-index:-1;
  background:radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, transparent 74%);
}
.hero-copy h1{
  font-size:clamp(2.8rem, 7.4vw, 5.6rem); color:var(--parchment); font-style:italic;
  text-shadow:0 3px 14px rgba(0,0,0,0.9), 0 8px 40px rgba(0,0,0,0.55);
}
.hero-sub{
  display:inline-block; margin:1rem auto 0;
  font-family:var(--body-font); color:var(--parchment);
  font-size:clamp(1rem, 1.9vw, 1.28rem); letter-spacing:0.02em;
  background:rgba(5,7,6,0.72); backdrop-filter:blur(5px);
  padding:0.6rem 1.5rem; border-radius:999px;
  border:1px solid rgba(209,172,95,0.3);
  text-shadow:0 2px 8px rgba(0,0,0,0.7);
}
.hero-tags{
  display:block; margin:1rem auto 0;
  font-family:var(--mono); font-size:clamp(0.62rem, 1.1vw, 0.74rem);
  letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-bright);
  text-shadow:0 2px 10px rgba(0,0,0,0.85);
}

.mode-switch{
  position:absolute; bottom:5%; left:0; right:0; z-index:6;
  display:flex; justify-content:center; gap:0.7rem; flex-wrap:wrap;
}
.ctrl-btn{
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase;
  background:rgba(5,7,6,0.55); backdrop-filter:blur(6px);
  border:1px solid rgba(209,172,95,0.45); color:var(--gold-bright);
  padding:0.65rem 1.2rem; border-radius:2px; transition:background .3s ease, color .3s ease;
}
.ctrl-btn:hover{ border-color:var(--gold-bright); }
.ctrl-btn[aria-pressed="true"]{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

.icon-btn{
  position:relative; width:58px; height:58px; padding:0; border-radius:50%;
  background:rgba(23,19,16,0.55); backdrop-filter:blur(6px);
  border:1px solid rgba(209,172,95,0.4);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s ease, transform .2s ease, box-shadow .3s ease;
}
.icon-btn img{ width:68%; height:68%; object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,0.55)); }
.icon-btn:hover{ transform:translateY(-3px) scale(1.06); border-color:var(--gold-bright); }
.icon-btn[aria-pressed="true"]{
  border-color:var(--gold-bright);
  box-shadow:0 0 0 2px rgba(209,172,95,0.22), 0 0 18px rgba(209,172,95,0.35);
}
.icon-btn .tooltip{
  position:absolute; bottom:calc(100% + 11px); left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--parchment); color:var(--ink);
  font-family:var(--mono); font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.38rem 0.75rem; border-radius:999px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 6px 16px rgba(0,0,0,0.4);
}
.icon-btn .tooltip::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--parchment);
}
.icon-btn:hover .tooltip, .icon-btn:focus-visible .tooltip{
  opacity:1; transform:translateX(-50%) translateY(0);
}

.desk-stage{ position:absolute; inset:0; z-index:3; }

.object{
  position:absolute; transform:translate(-50%,-50%);
  touch-action:none; cursor:grab; user-select:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.45));
  transition:left .7s cubic-bezier(.22,.9,.3,1), top .7s cubic-bezier(.22,.9,.3,1), filter .2s ease;
}
.object img{ width:100%; height:auto; display:block; pointer-events:none; -webkit-user-drag:none; }
.object:hover{ filter:drop-shadow(0 14px 24px rgba(0,0,0,0.55)) brightness(1.06); }
.object.dragging{ transition:none; cursor:grabbing; filter:drop-shadow(0 20px 30px rgba(0,0,0,0.6)) brightness(1.1); z-index:20; }

.obj-lamp{ z-index:2; }
.lamp-glow{
  position:absolute; left:50%; top:58%; width:320%; height:320%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,214,140,0.85) 0%, rgba(230,180,100,0.45) 32%, rgba(209,172,95,0.16) 58%, transparent 75%);
  filter:blur(4px); z-index:-1; pointer-events:none; mix-blend-mode:screen;
  animation:lampBreathe 5s ease-in-out infinite;
}
@keyframes lampBreathe{ 0%,100%{ opacity:0.88; } 50%{ opacity:1; } }

.only-tranquila, .only-trabajo{ transition:opacity .5s ease, left .7s cubic-bezier(.22,.9,.3,1), top .7s cubic-bezier(.22,.9,.3,1); }
.desk-hero[data-mode="tranquila"] .only-trabajo{ opacity:0; pointer-events:none; }
.desk-hero[data-mode="trabajo"] .only-tranquila{ opacity:0; pointer-events:none; }

/* ============ SECCIONES ============ */
section{ position:relative; padding:8rem 0; }
.section-head{ margin-bottom:3rem; }
.section-head .eyebrow{ margin-bottom:0.8rem; display:block; }
.section-head h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); font-style:italic; color:var(--parchment); }

.about{ background:var(--void-2); }
.about .grid{ display:grid; grid-template-columns:1.1fr 1.4fr; gap:4rem; align-items:start; }
.about .sigil{ width:100%; max-width:200px; opacity:0.85; }
.about p{ color:var(--parchment-dim); font-size:1.02rem; }
.about p + p{ margin-top:1.1rem; }
.about strong{ color:var(--parchment); font-weight:600; }
@media (max-width:820px){ .about .grid{ grid-template-columns:1fr; gap:2.5rem; } .about .sigil{ max-width:130px; } }

.projects{ background:var(--void); }
.projects-title{ font-size:clamp(2.4rem, 5.6vw, 4rem); font-style:italic; color:var(--parchment); margin-bottom:8.5rem; }

.folder-list{ display:flex; flex-direction:column; gap:9rem; }
.folder-item{
  position:relative; display:inline-flex; flex-direction:column; align-items:flex-start;
  width:fit-content; background:none; border:none; padding:0; margin:0; text-align:left;
  color:var(--parchment-dim); text-decoration:none; cursor:pointer; font-family:inherit;
}
.folder-visual{ position:relative; width:130px; height:112px; }
.folder-visual img{
  position:absolute; left:0; top:0; width:100%; height:auto;
  transition:opacity .3s ease; filter:drop-shadow(0 10px 18px rgba(0,0,0,0.5));
}
.folder-visual img.f-open{ opacity:0; }
.folder-item:hover .f-closed, .folder-item:focus-visible .f-closed{ opacity:0; }
.folder-item:hover .f-open, .folder-item:focus-visible .f-open{ opacity:1; }

.hover-icons{ position:absolute; left:50%; top:2px; width:0; height:0; pointer-events:none; }
.hover-icons img{
  position:absolute; top:0; left:0; width:56px; height:auto; margin-left:-28px;
  transform-origin:50% 100%;
  transform:rotate(var(--a, 0deg)) translateY(0) scale(0.65);
  opacity:0; transition:opacity .4s ease, transform .45s cubic-bezier(.22,.9,.3,1);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,0.55));
}
.folder-item:hover .hover-icons img, .folder-item:focus-visible .hover-icons img{
  opacity:1; transform:rotate(var(--a, 0deg)) translateY(-98px) scale(1);
}
.hover-icons img:nth-child(1){ transition-delay:0s; }
.hover-icons img:nth-child(2){ transition-delay:.07s; }
.hover-icons img:nth-child(3){ transition-delay:.14s; }

.folder-label{
  margin-top:1.1rem; font-family:var(--mono); font-size:0.8rem; letter-spacing:0.04em;
  color:var(--parchment-dim); transition:color .3s ease;
}
.folder-item:hover .folder-label, .folder-item:focus-visible .folder-label{ color:var(--parchment); }

.folder-disabled{ cursor:default; }
.folder-note{
  position:absolute; left:0; top:100%; margin-top:2.6rem;
  font-family:var(--mono); font-size:0.7rem; color:var(--gold-bright);
  opacity:0; transform:translateY(-4px); transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.folder-note.show{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .lamp-glow{ animation:none !important; }
  .object{ transition:none !important; }
}