:root {
  /* COLOR BASE (Verde Terminal) */
  /* Guardamos los canales RGB separados para poder usar transparencia después */
  --holo-rgb: 0, 255, 0; 
  
  /* Color del texto cuando un botón está ACTIVO (Verde muy oscuro, no negro) */
  --holo-dark-text: #002b00; 
}

/* TEMA: DESARROLLO (Morado) */
.theme-dev {
  --holo-rgb: 189, 0, 255;
  --holo-dark-text: #2a0038;
}

/* TEMA: VIDEOJUEGOS (Cyan/Azul Futuro) */
.theme-games {
  --holo-rgb: 0, 234, 255;
  --holo-dark-text: #00353b;
}

/* TEMA: MÚSICA (Ámbar/Naranja Retro) */
.theme-music {
  --holo-rgb: 255, 174, 0;
  --holo-dark-text: #3d2a00;
}

/* TEMA: DISEÑO (Amarillo Eléctrico) */
.theme-design {
  --holo-rgb: 255, 0, 0;
  --holo-dark-text: #3b0000;
}



/* LAYOUT DEV */
.dev-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media(max-width: 700px) { .dev-container { grid-template-columns: 1fr; } }

/* CAJA TERMINAL (Skills) */
.terminal-box {
  background: rgba(0,0,0,0.3);
  border: 1px dashed rgba(var(--holo-rgb), 0.4);
  padding: 1rem;
  font-family: 'Courier New', monospace;
}

.term-header {
  border-bottom: 1px solid rgba(var(--holo-rgb), 0.3);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  opacity: 0.7;
}

.skill-item { margin-bottom: 1rem; }

.ascii-bar {
  height: 10px;
  background: rgba(var(--holo-rgb), 0.1);
  margin-top: 5px;
  position: relative;
  overflow: hidden;
}
/* La barra de llenado */
.ascii-bar::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--w, 0%);
  background: repeating-linear-gradient(
    90deg,
    rgb(var(--holo-rgb)),
    rgb(var(--holo-rgb)) 2px,
    transparent 2px,
    transparent 4px
  );
  animation: loadBar 2s ease-out forwards;
}

@keyframes loadBar { from { width: 0; } }

/* TARJETAS DE PROYECTO */
.repo-card {
  display: block;
  text-decoration: none;
  background: rgba(var(--holo-rgb), 0.05);
  border-left: 3px solid rgba(var(--holo-rgb), 0.3);
  padding: 1rem;
  margin-bottom: 1rem;
  transition: all 0.3s;
  color: inherit;
}

.repo-card:hover {
  background: rgba(var(--holo-rgb), 0.15);
  border-left-color: rgb(var(--holo-rgb));
  transform: translateX(5px);
}

.repo-header {
  display: flex;
  justify-content: space-between;
  font-family: 'Geo';
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.repo-status.success { color: #0f0; text-shadow: none; } /* Siempre verde si es éxito */
.repo-status.warning { color: #ff0; text-shadow: none; } 

.repo-desc { font-size: 0.9rem; opacity: 0.8; margin-bottom: 0.8rem; }

.repo-tags span {
  font-size: 0.7rem;
  background: rgba(var(--holo-rgb), 0.1);
  padding: 2px 6px;
  margin-right: 5px;
  border: 1px solid rgba(var(--holo-rgb), 0.2);
}



/* GRID DE JUEGOS */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2rem;
  padding-top: 1rem;
}

.game-cartridge {
  border: 2px solid rgba(var(--holo-rgb), 0.4);
  background: rgba(0,0,0,0.5);
  transition: 0.3s;
}

.game-cartridge:hover {
  border-color: rgb(var(--holo-rgb));
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(var(--holo-rgb), 0.2);
}

.cart-img-container {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(var(--holo-rgb), 0.2);
}

.cart-img {
  width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  opacity: 0.8;
  transition: 0.3s;
}

.play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
  color: rgb(var(--holo-rgb));
  font-size: 1.5rem;
  opacity: 0;
  transition: 0.3s;
}

.game-cartridge:hover .play-overlay { opacity: 1; }
.game-cartridge:hover .cart-img { opacity: 0.4; }

.cart-info { padding: 1rem; text-align: center; }

.cart-title {
  font-family: 'Geo'; font-size: 1.3rem; margin-bottom: 0.5rem;
  color: rgb(var(--holo-rgb));
}

.cart-meta {
  font-size: 0.8rem; opacity: 0.7; margin-bottom: 1rem;
}

.cart-btn {
  display: block;
  border: 1px solid rgb(var(--holo-rgb));
  color: rgb(var(--holo-rgb));
  text-decoration: none;
  padding: 0.5rem;
  font-size: 0.9rem;
  transition: 0.2s;
}
.cart-btn:hover {
  background: rgb(var(--holo-rgb));
  color: var(--holo-dark-text);
}



/* ESCENARIO */

/* Estilo base de la celda 3D */
.carousel-cell {
  position: absolute;
  width: 200px;
  /* Altura automática para que pueda crecer */
  height: auto; 
  left: 5px;
  top: 5px;
  border: 1px solid rgba(var(--holo-rgb), 0.3);
  background: rgba(0,0,0,0.8);
  transition: transform 1s, border-color 0.3s;
  /* Importante: NO overflow:hidden aquí, o cortará el contenido 3D */
}

/* La portada clickeable */
.design-card-trigger {
  cursor: pointer;
  padding: 5px;
  /* Reutilizamos tu estilo bp-card pero le sacamos el borde que ya tiene la celda */
  border: none !important; 
  background: transparent !important;
}

.project-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-bottom: 1px solid rgba(var(--holo-rgb), 0.2);
  display: block;
}

