/* ============================================================================
   BLOG · PUBLICACIÓN EDITORIAL (2026-10-09)
   Una redacción de noche: fondo oscuro con profundidad y los textos con prueba
   propia «iluminados» como hojas sobre la mesa. Cronología estricta (más reciente
   primero, también al filtrar), marcada por el año como titular. Cada firma visual
   se mueve una vez para decir la idea de su artículo; reduced-motion: estado final.
   ========================================================================== */

[data-rh-bl="editorial"] {
  --paper: #f2ece0; --paper2: #e6dcc8; --ink: #13222d; --ink2: #4b5862; --rule-d: rgba(214, 226, 234, 0.12);
}

/* --- Cabecera: una mesa en penumbra con una sola luz ------------------------ */
[data-rh-bl="editorial"] .bl-hero { padding: clamp(120px, 17vh, 170px) 0 clamp(40px, 7vh, 72px); background: #060b11; }
[data-rh-bl="editorial"] .ed-light { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 70% at 78% 18%, rgba(255, 214, 160, 0.16), transparent 70%), radial-gradient(60% 60% at 10% 100%, rgba(30, 155, 196, 0.10), transparent 70%); }
[data-rh-bl="editorial"] .ed-light::after { /* el cono de luz cae sobre la mesa */
  content: ""; position: absolute; right: 8%; top: -10%; width: 46%; height: 120%;
  background: linear-gradient(200deg, rgba(255, 220, 170, 0.10), transparent 60%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
[data-rh-bl="editorial"] .bl-hero__title { font-size: clamp(38px, 5.6vw, 84px); max-width: 14ch; letter-spacing: -0.04em; line-height: 0.98; }

/* --- Biblioteca: composición asimétrica en una retícula de 12 -------------- */
[data-rh-bl="editorial"] .ed-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); align-items: start; counter-reset: none; }
[data-rh-bl="editorial"] .ed-card { grid-column: span var(--span, 4); position: relative; display: flex; flex-direction: column; margin: 0; min-height: 0;
  border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, rgba(23, 48, 66, 0.55), rgba(9, 16, 23, 0.85)); border: 1px solid var(--rule-d); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.8); }
