@charset "UTF-8";
/* ============================================================================
   BLOG — «El cuadrante»
   ----------------------------------------------------------------------------
   El blog de Riu Rau es un ALMANAQUE: doce guías de mes, las fiestas en su
   fecha y la temporada que sube y baja. Y eso es justo lo que la marca vende
   — que aquí hay doce meses, no tres. Toda la página se ordena desde ahí.

   Movimiento propio: un RELOJ DE SOL. Doce marcas en una esfera y una sombra
   larga que gira muy despacio. Es el tiempo (de lo que va un blog fechado),
   el sol (la marca) y el año (la estructura). Y es un radio que gira, así que
   no se confunde con los anillos de Contacto, las ondas del listado, la
   retícula de Servicios ni las franjas de Sobre nosotros.

   Doctrina heredada, que aquí también manda:
     · fuera cajas, chips e iconos decorativos: tipografía, hairlines y aire
     · una sola máscara por elemento, y escritas las dos líneas (-webkit- y
       estándar), comprobadas en el valor calculado
     · el clip-path de revelado NUNCA en el elemento observado
   ========================================================================= */

/* ---------------------------------------------------------------- lienzo -- */

/* La esfera vive arriba a la derecha y se sale de la pantalla: se intuye que
   sigue, como un cuadrante grabado en una pared que no cabe entera. */
.b-cuadrante {
  position: absolute;
  top: -34vh; right: -30vw;
  width: 132vh; height: 132vh;
  min-width: 620px; min-height: 620px;
  pointer-events: none;
  /* Textura, no elemento: donde cruza un titular no puede competir con él. */
  opacity: .58;
}

/* Las doce marcas. Radios finísimos recortados a la corona exterior por una
   máscara: desde el centro serían un sol de rayos, y eso es otra cosa. */
.b-marcas {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -90deg,
    rgba(146, 93, 0, .17) 0deg .22deg,
    transparent .22deg 30deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 0 74%, #000 84%, #000 97%, transparent 100%);
          mask-image: radial-gradient(closest-side, transparent 0 74%, #000 84%, #000 97%, transparent 100%);
}

/* Las cuatro marcas mayores (los solsticios y los equinoccios: el año tiene
   cuatro esquinas, no doce iguales). */
.b-marcas--mayor {
  background: repeating-conic-gradient(from -90deg,
    rgba(146, 93, 0, .26) 0deg .4deg,
    transparent .4deg 90deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 0 66%, #000 76%, #000 98%, transparent 100%);
          mask-image: radial-gradient(closest-side, transparent 0 66%, #000 76%, #000 98%, transparent 100%);
}

/* El borde del cuadrante. */
.b-aro {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(146, 93, 0, .13);
}
.b-aro--dentro { inset: 13%; border-color: rgba(146, 93, 0, .07); }

/* LA SOMBRA. Un sector que sale del centro y se desvanece hacia el borde, y
   que da una vuelta cada cuatro minutos: se mueve, pero nadie lo ve moverse.
   Dos, a distinta velocidad y opacidad, para que tenga fondo. */
.b-sombra {
  position: absolute; inset: 0;
  border-radius: 50%;
  transform-origin: 50% 50%;
  will-change: transform;
}
.b-sombra i {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -96deg,
    transparent 0deg 1.5deg,
    rgba(146, 93, 0, .085) 7deg,
    rgba(146, 93, 0, .03) 15deg,
    transparent 26deg 360deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0 40%, rgba(0,0,0,.5) 72%, transparent 98%);
          mask-image: radial-gradient(closest-side, #000 0 40%, rgba(0,0,0,.5) 72%, transparent 98%);
}
.b-sombra--1 { animation: bGirar 232s linear infinite; }
.b-sombra--2 { animation: bGirar 361s linear infinite reverse; opacity: .5; }
.b-sombra--2 i { background: conic-gradient(from -98deg,
    transparent 0deg 2deg,
    rgba(45, 172, 186, .075) 9deg,
    rgba(45, 172, 186, .028) 18deg,
    transparent 30deg 360deg); }

@keyframes bGirar { to { transform: rotate(360deg); } }

/* El gnomon: el punto del que sale la sombra. Un resplandor, no un círculo. */
.b-gnomon {
  position: absolute; left: 50%; top: 50%;
  width: 26vh; height: 26vh; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 166, 60, .16) 0%, rgba(224, 166, 60, .05) 45%, transparent 70%);
}

/* ------------------------------------------------------------- estructura -- */

.b-wrap {
  width: min(1680px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-blog main { position: relative; z-index: 1; }

/* Rótulo de sección: versalitas mono con su trazo. El mismo componente que
   ordena la página madre y «Sobre nosotros» — que todas las secciones entren
   igual es lo que hace que no se noten las costuras. */
.b-rotulo {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mostaza); font-weight: 400;
  margin: 0 0 26px;
}
.b-rotulo::after {
  content: ""; display: block; height: 1px; width: 46px;
  background: linear-gradient(90deg, rgba(146,93,0,.42), rgba(146,93,0,0));
  transform-origin: left;
}
.b-rotulo--n { color: var(--crema); }
.b-rotulo--n::after { background: linear-gradient(90deg, rgba(255,238,207,.42), rgba(255,238,207,0)); }

/* ---------------------------------------------------------------- cabecera - */

.b-head { padding-top: calc(var(--header-h) + 54px); }

.b-h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--mostaza);
  font-size: clamp(2.35rem, 9.2vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.018em;      /* tracking negativo al crecer (§tipografía) */
  margin: 0;
  max-width: 15ch;
}
.b-lead {
  margin: 20px 0 0;
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--tinta-soft);
  font-weight: 300;
}