/* El contenedor de detalles oculto (ACORDEÓN) */
.design-cell-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 10px;
  transition: all 0.4s ease-out;
  font-family: 'Courier New', monospace;
}

.design-cell-details p {
  font-size: 0.8rem;
  color: #ccc;
  margin: 10px 0;
}

.cyber-link {
  display: block;
  color: rgb(var(--holo-rgb));
  text-decoration: none;
  font-size: 0.8rem;
  margin-bottom: 10px;
  border: 1px solid currentColor;
  padding: 2px 5px;
  text-align: center;
}

/* --- ESTADO ACTIVO (Expandido) --- */
.carousel-cell.active {
  border-color: rgb(var(--holo-rgb));
  background: rgba(0,0,0,0.95);
  /* TRUCO CLAVE: Traer al frente brutalmente para que no se corte con las otras */
  z-index: 9999 !important; 
}

.carousel-cell.active .design-cell-details {
  max-height: 200px;
  opacity: 1;
  padding-bottom: 10px;
}





.carousel-scene {
  margin: 40px auto;
  position: relative;
  width: 210px;
  height: 140px;
  perspective: 1000px;
  user-select: none; 
  touch-action: pan-y; 
  cursor: grab; 
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-scene.shifted {
  transform: translateY(-60px); 
}

/* ANILLO GIRATORIO */
.carousel {
  width: 100%;
  height: 100%;
  position: relative;
  left: -8%;
  transform: translateX(-50%);
  margin-top: 10vh;
  width: 100vw;
  max-width: 100%;
  display: flex;
  justify-content: center;
  transform: translateZ(-288px);
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}



.bp-card {
  width: 100%; height: 100%;
  padding: 5px;
}

.bp-img {
  width: 100%; height: 80%;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  border-bottom: 1px solid rgba(var(--holo-rgb), 0.5);
}

.bp-info {
  height: 20%;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geo';
  background: rgba(0,0,0,0.5);
  color: rgb(var(--holo-rgb));
}

/* CONTROLES */
.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between; 
  pointer-events: none; 
  margin-top: 0; 
  padding: 0 10px; 
  z-index: 100;
}

.c-btn {
  pointer-events: auto;
  background: rgba(0,0,0,0.8);
  border: 1px solid rgb(var(--holo-rgb));
  color: rgb(var(--holo-rgb));
  padding: 5px 20px;
  cursor: pointer;
  font-family: 'Geo';
  font-size: 1.2rem;
  transition: 0.3s;
}

.c-btn:hover {
  background: rgb(var(--holo-rgb));
  color: var(--holo-dark-text);
  box-shadow: 0 0 15px rgb(var(--holo-rgb));
}


/* --- PANEL DINÁMICO DE DISEÑO --- */
.design-info-panel {
  margin-top: 2rem;
  text-align: center;
  border: 1px solid rgba(var(--holo-rgb), 0.3);
  background: rgba(0,0,0,0.5);
  padding: 1rem;
  font-family: 'Geo';
}

.panel-header {
  font-size: 0.8rem;
  opacity: 0.5;
  margin-bottom: 10px;
  text-align: left;
}

#active-design-title {
  color: rgb(var(--holo-rgb));
  font-size: 1.5rem;
  margin-bottom: 5px;
}

#active-design-desc {
  font-family: 'Arial', sans-serif;
  font-size: 0.85rem;
  color: #ccc;
  margin-bottom: 15px;
  line-height: 1.4;
}

.cyber-btn-small {
  display: inline-block;
  border: 1px solid rgb(var(--holo-rgb));
  color: rgb(var(--holo-rgb));
  text-decoration: none;
  padding: 5px 20px;
  font-size: 0.9rem;
  transition: 0.3s;
}
.cyber-btn-small:hover {
  background: rgb(var(--holo-rgb));
  color: var(--holo-dark-text);
  box-shadow: 0 0 10px rgb(var(--holo-rgb));
}




