/* ============================================================================
   ARTÍCULO · SALA DE LECTURA (2026-10-09) — plantilla compartida
   Misma lengua que el índice del Blog: la mesa en penumbra, una luz cálida, y el
   texto como hoja iluminada. La hoja es la zona de lectura (tinta sobre papel,
   medida cómoda); la penumbra queda para navegar (índice lateral, otros artículos).
   El movimiento solo explica datos y procesos (barras, pasos); nada más se mueve.
   Se apoya en el marcado existente (rh-art*, ra-*): no cambia contenido.
   ========================================================================== */

[data-rh-art="editorial"] {
  --paper: #f3eee3; --paper2: #e8dfcc; --ink: #14232e; --ink2: #4a5761; --rule: rgba(20, 35, 46, 0.14);
  --acc: #b9420f; --teal: #156c7a; --desk: #060b11;
}
[data-rh-art="editorial"] #rh-main { background: var(--desk); }

/* --- Cabecera: penumbra con una luz ------------------------------------------ */
[data-rh-art="editorial"] .rh-arthead { position: relative; overflow: hidden; background: var(--desk); padding-bottom: clamp(90px, 14vh, 140px); }
[data-rh-art="editorial"] .rh-arthead::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 80% at 72% 10%, rgba(255, 214, 160, 0.14), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(30, 155, 196, 0.08), transparent 70%); }
[data-rh-art="editorial"] .rh-arthead::after { background: none; }
[data-rh-art="editorial"] .rh-arthead__inner { position: relative; max-width: 860px; }
[data-rh-art="editorial"] .rh-arttitle { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.035em; max-width: 18ch; }
[data-rh-art="editorial"] .rh-artlead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.62; color: rgba(214, 226, 234, 0.84); max-width: 40em; }
[data-rh-art="editorial"] .rh-artmeta { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(214, 226, 234, 0.6); }
[data-rh-art="editorial"] .rh-artmeta__tag { color: #7fd0ea; background: transparent; border: 1px solid rgba(127, 208, 234, 0.4); }

/* --- La hoja: sale de la penumbra y se apoya sobre la mesa --------------------- */
[data-rh-art="editorial"] .rh-sect--light { background: transparent; padding-top: 0; margin-top: calc(-1 * clamp(56px, 9vh, 96px)); position: relative; z-index: 1; }
[data-rh-art="editorial"] .rh-sect--light > .rh-section__inner { max-width: 1240px; }
[data-rh-art="editorial"] .rh-article {
  max-width: 820px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) clamp(22px, 5vw, 72px) clamp(40px, 5vw, 64px);
  background: radial-gradient(120% 60% at 20% 0%, #fbf8f1 0%, var(--paper) 40%, var(--paper2) 100%);
  color: var(--ink); border-radius: 6px; border: 1px solid rgba(255, 230, 190, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 220, 170, 0.06), 0 50px 120px -50px rgba(255, 200, 140, 0.32), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
/* solo la prosa del artículo toma la tinta: las figuras oscuras propias de cada artículo conservan sus colores */
[data-rh-art="editorial"] .rh-article { color: var(--ink); }
[data-rh-art="editorial"] .rh-article > p, [data-rh-art="editorial"] .rh-article > ul > li, [data-rh-art="editorial"] .rh-article > ol > li,
[data-rh-art="editorial"] .ra-tldr li, [data-rh-art="editorial"] .ra-answer p, [data-rh-art="editorial"] .rh-artnote p { font-size: 18px; line-height: 1.72; color: var(--ink); }
[data-rh-art="editorial"] .rh-article > h2 { color: var(--ink); font-size: clamp(24px, 2.3vw, 31px); line-height: 1.18; letter-spacing: -0.02em; margin-top: 2.4em; padding-top: 0.9em; border-top: 1px solid var(--rule); position: relative; }
[data-rh-art="editorial"] .rh-article > h2::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--acc); }
[data-rh-art="editorial"] .rh-article > h3 { color: var(--ink); font-size: 20px; }
[data-rh-art="editorial"] .rh-article a { color: var(--teal); text-decoration-color: rgba(21, 108, 122, 0.4); text-underline-offset: 3px; }
[data-rh-art="editorial"] .rh-article a:hover { color: var(--acc); }
[data-rh-art="editorial"] .rh-article > p strong, [data-rh-art="editorial"] .rh-article > ul strong, [data-rh-art="editorial"] .ra-tldr strong { color: var(--ink); }
[data-rh-art="editorial"] .rh-article code { background: rgba(20, 35, 46, 0.07); color: var(--ink); border-radius: 3px; padding: 1px 5px; }