/* ------------------------------------------------------- la banda del año -- */
/* Doce meses. El que corre, marcado. Cada uno lleva a su guía; si no tiene
   guía pero sí entradas, al listado de ese mes; y si no hay nada, se ve pero
   no promete nada (mayo, hoy). Esto es navegación, no adorno: es lo que
   convierte cuarenta y cinco artículos sueltos en un año que se puede mirar. */

.b-anyo { margin-top: 48px; }

.b-anyo-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.b-anyo-nota {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-soft); opacity: .8;
}

/* En móvil la banda se desliza; en escritorio caben los doce. */
.b-meses {
  display: flex;
  gap: 0;
  list-style: none; margin: 0; padding: 0 0 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-top: 1px solid rgba(146, 93, 0, .16);
}
.b-meses::-webkit-scrollbar { display: none; }
/* En móvil caben cinco meses: si el borde derecho se corta en seco, nadie
   sabe que hay doce. Se desvanece, que es la forma de decir «sigue». */
@media (max-width: 899px) {
  .b-meses {
    -webkit-mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
  }
}

.b-mes {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 74px;
}
.b-mes > * {
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 10px 15px;
  text-decoration: none;
  position: relative;
  color: inherit;
}
.b-mes-n {
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .1em;
  color: var(--tinta-soft); opacity: .55;
}
.b-mes-t {
  font-family: var(--font-display);
  font-size: 1.12rem; line-height: 1;
  color: var(--tinta);
  letter-spacing: -.01em;
}
.b-mes-c {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em;
  color: var(--mostaza); opacity: .75;
  min-height: .9em;                     /* reserva su hueco: nada salta */
}

/* La línea superior de cada mes: es la que dice si hay algo. */
.b-mes > *::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--mostaza); opacity: 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out), opacity .3s;
}
.b-mes--hay > *::before { opacity: .34; transform: scaleX(1); }

/* El mes en curso. La página se pone al día sola: nadie tiene que tocarla. */
.b-mes--hoy > *::before { opacity: 1; height: 2px; background: var(--oro); }
.b-mes--hoy .b-mes-t { color: var(--mostaza); font-style: italic; }
.b-mes--hoy .b-mes-n { opacity: 1; color: var(--mostaza); }

/* Un mes sin nada no se disfraza de enlace. */
.b-mes--vacio .b-mes-t,
.b-mes--vacio .b-mes-n { opacity: .34; }
.b-mes--vacio > * { cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .b-mes--hay > a:hover::before { opacity: 1; }
  .b-mes--hay > a:hover .b-mes-t { color: var(--mostaza); }
}

/* --------------------------------------------------------- el destacado --- */
/* La guía del mes en curso, a tamaño de portada. Es lo primero que necesita
   quien llega: «estoy pensando venir ahora, ¿qué hay?». */

.b-dest { margin-top: 64px; }

.b-dest-a { display: block; text-decoration: none; color: inherit; }

.b-dest-foto {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-inline: calc(var(--gutter) * -1);   /* a sangre: sin cantos, sin caja */
}
.b-dest-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* La foto se disuelve por arriba y por abajo. Una sola máscara vertical: al
   ir a sangre no hay cantos laterales que tapar, y la asimetría (canto recto
   arriba, disuelto abajo) es justo lo que se lee como corte. */
