/* ==========================================================================
   Minería 4.0 Oruro — base
   Réplica de la plantilla "Vintage Retro Newspaper #14317".
   Los valores de la paleta salen del propio deck cruzados con la marca del
   medio; no los aproximes ni los "mejores".
   ========================================================================== */

:root {
  /* superficie */
  --papel: #F5E4C8;
  --papel-alt: #EFDCBC;
  --tinta: #271A13;
  --crema: #FCDBB0;
  --gris-calido: #39332B;

  /* marca — el cobre da 4.21:1 sobre el papel: solo gráfico, nunca texto */
  --acento: #A3582D;
  --acento-texto: #8A4823;

  /* retícula */
  --filete: #271A13;
  --filete-suave: rgba(39, 26, 19, 0.35);
  --filete-grueso: 3px;
  --filete-fino: 1px;

  /* tipografía */
  --display: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  --texto: 'Lora', Georgia, 'Times New Roman', serif;
  --cifras: 'IBM Plex Sans', system-ui, sans-serif;

  /* medidas */
  --ancho-pagina: 1180px;
  --paso: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.55;
  /* Textura de papel viejo: dos capas de ruido suave + viñeteado en los
     bordes. Se generan con gradientes, sin ningún archivo de imagen. */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(39, 26, 19, 0.10), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(39, 26, 19, 0.10), transparent 60%),
    radial-gradient(circle at 18% 32%, rgba(122, 69, 38, 0.07), transparent 22%),
    radial-gradient(circle at 76% 68%, rgba(122, 69, 38, 0.06), transparent 26%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--acento-texto); }
a:hover { color: var(--tinta); }

/* Cuerpo de nota: justificado, sangría de primera línea y sin espacio entre
   párrafos. Es lo que hace que se lea como columna de diario y no como blog. */
.cuerpo p {
  margin: 0;
  text-align: justify;
  hyphens: auto;
  text-indent: 1.6em;
}
.cuerpo p:first-of-type { text-indent: 0; }

/* Cifras: tonelaje, precio, ley del mineral. Único lugar donde entra la
   tipografía de la spec de marca, por sus cifras tabulares. */
