/* VOID//LOG — darkweb / terminal aesthetic
   ASCII chrome, scanlines, posts legibles
*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&family=VT323&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --bg:           #020402;
  --panel:        rgba(0, 10, 2, 0.94);
  --panel-strong: #010901;
  --line:         #0d2b0d;
  --dim:          #1a3a1a;
  --text:         #c8ffc8;
  --muted:        #527a52;
  --hot:          #00ff41;
  --accent:       #00cfff;
  --magenta:      #ff1f8f;
  --amber:        #ffaa00;
}

/* ── Reset ─────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(0, 40, 10, 0.28), transparent),
    radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.6) 100%);
  color: var(--text);
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── CRT Scanlines ──────────────────────────────── */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.14) 3px,
    rgba(0, 0, 0, 0.14) 4px
  );
}

/* ── Phosphor glow ──────────────────────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: radial-gradient(ellipse 55% 35% at 50% 15%, rgba(0, 255, 65, 0.032), transparent 70%);
  pointer-events: none;
}

/* ── Links ──────────────────────────────────────── */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--hot); text-shadow: 0 0 8px rgba(0, 255, 65, 0.35); }

.wrap { width: min(1120px, calc(100% - 24px)); margin: 0 auto; }

/* ── Top alert ──────────────────────────────────── */
.top-alert {
  background: var(--panel-strong);
  border-bottom: 1px solid var(--line);
  color: var(--magenta);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  padding: 7px 16px;
  text-align: center;
  font-family: "Share Tech Mono", monospace;
}
.top-alert::before { content: "[SYS] "; color: var(--dim); }

/* ── Nav ────────────────────────────────────────── */
.site-nav {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin-bottom: 2px;
}
.nav-shell {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}
.site-nav ul {
  list-style: none;
  display: flex;
  gap: 0;
  padding: 7px 0;
  margin: 0;
  flex-wrap: wrap;
  align-items: center;
}
.site-nav ul::before {
  content: "root@void:~$";
  color: var(--hot);
  font-family: "Share Tech Mono", monospace;
  font-size: 0.82rem;
  padding-right: 14px;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.35);
}
.site-nav a {
  display: inline-block;
  padding: 3px 6px;
  background: transparent;
  border: none;
  color: var(--text);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  font-size: 0.88rem;
  font-family: "Share Tech Mono", monospace;
  transition: color 0.1s;
}
.site-nav a::before { content: "["; color: var(--dim); }
.site-nav a::after  { content: "]"; color: var(--dim); }
.site-nav a:hover   { color: var(--hot); }

/* ── Hero ───────────────────────────────────────── */
.hero { padding: 18px 0; }
.hero-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 2px;
  align-items: stretch;
}

/* ── Window panel ───────────────────────────────── */
.window {
  background: var(--panel);
  border: 1px solid var(--line);
}

.window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 5px 12px;
  font-size: 0.7rem;
  font-family: "Share Tech Mono", monospace;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(0, 255, 65, 0.018);
}
.window-bar span:first-child::before { content: "┌─ "; color: var(--dim); }

