/* Iurefficient — estilos de páginas legales y 404 (antes inline en legal/*.html) */
.legal-page {
    padding: calc(80px + var(--spacing-3xl)) 0 var(--spacing-4xl);
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-header {
    margin-bottom: var(--spacing-3xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 1px solid var(--gray-200);
}

.legal-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: var(--spacing-md);
}

.legal-meta {
    color: var(--gray-500);
    font-size: 0.9375rem;
}

.legal-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-md);
}

.legal-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
}

.legal-content p {
    color: var(--gray-600);
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.legal-content ul, .legal-content ol {
    color: var(--gray-600);
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-xl);
}

.legal-content li {
    margin-bottom: var(--spacing-sm);
    line-height: 1.7;
}

.legal-content a {
    color: var(--primary-500);
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-toc {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.legal-toc h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--spacing-md);
}

.legal-toc ol {
    padding-left: var(--spacing-lg);
}

.legal-toc li {
    margin-bottom: var(--spacing-xs);
}

.legal-toc a {
    color: var(--gray-600);
    font-size: 0.9375rem;
}

.highlight-box {
    background: var(--primary-50, #eef2ff);
    border-left: 4px solid var(--primary-500);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.highlight-box p {
    margin-bottom: 0;
    color: var(--gray-700);
}

.warning-box {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.warning-box p {
    margin-bottom: 0;
    color: var(--gray-700);
}

/* Citas del editor visual = recuadros destacados; último párrafo = letra pequeña */
.legal-content blockquote { background: var(--primary-50, #eef2ff); border-left: 4px solid var(--primary-500); padding: var(--spacing-lg); margin: var(--spacing-xl) 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.legal-content blockquote p { margin-bottom: 0; color: var(--gray-700); }
.legal-content blockquote.warning-box { background: #fef3c7; border-left-color: #f59e0b; }
.legal-content > p.legal-fine, .legal-content > p:last-child { margin-top: var(--spacing-3xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--gray-200); font-size: 0.875rem; color: var(--gray-500); }
.page-404 .legal-content .btn { margin: 0 .25rem .5rem; }

/* ---- Páginas libres (/pages/), artículos y proyectos: reutilizan la tipografía de arriba ---- */
.legal-header-center { text-align: center; }
.page-hero { margin: 0 0 var(--spacing-2xl); border-radius: var(--radius-lg); overflow: hidden; }
.page-hero img { display: block; width: 100%; height: auto; }
.legal-content .page-lead { font-size: 1.125rem; color: var(--gray-700); }
.legal-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.legal-content iframe { max-width: 100%; }
.page-tags span { display: inline-block; background: var(--gray-100); color: var(--gray-600); border-radius: 999px; padding: .2rem .75rem; font-size: .8125rem; margin: 0 .35rem .35rem 0; }
.page-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--spacing-md); background: var(--gray-50); border-radius: var(--radius-lg); padding: var(--spacing-xl); margin-bottom: var(--spacing-2xl); }
.page-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); margin-bottom: .25rem; }
.page-facts dd { margin: 0; color: var(--gray-800); font-weight: 600; }
.page-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-md); margin: var(--spacing-2xl) 0; }
.page-gallery figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; }
.page-gallery img { display: block; width: 100%; height: auto; }
.page-cta { text-align: center; background: var(--gray-50); border-radius: var(--radius-lg); padding: var(--spacing-2xl); margin-top: var(--spacing-3xl); }
.legal-content .page-cta h2 { margin-top: 0; }
.legal-content .page-cta p { margin-bottom: var(--spacing-lg); }
.legal-content > .page-cta + p, .legal-content > p.legal-fine { border-top: 0; }

