/* Lo común a todas las páginas: colores, cabecera, menú, pie y cursor */

:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --line: rgba(10, 10, 10, .55);
  --pad: clamp(16px, 10.3vw, 206px);
  --hh: 60px;
  --ui: clamp(14px, 1.25vw, 24px);
  --ease: cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0a0a0a; --fg: #f2f2f2; --line: rgba(242, 242, 242, .45); }
}
:root[data-theme="dark"] { --bg: #0a0a0a; --fg: #f2f2f2; --line: rgba(242, 242, 242, .45); }

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .6s ease, color .6s ease;
}
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.page { min-height: 100svh; display: flex; flex-direction: column; }

/* Cabecera: marca, reloj y Menú */
header {
  position: sticky; top: 0; z-index: 6;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--hh);
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--ui);
  white-space: nowrap;
  transition: background-color .6s ease;
}
header .brand { justify-self: start; }
header .clock { text-align: center; font-variant-numeric: tabular-nums; }
.menu-btn { justify-self: end; transition: opacity .2s; }
.menu-btn:hover { opacity: .6; }

/* Menú a pantalla completa */
.overlay {
  position: fixed; z-index: 5;
  top: var(--hh); left: 0; right: 0; bottom: 0;
  background: var(--bg);
  padding: clamp(24px, 7vh, 80px) var(--pad);
  overflow-y: auto;
  visibility: hidden; opacity: 0;
  transition: opacity .25s, visibility 0s .25s, background-color .6s ease;
}
.overlay.open { visibility: visible; opacity: 1; transition: opacity .25s, background-color .6s ease; }
.overlay ol { list-style: none; }
.overlay li {
  opacity: 0; transform: translateY(.4em);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  transition-delay: calc(var(--i) * 45ms);
}
.overlay.open li { opacity: 1; transform: none; }
.overlay li > * {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .14em 0 .1em;
  border-bottom: 1px solid var(--line);
  font-size: clamp(40px, 6.2vw, 120px);
  letter-spacing: -.02em;
  line-height: 1.1;
  transition: opacity .2s;
}
.overlay li:first-child > * { border-top: 1px solid var(--line); }
.overlay li small { font-size: var(--ui); letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* Secciones que aún no tienen página */
.overlay li .soon { opacity: .35; }
@media (hover: hover) {
  .overlay ol:hover a { opacity: .35; }
  .overlay ol a:hover { opacity: 1; }
}

/* Pie: coordenadas, @borjaperfra y preferencias (idioma y modo oscuro) */
footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  padding: 0 var(--pad) clamp(28px, 10vh, 110px);
  margin-top: clamp(40px, 9vh, 100px);
  font-size: clamp(13px, 1vw, 20px);
  white-space: nowrap;
}
footer .handle { text-align: center; }
footer .handle:hover { opacity: .6; }
.prefs { justify-self: end; display: flex; align-items: center; gap: 1.6em; }
.langs { display: flex; gap: .2em; }
.langs button { opacity: .35; padding: 0 .15em; transition: opacity .2s; }
.langs button:hover, .langs button[aria-pressed="true"] { opacity: 1; }
.langs .sep { opacity: .35; }
#mode { display: inline-flex; align-items: center; }
#mode .o {
  display: inline-block; width: .78em; height: .78em; margin: 0 .04em;
  border: 1.5px solid currentColor; border-radius: 50%;
  transition: background-color .3s;
}
:root[data-theme="dark"] #mode .o { background: currentColor; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #mode .o { background: currentColor; } }

/* Cursor circular */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 13; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 1.5px solid #fff; border-radius: 50%;
  mix-blend-mode: difference;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .2s;
}
.cursor.big { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
@media (hover: hover) and (pointer: fine) {
  body, a, button { cursor: none; }
}
@media not ((hover: hover) and (pointer: fine)) {
  .cursor { display: none; }
}

/* Cabecera de cada sección: número del menú y nombre */
.kicker {
  display: flex; gap: 1.2em;
  font-size: var(--ui);
  margin-bottom: clamp(28px, 6vh, 72px);
}
.kicker span:first-child { font-variant-numeric: tabular-nums; }
.kicker h1, .kicker a { font: inherit; }
.kicker a:hover { opacity: .6; }

/* Enlaces dentro del texto */
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; transition: opacity .2s; }
.link:hover { opacity: .6; }

/* Listas: una fila por cosa, en grande y separadas por líneas finas, como el menú */
.rows { list-style: none; border-top: 1px solid var(--line); }
.rows li { border-bottom: 1px solid var(--line); }
.rows .row {
  display: grid; grid-template-columns: 1fr auto; column-gap: 2em; row-gap: .5em;
  padding: .5em 0 .6em;
  transition: opacity .2s;
}
.rows .title { font-size: clamp(26px, 2.6vw, 52px); line-height: 1.12; letter-spacing: -.015em; }
.rows .meta { grid-column: 1; font-size: var(--ui); }
.rows .side { grid-column: 2; grid-row: 1; font-size: var(--ui); font-variant-numeric: tabular-nums; padding-top: .4em; }
@media (hover: hover) {
  .rows:hover .row { opacity: .35; }
  .rows .row:hover { opacity: 1; }
}

/* Foto que sigue al cursor al pasar por algo que la tiene */
.peek {
  position: fixed; top: 0; left: 0; z-index: 9;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.peek img {
  display: block;
  max-width: min(44vw, 720px);
  max-height: 78vh;
  transform: scale(.9);
  transition: transform .4s var(--ease);
}
.peek.on { opacity: 1; }
.peek.on img { transform: none; }
@media not ((hover: hover) and (pointer: fine)) {
  .peek { display: none; }
}

/* Móvil */
@media (max-width: 720px) {
  .rows .row { grid-template-columns: 1fr; }
  .rows .side { grid-column: 1; grid-row: auto; padding-top: 0; }
  :root { --hh: 52px; }
  header { grid-template-columns: 1fr auto; }
  header .clock { display: none; }
  .overlay li > * { font-size: 8vw; }
  footer { grid-template-columns: 1fr auto; row-gap: 14px; }
  .prefs { display: contents; }
  .langs { grid-column: 2; grid-row: 1; justify-self: end; }
  footer .handle { grid-column: 1; grid-row: 2; text-align: left; }
  #mode { grid-column: 2; grid-row: 2; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .overlay li { transition: none; transform: none; }
  .peek img { transition: none; }
}