.dots { display: flex; align-items: center; gap: 5px; }
.dots span {
  display: inline-block;
  width: 7px;
  height: 7px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.dots span:nth-child(1) { background: var(--magenta); box-shadow: 0 0 5px var(--magenta); }
.dots span:nth-child(2) { background: var(--amber);   box-shadow: 0 0 5px var(--amber); }
.dots span:nth-child(3) { background: var(--hot);     box-shadow: 0 0 5px var(--hot); }

.hero-main { padding: 20px 20px 26px; }

/* ── Typography ─────────────────────────────────── */
.eyebrow, .section-tag, .post-kicker {
  color: var(--hot);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.68rem;
  font-family: "Share Tech Mono", monospace;
  display: block;
  margin-bottom: 4px;
}
.section-tag::before { content: "// "; color: var(--dim); }
.post-kicker::before { content: ">> "; color: var(--dim); }
.eyebrow::before     { content: ":: "; color: var(--dim); }

h1, h2, h3 {
  margin: 0;
  font-family: "Orbitron", "Share Tech Mono", monospace;
}
h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hot);
  text-shadow:
    0 0 14px rgba(0, 255, 65, 0.5),
    0 0 50px rgba(0, 255, 65, 0.12);
  position: relative;
}
h1::before, h1::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
h1::before {
  color: var(--accent);
  opacity: 0.55;
  transform: translate(2px, -2px);
  animation: glitch-1 2.8s infinite linear;
}
h1::after {
  color: var(--magenta);
  opacity: 0.45;
  transform: translate(-2px, 2px);
  animation: glitch-2 3.3s infinite linear;
}
h1[data-text=""]::before,
h1[data-text=""]::after { display: none; }

h2 {
  color: var(--accent);
  font-family: "Share Tech Mono", monospace;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px rgba(0, 207, 255, 0.22);
}
h3 {
  color: var(--accent);
  font-family: "Share Tech Mono", monospace;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

.tagline {
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.65;
  border-left: 2px solid var(--hot);
  padding-left: 12px;
  margin: 14px 0;
  opacity: 0.85;
}

.status-line {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin: 10px 0;
}
.status-line::before { content: "> "; color: var(--muted); }

.blink { animation: blink-cursor 1s step-end infinite; }
@keyframes blink-cursor { 50% { opacity: 0; } }

/* ── ASCII Goat ─────────────────────────────────── */
.ascii-goat {
  display: inline-block;
  margin: 12px 0;
  position: relative;
  width: 300px;
  height: 90px;
  overflow: hidden;
}
.ascii-goat pre {
  margin: 0;
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  line-height: 13px;
  color: var(--muted);
}
.goat-frame { position: absolute; inset: 0; opacity: 0; animation: goat-cycle 1.2s steps(1) infinite; }
.goat-frame:nth-child(1) { animation-delay: 0s; }
.goat-frame:nth-child(2) { animation-delay: 0.4s; }
.goat-frame:nth-child(3) { animation-delay: 0.8s; }
@keyframes goat-cycle {
  0%, 4%  { opacity: 0; }
  5%, 33% { opacity: 1; }
  34%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* ── Hero links ─────────────────────────────────── */
.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.hero-links a {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--dim);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-family: "Share Tech Mono", monospace;
  transition: border-color 0.1s, color 0.1s, box-shadow 0.1s;
}
.hero-links a::before { content: ">> "; color: var(--muted); }
.hero-links a:hover {
  border-color: var(--hot);
  color: var(--hot);
  box-shadow: 0 0 14px rgba(0, 255, 65, 0.14), inset 0 0 14px rgba(0, 255, 65, 0.028);
}

/* ── Marquee ────────────────────────────────────── */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 7px;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 22s linear infinite;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.74rem;
  color: var(--muted);
}

/* ── Hero sidebar ───────────────────────────────── */
.hero-side { display: flex; flex-direction: column; gap: 2px; }

.side-box {
  background: var(--panel);
  border: 1px solid var(--line);
  flex: 1;
}

.box-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 5px 10px;
  font-size: 0.68rem;
  font-family: "Share Tech Mono", monospace;
  color: var(--hot);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(0, 255, 65, 0.018);
}
.box-title::before { content: "[ "; color: var(--dim); }
.box-title::after  { content: " ]"; color: var(--dim); }

.side-box .content {
  padding: 12px 10px;
  font-size: 0.82rem;
  color: var(--muted);
  font-family: "Share Tech Mono", monospace;
  line-height: 1.6;
}
.side-box .content p { margin: 0 0 8px; }
.side-box .content p:last-child { margin-bottom: 0; }

