/* ===== BASE (no tocamos tu paleta) ===== */
:root{
  --header-h: 74px;                 /* altura visual de cabecera */

  /* ===== Control maestro de visibilidad de partículas =====
     Sube o baja este valor (0.0–1.0) para ajustar TODO el efecto.
     Si aún molestan, prueba 0.40 o 0.35. */
  --p-intensity: 0.55;

  /* Colores (blancos y blanco-azulados MUY suaves) */
  --p-white-1: rgba(255,255,255,.55);
  --p-white-2: rgba(255,255,255,.32);
  --p-bluew-1: rgba(215,228,255,.34);
  --p-bluew-2: rgba(190,210,255,.24);

  /* Tiles (densidad moderada) */
  --tile1x: 108px; --tile1y: 88px;
  --tile2x: 147px; --tile2y: 112px;
  --tile3x: 179px; --tile3y: 139px;
  --tile4x: 213px; --tile4y: 168px;
  --tile5x: 253px; --tile5y: 206px;
  --tile6x: 293px; --tile6y: 242px;

  /* Tamaño de “estrellas” (más pequeñas) */
  --r-lg-1: 1.10px;
  --r-lg-2: 1.00px;
  --r-sm-1: 0.85px;
  --r-sm-2: 0.75px;

  /* Opacidades base por capa (se escalan por --p-intensity) */
  --op1: .18;
  --op2: .14;
  --op3: .12;
  --op4: .10;
  --op5: .09;
  --op6: .08;

  /* Blur mayor para “fundir” con el fondo */
  --blur1: 1.1px;
  --blur2: 1.0px;
  --blur3: 0.9px;
  --blur4: 0.85px;
  --blur5: 0.8px;
  --blur6: 0.8px;

  /* Velocidades (rápidas pero suaves) */
  --spd1: 28s; --spd2: 36s; --spd3: 46s;
  --spd4: 60s; --spd5: 78s; --spd6: 96s;

  /* “Respiración” (atenuación leve, nunca 0) */
  --breath1: 2.8s;
  --breath2: 3.4s;
}

/* Fondo base oscuro (igual que antes) */
body{
  background: radial-gradient(circle at 20% -10%, #0f1732 0%, #0a0f26 35%, #070a1a 70%, #050715 100%);
  overflow-x:hidden;
}

/* ===== PARTICULAS — versión ultradiscreta =====
   - z-index por debajo del contenido
   - opacidad muy baja + blur
   - control maestro: --p-intensity
*/
html, body, :root { position: relative; }
html::before,
html::after,
body::before,
body::after,
:root::before,
:root::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  backface-visibility:hidden;
  will-change:transform, opacity, background-position;
  mix-blend-mode: normal;
  z-index: 0; /* debajo del contenido posicionado */
}

/* Capa A1 */
html::before{
  filter: blur(var(--blur1));
  opacity: calc(var(--op1) * var(--p-intensity));
  background-image:
    radial-gradient(var(--p-bluew-1) var(--r-lg-1), transparent var(--r-lg-1)),
    radial-gradient(var(--p-bluew-2) var(--r-sm-1), transparent var(--r-sm-1));
  background-size:
    var(--tile1x) var(--tile1y),
    var(--tile2x) var(--tile2y);
  background-position: 18px 26px, 63px 50px;
  animation:
    floatA var(--spd1) linear infinite,
    breatheSoft var(--breath1) ease-in-out infinite;
}

/* Capa A2 */
html::after{
  filter: blur(var(--blur2));
  opacity: calc(var(--op2) * var(--p-intensity));
  background-image:
    radial-gradient(var(--p-bluew-2) var(--r-lg-2), transparent var(--r-lg-2)),
    radial-gradient(var(--p-white-2) var(--r-sm-2), transparent var(--r-sm-2));
  background-size:
    var(--tile3x) var(--tile3y),
    var(--tile4x) var(--tile4y);
  background-position: 39px 78px, 120px 20px;
  animation:
    floatB var(--spd2) linear infinite,
    breatheSoft var(--breath2) ease-in-out infinite reverse;
}

