/* ===========================================================================
 * Observatorio IA — Diagramación v5 de artículos individuales
 * ---------------------------------------------------------------------------
 * Añadido: 13/07/2026 · Ana / Claude
 * Origen:  patrón canónico (docs-proyecto/observatorio_ia/
 *          patron_canonico_diagramacion_articulos_observatorio.html) +
 *          muestra validada por Ana (_revisiones/muestra_n8n_v5.html).
 *
 * Por qué archivo aparte y no dentro de observatorio.css:
 *   - Aditivo y modular: no toca el core de 63 KB ni las clases compartidas
 *     por listados/glosario/comparador (obs-sidelist, obs-toc, obs-sidebar__*,
 *     obs-aux__cta). Reforma SOLO los artículos individuales de las 3 secciones.
 *   - Se carga después de observatorio.css (vía extra_head en obs_render_page_head),
 *     así gana en igualdad de especificidad sin !important.
 *
 * Namespaced con prefijo obs- para coherencia. Reutiliza los tokens :root
 * (--obs-coral, --obs-navy, --obs-border, --obs-mono...) ya definidos.
 * Grid 200/620/300 ya vive en observatorio.css (no se redefine aquí).
 * =========================================================================== */

/* ---- HERO apaisado 16:9 (cabecera de prensa digital) ---- */
.obs-scope .obs-art-herofig { margin: 4px 0 6px; }
.obs-scope .obs-art-hero {
  width: 100%;
  height: auto;            /* blindaje: SVG/foto 16:9 nunca se estira aunque falle aspect-ratio */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--obs-border);
}
.obs-scope .obs-art-herofig figcaption {
  font-size: 12px;
  color: var(--obs-muted);
  margin-top: 8px;
  line-height: 1.45;
  font-style: italic;
}

/* ---- COLUMNA IZQUIERDA: navegación de contexto de la sección ----
 * Regla R1/R2 del patrón: nunca el menú global; aquí van los hermanos de
 * sección + chip + CTA. Sustituye al TOC que antes vivía en la izquierda. */
