/* ========================================= */
/* 1. FUENTES Y VARIABLES                    */
/* ========================================= */

@font-face {
  font-family: 'Pilowlava';
  src: url('../assets/fonts/Pilowlava-Regular.woff2') format('woff2'),
       url('../assets/fonts/Pilowlava-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* Paleta */
  --color-background: #DAD2CA;
  --color-accent: #FF5500;
  --color-accent-dark: #312824;
  --color-link: #257DCA;
  --color-text-dark: #2F2F2F;
  --color-text-soft: #5E4F40;

  /* Tipografías */
  --font-display: 'Pilowlava', sans-serif;
  --font-title: 'Space Grotesk', sans-serif; 
  --font-body: 'Source Sans Pro', sans-serif;
  --font-serif: 'Crimson Pro', serif;
  --font-mono: 'Source Code Pro', monospace;
}

/* ========================================= */
/* 2. ESTILOS GLOBALES (ACTUALIZADO)         */
/* ========================================= */

html {
  /* ESTA ES LA CLAVE PARA LA ANIMACIÓN SMOOTH */
  scroll-behavior: smooth;
}

body {
  background-color: #7c6a58;
  margin: 0;
  font-family: var(--font-body);
  color: #000;
  overflow-x: hidden;
}

/* ========================================= */
/* 3. MENÚ DE NAVEGACIÓN (ACTUALIZADO)       */
/* ========================================= */

.menu {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  right: 5vw; /* Un poco más de margen lateral */
  top: 50%;
  transform: translateY(-50%);
  position: fixed;
  z-index: 1000; 
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Alinear todo a la derecha */
  gap: 1rem; /* Espacio entre items del menú */
}

.menu li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px; /* Espacio entre el texto y la mancha */
  cursor: pointer;
  position: relative;
}

.menu-link {
  text-decoration: none;
  color: #000;
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 400; /* Normal por defecto */
  transition: font-weight 0.2s ease;
}

/* La mancha azul */
.nav-mark {
  width: 25px; /* Ajusta el tamaño según tu imagen */
  height: auto;
  opacity: 0; /* Oculta por defecto */
  transform: scale(0.5); /* Pequeña por defecto */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- ESTADO ACTIVO (CLASE .active) --- */

/* Cuando el LI tiene la clase active, el link se pone en negrita */
.menu li.active .menu-link {
  font-weight: 700; 
  /* Si la fuente no tiene 700, asegúrate de cargarla o usa text-shadow para simular */
}

/* Cuando el LI tiene la clase active, la mancha aparece */
.menu li.active .nav-mark {
  opacity: 1;
  transform: scale(1);
}

/* ========================================= */
/* 4. HERO SECTION (LA LANDING PAGE)         */
/* ========================================= */

/* El contenedor principal de la primera pantalla */
#desktop {
  width: 100vw;
  height: 100vh;
  display: flex;
  position: relative;
  z-index: 10;
}

/* Viewport mantiene el contenido centrado y organizado */
.viewport {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center; 
  padding: 10vh;
  box-sizing: border-box; /* Importante para que el padding no rompa el ancho */
}

/* Divisor Izquierdo (Vacío, para dejar ver la foto) */
#left-div {
  width: 50%;
  height: 100%;
}

/* Divisor Derecho (Contiene textos: Fecha, Intro, Toggle) */
#right-div {
  width: 50%;
  height: 100%;
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  z-index: 10;
}

/* ELEMENTOS DE FONDO FIJOS (ALEIX, TÍTULO) */
.container {
  position: absolute;
  z-index: 5;
}

.background {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: #e8dfd7;
  z-index: 1;
}

.thumbnail,
.title {
  position: fixed; /* Se quedan quietos al hacer scroll */
  object-position: left center;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  top: 0;
  left: 0;
}

.title {
  mix-blend-mode: difference;
  z-index: -1;
}

.thumbnail {
  z-index: -3;
}