/* LAYOUT MUSICA */
.music-player-container {
  display: flex;
  gap: 2rem;
  align-items: center;
}
@media(max-width: 700px) { .music-player-container { flex-direction: column; } }

/* LADO IZQUIERDO: VINILO */
.album-art-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.vinyl-wrapper {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid rgba(var(--holo-rgb), 0.5);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(var(--holo-rgb), 0.2);
  margin-bottom: 1.5rem;
  /* Animación de giro lento constante */
  animation: spinVinyl 10s linear infinite; 
}

.vinyl-cover {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.8;
  filter: sepia(50%) hue-rotate(-30deg);
}

@keyframes spinVinyl { from {transform: rotate(0deg);} to {transform: rotate(360deg);} }

.now-playing-info h3 { font-size: 1.2rem; color: rgb(var(--holo-rgb)); }
.now-playing-info p { font-size: 0.8rem; opacity: 0.7; margin-bottom: 10px; }

/* VISUALIZADOR FALSO */
.fake-visualizer {
  display: flex; gap: 3px; justify-content: center; height: 20px; align-items: flex-end;
}
.bar {
  width: 5px; background: rgb(var(--holo-rgb));
  animation: equalize 0.5s infinite alternate;
}
.bar:nth-child(1) { height: 10px; animation-delay: 0.1s; }
.bar:nth-child(2) { height: 18px; animation-delay: 0.3s; }
.bar:nth-child(3) { height: 8px; animation-delay: 0.0s; }
.bar:nth-child(4) { height: 15px; animation-delay: 0.2s; }

@keyframes equalize { from { height: 5px; opacity: 0.5; } to { height: 20px; opacity: 1; } }

/* LADO DERECHO: PLAYLIST */
.playlist-panel {
  flex: 1.5;
  width: 100%;
  border-left: 1px solid rgba(var(--holo-rgb), 0.2);
  padding-left: 2rem;
}

.track-list { list-style: none; padding: 0; }

.track-item {
  display: flex;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px dashed rgba(var(--holo-rgb), 0.2);
  transition: 0.3s;
  cursor: pointer;
}

.track-item:hover { background: rgba(var(--holo-rgb), 0.05); padding-left: 10px; }

.track-item.active {
  color: rgb(var(--holo-rgb));
  text-shadow: 0 0 5px rgba(var(--holo-rgb), 0.5);
}
.track-item.active .track-num::before { content: "► "; }

.track-num { width: 30px; font-weight: bold; opacity: 0.5; }
.track-details { flex: 1; display: flex; flex-direction: column; }
.track-name { font-size: 1rem; }
.track-time { font-size: 0.7rem; opacity: 0.7; }

.play-mini-btn {
  background: transparent; border: 1px solid rgb(var(--holo-rgb));
  color: rgb(var(--holo-rgb));
  border-radius: 50%;
  width: 30px; height: 30px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: 0.2s;
}
.play-mini-btn:hover { background: rgb(var(--holo-rgb)); color: #000; }


/* --- ACORDEÓN DE MÚSICA --- */
.track-item {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-bottom: 1px dashed rgba(var(--holo-rgb), 0.2);
}

.track-main {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.8rem 0;
  cursor: pointer;
}

.track-expanded {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease-out;
  font-family: 'Courier New', monospace;
}

.track-expanded p {
  font-size: 0.8rem;
  color: #ccc;
  margin-bottom: 10px;
}

/* Cuando el track está activo, expandimos el acordeón */
.track-item.active .track-expanded {
  max-height: 150px;
  opacity: 1;
  padding-bottom: 1rem;
}

.stream-links {
  display: flex;
  gap: 10px;
}

.stream-links a {
  border: 1px solid rgba(var(--holo-rgb), 0.5);
  color: rgb(var(--holo-rgb));
  padding: 2px 8px;
  text-decoration: none;
  font-size: 0.7rem;
  transition: 0.2s;
}
.stream-links a:hover {
  background: rgb(var(--holo-rgb));
  color: var(--holo-dark-text);
}


/* COMMS PANEL (Redes Sociales) */
.comms-panel {
  border: 1px solid rgba(var(--holo-rgb), 0.3);
  background: rgba(var(--holo-rgb), 0.05);
  padding: 1rem;
  margin-bottom: 1rem;
}

.comms-label {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-bottom: 0.8rem;
  font-family: 'Geo';
}

.social-row {
  display: flex;
  gap: 1rem;
}

.social-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  max-width: 80px;   /* Que no sean gigantes */
  
  border: 1px solid rgba(var(--holo-rgb), 0.5);
  text-decoration: none;
  color: rgb(var(--holo-rgb));
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  background: rgba(0,0,0,0.3);
}

