/* realesdea8.com — listado del blog (/blog/)
 *
 * Traducción fiel del handoff "Rediseño listado blog Reales de a 8" (Claude
 * Design, 2026-08-14). Los valores de color, tamaño, espaciado y easing salen
 * TAL CUAL de su README: es un diseño hifi, no una interpretación.
 *
 * OJO: esta paleta NO es la de `tokens.css` (que sigue mandando en la entrada y
 * en los archivos). El handoff trae un registro propio para el listado — crema
 * de papel en el hero, dorado oscuro para enlaces, elevación en el hover de la
 * tarjeta. Se declara aquí, acotada a `.r8h`, para que no se cuele en el resto
 * del blog ni en la tienda.
 */

/* El hero se sale del contenedor con `100vw`, que incluye la barra de scroll:
   sin este corte aparecen unos pixeles de scroll horizontal. Va aqui y no en
   blog.css para que el listado no dependa del rediseno de la entrada. */
html:has(body.r8h-hub), body.r8h-hub { overflow-x: clip; }
body.r8h-hub { background: #fff; }

.r8h {
  /* ---- tinta ---- */
  --r8h-ink:          #231f20;  /* = --r8b-ink */
  --r8h-ink-2:        #57504a;  /* entradillas */
  --r8h-ink-3:        #6f665c;  /* fechas, rótulos */

  /* ---- dorados ---- */
  --r8h-gold:         #c59b4a;  /* = --r8b-gold, acento */
  --r8h-gold-deep:    #8a6b2f;  /* enlaces y palabra destacada del h2 */
  --r8h-gold-soft:    #b48c42;  /* iconos */
  --r8h-gold-light:   #dcc794;  /* filetes y borde de hover */

  /* ---- superficies ---- */
  --r8h-white:        #fff;
  --r8h-cream:        #fdf8ec;  /* papel del hero */
  --r8h-cream-top:    #fefbf3;
  --r8h-cream-bot:    #f8f1e0;
  --r8h-cream-corner: #f8f2e3;  /* esquina de destacado */

  /* ---- filetes ---- */
  --r8h-rule-card:    #ece5d6;
  --r8h-rule-paper:   #e6dcc4;
  --r8h-rule-inner:   #f1ece0;

  --r8h-ease:         cubic-bezier(.2, .7, .3, 1);
  --r8h-w:            1160px;

  /* Se sale del contenedor del tema: el hero va a sangre y las bandas miden
     1160px de verdad, no lo que deje GeneratePress. */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);

  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  color: var(--r8h-ink);
  background: var(--r8h-white);
}

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

.r8h .r8h-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.r8h .r8h-i { display: block; fill: currentColor; }

/* ------------------------------------------------------------------- hero */

/* El hero de PAPEL del handoff (crema + textura de ruido SVG + 6 iconos Phosphor
   flotando) se cambió el 2026-08-14 por la misma foto de cabecera que usa
   /servicios/, para que el blog entre igual que el resto del sitio. El de papel
   está entero en el git, en el commit anterior. */

/* Alto MINIMO comun con /servicios/ (misma regla en servicios.css). Antes cada
   hero media lo que le pedia su texto -- 285px aqui, 311px alli, porque su
   entradilla ocupa dos lineas-- y de igual no tenian pinta. Ahora manda la caja
   y el texto se centra dentro; el padding solo actua de suelo en movil. */
.r8h .r8h-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(200px, 19.8vw, 300px);
  /* El negro va DEBAJO a propósito: si la foto no cargara (o no existiera el
     fichero), el texto blanco se queda sobre negro, nunca sobre nada. */
  background-color: var(--r8h-ink);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.r8h .r8h-hero.is-foto { background-image: var(--r8h-hero-img); }

