@font-face { font-family:"Geist"; src:local("Geist"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:local("JetBrains Mono"); font-weight:100 800; font-style:normal; font-display:swap; }

/* Tokens */
:root{
  --bg:#000000;
  --brand:#009D5F;
  --brand-dim:#294A44;
  --logo:#D1D5DB;
  --mono-dim:#89AA90;
  --footer-text:#4E7D74;

  /* hovers */
  --hover-menu:#07C790;
  --hover-social:#41736A;

  /* easing / tiempos */
  --ease:cubic-bezier(.2,.8,.2,1);
  --t-150:150ms; --t-200:200ms;

  /* ruido: puro blanco/negro */
  --noise-a:#FFFFFF;
  --noise-b:#000000;

  --container-max:1160px;

  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px;
  --s-32:32px; --s-64:64px; --s-128:128px;

  --geist:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-12:12px; --fs-14:14px; --fs-16:16px;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background:var(--bg); color:#e6ede9; font-family:var(--geist); }
img{ display:block; max-width:100%; height:auto; }
svg{ display:block; }

/* Utils tipografía */
.fs-12{ font-size:var(--fs-12); }
.fs-14{ font-size:var(--fs-14); }
.fs-16{ font-size:var(--fs-16); }
.mono{ font-family:var(--mono); }
.geist-500{ font-family:var(--geist); font-weight:500; }

/* Utils márgenes */
.mb-0{ margin-bottom:0; }
.mb-8{ margin-bottom:var(--s-8); }
.mb-16{ margin-bottom:var(--s-16); }
.mb-24{ margin-bottom:var(--s-24); }
.mb-32{ margin-bottom:var(--s-32); }
.mb-64{ margin-bottom:var(--s-64); }
.mb-128{ margin-bottom:var(--s-128); }
.mt-32{ margin-top:var(--s-32); }

/* Layout */
.container{
  width:100%; max-width:var(--container-max);
  margin-inline:auto;
  padding:0 var(--s-16);
}

.flex-row{ display:flex; align-items:center; }
.gap-8{ gap:var(--s-8); }
.icon-24{ width:24px; height:24px; }

/* Header */
.site-header{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s-16); }
.site-menu-left{ display:flex; align-items:center; gap:var(--s-16); color:var(--brand); }
.site-logo{ justify-self:center; color:var(--logo); }
.logo-svg{ max-height:48px; }
.site-socials{ justify-self:end; display:flex; align-items:center; gap:var(--s-16); color:var(--brand-dim); }

/* Menu items - color + transición */
.site-menu-left .menu-item{
  color:var(--brand);
  text-decoration:none;
  transition: color var(--t-200) var(--ease);
}
.site-menu-left .menu-item:hover{ color:var(--hover-menu); }

/* Menú: usa currentColor sin rellenar el rect del crate */
.site-menu-left .menu-item svg path{ fill: currentColor; }
.site-menu-left .menu-item svg rect{ fill: none; stroke: currentColor; }

/* Social icons - color + transición suave */
.site-socials .social{
  color:var(--brand-dim);
  transition: color var(--t-200) var(--ease), transform var(--t-150) var(--ease);
}
.site-socials .social:hover{
  color:var(--hover-social);
  transform:translateY(-1px);
}
/* Redes: currentColor sólo en paths */
.site-socials .social svg path{ fill: currentColor; }

/* Hover guion bajo sin mover layout */
.menu-underscore{ position:relative; display:inline-block; }
.menu-underscore::after{ content:"_"; position:absolute; right:-0.6em; top:0; opacity:0; }
.menu-item:hover .menu-underscore::after{ opacity:1; animation:blink 1s step-start infinite; }
@keyframes blink{ 50%{opacity:0;} }

/* Grid */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-32); }
.card{ color:#fff; }

/* Marco cuadrado */
.card-frame{
  border:1px solid var(--brand-dim);
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#0C1614; /* fill para locked */
}

/* Unlocked */
.card.unlocked .card-frame{
  background:transparent;
  border:1px solid var(--brand-dim);
  transition: border-color var(--t-200) var(--ease);
}
/* Borde verde 2px con fade-in (sin “salto”) */
.card.unlocked .card-frame::after{
  content:"";
  position:absolute; inset:0;
  border:2px solid var(--brand);
  opacity:0; pointer-events:none;
  transition: opacity var(--t-200) var(--ease);
}
/* En hover oculto el borde 1px y muestro el de 2px */
.card.unlocked .card-frame:hover{ border-color: transparent; }
.card.unlocked .card-frame:hover::after{ opacity:1; }

.cover{ width:100%; height:100%; object-fit:cover; background:#000; }

/* Play */
.play-btn{
  position:absolute; right:var(--s-16); bottom:var(--s-16);
  background:var(--brand); padding:var(--s-8);
  display:grid; place-items:center; border:0;
}

/* Meta (título/fecha) */
.meta{
  margin-top:var(--s-12);
  color:var(--mono-dim);
  font-family:var(--mono); font-weight:500; font-size:var(--fs-14);
  position:relative; display:inline-block;
}
.card:hover .meta::after{ content:"_"; position:absolute; right:-0.6em; top:0; animation:blink 1s step-start infinite; }

/* Locked base */
.locked .locked-center{ position:absolute; inset:0; display:grid; place-items:center; color:var(--brand-dim); }
.locked .locked-center svg{ max-height:40px; }

/* Ruido (overlay sólo cuando se hace hover sobre el frame en desktop) */
.locked .noise-overlay{
  position:absolute; inset:0;
  pointer-events:none; opacity:0;
  transition:opacity .25s var(--ease);
}
.locked .card-frame:hover .noise-overlay{ opacity:1; }

/* canvas: look “pixel art” duro */
.noise-canvas{
  width:100%; height:100%; display:block;
  image-rendering: pixelated;
}

/* Footer */
.footer p{ margin:0 0 var(--s-16) 0; font-family:var(--mono); color:var(--footer-text); }
.footer p .accent{ color:var(--brand); }

/* Dock móvil */
.mobile-dock{
  position:fixed; left:0; right:0; bottom:0;
  background:#0C1614; padding:12px; display:none;
  justify-content:center; gap:24px; color:#CFE7DF; z-index:50;
}
.dock-btn{ color:#89AA90; }

/* Móviles / táctiles: mostrar ruido siempre en bloqueados */
@media (hover: none) and (pointer: coarse){
  .locked .noise-overlay{ opacity:1; }
  .locked .card-frame:hover .noise-overlay{ opacity:1; }
}

/* Responsive (móvil) */
@media (max-width:768px){
  .site-menu-left{ display:none; }
  .site-header{ grid-template-columns:1fr auto; }   /* 2 columnas */
  .site-logo{ justify-self:start; }                 /* logo a la izquierda */
  .site-socials{ justify-self:end; }                /* redes a la derecha */

  /* Grid móvil: columnas 8px, filas 32px */
  .grid-3{
    column-gap: var(--s-8);
    row-gap: var(--s-32);
  }

  /* Play más cerca del borde (sensación de menos padding visual) */
  .play-btn{
    right: var(--s-8);
    bottom: var(--s-8);
  }

  .mobile-dock{ display:flex; }
}

/* Espacio real bajo el último bloque */
body{ padding-bottom: var(--s-128); }
@media (max-width:768px){
  body{ padding-bottom: calc(var(--s-128) + 60px); } /* + altura del dock */
}

/* Si prefieres el espacio dentro del footer en lugar de fuera: */
footer.container{
  margin-bottom: 0;
  padding-bottom: var(--s-128);
}

.degradado-abajo {
      height: 375px;
      background: linear-gradient(to top, #FFFCDE, #FDFFFA);
    }