.chip-icon {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 4px;
}

.chip-label {
  font-size: 0.7rem;
  font-family: 'Geo';
  opacity: 0.8;
}

/* Hover Effect: "Activación" */
.social-chip:hover {
  background: rgba(var(--holo-rgb), 0.8);
  color: var(--holo-dark-text);
  box-shadow: 0 0 15px rgba(var(--holo-rgb), 0.5);
  transform: translateY(-5px);
}




/* — Reset global — */
* { box-sizing:border-box; margin:0; padding:0; }
html, body { width:100%; height:100%; font-family:'Geo',sans-serif; overflow-x:hidden; }

/* — 3D container — */
#threeContainer {
  display: none;               /* oculto hasta pulsar tarjeta */
  position: absolute; inset:0;
  z-index: 5;                  /* por encima del mainContent */
}

/* — SPLASH SCREEN — */
#splash {
  position:absolute; inset:0; overflow:hidden; z-index:10;
}
#splashContent {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:11;
}
#splashName {
  color:#fff; font-size:2.5rem; margin-bottom:1rem; text-align:center;
}
#pentagon {
  width:100px; height:100px; margin-bottom:1rem;
  background:#fff;
  clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);
  animation:spin 2s linear infinite;
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
#splashVersion {
  color:#fff; font-size:0.8rem; text-align:center;
}
.panel {
  position:absolute; left:0; width:100%; height:50%; background:#01682a;
  z-index:10; transform:translateY(0);
}
.panel.top    { top:0; }
.panel.bottom { bottom:0; }
.splash-end .panel.top    { animation:slideUp   .8s forwards; }
.splash-end .panel.bottom { animation:slideDown .8s forwards; }
@keyframes slideUp  { to{transform:translateY(-100%);} }
@keyframes slideDown{ to{transform:translateY(100%);} }

/* — Test message (puede conservarse o eliminarse) — */
#testMessage {
  position:absolute; top:1rem; left:1rem;
  background:rgba(255,255,255,0.8); padding:.5rem 1rem; border-radius:4px;
}


/* — Tarjeta y menús — */
#card {
  width: 75vw;
  max-width: 300px; 
  
  aspect-ratio: 1.6; 
  
  position: absolute;
  top: -100vh;
  left: 0; 
  
  background-color: transparent;
  background-image: url('../assets/img/card-front.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /*border-radius: 16px;*/
  
  box-shadow: 0 2px 10px rgba(0,0,0,0.5); 
  
  
  border: none; 
  
  cursor: pointer;
  z-index: 20;
  transform-style: preserve-3d;
  
  transition: top 0.5s, left 0.5s, box-shadow 0.3s; 
}

#card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg, 
    rgba(255,255,255,0.4) 0%, 
    rgba(255,255,255,0.1) 20%, 
    transparent 50%, 
    transparent 100%
  );
  /*border-radius: 16px;
  pointer-events: none;
  mix-blend-mode: overlay; */
}


#menuTop,#menuBottom {
  position:absolute; inset-inline:0; height:60px;
  display:flex; justify-content:center; align-items:center;
  opacity:0; transition:opacity .5s ease;
}
#menuTop    { top:0; }
#menuBottom { bottom:0; gap:1rem; }
#menuPentagon {
  width:30px; height:30px; background:#fff;
  clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);
}
#menuBottom button {
  padding:.5rem 1rem; border:none; border-radius:4px;
  background:rgba(255,255,255,.8); font-family:'Geo',sans-serif;
}


/* — CONTENT SCROLLABLE — */
#mainContent {
  display: none;
  position: relative;
  inset:0;
  overflow-y: auto;
  height: 100vh;
  background: linear-gradient(135deg, #1a1a1a, #000000, #2d2d2d);
}

/* — CCTV‑style mini‑screen — */
#screenWrapper {
  display: none;               
  position: absolute;
  width: 300px;
  height: 200px;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  border: 6px solid #222;
  border-radius: 40px 40px 100px 100px;
  box-shadow: 0 0 20px rgba(0,0,0,0.7);
  transition: top 1s ease;
  z-index: 10;
}
#screenWrapper.visible {
  display: block;
  top: 50px;
}
#closeScanner {
  position: absolute;
  top: 4px;
  right: 8px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 6;
}

/* — BANNER FIJO (aparece solo al hacer scroll) — */
#stickyBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(10px);
  padding: 1rem 0;
  text-align: center;
  z-index: 100;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.5s ease;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

#stickyBanner.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  display: block !important;
}

#bannerTitle {
  color: #fff;
  font-size: 1.5rem;
  margin: 0;
  font-family: 'Geo', sans-serif;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#bannerSubtitle {
  color: #ccc;
  font-size: 0.9rem;
  margin: 0.3rem 0 0 0;
  font-family: 'Geo', sans-serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* — MENÚS — */
