/* ============================= */
/* Hoja de estilos basada en:    */
/* https://eggramen.neocities.org/code/css/misc/newspaper */
/* ============================= */

/* ESTILO BASE: Configuración general del cuerpo del documento, color de fondo, tipografía principal y tamaño base */
body {
  background: #fffeee; /* Color de fondo suave */
  font-family: "Goudy Stout", "Bookman Oldstyle", serif; /* Tipografía base para títulos y cuerpo por defecto */
  font-size: 0.93rem; /* Tamaño base del texto */
}

/* ENCABEZADOS: Definición de tamaños y estilo de los títulos h1 a h4. Para modificar el tamaño de los títulos cambiar la propiedad font-size de cada nivel. */
h1 { font-size: 2.15rem; } /* Título principal grande */
h2 { font-size: 1.4rem; }  /* Título secundario */
h3 { font-size: 1.1rem; }  /* Título terciario */
h4 { font-size: 1rem; }    /* Título menor, cercano al tamaño del párrafo */

/* ENCABEZADOS MAYÚSCULAS OPCIONALES: Esta sección fuerza mayúsculas en los títulos de página y barra de selección. 
   Se puede modificar quitando la propiedad text-transform o limitando a ciertos selectores */
.title, .heading, h1, h2 {
  text-transform: uppercase; /* Texto en mayúsculas */
  hyphens: none;             /* No aplicar guiones automáticos en títulos */
  word-break: normal;        /* No dividir palabras */
  overflow-wrap: normal;     /* Evita salto de línea dentro de palabras */
}

/* CONTENEDOR PRINCIPAL: Define el ancho y centrado del contenido principal. Para cambiar el ancho de toda la página modificar width */
.main {
  width: 1000px; /* Ancho total de la página */
  margin: 0 auto; /* Centrado horizontal automático */
}

/* TÍTULO DE PÁGINA: Centrado y espaciado del título principal de la revista. Modificar padding para ajustar separación interna */
.title {
  text-align: center; 
  padding: 0.1rem 0.1rem 0 0.1rem; 
}

.title p { font-weight: bold; } /* Párrafo dentro del título en negrita */

/* BARRA DE OPCIONES: distribuye los enlaces para rellenar el ancho sin forzar tamaño igual */
.heading {
  display: flex;             /* Flex horizontal */
  flex-wrap: wrap;           /* Permite varias filas si no caben todos los enlaces */
  justify-content: space-between; /* Distribuye enlaces para que llenen todo el ancho de cada fila */
  align-items: center;       /* Alinea verticalmente los enlaces */
  gap: 0.5rem;               /* Espacio mínimo entre enlaces */
  border-bottom: 1px #000 solid;
  border-top: 3px #000 double;
  padding: 0.75rem 0.5rem;   /* Espaciado vertical y horizontal */
  margin-bottom: 1rem;       /* Separación con el contenido siguiente */
  font-weight: bold;
}

/* OPCIONES DE LA BARRA: tamaño natural de cada enlace, texto centrado */
.heading a {
  display: inline-block;     /* Para que text-align funcione y mantenga tamaño natural */
  flex-grow: 0;              /* No se estira */
  flex-shrink: 1;            /* Se encoge si no cabe */
  text-align: center;        /* Centra el texto del enlace dentro del bloque */
  white-space: nowrap;       /* No permite que un enlace se divida en varias líneas */
  padding: 0.2rem 0.5rem;    /* Espacio interno para separar texto de bordes */
  text-decoration: none;     /* Quita subrayado */
  color: inherit;            /* Hereda color de la barra / body */
}

/* SUBTÍTULOS IZQUIERDA/DERECHA: Para información de fecha, página u otros elementos secundarios. Modificar float y padding si se quiere reposicionar */
.sub-left { float: left; }
.sub-right { float: right; text-align: right; }
.sub-left, .sub-right { padding: 0.5em 0.375em 0.2em 0.375em; }

/* PIE DE PÁGINA: Líneas de cierre de página. Cambiar border para variar grosor o estilo */
.footer {
  border-bottom: 3px #000 double;
  border-top: 1px #000 solid;
}

/* ARTÍCULOS: Contenedor principal de artículos, define padding y display. Se pueden añadir más propiedades de layout aquí */
.articles {
  display: block; 
  padding: 1rem 0.275rem;
}

/* PÁRRAFOS DE ARTÍCULOS: Fuente Garamond, tamaño mayor, sangría y guiones automáticos. Modificar font-size para aumentar/disminuir texto */
.articles p {
  font-family: "Garamond", serif; /* Fuente específica para artículos */
  font-size: 1.1rem;             /* Texto ligeramente más grande */
  text-indent: 5em;               /* Sangría inicial */
  line-height: 1.3em;           /* Altura de línea */
  margin: 0.5em;                  /* Espaciado entre párrafos */
  text-align: justify;             /* Texto justificado */
  hyphens: auto;                   /* Guiones automáticos solo en artículos */
  word-break: break-word;          /* Rompe palabras largas */
  overflow-wrap: break-word;       /* Compatibilidad extra con navegadores */
  text-transform: none;            /* No forzar mayúsculas */
}