/* Velo. MEDIDO sobre la foto real leyendo pixeles del render, no estimado: la
   zona por donde pasa el texto ya es muy oscura (rgb 28,28,29), asi que el
   blanco da 10,2:1 incluso SIN velo. El primer valor que probe (.58/.72) subia
   a 17:1 pero dejaba la foto casi negra y perdia las monedas. Con .22/.36 la
   imagen se lee como en /servicios/ y el texto sigue en 13:1, muy por encima
   del 4,5:1 que pide el cuerpo de 17px; el margen sobrante es para los recortes
   de la foto en pantallas estrechas, donde puede caer una moneda clara detras
   del texto.

   Subido a .34/.48 el 2026-08-14: con .22/.36 los brillos de las monedas
   quedaban demasiado vivos y el hero "resplandecia". Sigue muy lejos del
   .58/.72 del primer intento, que borraba la foto entera. */
.r8h .r8h-hero__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(18, 14, 11, .34), rgba(18, 14, 11, .48));
}

.r8h .r8h-hero__in {
  position: relative;
  max-width: var(--r8h-w);
  margin: 0 auto;
  width: 100%;
  padding: clamp(28px, 3vw, 40px) clamp(18px, 3vw, 40px);
  text-align: center;
}

/* Los encabezados van anclados en `.r8h` (0,2,0) A PROPÓSITO: el kit global de
   Elementor trae `.elementor-kit-138 h1/h2/h3` (0,1,1) con su propio tamaño,
   interlineado y `letter-spacing:0`, y le gana a una clase suelta. Sin este
   anclaje el h1 salía a 50px/95px en vez de 44px/1.08 y no se veía ni un error. */
.r8h .r8h-hero__t {
  margin: 0 auto;
  max-width: 24ch;
  font-family: inherit;
  font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.75rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--r8h-white);
}

.r8h .r8h-hero__rule {
  display: block;
  width: 64px;
  height: 2px;
  margin: clamp(12px, 1.6vw, 18px) auto 0;
  background: linear-gradient(90deg, var(--r8h-gold), var(--r8h-gold-light), var(--r8h-gold));
  transform-origin: center;
  animation: r8h-rule .9s var(--r8h-ease) .2s both;
}

@keyframes r8h-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* min-height reservado el 2026-08-17: medido con CDP, el titulo de /blog/
   caia 12-13px mas abajo que el de /servicios/ pese a que la caja del hero
   mide EXACTAMENTE igual en las dos. Causa: el bloque titulo+filete+entradilla
   se centra entero, y la entradilla de aqui ocupa 1 linea en escritorio / 2 en
   movil, la de /servicios/ 2/3 -- un bloque mas corto se centra "mas abajo".
   Se le reserva a la entradilla el alto de la mas larga de las dos paginas
   (misma regla en servicios.css) para que el bloque mida igual sea cual sea
   el texto real, y el titulo caiga siempre en el mismo sitio. En em, no en
   px, para que escale con el propio clamp() del font-size. */
.r8h .r8h-hero__d {
  margin: clamp(12px, 1.6vw, 18px) auto 0;
  max-width: 56ch;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.55;
  min-height: calc(2 * 1.55em);
  color: rgba(255, 255, 255, .93);
}
@media (max-width: 640px) {
  .r8h .r8h-hero__d { min-height: calc(3 * 1.55em); }
}

/* --------------------------------------------------------------- secciones */

.r8h .r8h-sec {
  max-width: var(--r8h-w);
  margin: 0 auto;
  padding-inline: clamp(16px, 2vw, 24px);
}

.r8h .r8h-sec--intro { padding-top: clamp(26px, 3.6vw, 48px); }
.r8h .r8h-sec--dest  { padding-block: clamp(28px, 4vw, 56px); }
.r8h .r8h-sec--otros { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(36px, 5vw, 72px); }
.r8h .r8h-sec--lista { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(20px, 3vw, 36px); }
.r8h .r8h-sec--pg    { padding-top: clamp(6px, 1vw, 14px);  padding-bottom: clamp(36px, 5vw, 72px); }

/* --------------------------------------------- presentación desplegable */

/* Sin JS el texto sale entero y el botón no existe: el recorte solo se aplica
   con `is-js`. El estado abierto no depende de ninguna transición de altura. */