.b-dest-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(251,243,225,.5) 0%, rgba(251,243,225,0) 22%, rgba(251,243,225,0) 62%, rgba(251,243,225,.9) 100%);
}

.b-dest-txt { margin-top: -34px; position: relative; z-index: 2; }
.b-dest-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mostaza);
  margin-bottom: 12px;
}
.b-dest-meta i { font-style: normal; opacity: .4; }
.b-dest-t {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6.4vw, 2.3rem);
  line-height: 1.12; letter-spacing: -.015em;
  color: var(--tinta);
  margin: 0;
  max-width: 19ch;
}
.b-dest-x {
  margin: 14px 0 0; max-width: 46ch;
  font-size: .97rem; line-height: 1.66; color: var(--tinta-soft); font-weight: 300;
}

/* --------------------------------------------------------------- filtros -- */

.b-lista-sec { margin-top: 74px; }

.b-filtros {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(146, 93, 0, .16);
}
.b-filtro {
  appearance: none; background: none; border: 0; padding: 4px 0;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-soft);
  cursor: pointer; position: relative;
  transition: color .22s;
}
.b-filtro::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 1px;
  background: var(--mostaza);
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease-out);
}
.b-filtro[aria-pressed="true"] { color: var(--mostaza); }
.b-filtro[aria-pressed="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .b-filtro:hover { color: var(--mostaza); }
}

/* ---- la página de una categoría ---- */
/* Los filtros son enlaces: hay que quitarles lo que el navegador les pone
   y dejar el mismo aspecto que tenían de botones. */
a.b-filtro { text-decoration: none; display: inline-block; }
a.b-filtro.is-on { color: var(--mostaza); }
a.b-filtro.is-on::after { transform: scaleX(1); }

/* El rótulo de la cabecera pasa a ser el camino de vuelta. La flecha va
   en el ::before para que no haga falta tocar el marcado. */
.b-volver {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .22s;
}
.b-volver::before { content: "\2190"; font-size: 1.05em; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  .b-volver:hover { color: var(--mostaza); }
}

/* En una categoría el título es un nombre corto, no la frase de dos líneas
   del índice: se queda en una escala algo menor para que no grite. */
body.is-cat .b-h1 { font-size: clamp(2.1rem, 8vw, 3.1rem); }
@media (min-width: 900px) {
  body.is-cat .b-h1 { font-size: clamp(3rem, 4.4vw, 4.2rem); }
}

.b-cuenta {
  margin: 16px 0 0;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em;
  color: var(--tinta-soft);
}
.b-cuenta b { font-weight: 400; color: var(--mostaza); }
.b-cuenta.is-changing { opacity: 0; transform: translateY(-5px); }
.b-cuenta { transition: opacity .2s, transform .2s var(--ease-out); }

/* Quitar el filtro de mes: solo aparece cuando hay uno puesto. */
.b-quitar {
  appearance: none; background: none; border: 0; padding: 0; margin-left: 12px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em;
  color: var(--mostaza); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.b-quitar[hidden] { display: none; }

/* ----------------------------------------------------------- las entradas - */
/* Filas, no tarjetas. Hairline entre ellas, la foto en 3/2 y el texto al lado.
   Es el mismo gesto que la rejilla de propietarios de la portada y las filas
   del listado de casas: la web se nota de una pieza cuando el mismo problema
   se resuelve siempre igual. */

.b-lista { list-style: none; margin: 30px 0 0; padding: 0; }

.b-item { position: relative; border-bottom: 1px solid rgba(146, 93, 0, .15); }
.b-item:first-child { border-top: 1px solid rgba(146, 93, 0, .15); }

/* La línea de arriba se enciende al pasar (escritorio). */
.b-item::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, var(--oro), rgba(224,166,60,0));
  transform: scaleX(0); transform-origin: left;
  transition: transform .62s var(--ease-out);
}

.b-item-a {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: start;
  padding: 22px 0;
  text-decoration: none; color: inherit;
}

.b-item-foto {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(146, 93, 0, .07);
}
.b-item-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}

/* Sin foto: no se deja un hueco gris. Va el mes en grande, que es dato de
   verdad y encaja con el almanaque. Dos entradas están así hoy (las guías de
   agosto y septiembre, que son justo las mejores). */
.b-item-foto--sin,
.b-dest-foto--sin {
  display: grid; place-items: center;
  position: relative;
  background: linear-gradient(150deg, rgba(146,93,0,.13), rgba(45,172,186,.07) 62%, rgba(224,166,60,.09));
}
/* El arco del cuadrante, que es la figura de esta página: así el hueco no es
   un hueco, es un grabado de almanaque con su mes. */
