/*
 * Rediseño visual 2026 — capa de restyle
 * Se carga DESPUÉS de estilo.min.css / elzuloderafa.min.css / boot.css,
 * por lo que gana la cascada de forma natural. No se toca ni un solo
 * fichero legacy: aquí solo se sobreescriben, con las mismas clases/IDs
 * ya existentes en el HTML, los valores visuales (color, tipografía,
 * espaciado, radios, sombras). Donde el legacy usa "!important" sobre un
 * selector que hay que cambiar, se iguala aquí con igual o mayor
 * especificidad + "!important" puntual (comentado caso a caso).
 * No se modifican textos, URLs, estructura HTML ni lógica.
 */

/* ---------------------------------------------------------------------
   1. Base / fondo global
   elzuloderafa.min.css fuerza "html body" y "body main.page" a navy
   !important (tema oscuro heredado). Se sustituye por un fondo claro
   para el look "minimal", igualando la misma especificidad para ganar
   por orden de carga.
--------------------------------------------------------------------- */
html body {
  background: var(--color-bg-soft) !important;
  color: var(--color-text);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
}

body main.page,
body main.index,
main.post {
  background: var(--color-bg-soft) !important;
}

body a {
  color: var(--color-accent);
}

body a:focus-visible,
body button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.page.container,
section.container.page {
  background: var(--color-bg) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------
   2. Hero de home (#heading) y de 404/acerca-de/legal (.intro)
--------------------------------------------------------------------- */
#heading {
  padding: var(--space-6) 0 var(--space-5);
  text-align: center;
}

#heading picture img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

#heading h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-3xl) !important; /* vence estilo.min.css/#heading h1 */
  color: var(--color-navy-950);
  margin: var(--space-4) 0 var(--space-2);
}

#heading p {
  /* vence "main #heading p{font-size:14px!important;font-family:Roboto!important}" */
  font-family: var(--font-body) !important;
  font-size: var(--fs-lg) !important;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

.intro {
  text-align: center;
  padding: var(--space-6) 0 var(--space-4);
}

.intro h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-2xl);
  color: var(--color-navy-950);
}

.intro p {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------
   3. Listado de posts en tarjetas (home, 404, relacionados en el post)
--------------------------------------------------------------------- */
.article-list-simple .articles-simple > ol,
.articles-simple ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding: 0;
  margin: 0;
}

@media (max-width: 991.98px) {
  .articles-simple ol {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .articles-simple ol {
    grid-template-columns: 1fr;
  }
}

.item-article {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
  height: 100%;
}

.item-article:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.item-article .row {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.item-article .pc-img-post {
  border-radius: 0;
  overflow: hidden;
}

.item-article .pc-img-post img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
}

.item-article .col-md-12 {
  padding: var(--space-3);
}

.item-article .name h3,
html body .item-article h3,
html body .item-article h3 * {
  /* vence "html body .item-article h3{color:#fff!important}" (asumía tarjeta oscura) */
  color: var(--color-navy-950) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-2);
}

.item-article .meta-data {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--space-2);
}

.item-article .meta-data .typecategory,
.typecategory a {
  color: var(--color-accent) !important; /* vence ".typecategory a{color:#8eb01a!important}" */
}

.item-article .description {
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}

.item-article a.continue,
body .item-article a.continue {
  /* vence "body .item-article a.continue{background:0 0!important;color:#4b72c7!important}" */
  background: none !important;
  color: var(--color-accent-strong) !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

/* ---------------------------------------------------------------------
   4. Post individual: title-box, bloque "sobre el autor", tipografía
--------------------------------------------------------------------- */
.title-box {
  padding: var(--space-5) 0;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.title-box picture img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  width: 100%;
  object-fit: cover;
}

body main.page .title-box h1,
.title-box .title {
  /* vence "body main.page .title-box h1{color:#fff!important}" (asumía fondo oscuro) */
  color: var(--color-navy-950) !important;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}

.title-box .meta-data {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.about {
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-3);
}

.about picture img {
  border-radius: 50%;
  object-fit: cover;
}

.about p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin: 0;
}

.about p span {
  color: var(--color-navy-950);
  font-weight: 600;
}

p.ds {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

/* Tipografía del contenido del artículo (HTML de BD) */
.body-post {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--color-text);
}

.body-post p {
  margin: 0 0 var(--space-4);
}

.body-post h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-2xl);
  color: var(--color-navy-950);
  margin: var(--space-6) 0 var(--space-3);
}

.body-post h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xl);
  color: var(--color-navy-950);
  margin: var(--space-5) 0 var(--space-2);
}

.body-post blockquote {
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-soft);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0 0 var(--space-4);
}

.body-post code {
  background: var(--color-bg-soft);
  padding: .15em .4em;
  border-radius: 4px;
  font-size: .9em;
}

.body-post pre {
  background: var(--color-navy-950);
  color: var(--color-on-dark);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.body-post pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.body-post ul,
.body-post ol {
  padding-left: 1.4em;
  margin: 0 0 var(--space-4);
}

.body-post li {
  margin-bottom: var(--space-2);
}

.body-post img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin: var(--space-4) auto;
  display: block;
}

/* Nota: los enlaces/negritas del cuerpo del artículo ya llevan color
   forzado desde elzuloderafa.min.css (".posty p a", ".posty p b",
   ".posty p strong"), en azules cercanos al acento nuevo. Se dejan
   como están: no aportaría nada pelear esos "!important" concretos. */

/* ---------------------------------------------------------------------
   5. Footer
--------------------------------------------------------------------- */
.page-footer.dark {
  padding: var(--space-5) 0;
}

.page-footer.dark p {
  font-size: var(--fs-xs);
  line-height: 1.7;
  text-align: center;
  color: var(--color-on-dark-muted);
  opacity: .9;
}

.page-footer.dark a {
  color: var(--color-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------
   6. Acerca de / legal: párrafos de contenido plano
--------------------------------------------------------------------- */
.acerca-de h2,
main.post .acerca-de h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-navy-950);
  margin-top: var(--space-4);
}

section.container.page p {
  max-width: 720px;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}