/* LINTERNA / OVERLAY */
.overlay-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: mask-image;
  -webkit-mask-image: radial-gradient(circle 300px at center, black 0%, black 70%, transparent 100%);
  mask-image: radial-gradient(circle 300px at center, black 0%, black 70%, transparent 100%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.overlay-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-wrapper img.overlay-aleix {
  object-position: left center;
}

.overlay-wrapper img.overlay-bg {
  object-position: right center;
}



/* EASTER EGG LINK */
/* .easter-egg-link {
  position: absolute;

  right: 18%;
  top: 42%;

  width: 12vw;
  max-width: 180px;
  min-width: 100px;

  height: 6vh;
  max-height: 80px;
  min-height: 40px;

  cursor: pointer;

  z-index: 200;

  background: rgba(255, 0, 0, 0); 
  pointer-events: none;
}

body.flashlight-active .easter-egg-link {
  pointer-events: auto;
} */









/* --- CONTENEDOR PADRE --- */
.informative {
  position: relative; 
  z-index: 60; /* Aseguramos prioridad */
  font-family: var(--font-mono); 
  font-size: 0.9rem;
  height: 30%;
  width: 100%;
  
  /* Alineación de la columna */
  display: flex;
  flex-direction: column;
  align-items: flex-end; 
  
  /* IMPORTANTE: Permitir que el botón sobresalga si su área de clic es grande */
  overflow: visible; 
}

.informative > div {
  padding-bottom: 0.7vh;
}


/* ========================================= */
/* BOTÓN MODO VISIÓN (CONTROL GLOBAL)        */
/* ========================================= */

.vision-btn {
  position: fixed;

  /* Referencia clara */
  bottom: 2rem;
  left: 2rem;

  /* Área de click correcta (mínimo accesible) */
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  cursor: pointer;

  z-index: 1001;
  transition:
  opacity 0.5s cubic-bezier(0.4, 0.0, 0.2, 1),
  transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);

  opacity: 1;
  transform: scale(1);
}

/* Icono visual */
.vision-icon-img {
  width: 28px;
  height: auto;
  pointer-events: none;

  opacity: 0.3;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.vision-btn:hover .vision-icon-img {
  transform: scale(1.15);
  opacity: 1;
}

.vision-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}


/* === VISIBILITY CONTROL VISION MODE === */

.vision-btn {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.vision-hidden {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

/* Zona secreta: invisible por defecto */
.easter-egg-link {
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.flashlight-active .easter-egg-link {
  opacity: 1;
}










/* Eliminamos los estilos viejos si quedan por ahí (.vision-toggle input...) */
.presentation-text {
  height: 25%; 
  display: flex; 
  flex-direction: column;
  justify-content: space-between;
}

.intro {
  padding-left: 10%;
  font-family: var(--font-serif);
  max-width: 30vw;
  font-size: 1.7rem;
}

.scroll-down {
  display: flex;
  justify-content: right;
  font-size: 0.75rem;
}








/* -------------------------------------------------- */
/* --- SECCIÓN PROYECTOS (ESTILO WIREFRAME) --- */
/* -------------------------------------------------- */

#projects-section {
  position: relative;
  background-color: var(--color-background);
  padding: 15vh 10vw;
  min-height: 100vh;
  z-index: 20;
}

.projects-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- CABECERA Y TAGS SUPERIORES --- */
.projects-header {
  margin-bottom: 4rem;
}

.section-title {
  font-family: var(--font-title);
  font-size: 6rem;
  color: var(--color-accent);
  margin: 0 0 1.5rem 0;
  line-height: 0.9;
  letter-spacing: -2px;
}

/* Estilo "Pill" (Píldora) para los tags de arriba */
.header-tags {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.pill-tag {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-dark);
  
  /* Borde fino y esquinas redondas */
  border: 1px solid var(--color-text-dark);
  border-radius: 50px;
  padding: 0.5rem 1.2rem;
  
  background: transparent;
  
  /* Importante: cursor por defecto para indicar que no es un link */
  cursor: default; 
  opacity: 0.8;
  
  /* Hemos eliminado 'transition' y el bloque '.pill-tag:hover' */
}


/* --- LISTA DE PROYECTOS --- */
.hover-list {
  list-style: none;
  padding: 0; margin: 0;
  width: 100%;
}

.hover-item {
  /* Líneas separadoras muy finas y sutiles */
  border-top: 1px solid rgba(47, 47, 47, 0.15); 
  position: relative;
  transition: border-color 0.3s ease;
}

.hover-link {
  display: grid;
  /* Grid: Año (pequeño) | Título | Categoría (derecha) */
  grid-template-columns: 50px 1fr auto; 
  align-items: center;
  text-decoration: none;
  color: var(--color-text-dark);
  padding: 1.5rem 0; /* Más aire vertical */
  cursor: pointer;
  width: 100%;
}

/* Estilos de texto de la lista */
.p-year {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.5;
}

.p-title {
  font-family: var(--font-title); /* Space Grotesk */
  font-size: 1.6rem; /* Tamaño medio */
  font-weight: 500;
  margin: 0;
  padding-left: 2rem; /* Separación del año */
  transition: transform 0.3s ease;
}

.p-list-cat {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  opacity: 0.4;
  letter-spacing: 1px;
}

/* Hover en la lista */
.hover-item:hover {
  border-top-color: var(--color-text-dark); /* Línea se oscurece */
}
.hover-item:hover .p-title {
  transform: translateX(10px); /* Título se mueve */
}
/* Al hacer hover, los otros items se apagan */
.hover-list:hover .hover-link { opacity: 0.3; }
.hover-list .hover-link:hover { opacity: 1; }



/* BOTÓN ARCHIVE */
.archive-link-container {
  margin-top: 4rem;
  text-align: left;
}

.btn-archive {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--color-text-dark);
  border: 1px solid var(--color-text-dark);
  padding: 0.8rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-archive:hover {
  background-color: var(--color-text-dark);
  color: #fff;
}











/* ========================================= */
/* 6. SECCIÓN ABOUT ME                       */
/* ========================================= */

#about {
  position: relative;
  background-color: var(--color-background);
  min-height: 100vh;
  padding: 15vh 10vw;
  z-index: 20;
}

.about-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 5vw;
  align-items: flex-start;
}