.obs-scope .obs-sidebar .obs-ctxnav { text-align: left; }
.obs-scope .obs-sidebar .obs-ctxnav__cta {
  display: block;
  text-align: center;
  background: var(--obs-coral);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 18px;
  transition: background .15s;
}
.obs-scope .obs-sidebar .obs-ctxnav__cta:hover { background: #D2694D; color: #fff; }
.obs-scope .obs-sidebar .obs-ctxnav__h { font-family:inherit; font-size:21px; letter-spacing:normal; text-transform:none; color:var(--obs-coral); font-weight:800; line-height:1.2; margin:0 0 12px; }
.obs-scope .obs-sidebar .obs-ctxnav__list { list-style: none; margin: 0 0 20px; padding: 0; }
.obs-scope .obs-sidebar .obs-ctxnav__list li { margin: 0; }
.obs-scope .obs-sidebar .obs-ctxnav__list a {
  display: block;
  font-size: 12.5px;
  color: var(--obs-text);
  text-decoration: none;
  padding: 6px 0 6px 11px;
  border-left: 2px solid transparent;
  line-height: 1.35;
  transition: color .15s, border-color .15s;
}
.obs-scope .obs-sidebar .obs-ctxnav__list a:hover { color: var(--obs-ink); }
.obs-scope .obs-sidebar .obs-ctxnav__list a.is-active {
  color: var(--obs-ink);
  font-weight: 700;
  border-left-color: var(--obs-coral);
}
.obs-scope .obs-sidebar .obs-ctxnav__back {
  display: block;
  font-size: 12px;
  color: var(--obs-muted);
  text-decoration: none;
  padding: 4px 0 4px 11px;
  line-height: 1.4;
}
.obs-scope .obs-sidebar .obs-ctxnav__back:hover { color: var(--obs-navy); }

/* ---- COLUMNA DERECHA: TOC (índice del artículo) ----
 * Regla R3 del patrón: la navegación interna del artículo va a la derecha. */
.obs-scope .obs-aux .obs-auxtoc__t {
  font-family: var(--obs-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--obs-navy);
  font-weight: 700;
  margin: 0 0 6px;
  border-top: 2px solid var(--obs-coral);
  padding-top: 12px;
}
.obs-scope .obs-aux .obs-auxtoc__list { list-style: none; margin: 0; padding: 0; }
.obs-scope .obs-aux .obs-auxtoc__list li { margin: 0; }
.obs-scope .obs-aux .obs-auxtoc__list a {
  display: block;
  font-size: 13px;
  color: var(--obs-text);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid var(--obs-border);
  line-height: 1.35;
  transition: color .15s;
}
.obs-scope .obs-aux .obs-auxtoc__list a:hover { color: var(--obs-coral); }
.obs-scope .obs-aux .obs-auxtoc__list li:last-child a { border-bottom: 0; }

/* ---- BANNER COMERCIAL derecha: tarjeta navy sin foto (no compite con el hero) ---- */
.obs-scope .obs-aux .obs-promo {
  margin-top: 22px;
  background: #1B2A4A;
  border-radius: 16px;
  padding: 20px 18px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(27,42,74,.14);
}
.obs-scope .obs-aux .obs-promo::after {
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(224,122,95,.35), transparent 70%);
}
.obs-scope .obs-aux .obs-promo__eyebrow {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #EBAE9C;
  font-weight: 800;
  margin-bottom: 8px;
  position: relative;
}
.obs-scope .obs-aux .obs-promo__title {
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 12px;
  position: relative;
}
.obs-scope .obs-aux .obs-promo__badge {
  display: inline-block;
  background: rgba(255,255,255,.12);
  color: #BFE3D5;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  margin-bottom: 14px;
  position: relative;
}
.obs-scope .obs-aux .obs-promo__feats { list-style: none; margin: 0 0 16px; padding: 0; position: relative; }
.obs-scope .obs-aux .obs-promo__feats li {
  font-size: 12.5px;
  color: #cdd6e6;
  padding: 4px 0 4px 18px;
  position: relative;
  line-height: 1.4;
}
.obs-scope .obs-aux .obs-promo__feats li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--obs-coral);
  font-weight: 800;
}
.obs-scope .obs-aux .obs-promo__cta {
  display: block;
  text-align: center;
  background: var(--obs-coral);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  padding: 12px;
  border-radius: 9px;
  position: relative;
  transition: background .15s;
}
.obs-scope .obs-aux .obs-promo__cta:hover { background: #D2694D; color: #fff; }
.obs-scope .obs-aux .obs-promo__note {
  text-align: center;
  font-size: 10.5px;
  color: #8a97ad;
  margin-top: 9px;
  position: relative;
}

/* ---- CUERPO: único foco visual fuerte = la tabla en tarjeta elevada ---- */
.obs-articulo-cuerpo .obs-tabla-dominante {
  margin: 34px 0;
  background: #fff;
  border: 1px solid var(--obs-border);
  border-radius: 16px;
  padding: 20px 20px 16px;
  box-shadow: 0 6px 22px rgba(27,42,74,.09);
}
.obs-articulo-cuerpo .obs-tabla-dominante__eyebrow {
  font-family: var(--obs-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--obs-coral);
  font-weight: 800;
  margin-bottom: 12px;
}
.obs-articulo-cuerpo .obs-tabla-dominante .obs-tabla-comparativa {
  margin: 0;
  border: none;
  border-radius: 0;
}
.obs-articulo-cuerpo .obs-tabla-dominante__fuente {
  font-size: 12px;
  color: var(--obs-muted);
  margin: 12px 0 0;
  font-style: italic;
}

/* ---- Dato clave: cita elevada tenue (acento secundario, no tarjeta que compita) ---- */
.obs-articulo-cuerpo .obs-dato-clave {
  font-size: 16px;
  line-height: 1.6;
  color: var(--obs-text);
  margin: 22px 0;
  padding: 14px 18px;
  background: #FBF3F0;
  border-left: 3px solid var(--obs-coral);
  border-radius: 0 8px 8px 0;
}
.obs-articulo-cuerpo .obs-dato-clave b.n {
  font-family: var(--obs-mono);
  color: var(--obs-coral);
  font-weight: 700;
  font-size: 1.05em;
}

/* ---- Responsive: bajo 900px las columnas laterales se ocultan (ya en core);
 * aquí solo garantizamos que el hero y la tabla respiran. ---- */
@media (max-width: 720px) {
  .obs-scope .obs-art-hero { border-radius: 10px; }
  .obs-articulo-cuerpo .obs-tabla-dominante { padding: 16px 14px 12px; border-radius: 12px; }
}


/* ===== MÓVIL (14/07/2026): aprovechar ancho + tabla con scroll en la tarjeta ===== */
@media (max-width: 600px){
  /* menos gutter lateral: el cuerpo usa casi todo el ancho del teléfono */
  .obs-scope{ padding-left: 0 !important; padding-right: 0 !important; }
  .obs-shell--article{ padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 720px){
  /* la tarjeta de la tabla es el contenedor con scroll horizontal limpio */
  .obs-articulo-cuerpo .obs-tabla-dominante{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .obs-articulo-cuerpo .obs-tabla-dominante .obs-tabla-comparativa{ min-width: 460px; font-size: 12.5px; }
  .obs-articulo-cuerpo .obs-tabla-dominante .obs-tabla-comparativa th,
  .obs-articulo-cuerpo .obs-tabla-dominante .obs-tabla-comparativa td{ padding: 8px 10px; }
}


/* ===== Ampliar hero/infografía (14/07/2026) ===== */
.obs-art-herofig{position:relative}
.obs-art-herofig::after{content:'\2922 Ampliar';position:absolute;bottom:10px;right:10px;background:rgba(15,23,42,.72);color:#fff;font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;pointer-events:none;letter-spacing:.02em}
.obs-art-hero{cursor:zoom-in}
.obs-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.94);display:none}
.obs-lightbox.is-open{display:block}
.obs-lightbox__scroll{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:flex-start;justify-content:center;padding:16px;touch-action:pinch-zoom}
.obs-lightbox__scroll img{max-width:100%;height:auto;margin:auto;border-radius:8px}
@media(min-width:900px){.obs-lightbox__scroll img{max-width:1200px}}
.obs-lightbox__close{position:fixed;top:10px;right:14px;z-index:2;background:rgba(255,255,255,.16);color:#fff;border:0;font-size:30px;line-height:1;width:46px;height:46px;border-radius:50%;cursor:pointer}

/* Hero infografía móvil: respeta el aspecto natural del retrato */
@media (max-width:640px){ .obs-art-herofig .obs-art-hero{ height:auto !important; aspect-ratio:auto !important; } /*obs-art-hero--movil-aspect*/ }