.cifra {
  font-family: var(--cifras);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.contenedor {
  max-width: var(--ancho-pagina);
  margin: 0 auto;
  padding: 0 var(--paso);
}

/* Solo para lectores de pantalla. */
.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Grafismos mineros
   ========================================================================== */

.emblema {
  width: 68px;
  height: 68px;
  color: var(--tinta);
  flex: 0 0 auto;
}

.cenefa {
  display: block;
  width: 100%;
  height: 14px;
  color: var(--acento);
}

.punta {
  width: 52px;
  height: 14px;
  color: var(--tinta);
  flex: 0 0 auto;
}
.punta--izq { transform: scaleX(-1); }

.icono-cat {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  color: inherit;
}

/* Marca de agua: silueta de socavón y cerro, muy tenue, detrás de todo.
   pointer-events none para que no coma clics del contenido. */
.marca-agua {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0 auto;
  width: min(760px, 90vw);
  height: auto;
  color: var(--tinta);
  opacity: 0.04;
  z-index: 0;
  pointer-events: none;
}
body > *:not(.marca-agua) { position: relative; z-index: 1; }

/* ==========================================================================
   Masthead y banda de categorías
   ========================================================================== */

.pagina {
  max-width: var(--ancho-pagina);
  margin: 0 auto;
  padding: 18px var(--paso) 40px;
}

/* El marco exterior del deck: una caja fina que contiene la página entera. */
.pagina__cuerpo {
  border: var(--filete-fino) solid var(--filete);
  border-top: 0;
}

.masthead { text-align: center; }

.masthead__cinta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.masthead__bajada {
  margin: 0;
  flex: 1 1 0;
  font-style: italic;
  font-size: 12px;
  color: var(--gris-calido);
}
.masthead__bajada--izq { text-align: left; }
.masthead__bajada--der { text-align: right; }

.masthead__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  margin: 2px 0 10px;
  font-family: var(--texto);
  font-weight: 600;
  font-size: clamp(30px, 7.2vw, 76px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
}
.masthead__marca:hover { color: var(--tinta); }

.masthead__fleuron {
  font-size: 0.55em;
  color: var(--acento);
}

/* Filete doble del deck: uno grueso con uno fino debajo. */
.filete-doble {
  border-top: var(--filete-grueso) solid var(--filete);
  border-bottom: var(--filete-fino) solid var(--filete);
  height: 4px;
}
.filete-doble--invertido {
  border-top-width: var(--filete-fino);
  border-bottom-width: var(--filete-grueso);
}

.banda {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
}

.banda__lista {
  display: flex;
  gap: 18px;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
  /* En mobile la fila desborda y hace scroll horizontal. Nunca hamburguesa. */
  overflow-x: auto;
  scrollbar-width: none;
}
.banda__lista::-webkit-scrollbar { display: none; }
.banda__lista--desborda { justify-content: flex-start; }

.banda__item { flex: 0 0 auto; }

.banda__link {
  font-family: var(--texto);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
  white-space: nowrap;
}
.banda__link:hover,
.banda__link--activo {
  color: var(--acento-texto);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 720px) {
  .masthead__bajada { display: none; }
  .masthead__cinta { justify-content: center; }
  .banda .punta { display: none; }
  .banda__lista { justify-content: flex-start; }
}

/* ==========================================================================
   Pie
   ========================================================================== */

.pie {
  margin-top: 28px;
  padding-top: 14px;
  text-align: center;
}

.pie__marca {
  margin: 14px 0 2px;
  font-family: var(--texto);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pie__bajada {
  margin: 0 0 14px;
  font-style: italic;
  font-size: 13px;
  color: var(--gris-calido);
}

.pie__redes {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.pie__red {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--papel);
  background: var(--tinta);
  border: var(--filete-fino) solid var(--acento);
  border-radius: 50%;
}
.pie__red svg { width: 19px; height: 19px; }
.pie__red:hover { background: var(--acento-texto); color: var(--papel); }

.pie__legal {
  margin: 0;
  font-size: 12px;
  color: var(--gris-calido);
}

/* ==========================================================================
   Chip, tarjeta de nota, paginación
   ========================================================================== */

/* Fondo tinta y no cobre: cobre con texto crema da 3.98:1. Acá, 12.79:1. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  margin-bottom: 8px;
  background: var(--tinta);
  color: var(--crema);
  border: var(--filete-fino) solid var(--acento);
  font-family: var(--texto);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.chip:hover { background: var(--acento-texto); color: var(--papel); }

.foto { margin: 0 0 10px; }

.foto__caption {
  margin-top: 6px;
  font-family: var(--texto);
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  color: var(--gris-calido);
}

.nota { margin: 0; }

.nota__titulo {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.12;
  text-transform: uppercase;
  text-align: center;
}
.nota__titulo a { color: var(--tinta); text-decoration: none; }
.nota__titulo a:hover { color: var(--acento-texto); }

.nota__firma {
  margin: 0 0 8px;
  font-family: var(--texto);
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  color: var(--gris-calido);
}

.nota__bajada { font-size: 14px; }

/* La nota principal usa Lora SemiBold y no Abril, igual que el deck: la
   columna central lleva el titular de texto, los bloques laterales el
   display pesado. */
.nota--principal .nota__titulo {
  font-family: var(--texto);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.08;
}

.nota--retrato .nota__titulo { font-size: 20px; }
.nota--retrato .foto-vintage img { border-radius: 50%; }

.paginacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 26px 0 6px;
}
.paginacion__item a,
.paginacion__item .current {
  display: inline-block;
  padding: 5px 11px;
  border: var(--filete-fino) solid var(--filete);
  font-family: var(--texto);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  color: var(--tinta);
}
.paginacion__item .current {
  background: var(--tinta);
  color: var(--crema);
  border-color: var(--acento);
}

/* ==========================================================================
   Filtro vintage de imágenes

   Tres capas sobre cada foto:
     1. filtro sepia sobre la imagen
     2. duotono tinta→papel en multiply, que la lleva al rango del deck
     3. grano generado con feTurbulence en un data URI — sin archivo ni red

   Se aplica en tarjeta, portada y nota interna por igual: es la clase que
   emite mineria_foto_vintage(), no una regla por plantilla.
   ========================================================================== */

.foto-vintage {
  position: relative;
  display: block;
  isolation: isolate;
  border: var(--filete-fino) solid var(--filete);
  background: var(--papel-alt);
}

.foto-vintage img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(1) saturate(1.2) contrast(1.15) brightness(0.96);
}

