/* Lo que añade el blog del CRM a los artículos: las cajas (descargable y
   llamada a la acción), las preguntas frecuentes y el formulario de descarga.
   Lo sube el CRM al publicar (comercial/crm/src/lib/blog/web): no se edita aquí. */

.art-body .art-caja { display: flex; gap: var(--space-5); align-items: center; margin-top: var(--space-7); padding: var(--space-6); background: var(--surface-sunken); border-radius: var(--radius-lg); border: 1px solid var(--line); }
.art-body .art-caja + * { margin-top: var(--space-7); }
.art-body .art-caja-img { flex: 0 0 160px; }
.art-body .art-caja-img img { width: 160px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-card); background: var(--surface-raised); }
.art-body .art-caja-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.art-body .art-caja-txt p { margin: 0; font-size: 16px; line-height: 26px; }
.art-body .art-caja-tipo { font: 600 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.art-body .art-caja .art-caja-tit { font: 600 24px/30px var(--font-display); letter-spacing: -.005em; color: var(--ink-title); }
.art-body .art-caja .bl-btn { margin-top: var(--space-2); text-decoration: none; }
.art-body .art-caja a.bl-btn-primary, .dc-ok a.bl-btn-primary { color: var(--on-action); }
.art-body .art-llamada { background: var(--surface-brand); border-color: var(--surface-brand); }
.art-body .art-llamada .art-caja-tit, .art-body .art-llamada p { color: var(--ink-on-brand); }
.art-body .art-llamada p:not(.art-caja-tit) { color: var(--ink-on-brand-muted); }
@media (max-width: 600px) { .art-body .art-caja { flex-direction: column; align-items: stretch; padding: var(--space-5); } .art-body .art-caja-img { flex-basis: auto; } .art-body .art-caja-img img { width: 120px; } }

.art-body .art-faq { margin-top: var(--space-8); }
.art-body .art-faq details { border-bottom: 1px solid var(--line); padding: var(--space-4) 0; }
.art-body .art-faq details:first-of-type { margin-top: var(--space-4); border-top: 1px solid var(--line); }
.art-body .art-faq summary { cursor: pointer; font: 600 18px/28px var(--font-sans); color: var(--ink-title); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.art-body .art-faq summary::-webkit-details-marker { display: none; }
.art-body .art-faq summary::after { content: "+"; font-weight: 400; color: var(--ink-muted); }
.art-body .art-faq details[open] summary::after { content: "–"; }
.art-body .art-faq details p { margin: var(--space-3) 0 0; font-size: 17px; line-height: 28px; }

.dc-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; border: 0; border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-card); background: var(--surface-raised); color: var(--ink); }
.dc-dlg::backdrop { background: rgba(10, 20, 40, .55); }
.dc-in { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.dc-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.dc-cab b { font: 600 22px/28px var(--font-display); color: var(--ink-title); }
.dc-cab span { display: block; font: 400 15px/22px var(--font-sans); color: var(--ink-muted); margin-top: var(--space-1); }
.dc-cerrar { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-muted); padding: 0 var(--space-1); }
.dc-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dc-botones { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
.dc-err { font: 500 15px/22px var(--font-sans); color: var(--danger); min-height: 0; margin: 0; }
.dc-ok { padding: var(--space-5); border-radius: var(--radius-md); background: var(--success-soft); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.dc-ok b { font: 600 18px/26px var(--font-sans); color: var(--ink-title); }
.dc-ok p { margin: 0; font-size: 15px; line-height: 22px; }
.dc-ok .bl-btn { text-decoration: none; }
@media (max-width: 600px) { .dc-in .fm-row2 { grid-template-columns: minmax(0, 1fr); } }