/* --- COLUMNA IZQUIERDA (VISUAL) --- */
.about-visual {
  width: 40%;
  position: relative;
}

.about-image-frame {
  width: 100%;
  aspect-ratio: 3/4; /* Formato retrato */
  border: 1px solid var(--color-text-dark);
  position: relative;
  overflow: hidden;
}

/* El bloque de color sólido que pediste */
.image-placeholder-solid {
  width: 100%;
  height: 100%;
  background-color: var(--color-accent); /* Color Naranja, cámbialo si prefieres otro */
  opacity: 0.1; /* Transparente para ver las líneas X, o súbelo a 1 para sólido total */
}

.visual-caption {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.6;
  border-top: 1px solid rgba(0,0,0,0.2);
  padding-top: 0.5rem;
}

/* --- COLUMNA DERECHA (CONTENIDO) --- */
.about-content {
  width: 55%;
  padding-top: 1rem; /* Alinear visualmente con la foto */
}

/* Reutilizamos .section-title pero ajustamos márgenes si hace falta */

.bio-text {
  margin-bottom: 4rem;
  max-width: 90%;
}

.bio-text p {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
}

.bio-text .highlight-p {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  font-family: var(--font-title); /* Space Grotesk */
}

/* TOOLBOX AREA */
.toolbox-area {
  border-top: 1px solid var(--color-text-dark);
  padding-top: 2rem;
}

.toolbox-title {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
  opacity: 0.7;
}

.toolbox-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tool-group {
  display: grid;
  grid-template-columns: 100px 1fr; /* Etiqueta | Tags */
  align-items: center;
}

.tool-label {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.1rem;
}

.tool-tags {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}






/* ========================================= */
/* 7. SECCIÓN CONTACTO (FINAL)               */
/* ========================================= */

#contact {
  position: relative;
  background-color: var(--color-background);
  min-height: 80vh; /* No hace falta que sea 100vh si no hay tanto contenido */
  padding: 10vh 5vw 5vh 5vw; /* Padding inferior ajustado */
  z-index: 20;
  display: flex;
  align-items: flex-end; /* Contenido pegado abajo */
}

.contact-wrapper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* ETIQUETA SUPERIOR */
.contact-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  border: 1px solid var(--color-text-dark);
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 1rem;
}

.contact-title {
  font-family: var(--font-title);
  font-size: 3rem;
  margin: 0 0 3rem 0;
  color: var(--color-text-dark);
}

/* --- EMAIL GIGANTE --- */
.email-container {
  border-top: 1px solid var(--color-text-dark);
  padding: 4rem 0;
}

