@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;900&family=Space+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Doto&display=swap');

:root {
  /* neutros */
  --blanco: #FFFFFF;  --crema: #FBF0D8;  --beige: #DAD2C8;  --negro: #111111;
  /* azules */
  --azul-950: #0A2450; --azul-900: #132C56; --azul-850: #043176; --azul-electrico: #023FA1;
  --azul-700: #2F5AA3; --azul-gris: #364D75; --azul-500: #7891BE; --azul-400: #94AEDA; --azul-100: #D6E4FF;
  /* rojos */
  --rojo-sangre: #630700; --rojo-vino: #8B011A; --rojo: #BD1B1F; --rojo-naranja: #D13F13;
  /* acentos */
  --amarillo: #F6BB02; --amarillo-pastel: #FAE170; --rosa: #FF97D0; --lima: #C3F380;
  --verde: #125603; --morado: #7523B4; --cerulean: #0D5072;

  /* tipografías */
  --f-titulo: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Space Mono', 'Courier New', monospace;
  --f-punto: 'Doto', 'Space Mono', monospace;

  /* colores activos (cambian por sección) */
  --fondo: var(--blanco); --texto: var(--azul-950); --acento: var(--azul-electrico); --resalte: var(--azul-100);
  --menu-ancho: 220px;
}

/* colores por sección */
body[data-seccion="portada"]           { --fondo: var(--blanco); --texto: var(--azul-950); --acento: var(--azul-electrico); }
body[data-seccion="free-thinking"]     { --fondo: var(--blanco); --texto: var(--azul-950); --acento: var(--rojo); }
body[data-seccion="portfolio"]         { --fondo: var(--crema);  --texto: var(--azul-950); --acento: var(--rojo); }
body[data-seccion="photo"]             { --fondo: var(--negro);  --texto: var(--azul-100); --acento: var(--azul-400); --resalte: var(--azul-gris); }
body[data-seccion="art"]               { --fondo: var(--blanco); --texto: var(--azul-950); --acento: var(--rojo-vino); }
body[data-seccion="projects"]          { --fondo: var(--azul-900); --texto: var(--azul-100); --acento: var(--amarillo); --resalte: var(--azul-850); }
body[data-seccion="travels"]           { --fondo: var(--beige);  --texto: var(--azul-950); --acento: var(--amarillo); }
body[data-seccion="archives"]          { --fondo: var(--crema);  --texto: var(--negro);    --acento: var(--rojo); }
body[data-seccion="text"]              { --fondo: var(--blanco); --texto: var(--azul-950); --acento: var(--azul-gris); }
body[data-seccion="especial-archives"] { --fondo: var(--blanco); --texto: var(--negro);    --acento: var(--rojo); }
body[data-seccion="notes"]             { --fondo: var(--azul-100); --texto: var(--azul-850); --acento: var(--rojo-naranja); --resalte: var(--blanco); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body { background: var(--fondo); color: var(--texto); font-family: var(--f-titulo); min-height: 100vh; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* contenido: deja espacio al menú */
main { padding: 96px calc(var(--menu-ancho) + 40px) 64px 40px; }

/* títulos y botones */
.titulo-seccion { font-size: clamp(48px, 9vw, 140px); font-weight: 900; letter-spacing: -0.03em; line-height: .9; }
.boton {
  font-family: var(--f-mono); font-size: 14px; padding: 8px 14px; border: 1px solid currentColor;
  border-radius: 999px; background: transparent; color: inherit; cursor: pointer; transition: background .2s, color .2s;
}
.boton:hover { background: var(--texto); color: var(--fondo); }
.mono { font-family: var(--f-mono); }
.punto { font-family: var(--f-punto); }

/* menú derecho */
.menu {
  position: fixed; top: 0; right: 0; height: 100vh; width: var(--menu-ancho);
  padding: 32px 28px; display: flex; flex-direction: column; gap: 28px;
  border-left: 1px solid currentColor; background: var(--fondo); z-index: 50;
}
.menu a { display: block; font-size: 20px; font-weight: 700; line-height: 1.1; transition: transform .25s, color .25s; }
.menu a .num { display: block; font-family: var(--f-mono); font-size: 12px; font-weight: 400; margin-bottom: 4px; }
.menu a:hover { transform: translateX(-8px); color: var(--acento); }
.menu a.activo { color: var(--acento); }
.menu a.activo .num::after { content: " ●"; }

/* ← y ⌂ arriba a la izquierda */
.nav-arriba { position: fixed; top: 24px; left: 24px; display: flex; gap: 8px; z-index: 50; }
.nav-arriba a {
  font-family: var(--f-mono); font-size: 14px; padding: 8px 14px; border: 1px solid currentColor;
  border-radius: 999px; background: var(--fondo); transition: background .2s, color .2s, transform .2s;
}
.nav-arriba a:hover { background: var(--texto); color: var(--fondo); transform: translateY(-2px); }

/* letras que se dispersan */
.dispersa .palabra { display: inline-block; white-space: nowrap; }
.dispersa .letra { display: inline-block; transition: transform .35s cubic-bezier(.2,.8,.2,1); }

/* pop-up con X */
.popup-fondo {
  position: fixed; inset: 0; background: rgba(10,36,80,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.popup-fondo.abierto { opacity: 1; pointer-events: auto; }
.popup {
  position: relative; background: var(--fondo); color: var(--texto);
  max-width: min(900px, 90vw); max-height: 88vh; overflow: auto; padding: 40px 32px 32px;
  transform: scale(.96); transition: transform .25s;
}
.popup-fondo.abierto .popup { transform: scale(1); }
.popup-cerrar {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid currentColor; background: var(--fondo); color: var(--texto);
  font-size: 16px; cursor: pointer; transition: transform .2s, background .2s, color .2s;
}
.popup-cerrar:hover { transform: rotate(90deg); background: var(--texto); color: var(--fondo); }

/* celular */
.menu-boton { display: none; }
@media (max-width: 800px) {
  main { padding: 88px 20px 48px; }
  .menu { width: 75vw; transform: translateX(100%); transition: transform .3s; }
  .menu.abierto { transform: translateX(0); }
  .menu-boton {
    display: block; position: fixed; top: 24px; right: 20px; z-index: 60;
    font-family: var(--f-mono); font-size: 14px; padding: 8px 14px; border: 1px solid currentColor;
    border-radius: 999px; background: var(--fondo); color: var(--texto);
  }
}
/* imagen al fondo del menú */
.menu-imagen {
  margin-top: auto; width: 100%; max-width: 160px;
  transform: rotate(-4deg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.menu-imagen:hover { transform: rotate(0deg) scale(1.08); }