:root{
  --bg:#05070c;
  --panel:#0b1020;
  --panel-2:#0f172a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#38bdf8;
  --accent-2:#22d3ee;
  --radius:22px;
  --shadow:0 40px 120px rgba(0,0,0,.7);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-tap-highlight-color:transparent;}

/* disable text selection */ body, p, h1, h2, time, footer{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

html{scroll-behavior:smooth;}

/* accessible "skip to content" link */
.skip-link{
  position:fixed;
  left:-999px;
  top:12px;
  background:var(--panel);
  color:var(--text);
  padding:10px 14px;
  border-radius:10px;
  z-index:9999;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.6);
  transition: left .18s ease, transform .18s ease;
}
.skip-link:focus{ left:16px; transform:translateY(0); }

body{ background: radial-gradient(1200px 600px at 15% -10%, rgba(56,189,248,.12), transparent 60%), radial-gradient(900px 500px at 85% 10%, rgba(34,211,238,.08), transparent 60%), var(--bg); color:var(--text); line-height:1.9; overflow-x:hidden; }

/* subtle noise */ body::after{ content:""; position:fixed; inset:0; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="4"/></filter><rect width="120" height="120" filter="url(%23n)" opacity=".03"/></svg>'); pointer-events:none; z-index:-1; }

/* cursor glow */ .glow{
  position:fixed;
  left:0;
  top:0;
  width:360px; /* un poco más pequeño para menos intrusión */
  height:360px;
  background:radial-gradient(circle, rgba(56,189,248,.14), transparent 60%);
  filter: blur(8px);
  pointer-events:none;
  /* usar variables para mover en GPU */
  transform: translate(calc(var(--gx, 50) * 1px - 50%), calc(var(--gy, 50) * 1px - 50%));
  mix-blend-mode:screen;
  z-index:1;
  transition:opacity .35s linear;
  opacity:1;
  will-change:transform,opacity;
}

.container{ max-width:980px; margin:auto; padding:120px 20px 260px; position:relative; z-index:2; } /* aumento padding-bottom para espacio del footer */

header{ text-align:center; margin-bottom:180px; }

.avatar{
  width:150px;
  height:150px;
  border-radius:50%;
  /* quitar el background fijo para usar <img> como fuente editable */
  background: center/cover no-repeat;
  margin:0 auto 30px;
  position:relative;
  box-shadow:var(--shadow);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}

/* nuevo: imagen dentro del avatar — cambia solo el src para actualizar el logo */
.avatar img{
  width:100%;
  height:100%;
  display:block;
  border-radius:50%;
  object-fit:cover; /* mantiene el recorte circular y rellena el contenedor */
}

.avatar::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:260px;
  height:260px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(56,189,248,0.12), rgba(34,211,238,0.06) 30%, transparent 60%);
  filter: blur(22px);
  z-index:-1;
  opacity:0.95;
  animation: pulse 6s ease-in-out infinite;
}

@keyframes pulse{
  0%{ transform:translate(-50%,-50%) scale(.98); opacity:0.9 }
  50%{ transform:translate(-50%,-50%) scale(1.03); opacity:1 }
  100%{ transform:translate(-50%,-50%) scale(.98); opacity:0.9 }
}

.media{ position:relative; }
.media::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: calc(var(--radius) - 10px);
  transition: box-shadow .28s ease, transform .28s ease, opacity .28s ease;
  pointer-events:none;
}
article:hover .media::after{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 12px 40px rgba(2,6,23,0.45); transform: translateY(-2px); opacity:1 }

header h1{
  font-size:68px;
  font-weight:700;
  letter-spacing:-.03em;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  background-size:200% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: gradientShift 6s linear infinite;
}

@keyframes gradientShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

header p{ font-size:20px; color:var(--muted); max-width:640px; margin:24px auto 0; }

.posts{ display:flex; flex-direction:column; gap:160px; }

/* ajustes para reducir tamaño en desktop */
.posts{ gap:80px; } /* menos espacio entre cards */
article{
  max-width:840px;
  margin:0 auto;
  padding:36px; /* ligeramente más compacto */
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  opacity:0;
  transform:translateY(28px) scale(.995); /* menos desplazamiento y escala sutil */
  transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--delay, 0s);
}

/* contenedor que fija tamaño y aplica radio/ fondo */
.media{
  width:100%;
  /* permitir que la caja se ajuste a la imagen (sin forzar proporción) */
  border-radius: var(--radius);
  /* mostrar un marco sutil sin recortar la imagen */
  padding: 10px;
  background: linear-gradient(160deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible; /* importante: no recortar la imagen */
  max-width: 100%;
}

/* la imagen se adapta al ancho del card y mantiene su aspecto (se ve completa) */
article img{
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 420px; /* evita que imágenes muy altas estiren la card */
  display:block;
  transition: transform .35s ease;
  border-radius: calc(var(--radius) - 10px); /* radio interior para el marco */
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  background: transparent;
}

article img:hover{ transform: scale(1.02); }

article.visible{ opacity:1; transform:translateY(0) scale(1); }

article time{ font-size:12px; letter-spacing:.2em; color:#64748b; }

article h2{ font-size:42px; margin:20px 0 30px; letter-spacing:-.02em; background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

article p{ font-size:19px; color:#d1d5db; }

/* normalizar imágenes: tamaño fijo, recorte centrado */
@media(max-width:700px){ header h1{font-size:46px;} article h2{font-size:28px;} article p{font-size:17px;} article{padding:36px;} .avatar{width:120px;height:120px;} /* reducir altura de imagen en móvil */ .media{ padding:8px; /* en móvil dejamos que la imagen ocupe el ancho y ajuste su alto */ max-width:100%; } article img{ height:auto; max-height:none; } }

/* footer centrado y apartado */
footer{
  margin-top:160px;
  text-align:center;
  font-size:14px;
  color:#64748b;
  width:100%;
  display:block;
  z-index:2;
  padding:18px 0 28px;
}

@media(max-width:700px){
  footer{ margin-top:90px; padding:22px 0 34px; }
}

/* card hover lift */
article{ transition: transform .28s cubic-bezier(.2,.9,.28,1), box-shadow .28s ease; }
article:hover{ transform: translateY(-8px) scale(1.01); box-shadow:0 48px 140px rgba(0,0,0,0.62); }

/* background canvas for animated particles */
#bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0; /* sits above subtle noise (which was pushed behind) */
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0.95;
}