/* Duotono: tiñe los medios tonos hacia el marrón del deck. */
.foto-vintage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(39, 26, 19, 0.30), rgba(163, 88, 45, 0.22));
  mix-blend-mode: multiply;
}

/* Grano de impresión. El SVG va inline como data URI: no hay archivo que
   pedir, así que no agrega ninguna petición ni depende de la red. */
.foto-vintage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.30;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* La foto circular de la columna lateral necesita que las tres capas sean
   circulares, no solo la imagen. */
.nota--retrato .foto-vintage {
  border-radius: 50%;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .foto-vintage img { transition: filter 0.25s ease; }
  .foto-vintage:hover img { filter: sepia(0.82) saturate(1.25) contrast(1.18) brightness(1.0); }
}

/* ==========================================================================
   Retícula de portada

   El deck arma la página como una tabla compuesta: marco exterior y hairlines
   de 1px entre celdas. Se resuelve con grid + bordes, no con <table>.
   ========================================================================== */

.banner-seccion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 12px;
  border-bottom: var(--filete-fino) solid var(--filete);
}
.banner-seccion--menor { padding: 6px 12px; }

.banner-seccion__titulo {
  margin: 0;
  font-family: var(--texto);
  font-weight: 600;
  font-size: clamp(17px, 2.2vw, 26px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.banner-seccion--menor .banner-seccion__titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(15px, 1.8vw, 21px);
}
.banner-seccion__titulo a { color: var(--tinta); text-decoration: none; }
.banner-seccion__titulo a:hover { color: var(--acento-texto); }

.reticula__fila {
  display: grid;
  border-bottom: var(--filete-fino) solid var(--filete);
}
.reticula__fila--principal { grid-template-columns: 1fr 2fr 1fr; }
.reticula__fila--tercios { grid-template-columns: repeat(3, 1fr); }

/* El último hijo de la retícula ya linda con el borde inferior de
   .pagina__cuerpo: sin esto, esa junta dibuja dos filetes pegados (uno de la
   fila, uno del marco) en vez de uno solo. */
.reticula > *:last-child { border-bottom: 0; }

.celda {
  padding: 14px;
  border-right: var(--filete-fino) solid var(--filete);
}
.celda:last-child { border-right: 0; }

.celda--central { padding: 16px 20px; }

/* Foto circular de verdad: la imagen ya sale cuadrada de WordPress
   (add_image_size con crop duro), pero fijar aspect-ratio 1/1 acá blinda el
   círculo si la celda queda más angosta que la imagen o la carga es lenta —
   sin esto, una columna desigual la ovala. */
.nota--retrato .foto-vintage,
.nota--retrato .foto-vintage img {
  aspect-ratio: 1 / 1;
}
.nota--retrato .foto-vintage img { object-fit: cover; }

@media (max-width: 900px) {
  .reticula__fila--principal { grid-template-columns: 1fr 1fr; }
  .reticula__fila--principal .celda--central { grid-column: 1 / -1; order: -1; }
  /* La celda central ahora ocupa la fila entera: su filete derecho quedaría
     pegado al marco exterior y duplicaría la línea. */
  .reticula__fila--principal .celda--central { border-right: 0; }
}

@media (max-width: 640px) {
  .reticula__fila--principal,
  .reticula__fila--tercios { grid-template-columns: 1fr; }
  /* En una sola columna, el filete pasa de vertical a horizontal. */
  .celda {
    border-right: 0;
    border-bottom: var(--filete-fino) solid var(--filete);
  }
  .celda:last-child { border-bottom: 0; }
}

/* ==========================================================================
   Nota interna
   ========================================================================== */

.nota-single { padding: 0; }

.nota-single__cabecera {
  padding: 18px 20px 0;
  text-align: center;
}

.nota-single__titulo {
  margin: 4px 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 50px);
  line-height: 1.06;
  text-transform: uppercase;
}