.big-email {
  font-family: var(--font-title); /* Pilowlava */
  font-size: 6vw; /* Responsive: ocupa el 8% del ancho de pantalla */
  text-decoration: none;
  color: var(--color-text-dark);
  line-height: 1;
  display: block;
  transition: color 0.3s ease, transform 0.3s ease;
  word-break: break-all; /* Evita que se rompa feo en móvil */
}

.big-email:hover {
  color: var(--color-accent);
  transform: translateX(20px); /* Pequeño desplazamiento a la derecha */
}

/* --- GRID INFORMATIVO --- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
  border-top: 1px solid var(--color-text-dark);
  padding-top: 2rem;
  padding-bottom: 4rem;
  gap: 2rem;
}

.col-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.5;
  display: block;
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  padding: 0; margin: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a, .col-text {
  font-family: var(--font-title);
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--color-text-dark);
  transition: opacity 0.2s;
}

.footer-links a:hover {
  opacity: 0.6;
  text-decoration: underline;
}

#footer-clock {
  font-family: var(--font-mono); 
}

/* --- FOOTER BOTTOM --- */
.footer-bottom {
  border-top: 1px solid rgba(47, 47, 47, 0.2);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.back-to-top {
  text-decoration: none;
  color: var(--color-text-dark);
  border: 1px solid var(--color-text-dark);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.back-to-top:hover {
  background-color: var(--color-text-dark);
  color: var(--color-background);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr; /* Una sola columna en móvil */
    gap: 3rem;
  }
  .big-email {
    font-size: 12vw; /* Más grande en móvil */
  }
}








/* RESPONSIVE */
@media (max-width: 900px) {
  .about-container {
    flex-direction: column;
  }
  .about-visual {
    width: 100%;
    margin-bottom: 3rem;
  }
  .about-image-frame {
    aspect-ratio: 16/9; /* En móvil más apaisado */
  }
  .about-content {
    width: 100%;
  }
  .tool-group {
    grid-template-columns: 1fr; /* Stackear label y tags */
    gap: 0.5rem;
  }
}


/* RESPONSIVE */
@media (max-width: 768px) {
  .section-title { font-size: 4rem; }
  #project-preview-card { display: none; } /* Ocultar en móvil */
  
  .viewport {
    flex-direction: column;
    padding: 5vh;
  }
  #left-div, #right-div {
    width: 100%;
  }
  #right-div {
    align-items: flex-start;
  }
}


/* RESPONSIVE MÓVIL */
@media (max-width: 768px) {
  .archive-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .archive-title { font-size: 3.5rem; }
  
  /* En móvil cambiamos el grid a una lista vertical simple */
  .table-header { display: none; } /* Ocultar cabeceras */
  
  .table-row {
    grid-template-columns: 1fr; /* Una sola columna */
    grid-template-areas: 
      "year"
      "name"
      "role";
    gap: 0.3rem;
    padding: 1.5rem 0; /* Más espacio vertical */
  }
  
  .col-year { grid-area: year; font-size: 0.7rem; opacity: 0.6; }
  .col-name { grid-area: name; font-size: 1.8rem; }
  .col-role { grid-area: role; opacity: 0.8; font-size: 0.75rem; margin-top: 0.5rem;}
  .col-link { display: none; } /* Ocultar flecha en móvil */
  
  .table-row:hover {
    padding-left: 0.5rem; /* Menos desplazamiento en móvil */
  }
}


/* ========================================= */
/* ESTILOS NUEVOS PARA ARCHIVES.HTML         */
/* ========================================= */

/* Fondo y contenedor de la página de archivos */
.archive-body {
  background-color: var(--color-background);
  min-height: 100vh;
  padding-bottom: 10vh;
}

.archive-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15vh 5vw 5vh 5vw;
}