/* Capa B1 */
body::before{
  filter: blur(var(--blur3));
  opacity: calc(var(--op3) * var(--p-intensity));
  background-image:
    radial-gradient(var(--p-white-1) var(--r-lg-1), transparent var(--r-lg-1)),
    radial-gradient(var(--p-bluew-1) var(--r-sm-1), transparent var(--r-sm-1));
  background-size:
    var(--tile4x) var(--tile4y),
    var(--tile5x) var(--tile5y);
  background-position: 80px 129px, 171px 56px;
  animation:
    floatC var(--spd3) linear infinite,
    breatheSoft var(--breath1) ease-in-out infinite;
}

/* Capa B2 */
body::after{
  filter: blur(var(--blur4));
  opacity: calc(var(--op4) * var(--p-intensity));
  background-image:
    radial-gradient(var(--p-bluew-1) var(--r-lg-2), transparent var(--r-lg-2)),
    radial-gradient(var(--p-white-2) var(--r-sm-2), transparent var(--r-sm-2));
  background-size:
    var(--tile5x) var(--tile5y),
    var(--tile6x) var(--tile6y);
  background-position: 23px 104px, 149px 18px;
  animation:
    floatD var(--spd4) linear infinite reverse,
    breatheSoft var(--breath2) ease-in-out infinite;
}

/* Capa C1 */
:root::after{
  filter: blur(var(--blur5));
  opacity: calc(var(--op5) * var(--p-intensity));
  background-image:
    radial-gradient(var(--p-white-1) var(--r-lg-1), transparent var(--r-lg-1)),
    radial-gradient(var(--p-white-2) var(--r-sm-1), transparent var(--r-sm-1));
  background-size:
    var(--tile2x) var(--tile2y),
    var(--tile3x) var(--tile3y);
  background-position: 94px 68px, 41px 175px;
  animation:
    floatE var(--spd5) linear infinite,
    breatheSoft var(--breath1) ease-in-out infinite reverse;
}

/* Capa C2 */
:root::before{
  filter: blur(var(--blur6));
  opacity: calc(var(--op6) * var(--p-intensity));
  background-image:
    radial-gradient(var(--p-bluew-1) var(--r-lg-2), transparent var(--r-lg-2)),
    radial-gradient(var(--p-bluew-2) var(--r-sm-1), transparent var(--r-sm-1));
  background-size:
    var(--tile1x) var(--tile1y),
    var(--tile2x) var(--tile2y);
  background-position: 10px 22px, 154px 122px;
  animation:
    floatF var(--spd6) linear infinite,
    breatheSoft var(--breath2) ease-in-out infinite;
}