/* Signal meter — bloque segmentado */
.meter {
  height: 8px;
  background: var(--line);
  margin: 8px 0;
  overflow: hidden;
}
.meter span {
  display: block;
  height: 100%;
  width: 72%;
  background: repeating-linear-gradient(
    90deg,
    var(--hot) 0,
    var(--hot) 5px,
    transparent 5px,
    transparent 8px
  );
  animation: pulse-meter 2.5s ease-in-out infinite;
}
@keyframes pulse-meter { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Layouts ────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 1.65fr 0.95fr;
  gap: 18px;
  padding-bottom: 22px;
}
.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-bottom: 28px;
}
.stack { display: flex; flex-direction: column; gap: 18px; }

/* ── Feed ───────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 22px; }

/* ── Ultimo post: destacado, llena la pantalla ──── */
.featured-wrap {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 18px 0 0;
}

.post--featured {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post--featured .post-head {
  padding: 22px 26px 14px;
}

.post--featured h2 {
  font-size: 1.5rem;
  margin: 8px 0 8px;
  letter-spacing: 0.06em;
}

.post--featured .post-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
}

.post--featured .post-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 24px 26px 40px;
}

.post--featured .post-body p {
  font-family: "Lora", Georgia, serif;
  font-size: 17px;
  line-height: 1.82;
  color: #daffe0;
}

/* ── Indicador de scroll ────────────────────────── */
.scroll-hint {
  text-align: center;
  padding: 18px 0 22px;
  user-select: none;
}

.scroll-label {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  margin-bottom: 10px;
}
.scroll-label::before { content: "[ "; color: var(--dim); }
.scroll-label::after  { content: " ]"; color: var(--dim); }

.scroll-arrow {
  display: block;
  font-size: 1.1rem;
  color: var(--hot);
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.55);
  animation: bounce-down 1.6s ease-in-out infinite;
}

@keyframes bounce-down {
  0%, 100% { transform: translateY(0);   opacity: 0.85; }
  50%       { transform: translateY(8px); opacity: 0.45; }
}

/* ── Separador de entradas anteriores ───────────── */
.feed::before {
  content: "─── entradas anteriores";
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 8px 0 16px;
  border-top: 1px solid var(--line);
}

/* ─────────────────────────────────────────────────
   POSTS — zona de lectura cómoda
   El chrome ASCII está en ::before/::after,
   el cuerpo se mantiene limpio y legible.
───────────────────────────────────────────────── */
.post {
  background: rgba(0, 8, 2, 0.88);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: 1rem;
  line-height: 1.82;
  position: relative;
  padding: 0;
}
.post::before {
  content: "╔══════════════════════════════════════════════╗";
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.62rem;
  color: var(--dim);
  letter-spacing: 0;
  line-height: 1;
  padding: 0 14px;
  margin-top: -1px;
  overflow: hidden;
}
.post::after {
  content: "╚══════════════════════════════════════════════╝";
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.62rem;
  color: var(--dim);
  letter-spacing: 0;
  line-height: 1;
  padding: 0 14px;
  margin-bottom: -1px;
  overflow: hidden;
}

.post-head {
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--line);
}
.post-body {
  padding: 18px 20px 22px;
}
.post-body p {
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  margin: 0 0 1.4em;
  color: #d4ffd4;
  line-height: 1.82;
}
.post-body p:last-child { margin-bottom: 0; }

.post h2 { margin: 4px 0 6px; }

.meta {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: "Share Tech Mono", monospace;
  margin-top: 4px;
}
.meta::before { content: "// "; }

/* ── Archive ────────────────────────────────────── */
.archive-list { display: flex; flex-direction: column; gap: 14px; }

.archive-item {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 16px 20px;
  font-family: "Share Tech Mono", monospace;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.72;
  position: relative;
}
.archive-item::before {
  content: "──────────────────────────────────────────────";
  display: block;
  color: var(--dim);
  font-size: 0.62rem;
  line-height: 0.9;
  margin-bottom: 10px;
  overflow: hidden;
}
.archive-item h3 { margin: 4px 0 8px; }
.archive-item p { margin: 0 0 8px; }
.archive-item p:last-child { margin-bottom: 0; }