.r8h .r8h-intro__txt > p {
  margin: 0;
  font-size: clamp(15px, 1.9vw, 17px);
  line-height: 1.62;
  color: var(--r8h-ink-2);
}

.r8h .r8h-intro__txt > p + p { margin-top: 14px; }

.r8h .r8h-intro__txt a {
  color: var(--r8h-gold-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--r8h-gold-light);
}

.r8h .r8h-intro__txt a:hover,
.r8h .r8h-intro__txt a:focus-visible {
  color: var(--r8h-ink);
  border-bottom-color: var(--r8h-ink);
}

.r8h .r8h-intro.is-js .r8h-intro__txt {
  position: relative;
  max-height: 4.9em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 42%, transparent);
          mask-image: linear-gradient(#000 42%, transparent);
}

.r8h .r8h-intro.is-js.is-open .r8h-intro__txt {
  max-height: none;
  overflow: visible;
  -webkit-mask-image: none;
          mask-image: none;
}

/* Los cuatro estados van escritos A PROPOSITO. GeneratePress trae una regla
   global `button:hover, button:focus { color:#fff; background-color:#3f4047 }`
   con transicion de .1s: al pulsar, este boton se convertia en un rectangulo
   gris con texto blanco, y como el clic deja el foco puesto, SE QUEDABA gris
   despues de soltar. Es el mismo choque de especificidad que el h1 con el kit
   de Elementor: por eso toda esta hoja va anclada en `.r8h`. */
.r8h .r8h-intro__btn,
.r8h .r8h-intro__btn:hover,
.r8h .r8h-intro__btn:focus,
.r8h .r8h-intro__btn:active {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px auto 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--r8h-gold-deep);
  cursor: pointer;
  transition: color .16s var(--r8h-ease);
  /* Al abrirse, el texto crece y el boton baja: si alguien vuelve a pulsar donde
     estaba, un doble clic seleccionaria la etiqueta. */
  -webkit-user-select: none;
          user-select: none;
}

.r8h .r8h-intro__btn:hover,
.r8h .r8h-intro__btn:focus-visible { color: var(--r8h-ink); }

/* El anillo, solo para quien navega con teclado: con raton el boton no se queda
   marcado despues del clic, pero con tabulador se ve donde estas. */
.r8h .r8h-intro__btn:focus { outline: none; }

.r8h .r8h-intro__btn:focus-visible {
  outline: 2px solid var(--r8h-gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.r8h .r8h-intro__btn[hidden] { display: none; }

.r8h .r8h-intro__chev {
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.r8h .r8h-intro.is-open .r8h-intro__chev { transform: rotate(-135deg); }

/* --------------------------------------------------- cabecera de banda */

.r8h .r8h-banda {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.r8h .r8h-banda__t {
  margin: 0;
  font-family: inherit;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--r8h-ink);
}

.r8h .r8h-banda__ac { color: var(--r8h-gold-deep); }

/* ---------------------------------------------------------- cuadrícula */

.r8h .r8h-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

@media (max-width: 1000px) { .r8h .r8h-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } }
@media (max-width: 640px)  { .r8h .r8h-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- tarjeta */

.r8h .r8h-card {
  position: relative;
  background: var(--r8h-white);
  border: 1px solid var(--r8h-rule-card);
  border-radius: 8px;
  overflow: hidden;
  padding: clamp(14px, 1.6vw, 20px);
  transition: transform .28s var(--r8h-ease), box-shadow .28s ease, border-color .28s ease;
}

.r8h .r8h-card:hover,
.r8h .r8h-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(90, 66, 24, .14);
  border-color: var(--r8h-gold-light);
}

.r8h .r8h-card__a,
.r8h .r8h-card__a:hover,
.r8h .r8h-card__a:focus,
.r8h .r8h-card__a:visited {
  display: block;
  color: inherit;
  text-decoration: none;
}

.r8h .r8h-card__a:hover { opacity: .9; }

.r8h .r8h-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 5px;
  transition: transform .5s var(--r8h-ease);
}

.r8h .r8h-card:hover .r8h-card__img { transform: scale(1.04); }

/* Marco pendiente: solo si la entrada no tiene imagen destacada. */
.r8h .r8h-card__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 10px;
  border-radius: 5px;
  background: repeating-linear-gradient(135deg, #fffdf7 0 9px, #f5efe0 9px 18px);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  color: var(--r8h-ink-3);
  text-align: center;
}

.r8h .r8h-card__fecha {
  margin: 14px 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--r8h-rule-inner);
  font-size: .8125rem;
  color: var(--r8h-ink-3);
  font-variant-numeric: tabular-nums;
}