/* Índices (/articulos/, /proyectos/) */
.page-listado .legal-header { max-width: 800px; margin-left: auto; margin-right: auto; }
.page-filter, .page-empty { text-align: center; color: var(--gray-500); }
.page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-xl); }
.page-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.page-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.page-card-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.page-card-body { padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-sm); }
.page-card-body small { color: var(--gray-500); font-size: .8125rem; }
.page-card-body small a { color: var(--primary-500); }
.page-card-body h3 { font-size: 1.125rem; font-weight: 700; margin: 0; }
.page-card-body h3 a { color: var(--gray-900); }
.page-card-body p { color: var(--gray-600); margin: 0; line-height: 1.6; }
.page-more { color: var(--primary-500); font-weight: 600; margin-top: auto; }
.page-pager { display: flex; justify-content: center; gap: .5rem; margin-top: var(--spacing-2xl); }
.page-pager a { padding: .4rem .8rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); color: var(--gray-700); }
.page-pager a.on { background: var(--primary-500); border-color: var(--primary-500); color: #fff; }

/* Contenido migrado del blog: videos, figuras, tablas, categorías del índice */
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: var(--spacing-xl) 0; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.legal-content figure { margin: var(--spacing-xl) 0; }
.legal-content figure img { display: block; margin: 0 auto; }
.legal-content figcaption { text-align: center; font-size: .875rem; color: var(--gray-500); margin-top: var(--spacing-sm); }
.legal-content hr { border: 0; border-top: 1px solid var(--gray-200); margin: var(--spacing-2xl) 0; }
.legal-content table { width: 100%; border-collapse: collapse; margin: var(--spacing-xl) 0; font-size: .9375rem; }
.legal-content th, .legal-content td { border: 1px solid var(--gray-200); padding: .6rem .8rem; text-align: left; vertical-align: top; }
.legal-content th { background: var(--gray-50); font-weight: 600; }
.legal-content .article-buttons { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.legal-content code { background: var(--gray-100); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.legal-content pre { background: var(--gray-900); color: #f3f4f6; padding: var(--spacing-lg); border-radius: var(--radius-md); overflow-x: auto; }
.legal-meta a { color: var(--primary-500); }
.page-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 auto var(--spacing-2xl); }
.page-cats a { padding: .35rem .9rem; border: 1px solid var(--gray-200); border-radius: 999px; color: var(--gray-700); font-size: .875rem; }
.page-cats a small { color: var(--gray-400); }
.page-cats a:hover { border-color: var(--primary-500); color: var(--primary-500); }
.page-cats a.on { background: var(--primary-500); border-color: var(--primary-500); color: #fff; }
.page-cats a.on small { color: rgba(255,255,255,.7); }

/* Página de búsqueda (/buscar) */
.search-form { display: flex; gap: var(--spacing-sm); margin: 0 0 var(--spacing-2xl); }
.search-form input { flex: 1; min-width: 0; font: inherit; font-size: 1.0625rem; padding: .8rem 1rem; border: 1px solid var(--gray-300, #d1d5db); border-radius: var(--radius-md); }
.search-form input:focus { outline: 2px solid var(--primary-500); border-color: transparent; }
.search-form .btn { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.search-count { color: var(--gray-500); margin-bottom: var(--spacing-xl); }
.search-results { list-style: none; padding: 0; margin: 0; }
.search-results li { padding: var(--spacing-lg) 0; border-top: 1px solid var(--gray-200); }
.search-results li:first-child { border-top: 0; }
.search-results .search-type { display: inline-block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--primary-500); margin-bottom: .25rem; }
.search-results h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .35rem; }
.search-results h3 a { color: var(--gray-900); }
.search-results h3 a:hover { color: var(--primary-500); }
.search-results p { margin: 0; color: var(--gray-600); line-height: 1.6; }
.search-results mark { background: #fef3c7; color: inherit; padding: 0 .1em; border-radius: 2px; }

/* páginas en árbol: migas de pan e hijas */
.page-crumbs { font-size: .875rem; color: var(--gray-500); margin-bottom: var(--spacing-lg); }
.page-crumbs a { color: var(--gray-600); }
.page-crumbs a:hover { color: var(--primary-500); }
.page-crumbs span { margin: 0 .2rem; }
.page-children { margin-top: var(--spacing-2xl); }