/* =====================
   RESET BÁSICO
===================== */
* {
  box-sizing: border-box;
}

/* =====================
   BASE
===================== */
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: #212121;

  background-image: url("https://sadhost.neocities.org/images/tiles/nurple-static-bright.gif");
  background-repeat: repeat;
  background-attachment: fixed;

  color: #a5a4a4;
}


/* =====================
   TOP BAR
===================== */
#topBar {
  padding: 10px;
  font-size: 12px;
  opacity: 0.6;
}

/* =====================
   HEADER
===================== */
#header {
  height: 180px;
  background-image: url("Imagen/Error.png");
  background-size: cover;
  background-position: center;
}

/* =====================
   NAVBAR
===================== */
/* CONTENEDOR NAVBAR */
#navbar {
  padding: 6px 0;
  background-color: #212121;
  border: 1px solid #c40000;
  border-radius: 6px;

  box-shadow:
    0 0 6px rgba(196, 0, 0, 0.4),
    0 0 12px rgba(196, 0, 0, 0.2);
}

/* LISTA */
#navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 0;
  padding: 0;
}

/* LINKS Y TAB FALSA */
#navbar a,
#navbar .fake-tab {
  display: inline-block;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  border-radius: 6px 6px 0 0;
  background-color: #212121;
  color: #ffffff;
  transition: all 0.2s ease;
}

/* HOME ACTIVO (BLANCO) */
.home-tab {
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.6),
    0 0 12px rgba(255, 255, 255, 0.35);
}

/* TAB ERROR / FAKE (ROJO) */
#navbar .fake-tab {
  color: #c40000;
  box-shadow:
    0 0 6px rgba(196, 0, 0, 0.5),
    0 0 12px rgba(196, 0, 0, 0.25);
}

/* HOVER */
#navbar a:hover {
  background-color: #c40000;
  color: #ffffff;
}


/* =====================
   LAYOUT
===================== */
#flex {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* =====================
   SIDEBARS
===================== */
aside {
  width: 200px;
  padding: 20px;
  font-size: 12px;

 background-color: #212121;
  color: #ffffff;

  border: 1px solid #c40000;
  border-radius: 6px;

  box-shadow:
    0 0 6px rgba(196, 0, 0, 0.4),
    0 0 12px rgba(196, 0, 0, 0.2);
}




/* Texto “cargando” */
.muted {
  color: #ffffff;
  opacity: 0.6;
  font-style: italic;
  font-size: 14px;
text-shadow: 0 0 4px rgba(255, 59, 59, 0.4);
}

/* =====================
   MAIN
===================== */
main {
  flex: 1;
  background-color: #212121;
  padding: 20px;
  text-align: center;
  border-top: 1px solid #c4000033;
  border-bottom: 1px solid #c4000033;
}

main h1 {
  color: #ffffff;
  margin-top: 0;
  letter-spacing: 0.03em;
}

/* línea decorativa bajo título */
main h1::after {
  content: "—";
  display: block;
  margin: 10px auto 20px;
  color: #c40000;
  opacity: 0.6;
}

.subtitulo {
  font-size: 14px;
}

.author {
  font-size: 13px;
  opacity: 0.7;
}

/* =====================
   LINKS POSTS / ABOUT
===================== */
.post-links a {
  color: #c40000;
  font-weight: 700;
  text-decoration: none;
  margin: 0 8px;
}

.post-links a:hover {
  text-decoration: underline;
}

/* =====================
   POSTS INDEX
===================== */
.posts-list {
  list-style: none;
  padding: 0;
  margin: 2em 0;
}