.r8h .r8h-card__t {
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.006em;
  text-wrap: pretty;
  color: var(--r8h-ink);
  text-transform: none;  /* hay títulos guardados en versales: nunca se gritan aquí */
}

/* Dos líneas exactas en todas las tarjetas. Se recorta por CSS y no por número
   de caracteres a propósito: el navegador corta donde de verdad acaba la segunda
   línea, así que la caja mide lo mismo en escritorio y en móvil, donde caben
   menos palabras por línea. */
.r8h .r8h-card__d {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--r8h-ink-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  overflow: hidden;
}

/* Esquina doblada de las tarjetas destacadas. */
.r8h .r8h-card__corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  border-top-right-radius: 8px;
}

.r8h .r8h-card__corner::before {
  content: "";
  position: absolute;
  top: -31px;
  right: -31px;
  width: 62px;
  height: 62px;
  transform: rotate(45deg);
  background: var(--r8h-cream-corner);
  border-bottom: 1px solid var(--r8h-rule-paper);
}

.r8h .r8h-card__star {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 15px;
  height: 15px;
  color: var(--r8h-gold-soft);
  opacity: .85;
}

@media (max-width: 640px) {
  .r8h .r8h-card__corner { width: 48px; height: 48px; }
  .r8h .r8h-card__corner::before { top: -25px; right: -25px; width: 50px; height: 50px; }
  .r8h .r8h-card__star { top: 4px; right: 4px; width: 13px; height: 13px; }
}

/* --------------------------------------------------------- paginación */

/* El handoff ponía `space-between`, que a 1160px deja el contador en un extremo
   y los números en el otro con 778px de aire en medio: se lee como dos cosas
   sueltas, no como un control. Van juntos y centrados. */
.r8h .r8h-pg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: center;
}

.r8h .r8h-pg__cuenta {
  margin: 0;
  font-size: .8125rem;
  color: var(--r8h-ink-3);
  font-variant-numeric: tabular-nums;
}

.r8h .r8h-pg__links { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }

.r8h .r8h-pg__b {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 1rem;
  text-decoration: none;
}

/* Otra vez `.elementor-kit-138 a { color:#C59B4A }`: sin escribir los estados,
   los numeros de pagina salian dorados en vez de gris tinta. */
/* Con 44px de ancho, un solo dígito queda nadando en la caja y la fila de
   números se ve desperdigada. El área táctil de 44px del handoff se conserva
   donde de verdad hace falta —cualquier dispositivo con pantalla táctil, ver la
   media query de abajo— y con ratón se aprieta a 34px, que sigue muy por encima
   del mínimo de 24px que pide WCAG 2.2. El alto se queda en 44 siempre. */
.r8h .r8h-pg__b,
.r8h .r8h-pg__b:visited { min-width: 30px; color: var(--r8h-ink-2); }

@media (any-pointer: coarse) {
  .r8h .r8h-pg__b { min-width: 44px; }
}
.r8h .r8h-pg__b:hover,
.r8h .r8h-pg__b:focus-visible { color: var(--r8h-gold-deep); }
.r8h .r8h-pg__b.is-on { color: var(--r8h-gold-deep); font-weight: 700; cursor: default; }

/* ------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .r8h .r8h-hero__rule { animation: none; }
  .r8h .r8h-card,
  .r8h .r8h-card__img,
  .r8h .r8h-intro__btn { transition: none; }
  .r8h .r8h-card:hover,
  .r8h .r8h-card:focus-within { transform: none; }
  .r8h .r8h-card:hover .r8h-card__img { transform: none; }
}