/* Cuba Despierta · Blog (views/blog.php). Se carga solo en /blog.
   «El tablero de la redacción»: corcho (oscuro en la cabecera, claro en la lista), fichas de papel, chinchetas rojas,
   cinta adhesiva y el hilo rojo que une las últimas notas. Animaciones de entrada con data-anim y data-reveal. */
.bkh, .bkl { --cork: #b88a58; --cork-dark: #3f2a19; --paper: #fffdf8; --pin: #d7261e; --tape: rgba(240,226,190,.78); }

/* ---------- 1. Cabecera: el tablero de corcho ---------- */
.bkh { position: relative; padding: calc(var(--hdr-h) + 3rem) 0 4rem; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(rgba(255,214,160,.10) 1px, transparent 1.6px) 0 0 / 7px 7px, radial-gradient(rgba(0,0,0,.28) 1px, transparent 1.6px) 3px 4px / 9px 9px,
    radial-gradient(ellipse 80% 70% at 60% 40%, #5b3d24, var(--cork-dark) 75%); }
/* Marco de madera alrededor del tablero */
.bkh::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: inset 0 0 0 10px #241509, inset 0 0 0 12px rgba(255,214,160,.12), inset 0 0 120px rgba(0,0,0,.55); }
.bkh-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (min-width: 1000px) { .bkh-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
/* La ficha del título, clavada con una chincheta */
.bkh-card { position: relative; margin-top: 2rem; max-width: 34rem; padding: 2rem 1.8rem 1.4rem; color: var(--ink); rotate: -1.5deg;
  background: repeating-linear-gradient(transparent 0 27px, rgba(30,90,160,.12) 27px 28px), var(--paper); box-shadow: 0 18px 30px -16px rgba(0,0,0,.6); }
.bkh-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 2.4rem; width: 1px; background: rgba(215,38,30,.35); }
.bkh-card > .bkh-pin { left: 50%; top: 8px; }
.bkh-kicker { position: relative; font-size: 11px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--brand-dark); }
.bkh-title { position: relative; margin-top: .7rem; font-size: clamp(2.4rem, 1rem + 4.6vw, 4.8rem); font-weight: 800; line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.bkh-title .serif { display: block; color: var(--brand-dark); text-transform: none; font-size: 1.05em; }
.bkh-dateline { position: relative; margin-top: 1rem; padding-top: .7rem; border-top: 1px solid rgba(17,17,17,.2); display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bkh-lead { margin-top: 1.8rem; max-width: 32rem; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.65; color: #efe3d2; }
.bkh-cta { margin-top: 1.6rem; }
/* Chincheta: cabeza roja con brillo y sombra */
.bkh-pin { position: absolute; z-index: 3; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a7d, var(--pin) 45%, #8f1510); box-shadow: 2px 4px 4px rgba(0,0,0,.45); }
/* Las notas del tablero: caen, se clavan y el hilo rojo las une */
.bkh-board { position: relative; width: 100%; max-width: 560px; justify-self: center; aspect-ratio: 1; }
@media (max-width: 999px) { .bkh-board { aspect-ratio: 4 / 5; max-width: 460px; } }
.bkh-hilo { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bkh-hilo polyline { fill: none; stroke: var(--pin); stroke-width: .45; stroke-linejoin: round; stroke-dasharray: 1; filter: drop-shadow(1px 3px 2px rgba(0,0,0,.4)); }
html.js .bkh-hilo polyline { animation: bk-hilo 1.4s ease-in-out 1.6s both; }
@keyframes bk-hilo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.bkh-note { position: absolute; left: var(--x); top: var(--y); width: 46%; display: flex; flex-direction: column; gap: .5rem; padding: 10px 10px 12px; background: var(--paper); color: var(--ink); text-decoration: none; rotate: var(--r);
  box-shadow: 0 16px 24px -12px rgba(0,0,0,.6); transition: rotate .5s var(--ease-out), translate .5s var(--ease-out), box-shadow .5s; }
.bkh-note > .bkh-pin { left: 50%; top: -6px; }
.bkh-note:hover { rotate: 0deg; translate: 0 -4px; z-index: 4; box-shadow: 0 24px 34px -14px rgba(0,0,0,.7); }
.bkh-note:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.bkh-ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd; }
.bkh-ph img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.15); }
.bkh-nt { font-family: var(--serif); font-style: italic; font-size: clamp(.95rem, .8rem + .4vw, 1.15rem); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bkh-nd { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html.js .bkh-note { animation: bk-drop .8s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(.35s + var(--i) * .28s); }
html.js .bkh-note > .bkh-pin, html.js .bkh-card > .bkh-pin { animation: bk-pin .35s cubic-bezier(.3,1.8,.5,1) both; animation-delay: calc(.95s + var(--i, -1.5) * .28s); }
@keyframes bk-drop { from { opacity: 0; translate: 0 -50px; rotate: calc(var(--r) * 4); } }
@keyframes bk-pin { from { scale: 2.4; opacity: 0; } }

/* ---------- 2. Temas y buscador (barra fija) ---------- */
.bt { position: sticky; top: 0; z-index: 30; background: rgba(248,250,251,.92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.bt-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; padding-block: .6rem; }
.bt-tabs { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.bt-tabs::-webkit-scrollbar { display: none; }
.bt-tab { position: relative; flex: none; padding: .75rem .9rem; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .25s; }
.bt-tab sup { margin-left: .15rem; font-size: 10px; font-weight: 700; color: var(--text-soft); }
.bt-tab::after { content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .35rem; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.bt-tab:hover { color: var(--ink); }
.bt-tab:hover::after { transform: scaleX(.4); }
.bt-tab.is-active { color: var(--ink); }
.bt-tab.is-active::after { transform: scaleX(1); }
.bt-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.bt-search { position: relative; display: flex; align-items: center; width: 220px; transition: width .5s var(--ease-out); }
.bt-search:focus-within { width: 320px; }
.bt-search svg { position: absolute; left: .85rem; color: var(--text-soft); pointer-events: none; }
.bt-search input { width: 100%; padding: .65rem .9rem .65rem 2.4rem; border: 1px solid var(--line-strong); background: #fff; font-size: 14px; color: var(--ink); transition: border-color .25s, box-shadow .25s; }
.bt-search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
@media (max-width: 639px) { .bt-search, .bt-search:focus-within { width: 100%; } }

/* ---------- 3. Lista: fichas de papel sobre corcho claro ---------- */
.bkl { padding-block: clamp(3rem, 2rem + 3vw, 5rem); overflow-x: clip;
  background: radial-gradient(rgba(255,240,215,.35) 1px, transparent 1.6px) 0 0 / 7px 7px, radial-gradient(rgba(80,45,15,.28) 1px, transparent 1.6px) 3px 4px / 9px 9px, var(--cork); }
.bl-status { margin-bottom: 1.6rem; display: inline-block; padding: .6rem 1rem; background: var(--paper); font-size: 14px; color: var(--ink); box-shadow: 0 8px 16px -10px rgba(0,0,0,.5); }
.bl-status a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.bl-empty { padding: 3rem 1.5rem; text-align: center; background: var(--paper); color: var(--muted); box-shadow: 0 16px 24px -14px rgba(0,0,0,.5); }
.bl-empty-t { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.bkl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem 2rem; }
@media (min-width: 640px) { .bkl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bkl-item.is-lead { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .bkl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bkl-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 12px 12px 1.2rem; background: var(--paper); color: var(--ink); text-decoration: none; rotate: var(--r);
  box-shadow: 0 18px 26px -16px rgba(40,20,5,.7); transition: rotate .55s var(--ease-out), translate .55s cubic-bezier(.2,1.3,.4,1), opacity .55s, box-shadow .5s; transition-delay: calc(var(--d) * 90ms); }
@media (min-width: 1000px) { .bkl-item.is-lead .bkl-card { flex-direction: row; gap: 1.8rem; padding: 14px 1.8rem 14px 14px; } .bkl-item.is-lead .bkl-img { flex: 1.15; aspect-ratio: auto; min-height: 340px; } .bkl-item.is-lead .bkl-body { flex: 1; justify-content: center; } }
html.js .bkl-item[data-reveal]:not(.is-in) .bkl-card { opacity: 0; translate: 0 -40px; rotate: calc(var(--r) * 5); }
.bkl-card:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 0 28px 36px -16px rgba(40,20,5,.75); transition-delay: 0s; }
.bkl-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
/* Cinta adhesiva arriba, un poco torcida */
.bkl-tape { position: absolute; z-index: 2; left: 50%; top: -12px; width: 96px; height: 26px; translate: -50% 0; rotate: -3deg; background: var(--tape); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.bkl-item:nth-child(even) .bkl-tape { rotate: 4deg; left: 40%; }
.bkl-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e5ddd0; }
.bkl-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.bkl-card:hover .bkl-img img { transform: scale(1.04); }
.bkl-body { display: flex; flex-direction: column; gap: .55rem; padding: 1rem .4rem 0; }
.bkl-k { align-self: flex-start; padding: .2rem .55rem; border: 1.5px solid var(--brand-dark); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-dark); rotate: -2deg; }
.bkl-t { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.bkl-item.is-lead .bkl-t { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.08; letter-spacing: -.02em; }
.bkl-d { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.bkl-item.is-lead .bkl-d { font-size: 16px; }
.bkl-m { margin-top: auto; padding-top: .5rem; font-size: 12px; color: var(--muted); }
.bkl-go { display: inline-flex; align-items: center; gap: .35rem; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); }
.bkl-go svg { transition: transform .45s var(--ease-out); }
.bkl-card:hover .bkl-go svg { transform: translateX(5px); }
.bkl .pager { margin-top: 3rem; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .bkh-hilo polyline, html.js .bkh-note, html.js .bkh-note > .bkh-pin, html.js .bkh-card > .bkh-pin { animation: none; }
  .bkh-note, .bkl-card, .bkl-img img { transition: none; }
  html.js .bkl-item[data-reveal]:not(.is-in) .bkl-card { opacity: 1; translate: none; rotate: var(--r); }
}