.nota-single__firma {
  margin: 0 0 12px;
  font-family: var(--texto);
  font-weight: 600;
  font-size: 13px;
  color: var(--gris-calido);
}

.nota-single .foto { margin: 0 20px 14px; }

/* Una columna, medida controlada. La sangría de primera línea y el
   justificado vienen de .cuerpo, en la capa base. */
.nota-single__cuerpo {
  max-width: 68ch;
  margin: 0 auto;
  padding: 0 20px 20px;
  font-size: 16px;
  line-height: 1.7;
}
.nota-single__cuerpo p + p { margin-top: 0; }

.nota-single__cuerpo h2,
.nota-single__cuerpo h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  margin: 22px 0 8px;
}

/* Filete izquierdo en tinta y no en cobre: cobre sobre papel da 4.21:1 y la
   cita es un elemento gráfico de peso, no un adorno. */
.nota-single__cuerpo blockquote {
  margin: 18px 0;
  padding: 4px 0 4px 18px;
  border-left: var(--filete-grueso) solid var(--tinta);
  font-style: italic;
}
.nota-single__cuerpo blockquote p { text-indent: 0; }

.nota-single .cenefa { margin: 8px 0 0; }

/* ==========================================================================
   Archivo y sidebar
   ========================================================================== */

/* align-items: start evita que la celda de notas se estire a la altura del
   sidebar cuando este es más alto: sin esto, la columna de notas queda con
   aire vacío al pie (síntoma real: 314px de superficie vacía en /category/).
   El filete vertical entre columnas ya no puede vivir en border-right de
   .contenedor-archivo__notas (se cortaría a la altura real de las notas,
   más corta que el sidebar) — se dibuja como fondo del contenedor, que sí
   ocupa la altura completa de la fila del grid sin importar cómo se alineen
   los hijos. */
.contenedor-archivo {
  display: grid;
  grid-template-columns: 1fr 300px;
  align-items: start;
  background-image: linear-gradient(to right, var(--filete), var(--filete));
  background-repeat: no-repeat;
  background-position: calc(100% - 300px) 0;
  background-size: var(--filete-fino) 100%;
}

.contenedor-archivo__lateral { padding: 14px; }

.aviso-vacio { padding: 24px; text-align: center; color: var(--gris-calido); }

.sidebar__bloque { margin-bottom: 18px; }

/* Caja invertida del deck. */
.sidebar__bloque--invertido {
  background: var(--tinta);
  color: var(--crema);
  border: var(--filete-fino) solid var(--acento);
  padding: 12px;
}
.sidebar__bloque--invertido a { color: var(--crema); }
.sidebar__bloque--invertido a:hover { color: var(--papel); text-decoration: underline; }

.sidebar__titulo {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
}
.sidebar__titulo--claro {
  border-bottom: var(--filete-grueso) solid var(--filete);
  padding-bottom: 6px;
}

.sidebar__vacio { font-size: 13px; color: inherit; opacity: 0.8; }

.lista-sidebar {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nota;
}