.posts-list li {
  padding: 1em 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.posts-list li a {
  font-size: 1.2em;
  font-weight: 700;
  color: #c40000;
  text-decoration: none;
}

.posts-list li a:hover {
  color: #ffffff;
}

.posts-list small {
  display: block;
  margin-top: 0.3em;
  font-size: 0.8em;
  opacity: 0.6;
}

/* =====================
   POST INDIVIDUAL
===================== */
.post {
  max-width: 620px;
  margin: 3em auto;
  padding: 0 20px;
  text-align: center;
}

.post p {
  line-height: 1.7;
}

.post .author {
  margin-top: 2em;
  font-size: 0.85em;
  opacity: 0.6;
}

/* =====================
   FOOTER
===================== */
footer {
  position: relative;
  height: 60px;
  display: flex;
  align-items: flex-start;   /* 👈 clave */
  justify-content: center;
  padding-top: 10px;         /* baja todo un poco */
}
.footer-left,
.footer-right {
  position: absolute;
  font-size: 11px;
  color: #a5a4a4;
  opacity: 0.45;
  font-style: italic;
  line-height: 1;
}

.footer-left {
  left: 10px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.footer-right {
  right: 10px;
  opacity: 0.45;
}

footer:hover .footer-left {
  opacity: 0.35;
}



/*STATUS Y ESTADO*/
.status {
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: #a5a4a4;
  opacity: 0.6;
  font-style: italic;
  letter-spacing: 0.04em;
  position: relative;
  margin-top: 6px;
}
.estado {
  display: inline-block;
  animation: desaparecer 4s infinite;
}
@keyframes desaparecer {
  0%, 55% {
    opacity: 1;
  }
  60%, 100% {
    opacity: 0;
  }
}
.status::after {
  content: "Reintentar: Error 404";
  display: block;
  margin-top: 6px;

  color: #ff3b3b;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;

  text-shadow:
    0 0 4px rgba(255, 59, 59, 0.6),
    0 0 8px rgba(255, 59, 59, 0.3);

  opacity: 0;
  animation: estadoError 4s infinite;
}
@keyframes estadoError {
  0%, 60% {
    opacity: 0;
  }
  70%, 100% {
    opacity: 1;
  }
}




.ready-gif {
  display: block;
  margin: 20px auto;
  max-width: 120px;
  opacity: 0.8;
}
.loading-dots::after {
  content: "";
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
}
.loading-fade {
  animation: fade 1.8s ease-in-out infinite;
}

@keyframes fade {
  0%   { opacity: 0.2; }
  50%  { opacity: 0.6; }
  100% { opacity: 0.2; }
}
/* =====================
   GLITCH
===================== */
.glitch-main {
  position: relative;
  color: #ffffff;
  animation: glitchMain 2.8s infinite;
}

@keyframes glitchMain {
  0% { text-shadow: 0 0 0 #c40000; }
  20% { text-shadow: 1px 0 #c40000; }
  40% { text-shadow: -1px 0 #c40000; }
  60% { text-shadow: 2px 0 #c40000; }
  80% { text-shadow: -2px 0 #c40000; }
  100% { text-shadow: 0 0 0 #c40000; }
}
.glitch-post {
  animation: flickerPost 6s infinite;
}

@keyframes flickerPost {
  0%, 90%, 100% { opacity: 1; }
  91% { opacity: 0.4; }
  92% { opacity: 1; }
  94% { opacity: 0.6; }
  95% { opacity: 1; }
}
/* COMENTARIOS */

.comments {
  margin-top: 4em;
  padding-top: 2em;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}

.comments h2 {
  font-family: 'Bebas', sans-serif;
  color: #ffffff;
  letter-spacing: 0.05em;
  margin-bottom: 1em;
}

.no-comments {
  font-size: 13px;
  color: #a5a4a4;
  opacity: 0.6;
  font-style: italic;
  margin-bottom: 2em;

}


/* FORMULARIO FALSO */

.fake-form {
  max-width: 400px;
  margin: 0 auto;
  opacity: 0.4;
}

.fake-form input,
.fake-form textarea {
  width: 100%;
  background-color: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px;
  margin-bottom: 10px;
  color: #a5a4a4;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}

.fake-form textarea {
  height: 80px;
  resize: none;
}

.fake-form button {
  background-color: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #a5a4a4;
  padding: 6px 12px;
  font-size: 12px;
  cursor: not-allowed;

}
.error-soft {
  color: #c40000;
  opacity: 0.7;
  font-weight: 600;
}
/* 404 PAGE */

.error-page {
  background-color: #111;
  color: #e5e5e5;
  font-family: inherit;
}

.error-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.error-container h1 {
  font-size: 96px;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.error-text {
  font-size: 18px;
  opacity: 0.85;
  margin-bottom: 14px;
}

.error-sub {
  font-size: 14px;
  opacity: 0.6;
  font-style: italic;
  margin-bottom: 20px;
}

.error-small {
  font-size: 11px;
  opacity: 0.4;
  letter-spacing: 0.05em;
}
/* TEXTO QUE CAMBIA */
.error-text {
  font-size: 16px;
  opacity: 0.8;
  margin-bottom: 12px;
  transition: opacity 0.4s ease;
}

/* CARGANDO */
.error-loader {
  font-size: 14px;
  opacity: 0.6;
  font-style: italic;
  margin-bottom: 20px;
}

.dots::after {
  content: "";
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%   { content: ""; }
  33%  { content: "."; }
  66%  { content: ".."; }
  100% { content: "..."; }
}
  /* BOTÓN FALSO */
.doom-button {
  margin: 40px auto;
  text-align: center;
}

.doom-button a {
  display: inline-block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #c40000;
  text-decoration: none;

  border: 2px solid rgba(196, 0, 0, 0.6);
  border-radius: 6px;

  background-color: rgba(0, 0, 0, 0.4);

  box-shadow:
    0 0 6px rgba(196, 0, 0, 0.4),
    inset 0 0 6px rgba(196, 0, 0, 0.2);

  transition: all 0.3s ease;
}

.doom-button a:hover {
  background-color: #c40000;
  color: #ffffff;

  box-shadow:
    0 0 12px rgba(196, 0, 0, 0.8),
    inset 0 0 8px rgba(255, 255, 255, 0.15);

  transform: translateY(-1px);
}
  /* TEMBLOR */
  @keyframes temblar {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1px, 1px); }
  40%  { transform: translate(1px, -1px); }
  60%  { transform: translate(-1px, -1px); }
  80%  { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
  }
.temblor {
  display: inline-block;
}

.temblor:hover {
  animation: temblar 0.4s infinite;
  text-shadow:
    0 0 4px rgba(196, 0, 0, 0.6),
    0 0 8px rgba(196, 0, 0, 0.3);
}