/* —— Deriva orgánica (igual que antes, pero con menos presencia) —— */
@keyframes floatA {
  0%   { transform: translate3d(0,0,0) rotate(0.01deg); background-position: 18px 26px, 63px 50px; }
  33%  { transform: translate3d(-42px,-28px,0) rotate(0.06deg); background-position: -7px 8px, 36px 19px; }
  66%  { transform: translate3d(-92px,-60px,0) rotate(-0.04deg); background-position: -45px 29px, 10px -12px; }
  100% { transform: translate3d(-160px,-108px,0) rotate(0deg); background-position: -72px -21px, -24px -40px; }
}
@keyframes floatB {
  0%   { transform: translate3d(0,0,0) rotate(-0.02deg); background-position: 39px 78px, 120px 20px; }
  25%  { transform: translate3d(-34px,-40px,0) rotate(0.05deg);  background-position: 11px 39px, 94px -7px; }
  50%  { transform: translate3d(-74px,-64px,0) rotate(-0.03deg); background-position: -17px 17px, 60px -33px; }
  100% { transform: translate3d(-128px,-112px,0) rotate(0.01deg); background-position: -48px -10px, 26px -59px; }
}
@keyframes floatC {
  0%   { transform: translate3d(0,0,0) rotate(0.02deg); background-position: 80px 129px, 171px 56px; }
  30%  { transform: translate3d(-38px,-30px,0) rotate(-0.03deg); background-position: 46px 99px, 140px 21px; }
  80%  { transform: translate3d(-118px,-92px,0) rotate(0.04deg); background-position: -8px 51px, 93px -22px; }
  100% { transform: translate3d(-168px,-132px,0) rotate(0deg); background-position: -38px -7px, 24px -50px; }
}
@keyframes floatD {
  0%   { transform: translate3d(0,0,0) rotate(0.01deg); background-position: 23px 104px, 149px 18px; }
  25%  { transform: translate3d(-28px,-32px,0) rotate(-0.02deg); background-position: 5px 78px, 125px -8px; }
  75%  { transform: translate3d(-98px,-82px,0) rotate(0.03deg); background-position: -30px 28px, 76px -32px; }
  100% { transform: translate3d(-150px,-130px,0) rotate(0deg); background-position: -54px -5px, 34px -56px; }
}
@keyframes floatE {
  0%   { transform: translate3d(0,0,0) rotate(-0.02deg); background-position: 94px 68px, 41px 175px; }
  40%  { transform: translate3d(-52px,-44px,0) rotate(0.02deg);  background-position: 44px 29px, 6px 129px; }
  90%  { transform: translate3d(-140px,-116px,0) rotate(-0.03deg); background-position: -24px -19px, -36px 70px; }
  100% { transform: translate3d(-186px,-152px,0) rotate(0deg);    background-position: -50px -44px, -64px 30px; }
}
@keyframes floatF {
  0%   { transform: translate3d(0,0,0) rotate(0.01deg); background-position: 10px 22px, 154px 122px; }
  35%  { transform: translate3d(-40px,-36px,0) rotate(-0.02deg); background-position: -14px -2px, 126px 88px; }
  85%  { transform: translate3d(-130px,-108px,0) rotate(0.03deg); background-position: -58px -40px, 64px 2px; }
  100% { transform: translate3d(-180px,-150px,0) rotate(0deg);    background-position: -80px -62px, 22px -30px; }
}

/* Respiración sutil: rango muy corto, sin parpadeo */
@keyframes breatheSoft {
  0%   { opacity: .86 }
  50%  { opacity: .92 }
  100% { opacity: .88 }
}

/* Móviles: aún más suave para no ensuciar tipografía pequeña */
@media (max-width: 560px){
  :root{ --p-intensity: 0.45; }
  html::before, html::after, body::before, body::after, :root::before, :root::after{
    filter: blur(1.1px);
  }
}

/* Alto contraste: reduce más el ruido visual */
@media (prefers-contrast: more){
  :root{ --p-intensity: 0.40; }
}

/* Menos movimiento: congelar */
@media (prefers-reduced-motion: reduce){
  html::before, html::after, body::before, body::after, :root::before, :root::after{
    animation: none !important;
    opacity: calc(.12 * var(--p-intensity));
  }
}

/* ===== CABECERA STICKY con respiración vertical ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  background: linear-gradient(180deg, rgba(8,12,28,.86), rgba(8,12,28,.78));
  border-bottom: 1px solid rgba(148,163,184,.14);
}

/* más espacio arriba/abajo dentro del header */
.site-header .container{ padding-block: 14px; }

/* modo compacto */
.site-header.compact .container{ padding-block: 10px; }

/* === Author Callout === */
.author-callout{
  display:grid;
  grid-template-columns: 100px 1fr;
  gap:16px;
  padding:16px;
  border-radius:12px;
  border:1px solid #e7ddff;
}
.author-callout .author-media{
  display:flex; flex-direction:column; align-items:center;
}
.author-callout .author-media img{
  width:120px; height:120px; border-radius:50%;
  object-fit:cover; display:block;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.author-callout .author-name{
  margin-top:8px; font-weight:700; text-decoration:none; text-align:center; color:inherit;
}
.author-callout .author-content{ align-self:center; line-height:1.6; }
.author-callout .author-link{
  font-weight:600; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.15);
}

/* Responsive */
@media (max-width: 560px){
  .author-callout{
    grid-template-columns: 80px 1fr; gap:12px; padding:14px;
  }
  .author-callout .author-media img{ width:80px; height:80px; }
}

/* Tema oscuro opcional
@media (prefers-color-scheme: dark){
  .author-callout{
    background:rgba(255,255,255,.05);
    border-color:rgba(148,163,184,.25);
  }
  .author-callout .author-link{ border-bottom-color: rgba(255,255,255,.25); }
}
*/