/* Estilos personalizados */
/* Cuerpo */
body {
  font-family: 'REM', sans-serif;
  font-size: 1rem; /* Tamaño de fuente base en REM */
  line-height: 1.6; /* Espaciado entre líneas */
  color: var(--text); /* Color de texto global */
  background-color: var(--background); /* Color de fondo global */
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para cambios de color */
}

/* Encabezados */
h1, h2, h3 {
  font-family: 'Archivo Black', sans-serif; /* Fuente específica para encabezados */
  font-weight: bold; /* Peso de la fuente */
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* Párrafos */
p {
  line-height: 1.6; /* Espaciado entre líneas para mejor legibilidad */
  margin-bottom: 1.5em !important; /* Espaciado entre párrafos */
  text-align: justify; /* Texto justificado para un look profesional */
  hyphens: auto; /* Hyphenation para evitar espacios grandes en texto justificado */
  word-wrap: break-word; /* Evita que las palabras largas rompan el diseño */
}

blockquote {
  margin-bottom: 1.5em !important;/* Espaciado entre párrafos */
  font-style: oblique;/* Estilo de fuente */
  padding:1.1em;/* Margen interior del bloque */
  border-width:0.1em;/* Borde del bloque */
  border-color:var(--text);/* Color en el borde del bloque */
}

/* Código y elementos similares */
code, pre {
  font-family: monospace; /* Fuente genérica para código */
  padding: 0.5em;
  border-radius: 4px;
  display: block;
  overflow-x: auto;
}

pre {
  margin-bottom: 1.5em;
}

/* Listas */
article ul,
article ol {
  padding-left: 20px;
  margin-bottom: 1.5em;
}

article ul {
  list-style-type: disc; /* Viñetas para listas no ordenadas */
}

article li {
  margin-bottom: 0.5em;
}

/* Enlaces */
a.button {
  text-decoration: none;
  color: var(--text);
  transition: color 0.3s ease; /* Transición suave para cambios de color */
}

a.button:hover {
  text-decoration: underline;
}

.text-gray-800 {
  font-weight: bold;
  font-style: italic;
}


/* Logo animado e inicio */
.logo {
  width: 98%; /* Ancho del 98% en dispositivos móviles */
  max-width: 400px; /* Máximo ancho de 400px */
  height: auto; /* Altura automática para mantener la proporción */
  fill: transparent;
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s linear forwards, fill 2s ease-out 2s forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill {
  to {
    fill: var(--text); /* Utilizar la variable para el color de relleno */
  }
}

.icono {
  font-size: 18px !important;
}

/* 404*/

.cont{ margin: unset;
}
.text-prima {
  font-size: 1rem;
}

.text-ultima {
  font-size: 15rem; /* O el valor que hayas definido como 15xl */
}
/* Destacados */
.highlight {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombreado ligero */
  border-color: var(--text); /* Utilizar la variable para el color de fondo */
  border-style: dotted;
  border-radius: 4px;
  border-width: 2px;
  padding: 15px;  
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}


/* Listas de posts */
ul.posts-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.posts-list li {
  margin-bottom: 3.0em;
}

ul.posts-list p {
  line-height: 1.6; /* Espaciado entre líneas para mejor legibilidad */
  margin-bottom: 0.5em; /* Espaciado entre párrafos */
}