.b-item-foto--sin::before,
.b-dest-foto--sin::before {
  content: ""; position: absolute;
  left: 50%; bottom: 14%;
  width: 62%; aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border: 1px solid rgba(146, 93, 0, .3);
  border-bottom: 0;
  border-radius: 50em 50em 0 0;
}
.b-dest-foto--sin::after {
  content: ""; position: absolute;
  left: 50%; bottom: 14%;
  width: 78%; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(146,93,0,0), rgba(146,93,0,.34), rgba(146,93,0,0));
}
.b-item-foto--sin img, .b-dest-foto--sin img { display: none; }
.b-sin {
  font-family: var(--font-display); font-style: italic;
  color: var(--mostaza); opacity: .45;
  font-size: 1.5rem; letter-spacing: -.02em;
}
.b-dest-foto--sin .b-sin { font-size: clamp(2.6rem, 11vw, 4.4rem); opacity: .34; }

/* Filtrar no es un salto: la lista se funde, repinta y vuelve. */
.b-lista { transition: opacity .22s ease-out; }
.b-lista.is-swapping { opacity: 0; }

/* El escalonado de entrada de las filas que ya se ven al pintar. */
.js .b-item[data-anim="up"] { transition-delay: var(--st, 0ms); }

.b-item-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mostaza);
  margin-bottom: 8px;
}
.b-item-meta i { font-style: normal; opacity: .38; }
.b-item-meta .b-fecha { color: var(--tinta-soft); opacity: .85; }

.b-item-t {
  font-family: var(--font-display);
  font-size: 1.12rem; line-height: 1.24; letter-spacing: -.005em;
  color: var(--tinta); margin: 0;
  width: fit-content; position: relative;
}
/* El subrayado dorado que se dibuja: el mismo de toda la web. */
.b-item-t::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--oro);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.b-item-x {
  margin: 9px 0 0; font-size: .88rem; line-height: 1.58;
  color: var(--tinta-soft); font-weight: 300;
  display: none;                       /* en móvil manda el titular */
}

@media (hover: hover) and (pointer: fine) {
  .b-item-a:hover .b-item-t::after { transform: scaleX(1); }
  .b-item-a:hover .b-item-foto img { transform: scale(1.04); }
  .b-item:hover::before { transform: scaleX(1); }
}

/* Nada que enseñar: se dice, no se deja la lista vacía. */
.b-vacio {
  padding: 46px 0; text-align: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.2rem; color: var(--tinta-soft);
}
.b-vacio[hidden] { display: none; }

/* --------------------------------------------------- el paso a la noche --- */
/* El horizonte es EL MISMO CUADRANTE, ya a tamaño completo: el arco y sus doce
   marcas cruzando la costura. La figura del fondo, que aparece una vez.
   El degradado necesita sitio vacío donde ocurrir; esa franja no es hueco. */

.b-horizonte {
  position: relative;
  height: 96px;
  overflow: hidden;
  margin-bottom: -1px;
}
.b-horizonte::before {
  content: ""; position: absolute;
  left: 50%; bottom: -132%;
  width: 190%; padding-top: 190%;
  transform: translateX(-50%);
  border-radius: 50%;
  border-top: 1px solid rgba(255, 238, 207, .3);
  -webkit-mask-image: linear-gradient(180deg, #000 0 42%, transparent 74%);
          mask-image: linear-gradient(180deg, #000 0 42%, transparent 74%);
}

/* La zona noche: mismo recorrido de color que el resto del sitio. El degradado
   se comprime para que el primer texto en crema caiga en teal pleno — medido,
   no a ojo (ver herramientas/mide-noche-blog.js). */
.page-blog .night {
  position: relative;
  background: linear-gradient(180deg,
    rgba(251, 243, 225, 0) 0px,
    #1d6b72 118px,
    #146E78 320px,
    #11626C 58%,
    #0E5560 82%,
    #160F04 100%);
}
.page-blog .night > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------ cierre CTA -- */

.b-cierre { padding-top: 64px; padding-bottom: 76px; }
.b-cierre-t {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.7rem, 6.6vw, 2.2rem);
  line-height: 1.16; color: var(--crema); margin: 0; max-width: 17ch;
}
.b-cierre-x {
  margin: 16px 0 26px; max-width: 42ch;
  color: rgba(255, 238, 207, .76); font-weight: 300;
  font-size: .98rem; line-height: 1.66;
}
.b-cierre-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px;
  border: 1px solid rgba(255, 238, 207, .5);
  color: var(--crema); text-decoration: none;
  font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 100px;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s;
}
.b-cierre-btn svg { width: 15px; height: 15px; }
.b-cierre-btn:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .b-cierre-btn:hover { background: var(--crema); color: var(--tinta); border-color: var(--crema); }
}