.lista-sidebar__item {
  display: grid;
  grid-template-columns: 22px 56px 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-bottom: var(--filete-fino) solid var(--filete-suave);
}
.sidebar__bloque--invertido .lista-sidebar__item {
  border-bottom-color: rgba(252, 219, 176, 0.28);
}
.lista-sidebar__item:last-child { border-bottom: 0; }

.lista-sidebar__badge {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1;
  color: var(--acento);
  text-align: center;
}
.sidebar__bloque--invertido .lista-sidebar__badge { color: var(--crema); }

.lista-sidebar__foto { width: 56px; height: 56px; }
.lista-sidebar__foto img { width: 56px; height: 56px; object-fit: cover; }

.lista-sidebar__titulo {
  font-family: var(--texto);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
  color: var(--tinta);
}
.lista-sidebar__titulo:hover { color: var(--acento-texto); }

@media (max-width: 900px) {
  /* En una sola columna no hay filete vertical que dibujar: el fondo del
     desktop quedaría flotando en un punto arbitrario del ancho. */
  .contenedor-archivo { grid-template-columns: 1fr; background-image: none; }
  .contenedor-archivo__notas {
    border-bottom: var(--filete-fino) solid var(--filete);
  }
}

/* ==========================================================================
   Búsqueda y 404
   ========================================================================== */

.pagina-minima { padding: 18px; }
.pagina-minima--centrada { text-align: center; padding: 40px 18px 48px; }

.buscador {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 22px;
  max-width: 460px;
}

.buscador__campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  background: var(--papel-alt);
  border: var(--filete-fino) solid var(--filete);
  border-right: 0;
  font-family: var(--texto);
  font-size: 14px;
  color: var(--tinta);
}
.buscador__campo::placeholder { color: var(--gris-calido); }

.buscador__boton {
  padding: 9px 16px;
  background: var(--tinta);
  color: var(--crema);
  border: var(--filete-fino) solid var(--filete);
  font-family: var(--texto);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.buscador__boton:hover { background: var(--acento-texto); color: var(--papel); }

.emblema--grande { width: 128px; height: 128px; margin: 0 auto 14px; color: var(--acento); }

.error-404__texto {
  max-width: 46ch;
  margin: 0 auto 20px;
  font-size: 16px;
}

.error-404__volver {
  font-family: var(--texto);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}

/* ==========================================================================
   Bloque de Facebook
   ========================================================================== */

.bloque-fb {
  padding: 16px;
  background: var(--tinta);
  color: var(--crema);
  border-bottom: var(--filete-fino) solid var(--filete);
}

.bloque-fb__titulo {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 30px);
  text-transform: uppercase;
  text-align: center;
}

.bloque-fb__grilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fb-post {
  border: var(--filete-fino) solid var(--acento);
  padding: 10px;
}

.fb-post__foto { display: block; margin-bottom: 8px; }
.fb-post__foto img { width: 100%; height: 160px; object-fit: cover; }

.fb-post__texto {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
}

.fb-post__pie {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--crema);
  opacity: 0.85;
}
.fb-post__pie a { color: var(--crema); }

@media (max-width: 780px) {
  .bloque-fb__grilla { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Foto ancha y contenida (Task 14, defecto 3)

   mineria-principal sale de WordPress en 1200x700 (1.71:1), pero el .foto-
   vintage img de base solo fija width:100%/height:auto, así que la imagen
   real servida puede terminar bastante más alta que eso (medido: 736px de
   alto para 1104px de ancho, ~1.5:1) y empuja todo el cuerpo por debajo del
   pliegue. El deck usa fotos anchas y contenidas, ~2:1. Se acota acá — nunca
   en inc/template-tags.php — y solo en los dos lugares donde la foto es
   grande: la nota interna y la nota principal de portada.
   ========================================================================== */
.nota-single .foto-vintage,
.nota-single .foto-vintage img,
.nota--principal .foto-vintage,
.nota--principal .foto-vintage img {
  aspect-ratio: 2 / 1;
}
.nota-single .foto-vintage img,
.nota--principal .foto-vintage img {
  object-fit: cover;
}