#menuSection {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3rem;
  z-index: 50;
  opacity: 0;
  transition: all 0.5s ease;
}

#menuSection.visible {
  opacity: 1;
}

/* Menús descienden con el scroll y quedan debajo del banner */
#menuSection.scrolled {
  top: 5rem;
  bottom: auto;
  transform: translateX(-50%) scale(0.9);
}

.menu-title {
  color: #fff;
  font-size: 1.5rem;
  font-family: 'Geo', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 0 10px rgba(255,255,255,0.3);
  margin: 0;
}

/* Efectos neón específicos para cada menú */
.menu-title[data-section="desarrollo"]:hover {
  color: #00ff00;
  text-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00;
  transform: scale(1.2);
}

.menu-title[data-section="musica"]:hover {
  color: #ff6600;
  text-shadow: 0 0 20px #ff6600, 0 0 30px #ff6600, 0 0 40px #ff6600;
  transform: scale(1.2);
}

.menu-title[data-section="videojuegos"]:hover {
  color: #0066ff;
  text-shadow: 0 0 20px #0066ff, 0 0 30px #0066ff, 0 0 40px #0066ff;
  transform: scale(1.2);
}

.menu-title[data-section="diseno"]:hover {
  color: #ffff00;
  text-shadow: 0 0 20px #ffff00, 0 0 30px #ffff00, 0 0 40px #ffff00;
  transform: scale(1.2);
}

/* — FLECHA VOLVER ARRIBA — */
#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.3s ease;
}

#backToTop.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  display: flex !important;
}

#backToTop:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-5px);
}

#arrowUp {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* — CONTENIDO SCROLLABLE — */
.pageContent {
  margin-top: 100vh;
  padding: 2rem;
  min-height: 100vh;
  transition: padding-top 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

/* Habilitar contenido cuando la carta está flotando */
body.scroll-enabled .pageContent {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Ajustar padding cuando el banner está visible */
body.banner-visible .pageContent {
  padding-top: 6rem;
}

/* Deshabilitar scroll cuando la carta no está elevada */
body.scroll-disabled {
  overflow: hidden;
}

body.scroll-enabled {
  overflow-y: auto;
}

/* Ocultar completamente contenido cuando no flota */
body.scroll-disabled .pageContent { display: none; }

/* Utilidad para ocultar elementos */
.hidden { display: none !important; }

.content-section {
  margin-bottom: 4rem;
  padding: 2rem;
  background: rgba(255,255,255,0.05);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}

.content-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.content-section h3 {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 1rem;
  font-family: 'Geo', sans-serif;
}

.content-section p {
  color: #ccc;
  font-size: 1.1rem;
  line-height: 1.6;
}



/* ——— CRT / MONITOR EFFECT ——— */

/* 1. Contenedor principal: define la forma de la pantalla */
.crt-container {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  
  /* La curvatura de la pantalla física */
  background: transparent;
  box-shadow: 
    inset 0 0 3rem rgba(0,0,0,0.7), 
    inset 0 0 8rem rgba(0,0,0,0.4),
    inset 0 0 2px rgba(20, 20, 20, 0.5);
  display: none; 
  pointer-events: none; 
}

/* 2. Scanlines: Las líneas horizontales típicas */
.scanlines {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0) 50%,
    rgba(0,0,0,0.2) 50%,
    rgba(0,0,0,0.2)
  );
  background-size: 100% 4px;
  animation: scrollScanlines 10s linear infinite;
  opacity: 0.6;
}

/* 3. Glow/Parpadeo y Curvatura óptica */
.glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(18, 16, 16, 0) 50%, rgba(0,0,0,0.9) 100%);
  animation: flicker 0.15s infinite;
}

/* Opcional: Esto añade un brillo verde/fósforo a tus textos existentes */
body {
  text-shadow: 0 0 2px rgba(200, 255, 200, 0.3), 0 0 5px rgba(200, 255, 200, 0.1);
}

/* — ANIMACIONES — */

/* Simula el barrido vertical */
@keyframes scrollScanlines {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

/* El parpadeo sutil de los 60Hz */
@keyframes flicker {
  0% { opacity: 0.02; }
  5% { opacity: 0.05; }
  10% { opacity: 0.02; }
  15% { opacity: 0.06; }
  20% { opacity: 0.02; }
  50% { opacity: 0.02; }
  55% { opacity: 0.05; }
  60% { opacity: 0.02; }
  100% { opacity: 0.02; }
}

/* — TRUCO DE CURVATURA EXTRA (Opcional) — */
/* Si quieres que los bordes se vean realmente redondos como una TV vieja */
.crt-container::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}