/* ── Inner page banner ──────────────────────────── */
.page-banner {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--hot);
  padding: 22px 24px;
}
.page-banner h1 {
  margin: 8px 0 12px;
  font-size: clamp(1.6rem, 5vw, 2.8rem);
}
.page-banner .lead {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.72;
  opacity: 0.88;
  margin: 0;
}
.terminal-line {
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 12px;
  font-family: "Share Tech Mono", monospace;
}
.terminal-line::before { content: "$ "; color: var(--dim); }

/* ── Entry body — paper científico en terminal ───── */
/*
   Chrome (nav, labels, h2): Share Tech Mono  → terminal
   Cuerpo de texto:          Lora             → paper legible
   Columna centrada, márgenes generosos, sin pegarse a la izquierda.
*/
.entry-body {
  background: rgba(0, 10, 3, 0.94);
  border: 1px solid var(--line);
  border-top: 2px solid var(--hot);
  max-width: 940px;
  margin: 0 auto;
  padding: 40px 60px 52px;
  font-family: "Lora", Georgia, serif;
  font-size: 17px;
  line-height: 1.82;
  color: #daffd8;
  counter-reset: entry-section;
}

.entry-body p {
  margin: 0 0 1.5em;
  color: #daffd8;
}
.entry-body p:last-child { margin-bottom: 0; }

/* Section-tag: monospace, auto-numerado tipo paper */
.entry-body .section-tag {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.7rem;
  counter-increment: entry-section;
  display: block;
  margin-top: 2.8em;
  margin-bottom: 0;
  color: var(--hot);
  letter-spacing: 0.18em;
}
.entry-body .section-tag::after {
  content: " [" counter(entry-section) "]";
  color: var(--dim);
}

/* h2 pegado al section-tag: regla de sección de paper */
.entry-body .section-tag + h2 {
  font-family: "Share Tech Mono", monospace;
  margin: 0.3em 0 1em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 0.96rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
}

/* h2 sin section-tag previo */
.entry-body h2 {
  font-family: "Share Tech Mono", monospace;
  margin: 2.2em 0 0.9em;
  font-size: 0.96rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* Abstract / pull quote: serif en cursiva, bien encuadrado */
.entry-body .quote-box {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: 1.05em;
  line-height: 1.78;
  border-left: 3px solid var(--hot);
  background: rgba(0, 255, 65, 0.028);
  padding: 18px 22px;
  margin: 2em 0;
  color: var(--text);
}

/* Énfasis: color en lugar de bold, funciona mejor en Lora */
.entry-body strong {
  color: var(--hot);
  font-weight: 500;
}

/* ── Cajas de contenido dentro de posts ─────────── */
.quote-box {
  border-left: 2px solid var(--hot);
  background: rgba(0, 255, 65, 0.025);
  padding: 10px 14px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 14px 0;
}

.link-list, .note-box {
  border: 1px solid var(--line);
  padding: 12px 14px;
  background: transparent;
  margin: 12px 0;
}
.link-list ul {
  margin: 0;
  padding-left: 0;
  color: var(--text);
  list-style: none;
}
.link-list li { margin-bottom: 8px; }
.link-list li::before { content: "> "; color: var(--hot); }

.note-box { border-left: 2px solid var(--accent); }
.note-box p { margin: 0 0 8px; color: var(--text); }
.note-box p:last-child { margin-bottom: 0; }

/* ── Links en títulos de post ───────────────────── */
.post h2 a,
.post--featured h2 a,
.archive-item h3 a {
  color: inherit;
  text-decoration: none;
}
.post h2 a:hover,
.post--featured h2 a:hover,
.archive-item h3 a:hover {
  color: var(--hot);
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
}

/* scroll-hint como enlace */
a.scroll-hint {
  display: block;
  text-decoration: none;
}

/* ── Directory listing (archivo.html) ───────────── */
.dir-wrap { padding: 22px 0 44px; }

.dir-listing {
  font-family: "Share Tech Mono", monospace;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 20px 24px 18px;
  font-size: 0.88rem;
}

.dir-cmd-line {
  color: var(--text);
  font-size: 0.88rem;
  margin-bottom: 4px;
}
.dir-cmd-line--idle { margin-top: 6px; }

.dir-prompt {
  color: var(--hot);
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.28);
}