/* respuesta corta y respuestas directas: notas al margen, no cajas genéricas */
[data-rh-art="editorial"] .ra-tldr { background: rgba(255, 255, 255, 0.55); border: 0; border-left: 3px solid var(--acc); border-radius: 0 6px 6px 0; box-shadow: none; }
[data-rh-art="editorial"] .ra-tldr h2 { color: var(--acc); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; border: 0; padding: 0; margin: 0 0 10px; }
[data-rh-art="editorial"] .ra-answer { background: transparent; border: 0; border-left: 2px solid var(--teal); border-radius: 0; padding-left: 18px; }
[data-rh-art="editorial"] .ra-answer__label { color: var(--teal); }

/* índice del artículo dentro de la hoja (móvil y sin JS) */
[data-rh-art="editorial"] .ra-toc { background: transparent; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; }

/* tablas, figuras y diagramas en tinta */
[data-rh-art="editorial"] .rh-arttable-wrap { background: transparent; border: 0; border-top: 2px solid var(--ink); border-radius: 0; box-shadow: none; }
[data-rh-art="editorial"] .rh-arttable-wrap th { color: var(--ink2); background: transparent; border-bottom: 1px solid var(--rule); }
[data-rh-art="editorial"] .rh-arttable-wrap td { color: var(--ink); border-bottom: 1px solid var(--rule); background: transparent; }
[data-rh-art="editorial"] .ra-figph, [data-rh-art="editorial"] .ra-split { background: transparent; border-color: var(--rule); box-shadow: none; }
[data-rh-art="editorial"] .ra-step { background: rgba(255, 255, 255, 0.55); border: 1px solid var(--rule); box-shadow: none; }
[data-rh-art="editorial"] .ra-step--decide { border-color: var(--teal); }
[data-rh-art="editorial"] .ra-step--generate { border-color: #2f7d4a; }
[data-rh-art="editorial"] .ra-step--human { border-color: var(--acc); }
[data-rh-art="editorial"] .ra-bar__track { background: rgba(20, 35, 46, 0.1); }
[data-rh-art="editorial"] .ra-bar__fill { background: var(--teal); }
[data-rh-art="editorial"] .ra-duo__n { color: var(--acc); }
[data-rh-art="editorial"] .ra-faq details { border-color: var(--rule); background: transparent; }
[data-rh-art="editorial"] .ra-sources, [data-rh-art="editorial"] .ra-sources li { font-size: 14px; color: var(--ink2); }

/* el momento comercial: una ficha en penumbra dentro de la hoja */
[data-rh-art="editorial"] .rh-artcta { background: radial-gradient(80% 120% at 85% 0%, rgba(255, 200, 140, 0.16), transparent 60%), #0b1620; border: 0; border-radius: 6px; color: #fff; }
[data-rh-art="editorial"] .rh-artcta p, [data-rh-art="editorial"] .rh-artcta li { color: rgba(214, 226, 234, 0.86); }
[data-rh-art="editorial"] .rh-artcta__eyebrow { color: #ffb48a !important; }
[data-rh-art="editorial"] .rh-artcta__title { color: #fff !important; border: 0 !important; padding: 0 !important; }
[data-rh-art="editorial"] .rh-artcta__title::before { display: none; }
[data-rh-art="editorial"] .rh-artcta .rh-btn--ghost { color: #fff; border-color: rgba(214, 226, 234, 0.35); }

/* --- Índice lateral en la penumbra (escritorio ancho, con JS) ---------------- */
[data-rh-art="editorial"] .ae-side { display: none; }
@media (min-width: 1280px) {
  [data-rh-art="editorial"].ae-has-side .rh-sect--light > .rh-section__inner { display: grid; grid-template-columns: 220px minmax(0, 820px) 220px; column-gap: 36px; justify-content: center; }
  [data-rh-art="editorial"].ae-has-side .rh-article { grid-column: 2; }
  [data-rh-art="editorial"].ae-has-side .ra-toc { display: none; }
  [data-rh-art="editorial"].ae-has-side .ae-next { grid-column: 2; grid-row: 2; width: 100%; }
  [data-rh-art="editorial"] .ae-side { display: block; grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 96px; align-self: start; margin-top: 140px; }
  [data-rh-art="editorial"] .ae-side p { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(214, 226, 234, 0.5); }
  [data-rh-art="editorial"] .ae-side ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid rgba(214, 226, 234, 0.14); }
  [data-rh-art="editorial"] .ae-side a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.35; color: rgba(214, 226, 234, 0.62); text-decoration: none; transition: color 0.2s, border-color 0.2s; }
  [data-rh-art="editorial"] .ae-side a:hover { color: #fff; }
  [data-rh-art="editorial"] .ae-side a.is-here { color: #fff; border-left-color: #f26a1b; }
  [data-rh-art="editorial"] .ae-side a:focus-visible { outline: 2px solid #f26a1b; outline-offset: 2px; }
}

/* --- Seguir leyendo: los artículos vecinos en la cronología ------------------ */
[data-rh-art="editorial"] .ae-next { max-width: 820px; margin: clamp(40px, 6vh, 64px) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
[data-rh-art="editorial"] .ae-next__h { grid-column: 1 / -1; margin: 0; display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(214, 226, 234, 0.5); }
[data-rh-art="editorial"] .ae-next__h a { color: #7fd0ea; text-decoration: none; letter-spacing: 0.08em; }
[data-rh-art="editorial"] .ae-next__a { display: block; padding: 20px 22px; border-radius: 6px; text-decoration: none; background: linear-gradient(180deg, rgba(23, 48, 66, 0.55), rgba(9, 16, 23, 0.85)); border: 1px solid rgba(214, 226, 234, 0.12); transition: border-color 0.2s; }
[data-rh-art="editorial"] .ae-next__a:hover, [data-rh-art="editorial"] .ae-next__a:focus-visible { border-color: rgba(242, 106, 27, 0.6); outline: none; }
[data-rh-art="editorial"] .ae-next__a small { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(214, 226, 234, 0.55); }
[data-rh-art="editorial"] .ae-next__a b { display: block; margin-top: 8px; font-size: 18px; line-height: 1.3; color: #fff; }
[data-rh-art="editorial"] .ae-next__a--next { text-align: right; }
[data-rh-art="editorial"] .ae-next__a--none { visibility: hidden; }

/* --- Movimiento que explica: barras y pasos al entrar en lectura --------------- */
[data-rh-art="editorial"] .ae-ready .ra-bar__fill { transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 0.08s); }
[data-rh-art="editorial"] .ae-ready .is-in .ra-bar__fill, [data-rh-art="editorial"] .ae-ready .ra-bar.is-in .ra-bar__fill { transform: none; }
[data-rh-art="editorial"] .ae-ready .ra-step { opacity: 0.35; transition: opacity 0.45s ease, box-shadow 0.45s ease; transition-delay: calc(var(--i, 0) * 0.22s); }
[data-rh-art="editorial"] .ae-ready .is-in .ra-step { opacity: 1; }

@media (max-width: 760px) {
  [data-rh-art="editorial"] .rh-sect--light { margin-top: -40px; }
  [data-rh-art="editorial"] .rh-sect--light > .rh-section__inner { padding-left: 10px; padding-right: 10px; }
  [data-rh-art="editorial"] .rh-article { padding: 28px 20px 34px; border-radius: 4px; }
  [data-rh-art="editorial"] .rh-article > p, [data-rh-art="editorial"] .rh-article > ul > li, [data-rh-art="editorial"] .rh-article > ol > li, [data-rh-art="editorial"] .ra-tldr li, [data-rh-art="editorial"] .ra-answer p { font-size: 17px; }
  [data-rh-art="editorial"] .ae-next { grid-template-columns: 1fr; padding: 0 10px; }
  [data-rh-art="editorial"] .ae-next__a--next { text-align: left; }
  [data-rh-art="editorial"] .ae-next__a--none { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-rh-art="editorial"] .ae-ready .ra-bar__fill { transform: none; transition: none; }
  [data-rh-art="editorial"] .ae-ready .ra-step { opacity: 1; transition: none; }
}