/* ——— NUEVOS ESTILOS PARA LA SECUENCIA ——— */

/* Agregamos profundidad al escenario principal */
#mainContent {
  perspective: 1200px;
  overflow: hidden;    /* Para que nada se salga de la pantalla */
}


/* ESTILO DEL BOTÓN CONECTAR */
#connect-btn {
  position: absolute;
  inset:0;
  width: 100%;
  height: 100%;
  
  /* Estética Terminal */
  background: transparent;
  border: none;
  opacity: 0;
  cursor: pointer;
  z-index: 100;               /* Por encima del pentágono */
  
  /* Inicialmente invisible */
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* Hover effect del botón */
#connect-btn:hover {
  background: rgba(0, 255, 0, 0.13);
  color: #000;
  box-shadow: 0 0 15px #0f0;
}

/* ESTADO 1: FLOTANDO (Cuando la tarjeta sube) */
/* Activaremos esta clase con JS */
#card.floating {
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Cuando flota, mostramos el botón */
#card.floating #connect-btn {
  opacity: 1;
  pointer-events: auto;
}

/* ESTADO 2: DOCKED (Conectada al sistema) */
#card.docked {
  /* Forzamos la posición abajo al centro */
  top: auto !important;
  bottom: -40px !important;   /* Se hunde un poco en el borde */
  left: 50% !important;
  
  /* LA MAGIA 3D: La acostamos 70 grados */
  transform: translateX(-50%) rotateX(60deg) scale(0.7) !important;
  
  /* Feedback visual de conexión */
  border: 2px solid #0f0;
  box-shadow: 0 -20px 40px rgba(0, 255, 0, 0.4);
  z-index: 200;
  transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Ocultar el botón cuando ya está conectada */
#card.docked #connect-btn {
  opacity: 0;
  pointer-events: none;
}


/* ——— EL HOLOGRAMA (PANTALLA) ——— */
.hologram-screen {
  width: 100%;
  height: 100%;
  
  /* ——— FONDO CON TEXTURA Y TEMA DINÁMICO ——— */
  background: 
    /* 1. Viñeta central oscura (fija, siempre verdosa/oscura para legibilidad) */
    radial-gradient(circle, rgba(0, 20, 0, 0.4) 0%, rgba(0, 10, 0, 0.95) 100%),
    
    /* 2. Scanlines sutiles (usan el color del tema muy suave) */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(var(--holo-rgb), 0.05) 3px
    );
    
  /* Borde brillante pulsante usando el color del tema */
  border: 1px solid rgba(var(--holo-rgb), 0.5);
  
  /* Brillo interno y externo */
  box-shadow: 
    0 0 30px rgba(var(--holo-rgb), 0.15), 
    inset 0 0 50px rgba(0, 20, 0, 0.8);
  
  /* Color de texto base */
  color: rgb(var(--holo-rgb));
  
  /* Alineación */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  /* Animaciones */
  transform-origin: center center; 
  transform: scale(0, 0.05);
  opacity: 0;
  transition: all 0.5s ease;
}

/* ESTADO ACTIVO (ENCENDIDO) */
#hologram-deck.active .hologram-screen {
  transform: scale(1, 1);
  opacity: 1;
  pointer-events: auto;
}

#hologram-deck {
  position: absolute;
  
  /* COORDENADAS PARA CENTRARLO */
  top: 5vh;    /* 15% de margen superior (aire arriba) */
  bottom: 5vh;
  left: 5vw;    /* 5% margen izquierdo */
  right: 5vw;   /* 5% margen derecho */
  
  /* Opcional: Ancho máximo para que no se estire infinito en PC */
  max-width: 1200px;
  margin: 0 auto;
  
  pointer-events: none;
  z-index: 50;
  
  /* Aseguramos que el contenido interno (la pantalla verde) ocupe todo este espacio */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* — ESTILOS DEL CONTENIDO INTERNO — */
.holo-header {
  color: var(--holo-color);
  font-family: 'Geo';
  font-size: 2rem;
  margin-bottom: 2rem;
  text-shadow: 0 0 10px #0f0;
}

.holo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  width: 100%;
  max-width: 500px;
}

.holo-item {
  border: 1px solid var(--holo-color);
  color: #fff;
  padding: 1.5rem;
  text-align: center;
  font-family: 'Geo';
  font-size: 1.2rem;
  cursor: pointer;
  transition: 0.3s;
  background: rgba(0,0,0,0.5);
}

.holo-item:hover {
  background: #0f0;
  color: #000;
  box-shadow: 0 0 20px #0f0;
  transform: scale(1.05);
}

.holo-footer {
  margin-top: 3rem;
}

