/* =========================================================================
   Artículo (single de post) — valores 1:1 de prototipo/Articulo.dc.html.
   Todo scopeado bajo .pg-articulo; los var(--*) resuelven en tokens.css.
   ========================================================================= */

/* Barra de progreso de lectura (el ancho lo actualiza paginas/articulo.js).
   Fija en el borde superior (V2 §4): no depende de la altura del header, así
   que no flota cuando el header se compacta en móvil. */
.pg-articulo .oc-art-progreso { position: fixed; top: 0; left: 0; height: 3px; background: var(--oc-orange-600); width: 0; z-index: 65; }

/* --- Contenedor del artículo -------------------------------------------- */
.pg-articulo .oc-art { max-width: 1272px; margin: 0 auto; padding: 48px 64px 64px; }
.pg-articulo .oc-art__inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* Miga: Educación oncológica / Categoría */
.pg-articulo .oc-art__miga { font-size: 14px; color: var(--fg-3); margin: 0; }
.pg-articulo .oc-art__miga a { color: var(--fg-3); }
.pg-articulo .oc-art__miga-sep { color: var(--fg-4); }
.pg-articulo .oc-art__miga-actual { color: var(--navy); font-weight: 500; }

.pg-articulo .oc-art__titulo { font-family: var(--font-display); font-size: 38px; font-weight: 700; line-height: 1.2; color: var(--navy); margin: 0; letter-spacing: -0.02em; }

.pg-articulo .oc-art__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; font-size: 14px; color: var(--fg-3); }
.pg-articulo .oc-art__meta-sep { color: var(--fg-4); }
.pg-articulo .oc-art__autor-enlace { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.pg-articulo .oc-art__autor-enlace:hover { color: var(--oc-orange-600); }
.pg-articulo .oc-art__revision-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--fg-2); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
.pg-articulo .oc-art__revision-chip:hover { border-color: var(--border-strong); color: var(--navy); }
.pg-articulo .oc-art__revision-chip svg { flex: none; }

/* Imagen destacada: 340px de alto, esquinas 14px (image-slot rounded r=14) */
.pg-articulo .oc-art__hero { height: 340px; margin: 10px 0; }
.pg-articulo .oc-art__hero img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }

/* --- Cuerpo (the_content) ------------------------------------------------
   El prototipo maqueta el cuerpo como hijos directos del flex gap:18px:
   se replica aquí para el HTML que emite el editor. */
.pg-articulo .oc-art__contenido { display: flex; flex-direction: column; gap: 18px; }
.pg-articulo .oc-art__contenido > * { margin: 0; }
.pg-articulo .oc-art__contenido p { font-size: 16px; line-height: 1.75; color: var(--fg-2); margin: 0; }
/* Párrafo de entrada, como el lead del prototipo (17px, tinta principal) */
.pg-articulo .oc-art__contenido > p:first-child { font-size: 17px; color: var(--fg-1); }
.pg-articulo .oc-art__contenido h2 { font-size: 24px; font-weight: 700; color: var(--navy); margin: 18px 0 0; }
/* h3/h4: el prototipo no los muestra; escala coherente bajo el h2 de 24px */
.pg-articulo .oc-art__contenido h3 { font-size: 19px; font-weight: 600; color: var(--navy); margin: 12px 0 0; }
.pg-articulo .oc-art__contenido h4 { font-size: 17px; font-weight: 600; color: var(--navy); margin: 8px 0 0; }
/* Listas: sin especificación en el prototipo; misma tinta y leading del cuerpo */
.pg-articulo .oc-art__contenido ul,
.pg-articulo .oc-art__contenido ol { font-size: 16px; line-height: 1.75; color: var(--fg-2); margin: 0; padding-left: 24px; }
.pg-articulo .oc-art__contenido li { margin: 4px 0; }
/* Citas: sin especificación; recuadro coherente con la caja informativa del prototipo */
.pg-articulo .oc-art__contenido blockquote { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); padding: 20px 24px; margin: 6px 0; }
.pg-articulo .oc-art__contenido blockquote p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
/* Imágenes dentro del contenido: mismo radio que la destacada */
.pg-articulo .oc-art__contenido img { max-width: 100%; height: auto; border-radius: 14px; }
/* Los íconos del blog vienen a 1536px sin dimensiones en el HTML: sin este tope
   se estiran al ancho de lectura y abren huecos enormes (L-023). */
.pg-articulo .oc-art__contenido img:not([width]) { max-width: 112px; }
.pg-articulo .oc-art__contenido figure { margin: 6px 0; }
.pg-articulo .oc-art__contenido figcaption { font-size: 13px; color: var(--fg-3); margin-top: 8px; }

/* --- B-018: elementos heredados de la maqueta Elementor ------------------- */
/* Bloque de tratamiento ícono + título + descripción: en Elementor vivían en
   tarjetas; aquí vuelven a una fila con el ícono a la izquierda. */
.pg-articulo .oc-art__contenido .oc-trata { display: flex; align-items: flex-start; gap: 18px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px; margin: 6px 0; }
.pg-articulo .oc-art__contenido .oc-trata img { flex: none; width: 56px; height: 56px; border-radius: 0; }
.pg-articulo .oc-art__contenido .oc-trata__texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pg-articulo .oc-art__contenido .oc-trata__texto h3,
.pg-articulo .oc-art__contenido .oc-trata__texto p { margin: 0; }
/* Lazos de concientización e íconos sueltos: tamaño único, centrados
   (venían a 112/150/300/450px según cómo se subieron). */