/* ENCABEZADOS DENTRO DE ARTÍCULOS: Mantener títulos del artículo intactos, no se dividen en columnas */
.articles h1, .articles h2, .articles h3, .articles h4 {
  margin-top: 0.1em;
  margin-bottom: 0.375em;
  display: table;
}

/* BLOQUES ESPECIALES: Uso actual limitado, reservado para layout especial */
.block-column-article { display: table; }

/* IMÁGENES DE ARTÍCULOS: Escalado automático y efecto hover */
.articles img {
  display: block;
  max-width: 100%;
  height: auto;
  text-align: center;
  margin: 0.5rem auto;
  filter: grayscale(90%); /* Tonos casi blanco y negro */
}

.articles img:hover { filter: grayscale(75%); }

/* IMÁGENES GRANDES DE PORTADA */
.splash { padding-bottom: 0rem; }

/* SEPARADORES: Líneas entre artículos y páginas */
hr {
  max-width: 750px; 
  border: 0;
  height: 2px;
  background: none;
  margin: 1.25rem auto;
}

/* SEPARADORES INTERNOS DE MAIN: Más finos para divisiones de sección */
.main hr {
  height: 1px;
  border: 0;
  background: #000;
  margin: 0.8rem 0 1rem 0;
}

/* CITAS DECORATIVAS: Bloques de quote con estilo */
.articles blockquote { margin:0; display:block; }

.blockquote-inner {
  font-weight: bold;
  margin: 1rem 2rem 0 2rem; 
  display: block;
  font-size: 1.2em; /* Tamaño ligeramente mayor */
}

.articles .blockquote-inner p {
  text-indent: 0;
  text-align: center;
}

/* COMILLAS DECORATIVAS */
.articles blockquote:before,
.articles blockquote:after {
  font-size: 4.5rem;
  margin: 0;
  padding: 0 0.25rem;
  position: relative;
  height: 1.5rem;
}

.articles blockquote:before { content: "“"; float: left; top:-0.35rem; }
.articles blockquote:after  { content: "”"; float: right; top:-1.35rem; }

/* LIMPIEZA DE FLOATS: Clase que asegura que floats no rompan layout */
.clearfix {
  content: "";
  display: block;
  clear: both;
  margin: 0;
  padding: 0;
  height: 0;
}

/* "CONTINUED..." / "CONTINUED FROM...": Estilo de continuación de artículos */
.articles .readmore p, .articles .continued p {
  font-size: 0.89em;
  text-indent: 0;
}

.articles .readmore p {
  font-weight: bold;
  text-align: right;
  margin: 0.5rem 0 0 0;
}

.articles .readmore:after {
  display: block;
  height: 0.1rem;
  content: "";
}

.continued p {
  font-style: italic;
  margin: 0.5rem 0;
}

/* Cuadros y caption */
figure.obra {
  text-align: center;
  margin: 2em 0;
}
figure.obra img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
figure.obra figcaption {
  margin-top: 0.5em;
  font-size: 0.9em;
  color: #555;
}


/* MEDIA QUERIES: Ajustes para pantallas medianas y móviles */
@media (max-width: 754px) {
  .main { width: 100%; } /* Contenedor ocupa todo el ancho */
}

@media (max-width: 500px) {
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.1rem; }
  h3 { font-size: 0.975rem; }
  h4 { font-size: 0.92rem; }
  .sub-left, .sub-right { max-width: 50%; }
  body { font-size: 0.87rem; } /* Reducir tamaño base */
}

/* IMÁGENES: comportamiento por defecto (páginas de artículo: a color) */
.articles img {
  display: block;
  max-width: 100%;
  height: auto;
  text-align: center;
  margin: 0.5rem auto;
  filter: none; /* en artículos, las imágenes se muestran a todo color */
  transition: none;
}

/* IMÁGENES EN TARJETAS (portada / listados / cualquier tarjeta) */
/* Aplica el efecto blanco y negro + transición a color sólo dentro de .card o usando la clase .card-image */
.card img,
.card-image,
.card-image-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0;
  filter: grayscale(90%);         /* tono casi B/N */
  transition: filter 0.35s ease;  /* transición suave hacia el color */
}

/* Hover/Focus en tarjetas: pasa a color */
.card img:hover,
.card-image:hover,
.card-image-wrap img:hover,
.card img:focus,
.card-image:focus,
.card-image-wrap img:focus {
  filter: grayscale(0%);
}

/* Si tienes imágenes grandes de portada que quieres conservar a color, asegúrate de que no estén dentro de .card */
/* figure.obra ya permanece sin filtro: */
figure.obra img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  filter: none;
}