#disconnect-btn {
  background: transparent;
  border: 1px solid #ff0055;
  color: #ff0055;
  padding: 5px 15px;
  font-family: 'Geo';
  cursor: pointer;
  transition: 0.3s;
}

#disconnect-btn:hover {
  background: #ff0055;
  color: #fff;
}

/* CLASE UTILITARIA PARA OCULTAR COSAS VIEJAS SI MOLESTAN */
.hidden { display: none !important; }



/* ——— TÍTULOS (ESTADO FLOTANTE) ——— */
#bigTitle {
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5;
  transition: all 0.5s ease;
  width: 100%;
  pointer-events: none;
}

#bigTitle.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#bigTitle.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}

#mainTitle {
  color: #fff;
  font-size: 3.5rem;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

#subtitle {
  color: #0f0;
  font-size: 1.2rem;
  letter-spacing: 0.5rem;
  margin-top: 0.5rem;
}

/* ——— ANIMACIÓN DE APAGADO (TV OFF) ——— */

@keyframes tvOff {
  0% {
    transform: scale(1, 1);
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    transform: scale(1, 0.005);
    opacity: 0.8;
    filter: brightness(2);
  }
  100% {
    transform: scale(0, 0);
    opacity: 0;
  }
}

.tv-closing {
  /* Forzamos que la animación tenga prioridad sobre la transición normal */
  animation: tvOff 0.5s forwards ease-in-out !important; 
}


/* Color de los caracteres random mientras se decodifican */
.dud {
  color: #5f5;
  opacity: 0.7;
}




/* LAYOUT INTERNO */
.holo-header-bar {
  width: 100%;
  padding: 1rem;
  border-bottom: 1px solid rgba(var(--holo-rgb), 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Geo';
  font-size: 1.2rem;
}

#disconnect-btn {
  border: 1px solid var(--holo-color);
  color: var(--holo-color);
  background: transparent;
  padding: 0.2rem 0.8rem;
  cursor: pointer;
}

.holo-body {
  flex: 1;
  display: flex;
  width: 100%;
  overflow: hidden;
}

/* BARRA LATERAL (Contenedor Elástico) */
.holo-sidebar {
  width: 80px;
  border-right: 1px solid rgba(var(--holo-rgb), 0.3);
  
  /* FLEXBOX VERTICAL */
  display: flex;
  flex-direction: column;
  height: 100%;
  
  /* Si la pantalla es RIDÍCULAMENTE pequeña (tipo reloj), permitimos scroll */
  overflow-y: auto; 
  /* Ocultar barra de scroll fea en navegadores webkit */
  scrollbar-width: none; 
}
.holo-sidebar::-webkit-scrollbar { display: none; }


/* FOOTER SOCIAL EN SIDEBAR */
.sidebar-footer {
  margin-top: auto;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  border-top: 1px solid rgba(var(--holo-rgb), 0.3);
}

.social-link {
  color: rgba(var(--holo-rgb), 0.7);
  font-family: 'Geo';
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.2s;
}

.social-link:hover {
  color: rgb(var(--holo-rgb));
  text-shadow: 0 0 8px rgb(var(--holo-rgb));
  transform: scale(1.2);
}



/* BOTONES (Items Elásticos) */
.nav-btn {
  /* LA CLAVE: flex: 1 hace que todos crezcan o se encojan para llenar el espacio */
  flex: 1; 
  
  /* Límites para que no se vean ni gigantes ni microscópicos */
  max-height: 100px;
  min-height: 60px;
  
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(var(--holo-rgb), 0.1);
  color: rgba(var(--holo-rgb), 0.6);
  
  /* Alineación interna */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;     /* Centrado horizontal automático */
  gap: 8px;                /* Espacio entre icono y texto */
  
  /* Padding lateral solo por seguridad, el vertical lo maneja Flexbox */
  padding: 0 5px; 
  
  cursor: pointer;
  transition: all 0.3s;
}

.nav-btn:hover {
  background: rgba(var(--holo-rgb), 0.1);
  color: rgb(var(--holo-rgb));
  text-shadow: 0 0 8px rgba(var(--holo-rgb), 0.6);
}

/* ESTADO ACTIVO (Botón seleccionado) */
.nav-btn.active {
  /* Fondo iluminado suavemente */
  background: rgba(var(--holo-rgb), 0.15);
  
  /* Texto full color y brillante */
  color: rgb(var(--holo-rgb));
  text-shadow: 0 0 8px rgba(var(--holo-rgb), 0.6);
  
  /* INDICADOR VISUAL CLAVE: Borde grueso a la derecha */
  border-right: 4px solid rgb(var(--holo-rgb));
  
  /* Quitamos opacidad para que se vea sólido */
  opacity: 1;
  
  /* Sombra interna para profundidad */
  box-shadow: inset 0 0 15px rgba(var(--holo-rgb), 0.1);
}

