/* ============================================================
   VCONSOLA · BARRA CRUZADA (XMB)
   Portafolio de iriemdg — dark minimal, materialidad de consola.
   Misma paleta y tipografías que la galería v1; jerarquía nueva:
   Proyectos (contenedor de 5 carátulas) + Experiencia · Formación · Contacto.
   ============================================================ */
:root{
  --fondo:        #0f0f0f;
  --fondo-2:      #0b0b0b;
  --tinta:        #e9e9e4;
  --tinta-media:  #9d9d96;
  --tinta-baja:   #8f8f88;   /* subido de #82827a → 5.9:1 sobre el fondo (AA con margen) */
  --linea:        #262626;
  --linea-fuerte: #3a3a3a;
  --acento:       #ff3b2f;   /* rojo señal — único acento (y ACENTO en el JS de la escena) */
  --num-indice:   #232323;
  --panel-bg:     rgba(14,14,13,.94);

  --sans: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --margen: clamp(1.05rem, 3.2vw, 2.6rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ height:100%; }
body{
  min-height:100%;
  background: var(--fondo-2);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
body.modo-3d{ overflow:hidden; height:100dvh; }

/* Grano — continuidad exacta con la v1 */
body::after{
  content:""; position:fixed; inset:0; z-index:900; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
::selection{ background:var(--acento); color:#0f0f0f; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:1px; }

.mono{ font-family:var(--mono); font-size:.6875rem; font-weight:400; letter-spacing:.13em; text-transform:uppercase; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* Salto de contenido */
.saltar{
  position:fixed; top:.8rem; left:50%; z-index:400;
  transform:translateX(-50%) translateY(-300%);
  background:var(--fondo); color:var(--tinta); border:1px solid var(--linea-fuerte);
  padding:.6rem 1rem; font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; transition:transform .2s var(--ease);
}
.saltar:focus-visible{ transform:translateX(-50%) translateY(0); }

/* ---------- lienzo 3D ---------- */
/* El canvas WebGL es opaco (scene.background sólido), así que el fondo del
   contenedor sólo se ve el instante previo a montar el canvas: un negro liso
   coherente, sin degradado engañoso que nunca llega a verse. */
#lienzo{ position:fixed; inset:0; z-index:1; background:#0b0b0b; }
#lienzo canvas{ display:block; width:100%; height:100%; touch-action:none; user-select:none; -webkit-user-select:none; }
body.clasico #lienzo{ display:none; }

#cargando{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:8;
  color:var(--tinta-baja); pointer-events:none; animation:pulso 1.5s ease-in-out infinite;
}
body.modo-3d #cargando, body.clasico #cargando{ display:none; }
@keyframes pulso{ 0%,100%{opacity:.3} 50%{opacity:.85} }

/* ============================================================
   HUD
   ============================================================ */
#hud{ position:fixed; inset:0; z-index:10; pointer-events:none; display:none; }
body.modo-3d #hud{ display:block; }
#hud > *{ pointer-events:auto; }

.marca{ position:absolute; top:var(--margen); left:var(--margen); max-width:20rem; }
.marca h1{
  font-size:clamp(1.3rem,2.3vw,1.65rem); font-weight:800; font-variation-settings:"wdth" 125;
  letter-spacing:-.01em; text-transform:uppercase; line-height:1;
}
.marca h1 .punto{ color:var(--acento); }
.marca p{ margin-top:.5rem; color:var(--tinta-media); border-top:1px solid var(--linea); padding-top:.5rem; max-width:26ch; font-size:.82rem; }

/* Ruta (breadcrumb) + atrás, arriba centrado */
.barra-ruta{
  position:absolute; top:var(--margen); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.9rem; max-width:min(60vw,40rem);
}
.atras{
  appearance:none; background:none; border:none; cursor:pointer;
  color:var(--tinta-media); font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.35rem .55rem; border:1px solid var(--linea-fuerte);
  transition:color .18s var(--ease), border-color .18s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.atras:hover{ color:var(--tinta); border-color:var(--acento); }
.atras[hidden]{ display:none; }
.ruta{ color:var(--tinta-baja); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ruta .seg-final{ color:var(--acento); }
.ruta .cursor-blink{ color:var(--tinta-media); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }

.modo-btn{
  position:fixed; top:var(--margen); right:var(--margen); z-index:30; appearance:none; background:none; border:none;
  cursor:pointer; color:var(--tinta-media); font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.45rem .15rem; border-bottom:1px solid var(--linea-fuerte);
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.modo-btn[hidden]{ display:none; }
.modo-btn:hover{ color:var(--tinta); border-color:var(--acento); }

/* Menú accesible — misma jerarquía, botones reales */
.menu{ position:absolute; left:var(--margen); bottom:var(--margen); max-width:15rem; }
.menu > .menu-tit{ color:var(--tinta-baja); margin-bottom:.55rem; }
.menu ul{ list-style:none; }
.menu-lista{ display:flex; flex-direction:column; gap:.06rem; }
.menu-btn, .submenu-btn{
  appearance:none; background:none; border:none; cursor:pointer; width:100%;
  display:flex; align-items:baseline; gap:.7rem; text-align:left;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--tinta-media); padding:.34rem .5rem .34rem .6rem; border-left:2px solid transparent;
  transition:color .16s var(--ease), border-color .16s var(--ease); white-space:nowrap;
}
.menu-num{ color:var(--tinta-baja); font-variant-numeric:tabular-nums; transition:color .16s var(--ease); }
.menu-btn:hover, .submenu-btn:hover{ color:var(--tinta); }
.menu-btn:hover .menu-num, .submenu-btn:hover .menu-num{ color:var(--acento); }
.menu-btn[aria-current="true"]{ color:var(--tinta); border-left-color:var(--acento); }
.menu-btn[aria-current="true"] .menu-num{ color:var(--acento); }
.submenu{ display:flex; flex-direction:column; gap:.04rem; margin:.15rem 0 .3rem .35rem; padding-left:.5rem; border-left:1px solid var(--linea); }
.submenu[hidden]{ display:none; }
.submenu-btn{ font-size:.64rem; padding:.28rem .4rem .28rem .5rem; color:var(--tinta-baja); }
.submenu-btn .cat-tag{ margin-left:auto; padding-left:.6rem; color:var(--acento); font-size:.9em; }
.submenu-btn.actual{ color:var(--tinta); }
.submenu-btn.actual .menu-num{ color:var(--acento); }

/* Pista de uso + leyenda de categorías, abajo derecha */
.hud-der{ position:absolute; right:var(--margen); bottom:var(--margen); display:flex; flex-direction:column; align-items:flex-end; gap:.75rem; text-align:right; }
.leyenda{ list-style:none; display:flex; gap:1.2rem; color:var(--tinta-baja); }
.leyenda li{ display:inline-flex; align-items:center; gap:.5rem; }
.glifo{ display:inline-block; background:var(--tinta-baja); flex:none; }
.glifo-saas{ width:5px; height:15px; } .glifo-web{ width:15px; height:5px; } .glifo-juego{ width:11px; height:11px; }
.hint{ color:var(--tinta-baja); border-top:1px solid var(--linea); padding-top:.6rem; max-width:36ch; }
.solo-tactil{ display:none; }
@media (pointer:coarse){ .solo-raton{display:none} .solo-tactil{display:inline} }

/* HUD del carrusel (dentro de /proyectos y en la raíz: contador de posición) */
.carru-hud{
  position:absolute; left:50%; bottom:calc(var(--margen) + 3.3rem); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.carru-hud[hidden]{ display:none; }
.carru-nombre{ font-weight:800; font-variation-settings:"wdth" 118; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1rem,2.2vw,1.35rem); line-height:1; }
.carru-pos{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--tinta-media); }
.carru-pos .carru-idx{ color:var(--acento); }
/* Puntos de posición: botones reales (role=tab) que saltan a un elemento */
.carru-dots{ display:flex; gap:.35rem; pointer-events:auto; }
.carru-dot{
  appearance:none; background:none; border:none; cursor:pointer; padding:0;
  width:16px; height:16px; display:grid; place-items:center;
}
.carru-dot::before{
  content:""; width:6px; height:6px; background:var(--linea-fuerte);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.carru-dot:hover::before{ background:var(--tinta-media); }
.carru-dot[aria-selected="true"]::before{ background:var(--acento); transform:scale(1.25); }

/* Etiqueta flotante en hover (ratón) */
#etiqueta{
  position:fixed; z-index:20; pointer-events:none; background:rgba(12,12,12,.92);
  border:1px solid var(--linea-fuerte); padding:.32rem .6rem; color:var(--tinta); white-space:nowrap;
  opacity:0; transition:opacity .12s linear; font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
}
#etiqueta.on{ opacity:1; }
#etiqueta .e-cat{ color:var(--acento); }
@media (pointer:coarse){ #etiqueta{ display:none; } }

@media (max-width:820px){
  .marca{ max-width:14rem; }
  .marca p{ display:none; }
  .barra-ruta{ top:auto; bottom:calc(var(--margen) + env(safe-area-inset-bottom)); left:var(--margen); transform:none; max-width:70vw; }
  .menu{ display:none; }         /* en móvil el menú vive en el panel de secciones táctil (barra inferior) */
  .hud-der .leyenda{ display:none; }
  .hud-der{ bottom:calc(var(--margen) + 2.4rem); left:var(--margen); align-items:flex-start; text-align:left; }
  .hint{ max-width:28ch; }
  .carru-hud{ bottom:calc(var(--margen) + 5.2rem); }
}

/* Barra de secciones táctil (solo móvil) */
.tabs-movil{ position:absolute; left:0; right:0; bottom:0; z-index:12; display:none; }
@media (max-width:820px){
  .tabs-movil{ display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none;
    padding:.5rem var(--margen) calc(.5rem + env(safe-area-inset-bottom));
    background:linear-gradient(to top, rgba(9,9,9,.92), rgba(9,9,9,0)); }
  .tabs-movil::-webkit-scrollbar{ display:none; }
}
.tab-movil{ appearance:none; background:none; border:1px solid var(--linea-fuerte); color:var(--tinta-media);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:.5rem .7rem; white-space:nowrap; cursor:pointer; }
.tab-movil[aria-current="true"]{ color:var(--tinta); border-color:var(--acento); }

/* ============================================================
   PANEL — ficha (compartido con modo clásico)
   ============================================================ */
#panel-zona{ position:fixed; inset:0; z-index:60; display:none; }
body.modo-3d #panel-zona.activo{ display:block; }
.panel-fondo{ position:absolute; inset:0; background:linear-gradient(to right, rgba(8,8,8,0) 26%, rgba(8,8,8,.6)); opacity:0; transition:opacity .4s var(--ease); cursor:pointer; }
#panel-zona.vista .panel-fondo{ opacity:1; }
.panel{
  position:absolute; top:0; right:0; bottom:0; width:min(480px,100%);
  background:var(--panel-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-left:1px solid var(--linea-fuerte); display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(30px); opacity:0; transition:transform .42s var(--ease), opacity .42s var(--ease);
}
.panel::before{ content:""; position:absolute; top:0; left:-1px; width:2px; height:3.4rem; background:var(--acento); z-index:3; }
#panel-zona.vista .panel{ transform:none; opacity:1; }
.panel-cerrar{
  position:absolute; top:clamp(1rem,2.4vh,1.5rem); right:clamp(1rem,2.4vw,1.5rem); z-index:2; appearance:none;
  background:var(--fondo); border:1px solid var(--linea-fuerte); color:var(--tinta); font-family:var(--sans);
  font-size:1.15rem; line-height:1; width:2.4rem; height:2.4rem; cursor:pointer;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.panel-cerrar:hover{ border-color:var(--acento); color:var(--acento); }
.panel-cuerpo{ flex:1; min-height:0; overflow-y:auto; padding:clamp(1.5rem,4vh,2.75rem) clamp(1.25rem,3vw,2.5rem) 3rem; }

/* contenido de ficha */
.f-num{ display:block; font-size:clamp(3.2rem,7.5vw,4.6rem); font-weight:800; font-variation-settings:"wdth" 125; line-height:.9; letter-spacing:-.02em; color:var(--num-indice); user-select:none; }
.f-meta{ color:var(--tinta-media); margin:.2rem 0 .3rem; }
.f-linea-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .7rem; }
.f-cat{ color:var(--acento); }
.f-estado{ display:inline-flex; align-items:center; gap:.45rem; color:var(--tinta-media); }
.f-estado .punto-est{ width:.45rem; height:.45rem; background:var(--acento); display:inline-block; flex:none; }
.f-titulo{ font-size:clamp(1.65rem,4.3vw,2.3rem); font-weight:800; font-variation-settings:"wdth" 120; text-transform:uppercase; letter-spacing:-.015em; line-height:1.02; border-bottom:1px solid var(--linea); padding-bottom:1rem; margin-bottom:1.3rem; }
.f-sub{ color:var(--tinta-baja); margin:1.5rem 0 .7rem; display:flex; align-items:center; gap:.8rem; font-weight:400; }
.f-sub::after{ content:""; height:1px; background:var(--linea); flex:1; }
.f-texto{ color:var(--tinta-media); max-width:54ch; }
.f-texto + .f-texto{ margin-top:.7rem; }
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; }
.chips li{ font-family:var(--mono); font-size:.625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-media); border:1px solid var(--linea-fuerte); padding:.28rem .55rem; }
.f-enlaces{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.f-enlaces a{ font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--tinta); display:inline-flex; align-items:center; gap:.55rem; border-bottom:1px solid var(--linea-fuerte); padding-bottom:.3rem; transition:border-color .18s var(--ease); width:max-content; max-width:100%; }
.f-enlaces a .flecha{ color:var(--acento); transition:transform .18s var(--ease); }
.f-enlaces a:hover{ border-color:var(--acento); }
.f-enlaces a:hover .flecha{ transform:translate(3px,-3px); }
.enlace-pend{ font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-media); display:inline-flex; align-items:center; gap:.6rem; border-bottom:1px dashed var(--linea-fuerte); padding-bottom:.3rem; }
.enlace-pend .pendiente{ color:var(--tinta-baja); font-size:.625rem; border:1px dashed var(--linea-fuerte); padding:.12rem .4rem; }
.f-huecos{ list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.f-huecos li{ border:1px dashed var(--linea-fuerte); color:var(--tinta-media); padding:.85rem 1rem; }
.f-items{ list-style:none; display:flex; flex-direction:column; }
.f-items li{ border-top:1px solid var(--linea); padding:.85rem 0; display:flex; flex-direction:column; gap:.25rem; }
.f-items li strong{ font-weight:700; font-variation-settings:"wdth" 112; }
.f-detalle{ color:var(--tinta-media); font-size:.925rem; }
.f-email{ display:inline-block; font-size:clamp(1.1rem,3.2vw,1.45rem); font-weight:700; font-variation-settings:"wdth" 116; letter-spacing:-.01em; text-decoration:none; border-bottom:2px solid var(--linea-fuerte); padding-bottom:.12em; transition:border-color .2s var(--ease), color .2s var(--ease); overflow-wrap:anywhere; }
.f-email:hover{ border-color:var(--acento); color:var(--acento); }

@media (max-width:640px){ .panel{ width:100%; border-left:none; } }

/* ============================================================
   MODO CLÁSICO — lineal, scrolleable
   ============================================================ */
#clasico{ position:relative; z-index:5; max-width:1080px; margin-inline:auto; padding:clamp(6rem,14vh,8rem) var(--margen) 4rem; display:none; }
body.clasico #clasico{ display:block; }
.clasico-intro{ border-bottom:1px solid var(--linea); padding-bottom:2rem; margin-bottom:1rem; }
.clasico-intro .ruta-c{ color:var(--tinta-baja); margin-bottom:1rem; }
.clasico-intro h2{ font-size:clamp(1.5rem,3.3vw,2.35rem); font-weight:800; font-variation-settings:"wdth" 122; text-transform:uppercase; letter-spacing:-.01em; line-height:1.05; }
.clasico-intro p{ margin-top:.9rem; color:var(--tinta-media); max-width:58ch; }
.clasico-sec{ color:var(--tinta-baja); margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid var(--linea-fuerte); }
.obra{ border-top:1px solid var(--linea); padding:clamp(2rem,5vh,3rem) 0; display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(1.25rem,3vw,2.5rem); }
.obra > .obra-cuerpo{ grid-column:1 / span 12; }
@media (min-width:860px){ .obra > .obra-cuerpo{ grid-column:3 / span 8; } }
.pie-clasico{ border-top:1px solid var(--linea); padding-top:1.4rem; margin-top:1rem; color:var(--tinta-baja); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.pie-clasico .cuadro-mini{ display:inline-block; width:.45rem; height:.45rem; background:var(--acento); margin-right:.5rem; }

#aviso-fallo{ position:fixed; left:var(--margen); bottom:var(--margen); z-index:70; max-width:34ch; background:#141413; border:1px solid var(--linea-fuerte); border-left:2px solid var(--acento); padding:.8rem 1rem; color:var(--tinta-media); letter-spacing:.03em; }
#aviso-fallo[hidden]{ display:none; }

/* noscript / sin-módulos */
.noscript-bloque{ position:relative; z-index:50; max-width:720px; margin:12vh auto 3rem; padding:2rem; border:1px solid var(--linea-fuerte); background:var(--fondo); }
.noscript-bloque h2{ font-size:1.6rem; font-weight:800; font-variation-settings:"wdth" 122; text-transform:uppercase; }
.noscript-bloque p{ margin-top:.8rem; color:var(--tinta-media); }
.noscript-bloque ul{ margin-top:.8rem; padding-left:1.1rem; color:var(--tinta-media); }
.noscript-bloque a{ color:var(--tinta); }
.noscript-bloque code{ font-family:var(--mono); font-size:.85em; background:#141413; border:1px solid var(--linea-fuerte); padding:.05rem .35rem; }

/* ============================================================
   MOTION — respeta reduce
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s !important; animation-delay:0s !important; transition-duration:.001s !important; }
  .cursor-blink{ animation:none; }
}