.dir-rule {
  border-top: 1px solid var(--dim);
  margin: 10px 0;
}

.dir-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--muted);
  padding: 2px 0;
}

.dir-head {
  display: grid;
  grid-template-columns: 6ch 12ch 5ch 24ch 1fr;
  gap: 0 14px;
  font-size: 0.65rem;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 8px 8px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 2px;
}

.dir-row {
  display: grid;
  grid-template-columns: 6ch 12ch 5ch 24ch 1fr;
  gap: 0 14px;
  padding: 5px 8px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.07s;
  margin: 0 -8px;
  align-items: center;
}
.dir-row:hover { background: rgba(0, 255, 65, 0.04); }
.dir-row:hover .dc-name {
  color: var(--hot);
  text-shadow: 0 0 7px rgba(0, 255, 65, 0.32);
}

.dc-type { color: var(--muted); font-size: 0.8rem; }
.dc-date { color: var(--muted); }
.dc-size { color: var(--muted); text-align: right; }
.dc-name { color: var(--accent); }
.dc-desc { color: var(--muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dir-stats-footer {
  font-size: 0.74rem;
  color: var(--muted);
  padding: 4px 0 8px;
}

@media (max-width: 700px) {
  .dir-head,
  .dir-row { grid-template-columns: 6ch 12ch 1fr; }
  .dc-size, .dc-desc { display: none; }
}
@media (max-width: 480px) {
  .dir-head,
  .dir-row { grid-template-columns: 6ch 1fr; }
  .dc-date { display: none; }
  .dc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Utilidades ─────────────────────────────────── */
.muted { color: var(--muted); }
.lead  { color: var(--text); font-size: 0.96rem; line-height: 1.7; opacity: 0.85; }

/* ── Placeholder gif ────────────────────────────── */
.placeholder-gif {
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  background: var(--panel-strong);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  font-family: "Share Tech Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}
.placeholder-gif::before { content: "[ NO SIGNAL ]"; }

/* ── Stamps ocultos ─────────────────────────────── */
.stamp-grid, .stamp { display: none !important; }

/* ── Footer ─────────────────────────────────────── */
.footer { padding: 0 0 32px; }
.footer-box {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 14px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.74rem;
  font-family: "Share Tech Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-box::before { content: "EOF ─── "; color: var(--dim); }

/* ── Bonfire ASCII (fixed) ──────────────────────── */
.bonfire {
  position: fixed;
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 90%);
  height: 140px;
  pointer-events: none;
  z-index: 9998;
  text-align: center;
}
.bonfire pre { margin: 0; font-family: "Share Tech Mono", monospace; font-size: 16px; line-height: 16px; color: rgba(255, 140, 50, 0.88); }
.bonfire .frame { position: absolute; left: 50%; transform: translateX(-50%); top: 0; opacity: 0; text-shadow: 0 0 10px rgba(255, 110, 30, 0.38); }
.bonfire .frame:nth-child(1) { animation: bonfire-cycle 1s steps(1) infinite 0s; }
.bonfire .frame:nth-child(2) { animation: bonfire-cycle 1s steps(1) infinite 0.25s; }
.bonfire .frame:nth-child(3) { animation: bonfire-cycle 1s steps(1) infinite 0.5s; }
.bonfire .frame:nth-child(4) { animation: bonfire-cycle 1s steps(1) infinite 0.75s; }
@keyframes bonfire-cycle {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.98); }
  10%  { opacity: 1; transform: translate(-50%, -2px) scale(1.02); }
  40%  { opacity: 1; }
  60%  { opacity: 0.7; transform: translate(-50%, -4px) scale(1.01); }
  100% { opacity: 0; transform: translate(-50%, 10px) scale(0.98); }
}

/* ── Corner ASCII bonfire (Dark Souls) ──────────── */
.corner-bonfire {
  position: fixed;
  bottom: 16px;
  left: 14px;
  z-index: 10001;
  pointer-events: none;
  width: 84px;
  height: 114px;
}
.cbf-frame {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 14px;
  white-space: pre;
  opacity: 0;
  animation: cbf-cycle 1s ease-in-out infinite;
}
.cbf-frame:nth-child(1) { animation-delay: 0s; }
.cbf-frame:nth-child(2) { animation-delay: 0.25s; }
.cbf-frame:nth-child(3) { animation-delay: 0.5s; }
.cbf-frame:nth-child(4) { animation-delay: 0.75s; }

.cbf-fire {
  color: rgba(255, 175, 55, 0.95);
  text-shadow: 0 0 6px rgba(255, 110, 10, 0.65);
}
.cbf-struct {
  color: rgba(195, 115, 45, 0.82);
  text-shadow: 0 0 4px rgba(255, 80, 10, 0.25);
}

@keyframes cbf-cycle {
  0%, 3%  { opacity: 0; }
  6%, 22% { opacity: 1; }
  25%     { opacity: 0; }
  100%    { opacity: 0; }
}

@media (max-width: 640px) {
  .corner-bonfire { left: 8px; bottom: 8px; width: 72px; height: 98px; }
  .cbf-frame { font-size: 10px; line-height: 12px; }
}

/* ── Espacio para bonfire + gif ─────────────────── */
@media (min-width: 480px) {
  body { padding-bottom: 360px; }
}

/* ── Animaciones ────────────────────────────────── */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes glitch-1 {
  0%   { transform: translate(2px, -2px) skewX(0.2deg);  clip-path: inset(12% 0 62% 0); }
  10%  { transform: translate(-2px, 1px) skewX(-0.5deg); clip-path: inset(42% 0 28% 0); }
  20%  { transform: translate(3px, -1px) skewX(0.3deg);  clip-path: inset(62% 0 10% 0); }
  30%  { transform: translate(-1px, 2px) skewX(-0.2deg); clip-path: inset(22% 0 50% 0); }
  100% { transform: translate(2px, -2px) skewX(0.2deg);  clip-path: inset(12% 0 62% 0); }
}
@keyframes glitch-2 {
  0%   { transform: translate(-2px, 2px) skewX(-0.2deg); clip-path: inset(52% 0 18% 0); }
  15%  { transform: translate(2px, -1px) skewX(0.5deg);  clip-path: inset(28% 0 42% 0); }
  40%  { transform: translate(-3px, 1px) skewX(-0.3deg); clip-path: inset(72% 0 4% 0); }
  100% { transform: translate(-2px, 2px) skewX(-0.2deg); clip-path: inset(52% 0 18% 0); }
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 880px) {
  .hero-grid, .layout, .columns, .media-grid { grid-template-columns: 1fr; }
  h1 { font-size: clamp(1.8rem, 10vw, 3rem); }
}
@media (max-width: 640px) {
  .corner-media { max-width: 110px; left: 8px; bottom: 8px; }
}
@media (max-width: 540px) {
  .wrap { width: min(100% - 14px, 1120px); }
  .hero, .footer, .site-nav { padding-left: 0; padding-right: 0; }
  .post-body, .post-head { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 480px) {
  .post::before, .post::after,
  .archive-item::before { display: none; }
  .post-body p { font-size: 0.97rem; }
}