/*
articulo.css
Estilos para la página de un artículo: lectura cómoda, cuerpo Markdown y CTA al producto.
*/

/* Contenedor y encabezado */
.articulo-contenido { max-width: 760px; margin: 0 auto; }
.articulo-header { margin-bottom: var(--espacio-8); padding-bottom: var(--espacio-6); border-bottom: 2px solid var(--color-neutro-100); }
.articulo-eyebrow { margin-bottom: var(--espacio-2); color: var(--color-acento-600); }
.articulo-header h1 { margin-bottom: var(--espacio-4); }
.articulo-subtitulo { font-size: var(--tamano-h4); color: var(--texto-secundario); font-weight: var(--peso-medio); margin: 0; }

/* Cuerpo del artículo (contenido Markdown) */
.articulo-cuerpo { line-height: var(--linea-relajada); }
.articulo-cuerpo h1, .articulo-cuerpo h2, .articulo-cuerpo h3, .articulo-cuerpo h4, .articulo-cuerpo h5, .articulo-cuerpo h6 { margin-top: var(--espacio-10); margin-bottom: var(--espacio-4); }
.articulo-cuerpo h2 { color: var(--color-primario-900); }
.articulo-cuerpo h3 { color: var(--color-primario-800); }
.articulo-cuerpo p { margin-bottom: var(--espacio-4); }
.articulo-cuerpo ul, .articulo-cuerpo ol { margin-bottom: var(--espacio-4); padding-left: var(--espacio-8); }
.articulo-cuerpo li { margin-bottom: var(--espacio-2); }
.articulo-cuerpo strong { color: var(--color-primario-700); font-weight: var(--peso-semibold); }
.articulo-cuerpo em { font-style: italic; }
.articulo-cuerpo blockquote { border-left: 4px solid var(--color-primario-500); padding-left: var(--espacio-4); margin: var(--espacio-6) 0; color: var(--texto-secundario); font-style: italic; }
.articulo-cuerpo code { background-color: var(--fondo-terciario); padding: var(--espacio-1) var(--espacio-2); border-radius: var(--radio-sm); font-family: var(--fuente-monoespaciada); font-size: 0.9em; }
.articulo-cuerpo pre { background-color: var(--color-neutro-900); color: var(--texto-inverso); padding: var(--espacio-4); border-radius: var(--radio-md); overflow-x: auto; margin-bottom: var(--espacio-4); }
.articulo-cuerpo pre code { background-color: transparent; padding: 0; }
.articulo-cuerpo table { width: 100%; border-collapse: collapse; margin-bottom: var(--espacio-6); }
.articulo-cuerpo th, .articulo-cuerpo td { border: 1px solid var(--color-neutro-200); padding: var(--espacio-3); text-align: left; }
.articulo-cuerpo th { background-color: var(--fondo-secundario); font-weight: var(--peso-semibold); }
.articulo-cuerpo tr:nth-child(even) { background-color: var(--fondo-secundario); }

/* CTA al producto */
.articulo-cta { background: linear-gradient(135deg, var(--color-primario-700) 0%, var(--color-primario-900) 100%); border-radius: var(--radio-xxl); padding: var(--espacio-10) var(--espacio-6); text-align: center; margin: var(--espacio-12) 0; }
.articulo-cta h3 { color: var(--texto-inverso); margin-bottom: var(--espacio-3); }
.articulo-cta p { color: var(--color-primario-100); max-width: 520px; margin: 0 auto var(--espacio-6); }
.articulo-cta .btn-comprar { box-shadow: var(--sombra-lg); color: var(--texto-inverso);}

/* Pie del artículo */
.articulo-footer { padding-top: var(--espacio-6); border-top: 2px solid var(--color-neutro-100); }
@media (max-width: 767px) { .articulo-header h1 { font-size: var(--tamano-h2); } .articulo-subtitulo { font-size: 1.125rem; } .articulo-cta { padding: var(--espacio-8) var(--espacio-4); } }