:root {
  --bordo: #a4000b;
  --bordo-oscuro: #7a0008;
  --crema: #fbf6ee;
  --crema-card: #ffffff;
  --texto: #2b2320;
  --texto-suave: #6b5f57;
  --borde: #e8ddd0;
  --sombra: 0 10px 30px rgba(122, 0, 8, 0.08);
  --radio: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font-family: 'Alegreya', Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
}

h1, h2, h3, .brand-title {
  font-family: 'Alegreya SC', Georgia, serif;
  color: var(--bordo);
  letter-spacing: 0.01em;
  margin: 0;
}

a { color: inherit; }

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

.site-header {
  background: var(--crema);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.brand img { height: 48px; width: auto; }

.brand-title {
  font-size: 1.4rem;
  line-height: 1.1;
}

.brand-subtitle {
  font-family: 'Alegreya', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--texto-suave);
  display: block;
}

.back-link {
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--bordo);
  border: 1px solid var(--bordo);
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.back-link:hover { background: var(--bordo); color: #fff; }

.back-link-movil {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--bordo);
  color: var(--bordo);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.back-link-movil svg { width: 18px; height: 18px; }

.back-link-movil:hover,
.back-link-movil:active { background: var(--bordo); color: #fff; }

.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 24px;
  text-align: center;
}

.hero h1 { font-size: 2.6rem; }

.hero p {
  color: var(--texto-suave);
  max-width: 640px;
  margin: 14px auto 0;
  font-size: 1.1rem;
}

/* Hero con ticker de fotos de fondo */
.hero--ticker {
  position: relative;
  max-width: none;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bordo-oscuro);
}

/* .ticker se usa tanto de fondo del hero como de "portada" de una tarjeta/post:
   siempre ocupa el 100% del contenedor que lo envuelve (ese contenedor es el
   que define el tamaño real, vía position:relative + una altura o aspect-ratio). */
.ticker {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ticker__track {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 10px;
  padding-left: 10px;
  animation: ticker-desplazar 70s linear infinite;
  will-change: transform;
}

.ticker__track img {
  height: 100%;
  width: auto;
  flex: 0 0 auto;
  border-radius: 0;
  opacity: 0.9;
}

@keyframes ticker-desplazar {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* Cinta de texto con anuncios cortos (avisos, novedades urgentes, etc.) */
.ticker-texto {
  overflow: hidden;
  background: var(--bordo);
  border-radius: var(--radio);
  padding: 12px 0;
}

/* En desktop, el sidebar "Lo último" es sticky y su capa puede pintarse por
   encima de una franja que ocupe las dos columnas, cortándola visualmente.
   Para evitar esa colisión, esta cinta intercalada solo se usa en mobile
   (donde el sidebar no es sticky); en desktop alcanza con la cinta final. */
.ticker-texto--intercalado { display: none; }

.ticker-texto--final { margin-top: 28px; }

.ticker-texto__track {
  display: flex;
  width: max-content;
  animation: ticker-texto-desplazar 26s linear infinite;
  will-change: transform;
}

.ticker-texto__grupo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-right: 40px;
}

.ticker-texto__item {
  color: #fff;
  font-family: 'Alegreya SC', Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ticker-texto__separador {
  color: rgba(255, 255, 255, 0.55);
  margin: 0 24px;
}

@keyframes ticker-texto-desplazar {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-texto__track { animation: none; }
}

@media (max-width: 560px) {
  .ticker-texto__item { font-size: 0.9rem; }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(74, 3, 8, 0.6), rgba(74, 3, 8, 0.78));
  z-index: 1;
}

.hero__contenido {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  text-align: center;
}

.hero__eyebrow {
  display: inline-block;
  color: #fff;
  font-family: 'Alegreya SC', Georgia, serif;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 8px;
}

.hero__contenido h1 {
  color: #fff;
  font-size: 2.6rem;
}

.hero__contenido p {
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  margin: 14px auto 0;
  font-size: 1.1rem;
}

@media (max-width: 560px) {
  .hero--ticker { min-height: 260px; }
}

.contenido {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}

.layout-dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}

.col-lateral { position: sticky; top: 90px; }

.grid-novedades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 32px;
}

.panel-destacados {
  background: var(--bordo);
  border-radius: var(--radio);
  padding: 26px 22px;
  box-shadow: var(--sombra);
}

.panel-destacados__titulo {
  color: #fff;
  font-size: 1.3rem;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.panel-destacados__lista {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

.destacado-item {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: #fff;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: opacity 0.2s ease;
}

.destacado-item:last-child { border-bottom: none; padding-bottom: 4px; }

.destacado-item:hover { opacity: 0.8; }

.destacado-fecha {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}

.destacado-fecha strong {
  font-family: 'Alegreya SC', Georgia, serif;
  font-size: 1.35rem;
}

.destacado-fecha span {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.destacado-titulo {
  font-family: 'Alegreya SC', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.3;
}

.destacado-vacio {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  margin-top: 14px;
}

@media (max-width: 860px) {
  .layout-dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .col-lateral { position: static; order: -1; }
  .ticker-texto--intercalado { display: block; grid-column: auto; order: -1; margin-top: 20px; }
}

.tarjeta {
  background: var(--crema-card);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--texto);
  border: 1px solid var(--borde);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(122, 0, 8, 0.14);
}

.tarjeta__imagen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--borde);
}