.nav-btn .icon { font-size: 1.5rem; }
.nav-btn .label { font-size: 0.7rem; font-family: 'Geo'; }

/* AREA DE CONTENIDO */
.holo-content-area {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  position: relative;
}

.holo-view {
  /* Animación de entrada de secciones */
  animation: fadeInView 0.5s ease-out;
}
.holo-view.hidden { display: none; }
.holo-view.active { display: block; }

.section-title {
  font-size: 2rem;
  border-bottom: 2px dashed var(--holo-color);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

@keyframes fadeInView {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}




/* ——— ESTILOS VIEW: HOME ——— */

.home-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* En móvil, una sola columna */
@media (max-width: 768px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* AVATAR CON ESCÁNER */
.avatar-frame {
  width: 100%;
  aspect-ratio: 1/1;
  border: 2px solid rgba(var(--holo-rgb), 0.5);
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) sepia(20%) hue-rotate(90deg);
  opacity: 0.8;
}

/* Línea de escaneo animada */
.scanner-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgb(var(--holo-rgb));
  box-shadow: 0 0 10px rgb(var(--holo-rgb));
  animation: scanAvatar 3s ease-in-out infinite;
  will-change: top, opacity;
}

@keyframes scanAvatar {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.id-badge {
  margin-top: 0.5rem;
  font-family: 'Geo';
  font-size: 0.9rem;
  text-align: center;
  background: rgba(var(--holo-rgb), 0.1);
  padding: 0.5rem;
  border: 1px solid rgba(var(--holo-rgb), 0.3);
}

/* STATS */
.stats-box {
  background: rgba(var(--holo-rgb), 0.05);
  padding: 1rem;
  border-left: 3px solid rgb(var(--holo-rgb));
  margin-bottom: 1rem;
  font-family: 'Geo';
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(var(--holo-rgb), 0.2);
}

.stat-row .label { opacity: 0.7; }
.stat-row .value { font-weight: bold; }

.bio-text p {
  margin-bottom: 0.8rem;
  line-height: 1.4;
  opacity: 0.9;
}

/* LOGS */
.activity-log {
  border-top: 1px solid rgba(var(--holo-rgb), 0.3);
  padding-top: 1rem;
  font-family: 'Geo';
  font-size: 0.9rem;
}

.log-list {
  list-style: none;
  padding: 0;
  margin-top: 0.5rem;
}

.log-list li {
  margin-bottom: 0.3rem;
  opacity: 0.7;
}
.log-list li::before {
  content: "> ";
  color: rgb(var(--holo-rgb));
}





/* CAPA CONTENEDORA (El lienzo negro) */
#video-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #000;
  
  /* REGLA DE ORO: Ocultar lo que sobra para que no aparezca barra de scroll */
  overflow: hidden; 
  
  /* Flexbox para asegurar centrado extra (backup) */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* EL VIDEO (El contenido) */
#transition-video {
  /* 1. OBLIGAMOS al video a tener el tamaño exacto de la ventana */
  width: 100vw; 
  height: 100vh;
  
  /* 2. LA MAGIA: COVER */
  /* Esto dice: "Llena el contenedor sin deformar la imagen".
     Si la pantalla es alta (móvil), recorta los lados.
     Si la pantalla es ancha (PC), recorta arriba/abajo si hace falta. */
  object-fit: cover; 
  
  /* 3. EL ANCLAJE */
  /* Asegura que el recorte se haga siempre desde el centro hacia afuera */
  object-position: center center;
}




/* --- RESPONSIVE: Ocultar controles del carrusel en móviles --- */
@media (max-width: 768px) {
    #prev-btn, 
    #next-btn, 
    .carousel-controls {
        display: none !important;
    }
}



.cyber-swipe-hint {
    position: absolute;
    /* Lo empujamos bien abajo del carrusel */
    bottom: -40%; 
    left: 45%;
    transform: translateX(-50%);
    
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    font-weight: bold;
    color: rgb(255, 0, 0);
    letter-spacing: 4px;
    white-space: nowrap;
    
    /* Brillo de tubo de neón */
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.5);
    
    pointer-events: none; 
    z-index: 50;
    
    /* Animación de parpadeo eléctrico */
    animation: cyberFlicker 2s infinite;
    transition: opacity 0.4s ease;
}

@keyframes cyberFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { 
        opacity: 1; 
        text-shadow: 0 0 5px rgb(255, 0, 0), 0 0 15px rgb(255, 0, 0); 
    }
    20%, 22%, 24%, 55% { 
        opacity: 0.2; 
        text-shadow: none; 
    }
}

/* Cuando el JS lo mata al hacer touch */
.cyber-swipe-hint.fade-out {
    opacity: 0 !important;
    animation: none;
}