[data-rh-bl="editorial"] .ed-card[hidden] { display: none; }
[data-rh-bl="editorial"] .ed-card .bl-card__viz { margin: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--rule-d); min-height: 150px; }
[data-rh-bl="editorial"] .ed-card .bl-card__body { padding: 20px 22px 24px; }
[data-rh-bl="editorial"] .ed-card .bl-card__title { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.22; }
[data-rh-bl="editorial"] .ed-card .bl-card__title a { color: #fff; text-decoration: none; }
[data-rh-bl="editorial"] .ed-card .bl-card__title a::after { content: ""; position: absolute; inset: 0; } /* toda la pieza es el enlace */
[data-rh-bl="editorial"] .ed-card .bl-card__title a:focus-visible { outline: none; }
[data-rh-bl="editorial"] .ed-card:focus-within { outline: 2px solid #f26a1b; outline-offset: 3px; }
[data-rh-bl="editorial"] .ed-card:hover { border-color: rgba(214, 226, 234, 0.3); }
[data-rh-bl="editorial"] .ed-upd { opacity: 0.75; text-transform: none; letter-spacing: 0.02em; }

/* año: la cronología se lee como titular */
[data-rh-bl="editorial"] .ed-year { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 18px; margin: clamp(18px, 3vh, 34px) 0 -4px; }
[data-rh-bl="editorial"] .ed-year b { font-size: clamp(54px, 8vw, 120px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.8; color: transparent; -webkit-text-stroke: 1px rgba(214, 226, 234, 0.32); }
[data-rh-bl="editorial"] .ed-year i { flex: 1; height: 1px; background: var(--rule-d); }
[data-rh-bl="editorial"] .ed-year small { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(214, 226, 234, 0.5); }

/* las piezas con prueba propia: hojas iluminadas sobre la mesa */
[data-rh-bl="editorial"] .ed-card--lit { flex-direction: row; background: radial-gradient(130% 120% at 15% 0%, #fbf7ee 0%, var(--paper) 45%, var(--paper2) 100%); border-color: rgba(255, 230, 190, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 220, 170, 0.08), 0 40px 90px -40px rgba(255, 200, 140, 0.35), 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
[data-rh-bl="editorial"] .ed-card--lit .bl-card__viz { flex: 0 0 46%; border-bottom: 0; border-right: 1px solid rgba(19, 34, 45, 0.12); background: transparent; display: flex; flex-direction: column; justify-content: center; padding: 26px; }
[data-rh-bl="editorial"] .ed-card--lit .bl-card__body { flex: 1; padding: 28px 30px 30px; display: flex; flex-direction: column; justify-content: center; }
[data-rh-bl="editorial"] .ed-card--lit .bl-card__title { font-size: clamp(24px, 2.3vw, 34px); letter-spacing: -0.02em; }
[data-rh-bl="editorial"] .ed-card--lit .bl-card__title a { color: var(--ink); }
[data-rh-bl="editorial"] .ed-card--lit .bl-card__dek, [data-rh-bl="editorial"] .ed-card--lit .bl-meta, [data-rh-bl="editorial"] .ed-card--lit .bl-meta > * { color: var(--ink2); }
[data-rh-bl="editorial"] .ed-card--lit .bl-terr { color: #156c7a; border-color: rgba(21, 108, 122, 0.4); background: transparent; }
[data-rh-bl="editorial"] .ed-card--lit .bl-kind { color: #b9420f; }
[data-rh-bl="editorial"] .ed-card--lit .bl-evidence { color: var(--ink); border-left-color: #b9420f; background: rgba(185, 66, 15, 0.06); }
[data-rh-bl="editorial"] .ed-card--lit .bl-evidence b { color: #b9420f; }
[data-rh-bl="editorial"] .ed-card--lit::before { content: attr(data-proof); position: absolute; right: 16px; top: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #b9420f; }
/* firmas en tinta dentro de la hoja */
[data-rh-bl="editorial"] .ed-card--lit { --sx-ink: var(--ink); --sx-dim: var(--ink2); --sx-faint: var(--ink2); --sx-line2: rgba(19, 34, 45, 0.18); --bl-human: #b9420f; --bl-decide: #156c7a; --bl-generate: #2f7d4a; }
[data-rh-bl="editorial"] .ed-card--lit .bl-node { background: rgba(255, 255, 255, 0.5); border-color: rgba(19, 34, 45, 0.2); color: var(--ink); box-shadow: none; }
[data-rh-bl="editorial"] .ed-card--lit .bl-node span { color: var(--ink2); }
[data-rh-bl="editorial"] .ed-card--lit .bl-node--decide { border-color: #156c7a; }
[data-rh-bl="editorial"] .ed-card--lit .bl-node--generate { border-color: #2f7d4a; }
[data-rh-bl="editorial"] .ed-card--lit .bl-node--human { border-color: #b9420f; }
[data-rh-bl="editorial"] .ed-card--lit .bl-lane span { background: rgba(255, 255, 255, 0.5); }
[data-rh-bl="editorial"] .ed-card--lit .bl-type, [data-rh-bl="editorial"] .ed-card--lit .bl-type span { color: var(--ink); }
[data-rh-bl="editorial"] .ed-card--lit .bl-key, [data-rh-bl="editorial"] .ed-card--lit .bl-viz__note { color: var(--ink2); }

/* la foto propia ocupa la pieza entera */
[data-rh-bl="editorial"] .ed-card--photo .bl-card__viz { min-height: 260px; border-bottom: 0; }
[data-rh-bl="editorial"] .ed-card--photo .bl-card__viz img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* SEO para videógrafos: un plano propio detrás del gráfico de retención */
[data-rh-bl="editorial"] .ed-viz--img { background: linear-gradient(180deg, rgba(6, 11, 17, 0.35), rgba(6, 11, 17, 0.85)), var(--img) center / cover no-repeat; }

/* --- Motion con sentido: cada firma dice su idea una vez -------------------- */
/* procesos: el paso se enciende cuando el anterior terminó */
[data-rh-bl="editorial"] .ed-card.is-play .bl-node, [data-rh-bl="editorial"] .ed-card.is-play .bl-lane span, [data-rh-bl="editorial"] .ed-card.is-play .bl-loop li {
  animation: ed-step 0.5s ease-out both; animation-delay: calc(var(--i, 0) * 0.26s); }
@keyframes ed-step { 0% { opacity: 0.25; transform: translateY(4px); } 60% { box-shadow: 0 0 0 4px rgba(242, 106, 27, 0.22); } 100% { opacity: 1; transform: none; box-shadow: none; } }
/* edición con agentes: el cabezal recorre la línea y enciende las etapas de criterio humano */
[data-rh-bl="editorial"] .bl-timeline { position: relative; }
[data-rh-bl="editorial"] .ed-card.is-play .bl-timeline::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; background: #f26a1b; box-shadow: 0 0 10px rgba(242, 106, 27, 0.7); animation: ed-play 3.2s linear both; }
@keyframes ed-play { from { left: 0; } to { left: 100%; opacity: 0.3; } }
[data-rh-bl="editorial"] .ed-card.is-play .bl-timeline .is-human { animation: ed-cut 0.4s ease-out both; animation-delay: calc(var(--i, 0) * 0.4s); }
@keyframes ed-cut { from { background: rgba(198, 214, 226, 0.1); } to { background: rgba(255, 179, 138, 0.4); } }
/* objetivos SMART: cada letra se gana su lugar; la A queda marcada */
[data-rh-bl="editorial"] .ed-card.is-play .bl-smart span { animation: ed-letter 0.4s ease-out both; animation-delay: calc(var(--i, 0) * 0.22s); }
@keyframes ed-letter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* posicionar no es convertir: la retención llega hasta donde llega */
[data-rh-bl="editorial"] .ed-card.is-play .bl-retention i { animation: ed-fill 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes ed-fill { from { width: 0; } }
/* publicar menos y mejor: el exceso se tacha */
[data-rh-bl="editorial"] .bl-type { position: relative; }
[data-rh-bl="editorial"] .ed-card.is-play .bl-type::before { content: ""; position: absolute; left: 0; top: 0.62em; height: 2px; width: 0; background: #b9420f; animation: ed-strike 0.9s ease-out 0.3s forwards; max-width: 5.6em; }
@keyframes ed-strike { to { width: 5.6em; } }
/* la foto: la luz entra al cuadro */
[data-rh-bl="editorial"] .ed-card--photo .bl-card__viz { position: relative; }
[data-rh-bl="editorial"] .ed-card--photo.is-play .bl-card__viz img { animation: ed-expose 1.6s ease-out both; }
@keyframes ed-expose { from { filter: brightness(0.35) saturate(0.7); } to { filter: none; } }

/* --- Móvil: una columna; la luz sigue marcando la prueba propia ------------- */
@media (max-width: 860px) {
  [data-rh-bl="editorial"] .ed-grid { grid-template-columns: 1fr; }
  [data-rh-bl="editorial"] .ed-card { grid-column: 1 / -1 !important; }
  [data-rh-bl="editorial"] .ed-card--lit { flex-direction: column; }
  [data-rh-bl="editorial"] .ed-card--lit .bl-card__viz { flex: none; border-right: 0; border-bottom: 1px solid rgba(19, 34, 45, 0.12); padding: 20px; }
  [data-rh-bl="editorial"] .ed-card--lit .bl-card__body { padding: 22px; }
  [data-rh-bl="editorial"] .ed-card--lit::before { position: static; display: block; padding: 14px 20px 0; }
  [data-rh-bl="editorial"] .ed-year b { font-size: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-rh-bl="editorial"] .ed-card *, [data-rh-bl="editorial"] .ed-card *::before, [data-rh-bl="editorial"] .ed-card *::after { animation: none !important; }
  [data-rh-bl="editorial"] .bl-type::before { width: 5.6em; }
}

/* ajustes: los procesos largos se pliegan en piezas angostas; la foto no domina la fila */
[data-rh-bl="editorial"] .ed-card .bl-card__viz .bl-flow { display: flex; flex-wrap: wrap; gap: 6px; grid-template-columns: none; }
[data-rh-bl="editorial"] .ed-card .bl-card__viz .bl-flow .bl-node { flex: 0 0 auto; }
[data-rh-bl="editorial"] .ed-card--photo .bl-card__viz { height: 280px; min-height: 0; padding: 0; }

/* la hoja iluminada ocupa toda la altura de su fila: el aire junto a la foto pasa a ser papel, no hueco */
[data-rh-bl="editorial"] .ed-card--lit { align-self: stretch; }

/* la foto del artículo de creatividad: altura fija para que la fila respire, no se estire */
[data-rh-bl="editorial"] .ed-card--photo .bl-card__viz { flex: none; height: 300px; }
[data-rh-bl="editorial"] .ed-card--photo .bl-card__viz img { height: 100%; }