.tarjeta__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta__cuerpo {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.fecha {
  font-family: 'Alegreya', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tarjeta__titulo {
  font-size: 1.25rem;
  line-height: 1.3;
}

.tarjeta__extracto {
  color: var(--texto-suave);
  font-size: 0.98rem;
  flex: 1;
}

.leer-mas {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bordo);
  margin-top: 6px;
}

.etiqueta-nivel {
  display: inline-block;
  width: fit-content;
  font-family: 'Alegreya', Georgia, serif;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--bordo);
  background: rgba(164, 0, 11, 0.08);
  border: 1px solid rgba(164, 0, 11, 0.25);
  padding: 3px 12px;
  border-radius: 999px;
  margin: -2px 0 2px;
}

.etiqueta-nivel--post {
  margin: 10px auto 0;
}

.badge-fijado {
  display: inline-block;
  width: fit-content;
  font-family: 'Alegreya SC', Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--bordo);
  padding: 3px 12px;
  border-radius: 999px;
  margin: -2px 0 2px 8px;
  vertical-align: middle;
}

.ver-todo {
  text-align: center;
  margin-top: 36px;
}

.boton-bordo {
  display: inline-block;
  background: var(--bordo);
  color: #fff;
  text-decoration: none;
  font-family: 'Alegreya SC', Georgia, serif;
  font-size: 1.1rem;
  padding: 14px 36px;
  border-radius: 999px;
  box-shadow: var(--sombra);
  transition: background 0.2s ease, transform 0.2s ease;
}

.boton-bordo:hover {
  background: var(--bordo-oscuro);
  transform: translateY(-2px);
}

/* El botón "¡Ver todo!" es el cierre del listado principal, así que le damos
   más presencia: más grande, con degradé, mayúsculas espaciadas y una
   animación de flecha al pasar el mouse. */
.boton-ver-todo {
  background: linear-gradient(135deg, var(--bordo), var(--bordo-oscuro));
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 18px 48px;
  box-shadow: 0 14px 34px rgba(122, 0, 8, 0.28);
}

.boton-ver-todo span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.boton-ver-todo:hover {
  background: linear-gradient(135deg, var(--bordo-oscuro), var(--bordo));
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 40px rgba(122, 0, 8, 0.34);
}

.boton-ver-todo:hover span {
  transform: translateX(6px);
}

.vacio {
  text-align: center;
  padding: 60px 20px;
  color: var(--texto-suave);
}

/* Página individual de novedad */
.post-hero__imagen {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-top: 28px;
}

.post-hero__imagen img { width: 100%; height: 100%; object-fit: cover; }

.post-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 0;
  text-align: center;
}

.post-header h1 { font-size: 2.2rem; }

.post-body {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 0 24px 80px;
}

.post-body p { margin: 0 0 1.2em; }
.post-body h2 { color: var(--bordo); font-size: 1.5rem; margin: 1.6em 0 0.6em; clear: both; }
.post-body img { border-radius: var(--radio); margin: 1.5em 0; box-shadow: var(--sombra); }
.post-body blockquote {
  border-left: 4px solid var(--bordo);
  margin: 1.5em 0;
  padding: 0.4em 0 0.4em 1.2em;
  font-style: italic;
  color: var(--texto-suave);
}

/* Fotos intercaladas dentro del texto (a partir de "galeria" en el frontmatter):
   van centradas, cada una en su propia línea, alternando tamaño. No flotan al
   lado del texto a propósito: eso evitaba que quedaran huecos en blanco o
   títulos apretados entre dos fotos. */
.img-centrada {
  margin: 1.6em auto;
  text-align: center;
}

.img-centrada img {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin: 0;
  display: inline-block;
}

.img-centrada--grande {
  max-width: 100%;
}
.img-centrada--mediana {
  max-width: 380px;
}
.img-centrada--chica {
  max-width: 260px;
}

.img-centrada figcaption {
  margin-top: 0.5em;
  font-size: 0.85em;
  font-style: italic;
  color: var(--texto-suave);
}

.post-nav {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

.post-cta {
  max-width: 760px;
  margin: 8px auto 0;
  padding: 0 24px;
  text-align: center;
}

.site-footer {
  border-top: 1px solid var(--borde);
  padding: 32px 24px;
  text-align: center;
  color: var(--texto-suave);
  font-size: 0.9rem;
}

.site-footer a { color: var(--bordo); text-decoration: none; }

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--bordo);
  color: var(--bordo);
  transition: background 0.2s ease, color 0.2s ease;
}

.footer-social__link svg {
  width: 20px;
  height: 20px;
}

.footer-social__link:hover {
  background: var(--bordo);
  color: #fff;
}

@media (max-width: 560px) {
  .hero h1 { font-size: 2rem; }
  .post-header h1 { font-size: 1.7rem; }
  .site-header__inner { flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
  .brand { gap: 10px; min-width: 0; }
  .brand img { height: 38px; }
  .brand-title { font-size: 1.15rem; }
  .brand-subtitle { font-size: 0.8rem; }
  .back-link { display: none; }
  .back-link-movil { display: flex; }
}

@media (max-width: 360px) {
  .brand-subtitle { display: none; }
}