/* ---------- Tokens de color ---------- */
:root {
  --bg: #f6f6f7;
  --superficie: #ffffff;
  --superficie-hover: #f9f9fa;
  --text: #18181b;
  --muted: #5b5b66;
  --border: #e4e4e7;
  --accent: #0a66d8;
  --esqueleto: #ececef;
  --cabecera: rgb(246 246 247 / 0.82);
  --sombra: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.04);
  --focus: #0a66d8;
  /* Sin banner, la portada lleva el degradado rosa de mu. */
  --mu: linear-gradient(135deg, #ffd1e8 0%, #ff8fc8 55%, #e0569e 100%);

  --gutter: 16px;
  --radius: 20px;
  --maxw: 760px;
  --alto-cabecera: 60px;

  color-scheme: light;
}

/* Modo oscuro: sigue siempre al sistema (no hay botón de tema). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e11;
    --superficie: #18181d;
    --superficie-hover: #1f1f25;
    --text: #f4f4f5;
    --muted: #a1a1aa;
    --border: #2a2a31;
    --accent: #5aa2ff;
    --esqueleto: #26262d;
    --cabecera: rgb(14 14 17 / 0.8);
    --sombra: none;
    --focus: #5aa2ff;
    --mu: linear-gradient(135deg, #5a1e45 0%, #a3326f 55%, #e0569e 100%);
    color-scheme: dark;
  }
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --alto-cabecera: 64px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Las anclas del menú no quedan debajo de la cabecera fija. */
  scroll-padding-top: calc(var(--alto-cabecera) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.contenido:focus { outline: none; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 8px 14px;
  background: var(--superficie);
  border-radius: 10px;
  z-index: 30;
}
.skip-link:focus { top: 12px; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Cabecera ---------- */
/* Fija arriba: nombre a la izquierda y menú con las secciones. En pantallas
   estrechas el menú se pliega tras «Menú» y se abre debajo de la cabecera. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cabecera);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--border);
}

.cabecera__dentro {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--maxw);
  height: var(--alto-cabecera);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.cabecera__nombre {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cabecera__botones {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.menu__lista {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__enlace {
  display: block;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.95rem;
  text-decoration: none;
}
.menu__enlace:hover { color: var(--text); background: var(--superficie); }

.menu-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--superficie);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.menu-boton:hover { background: var(--superficie-hover); }

.menu-boton { display: none; }

/* Icono de hamburguesa (tres rayas) que pasa a ✕ al abrir. */
.menu-boton__icono, .menu-boton__icono::before, .menu-boton__icono::after {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s;
}
.menu-boton__icono { position: relative; }
.menu-boton__icono::before, .menu-boton__icono::after { content: ""; position: absolute; left: 0; }
.menu-boton__icono::before { top: -5px; }
.menu-boton__icono::after { top: 5px; }
.menu-boton[aria-expanded="true"] .menu-boton__icono { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__icono::before { transform: translateY(5px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__icono::after { transform: translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .menu-boton__icono, .menu-boton__icono::before, .menu-boton__icono::after { transition: none; }
}

@media (max-width: 639px) {
  .menu-boton { display: inline-flex; }
  .menu-boton[hidden] { display: none; }

  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.08);
  }
  .menu--abierto { display: block; }
  .menu__lista { flex-direction: column; gap: 2px; }
  .menu__enlace { padding: 12px; border-radius: 12px; font-size: 1.05rem; color: var(--text); }
}

/* ---------- Contenido y secciones ---------- */
.contenido {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 24px var(--gutter) 48px;
}

.seccion + .seccion { margin-top: 48px; }

.seccion__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 16px;
}

.seccion__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.seccion__titulo .logo { height: 24px; width: auto; }

.enlace {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}
.enlace:hover { text-decoration: underline; }

.aviso {
  padding: 16px;
  color: var(--muted);
  background: var(--superficie);
  border: 1px solid var(--border);
  border-radius: 14px;
}

/* GitHub da su logo en negro y, en oscuro, en blanco: las dos versiones que permite. */
@media (prefers-color-scheme: dark) { .logo--github { filter: invert(1); } }

/* ---------- Sobre mí (portada) ---------- */
.seccion--sobre-mi {
  background: var(--superficie);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  overflow: hidden;
  /* El mismo margen abajo que el bloque de GitHub. */
  padding-bottom: 20px;
}

.perfil__banner {
  aspect-ratio: 3 / 1;
  max-height: 240px;
  width: 100%;
  background: var(--mu);
  background-size: cover;
  background-position: center;
}

.perfil__cabecera {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 24px;
  margin-top: -48px;
}

.perfil__avatar {
  flex: none;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 4px solid var(--superficie);
  background: var(--esqueleto);
  object-fit: cover;
}

/* El avatar pisa 48 px la franja; el nombre empieza justo debajo de ella. */
.perfil__nombres { min-width: 0; margin-top: 58px; }

.perfil__nombre {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.perfil__handle { color: var(--muted); overflow-wrap: anywhere; }

.perfil__bio, .perfil__cifras, .perfil__texto { margin-inline: 24px; }

.perfil__bio { margin-top: 16px; font-size: 1.05rem; }
.perfil__bio p + p, .perfil__texto p + p { margin-top: 0.75em; }
.perfil__bio:empty { display: none; }

.perfil__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 0;
  margin-top: 12px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.95rem;
}
.perfil__cifras strong { color: var(--text); }
.perfil__cifras:empty { display: none; }

.perfil__texto {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 1.05rem;
  line-height: 1.65;
}


@media (max-width: 479px) {
  .perfil__cabecera { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 20px; margin-top: -44px; }
  .perfil__avatar { width: 88px; height: 88px; }
  .perfil__nombres { margin-top: 0; }
  .perfil__bio, .perfil__cifras, .perfil__texto { margin-inline: 20px; }
  .perfil__banner { aspect-ratio: 5 / 2; }
}

/* ---------- Posts ---------- */
.posts {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.post + .post { border-top: 1px solid var(--border); }
.post--cargando { padding: 18px 20px; }

.post__enlace {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  text-decoration: none;
  transition: background-color 0.15s;
}
.post__enlace:hover { background: var(--superficie-hover); }
.post__enlace:focus-visible { outline-offset: -3px; }

.post__cuerpo { flex: 1; min-width: 0; }

.post__meta { color: var(--muted); font-size: 0.875rem; }

.post__texto {
  margin-top: 4px;
  white-space: pre-line;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

.post__miniatura { position: relative; flex: none; align-self: flex-start; }
.post__miniatura--video::after {
  content: "▶";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding-left: 3px;
  border-radius: 50%;
  color: #fff;
  background: rgb(0 0 0 / 0.55);
  font-size: 0.9rem;
}

.post__imagen {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--esqueleto);
}

@media (max-width: 479px) {
  .post__enlace { padding: 16px; gap: 12px; }
  .post__imagen { width: 72px; height: 72px; }
}

/* ---------- Ventana de un post ---------- */
/* Sin relleno en el <dialog>: así un clic con el dialog como destino es un clic en el fondo. */
.ventana {
  width: min(600px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100% - 2 * var(--gutter));
  padding: 0;
  color: var(--text);
  background: var(--superficie);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.25);
  overflow: hidden;
}
.ventana[open] { display: flex; flex-direction: column; }
.ventana::backdrop { background: rgb(0 0 0 / 0.55); }

.ventana__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 20px;
  border-bottom: 1px solid var(--border);
}
.ventana__titulo { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }

.ventana__cerrar {
  flex: none;
  width: 40px;
  height: 40px;
  font: inherit;
  font-size: 1.1rem;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.ventana__cerrar:hover { background: var(--superficie-hover); }

.ventana__cuerpo {
  display: grid;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ventana__fecha { color: var(--muted); font-size: 0.875rem; }
.ventana__texto { white-space: pre-line; overflow-wrap: anywhere; font-size: 1.05rem; line-height: 1.6; }

.ventana__imagenes { display: grid; gap: 4px; border-radius: 14px; overflow: hidden; }
.ventana__imagenes--2, .ventana__imagenes--3, .ventana__imagenes--4 { grid-template-columns: 1fr 1fr; }
.ventana__imagenes img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  background: var(--esqueleto);
}
.ventana__imagenes--2 img, .ventana__imagenes--3 img, .ventana__imagenes--4 img { aspect-ratio: 1; height: 100%; object-fit: cover; }

.ventana__video { display: block; width: 100%; height: auto; max-height: 70vh; border-radius: 14px; background: #000; }
.ventana__video--enlace { position: relative; overflow: hidden; text-decoration: none; }
.ventana__video--enlace img { width: 100%; height: auto; opacity: 0.85; }
.ventana__video--enlace span {
  position: absolute;
  inset: auto 12px 12px auto;
  padding: 8px 14px;
  color: #fff;
  background: rgb(0 0 0 / 0.7);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
}
.ventana__video--enlace:not(:has(img)) { min-height: 120px; }

.ventana__tarjeta, .ventana__cita {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: background-color 0.15s;
}
.ventana__tarjeta:hover, .ventana__cita:hover { background: var(--superficie-hover); }
.ventana__tarjeta img { width: 100%; height: auto; max-height: 260px; object-fit: cover; }
.ventana__tarjeta-texto { display: grid; gap: 2px; padding: 12px 14px; }
.ventana__tarjeta-dominio { color: var(--muted); font-size: 0.8rem; }
.ventana__tarjeta-descripcion, .ventana__cita-texto { color: var(--muted); font-size: 0.9rem; white-space: pre-line; overflow-wrap: anywhere; }
.ventana__cita { display: grid; gap: 4px; padding: 12px 14px; }
.ventana__cita-autor { font-size: 0.9rem; color: var(--muted); overflow-wrap: anywhere; }
.ventana__cita-autor strong { color: var(--text); }

.ventana__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ventana__cifras { color: var(--muted); font-size: 0.9rem; }
.ventana__pie .enlace { margin-left: auto; }

/* En el móvil, la ventana ocupa casi toda la pantalla. */
@media (max-width: 479px) {
  .ventana { width: calc(100% - 16px); max-height: calc(100% - 16px); }
  .ventana__cuerpo { padding: 16px; }
}

/* Con la ventana abierta, la página de detrás no se desplaza. */
html:has(.ventana[open]) { overflow: hidden; }

/* ---------- GitHub ---------- */
.github {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  text-decoration: none;
  background: var(--superficie);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  transition: background-color 0.15s, border-color 0.15s;
}
.github:hover { background: var(--superficie-hover); border-color: var(--muted); }

.github__avatar {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--esqueleto);
  object-fit: cover;
}

.github__cuerpo { flex: 1; min-width: 0; padding-right: 24px; }
.github__nombre { font-weight: 700; font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; }
.github__cuenta { color: var(--muted); font-size: 0.95rem; }
.github__bio { margin-top: 8px; overflow-wrap: anywhere; }

.github__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.95rem;
}
.github__cifras strong { color: var(--text); }

.github__flecha {
  position: absolute;
  top: 16px;
  right: 18px;
  color: var(--muted);
  font-size: 1.1rem;
}
/* La ↗ dice que el bloque se puede pulsar; con ratón ya lo dice el cambio al pasar por encima. */
@media (hover: hover) { .github__flecha { display: none; } }

/* ---------- Jugando ahora y Viendo ahora (mis webs privadas) ---------- */
/* Un bloque como el de GitHub y, dentro, el estante de mi biblioteca de videojuegos o de mi
   videoclub: tarjetas anchas, en fila y desplazables de lado, con la portada o el póster difuminado
   de fondo y el texto en blanco (en claro y en oscuro). */
.estante {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 16px;
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.estante:focus-visible { outline-offset: 2px; }

.ficha {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none;
  display: flex;
  gap: 14px;
  width: 300px;
  min-height: 140px;
  padding: 14px;
  border-radius: 14px;
  color: #fff;
  background: #2a2638;
  scroll-snap-align: start;
}

.ficha__fondo {
  position: absolute;
  inset: -30px;
  z-index: -1;
  width: calc(100% + 60px);
  max-width: none;
  height: calc(100% + 60px);
  object-fit: cover;
  filter: blur(26px) saturate(1.4) brightness(0.55);
  /* En su propia capa: Safari, dentro del estante con scroll, pintaba el difuminado solo a trozos. */
  transform: translateZ(0);
  will-change: transform;
}

.ficha__imagen {
  flex: none;
  width: 84px;
  height: 112px;
  border-radius: 8px;
  object-fit: cover;
  background: rgb(255 255 255 / 0.12);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.4);
}

/* Los pósters del videoclub son más estrechos (2:3). */
.ficha__imagen--poster { width: 76px; height: 114px; }

.ficha__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ficha__titulo {
  font-size: 1rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.ficha__meta { margin-top: 4px; font-size: 0.8125rem; opacity: 0.9; }
.ficha__detalle { font-size: 0.75rem; opacity: 0.8; }

.ficha__barra {
  margin-top: auto;
  height: 5px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.2);
  overflow: hidden;
}
.ficha__barra i { display: block; height: 100%; border-radius: 3px; background: #fff; }
.ficha__pie { margin-top: 3px; font-size: 0.6875rem; opacity: 0.8; }
.ficha__progreso {
  align-self: flex-start;
  margin-top: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.18);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Mientras carga, la tarjeta es un esqueleto más. */
.ficha--cargando { background: var(--esqueleto); }
.ficha--cargando .ficha__imagen { background: var(--superficie); box-shadow: none; }

@media (max-width: 479px) {
  .estante { padding: 12px; gap: 10px; scroll-padding-inline: 12px; }
  .ficha { width: 260px; min-height: 128px; }
}

/* ---------- Esqueletos (mientras cargan los datos) ---------- */
.esqueleto {
  display: block;
  border-radius: 6px;
  background: var(--esqueleto);
  animation: latido 1.4s ease-in-out infinite;
}
.esqueleto--linea { height: 0.9em; margin-top: 10px; }
.esqueleto--linea:first-child { margin-top: 4px; }
.esqueleto--corta { width: 45%; }

@keyframes latido { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* ---------- Pie ---------- */
.pie {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 24px var(--gutter) 40px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
}