/* Botón Volver */
.back-btn {
  position: fixed;
  top: 2rem; left: 2rem;
  font-family: var(--font-mono); font-size: 0.8rem;
  text-decoration: none; color: var(--color-text-dark);
  border: 1px solid var(--color-text-dark);
  padding: 0.5rem 1rem; border-radius: 50px;
  z-index: 100; background-color: var(--color-background);
  transition: all 0.3s ease;
}
.back-btn:hover { background-color: var(--color-text-dark); color: #fff; }

/* Cabecera Archivo */
.archive-header {
  border-bottom: 2px solid var(--color-text-dark);
  padding-bottom: 1rem; margin-bottom: 4rem;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.archive-title {
  font-family: var(--font-display); font-size: 5rem;
  line-height: 0.8; color: var(--color-accent); margin: 0;
}
.archive-meta {
  font-family: var(--font-mono); font-size: 0.8rem;
  text-align: right; display: flex; flex-direction: column;
}

/* Categorías y Tabla */
.archive-category { margin-bottom: 6rem; }
.category-title {
  font-family: var(--font-mono); font-size: 0.9rem;
  color: var(--color-text-dark); margin-bottom: 1.5rem;
  opacity: 0.6; text-transform: uppercase; letter-spacing: 1px;
}
.archive-table { display: flex; flex-direction: column; }

/* Filas de la tabla */
.table-header {
  display: grid; grid-template-columns: 0.5fr 2fr 2fr 0.5fr;
  padding: 0.5rem 1rem; font-family: var(--font-mono); font-size: 0.7rem;
  text-transform: uppercase; opacity: 0.5;
  border-bottom: 1px solid rgba(47, 47, 47, 0.2);
}
.table-row {
  display: grid; grid-template-columns: 0.5fr 2fr 2fr 0.5fr;
  padding: 1.2rem 1rem; text-decoration: none; color: var(--color-text-dark);
  border-bottom: 1px solid rgba(47, 47, 47, 0.2);
  align-items: center; transition: all 0.2s ease;
}
.table-row:hover {
  background-color: var(--color-text-dark); color: #fff;
  padding-left: 1.5rem; border-bottom-color: var(--color-text-dark);
}

/* Columnas */
.col-year { font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.7; }
.col-name { font-family: var(--font-title); font-size: 1.5rem; font-weight: 500; }
.col-role { font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.col-link {
  font-family: var(--font-mono); font-size: 0.8rem; text-align: right;
  opacity: 0; transform: translateX(-10px); transition: all 0.3s ease;
}
.table-row:hover .col-link { opacity: 1; transform: translateX(0); color: var(--color-accent); }




/* ======================================================= */
/* SISTEMA DE TARJETAS FLOTANTES UNIFICADO (FINAL)         */
/* ======================================================= */

/* 1. ESTRUCTURA COMPARTIDA (Home + Archives) */
.card-inner {
  width: 100%; height: 100%; position: relative;
  background-color: rgba(47, 47, 47, 0.05);
  border: 1px solid var(--color-text-dark);
  overflow: hidden; box-sizing: border-box;
}

.card-cross-lines {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 10; pointer-events: none; opacity: 0.3;
  background: 
    linear-gradient(to top right, transparent calc(50% - 0.5px), #000 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), #000 50%, transparent calc(50% + 0.5px));
}

.card-large-text {
  z-index: 20; position: absolute; bottom: 1.5rem; left: 1.5rem;
  font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700;
  text-transform: uppercase; color: var(--color-text-dark); letter-spacing: -1px;
}

#card-image, #archive-card-image {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0.4; filter: grayscale(20%); transition: opacity 0.3s ease;
  position: relative; z-index: 1;
}

/* 2. TARJETA HOME (Se mueve ABSOLUTE a la derecha) */
#project-preview-card {
  width: 500px; 
  height: 320px;
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 50;
  pointer-events: none; 
  opacity: 0; 
  /* Usamos la misma transición que en archives para que se mueva fluido */
  transition: opacity 0.2s ease, transform 0.1s linear; 
  /* Un valor inicial fuera de pantalla para que no parpadee */
  transform: translate(-100%, -100%);
}

#project-preview-card.active { 
  opacity: 1; 
}

/* 3. TARJETA ARCHIVES (Se mueve FIXED con el ratón) */
#archive-preview-card {
  width: 420px; height: 280px;
  position: fixed; top: 0; left: 0; z-index: 50;
  pointer-events: none; opacity: 0; transform: translate(20px, 20px);
  transition: opacity 0.2s ease, transform 0.1s linear;
}
#archive-preview-card.active { opacity: 1; }





/* ========================================= */
/* PROTECCIÓN DE IMÁGENES (ANTI-ROBO)        */
/* ========================================= */

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;

  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}