/* Estilo de las páginas de contenido (artículos).
   Compartido para no repetirlo en cada página. */

.art { padding: 56px 0 80px; }
.art .container { max-width: 800px; }
.art-volver { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--gray-500); margin-bottom: 26px; }
.art h1 { font-size: 2.1rem; color: var(--primary); line-height: 1.25; margin-bottom: 14px; }
.art-entradilla { font-size: 1.05rem; line-height: 1.7; color: var(--gray-600); margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--gray-200); }
.art h2 { font-size: 1.3rem; color: var(--primary); margin: 42px 0 14px; }
.art p { font-size: 0.97rem; line-height: 1.78; color: var(--gray-600); margin-bottom: 15px; }
.art ul { margin: 0 0 18px 22px; list-style: disc; }
.art li { font-size: 0.97rem; line-height: 1.75; color: var(--gray-600); margin-bottom: 10px; display: list-item; }
.art li strong { color: var(--primary); }
.art-nota { background: var(--gray-50); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 20px 24px; margin: 32px 0; }
.art-nota p { margin: 0; font-size: 0.92rem; }
.art-cta { background: var(--primary); border-radius: var(--radius-lg); padding: 36px; text-align: center; margin-top: 48px; }
.art-cta h3 { color: #fff; font-size: 1.25rem; margin-bottom: 10px; }
.art-cta p { color: rgba(255,255,255,.75); margin-bottom: 22px; font-size: 0.92rem; }
.footer-legal-note { font-size: 0.72rem; line-height: 1.6; color: rgba(255,255,255,0.65); margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.art-mas { margin-top: 32px; font-size: 0.92rem; }
.art-mas a { color: var(--accent); font-weight: 600; }

/* Ruta de navegación visible (coincide con el BreadcrumbList de cada página) */
.art-migas { font-size: 0.8rem; color: var(--gray-500); margin-bottom: 22px; }
.art-migas ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.art-migas li { font-size: 0.8rem; margin: 0; color: var(--gray-500); }
.art-migas li + li::before { content: "›"; margin-right: 6px; color: var(--gray-400); }
.art-migas a { color: var(--gray-500); }
.art-migas a:hover { color: var(--primary); }

/* Tablas de amparos, porcentajes y requisitos */
.art-tabla { overflow-x: auto; margin: 8px 0 24px; }
.art-tabla table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.art-tabla th { text-align: left; background: var(--gray-50); color: var(--primary); font-weight: 600; padding: 10px 12px; border-bottom: 2px solid var(--gray-200); }
.art-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--gray-200); color: var(--gray-600); vertical-align: top; line-height: 1.6; }

/* Preguntas frecuentes desplegables */
.art-faq { margin: 8px 0 24px; border-top: 1px solid var(--gray-200); }
.art-faq details { border-bottom: 1px solid var(--gray-200); }
.art-faq summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; position: relative; font-weight: 600; color: var(--primary); font-size: 0.97rem; line-height: 1.5; }
.art-faq summary::-webkit-details-marker { display: none; }
.art-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 1.2rem; color: var(--accent); }
.art-faq details[open] summary::after { content: "−"; }
.art-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.art-faq details > div { padding: 0 0 12px; }

/* Guías relacionadas: enlazado interno entre páginas del mismo tema */
.art-relacionadas { margin-top: 44px; padding: 24px; border: 1px solid var(--gray-200); border-radius: var(--radius-md, 10px); }
.art-relacionadas h2 { margin-top: 0; font-size: 1.05rem; }
.art-relacionadas ul { margin-bottom: 0; }
.art-relacionadas a { color: var(--primary); font-weight: 600; }


/* Fecha de actualización visible (Google la usa como señal de vigencia) */
.art-fecha { font-size: .8rem; color: var(--gray-500); margin-top: -24px; margin-bottom: 28px; }

/* Enlaces dentro del texto: subrayados y en color de alto contraste (WCAG AA) */
.art p a, .art li a, .art td a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.art-mas a { color: var(--primary); text-decoration: underline; }

/* Fuentes oficiales y autoría: señales de confianza para temas legales y financieros */
.art-fuentes { font-size: .88rem; }
.art-fuentes li { font-size: .88rem; }
.art-autor { font-size: .85rem; color: var(--gray-500); border-top: 1px solid var(--gray-200); padding-top: 14px; margin-top: 18px; }