.pg-articulo .oc-art__contenido img.oc-lazo { display: block; width: 120px; height: auto; margin: 6px auto; }
/* Ilustraciones y fotos sueltas del cuerpo: centradas y con ancho contenido. */
.pg-articulo .oc-art__contenido img.oc-ilustracion { display: block; margin: 6px auto; width: auto; max-width: min(360px, 100%); max-height: 400px; }

/* --- Cierre: descargo + CTA ---------------------------------------------- */
.pg-articulo .oc-art__cierre { border-top: 1px solid var(--border); margin-top: 28px; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pg-articulo .oc-art__descargo { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 56ch; }
.pg-articulo .oc-art__cta { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: #fff; background: var(--oc-orange-600); padding: 11px 18px; border-radius: var(--radius-md); white-space: nowrap; }
.pg-articulo .oc-art__cta:hover { background: var(--oc-orange-700); color: #fff; }

/* --- «Siga leyendo» ------------------------------------------------------- */
.pg-articulo .oc-art-mas { background: var(--bg-subtle); border-top: 1px solid var(--divider); }
.pg-articulo .oc-art-mas__inner { max-width: 1272px; margin: 0 auto; padding: 44px 64px 56px; display: flex; flex-direction: column; gap: 20px; }
.pg-articulo .oc-art-mas__titulo { font-size: 22px; font-weight: 700; color: var(--navy); margin: 0; }
.pg-articulo .oc-art-mas__grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-articulo .oc-art-mas__tarjeta { background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.pg-articulo .oc-art-mas__tarjeta:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: inherit; }
.pg-articulo .oc-art-mas__tarjeta-titulo { font-size: 16px; font-weight: 600; color: var(--navy); margin: 0; line-height: 1.35; }
.pg-articulo .oc-art-mas__tarjeta-meta { font-size: 13px; color: var(--fg-3); margin: 0; }

/* --- Caja de autor / E-E-A-T (V2 §4) ------------------------------------- */
.pg-articulo .oc-art-autor { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--neutral-0); margin-top: 12px; overflow: hidden; }
.pg-articulo .oc-art-autor__logo { position: absolute; right: 22px; top: 20px; width: 68px; opacity: 0.85; pointer-events: none; }
.pg-articulo .oc-art-autor__fila { position: relative; display: flex; gap: 22px; padding: 26px 28px; align-items: flex-start; }
.pg-articulo .oc-art-autor__foto { width: 88px; height: 88px; flex: none; border-radius: 50%; padding: 2px; border: 1.5px solid var(--oc-orange); }
.pg-articulo .oc-art-autor__foto img { display: block; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.pg-articulo .oc-art-autor__foto-slot { width: 88px; height: 88px; border-radius: 50%; }
.pg-articulo .oc-art-autor__datos { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.pg-articulo .oc-art-autor__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--oc-orange-600); margin: 0; }
.pg-articulo .oc-art-autor__nombre { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--navy); width: fit-content; line-height: 1.3; letter-spacing: -0.01em; }
.pg-articulo .oc-art-autor__nombre:hover { color: var(--oc-orange-600); }
.pg-articulo .oc-art-autor__descriptor { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.pg-articulo .oc-art-autor__credenciales { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 9px; font-size: 13px; }
.pg-articulo .oc-art-autor__registro { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-2); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; }
.pg-articulo .oc-art-autor__registro svg { flex: none; }
.pg-articulo .oc-art-autor__perfil { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--oc-orange-600); }
.pg-articulo .oc-art-autor__perfil:hover { color: var(--oc-orange-700); }
.pg-articulo .oc-art-autor__revision { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 13px 28px; background: var(--bg-subtle); border-top: 1px solid var(--border); font-size: 13px; color: var(--fg-2); }
.pg-articulo .oc-art-autor__revision > svg { flex: none; }
.pg-articulo .oc-art-autor__revision a { font-weight: 600; color: var(--navy); }
.pg-articulo .oc-art-autor__revision a:hover { color: var(--oc-orange-600); }

/* Variante institucional: artículos sin médico firmante. Sin foto ni registro,
   con el logo como marca de autoría; deja aire a la derecha para no pisarlo. */
.pg-articulo .oc-art-autor--institucional .oc-art-autor__fila { padding-right: 110px; }
.pg-articulo .oc-art-autor--institucional .oc-art-autor__nombre { display: block; }
.pg-articulo .oc-art-autor--institucional .oc-art-autor__descriptor { max-width: 60ch; }

/* --- Responsive (V2 §6): justificado con guionado, caja apilada ---------- */
@media (max-width: 900px) {
	.pg-articulo .oc-art { padding: 32px 20px 48px; }
	.pg-articulo .oc-art__titulo { font-size: 31px; }
	.pg-articulo .oc-art__contenido > p:not(:first-child) { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
	.pg-articulo .oc-art__cierre { flex-direction: column; align-items: flex-start; gap: 18px; }
	.pg-articulo .oc-art-autor__fila { flex-direction: column; padding: 22px 20px; }
	.pg-articulo .oc-art-autor--institucional .oc-art-autor__fila { padding: 22px 20px; }
	.pg-articulo .oc-art-autor--institucional .oc-art-autor__logo { position: static; margin: 20px 20px 0 auto; display: block; }
	.pg-articulo .oc-art-mas__inner { padding: 32px 20px 44px; }
	.pg-articulo .oc-art-mas__grilla { grid-template-columns: 1fr; }
}