/* ========================================================================== */
/*                                ESCRITORIO                                  */
/* ========================================================================== */

@media (min-width: 900px) {

  .b-head { padding-top: calc(var(--header-h) + 92px); }

  .b-h1 { font-size: clamp(3.4rem, 5.2vw, 4.6rem); letter-spacing: -.025em; max-width: 17ch; }
  .b-lead { font-size: 1.12rem; max-width: 40ch; }

  /* Cabecera partida: el título a la izquierda y la entrada a su derecha,
     alineada a la base. Sin esto la mitad derecha se queda vacía. */
  .b-head-in {
    display: grid; grid-template-columns: 1.25fr 1fr;
    gap: 60px; align-items: end;
  }
  .b-lead { margin-bottom: 6px; }

  .b-rotulo { font-size: 16px; margin-bottom: 30px; }
  .b-rotulo::after { width: 72px; }

  /* La banda: los doce a la vez, repartidos. */
  .b-anyo { margin-top: 68px; }
  .b-meses { overflow: visible; display: grid; grid-template-columns: repeat(12, 1fr); }
  .b-mes { min-width: 0; }
  .b-mes > * { padding: 18px 8px 20px; }
  .b-mes-t { font-size: 1.32rem; }
  .b-mes-n { font-size: .64rem; }
  .b-mes-c { font-size: .62rem; }

  /* El destacado: foto a un lado, texto al otro. */
  .b-dest { margin-top: 88px; }
  .b-dest-a {
    display: grid; grid-template-columns: 1.18fr 1fr;
    gap: 56px; align-items: center;
  }
  .b-dest-foto {
    margin-inline: 0;
    aspect-ratio: 4 / 3;
  }
  /* Con el texto al lado, la máscara tiene que morir HACIA el texto: un óvalo
     se desvanecería por igual en todas direcciones y no se notaría donde hace
     falta. Lineal, hacia la derecha. */
  .b-dest-foto::after {
    background: linear-gradient(90deg, rgba(251,243,225,0) 55%, rgba(251,243,225,.55) 100%);
  }
  .b-dest-txt { margin-top: 0; }
  .b-dest-t { font-size: clamp(2.2rem, 3.2vw, 3rem); max-width: 16ch; }
  .b-dest-x { font-size: 1.06rem; }
  .b-dest-meta { font-size: .7rem; margin-bottom: 18px; }

  /* Las filas, a escala de escritorio. */
  .b-lista-sec { margin-top: 110px; }
  .b-filtros { gap: 10px 34px; }
  .b-filtro { font-size: .78rem; }

  .b-item-a {
    grid-template-columns: 116px 1.5fr 1fr;
    gap: 40px; padding: 26px 0;
    align-items: center;
  }
  .b-item-foto { aspect-ratio: 3 / 2; }
  .b-item-t { font-size: 1.5rem; line-height: 1.2; }
  .b-item-x { display: block; font-size: .95rem; margin-top: 0; }
  .b-item-meta { font-size: .64rem; margin-bottom: 10px; }

  .b-cierre { padding-top: 96px; padding-bottom: 104px; }
  .b-cierre-t { font-size: clamp(2.4rem, 3.4vw, 3.2rem); }
  .b-cierre-x { font-size: 1.06rem; }

  .b-horizonte { height: 150px; }
  .page-blog .night {
    background: linear-gradient(180deg,
      rgba(251, 243, 225, 0) 0px,
      #1d6b72 150px,
      #146E78 380px,
      #11626C 58%,
      #0E5560 82%,
      #160F04 100%);
  }
}

@media (min-width: 1440px) {
  .b-item-a { grid-template-columns: 140px 1.5fr 1fr; gap: 52px; }
  .b-item-t { font-size: 1.65rem; }
  .b-mes-t { font-size: 1.46rem; }
}

/* ========================================================================== */
/*                            MOVIMIENTO REDUCIDO                             */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .b-sombra--1, .b-sombra--2 { animation: none; }
  .b-item::before, .b-item-t::after, .b-filtro::after, .b-mes > *::before { transition: none; }
  .b-item-foto img { transition: none; }
}